@idraw/core 0.4.0-beta.34 → 0.4.0-beta.36

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/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

@@ -1,11 +1,13 @@
-import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement, getElementSize } from '@idraw/util';
+import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, getElementPositionMapFromList, deepResizeGroupElement, getElementSize } from '@idraw/util';
 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 { 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);
@@ -17,6 +19,11 @@ export const MiddlewareSelector = (opts, config) => {
     let moveOriginalStartPoint = null;
     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 = () => {
@@ -53,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 {
@@ -70,7 +85,10 @@ export const MiddlewareSelector = (opts, config) => {
             sharer.setSharedStorage(keySelectedElementPosition, []);
         }
         if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
-            eventHub.trigger(coreEventKeys.SELECT, { uuids: list.map((elem) => elem.uuid), positions: [] });
+            const uuids = list.map((elem) => elem.uuid);
+            const data = sharer.getActiveStorage('data');
+            const positionMap = getElementPositionMapFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
+            eventHub.trigger(coreEventKeys.SELECT, { uuids, positions: list.map((elem) => [...positionMap[elem.uuid]]) });
         }
     };
     const pointTargetBaseOptions = () => {
@@ -339,7 +357,9 @@ export const MiddlewareSelector = (opts, config) => {
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
             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);
@@ -384,6 +404,7 @@ export const MiddlewareSelector = (opts, config) => {
                 viewer.drawFrame();
             }
             else if (actionType === 'drag-list') {
+                hasChangedData = true;
                 inBusyMode = 'drag-list';
                 if (data && originalStart && start && end && (elems === null || elems === void 0 ? void 0 : elems.length) > 1) {
                     const moveX = (end.x - start.x) / scale;
@@ -412,6 +433,7 @@ export const MiddlewareSelector = (opts, config) => {
             }
             else if (actionType === 'resize') {
                 if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && originalStart && moveOriginalStartElementSize && (resizeType === null || resizeType === void 0 ? void 0 : resizeType.startsWith('resize-'))) {
+                    hasChangedData = true;
                     inBusyMode = 'resize';
                     const pointGroupQueue = [];
                     groupQueue.forEach((group) => {
@@ -501,6 +523,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;
@@ -562,18 +587,21 @@ export const MiddlewareSelector = (opts, config) => {
                     if (type === 'resize') {
                         type = 'resizeElement';
                     }
-                    eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement });
+                    if (hasChangedData) {
+                        eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement });
+                        hasChangedData = false;
+                    }
                 }
                 viewer.drawFrame();
             };
             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;
@@ -604,6 +632,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);
@@ -661,30 +695,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, {
@@ -711,18 +736,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>>;

package/dist/esm/middleware/selector/pattern/icon-rotate.js

@@ -0,0 +1,88 @@
+import { createUUID } from '@idraw/util';
+export const createIconRotate = (opts) => {
+    const iconRotate = {
+        uuid: createUUID(),
+        type: 'path',
+        x: 0,
+        y: 0,
+        w: 200,
+        h: 200,
+        detail: Object.assign({ commands: [
+                {
+                    type: 'M',
+                    params: [512, 0]
+                },
+                {
+                    type: 'c',
+                    params: [282.8, 0, 512, 229.2, 512, 512]
+                },
+                {
+                    type: 's',
+                    params: [-229.2, 512, -512, 512]
+                },
+                {
+                    type: 'S',
+                    params: [0, 794.8, 0, 512, 229.2, 0, 512, 0]
+                },
+                {
+                    type: 'z',
+                    params: []
+                },
+                {
+                    type: 'm',
+                    params: [309.8, 253.8]
+                },
+                {
+                    type: 'c',
+                    params: [0, -10.5, -6.5, -19.8, -15.7, -23.8, -9.7, -4, -21, -2, -28.2, 5.6]
+                },
+                {
+                    type: 'l',
+                    params: [-52.5, 52]
+                },
+                {
+                    type: 'c',
+                    params: [
+                        -56.9, -53.7, -133.9, -85.5, -213.4, -85.5, -170.7, 0, -309.8, 139.2, -309.8, 309.8, 0, 170.6, 139.2, 309.8, 309.8, 309.8, 92.4, 0, 179.5, -40.8,
+                        238.4, -111.8, 4, -5.2, 4, -12.9, -0.8, -17.3
+                    ]
+                },
+                {
+                    type: 'L',
+                    params: [694.3, 637]
+                },
+                {
+                    type: 'c',
+                    params: [
+                        -2.8, -2.4, -6.5, -3.6, -10.1, -3.6, -3.6, 0.4, -7.3, 2, -9.3, 4.8, -39.5, 51.2, -98.8, 80.3, -163, 80.3, -113.8, 0, -206.5, -92.8, -206.5, -206.5,
+                        0, -113.8, 92.8, -206.5, 206.5, -206.5, 52.8, 0, 102.9, 20.2, 140.8, 55.3
+                    ]
+                },
+                {
+                    type: 'L',
+                    params: [597, 416.5]
+                },
+                {
+                    type: 'c',
+                    params: [-7.7, 7.3, -9.7, 18.6, -5.6, 27.9, 4, 9.7, 13.3, 16.1, 23.8, 16.1]
+                },
+                {
+                    type: 'H',
+                    params: [796]
+                },
+                {
+                    type: 'c',
+                    params: [14.1, 0, 25.8, -11.7, 25.8, -25.8]
+                },
+                {
+                    type: 'V',
+                    params: [253.8]
+                },
+                {
+                    type: 'z',
+                    params: []
+                }
+            ], fill: '#2c2c2c', stroke: 'transparent', strokeWidth: 0, originX: 0, originY: 0, originW: 1024, originH: 1024, opacity: 1 }, opts)
+    };
+    return iconRotate;
+};

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

@@ -0,0 +1,5 @@
+import type { ViewContext2D } from '@idraw/types';
+export declare function createRotateControllerPattern(opts: {
+    fill: string;
+    devicePixelRatio: number;
+}): ViewContext2D;

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

@@ -0,0 +1,38 @@
+import { createOffscreenContext2D } from '@idraw/util';
+import { drawElement } from '@idraw/renderer';
+import { createIconRotate } from './icon-rotate';
+export function createRotateControllerPattern(opts) {
+    const { fill, devicePixelRatio } = opts;
+    const iconRotate = createIconRotate({ fill });
+    const { w, h } = iconRotate;
+    const context2d = createOffscreenContext2D({
+        width: w,
+        height: h,
+        devicePixelRatio
+    });
+    drawElement(context2d, iconRotate, {
+        loader: undefined,
+        viewScaleInfo: {
+            scale: 1,
+            offsetTop: 0,
+            offsetBottom: 0,
+            offsetLeft: 0,
+            offsetRight: 0
+        },
+        viewSizeInfo: {
+            width: w,
+            height: h,
+            devicePixelRatio,
+            contextWidth: w,
+            contextHeight: h
+        },
+        parentElementSize: {
+            x: 0,
+            y: 0,
+            w,
+            h
+        },
+        parentOpacity: 1
+    });
+    return context2d;
+}

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

@@ -679,7 +679,7 @@ export function rotateElement(elem, opts) {
     });
     const startAngle = limitAngle(angle);
     const changedRadian = calcRadian(elemCenter, start, end);
-    const endAngle = startAngle + parseRadianToAngle(changedRadian);
+    const endAngle = limitAngle(startAngle + parseRadianToAngle(changedRadian));
     return {
         x,
         y,