@idraw/core 0.4.0-beta.9 → 0.4.0

package/dist/esm/{middleware → middlewares}/scroller/index.js

@@ -1,14 +1,20 @@
 import { drawScroller, isPointInScrollThumb } from './util';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
-export const MiddlewareScroller = (opts) => {
-    const { viewer, boardContent, sharer } = opts;
-    const { helperContext } = boardContent;
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect, defaultStyle } from './config';
+import { coreEventKeys } from '../../config';
+export const MiddlewareScroller = (opts, config) => {
+    const { viewer, boardContent, sharer, eventHub } = opts;
+    const { overlayContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
+    let isBusy = false;
+    let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
     const clear = () => {
         sharer.setSharedStorage(keyPrevPoint, null);
         sharer.setSharedStorage(keyActivePoint, null);
         sharer.setSharedStorage(keyActiveThumbType, null);
+        sharer.setSharedStorage(keyHoverXThumbRect, null);
+        sharer.setSharedStorage(keyHoverYThumbRect, null);
+        isBusy = false;
     };
     clear();
     const scrollX = (p) => {
@@ -36,13 +42,16 @@ export const MiddlewareScroller = (opts) => {
         }
     };
     const getThumbType = (p) => {
-        return isPointInScrollThumb(helperContext, p, {
+        return isPointInScrollThumb(overlayContext, p, {
             xThumbRect: sharer.getSharedStorage(keyXThumbRect),
             yThumbRect: sharer.getSharedStorage(keyYThumbRect)
         });
     };
     return {
         name: '@middleware/scroller',
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
         wheel: (e) => {
             viewer.scroll({
                 moveX: 0 - e.deltaX,
@@ -50,10 +59,32 @@ export const MiddlewareScroller = (opts) => {
             });
             viewer.drawFrame();
         },
+        hover: (e) => {
+            if (isBusy === true) {
+                return false;
+            }
+            const { point } = e;
+            const thumbType = getThumbType(point);
+            if (thumbType === 'X' || thumbType === 'Y') {
+                if (thumbType === 'X') {
+                    sharer.setSharedStorage(keyHoverXThumbRect, true);
+                    sharer.setSharedStorage(keyHoverYThumbRect, false);
+                }
+                else {
+                    sharer.setSharedStorage(keyHoverXThumbRect, false);
+                    sharer.setSharedStorage(keyHoverYThumbRect, true);
+                }
+                eventHub.trigger(coreEventKeys.CURSOR, { type: 'default' });
+                return false;
+            }
+            sharer.setSharedStorage(keyHoverXThumbRect, false);
+            sharer.setSharedStorage(keyHoverYThumbRect, false);
+        },
         pointStart: (e) => {
             const { point } = e;
             const thumbType = getThumbType(point);
             if (thumbType === 'X' || thumbType === 'Y') {
+                isBusy = true;
                 sharer.setSharedStorage(keyActiveThumbType, thumbType);
                 sharer.setSharedStorage(keyPrevPoint, point);
                 return false;
@@ -75,6 +106,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         pointEnd: () => {
+            isBusy = false;
             const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
             clear();
             if (activeThumbType === 'X' || activeThumbType === 'Y') {
@@ -84,7 +116,16 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         beforeDrawFrame({ snapshot }) {
-            const { xThumbRect, yThumbRect } = drawScroller(helperContext, { snapshot });
+            const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor, activeThumbBackground, activeThumbBorderColor } = innerConfig;
+            const style = {
+                thumbBackground,
+                thumbBorderColor,
+                hoverThumbBackground,
+                hoverThumbBorderColor,
+                activeThumbBackground,
+                activeThumbBorderColor
+            };
+            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style });
             sharer.setSharedStorage(keyXThumbRect, xThumbRect);
             sharer.setSharedStorage(keyYThumbRect, yThumbRect);
         }

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

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

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

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

package/dist/esm/{middleware → middlewares}/scroller/util.d.ts

@@ -1,11 +1,12 @@
-import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize } from '@idraw/types';
+import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize, MiddlewareScrollerStyle } from '@idraw/types';
 export type ScrollbarThumbType = 'X' | 'Y';
-export declare function isPointInScrollThumb(helperContext: ViewContext2D, p: Point, opts: {
+export declare function isPointInScrollThumb(overlayContext: ViewContext2D, p: Point, opts: {
     xThumbRect?: ElementSize | null;
     yThumbRect?: ElementSize | null;
 }): ScrollbarThumbType | null;
 export declare function drawScroller(ctx: ViewContext2D, opts: {
     snapshot: BoardViewerFrameSnapshot;
+    style: MiddlewareScrollerStyle;
 }): {
     xThumbRect: ElementSize;
     yThumbRect: ElementSize;

package/dist/esm/{middleware → middlewares}/scroller/util.js

@@ -1,16 +1,9 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect } from './config';
-const minScrollerWidth = 12;
+import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
 const scrollerLineWidth = 16;
-const scrollerThumbAlpha = 0.36;
-const scrollConfig = {
-    width: minScrollerWidth,
-    thumbColor: '#000000AA',
-    scrollBarColor: '#FFFFFF60',
-    showScrollBar: false
-};
-function isPointAtRect(helperContext, p, rect) {
-    const ctx = helperContext;
+const minThumbLength = scrollerLineWidth * 2.5;
+function isPointAtRect(overlayContext, p, rect) {
+    const ctx = overlayContext;
     const { x, y, w, h } = rect;
     ctx.beginPath();
     ctx.rect(x, y, w, h);
@@ -20,13 +13,13 @@ function isPointAtRect(helperContext, p, rect) {
     }
     return false;
 }
-export function isPointInScrollThumb(helperContext, p, opts) {
+export function isPointInScrollThumb(overlayContext, p, opts) {
     let thumbType = null;
     const { xThumbRect, yThumbRect } = opts;
-    if (xThumbRect && isPointAtRect(helperContext, p, xThumbRect)) {
+    if (xThumbRect && isPointAtRect(overlayContext, p, xThumbRect)) {
         thumbType = 'X';
     }
-    else if (yThumbRect && isPointAtRect(helperContext, p, yThumbRect)) {
+    else if (yThumbRect && isPointAtRect(overlayContext, p, yThumbRect)) {
         thumbType = 'Y';
     }
     return thumbType;
@@ -38,15 +31,19 @@ function getScrollInfoFromSnapshot(snapshot) {
         prevPoint: sharedStore[keyPrevPoint] || null,
         activeThumbType: sharedStore[keyActiveThumbType] || null,
         xThumbRect: sharedStore[keyXThumbRect] || null,
-        yThumbRect: sharedStore[keyYThumbRect] || null
+        yThumbRect: sharedStore[keyYThumbRect] || null,
+        hoverXThumb: sharedStore[keyHoverXThumbRect],
+        hoverYThumb: sharedStore[keyHoverYThumbRect]
     };
     return info;
 }
-function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
+function calcScrollerInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style } = opts;
     const { width, height } = viewSizeInfo;
     const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
-    const sliderMinSize = scrollerLineWidth * 2.5;
+    const sliderMinSize = minThumbLength;
     const lineSize = scrollerLineWidth;
+    const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor } = style;
     let xSize = 0;
     let ySize = 0;
     xSize = Math.max(sliderMinSize, width - lineSize * 2 - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
@@ -101,8 +98,10 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
         ySize,
         translateY,
         translateX,
-        thumbColor: scrollConfig.thumbColor,
-        scrollBarColor: scrollConfig.scrollBarColor,
+        xThumbBackground: hoverXThumb ? hoverThumbBackground : thumbBackground,
+        yThumbBackground: hoverYThumb ? hoverThumbBackground : thumbBackground,
+        xThumbBorderColor: hoverXThumb ? hoverThumbBorderColor : thumbBorderColor,
+        yThumbBorderColor: hoverYThumb ? hoverThumbBorderColor : thumbBorderColor,
         xThumbRect,
         yThumbRect
     };
@@ -110,13 +109,14 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
 }
 function drawScrollerThumb(ctx, opts) {
     let { x, y, h, w } = opts;
+    const { background, borderColor } = opts;
     ctx.save();
     ctx.shadowColor = '#FFFFFF';
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
     ctx.shadowBlur = 1;
     {
-        const { color, axis } = opts;
+        const { axis } = opts;
         if (axis === 'X') {
             y = y + h / 4 + 0;
             h = h / 2;
@@ -130,7 +130,7 @@ function drawScrollerThumb(ctx, opts) {
         if (w < r * 2 || h < r * 2) {
             r = 0;
         }
-        ctx.globalAlpha = scrollerThumbAlpha;
+        ctx.globalAlpha = 1;
         ctx.beginPath();
         ctx.moveTo(x + r, y);
         ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -138,12 +138,11 @@ function drawScrollerThumb(ctx, opts) {
         ctx.arcTo(x, y + h, x, y, r);
         ctx.arcTo(x, y, x + w, y, r);
         ctx.closePath();
-        ctx.fillStyle = color;
-        ctx.fill();
-        ctx.globalAlpha = 1;
+        ctx.fillStyle = background;
+        ctx.fill('nonzero');
         ctx.beginPath();
         ctx.lineWidth = 1;
-        ctx.strokeStyle = color;
+        ctx.strokeStyle = borderColor;
         ctx.setLineDash([]);
         ctx.moveTo(x + r, y);
         ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -155,12 +154,11 @@ function drawScrollerThumb(ctx, opts) {
     }
     ctx.restore();
 }
-function drawScrollerInfo(helperContext, opts) {
-    const ctx = helperContext;
-    const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
-    const { activeThumbType, prevPoint, activePoint } = scrollInfo;
-    const { width, height } = viewSizeInfo;
-    const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo);
+function drawScrollerInfo(overlayContext, opts) {
+    const ctx = overlayContext;
+    const { viewScaleInfo, viewSizeInfo, scrollInfo, style } = opts;
+    const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo;
+    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style });
     let xThumbRect = Object.assign({}, wrapper.xThumbRect);
     let yThumbRect = Object.assign({}, wrapper.yThumbRect);
     if (activeThumbType && prevPoint && activePoint) {
@@ -173,27 +171,18 @@ function drawScrollerInfo(helperContext, opts) {
             yThumbRect.y = yThumbRect.y + (activePoint.y - prevPoint.y);
         }
     }
-    if (scrollConfig.showScrollBar === true) {
-        ctx.fillStyle = wrapper.scrollBarColor;
-        ctx.fillRect(0, height - wrapper.lineSize, width, wrapper.lineSize);
-    }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor }));
-    if (scrollConfig.showScrollBar === true) {
-        ctx.fillStyle = wrapper.scrollBarColor;
-        ctx.fillRect(width - wrapper.lineSize, 0, wrapper.lineSize, height);
-    }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor }));
-    ctx.globalAlpha = 1;
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, background: wrapper.xThumbBackground, borderColor: wrapper.xThumbBorderColor }));
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, background: wrapper.yThumbBackground, borderColor: wrapper.yThumbBorderColor }));
     return {
         xThumbRect,
         yThumbRect
     };
 }
 export function drawScroller(ctx, opts) {
-    const { snapshot } = opts;
+    const { snapshot, style } = opts;
     const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
     const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
     const scrollInfo = getScrollInfoFromSnapshot(snapshot);
-    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo });
+    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo, style });
     return { xThumbRect, yThumbRect };
 }

package/dist/esm/{middleware → middlewares}/selector/config.d.ts

@@ -1,3 +1,4 @@
+import type { MiddlewareSelectorStyle } from '@idraw/types';
 export declare const key = "SELECT";
 export declare const keyActionType: unique symbol;
 export declare const keyResizeType: unique symbol;
@@ -8,8 +9,12 @@ 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 keyGroupQueue: unique symbol;
 export declare const keyGroupQueueVertexesList: unique symbol;
+export declare const keyIsMoving: unique symbol;
+export declare const keyEnableSelectInGroup: unique symbol;
+export declare const keyEnableSnapToGrid: unique symbol;
 export declare const keyDebugElemCenter: unique symbol;
 export declare const keyDebugStartVertical: unique symbol;
 export declare const keyDebugEndVertical: unique symbol;
@@ -19,4 +24,7 @@ export declare const keyDebugEnd0: unique symbol;
 export declare const selectWrapperBorderWidth = 2;
 export declare const resizeControllerBorderWidth = 4;
 export declare const areaBorderWidth = 1;
-export declare const wrapperColor = "#1973ba";
+export declare const controllerSize = 10;
+export declare const rotateControllerSize = 20;
+export declare const rotateControllerPosition = 22;
+export declare const defaultStyle: MiddlewareSelectorStyle;

package/dist/esm/{middleware → middlewares}/selector/config.js

@@ -8,8 +8,12 @@ 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 keyGroupQueue = Symbol(`${key}_groupQueue`);
 export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`);
+export const keyIsMoving = Symbol(`${key}_isMoving`);
+export const keyEnableSelectInGroup = Symbol(`${key}_enableSelectInGroup`);
+export const keyEnableSnapToGrid = Symbol(`${key}_enableSnapToGrid`);
 export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
 export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
 export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
@@ -19,4 +23,16 @@ export const keyDebugEnd0 = Symbol(`${key}_debug_end0`);
 export const selectWrapperBorderWidth = 2;
 export const resizeControllerBorderWidth = 4;
 export const areaBorderWidth = 1;
-export const wrapperColor = '#1973ba';
+export const controllerSize = 10;
+export const rotateControllerSize = 20;
+export const rotateControllerPosition = 22;
+const activeColor = '#1973ba';
+const activeAreaColor = '#1976d21c';
+const lockedColor = '#5b5959b5';
+const referenceColor = '#f7276e';
+export const defaultStyle = {
+    activeColor,
+    activeAreaColor,
+    lockedColor,
+    referenceColor
+};

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

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

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

@@ -0,0 +1,12 @@
+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 {};

package/dist/esm/middlewares/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/middlewares/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('nonzero');
+}
+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('nonzero');
+    }
+}
+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/middlewares/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/middlewares/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('nonzero');
+    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/middlewares/selector/draw-reference.d.ts

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

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

@@ -0,0 +1,31 @@
+import { drawLine, drawCrossByCenter } from './draw-base';
+export function drawReferenceLines(ctx, opts) {
+    const { xLines, yLines, style } = opts;
+    const { referenceColor } = style;
+    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 → middlewares}/selector/draw-wrapper.d.ts

@@ -1,22 +1,37 @@
-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, 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 drawLockedVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    controller?: ElementSizeController | null;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
+    hideControllers: boolean;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    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: {
     start: PointSize;
     end: PointSize;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawListArea(ctx: ViewContext2D, opts: {
     areaSize: AreaSize;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawGroupQueueVertexesWrappers(ctx: ViewContext2D, vertexesList: ViewRectVertexes[], opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareSelectorStyle;
 }): void;