@idraw/core 0.2.0-alpha.9 → 0.3.0-0.3.0-beta.6.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 idrawjs
+Copyright (c) 2021-present idrawjs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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 { IDrawData, Point, BoardSizeOptions, IDrawConfig, DataElementBase, DataElement, DataElemDesc, IDrawContext, CoreOptions, ScreenContext, ScreenData } from '@idraw/types';
+import { IsTypeUtil } from './lib/is';
+import { CheckTypeUtil } from './lib/check';
+import { Element, TypeCoreEventArgMap } from './lib';
+import { Engine } from './lib/engine';
+export default class Core {
+    $data: IDrawData;
+    private _board;
+    private _opts;
+    private _config;
+    private _renderer;
+    private _elementHandler;
+    private _coreEvent;
+    private _tempData;
+    private _engine;
+    static is: IsTypeUtil;
+    static check: CheckTypeUtil;
+    constructor(mount: HTMLDivElement, opts: CoreOptions, config?: IDrawConfig);
+    private _emitChangeScreen;
+    $draw(opts?: {
+        resourceChangeUUIDs?: string[];
+    }): void;
+    getElement(uuid: string): DataElement<keyof DataElemDesc> | null;
+    getElementByIndex(index: number): DataElement<keyof DataElemDesc> | null;
+    selectElementByIndex(index: number): void;
+    selectElement(uuid: string): void;
+    cancelElementByIndex(index: number): void;
+    cancelElement(uuid: string): void;
+    moveUpElement(uuid: string): void;
+    moveDownElement(uuid: string): void;
+    updateElement(elem: DataElement<keyof DataElemDesc>): void;
+    addElement(elem: DataElementBase<keyof DataElemDesc>): string | null;
+    deleteElement(uuid: string): void;
+    insertElementBefore(elem: DataElementBase<keyof DataElemDesc>, beforeUUID: string): any;
+    insertElementBeforeIndex(elem: DataElementBase<keyof DataElemDesc>, index: number): any;
+    getSelectedElements(): DataElement<keyof DataElemDesc>[];
+    insertElementAfter(elem: DataElementBase<keyof DataElemDesc>, beforeUUID: string): any;
+    insertElementAfterIndex(elem: DataElementBase<keyof DataElemDesc>, index: number): any;
+    resetSize(opts: BoardSizeOptions): void;
+    scale(ratio: number): ScreenContext;
+    scrollLeft(left: number): ScreenContext;
+    scrollTop(top: number): ScreenContext;
+    getScreenTransform(): ScreenData;
+    getData(): IDrawData;
+    setData(data: any | IDrawData, 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;
+    getEngine(): Engine;
+    pointScreenToContext(p: Point): Point;
+    pointContextToScreen(p: Point): Point;
+    $getBoardContext(): IDrawContext;
+    $getDisplayContext2D(): CanvasRenderingContext2D;
+    $getOriginContext2D(): CanvasRenderingContext2D;
+    $emitChangeData(): void;
+    $getElementHandler(): Element;
+}

package/dist/esm/index.js

@@ -0,0 +1,203 @@
+import Board from '@idraw/board';
+import { deepClone } from '@idraw/util';
+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 { getSelectedElements, updateElement, selectElementByIndex, selectElement, cancelElementByIndex, cancelElement, getElement, getElementByIndex, moveUpElement, moveDownElement, addElement, deleteElement, insertElementBefore, insertElementBeforeIndex, insertElementAfter, insertElementAfterIndex } from './mixins/element';
+import { Engine } from './lib/engine';
+import { drawElementWrapper, drawAreaWrapper, drawElementListWrappers } from './lib/draw/wrapper';
+class Core {
+    constructor(mount, opts, config) {
+        var _a, _b, _c;
+        this._coreEvent = new CoreEvent();
+        this._tempData = new TempData();
+        this.$data = { elements: [] };
+        this._opts = opts;
+        this._config = mergeConfig(config || {});
+        this._board = new Board(mount, Object.assign(Object.assign({}, this._opts), { canScroll: (_a = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _a === void 0 ? void 0 : _a.use, scrollConfig: Object.assign({ color: ((_b = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _b === void 0 ? void 0 : _b.color) || '#000000', width: ((_c = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _c === void 0 ? void 0 : _c.width) || 12 }, ((config === null || config === void 0 ? void 0 : config.scrollWrapper) || {})) }));
+        this._renderer = new Renderer();
+        const drawFrame = () => {
+            const helperCtx = this._board.getHelperContext();
+            const helperConfig = this._engine.getHelperConfig();
+            this._board.clear();
+            const { contextWidth, contextHeight, devicePixelRatio } = this._opts;
+            helperCtx.clearRect(0, 0, contextWidth * devicePixelRatio, contextHeight * devicePixelRatio);
+            drawElementWrapper(helperCtx, helperConfig);
+            drawAreaWrapper(helperCtx, helperConfig);
+            drawElementListWrappers(helperCtx, helperConfig);
+            this._board.draw();
+        };
+        this._renderer.on('drawFrame', () => {
+            drawFrame();
+        });
+        this._renderer.on('drawFrameComplete', () => {
+            drawFrame();
+        });
+        this._elementHandler = new Element(this._board.getContext());
+        this._engine = new Engine({
+            coreEvent: this._coreEvent,
+            board: this._board,
+            element: this._elementHandler,
+            config: this._config,
+            drawFeekback: this.$draw.bind(this),
+            getDataFeekback: () => this.$data,
+            selectElementByIndex: this.selectElementByIndex.bind(this),
+            emitChangeScreen: this._emitChangeScreen.bind(this),
+            emitChangeData: this.$emitChangeData.bind(this)
+        });
+        this._engine.init();
+        this._renderer.on('drawFrame', () => {
+            this._coreEvent.trigger('drawFrame', undefined);
+        });
+        this._renderer.on('drawFrameComplete', () => {
+            this._coreEvent.trigger('drawFrameComplete', undefined);
+        });
+        this._tempData.set('hasInited', true);
+    }
+    _emitChangeScreen() {
+        if (this._coreEvent.has('changeScreen')) {
+            this._coreEvent.trigger('changeScreen', Object.assign({}, this.getScreenTransform()));
+        }
+    }
+    $draw(opts) {
+        this._engine.updateHelperConfig({
+            width: this._opts.width,
+            height: this._opts.height,
+            devicePixelRatio: this._opts.devicePixelRatio
+        });
+        this._renderer.thaw();
+        this._renderer.render(this._board.getContext(), this.$data, {
+            changeResourceUUIDs: (opts === null || opts === void 0 ? void 0 : opts.resourceChangeUUIDs) || []
+        });
+    }
+    getElement(uuid) {
+        return getElement(this, uuid);
+    }
+    getElementByIndex(index) {
+        return getElementByIndex(this, index);
+    }
+    selectElementByIndex(index) {
+        return selectElementByIndex(this, index);
+    }
+    selectElement(uuid) {
+        return selectElement(this, uuid);
+    }
+    cancelElementByIndex(index) {
+        return cancelElementByIndex(this, index);
+    }
+    cancelElement(uuid) {
+        return cancelElement(this, uuid);
+    }
+    moveUpElement(uuid) {
+        return moveUpElement(this, uuid);
+    }
+    moveDownElement(uuid) {
+        return moveDownElement(this, uuid);
+    }
+    updateElement(elem) {
+        return updateElement(this, elem);
+    }
+    addElement(elem) {
+        return addElement(this, elem);
+    }
+    deleteElement(uuid) {
+        return deleteElement(this, uuid);
+    }
+    insertElementBefore(elem, beforeUUID) {
+        return insertElementBefore(this, elem, beforeUUID);
+    }
+    insertElementBeforeIndex(elem, index) {
+        return insertElementBeforeIndex(this, elem, index);
+    }
+    getSelectedElements() {
+        return getSelectedElements(this);
+    }
+    insertElementAfter(elem, beforeUUID) {
+        return insertElementAfter(this, elem, beforeUUID);
+    }
+    insertElementAfterIndex(elem, index) {
+        return insertElementAfterIndex(this, elem, index);
+    }
+    resetSize(opts) {
+        this._opts = Object.assign(Object.assign({}, this._opts), opts);
+        this._board.resetSize(opts);
+        this.$draw();
+    }
+    scale(ratio) {
+        const screen = this._board.scale(ratio);
+        this.$draw();
+        this._emitChangeScreen();
+        return screen;
+    }
+    scrollLeft(left) {
+        const screen = this._board.scrollX(0 - left);
+        this.$draw();
+        this._emitChangeScreen();
+        return screen;
+    }
+    scrollTop(top) {
+        const screen = this._board.scrollY(0 - top);
+        this.$draw();
+        this._emitChangeScreen();
+        return screen;
+    }
+    getScreenTransform() {
+        const transform = this._board.getTransform();
+        return {
+            scale: transform.scale,
+            scrollTop: Math.max(0, 0 - transform.scrollY),
+            scrollLeft: Math.max(0, 0 - transform.scrollX)
+        };
+    }
+    getData() {
+        return deepClone(this.$data);
+    }
+    setData(data, opts) {
+        const resourceChangeUUIDs = diffElementResourceChangeList(this.$data, data);
+        this.$data = this._elementHandler.initData(deepClone(parseData(data)));
+        if (opts && opts.triggerChangeEvent === true) {
+            this.$emitChangeData();
+        }
+        this.$draw({ resourceChangeUUIDs });
+    }
+    clearOperation() {
+        this._tempData.clear();
+        this.$draw();
+    }
+    on(key, callback) {
+        this._coreEvent.on(key, callback);
+    }
+    off(key, callback) {
+        this._coreEvent.off(key, callback);
+    }
+    getEngine() {
+        return this._engine;
+    }
+    pointScreenToContext(p) {
+        return this._board.pointScreenToContext(p);
+    }
+    pointContextToScreen(p) {
+        return this._board.pointContextToScreen(p);
+    }
+    $getBoardContext() {
+        return this._board.getContext();
+    }
+    $getDisplayContext2D() {
+        return this._board.getDisplayContext2D();
+    }
+    $getOriginContext2D() {
+        return this._board.getOriginContext2D();
+    }
+    $emitChangeData() {
+        if (this._coreEvent.has('changeData')) {
+            this._coreEvent.trigger('changeData', deepClone(this.$data));
+        }
+    }
+    $getElementHandler() {
+        return this._elementHandler;
+    }
+}
+Core.is = is;
+Core.check = check;
+export default Core;

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

@@ -0,0 +1,5 @@
+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: DataElement<keyof DataElemDesc>): Point;
+export declare function calcRadian(center: Point, start: Point, end: Point): 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 { DataElementAttrs } from '@idraw/types';
+declare function attrs(attrs: DataElementAttrs): 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 CheckTypeUtil = {
+    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 { CheckTypeUtil };
+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 { IDrawConfig, IDrawConfigStrict } from '@idraw/types';
+declare function mergeConfig(config?: IDrawConfig): IDrawConfigStrict;
+export { mergeConfig };

package/dist/esm/lib/config.js

@@ -0,0 +1,20 @@
+import { deepClone } from '@idraw/util';
+const defaultConfig = {
+    elementWrapper: {
+        color: '#0d85da',
+        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 { DataElement, DataElemDesc, Point, IDrawData, ScreenData } from '@idraw/types';
+export type TypeCoreEventSelectBaseArg = {
+    index: number | null;
+    uuid: string | null;
+};
+export type TypeCoreEventArgMap = {
+    error: any;
+    mouseOverScreen: Point;
+    mouseLeaveScreen: void;
+    mouseOverElement: TypeCoreEventSelectBaseArg & {
+        element: DataElement<keyof DataElemDesc>;
+    };
+    mouseLeaveElement: TypeCoreEventSelectBaseArg & {
+        element: DataElement<keyof DataElemDesc>;
+    };
+    screenClickElement: TypeCoreEventSelectBaseArg & {
+        element: DataElement<keyof DataElemDesc>;
+    };
+    screenDoubleClickElement: TypeCoreEventSelectBaseArg & {
+        element: DataElement<keyof DataElemDesc>;
+    };
+    screenSelectElement: TypeCoreEventSelectBaseArg & {
+        element: DataElement<keyof DataElemDesc>;
+    };
+    screenMoveElementStart: TypeCoreEventSelectBaseArg & Point;
+    screenMoveElementEnd: TypeCoreEventSelectBaseArg & Point;
+    screenChangeElement: TypeCoreEventSelectBaseArg & {
+        width: number;
+        height: number;
+        angle: number;
+    };
+    changeData: IDrawData;
+    changeScreen: ScreenData;
+    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 { 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[];