Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 01:58:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: format code

Browse source
This commit is contained in:
chenshenhai 2021-07-09 18:19:10 +08:00
parent 016254c297
commit ad8eb94df4
35 changed files with 418 additions and 427 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/board/src/index.ts
View file

@ -51,7 +51,7 @@ class Board {
height: opts.height,
devicePixelRatio: opts.devicePixelRatio || 1,
scrollConfig: opts.scrollConfig,
})
});
this[_render]();
}
@ -137,7 +137,7 @@ class Board {
getScreenInfo(): {
size: TypeScreenSize, position: TypeScreenPosition, deviceSize: TypeScreenSize,
width: number, height: number, devicePixelRatio: number
} {
} {
return this[_screen].calcScreen();
}
@ -224,13 +224,13 @@ class Board {
this.on('move', throttle((p: TypePoint) => {
if (scrollType) {
this[_doMoveScroll](scrollType, p)
this[_doMoveScroll](scrollType, p);
}
}, 16));
this.on('moveEnd', throttle((p: TypePoint) => {
if (scrollType) {
this[_doMoveScroll](scrollType, p)
this[_doMoveScroll](scrollType, p);
}
scrollType = null;
}, 16));
@ -241,7 +241,7 @@ class Board {
const { width } = this[_opts];
let scrollX = prevScrollX;
if (!(typeof scrollX === 'number' && (scrollX > 0 || scrollX <= 0))) {
scrollX = this[_ctx].getTransform().scrollX
scrollX = this[_ctx].getTransform().scrollX;
}
const { position } = this[_screen].calcScreen();
const { xSize } = this[_scroller].calc(position);
@ -254,7 +254,7 @@ class Board {
const { height } = this[_opts];
let scrollY = prevScrollY;
if (!(typeof scrollY === 'number' && (scrollY > 0 || scrollY <= 0))) {
scrollY = this[_ctx].getTransform().scrollY
scrollY = this[_ctx].getTransform().scrollY;
}
const { position } = this[_screen].calcScreen();
const { ySize } = this[_scroller].calc(position);

4
packages/board/src/lib/context.ts
View file

@ -40,7 +40,7 @@ class Context implements TypeContext {
}
resetSize(opts: TypeBoardSizeOptions) {
this._opts = {...this._opts, ...opts}
this._opts = {...this._opts, ...opts};
}
calcDeviceNum(num: number): number {
@ -175,7 +175,7 @@ class Context implements TypeContext {
}
createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null {
return this._ctx.createPattern(image, repetition)
return this._ctx.createPattern(image, repetition);
}
measureText(text: string): TextMetrics {

2
packages/board/src/lib/istype.ts
View file

@ -1,3 +1,3 @@
import util from '@idraw/util'
import util from '@idraw/util';
export default util.istype;

20
packages/board/src/lib/screen.ts
View file

@ -13,7 +13,7 @@ type Options = {
const _opts = Symbol('_opts');
const _ctx = Symbol('_ctx')
const _ctx = Symbol('_ctx');
export class Screen {
private [_opts]: Options;
@ -25,13 +25,13 @@ export class Screen {
}
resetSize(opts: TypeBoardSizeOptions) {
this[_opts] = {...this[_opts], ...opts}
this[_opts] = {...this[_opts], ...opts};
}
calcScreen(): {
size: TypeScreenSize, position: TypeScreenPosition, deviceSize: TypeScreenSize,
width: number, height: number, devicePixelRatio: number
} {
} {
const scaleRatio = this[_ctx].getTransform().scale;
const {
width, height, contextWidth, contextHeight,
@ -43,25 +43,25 @@ export class Screen {
// make context center
this[_ctx].setTransform({
scrollX: (width - contextWidth * scaleRatio) / 2,
})
});
}
if (contextHeight * scaleRatio <= height) {
// make context center
this[_ctx].setTransform({
scrollY: (height - contextHeight * scaleRatio) / 2,
})
});
}
if (contextWidth * scaleRatio >= width && this[_ctx].getTransform().scrollX > 0) {
this[_ctx].setTransform({
scrollX: 0,
})
});
}
if (contextHeight * scaleRatio >= height && this[_ctx].getTransform().scrollY > 0) {
this[_ctx].setTransform({
scrollY: 0,
})
});
}
const { scrollX: _scrollX, scrollY: _scrollY } = this[_ctx].getTransform();
@ -70,12 +70,12 @@ export class Screen {
if (_scrollX < 0 && Math.abs(_scrollX) > Math.abs(contextWidth * scaleRatio - width)) {
this[_ctx].setTransform({
scrollX: 0 - Math.abs(contextWidth * scaleRatio - width)
})
});
}
if (_scrollY < 0 && Math.abs(_scrollY) > Math.abs(contextHeight * scaleRatio - height)) {
this[_ctx].setTransform({
scrollY: 0 - Math.abs(contextHeight * scaleRatio - height)
})
});
}
// result size
@ -110,7 +110,7 @@ export class Screen {
}
calcScreenScroll( start: number, end: number, sliderSize: number, limitLen: number, moveDistance: number
): number {
): number {
let scrollDistance = start;
let scrollLen = limitLen - sliderSize;
if (start <= 0 && end <= 0) {

6
packages/board/src/lib/scroller.ts
View file

@ -22,7 +22,7 @@ type TypePrivateOptions = TypeOptions & {
const defaultScrollConfig = {
lineWidth: 12,
color: '#a0a0a0'
}
};
export class Scroller {
@ -123,7 +123,7 @@ export class Scroller {
}
getLineWidth(): number {
let lineWidth = this._opts.scrollConfig.lineWidth;
const lineWidth = this._opts.scrollConfig.lineWidth;
return lineWidth;
}
@ -202,7 +202,7 @@ function drawBox(
r = Math.min(r, w / 2, h / 2);
if (w < r * 2 || h < r * 2) {
r = 0;
};
}
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);

2
packages/board/src/lib/watcher.ts
View file

@ -32,7 +32,7 @@ export class Watcher {
canvas.addEventListener('mousedown', this._listenMoveStart.bind(this), true);
canvas.addEventListener('mousemove', this._listenMove.bind(this), true);
canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), true);
canvas.addEventListener('mouseleave', this._listenMoveEnd.bind(this), true)
canvas.addEventListener('mouseleave', this._listenMoveEnd.bind(this), true);
canvas.addEventListener('wheel', this._listenWheel.bind(this), true);
canvas.addEventListener('touchstart', this._listenMoveStart.bind(this), true);

2
packages/board/src/names.ts
View file

@ -22,4 +22,4 @@ export {
_originCtx, _watcher, _render, _parsePrivateOptions, _scroller,
_initEvent, _doScrollX, _doScrollY, _doMoveScroll, _resetContext,
_screen,
}
};

2
packages/core/examples/features/css/index.css
View file

@ -55,7 +55,7 @@ html, body {
.elem-item {
height: 32px;
width: 200px;
width: 240px;
border: 1px solid #999999;
border-bottom: none;
line-height: 30px;

43
packages/core/examples/features/lib/data/circle.js
View file

@ -1,56 +1,53 @@
const data = {
// bgColor: '#ffffff',
elements: [
{
name: 'rect-001',
name: "rect-001",
x: 10,
y: 10,
w: 200,
h: 100,
type: 'circle',
type: "circle",
desc: {
color: '#f0f0f0',
}
color: "#f0f0f0",
},
},
{
name: 'rect-002',
name: "rect-002",
x: 80,
y: 80,
w: 200,
h: 120,
// angle: 30,
type: 'rect',
type: "rect",
desc: {
color: '#cccccc',
}
color: "#cccccc",
},
},
{
name: 'rect-003',
name: "rect-003",
x: 160,
y: 160,
w: 200,
h: 20,
type: 'rect',
type: "rect",
angle: 80,
desc: {
color: '#c0c0c0',
}
color: "#c0c0c0",
},
},
{
name: 'rect-004',
name: "rect-004",
x: 400 - 10,
y: 300 - 10,
w: 200,
h: 100,
type: 'rect',
type: "rect",
desc: {
color: '#e0e0e0',
}
}
]
}
color: "#e0e0e0",
},
},
],
};
export default data;
export default data;

63
packages/core/examples/features/lib/data/image.js
View file

@ -1,25 +1,24 @@
const data = {
// bgColor: '#ffffff',
elements: [
{
name: 'image-001',
name: "image-001",
x: 10,
y: 10,
w: 200,
h: 100,
type: 'image',
type: "image",
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
borderColor: "#bd0b64",
// angle: 30,
// angle: 0,
desc: {
src: './../images/computer.png',
}
src: "./../images/computer.png",
},
},
{
name: 'image-002',
name: "image-002",
x: 80,
y: 80,
w: 200,
@ -27,60 +26,58 @@ const data = {
// angle: 30,
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
type: 'image',
borderColor: "#bd0b64",
type: "image",
desc: {
src: './../images/chart.png',
}
src: "./../images/chart.png",
},
},
{
name: 'image-003',
name: "image-003",
x: 160,
y: 160,
w: 200,
h: 20,
type: 'image',
type: "image",
angle: 80,
desc: {
src: './../images/phone.png',
}
src: "./../images/phone.png",
},
},
{
name: 'image-004',
name: "image-004",
x: 400 - 10,
y: 300 - 10,
w: 100,
h: 100,
type: 'image',
type: "image",
desc: {
src: './../images/building-001.png',
}
src: "./../images/building-001.png",
},
},
{
name: 'image-004',
name: "image-004",
x: 400 - 40,
y: 300 - 40,
w: 100,
h: 100,
type: 'image',
type: "image",
desc: {
src: './../images/building-002.png',
}
src: "./../images/building-002.png",
},
},
{
name: 'image-004',
name: "image-004",
x: 400 - 100,
y: 300 - 100,
w: 100,
h: 100,
type: 'image',
type: "image",
desc: {
src: './../images/building-003.png',
}
}
]
}
src: "./../images/building-003.png",
},
},
],
};
export default data;
export default data;

31
packages/core/examples/features/lib/data/index.js
View file

@ -1,19 +1,19 @@
import dataRect from './rect.js';
import dataImage from './image.js';
import dataSVG from './svg.js';
import dataText from './text.js';
import dataRect from "./rect.js";
import dataImage from "./image.js";
import dataSVG from "./svg.js";
import dataText from "./text.js";
const url = new URLSearchParams(window.location.search);
const dataMap = {
'rect': dataRect,
'image': dataImage,
'svg': dataSVG,
'text': dataText
}
rect: dataRect,
image: dataImage,
svg: dataSVG,
text: dataText,
};
export function getData() {
return dataMap[getPageName()] || dataMap[url.get('data')] || dataMap['rect'];
return dataMap[getPageName()] || dataMap[url.get("data")] || dataMap["rect"];
}
function getPageName() {
@ -22,16 +22,15 @@ function getPageName() {
// const page = reg.exec(pathname)?.groups?.pageName || '';
// return page;
const pathname = window.location.pathname || '';
const list = pathname.split('/');
let pageName = list.pop() || '';
pageName = pageName.replace(/\.html$/ig, '');
const pathname = window.location.pathname || "";
const list = pathname.split("/");
let pageName = list.pop() || "";
pageName = pageName.replace(/\.html$/gi, "");
return pageName;
// return getQueryString('data') || 'rect';
}
// function getQueryString(name) {
// let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
// let r = window.location.search.substr(1).match(reg);
@ -39,4 +38,4 @@ function getPageName() {
// return decodeURIComponent(r[2]);
// };
// return null;
// }
// }

52
packages/core/examples/features/lib/data/rect.js
View file

@ -1,68 +1,66 @@
const data = {
// bgColor: '#ffffff',
elements: [
{
name: 'rect-001',
name: "rect-001",
x: 10,
y: 10,
w: 200,
h: 100,
type: 'rect',
type: "rect",
lock: true,
desc: {
color: '#f0f0f0',
color: "#f0f0f0",
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
}
borderColor: "#bd0b64",
},
},
{
name: 'rect-002',
name: "rect-002",
x: 80,
y: 80,
w: 200,
h: 120,
// angle: 30,
type: 'rect',
type: "rect",
desc: {
color: '#cccccc',
color: "#cccccc",
borderRadius: 60,
borderWidth: 10,
borderColor: '#bd0b64',
}
borderColor: "#bd0b64",
},
},
{
name: 'rect-003',
name: "rect-003",
x: 160,
y: 160,
w: 200,
h: 20,
type: 'rect',
type: "rect",
angle: 80,
desc: {
color: '#c0c0c0',
color: "#c0c0c0",
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
}
borderColor: "#bd0b64",
},
},
{
name: 'rect-004',
name: "rect-004",
x: 400 - 10,
y: 300 - 10,
w: 200,
h: 100,
type: 'rect',
type: "rect",
desc: {
color: '#e0e0e0',
color: "#e0e0e0",
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',
}
}
]
}
borderColor: "#bd0b64",
},
},
],
};
export default data;
export default data;

35
packages/core/examples/features/lib/data/svg.js
View file

@ -1,58 +1,55 @@
const data = {
// bgColor: '#ffffff',
elements: [
{
name: 'svg-001',
name: "svg-001",
x: 10,
y: 10,
w: 200,
h: 100,
type: 'svg',
type: "svg",
// angle: 30,
// angle: 0,
desc: {
svg: `<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>`,
}
},
},
{
name: 'svg-002',
name: "svg-002",
x: 80,
y: 80,
w: 200,
h: 120,
// angle: 30,
type: 'svg',
type: "svg",
desc: {
svg: '<svg t="1622524813445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8606" width="200" height="200"><path d="M852.6 367.6c16.3-36.9 32.1-90.7 32.1-131.8 0-109.1-119.5-147.6-314.5-57.9-161.4-10.8-316.8 110.5-355.6 279.7 46.3-52.3 117.4-123.4 183-151.7C316.1 378.3 246.7 470 194 565.6c-31.1 56.9-66 148.8-66 217.5 0 147.9 139.3 129.8 270.4 63 47.1 23.1 99.8 23.4 152.5 23.4 145.7 0 276.4-81.4 325.2-219H694.9c-78.8 132.9-295.2 79.5-295.2-71.2h493.2c9.6-65.4-2.5-143.6-40.3-211.7zM224.8 648.3c26.6 76.7 80.6 143.8 150.4 185-133.1 73.4-259.9 43.6-150.4-185z m174-163.3c3-82.7 75.4-142.3 156-142.3 80.1 0 153 59.6 156 142.3h-312z m276.8-281.4c32.1-15.4 72.8-33 108.8-33 47.1 0 81.4 32.6 81.4 80.6 0 30-11.1 73.5-21.9 101.8-39.3-63.5-98.9-122.4-168.3-149.4z" p-id="8607" fill="#2aa515"></path></svg>',
}
},
},
{
name: 'svg-003',
name: "svg-003",
x: 160,
y: 160,
w: 200,
h: 200,
type: 'svg',
type: "svg",
angle: 80,
desc: {
svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>',
}
},
},
{
name: 'svg-004',
name: "svg-004",
x: 400 - 10,
y: 300 - 100,
w: 200,
h: 200,
type: 'svg',
type: "svg",
desc: {
svg: '<svg t="1622524892065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9337" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="9338"></path></svg>',
}
}
]
}
},
},
],
};
export default data;
export default data;

69
packages/core/examples/features/lib/data/text.js
View file

@ -1,80 +1,77 @@
const data = {
// bgColor: '#ffffff',
elements: [
{
name: 'text-001',
name: "text-001",
x: 10,
y: 10,
w: 200,
h: 100,
type: 'text',
type: "text",
desc: {
fontSize: 20,
color: '#333333',
text: '生活就像海洋，只有意志坚强的人，才能到达彼岸。',
fontFamily: '',
color: "#333333",
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
fontFamily: "",
borderRadius: 20,
borderWidth: 2,
borderColor: '#bd0b64',
}
borderColor: "#bd0b64",
},
},
{
name: 'text-002',
name: "text-002",
x: 80,
y: 80,
w: 200,
h: 120,
// angle: 30,
type: 'text',
type: "text",
desc: {
fontSize: 20,
text: 'Hello Text',
color: '#666666',
text: "Hello Text",
color: "#666666",
borderRadius: 60,
borderWidth: 10,
borderColor: '#bd0b64',
}
borderColor: "#bd0b64",
},
},
{
name: 'text-003',
name: "text-003",
x: 160,
y: 160,
w: 200,
h: 100,
type: 'text',
type: "text",
desc: {
fontSize: 20,
color: '#333333',
text: '生活就像海洋，只有意志坚强的人，才能到达彼岸。',
fontFamily: '',
textAlign: 'right',
color: "#333333",
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
fontFamily: "",
textAlign: "right",
borderRadius: 20,
borderWidth: 2,
borderColor: '#bd0b64',
}
borderColor: "#bd0b64",
},
},
{
name: 'text-004',
name: "text-004",
x: 400 - 10,
y: 300 - 10,
w: 200,
h: 100,
type: 'text',
type: "text",
desc: {
fontSize: 20,
color: '#333333',
text: '生活就像海洋，只有意志坚强的人，才能到达彼岸。',
fontFamily: '',
textAlign: 'left',
color: "#333333",
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
fontFamily: "",
textAlign: "left",
borderRadius: 20,
borderWidth: 2,
borderColor: '#bd0b64',
}
}
]
}
borderColor: "#bd0b64",
},
},
],
};
export default data;
export default data;

1
packages/core/examples/features/lib/element.js
View file

@ -21,6 +21,7 @@ function renderElemens(core) {
<span class="elem-item-name" data-elem-name="${ele.uuid || ''}">${ele.name || 'Unnamed'}</span>
<span class="elem-item-btn ${i === 0 ? 'btn-hidden' : ''}" data-elem-btn-up="${ele.uuid || ''}">Up</span>
<span class="elem-item-btn ${i === elems.length - 1 ? 'btn-hidden' : ''}" data-elem-btn-down="${ele.uuid || ''}">Down</span>
<span class="elem-item-btn" data-elem-btn-lock="${ele.uuid || ''}">Lock</span>
</div>
`);
}

2
packages/core/examples/features/lib/main.js
View file

@ -11,7 +11,7 @@ const defaultConf = {
scale: 1,
scrollX: 0,
scrollY: 0,
}
};
const core = new Core(mount, {
width: 600,
height: 400,

43
packages/core/examples/test/data.js
View file

File diff suppressed because one or more lines are too long

2
packages/core/src/constant/element.ts
View file

@ -4,7 +4,7 @@ const elementTypes = {
'rect': {}, // TODO
'image': {}, // TODO
'svg': {}, // TODO
}
};
export const elementNames = Object.keys(elementTypes);

368
packages/core/src/index.ts
View file

@ -14,7 +14,13 @@ import { CoreEvent, TypeCoreEventArgMap } from './lib/core-event';
import { parseData } from './lib/parse';
import is, { TypeIs } from './lib/is';
import check, { TypeCheck } from './lib/check';
import * as names from './names';
import {
_board, _data, _opts, _config, _renderer, _element, _helper, _hasInited,
_hasInitedData, _mode, _selectedUUID, _selectedUUIDList, _prevPoint,
_selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint,
_handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements,
_transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
} from './names';
import { Mode, CursorStatus } from './constant/static';
const { time } = util;
@ -23,258 +29,258 @@ const { createUUID } = util.uuid;
class Core {
private [names._board]: Board;
private [names._data]: TypeData;
private [names._opts]: TypeCoreOptions;
private [names._config]: TypeConfigStrict;
private [names._renderer]: Renderer;
private [names._element]: Element;
private [names._helper]: Helper;
private [names._mapper]: Mapper;
private [names._hasInited] = false;
private [names._hasInitedData] = false;
private [names._mode]: Mode = Mode.NULL;
private [names._coreEvent]: CoreEvent = new CoreEvent();
private [names._selectedUUID]: string | null = null;
private [names._selectedUUIDList]: string[] = [];
private [names._prevPoint]: TypePoint | null = null;
private [names._selectedDotDirection]: TypeHelperWrapperDotDirection | null = null;
private [names._onlyRender]: boolean = false;
private [names._cursorStatus]: CursorStatus = CursorStatus.NULL;
private [_board]: Board;
private [_data]: TypeData;
private [_opts]: TypeCoreOptions;
private [_config]: TypeConfigStrict;
private [_renderer]: Renderer;
private [_element]: Element;
private [_helper]: Helper;
private [_mapper]: Mapper;
private [_hasInited] = false;
private [_hasInitedData] = false;
private [_mode]: Mode = Mode.NULL;
private [_coreEvent]: CoreEvent = new CoreEvent();
private [_selectedUUID]: string | null = null;
private [_selectedUUIDList]: string[] = [];
private [_prevPoint]: TypePoint | null = null;
private [_selectedDotDirection]: TypeHelperWrapperDotDirection | null = null;
private [_onlyRender] = false;
private [_cursorStatus]: CursorStatus = CursorStatus.NULL;
static is: TypeIs = is;
static check: TypeCheck = check;
constructor(mount: HTMLDivElement, opts: TypeCoreOptions, config?: TypeConfig) {
this[names._data] = { elements: [] };
this[names._opts] = opts;
this[names._onlyRender] = opts.onlyRender === true;
this[names._config] = mergeConfig(config || {});
this[_data] = { elements: [] };
this[_opts] = opts;
this[_onlyRender] = opts.onlyRender === true;
this[_config] = mergeConfig(config || {});
this[names._board] = new Board(mount, {
...this[names._opts],
this[_board] = new Board(mount, {
...this[_opts],
canScroll: config?.scrollWrapper?.use,
scrollConfig: {
color: config?.scrollWrapper?.color || '#a0a0a0',
lineWidth: config?.scrollWrapper?.lineWidth || 12,
}
});
this[names._renderer] = new Renderer(this[names._board]);
this[names._element] = new Element(this[names._board].getContext());
this[names._helper] = new Helper(this[names._board], this[names._config]);
this[names._mapper] = new Mapper({
board: this[names._board],
helper: this[names._helper],
element: this[names._element]
this[_renderer] = new Renderer(this[_board]);
this[_element] = new Element(this[_board].getContext());
this[_helper] = new Helper(this[_board], this[_config]);
this[_mapper] = new Mapper({
board: this[_board],
helper: this[_helper],
element: this[_element]
});
this[names._initEvent]();
this[names._hasInited] = true;
this[_initEvent]();
this[_hasInited] = true;
}
draw(): void {
const transfrom = this[names._board].getTransform();
this[names._helper].updateConfig(this[names._data], {
width: this[names._opts].width,
height: this[names._opts].height,
canScroll: this[names._opts].canScroll === true,
selectedUUID: this[names._selectedUUID],
selectedUUIDList: this[names._selectedUUIDList],
devicePixelRatio: this[names._opts].devicePixelRatio,
const transfrom = this[_board].getTransform();
this[_helper].updateConfig(this[_data], {
width: this[_opts].width,
height: this[_opts].height,
canScroll: this[_opts].canScroll === true,
selectedUUID: this[_selectedUUID],
selectedUUIDList: this[_selectedUUIDList],
devicePixelRatio: this[_opts].devicePixelRatio,
scale: transfrom.scale,
scrollX: transfrom.scrollX,
scrollY: transfrom.scrollY,
});
this[names._renderer].render(this[names._data], this[names._helper].getConfig());
this[_renderer].render(this[_data], this[_helper].getConfig());
}
resetSize(opts: TypeBoardSizeOptions) {
this[names._opts] = { ...this[names._opts], ...opts };
this[names._board].resetSize(opts);
this[_opts] = { ...this[_opts], ...opts };
this[_board].resetSize(opts);
this.draw();
}
selectElement(index: number, opts?: { useMode?: boolean }): void {
if (this[names._onlyRender] === true) return;
if (this[names._data].elements[index]) {
const uuid = this[names._data].elements[index].uuid;
if (this[_onlyRender] === true) return;
if (this[_data].elements[index]) {
const uuid = this[_data].elements[index].uuid;
if (opts?.useMode === true) {
this[names._mode] = Mode.SELECT_ELEMENT;
this[_mode] = Mode.SELECT_ELEMENT;
} else {
this[names._mode] = Mode.NULL;
this[_mode] = Mode.NULL;
}
this[names._selectedUUID] = uuid;
this[names._selectedUUIDList] = [];
this[_selectedUUID] = uuid;
this[_selectedUUIDList] = [];
this.draw();
}
}
selectElementByUUID(uuid: string, opts?: { useMode?: boolean }): void {
if (this[names._onlyRender] === true) return;
const index = this[names._helper].getElementIndexByUUID(uuid);
if (this[_onlyRender] === true) return;
const index = this[_helper].getElementIndexByUUID(uuid);
if (typeof index === 'number' && index >= 0) {
this.selectElement(index, opts);
}
}
moveDownElement(uuid: string): void {
if (this[names._onlyRender] === true) return;
const index = this[names._helper].getElementIndexByUUID(uuid);
if (typeof index === 'number' && index >= 0 && index < this[names._data].elements.length - 1) {
const temp = this[names._data].elements[index];
this[names._data].elements[index] = this[names._data].elements[index + 1];
this[names._data].elements[index + 1] = temp;
if (this[_onlyRender] === true) return;
const index = this[_helper].getElementIndexByUUID(uuid);
if (typeof index === 'number' && index >= 0 && index < this[_data].elements.length - 1) {
const temp = this[_data].elements[index];
this[_data].elements[index] = this[_data].elements[index + 1];
this[_data].elements[index + 1] = temp;
}
this[names._emitChangeData]();
this[_emitChangeData]();
this.draw();
}
moveUpElement(uuid: string): void {
if (this[names._onlyRender] === true) return;
const index = this[names._helper].getElementIndexByUUID(uuid);
if (typeof index === 'number' && index > 0 && index < this[names._data].elements.length) {
const temp = this[names._data].elements[index];
this[names._data].elements[index] = this[names._data].elements[index - 1];
this[names._data].elements[index - 1] = temp;
if (this[_onlyRender] === true) return;
const index = this[_helper].getElementIndexByUUID(uuid);
if (typeof index === 'number' && index > 0 && index < this[_data].elements.length) {
const temp = this[_data].elements[index];
this[_data].elements[index] = this[_data].elements[index - 1];
this[_data].elements[index - 1] = temp;
}
this[names._emitChangeData]();
this[_emitChangeData]();
this.draw();
}
scale(ratio: number): TypeScreenContext {
const screen = this[names._board].scale(ratio);
this[names._emitChangeScreen]();
const screen = this[_board].scale(ratio);
this[_emitChangeScreen]();
return screen;
}
scrollX(x: number): TypeScreenContext {
const screen = this[names._board].scrollX(x);
this[names._emitChangeScreen]();
const screen = this[_board].scrollX(x);
this[_emitChangeScreen]();
return screen;
}
scrollY(y: number): TypeScreenContext {
const screen = this[names._board].scrollY(y);
this[names._emitChangeScreen]();
const screen = this[_board].scrollY(y);
this[_emitChangeScreen]();
return screen;
}
getData(): TypeData {
return deepClone(this[names._data]);
return deepClone(this[_data]);
}
initData(data: any | TypeData): void {
if (this[names._hasInitedData] === true) {
if (this[_hasInitedData] === true) {
return;
}
this.setData(data);
this[names._emitChangeData]();
this[names._hasInitedData] = true;
this[_emitChangeData]();
this[_hasInitedData] = true;
}
setData(data: any | TypeData): void {
this[names._data] = this[names._element].initData(deepClone(parseData(data)));
this[_data] = this[_element].initData(deepClone(parseData(data)));
this.draw();
}
updateElement(elem: TypeElement<keyof TypeElemDesc>) {
if (this[names._onlyRender] === true) return;
if (this[_onlyRender] === true) return;
const _elem = deepClone(elem) as TypeElement<keyof TypeElemDesc>;
const data = this[names._data];
const data = this[_data];
for (let i = 0; i < data.elements.length; i++) {
if (_elem.uuid === data.elements[i]?.uuid) {
data.elements[i] = _elem;
break;
}
}
this[names._emitChangeData]();
this[_emitChangeData]();
this.draw();
}
addElement(elem: TypeElement<keyof TypeElemDesc>): string | null {
if (this[names._onlyRender] === true) return null;
if (this[_onlyRender] === true) return null;
const _elem = deepClone(elem);
_elem.uuid = createUUID();
this[names._data].elements.unshift(_elem);
this[names._emitChangeData]();
this[_data].elements.unshift(_elem);
this[_emitChangeData]();
this.draw();
return _elem.uuid;
}
deleteElement(uuid: string) {
if (this[names._onlyRender] === true) return;
const index = this[names._element].getElementIndex(this[names._data], uuid);
if (this[_onlyRender] === true) return;
const index = this[_element].getElementIndex(this[_data], uuid);
if (index >= 0) {
this[names._data].elements.splice(index, 1);
this[names._emitChangeData]();
this[_data].elements.splice(index, 1);
this[_emitChangeData]();
this.draw();
}
}
on<T extends keyof TypeCoreEventArgMap >(key: T, callback: (p: TypeCoreEventArgMap[T]) => void) {
this[names._coreEvent].on(key, callback);
this[_coreEvent].on(key, callback);
}
off<T extends keyof TypeCoreEventArgMap >(key: T, callback: (p: TypeCoreEventArgMap[T]) => void) {
this[names._coreEvent].off(key, callback);
this[_coreEvent].off(key, callback);
}
__getBoardContext(): TypeContext {
return this[names._board].getContext();
return this[_board].getContext();
}
__getDisplayContext(): CanvasRenderingContext2D {
return this[names._board].getDisplayContext()
return this[_board].getDisplayContext();
}
__getOriginContext(): CanvasRenderingContext2D {
return this[names._board].getOriginContext()
return this[_board].getOriginContext();
}
private [names._initEvent](): void {
if (this[names._onlyRender] === true) {
private [_initEvent](): void {
if (this[_onlyRender] === true) {
return;
}
if (this[names._hasInited] === true) {
if (this[_hasInited] === true) {
return;
}
this[names._board].on('point', this[names._handlePoint].bind(this));
this[names._board].on('moveStart', this[names._handleMoveStart].bind(this));
this[names._board].on('move', time.throttle(this[names._handleMove].bind(this), 16));
this[names._board].on('moveEnd', this[names._handleMoveEnd].bind(this));
this[names._board].on('hover', time.throttle(this[names._handleHover].bind(this), 32));
this[_board].on('point', this[_handlePoint].bind(this));
this[_board].on('moveStart', this[_handleMoveStart].bind(this));
this[_board].on('move', time.throttle(this[_handleMove].bind(this), 16));
this[_board].on('moveEnd', this[_handleMoveEnd].bind(this));
this[_board].on('hover', time.throttle(this[_handleHover].bind(this), 32));
}
private [names._handlePoint](point: TypePoint): void {
if (!this[names._mapper].isEffectivePoint(point)) {
private [_handlePoint](point: TypePoint): void {
if (!this[_mapper].isEffectivePoint(point)) {
return;
}
if (this[names._helper].isPointInElementList(point, this[names._data])) {
if (this[_helper].isPointInElementList(point, this[_data])) {
// Coontroll Element-List
this[names._mode] = Mode.SELECT_ELEMENT_LIST;
this[_mode] = Mode.SELECT_ELEMENT_LIST;
} else {
const [uuid, direction] = this[names._helper].isPointInElementWrapperDot(point);
const [uuid, direction] = this[_helper].isPointInElementWrapperDot(point);
if (uuid && direction) {
// Controll Element-Wrapper
this[names._mode] = Mode.SELECT_ELEMENT_WRAPPER_DOT;
this[names._selectedDotDirection] = direction;
this[names._selectedUUID] = uuid;
this[_mode] = Mode.SELECT_ELEMENT_WRAPPER_DOT;
this[_selectedDotDirection] = direction;
this[_selectedUUID] = uuid;
} else {
const [index, uuid] = this[names._element].isPointInElement(point, this[names._data]);
const [index, uuid] = this[_element].isPointInElement(point, this[_data]);
if (index >= 0) {
// Controll Element
this.selectElement(index, { useMode: true });
if (typeof uuid === 'string' && this[names._coreEvent].has('screenSelectElement')) {
this[names._coreEvent].trigger(
if (typeof uuid === 'string' && this[_coreEvent].has('screenSelectElement')) {
this[_coreEvent].trigger(
'screenSelectElement',
{ index, uuid, element: deepClone(this[names._data].elements?.[index])}
{ index, uuid, element: deepClone(this[_data].elements?.[index])}
);
this[names._emitChangeScreen]();
this[_emitChangeScreen]();
}
this[names._mode] = Mode.SELECT_ELEMENT;
this[_mode] = Mode.SELECT_ELEMENT;
} else {
// Controll Area
this[names._selectedUUIDList] = [];
this[names._mode] = Mode.SELECT_AREA;
this[_selectedUUIDList] = [];
this[_mode] = Mode.SELECT_AREA;
}
}
}
@ -282,63 +288,63 @@ class Core {
this.draw();
}
private [names._handleMoveStart](point: TypePoint): void {
this[names._prevPoint] = point;
const uuid = this[names._selectedUUID];
private [_handleMoveStart](point: TypePoint): void {
this[_prevPoint] = point;
const uuid = this[_selectedUUID];
if (this[names._mode] === Mode.SELECT_ELEMENT_LIST) {
if (this[_mode] === Mode.SELECT_ELEMENT_LIST) {
// TODO
} else if (this[names._mode] === Mode.SELECT_ELEMENT) {
if (typeof uuid === 'string' && this[names._coreEvent].has('screenMoveElementStart')) {
this[names._coreEvent].trigger('screenMoveElementStart', {
index: this[names._element].getElementIndex(this[names._data], uuid),
} else if (this[_mode] === Mode.SELECT_ELEMENT) {
if (typeof uuid === 'string' && this[_coreEvent].has('screenMoveElementStart')) {
this[_coreEvent].trigger('screenMoveElementStart', {
index: this[_element].getElementIndex(this[_data], uuid),
uuid,
x: point.x,
y: point.y
});
}
} else if (this[names._mode] === Mode.SELECT_AREA) {
this[names._helper].startSelectArea(point);
} else if (this[_mode] === Mode.SELECT_AREA) {
this[_helper].startSelectArea(point);
}
}
private [names._handleMove](point: TypePoint): void {
if (this[names._mode] === Mode.SELECT_ELEMENT_LIST) {
this[names._dragElements](this[names._selectedUUIDList], point, this[names._prevPoint]);
private [_handleMove](point: TypePoint): void {
if (this[_mode] === Mode.SELECT_ELEMENT_LIST) {
this[_dragElements](this[_selectedUUIDList], point, this[_prevPoint]);
this.draw();
this[names._cursorStatus] = CursorStatus.DRAGGING;
} else if (typeof this[names._selectedUUID] === 'string') {
if (this[names._mode] === Mode.SELECT_ELEMENT) {
this[names._dragElements]([this[names._selectedUUID] as string], point, this[names._prevPoint]);
this[_cursorStatus] = CursorStatus.DRAGGING;
} else if (typeof this[_selectedUUID] === 'string') {
if (this[_mode] === Mode.SELECT_ELEMENT) {
this[_dragElements]([this[_selectedUUID] as string], point, this[_prevPoint]);
this.draw();
this[names._cursorStatus] = CursorStatus.DRAGGING;
} else if (this[names._mode] === Mode.SELECT_ELEMENT_WRAPPER_DOT && this[names._selectedDotDirection]) {
this[names._transfromElement](this[names._selectedUUID] as string, point, this[names._prevPoint], this[names._selectedDotDirection] as TypeHelperWrapperDotDirection);
this[names._cursorStatus] = CursorStatus.DRAGGING;
this[_cursorStatus] = CursorStatus.DRAGGING;
} else if (this[_mode] === Mode.SELECT_ELEMENT_WRAPPER_DOT && this[_selectedDotDirection]) {
this[_transfromElement](this[_selectedUUID] as string, point, this[_prevPoint], this[_selectedDotDirection] as TypeHelperWrapperDotDirection);
this[_cursorStatus] = CursorStatus.DRAGGING;
}
} else if (this[names._mode] === Mode.SELECT_AREA) {
this[names._helper].changeSelectArea(point);
} else if (this[_mode] === Mode.SELECT_AREA) {
this[_helper].changeSelectArea(point);
this.draw();
}
this[names._prevPoint] = point;
this[_prevPoint] = point;
}
private [names._handleMoveEnd](point: TypePoint): void {
const uuid = this[names._selectedUUID];
private [_handleMoveEnd](point: TypePoint): void {
const uuid = this[_selectedUUID];
if (typeof uuid === 'string') {
const index = this[names._element].getElementIndex(this[names._data], uuid);
const elem = this[names._data].elements[index];
const index = this[_element].getElementIndex(this[_data], uuid);
const elem = this[_data].elements[index];
if (elem) {
if (this[names._coreEvent].has('screenMoveElementEnd')) {
this[names._coreEvent].trigger('screenMoveElementEnd', {
if (this[_coreEvent].has('screenMoveElementEnd')) {
this[_coreEvent].trigger('screenMoveElementEnd', {
index,
uuid,
x: point.x,
y: point.y
});
}
if (this[names._coreEvent].has('screenChangeElement')) {
this[names._coreEvent].trigger('screenChangeElement', {
if (this[_coreEvent].has('screenChangeElement')) {
this[_coreEvent].trigger('screenChangeElement', {
index,
uuid,
width: elem.w,
@ -346,45 +352,45 @@ class Core {
angle: elem.angle || 0
});
}
this[names._emitChangeData]();
this[_emitChangeData]();
}
} else if (this[names._mode] === Mode.SELECT_AREA) {
const uuids = this[names._helper].calcSelectedElements(this[names._data]);
} else if (this[_mode] === Mode.SELECT_AREA) {
const uuids = this[_helper].calcSelectedElements(this[_data]);
if (uuids.length > 0) {
this[names._selectedUUIDList] = uuids;
this[names._selectedUUID] = null;
this[_selectedUUIDList] = uuids;
this[_selectedUUID] = null;
} else {
this[names._mode] = Mode.NULL;
this[_mode] = Mode.NULL;
}
this[names._helper].clearSelectedArea();
this[_helper].clearSelectedArea();
this.draw();
}
this[names._selectedUUID] = null;
this[names._prevPoint] = null;
this[names._cursorStatus] = CursorStatus.NULL;
this[names._mode] = Mode.NULL;
this[_selectedUUID] = null;
this[_prevPoint] = null;
this[_cursorStatus] = CursorStatus.NULL;
this[_mode] = Mode.NULL;
}
private [names._handleHover](point: TypePoint): void {
if (this[names._mode] === Mode.SELECT_AREA) {
this[names._board].resetCursor();
} else if (this[names._cursorStatus] === CursorStatus.NULL) {
const cursor = this[names._mapper].judgePointCursor(point, this[names._data]);
this[names._board].setCursor(cursor);
private [_handleHover](point: TypePoint): void {
if (this[_mode] === Mode.SELECT_AREA) {
this[_board].resetCursor();
} else if (this[_cursorStatus] === CursorStatus.NULL) {
const cursor = this[_mapper].judgePointCursor(point, this[_data]);
this[_board].setCursor(cursor);
}
}
private [names._dragElements](uuids: string[], point: TypePoint, prevPoint: TypePoint|null): void {
private [_dragElements](uuids: string[], point: TypePoint, prevPoint: TypePoint|null): void {
if (!prevPoint) {
return;
}
uuids.forEach((uuid) => {
this[names._element].dragElement(this[names._data], uuid, point, prevPoint, this[names._board].getContext().getTransform().scale);
})
this[_element].dragElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale);
});
this.draw();
}
private [names._transfromElement](
private [_transfromElement](
uuid: string, point: TypePoint, prevPoint: TypePoint|null, direction: TypeHelperWrapperDotDirection
): null | {
width: number,
@ -394,25 +400,25 @@ class Core {
if (!prevPoint) {
return null;
}
const result = this[names._element].transformElement(this[names._data], uuid, point, prevPoint, this[names._board].getContext().getTransform().scale, direction);
const result = this[_element].transformElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale, direction);
this.draw();
return result;
}
private [names._emitChangeScreen]() {
if (this[names._coreEvent].has('changeScreen')) {
this[names._coreEvent].trigger('changeScreen', {
...this[names._board].getTransform(),
private [_emitChangeScreen]() {
if (this[_coreEvent].has('changeScreen')) {
this[_coreEvent].trigger('changeScreen', {
...this[_board].getTransform(),
...{
selectedElementUUID: this[names._selectedUUID]
selectedElementUUID: this[_selectedUUID]
}
})
});
}
}
private [names._emitChangeData]() {
if (this[names._coreEvent].has('changeData')) {
this[names._coreEvent].trigger('changeData', deepClone(this[names._data]));
private [_emitChangeData]() {
if (this[_coreEvent].has('changeData')) {
this[_coreEvent].trigger('changeData', deepClone(this[_data]));
}
}
}

4
packages/core/src/lib/check.ts
View file

@ -102,7 +102,7 @@ const check = {
imageDesc,
svgDesc,
textDesc,
}
};
type TypeCheck = {
attrs: (value: any) => boolean,
@ -114,6 +114,6 @@ type TypeCheck = {
export {
TypeCheck
}
};
export default check;

10
packages/core/src/lib/draw/base.ts
View file

@ -61,8 +61,8 @@ export function drawBoxBorder(
if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
return;
}
let bw = elem.desc.borderWidth;
let borderColor: string = '#000000';
const bw = elem.desc.borderWidth;
let borderColor = '#000000';
if (color.isColorStr(elem.desc.borderColor) === true) {
borderColor = elem.desc.borderColor as string;
}
@ -74,11 +74,11 @@ export function drawBoxBorder(
let r: number = elem.desc.borderRadius || 0;
r = Math.min(r, w / 2, h / 2);
if (r < w / 2 && r < h / 2) {
r = r + bw / 2
r = r + bw / 2;
}
ctx.beginPath();
ctx.setLineWidth(bw);
ctx.setStrokeStyle(borderColor)
ctx.setStrokeStyle(borderColor);
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
@ -86,5 +86,5 @@ export function drawBoxBorder(
ctx.arcTo(x, y, x + w, y, r);
ctx.closePath();
ctx.stroke();
})
});
}

2
packages/core/src/lib/draw/text.ts
View file

@ -70,7 +70,7 @@ export function drawText(
lines.forEach((line, i) => {
let _x = elem.x;
if (desc.textAlign === 'center') {
_x = elem.x + (elem.w - line.width) / 2
_x = elem.x + (elem.w - line.width) / 2;
} else if (desc.textAlign === 'right') {
_x = elem.x + (elem.w - line.width);
}

2
packages/core/src/lib/draw/wrapper.ts
View file

@ -116,6 +116,6 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf
ctx.stroke();
ctx.closePath();
});
})
});
}

2
packages/core/src/lib/element.ts
View file

@ -174,7 +174,7 @@ export class Element {
width: limitNum(elem.w),
height: limitNum(elem.h),
angle: limitAngle(elem.angle || 0),
}
};
}
getElementIndex(data: TypeData, uuid: string): number {

4
packages/core/src/lib/helper.ts
View file

@ -191,10 +191,10 @@ export class Helper implements TypeHelper {
endPoint: {x: end.x, y: end.y},
lineWidth: areaLineWidth / scale,
lineDash: areaLineDash.map((num) => {
return num / scale
return num / scale;
}),
color: areaColor,
}
};
}
private _updateElementIndex(data: TypeData) {

18
packages/core/src/lib/is.ts
View file

@ -5,7 +5,7 @@ const { isColorStr } = util.color;
function number(value: any) {
return (typeof value === 'number' && (value > 0 || value <= 0))
return (typeof value === 'number' && (value > 0 || value <= 0));
}
function x(value: any) {
@ -17,15 +17,15 @@ function y(value: any) {
}
function w(value: any) {
return (typeof value === 'number' && value >= 0)
return (typeof value === 'number' && value >= 0);
}
function h(value: any) {
return (typeof value === 'number' && value >= 0)
return (typeof value === 'number' && value >= 0);
}
function angle(value: any) {
return (typeof value === 'number' && value >= -360 && value <= 360)
return (typeof value === 'number' && value >= -360 && value <= 360);
}
function borderWidth(value: any) {
@ -41,15 +41,15 @@ function color(value: any) {
}
function imageURL(value: any) {
return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`))
return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`));
}
function imageBase64(value: any) {
return (typeof value === 'string' && /^(data:image\/)/.test(`${value}`))
return (typeof value === 'string' && /^(data:image\/)/.test(`${value}`));
}
function imageSrc(value: any) {
return (imageBase64(value) || imageURL(value))
return (imageBase64(value) || imageURL(value));
}
function svg(value: any) {
@ -81,7 +81,7 @@ const is: TypeIs = {
borderWidth, borderRadius, color,
imageSrc, imageURL, imageBase64, svg,
text, fontSize, lineHeight, textAlign, fontFamily,
}
};
type TypeIs = {
x: (value: any) => boolean,
@ -109,4 +109,4 @@ export default is;
export {
TypeIs,
}
};

20
packages/core/src/lib/loader.ts
View file

@ -47,7 +47,7 @@ export default class Loader {
this._waitingLoadQueue.push({
uuidQueue,
loadData,
})
});
}
}
@ -148,7 +148,7 @@ export default class Loader {
private _createEmptyLoadItem(elem: TypeElement<keyof TypeElemDesc>): TypeLoadData[string] {
let source = '';
let type: TypeLoadData[string]['type'] = elem.type as TypeLoadData[string]['type'];
const type: TypeLoadData[string]['type'] = elem.type as TypeLoadData[string]['type'];
if (elem.type === 'image') {
const _elem = elem as TypeElement<'image'>;
source = _elem.desc.src || '';
@ -163,7 +163,7 @@ export default class Loader {
source,
elemW: elem.w,
elemH: elem.h,
}
};
}
private _loadTask() {
@ -206,7 +206,7 @@ export default class Loader {
for (let i = loadUUIDList.length; i < maxParallelNum; i++) {
const uuid = uuids.shift();
if (uuid === undefined) {
break
break;
}
loadUUIDList.push(uuid);
@ -221,7 +221,7 @@ export default class Loader {
source: this._currentLoadData[uuid].source,
elemW: this._currentLoadData[uuid].elemW,
elemH: this._currentLoadData[uuid].elemH,
}
};
if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
this._status = LoaderStatus.FREE;
@ -248,7 +248,7 @@ export default class Loader {
source: this._currentLoadData[uuid].source,
elemW: this._currentLoadData[uuid].elemW,
elemH: this._currentLoadData[uuid].elemH,
}
};
if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
this._status = LoaderStatus.FREE;
@ -261,12 +261,12 @@ export default class Loader {
source: this._storageLoadData[uuid].source,
elemW: this._storageLoadData[uuid].elemW,
elemH: this._storageLoadData[uuid].elemH,
})
})
});
});
}
return false;
}
};
_loadAction();
}
@ -284,7 +284,7 @@ export default class Loader {
);
return image;
}
throw Error('Element\'s source is not support!')
throw Error('Element\'s source is not support!');
}
}

2
packages/core/src/lib/parse.ts
View file

@ -32,5 +32,5 @@ function isElement(
function isNumber(num: any) {
return (num >= 0 || num < 0)
return (num >= 0 || num < 0);
}

4
packages/core/src/lib/renderer.ts
View file

@ -34,7 +34,7 @@ export class Renderer {
});
this._loader.on('complete', (res) => {
// console.log('complete: ', res);
})
});
}
render(data: TypeData, helper: TypeHelperConfig): void {
@ -77,7 +77,7 @@ export class Renderer {
} else {
this._status = DrawStatus.FREE;
}
})
});
}
private _retainQueueOneItem() {

2
packages/core/src/names.ts
View file

@ -33,4 +33,4 @@ export {
_selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint,
_handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements,
_transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
}
};

6
packages/idraw/src/index.ts
View file

@ -85,15 +85,15 @@ class IDraw extends Core {
if (this[_doRecords].length >= this[_opts].maxRecords) {
this[_doRecords].shift();
}
this[_doRecords].push({ data, time: Date.now() })
this[_doRecords].push({ data, time: Date.now() });
this[_unDoRecords] = [];
}
private _createOpts(opts: Options): PrivateOptions {
const defaultOpts = {
maxRecords: 10,
}
return { ...defaultOpts, ...opts }
};
return { ...defaultOpts, ...opts };
}
}

2
packages/types/src/lib/core.ts
View file

@ -11,4 +11,4 @@ type TypeCoreOptions = {
export {
TypeCoreOptions
}
};

2
packages/types/src/lib/device.ts
View file

@ -7,4 +7,4 @@ type TypeDeviceSize = {
export {
TypeDeviceSize,
}
};

2
packages/types/src/lib/screen.ts
View file

@ -29,4 +29,4 @@ export {
TypeScreenPosition,
TypeScreenSize,
TypeScreenContext,
}
};

4
packages/util/src/lib/loader.ts
View file

@ -40,11 +40,11 @@ export function loadSVG(svg: string, opts?: { width: number, height: number }):
const base64: string = event?.target?.result as string;
image.onload = function() {
resolve(image);
}
};
image.src = base64;
};
reader.onerror = function(err) {
reject(err);
};
})
});
}