@idraw/core 0.4.0-beta.9 → 0.4.0

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

@@ -1,510 +0,0 @@
-import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, deepResizeGroupElement } from '@idraw/util';
-import { drawHoverVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
-import { getPointTarget, resizeElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-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, boardContent, calculator, eventHub } = opts;
-    const { helperContext } = boardContent;
-    let prevPoint = null;
-    let inBusyMode = null;
-    sharer.setSharedStorage(keyActionType, null);
-    const getActiveElements = () => {
-        return sharer.getSharedStorage(keySelectedElementList);
-    };
-    const pushGroupQueue = (elem) => {
-        let groupQueue = sharer.getSharedStorage(keyGroupQueue);
-        if (!Array.isArray(groupQueue)) {
-            groupQueue = [];
-        }
-        if (groupQueue.length > 0) {
-            if (isElementInGroup(elem, groupQueue[groupQueue.length - 1])) {
-                groupQueue.push(elem);
-            }
-            else {
-                groupQueue = [];
-            }
-        }
-        else if (groupQueue.length === 0) {
-            groupQueue.push(elem);
-        }
-        const vertexesList = calcElementQueueVertexesQueueInGroup(groupQueue);
-        sharer.setSharedStorage(keyGroupQueue, groupQueue);
-        sharer.setSharedStorage(keyGroupQueueVertexesList, vertexesList);
-        return groupQueue.length > 0;
-    };
-    const updateHoverElement = (elem) => {
-        sharer.setSharedStorage(keyHoverElement, elem);
-        let vertexes = null;
-        if (elem) {
-            vertexes = calcElementVertexesInGroup(elem, {
-                groupQueue: sharer.getSharedStorage(keyGroupQueue)
-            });
-        }
-        sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
-    };
-    const updateSelectedElementList = (list, opts) => {
-        sharer.setSharedStorage(keySelectedElementList, list);
-        if (list.length === 1) {
-            const controller = calcElementSizeController(list[0], {
-                groupQueue: sharer.getSharedStorage(keyGroupQueue),
-                controllerSize: 10,
-                viewScaleInfo: sharer.getActiveViewScaleInfo()
-            });
-            sharer.setSharedStorage(keySelectedElementController, controller);
-        }
-        else {
-            sharer.setSharedStorage(keySelectedElementController, null);
-        }
-        if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
-            eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
-        }
-    };
-    const pointTargetBaseOptions = () => {
-        return {
-            ctx: helperContext,
-            calculator,
-            data: sharer.getActiveStorage('data'),
-            selectedElements: getActiveElements(),
-            viewScaleInfo: sharer.getActiveViewScaleInfo(),
-            viewSizeInfo: sharer.getActiveViewSizeInfo(),
-            groupQueue: sharer.getSharedStorage(keyGroupQueue),
-            areaSize: null,
-            selectedElementController: sharer.getSharedStorage(keySelectedElementController)
-        };
-    };
-    const clear = () => {
-        sharer.setSharedStorage(keyActionType, null);
-        sharer.setSharedStorage(keyResizeType, null);
-        sharer.setSharedStorage(keyAreaStart, null);
-        sharer.setSharedStorage(keyAreaEnd, null);
-        sharer.setSharedStorage(keyGroupQueue, []);
-        sharer.setSharedStorage(keyGroupQueueVertexesList, []);
-        sharer.setSharedStorage(keyHoverElement, null);
-        sharer.setSharedStorage(keyHoverElementVertexes, null);
-        sharer.setSharedStorage(keySelectedElementList, []);
-        sharer.setSharedStorage(keySelectedElementListVertexes, null);
-        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 {
-        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, _c, _d, _e;
-            const resizeType = sharer.getSharedStorage(keyResizeType);
-            const actionType = sharer.getSharedStorage(keyActionType);
-            const groupQueue = sharer.getSharedStorage(keyGroupQueue);
-            const triggerCursor = (target) => {
-                const cursor = target.type;
-                if (inBusyMode === null) {
-                    eventHub.trigger('cursor', {
-                        type: cursor,
-                        groupQueue: target.groupQueue,
-                        element: target.elements[0]
-                    });
-                }
-            };
-            if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
-                const isInActiveGroup = isPointInViewActiveGroup(e.point, {
-                    ctx: helperContext,
-                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
-                    groupQueue: sharer.getSharedStorage(keyGroupQueue)
-                });
-                if (!isInActiveGroup) {
-                    updateHoverElement(null);
-                    viewer.drawFrame();
-                    return;
-                }
-                const target = getPointTarget(e.point, pointTargetBaseOptions());
-                triggerCursor(target);
-                if (resizeType || ['area', 'drag', 'drag-list'].includes(actionType)) {
-                    updateHoverElement(null);
-                    viewer.drawFrame();
-                    return;
-                }
-                if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1) {
-                    updateHoverElement(target.elements[0]);
-                    viewer.drawFrame();
-                    return;
-                }
-                updateHoverElement(null);
-                viewer.drawFrame();
-                return;
-            }
-            if (resizeType || ['area', 'drag', 'drag-list'].includes(actionType)) {
-                updateHoverElement(null);
-                return;
-            }
-            if (actionType === 'drag') {
-                updateHoverElement(null);
-                return;
-            }
-            const selectedElements = getActiveElements();
-            const viewScaleInfo = sharer.getActiveViewScaleInfo();
-            const viewSizeInfo = sharer.getActiveViewSizeInfo();
-            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: calcSelectedElementsArea(selectedElements, {
-                    viewScaleInfo,
-                    viewSizeInfo,
-                    calculator
-                }) }));
-            triggerCursor(target);
-            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) {
-                sharer.setSharedStorage(keyHoverElement, target.elements[0]);
-                updateHoverElement(target.elements[0]);
-                viewer.drawFrame();
-                return;
-            }
-            if (sharer.getSharedStorage(keyHoverElement)) {
-                updateHoverElement(null);
-                viewer.drawFrame();
-                return;
-            }
-        },
-        pointStart: (e) => {
-            var _a, _b, _c, _d;
-            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, {
-                    ctx: helperContext,
-                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
-                    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) {
-                        updateSelectedElementList([target.elements[0]], { triggerEvent: true });
-                        sharer.setSharedStorage(keyActionType, 'drag');
-                    }
-                    else if ((_b = target.type) === null || _b === void 0 ? void 0 : _b.startsWith('resize-')) {
-                        sharer.setSharedStorage(keyResizeType, target.type);
-                        sharer.setSharedStorage(keyActionType, 'resize');
-                    }
-                    else {
-                        updateSelectedElementList([], { triggerEvent: true });
-                    }
-                }
-                else {
-                    clear();
-                }
-                viewer.drawFrame();
-                return;
-            }
-            const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
-                viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                viewSizeInfo: sharer.getActiveViewSizeInfo(),
-                calculator
-            });
-            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
-            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) {
-                updateSelectedElementList([target.elements[0]], { triggerEvent: true });
-                sharer.setSharedStorage(keyActionType, 'drag');
-            }
-            else if ((_d = target.type) === null || _d === void 0 ? void 0 : _d.startsWith('resize-')) {
-                sharer.setSharedStorage(keyResizeType, target.type);
-                sharer.setSharedStorage(keyActionType, 'resize');
-            }
-            else {
-                clear();
-                sharer.setSharedStorage(keyActionType, 'area');
-                sharer.setSharedStorage(keyAreaStart, e.point);
-                updateSelectedElementList([], { triggerEvent: true });
-            }
-            viewer.drawFrame();
-        },
-        pointMove: (e) => {
-            var _a;
-            const data = sharer.getActiveStorage('data');
-            const elems = getActiveElements();
-            const scale = sharer.getActiveStorage('scale') || 1;
-            const start = prevPoint;
-            const end = e.point;
-            const resizeType = sharer.getSharedStorage(keyResizeType);
-            const actionType = sharer.getSharedStorage(keyActionType);
-            const groupQueue = sharer.getSharedStorage(keyGroupQueue);
-            if (actionType === 'drag') {
-                inBusyMode = 'drag';
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end) {
-                    const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
-                    elems[0].x += moveX / scale;
-                    elems[0].y += moveY / scale;
-                    updateSelectedElementList([elems[0]]);
-                }
-                viewer.drawFrame();
-            }
-            else if (actionType === 'drag-list') {
-                inBusyMode = 'drag-list';
-                if (data && start && end && (elems === null || elems === void 0 ? void 0 : elems.length) > 1) {
-                    const moveX = (end.x - start.x) / scale;
-                    const moveY = (end.y - start.y) / scale;
-                    elems.forEach((elem) => {
-                        if (elem) {
-                            elem.x += moveX;
-                            elem.y += moveY;
-                        }
-                    });
-                    sharer.setActiveStorage('data', data);
-                }
-                viewer.drawFrame();
-            }
-            else if (actionType === 'resize') {
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && (resizeType === null || resizeType === void 0 ? void 0 : resizeType.startsWith('resize-'))) {
-                    inBusyMode = 'resize';
-                    const pointGroupQueue = [];
-                    groupQueue.forEach((group) => {
-                        const { x, y, w, h, angle = 0 } = group;
-                        pointGroupQueue.push({
-                            x,
-                            y,
-                            w,
-                            h,
-                            angle: 0 - angle
-                        });
-                    });
-                    let resizeStart = start;
-                    let resizeEnd = end;
-                    if (groupQueue.length > 0) {
-                        resizeStart = rotatePointInGroup(start, pointGroupQueue);
-                        resizeEnd = rotatePointInGroup(end, pointGroupQueue);
-                    }
-                    const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-                    elems[0].x = resizedElemSize.x;
-                    elems[0].y = resizedElemSize.y;
-                    if (elems[0].type === 'group' && ((_a = elems[0].operations) === null || _a === void 0 ? void 0 : _a.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();
-                }
-            }
-            else if (actionType === 'area') {
-                inBusyMode = 'area';
-                sharer.setSharedStorage(keyAreaEnd, e.point);
-                viewer.drawFrame();
-            }
-            prevPoint = e.point;
-        },
-        pointEnd(e) {
-            inBusyMode = null;
-            const data = sharer.getActiveStorage('data');
-            const resizeType = sharer.getSharedStorage(keyResizeType);
-            const actionType = sharer.getSharedStorage(keyActionType);
-            const viewSizeInfo = sharer.getActiveViewSizeInfo();
-            let needDrawFrame = false;
-            prevPoint = null;
-            if (actionType === 'resize' && resizeType) {
-                sharer.setSharedStorage(keyResizeType, null);
-                needDrawFrame = true;
-            }
-            else if (actionType === 'area') {
-                sharer.setSharedStorage(keyActionType, null);
-                if (data) {
-                    const start = sharer.getSharedStorage(keyAreaStart);
-                    const end = sharer.getSharedStorage(keyAreaEnd);
-                    if (start && end) {
-                        const { elements } = getSelectedListArea(data, {
-                            start,
-                            end,
-                            calculator,
-                            viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                            viewSizeInfo: sharer.getActiveViewSizeInfo()
-                        });
-                        if (elements.length > 0) {
-                            sharer.setSharedStorage(keyActionType, 'drag-list');
-                            updateSelectedElementList(elements, { triggerEvent: true });
-                            needDrawFrame = true;
-                        }
-                    }
-                }
-            }
-            else if (actionType === 'drag-list') {
-                sharer.setSharedStorage(keyActionType, 'drag-list-end');
-                needDrawFrame = true;
-            }
-            else if (data) {
-                const result = calculator.getPointElement(e.point, {
-                    data,
-                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                    viewSizeInfo: sharer.getActiveViewSizeInfo()
-                });
-                if (result.element) {
-                    sharer.setSharedStorage(keyActionType, 'select');
-                    needDrawFrame = true;
-                }
-                else {
-                    sharer.setSharedStorage(keyActionType, null);
-                }
-            }
-            if (sharer.getSharedStorage(keyActionType) === null) {
-                clear();
-                needDrawFrame = true;
-            }
-            const finalDrawFrame = () => {
-                if (!needDrawFrame) {
-                    return;
-                }
-                if (data && Array.isArray(data === null || data === void 0 ? void 0 : data.elements) && ['drag', 'drag-list'].includes(actionType)) {
-                    const viewInfo = calcElementsViewInfo(data.elements, viewSizeInfo, { extend: true });
-                    sharer.setActiveStorage('contextHeight', viewInfo.contextSize.contextHeight);
-                    sharer.setActiveStorage('contextWidth', viewInfo.contextSize.contextWidth);
-                }
-                if (data && ['drag', 'drag-list', 'drag-list-end', 'resize'].includes(actionType)) {
-                    let type = 'drag-element';
-                    if (type === 'resize') {
-                        type = 'resize-element';
-                    }
-                    eventHub.trigger('change', { data, type });
-                }
-                viewer.drawFrame();
-            };
-            finalDrawFrame();
-        },
-        pointLeave() {
-            prevPoint = null;
-            clear();
-            viewer.drawFrame();
-        },
-        doubleClick(e) {
-            var _a, _b;
-            const target = getPointTarget(e.point, pointTargetBaseOptions());
-            if (target.elements.length === 1 && ((_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.type) === 'group') {
-                const pushResult = pushGroupQueue(target.elements[0]);
-                if (pushResult === true) {
-                    sharer.setSharedStorage(keyActionType, null);
-                    viewer.drawFrame();
-                    return;
-                }
-            }
-            else if (target.elements.length === 1 && ((_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.type) === 'text') {
-                eventHub.trigger(middlewareEventTextEdit, {
-                    element: target.elements[0],
-                    groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
-                    viewScaleInfo: sharer.getActiveViewScaleInfo()
-                });
-            }
-            sharer.setSharedStorage(keyActionType, null);
-        },
-        beforeDrawFrame({ snapshot }) {
-            const { activeStore, sharedStore } = snapshot;
-            const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
-            const sharer = opts.sharer;
-            const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
-            const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
-            const selectedElements = sharedStore[keySelectedElementList];
-            const elem = selectedElements[0];
-            const hoverElement = sharedStore[keyHoverElement];
-            const hoverElementVertexes = sharedStore[keyHoverElementVertexes];
-            const actionType = sharedStore[keyActionType];
-            const areaStart = sharedStore[keyAreaStart];
-            const areaEnd = sharedStore[keyAreaEnd];
-            const groupQueue = sharedStore[keyGroupQueue];
-            const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
-            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
-            const selectedElementController = elem
-                ? calcElementSizeController(elem, {
-                    groupQueue,
-                    controllerSize: 10,
-                    viewScaleInfo
-                })
-                : null;
-            if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
-                drawGroupQueueVertexesWrappers(helperContext, groupQueueVertexesList, drawBaseOpts);
-                if (hoverElement && actionType !== 'drag') {
-                    drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
-                }
-                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
-                }
-            }
-            else {
-                if (hoverElement && actionType !== 'drag') {
-                    drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
-                }
-                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
-                }
-                else if (actionType === 'area' && areaStart && areaEnd) {
-                    drawArea(helperContext, { start: areaStart, end: areaEnd });
-                }
-                else if (['drag-list', 'drag-list-end'].includes(actionType)) {
-                    const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
-                        viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                        viewSizeInfo: sharer.getActiveViewSizeInfo(),
-                        calculator
-                    });
-                    if (listAreaSize) {
-                        drawListArea(helperContext, { areaSize: listAreaSize });
-                    }
-                }
-            }
-        }
-    };
-};

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

@@ -1 +0,0 @@
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';

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

@@ -1,3 +0,0 @@
-import type { BoardMiddleware, CoreEvent } from '@idraw/types';
-export declare const middlewareEventTextEdit = "@middleware/text-edit";
-export declare const MiddlewareTextEditor: BoardMiddleware<Record<string, any>, CoreEvent>;

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

@@ -1,147 +0,0 @@
-import { limitAngle, getDefaultElementDetailConfig } from '@idraw/util';
-export const middlewareEventTextEdit = '@middleware/text-edit';
-const defaultElementDetail = getDefaultElementDetailConfig();
-export const MiddlewareTextEditor = (opts) => {
-    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;
-    const mask = document.createElement('div');
-    let activeElem = null;
-    canvasWrapper.appendChild(textarea);
-    canvasWrapper.style.position = 'absolute';
-    mask.appendChild(canvasWrapper);
-    mask.style.position = 'fixed';
-    mask.style.top = '0';
-    mask.style.bottom = '0';
-    mask.style.left = '0';
-    mask.style.right = '0';
-    mask.style.display = 'none';
-    container.appendChild(mask);
-    const showTextArea = (e) => {
-        resetCanvasWrapper();
-        resetTextArea(e);
-        mask.style.display = 'block';
-    };
-    const hideTextArea = () => {
-        mask.style.display = 'none';
-        activeElem = null;
-    };
-    const getCanvasRect = () => {
-        const clientRect = canvas.getBoundingClientRect();
-        const { left, top, width, height } = clientRect;
-        return { left, top, width, height };
-    };
-    const createBox = (opts) => {
-        const { size, parent } = opts;
-        const div = document.createElement('div');
-        const { x, y, w, h } = size;
-        const angle = limitAngle(size.angle || 0);
-        div.style.position = 'absolute';
-        div.style.left = `${x}px`;
-        div.style.top = `${y}px`;
-        div.style.width = `${w}px`;
-        div.style.height = `${h}px`;
-        div.style.transform = `rotate(${angle}deg)`;
-        parent.appendChild(div);
-        return div;
-    };
-    const resetTextArea = (e) => {
-        const { viewScaleInfo, element, groupQueue } = e;
-        const { scale, offsetTop, offsetLeft } = viewScaleInfo;
-        if (canvasWrapper.children) {
-            Array.from(canvasWrapper.children).forEach((child) => {
-                child.remove();
-            });
-        }
-        let parent = canvasWrapper;
-        for (let i = 0; i < groupQueue.length; i++) {
-            const group = groupQueue[i];
-            const { x, y, w, h } = group;
-            const angle = limitAngle(group.angle || 0);
-            const size = {
-                x: x * scale,
-                y: y * scale,
-                w: w * scale,
-                h: h * scale,
-                angle
-            };
-            if (i === 0) {
-                size.x += offsetLeft;
-                size.y += offsetTop;
-            }
-            parent = createBox({ size, parent });
-        }
-        const detail = Object.assign(Object.assign({}, defaultElementDetail), element.detail);
-        let elemX = element.x * scale + offsetLeft;
-        let elemY = element.y * scale + offsetTop;
-        let elemW = element.w * scale;
-        let elemH = element.h * scale;
-        if (groupQueue.length > 0) {
-            elemX = element.x * scale;
-            elemY = element.y * scale;
-            elemW = element.w * scale;
-            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.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
-        textarea.style.boxSizing = 'border-box';
-        textarea.style.border = '1px solid #1973ba';
-        textarea.style.resize = 'none';
-        textarea.style.overflow = 'hidden';
-        textarea.style.wordBreak = 'break-all';
-        textarea.style.background = '#FFFFFF';
-        textarea.style.color = '#333333';
-        textarea.style.fontSize = `${detail.fontSize * scale}px`;
-        textarea.style.lineHeight = `${detail.lineHeight * scale}px`;
-        textarea.style.fontFamily = detail.fontFamily;
-        textarea.style.fontWeight = `${detail.fontWeight}`;
-        textarea.value = detail.text || '';
-        parent.appendChild(textarea);
-    };
-    const resetCanvasWrapper = () => {
-        const { left, top, width, height } = getCanvasRect();
-        canvasWrapper.style.position = 'absolute';
-        canvasWrapper.style.overflow = 'hidden';
-        canvasWrapper.style.top = `${top}px`;
-        canvasWrapper.style.left = `${left}px`;
-        canvasWrapper.style.width = `${width}px`;
-        canvasWrapper.style.height = `${height}px`;
-    };
-    mask.addEventListener('click', () => {
-        hideTextArea();
-    });
-    textarea.addEventListener('click', (e) => {
-        e.stopPropagation();
-    });
-    textarea.addEventListener('input', (e) => {
-        if (activeElem) {
-            activeElem.detail.text = e.target.value || '';
-            viewer.drawFrame();
-        }
-    });
-    textarea.addEventListener('blur', () => {
-        hideTextArea();
-    });
-    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 {
-        name: '@middleware/text-editor',
-        use() {
-            eventHub.on(middlewareEventTextEdit, textEditCallback);
-        },
-        disuse() {
-            eventHub.off(middlewareEventTextEdit, textEditCallback);
-        }
-    };
-};