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

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

@@ -44,8 +44,8 @@ export const MiddlewareRuler = (opts, config) => {
             if (show === true) {
                 const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
                 const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-                drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
                 drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo, style });
+                drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
                 const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
                 drawXRuler(overlayContext, { scaleList: xList, style });
                 const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });

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

@@ -162,7 +162,7 @@ export function drawRulerBackground(ctx, opts) {
     ctx.lineTo(basePosition, basePosition);
     ctx.closePath();
     ctx.fillStyle = background;
-    ctx.fill();
+    ctx.fill('nonzero');
     ctx.lineWidth = lineSize;
     ctx.setLineDash([]);
     ctx.strokeStyle = borderColor;
@@ -210,7 +210,8 @@ export function drawScrollerSelectedArea(ctx, opts) {
     const { selectedAreaColor } = style;
     const selectedElementList = sharedStore[keySelectedElementList];
     const actionType = sharedStore[keyActionType];
-    if (['select', 'drag', 'drag-list', 'drag-list-end'].includes(actionType) && selectedElementList.length > 0) {
+    if (['select', 'drag', 'drag-list', 'drag-list-end'].includes(actionType) &&
+        selectedElementList.length > 0) {
         const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
         const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
         const rangeRectInfoList = [];
@@ -246,7 +247,7 @@ export function drawScrollerSelectedArea(ctx, opts) {
         ctx.lineTo(xAreaStart, rulerSize);
         ctx.fillStyle = selectedAreaColor;
         ctx.closePath();
-        ctx.fill();
+        ctx.fill('nonzero');
         ctx.beginPath();
         ctx.moveTo(0, yAreaStart);
         ctx.lineTo(rulerSize, yAreaStart);
@@ -254,6 +255,6 @@ export function drawScrollerSelectedArea(ctx, opts) {
         ctx.lineTo(0, yAreaEnd);
         ctx.fillStyle = selectedAreaColor;
         ctx.closePath();
-        ctx.fill();
+        ctx.fill('nonzero');
     }
 }

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

@@ -1,2 +1,2 @@
-import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
-export declare const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEventMap>;
+import type { Middleware, CoreEventMap } from '@idraw/types';
+export declare const MiddlewareScaler: Middleware<Record<string, any>, CoreEventMap>;

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

@@ -1,3 +1,3 @@
-import type { BoardMiddleware, MiddlewareScrollerConfig } from '@idraw/types';
+import type { Middleware, MiddlewareScrollerConfig } from '@idraw/types';
 import type { DeepScrollerSharedStorage } from './types';
-export declare const MiddlewareScroller: BoardMiddleware<DeepScrollerSharedStorage, any, MiddlewareScrollerConfig>;
+export declare const MiddlewareScroller: Middleware<DeepScrollerSharedStorage, any, MiddlewareScrollerConfig>;

package/dist/esm/middleware/scroller/util.js

@@ -139,7 +139,7 @@ function drawScrollerThumb(ctx, opts) {
         ctx.arcTo(x, y, x + w, y, r);
         ctx.closePath();
         ctx.fillStyle = background;
-        ctx.fill();
+        ctx.fill('nonzero');
         ctx.beginPath();
         ctx.lineWidth = 1;
         ctx.strokeStyle = borderColor;

package/dist/esm/middleware/selector/draw-base.js

@@ -13,7 +13,7 @@ export function drawVertexes(ctx, vertexes, opts) {
     ctx.lineTo(vertexes[0].x, vertexes[0].y);
     ctx.closePath();
     ctx.stroke();
-    ctx.fill();
+    ctx.fill('nonzero');
 }
 export function drawLine(ctx, start, end, opts) {
     const { borderColor, borderWidth, lineDash } = opts;
@@ -48,7 +48,7 @@ export function drawCircleController(ctx, circleCenter, opts) {
         ctx.fillStyle = background;
         ctx.circle(center.x, center.y, a, b, 0, 0, 2 * Math.PI);
         ctx.closePath();
-        ctx.fill();
+        ctx.fill('nonzero');
     }
 }
 export function drawCrossVertexes(ctx, vertexes, opts) {

package/dist/esm/middleware/selector/draw-debug.js

@@ -13,7 +13,7 @@ function drawDebugControllerVertexes(opts) {
     ctx.lineTo(v3.x, v3.y);
     ctx.lineTo(v0.x, v0.y);
     ctx.closePath();
-    ctx.fill();
+    ctx.fill('nonzero');
     return false;
 }
 export function drawDebugStoreSelectedElementController(ctx, controller, opts) {

package/dist/esm/middleware/selector/draw-wrapper.js

@@ -41,7 +41,12 @@ export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
     const { devicePixelRatio = 1 } = viewSizeInfo;
     const { activeColor } = style;
     const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, rotate } = controller;
-    const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
+    const wrapperOpts = {
+        borderColor: activeColor,
+        borderWidth: selectWrapperBorderWidth,
+        background: 'transparent',
+        lineDash: []
+    };
     const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
     if (!hideControllers) {
@@ -81,7 +86,7 @@ export function drawElementListShadows(ctx, elements, opts) {
             }
             ctx.closePath();
             ctx.stroke();
-            ctx.fill();
+            ctx.fill('nonzero');
         }
     });
 }
@@ -99,7 +104,7 @@ export function drawArea(ctx, opts) {
     ctx.lineTo(start.x, end.y);
     ctx.closePath();
     ctx.stroke();
-    ctx.fill();
+    ctx.fill('nonzero');
 }
 export function drawListArea(ctx, opts) {
     const { areaSize, style } = opts;
@@ -116,14 +121,19 @@ export function drawListArea(ctx, opts) {
     ctx.lineTo(x, y + h);
     ctx.closePath();
     ctx.stroke();
-    ctx.fill();
+    ctx.fill('nonzero');
 }
 export function drawGroupQueueVertexesWrappers(ctx, vertexesList, opts) {
     const { style } = opts;
     const { activeColor } = style;
     for (let i = 0; i < vertexesList.length; i++) {
         const vertexes = vertexesList[i];
-        const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
+        const wrapperOpts = {
+            borderColor: activeColor,
+            borderWidth: selectWrapperBorderWidth,
+            background: 'transparent',
+            lineDash: [4, 4]
+        };
         drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     }
 }

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

@@ -1,10 +1,10 @@
 import type { CoreEventMap, MiddlewareSelectorConfig } from '@idraw/types';
-import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
+import type { Middleware, ActionType, DeepSelectorSharedStorage } from './types';
 import { keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
 import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from '../info';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export type { DeepSelectorSharedStorage, ActionType };
-export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap & {
+export declare const MiddlewareSelector: Middleware<DeepSelectorSharedStorage, CoreEventMap & {
     [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
         show: boolean;
     };

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

@@ -1,4 +1,4 @@
-import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, getElementPositionMapFromList, deepResizeGroupElement, getElementSize, calcPointMoveElementInGroup, isSameElementSize } from '@idraw/util';
+import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, getElementPositionMapFromList, deepResizeGroupElement, getElementSize, calcPointMoveElementInGroup, isSameElementSize, toFlattenElement } from '@idraw/util';
 import { drawHoverVertexesWrapper, drawLockedVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { drawReferenceLines } from './draw-reference';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup } from './util';
@@ -14,6 +14,7 @@ export const MiddlewareSelector = (opts, config) => {
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
+    let pointStartElementSizeList = [];
     let moveOriginalStartPoint = null;
     let moveOriginalStartElementSize = null;
     let inBusyMode = null;
@@ -172,6 +173,8 @@ export const MiddlewareSelector = (opts, config) => {
             eventHub.off(coreEventKeys.CLEAR_SELECT, selectClearCallback);
             eventHub.off(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
             eventHub.off(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
+            clear();
+            innerConfig = null;
         },
         resetConfig(config) {
             innerConfig = Object.assign(Object.assign({}, innerConfig), config);
@@ -299,6 +302,7 @@ export const MiddlewareSelector = (opts, config) => {
                     else if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
                         updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                         sharer.setSharedStorage(keyActionType, 'drag');
+                        pointStartElementSizeList = [Object.assign(Object.assign({}, getElementSize(target === null || target === void 0 ? void 0 : target.elements[0])), { uuid: target === null || target === void 0 ? void 0 : target.elements[0].uuid })];
                     }
                     else if ((_f = target.type) === null || _f === void 0 ? void 0 : _f.startsWith('resize-')) {
                         sharer.setSharedStorage(keyResizeType, target.type);
@@ -337,6 +341,7 @@ export const MiddlewareSelector = (opts, config) => {
             else if (target.type === 'over-element' && ((_l = target === null || target === void 0 ? void 0 : target.elements) === null || _l === void 0 ? void 0 : _l.length) === 1) {
                 updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                 sharer.setSharedStorage(keyActionType, 'drag');
+                pointStartElementSizeList = [Object.assign(Object.assign({}, getElementSize(target === null || target === void 0 ? void 0 : target.elements[0])), { uuid: target === null || target === void 0 ? void 0 : target.elements[0].uuid })];
             }
             else if ((_m = target.type) === null || _m === void 0 ? void 0 : _m.startsWith('resize-')) {
                 sharer.setSharedStorage(keyResizeType, target.type);
@@ -404,7 +409,7 @@ export const MiddlewareSelector = (opts, config) => {
                     elems[0].y = calculator.toGridNum(moveOriginalStartElementSize.y + totalMoveY);
                     updateSelectedElementList([elems[0]]);
                     calculator.modifyVirtualFlatItemMap(data, {
-                        modifyOptions: {
+                        modifyInfo: {
                             type: 'updateElement',
                             content: {
                                 element: elems[0],
@@ -429,7 +434,7 @@ export const MiddlewareSelector = (opts, config) => {
                             elem.x = calculator.toGridNum(elem.x + moveX);
                             elem.y = calculator.toGridNum(elem.y + moveY);
                             calculator.modifyVirtualFlatItemMap(data, {
-                                modifyOptions: {
+                                modifyInfo: {
                                     type: 'updateElement',
                                     content: {
                                         element: elem,
@@ -508,7 +513,7 @@ export const MiddlewareSelector = (opts, config) => {
                     }
                     updateSelectedElementList([elems[0]]);
                     calculator.modifyVirtualFlatItemMap(data, {
-                        modifyOptions: {
+                        modifyInfo: {
                             type: 'updateElement',
                             content: {
                                 element: elems[0],
@@ -606,7 +611,32 @@ export const MiddlewareSelector = (opts, config) => {
                         type = 'resizeElement';
                     }
                     if (hasChangedData) {
-                        eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement });
+                        const startSize = pointStartElementSizeList[0];
+                        let modifyRecord = undefined;
+                        if (selectedElements.length === 1) {
+                            modifyRecord = {
+                                type: 'dragElement',
+                                time: 0,
+                                content: {
+                                    method: 'modifyElement',
+                                    uuid: startSize.uuid,
+                                    before: toFlattenElement(startSize),
+                                    after: toFlattenElement(getElementSize(selectedElements[0]))
+                                }
+                            };
+                        }
+                        else if (selectedElements.length > 1) {
+                            modifyRecord = {
+                                type: 'dragElements',
+                                time: 0,
+                                content: {
+                                    method: 'modifyElements',
+                                    before: pointStartElementSizeList.map((item) => (Object.assign(Object.assign({}, toFlattenElement(item)), { uuid: item.uuid }))),
+                                    after: selectedElements.map((item) => (Object.assign(Object.assign({}, toFlattenElement(getElementSize(item))), { uuid: item.uuid })))
+                                }
+                            };
+                        }
+                        eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement, modifyRecord });
                         hasChangedData = false;
                     }
                 }

package/dist/esm/middleware/selector/types.d.ts

@@ -1,7 +1,7 @@
-import { Data, ElementSize, ElementType, Element, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware, ViewRectVertexes, ElementSizeController, ElementPosition } from '@idraw/types';
+import { Data, ElementSize, ElementType, Element, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, Middleware, ViewRectVertexes, ElementSizeController, ElementPosition } from '@idraw/types';
 import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
 import { keyLayoutIsSelected, keyLayoutIsBusyMoving } from '../layout-selector';
-export { Data, ElementType, Element, ElementSize, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware };
+export { Data, ElementType, Element, ElementSize, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, Middleware };
 export type ControllerStyle = ElementSize & {
     borderWidth: number;
     borderColor: string;

package/dist/esm/middleware/text-editor/index.d.ts

@@ -1,4 +1,4 @@
-import type { BoardMiddleware, CoreEventMap, Element, ViewScaleInfo, ElementPosition } from '@idraw/types';
+import type { Middleware, CoreEventMap, Element, ViewScaleInfo, ElementPosition } from '@idraw/types';
 import { coreEventKeys } from '../../config';
 type TextEditEvent = {
     element: Element<'text'>;
@@ -16,5 +16,5 @@ type TextChangeEvent = {
     position: ElementPosition;
 };
 type ExtendEventMap = Record<typeof coreEventKeys.TEXT_EDIT, TextEditEvent> & Record<typeof coreEventKeys.TEXT_CHANGE, TextChangeEvent>;
-export declare const MiddlewareTextEditor: BoardMiddleware<ExtendEventMap, CoreEventMap & ExtendEventMap>;
+export declare const MiddlewareTextEditor: Middleware<ExtendEventMap, CoreEventMap & ExtendEventMap>;
 export {};

package/dist/esm/middleware/text-editor/index.js

@@ -1,16 +1,17 @@
-import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy } from '@idraw/util';
+import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy, updateElementInList } from '@idraw/util';
 import { coreEventKeys } from '../../config';
 const defaultElementDetail = getDefaultElementDetailConfig();
 export const MiddlewareTextEditor = (opts) => {
-    const { eventHub, boardContent, viewer, sharer } = opts;
+    const { eventHub, boardContent, viewer, sharer, calculator } = opts;
     const canvas = boardContent.boardContext.canvas;
-    const textarea = document.createElement('div');
-    textarea.setAttribute('contenteditable', 'true');
-    const canvasWrapper = document.createElement('div');
     const container = opts.container || document.body;
-    const mask = document.createElement('div');
+    let textarea = document.createElement('div');
+    textarea.setAttribute('contenteditable', 'true');
+    let canvasWrapper = document.createElement('div');
+    let mask = document.createElement('div');
     let activeElem = null;
     let activePosition = [];
+    let originText = '';
     const id = `idraw-middleware-text-editor-${Math.random().toString(26).substring(2)}`;
     mask.setAttribute('id', id);
     canvasWrapper.appendChild(textarea);
@@ -27,12 +28,14 @@ export const MiddlewareTextEditor = (opts) => {
         resetCanvasWrapper();
         resetTextArea(e);
         mask.style.display = 'block';
+        originText = '';
         if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
             sharer.setActiveOverrideElemenentMap({
                 [activeElem.uuid]: {
                     operations: { invisible: true }
                 }
             });
+            originText = activeElem.detail.text || '';
             viewer.drawFrame();
         }
     };
@@ -155,13 +158,13 @@ export const MiddlewareTextEditor = (opts) => {
         canvasWrapper.style.width = `${width}px`;
         canvasWrapper.style.height = `${height}px`;
     };
-    mask.addEventListener('click', () => {
+    const maskClickEvent = () => {
         hideTextArea();
-    });
-    textarea.addEventListener('click', (e) => {
+    };
+    const textareaClickEvent = (e) => {
         e.stopPropagation();
-    });
-    textarea.addEventListener('input', () => {
+    };
+    const textareaInputEvent = () => {
         if (activeElem && activePosition) {
             activeElem.detail.text = textarea.innerText || '';
             eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
@@ -173,11 +176,13 @@ export const MiddlewareTextEditor = (opts) => {
                 },
                 position: [...(activePosition || [])]
             });
+            calculator.modifyText(activeElem);
             viewer.drawFrame();
         }
-    });
-    textarea.addEventListener('blur', () => {
+    };
+    const textareaBlurEvent = () => {
         if (activeElem && activePosition) {
+            activeElem.detail.text = textarea.innerText || '';
             eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
                 element: {
                     uuid: activeElem.uuid,
@@ -187,22 +192,60 @@ export const MiddlewareTextEditor = (opts) => {
                 },
                 position: [...activePosition]
             });
+            const data = sharer.getActiveStorage('data') || { elements: [] };
+            const updateContent = {
+                detail: {
+                    text: activeElem.detail.text
+                }
+            };
+            updateElementInList(activeElem.uuid, updateContent, data.elements);
+            eventHub.trigger(coreEventKeys.CHANGE, {
+                selectedElements: [
+                    Object.assign(Object.assign({}, activeElem), { detail: Object.assign(Object.assign({}, activeElem.detail), updateContent.detail) })
+                ],
+                data,
+                type: 'modifyElement',
+                modifyRecord: {
+                    type: 'modifyElement',
+                    time: Date.now(),
+                    content: {
+                        method: 'modifyElement',
+                        uuid: activeElem.uuid,
+                        before: {
+                            'detail.text': originText
+                        },
+                        after: {
+                            'detail.text': activeElem.detail.text
+                        }
+                    }
+                }
+            });
+            calculator.modifyText(activeElem);
+            viewer.drawFrame();
         }
         hideTextArea();
-    });
-    textarea.addEventListener('keydown', (e) => {
+    };
+    const textareaKeyDownEvent = (e) => {
         e.stopPropagation();
-    });
-    textarea.addEventListener('keypress', (e) => {
+    };
+    const textareaKeyPressEvent = (e) => {
         e.stopPropagation();
-    });
-    textarea.addEventListener('keyup', (e) => {
+    };
+    const textareaKeyUpEvent = (e) => {
         e.stopPropagation();
-    });
-    textarea.addEventListener('wheel', (e) => {
+    };
+    const textareaWheelEvent = (e) => {
         e.stopPropagation();
         e.preventDefault();
-    });
+    };
+    mask.addEventListener('click', maskClickEvent);
+    textarea.addEventListener('click', textareaClickEvent);
+    textarea.addEventListener('input', textareaInputEvent);
+    textarea.addEventListener('blur', textareaBlurEvent);
+    textarea.addEventListener('keydown', textareaKeyDownEvent);
+    textarea.addEventListener('keypress', textareaKeyPressEvent);
+    textarea.addEventListener('keyup', textareaKeyUpEvent);
+    textarea.addEventListener('wheel', textareaWheelEvent);
     const textEditCallback = (e) => {
         var _a;
         if ((e === null || e === void 0 ? void 0 : e.position) && (e === null || e === void 0 ? void 0 : e.element) && ((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.type) === 'text') {
@@ -218,6 +261,26 @@ export const MiddlewareTextEditor = (opts) => {
         },
         disuse() {
             eventHub.off(coreEventKeys.TEXT_EDIT, textEditCallback);
+            mask.removeEventListener('click', maskClickEvent);
+            textarea.removeEventListener('click', textareaClickEvent);
+            textarea.removeEventListener('input', textareaInputEvent);
+            textarea.removeEventListener('blur', textareaBlurEvent);
+            textarea.removeEventListener('keydown', textareaKeyDownEvent);
+            textarea.removeEventListener('keypress', textareaKeyPressEvent);
+            textarea.removeEventListener('keyup', textareaKeyUpEvent);
+            textarea.removeEventListener('wheel', textareaWheelEvent);
+            canvasWrapper.removeChild(textarea);
+            mask.removeChild(canvasWrapper);
+            container.removeChild(mask);
+            textarea.remove();
+            canvasWrapper.remove();
+            mask = null;
+            textarea = null;
+            canvasWrapper = null;
+            mask = null;
+            activeElem = null;
+            activePosition = null;
+            originText = null;
         }
     };
 };

package/dist/esm/record.d.ts

@@ -0,0 +1,5 @@
+import type { RecursivePartial, Element, ModifyRecord } from '@idraw/types';
+export declare function getModifyElementRecord(opts: {
+    modifiedElement: RecursivePartial<Omit<Element, 'uuid'>> & Pick<Element, 'uuid'>;
+    beforeElement: Element;
+}): ModifyRecord<'modifyElement'>;

package/dist/esm/record.js

@@ -0,0 +1,38 @@
+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;
+};
+import { toFlattenElement, get } from '@idraw/util';
+export function getModifyElementRecord(opts) {
+    const { modifiedElement, beforeElement } = opts;
+    const { uuid } = modifiedElement, restElement = __rest(modifiedElement, ["uuid"]);
+    const after = toFlattenElement(restElement);
+    let before = {};
+    Object.keys(after).forEach((key) => {
+        let val = get(beforeElement, key);
+        if (val === undefined && /(borderRadius|borderWidth)\[[0-9]{1,}\]$/.test(key)) {
+            key = key.replace(/\[[0-9]{1,}\]$/, '');
+            val = get(beforeElement, key);
+        }
+        before[key] = val;
+    });
+    before = toFlattenElement(before);
+    const record = {
+        type: 'modifyElement',
+        time: Date.now(),
+        content: {
+            method: 'modifyElement',
+            uuid,
+            before,
+            after
+        }
+    };
+    return record;
+}