@idraw/core 0.4.3 → 1.0.0-alpha.1

package/dist/esm/middlewares/text-editor/dom.d.ts

@@ -0,0 +1,5 @@
+import type { MiddlewareTextEditorStyles } from '@idraw/types';
+import type { InnerOptions } from './types';
+export declare function initStyles(rootClassName: string, styles: MiddlewareTextEditorStyles): void;
+export declare function destroyStyles(rootClassName: string): void;
+export declare const resetTextArea: (textarea: HTMLDivElement | null, canvasWrapper: HTMLDivElement | null, opts: InnerOptions) => void;

package/dist/esm/middlewares/text-editor/dom.js

@@ -0,0 +1,135 @@
+import { injectStyles, removeStyles, setHTMLCSSProps, limitAngle, getDefaultMaterialAttributes, enhanceFontFamliy, } from '@idraw/util';
+import { classNameMap } from './static';
+const defaultMaterialAttributes = getDefaultMaterialAttributes();
+export function initStyles(rootClassName, styles) {
+    injectStyles({
+        type: 'element',
+        rootClassName,
+        styles: {
+            position: 'fixed',
+            top: '0',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            display: 'block',
+            zIndex: styles.zIndex,
+            [`&.${classNameMap.hide}`]: {
+                display: 'none',
+            },
+            [`.${classNameMap.textarea}`]: {
+                display: 'inline-flex',
+                flexDirection: 'column',
+                position: 'absolute',
+                boxSizing: 'border-box',
+                overflow: 'hidden',
+                wordBreak: 'break-all',
+                padding: '0',
+                margin: '0',
+                outline: 'none',
+                border: `1px solid ${styles.boxBorderColor}`,
+                background: `transparent`,
+            },
+            [`.${classNameMap.canvasWrapper}`]: {
+                position: 'absolute',
+            },
+        },
+    });
+}
+export function destroyStyles(rootClassName) {
+    removeStyles({ rootClassName, type: 'element' });
+}
+const createBox = (opts) => {
+    const { size, parent } = opts;
+    const div = document.createElement('div');
+    const { x, y, width, height } = size;
+    const angle = limitAngle(size.angle || 0);
+    setHTMLCSSProps(div, {
+        position: 'absolute',
+        left: `${x}px`,
+        top: `${y}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+        transform: `rotate(${angle}deg)`,
+    });
+    parent.appendChild(div);
+    return div;
+};
+export const resetTextArea = (textarea, canvasWrapper, opts) => {
+    if (!textarea || !canvasWrapper) {
+        return;
+    }
+    const { viewScaleInfo, material, groupQueue } = opts;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    if (canvasWrapper === null || canvasWrapper === void 0 ? void 0 : 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, width, height } = group;
+        const angle = limitAngle(group.angle || 0);
+        const size = {
+            x: x * scale,
+            y: y * scale,
+            width: width * scale,
+            height: height * scale,
+            angle,
+        };
+        if (i === 0) {
+            size.x += offsetLeft;
+            size.y += offsetTop;
+        }
+        parent = createBox({ size, parent });
+    }
+    const attributes = Object.assign(Object.assign({}, defaultMaterialAttributes), material);
+    let mtrlX = material.x * scale + offsetLeft;
+    let mtrlY = material.y * scale + offsetTop;
+    let mtrlW = material.width * scale;
+    let mtrlH = material.height * scale;
+    if (groupQueue.length > 0) {
+        mtrlX = material.x * scale;
+        mtrlY = material.y * scale;
+        mtrlW = material.width * scale;
+        mtrlH = material.height * scale;
+    }
+    let justifyContent = 'center';
+    let alignItems = 'center';
+    if (attributes.textAlign === 'left') {
+        justifyContent = 'start';
+    }
+    else if (attributes.textAlign === 'right') {
+        justifyContent = 'end';
+    }
+    if (attributes.verticalAlign === 'top') {
+        alignItems = 'start';
+    }
+    else if (attributes.verticalAlign === 'bottom') {
+        alignItems = 'end';
+    }
+    setHTMLCSSProps(textarea, {
+        justifyContent: justifyContent,
+        alignItems: alignItems,
+        transform: `rotate(${limitAngle(material.angle || 0)}deg)`,
+        left: `${mtrlX - 1}px`,
+        top: `${mtrlY - 1}px`,
+        width: `${mtrlW + 2}px`,
+        height: `${mtrlH + 2}px`,
+        cornerRadius: `${(typeof attributes.cornerRadius === 'number' ? attributes.cornerRadius : 0) * scale}px`,
+        color: `${attributes.fill || '#000000'}`,
+        textStroke: `${typeof attributes.strokeWidth === 'number' && attributes.strokeWidth > 0
+            ? `${attributes.strokeWidth}px ${attributes.stroke}`
+            : ''}`,
+        '-webkit-text-stroke': `${typeof attributes.strokeWidth === 'number' && attributes.strokeWidth > 0
+            ? `${attributes.strokeWidth}px ${attributes.stroke}`
+            : ''}`,
+        fontSize: `${attributes.fontSize * scale}px`,
+        lineHeight: `${(attributes.lineHeight || attributes.fontSize) * scale}px`,
+        fontFamily: enhanceFontFamliy(attributes.fontFamily),
+        fontWeight: `${attributes.fontWeight}`,
+        opacity: attributes.opacity || 1,
+    });
+    textarea.innerText = attributes.text || '';
+    parent.appendChild(textarea);
+};

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

@@ -1,20 +1,5 @@
-import type { Middleware, CoreEventMap, Element, ViewScaleInfo, ElementPosition } from '@idraw/types';
-import { coreEventKeys } from '../../config';
-type TextEditEvent = {
-    element: Element<'text'>;
-    position: ElementPosition;
-    groupQueue: Element<'group'>[];
-    viewScaleInfo: ViewScaleInfo;
-};
-type TextChangeEvent = {
-    element: {
-        uuid: string;
-        detail: {
-            text: string;
-        };
-    };
-    position: ElementPosition;
-};
-type ExtendEventMap = Record<typeof coreEventKeys.TEXT_EDIT, TextEditEvent> & Record<typeof coreEventKeys.TEXT_CHANGE, TextChangeEvent>;
-export declare const MiddlewareTextEditor: Middleware<ExtendEventMap, CoreEventMap & ExtendEventMap>;
-export {};
+import type { Middleware, CoreEventMap, MiddlewareTextEditorConfig } from '@idraw/types';
+import { getMiddlewareTextEditorStyles } from './static';
+import type { ExtendEventMap } from './types';
+export { getMiddlewareTextEditorStyles };
+export declare const MiddlewareTextEditor: Middleware<ExtendEventMap, CoreEventMap & ExtendEventMap, MiddlewareTextEditorConfig>;

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

@@ -1,287 +1,280 @@
-import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy, updateElementInList } from '@idraw/util';
-import { coreEventKeys } from '../../config';
-const defaultElementDetail = getDefaultElementDetailConfig();
-export const MiddlewareTextEditor = (opts) => {
-    const { eventHub, boardContent, viewer, sharer, calculator } = opts;
+import { updateMaterialInList, getGroupQueueByMaterialPosition, getMaterialAndGroupQueueFromList, addClassName, removeClassName, createHTMLElement, setHTMLCSSProps, } from '@idraw/util';
+import { coreEventKeys } from '../../static';
+import { initStyles, destroyStyles, resetTextArea } from './dom';
+import { classNameMap, getRootClassName, defaultStyles, getMiddlewareTextEditorStyles } from './static';
+import { triggerChangeEvent } from '../common';
+export { getMiddlewareTextEditorStyles };
+export const MiddlewareTextEditor = (options, config) => {
+    const { eventHub, boardContent, viewer, sharer, calculator } = options;
     const canvas = boardContent.boardContext.canvas;
-    const container = opts.container || document.body;
-    let textarea = document.createElement('div');
-    textarea.setAttribute('contenteditable', 'true');
-    let canvasWrapper = document.createElement('div');
-    let mask = document.createElement('div');
-    let activeElem = null;
+    const container = options.container || document.body;
+    const innerConfig = Object.assign(Object.assign({}, defaultStyles), config);
+    const styles = getMiddlewareTextEditorStyles(innerConfig);
+    let activeMtrl = null;
     let activePosition = [];
     let originText = '';
+    let isShow = false;
     const id = `idraw-middleware-text-editor-${Math.random().toString(26).substring(2)}`;
-    mask.setAttribute('id', id);
-    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 rootClassName = getRootClassName();
+    let textarea = null;
+    let canvasWrapper = null;
+    let root = null;
+    const initDOM = () => {
+        if (isShow === true) {
+            return;
+        }
+        textarea = createHTMLElement('div', {
+            className: classNameMap.textarea,
+            contenteditable: 'true',
+        });
+        canvasWrapper = createHTMLElement('div', {
+            className: classNameMap.canvasWrapper,
+        }, [textarea]);
+        root = createHTMLElement('div', {
+            id,
+            className: rootClassName,
+        }, [canvasWrapper]);
+        container.appendChild(root);
+    };
+    const destroyDOM = () => {
+        root === null || root === void 0 ? void 0 : root.remove();
+    };
     const showTextArea = (e) => {
+        if (!root || !textarea) {
+            return;
+        }
         resetCanvasWrapper();
-        resetTextArea(e);
-        mask.style.display = 'block';
+        resetTextArea(textarea, canvasWrapper, e);
+        removeClassName(root, [classNameMap.hide]);
         originText = '';
-        if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
-            sharer.setActiveOverrideElemenentMap({
-                [activeElem.uuid]: {
-                    operations: { invisible: true }
-                }
+        isShow = true;
+        textarea.focus();
+        if (activeMtrl === null || activeMtrl === void 0 ? void 0 : activeMtrl.id) {
+            sharer.setActiveOverrideMaterialMap({
+                [activeMtrl.id]: {
+                    operations: { invisible: true },
+                },
             });
-            originText = activeElem.detail.text || '';
+            originText = activeMtrl.text || '';
             viewer.drawFrame();
         }
     };
     const hideTextArea = () => {
-        if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
-            const map = sharer.getActiveOverrideElemenentMap();
+        if (activeMtrl === null || activeMtrl === void 0 ? void 0 : activeMtrl.id) {
+            const map = sharer.getActiveOverrideMaterialMap();
             if (map) {
-                delete map[activeElem.uuid];
+                delete map[activeMtrl.id];
             }
-            sharer.setActiveOverrideElemenentMap(map);
+            sharer.setActiveOverrideMaterialMap(map);
             viewer.drawFrame();
         }
-        mask.style.display = 'none';
-        activeElem = null;
+        if (root) {
+            addClassName(root, [classNameMap.hide]);
+        }
+        activeMtrl = null;
         activePosition = [];
+        isShow = false;
+        destroyDOM();
     };
     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;
-        }
-        let justifyContent = 'center';
-        let alignItems = 'center';
-        if (detail.textAlign === 'left') {
-            justifyContent = 'start';
-        }
-        else if (detail.textAlign === 'right') {
-            justifyContent = 'end';
-        }
-        if (detail.verticalAlign === 'top') {
-            alignItems = 'start';
-        }
-        else if (detail.verticalAlign === 'bottom') {
-            alignItems = 'end';
-        }
-        textarea.style.display = 'inline-flex';
-        textarea.style.flexDirection = 'column';
-        textarea.style.justifyContent = justifyContent;
-        textarea.style.alignItems = alignItems;
-        textarea.style.position = 'absolute';
-        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';
-        textarea.style.resize = 'none';
-        textarea.style.overflow = 'hidden';
-        textarea.style.wordBreak = 'break-all';
-        textarea.style.borderRadius = `${(typeof detail.borderRadius === 'number' ? detail.borderRadius : 0) * scale}px`;
-        textarea.style.background = `${detail.background || 'transparent'}`;
-        textarea.style.color = `${detail.color || '#333333'}`;
-        textarea.style.fontSize = `${detail.fontSize * scale}px`;
-        textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`;
-        textarea.style.fontFamily = enhanceFontFamliy(detail.fontFamily);
-        textarea.style.fontWeight = `${detail.fontWeight}`;
-        textarea.style.padding = '0';
-        textarea.style.margin = '0';
-        textarea.style.outline = 'none';
-        textarea.innerText = detail.text || '';
-        parent.appendChild(textarea);
-    };
     const resetCanvasWrapper = () => {
+        if (!canvasWrapper) {
+            return;
+        }
         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`;
+        setHTMLCSSProps(canvasWrapper, {
+            position: 'absolute',
+            overflow: 'hidden',
+            top: `${top}px`,
+            left: `${left}px`,
+            width: `${width}px`,
+            height: `${height}px`,
+        });
     };
     const maskClickEvent = () => {
         hideTextArea();
     };
-    const textareaClickEvent = (e) => {
+    const textareaDoubleClickEvent = (e) => {
+        var _a;
         e.stopPropagation();
+        e.preventDefault();
+        (_a = window === null || window === void 0 ? void 0 : window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+    };
+    const textareaSelectStartEvent = (e) => {
+        if (e.attributes === 2) {
+            e.preventDefault();
+        }
     };
     const textareaInputEvent = () => {
-        if (activeElem && activePosition) {
-            activeElem.detail.text = textarea.innerText || '';
+        if (!textarea) {
+            return;
+        }
+        if (activeMtrl && activePosition) {
+            activeMtrl.text = textarea.innerText || '';
             eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
-                element: {
-                    uuid: activeElem.uuid,
-                    detail: {
-                        text: activeElem.detail.text
-                    }
+                material: {
+                    id: activeMtrl.id,
+                    attributes: {
+                        text: activeMtrl.text,
+                    },
                 },
-                position: [...(activePosition || [])]
+                position: [...(activePosition || [])],
+            });
+            const virtualItem = calculator.getVirtualItem(activeMtrl.id);
+            const data = sharer.getActiveStorage('data') || { materials: [] };
+            calculator.modifyVirtualAttributes(activeMtrl, {
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                groupQueue: getGroupQueueByMaterialPosition(data.materials, (virtualItem === null || virtualItem === void 0 ? void 0 : virtualItem.position) || []) || [],
             });
-            calculator.modifyText(activeElem);
             viewer.drawFrame();
         }
     };
     const textareaBlurEvent = () => {
-        if (activeElem && activePosition) {
-            activeElem.detail.text = textarea.innerText || '';
+        if (activeMtrl && activePosition) {
+            activeMtrl.text = (textarea === null || textarea === void 0 ? void 0 : textarea.innerText) || '';
             eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
-                element: {
-                    uuid: activeElem.uuid,
-                    detail: {
-                        text: activeElem.detail.text
-                    }
+                material: {
+                    id: activeMtrl.id,
+                    attributes: {
+                        text: activeMtrl.text,
+                    },
                 },
-                position: [...activePosition]
+                position: [...activePosition],
             });
-            const data = sharer.getActiveStorage('data') || { elements: [] };
+            const data = sharer.getActiveStorage('data') || { materials: [] };
             const updateContent = {
-                detail: {
-                    text: activeElem.detail.text
-                }
+                text: activeMtrl.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) })
+            updateMaterialInList(activeMtrl.id, updateContent, data.materials);
+            triggerChangeEvent(eventHub, {
+                selectedMaterials: [
+                    Object.assign(Object.assign(Object.assign({}, activeMtrl), activeMtrl), updateContent),
                 ],
                 data,
-                type: 'modifyElement',
+                type: 'modifyMaterial',
                 modifyRecord: {
-                    type: 'modifyElement',
+                    type: 'modifyMaterial',
                     time: Date.now(),
                     content: {
-                        method: 'modifyElement',
-                        uuid: activeElem.uuid,
+                        method: 'modifyMaterial',
+                        id: activeMtrl.id,
                         before: {
-                            'detail.text': originText
+                            'attributes.text': originText,
                         },
                         after: {
-                            'detail.text': activeElem.detail.text
-                        }
-                    }
-                }
+                            'attributes.text': activeMtrl.text,
+                        },
+                    },
+                },
+            });
+            const virtualItem = calculator.getVirtualItem(activeMtrl.id);
+            calculator.modifyVirtualAttributes(activeMtrl, {
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                groupQueue: getGroupQueueByMaterialPosition(data.materials, (virtualItem === null || virtualItem === void 0 ? void 0 : virtualItem.position) || []) || [],
             });
-            calculator.modifyText(activeElem);
             viewer.drawFrame();
         }
         hideTextArea();
     };
-    const textareaKeyDownEvent = (e) => {
-        e.stopPropagation();
-    };
-    const textareaKeyPressEvent = (e) => {
-        e.stopPropagation();
-    };
-    const textareaKeyUpEvent = (e) => {
+    const preventDefaultEvent = (e) => {
         e.stopPropagation();
     };
     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 onEvents = () => {
+        root === null || root === void 0 ? void 0 : root.addEventListener('click', maskClickEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('mousedown', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('mouseover', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('mouseenter', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('mouseleave', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('dblclick', textareaDoubleClickEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('selectstart', textareaSelectStartEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('click', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('input', textareaInputEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('blur', textareaBlurEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('keydown', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('keypress', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('keyup', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.addEventListener('wheel', textareaWheelEvent);
+    };
+    const offEvents = () => {
+        root === null || root === void 0 ? void 0 : root.removeEventListener('click', maskClickEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('mousedown', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('mouseover', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('mouseenter', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('mouseleave', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('dblclick', textareaDoubleClickEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('selectstart', textareaSelectStartEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('click', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('input', textareaInputEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('blur', textareaBlurEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('keydown', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('keypress', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('keyup', preventDefaultEvent);
+        textarea === null || textarea === void 0 ? void 0 : textarea.removeEventListener('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') {
-            activeElem = e.element;
-            activePosition = e.position;
+        const { id } = e;
+        if (!(typeof id === 'string' && id)) {
+            return;
+        }
+        initDOM();
+        onEvents();
+        const data = sharer.getActiveStorage('data');
+        const { material, groupQueue, position } = getMaterialAndGroupQueueFromList(id, data.materials);
+        if ((material === null || material === void 0 ? void 0 : material.type) === 'text') {
+            activeMtrl = material;
+            activePosition = position;
+            showTextArea({
+                material: activeMtrl,
+                groupQueue,
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                styles,
+            });
+        }
+    };
+    const preventAction = () => {
+        if (isShow === true) {
+            return false;
         }
-        showTextArea(e);
     };
     return {
         name: '@middleware/text-editor',
         use() {
+            initStyles(rootClassName, styles);
             eventHub.on(coreEventKeys.TEXT_EDIT, textEditCallback);
         },
         disuse() {
+            destroyStyles(rootClassName);
             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;
+            offEvents();
+            destroyDOM();
             textarea = null;
             canvasWrapper = null;
-            mask = null;
-            activeElem = null;
+            root = null;
+            activeMtrl = null;
             activePosition = null;
             originText = null;
-        }
+        },
+        hover: preventAction,
+        pointStart: preventAction,
+        pointMove: preventAction,
+        pointEnd: preventAction,
+        pointLeave: preventAction,
+        doubleClick: preventAction,
+        contextMenu: preventAction,
+        wheel: preventAction,
+        wheelScale: preventAction,
+        scrollX: preventAction,
+        scrollY: preventAction,
+        resize: preventAction,
     };
 };