@idraw/renderer 0.3.0-beta.2 → 0.3.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.d.ts +11 -12
- package/dist/esm/index.js +48 -50
- package/dist/esm/lib/calculate.d.ts +3 -3
- package/dist/esm/lib/calculate.js +5 -5
- package/dist/esm/lib/diff.d.ts +6 -6
- package/dist/esm/lib/diff.js +9 -7
- package/dist/esm/lib/draw/base.d.ts +5 -5
- package/dist/esm/lib/draw/circle.d.ts +2 -2
- package/dist/esm/lib/draw/circle.js +1 -1
- package/dist/esm/lib/draw/html.d.ts +2 -2
- package/dist/esm/lib/draw/image.d.ts +2 -2
- package/dist/esm/lib/draw/index.d.ts +2 -2
- package/dist/esm/lib/draw/rect.d.ts +2 -2
- package/dist/esm/lib/draw/svg.d.ts +2 -2
- package/dist/esm/lib/draw/text.d.ts +2 -2
- package/dist/esm/lib/loader-event.d.ts +5 -5
- package/dist/esm/lib/loader.d.ts +2 -2
- package/dist/esm/lib/loader.js +22 -14
- package/dist/esm/lib/parse.d.ts +2 -2
- package/dist/esm/lib/renderer-event.d.ts +8 -8
- package/dist/esm/lib/temp.d.ts +4 -4
- package/dist/esm/lib/temp.js +1 -1
- package/dist/esm/lib/transform.d.ts +4 -4
- package/dist/esm/lib/transform.js +1 -1
- package/dist/index.global.js +376 -284
- package/dist/index.global.min.js +1 -1
- package/package.json +4 -4
- package/dist/esm/names.d.ts +0 -9
- package/dist/esm/names.js +0 -9
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IDrawData, IDrawContext } from '@idraw/types';
|
|
2
2
|
import { RendererEvent } from './lib/renderer-event';
|
|
3
|
-
import { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem } from './names';
|
|
4
3
|
type Options = {
|
|
5
4
|
width: number;
|
|
6
5
|
height: number;
|
|
@@ -9,19 +8,19 @@ type Options = {
|
|
|
9
8
|
devicePixelRatio: number;
|
|
10
9
|
};
|
|
11
10
|
export default class Renderer extends RendererEvent {
|
|
12
|
-
private
|
|
13
|
-
private
|
|
14
|
-
private
|
|
15
|
-
private
|
|
16
|
-
private
|
|
11
|
+
private _queue;
|
|
12
|
+
private _ctx;
|
|
13
|
+
private _status;
|
|
14
|
+
private _loader;
|
|
15
|
+
private _opts?;
|
|
17
16
|
constructor(opts?: Options);
|
|
18
|
-
render(target: HTMLCanvasElement |
|
|
17
|
+
render(target: HTMLCanvasElement | IDrawContext, originData: IDrawData, opts?: {
|
|
19
18
|
changeResourceUUIDs?: string[];
|
|
20
19
|
}): void;
|
|
21
|
-
getContext():
|
|
20
|
+
getContext(): IDrawContext | null;
|
|
22
21
|
thaw(): void;
|
|
23
|
-
private
|
|
24
|
-
private
|
|
25
|
-
private
|
|
22
|
+
private _freeze;
|
|
23
|
+
private _drawFrame;
|
|
24
|
+
private _retainQueueOneItem;
|
|
26
25
|
}
|
|
27
26
|
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
var _a, _b, _c;
|
|
2
1
|
import { createUUID, deepClone, Context } from '@idraw/util';
|
|
3
2
|
import { drawContext } from './lib/draw';
|
|
4
3
|
import Loader from './lib/loader';
|
|
5
4
|
import { RendererEvent } from './lib/renderer-event';
|
|
6
|
-
import { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem } from './names';
|
|
7
5
|
const { requestAnimationFrame } = window;
|
|
8
6
|
var DrawStatus;
|
|
9
7
|
(function (DrawStatus) {
|
|
@@ -15,27 +13,27 @@ var DrawStatus;
|
|
|
15
13
|
export default class Renderer extends RendererEvent {
|
|
16
14
|
constructor(opts) {
|
|
17
15
|
super();
|
|
18
|
-
this
|
|
19
|
-
this
|
|
20
|
-
this
|
|
21
|
-
this
|
|
22
|
-
this
|
|
16
|
+
this._queue = [];
|
|
17
|
+
this._ctx = null;
|
|
18
|
+
this._status = DrawStatus.NULL;
|
|
19
|
+
this._opts = opts;
|
|
20
|
+
this._loader = new Loader({
|
|
23
21
|
maxParallelNum: 6
|
|
24
22
|
});
|
|
25
|
-
this
|
|
26
|
-
this
|
|
23
|
+
this._loader.on('load', (res) => {
|
|
24
|
+
this._drawFrame();
|
|
27
25
|
this.trigger('load', { element: res.element });
|
|
28
26
|
});
|
|
29
|
-
this
|
|
27
|
+
this._loader.on('error', (res) => {
|
|
30
28
|
this.trigger('error', { element: res.element, error: res.error });
|
|
31
29
|
});
|
|
32
|
-
this
|
|
30
|
+
this._loader.on('complete', () => {
|
|
33
31
|
this.trigger('loadComplete', { t: Date.now() });
|
|
34
32
|
});
|
|
35
33
|
}
|
|
36
34
|
render(target, originData, opts) {
|
|
37
35
|
const { changeResourceUUIDs = [] } = opts || {};
|
|
38
|
-
this
|
|
36
|
+
this._status = DrawStatus.FREE;
|
|
39
37
|
const data = deepClone(originData);
|
|
40
38
|
if (Array.isArray(data.elements)) {
|
|
41
39
|
data.elements.forEach((elem) => {
|
|
@@ -44,15 +42,15 @@ export default class Renderer extends RendererEvent {
|
|
|
44
42
|
}
|
|
45
43
|
});
|
|
46
44
|
}
|
|
47
|
-
if (!this
|
|
48
|
-
if (this
|
|
45
|
+
if (!this._ctx) {
|
|
46
|
+
if (this._opts &&
|
|
49
47
|
Object.prototype.toString.call(target) === '[object HTMLCanvasElement]') {
|
|
50
|
-
const { width, height, contextWidth, contextHeight, devicePixelRatio } = this
|
|
48
|
+
const { width, height, contextWidth, contextHeight, devicePixelRatio } = this._opts;
|
|
51
49
|
const canvas = target;
|
|
52
50
|
canvas.width = width * devicePixelRatio;
|
|
53
51
|
canvas.height = height * devicePixelRatio;
|
|
54
52
|
const ctx2d = canvas.getContext('2d');
|
|
55
|
-
this
|
|
53
|
+
this._ctx = new Context(ctx2d, {
|
|
56
54
|
width,
|
|
57
55
|
height,
|
|
58
56
|
contextWidth: contextWidth || width,
|
|
@@ -61,79 +59,79 @@ export default class Renderer extends RendererEvent {
|
|
|
61
59
|
});
|
|
62
60
|
}
|
|
63
61
|
else if (target) {
|
|
64
|
-
this
|
|
62
|
+
this._ctx = target;
|
|
65
63
|
}
|
|
66
64
|
}
|
|
67
|
-
if ([DrawStatus.FREEZE].includes(this
|
|
65
|
+
if ([DrawStatus.FREEZE].includes(this._status)) {
|
|
68
66
|
return;
|
|
69
67
|
}
|
|
70
68
|
const _data = deepClone({ data });
|
|
71
|
-
this
|
|
72
|
-
this
|
|
73
|
-
this
|
|
69
|
+
this._queue.push(_data);
|
|
70
|
+
this._drawFrame();
|
|
71
|
+
this._loader.load(data, changeResourceUUIDs || []);
|
|
74
72
|
}
|
|
75
73
|
getContext() {
|
|
76
|
-
return this
|
|
74
|
+
return this._ctx;
|
|
77
75
|
}
|
|
78
76
|
thaw() {
|
|
79
|
-
this
|
|
77
|
+
this._status = DrawStatus.FREE;
|
|
80
78
|
}
|
|
81
|
-
|
|
82
|
-
this
|
|
79
|
+
_freeze() {
|
|
80
|
+
this._status = DrawStatus.FREEZE;
|
|
83
81
|
}
|
|
84
|
-
|
|
85
|
-
if (this
|
|
82
|
+
_drawFrame() {
|
|
83
|
+
if (this._status === DrawStatus.FREEZE) {
|
|
86
84
|
return;
|
|
87
85
|
}
|
|
88
86
|
requestAnimationFrame(() => {
|
|
89
|
-
if (this
|
|
87
|
+
if (this._status === DrawStatus.FREEZE) {
|
|
90
88
|
return;
|
|
91
89
|
}
|
|
92
|
-
const ctx = this
|
|
93
|
-
let item = this
|
|
90
|
+
const ctx = this._ctx;
|
|
91
|
+
let item = this._queue[0];
|
|
94
92
|
let isLastFrame = false;
|
|
95
|
-
if (this
|
|
96
|
-
item = this
|
|
93
|
+
if (this._queue.length > 1) {
|
|
94
|
+
item = this._queue.shift();
|
|
97
95
|
}
|
|
98
96
|
else {
|
|
99
97
|
isLastFrame = true;
|
|
100
98
|
}
|
|
101
|
-
if (this
|
|
102
|
-
this
|
|
99
|
+
if (this._loader.isComplete() !== true) {
|
|
100
|
+
this._drawFrame();
|
|
103
101
|
if (item && ctx) {
|
|
104
|
-
drawContext(ctx, item.data, this
|
|
102
|
+
drawContext(ctx, item.data, this._loader);
|
|
105
103
|
}
|
|
106
104
|
}
|
|
107
105
|
else if (item && ctx) {
|
|
108
|
-
drawContext(ctx, item.data, this
|
|
109
|
-
this
|
|
106
|
+
drawContext(ctx, item.data, this._loader);
|
|
107
|
+
this._retainQueueOneItem();
|
|
110
108
|
if (!isLastFrame) {
|
|
111
|
-
this
|
|
109
|
+
this._drawFrame();
|
|
112
110
|
}
|
|
113
111
|
else {
|
|
114
|
-
this
|
|
112
|
+
this._status = DrawStatus.FREE;
|
|
115
113
|
}
|
|
116
114
|
}
|
|
117
115
|
else {
|
|
118
|
-
this
|
|
116
|
+
this._status = DrawStatus.FREE;
|
|
119
117
|
}
|
|
120
118
|
this.trigger('drawFrame', { t: Date.now() });
|
|
121
|
-
if (this
|
|
122
|
-
this
|
|
123
|
-
this
|
|
124
|
-
if (ctx && this
|
|
125
|
-
drawContext(ctx, this
|
|
119
|
+
if (this._loader.isComplete() === true &&
|
|
120
|
+
this._queue.length === 1 &&
|
|
121
|
+
this._status === DrawStatus.FREE) {
|
|
122
|
+
if (ctx && this._queue[0] && this._queue[0].data) {
|
|
123
|
+
drawContext(ctx, this._queue[0].data, this._loader);
|
|
126
124
|
}
|
|
127
125
|
this.trigger('drawFrameComplete', { t: Date.now() });
|
|
128
|
-
this
|
|
126
|
+
this._freeze();
|
|
129
127
|
}
|
|
130
128
|
});
|
|
131
129
|
}
|
|
132
|
-
|
|
133
|
-
if (this
|
|
130
|
+
_retainQueueOneItem() {
|
|
131
|
+
if (this._queue.length <= 1) {
|
|
134
132
|
return;
|
|
135
133
|
}
|
|
136
|
-
const lastOne = deepClone(this
|
|
137
|
-
this
|
|
134
|
+
const lastOne = deepClone(this._queue[this._queue.length - 1]);
|
|
135
|
+
this._queue = [lastOne];
|
|
138
136
|
}
|
|
139
137
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DataElement, DataElemDesc, Point } from '@idraw/types';
|
|
2
2
|
export declare function parseRadianToAngle(radian: number): number;
|
|
3
3
|
export declare function parseAngleToRadian(angle: number): number;
|
|
4
|
-
export declare function calcElementCenter(elem:
|
|
5
|
-
export declare function calcRadian(center:
|
|
4
|
+
export declare function calcElementCenter(elem: DataElement<keyof DataElemDesc>): Point;
|
|
5
|
+
export declare function calcRadian(center: Point, start: Point, end: Point): number;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
export function parseRadianToAngle(radian) {
|
|
2
|
-
return radian / Math.PI * 180;
|
|
2
|
+
return (radian / Math.PI) * 180;
|
|
3
3
|
}
|
|
4
4
|
export function parseAngleToRadian(angle) {
|
|
5
|
-
return angle / 180 * Math.PI;
|
|
5
|
+
return (angle / 180) * Math.PI;
|
|
6
6
|
}
|
|
7
7
|
export function calcElementCenter(elem) {
|
|
8
8
|
const p = {
|
|
9
9
|
x: elem.x + elem.w / 2,
|
|
10
|
-
y: elem.y + elem.h / 2
|
|
10
|
+
y: elem.y + elem.h / 2
|
|
11
11
|
};
|
|
12
12
|
return p;
|
|
13
13
|
}
|
|
@@ -15,10 +15,10 @@ export function calcRadian(center, start, end) {
|
|
|
15
15
|
const startAngle = calcLineAngle(center, start);
|
|
16
16
|
const endAngle = calcLineAngle(center, end);
|
|
17
17
|
if (endAngle !== null && startAngle !== null) {
|
|
18
|
-
if (startAngle > Math.PI * 3 / 2 && endAngle < Math.PI / 2) {
|
|
18
|
+
if (startAngle > (Math.PI * 3) / 2 && endAngle < Math.PI / 2) {
|
|
19
19
|
return endAngle + (Math.PI * 2 - startAngle);
|
|
20
20
|
}
|
|
21
|
-
else if (endAngle > Math.PI * 3 / 2 && startAngle < Math.PI / 2) {
|
|
21
|
+
else if (endAngle > (Math.PI * 3) / 2 && startAngle < Math.PI / 2) {
|
|
22
22
|
return startAngle + (Math.PI * 2 - endAngle);
|
|
23
23
|
}
|
|
24
24
|
else {
|
package/dist/esm/lib/diff.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function isChangeImageElementResource(before:
|
|
3
|
-
export declare function isChangeSVGElementResource(before:
|
|
4
|
-
export declare function isChangeHTMLElementResource(before:
|
|
5
|
-
export declare function diffElementResourceChange(before:
|
|
6
|
-
export declare function diffElementResourceChangeList(before:
|
|
1
|
+
import { DataElement, IDrawData, DataElemDesc } from '@idraw/types';
|
|
2
|
+
export declare function isChangeImageElementResource(before: DataElement<'image'>, after: DataElement<'image'>): boolean;
|
|
3
|
+
export declare function isChangeSVGElementResource(before: DataElement<'svg'>, after: DataElement<'svg'>): boolean;
|
|
4
|
+
export declare function isChangeHTMLElementResource(before: DataElement<'html'>, after: DataElement<'html'>): boolean;
|
|
5
|
+
export declare function diffElementResourceChange(before: DataElement<keyof DataElemDesc>, after: DataElement<keyof DataElemDesc>): string | null;
|
|
6
|
+
export declare function diffElementResourceChangeList(before: IDrawData, after: IDrawData): string[];
|
package/dist/esm/lib/diff.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
export function isChangeImageElementResource(before, after) {
|
|
2
2
|
var _a, _b;
|
|
3
|
-
return ((
|
|
3
|
+
return ((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.src) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.src);
|
|
4
4
|
}
|
|
5
5
|
export function isChangeSVGElementResource(before, after) {
|
|
6
6
|
var _a, _b;
|
|
7
|
-
return ((
|
|
7
|
+
return ((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.svg) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.svg);
|
|
8
8
|
}
|
|
9
9
|
export function isChangeHTMLElementResource(before, after) {
|
|
10
10
|
var _a, _b, _c, _d, _e, _f;
|
|
11
|
-
return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.html) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.html)
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.html) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.html) ||
|
|
12
|
+
((_c = before === null || before === void 0 ? void 0 : before.desc) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = after === null || after === void 0 ? void 0 : after.desc) === null || _d === void 0 ? void 0 : _d.width) ||
|
|
13
|
+
((_e = before === null || before === void 0 ? void 0 : before.desc) === null || _e === void 0 ? void 0 : _e.height) !== ((_f = after === null || after === void 0 ? void 0 : after.desc) === null || _f === void 0 ? void 0 : _f.height));
|
|
14
14
|
}
|
|
15
15
|
export function diffElementResourceChange(before, after) {
|
|
16
16
|
let result = null;
|
|
@@ -28,7 +28,8 @@ export function diffElementResourceChange(before, after) {
|
|
|
28
28
|
isChange = isChangeHTMLElementResource(before, after);
|
|
29
29
|
break;
|
|
30
30
|
}
|
|
31
|
-
default:
|
|
31
|
+
default:
|
|
32
|
+
break;
|
|
32
33
|
}
|
|
33
34
|
if (isChange === true) {
|
|
34
35
|
result = after.uuid;
|
|
@@ -59,7 +60,8 @@ export function diffElementResourceChangeList(before, after) {
|
|
|
59
60
|
isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
|
|
60
61
|
break;
|
|
61
62
|
}
|
|
62
|
-
default:
|
|
63
|
+
default:
|
|
64
|
+
break;
|
|
63
65
|
}
|
|
64
66
|
if (isChange === true) {
|
|
65
67
|
uuids.push(uuid);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function clearContext(ctx:
|
|
3
|
-
export declare function drawBgColor(ctx:
|
|
4
|
-
export declare function drawBox(ctx:
|
|
5
|
-
export declare function drawBoxBorder(ctx:
|
|
1
|
+
import { IDrawContext, DataElement } from '@idraw/types';
|
|
2
|
+
export declare function clearContext(ctx: IDrawContext): void;
|
|
3
|
+
export declare function drawBgColor(ctx: IDrawContext, color: string): void;
|
|
4
|
+
export declare function drawBox(ctx: IDrawContext, elem: DataElement<'text' | 'rect'>, pattern: string | CanvasPattern | null): void;
|
|
5
|
+
export declare function drawBoxBorder(ctx: IDrawContext, elem: DataElement<'text' | 'rect'>): void;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function drawCircle(ctx:
|
|
1
|
+
import { IDrawContext, DataElement } from '@idraw/types';
|
|
2
|
+
export declare function drawCircle(ctx: IDrawContext, elem: DataElement<'circle'>): void;
|
|
@@ -4,7 +4,7 @@ export function drawCircle(ctx, elem) {
|
|
|
4
4
|
clearContext(ctx);
|
|
5
5
|
rotateElement(ctx, elem, (ctx) => {
|
|
6
6
|
const { x, y, w, h, desc } = elem;
|
|
7
|
-
const { bgColor = '#000000', borderColor = '#000000', borderWidth = 0
|
|
7
|
+
const { bgColor = '#000000', borderColor = '#000000', borderWidth = 0 } = desc;
|
|
8
8
|
const a = w / 2;
|
|
9
9
|
const b = h / 2;
|
|
10
10
|
const centerX = x + a;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IDrawContext, DataElement } from '@idraw/types';
|
|
2
2
|
import Loader from '../loader';
|
|
3
|
-
export declare function drawHTML(ctx:
|
|
3
|
+
export declare function drawHTML(ctx: IDrawContext, elem: DataElement<'html'>, loader: Loader): void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IDrawContext, DataElement } from '@idraw/types';
|
|
2
2
|
import Loader from '../loader';
|
|
3
|
-
export declare function drawImage(ctx:
|
|
3
|
+
export declare function drawImage(ctx: IDrawContext, elem: DataElement<'image'>, loader: Loader): void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IDrawContext, IDrawData } from '@idraw/types';
|
|
2
2
|
import Loader from '../loader';
|
|
3
|
-
export declare function drawContext(ctx:
|
|
3
|
+
export declare function drawContext(ctx: IDrawContext, data: IDrawData, loader: Loader): void;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function drawRect(ctx:
|
|
1
|
+
import { IDrawContext, DataElement } from '@idraw/types';
|
|
2
|
+
export declare function drawRect(ctx: IDrawContext, elem: DataElement<'rect'>): void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IDrawContext, DataElement } from '@idraw/types';
|
|
2
2
|
import Loader from '../loader';
|
|
3
|
-
export declare function drawSVG(ctx:
|
|
3
|
+
export declare function drawSVG(ctx: IDrawContext, elem: DataElement<'svg'>, loader: Loader): void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IDrawContext, DataElement } from '@idraw/types';
|
|
2
2
|
import Loader from '../loader';
|
|
3
|
-
export declare function drawText(ctx:
|
|
3
|
+
export declare function drawText(ctx: IDrawContext, elem: DataElement<'text'>, loader: Loader): void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DataElement, DataElemDesc } from '@idraw/types';
|
|
2
2
|
export type TypeLoadDataItem = {
|
|
3
3
|
uuid: string;
|
|
4
4
|
type: 'image' | 'svg' | 'html';
|
|
@@ -7,16 +7,16 @@ export type TypeLoadDataItem = {
|
|
|
7
7
|
elemW: number;
|
|
8
8
|
elemH: number;
|
|
9
9
|
source: string;
|
|
10
|
-
element:
|
|
10
|
+
element: DataElement<keyof DataElemDesc>;
|
|
11
11
|
error?: any;
|
|
12
12
|
};
|
|
13
13
|
export type TypeLoadData = {
|
|
14
14
|
[uuid: string]: TypeLoadDataItem;
|
|
15
15
|
};
|
|
16
16
|
export type TypeLoaderEventArgMap = {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
complete: void;
|
|
18
|
+
load: TypeLoadData[string];
|
|
19
|
+
error: TypeLoadData[string];
|
|
20
20
|
};
|
|
21
21
|
export interface TypeLoaderEvent {
|
|
22
22
|
on<T extends keyof TypeLoaderEventArgMap>(key: T, callback: (p: TypeLoaderEventArgMap[T]) => void): void;
|
package/dist/esm/lib/loader.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IDrawData } from '@idraw/types';
|
|
2
2
|
import { TypeLoaderEventArgMap } from './loader-event';
|
|
3
3
|
type Options = {
|
|
4
4
|
maxParallelNum: number;
|
|
@@ -12,7 +12,7 @@ export default class Loader {
|
|
|
12
12
|
private _status;
|
|
13
13
|
private _waitingLoadQueue;
|
|
14
14
|
constructor(opts: Options);
|
|
15
|
-
load(data:
|
|
15
|
+
load(data: IDrawData, changeResourceUUIDs: string[]): void;
|
|
16
16
|
on<T extends keyof TypeLoaderEventArgMap>(name: T, callback: (arg: TypeLoaderEventArgMap[T]) => void): void;
|
|
17
17
|
off<T extends keyof TypeLoaderEventArgMap>(name: T, callback: (arg: TypeLoaderEventArgMap[T]) => void): void;
|
|
18
18
|
isComplete(): boolean;
|
package/dist/esm/lib/loader.js
CHANGED
|
@@ -29,7 +29,8 @@ export default class Loader {
|
|
|
29
29
|
}
|
|
30
30
|
load(data, changeResourceUUIDs) {
|
|
31
31
|
const [uuidQueue, loadData] = this._resetLoadData(data, changeResourceUUIDs);
|
|
32
|
-
if (this._status === LoaderStatus.FREE ||
|
|
32
|
+
if (this._status === LoaderStatus.FREE ||
|
|
33
|
+
this._status === LoaderStatus.COMPLETE) {
|
|
33
34
|
this._currentUUIDQueue = uuidQueue;
|
|
34
35
|
this._currentLoadData = loadData;
|
|
35
36
|
this._loadTask();
|
|
@@ -37,7 +38,7 @@ export default class Loader {
|
|
|
37
38
|
else if (this._status === LoaderStatus.LOADING && uuidQueue.length > 0) {
|
|
38
39
|
this._waitingLoadQueue.push({
|
|
39
40
|
uuidQueue,
|
|
40
|
-
loadData
|
|
41
|
+
loadData
|
|
41
42
|
});
|
|
42
43
|
}
|
|
43
44
|
}
|
|
@@ -63,7 +64,7 @@ export default class Loader {
|
|
|
63
64
|
const storageLoadData = this._storageLoadData;
|
|
64
65
|
for (let i = data.elements.length - 1; i >= 0; i--) {
|
|
65
66
|
const elem = data.elements[i];
|
|
66
|
-
if (['image', 'svg', 'html'
|
|
67
|
+
if (['image', 'svg', 'html'].includes(elem.type)) {
|
|
67
68
|
if (!storageLoadData[elem.uuid]) {
|
|
68
69
|
loadData[elem.uuid] = this._createEmptyLoadItem(elem);
|
|
69
70
|
uuidQueue.push(elem.uuid);
|
|
@@ -105,7 +106,7 @@ export default class Loader {
|
|
|
105
106
|
source,
|
|
106
107
|
elemW,
|
|
107
108
|
elemH,
|
|
108
|
-
element: deepClone(elem)
|
|
109
|
+
element: deepClone(elem)
|
|
109
110
|
};
|
|
110
111
|
}
|
|
111
112
|
_loadTask() {
|
|
@@ -148,7 +149,8 @@ export default class Loader {
|
|
|
148
149
|
break;
|
|
149
150
|
}
|
|
150
151
|
loadUUIDList.push(uuid);
|
|
151
|
-
this._loadElementSource(this._currentLoadData[uuid])
|
|
152
|
+
this._loadElementSource(this._currentLoadData[uuid])
|
|
153
|
+
.then((image) => {
|
|
152
154
|
var _a, _b;
|
|
153
155
|
loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
|
|
154
156
|
const status = _loadAction();
|
|
@@ -160,9 +162,11 @@ export default class Loader {
|
|
|
160
162
|
source: this._currentLoadData[uuid].source,
|
|
161
163
|
elemW: this._currentLoadData[uuid].elemW,
|
|
162
164
|
elemH: this._currentLoadData[uuid].elemH,
|
|
163
|
-
element: this._currentLoadData[uuid].element
|
|
165
|
+
element: this._currentLoadData[uuid].element
|
|
164
166
|
};
|
|
165
|
-
if (loadUUIDList.length === 0 &&
|
|
167
|
+
if (loadUUIDList.length === 0 &&
|
|
168
|
+
uuids.length === 0 &&
|
|
169
|
+
status === true) {
|
|
166
170
|
this._status = LoaderStatus.FREE;
|
|
167
171
|
this._loadTask();
|
|
168
172
|
}
|
|
@@ -174,9 +178,10 @@ export default class Loader {
|
|
|
174
178
|
source: this._storageLoadData[uuid].source,
|
|
175
179
|
elemW: this._storageLoadData[uuid].elemW,
|
|
176
180
|
elemH: this._storageLoadData[uuid].elemH,
|
|
177
|
-
element: (_b = this._storageLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.element
|
|
181
|
+
element: (_b = this._storageLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.element
|
|
178
182
|
});
|
|
179
|
-
})
|
|
183
|
+
})
|
|
184
|
+
.catch((err) => {
|
|
180
185
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
181
186
|
console.warn(err);
|
|
182
187
|
loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
|
|
@@ -191,10 +196,12 @@ export default class Loader {
|
|
|
191
196
|
source: (_b = this._currentLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.source,
|
|
192
197
|
elemW: (_c = this._currentLoadData[uuid]) === null || _c === void 0 ? void 0 : _c.elemW,
|
|
193
198
|
elemH: (_d = this._currentLoadData[uuid]) === null || _d === void 0 ? void 0 : _d.elemH,
|
|
194
|
-
element: (_e = this._currentLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.element
|
|
199
|
+
element: (_e = this._currentLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.element
|
|
195
200
|
};
|
|
196
201
|
}
|
|
197
|
-
if (loadUUIDList.length === 0 &&
|
|
202
|
+
if (loadUUIDList.length === 0 &&
|
|
203
|
+
uuids.length === 0 &&
|
|
204
|
+
status === true) {
|
|
198
205
|
this._status = LoaderStatus.FREE;
|
|
199
206
|
this._loadTask();
|
|
200
207
|
}
|
|
@@ -207,7 +214,7 @@ export default class Loader {
|
|
|
207
214
|
source: (_j = this._storageLoadData[uuid]) === null || _j === void 0 ? void 0 : _j.source,
|
|
208
215
|
elemW: (_k = this._storageLoadData[uuid]) === null || _k === void 0 ? void 0 : _k.elemW,
|
|
209
216
|
elemH: (_l = this._storageLoadData[uuid]) === null || _l === void 0 ? void 0 : _l.elemH,
|
|
210
|
-
element: (_m = this._storageLoadData[uuid]) === null || _m === void 0 ? void 0 : _m.element
|
|
217
|
+
element: (_m = this._storageLoadData[uuid]) === null || _m === void 0 ? void 0 : _m.element
|
|
211
218
|
});
|
|
212
219
|
}
|
|
213
220
|
});
|
|
@@ -228,11 +235,12 @@ export default class Loader {
|
|
|
228
235
|
}
|
|
229
236
|
else if (params && params.type === 'html') {
|
|
230
237
|
const image = yield loadHTML(params.source, {
|
|
231
|
-
width: params.elemW,
|
|
238
|
+
width: params.elemW,
|
|
239
|
+
height: params.elemH
|
|
232
240
|
});
|
|
233
241
|
return image;
|
|
234
242
|
}
|
|
235
|
-
throw Error(
|
|
243
|
+
throw Error("Element's source is not support!");
|
|
236
244
|
});
|
|
237
245
|
}
|
|
238
246
|
}
|
package/dist/esm/lib/parse.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function parseData(data: any):
|
|
1
|
+
import { IDrawData } from '@idraw/types';
|
|
2
|
+
export declare function parseData(data: any): IDrawData;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DataElement, DataElemDesc } from '@idraw/types';
|
|
2
2
|
export type TypeRendererEventArgMap = {
|
|
3
|
-
|
|
3
|
+
drawFrame: {
|
|
4
4
|
t: number;
|
|
5
5
|
};
|
|
6
|
-
|
|
6
|
+
drawFrameComplete: {
|
|
7
7
|
t: number;
|
|
8
8
|
};
|
|
9
|
-
|
|
10
|
-
element:
|
|
9
|
+
load: {
|
|
10
|
+
element: DataElement<keyof DataElemDesc>;
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
loadComplete: {
|
|
13
13
|
t: number;
|
|
14
14
|
};
|
|
15
|
-
|
|
16
|
-
element:
|
|
15
|
+
error: {
|
|
16
|
+
element: DataElement<keyof DataElemDesc>;
|
|
17
17
|
error: any;
|
|
18
18
|
};
|
|
19
19
|
};
|
package/dist/esm/lib/temp.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { HelperWrapperControllerDirection, Point } from '@idraw/types';
|
|
2
2
|
import { Mode, CursorStatus } from './../constant/static';
|
|
3
3
|
type TempDataDesc = {
|
|
4
4
|
hasInited: boolean;
|
|
@@ -8,9 +8,9 @@ type TempDataDesc = {
|
|
|
8
8
|
selectedUUID: string | null;
|
|
9
9
|
selectedUUIDList: string[];
|
|
10
10
|
hoverUUID: string | null;
|
|
11
|
-
selectedControllerDirection:
|
|
12
|
-
hoverControllerDirection:
|
|
13
|
-
prevPoint:
|
|
11
|
+
selectedControllerDirection: HelperWrapperControllerDirection | null;
|
|
12
|
+
hoverControllerDirection: HelperWrapperControllerDirection | null;
|
|
13
|
+
prevPoint: Point | null;
|
|
14
14
|
};
|
|
15
15
|
export declare class TempData {
|
|
16
16
|
private _temp;
|
package/dist/esm/lib/temp.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare function rotateElement(ctx:
|
|
3
|
-
declare function rotateContext(ctx:
|
|
4
|
-
export { rotateContext, rotateElement
|
|
1
|
+
import { IDrawContext, Point, DataElement, DataElemDesc } from '@idraw/types';
|
|
2
|
+
declare function rotateElement(ctx: IDrawContext, elem: DataElement<keyof DataElemDesc>, callback: (ctx: IDrawContext) => void): void;
|
|
3
|
+
declare function rotateContext(ctx: IDrawContext, center: Point | undefined, radian: number, callback: (ctx: IDrawContext) => void): void;
|
|
4
|
+
export { rotateContext, rotateElement };
|