@idraw/core 0.4.0-beta.31 → 0.4.0-beta.33

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

@@ -1,5 +1,5 @@
 import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
-import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
+import { keySelectedElementList, keyHoverElement, keyActionType, keyGroupQueue } from '../selector';
 import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
 import { defaltStyle } from './config';
 const infoFontSize = 10;
@@ -16,11 +16,13 @@ export const MiddlewareInfo = (opts, config) => {
     return {
         name: '@middleware/info',
         beforeDrawFrame({ snapshot }) {
+            var _a;
             const { sharedStore } = snapshot;
             const selectedElementList = sharedStore[keySelectedElementList];
+            const hoverElement = sharedStore[keyHoverElement];
             const actionType = sharedStore[keyActionType];
             const groupQueue = sharedStore[keyGroupQueue] || [];
-            if (selectedElementList.length === 1) {
+            if (selectedElementList.length === 1 && !((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.locked)) {
                 const elem = selectedElementList[0];
                 if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);

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

@@ -1,3 +1,3 @@
-import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
+import { keySelectedElementList, keyHoverElement, keyActionType, keyGroupQueue } from '../selector';
 import type { DeepSelectorSharedStorage } from '../selector';
-export type DeepInfoSharedStorage = Pick<DeepSelectorSharedStorage, typeof keySelectedElementList | typeof keyActionType | typeof keyGroupQueue>;
+export type DeepInfoSharedStorage = Pick<DeepSelectorSharedStorage, typeof keySelectedElementList | typeof keyHoverElement | typeof keyActionType | typeof keyGroupQueue>;

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

@@ -1,9 +1,9 @@
+import type { MiddlewareLayoutSelectorStyle } from '@idraw/types';
 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 keyLayoutIsSelected: unique symbol;
-export declare const selectColor = "#b331c9";
-export declare const disableColor = "#5b5959b5";
 export declare const controllerSize = 10;
+export declare const defaultStyle: MiddlewareLayoutSelectorStyle;

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

@@ -4,6 +4,7 @@ export const keyLayoutControlType = Symbol(`${key}_layoutControlType`);
 export const keyLayoutController = Symbol(`${key}_layoutController`);
 export const keyLayoutIsHover = Symbol(`${key}_layoutIsHover`);
 export const keyLayoutIsSelected = Symbol(`${key}_layoutIsSelected`);
-export const selectColor = '#b331c9';
-export const disableColor = '#5b5959b5';
 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 } from '@idraw/types';
+import type { BoardMiddleware, MiddlewareLayoutSelectorConfig } from '@idraw/types';
 import type { LayoutSelectorSharedStorage } from './types';
 import { keyLayoutIsSelected } from './config';
 export { keyLayoutIsSelected };
-export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage>;
+export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage, any, MiddlewareLayoutSelectorConfig>;

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

@@ -1,12 +1,15 @@
 import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize } from '@idraw/util';
-import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize } from './config';
+import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize, defaultStyle } from './config';
 import { keyActionType as keyElementActionType, keyHoverElement, middlewareEventSelectClear } from '../selector';
 import { drawLayoutController, drawLayoutHover } from './util';
 import { eventChange } from '../../config';
 export { keyLayoutIsSelected };
-export const MiddlewareLayoutSelector = (opts) => {
+export const MiddlewareLayoutSelector = (opts, config) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
     const { overlayContext } = boardContent;
+    const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const { activeColor } = innerConfig;
+    const style = { activeColor };
     let prevPoint = null;
     let prevIsHover = null;
     let prevIsSelected = null;
@@ -312,10 +315,10 @@ export const MiddlewareLayoutSelector = (opts) => {
                 const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize });
                 if (layoutIsHover === true) {
                     const viewSize = calcViewElementSize(size, { viewScaleInfo });
-                    drawLayoutHover(overlayContext, { layoutSize: viewSize });
+                    drawLayoutHover(overlayContext, { layoutSize: viewSize, style });
                 }
                 if ((layoutActionType && ['resize'].includes(layoutActionType)) || layoutIsSelected === true) {
-                    drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} });
+                    drawLayoutController(overlayContext, { controller, style });
                 }
             }
         },

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

@@ -1,8 +1,9 @@
-import type { ViewContext2D, LayoutSizeController, DataLayout, ElementSize } from '@idraw/types';
+import type { ViewContext2D, LayoutSizeController, ElementSize, MiddlewareLayoutSelectorStyle } from '@idraw/types';
 export declare function drawLayoutController(ctx: ViewContext2D, opts: {
     controller: LayoutSizeController;
-    operations: DataLayout['operations'];
+    style: MiddlewareLayoutSelectorStyle;
 }): void;
 export declare function drawLayoutHover(ctx: ViewContext2D, opts: {
     layoutSize: ElementSize;
+    style: MiddlewareLayoutSelectorStyle;
 }): void;

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

@@ -1,5 +1,5 @@
-import { selectColor, disableColor } from './config';
-function drawControllerBox(ctx, boxVertexes) {
+function drawControllerBox(ctx, boxVertexes, style) {
+    const { activeColor } = style;
     ctx.setLineDash([]);
     ctx.fillStyle = '#FFFFFF';
     ctx.beginPath();
@@ -9,7 +9,7 @@ function drawControllerBox(ctx, boxVertexes) {
     ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
     ctx.closePath();
     ctx.fill();
-    ctx.strokeStyle = selectColor;
+    ctx.strokeStyle = activeColor;
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
@@ -19,26 +19,11 @@ function drawControllerBox(ctx, boxVertexes) {
     ctx.closePath();
     ctx.stroke();
 }
-function drawControllerCross(ctx, opts) {
-    const { vertexes, strokeStyle, lineWidth } = opts;
-    ctx.setLineDash([]);
-    ctx.strokeStyle = strokeStyle;
-    ctx.lineWidth = lineWidth;
-    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();
-}
 function drawControllerLine(ctx, opts) {
-    const { start, end, centerVertexes, disabled } = opts;
-    const lineWidth = disabled === true ? 1 : 2;
-    const strokeStyle = disabled === true ? disableColor : selectColor;
+    const { start, end, style } = opts;
+    const { activeColor } = style;
+    const lineWidth = 2;
+    const strokeStyle = activeColor;
     ctx.setLineDash([]);
     ctx.strokeStyle = strokeStyle;
     ctx.lineWidth = lineWidth;
@@ -47,55 +32,25 @@ function drawControllerLine(ctx, opts) {
     ctx.lineTo(end.x, end.y);
     ctx.closePath();
     ctx.stroke();
-    if (disabled === true) {
-        drawControllerCross(ctx, {
-            vertexes: centerVertexes,
-            lineWidth,
-            strokeStyle
-        });
-    }
 }
 export function drawLayoutController(ctx, opts) {
-    const { controller, operations } = opts;
+    const { controller, style } = opts;
     const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller;
-    drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledTop) });
-    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledRight) });
-    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledBottom) });
-    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledLeft) });
-    const disabledOpts = {
-        lineWidth: 1,
-        strokeStyle: disableColor
-    };
-    if ((operations === null || operations === void 0 ? void 0 : operations.disabledTopLeft) === true) {
-        drawControllerCross(ctx, Object.assign({ vertexes: topLeft.vertexes }, disabledOpts));
-    }
-    else {
-        drawControllerBox(ctx, topLeft.vertexes);
-    }
-    if ((operations === null || operations === void 0 ? void 0 : operations.disabledTopRight) === true) {
-        drawControllerCross(ctx, Object.assign({ vertexes: topRight.vertexes }, disabledOpts));
-    }
-    else {
-        drawControllerBox(ctx, topRight.vertexes);
-    }
-    if ((operations === null || operations === void 0 ? void 0 : operations.disabledBottomRight) === true) {
-        drawControllerCross(ctx, Object.assign({ vertexes: bottomRight.vertexes }, disabledOpts));
-    }
-    else {
-        drawControllerBox(ctx, bottomRight.vertexes);
-    }
-    if ((operations === null || operations === void 0 ? void 0 : operations.disabledBottomLeft) === true) {
-        drawControllerCross(ctx, Object.assign({ vertexes: bottomLeft.vertexes }, disabledOpts));
-    }
-    else {
-        drawControllerBox(ctx, bottomLeft.vertexes);
-    }
+    drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, style });
+    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, style });
+    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, style });
+    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, style });
+    drawControllerBox(ctx, topLeft.vertexes, style);
+    drawControllerBox(ctx, topRight.vertexes, style);
+    drawControllerBox(ctx, bottomRight.vertexes, style);
+    drawControllerBox(ctx, bottomLeft.vertexes, style);
 }
 export function drawLayoutHover(ctx, opts) {
-    const { layoutSize } = opts;
+    const { layoutSize, style } = opts;
+    const { activeColor } = style;
     const { x, y, w, h } = layoutSize;
     ctx.setLineDash([]);
-    ctx.strokeStyle = selectColor;
+    ctx.strokeStyle = activeColor;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(x, y);

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

@@ -1,11 +1,11 @@
-import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController, ViewCalculator } from '@idraw/types';
-import type { AreaSize, MiddlewareSelectorStyle } from './types';
+import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController, ViewCalculator, MiddlewareSelectorStyle } from '@idraw/types';
+import type { AreaSize } from './types';
 export declare function drawHoverVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
     style: MiddlewareSelectorStyle;
 }): void;
-export declare function drawLockVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
+export declare function drawLockedVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
     controller?: ElementSizeController | null;

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

@@ -10,7 +10,7 @@ export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     const wrapperOpts = { borderColor: activeColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
 }
-export function drawLockVertexesWrapper(ctx, vertexes, opts) {
+export function drawLockedVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
     }

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

@@ -1,5 +1,5 @@
-import { is, 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 { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, 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 { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, defaultStyle } from './config';
@@ -16,6 +16,8 @@ export const MiddlewareSelector = (opts, config) => {
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
+    let moveOriginalStartPoint = null;
+    let moveOriginalStartElementSize = null;
     let inBusyMode = null;
     sharer.setSharedStorage(keyActionType, null);
     sharer.setSharedStorage(keyEnableSnapToGrid, true);
@@ -101,7 +103,6 @@ export const MiddlewareSelector = (opts, config) => {
         sharer.setSharedStorage(keySelectedElementController, null);
         sharer.setSharedStorage(keySelectedElementPosition, []);
         sharer.setSharedStorage(keyIsMoving, null);
-        sharer.setSharedStorage(keyEnableSelectInGroup, null);
     };
     clear();
     const selectCallback = ({ uuids, positions }) => {
@@ -250,8 +251,9 @@ export const MiddlewareSelector = (opts, config) => {
             }
         },
         pointStart: (e) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             prevPoint = e.point;
+            moveOriginalStartPoint = e.point;
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 if (isPointInViewActiveGroup(e.point, {
@@ -261,17 +263,20 @@ export const MiddlewareSelector = (opts, config) => {
                     groupQueue
                 })) {
                     const target = getPointTarget(e.point, pointTargetBaseOptions());
-                    if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.lock) === true) {
+                    if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.locked) === true) {
                         return;
                     }
                     else {
                         updateHoverElement(null);
                     }
-                    if (target.type === 'over-element' && ((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length) === 1) {
+                    if (((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length) === 1) {
+                        moveOriginalStartElementSize = getElementSize(target === null || target === void 0 ? void 0 : target.elements[0]);
+                    }
+                    if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
                         updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                         sharer.setSharedStorage(keyActionType, 'drag');
                     }
-                    else if ((_e = target.type) === null || _e === void 0 ? void 0 : _e.startsWith('resize-')) {
+                    else if ((_f = target.type) === null || _f === void 0 ? void 0 : _f.startsWith('resize-')) {
                         sharer.setSharedStorage(keyResizeType, target.type);
                         sharer.setSharedStorage(keyActionType, 'resize');
                     }
@@ -291,22 +296,31 @@ export const MiddlewareSelector = (opts, config) => {
                 calculator
             });
             const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
-            if (((_f = target === null || target === void 0 ? void 0 : target.elements) === null || _f === void 0 ? void 0 : _f.length) === 1 && ((_h = (_g = target.elements[0]) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.lock) === true) {
-                return;
-            }
-            else {
+            const isLockedElement = ((_g = target === null || target === void 0 ? void 0 : target.elements) === null || _g === void 0 ? void 0 : _g.length) === 1 && ((_j = (_h = target.elements[0]) === null || _h === void 0 ? void 0 : _h.operations) === null || _j === void 0 ? void 0 : _j.locked) === true;
+            if (!isLockedElement) {
                 updateHoverElement(null);
             }
-            if (target.type === 'list-area') {
-                sharer.setSharedStorage(keyActionType, 'drag-list');
-            }
-            else if (target.type === 'over-element' && ((_j = target === null || target === void 0 ? void 0 : target.elements) === null || _j === void 0 ? void 0 : _j.length) === 1) {
-                updateSelectedElementList([target.elements[0]], { triggerEvent: true });
-                sharer.setSharedStorage(keyActionType, 'drag');
+            if (((_k = target === null || target === void 0 ? void 0 : target.elements) === null || _k === void 0 ? void 0 : _k.length) === 1) {
+                moveOriginalStartElementSize = getElementSize(target === null || target === void 0 ? void 0 : target.elements[0]);
             }
-            else if ((_k = target.type) === null || _k === void 0 ? void 0 : _k.startsWith('resize-')) {
-                sharer.setSharedStorage(keyResizeType, target.type);
-                sharer.setSharedStorage(keyActionType, 'resize');
+            if (!isLockedElement) {
+                if (target.type === 'list-area') {
+                    sharer.setSharedStorage(keyActionType, 'drag-list');
+                }
+                else if (target.type === 'over-element' && ((_l = target === null || target === void 0 ? void 0 : target.elements) === null || _l === void 0 ? void 0 : _l.length) === 1) {
+                    updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                    sharer.setSharedStorage(keyActionType, 'drag');
+                }
+                else if ((_m = target.type) === null || _m === void 0 ? void 0 : _m.startsWith('resize-')) {
+                    sharer.setSharedStorage(keyResizeType, target.type);
+                    sharer.setSharedStorage(keyActionType, 'resize');
+                }
+                else {
+                    clear();
+                    sharer.setSharedStorage(keyActionType, 'area');
+                    sharer.setSharedStorage(keyAreaStart, e.point);
+                    updateSelectedElementList([], { triggerEvent: true });
+                }
             }
             else {
                 clear();
@@ -325,6 +339,7 @@ export const MiddlewareSelector = (opts, config) => {
             const viewScaleInfo = sharer.getActiveViewScaleInfo();
             const viewSizeInfo = sharer.getActiveViewSizeInfo();
             const start = prevPoint;
+            const originalStart = moveOriginalStartPoint;
             const end = e.point;
             const resizeType = sharer.getSharedStorage(keyResizeType);
             const actionType = sharer.getSharedStorage(keyActionType);
@@ -332,8 +347,8 @@ export const MiddlewareSelector = (opts, config) => {
             const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
             if (actionType === 'drag') {
                 inBusyMode = 'drag';
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) !== true) {
-                    const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
+                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);
                     let totalMoveY = calculator.toGridNum(moveY / scale);
                     if (enableSnapToGrid === true) {
@@ -358,8 +373,8 @@ export const MiddlewareSelector = (opts, config) => {
                             console.error(err);
                         }
                     }
-                    elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
-                    elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
+                    elems[0].x = calculator.toGridNum(moveOriginalStartElementSize.x + totalMoveX);
+                    elems[0].y = calculator.toGridNum(moveOriginalStartElementSize.y + totalMoveY);
                     updateSelectedElementList([elems[0]]);
                     calculator.modifyViewVisibleInfoMap(data, {
                         modifyOptions: {
@@ -377,12 +392,12 @@ export const MiddlewareSelector = (opts, config) => {
             }
             else if (actionType === 'drag-list') {
                 inBusyMode = 'drag-list';
-                if (data && start && end && (elems === null || elems === void 0 ? void 0 : elems.length) > 1) {
+                if (data && originalStart && start && end && (elems === null || elems === void 0 ? void 0 : elems.length) > 1) {
                     const moveX = (end.x - start.x) / scale;
                     const moveY = (end.y - start.y) / scale;
                     elems.forEach((elem) => {
                         var _a;
-                        if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) !== true) {
+                        if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.locked) !== true) {
                             elem.x = calculator.toGridNum(elem.x + moveX);
                             elem.y = calculator.toGridNum(elem.y + moveY);
                             calculator.modifyViewVisibleInfoMap(data, {
@@ -403,7 +418,7 @@ export const MiddlewareSelector = (opts, config) => {
                 viewer.drawFrame();
             }
             else if (actionType === 'resize') {
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && (resizeType === null || resizeType === void 0 ? void 0 : resizeType.startsWith('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-'))) {
                     inBusyMode = 'resize';
                     const pointGroupQueue = [];
                     groupQueue.forEach((group) => {
@@ -416,10 +431,10 @@ export const MiddlewareSelector = (opts, config) => {
                             angle: 0 - angle
                         });
                     });
-                    let resizeStart = start;
+                    let resizeStart = originalStart;
                     let resizeEnd = end;
                     if (groupQueue.length > 0) {
-                        resizeStart = rotatePointInGroup(start, pointGroupQueue);
+                        resizeStart = rotatePointInGroup(originalStart, pointGroupQueue);
                         resizeEnd = rotatePointInGroup(end, pointGroupQueue);
                     }
                     if (resizeType === 'resize-rotate') {
@@ -431,11 +446,11 @@ export const MiddlewareSelector = (opts, config) => {
                             controller.bottomRight.center
                         ];
                         const viewCenter = calcElementCenterFromVertexes(viewVertexes);
-                        const resizedElemSize = rotateElement(elems[0], {
+                        const resizedElemSize = rotateElement(moveOriginalStartElementSize, {
                             center: viewCenter,
                             viewScaleInfo,
                             viewSizeInfo,
-                            start,
+                            start: originalStart,
                             end,
                             resizeType,
                             sharer
@@ -443,8 +458,8 @@ export const MiddlewareSelector = (opts, config) => {
                         elems[0].angle = calculator.toGridNum(resizedElemSize.angle || 0);
                     }
                     else {
-                        const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-                        const calcOpts = { ignore: !!elems[0].angle };
+                        const resizedElemSize = resizeElement(moveOriginalStartElementSize, { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
+                        const calcOpts = { ignore: !!moveOriginalStartElementSize.angle };
                         elems[0].x = calculator.toGridNum(resizedElemSize.x, calcOpts);
                         elems[0].y = calculator.toGridNum(resizedElemSize.y, calcOpts);
                         if (elems[0].type === 'group' && ((_c = elems[0].operations) === null || _c === void 0 ? void 0 : _c.deepResize) === true) {
@@ -491,6 +506,8 @@ export const MiddlewareSelector = (opts, config) => {
             const viewSizeInfo = sharer.getActiveViewSizeInfo();
             let needDrawFrame = false;
             prevPoint = null;
+            moveOriginalStartPoint = null;
+            moveOriginalStartElementSize = null;
             if (actionType === 'resize' && resizeType) {
                 sharer.setSharedStorage(keyResizeType, null);
                 needDrawFrame = true;
@@ -560,6 +577,8 @@ export const MiddlewareSelector = (opts, config) => {
         },
         pointLeave() {
             prevPoint = null;
+            moveOriginalStartPoint = null;
+            moveOriginalStartElementSize = null;
             clear();
             viewer.drawFrame();
         },
@@ -571,7 +590,7 @@ export const MiddlewareSelector = (opts, config) => {
             const target = getPointTarget(e.point, pointTargetBaseOptions());
             sharer.setSharedStorage(keySelectedElementController, null);
             sharer.setSharedStorage(keySelectedElementList, []);
-            if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) === true) {
+            if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) === true) {
                 return;
             }
             if (target.elements.length === 1 && ((_c = target.elements[0]) === null || _c === void 0 ? void 0 : _c.type) === 'group') {
@@ -618,12 +637,12 @@ export const MiddlewareSelector = (opts, config) => {
                     viewScaleInfo
                 })
                 : null;
-            const isLock = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.lock);
+            const isLocked = !!((_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 (isLock) {
-                        drawLockVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                    if (isLocked) {
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
@@ -633,7 +652,7 @@ export const MiddlewareSelector = (opts, config) => {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
-                if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (!isLocked && elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
@@ -660,8 +679,8 @@ export const MiddlewareSelector = (opts, config) => {
             }
             else {
                 if (hoverElement && actionType !== 'drag') {
-                    if (isLock) {
-                        drawLockVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                    if (isLocked) {
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
@@ -671,7 +690,7 @@ export const MiddlewareSelector = (opts, config) => {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
-                if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (!isLocked && elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {

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

@@ -23,14 +23,14 @@ export declare function getPointTarget(p: PointSize, opts: {
     groupQueue: Element<'group'>[] | null;
     selectedElementController: ElementSizeController | null;
 }): PointTarget;
-export declare function resizeElement(elem: Element<ElementType>, opts: {
+export declare function resizeElement(elem: ElementSize, opts: {
     start: PointSize;
     end: PointSize;
     resizeType: ResizeType;
     scale: number;
     sharer: StoreSharer;
 }): ElementSize;
-export declare function rotateElement(elem: Element<ElementType>, opts: {
+export declare function rotateElement(elem: ElementSize, opts: {
     center: PointSize;
     start: PointSize;
     end: PointSize;

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

@@ -703,10 +703,10 @@ export function getSelectedListArea(data, opts) {
     const endY = Math.max(start.y, end.y);
     for (let idx = 0; idx < data.elements.length; idx++) {
         const elem = data.elements[idx];
-        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) === true) {
+        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.locked) === true) {
             continue;
         }
-        const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+        const elemSize = calcViewElementSize(elem, { viewScaleInfo });
         const center = calcElementCenter(elemSize);
         if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
             indexes.push(idx);
@@ -733,14 +733,14 @@ export function calcSelectedElementsArea(elements, opts) {
         return null;
     }
     const area = { x: 0, y: 0, w: 0, h: 0 };
-    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { viewScaleInfo } = opts;
     let prevElemSize = null;
     for (let i = 0; i < elements.length; i++) {
         const elem = elements[i];
         if ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) {
             continue;
         }
-        const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+        const elemSize = calcViewElementSize(elem, { viewScaleInfo });
         if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
             const ves = rotateElementVertexes(elemSize);
             if (ves.length === 4) {