@idraw/core 0.4.0-beta.3 → 0.4.0-beta.30

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

@@ -0,0 +1,267 @@
+import { is } from '@idraw/util';
+const unitSize = 2;
+function getViewBoxInfo(rectInfo) {
+    const boxInfo = {
+        minX: rectInfo.topLeft.x,
+        minY: rectInfo.topLeft.y,
+        maxX: rectInfo.bottomRight.x,
+        maxY: rectInfo.bottomRight.y,
+        midX: rectInfo.center.x,
+        midY: rectInfo.center.y
+    };
+    return boxInfo;
+}
+const getClosestNumInSortedKeys = (sortedKeys, target) => {
+    if (sortedKeys.length === 0) {
+        throw null;
+    }
+    if (sortedKeys.length === 1) {
+        return sortedKeys[0];
+    }
+    let left = 0;
+    let right = sortedKeys.length - 1;
+    while (left <= right) {
+        const mid = Math.floor((left + right) / 2);
+        if (sortedKeys[mid] === target) {
+            return sortedKeys[mid];
+        }
+        else if (sortedKeys[mid] < target) {
+            left = mid + 1;
+        }
+        else {
+            right = mid - 1;
+        }
+    }
+    if (left >= sortedKeys.length) {
+        return sortedKeys[right];
+    }
+    if (right < 0) {
+        return sortedKeys[left];
+    }
+    return Math.abs(sortedKeys[right] - target) <= Math.abs(sortedKeys[left] - target) ? sortedKeys[right] : sortedKeys[left];
+};
+const isEqualNum = (a, b) => Math.abs(a - b) < 0.00001;
+export function calcReferenceInfo(uuid, opts) {
+    var _a, _b;
+    const { data, groupQueue, calculator, viewScaleInfo, viewSizeInfo } = opts;
+    let targetElements = data.elements || [];
+    if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+        targetElements = ((_b = (_a = groupQueue[groupQueue.length - 1]) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.children) || [];
+    }
+    const siblingViewRectInfoList = [];
+    targetElements.forEach((elem) => {
+        if (elem.uuid !== uuid) {
+            const info = calculator.calcViewRectInfoFromRange(elem.uuid, { checkVisible: true, viewScaleInfo, viewSizeInfo });
+            if (info) {
+                siblingViewRectInfoList.push(info);
+            }
+        }
+    });
+    const targetRectInfo = calculator.calcViewRectInfoFromRange(uuid, { viewScaleInfo, viewSizeInfo });
+    if (!targetRectInfo) {
+        return null;
+    }
+    const vTargetLineDotMap = {};
+    const hTargetLineDotMap = {};
+    const vRefLineDotMap = {};
+    const hRefLineDotMap = {};
+    const vHelperLineDotMapList = [];
+    const hHelperLineDotMapList = [];
+    let sortedRefXKeys = [];
+    let sortedRefYKeys = [];
+    const targetBox = getViewBoxInfo(targetRectInfo);
+    vTargetLineDotMap[targetBox.minX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
+    vTargetLineDotMap[targetBox.midX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
+    vTargetLineDotMap[targetBox.maxX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
+    hTargetLineDotMap[targetBox.minY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
+    hTargetLineDotMap[targetBox.midY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
+    hTargetLineDotMap[targetBox.maxY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
+    siblingViewRectInfoList.forEach((info) => {
+        const box = getViewBoxInfo(info);
+        if (!vRefLineDotMap[box.minX]) {
+            vRefLineDotMap[box.minX] = [];
+        }
+        if (!vRefLineDotMap[box.midX]) {
+            vRefLineDotMap[box.midX] = [];
+        }
+        if (!vRefLineDotMap[box.maxX]) {
+            vRefLineDotMap[box.maxX] = [];
+        }
+        if (!hRefLineDotMap[box.minY]) {
+            hRefLineDotMap[box.minY] = [];
+        }
+        if (!hRefLineDotMap[box.midY]) {
+            hRefLineDotMap[box.midY] = [];
+        }
+        if (!hRefLineDotMap[box.maxY]) {
+            hRefLineDotMap[box.maxY] = [];
+        }
+        vRefLineDotMap[box.minX] = [box.minY, box.midY, box.maxY];
+        vRefLineDotMap[box.midX] = [box.minY, box.midY, box.maxY];
+        vRefLineDotMap[box.maxX] = [box.minY, box.midY, box.maxY];
+        sortedRefXKeys.push(box.minX);
+        sortedRefXKeys.push(box.midX);
+        sortedRefXKeys.push(box.maxX);
+        hRefLineDotMap[box.minY] = [box.minX, box.midX, box.maxX];
+        hRefLineDotMap[box.midY] = [box.minX, box.midX, box.maxX];
+        hRefLineDotMap[box.maxY] = [box.minX, box.midX, box.maxX];
+        sortedRefYKeys.push(box.minY);
+        sortedRefYKeys.push(box.midY);
+        sortedRefYKeys.push(box.maxY);
+    });
+    sortedRefXKeys = sortedRefXKeys.sort((a, b) => a - b);
+    sortedRefYKeys = sortedRefYKeys.sort((a, b) => a - b);
+    let offsetX = null;
+    let offsetY = null;
+    let closestMinX = null;
+    let closestMidX = null;
+    let closestMaxX = null;
+    let closestMinY = null;
+    let closestMidY = null;
+    let closestMaxY = null;
+    if (sortedRefXKeys.length > 0) {
+        closestMinX = getClosestNumInSortedKeys(sortedRefXKeys, targetBox.minX);
+        closestMidX = getClosestNumInSortedKeys(sortedRefXKeys, targetBox.midX);
+        closestMaxX = getClosestNumInSortedKeys(sortedRefXKeys, targetBox.maxX);
+        const distMinX = Math.abs(closestMinX - targetBox.minX);
+        const distMidX = Math.abs(closestMidX - targetBox.midX);
+        const distMaxX = Math.abs(closestMaxX - targetBox.maxX);
+        const closestXDist = Math.min(distMinX, distMidX, distMaxX);
+        if (closestXDist <= unitSize / viewScaleInfo.scale) {
+            if (isEqualNum(closestXDist, distMinX)) {
+                offsetX = closestMinX - targetBox.minX;
+            }
+            else if (isEqualNum(closestXDist, distMidX)) {
+                offsetX = closestMidX - targetBox.midX;
+            }
+            else if (isEqualNum(closestXDist, distMaxX)) {
+                offsetX = closestMaxX - targetBox.maxX;
+            }
+        }
+    }
+    if (sortedRefYKeys.length > 0) {
+        closestMinY = getClosestNumInSortedKeys(sortedRefYKeys, targetBox.minY);
+        closestMidY = getClosestNumInSortedKeys(sortedRefYKeys, targetBox.midY);
+        closestMaxY = getClosestNumInSortedKeys(sortedRefYKeys, targetBox.maxY);
+        const distMinY = Math.abs(closestMinY - targetBox.minY);
+        const distMidY = Math.abs(closestMidY - targetBox.midY);
+        const distMaxY = Math.abs(closestMaxY - targetBox.maxY);
+        const closestYDist = Math.min(distMinY, distMidY, distMaxY);
+        if (closestYDist <= unitSize / viewScaleInfo.scale) {
+            if (isEqualNum(closestYDist, distMinY)) {
+                offsetY = closestMinY - targetBox.minY;
+            }
+            else if (isEqualNum(closestYDist, distMidY)) {
+                offsetY = closestMidY - targetBox.midY;
+            }
+            else if (isEqualNum(closestYDist, distMaxY)) {
+                offsetY = closestMaxY - targetBox.maxY;
+            }
+        }
+    }
+    const newTargetBox = Object.assign({}, targetBox);
+    if (offsetX !== null) {
+        newTargetBox.minX += offsetX;
+        newTargetBox.midX += offsetX;
+        newTargetBox.maxX += offsetX;
+    }
+    if (offsetY !== null) {
+        newTargetBox.minY += offsetY;
+        newTargetBox.midY += offsetY;
+        newTargetBox.maxY += offsetY;
+    }
+    if (is.x(offsetX) && offsetX !== null && closestMinX !== null && closestMidX !== null && closestMaxX !== null) {
+        if (isEqualNum(offsetX, closestMinX - targetBox.minX)) {
+            const vLine = {
+                x: closestMinX,
+                yList: []
+            };
+            vLine.yList.push(newTargetBox.minY);
+            vLine.yList.push(newTargetBox.maxY);
+            vLine.yList.push(...((hRefLineDotMap === null || hRefLineDotMap === void 0 ? void 0 : hRefLineDotMap[closestMinX]) || []));
+            vHelperLineDotMapList.push(vLine);
+        }
+        if (isEqualNum(offsetX, closestMidX - targetBox.minX)) {
+            const vLine = {
+                x: closestMidX,
+                yList: []
+            };
+            vLine.yList.push(newTargetBox.minY);
+            vLine.yList.push(newTargetBox.maxY);
+            vLine.yList.push(...((hRefLineDotMap === null || hRefLineDotMap === void 0 ? void 0 : hRefLineDotMap[closestMidX]) || []));
+            vHelperLineDotMapList.push(vLine);
+        }
+        if (isEqualNum(offsetX, closestMaxX - targetBox.minX)) {
+            const vLine = {
+                x: closestMaxX,
+                yList: []
+            };
+            vLine.yList.push(newTargetBox.minY);
+            vLine.yList.push(newTargetBox.maxY);
+            vLine.yList.push(...((hRefLineDotMap === null || hRefLineDotMap === void 0 ? void 0 : hRefLineDotMap[closestMaxX]) || []));
+            vHelperLineDotMapList.push(vLine);
+        }
+    }
+    if (is.y(offsetY) && offsetY !== null && closestMinY !== null && closestMidY !== null && closestMaxY !== null) {
+        if (isEqualNum(offsetY, closestMinY - targetBox.minY)) {
+            const hLine = {
+                y: closestMinY,
+                xList: []
+            };
+            hLine.xList.push(newTargetBox.minX);
+            hLine.xList.push(newTargetBox.maxX);
+            hLine.xList.push(...((vRefLineDotMap === null || vRefLineDotMap === void 0 ? void 0 : vRefLineDotMap[closestMinY]) || []));
+            hHelperLineDotMapList.push(hLine);
+        }
+        if (isEqualNum(offsetY, closestMidY - targetBox.midY)) {
+            const hLine = {
+                y: closestMidY,
+                xList: []
+            };
+            hLine.xList.push(newTargetBox.minX);
+            hLine.xList.push(newTargetBox.maxX);
+            hLine.xList.push(...((vRefLineDotMap === null || vRefLineDotMap === void 0 ? void 0 : vRefLineDotMap[closestMinY]) || []));
+            hHelperLineDotMapList.push(hLine);
+        }
+        if (isEqualNum(offsetY, closestMaxY - targetBox.maxY)) {
+            const hLine = {
+                y: closestMaxY,
+                xList: []
+            };
+            hLine.xList.push(newTargetBox.minX);
+            hLine.xList.push(newTargetBox.maxX);
+            hLine.xList.push(...((vRefLineDotMap === null || vRefLineDotMap === void 0 ? void 0 : vRefLineDotMap[closestMaxY]) || []));
+            hHelperLineDotMapList.push(hLine);
+        }
+    }
+    const yLines = [];
+    if ((vHelperLineDotMapList === null || vHelperLineDotMapList === void 0 ? void 0 : vHelperLineDotMapList.length) > 0) {
+        vHelperLineDotMapList.forEach((item, i) => {
+            yLines.push([]);
+            item.yList.forEach((y) => {
+                yLines[i].push({
+                    x: item.x,
+                    y
+                });
+            });
+        });
+    }
+    const xLines = [];
+    if ((hHelperLineDotMapList === null || hHelperLineDotMapList === void 0 ? void 0 : hHelperLineDotMapList.length) > 0) {
+        hHelperLineDotMapList.forEach((item, i) => {
+            xLines.push([]);
+            item.xList.forEach((x) => {
+                xLines[i].push({
+                    x,
+                    y: item.y
+                });
+            });
+        });
+    }
+    return {
+        offsetX,
+        offsetY,
+        yLines,
+        xLines
+    };
+}

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

@@ -1,6 +1,6 @@
-import type { ElementSizeController } from '@idraw/types';
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
-import { Data, ElementSize, ElementType, Element, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware, ViewRectVertexes } from '@idraw/types';
+import { Data, ElementSize, ElementType, Element, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware, ViewRectVertexes, ElementSizeController, ElementPosition } from '@idraw/types';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
+import { keyLayoutIsSelected } from '../layout-selector';
 export { Data, ElementType, Element, ElementSize, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware };
 export type ControllerStyle = ElementSize & {
     borderWidth: number;
@@ -8,7 +8,7 @@ export type ControllerStyle = ElementSize & {
     background: string;
 };
 export type SelectedElementSizeController = Record<string, ControllerStyle>;
-export type ResizeType = 'resize-left' | 'resize-right' | 'resize-top' | 'resize-bottom' | 'resize-top-left' | 'resize-top-right' | 'resize-bottom-left' | 'resize-bottom-right';
+export type ResizeType = 'resize-left' | 'resize-right' | 'resize-top' | 'resize-bottom' | 'resize-top-left' | 'resize-top-right' | 'resize-bottom-left' | 'resize-bottom-right' | 'resize-rotate';
 export type PointTargetType = null | ResizeType | 'list-area' | 'over-element';
 export interface PointTarget {
     type: PointTargetType;
@@ -31,10 +31,15 @@ export type DeepSelectorSharedStorage = {
     [keySelectedElementList]: Array<Element<ElementType>>;
     [keySelectedElementListVertexes]: ViewRectVertexes | null;
     [keySelectedElementController]: ElementSizeController | null;
+    [keySelectedElementPosition]: ElementPosition;
+    [keyIsMoving]: boolean | null;
+    [keyEnableSelectInGroup]: boolean | null;
+    [keyEnableSnapToGrid]: boolean | null;
     [keyDebugElemCenter]: PointSize | null;
     [keyDebugEnd0]: PointSize | null;
     [keyDebugEndHorizontal]: PointSize | null;
     [keyDebugEndVertical]: PointSize | null;
     [keyDebugStartHorizontal]: PointSize | null;
     [keyDebugStartVertical]: PointSize | null;
+    [keyLayoutIsSelected]: boolean | null;
 };

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

@@ -1 +1,2 @@
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
+import { keyLayoutIsSelected } from '../layout-selector';

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

@@ -1,5 +1,5 @@
-import type { ViewRectVertexes, ElementSizeController, StoreSharer } from '@idraw/types';
-import type { Data, Element, ViewContext2D, Point, PointSize, PointTarget, ViewScaleInfo, ViewCalculator, ElementType, ElementSize, ResizeType, AreaSize, ViewSizeInfo } from './types';
+import type { ViewRectVertexes, ElementSizeController, StoreSharer, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+import type { Data, Element, ViewContext2D, Point, PointSize, PointTarget, ViewCalculator, ElementType, ElementSize, ResizeType, AreaSize } from './types';
 export declare function isPointInViewActiveVertexes(p: PointSize, opts: {
     ctx: ViewContext2D;
     vertexes: ViewRectVertexes;
@@ -30,6 +30,15 @@ export declare function resizeElement(elem: Element<ElementType>, opts: {
     scale: number;
     sharer: StoreSharer;
 }): ElementSize;
+export declare function rotateElement(elem: Element<ElementType>, opts: {
+    center: PointSize;
+    start: PointSize;
+    end: PointSize;
+    resizeType: ResizeType;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    sharer: StoreSharer;
+}): ElementSize;
 export declare function getSelectedListArea(data: Data, opts: {
     start: Point;
     end: Point;

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, rotatePointInGroup, 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);
@@ -49,8 +49,8 @@ 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 ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight];
+        const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = selectedElementController;
+        const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate];
         for (let i = 0; i < ctrls.length; i++) {
             const ctrl = ctrls[i];
             if (isPointInViewActiveVertexes(p, { ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo })) {
@@ -671,11 +671,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 = 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, viewSizeInfo, start, end } = opts;
     if (!(Array.isArray(data.elements) && start && end)) {
         return { indexes, uuids, elements };
     }
@@ -683,8 +701,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.lock) === true) {
+            continue;
+        }
+        const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
         const center = calcElementCenter(elemSize);
         if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
             indexes.push(idx);
@@ -702,7 +724,7 @@ export function getSelectedListArea(data, opts) {
                 }
             }
         }
-    });
+    }
     return { indexes, uuids, elements };
 }
 export function calcSelectedElementsArea(elements, opts) {
@@ -711,14 +733,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, viewSizeInfo } = 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, viewSizeInfo });
         if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
             const ves = rotateElementVertexes(elemSize);
             if (ves.length === 4) {

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

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

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

@@ -1,14 +1,17 @@
-import { limitAngle, getDefaultElementDetailConfig } from '@idraw/util';
+import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy } from '@idraw/util';
 export const middlewareEventTextEdit = '@middleware/text-edit';
+export const middlewareEventTextChange = '@middleware/text-change';
 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 = [];
     canvasWrapper.appendChild(textarea);
     canvasWrapper.style.position = 'absolute';
     mask.appendChild(canvasWrapper);
@@ -23,10 +26,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 +104,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,23 +160,58 @@ 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(middlewareEventTextChange, {
+                element: {
+                    uuid: activeElem.uuid,
+                    detail: {
+                        text: activeElem.detail.text
+                    }
+                },
+                position: [...(activePosition || [])]
+            });
             viewer.drawFrame();
         }
     });
     textarea.addEventListener('blur', () => {
+        if (activeElem && activePosition) {
+            eventHub.trigger(middlewareEventTextChange, {
+                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);
         },