@idraw/core 0.4.0-beta.1 → 0.4.0-beta.11

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

@@ -1,5 +1,5 @@
 import { rotateElementVertexes, calcViewVertexes } from '@idraw/util';
-import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth } from './config';
+import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor } from './config';
 function drawVertexes(ctx, vertexes, opts) {
     const { borderColor, borderWidth, background, lineDash } = opts;
     ctx.setLineDash([]);
@@ -24,6 +24,44 @@ export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
 }
+function drawCrossVertexes(ctx, vertexes, opts) {
+    const { borderColor, borderWidth, background, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.fillStyle = background;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(vertexes[0].x, vertexes[0].y);
+    ctx.lineTo(vertexes[2].x, vertexes[2].y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(vertexes[1].x, vertexes[1].y);
+    ctx.lineTo(vertexes[3].x, vertexes[3].y);
+    ctx.closePath();
+    ctx.stroke();
+}
+export function drawLockVertexesWrapper(ctx, vertexes, opts) {
+    if (!vertexes) {
+        return;
+    }
+    const wrapperOpts = { borderColor: lockColor, borderWidth: 1, background: 'transparent', lineDash: [] };
+    drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
+    const { controller } = opts;
+    if (controller) {
+        const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, bottomMiddle, leftMiddle, rightMiddle } = controller;
+        const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: 1, background: lockColor });
+        drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(leftMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(rightMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+    }
+}
 export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
     if (!controller) {
         return;

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

@@ -1,4 +1,5 @@
 import type { CoreEvent } from '@idraw/types';
 import type { BoardMiddleware, DeepSelectorSharedStorage } from './types';
 export declare const middlewareEventSelect: string;
+export declare const middlewareEventSelectClear: string;
 export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEvent>;

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

@@ -1,40 +1,15 @@
-import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions } from '@idraw/util';
-import { drawHoverVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
+import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, deepResizeGroupElement } from '@idraw/util';
+import { drawHoverVertexesWrapper, drawLockVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { getPointTarget, resizeElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { key, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController } from './config';
 import { middlewareEventTextEdit } from '../text-editor';
 export const middlewareEventSelect = '@middleware/select';
+export const middlewareEventSelectClear = '@middleware/select-clear';
 export const MiddlewareSelector = (opts) => {
-    const { viewer, sharer, viewContent, calculator, eventHub } = opts;
-    const { helperContext } = viewContent;
+    const { viewer, sharer, boardContent, calculator, eventHub } = opts;
+    const { helperContext } = boardContent;
     let prevPoint = null;
     let inBusyMode = null;
-    eventHub.on(middlewareEventSelect, ({ uuids, positions }) => {
-        let elements = [];
-        const actionType = sharer.getSharedStorage(keyActionType);
-        const data = sharer.getActiveStorage('data');
-        if (positions && Array.isArray(positions)) {
-            elements = findElementsFromListByPositions(positions, (data === null || data === void 0 ? void 0 : data.elements) || []);
-        }
-        else {
-            elements = findElementsFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
-        }
-        let needRefresh = false;
-        if (!actionType && elements.length === 1) {
-            sharer.setSharedStorage(keyActionType, 'select');
-            needRefresh = true;
-        }
-        else if (actionType === 'select' && elements.length === 1) {
-            needRefresh = true;
-        }
-        if (needRefresh) {
-            const elem = elements[0];
-            const groupQueue = getGroupQueueFromList(elem.uuid, (data === null || data === void 0 ? void 0 : data.elements) || []);
-            sharer.setSharedStorage(keyGroupQueue, groupQueue);
-            updateSelectedElementList(elements);
-            viewer.drawFrame();
-        }
-    });
     sharer.setSharedStorage(keyActionType, null);
     const getActiveElements = () => {
         return sharer.getSharedStorage(keySelectedElementList);
@@ -114,15 +89,53 @@ export const MiddlewareSelector = (opts) => {
         sharer.setSharedStorage(keySelectedElementController, null);
     };
     clear();
+    const selectCallback = ({ uuids, positions }) => {
+        let elements = [];
+        const actionType = sharer.getSharedStorage(keyActionType);
+        const data = sharer.getActiveStorage('data');
+        if (positions && Array.isArray(positions)) {
+            elements = findElementsFromListByPositions(positions, (data === null || data === void 0 ? void 0 : data.elements) || []);
+        }
+        else {
+            elements = findElementsFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
+        }
+        let needRefresh = false;
+        if (!actionType && elements.length === 1) {
+            sharer.setSharedStorage(keyActionType, 'select');
+            needRefresh = true;
+        }
+        else if (actionType === 'select' && elements.length === 1) {
+            needRefresh = true;
+        }
+        if (needRefresh) {
+            const elem = elements[0];
+            const groupQueue = getGroupQueueFromList(elem.uuid, (data === null || data === void 0 ? void 0 : data.elements) || []);
+            sharer.setSharedStorage(keyGroupQueue, groupQueue);
+            updateSelectedElementList(elements);
+            viewer.drawFrame();
+        }
+    };
+    const selectClearCallback = () => {
+        clear();
+        viewer.drawFrame();
+    };
     return {
-        mode: key,
+        name: '@middleware/selector',
+        use() {
+            eventHub.on(middlewareEventSelect, selectCallback);
+            eventHub.on(middlewareEventSelectClear, selectClearCallback);
+        },
+        disuse() {
+            eventHub.off(middlewareEventSelect, selectCallback);
+            eventHub.off(middlewareEventSelectClear, selectClearCallback);
+        },
         hover: (e) => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e;
             const resizeType = sharer.getSharedStorage(keyResizeType);
             const actionType = sharer.getSharedStorage(keyActionType);
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             const triggerCursor = (target) => {
-                let cursor = target.type;
+                const cursor = target.type;
                 if (inBusyMode === null) {
                     eventHub.trigger('cursor', {
                         type: cursor,
@@ -176,8 +189,22 @@ export const MiddlewareSelector = (opts) => {
                     calculator
                 }) }));
             triggerCursor(target);
-            if (target.type === 'over-element' && ((_b = target === null || target === void 0 ? void 0 : target.elements) === null || _b === void 0 ? void 0 : _b.length) === 1) {
-                sharer.setSharedStorage(keyHoverElement, target.elements[0]);
+            if (target.type === null) {
+                return;
+            }
+            if (target.type === 'over-element' &&
+                sharer.getSharedStorage(keyActionType) === 'select' &&
+                target.elements.length === 1 &&
+                target.elements[0].uuid === ((_c = (_b = getActiveElements()) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.uuid)) {
+                return;
+            }
+            if (target.type === 'over-element' &&
+                sharer.getSharedStorage(keyActionType) === null &&
+                target.elements.length === 1 &&
+                target.elements[0].uuid === ((_d = sharer.getSharedStorage(keyHoverElement)) === null || _d === void 0 ? void 0 : _d.uuid)) {
+                return;
+            }
+            if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
                 updateHoverElement(target.elements[0]);
                 viewer.drawFrame();
                 return;
@@ -189,9 +216,8 @@ export const MiddlewareSelector = (opts) => {
             }
         },
         pointStart: (e) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             prevPoint = e.point;
-            updateHoverElement(null);
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 if (isPointInViewActiveGroup(e.point, {
@@ -201,12 +227,17 @@ export const MiddlewareSelector = (opts) => {
                     groupQueue
                 })) {
                     const target = getPointTarget(e.point, pointTargetBaseOptions());
-                    updateHoverElement(null);
-                    if (target.type === 'over-element' && ((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+                    if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.lock) === true) {
+                        return;
+                    }
+                    else {
+                        updateHoverElement(null);
+                    }
+                    if (target.type === 'over-element' && ((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length) === 1) {
                         updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                         sharer.setSharedStorage(keyActionType, 'drag');
                     }
-                    else if ((_b = target.type) === null || _b === void 0 ? void 0 : _b.startsWith('resize-')) {
+                    else if ((_e = target.type) === null || _e === void 0 ? void 0 : _e.startsWith('resize-')) {
                         sharer.setSharedStorage(keyResizeType, target.type);
                         sharer.setSharedStorage(keyActionType, 'resize');
                     }
@@ -226,14 +257,20 @@ export const MiddlewareSelector = (opts) => {
                 calculator
             });
             const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
+            if (((_f = target === null || target === void 0 ? void 0 : target.elements) === null || _f === void 0 ? void 0 : _f.length) === 1 && ((_h = (_g = target.elements[0]) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.lock) === true) {
+                return;
+            }
+            else {
+                updateHoverElement(null);
+            }
             if (target.type === 'list-area') {
                 sharer.setSharedStorage(keyActionType, 'drag-list');
             }
-            else if (target.type === 'over-element' && ((_c = target === null || target === void 0 ? void 0 : target.elements) === null || _c === void 0 ? void 0 : _c.length) === 1) {
+            else if (target.type === 'over-element' && ((_j = target === null || target === void 0 ? void 0 : target.elements) === null || _j === void 0 ? void 0 : _j.length) === 1) {
                 updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                 sharer.setSharedStorage(keyActionType, 'drag');
             }
-            else if ((_d = target.type) === null || _d === void 0 ? void 0 : _d.startsWith('resize-')) {
+            else if ((_k = target.type) === null || _k === void 0 ? void 0 : _k.startsWith('resize-')) {
                 sharer.setSharedStorage(keyResizeType, target.type);
                 sharer.setSharedStorage(keyActionType, 'resize');
             }
@@ -246,6 +283,7 @@ export const MiddlewareSelector = (opts) => {
             viewer.drawFrame();
         },
         pointMove: (e) => {
+            var _a, _b, _c;
             const data = sharer.getActiveStorage('data');
             const elems = getActiveElements();
             const scale = sharer.getActiveStorage('scale') || 1;
@@ -256,7 +294,7 @@ export const MiddlewareSelector = (opts) => {
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             if (actionType === 'drag') {
                 inBusyMode = 'drag';
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end) {
+                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) !== true) {
                     const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
                     elems[0].x += moveX / scale;
                     elems[0].y += moveY / scale;
@@ -270,7 +308,8 @@ export const MiddlewareSelector = (opts) => {
                     const moveX = (end.x - start.x) / scale;
                     const moveY = (end.y - start.y) / scale;
                     elems.forEach((elem) => {
-                        if (elem) {
+                        var _a;
+                        if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) !== true) {
                             elem.x += moveX;
                             elem.y += moveY;
                         }
@@ -302,8 +341,16 @@ export const MiddlewareSelector = (opts) => {
                     const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
                     elems[0].x = resizedElemSize.x;
                     elems[0].y = resizedElemSize.y;
-                    elems[0].w = resizedElemSize.w;
-                    elems[0].h = resizedElemSize.h;
+                    if (elems[0].type === 'group' && ((_c = elems[0].operations) === null || _c === void 0 ? void 0 : _c.deepResize) === true) {
+                        deepResizeGroupElement(elems[0], {
+                            w: resizedElemSize.w,
+                            h: resizedElemSize.h
+                        });
+                    }
+                    else {
+                        elems[0].w = resizedElemSize.w;
+                        elems[0].h = resizedElemSize.h;
+                    }
                     updateSelectedElementList([elems[0]]);
                     viewer.drawFrame();
                 }
@@ -380,7 +427,11 @@ export const MiddlewareSelector = (opts) => {
                     sharer.setActiveStorage('contextWidth', viewInfo.contextSize.contextWidth);
                 }
                 if (data && ['drag', 'drag-list', 'drag-list-end', 'resize'].includes(actionType)) {
-                    eventHub.trigger('change', { data });
+                    let type = 'drag-element';
+                    if (type === 'resize') {
+                        type = 'resize-element';
+                    }
+                    eventHub.trigger('change', { data, type });
                 }
                 viewer.drawFrame();
             };
@@ -392,9 +443,14 @@ export const MiddlewareSelector = (opts) => {
             viewer.drawFrame();
         },
         doubleClick(e) {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const target = getPointTarget(e.point, pointTargetBaseOptions());
-            if (target.elements.length === 1 && ((_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.type) === 'group') {
+            sharer.setSharedStorage(keySelectedElementController, null);
+            sharer.setSharedStorage(keySelectedElementList, []);
+            if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) === true) {
+                return;
+            }
+            if (target.elements.length === 1 && ((_c = target.elements[0]) === null || _c === void 0 ? void 0 : _c.type) === 'group') {
                 const pushResult = pushGroupQueue(target.elements[0]);
                 if (pushResult === true) {
                     sharer.setSharedStorage(keyActionType, null);
@@ -402,7 +458,7 @@ export const MiddlewareSelector = (opts) => {
                     return;
                 }
             }
-            else if (target.elements.length === 1 && ((_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.type) === 'text') {
+            else if (target.elements.length === 1 && ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text') {
                 eventHub.trigger(middlewareEventTextEdit, {
                     element: target.elements[0],
                     groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
@@ -412,6 +468,7 @@ export const MiddlewareSelector = (opts) => {
             sharer.setSharedStorage(keyActionType, null);
         },
         beforeDrawFrame({ snapshot }) {
+            var _a;
             const { activeStore, sharedStore } = snapshot;
             const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
             const sharer = opts.sharer;
@@ -434,20 +491,39 @@ export const MiddlewareSelector = (opts) => {
                     viewScaleInfo
                 })
                 : null;
+            const isLock = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.lock);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 drawGroupQueueVertexesWrappers(helperContext, groupQueueVertexesList, drawBaseOpts);
                 if (hoverElement && actionType !== 'drag') {
-                    drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    if (isLock) {
+                        drawLockVertexesWrapper(helperContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                                groupQueue,
+                                controllerSize: 10,
+                                viewScaleInfo
+                            }) }));
+                    }
+                    else {
+                        drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    }
                 }
-                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
                 }
             }
             else {
                 if (hoverElement && actionType !== 'drag') {
-                    drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    if (isLock) {
+                        drawLockVertexesWrapper(helperContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                                groupQueue,
+                                controllerSize: 10,
+                                viewScaleInfo
+                            }) }));
+                    }
+                    else {
+                        drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    }
                 }
-                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
                 }
                 else if (actionType === 'area' && areaStart && areaEnd) {

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

@@ -672,6 +672,7 @@ export function resizeElement(elem, opts) {
     return { x, y, w, h, angle: elem.angle };
 }
 export function getSelectedListArea(data, opts) {
+    var _a;
     const indexes = [];
     const uuids = [];
     const elements = [];
@@ -683,7 +684,11 @@ export function getSelectedListArea(data, opts) {
     const endX = Math.max(start.x, end.x);
     const startY = Math.min(start.y, end.y);
     const endY = Math.max(start.y, end.y);
-    data.elements.forEach((elem, idx) => {
+    for (let idx = 0; idx < data.elements.length; idx++) {
+        const elem = data.elements[idx];
+        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) === true) {
+            continue;
+        }
         const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
         const center = calcElementCenter(elemSize);
         if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
@@ -702,7 +707,7 @@ export function getSelectedListArea(data, opts) {
                 }
             }
         }
-    });
+    }
     return { indexes, uuids, elements };
 }
 export function calcSelectedElementsArea(elements, opts) {

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

@@ -2,9 +2,8 @@ import { limitAngle, getDefaultElementDetailConfig } from '@idraw/util';
 export const middlewareEventTextEdit = '@middleware/text-edit';
 const defaultElementDetail = getDefaultElementDetailConfig();
 export const MiddlewareTextEditor = (opts) => {
-    const key = 'SELECT';
-    const { eventHub, viewContent, viewer } = opts;
-    const canvas = viewContent.boardContext.canvas;
+    const { eventHub, boardContent, viewer } = opts;
+    const canvas = boardContent.boardContext.canvas;
     const textarea = document.createElement('textarea');
     const canvasWrapper = document.createElement('div');
     const container = opts.container || document.body;
@@ -86,10 +85,10 @@ export const MiddlewareTextEditor = (opts) => {
             elemH = element.h * scale;
         }
         textarea.style.position = 'absolute';
-        textarea.style.left = `${elemX}px`;
-        textarea.style.top = `${elemY}px`;
-        textarea.style.width = `${elemW}px`;
-        textarea.style.height = `${elemH}px`;
+        textarea.style.left = `${elemX - 1}px`;
+        textarea.style.top = `${elemY - 1}px`;
+        textarea.style.width = `${elemW + 2}px`;
+        textarea.style.height = `${elemH + 2}px`;
         textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
         textarea.style.boxSizing = 'border-box';
         textarea.style.border = '1px solid #1973ba';
@@ -102,6 +101,9 @@ export const MiddlewareTextEditor = (opts) => {
         textarea.style.lineHeight = `${detail.lineHeight * scale}px`;
         textarea.style.fontFamily = detail.fontFamily;
         textarea.style.fontWeight = `${detail.fontWeight}`;
+        textarea.style.padding = '0';
+        textarea.style.margin = '0';
+        textarea.style.outline = 'none';
         textarea.value = detail.text || '';
         parent.appendChild(textarea);
     };
@@ -129,15 +131,20 @@ export const MiddlewareTextEditor = (opts) => {
     textarea.addEventListener('blur', () => {
         hideTextArea();
     });
-    eventHub.on(middlewareEventTextEdit, (e) => {
+    const textEditCallback = (e) => {
         var _a;
         if ((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') {
             activeElem = e.element;
         }
         showTextArea(e);
-    });
+    };
     return {
-        mode: key,
-        isDefault: true
+        name: '@middleware/text-editor',
+        use() {
+            eventHub.on(middlewareEventTextEdit, textEditCallback);
+        },
+        disuse() {
+            eventHub.off(middlewareEventTextEdit, textEditCallback);
+        }
     };
 };