@idraw/core 0.3.0-alpha.6 → 0.3.0-alpha.7

package/dist/esm/constant/element.d.ts

@@ -0,0 +1,2 @@
+export declare const elementNames: string[];
+export declare const LIMIT_QBLIQUE_ANGLE = 15;

package/dist/esm/constant/element.js

@@ -0,0 +1,10 @@
+const elementTypes = {
+    'text': {},
+    'rect': {},
+    'image': {},
+    'svg': {},
+    'circle': {},
+    'html': {},
+};
+export const elementNames = Object.keys(elementTypes);
+export const LIMIT_QBLIQUE_ANGLE = 15;

package/dist/esm/constant/static.d.ts

@@ -0,0 +1,11 @@
+export declare enum Mode {
+    NULL = "null",
+    SELECT_ELEMENT = "select-element",
+    SELECT_ELEMENT_LIST = "select-element-list",
+    SELECT_ELEMENT_WRAPPER_CONTROLLER = "select-element-wrapper-controller",
+    SELECT_AREA = "select-area"
+}
+export declare enum CursorStatus {
+    DRAGGING = "dragging",
+    NULL = "null"
+}

package/dist/esm/constant/static.js

@@ -0,0 +1,13 @@
+export var Mode;
+(function (Mode) {
+    Mode["NULL"] = "null";
+    Mode["SELECT_ELEMENT"] = "select-element";
+    Mode["SELECT_ELEMENT_LIST"] = "select-element-list";
+    Mode["SELECT_ELEMENT_WRAPPER_CONTROLLER"] = "select-element-wrapper-controller";
+    Mode["SELECT_AREA"] = "select-area";
+})(Mode || (Mode = {}));
+export var CursorStatus;
+(function (CursorStatus) {
+    CursorStatus["DRAGGING"] = "dragging";
+    CursorStatus["NULL"] = "null";
+})(CursorStatus || (CursorStatus = {}));

package/dist/esm/index.d.ts

@@ -0,0 +1,59 @@
+import { TypeData, TypePoint, TypeBoardSizeOptions, TypeConfig, TypeElementBase, TypeElement, TypeElemDesc, TypeContext, TypeCoreOptions, TypeScreenContext, TypeScreenData } from '@idraw/types';
+import { TypeIs } from './lib/is';
+import { TypeCheck } from './lib/check';
+import { TypeCoreEventArgMap } from './lib';
+import { _board, _data, _opts, _config, _renderer, _element, _tempData, _draw, _coreEvent, _emitChangeScreen, _emitChangeData, _engine } from './names';
+export default class Core {
+    private [_board];
+    private [_data];
+    private [_opts];
+    private [_config];
+    private [_renderer];
+    private [_element];
+    private [_coreEvent];
+    private [_tempData];
+    private [_engine];
+    static is: TypeIs;
+    static check: TypeCheck;
+    constructor(mount: HTMLDivElement, opts: TypeCoreOptions, config?: TypeConfig);
+    [_draw](opts?: {
+        resourceChangeUUIDs?: string[];
+    }): void;
+    getElement(uuid: string): TypeElement<keyof TypeElemDesc> | null;
+    getElementByIndex(index: number): TypeElement<keyof TypeElemDesc> | null;
+    selectElementByIndex(index: number, opts?: {
+        useMode?: boolean;
+    }): void;
+    selectElement(uuid: string, opts?: {
+        useMode?: boolean;
+    }): void;
+    moveUpElement(uuid: string): void;
+    moveDownElement(uuid: string): void;
+    updateElement(elem: TypeElement<keyof TypeElemDesc>): void;
+    addElement(elem: TypeElementBase<keyof TypeElemDesc>): string | null;
+    deleteElement(uuid: string): void;
+    insertElementBefore(elem: TypeElementBase<keyof TypeElemDesc>, beforeUUID: string): any;
+    insertElementBeforeIndex(elem: TypeElementBase<keyof TypeElemDesc>, index: number): any;
+    getSelectedElements(): TypeElement<keyof TypeElemDesc>[];
+    insertElementAfter(elem: TypeElementBase<keyof TypeElemDesc>, beforeUUID: string): any;
+    insertElementAfterIndex(elem: TypeElementBase<keyof TypeElemDesc>, index: number): any;
+    resetSize(opts: TypeBoardSizeOptions): void;
+    scale(ratio: number): TypeScreenContext;
+    scrollLeft(left: number): TypeScreenContext;
+    scrollTop(top: number): TypeScreenContext;
+    getScreenTransform(): TypeScreenData;
+    getData(): TypeData;
+    setData(data: any | TypeData, opts?: {
+        triggerChangeEvent: boolean;
+    }): void;
+    clearOperation(): void;
+    on<T extends keyof TypeCoreEventArgMap>(key: T, callback: (p: TypeCoreEventArgMap[T]) => void): void;
+    off<T extends keyof TypeCoreEventArgMap>(key: T, callback: (p: TypeCoreEventArgMap[T]) => void): void;
+    pointScreenToContext(p: TypePoint): TypePoint;
+    pointContextToScreen(p: TypePoint): TypePoint;
+    __getBoardContext(): TypeContext;
+    __getDisplayContext2D(): CanvasRenderingContext2D;
+    __getOriginContext2D(): CanvasRenderingContext2D;
+    private [_emitChangeScreen];
+    private [_emitChangeData];
+}

package/{esm → dist/esm}/index.js

@@ -1,15 +1,15 @@
 var _a, _b;
-import { Board } from '@idraw/board';
+import Board from '@idraw/board';
 import { deepClone } from '@idraw/util';
-import { Renderer } from '@idraw/renderer';
+import Renderer from '@idraw/renderer';
 import is from './lib/is';
 import check from './lib/check';
-import { Element, mergeConfig, CoreEvent, parseData, TempData, diffElementResourceChangeList, } from './lib';
-import { _board, _data, _opts, _config, _renderer, _element, _tempData, _draw, _coreEvent, _emitChangeScreen, _emitChangeData, _engine, } from './names';
-import { getSelectedElements, updateElement, selectElementByIndex, getElement, getElementByIndex, selectElement, moveUpElement, moveDownElement, addElement, deleteElement, insertElementBefore, insertElementBeforeIndex, insertElementAfter, insertElementAfterIndex, } from './mixins/element';
+import { Element, mergeConfig, CoreEvent, parseData, TempData, diffElementResourceChangeList } from './lib';
+import { _board, _data, _opts, _config, _renderer, _element, _tempData, _draw, _coreEvent, _emitChangeScreen, _emitChangeData, _engine } from './names';
+import { getSelectedElements, updateElement, selectElementByIndex, getElement, getElementByIndex, selectElement, moveUpElement, moveDownElement, addElement, deleteElement, insertElementBefore, insertElementBeforeIndex, insertElementAfter, insertElementAfterIndex } from './mixins/element';
 import { Engine } from './lib/engine';
 import { drawElementWrapper, drawAreaWrapper, drawElementListWrappers } from './lib/draw/wrapper';
-export class Core {
+export default class Core {
     constructor(mount, opts, config) {
         var _c, _d, _e;
         this[_a] = new CoreEvent();
@@ -19,7 +19,7 @@ export class Core {
         this[_config] = mergeConfig(config || {});
         this[_board] = new Board(mount, Object.assign(Object.assign({}, this[_opts]), { canScroll: (_c = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _c === void 0 ? void 0 : _c.use, scrollConfig: {
                 color: ((_d = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _d === void 0 ? void 0 : _d.color) || '#a0a0a0',
-                lineWidth: ((_e = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _e === void 0 ? void 0 : _e.lineWidth) || 12,
+                lineWidth: ((_e = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _e === void 0 ? void 0 : _e.lineWidth) || 12
             } }));
         this[_renderer] = new Renderer();
         const drawFrame = () => {
@@ -49,7 +49,7 @@ export class Core {
             getDataFeekback: () => this[_data],
             selectElementByIndex: this.selectElementByIndex.bind(this),
             emitChangeScreen: this[_emitChangeScreen].bind(this),
-            emitChangeData: this[_emitChangeData].bind(this),
+            emitChangeData: this[_emitChangeData].bind(this)
         });
         this[_engine].init();
         this[_renderer].on('drawFrame', () => {
@@ -64,7 +64,7 @@ export class Core {
         this[_engine].updateHelperConfig({
             width: this[_opts].width,
             height: this[_opts].height,
-            devicePixelRatio: this[_opts].devicePixelRatio,
+            devicePixelRatio: this[_opts].devicePixelRatio
         });
         this[_renderer].thaw();
         this[_renderer].render(this[_board].getContext(), this[_data], {
@@ -141,7 +141,7 @@ export class Core {
         return {
             scale: transform.scale,
             scrollTop: Math.max(0, 0 - transform.scrollY),
-            scrollLeft: Math.max(0, 0 - transform.scrollX),
+            scrollLeft: Math.max(0, 0 - transform.scrollX)
         };
     }
     getData() {

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

@@ -0,0 +1,5 @@
+import { TypeElement, TypeElemDesc, TypePoint } 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;

package/dist/esm/lib/calculate.js

@@ -0,0 +1,64 @@
+export function parseRadianToAngle(radian) {
+    return radian / Math.PI * 180;
+}
+export function parseAngleToRadian(angle) {
+    return angle / 180 * Math.PI;
+}
+export function calcElementCenter(elem) {
+    const p = {
+        x: elem.x + elem.w / 2,
+        y: elem.y + elem.h / 2,
+    };
+    return p;
+}
+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) {
+            return endAngle + (Math.PI * 2 - startAngle);
+        }
+        else if (endAngle > Math.PI * 3 / 2 && startAngle < Math.PI / 2) {
+            return startAngle + (Math.PI * 2 - endAngle);
+        }
+        else {
+            return endAngle - startAngle;
+        }
+    }
+    else {
+        return 0;
+    }
+}
+function calcLineAngle(center, p) {
+    const x = p.x - center.x;
+    const y = center.y - p.y;
+    if (x === 0) {
+        if (y < 0) {
+            return Math.PI / 2;
+        }
+        else if (y > 0) {
+            return Math.PI * (3 / 2);
+        }
+    }
+    else if (y === 0) {
+        if (x < 0) {
+            return Math.PI;
+        }
+        else if (x > 0) {
+            return 0;
+        }
+    }
+    if (x > 0 && y < 0) {
+        return Math.atan(Math.abs(y) / Math.abs(x));
+    }
+    else if (x < 0 && y < 0) {
+        return Math.PI - Math.atan(Math.abs(y) / Math.abs(x));
+    }
+    else if (x < 0 && y > 0) {
+        return Math.PI + Math.atan(Math.abs(y) / Math.abs(x));
+    }
+    else if (x > 0 && y > 0) {
+        return Math.PI * 2 - Math.atan(Math.abs(y) / Math.abs(x));
+    }
+    return null;
+}

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

@@ -0,0 +1,28 @@
+import { TypeElementAttrs } from '@idraw/types';
+declare function attrs(attrs: TypeElementAttrs): boolean;
+declare function rectDesc(desc: any): boolean;
+declare function circleDesc(desc: any): boolean;
+declare function imageDesc(desc: any): boolean;
+declare function svgDesc(desc: any): boolean;
+declare function htmlDesc(desc: any): boolean;
+declare function textDesc(desc: any): boolean;
+declare const check: {
+    attrs: typeof attrs;
+    textDesc: typeof textDesc;
+    rectDesc: typeof rectDesc;
+    circleDesc: typeof circleDesc;
+    imageDesc: typeof imageDesc;
+    svgDesc: typeof svgDesc;
+    htmlDesc: typeof htmlDesc;
+};
+type TypeCheck = {
+    attrs: (value: any) => boolean;
+    rectDesc: (value: any) => boolean;
+    circleDesc: (value: any) => boolean;
+    imageDesc: (value: any) => boolean;
+    svgDesc: (value: any) => boolean;
+    htmlDesc: (value: any) => boolean;
+    textDesc: (value: any) => boolean;
+};
+export { TypeCheck };
+export default check;

package/dist/esm/lib/check.js

@@ -0,0 +1,115 @@
+import is from './is';
+function attrs(attrs) {
+    const { x, y, w, h, angle } = attrs;
+    if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
+        return false;
+    }
+    if (!(angle >= -360 && angle <= 360)) {
+        return false;
+    }
+    return true;
+}
+function box(desc = {}) {
+    const { borderColor, borderRadius, borderWidth } = desc;
+    if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+        return false;
+    }
+    return true;
+}
+function rectDesc(desc) {
+    const { bgColor } = desc;
+    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+        return false;
+    }
+    if (!box(desc)) {
+        return false;
+    }
+    return true;
+}
+function circleDesc(desc) {
+    const { bgColor, borderColor, borderWidth } = desc;
+    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+        return false;
+    }
+    return true;
+}
+function imageDesc(desc) {
+    const { src } = desc;
+    if (!is.imageSrc(src)) {
+        return false;
+    }
+    return true;
+}
+function svgDesc(desc) {
+    const { svg } = desc;
+    if (!is.svg(svg)) {
+        return false;
+    }
+    return true;
+}
+function htmlDesc(desc) {
+    const { html } = desc;
+    if (!is.html(html)) {
+        return false;
+    }
+    return true;
+}
+function textDesc(desc) {
+    const { text, color, fontSize, lineHeight, fontFamily, textAlign, fontWeight, bgColor, strokeWidth, strokeColor } = desc;
+    if (!is.text(text)) {
+        return false;
+    }
+    if (!is.color(color)) {
+        return false;
+    }
+    if (!is.fontSize(fontSize)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
+        return false;
+    }
+    if (!box(desc)) {
+        return false;
+    }
+    return true;
+}
+const check = {
+    attrs,
+    textDesc,
+    rectDesc,
+    circleDesc,
+    imageDesc,
+    svgDesc,
+    htmlDesc,
+};
+export default check;

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

@@ -0,0 +1,3 @@
+import { TypeConfig, TypeConfigStrict } from '@idraw/types';
+declare function mergeConfig(config?: TypeConfig): TypeConfigStrict;
+export { mergeConfig, };

package/dist/esm/lib/config.js

@@ -0,0 +1,20 @@
+import { deepClone } from '@idraw/util';
+const defaultConfig = {
+    elementWrapper: {
+        color: '#2ab6f1',
+        lockColor: '#aaaaaa',
+        controllerSize: 6,
+        lineWidth: 1,
+        lineDash: [4, 3],
+    }
+};
+function mergeConfig(config) {
+    const result = deepClone(defaultConfig);
+    if (config) {
+        if (config.elementWrapper) {
+            result.elementWrapper = Object.assign(Object.assign({}, result.elementWrapper), config.elementWrapper);
+        }
+    }
+    return result;
+}
+export { mergeConfig, };

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

@@ -0,0 +1,49 @@
+import { TypeElement, TypeElemDesc, TypePoint, TypeData, TypeScreenData } from '@idraw/types';
+export type TypeCoreEventSelectBaseArg = {
+    index: number | null;
+    uuid: string | null;
+};
+export type TypeCoreEventArgMap = {
+    'error': any;
+    'mouseOverScreen': TypePoint;
+    'mouseLeaveScreen': void;
+    'mouseOverElement': TypeCoreEventSelectBaseArg & {
+        element: TypeElement<keyof TypeElemDesc>;
+    };
+    'mouseLeaveElement': TypeCoreEventSelectBaseArg & {
+        element: TypeElement<keyof TypeElemDesc>;
+    };
+    'screenClickElement': TypeCoreEventSelectBaseArg & {
+        element: TypeElement<keyof TypeElemDesc>;
+    };
+    'screenDoubleClickElement': TypeCoreEventSelectBaseArg & {
+        element: TypeElement<keyof TypeElemDesc>;
+    };
+    'screenSelectElement': TypeCoreEventSelectBaseArg & {
+        element: TypeElement<keyof TypeElemDesc>;
+    };
+    'screenMoveElementStart': TypeCoreEventSelectBaseArg & TypePoint;
+    'screenMoveElementEnd': TypeCoreEventSelectBaseArg & TypePoint;
+    'screenChangeElement': TypeCoreEventSelectBaseArg & {
+        width: number;
+        height: number;
+        angle: number;
+    };
+    'changeData': TypeData;
+    'changeScreen': TypeScreenData;
+    'drawFrameComplete': void;
+    'drawFrame': void;
+};
+export interface TypeCoreEvent {
+    on<T extends keyof TypeCoreEventArgMap>(key: T, callback: (p: TypeCoreEventArgMap[T]) => void): void;
+    off<T extends keyof TypeCoreEventArgMap>(key: T, callback: (p: TypeCoreEventArgMap[T]) => void): void;
+    trigger<T extends keyof TypeCoreEventArgMap>(key: T, p: TypeCoreEventArgMap[T]): void;
+}
+export declare class CoreEvent implements TypeCoreEvent {
+    private _listeners;
+    constructor();
+    on<T extends keyof TypeCoreEventArgMap>(eventKey: T, callback: (p: TypeCoreEventArgMap[T]) => void): void;
+    off<T extends keyof TypeCoreEventArgMap>(eventKey: T, callback: (p: TypeCoreEventArgMap[T]) => void): void;
+    trigger<T extends keyof TypeCoreEventArgMap>(eventKey: T, arg: TypeCoreEventArgMap[T]): boolean;
+    has<T extends keyof TypeCoreEventArgMap>(name: string): boolean;
+}

package/dist/esm/lib/core-event.js

@@ -0,0 +1,50 @@
+export class CoreEvent {
+    constructor() {
+        this._listeners = new Map();
+    }
+    on(eventKey, callback) {
+        if (this._listeners.has(eventKey)) {
+            const callbacks = this._listeners.get(eventKey);
+            callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
+            this._listeners.set(eventKey, callbacks || []);
+        }
+        else {
+            this._listeners.set(eventKey, [callback]);
+        }
+    }
+    off(eventKey, callback) {
+        if (this._listeners.has(eventKey)) {
+            const callbacks = this._listeners.get(eventKey);
+            if (Array.isArray(callbacks)) {
+                for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
+                    if (callbacks[i] === callback) {
+                        callbacks.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+            this._listeners.set(eventKey, callbacks || []);
+        }
+    }
+    trigger(eventKey, arg) {
+        const callbacks = this._listeners.get(eventKey);
+        if (Array.isArray(callbacks)) {
+            callbacks.forEach((cb) => {
+                cb(arg);
+            });
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    has(name) {
+        if (this._listeners.has(name)) {
+            const list = this._listeners.get(name);
+            if (Array.isArray(list) && list.length > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+}

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

@@ -0,0 +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[];

package/dist/esm/lib/diff.js

@@ -0,0 +1,80 @@
+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));
+}
+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));
+}
+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));
+}
+export function diffElementResourceChange(before, after) {
+    let result = null;
+    let isChange = false;
+    switch (after.type) {
+        case 'image': {
+            isChange = isChangeImageElementResource(before, after);
+            break;
+        }
+        case 'svg': {
+            isChange = isChangeSVGElementResource(before, after);
+            break;
+        }
+        case 'html': {
+            isChange = isChangeHTMLElementResource(before, after);
+            break;
+        }
+        default: break;
+    }
+    if (isChange === true) {
+        result = after.uuid;
+    }
+    return result;
+}
+export function diffElementResourceChangeList(before, after) {
+    var _a;
+    const uuids = [];
+    const beforeMap = parseDataElementMap(before);
+    const afterMap = parseDataElementMap(after);
+    for (const uuid in afterMap) {
+        if (['image', 'svg', 'html'].includes((_a = afterMap[uuid]) === null || _a === void 0 ? void 0 : _a.type) !== true) {
+            continue;
+        }
+        if (beforeMap[uuid]) {
+            let isChange = false;
+            switch (beforeMap[uuid].type) {
+                case 'image': {
+                    isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                case 'svg': {
+                    isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                case 'html': {
+                    isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                default: break;
+            }
+            if (isChange === true) {
+                uuids.push(uuid);
+            }
+        }
+        else {
+            uuids.push(uuid);
+        }
+    }
+    return uuids;
+}
+function parseDataElementMap(data) {
+    const elemMap = {};
+    data.elements.forEach((elem) => {
+        elemMap[elem.uuid] = elem;
+    });
+    return elemMap;
+}

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

@@ -0,0 +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;