@idraw/core 0.4.0-beta.14 → 0.4.0-beta.16

package/dist/esm/index.d.ts

@@ -1,11 +1,11 @@
-import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEvent, ViewScaleInfo, LoadItemMap } from '@idraw/types';
+import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap } from '@idraw/types';
 export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
-export { MiddlewareTextEditor, middlewareEventTextEdit } from './middleware/text-editor';
+export { MiddlewareTextEditor, middlewareEventTextEdit, middlewareEventTextChange } from './middleware/text-editor';
 export { MiddlewareDragger } from './middleware/dragger';
-export declare class Core<E extends CoreEvent = CoreEvent> {
+export declare class Core<E extends CoreEventMap = CoreEventMap> {
     #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);
     isDestroyed(): boolean;

package/dist/esm/index.js

@@ -17,7 +17,7 @@ export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear }
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
-export { MiddlewareTextEditor, middlewareEventTextEdit } from './middleware/text-editor';
+export { MiddlewareTextEditor, middlewareEventTextEdit, middlewareEventTextChange } from './middleware/text-editor';
 export { MiddlewareDragger } from './middleware/dragger';
 export class Core {
     constructor(container, opts) {

package/dist/esm/lib/cursor.d.ts

@@ -1,7 +1,7 @@
-import type { UtilEventEmitter, CoreEvent } from '@idraw/types';
+import type { UtilEventEmitter, CoreEventMap } from '@idraw/types';
 export declare class Cursor {
     #private;
     constructor(container: HTMLDivElement, opts: {
-        eventHub: UtilEventEmitter<CoreEvent>;
+        eventHub: UtilEventEmitter<CoreEventMap>;
     });
 }

package/dist/esm/middleware/dragger/index.d.ts

@@ -1,7 +1,7 @@
-import type { BoardMiddleware, CoreEvent, Point } from '@idraw/types';
+import type { BoardMiddleware, CoreEventMap, Point } from '@idraw/types';
 declare const keyPrevPoint: unique symbol;
 type DraggerSharedStorage = {
     [keyPrevPoint]: Point | null;
 };
-export declare const MiddlewareDragger: BoardMiddleware<DraggerSharedStorage, CoreEvent>;
+export declare const MiddlewareDragger: BoardMiddleware<DraggerSharedStorage, CoreEventMap>;
 export {};

package/dist/esm/middleware/ruler/index.d.ts

@@ -1,3 +1,3 @@
-import type { BoardMiddleware, CoreEvent } from '@idraw/types';
+import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
 export declare const middlewareEventRuler = "@middleware/show-ruler";
-export declare const MiddlewareRuler: BoardMiddleware<Record<string, any>, CoreEvent>;
+export declare const MiddlewareRuler: BoardMiddleware<Record<string, any>, CoreEventMap>;

package/dist/esm/middleware/scaler/index.d.ts

@@ -1,3 +1,3 @@
-import type { BoardMiddleware, CoreEvent } from '@idraw/types';
+import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
 export declare const middlewareEventScale = "@middleware/scale";
-export declare const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEvent>;
+export declare const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEventMap>;

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

@@ -0,0 +1,5 @@
+import type { Element, ElementSize, ViewRectInfo, ViewScaleInfo } from '@idraw/types';
+export declare function getElementViewRectInfo(elem: ElementSize, opts: {
+    groupQueue: Element<'group'>[];
+    viewScaleInfo: ViewScaleInfo;
+}): ViewRectInfo;

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

@@ -0,0 +1,10 @@
+import { calcElementViewRectInfo } from '@idraw/util';
+export function getElementViewRectInfo(elem, opts) {
+    const { groupQueue, viewScaleInfo } = opts;
+    const viewRectInfo = calcElementViewRectInfo(elem, {
+        groupQueue,
+        viewScaleInfo,
+        range: true
+    });
+    return viewRectInfo;
+}

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

@@ -10,6 +10,7 @@ export declare const keySelectedElementListVertexes: unique symbol;
 export declare const keySelectedElementController: unique symbol;
 export declare const keyGroupQueue: unique symbol;
 export declare const keyGroupQueueVertexesList: unique symbol;
+export declare const keyIsMoving: unique symbol;
 export declare const keyDebugElemCenter: unique symbol;
 export declare const keyDebugStartVertical: unique symbol;
 export declare const keyDebugEndVertical: unique symbol;
@@ -22,3 +23,4 @@ export declare const areaBorderWidth = 1;
 export declare const wrapperColor = "#1973ba";
 export declare const lockColor = "#5b5959b5";
 export declare const controllerSize = 10;
+export declare const auxiliaryColor = "#f7276e";

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

@@ -10,6 +10,7 @@ export const keySelectedElementListVertexes = Symbol(`${key}_selectedElementList
 export const keySelectedElementController = Symbol(`${key}_selectedElementController`);
 export const keyGroupQueue = Symbol(`${key}_groupQueue`);
 export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`);
+export const keyIsMoving = Symbol(`${key}_isMoving`);
 export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
 export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
 export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
@@ -22,3 +23,4 @@ export const areaBorderWidth = 1;
 export const wrapperColor = '#1973ba';
 export const lockColor = '#5b5959b5';
 export const controllerSize = 10;
+export const auxiliaryColor = '#f7276e';

package/dist/esm/middleware/selector/draw-auxiliary.d.ts

@@ -0,0 +1,7 @@
+import type { ViewContext2D, ViewRectVertexes, Element, ViewScaleInfo } from '@idraw/types';
+export declare function drawAuxiliaryLines(ctx: ViewContext2D, opts: {
+    vertexes: ViewRectVertexes;
+    element: Element | null;
+    groupQueue: Element<'group'>[];
+    viewScaleInfo: ViewScaleInfo;
+}): void;

package/dist/esm/middleware/selector/draw-auxiliary.js

@@ -0,0 +1,31 @@
+import { getElementViewRectInfo } from './auxiliary';
+import { auxiliaryColor } from './config';
+import { drawLine, drawCrossByCenter } from './draw-base';
+export function drawAuxiliaryLines(ctx, opts) {
+    const { element, groupQueue, viewScaleInfo } = opts;
+    if (!element) {
+        return;
+    }
+    const viewRectInfo = getElementViewRectInfo(element, {
+        groupQueue,
+        viewScaleInfo
+    });
+    const lineOpts = {
+        borderColor: auxiliaryColor,
+        borderWidth: 1,
+        lineDash: []
+    };
+    drawLine(ctx, viewRectInfo.topLeft, viewRectInfo.topRight, lineOpts);
+    drawLine(ctx, viewRectInfo.topRight, viewRectInfo.bottomRight, lineOpts);
+    drawLine(ctx, viewRectInfo.bottomRight, viewRectInfo.bottomLeft, lineOpts);
+    drawLine(ctx, viewRectInfo.bottomLeft, viewRectInfo.topLeft, lineOpts);
+    const crossOpts = Object.assign(Object.assign({}, lineOpts), { size: 6 });
+    drawCrossByCenter(ctx, viewRectInfo.topLeft, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.topRight, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.bottomLeft, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.bottomRight, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.top, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.right, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.bottom, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.left, crossOpts);
+}

package/dist/esm/middleware/selector/draw-base.d.ts

@@ -0,0 +1,30 @@
+import type { PointSize, ViewContext2D, ViewRectVertexes } from '@idraw/types';
+export declare function drawVertexes(ctx: ViewContext2D, vertexes: ViewRectVertexes, opts: {
+    borderColor: string;
+    borderWidth: number;
+    background: string;
+    lineDash: number[];
+}): void;
+export declare function drawLine(ctx: ViewContext2D, start: PointSize, end: PointSize, opts: {
+    borderColor: string;
+    borderWidth: number;
+    lineDash: number[];
+}): void;
+export declare function drawCircleController(ctx: ViewContext2D, circleCenter: PointSize, opts: {
+    borderColor: string;
+    borderWidth: number;
+    background: string;
+    lineDash: number[];
+    size: number;
+}): void;
+export declare function drawCrossVertexes(ctx: ViewContext2D, vertexes: ViewRectVertexes, opts: {
+    borderColor: string;
+    borderWidth: number;
+    lineDash: number[];
+}): void;
+export declare function drawCrossByCenter(ctx: ViewContext2D, center: PointSize, opts: {
+    size: number;
+    borderColor: string;
+    borderWidth: number;
+    lineDash: number[];
+}): void;

package/dist/esm/middleware/selector/draw-base.js

@@ -0,0 +1,100 @@
+export function drawVertexes(ctx, vertexes, opts) {
+    const { borderColor, borderWidth, background, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.fillStyle = background;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(vertexes[0].x, vertexes[0].y);
+    ctx.lineTo(vertexes[1].x, vertexes[1].y);
+    ctx.lineTo(vertexes[2].x, vertexes[2].y);
+    ctx.lineTo(vertexes[3].x, vertexes[3].y);
+    ctx.lineTo(vertexes[0].x, vertexes[0].y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill();
+}
+export function drawLine(ctx, start, end, opts) {
+    const { borderColor, borderWidth, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    ctx.closePath();
+    ctx.stroke();
+}
+export function drawCircleController(ctx, circleCenter, opts) {
+    const { size, borderColor, borderWidth, background } = opts;
+    const center = circleCenter;
+    const r = size / 2;
+    const a = r;
+    const b = r;
+    if (a >= 0 && b >= 0) {
+        if (typeof borderWidth === 'number' && borderWidth > 0) {
+            const ba = borderWidth / 2 + a;
+            const bb = borderWidth / 2 + b;
+            ctx.beginPath();
+            ctx.strokeStyle = borderColor;
+            ctx.lineWidth = borderWidth;
+            ctx.circle(center.x, center.y, ba, bb, 0, 0, 2 * Math.PI);
+            ctx.closePath();
+            ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.fillStyle = background;
+        ctx.circle(center.x, center.y, a, b, 0, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.fill();
+    }
+}
+export function drawCrossVertexes(ctx, vertexes, opts) {
+    const { borderColor, borderWidth, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(vertexes[0].x, vertexes[0].y);
+    ctx.lineTo(vertexes[2].x, vertexes[2].y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(vertexes[1].x, vertexes[1].y);
+    ctx.lineTo(vertexes[3].x, vertexes[3].y);
+    ctx.closePath();
+    ctx.stroke();
+}
+export function drawCrossByCenter(ctx, center, opts) {
+    const { size, borderColor, borderWidth, lineDash } = opts;
+    const minX = center.x - size / 2;
+    const maxX = center.x + size / 2;
+    const minY = center.y - size / 2;
+    const maxY = center.y + size / 2;
+    const vertexes = [
+        {
+            x: minX,
+            y: minY
+        },
+        {
+            x: maxX,
+            y: minY
+        },
+        {
+            x: maxX,
+            y: maxY
+        },
+        {
+            x: minX,
+            y: maxY
+        }
+    ];
+    drawCrossVertexes(ctx, vertexes, {
+        borderColor,
+        borderWidth,
+        lineDash
+    });
+}

package/dist/esm/middleware/selector/draw-wrapper.d.ts

@@ -10,8 +10,11 @@ export declare function drawLockVertexesWrapper(ctx: ViewContext2D, vertexes: Vi
     controller?: ElementSizeController | null;
 }): void;
 export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
+    hideControllers: boolean;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    element: Element | null;
+    groupQueue: Element<'group'>[];
 }): void;
 export declare function drawElementListShadows(ctx: ViewContext2D, elements: Element<ElementType>[], opts?: Omit<RendererDrawElementOptions, 'loader'>): void;
 export declare function drawArea(ctx: ViewContext2D, opts: {

package/dist/esm/middleware/selector/draw-wrapper.js

@@ -1,58 +1,6 @@
 import { rotateElementVertexes, calcViewPointSize, calcViewVertexes } from '@idraw/util';
 import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor, controllerSize } from './config';
-function drawVertexes(ctx, vertexes, opts) {
-    const { borderColor, borderWidth, background, lineDash } = opts;
-    ctx.setLineDash([]);
-    ctx.lineWidth = borderWidth;
-    ctx.strokeStyle = borderColor;
-    ctx.fillStyle = background;
-    ctx.setLineDash(lineDash);
-    ctx.beginPath();
-    ctx.moveTo(vertexes[0].x, vertexes[0].y);
-    ctx.lineTo(vertexes[1].x, vertexes[1].y);
-    ctx.lineTo(vertexes[2].x, vertexes[2].y);
-    ctx.lineTo(vertexes[3].x, vertexes[3].y);
-    ctx.lineTo(vertexes[0].x, vertexes[0].y);
-    ctx.closePath();
-    ctx.stroke();
-    ctx.fill();
-}
-function drawLine(ctx, start, end, opts) {
-    const { borderColor, borderWidth, lineDash } = opts;
-    ctx.setLineDash([]);
-    ctx.lineWidth = borderWidth;
-    ctx.strokeStyle = borderColor;
-    ctx.setLineDash(lineDash);
-    ctx.beginPath();
-    ctx.moveTo(start.x, start.y);
-    ctx.lineTo(end.x, end.y);
-    ctx.closePath();
-    ctx.stroke();
-}
-function drawCircleController(ctx, circleCenter, opts) {
-    const { size, borderColor, borderWidth, background } = opts;
-    const center = circleCenter;
-    const r = size / 2;
-    const a = r;
-    const b = r;
-    if (a >= 0 && b >= 0) {
-        if (typeof borderWidth === 'number' && borderWidth > 0) {
-            const ba = borderWidth / 2 + a;
-            const bb = borderWidth / 2 + b;
-            ctx.beginPath();
-            ctx.strokeStyle = borderColor;
-            ctx.lineWidth = borderWidth;
-            ctx.circle(center.x, center.y, ba, bb, 0, 0, 2 * Math.PI);
-            ctx.closePath();
-            ctx.stroke();
-        }
-        ctx.beginPath();
-        ctx.fillStyle = background;
-        ctx.circle(center.x, center.y, a, b, 0, 0, 2 * Math.PI);
-        ctx.closePath();
-        ctx.fill();
-    }
-}
+import { drawVertexes, drawLine, drawCircleController, drawCrossVertexes } from './draw-base';
 export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
@@ -60,24 +8,6 @@ export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
 }
-function drawCrossVertexes(ctx, vertexes, opts) {
-    const { borderColor, borderWidth, background, lineDash } = opts;
-    ctx.setLineDash([]);
-    ctx.lineWidth = borderWidth;
-    ctx.strokeStyle = borderColor;
-    ctx.fillStyle = background;
-    ctx.setLineDash(lineDash);
-    ctx.beginPath();
-    ctx.moveTo(vertexes[0].x, vertexes[0].y);
-    ctx.lineTo(vertexes[2].x, vertexes[2].y);
-    ctx.closePath();
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.moveTo(vertexes[1].x, vertexes[1].y);
-    ctx.lineTo(vertexes[3].x, vertexes[3].y);
-    ctx.closePath();
-    ctx.stroke();
-}
 export function drawLockVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
@@ -102,16 +32,19 @@ export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
     if (!controller) {
         return;
     }
+    const { hideControllers } = opts;
     const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
     const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
-    drawLine(ctx, calcViewPointSize(top.center, opts), calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { borderWidth: 2 }));
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
-    drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
-    drawCircleController(ctx, calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { size: controllerSize, borderWidth: 2 }));
+    if (!hideControllers) {
+        drawLine(ctx, calcViewPointSize(top.center, opts), calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { borderWidth: 2 }));
+        drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+        drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+        drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+        drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+        drawCircleController(ctx, calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { size: controllerSize, borderWidth: 2 }));
+    }
 }
 export function drawElementListShadows(ctx, elements, opts) {
     elements.forEach((elem) => {

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

@@ -1,5 +1,5 @@
-import type { CoreEvent } from '@idraw/types';
+import type { CoreEventMap } from '@idraw/types';
 import type { BoardMiddleware, DeepSelectorSharedStorage } from './types';
 export declare const middlewareEventSelect: string;
 export declare const middlewareEventSelectClear: string;
-export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEvent>;
+export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap>;

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

@@ -1,7 +1,7 @@
-import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, deepResizeGroupElement } from '@idraw/util';
+import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement } from '@idraw/util';
 import { drawHoverVertexesWrapper, drawLockVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, controllerSize } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keyIsMoving, controllerSize } from './config';
 import { middlewareEventTextEdit } from '../text-editor';
 export const middlewareEventSelect = '@middleware/select';
 export const middlewareEventSelectClear = '@middleware/select-clear';
@@ -87,6 +87,7 @@ export const MiddlewareSelector = (opts) => {
         sharer.setSharedStorage(keySelectedElementList, []);
         sharer.setSharedStorage(keySelectedElementListVertexes, null);
         sharer.setSharedStorage(keySelectedElementController, null);
+        sharer.setSharedStorage(keyIsMoving, null);
     };
     clear();
     const selectCallback = ({ uuids, positions }) => {
@@ -284,6 +285,7 @@ export const MiddlewareSelector = (opts) => {
         },
         pointMove: (e) => {
             var _a, _b, _c;
+            sharer.setSharedStorage(keyIsMoving, true);
             const data = sharer.getActiveStorage('data');
             const elems = getActiveElements();
             const scale = sharer.getActiveStorage('scale') || 1;
@@ -388,6 +390,7 @@ export const MiddlewareSelector = (opts) => {
         },
         pointEnd(e) {
             inBusyMode = null;
+            sharer.setSharedStorage(keyIsMoving, false);
             const data = sharer.getActiveStorage('data');
             const resizeType = sharer.getSharedStorage(keyResizeType);
             const actionType = sharer.getSharedStorage(keyActionType);
@@ -467,7 +470,7 @@ export const MiddlewareSelector = (opts) => {
             viewer.drawFrame();
         },
         doubleClick(e) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
             const target = getPointTarget(e.point, pointTargetBaseOptions());
             sharer.setSharedStorage(keySelectedElementController, null);
             sharer.setSharedStorage(keySelectedElementList, []);
@@ -486,6 +489,7 @@ export const MiddlewareSelector = (opts) => {
                 eventHub.trigger(middlewareEventTextEdit, {
                     element: target.elements[0],
                     groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
+                    position: getElementPositionFromList((_e = target.elements[0]) === null || _e === void 0 ? void 0 : _e.uuid, ((_f = sharer.getActiveStorage('data')) === null || _f === void 0 ? void 0 : _f.elements) || []),
                     viewScaleInfo: sharer.getActiveViewScaleInfo()
                 });
             }
@@ -507,6 +511,7 @@ export const MiddlewareSelector = (opts) => {
             const areaEnd = sharedStore[keyAreaEnd];
             const groupQueue = sharedStore[keyGroupQueue];
             const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
+            const isMoving = sharedStore[keyIsMoving];
             const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
             const selectedElementController = elem
                 ? calcElementSizeController(elem, {
@@ -531,7 +536,7 @@ export const MiddlewareSelector = (opts) => {
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
+                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, groupQueue, hideControllers: !!isMoving && actionType === 'drag' }));
                 }
             }
             else {
@@ -548,7 +553,7 @@ export const MiddlewareSelector = (opts) => {
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
+                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, groupQueue, hideControllers: !!isMoving && actionType === 'drag' }));
                 }
                 else if (actionType === 'area' && areaStart && areaEnd) {
                     drawArea(helperContext, { start: areaStart, end: areaEnd });

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

@@ -1,5 +1,5 @@
 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 { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keyIsMoving, 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';
 export { Data, ElementType, Element, ElementSize, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware };
 export type ControllerStyle = ElementSize & {
@@ -31,6 +31,7 @@ export type DeepSelectorSharedStorage = {
     [keySelectedElementList]: Array<Element<ElementType>>;
     [keySelectedElementListVertexes]: ViewRectVertexes | null;
     [keySelectedElementController]: ElementSizeController | null;
+    [keyIsMoving]: boolean | null;
     [keyDebugElemCenter]: PointSize | null;
     [keyDebugEnd0]: PointSize | null;
     [keyDebugEndHorizontal]: PointSize | null;

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

@@ -1 +1 @@
-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, keyIsMoving, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';

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';
 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 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);
@@ -27,6 +30,7 @@ export const MiddlewareTextEditor = (opts) => {
     const hideTextArea = () => {
         mask.style.display = 'none';
         activeElem = null;
+        activePosition = [];
     };
     const getCanvasRect = () => {
         const clientRect = canvas.getBoundingClientRect();
@@ -84,6 +88,23 @@ 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 - 1}px`;
         textarea.style.top = `${elemY - 1}px`;
@@ -104,7 +125,7 @@ export const MiddlewareTextEditor = (opts) => {
         textarea.style.padding = '0';
         textarea.style.margin = '0';
         textarea.style.outline = 'none';
-        textarea.value = detail.text || '';
+        textarea.innerText = detail.text || '';
         parent.appendChild(textarea);
     };
     const resetCanvasWrapper = () => {
@@ -122,19 +143,53 @@ 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);
     };