@idraw/core 0.4.0-alpha.3 → 0.4.0-alpha.5

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

@@ -2,12 +2,14 @@ import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVerte
 import { drawHoverVertexesWrapper, 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 { middlewareEventTextEdit } from '../text-editor';
+export const middlewareEventSelect = '@middleware/select';
 export const MiddlewareSelector = (opts) => {
     const { viewer, sharer, viewContent, calculator, eventHub } = opts;
     const { helperContext } = viewContent;
     let prevPoint = null;
     let inBusyMode = null;
-    eventHub.on('select', ({ uuids }) => {
+    eventHub.on(middlewareEventSelect, ({ uuids }) => {
         const actionType = sharer.getSharedStorage(keyActionType);
         const data = sharer.getActiveStorage('data');
         const elements = findElementsFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
@@ -76,7 +78,7 @@ export const MiddlewareSelector = (opts) => {
             sharer.setSharedStorage(keySelectedElementController, null);
         }
         if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
-            eventHub.trigger('select', { uuids: list.map((elem) => elem.uuid) });
+            eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
         }
     };
     const pointTargetBaseOptions = () => {
@@ -384,7 +386,7 @@ export const MiddlewareSelector = (opts) => {
             viewer.drawFrame();
         },
         doubleClick(e) {
-            var _a;
+            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]);
@@ -394,6 +396,13 @@ export const MiddlewareSelector = (opts) => {
                     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 }) {

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,132 @@
+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 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);
+        textarea.style.position = 'absolute';
+        textarea.style.left = `${element.x * scale}px`;
+        textarea.style.top = `${element.y * scale}px`;
+        textarea.style.width = `${element.w * scale}px`;
+        textarea.style.height = `${element.h * scale}px`;
+        textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
+        textarea.style.border = 'none';
+        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();
+    });
+    eventHub.on(middlewareEventTextEdit, (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
+    };
+};