@idraw/core 0.4.0-beta.9 → 0.4.0

package/dist/esm/cursor/cursor.js

@@ -0,0 +1,154 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Cursor_instances, _Cursor_eventHub, _Cursor_container, _Cursor_cursorType, _Cursor_resizeCursorBaseImage, _Cursor_cursorImageMap, _Cursor_init, _Cursor_loadResizeCursorBaseImage, _Cursor_resetCursor, _Cursor_setCursorResize, _Cursor_appendRotateResizeImage;
+import { limitAngle, loadImage, parseAngleToRadian } from '@idraw/util';
+import { CURSOR, CURSOR_RESIZE, CURSOR_DRAG_DEFAULT, CURSOR_DRAG_ACTIVE, CURSOR_RESIZE_ROTATE } from './cursor-image';
+import { coreEventKeys } from '../config';
+export class Cursor {
+    constructor(container, opts) {
+        _Cursor_instances.add(this);
+        _Cursor_eventHub.set(this, void 0);
+        _Cursor_container.set(this, void 0);
+        _Cursor_cursorType.set(this, null);
+        _Cursor_resizeCursorBaseImage.set(this, null);
+        _Cursor_cursorImageMap.set(this, {
+            auto: CURSOR,
+            'drag-default': CURSOR_DRAG_DEFAULT,
+            'drag-active': CURSOR_DRAG_ACTIVE,
+            'rotate-0': CURSOR_RESIZE,
+            rotate: CURSOR_RESIZE_ROTATE
+        });
+        __classPrivateFieldSet(this, _Cursor_container, container, "f");
+        __classPrivateFieldSet(this, _Cursor_eventHub, opts.eventHub, "f");
+        __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_init).call(this);
+        __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_loadResizeCursorBaseImage).call(this);
+    }
+}
+_Cursor_eventHub = new WeakMap(), _Cursor_container = new WeakMap(), _Cursor_cursorType = new WeakMap(), _Cursor_resizeCursorBaseImage = new WeakMap(), _Cursor_cursorImageMap = new WeakMap(), _Cursor_instances = new WeakSet(), _Cursor_init = function _Cursor_init() {
+    const eventHub = __classPrivateFieldGet(this, _Cursor_eventHub, "f");
+    __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'default');
+    eventHub.on(coreEventKeys.CURSOR, (e) => {
+        var _a;
+        if (e.type === 'over-element' || !e.type) {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'auto');
+        }
+        else if (e.type === 'resize-rotate') {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'rotate');
+        }
+        else if (typeof e.type === 'string' && ((_a = e.type) === null || _a === void 0 ? void 0 : _a.startsWith('resize-'))) {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_setCursorResize).call(this, e);
+        }
+        else if (e.type === 'drag-default') {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'drag-default');
+        }
+        else if (e.type === 'drag-active') {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'drag-active');
+        }
+        else {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'auto');
+        }
+    });
+}, _Cursor_loadResizeCursorBaseImage = function _Cursor_loadResizeCursorBaseImage() {
+    loadImage(CURSOR_RESIZE)
+        .then((img) => {
+        __classPrivateFieldSet(this, _Cursor_resizeCursorBaseImage, img, "f");
+    })
+        .catch((err) => {
+        console.error(err);
+    });
+}, _Cursor_resetCursor = function _Cursor_resetCursor(cursorKey) {
+    if (__classPrivateFieldGet(this, _Cursor_cursorType, "f") === cursorKey) {
+        return;
+    }
+    __classPrivateFieldSet(this, _Cursor_cursorType, cursorKey, "f");
+    const image = __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[__classPrivateFieldGet(this, _Cursor_cursorType, "f")] || __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")['auto'];
+    let offsetX = 0;
+    let offsetY = 0;
+    if (cursorKey.startsWith('rotate-') && __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[__classPrivateFieldGet(this, _Cursor_cursorType, "f")]) {
+        offsetX = 10;
+        offsetY = 10;
+    }
+    else if (cursorKey === 'rotate') {
+        offsetX = 10;
+        offsetY = 10;
+    }
+    if (cursorKey === 'default') {
+        __classPrivateFieldGet(this, _Cursor_container, "f").style.cursor = 'default';
+    }
+    else {
+        __classPrivateFieldGet(this, _Cursor_container, "f").style.cursor = `image-set(url(${image})2x) ${offsetX} ${offsetY}, auto`;
+    }
+}, _Cursor_setCursorResize = function _Cursor_setCursorResize(e) {
+    var _a;
+    let totalAngle = 0;
+    if (e.type === 'resize-top') {
+        totalAngle += 0;
+    }
+    else if (e.type === 'resize-top-right') {
+        totalAngle += 45;
+    }
+    else if (e.type === 'resize-right') {
+        totalAngle += 90;
+    }
+    else if (e.type === 'resize-bottom-right') {
+        totalAngle += 135;
+    }
+    else if (e.type === 'resize-bottom') {
+        totalAngle += 180;
+    }
+    else if (e.type === 'resize-bottom-left') {
+        totalAngle += 225;
+    }
+    else if (e.type === 'resize-left') {
+        totalAngle += 270;
+    }
+    else if (e.type === 'resize-top-left') {
+        totalAngle += 315;
+    }
+    totalAngle += limitAngle(((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.angle) || 0);
+    if (Array.isArray(e.groupQueue) && e.groupQueue.length > 0) {
+        e.groupQueue.forEach((group) => {
+            totalAngle += limitAngle(group.angle || 0);
+        });
+    }
+    totalAngle = limitAngle(totalAngle);
+    const cursorKey = __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_appendRotateResizeImage).call(this, totalAngle);
+    __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, cursorKey);
+}, _Cursor_appendRotateResizeImage = function _Cursor_appendRotateResizeImage(angle) {
+    const key = `rotate-${angle}`;
+    if (!__classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[key]) {
+        const baseImage = __classPrivateFieldGet(this, _Cursor_resizeCursorBaseImage, "f");
+        if (baseImage) {
+            const canvas = document.createElement('canvas');
+            const w = baseImage.width;
+            const h = baseImage.height;
+            const center = {
+                x: w / 2,
+                y: h / 2
+            };
+            canvas.width = w;
+            canvas.height = h;
+            const ctx = canvas.getContext('2d');
+            const radian = parseAngleToRadian(angle);
+            ctx.translate(center.x, center.y);
+            ctx.rotate(radian);
+            ctx.translate(-center.x, -center.y);
+            ctx.drawImage(baseImage, 0, 0, w, h);
+            ctx.translate(center.x, center.y);
+            ctx.rotate(-radian);
+            ctx.translate(-center.x, -center.y);
+            const base = canvas.toDataURL('image/png');
+            __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[key] = base;
+        }
+    }
+    return key;
+};

package/dist/esm/index.d.ts

@@ -1,16 +1,25 @@
-import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEvent, ViewScaleInfo, LoadItemMap } from '@idraw/types';
-export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear } from './middleware/selector';
-export { MiddlewareScroller } from './middleware/scroller';
-export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
-export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
-export { MiddlewareTextEditor, middlewareEventTextEdit } from './middleware/text-editor';
-export { MiddlewareDragger } from './middleware/dragger';
-export declare class Core<E extends CoreEvent = CoreEvent> {
+import type { Data, PointSize, CoreOptions, Middleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ElementType, RecursivePartial, Element, ModifyRecord, ElementPosition, DataLayout, DataGlobal } from '@idraw/types';
+import { Board, Sharer, Calculator } from './board';
+export { coreEventKeys } from './config';
+export type { CoreEventKeys } from './config';
+export { Board, Sharer, Calculator };
+export { MiddlewareSelector } from './middlewares/selector';
+export { MiddlewareScroller } from './middlewares/scroller';
+export { MiddlewareScaler } from './middlewares/scaler';
+export { MiddlewareRuler } from './middlewares/ruler';
+export { MiddlewareTextEditor } from './middlewares/text-editor';
+export { MiddlewareDragger } from './middlewares/dragger';
+export { MiddlewareInfo } from './middlewares/info';
+export { MiddlewareLayoutSelector } from './middlewares/layout-selector';
+export { MiddlewarePointer } from './middlewares/pointer';
+export declare class Core<E extends CoreEventMap = CoreEventMap> {
     #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);
+    isDestroyed(): boolean;
     destroy(): void;
-    use(middleware: BoardMiddleware<any, any>): void;
-    disuse(middleware: BoardMiddleware<any, any>): void;
+    use<C extends any = any>(middleware: Middleware<any, any, any>, config?: C): void;
+    disuse(middleware: Middleware<any, any, any>): void;
+    resetMiddlewareConfig<C extends any = any>(middleware: Middleware<any, any, any>, config?: Partial<C>): void;
     setData(data: Data): void;
     getData(): Data | null;
     scale(opts: {
@@ -27,10 +36,30 @@ export declare class Core<E extends CoreEvent = CoreEvent> {
         viewScaleInfo: ViewScaleInfo;
     };
     refresh(): void;
+    forceRender(): void;
     setViewScale(opts: {
         scale: number;
         offsetX: number;
         offsetY: number;
     }): void;
     getLoadItemMap(): LoadItemMap;
+    onBoardWatcherEvents(): void;
+    offBoardWatcherEvents(): void;
+    createElement<T extends ElementType = ElementType>(type: T, element: RecursivePartial<Element<T>>, opts?: {
+        viewCenter?: boolean;
+    }): Element<T>;
+    updateElement(element: Element): ModifyRecord<'updateElement'> | null;
+    modifyElement(element: RecursivePartial<Omit<Element, 'uuid'>> & Pick<Element, 'uuid'>): ModifyRecord<'modifyElement'> | null;
+    modifyElements(elements: Array<RecursivePartial<Omit<Element, 'uuid'>> & Pick<Element, 'uuid'>>): ModifyRecord<'modifyElements'> | null;
+    addElement(element: Element, opts?: {
+        position: ElementPosition;
+    }): ModifyRecord<'addElement'>;
+    deleteElement(uuid: string): ModifyRecord<'deleteElement'>;
+    moveElement(uuid: string, to: ElementPosition): ModifyRecord<'moveElement'>;
+    modifyLayout(layout: RecursivePartial<DataLayout> | null): ModifyRecord<'modifyLayout'>;
+    modifyGlobal(global: RecursivePartial<DataGlobal> | null): {
+        type: "modifyGlobal";
+        time: number;
+        content: import("@idraw/types").ModifyContentMap["modifyGlobal"];
+    };
 }

package/dist/esm/index.js

@@ -9,28 +9,49 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _Core_instances, _Core_board, _Core_container, _Core_initContainer;
-import { Board } from '@idraw/board';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var _Core_instances, _Core_board, _Core_canvas, _Core_container, _Core_initContainer, _Core_resetData;
+import { deepClone, createElement, getElementPositionFromList, toFlattenElement, deleteElementInList, findElementFromListByPosition, updateElementInListByPosition, insertElementToListByPosition, moveElementPosition, toFlattenLayout, toFlattenGlobal, get, mergeLayout, mergeGlobal } from '@idraw/util';
+import { Board, Sharer, Calculator } from './board';
 import { createBoardContent, validateElements } from '@idraw/util';
-import { Cursor } from './lib/cursor';
-export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear } from './middleware/selector';
-export { MiddlewareScroller } from './middleware/scroller';
-export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
-export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
-export { MiddlewareTextEditor, middlewareEventTextEdit } from './middleware/text-editor';
-export { MiddlewareDragger } from './middleware/dragger';
+import { Cursor } from './cursor/cursor';
+import { getModifyElementRecord } from './record';
+export { coreEventKeys } from './config';
+export { Board, Sharer, Calculator };
+export { MiddlewareSelector } from './middlewares/selector';
+export { MiddlewareScroller } from './middlewares/scroller';
+export { MiddlewareScaler } from './middlewares/scaler';
+export { MiddlewareRuler } from './middlewares/ruler';
+export { MiddlewareTextEditor } from './middlewares/text-editor';
+export { MiddlewareDragger } from './middlewares/dragger';
+export { MiddlewareInfo } from './middlewares/info';
+export { MiddlewareLayoutSelector } from './middlewares/layout-selector';
+export { MiddlewarePointer } from './middlewares/pointer';
 export class Core {
     constructor(container, opts) {
         _Core_instances.add(this);
         _Core_board.set(this, void 0);
+        _Core_canvas.set(this, void 0);
         _Core_container.set(this, void 0);
-        const { devicePixelRatio = 1, width, height } = opts;
+        const { devicePixelRatio = 1, width, height, disableWatcher = false } = opts;
         __classPrivateFieldSet(this, _Core_container, container, "f");
         const canvas = document.createElement('canvas');
+        canvas.setAttribute('tabindex', '0');
+        __classPrivateFieldSet(this, _Core_canvas, canvas, "f");
         __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
         container.appendChild(canvas);
-        const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio, offscreen: true });
-        const board = new Board({ boardContent, container });
+        const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio });
+        const board = new Board({ boardContent, container, disableWatcher });
         const sharer = board.getSharer();
         sharer.setActiveViewSizeInfo({
             width,
@@ -46,18 +67,26 @@ export class Core {
             eventHub
         });
     }
+    isDestroyed() {
+        return __classPrivateFieldGet(this, _Core_board, "f").isDestroyed();
+    }
     destroy() {
         __classPrivateFieldGet(this, _Core_board, "f").destroy();
+        __classPrivateFieldGet(this, _Core_canvas, "f").remove();
     }
-    use(middleware) {
-        __classPrivateFieldGet(this, _Core_board, "f").use(middleware);
+    use(middleware, config) {
+        __classPrivateFieldGet(this, _Core_board, "f").use(middleware, config);
     }
     disuse(middleware) {
         __classPrivateFieldGet(this, _Core_board, "f").disuse(middleware);
     }
+    resetMiddlewareConfig(middleware, config) {
+        __classPrivateFieldGet(this, _Core_board, "f").resetMiddlewareConfig(middleware, config);
+    }
     setData(data) {
-        validateElements((data === null || data === void 0 ? void 0 : data.elements) || []);
-        __classPrivateFieldGet(this, _Core_board, "f").setData(data);
+        const loader = __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoader();
+        loader.reset();
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
     }
     getData() {
         return __classPrivateFieldGet(this, _Core_board, "f").getData();
@@ -101,14 +130,264 @@ export class Core {
     refresh() {
         __classPrivateFieldGet(this, _Core_board, "f").getViewer().drawFrame();
     }
+    forceRender() {
+        const renderer = __classPrivateFieldGet(this, _Core_board, "f").getRenderer();
+        const calculator = renderer.getCalculator();
+        const loader = renderer.getLoader();
+        const data = this.getData();
+        if (data) {
+            const { viewScaleInfo, viewSizeInfo } = this.getViewInfo();
+            calculator.resetVirtualFlatItemMap(data, {
+                viewScaleInfo,
+                viewSizeInfo
+            });
+        }
+        loader.reset();
+        this.refresh();
+    }
     setViewScale(opts) {
         __classPrivateFieldGet(this, _Core_board, "f").updateViewScaleInfo(opts);
     }
     getLoadItemMap() {
         return __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoadItemMap();
     }
+    onBoardWatcherEvents() {
+        __classPrivateFieldGet(this, _Core_board, "f").onWatcherEvents();
+    }
+    offBoardWatcherEvents() {
+        __classPrivateFieldGet(this, _Core_board, "f").offWatcherEvents();
+    }
+    createElement(type, element, opts) {
+        const { viewScaleInfo, viewSizeInfo } = this.getViewInfo();
+        return createElement(type, element || {}, (opts === null || opts === void 0 ? void 0 : opts.viewCenter) === true
+            ? {
+                viewScaleInfo,
+                viewSizeInfo
+            }
+            : undefined);
+    }
+    updateElement(element) {
+        const data = this.getData() || { elements: [] };
+        const uuid = element.uuid;
+        const position = getElementPositionFromList(uuid, data.elements);
+        const beforeElem = findElementFromListByPosition(position, data.elements);
+        if (!beforeElem) {
+            return null;
+        }
+        const before = toFlattenElement(beforeElem);
+        const updatedElement = updateElementInListByPosition(position, element, data.elements, { strict: true });
+        const after = toFlattenElement(updatedElement);
+        const loader = __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoader();
+        loader.resetElementAsset(element);
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+        this.refresh();
+        const modifyRecord = {
+            type: 'updateElement',
+            time: Date.now(),
+            content: { method: 'updateElement', uuid, before, after }
+        };
+        return modifyRecord;
+    }
+    modifyElement(element) {
+        const { uuid } = element, restElement = __rest(element, ["uuid"]);
+        const data = this.getData() || { elements: [] };
+        const position = getElementPositionFromList(uuid, data.elements);
+        const beforeElem = findElementFromListByPosition(position, data.elements);
+        if (!beforeElem) {
+            return null;
+        }
+        const modifyRecord = getModifyElementRecord({
+            modifiedElement: element,
+            beforeElement: beforeElem
+        });
+        updateElementInListByPosition(position, restElement, data.elements);
+        const loader = __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoader();
+        loader.resetElementAsset(Object.assign(Object.assign({}, element), { type: beforeElem.type }));
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+        this.refresh();
+        return modifyRecord;
+    }
+    modifyElements(elements) {
+        const data = this.getData() || { elements: [] };
+        let modifyRecord = null;
+        const before = [];
+        const after = [];
+        elements.forEach((element) => {
+            const { uuid } = element, restElement = __rest(element, ["uuid"]);
+            const position = getElementPositionFromList(uuid, data.elements);
+            const beforeElem = findElementFromListByPosition(position, data.elements);
+            if (!beforeElem) {
+                return null;
+            }
+            const tempRecord = getModifyElementRecord({
+                modifiedElement: element,
+                beforeElement: beforeElem
+            });
+            if (tempRecord.content) {
+                before.push(Object.assign(Object.assign({}, tempRecord.content.before), { uuid }));
+                after.push(Object.assign(Object.assign({}, tempRecord.content.after), { uuid }));
+            }
+            updateElementInListByPosition(position, restElement, data.elements);
+        });
+        modifyRecord = {
+            type: 'modifyElements',
+            time: Date.now(),
+            content: {
+                method: 'modifyElements',
+                before,
+                after
+            }
+        };
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+        this.refresh();
+        return modifyRecord;
+    }
+    addElement(element, opts) {
+        var _a;
+        const data = this.getData() || { elements: [] };
+        if (!opts || !((_a = opts === null || opts === void 0 ? void 0 : opts.position) === null || _a === void 0 ? void 0 : _a.length)) {
+            data.elements.push(element);
+        }
+        else if (opts === null || opts === void 0 ? void 0 : opts.position) {
+            const position = [...((opts === null || opts === void 0 ? void 0 : opts.position) || [])];
+            insertElementToListByPosition(element, position, data.elements);
+        }
+        const position = getElementPositionFromList(element.uuid, data.elements);
+        const modifyRecord = {
+            type: 'addElement',
+            time: Date.now(),
+            content: { method: 'addElement', uuid: element.uuid, position, element: deepClone(element) }
+        };
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+        this.refresh();
+        return modifyRecord;
+    }
+    deleteElement(uuid) {
+        const data = this.getData() || { elements: [] };
+        const position = getElementPositionFromList(uuid, data.elements);
+        const element = findElementFromListByPosition(position, data.elements);
+        const modifyRecord = {
+            type: 'deleteElement',
+            time: Date.now(),
+            content: { method: 'deleteElement', uuid, position, element: element ? deepClone(element) : null }
+        };
+        if (element) {
+            const loader = __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoader();
+            loader.resetElementAsset(element);
+        }
+        deleteElementInList(uuid, data.elements);
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+        this.refresh();
+        return modifyRecord;
+    }
+    moveElement(uuid, to) {
+        const data = this.getData() || { elements: [] };
+        const from = getElementPositionFromList(uuid, data.elements);
+        const modifyRecord = {
+            type: 'moveElement',
+            time: Date.now(),
+            content: { method: 'moveElement', uuid, from: [...from], to: [...to] }
+        };
+        const { elements: list } = moveElementPosition(data.elements, { from, to });
+        data.elements = list;
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+        this.refresh();
+        return modifyRecord;
+    }
+    modifyLayout(layout) {
+        const data = this.getData() || { elements: [] };
+        const modifyRecord = {
+            type: 'modifyLayout',
+            time: Date.now(),
+            content: {
+                method: 'modifyLayout',
+                before: null,
+                after: null
+            }
+        };
+        if (layout === null) {
+            if (data.layout) {
+                modifyRecord.content.before = toFlattenLayout(data.layout);
+                delete data['layout'];
+                __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+                this.refresh();
+                return modifyRecord;
+            }
+            else {
+                return modifyRecord;
+            }
+        }
+        const beforeLayout = data.layout;
+        let before = {};
+        const after = toFlattenLayout(layout);
+        if (data.layout) {
+            Object.keys(after).forEach((key) => {
+                let val = get(beforeLayout, key);
+                if (val === undefined && /(borderRadius|borderWidth)\[[0-9]{1,}\]$/.test(key)) {
+                    key = key.replace(/\[[0-9]{1,}\]$/, '');
+                    val = get(beforeLayout, key);
+                }
+                before[key] = val;
+            });
+            before = toFlattenLayout(before);
+            modifyRecord.content.before = before;
+        }
+        else {
+            data.layout = {};
+        }
+        modifyRecord.content.after = after;
+        mergeLayout(data.layout, layout);
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+        this.refresh();
+        return modifyRecord;
+    }
+    modifyGlobal(global) {
+        const data = this.getData() || { elements: [] };
+        const modifyRecord = {
+            type: 'modifyGlobal',
+            time: Date.now(),
+            content: {
+                method: 'modifyGlobal',
+                before: null,
+                after: null
+            }
+        };
+        if (global === null) {
+            if (data.global) {
+                modifyRecord.content.before = toFlattenGlobal(data.global);
+                delete data['global'];
+                __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+                this.refresh();
+                return modifyRecord;
+            }
+            else {
+                return modifyRecord;
+            }
+        }
+        const beforeGlobal = data.global;
+        let before = {};
+        const after = toFlattenGlobal(global);
+        if (data.global) {
+            Object.keys(after).forEach((key) => {
+                before[key] = get(beforeGlobal, key);
+            });
+            before = toFlattenGlobal(before);
+            modifyRecord.content.before = before;
+        }
+        else {
+            data.global = {};
+        }
+        modifyRecord.content.after = after;
+        mergeGlobal(data.global, global);
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
+        this.refresh();
+        return modifyRecord;
+    }
 }
-_Core_board = new WeakMap(), _Core_container = new WeakMap(), _Core_instances = new WeakSet(), _Core_initContainer = function _Core_initContainer() {
+_Core_board = new WeakMap(), _Core_canvas = new WeakMap(), _Core_container = new WeakMap(), _Core_instances = new WeakSet(), _Core_initContainer = function _Core_initContainer() {
     const container = __classPrivateFieldGet(this, _Core_container, "f");
     container.style.position = 'relative';
+}, _Core_resetData = function _Core_resetData(data) {
+    validateElements((data === null || data === void 0 ? void 0 : data.elements) || []);
+    __classPrivateFieldGet(this, _Core_board, "f").setData(data);
 };

package/dist/esm/middlewares/dragger/index.d.ts

@@ -0,0 +1,7 @@
+import type { Middleware, CoreEventMap, Point } from '@idraw/types';
+declare const keyPrevPoint: unique symbol;
+type DraggerSharedStorage = {
+    [keyPrevPoint]: Point | null;
+};
+export declare const MiddlewareDragger: Middleware<DraggerSharedStorage, CoreEventMap>;
+export {};

package/dist/esm/{middleware → middlewares}/dragger/index.js

@@ -1,3 +1,4 @@
+import { coreEventKeys } from '../../config';
 const key = 'DRAG';
 const keyPrevPoint = Symbol(`${key}_prevPoint`);
 export const MiddlewareDragger = (opts) => {
@@ -9,7 +10,7 @@ export const MiddlewareDragger = (opts) => {
             if (isDragging === true) {
                 return;
             }
-            eventHub.trigger('cursor', {
+            eventHub.trigger(coreEventKeys.CURSOR, {
                 type: 'drag-default'
             });
         },
@@ -17,7 +18,7 @@ export const MiddlewareDragger = (opts) => {
             const { point } = e;
             sharer.setSharedStorage(keyPrevPoint, point);
             isDragging = true;
-            eventHub.trigger('cursor', {
+            eventHub.trigger(coreEventKeys.CURSOR, {
                 type: 'drag-active'
             });
         },
@@ -35,7 +36,7 @@ export const MiddlewareDragger = (opts) => {
         pointEnd() {
             isDragging = false;
             sharer.setSharedStorage(keyPrevPoint, null);
-            eventHub.trigger('cursor', {
+            eventHub.trigger(coreEventKeys.CURSOR, {
                 type: 'drag-default'
             });
         }

package/dist/esm/middlewares/info/config.d.ts

@@ -0,0 +1,5 @@
+import type { MiddlewareInfoStyle } from '@idraw/types';
+export declare const infoFontSize = 10;
+export declare const infoLineHeight = 16;
+export declare const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = "@middleware/internal-event/show-info-angle";
+export declare const defaltStyle: MiddlewareInfoStyle;

package/dist/esm/middlewares/info/config.js

@@ -0,0 +1,9 @@
+const infoBackground = '#1973bac6';
+const infoTextColor = '#ffffff';
+export const infoFontSize = 10;
+export const infoLineHeight = 16;
+export const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = '@middleware/internal-event/show-info-angle';
+export const defaltStyle = {
+    textBackground: infoBackground,
+    textColor: infoTextColor
+};

package/dist/esm/middlewares/info/draw-info.d.ts

@@ -0,0 +1,29 @@
+import type { PointSize, ViewContext2D } from '@idraw/types';
+import type { MiddlewareInfoStyle } from '@idraw/types';
+export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    style: MiddlewareInfoStyle;
+}): void;
+export declare function drawPositionInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    style: MiddlewareInfoStyle;
+}): void;
+export declare function drawAngleInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    style: MiddlewareInfoStyle;
+}): void;