@idraw/core 0.4.0-beta.40 → 0.4.0-beta.41

package/dist/esm/board/index.d.ts

@@ -1,6 +1,6 @@
 import { Renderer, Calculator } from '@idraw/renderer';
 import { EventEmitter } from '@idraw/util';
-import type { Data, BoardOptions, BoardMiddleware, ViewSizeInfo, PointSize, BoardExtendEventMap, ModifyOptions } from '@idraw/types';
+import type { Data, BoardOptions, BoardMiddleware, ViewSizeInfo, PointSize, BoardExtendEventMap } from '@idraw/types';
 import { Sharer } from './sharer';
 import { Viewer } from './viewer';
 export declare class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
@@ -11,9 +11,7 @@ export declare class Board<T extends BoardExtendEventMap = BoardExtendEventMap>
     getSharer(): Sharer;
     getViewer(): Viewer;
     getRenderer(): Renderer;
-    setData(data: Data, opts?: {
-        modifiedOptions?: ModifyOptions;
-    }): {
+    setData(data: Data): {
         viewSizeInfo: ViewSizeInfo;
     };
     getData(): Data | null;

package/dist/esm/board/index.js

@@ -9,7 +9,7 @@ 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 _Board_instances, _Board_opts, _Board_middlewareMap, _Board_middlewares, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_hasDestroyed, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handlePointLeave, _Board_handleHover, _Board_handleDoubleClick, _Board_handleContextMenu, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
+var _Board_instances, _Board_opts, _Board_middlewareMap, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_hasDestroyed, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handlePointLeave, _Board_handleHover, _Board_handleDoubleClick, _Board_handleContextMenu, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
 import { Renderer, Calculator } from '@idraw/renderer';
 import { calcElementsContextSize, EventEmitter } from '@idraw/util';
 import { BoardWatcher } from './watcher';
@@ -19,8 +19,7 @@ export class Board {
     constructor(opts) {
         _Board_instances.add(this);
         _Board_opts.set(this, void 0);
-        _Board_middlewareMap.set(this, new WeakMap());
-        _Board_middlewares.set(this, []);
+        _Board_middlewareMap.set(this, new Map());
         _Board_activeMiddlewareObjs.set(this, []);
         _Board_watcher.set(this, void 0);
         _Board_renderer.set(this, void 0);
@@ -80,8 +79,7 @@ export class Board {
     getRenderer() {
         return __classPrivateFieldGet(this, _Board_renderer, "f");
     }
-    setData(data, opts) {
-        const { modifiedOptions } = opts || {};
+    setData(data) {
         const sharer = __classPrivateFieldGet(this, _Board_sharer, "f");
         __classPrivateFieldGet(this, _Board_sharer, "f").setActiveStorage('data', data);
         const viewSizeInfo = sharer.getActiveViewSizeInfo();
@@ -91,18 +89,10 @@ export class Board {
             viewHeight: viewSizeInfo.height,
             extend: true
         });
-        if (modifiedOptions) {
-            __classPrivateFieldGet(this, _Board_viewer, "f").resetVirtualFlatItemMap(data, {
-                viewSizeInfo,
-                viewScaleInfo
-            });
-        }
-        else {
-            __classPrivateFieldGet(this, _Board_viewer, "f").resetVirtualFlatItemMap(data, {
-                viewSizeInfo,
-                viewScaleInfo
-            });
-        }
+        __classPrivateFieldGet(this, _Board_viewer, "f").resetVirtualFlatItemMap(data, {
+            viewSizeInfo,
+            viewScaleInfo
+        });
         __classPrivateFieldGet(this, _Board_viewer, "f").drawFrame();
         const newViewSizeInfo = Object.assign(Object.assign({}, viewSizeInfo), newViewContextSize);
         __classPrivateFieldGet(this, _Board_sharer, "f").setActiveViewSizeInfo(newViewSizeInfo);
@@ -116,13 +106,12 @@ export class Board {
         var _a, _b, _c;
         if (__classPrivateFieldGet(this, _Board_middlewareMap, "f").has(middleware)) {
             const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
-            if (item) {
-                (_b = (_a = item.middlewareObject).use) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (item && item.status !== 'enable') {
                 item.status = 'enable';
-                __classPrivateFieldGet(this, _Board_middlewareMap, "f").set(middleware, item);
+                (_b = (_a = item.middlewareObject).use) === null || _b === void 0 ? void 0 : _b.call(_a);
                 __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
-                return;
             }
+            return;
         }
         const { boardContent, container } = __classPrivateFieldGet(this, _Board_opts, "f");
         const sharer = __classPrivateFieldGet(this, _Board_sharer, "f");
@@ -131,8 +120,6 @@ export class Board {
         const eventHub = __classPrivateFieldGet(this, _Board_eventHub, "f");
         const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub: eventHub, container }, config);
         (_c = obj.use) === null || _c === void 0 ? void 0 : _c.call(obj);
-        __classPrivateFieldGet(this, _Board_middlewares, "f").push(middleware);
-        __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").push(obj);
         __classPrivateFieldGet(this, _Board_middlewareMap, "f").set(middleware, {
             status: 'enable',
             middlewareObject: obj,
@@ -142,11 +129,13 @@ export class Board {
     }
     disuse(middleware) {
         var _a, _b;
-        const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
-        if (item) {
-            (_b = (_a = item.middlewareObject).disuse) === null || _b === void 0 ? void 0 : _b.call(_a);
-            item.status = 'disable';
-            __classPrivateFieldGet(this, _Board_middlewareMap, "f").set(middleware, item);
+        if (__classPrivateFieldGet(this, _Board_middlewareMap, "f").has(middleware)) {
+            const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
+            if (item) {
+                (_b = (_a = item.middlewareObject).disuse) === null || _b === void 0 ? void 0 : _b.call(_a);
+                item.status = 'disable';
+            }
+            __classPrivateFieldGet(this, _Board_middlewareMap, "f").delete(middleware);
             __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
         }
     }
@@ -206,7 +195,7 @@ export class Board {
         __classPrivateFieldGet(this, _Board_watcher, "f").offEvents();
     }
 }
-_Board_opts = new WeakMap(), _Board_middlewareMap = new WeakMap(), _Board_middlewares = new WeakMap(), _Board_activeMiddlewareObjs = new WeakMap(), _Board_watcher = new WeakMap(), _Board_renderer = new WeakMap(), _Board_sharer = new WeakMap(), _Board_viewer = new WeakMap(), _Board_calculator = new WeakMap(), _Board_eventHub = new WeakMap(), _Board_hasDestroyed = new WeakMap(), _Board_instances = new WeakSet(), _Board_init = function _Board_init() {
+_Board_opts = new WeakMap(), _Board_middlewareMap = new WeakMap(), _Board_activeMiddlewareObjs = new WeakMap(), _Board_watcher = new WeakMap(), _Board_renderer = new WeakMap(), _Board_sharer = new WeakMap(), _Board_viewer = new WeakMap(), _Board_calculator = new WeakMap(), _Board_eventHub = new WeakMap(), _Board_hasDestroyed = new WeakMap(), _Board_instances = new WeakSet(), _Board_init = function _Board_init() {
     __classPrivateFieldGet(this, _Board_watcher, "f").on('pointStart', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointStart).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on('pointEnd', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointEnd).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on('pointMove', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).bind(this));
@@ -359,13 +348,11 @@ _Board_opts = new WeakMap(), _Board_middlewareMap = new WeakMap(), _Board_middle
     }
 }, _Board_resetActiveMiddlewareObjs = function _Board_resetActiveMiddlewareObjs() {
     const activeMiddlewareObjs = [];
-    const middlewareMap = __classPrivateFieldGet(this, _Board_middlewareMap, "f");
-    __classPrivateFieldGet(this, _Board_middlewares, "f").forEach((middleware) => {
-        const item = middlewareMap.get(middleware);
+    for (const [_, item] of __classPrivateFieldGet(this, _Board_middlewareMap, "f")) {
         if ((item === null || item === void 0 ? void 0 : item.status) === 'enable' && (item === null || item === void 0 ? void 0 : item.middlewareObject)) {
             activeMiddlewareObjs.push(item.middlewareObject);
         }
-    });
+    }
     __classPrivateFieldSet(this, _Board_activeMiddlewareObjs, activeMiddlewareObjs, "f");
 };
 export { Sharer, Calculator };

package/dist/esm/index.d.ts

@@ -1,4 +1,4 @@
-import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ModifyOptions } from '@idraw/types';
+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';
@@ -17,12 +17,10 @@ export declare class Core<E extends CoreEventMap = CoreEventMap> {
     constructor(container: HTMLDivElement, opts: CoreOptions);
     isDestroyed(): boolean;
     destroy(): void;
-    use<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: C): void;
-    disuse(middleware: BoardMiddleware<any, any, any>): void;
-    resetMiddlewareConfig<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: Partial<C>): void;
-    setData(data: Data, opts?: {
-        modifiedOptions?: ModifyOptions;
-    }): 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: {
         scale: number;
@@ -46,4 +44,21 @@ export declare class Core<E extends CoreEventMap = CoreEventMap> {
     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,10 +9,23 @@ 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 __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;
+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';
+import { getModifyElementRecord } from './record';
 export { coreEventKeys } from './config';
 export { Board, Sharer, Calculator };
 export { MiddlewareSelector } from './middleware/selector';
@@ -70,9 +83,9 @@ export class Core {
     resetMiddlewareConfig(middleware, config) {
         __classPrivateFieldGet(this, _Core_board, "f").resetMiddlewareConfig(middleware, config);
     }
-    setData(data, opts) {
+    setData(data) {
         validateElements((data === null || data === void 0 ? void 0 : data.elements) || []);
-        __classPrivateFieldGet(this, _Core_board, "f").setData(data, opts);
+        __classPrivateFieldGet(this, _Core_board, "f").setData(data);
     }
     getData() {
         return __classPrivateFieldGet(this, _Core_board, "f").getData();
@@ -128,6 +141,224 @@ export class Core {
     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);
+        this.setData(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);
+        this.setData(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
+            }
+        };
+        this.setData(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) }
+        };
+        this.setData(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 }
+        };
+        deleteElementInList(uuid, data.elements);
+        this.setData(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;
+        this.setData(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'];
+                this.setData(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);
+        this.setData(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'];
+                this.setData(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);
+        this.setData(data);
+        this.refresh();
+        return modifyRecord;
+    }
 }
 _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");

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

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

package/dist/esm/middleware/info/draw-info.js

@@ -31,7 +31,7 @@ export function drawSizeInfoText(ctx, opts) {
         ctx.lineTo(bgEnd.x, bgEnd.y);
         ctx.lineTo(bgStart.x, bgEnd.y);
         ctx.closePath();
-        ctx.fill();
+        ctx.fill('nonzero');
         ctx.fillStyle = textColor;
         ctx.textBaseline = 'top';
         ctx.fillText(text, textStart.x, textStart.y + padding);
@@ -68,7 +68,7 @@ export function drawPositionInfoText(ctx, opts) {
         ctx.lineTo(bgEnd.x, bgEnd.y);
         ctx.lineTo(bgStart.x, bgEnd.y);
         ctx.closePath();
-        ctx.fill();
+        ctx.fill('nonzero');
         ctx.fillStyle = textColor;
         ctx.textBaseline = 'top';
         ctx.fillText(text, textStart.x, textStart.y + padding);
@@ -105,7 +105,7 @@ export function drawAngleInfoText(ctx, opts) {
         ctx.lineTo(bgEnd.x, bgEnd.y);
         ctx.lineTo(bgStart.x, bgEnd.y);
         ctx.closePath();
-        ctx.fill();
+        ctx.fill('nonzero');
         ctx.fillStyle = textColor;
         ctx.textBaseline = 'top';
         ctx.fillText(text, textStart.x, textStart.y + padding);

package/dist/esm/middleware/info/index.d.ts

@@ -1,8 +1,8 @@
-import type { BoardMiddleware, MiddlewareInfoConfig, CoreEventMap } from '@idraw/types';
+import type { Middleware, MiddlewareInfoConfig, CoreEventMap } from '@idraw/types';
 import type { DeepInfoSharedStorage } from './types';
 import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from './config';
 export { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE };
-export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, CoreEventMap & {
+export declare const MiddlewareInfo: Middleware<DeepInfoSharedStorage, CoreEventMap & {
     [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
         show: boolean;
     };

package/dist/esm/middleware/layout-selector/index.d.ts

@@ -1,5 +1,5 @@
-import type { BoardMiddleware, MiddlewareLayoutSelectorConfig, CoreEventMap } from '@idraw/types';
+import type { Middleware, MiddlewareLayoutSelectorConfig, CoreEventMap } from '@idraw/types';
 import type { LayoutSelectorSharedStorage } from './types';
 import { keyLayoutIsSelected, keyLayoutIsBusyMoving } from './config';
 export { keyLayoutIsSelected, keyLayoutIsBusyMoving };
-export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage, CoreEventMap, MiddlewareLayoutSelectorConfig>;
+export declare const MiddlewareLayoutSelector: Middleware<LayoutSelectorSharedStorage, CoreEventMap, MiddlewareLayoutSelectorConfig>;

package/dist/esm/middleware/layout-selector/index.js

@@ -1,4 +1,4 @@
-import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize } from '@idraw/util';
+import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize, getElementSize, toFlattenLayout } from '@idraw/util';
 import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving, controllerSize, defaultStyle } from './config';
 import { keyActionType as keyElementActionType } from '../selector';
 import { drawLayoutController, drawLayoutHover } from './util';
@@ -11,6 +11,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
     let prevPoint = null;
     let prevIsHoverContent = null;
     let prevIsSelected = null;
+    let pointStartLayoutSize = null;
     const clear = () => {
         prevPoint = null;
         sharer.setSharedStorage(keyLayoutActionType, null);
@@ -179,6 +180,13 @@ export const MiddlewareLayoutSelector = (opts, config) => {
                 }
                 sharer.setSharedStorage(keyLayoutIsSelected, false);
             }
+            const data = sharer.getActiveStorage('data');
+            if (data === null || data === void 0 ? void 0 : data.layout) {
+                pointStartLayoutSize = getElementSize(data.layout);
+            }
+            else {
+                pointStartLayoutSize = null;
+            }
             resetController();
             const layoutControlType = resetControlType(e);
             prevPoint = e.point;
@@ -300,11 +308,25 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
             const data = sharer.getActiveStorage('data');
             if (data && layoutActionType === 'resize' && layoutControlType) {
+                let modifyRecord = undefined;
+                if (pointStartLayoutSize) {
+                    modifyRecord = {
+                        type: 'modifyLayout',
+                        time: Date.now(),
+                        content: {
+                            method: 'modifyLayout',
+                            before: toFlattenLayout(pointStartLayoutSize),
+                            after: toFlattenLayout(getElementSize(data.layout))
+                        }
+                    };
+                }
                 eventHub.trigger(coreEventKeys.CHANGE, {
                     type: 'dragLayout',
-                    data
+                    data,
+                    modifyRecord
                 });
             }
+            pointStartLayoutSize = null;
             sharer.setSharedStorage(keyLayoutActionType, null);
             sharer.setSharedStorage(keyLayoutControlType, null);
             if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {

package/dist/esm/middleware/layout-selector/util.js

@@ -8,7 +8,7 @@ function drawControllerBox(ctx, boxVertexes, style) {
     ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y);
     ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
     ctx.closePath();
-    ctx.fill();
+    ctx.fill('nonzero');
     ctx.strokeStyle = activeColor;
     ctx.lineWidth = 2;
     ctx.beginPath();
@@ -37,9 +37,24 @@ export function drawLayoutController(ctx, opts) {
     const { controller, style } = opts;
     const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller;
     drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, style });
-    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, style });
-    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, style });
-    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, style });
+    drawControllerLine(ctx, {
+        start: topRight.center,
+        end: bottomRight.center,
+        centerVertexes: rightMiddle.vertexes,
+        style
+    });
+    drawControllerLine(ctx, {
+        start: bottomRight.center,
+        end: bottomLeft.center,
+        centerVertexes: bottomMiddle.vertexes,
+        style
+    });
+    drawControllerLine(ctx, {
+        start: bottomLeft.center,
+        end: topLeft.center,
+        centerVertexes: leftMiddle.vertexes,
+        style
+    });
     drawControllerBox(ctx, topLeft.vertexes, style);
     drawControllerBox(ctx, topRight.vertexes, style);
     drawControllerBox(ctx, bottomRight.vertexes, style);

package/dist/esm/middleware/pointer/index.d.ts

@@ -1,3 +1,3 @@
-import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
+import type { Middleware, CoreEventMap } from '@idraw/types';
 import type { DeepPointerSharedStorage } from './types';
-export declare const MiddlewarePointer: BoardMiddleware<DeepPointerSharedStorage, CoreEventMap>;
+export declare const MiddlewarePointer: Middleware<DeepPointerSharedStorage, CoreEventMap>;

package/dist/esm/middleware/pointer/index.js

@@ -10,23 +10,22 @@ export const MiddlewarePointer = (opts) => {
         const { left, top, width, height } = clientRect;
         return { left, top, width, height };
     };
-    const contextMenuPointer = document.createElement('div');
-    contextMenuPointer.setAttribute('id', id);
-    contextMenuPointer.style.position = 'fixed';
-    contextMenuPointer.style.top = '0';
-    contextMenuPointer.style.bottom = 'unset';
-    contextMenuPointer.style.left = '0';
-    contextMenuPointer.style.right = 'unset';
-    container.appendChild(contextMenuPointer);
+    let contextMenuPointer = document.createElement('div');
     return {
         name: '@middleware/pointer',
         use() {
+            contextMenuPointer.setAttribute('id', id);
+            contextMenuPointer.style.position = 'fixed';
+            contextMenuPointer.style.top = '0';
+            contextMenuPointer.style.bottom = 'unset';
+            contextMenuPointer.style.left = '0';
+            contextMenuPointer.style.right = 'unset';
+            container.appendChild(contextMenuPointer);
         },
         disuse() {
-        },
-        pointStart(e) {
-        },
-        pointEnd() {
+            container.removeChild(contextMenuPointer);
+            contextMenuPointer.remove();
+            contextMenuPointer = null;
         },
         contextMenu(e) {
             const { point } = e;

package/dist/esm/middleware/ruler/config.js

@@ -9,7 +9,7 @@ const scaleColor = '#000000';
 const textColor = '#00000080';
 const gridColor = '#AAAAAA20';
 const gridPrimaryColor = '#AAAAAA40';
-const selectedAreaColor = '#196097';
+const selectedAreaColor = '#19609780';
 export const defaultStyle = {
     background,
     borderColor,

package/dist/esm/middleware/ruler/index.d.ts

@@ -1,3 +1,3 @@
-import type { BoardMiddleware, CoreEventMap, MiddlewareRulerConfig } from '@idraw/types';
+import type { Middleware, CoreEventMap, MiddlewareRulerConfig } from '@idraw/types';
 import type { DeepRulerSharedStorage } from './types';
-export declare const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap, MiddlewareRulerConfig>;
+export declare const MiddlewareRuler: Middleware<DeepRulerSharedStorage, CoreEventMap, MiddlewareRulerConfig>;