@idraw/core 0.4.0-beta.2 → 0.4.0-beta.20

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

@@ -1,13 +1,12 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid } from './util';
+import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid, drawScrollerSelectedArea } from './util';
 export const middlewareEventRuler = '@middleware/show-ruler';
 export const MiddlewareRuler = (opts) => {
-    const key = 'RULE';
-    const { viewContent, viewer, eventHub } = opts;
-    const { helperContext, underContext } = viewContent;
+    const { boardContent, viewer, eventHub, calculator } = opts;
+    const { helperContext, underContext } = boardContent;
     let show = true;
     let showGrid = true;
-    eventHub.on(middlewareEventRuler, (e) => {
+    const rulerCallback = (e) => {
         if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean') {
             show = e.show;
         }
@@ -17,14 +16,20 @@ export const MiddlewareRuler = (opts) => {
         if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean' || typeof (e === null || e === void 0 ? void 0 : e.showGrid) === 'boolean') {
             viewer.drawFrame();
         }
-    });
+    };
     return {
-        mode: key,
-        isDefault: true,
+        name: '@middleware/ruler',
+        use() {
+            eventHub.on(middlewareEventRuler, rulerCallback);
+        },
+        disuse() {
+            eventHub.off(middlewareEventRuler, rulerCallback);
+        },
         beforeDrawFrame: ({ snapshot }) => {
             if (show === true) {
                 const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
                 const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+                drawScrollerSelectedArea(helperContext, { snapshot, calculator });
                 drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
                 const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
                 drawXRuler(helperContext, { scaleList: xList });

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,5 @@
-import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D } from '@idraw/types';
+import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator } from '@idraw/types';
+import type { DeepRulerSharedStorage } from './types';
 interface RulerScale {
     num: number;
     showNum: boolean;
@@ -30,4 +31,8 @@ export declare function drawUnderGrid(ctx: ViewContext2D, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): void;
+export declare function drawScrollerSelectedArea(ctx: ViewContext2D, opts: {
+    snapshot: BoardViewerFrameSnapshot<DeepRulerSharedStorage>;
+    calculator: ViewCalculator;
+}): void;
 export {};

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

@@ -1,4 +1,5 @@
-import { formatNumber, rotateByCenter } from '@idraw/util';
+import { formatNumber, rotateByCenter, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
+import { keySelectedElementList, keyActionType } from '../selector';
 const rulerSize = 16;
 const background = '#FFFFFFA8';
 const borderColor = '#00000080';
@@ -10,6 +11,7 @@ const fontWeight = 100;
 const gridColor = '#AAAAAA20';
 const gridKeyColor = '#AAAAAA40';
 const lineSize = 1;
+const selectedAreaColor = '#196097';
 function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
     const list = [];
@@ -185,3 +187,55 @@ export function drawUnderGrid(ctx, opts) {
         ctx.stroke();
     }
 }
+export function drawScrollerSelectedArea(ctx, opts) {
+    const { snapshot, calculator } = opts;
+    const { sharedStore } = snapshot;
+    const selectedElementList = sharedStore[keySelectedElementList];
+    const actionType = sharedStore[keyActionType];
+    if (['select', 'drag', 'drag-list', 'drag-list-end'].includes(actionType) && selectedElementList.length > 0) {
+        const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+        const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+        const rangeRectInfoList = [];
+        const xAreaStartList = [];
+        const xAreaEndList = [];
+        const yAreaStartList = [];
+        const yAreaEndList = [];
+        selectedElementList.forEach((elem) => {
+            const rectInfo = calculator.calcViewRectInfoFromRange(elem.uuid, {
+                viewScaleInfo,
+                viewSizeInfo
+            });
+            if (rectInfo) {
+                rangeRectInfoList.push(rectInfo);
+                xAreaStartList.push(rectInfo.left.x);
+                xAreaEndList.push(rectInfo.right.x);
+                yAreaStartList.push(rectInfo.top.y);
+                yAreaEndList.push(rectInfo.bottom.y);
+            }
+        });
+        if (!(rangeRectInfoList.length > 0)) {
+            return;
+        }
+        const xAreaStart = Math.min(...xAreaStartList);
+        const xAreaEnd = Math.max(...xAreaEndList);
+        const yAreaStart = Math.min(...yAreaStartList);
+        const yAreaEnd = Math.max(...yAreaEndList);
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.moveTo(xAreaStart, 0);
+        ctx.lineTo(xAreaEnd, 0);
+        ctx.lineTo(xAreaEnd, rulerSize);
+        ctx.lineTo(xAreaStart, rulerSize);
+        ctx.fillStyle = selectedAreaColor;
+        ctx.closePath();
+        ctx.fill();
+        ctx.beginPath();
+        ctx.moveTo(0, yAreaStart);
+        ctx.lineTo(rulerSize, yAreaStart);
+        ctx.lineTo(rulerSize, yAreaEnd);
+        ctx.lineTo(0, yAreaEnd);
+        ctx.fillStyle = selectedAreaColor;
+        ctx.closePath();
+        ctx.fill();
+    }
+}

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

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

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

@@ -1,13 +1,11 @@
 import { formatNumber } from '@idraw/util';
 export const middlewareEventScale = '@middleware/scale';
 export const MiddlewareScaler = (opts) => {
-    const key = 'SCALE';
     const { viewer, sharer, eventHub } = opts;
     const maxScale = 50;
     const minScale = 0.05;
     return {
-        mode: key,
-        isDefault: true,
+        name: '@middleware/scaler',
         wheelScale(e) {
             const { deltaY, point } = e;
             const { scale } = sharer.getActiveViewScaleInfo();

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

@@ -1,2 +1,3 @@
 import type { BoardMiddleware } from '@idraw/types';
-export declare const MiddlewareScroller: BoardMiddleware;
+import type { DeepScrollerSharedStorage } from './types';
+export declare const MiddlewareScroller: BoardMiddleware<DeepScrollerSharedStorage>;

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

@@ -1,8 +1,8 @@
 import { drawScroller, isPointInScrollThumb } from './util';
-import { key, keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
 export const MiddlewareScroller = (opts) => {
-    const { viewer, viewContent, sharer } = opts;
-    const { helperContext } = viewContent;
+    const { viewer, boardContent, sharer } = opts;
+    const { helperContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
     const clear = () => {
@@ -42,7 +42,7 @@ export const MiddlewareScroller = (opts) => {
         });
     };
     return {
-        mode: key,
+        name: '@middleware/scroller',
         wheel: (e) => {
             viewer.scroll({
                 moveX: 0 - e.deltaX,
@@ -74,7 +74,7 @@ export const MiddlewareScroller = (opts) => {
                 return false;
             }
         },
-        pointEnd: (e) => {
+        pointEnd: () => {
             const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
             clear();
             if (activeThumbType === 'X' || activeThumbType === 'Y') {

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

@@ -0,0 +1,9 @@
+import type { Point, ElementSize } from '@idraw/types';
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
+export type DeepScrollerSharedStorage = {
+    [keyXThumbRect]: null | ElementSize;
+    [keyYThumbRect]: null | ElementSize;
+    [keyPrevPoint]: null | Point;
+    [keyActivePoint]: null | Point;
+    [keyActiveThumbType]: null | 'X' | 'Y';
+};

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

@@ -0,0 +1 @@
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';

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

@@ -2,7 +2,7 @@ import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idra
 import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect } from './config';
 const minScrollerWidth = 12;
 const scrollerLineWidth = 16;
-const scrollerThumbAlpha = 0.36;
+const scrollerThumbAlpha = 0.3;
 const scrollConfig = {
     width: minScrollerWidth,
     thumbColor: '#000000AA',

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

@@ -8,8 +8,13 @@ export declare const keyHoverElementVertexes: unique symbol;
 export declare const keySelectedElementList: unique symbol;
 export declare const keySelectedElementListVertexes: unique symbol;
 export declare const keySelectedElementController: unique symbol;
+export declare const keySelectedElementPosition: unique symbol;
+export declare const keySelectedReferenceXLines: unique symbol;
+export declare const keySelectedReferenceYLines: unique symbol;
 export declare const keyGroupQueue: unique symbol;
 export declare const keyGroupQueueVertexesList: unique symbol;
+export declare const keyIsMoving: unique symbol;
+export declare const keyEnableSelectInGroup: unique symbol;
 export declare const keyDebugElemCenter: unique symbol;
 export declare const keyDebugStartVertical: unique symbol;
 export declare const keyDebugEndVertical: unique symbol;
@@ -20,3 +25,10 @@ export declare const selectWrapperBorderWidth = 2;
 export declare const resizeControllerBorderWidth = 4;
 export declare const areaBorderWidth = 1;
 export declare const wrapperColor = "#1973ba";
+export declare const lockColor = "#5b5959b5";
+export declare const controllerSize = 10;
+export declare const auxiliaryColor = "#f7276e";
+export declare const referenceColor = "#f7276e";
+export declare const middlewareEventSelect: string;
+export declare const middlewareEventSelectClear: string;
+export declare const middlewareEventSelectInGroup: string;

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

@@ -8,8 +8,13 @@ export const keyHoverElementVertexes = Symbol(`${key}_hoverElementVertexes`);
 export const keySelectedElementList = Symbol(`${key}_selectedElementList`);
 export const keySelectedElementListVertexes = Symbol(`${key}_selectedElementListVertexes`);
 export const keySelectedElementController = Symbol(`${key}_selectedElementController`);
+export const keySelectedElementPosition = Symbol(`${key}_selectedElementPosition`);
+export const keySelectedReferenceXLines = Symbol(`${key}_selectedReferenceXLines`);
+export const keySelectedReferenceYLines = Symbol(`${key}_selectedReferenceYLines`);
 export const keyGroupQueue = Symbol(`${key}_groupQueue`);
 export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`);
+export const keyIsMoving = Symbol(`${key}_isMoving`);
+export const keyEnableSelectInGroup = Symbol(`${key}_canSelectInGroup`);
 export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
 export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
 export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
@@ -20,3 +25,10 @@ export const selectWrapperBorderWidth = 2;
 export const resizeControllerBorderWidth = 4;
 export const areaBorderWidth = 1;
 export const wrapperColor = '#1973ba';
+export const lockColor = '#5b5959b5';
+export const controllerSize = 10;
+export const auxiliaryColor = '#f7276e';
+export const referenceColor = '#f7276e';
+export const middlewareEventSelect = '@middleware/select';
+export const middlewareEventSelectClear = '@middleware/select-clear';
+export const middlewareEventSelectInGroup = '@middleware/select-in-group';

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

@@ -0,0 +1,7 @@
+import type { ViewContext2D, Element, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
+export declare function drawAuxiliaryExperimentBox(ctx: ViewContext2D, opts: {
+    calculator: ViewCalculator;
+    element: Element | null;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): void;

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

@@ -0,0 +1,46 @@
+import { auxiliaryColor } from './config';
+import { drawLine, drawCrossByCenter } from './draw-base';
+function getViewBoxInfo(rectInfo) {
+    const boxInfo = {
+        minX: rectInfo.topLeft.x,
+        minY: rectInfo.topLeft.y,
+        maxX: rectInfo.bottomRight.x,
+        maxY: rectInfo.bottomRight.y,
+        midX: rectInfo.center.x,
+        midY: rectInfo.center.y
+    };
+    return boxInfo;
+}
+export function drawAuxiliaryExperimentBox(ctx, opts) {
+    const { element, viewScaleInfo, viewSizeInfo, calculator } = opts;
+    if (!element) {
+        return;
+    }
+    const viewRectInfo = calculator.calcViewRectInfoFromRange(element.uuid, { viewScaleInfo, viewSizeInfo });
+    if (!viewRectInfo) {
+        return;
+    }
+    const lineOpts = {
+        borderColor: auxiliaryColor,
+        borderWidth: 1,
+        lineDash: []
+    };
+    const boxInfo = getViewBoxInfo(viewRectInfo);
+    const { width, height } = viewSizeInfo;
+    drawLine(ctx, { x: boxInfo.minX, y: 0 }, { x: boxInfo.minX, y: height }, lineOpts);
+    drawLine(ctx, { x: boxInfo.midX, y: 0 }, { x: boxInfo.midX, y: height }, lineOpts);
+    drawLine(ctx, { x: boxInfo.maxX, y: 0 }, { x: boxInfo.maxX, y: height }, lineOpts);
+    drawLine(ctx, { x: 0, y: boxInfo.minY }, { x: width, y: boxInfo.minY }, lineOpts);
+    drawLine(ctx, { x: 0, y: boxInfo.midY }, { x: width, y: boxInfo.midY }, lineOpts);
+    drawLine(ctx, { x: 0, y: boxInfo.maxY }, { x: width, y: boxInfo.maxY }, lineOpts);
+    const crossOpts = Object.assign(Object.assign({}, lineOpts), { size: 6 });
+    drawCrossByCenter(ctx, viewRectInfo.center, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.topLeft, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.topRight, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.bottomLeft, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.bottomRight, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.top, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.right, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.bottom, crossOpts);
+    drawCrossByCenter(ctx, viewRectInfo.left, crossOpts);
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+import type { ViewContext2D, PointSize } from '@idraw/types';
+export declare function drawReferenceLines(ctx: ViewContext2D, opts: {
+    xLines?: Array<PointSize[]>;
+    yLines?: Array<PointSize[]>;
+}): void;

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

@@ -0,0 +1,31 @@
+import { referenceColor } from './config';
+import { drawLine, drawCrossByCenter } from './draw-base';
+export function drawReferenceLines(ctx, opts) {
+    const { xLines, yLines } = opts;
+    const lineOpts = {
+        borderColor: referenceColor,
+        borderWidth: 1,
+        lineDash: []
+    };
+    const crossOpts = Object.assign(Object.assign({}, lineOpts), { size: 6 });
+    if (xLines) {
+        xLines.forEach((line) => {
+            line.forEach((p, pIdx) => {
+                drawCrossByCenter(ctx, p, crossOpts);
+                if (line[pIdx + 1]) {
+                    drawLine(ctx, line[pIdx], line[pIdx + 1], lineOpts);
+                }
+            });
+        });
+    }
+    if (yLines) {
+        yLines.forEach((line) => {
+            line.forEach((p, pIdx) => {
+                drawCrossByCenter(ctx, p, crossOpts);
+                if (line[pIdx + 1]) {
+                    drawLine(ctx, line[pIdx], line[pIdx + 1], lineOpts);
+                }
+            });
+        });
+    }
+}

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

@@ -1,12 +1,20 @@
-import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController } from '@idraw/types';
+import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController, ViewCalculator } from '@idraw/types';
 import type { AreaSize } from './types';
 export declare function drawHoverVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): void;
+export declare function drawLockVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    controller?: ElementSizeController | null;
+}): void;
 export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
+    hideControllers: boolean;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    element: Element | null;
+    calculator: ViewCalculator;
 }): 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,22 +1,6 @@
-import { rotateElementVertexes, calcViewVertexes } from '@idraw/util';
-import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth } from './config';
-function drawVertexes(ctx, vertexes, opts) {
-    const { borderColor, borderWidth, background, lineDash } = opts;
-    ctx.setLineDash([]);
-    ctx.lineWidth = borderWidth;
-    ctx.strokeStyle = borderColor;
-    ctx.fillStyle = background;
-    ctx.setLineDash(lineDash);
-    ctx.beginPath();
-    ctx.moveTo(vertexes[0].x, vertexes[0].y);
-    ctx.lineTo(vertexes[1].x, vertexes[1].y);
-    ctx.lineTo(vertexes[2].x, vertexes[2].y);
-    ctx.lineTo(vertexes[3].x, vertexes[3].y);
-    ctx.lineTo(vertexes[0].x, vertexes[0].y);
-    ctx.closePath();
-    ctx.stroke();
-    ctx.fill();
-}
+import { rotateElementVertexes, calcViewPointSize, calcViewVertexes, calcViewElementSize } from '@idraw/util';
+import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor, controllerSize } from './config';
+import { drawVertexes, drawLine, drawCircleController, drawCrossVertexes } from './draw-base';
 export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
@@ -24,26 +8,50 @@ export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
 }
+export function drawLockVertexesWrapper(ctx, vertexes, opts) {
+    if (!vertexes) {
+        return;
+    }
+    const wrapperOpts = { borderColor: lockColor, borderWidth: 1, background: 'transparent', lineDash: [] };
+    drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
+    const { controller } = opts;
+    if (controller) {
+        const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, bottomMiddle, leftMiddle, rightMiddle } = controller;
+        const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: 1, background: lockColor });
+        drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(leftMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(rightMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+    }
+}
 export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
     if (!controller) {
         return;
     }
-    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight } = controller;
+    const { hideControllers } = opts;
+    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
     const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
-    drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+    if (!hideControllers) {
+        drawLine(ctx, calcViewPointSize(top.center, opts), calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { borderWidth: 2 }));
+        drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+        drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+        drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+        drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+        drawCircleController(ctx, calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { size: controllerSize, borderWidth: 2 }));
+    }
 }
 export function drawElementListShadows(ctx, elements, opts) {
     elements.forEach((elem) => {
         let { x, y, w, h } = elem;
         const { angle = 0 } = elem;
         if (opts === null || opts === void 0 ? void 0 : opts.calculator) {
-            const { calculator } = opts;
-            const size = calculator.elementSize({ x, y, w, h }, opts.viewScaleInfo, opts.viewSizeInfo);
+            const size = calcViewElementSize({ x, y, w, h }, opts);
             x = size.x;
             y = size.y;
             w = size.w;

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

@@ -1,4 +1,7 @@
-import type { CoreEvent } from '@idraw/types';
-import type { BoardMiddleware, DeepSelectorSharedStorage } from './types';
-export declare const middlewareEventSelect: string;
-export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEvent>;
+import type { CoreEventMap } from '@idraw/types';
+import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
+import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, keyActionType, keyResizeType, keyGroupQueue, keySelectedElementList } from './config';
+export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
+export type { DeepSelectorSharedStorage, ActionType };
+export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup };
+export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap>;