@idraw/renderer 0.3.0-beta.3 → 0.3.0-beta.7

package/dist/esm/index.d.ts

@@ -1,6 +1,5 @@
-import { TypeData, TypeContext } from '@idraw/types';
+import { IDrawData, IDrawContext } from '@idraw/types';
 import { RendererEvent } from './lib/renderer-event';
-import { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem } from './names';
 type Options = {
     width: number;
     height: number;
@@ -9,19 +8,19 @@ type Options = {
     devicePixelRatio: number;
 };
 export default class Renderer extends RendererEvent {
-    private [_queue];
-    private [_ctx];
-    private [_status];
-    private [_loader];
-    private [_opts]?;
+    private _queue;
+    private _ctx;
+    private _status;
+    private _loader;
+    private _opts?;
     constructor(opts?: Options);
-    render(target: HTMLCanvasElement | TypeContext, originData: TypeData, opts?: {
+    render(target: HTMLCanvasElement | IDrawContext, originData: IDrawData, opts?: {
         changeResourceUUIDs?: string[];
     }): void;
-    getContext(): TypeContext | null;
+    getContext(): IDrawContext | null;
     thaw(): void;
-    private [_freeze];
-    private [_drawFrame];
-    private [_retainQueueOneItem];
+    private _freeze;
+    private _drawFrame;
+    private _retainQueueOneItem;
 }
 export {};

package/dist/esm/index.js

@@ -1,9 +1,7 @@
-var _a, _b, _c;
 import { createUUID, deepClone, Context } from '@idraw/util';
 import { drawContext } from './lib/draw';
 import Loader from './lib/loader';
 import { RendererEvent } from './lib/renderer-event';
-import { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem } from './names';
 const { requestAnimationFrame } = window;
 var DrawStatus;
 (function (DrawStatus) {
@@ -15,27 +13,27 @@ var DrawStatus;
 export default class Renderer extends RendererEvent {
     constructor(opts) {
         super();
-        this[_a] = [];
-        this[_b] = null;
-        this[_c] = DrawStatus.NULL;
-        this[_opts] = opts;
-        this[_loader] = new Loader({
+        this._queue = [];
+        this._ctx = null;
+        this._status = DrawStatus.NULL;
+        this._opts = opts;
+        this._loader = new Loader({
             maxParallelNum: 6
         });
-        this[_loader].on('load', (res) => {
-            this[_drawFrame]();
+        this._loader.on('load', (res) => {
+            this._drawFrame();
             this.trigger('load', { element: res.element });
         });
-        this[_loader].on('error', (res) => {
+        this._loader.on('error', (res) => {
             this.trigger('error', { element: res.element, error: res.error });
         });
-        this[_loader].on('complete', () => {
+        this._loader.on('complete', () => {
             this.trigger('loadComplete', { t: Date.now() });
         });
     }
     render(target, originData, opts) {
         const { changeResourceUUIDs = [] } = opts || {};
-        this[_status] = DrawStatus.FREE;
+        this._status = DrawStatus.FREE;
         const data = deepClone(originData);
         if (Array.isArray(data.elements)) {
             data.elements.forEach((elem) => {
@@ -44,15 +42,15 @@ export default class Renderer extends RendererEvent {
                 }
             });
         }
-        if (!this[_ctx]) {
-            if (this[_opts] &&
+        if (!this._ctx) {
+            if (this._opts &&
                 Object.prototype.toString.call(target) === '[object HTMLCanvasElement]') {
-                const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts];
+                const { width, height, contextWidth, contextHeight, devicePixelRatio } = this._opts;
                 const canvas = target;
                 canvas.width = width * devicePixelRatio;
                 canvas.height = height * devicePixelRatio;
                 const ctx2d = canvas.getContext('2d');
-                this[_ctx] = new Context(ctx2d, {
+                this._ctx = new Context(ctx2d, {
                     width,
                     height,
                     contextWidth: contextWidth || width,
@@ -61,79 +59,79 @@ export default class Renderer extends RendererEvent {
                 });
             }
             else if (target) {
-                this[_ctx] = target;
+                this._ctx = target;
             }
         }
-        if ([DrawStatus.FREEZE].includes(this[_status])) {
+        if ([DrawStatus.FREEZE].includes(this._status)) {
             return;
         }
         const _data = deepClone({ data });
-        this[_queue].push(_data);
-        this[_drawFrame]();
-        this[_loader].load(data, changeResourceUUIDs || []);
+        this._queue.push(_data);
+        this._drawFrame();
+        this._loader.load(data, changeResourceUUIDs || []);
     }
     getContext() {
-        return this[_ctx];
+        return this._ctx;
     }
     thaw() {
-        this[_status] = DrawStatus.FREE;
+        this._status = DrawStatus.FREE;
     }
-    [(_a = _queue, _b = _ctx, _c = _status, _freeze)]() {
-        this[_status] = DrawStatus.FREEZE;
+    _freeze() {
+        this._status = DrawStatus.FREEZE;
     }
-    [_drawFrame]() {
-        if (this[_status] === DrawStatus.FREEZE) {
+    _drawFrame() {
+        if (this._status === DrawStatus.FREEZE) {
             return;
         }
         requestAnimationFrame(() => {
-            if (this[_status] === DrawStatus.FREEZE) {
+            if (this._status === DrawStatus.FREEZE) {
                 return;
             }
-            const ctx = this[_ctx];
-            let item = this[_queue][0];
+            const ctx = this._ctx;
+            let item = this._queue[0];
             let isLastFrame = false;
-            if (this[_queue].length > 1) {
-                item = this[_queue].shift();
+            if (this._queue.length > 1) {
+                item = this._queue.shift();
             }
             else {
                 isLastFrame = true;
             }
-            if (this[_loader].isComplete() !== true) {
-                this[_drawFrame]();
+            if (this._loader.isComplete() !== true) {
+                this._drawFrame();
                 if (item && ctx) {
-                    drawContext(ctx, item.data, this[_loader]);
+                    drawContext(ctx, item.data, this._loader);
                 }
             }
             else if (item && ctx) {
-                drawContext(ctx, item.data, this[_loader]);
-                this[_retainQueueOneItem]();
+                drawContext(ctx, item.data, this._loader);
+                this._retainQueueOneItem();
                 if (!isLastFrame) {
-                    this[_drawFrame]();
+                    this._drawFrame();
                 }
                 else {
-                    this[_status] = DrawStatus.FREE;
+                    this._status = DrawStatus.FREE;
                 }
             }
             else {
-                this[_status] = DrawStatus.FREE;
+                this._status = DrawStatus.FREE;
             }
             this.trigger('drawFrame', { t: Date.now() });
-            if (this[_loader].isComplete() === true &&
-                this[_queue].length === 1 &&
-                this[_status] === DrawStatus.FREE) {
-                if (ctx && this[_queue][0] && this[_queue][0].data) {
-                    drawContext(ctx, this[_queue][0].data, this[_loader]);
+            if (this._loader.isComplete() === true &&
+                this._queue.length === 1 &&
+                this._status === DrawStatus.FREE) {
+                if (ctx && this._queue[0] && this._queue[0].data) {
+                    drawContext(ctx, this._queue[0].data, this._loader);
                 }
                 this.trigger('drawFrameComplete', { t: Date.now() });
-                this[_freeze]();
+                this._freeze();
             }
         });
     }
-    [_retainQueueOneItem]() {
-        if (this[_queue].length <= 1) {
+    _retainQueueOneItem() {
+        if (this._queue.length <= 1) {
             return;
         }
-        const lastOne = deepClone(this[_queue][this[_queue].length - 1]);
-        this[_queue] = [lastOne];
+        const lastOne = deepClone(this._queue[this._queue.length - 1]);
+        this._queue = [lastOne];
     }
 }

package/dist/esm/lib/calculate.d.ts

@@ -1,5 +1,5 @@
-import { TypeElement, TypeElemDesc, TypePoint } from '@idraw/types';
+import { DataElement, DataElemDesc, Point } from '@idraw/types';
 export declare function parseRadianToAngle(radian: number): number;
 export declare function parseAngleToRadian(angle: number): number;
-export declare function calcElementCenter(elem: TypeElement<keyof TypeElemDesc>): TypePoint;
-export declare function calcRadian(center: TypePoint, start: TypePoint, end: TypePoint): number;
+export declare function calcElementCenter(elem: DataElement<keyof DataElemDesc>): Point;
+export declare function calcRadian(center: Point, start: Point, end: Point): number;

package/dist/esm/lib/calculate.js

@@ -1,13 +1,13 @@
 export function parseRadianToAngle(radian) {
-    return radian / Math.PI * 180;
+    return (radian / Math.PI) * 180;
 }
 export function parseAngleToRadian(angle) {
-    return angle / 180 * Math.PI;
+    return (angle / 180) * Math.PI;
 }
 export function calcElementCenter(elem) {
     const p = {
         x: elem.x + elem.w / 2,
-        y: elem.y + elem.h / 2,
+        y: elem.y + elem.h / 2
     };
     return p;
 }
@@ -15,10 +15,10 @@ export function calcRadian(center, start, end) {
     const startAngle = calcLineAngle(center, start);
     const endAngle = calcLineAngle(center, end);
     if (endAngle !== null && startAngle !== null) {
-        if (startAngle > Math.PI * 3 / 2 && endAngle < Math.PI / 2) {
+        if (startAngle > (Math.PI * 3) / 2 && endAngle < Math.PI / 2) {
             return endAngle + (Math.PI * 2 - startAngle);
         }
-        else if (endAngle > Math.PI * 3 / 2 && startAngle < Math.PI / 2) {
+        else if (endAngle > (Math.PI * 3) / 2 && startAngle < Math.PI / 2) {
             return startAngle + (Math.PI * 2 - endAngle);
         }
         else {

package/dist/esm/lib/diff.d.ts

@@ -1,6 +1,6 @@
-import { TypeElement, TypeData, TypeElemDesc } from '@idraw/types';
-export declare function isChangeImageElementResource(before: TypeElement<'image'>, after: TypeElement<'image'>): boolean;
-export declare function isChangeSVGElementResource(before: TypeElement<'svg'>, after: TypeElement<'svg'>): boolean;
-export declare function isChangeHTMLElementResource(before: TypeElement<'html'>, after: TypeElement<'html'>): boolean;
-export declare function diffElementResourceChange(before: TypeElement<keyof TypeElemDesc>, after: TypeElement<keyof TypeElemDesc>): string | null;
-export declare function diffElementResourceChangeList(before: TypeData, after: TypeData): string[];
+import { DataElement, IDrawData, DataElemDesc } from '@idraw/types';
+export declare function isChangeImageElementResource(before: DataElement<'image'>, after: DataElement<'image'>): boolean;
+export declare function isChangeSVGElementResource(before: DataElement<'svg'>, after: DataElement<'svg'>): boolean;
+export declare function isChangeHTMLElementResource(before: DataElement<'html'>, after: DataElement<'html'>): boolean;
+export declare function diffElementResourceChange(before: DataElement<keyof DataElemDesc>, after: DataElement<keyof DataElemDesc>): string | null;
+export declare function diffElementResourceChangeList(before: IDrawData, after: IDrawData): string[];

package/dist/esm/lib/diff.js

@@ -1,16 +1,16 @@
 export function isChangeImageElementResource(before, after) {
     var _a, _b;
-    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));
+    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);
 }
 export function isChangeSVGElementResource(before, after) {
     var _a, _b;
-    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));
+    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);
 }
 export function isChangeHTMLElementResource(before, after) {
     var _a, _b, _c, _d, _e, _f;
-    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)
-        || ((_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)
-        || ((_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));
+    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) ||
+        ((_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) ||
+        ((_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));
 }
 export function diffElementResourceChange(before, after) {
     let result = null;
@@ -28,7 +28,8 @@ export function diffElementResourceChange(before, after) {
             isChange = isChangeHTMLElementResource(before, after);
             break;
         }
-        default: break;
+        default:
+            break;
     }
     if (isChange === true) {
         result = after.uuid;
@@ -59,7 +60,8 @@ export function diffElementResourceChangeList(before, after) {
                     isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
                     break;
                 }
-                default: break;
+                default:
+                    break;
             }
             if (isChange === true) {
                 uuids.push(uuid);

package/dist/esm/lib/draw/base.d.ts

@@ -1,5 +1,5 @@
-import { TypeContext, TypeElement } from '@idraw/types';
-export declare function clearContext(ctx: TypeContext): void;
-export declare function drawBgColor(ctx: TypeContext, color: string): void;
-export declare function drawBox(ctx: TypeContext, elem: TypeElement<'text' | 'rect'>, pattern: string | CanvasPattern | null): void;
-export declare function drawBoxBorder(ctx: TypeContext, elem: TypeElement<'text' | 'rect'>): void;
+import { IDrawContext, DataElement } from '@idraw/types';
+export declare function clearContext(ctx: IDrawContext): void;
+export declare function drawBgColor(ctx: IDrawContext, color: string): void;
+export declare function drawBox(ctx: IDrawContext, elem: DataElement<'text' | 'rect'>, pattern: string | CanvasPattern | null): void;
+export declare function drawBoxBorder(ctx: IDrawContext, elem: DataElement<'text' | 'rect'>): void;

package/dist/esm/lib/draw/circle.d.ts

@@ -1,2 +1,2 @@
-import { TypeContext, TypeElement } from '@idraw/types';
-export declare function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>): void;
+import { IDrawContext, DataElement } from '@idraw/types';
+export declare function drawCircle(ctx: IDrawContext, elem: DataElement<'circle'>): void;

package/dist/esm/lib/draw/circle.js

@@ -4,7 +4,7 @@ export function drawCircle(ctx, elem) {
     clearContext(ctx);
     rotateElement(ctx, elem, (ctx) => {
         const { x, y, w, h, desc } = elem;
-        const { bgColor = '#000000', borderColor = '#000000', borderWidth = 0, } = desc;
+        const { bgColor = '#000000', borderColor = '#000000', borderWidth = 0 } = desc;
         const a = w / 2;
         const b = h / 2;
         const centerX = x + a;

package/dist/esm/lib/draw/html.d.ts

@@ -1,3 +1,3 @@
-import { TypeContext, TypeElement } from '@idraw/types';
+import { IDrawContext, DataElement } from '@idraw/types';
 import Loader from '../loader';
-export declare function drawHTML(ctx: TypeContext, elem: TypeElement<'html'>, loader: Loader): void;
+export declare function drawHTML(ctx: IDrawContext, elem: DataElement<'html'>, loader: Loader): void;

package/dist/esm/lib/draw/image.d.ts

@@ -1,3 +1,3 @@
-import { TypeContext, TypeElement } from '@idraw/types';
+import { IDrawContext, DataElement } from '@idraw/types';
 import Loader from '../loader';
-export declare function drawImage(ctx: TypeContext, elem: TypeElement<'image'>, loader: Loader): void;
+export declare function drawImage(ctx: IDrawContext, elem: DataElement<'image'>, loader: Loader): void;

package/dist/esm/lib/draw/index.d.ts

@@ -1,3 +1,3 @@
-import { TypeContext, TypeData } from '@idraw/types';
+import { IDrawContext, IDrawData } from '@idraw/types';
 import Loader from '../loader';
-export declare function drawContext(ctx: TypeContext, data: TypeData, loader: Loader): void;
+export declare function drawContext(ctx: IDrawContext, data: IDrawData, loader: Loader): void;

package/dist/esm/lib/draw/rect.d.ts

@@ -1,2 +1,2 @@
-import { TypeContext, TypeElement } from '@idraw/types';
-export declare function drawRect(ctx: TypeContext, elem: TypeElement<'rect'>): void;
+import { IDrawContext, DataElement } from '@idraw/types';
+export declare function drawRect(ctx: IDrawContext, elem: DataElement<'rect'>): void;

package/dist/esm/lib/draw/svg.d.ts

@@ -1,3 +1,3 @@
-import { TypeContext, TypeElement } from '@idraw/types';
+import { IDrawContext, DataElement } from '@idraw/types';
 import Loader from '../loader';
-export declare function drawSVG(ctx: TypeContext, elem: TypeElement<'svg'>, loader: Loader): void;
+export declare function drawSVG(ctx: IDrawContext, elem: DataElement<'svg'>, loader: Loader): void;

package/dist/esm/lib/draw/text.d.ts

@@ -1,3 +1,3 @@
-import { TypeContext, TypeElement } from '@idraw/types';
+import { IDrawContext, DataElement } from '@idraw/types';
 import Loader from '../loader';
-export declare function drawText(ctx: TypeContext, elem: TypeElement<'text'>, loader: Loader): void;
+export declare function drawText(ctx: IDrawContext, elem: DataElement<'text'>, loader: Loader): void;

package/dist/esm/lib/loader-event.d.ts

@@ -1,4 +1,4 @@
-import { TypeElement, TypeElemDesc } from '@idraw/types';
+import { DataElement, DataElemDesc } from '@idraw/types';
 export type TypeLoadDataItem = {
     uuid: string;
     type: 'image' | 'svg' | 'html';
@@ -7,16 +7,16 @@ export type TypeLoadDataItem = {
     elemW: number;
     elemH: number;
     source: string;
-    element: TypeElement<keyof TypeElemDesc>;
+    element: DataElement<keyof DataElemDesc>;
     error?: any;
 };
 export type TypeLoadData = {
     [uuid: string]: TypeLoadDataItem;
 };
 export type TypeLoaderEventArgMap = {
-    'complete': void;
-    'load': TypeLoadData[string];
-    'error': TypeLoadData[string];
+    complete: void;
+    load: TypeLoadData[string];
+    error: TypeLoadData[string];
 };
 export interface TypeLoaderEvent {
     on<T extends keyof TypeLoaderEventArgMap>(key: T, callback: (p: TypeLoaderEventArgMap[T]) => void): void;

package/dist/esm/lib/loader.d.ts

@@ -1,4 +1,4 @@
-import { TypeData } from '@idraw/types';
+import { IDrawData } from '@idraw/types';
 import { TypeLoaderEventArgMap } from './loader-event';
 type Options = {
     maxParallelNum: number;
@@ -12,7 +12,7 @@ export default class Loader {
     private _status;
     private _waitingLoadQueue;
     constructor(opts: Options);
-    load(data: TypeData, changeResourceUUIDs: string[]): void;
+    load(data: IDrawData, changeResourceUUIDs: string[]): void;
     on<T extends keyof TypeLoaderEventArgMap>(name: T, callback: (arg: TypeLoaderEventArgMap[T]) => void): void;
     off<T extends keyof TypeLoaderEventArgMap>(name: T, callback: (arg: TypeLoaderEventArgMap[T]) => void): void;
     isComplete(): boolean;

package/dist/esm/lib/loader.js

@@ -29,7 +29,8 @@ export default class Loader {
     }
     load(data, changeResourceUUIDs) {
         const [uuidQueue, loadData] = this._resetLoadData(data, changeResourceUUIDs);
-        if (this._status === LoaderStatus.FREE || this._status === LoaderStatus.COMPLETE) {
+        if (this._status === LoaderStatus.FREE ||
+            this._status === LoaderStatus.COMPLETE) {
             this._currentUUIDQueue = uuidQueue;
             this._currentLoadData = loadData;
             this._loadTask();
@@ -37,7 +38,7 @@ export default class Loader {
         else if (this._status === LoaderStatus.LOADING && uuidQueue.length > 0) {
             this._waitingLoadQueue.push({
                 uuidQueue,
-                loadData,
+                loadData
             });
         }
     }
@@ -63,7 +64,7 @@ export default class Loader {
         const storageLoadData = this._storageLoadData;
         for (let i = data.elements.length - 1; i >= 0; i--) {
             const elem = data.elements[i];
-            if (['image', 'svg', 'html',].includes(elem.type)) {
+            if (['image', 'svg', 'html'].includes(elem.type)) {
                 if (!storageLoadData[elem.uuid]) {
                     loadData[elem.uuid] = this._createEmptyLoadItem(elem);
                     uuidQueue.push(elem.uuid);
@@ -105,7 +106,7 @@ export default class Loader {
             source,
             elemW,
             elemH,
-            element: deepClone(elem),
+            element: deepClone(elem)
         };
     }
     _loadTask() {
@@ -148,7 +149,8 @@ export default class Loader {
                     break;
                 }
                 loadUUIDList.push(uuid);
-                this._loadElementSource(this._currentLoadData[uuid]).then((image) => {
+                this._loadElementSource(this._currentLoadData[uuid])
+                    .then((image) => {
                     var _a, _b;
                     loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
                     const status = _loadAction();
@@ -160,9 +162,11 @@ export default class Loader {
                         source: this._currentLoadData[uuid].source,
                         elemW: this._currentLoadData[uuid].elemW,
                         elemH: this._currentLoadData[uuid].elemH,
-                        element: this._currentLoadData[uuid].element,
+                        element: this._currentLoadData[uuid].element
                     };
-                    if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
+                    if (loadUUIDList.length === 0 &&
+                        uuids.length === 0 &&
+                        status === true) {
                         this._status = LoaderStatus.FREE;
                         this._loadTask();
                     }
@@ -174,9 +178,10 @@ export default class Loader {
                         source: this._storageLoadData[uuid].source,
                         elemW: this._storageLoadData[uuid].elemW,
                         elemH: this._storageLoadData[uuid].elemH,
-                        element: (_b = this._storageLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.element,
+                        element: (_b = this._storageLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.element
                     });
-                }).catch((err) => {
+                })
+                    .catch((err) => {
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                     console.warn(err);
                     loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
@@ -191,10 +196,12 @@ export default class Loader {
                             source: (_b = this._currentLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.source,
                             elemW: (_c = this._currentLoadData[uuid]) === null || _c === void 0 ? void 0 : _c.elemW,
                             elemH: (_d = this._currentLoadData[uuid]) === null || _d === void 0 ? void 0 : _d.elemH,
-                            element: (_e = this._currentLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.element,
+                            element: (_e = this._currentLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.element
                         };
                     }
-                    if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
+                    if (loadUUIDList.length === 0 &&
+                        uuids.length === 0 &&
+                        status === true) {
                         this._status = LoaderStatus.FREE;
                         this._loadTask();
                     }
@@ -207,7 +214,7 @@ export default class Loader {
                             source: (_j = this._storageLoadData[uuid]) === null || _j === void 0 ? void 0 : _j.source,
                             elemW: (_k = this._storageLoadData[uuid]) === null || _k === void 0 ? void 0 : _k.elemW,
                             elemH: (_l = this._storageLoadData[uuid]) === null || _l === void 0 ? void 0 : _l.elemH,
-                            element: (_m = this._storageLoadData[uuid]) === null || _m === void 0 ? void 0 : _m.element,
+                            element: (_m = this._storageLoadData[uuid]) === null || _m === void 0 ? void 0 : _m.element
                         });
                     }
                 });
@@ -228,11 +235,12 @@ export default class Loader {
             }
             else if (params && params.type === 'html') {
                 const image = yield loadHTML(params.source, {
-                    width: params.elemW, height: params.elemH
+                    width: params.elemW,
+                    height: params.elemH
                 });
                 return image;
             }
-            throw Error('Element\'s source is not support!');
+            throw Error("Element's source is not support!");
         });
     }
 }

package/dist/esm/lib/parse.d.ts

@@ -1,2 +1,2 @@
-import { TypeData } from '@idraw/types';
-export declare function parseData(data: any): TypeData;
+import { IDrawData } from '@idraw/types';
+export declare function parseData(data: any): IDrawData;

package/dist/esm/lib/renderer-event.d.ts

@@ -1,19 +1,19 @@
-import { TypeElement, TypeElemDesc } from '@idraw/types';
+import { DataElement, DataElemDesc } from '@idraw/types';
 export type TypeRendererEventArgMap = {
-    'drawFrame': {
+    drawFrame: {
         t: number;
     };
-    'drawFrameComplete': {
+    drawFrameComplete: {
         t: number;
     };
-    'load': {
-        element: TypeElement<keyof TypeElemDesc>;
+    load: {
+        element: DataElement<keyof DataElemDesc>;
     };
-    'loadComplete': {
+    loadComplete: {
         t: number;
     };
-    'error': {
-        element: TypeElement<keyof TypeElemDesc>;
+    error: {
+        element: DataElement<keyof DataElemDesc>;
         error: any;
     };
 };

package/dist/esm/lib/temp.d.ts

@@ -1,4 +1,4 @@
-import { TypeHelperWrapperControllerDirection, TypePoint } from '@idraw/types';
+import { HelperWrapperControllerDirection, Point } from '@idraw/types';
 import { Mode, CursorStatus } from './../constant/static';
 type TempDataDesc = {
     hasInited: boolean;
@@ -8,9 +8,9 @@ type TempDataDesc = {
     selectedUUID: string | null;
     selectedUUIDList: string[];
     hoverUUID: string | null;
-    selectedControllerDirection: TypeHelperWrapperControllerDirection | null;
-    hoverControllerDirection: TypeHelperWrapperControllerDirection | null;
-    prevPoint: TypePoint | null;
+    selectedControllerDirection: HelperWrapperControllerDirection | null;
+    hoverControllerDirection: HelperWrapperControllerDirection | null;
+    prevPoint: Point | null;
 };
 export declare class TempData {
     private _temp;

package/dist/esm/lib/temp.js

@@ -10,7 +10,7 @@ function createData() {
         hoverUUID: null,
         selectedControllerDirection: null,
         hoverControllerDirection: null,
-        prevPoint: null,
+        prevPoint: null
     };
 }
 export class TempData {

package/dist/esm/lib/transform.d.ts

@@ -1,4 +1,4 @@
-import { TypeContext, TypePoint, TypeElement, TypeElemDesc } from '@idraw/types';
-declare function rotateElement(ctx: TypeContext, elem: TypeElement<keyof TypeElemDesc>, callback: (ctx: TypeContext) => void): void;
-declare function rotateContext(ctx: TypeContext, center: TypePoint | undefined, radian: number, callback: (ctx: TypeContext) => void): void;
-export { rotateContext, rotateElement, };
+import { IDrawContext, Point, DataElement, DataElemDesc } from '@idraw/types';
+declare function rotateElement(ctx: IDrawContext, elem: DataElement<keyof DataElemDesc>, callback: (ctx: IDrawContext) => void): void;
+declare function rotateContext(ctx: IDrawContext, center: Point | undefined, radian: number, callback: (ctx: IDrawContext) => void): void;
+export { rotateContext, rotateElement };

package/dist/esm/lib/transform.js

@@ -17,4 +17,4 @@ function rotateContext(ctx, center, radian, callback) {
         ctx.translate(-center.x, -center.y);
     }
 }
-export { rotateContext, rotateElement, };
+export { rotateContext, rotateElement };

package/dist/index.global.js

@@ -88,8 +88,8 @@ var iDrawRenderer = function() {
       const reader = new FileReader();
       reader.readAsDataURL(blob);
       reader.onload = function(event) {
-        var _a2;
-        const base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
+        var _a;
+        const base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
         resolve(base64);
       };
       reader.onerror = function(err) {
@@ -104,8 +104,8 @@ var iDrawRenderer = function() {
       const reader = new FileReader();
       reader.readAsDataURL(blob);
       reader.onload = function(event) {
-        var _a2;
-        const base64 = (_a2 = event === null || event === void 0 ? void 0 : event.target) === null || _a2 === void 0 ? void 0 : _a2.result;
+        var _a;
+        const base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
         resolve(base64);
       };
       reader.onerror = function(err) {
@@ -744,7 +744,7 @@ var iDrawRenderer = function() {
     });
   }
   function drawContext(ctx, data, loader) {
-    var _a2;
+    var _a;
     clearContext(ctx);
     const size = ctx.getSize();
     ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
@@ -756,7 +756,7 @@ var iDrawRenderer = function() {
     }
     for (let i = 0; i < data.elements.length; i++) {
       const elem = data.elements[i];
-      if (((_a2 = elem == null ? void 0 : elem.operation) == null ? void 0 : _a2.invisible) === true) {
+      if (((_a = elem == null ? void 0 : elem.operation) == null ? void 0 : _a.invisible) === true) {
         continue;
       }
       switch (elem.type) {
@@ -850,7 +850,10 @@ var iDrawRenderer = function() {
       this._waitingLoadQueue = [];
     }
     load(data, changeResourceUUIDs) {
-      const [uuidQueue, loadData] = this._resetLoadData(data, changeResourceUUIDs);
+      const [uuidQueue, loadData] = this._resetLoadData(
+        data,
+        changeResourceUUIDs
+      );
       if (this._status === "free" || this._status === "complete") {
         this._currentUUIDQueue = uuidQueue;
         this._currentLoadData = loadData;
@@ -872,14 +875,14 @@ var iDrawRenderer = function() {
       return this._status === "complete";
     }
     getContent(uuid) {
-      var _a2;
-      if (((_a2 = this._storageLoadData[uuid]) == null ? void 0 : _a2.status) === "loaded") {
+      var _a;
+      if (((_a = this._storageLoadData[uuid]) == null ? void 0 : _a.status) === "loaded") {
         return this._storageLoadData[uuid].content;
       }
       return null;
     }
     // getPattern(
-    //   elem: TypeElement<keyof TypeElemDesc>,
+    //   elem: DataElement<keyof DataElemDesc>,
     //   opts?: {
     //     forceUpdate: boolean
     //   }
@@ -990,7 +993,7 @@ var iDrawRenderer = function() {
           }
           loadUUIDList.push(uuid);
           this._loadElementSource(this._currentLoadData[uuid]).then((image) => {
-            var _a2, _b2;
+            var _a, _b;
             loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
             const status = _loadAction();
             this._storageLoadData[uuid] = {
@@ -1008,29 +1011,29 @@ var iDrawRenderer = function() {
               this._loadTask();
             }
             this._event.trigger("load", {
-              uuid: (_a2 = this._storageLoadData[uuid]) == null ? void 0 : _a2.uuid,
+              uuid: (_a = this._storageLoadData[uuid]) == null ? void 0 : _a.uuid,
               type: this._storageLoadData[uuid].type,
               status: this._storageLoadData[uuid].status,
               content: this._storageLoadData[uuid].content,
               source: this._storageLoadData[uuid].source,
               elemW: this._storageLoadData[uuid].elemW,
               elemH: this._storageLoadData[uuid].elemH,
-              element: (_b2 = this._storageLoadData[uuid]) == null ? void 0 : _b2.element
+              element: (_b = this._storageLoadData[uuid]) == null ? void 0 : _b.element
             });
           }).catch((err) => {
-            var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
             console.warn(err);
             loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
             const status = _loadAction();
             if (this._currentLoadData[uuid]) {
               this._storageLoadData[uuid] = {
                 uuid,
-                type: (_a2 = this._currentLoadData[uuid]) == null ? void 0 : _a2.type,
+                type: (_a = this._currentLoadData[uuid]) == null ? void 0 : _a.type,
                 status: "fail",
                 content: null,
                 error: err,
-                source: (_b2 = this._currentLoadData[uuid]) == null ? void 0 : _b2.source,
-                elemW: (_c2 = this._currentLoadData[uuid]) == null ? void 0 : _c2.elemW,
+                source: (_b = this._currentLoadData[uuid]) == null ? void 0 : _b.source,
+                elemW: (_c = this._currentLoadData[uuid]) == null ? void 0 : _c.elemW,
                 elemH: (_d = this._currentLoadData[uuid]) == null ? void 0 : _d.elemH,
                 element: (_e = this._currentLoadData[uuid]) == null ? void 0 : _e.element
               };
@@ -1062,18 +1065,13 @@ var iDrawRenderer = function() {
         const image = await loadImage(params.source);
         return image;
       } else if (params && params.type === "svg") {
-        const image = await loadSVG(
-          params.source
-        );
+        const image = await loadSVG(params.source);
         return image;
       } else if (params && params.type === "html") {
-        const image = await loadHTML(
-          params.source,
-          {
-            width: params.elemW,
-            height: params.elemH
-          }
-        );
+        const image = await loadHTML(params.source, {
+          width: params.elemW,
+          height: params.elemH
+        });
         return image;
       }
       throw Error("Element's source is not support!");
@@ -1127,40 +1125,31 @@ var iDrawRenderer = function() {
       return false;
     }
   }
-  const _queue = Symbol("_queue");
-  const _ctx = Symbol("_ctx");
-  const _status = Symbol("_status");
-  const _loader = Symbol("_loader");
-  const _opts = Symbol("_opts");
-  const _freeze = Symbol("_freeze");
-  const _drawFrame = Symbol("_drawFrame");
-  const _retainQueueOneItem = Symbol("_retainQueueOneItem");
-  var _a, _b, _c;
   const { requestAnimationFrame } = window;
   class Renderer extends RendererEvent {
     constructor(opts) {
       super();
-      this[_a] = [];
-      this[_b] = null;
-      this[_c] = "null";
-      this[_opts] = opts;
-      this[_loader] = new Loader({
+      this._queue = [];
+      this._ctx = null;
+      this._status = "null";
+      this._opts = opts;
+      this._loader = new Loader({
         maxParallelNum: 6
       });
-      this[_loader].on("load", (res) => {
-        this[_drawFrame]();
+      this._loader.on("load", (res) => {
+        this._drawFrame();
         this.trigger("load", { element: res.element });
       });
-      this[_loader].on("error", (res) => {
+      this._loader.on("error", (res) => {
         this.trigger("error", { element: res.element, error: res.error });
       });
-      this[_loader].on("complete", () => {
+      this._loader.on("complete", () => {
         this.trigger("loadComplete", { t: Date.now() });
       });
     }
     render(target, originData, opts) {
       const { changeResourceUUIDs = [] } = opts || {};
-      this[_status] = "free";
+      this._status = "free";
       const data = deepClone(originData);
       if (Array.isArray(data.elements)) {
         data.elements.forEach((elem) => {
@@ -1169,14 +1158,14 @@ var iDrawRenderer = function() {
           }
         });
       }
-      if (!this[_ctx]) {
-        if (this[_opts] && Object.prototype.toString.call(target) === "[object HTMLCanvasElement]") {
-          const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts];
+      if (!this._ctx) {
+        if (this._opts && Object.prototype.toString.call(target) === "[object HTMLCanvasElement]") {
+          const { width, height, contextWidth, contextHeight, devicePixelRatio } = this._opts;
           const canvas = target;
           canvas.width = width * devicePixelRatio;
           canvas.height = height * devicePixelRatio;
           const ctx2d = canvas.getContext("2d");
-          this[_ctx] = new Context(ctx2d, {
+          this._ctx = new Context(ctx2d, {
             width,
             height,
             contextWidth: contextWidth || width,
@@ -1184,77 +1173,77 @@ var iDrawRenderer = function() {
             devicePixelRatio
           });
         } else if (target) {
-          this[_ctx] = target;
+          this._ctx = target;
         }
       }
       if ([
         "freeze"
         /* FREEZE */
-      ].includes(this[_status])) {
+      ].includes(this._status)) {
         return;
       }
       const _data = deepClone({ data });
-      this[_queue].push(_data);
-      this[_drawFrame]();
-      this[_loader].load(data, changeResourceUUIDs || []);
+      this._queue.push(_data);
+      this._drawFrame();
+      this._loader.load(data, changeResourceUUIDs || []);
     }
     getContext() {
-      return this[_ctx];
+      return this._ctx;
     }
     thaw() {
-      this[_status] = "free";
+      this._status = "free";
     }
-    [(_a = _queue, _b = _ctx, _c = _status, _freeze)]() {
-      this[_status] = "freeze";
+    _freeze() {
+      this._status = "freeze";
     }
-    [_drawFrame]() {
-      if (this[_status] === "freeze") {
+    _drawFrame() {
+      if (this._status === "freeze") {
         return;
       }
       requestAnimationFrame(() => {
-        if (this[_status] === "freeze") {
+        if (this._status === "freeze") {
           return;
         }
-        const ctx = this[_ctx];
-        let item = this[_queue][0];
+        const ctx = this._ctx;
+        let item = this._queue[0];
         let isLastFrame = false;
-        if (this[_queue].length > 1) {
-          item = this[_queue].shift();
+        if (this._queue.length > 1) {
+          item = this._queue.shift();
         } else {
           isLastFrame = true;
         }
-        if (this[_loader].isComplete() !== true) {
-          this[_drawFrame]();
+        if (this._loader.isComplete() !== true) {
+          this._drawFrame();
           if (item && ctx) {
-            drawContext(ctx, item.data, this[_loader]);
+            drawContext(ctx, item.data, this._loader);
           }
         } else if (item && ctx) {
-          drawContext(ctx, item.data, this[_loader]);
-          this[_retainQueueOneItem]();
+          drawContext(ctx, item.data, this._loader);
+          this._retainQueueOneItem();
           if (!isLastFrame) {
-            this[_drawFrame]();
+            this._drawFrame();
           } else {
-            this[_status] = "free";
+            this._status = "free";
           }
         } else {
-          this[_status] = "free";
+          this._status = "free";
         }
         this.trigger("drawFrame", { t: Date.now() });
-        if (this[_loader].isComplete() === true && this[_queue].length === 1 && this[_status] === "free") {
-          if (ctx && this[_queue][0] && this[_queue][0].data) {
-            drawContext(ctx, this[_queue][0].data, this[_loader]);
+        if (this._loader.isComplete() === true && this._queue.length === 1 && this._status === "free") {
+          if (ctx && this._queue[0] && this._queue[0].data) {
+            drawContext(ctx, this._queue[0].data, this._loader);
           }
           this.trigger("drawFrameComplete", { t: Date.now() });
-          this[_freeze]();
+          this._freeze();
         }
       });
     }
-    [_retainQueueOneItem]() {
-      if (this[_queue].length <= 1) {
+    _retainQueueOneItem() {
+      if (this._queue.length <= 1) {
         return;
       }
-      const lastOne = deepClone(this[_queue][this[_queue].length - 1]);
-      this[_queue] = [lastOne];
+      const lastOne = deepClone(this._queue[this._queue.length - 1]);
+      this._queue = [lastOne];
     }
   }
   return Renderer;

package/dist/index.global.min.js

@@ -1 +1 @@
-var iDrawRenderer=function(){"use strict";function t(t){return"string"==typeof t&&/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)}function e(t){return function t(e){const i=(s=e,Object.prototype.toString.call(s).replace(/[\]|\[]{1,1}/gi,"").split(" ")[1]);var s;if(["Null","Number","String","Boolean","Undefined"].indexOf(i)>=0)return e;if("Array"===i){const i=[];return e.forEach((e=>{i.push(t(e))})),i}if("Object"===i){const i={};return Object.keys(e).forEach((s=>{i[s]=t(e[s])})),i}}(t)}function i(t){return(Object.prototype.toString.call(t)||"").replace(/(\[object|\])/gi,"").trim()}const s={type(t,e){const s=i(t);return!0===e?s.toLocaleLowerCase():s},array:t=>"Array"===i(t),json:t=>"Object"===i(t),function:t=>"Function"===i(t),asyncFunction:t=>"AsyncFunction"===i(t),string:t=>"String"===i(t),number:t=>"Number"===i(t),undefined:t=>"Undefined"===i(t),null:t=>"Null"===i(t),promise:t=>"Promise"===i(t)};var o=globalThis&&globalThis.__awaiter||function(t,e,i,s){return new(i||(i=Promise))((function(o,r){function n(t){try{h(s.next(t))}catch(t){r(t)}}function a(t){try{h(s.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(n,a)}h((s=s.apply(t,e||[])).next())}))};const{Image:r}=window;function n(t){return new Promise(((e,i)=>{const s=new r;s.crossOrigin="anonymous",s.onload=function(){e(s)},s.onabort=i,s.onerror=i,s.src=t}))}function a(t){return o(this,void 0,void 0,(function*(){const e=yield function(t){return new Promise(((e,i)=>{const s=new Blob([t],{type:"image/svg+xml;charset=utf-8"}),o=new FileReader;o.readAsDataURL(s),o.onload=function(t){var i;const s=null===(i=null==t?void 0:t.target)||void 0===i?void 0:i.result;e(s)},o.onerror=function(t){i(t)}}))}(t);return yield n(e)}))}function h(t,e){return o(this,void 0,void 0,(function*(){t=t.replace(/\&/gi,"&amp;");const i=yield function(t,e){const{width:i,height:s}=e;return new Promise(((e,o)=>{const r=new Blob([`\n    <svg xmlns="http://www.w3.org/2000/svg" width="${i||""}" height = "${s||""}">\n      <foreignObject width="100%" height="100%">\n        <div xmlns = "http://www.w3.org/1999/xhtml">\n          ${t}\n        </div>\n      </foreignObject>\n    </svg>\n    `],{type:"image/svg+xml;charset=utf-8"}),n=new FileReader;n.readAsDataURL(r),n.onload=function(t){var i;const s=null===(i=null==t?void 0:t.target)||void 0===i?void 0:i.result;e(s)},n.onerror=function(t){o(t)}}))}(t,e);return yield n(i)}))}class l{constructor(t,e){this._opts=e,this._ctx=t,this._transform={scale:1,scrollX:0,scrollY:0}}getContext(){return this._ctx}resetSize(t){this._opts=Object.assign(Object.assign({},this._opts),t)}calcDeviceNum(t){return t*this._opts.devicePixelRatio}calcScreenNum(t){return t/this._opts.devicePixelRatio}getSize(){return{width:this._opts.width,height:this._opts.height,contextWidth:this._opts.contextWidth,contextHeight:this._opts.contextHeight,devicePixelRatio:this._opts.devicePixelRatio}}setTransform(t){this._transform=Object.assign(Object.assign({},this._transform),t)}getTransform(){return{scale:this._transform.scale,scrollX:this._transform.scrollX,scrollY:this._transform.scrollY}}setFillStyle(t){this._ctx.fillStyle=t}fill(t){return this._ctx.fill(t||"nonzero")}arc(t,e,i,s,o,r){return this._ctx.arc(this._doSize(t),this._doSize(e),this._doSize(i),s,o,r)}rect(t,e,i,s){return this._ctx.rect(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s))}fillRect(t,e,i,s){return this._ctx.fillRect(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s))}clearRect(t,e,i,s){return this._ctx.clearRect(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s))}beginPath(){return this._ctx.beginPath()}closePath(){return this._ctx.closePath()}lineTo(t,e){return this._ctx.lineTo(this._doSize(t),this._doSize(e))}moveTo(t,e){return this._ctx.moveTo(this._doSize(t),this._doSize(e))}arcTo(t,e,i,s,o){return this._ctx.arcTo(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s),this._doSize(o))}setLineWidth(t){return this._ctx.lineWidth=this._doSize(t)}setLineDash(t){return this._ctx.setLineDash(t.map((t=>this._doSize(t))))}isPointInPath(t,e){return this._ctx.isPointInPath(this._doX(t),this._doY(e))}isPointInPathWithoutScroll(t,e){return this._ctx.isPointInPath(this._doSize(t),this._doSize(e))}setStrokeStyle(t){this._ctx.strokeStyle=t}stroke(){return this._ctx.stroke()}translate(t,e){return this._ctx.translate(this._doSize(t),this._doSize(e))}rotate(t){return this._ctx.rotate(t)}drawImage(...t){const e=t[0],i=t[1],s=t[2],o=t[3],r=t[4],n=t[t.length-4],a=t[t.length-3],h=t[t.length-2],l=t[t.length-1];return 9===t.length?this._ctx.drawImage(e,this._doSize(i),this._doSize(s),this._doSize(o),this._doSize(r),this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l)):this._ctx.drawImage(e,this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l))}createPattern(t,e){return this._ctx.createPattern(t,e)}measureText(t){return this._ctx.measureText(t)}setTextAlign(t){this._ctx.textAlign=t}fillText(t,e,i,s){return void 0!==s?this._ctx.fillText(t,this._doSize(e),this._doSize(i),this._doSize(s)):this._ctx.fillText(t,this._doSize(e),this._doSize(i))}strokeText(t,e,i,s){return void 0!==s?this._ctx.strokeText(t,this._doSize(e),this._doSize(i),this._doSize(s)):this._ctx.strokeText(t,this._doSize(e),this._doSize(i))}setFont(t){const e=[];"bold"===t.fontWeight&&e.push(`${t.fontWeight}`),e.push(`${this._doSize(t.fontSize||12)}px`),e.push(`${t.fontFamily||"sans-serif"}`),this._ctx.font=`${e.join(" ")}`}setTextBaseline(t){this._ctx.textBaseline=t}setGlobalAlpha(t){this._ctx.globalAlpha=t}save(){this._ctx.save()}restore(){this._ctx.restore()}scale(t,e){this._ctx.scale(t,e)}setShadowColor(t){this._ctx.shadowColor=t}setShadowOffsetX(t){this._ctx.shadowOffsetX=this._doSize(t)}setShadowOffsetY(t){this._ctx.shadowOffsetY=this._doSize(t)}setShadowBlur(t){this._ctx.shadowBlur=this._doSize(t)}ellipse(t,e,i,s,o,r,n,a){this._ctx.ellipse(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s),o,r,n,a)}_doSize(t){return this._opts.devicePixelRatio*t}_doX(t){const{scale:e,scrollX:i}=this._transform,s=(t-i)/e;return this._doSize(s)}_doY(t){const{scale:e,scrollY:i}=this._transform,s=(t-i)/e;return this._doSize(s)}}function c(t){return"number"==typeof t&&(t>0||t<=0)}function u(t){return"number"==typeof t&&t>=0}function d(t){return"string"==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${t}`)}function f(t){return"string"==typeof t&&/^(data:image\/)/.test(`${t}`)}const _={x:function(t){return c(t)},y:function(t){return c(t)},w:u,h:function(t){return"number"==typeof t&&t>=0},angle:function(t){return"number"==typeof t&&t>=-360&&t<=360},number:c,borderWidth:function(t){return u(t)},borderRadius:function(t){return c(t)&&t>=0},color:function(e){return t(e)},imageSrc:function(t){return f(t)||d(t)},imageURL:d,imageBase64:f,svg:function(t){return"string"==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test(`${t}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${t}`.trim())},html:function(t){let e=!1;if("string"==typeof t){let i=document.createElement("div");i.innerHTML=t,i.children.length>0&&(e=!0),i=null}return e},text:function(t){return"string"==typeof t},fontSize:function(t){return c(t)&&t>0},lineHeight:function(t){return c(t)&&t>0},textAlign:function(t){return["center","left","right"].includes(t)},fontFamily:function(t){return"string"==typeof t&&t.length>0},fontWeight:function(t){return["bold"].includes(t)},strokeWidth:function(t){return c(t)&&t>0}};function g(t,e,i){const s=function(t){return{x:t.x+t.w/2,y:t.y+t.h/2}}(e);return function(t,e,i,s){e&&(i>0||i<0)&&(t.translate(e.x,e.y),t.rotate(i),t.translate(-e.x,-e.y));s(t),e&&(i>0||i<0)&&(t.translate(e.x,e.y),t.rotate(-i),t.translate(-e.x,-e.y))}(t,s,(e.angle||0)/180*Math.PI||0,i)}function m(t){t.setFillStyle("#000000"),t.setStrokeStyle("#000000"),t.setLineDash([]),t.setGlobalAlpha(1),t.setShadowColor("#00000000"),t.setShadowOffsetX(0),t.setShadowOffsetY(0),t.setShadowBlur(0)}function x(e,i,o){m(e),function(e,i){m(e),g(e,i,(()=>{if(!(i.desc.borderWidth&&i.desc.borderWidth>0))return;const s=i.desc.borderWidth;let o="#000000";!0===t(i.desc.borderColor)&&(o=i.desc.borderColor);const r=i.x-s/2,n=i.y-s/2,a=i.w+s,h=i.h+s;let l=i.desc.borderRadius||0;l=Math.min(l,a/2,h/2),l<a/2&&l<h/2&&(l+=s/2);const{desc:c}=i;void 0!==c.shadowColor&&t(c.shadowColor)&&e.setShadowColor(c.shadowColor),void 0!==c.shadowOffsetX&&_.number(c.shadowOffsetX)&&e.setShadowOffsetX(c.shadowOffsetX),void 0!==c.shadowOffsetY&&_.number(c.shadowOffsetY)&&e.setShadowOffsetY(c.shadowOffsetY),void 0!==c.shadowBlur&&_.number(c.shadowBlur)&&e.setShadowBlur(c.shadowBlur),e.beginPath(),e.setLineWidth(s),e.setStrokeStyle(o),e.moveTo(r+l,n),e.arcTo(r+a,n,r+a,n+h,l),e.arcTo(r+a,n+h,r,n+h,l),e.arcTo(r,n+h,r,n,l),e.arcTo(r,n,r+a,n,l),e.closePath(),e.stroke()}))}(e,i),m(e),g(e,i,(()=>{const{x:t,y:r,w:n,h:a}=i;let h=i.desc.borderRadius||0;h=Math.min(h,n/2,a/2),(n<2*h||a<2*h)&&(h=0),e.beginPath(),e.moveTo(t+h,r),e.arcTo(t+n,r,t+n,r+a,h),e.arcTo(t+n,r+a,t,r+a,h),e.arcTo(t,r+a,t,r,h),e.arcTo(t,r,t+n,r,h),e.closePath(),("string"==typeof o||["CanvasPattern"].includes(s.type(o)))&&e.setFillStyle(o),e.fill()}))}function S(t,e){x(t,e,e.desc.bgColor)}function w(t,e,i){const s=i.getContent(e.uuid);g(t,e,(()=>{s&&t.drawImage(s,e.x,e.y,e.w,e.h)}))}function p(t,e,i){const s=i.getContent(e.uuid);g(t,e,(()=>{s&&t.drawImage(s,e.x,e.y,e.w,e.h)}))}function y(t,e,i){const s=i.getContent(e.uuid);g(t,e,(()=>{s&&t.drawImage(s,e.x,e.y,e.w,e.h)}))}function v(e,i,s){m(e),x(e,i,i.desc.bgColor||"transparent"),g(e,i,(()=>{const s={fontSize:12,fontFamily:"sans-serif",textAlign:"center",...i.desc};e.setFillStyle(i.desc.color),e.setTextBaseline("top"),e.setFont({fontWeight:s.fontWeight,fontSize:s.fontSize,fontFamily:s.fontFamily});const o=s.text.replace(/\r\n/gi,"\n"),r=s.lineHeight||s.fontSize,n=o.split("\n"),a=[];let h=0;n.forEach(((t,s)=>{let o="";if(t.length>0){for(let l=0;l<t.length&&(e.measureText(o+(t[l]||"")).width<e.calcDeviceNum(i.w)?o+=t[l]||"":(a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),o=t[l]||"",h++),!((h+1)*r>i.h));l++)if(t.length-1===l&&(h+1)*r<i.h){a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),s<n.length-1&&h++;break}}else a.push({text:"",width:0})}));let l=0;a.length*r<i.h&&("top"===i.desc.verticalAlign?l=0:"bottom"===i.desc.verticalAlign?l+=i.h-a.length*r:l+=(i.h-a.length*r)/2);{const o=i.y+l;void 0!==s.textShadowColor&&t(s.textShadowColor)&&e.setShadowColor(s.textShadowColor),void 0!==s.textShadowOffsetX&&_.number(s.textShadowOffsetX)&&e.setShadowOffsetX(s.textShadowOffsetX),void 0!==s.textShadowOffsetY&&_.number(s.textShadowOffsetY)&&e.setShadowOffsetY(s.textShadowOffsetY),void 0!==s.textShadowBlur&&_.number(s.textShadowBlur)&&e.setShadowBlur(s.textShadowBlur),a.forEach(((t,n)=>{let a=i.x;"center"===s.textAlign?a=i.x+(i.w-t.width)/2:"right"===s.textAlign&&(a=i.x+(i.w-t.width)),e.fillText(t.text,a,o+r*n)})),m(e)}if(t(s.strokeColor)&&void 0!==s.strokeWidth&&s.strokeWidth>0){const t=i.y+l;a.forEach(((o,n)=>{let a=i.x;"center"===s.textAlign?a=i.x+(i.w-o.width)/2:"right"===s.textAlign&&(a=i.x+(i.w-o.width)),void 0!==s.strokeColor&&e.setStrokeStyle(s.strokeColor),void 0!==s.strokeWidth&&s.strokeWidth>0&&e.setLineWidth(s.strokeWidth),e.strokeText(o.text,a,t+r*n)}))}}))}function b(t,e){m(t),g(t,e,(t=>{const{x:i,y:s,w:o,h:r,desc:n}=e,{bgColor:a="#000000",borderColor:h="#000000",borderWidth:l=0}=n,c=o/2,u=r/2,d=i+c,f=s+u;if(l&&l>0){const e=l/2+c,i=l/2+u;t.beginPath(),t.setStrokeStyle(h),t.setLineWidth(l),t.ellipse(d,f,e,i,0,0,2*Math.PI),t.closePath(),t.stroke()}t.beginPath(),t.setFillStyle(a),t.ellipse(d,f,c,u,0,0,2*Math.PI),t.closePath(),t.fill()}))}function z(e,i,s){var o;m(e);const r=e.getSize();if(e.clearRect(0,0,r.contextWidth,r.contextHeight),"string"==typeof i.bgColor&&t(i.bgColor)&&function(t,e){const i=t.getSize();t.setFillStyle(e),t.fillRect(0,0,i.contextWidth,i.contextHeight)}(e,i.bgColor),i.elements.length>0)for(let t=0;t<i.elements.length;t++){const r=i.elements[t];if(!0!==(null==(o=null==r?void 0:r.operation)?void 0:o.invisible))switch(r.type){case"rect":S(e,r);break;case"text":v(e,r);break;case"image":w(e,r,s);break;case"svg":p(e,r,s);break;case"html":y(e,r,s);break;case"circle":b(e,r)}}}class L{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);null==i||i.push(e),this._listeners.set(t,i||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);if(Array.isArray(i))for(let t=0;t<(null==i?void 0:i.length);t++)if(i[t]===e){i.splice(t,1);break}this._listeners.set(t,i||[])}}trigger(t,e){const i=this._listeners.get(t);return!!Array.isArray(i)&&(i.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}class D{constructor(t){this._currentLoadData={},this._currentUUIDQueue=[],this._storageLoadData={},this._status="free",this._waitingLoadQueue=[],this._opts=t,this._event=new L,this._waitingLoadQueue=[]}load(t,e){const[i,s]=this._resetLoadData(t,e);"free"===this._status||"complete"===this._status?(this._currentUUIDQueue=i,this._currentLoadData=s,this._loadTask()):"loading"===this._status&&i.length>0&&this._waitingLoadQueue.push({uuidQueue:i,loadData:s})}on(t,e){this._event.on(t,e)}off(t,e){this._event.off(t,e)}isComplete(){return"complete"===this._status}getContent(t){var e;return"loaded"===(null==(e=this._storageLoadData[t])?void 0:e.status)?this._storageLoadData[t].content:null}_resetLoadData(t,e){const i={},s=[],o=this._storageLoadData;for(let r=t.elements.length-1;r>=0;r--){const n=t.elements[r];["image","svg","html"].includes(n.type)&&(o[n.uuid]?e.includes(n.uuid)&&(i[n.uuid]=this._createEmptyLoadItem(n),s.push(n.uuid)):(i[n.uuid]=this._createEmptyLoadItem(n),s.push(n.uuid)))}return[s,i]}_createEmptyLoadItem(t){let i="";const s=t.type;let o=t.w,r=t.h;if("image"===t.type){i=t.desc.src||""}else if("svg"===t.type){i=t.desc.svg||""}else if("html"===t.type){const e=t;i=(e.desc.html||"").replace(/<script[\s\S]*?<\/script>/gi,""),o=e.desc.width||t.w,r=e.desc.height||t.h}return{uuid:t.uuid,type:s,status:"null",content:null,source:i,elemW:o,elemH:r,element:e(t)}}_loadTask(){if("loading"===this._status)return;if(this._status="loading",0===this._currentUUIDQueue.length){if(0===this._waitingLoadQueue.length)return this._status="complete",void this._event.trigger("complete",void 0);{const t=this._waitingLoadQueue.shift();if(t){const{uuidQueue:e,loadData:i}=t;this._currentLoadData=i,this._currentUUIDQueue=e}}}const{maxParallelNum:t}=this._opts,e=this._currentUUIDQueue.splice(0,t);e.forEach(((t,e)=>{}));const i=[],s=()=>{if(i.length>=t)return!1;if(0===e.length)return!0;for(let o=i.length;o<t;o++){const t=e.shift();if(void 0===t)break;i.push(t),this._loadElementSource(this._currentLoadData[t]).then((o=>{var r,n;i.splice(i.indexOf(t),1);const a=s();this._storageLoadData[t]={uuid:t,type:this._currentLoadData[t].type,status:"loaded",content:o,source:this._currentLoadData[t].source,elemW:this._currentLoadData[t].elemW,elemH:this._currentLoadData[t].elemH,element:this._currentLoadData[t].element},0===i.length&&0===e.length&&!0===a&&(this._status="free",this._loadTask()),this._event.trigger("load",{uuid:null==(r=this._storageLoadData[t])?void 0:r.uuid,type:this._storageLoadData[t].type,status:this._storageLoadData[t].status,content:this._storageLoadData[t].content,source:this._storageLoadData[t].source,elemW:this._storageLoadData[t].elemW,elemH:this._storageLoadData[t].elemH,element:null==(n=this._storageLoadData[t])?void 0:n.element})})).catch((o=>{var r,n,a,h,l,c,u,d,f,_,g,m;console.warn(o),i.splice(i.indexOf(t),1);const x=s();this._currentLoadData[t]&&(this._storageLoadData[t]={uuid:t,type:null==(r=this._currentLoadData[t])?void 0:r.type,status:"fail",content:null,error:o,source:null==(n=this._currentLoadData[t])?void 0:n.source,elemW:null==(a=this._currentLoadData[t])?void 0:a.elemW,elemH:null==(h=this._currentLoadData[t])?void 0:h.elemH,element:null==(l=this._currentLoadData[t])?void 0:l.element}),0===i.length&&0===e.length&&!0===x&&(this._status="free",this._loadTask()),this._currentLoadData[t]&&this._event.trigger("error",{uuid:t,type:null==(c=this._storageLoadData[t])?void 0:c.type,status:null==(u=this._storageLoadData[t])?void 0:u.status,content:null==(d=this._storageLoadData[t])?void 0:d.content,source:null==(f=this._storageLoadData[t])?void 0:f.source,elemW:null==(_=this._storageLoadData[t])?void 0:_.elemW,elemH:null==(g=this._storageLoadData[t])?void 0:g.elemH,element:null==(m=this._storageLoadData[t])?void 0:m.element})}))}return!1};s()}async _loadElementSource(t){if(t&&"image"===t.type){return await n(t.source)}if(t&&"svg"===t.type){return await a(t.source)}if(t&&"html"===t.type){return await h(t.source,{width:t.elemW,height:t.elemH})}throw Error("Element's source is not support!")}}class T{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);null==i||i.push(e),this._listeners.set(t,i||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);if(Array.isArray(i))for(let t=0;t<(null==i?void 0:i.length);t++)if(i[t]===e){i.splice(t,1);break}this._listeners.set(t,i||[])}}trigger(t,e){const i=this._listeners.get(t);return!!Array.isArray(i)&&(i.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}const P=Symbol("_queue"),O=Symbol("_ctx"),C=Symbol("_status"),W=Symbol("_loader"),k=Symbol("_opts"),A=Symbol("_freeze"),I=Symbol("_drawFrame"),R=Symbol("_retainQueueOneItem");var F,$,H;const{requestAnimationFrame:B}=window;class E extends T{constructor(t){super(),this[F]=[],this[$]=null,this[H]="null",this[k]=t,this[W]=new D({maxParallelNum:6}),this[W].on("load",(t=>{this[I](),this.trigger("load",{element:t.element})})),this[W].on("error",(t=>{this.trigger("error",{element:t.element,error:t.error})})),this[W].on("complete",(()=>{this.trigger("loadComplete",{t:Date.now()})}))}render(t,i,s){const{changeResourceUUIDs:o=[]}=s||{};this[C]="free";const r=e(i);if(Array.isArray(r.elements)&&r.elements.forEach((t=>{"string"==typeof t.uuid&&t.uuid||(t.uuid=function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${t()}${t()}-${t()}-${t()}-${t()}-${t()}${t()}${t()}`}())})),!this[O])if(this[k]&&"[object HTMLCanvasElement]"===Object.prototype.toString.call(t)){const{width:e,height:i,contextWidth:s,contextHeight:o,devicePixelRatio:r}=this[k],n=t;n.width=e*r,n.height=i*r;const a=n.getContext("2d");this[O]=new l(a,{width:e,height:i,contextWidth:s||e,contextHeight:o||i,devicePixelRatio:r})}else t&&(this[O]=t);if(["freeze"].includes(this[C]))return;const n=e({data:r});this[P].push(n),this[I](),this[W].load(r,o||[])}getContext(){return this[O]}thaw(){this[C]="free"}[(F=P,$=O,H=C,A)](){this[C]="freeze"}[I](){"freeze"!==this[C]&&B((()=>{if("freeze"===this[C])return;const t=this[O];let e=this[P][0],i=!1;this[P].length>1?e=this[P].shift():i=!0,!0!==this[W].isComplete()?(this[I](),e&&t&&z(t,e.data,this[W])):e&&t?(z(t,e.data,this[W]),this[R](),i?this[C]="free":this[I]()):this[C]="free",this.trigger("drawFrame",{t:Date.now()}),!0===this[W].isComplete()&&1===this[P].length&&"free"===this[C]&&(t&&this[P][0]&&this[P][0].data&&z(t,this[P][0].data,this[W]),this.trigger("drawFrameComplete",{t:Date.now()}),this[A]())}))}[R](){if(this[P].length<=1)return;const t=e(this[P][this[P].length-1]);this[P]=[t]}}return E}();
+var iDrawRenderer=function(){"use strict";function t(t){return"string"==typeof t&&/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)}function e(t){return function t(e){const s=(i=e,Object.prototype.toString.call(i).replace(/[\]|\[]{1,1}/gi,"").split(" ")[1]);var i;if(["Null","Number","String","Boolean","Undefined"].indexOf(s)>=0)return e;if("Array"===s){const s=[];return e.forEach((e=>{s.push(t(e))})),s}if("Object"===s){const s={};return Object.keys(e).forEach((i=>{s[i]=t(e[i])})),s}}(t)}function s(t){return(Object.prototype.toString.call(t)||"").replace(/(\[object|\])/gi,"").trim()}const i={type(t,e){const i=s(t);return!0===e?i.toLocaleLowerCase():i},array:t=>"Array"===s(t),json:t=>"Object"===s(t),function:t=>"Function"===s(t),asyncFunction:t=>"AsyncFunction"===s(t),string:t=>"String"===s(t),number:t=>"Number"===s(t),undefined:t=>"Undefined"===s(t),null:t=>"Null"===s(t),promise:t=>"Promise"===s(t)};var o=globalThis&&globalThis.__awaiter||function(t,e,s,i){return new(s||(s=Promise))((function(o,r){function n(t){try{h(i.next(t))}catch(t){r(t)}}function a(t){try{h(i.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?o(t.value):(e=t.value,e instanceof s?e:new s((function(t){t(e)}))).then(n,a)}h((i=i.apply(t,e||[])).next())}))};const{Image:r}=window;function n(t){return new Promise(((e,s)=>{const i=new r;i.crossOrigin="anonymous",i.onload=function(){e(i)},i.onabort=s,i.onerror=s,i.src=t}))}function a(t){return o(this,void 0,void 0,(function*(){const e=yield function(t){return new Promise(((e,s)=>{const i=new Blob([t],{type:"image/svg+xml;charset=utf-8"}),o=new FileReader;o.readAsDataURL(i),o.onload=function(t){var s;const i=null===(s=null==t?void 0:t.target)||void 0===s?void 0:s.result;e(i)},o.onerror=function(t){s(t)}}))}(t);return yield n(e)}))}function h(t,e){return o(this,void 0,void 0,(function*(){t=t.replace(/\&/gi,"&amp;");const s=yield function(t,e){const{width:s,height:i}=e;return new Promise(((e,o)=>{const r=new Blob([`\n    <svg xmlns="http://www.w3.org/2000/svg" width="${s||""}" height = "${i||""}">\n      <foreignObject width="100%" height="100%">\n        <div xmlns = "http://www.w3.org/1999/xhtml">\n          ${t}\n        </div>\n      </foreignObject>\n    </svg>\n    `],{type:"image/svg+xml;charset=utf-8"}),n=new FileReader;n.readAsDataURL(r),n.onload=function(t){var s;const i=null===(s=null==t?void 0:t.target)||void 0===s?void 0:s.result;e(i)},n.onerror=function(t){o(t)}}))}(t,e);return yield n(s)}))}class l{constructor(t,e){this._opts=e,this._ctx=t,this._transform={scale:1,scrollX:0,scrollY:0}}getContext(){return this._ctx}resetSize(t){this._opts=Object.assign(Object.assign({},this._opts),t)}calcDeviceNum(t){return t*this._opts.devicePixelRatio}calcScreenNum(t){return t/this._opts.devicePixelRatio}getSize(){return{width:this._opts.width,height:this._opts.height,contextWidth:this._opts.contextWidth,contextHeight:this._opts.contextHeight,devicePixelRatio:this._opts.devicePixelRatio}}setTransform(t){this._transform=Object.assign(Object.assign({},this._transform),t)}getTransform(){return{scale:this._transform.scale,scrollX:this._transform.scrollX,scrollY:this._transform.scrollY}}setFillStyle(t){this._ctx.fillStyle=t}fill(t){return this._ctx.fill(t||"nonzero")}arc(t,e,s,i,o,r){return this._ctx.arc(this._doSize(t),this._doSize(e),this._doSize(s),i,o,r)}rect(t,e,s,i){return this._ctx.rect(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i))}fillRect(t,e,s,i){return this._ctx.fillRect(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i))}clearRect(t,e,s,i){return this._ctx.clearRect(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i))}beginPath(){return this._ctx.beginPath()}closePath(){return this._ctx.closePath()}lineTo(t,e){return this._ctx.lineTo(this._doSize(t),this._doSize(e))}moveTo(t,e){return this._ctx.moveTo(this._doSize(t),this._doSize(e))}arcTo(t,e,s,i,o){return this._ctx.arcTo(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i),this._doSize(o))}setLineWidth(t){return this._ctx.lineWidth=this._doSize(t)}setLineDash(t){return this._ctx.setLineDash(t.map((t=>this._doSize(t))))}isPointInPath(t,e){return this._ctx.isPointInPath(this._doX(t),this._doY(e))}isPointInPathWithoutScroll(t,e){return this._ctx.isPointInPath(this._doSize(t),this._doSize(e))}setStrokeStyle(t){this._ctx.strokeStyle=t}stroke(){return this._ctx.stroke()}translate(t,e){return this._ctx.translate(this._doSize(t),this._doSize(e))}rotate(t){return this._ctx.rotate(t)}drawImage(...t){const e=t[0],s=t[1],i=t[2],o=t[3],r=t[4],n=t[t.length-4],a=t[t.length-3],h=t[t.length-2],l=t[t.length-1];return 9===t.length?this._ctx.drawImage(e,this._doSize(s),this._doSize(i),this._doSize(o),this._doSize(r),this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l)):this._ctx.drawImage(e,this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l))}createPattern(t,e){return this._ctx.createPattern(t,e)}measureText(t){return this._ctx.measureText(t)}setTextAlign(t){this._ctx.textAlign=t}fillText(t,e,s,i){return void 0!==i?this._ctx.fillText(t,this._doSize(e),this._doSize(s),this._doSize(i)):this._ctx.fillText(t,this._doSize(e),this._doSize(s))}strokeText(t,e,s,i){return void 0!==i?this._ctx.strokeText(t,this._doSize(e),this._doSize(s),this._doSize(i)):this._ctx.strokeText(t,this._doSize(e),this._doSize(s))}setFont(t){const e=[];"bold"===t.fontWeight&&e.push(`${t.fontWeight}`),e.push(`${this._doSize(t.fontSize||12)}px`),e.push(`${t.fontFamily||"sans-serif"}`),this._ctx.font=`${e.join(" ")}`}setTextBaseline(t){this._ctx.textBaseline=t}setGlobalAlpha(t){this._ctx.globalAlpha=t}save(){this._ctx.save()}restore(){this._ctx.restore()}scale(t,e){this._ctx.scale(t,e)}setShadowColor(t){this._ctx.shadowColor=t}setShadowOffsetX(t){this._ctx.shadowOffsetX=this._doSize(t)}setShadowOffsetY(t){this._ctx.shadowOffsetY=this._doSize(t)}setShadowBlur(t){this._ctx.shadowBlur=this._doSize(t)}ellipse(t,e,s,i,o,r,n,a){this._ctx.ellipse(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i),o,r,n,a)}_doSize(t){return this._opts.devicePixelRatio*t}_doX(t){const{scale:e,scrollX:s}=this._transform,i=(t-s)/e;return this._doSize(i)}_doY(t){const{scale:e,scrollY:s}=this._transform,i=(t-s)/e;return this._doSize(i)}}function u(t){return"number"==typeof t&&(t>0||t<=0)}function c(t){return"number"==typeof t&&t>=0}function d(t){return"string"==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${t}`)}function _(t){return"string"==typeof t&&/^(data:image\/)/.test(`${t}`)}const f={x:function(t){return u(t)},y:function(t){return u(t)},w:c,h:function(t){return"number"==typeof t&&t>=0},angle:function(t){return"number"==typeof t&&t>=-360&&t<=360},number:u,borderWidth:function(t){return c(t)},borderRadius:function(t){return u(t)&&t>=0},color:function(e){return t(e)},imageSrc:function(t){return _(t)||d(t)},imageURL:d,imageBase64:_,svg:function(t){return"string"==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test(`${t}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${t}`.trim())},html:function(t){let e=!1;if("string"==typeof t){let s=document.createElement("div");s.innerHTML=t,s.children.length>0&&(e=!0),s=null}return e},text:function(t){return"string"==typeof t},fontSize:function(t){return u(t)&&t>0},lineHeight:function(t){return u(t)&&t>0},textAlign:function(t){return["center","left","right"].includes(t)},fontFamily:function(t){return"string"==typeof t&&t.length>0},fontWeight:function(t){return["bold"].includes(t)},strokeWidth:function(t){return u(t)&&t>0}};function g(t,e,s){const i=function(t){return{x:t.x+t.w/2,y:t.y+t.h/2}}(e);return function(t,e,s,i){e&&(s>0||s<0)&&(t.translate(e.x,e.y),t.rotate(s),t.translate(-e.x,-e.y));i(t),e&&(s>0||s<0)&&(t.translate(e.x,e.y),t.rotate(-s),t.translate(-e.x,-e.y))}(t,i,(e.angle||0)/180*Math.PI||0,s)}function m(t){t.setFillStyle("#000000"),t.setStrokeStyle("#000000"),t.setLineDash([]),t.setGlobalAlpha(1),t.setShadowColor("#00000000"),t.setShadowOffsetX(0),t.setShadowOffsetY(0),t.setShadowBlur(0)}function x(e,s,o){m(e),function(e,s){m(e),g(e,s,(()=>{if(!(s.desc.borderWidth&&s.desc.borderWidth>0))return;const i=s.desc.borderWidth;let o="#000000";!0===t(s.desc.borderColor)&&(o=s.desc.borderColor);const r=s.x-i/2,n=s.y-i/2,a=s.w+i,h=s.h+i;let l=s.desc.borderRadius||0;l=Math.min(l,a/2,h/2),l<a/2&&l<h/2&&(l+=i/2);const{desc:u}=s;void 0!==u.shadowColor&&t(u.shadowColor)&&e.setShadowColor(u.shadowColor),void 0!==u.shadowOffsetX&&f.number(u.shadowOffsetX)&&e.setShadowOffsetX(u.shadowOffsetX),void 0!==u.shadowOffsetY&&f.number(u.shadowOffsetY)&&e.setShadowOffsetY(u.shadowOffsetY),void 0!==u.shadowBlur&&f.number(u.shadowBlur)&&e.setShadowBlur(u.shadowBlur),e.beginPath(),e.setLineWidth(i),e.setStrokeStyle(o),e.moveTo(r+l,n),e.arcTo(r+a,n,r+a,n+h,l),e.arcTo(r+a,n+h,r,n+h,l),e.arcTo(r,n+h,r,n,l),e.arcTo(r,n,r+a,n,l),e.closePath(),e.stroke()}))}(e,s),m(e),g(e,s,(()=>{const{x:t,y:r,w:n,h:a}=s;let h=s.desc.borderRadius||0;h=Math.min(h,n/2,a/2),(n<2*h||a<2*h)&&(h=0),e.beginPath(),e.moveTo(t+h,r),e.arcTo(t+n,r,t+n,r+a,h),e.arcTo(t+n,r+a,t,r+a,h),e.arcTo(t,r+a,t,r,h),e.arcTo(t,r,t+n,r,h),e.closePath(),("string"==typeof o||["CanvasPattern"].includes(i.type(o)))&&e.setFillStyle(o),e.fill()}))}function w(t,e){x(t,e,e.desc.bgColor)}function S(t,e,s){const i=s.getContent(e.uuid);g(t,e,(()=>{i&&t.drawImage(i,e.x,e.y,e.w,e.h)}))}function p(t,e,s){const i=s.getContent(e.uuid);g(t,e,(()=>{i&&t.drawImage(i,e.x,e.y,e.w,e.h)}))}function y(t,e,s){const i=s.getContent(e.uuid);g(t,e,(()=>{i&&t.drawImage(i,e.x,e.y,e.w,e.h)}))}function v(e,s,i){m(e),x(e,s,s.desc.bgColor||"transparent"),g(e,s,(()=>{const i={fontSize:12,fontFamily:"sans-serif",textAlign:"center",...s.desc};e.setFillStyle(s.desc.color),e.setTextBaseline("top"),e.setFont({fontWeight:i.fontWeight,fontSize:i.fontSize,fontFamily:i.fontFamily});const o=i.text.replace(/\r\n/gi,"\n"),r=i.lineHeight||i.fontSize,n=o.split("\n"),a=[];let h=0;n.forEach(((t,i)=>{let o="";if(t.length>0){for(let l=0;l<t.length&&(e.measureText(o+(t[l]||"")).width<e.calcDeviceNum(s.w)?o+=t[l]||"":(a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),o=t[l]||"",h++),!((h+1)*r>s.h));l++)if(t.length-1===l&&(h+1)*r<s.h){a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),i<n.length-1&&h++;break}}else a.push({text:"",width:0})}));let l=0;a.length*r<s.h&&("top"===s.desc.verticalAlign?l=0:"bottom"===s.desc.verticalAlign?l+=s.h-a.length*r:l+=(s.h-a.length*r)/2);{const o=s.y+l;void 0!==i.textShadowColor&&t(i.textShadowColor)&&e.setShadowColor(i.textShadowColor),void 0!==i.textShadowOffsetX&&f.number(i.textShadowOffsetX)&&e.setShadowOffsetX(i.textShadowOffsetX),void 0!==i.textShadowOffsetY&&f.number(i.textShadowOffsetY)&&e.setShadowOffsetY(i.textShadowOffsetY),void 0!==i.textShadowBlur&&f.number(i.textShadowBlur)&&e.setShadowBlur(i.textShadowBlur),a.forEach(((t,n)=>{let a=s.x;"center"===i.textAlign?a=s.x+(s.w-t.width)/2:"right"===i.textAlign&&(a=s.x+(s.w-t.width)),e.fillText(t.text,a,o+r*n)})),m(e)}if(t(i.strokeColor)&&void 0!==i.strokeWidth&&i.strokeWidth>0){const t=s.y+l;a.forEach(((o,n)=>{let a=s.x;"center"===i.textAlign?a=s.x+(s.w-o.width)/2:"right"===i.textAlign&&(a=s.x+(s.w-o.width)),void 0!==i.strokeColor&&e.setStrokeStyle(i.strokeColor),void 0!==i.strokeWidth&&i.strokeWidth>0&&e.setLineWidth(i.strokeWidth),e.strokeText(o.text,a,t+r*n)}))}}))}function z(t,e){m(t),g(t,e,(t=>{const{x:s,y:i,w:o,h:r,desc:n}=e,{bgColor:a="#000000",borderColor:h="#000000",borderWidth:l=0}=n,u=o/2,c=r/2,d=s+u,_=i+c;if(l&&l>0){const e=l/2+u,s=l/2+c;t.beginPath(),t.setStrokeStyle(h),t.setLineWidth(l),t.ellipse(d,_,e,s,0,0,2*Math.PI),t.closePath(),t.stroke()}t.beginPath(),t.setFillStyle(a),t.ellipse(d,_,u,c,0,0,2*Math.PI),t.closePath(),t.fill()}))}function b(e,s,i){var o;m(e);const r=e.getSize();if(e.clearRect(0,0,r.contextWidth,r.contextHeight),"string"==typeof s.bgColor&&t(s.bgColor)&&function(t,e){const s=t.getSize();t.setFillStyle(e),t.fillRect(0,0,s.contextWidth,s.contextHeight)}(e,s.bgColor),s.elements.length>0)for(let t=0;t<s.elements.length;t++){const r=s.elements[t];if(!0!==(null==(o=null==r?void 0:r.operation)?void 0:o.invisible))switch(r.type){case"rect":w(e,r);break;case"text":v(e,r);break;case"image":S(e,r,i);break;case"svg":p(e,r,i);break;case"html":y(e,r,i);break;case"circle":z(e,r)}}}class L{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const s=this._listeners.get(t);null==s||s.push(e),this._listeners.set(t,s||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const s=this._listeners.get(t);if(Array.isArray(s))for(let t=0;t<(null==s?void 0:s.length);t++)if(s[t]===e){s.splice(t,1);break}this._listeners.set(t,s||[])}}trigger(t,e){const s=this._listeners.get(t);return!!Array.isArray(s)&&(s.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}class D{constructor(t){this._currentLoadData={},this._currentUUIDQueue=[],this._storageLoadData={},this._status="free",this._waitingLoadQueue=[],this._opts=t,this._event=new L,this._waitingLoadQueue=[]}load(t,e){const[s,i]=this._resetLoadData(t,e);"free"===this._status||"complete"===this._status?(this._currentUUIDQueue=s,this._currentLoadData=i,this._loadTask()):"loading"===this._status&&s.length>0&&this._waitingLoadQueue.push({uuidQueue:s,loadData:i})}on(t,e){this._event.on(t,e)}off(t,e){this._event.off(t,e)}isComplete(){return"complete"===this._status}getContent(t){var e;return"loaded"===(null==(e=this._storageLoadData[t])?void 0:e.status)?this._storageLoadData[t].content:null}_resetLoadData(t,e){const s={},i=[],o=this._storageLoadData;for(let r=t.elements.length-1;r>=0;r--){const n=t.elements[r];["image","svg","html"].includes(n.type)&&(o[n.uuid]?e.includes(n.uuid)&&(s[n.uuid]=this._createEmptyLoadItem(n),i.push(n.uuid)):(s[n.uuid]=this._createEmptyLoadItem(n),i.push(n.uuid)))}return[i,s]}_createEmptyLoadItem(t){let s="";const i=t.type;let o=t.w,r=t.h;if("image"===t.type){s=t.desc.src||""}else if("svg"===t.type){s=t.desc.svg||""}else if("html"===t.type){const e=t;s=(e.desc.html||"").replace(/<script[\s\S]*?<\/script>/gi,""),o=e.desc.width||t.w,r=e.desc.height||t.h}return{uuid:t.uuid,type:i,status:"null",content:null,source:s,elemW:o,elemH:r,element:e(t)}}_loadTask(){if("loading"===this._status)return;if(this._status="loading",0===this._currentUUIDQueue.length){if(0===this._waitingLoadQueue.length)return this._status="complete",void this._event.trigger("complete",void 0);{const t=this._waitingLoadQueue.shift();if(t){const{uuidQueue:e,loadData:s}=t;this._currentLoadData=s,this._currentUUIDQueue=e}}}const{maxParallelNum:t}=this._opts,e=this._currentUUIDQueue.splice(0,t);e.forEach(((t,e)=>{}));const s=[],i=()=>{if(s.length>=t)return!1;if(0===e.length)return!0;for(let o=s.length;o<t;o++){const t=e.shift();if(void 0===t)break;s.push(t),this._loadElementSource(this._currentLoadData[t]).then((o=>{var r,n;s.splice(s.indexOf(t),1);const a=i();this._storageLoadData[t]={uuid:t,type:this._currentLoadData[t].type,status:"loaded",content:o,source:this._currentLoadData[t].source,elemW:this._currentLoadData[t].elemW,elemH:this._currentLoadData[t].elemH,element:this._currentLoadData[t].element},0===s.length&&0===e.length&&!0===a&&(this._status="free",this._loadTask()),this._event.trigger("load",{uuid:null==(r=this._storageLoadData[t])?void 0:r.uuid,type:this._storageLoadData[t].type,status:this._storageLoadData[t].status,content:this._storageLoadData[t].content,source:this._storageLoadData[t].source,elemW:this._storageLoadData[t].elemW,elemH:this._storageLoadData[t].elemH,element:null==(n=this._storageLoadData[t])?void 0:n.element})})).catch((o=>{var r,n,a,h,l,u,c,d,_,f,g,m;console.warn(o),s.splice(s.indexOf(t),1);const x=i();this._currentLoadData[t]&&(this._storageLoadData[t]={uuid:t,type:null==(r=this._currentLoadData[t])?void 0:r.type,status:"fail",content:null,error:o,source:null==(n=this._currentLoadData[t])?void 0:n.source,elemW:null==(a=this._currentLoadData[t])?void 0:a.elemW,elemH:null==(h=this._currentLoadData[t])?void 0:h.elemH,element:null==(l=this._currentLoadData[t])?void 0:l.element}),0===s.length&&0===e.length&&!0===x&&(this._status="free",this._loadTask()),this._currentLoadData[t]&&this._event.trigger("error",{uuid:t,type:null==(u=this._storageLoadData[t])?void 0:u.type,status:null==(c=this._storageLoadData[t])?void 0:c.status,content:null==(d=this._storageLoadData[t])?void 0:d.content,source:null==(_=this._storageLoadData[t])?void 0:_.source,elemW:null==(f=this._storageLoadData[t])?void 0:f.elemW,elemH:null==(g=this._storageLoadData[t])?void 0:g.elemH,element:null==(m=this._storageLoadData[t])?void 0:m.element})}))}return!1};i()}async _loadElementSource(t){if(t&&"image"===t.type){return await n(t.source)}if(t&&"svg"===t.type){return await a(t.source)}if(t&&"html"===t.type){return await h(t.source,{width:t.elemW,height:t.elemH})}throw Error("Element's source is not support!")}}class T{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const s=this._listeners.get(t);null==s||s.push(e),this._listeners.set(t,s||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const s=this._listeners.get(t);if(Array.isArray(s))for(let t=0;t<(null==s?void 0:s.length);t++)if(s[t]===e){s.splice(t,1);break}this._listeners.set(t,s||[])}}trigger(t,e){const s=this._listeners.get(t);return!!Array.isArray(s)&&(s.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}const{requestAnimationFrame:O}=window;return class extends T{constructor(t){super(),this._queue=[],this._ctx=null,this._status="null",this._opts=t,this._loader=new D({maxParallelNum:6}),this._loader.on("load",(t=>{this._drawFrame(),this.trigger("load",{element:t.element})})),this._loader.on("error",(t=>{this.trigger("error",{element:t.element,error:t.error})})),this._loader.on("complete",(()=>{this.trigger("loadComplete",{t:Date.now()})}))}render(t,s,i){const{changeResourceUUIDs:o=[]}=i||{};this._status="free";const r=e(s);if(Array.isArray(r.elements)&&r.elements.forEach((t=>{"string"==typeof t.uuid&&t.uuid||(t.uuid=function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${t()}${t()}-${t()}-${t()}-${t()}-${t()}${t()}${t()}`}())})),!this._ctx)if(this._opts&&"[object HTMLCanvasElement]"===Object.prototype.toString.call(t)){const{width:e,height:s,contextWidth:i,contextHeight:o,devicePixelRatio:r}=this._opts,n=t;n.width=e*r,n.height=s*r;const a=n.getContext("2d");this._ctx=new l(a,{width:e,height:s,contextWidth:i||e,contextHeight:o||s,devicePixelRatio:r})}else t&&(this._ctx=t);if(["freeze"].includes(this._status))return;const n=e({data:r});this._queue.push(n),this._drawFrame(),this._loader.load(r,o||[])}getContext(){return this._ctx}thaw(){this._status="free"}_freeze(){this._status="freeze"}_drawFrame(){"freeze"!==this._status&&O((()=>{if("freeze"===this._status)return;const t=this._ctx;let e=this._queue[0],s=!1;this._queue.length>1?e=this._queue.shift():s=!0,!0!==this._loader.isComplete()?(this._drawFrame(),e&&t&&b(t,e.data,this._loader)):e&&t?(b(t,e.data,this._loader),this._retainQueueOneItem(),s?this._status="free":this._drawFrame()):this._status="free",this.trigger("drawFrame",{t:Date.now()}),!0===this._loader.isComplete()&&1===this._queue.length&&"free"===this._status&&(t&&this._queue[0]&&this._queue[0].data&&b(t,this._queue[0].data,this._loader),this.trigger("drawFrameComplete",{t:Date.now()}),this._freeze())}))}_retainQueueOneItem(){if(this._queue.length<=1)return;const t=e(this._queue[this._queue.length-1]);this._queue=[t]}}}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/renderer",
-  "version": "0.3.0-beta.3",
+  "version": "0.3.0-beta.7",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -21,13 +21,13 @@
   "author": "chenshenhai",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "^0.3.0-beta.3"
+    "@idraw/types": "^0.3.0-beta.7"
   },
   "dependencies": {
-    "@idraw/util": "^0.3.0-beta.3"
+    "@idraw/util": "^0.3.0-beta.7"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2420306f422d6c7b87772690e59dbfd8c6e0729c"
+  "gitHead": "2be8fc67cf7ffb642e839d52a9caf9c62b41178d"
 }

package/dist/esm/names.d.ts

@@ -1,9 +0,0 @@
-declare const _queue: unique symbol;
-declare const _ctx: unique symbol;
-declare const _status: unique symbol;
-declare const _loader: unique symbol;
-declare const _opts: unique symbol;
-declare const _freeze: unique symbol;
-declare const _drawFrame: unique symbol;
-declare const _retainQueueOneItem: unique symbol;
-export { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem };

package/dist/esm/names.js

@@ -1,9 +0,0 @@
-const _queue = Symbol('_queue');
-const _ctx = Symbol('_ctx');
-const _status = Symbol('_status');
-const _loader = Symbol('_loader');
-const _opts = Symbol('_opts');
-const _freeze = Symbol('_freeze');
-const _drawFrame = Symbol('_drawFrame');
-const _retainQueueOneItem = Symbol('_retainQueueOneItem');
-export { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem };