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

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

@@ -1,4 +1,4 @@
-import { calcElementCenter, rotateElementVertexes, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcViewPointSize, rotatePointInGroup, rotatePoint, parseAngleToRadian, limitAngle } from '@idraw/util';
+import { calcElementCenter, rotateElementVertexes, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcViewPointSize, calcViewElementSize, rotatePoint, parseAngleToRadian, parseRadianToAngle, limitAngle, calcRadian } from '@idraw/util';
 function parseRadian(angle) {
     return (angle * Math.PI) / 180;
 }
@@ -9,11 +9,11 @@ function changeMoveDistDirect(moveDist, moveDirect) {
     return moveDirect > 0 ? Math.abs(moveDist) : 0 - Math.abs(moveDist);
 }
 export function isPointInViewActiveVertexes(p, opts) {
-    const { ctx, viewScaleInfo, viewSizeInfo, vertexes } = opts;
-    const v0 = calcViewPointSize(vertexes[0], { viewScaleInfo, viewSizeInfo });
-    const v1 = calcViewPointSize(vertexes[1], { viewScaleInfo, viewSizeInfo });
-    const v2 = calcViewPointSize(vertexes[2], { viewScaleInfo, viewSizeInfo });
-    const v3 = calcViewPointSize(vertexes[3], { viewScaleInfo, viewSizeInfo });
+    const { ctx, viewScaleInfo, vertexes } = opts;
+    const v0 = calcViewPointSize(vertexes[0], { viewScaleInfo });
+    const v1 = calcViewPointSize(vertexes[1], { viewScaleInfo });
+    const v2 = calcViewPointSize(vertexes[2], { viewScaleInfo });
+    const v3 = calcViewPointSize(vertexes[3], { viewScaleInfo });
     ctx.beginPath();
     ctx.moveTo(v0.x, v0.y);
     ctx.lineTo(v1.x, v1.y);
@@ -39,7 +39,7 @@ export function isPointInViewActiveGroup(p, opts) {
     return isPointInViewActiveVertexes(p, { ctx, vertexes, viewScaleInfo, viewSizeInfo });
 }
 export function getPointTarget(p, opts) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const target = {
         type: null,
         elements: [],
@@ -49,8 +49,11 @@ export function getPointTarget(p, opts) {
     };
     const { ctx, data, calculator, selectedElements, viewScaleInfo, viewSizeInfo, areaSize, groupQueue, selectedElementController } = opts;
     if (selectedElementController) {
-        const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight } = selectedElementController;
+        const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = selectedElementController;
         const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight];
+        if ((selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.length) === 1 && ((_b = (_a = selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.rotatable) !== false) {
+            ctrls.push(rotate);
+        }
         for (let i = 0; i < ctrls.length; i++) {
             const ctrl = ctrls[i];
             if (isPointInViewActiveVertexes(p, { ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo })) {
@@ -65,7 +68,7 @@ export function getPointTarget(p, opts) {
     }
     if (groupQueue && Array.isArray(groupQueue) && groupQueue.length > 0) {
         const lastGroup = groupQueue[groupQueue.length - 1];
-        if (((_a = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _a === void 0 ? void 0 : _a.children) && Array.isArray((_b = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _b === void 0 ? void 0 : _b.children)) {
+        if (((_c = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _c === void 0 ? void 0 : _c.children) && Array.isArray((_d = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _d === void 0 ? void 0 : _d.children)) {
             for (let i = lastGroup.detail.children.length - 1; i >= 0; i--) {
                 const child = lastGroup.detail.children[i];
                 const vertexes = calcElementVertexesInGroup(child, { groupQueue });
@@ -94,7 +97,7 @@ export function getPointTarget(p, opts) {
     }
     if (data) {
         const { index, element } = calculator.getPointElement(p, { data, viewScaleInfo, viewSizeInfo });
-        if (index >= 0 && element && ((_c = element === null || element === void 0 ? void 0 : element.operations) === null || _c === void 0 ? void 0 : _c.invisible) !== true) {
+        if (index >= 0 && element && ((_e = element === null || element === void 0 ? void 0 : element.operations) === null || _e === void 0 ? void 0 : _e.invisible) !== true) {
             target.elements = [element];
             target.type = 'over-element';
             return target;
@@ -410,7 +413,8 @@ export function resizeElement(elem, opts) {
                 let centerY = elemCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-                    moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
+                    moveHorizontalDist =
+                        0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
                     const centerMoveVerticalDist = moveVerticalDist / 2;
                     centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
                     centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
@@ -545,7 +549,8 @@ export function resizeElement(elem, opts) {
                 let centerY = elemCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-                    moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
+                    moveHorizontalDist =
+                        0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
                     const radian = parseRadian(angle);
                     const centerMoveVerticalDist = moveVerticalDist / 2;
                     centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
@@ -671,11 +676,29 @@ export function resizeElement(elem, opts) {
     }
     return { x, y, w, h, angle: elem.angle };
 }
+export function rotateElement(elem, opts) {
+    const { x, y, w, h, angle = 0 } = elem;
+    const { center, start, end, viewScaleInfo } = opts;
+    const elemCenter = calcViewPointSize(center, {
+        viewScaleInfo
+    });
+    const startAngle = limitAngle(angle);
+    const changedRadian = calcRadian(elemCenter, start, end);
+    const endAngle = limitAngle(startAngle + parseRadianToAngle(changedRadian));
+    return {
+        x,
+        y,
+        w,
+        h,
+        angle: endAngle
+    };
+}
 export function getSelectedListArea(data, opts) {
+    var _a;
     const indexes = [];
     const uuids = [];
     const elements = [];
-    const { calculator, viewScaleInfo, viewSizeInfo, start, end } = opts;
+    const { viewScaleInfo, start, end } = opts;
     if (!(Array.isArray(data.elements) && start && end)) {
         return { indexes, uuids, elements };
     }
@@ -683,8 +706,12 @@ 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) => {
-        const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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.locked) === true) {
+            continue;
+        }
+        const elemSize = calcViewElementSize(elem, { viewScaleInfo });
         const center = calcElementCenter(elemSize);
         if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
             indexes.push(idx);
@@ -702,7 +729,7 @@ export function getSelectedListArea(data, opts) {
                 }
             }
         }
-    });
+    }
     return { indexes, uuids, elements };
 }
 export function calcSelectedElementsArea(elements, opts) {
@@ -711,14 +738,14 @@ export function calcSelectedElementsArea(elements, opts) {
         return null;
     }
     const area = { x: 0, y: 0, w: 0, h: 0 };
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { viewScaleInfo } = opts;
     let prevElemSize = null;
     for (let i = 0; i < elements.length; i++) {
         const elem = elements[i];
         if ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) {
             continue;
         }
-        const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+        const elemSize = calcViewElementSize(elem, { viewScaleInfo });
         if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
             const ves = rotateElementVertexes(elemSize);
             if (ves.length === 4) {
@@ -762,28 +789,3 @@ export function isElementInGroup(elem, group) {
     }
     return false;
 }
-export function calcMoveInGroup(start, end, groupQueue) {
-    let moveX = end.x - start.x;
-    let moveY = end.y - start.y;
-    const pointGroupQueue = [];
-    groupQueue.forEach((group) => {
-        const { x, y, w, h, angle = 0 } = group;
-        pointGroupQueue.push({
-            x,
-            y,
-            w,
-            h,
-            angle: 0 - angle
-        });
-    });
-    if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
-        const startInGroup = rotatePointInGroup(start, pointGroupQueue);
-        const endInGroup = rotatePointInGroup(end, pointGroupQueue);
-        moveX = endInGroup.x - startInGroup.x;
-        moveY = endInGroup.y - startInGroup.y;
-    }
-    return {
-        moveX,
-        moveY
-    };
-}

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

@@ -1,3 +1,20 @@
-import type { BoardMiddleware, CoreEvent } from '@idraw/types';
-export declare const middlewareEventTextEdit = "@middleware/text-edit";
-export declare const MiddlewareTextEditor: BoardMiddleware<Record<string, any>, CoreEvent>;
+import type { BoardMiddleware, 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: BoardMiddleware<ExtendEventMap, CoreEventMap & ExtendEventMap>;
+export {};

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

@@ -1,14 +1,18 @@
-import { limitAngle, getDefaultElementDetailConfig } from '@idraw/util';
-export const middlewareEventTextEdit = '@middleware/text-edit';
+import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy } from '@idraw/util';
+import { coreEventKeys } from '../../config';
 const defaultElementDetail = getDefaultElementDetailConfig();
 export const MiddlewareTextEditor = (opts) => {
-    const { eventHub, boardContent, viewer } = opts;
+    const { eventHub, boardContent, viewer, sharer } = opts;
     const canvas = boardContent.boardContext.canvas;
-    const textarea = document.createElement('textarea');
+    const textarea = document.createElement('div');
+    textarea.setAttribute('contenteditable', 'true');
     const canvasWrapper = document.createElement('div');
     const container = opts.container || document.body;
     const mask = document.createElement('div');
     let activeElem = null;
+    let activePosition = [];
+    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);
@@ -23,10 +27,27 @@ export const MiddlewareTextEditor = (opts) => {
         resetCanvasWrapper();
         resetTextArea(e);
         mask.style.display = 'block';
+        if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
+            sharer.setActiveOverrideElemenentMap({
+                [activeElem.uuid]: {
+                    operations: { invisible: true }
+                }
+            });
+            viewer.drawFrame();
+        }
     };
     const hideTextArea = () => {
+        if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
+            const map = sharer.getActiveOverrideElemenentMap();
+            if (map) {
+                delete map[activeElem.uuid];
+            }
+            sharer.setActiveOverrideElemenentMap(map);
+            viewer.drawFrame();
+        }
         mask.style.display = 'none';
         activeElem = null;
+        activePosition = [];
     };
     const getCanvasRect = () => {
         const clientRect = canvas.getBoundingClientRect();
@@ -84,24 +105,45 @@ export const MiddlewareTextEditor = (opts) => {
             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.justifyContent = justifyContent;
+        textarea.style.alignItems = alignItems;
         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';
         textarea.style.resize = 'none';
         textarea.style.overflow = 'hidden';
         textarea.style.wordBreak = 'break-all';
-        textarea.style.background = '#FFFFFF';
-        textarea.style.color = '#333333';
+        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 * scale}px`;
-        textarea.style.fontFamily = detail.fontFamily;
+        textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`;
+        textarea.style.fontFamily = enhanceFontFamliy(detail.fontFamily);
         textarea.style.fontWeight = `${detail.fontWeight}`;
-        textarea.value = detail.text || '';
+        textarea.style.padding = '0';
+        textarea.style.margin = '0';
+        textarea.style.outline = 'none';
+        textarea.innerText = detail.text || '';
         parent.appendChild(textarea);
     };
     const resetCanvasWrapper = () => {
@@ -119,28 +161,63 @@ export const MiddlewareTextEditor = (opts) => {
     textarea.addEventListener('click', (e) => {
         e.stopPropagation();
     });
-    textarea.addEventListener('input', (e) => {
-        if (activeElem) {
-            activeElem.detail.text = e.target.value || '';
+    textarea.addEventListener('input', () => {
+        if (activeElem && activePosition) {
+            activeElem.detail.text = textarea.innerText || '';
+            eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
+                element: {
+                    uuid: activeElem.uuid,
+                    detail: {
+                        text: activeElem.detail.text
+                    }
+                },
+                position: [...(activePosition || [])]
+            });
             viewer.drawFrame();
         }
     });
     textarea.addEventListener('blur', () => {
+        if (activeElem && activePosition) {
+            eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
+                element: {
+                    uuid: activeElem.uuid,
+                    detail: {
+                        text: activeElem.detail.text
+                    }
+                },
+                position: [...activePosition]
+            });
+        }
         hideTextArea();
     });
+    textarea.addEventListener('keydown', (e) => {
+        e.stopPropagation();
+    });
+    textarea.addEventListener('keypress', (e) => {
+        e.stopPropagation();
+    });
+    textarea.addEventListener('keyup', (e) => {
+        e.stopPropagation();
+    });
+    textarea.addEventListener('wheel', (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
     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') {
+        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;
         }
         showTextArea(e);
     };
     return {
+        name: '@middleware/text-editor',
         use() {
-            eventHub.on(middlewareEventTextEdit, textEditCallback);
+            eventHub.on(coreEventKeys.TEXT_EDIT, textEditCallback);
         },
         disuse() {
-            eventHub.off(middlewareEventTextEdit, textEditCallback);
+            eventHub.off(coreEventKeys.TEXT_EDIT, textEditCallback);
         }
     };
 };