@idraw/core 0.4.0-beta.35 → 0.4.0-beta.37

package/dist/esm/index.js

@@ -32,6 +32,7 @@ export class Core {
         const { devicePixelRatio = 1, width, height, createCustomContext2D } = opts;
         __classPrivateFieldSet(this, _Core_container, container, "f");
         const canvas = document.createElement('canvas');
+        canvas.setAttribute('tabindex', '0');
         __classPrivateFieldSet(this, _Core_canvas, canvas, "f");
         __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
         container.appendChild(canvas);

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

@@ -1,4 +1,5 @@
 import type { MiddlewareInfoStyle } from '@idraw/types';
 export declare const infoFontSize = 10;
 export declare const infoLineHeight = 16;
+export declare const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = "@middleware/internal-event/show-info-angle";
 export declare const defaltStyle: MiddlewareInfoStyle;

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

@@ -2,6 +2,7 @@ const infoBackground = '#1973bac6';
 const infoTextColor = '#ffffff';
 export const infoFontSize = 10;
 export const infoLineHeight = 16;
+export const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = '@middleware/internal-event/show-info-angle';
 export const defaltStyle = {
     textBackground: infoBackground,
     textColor: infoTextColor

package/dist/esm/middleware/info/draw-info.d.ts

@@ -1,5 +1,5 @@
 import type { PointSize, ViewContext2D } from '@idraw/types';
-import type { MiddlewareInfoStyle } from './types';
+import type { MiddlewareInfoStyle } from '@idraw/types';
 export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
     point: PointSize;
     rotateCenter: PointSize;

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

@@ -1,3 +1,9 @@
 import type { BoardMiddleware, MiddlewareInfoConfig, CoreEventMap } from '@idraw/types';
 import type { DeepInfoSharedStorage } from './types';
-export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, CoreEventMap, MiddlewareInfoConfig>;
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from './config';
+export { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE };
+export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, CoreEventMap & {
+    [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
+        show: boolean;
+    };
+}, MiddlewareInfoConfig>;

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

@@ -1,11 +1,12 @@
 import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
 import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
 import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
-import { defaltStyle } from './config';
+import { defaltStyle, MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from './config';
+export { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE };
 const infoFontSize = 10;
 const infoLineHeight = 16;
 export const MiddlewareInfo = (opts, config) => {
-    const { boardContent, calculator } = opts;
+    const { boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     const innerConfig = Object.assign(Object.assign({}, defaltStyle), config);
     const { textBackground, textColor } = innerConfig;
@@ -13,8 +14,18 @@ export const MiddlewareInfo = (opts, config) => {
         textBackground,
         textColor
     };
+    let showAngleInfo = true;
+    const showInfoAngleCallback = ({ show }) => {
+        showAngleInfo = show;
+    };
     return {
         name: '@middleware/info',
+        use() {
+            eventHub.on(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
+        },
+        disuse() {
+            eventHub.off(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
+        },
         beforeDrawFrame({ snapshot }) {
             const { sharedStore } = snapshot;
             const selectedElementList = sharedStore[keySelectedElementList];
@@ -92,18 +103,20 @@ export const MiddlewareInfo = (opts, config) => {
                             lineHeight: infoLineHeight,
                             style
                         });
-                        drawAngleInfoText(overlayContext, {
-                            point: {
-                                x: rectInfo.top.x + infoFontSize,
-                                y: rectInfo.top.y - infoFontSize * 2
-                            },
-                            rotateCenter: rectInfo.center,
-                            angle: totalAngle,
-                            text: angleText,
-                            fontSize: infoFontSize,
-                            lineHeight: infoLineHeight,
-                            style
-                        });
+                        if (showAngleInfo) {
+                            drawAngleInfoText(overlayContext, {
+                                point: {
+                                    x: rectInfo.top.x + infoFontSize + 4,
+                                    y: rectInfo.top.y - infoFontSize * 2 - 18
+                                },
+                                rotateCenter: rectInfo.center,
+                                angle: totalAngle,
+                                text: angleText,
+                                fontSize: infoFontSize,
+                                lineHeight: infoLineHeight,
+                                style
+                            });
+                        }
                     }
                 }
             }

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

@@ -3,7 +3,9 @@ export declare const key = "LAYOUT_SELECT";
 export declare const keyLayoutActionType: unique symbol;
 export declare const keyLayoutControlType: unique symbol;
 export declare const keyLayoutController: unique symbol;
-export declare const keyLayoutIsHover: unique symbol;
+export declare const keyLayoutIsHoverContent: unique symbol;
+export declare const keyLayoutIsHoverController: unique symbol;
 export declare const keyLayoutIsSelected: unique symbol;
+export declare const keyLayoutIsBusyMoving: unique symbol;
 export declare const controllerSize = 10;
 export declare const defaultStyle: MiddlewareLayoutSelectorStyle;

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

@@ -2,8 +2,10 @@ export const key = 'LAYOUT_SELECT';
 export const keyLayoutActionType = Symbol(`${key}_layoutActionType`);
 export const keyLayoutControlType = Symbol(`${key}_layoutControlType`);
 export const keyLayoutController = Symbol(`${key}_layoutController`);
-export const keyLayoutIsHover = Symbol(`${key}_layoutIsHover`);
+export const keyLayoutIsHoverContent = Symbol(`${key}_layoutIsHoverContent`);
+export const keyLayoutIsHoverController = Symbol(`${key}_layoutIsHoverController`);
 export const keyLayoutIsSelected = Symbol(`${key}_layoutIsSelected`);
+export const keyLayoutIsBusyMoving = Symbol(`${key}_layoutIsSelected`);
 export const controllerSize = 10;
 export const defaultStyle = {
     activeColor: '#b331c9'

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

@@ -1,5 +1,5 @@
 import type { BoardMiddleware, MiddlewareLayoutSelectorConfig, CoreEventMap } from '@idraw/types';
 import type { LayoutSelectorSharedStorage } from './types';
-import { keyLayoutIsSelected } from './config';
-export { keyLayoutIsSelected };
+import { keyLayoutIsSelected, keyLayoutIsBusyMoving } from './config';
+export { keyLayoutIsSelected, keyLayoutIsBusyMoving };
 export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage, CoreEventMap, MiddlewareLayoutSelectorConfig>;

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

@@ -1,9 +1,9 @@
 import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize } from '@idraw/util';
-import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize, defaultStyle } from './config';
-import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';
+import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving, controllerSize, defaultStyle } from './config';
+import { keyActionType as keyElementActionType } from '../selector';
 import { drawLayoutController, drawLayoutHover } from './util';
 import { coreEventKeys } from '../../config';
-export { keyLayoutIsSelected };
+export { keyLayoutIsSelected, keyLayoutIsBusyMoving };
 export const MiddlewareLayoutSelector = (opts, config) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
     const { overlayContext } = boardContent;
@@ -11,27 +11,19 @@ export const MiddlewareLayoutSelector = (opts, config) => {
     const { activeColor } = innerConfig;
     const style = { activeColor };
     let prevPoint = null;
-    let prevIsHover = null;
+    let prevIsHoverContent = null;
     let prevIsSelected = null;
-    let isBusy = null;
     const clear = () => {
         prevPoint = null;
         sharer.setSharedStorage(keyLayoutActionType, null);
         sharer.setSharedStorage(keyLayoutControlType, null);
         sharer.setSharedStorage(keyLayoutController, null);
-        sharer.setSharedStorage(keyLayoutIsHover, null);
+        sharer.setSharedStorage(keyLayoutIsHoverContent, null);
+        sharer.setSharedStorage(keyLayoutIsHoverController, null);
         sharer.setSharedStorage(keyLayoutIsSelected, null);
-        prevIsHover = null;
+        sharer.setSharedStorage(keyLayoutIsBusyMoving, null);
+        prevIsHoverContent = null;
         prevIsSelected = null;
-        isBusy = null;
-    };
-    const isInElementHover = () => {
-        const hoverElement = sharer.getSharedStorage(keyHoverElement);
-        if (hoverElement) {
-            clear();
-            return true;
-        }
-        return false;
     };
     const isInElementAction = () => {
         const elementActionType = sharer.getSharedStorage(keyElementActionType);
@@ -78,6 +70,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
     const resetControlType = (e) => {
         const data = sharer.getActiveStorage('data');
         const controller = sharer.getSharedStorage(keyLayoutController);
+        let controllerType = null;
         if (controller && (data === null || data === void 0 ? void 0 : data.layout) && (e === null || e === void 0 ? void 0 : e.point)) {
             let layoutControlType = null;
             if (controller) {
@@ -93,14 +86,20 @@ export const MiddlewareLayoutSelector = (opts, config) => {
                 if (layoutControlType) {
                     sharer.setSharedStorage(keyLayoutControlType, layoutControlType);
                     eventHub.trigger(coreEventKeys.CLEAR_SELECT);
-                    return layoutControlType;
+                    controllerType = layoutControlType;
                 }
             }
         }
-        return null;
+        if (controllerType) {
+            sharer.setSharedStorage(keyLayoutIsHoverController, true);
+        }
+        else {
+            sharer.setSharedStorage(keyLayoutIsHoverController, false);
+        }
+        return controllerType;
     };
     const updateCursor = (controlType) => {
-        if (isBusy === true) {
+        if (sharer.getSharedStorage(keyLayoutIsBusyMoving) === true) {
             return;
         }
         eventHub.trigger(coreEventKeys.CURSOR, {
@@ -116,23 +115,20 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             resetController();
         },
         hover: (e) => {
-            if (isBusy === true) {
+            if (sharer.getSharedStorage(keyLayoutIsBusyMoving) === true) {
                 return;
             }
             if (isInElementAction()) {
                 return;
             }
-            if (isInElementHover()) {
-                return;
-            }
             if (isInLayout(e.point)) {
-                sharer.setSharedStorage(keyLayoutIsHover, true);
+                sharer.setSharedStorage(keyLayoutIsHoverContent, true);
             }
             else {
-                sharer.setSharedStorage(keyLayoutIsHover, false);
-                if (prevIsHover === true) {
+                sharer.setSharedStorage(keyLayoutIsHoverContent, false);
+                if (prevIsHoverContent === true) {
                     viewer.drawFrame();
-                    prevIsHover = false;
+                    prevIsHoverContent = false;
                 }
             }
             if (sharer.getSharedStorage(keyLayoutIsSelected) === true) {
@@ -155,12 +151,18 @@ export const MiddlewareLayoutSelector = (opts, config) => {
                         updateCursor(layoutControlType);
                     }
                 }
+                if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
+                    return false;
+                }
                 return;
             }
-            if (sharer.getSharedStorage(keyLayoutIsHover) && !prevIsHover) {
+            if (sharer.getSharedStorage(keyLayoutIsHoverContent) && !prevIsHoverContent) {
                 viewer.drawFrame();
             }
-            prevIsHover = sharer.getSharedStorage(keyLayoutIsHover);
+            prevIsHoverContent = sharer.getSharedStorage(keyLayoutIsHoverContent);
+            if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
+                return false;
+            }
         },
         pointStart: (e) => {
             if (isInElementAction()) {
@@ -186,6 +188,9 @@ export const MiddlewareLayoutSelector = (opts, config) => {
                 viewer.drawFrame();
             }
             prevIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
+            if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
+                return false;
+            }
         },
         pointMove: (e) => {
             if (!sharer.getSharedStorage(keyLayoutIsSelected)) {
@@ -198,7 +203,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             const data = sharer.getActiveStorage('data');
             if (layoutActionType === 'resize' && layoutControlType && (data === null || data === void 0 ? void 0 : data.layout)) {
                 if (prevPoint) {
-                    isBusy = true;
+                    sharer.setSharedStorage(keyLayoutIsBusyMoving, true);
                     const scale = sharer.getActiveStorage('scale');
                     const viewMoveX = e.point.x - prevPoint.x;
                     const viewMoveY = e.point.y - prevPoint.y;
@@ -288,7 +293,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             }
         },
         pointEnd: () => {
-            isBusy = false;
+            sharer.setSharedStorage(keyLayoutIsBusyMoving, false);
             const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
             const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
             const data = sharer.getActiveStorage('data');
@@ -298,6 +303,9 @@ export const MiddlewareLayoutSelector = (opts, config) => {
                     data
                 });
             }
+            if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
+                return false;
+            }
         },
         beforeDrawFrame: ({ snapshot }) => {
             var _a;
@@ -306,7 +314,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             }
             const { sharedStore, activeStore } = snapshot;
             const layoutActionType = sharedStore[keyLayoutActionType];
-            const layoutIsHover = sharedStore[keyLayoutIsHover];
+            const layoutIsHover = sharedStore[keyLayoutIsHoverContent];
             const layoutIsSelected = sharedStore[keyLayoutIsSelected];
             if ((_a = activeStore.data) === null || _a === void 0 ? void 0 : _a.layout) {
                 const { x, y, w, h } = activeStore.data.layout;

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

@@ -1,5 +1,5 @@
 import type { LayoutSizeController, Element } from '@idraw/types';
-import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHover, keyLayoutIsSelected } from './config';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving } from './config';
 import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';
 import type { ActionType as ElementActionType } from '../selector';
 export type ActionType = 'resize' | null;
@@ -10,6 +10,8 @@ export type LayoutSelectorSharedStorage = {
     [keyLayoutController]: LayoutSizeController | null;
     [keyElementActionType]: ElementActionType | null;
     [keyHoverElement]: Element | null;
-    [keyLayoutIsHover]: boolean | null;
+    [keyLayoutIsHoverContent]: boolean | null;
+    [keyLayoutIsHoverController]: boolean | null;
     [keyLayoutIsSelected]: boolean | null;
+    [keyLayoutIsBusyMoving]: boolean | null;
 };

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

@@ -1,2 +1,2 @@
-import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHover, keyLayoutIsSelected } from './config';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving } from './config';
 import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';

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

@@ -25,4 +25,6 @@ export declare const selectWrapperBorderWidth = 2;
 export declare const resizeControllerBorderWidth = 4;
 export declare const areaBorderWidth = 1;
 export declare const controllerSize = 10;
+export declare const rotateControllerSize = 20;
+export declare const rotateControllerPosition = 22;
 export declare const defaultStyle: MiddlewareSelectorStyle;

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

@@ -24,6 +24,8 @@ export const selectWrapperBorderWidth = 2;
 export const resizeControllerBorderWidth = 4;
 export const areaBorderWidth = 1;
 export const controllerSize = 10;
+export const rotateControllerSize = 20;
+export const rotateControllerPosition = 22;
 const activeColor = '#1973ba';
 const activeAreaColor = '#1976d21c';
 const lockedColor = '#5b5959b5';

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

@@ -0,0 +1,5 @@
+import type { ElementSizeController, ViewContext2D, ViewSizeInfo, ViewScaleInfo } from '@idraw/types';
+export declare function drawDebugStoreSelectedElementController(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
+    viewSizeInfo: ViewSizeInfo;
+    viewScaleInfo: ViewScaleInfo;
+}): void;

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

@@ -0,0 +1,30 @@
+import { calcViewPointSize } from '@idraw/util';
+function drawDebugControllerVertexes(opts) {
+    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.fillStyle = '#FF0000A1';
+    ctx.moveTo(v0.x, v0.y);
+    ctx.lineTo(v1.x, v1.y);
+    ctx.lineTo(v2.x, v2.y);
+    ctx.lineTo(v3.x, v3.y);
+    ctx.lineTo(v0.x, v0.y);
+    ctx.closePath();
+    ctx.fill();
+    return false;
+}
+export function drawDebugStoreSelectedElementController(ctx, controller, opts) {
+    if (!controller) {
+        return;
+    }
+    const { viewSizeInfo, viewScaleInfo } = opts;
+    const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = controller;
+    const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate];
+    for (let i = 0; i < ctrls.length; i++) {
+        const ctrl = ctrls[i];
+        drawDebugControllerVertexes({ ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo });
+    }
+}

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

@@ -18,6 +18,7 @@ export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2
     element: Element | null;
     calculator: ViewCalculator;
     style: MiddlewareSelectorStyle;
+    rotateControllerPattern: ViewContext2D;
 }): 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,6 +1,6 @@
 import { rotateElementVertexes, calcViewPointSize, calcViewVertexes, calcViewElementSize } from '@idraw/util';
-import { resizeControllerBorderWidth, areaBorderWidth, selectWrapperBorderWidth, controllerSize } from './config';
-import { drawVertexes, drawLine, drawCircleController, drawCrossVertexes } from './draw-base';
+import { resizeControllerBorderWidth, areaBorderWidth, selectWrapperBorderWidth } from './config';
+import { drawVertexes, drawCircleController, drawCrossVertexes } from './draw-base';
 export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
@@ -36,19 +36,21 @@ export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
     if (!controller) {
         return;
     }
-    const { hideControllers, style } = opts;
+    const { hideControllers, style, rotateControllerPattern, viewSizeInfo } = opts;
+    const { devicePixelRatio = 1 } = viewSizeInfo;
     const { activeColor } = style;
-    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
+    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, rotate } = controller;
     const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
     const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
     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 }));
+        drawCircleController(ctx, calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { size: rotate.size, borderWidth: 0 }));
+        const rotateCenter = calcViewPointSize(rotate.center, opts);
+        ctx.drawImage(rotateControllerPattern.canvas, 0, 0, rotateControllerPattern.canvas.width / devicePixelRatio, rotateControllerPattern.canvas.height / devicePixelRatio, rotateCenter.x - rotate.size / 2, rotateCenter.y - rotate.size / 2, rotate.size, rotate.size);
     }
 }
 export function drawElementListShadows(ctx, elements, opts) {

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

@@ -1,6 +1,11 @@
 import type { CoreEventMap, MiddlewareSelectorConfig } from '@idraw/types';
 import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
 import { keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from '../info';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export type { DeepSelectorSharedStorage, ActionType };
-export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap, MiddlewareSelectorConfig>;
+export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap & {
+    [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
+        show: boolean;
+    };
+}, MiddlewareSelectorConfig>;

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

@@ -2,10 +2,12 @@ import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueV
 import { drawHoverVertexesWrapper, drawLockedVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { drawReferenceLines } from './draw-reference';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, defaultStyle } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, rotateControllerSize, rotateControllerPosition, defaultStyle } from './config';
 import { calcReferenceInfo } from './reference';
 import { coreEventKeys } from '../../config';
-import { keyLayoutIsSelected } from '../layout-selector';
+import { keyLayoutIsSelected, keyLayoutIsBusyMoving } from '../layout-selector';
+import { createRotateControllerPattern } from './pattern';
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from '../info';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export const MiddlewareSelector = (opts, config) => {
     const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
@@ -18,6 +20,10 @@ export const MiddlewareSelector = (opts, config) => {
     let moveOriginalStartElementSize = null;
     let inBusyMode = null;
     let hasChangedData = null;
+    const rotateControllerPattern = createRotateControllerPattern({
+        fill: style.activeColor,
+        devicePixelRatio: sharer.getActiveViewSizeInfo().devicePixelRatio
+    });
     sharer.setSharedStorage(keyActionType, null);
     sharer.setSharedStorage(keyEnableSnapToGrid, true);
     const getActiveElements = () => {
@@ -54,16 +60,24 @@ export const MiddlewareSelector = (opts, config) => {
         }
         sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
     };
-    const updateSelectedElementList = (list, opts) => {
-        var _a;
-        sharer.setSharedStorage(keySelectedElementList, list);
+    const updateSelectedElemenetController = () => {
+        const list = sharer.getSharedStorage(keySelectedElementList);
         if (list.length === 1) {
             const controller = calcElementSizeController(list[0], {
                 groupQueue: sharer.getSharedStorage(keyGroupQueue),
                 controllerSize,
-                viewScaleInfo: sharer.getActiveViewScaleInfo()
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                rotateControllerPosition,
+                rotateControllerSize
             });
             sharer.setSharedStorage(keySelectedElementController, controller);
+        }
+    };
+    const updateSelectedElementList = (list, opts) => {
+        var _a;
+        sharer.setSharedStorage(keySelectedElementList, list);
+        if (list.length === 1) {
+            updateSelectedElemenetController();
             sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage('data')) === null || _a === void 0 ? void 0 : _a.elements) || []));
         }
         else {
@@ -160,6 +174,10 @@ export const MiddlewareSelector = (opts, config) => {
         hover: (e) => {
             var _a, _b, _c, _d, _e;
             const layoutIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
+            const layoutIsBusyMoving = sharer.getSharedStorage(keyLayoutIsBusyMoving);
+            if (layoutIsBusyMoving === true) {
+                return;
+            }
             const resizeType = sharer.getSharedStorage(keyResizeType);
             const actionType = sharer.getSharedStorage(keyActionType);
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
@@ -345,6 +363,7 @@ export const MiddlewareSelector = (opts, config) => {
             if (actionType === 'drag') {
                 hasChangedData = true;
                 inBusyMode = 'drag';
+                eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: false });
                 if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && moveOriginalStartElementSize && originalStart && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) !== true) {
                     const { moveX, moveY } = calcMoveInGroup(originalStart, end, groupQueue);
                     let totalMoveX = calculator.toGridNum(moveX / scale);
@@ -508,6 +527,9 @@ export const MiddlewareSelector = (opts, config) => {
             prevPoint = null;
             moveOriginalStartPoint = null;
             moveOriginalStartElementSize = null;
+            if (actionType === 'drag') {
+                eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: true });
+            }
             if (actionType === 'resize' && resizeType) {
                 sharer.setSharedStorage(keyResizeType, null);
                 needDrawFrame = true;
@@ -579,11 +601,11 @@ export const MiddlewareSelector = (opts, config) => {
             finalDrawFrame();
         },
         pointLeave() {
-            prevPoint = null;
-            moveOriginalStartPoint = null;
-            moveOriginalStartElementSize = null;
-            clear();
-            viewer.drawFrame();
+            inBusyMode = null;
+            sharer.setSharedStorage(keyResizeType, null);
+            eventHub.trigger(coreEventKeys.CURSOR, {
+                type: 'default'
+            });
         },
         doubleClick(e) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -614,6 +636,12 @@ export const MiddlewareSelector = (opts, config) => {
             }
             sharer.setSharedStorage(keyActionType, null);
         },
+        wheel() {
+            updateSelectedElemenetController();
+        },
+        wheelScale() {
+            updateSelectedElemenetController();
+        },
         contextMenu: (e) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
@@ -671,30 +699,21 @@ export const MiddlewareSelector = (opts, config) => {
             const isMoving = sharedStore[keyIsMoving];
             const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
             const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
-            const selectedElementController = elem
-                ? calcElementSizeController(elem, {
-                    groupQueue,
-                    controllerSize: 10,
-                    viewScaleInfo
-                })
-                : null;
+            const selectedElementController = sharedStore[keySelectedElementController];
             const isHoverLocked = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.locked);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
                 if (hoverElement && actionType !== 'drag') {
                     if (isHoverLocked) {
-                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
-                                groupQueue,
-                                controllerSize: 10,
-                                viewScaleInfo
-                            }), style }));
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: selectedElementController, style }));
                     }
                     else {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
                 if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern,
+                        style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
                             const referenceInfo = calcReferenceInfo(elem.uuid, {
@@ -721,18 +740,15 @@ export const MiddlewareSelector = (opts, config) => {
             else {
                 if (hoverElement && actionType !== 'drag') {
                     if (isHoverLocked) {
-                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
-                                groupQueue,
-                                controllerSize: 10,
-                                viewScaleInfo
-                            }), style }));
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: selectedElementController, style }));
                     }
                     else {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
                 if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern,
+                        style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
                             const referenceInfo = calcReferenceInfo(elem.uuid, {

package/dist/esm/middleware/selector/pattern/icon-rotate.d.ts

@@ -0,0 +1,4 @@
+import type { Element } from '@idraw/types';
+export declare const createIconRotate: (opts?: {
+    fill?: string;
+}) => Element<"path", Record<string, any>>;