@idraw/core 0.4.0-beta.3 → 0.4.0-beta.30

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;
@@ -9,11 +10,17 @@ interface RulerScale {
 export declare function calcXRulerScaleList(opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-}): RulerScale[];
+}): {
+    list: RulerScale[];
+    rulerUnit: number;
+};
 export declare function calcYRulerScaleList(opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-}): RulerScale[];
+}): {
+    list: RulerScale[];
+    rulerUnit: number;
+};
 export declare function drawXRuler(ctx: ViewContext2D, opts: {
     scaleList: RulerScale[];
 }): void;
@@ -24,10 +31,14 @@ export declare function drawRulerBackground(ctx: ViewContext2D, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): void;
-export declare function drawUnderGrid(ctx: ViewContext2D, opts: {
+export declare function drawGrid(ctx: ViewContext2D, opts: {
     xList: RulerScale[];
     yList: RulerScale[];
     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,12 +11,36 @@ const fontWeight = 100;
 const gridColor = '#AAAAAA20';
 const gridKeyColor = '#AAAAAA40';
 const lineSize = 1;
+const selectedAreaColor = '#196097';
+const limitRulerUnitList = [1, 2, 5, 10, 20, 50, 100, 200, 500];
+function limitRulerUnit(unit) {
+    unit = Math.max(limitRulerUnitList[0], Math.min(unit, limitRulerUnitList[limitRulerUnitList.length - 1]));
+    for (let i = 0; i < limitRulerUnitList.length - 1; i++) {
+        const thisUnit = limitRulerUnitList[i];
+        const nextUnit = limitRulerUnitList[i + 1];
+        if (unit > nextUnit) {
+            continue;
+        }
+        if (unit === thisUnit) {
+            return unit;
+        }
+        if (unit === nextUnit) {
+            return unit;
+        }
+        const mid = (thisUnit + nextUnit) / 2;
+        if (unit <= mid) {
+            return thisUnit;
+        }
+        return nextUnit;
+    }
+    return unit;
+}
 function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
     const list = [];
     let rulerUnit = 10;
     rulerUnit = formatNumber(rulerUnit / scale, { decimalPlaces: 0 });
-    rulerUnit = Math.max(10, Math.min(rulerUnit, 1000));
+    rulerUnit = limitRulerUnit(rulerUnit);
     const rulerKeyUnit = rulerUnit * 10;
     const rulerSubKeyUnit = rulerUnit * 5;
     let index = 0;
@@ -38,7 +63,7 @@ function calcRulerScaleList(opts) {
         list.push(rulerScale);
         index++;
     }
-    return list;
+    return { list, rulerUnit };
 }
 export function calcXRulerScaleList(opts) {
     const { viewScaleInfo, viewSizeInfo } = opts;
@@ -150,7 +175,7 @@ export function drawRulerBackground(ctx, opts) {
     ctx.strokeStyle = borderColor;
     ctx.stroke();
 }
-export function drawUnderGrid(ctx, opts) {
+export function drawGrid(ctx, opts) {
     const { xList, yList, viewSizeInfo } = opts;
     const { width, height } = viewSizeInfo;
     for (let i = 0; i < xList.length; i++) {
@@ -185,3 +210,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

@@ -5,6 +5,7 @@ export const MiddlewareScaler = (opts) => {
     const maxScale = 50;
     const minScale = 0.05;
     return {
+        name: '@middleware/scaler',
         wheelScale(e) {
             const { deltaY, point } = e;
             const { scale } = sharer.getActiveViewScaleInfo();

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

@@ -1,6 +1,8 @@
 export declare const key = "SCROLL";
 export declare const keyXThumbRect: unique symbol;
 export declare const keyYThumbRect: unique symbol;
+export declare const keyHoverXThumbRect: unique symbol;
+export declare const keyHoverYThumbRect: unique symbol;
 export declare const keyPrevPoint: unique symbol;
 export declare const keyActivePoint: unique symbol;
 export declare const keyActiveThumbType: unique symbol;

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

@@ -1,6 +1,8 @@
 export const key = 'SCROLL';
 export const keyXThumbRect = Symbol(`${key}_xThumbRect`);
 export const keyYThumbRect = Symbol(`${key}_yThumbRect`);
+export const keyHoverXThumbRect = Symbol(`${key}_hoverXThumbRect`);
+export const keyHoverYThumbRect = Symbol(`${key}_hoverYThumbRect`);
 export const keyPrevPoint = Symbol(`${key}_prevPoint`);
 export const keyActivePoint = Symbol(`${key}_activePoint`);
 export const keyActiveThumbType = Symbol(`${key}_activeThumbType`);

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,14 +1,18 @@
 import { drawScroller, isPointInScrollThumb } from './util';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
 export const MiddlewareScroller = (opts) => {
-    const { viewer, boardContent, sharer } = opts;
-    const { helperContext } = boardContent;
+    const { viewer, boardContent, sharer, eventHub } = opts;
+    const { overlayContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
+    let isBusy = false;
     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,12 +40,13 @@ 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',
         wheel: (e) => {
             viewer.scroll({
                 moveX: 0 - e.deltaX,
@@ -49,10 +54,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('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;
@@ -74,6 +101,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         pointEnd: () => {
+            isBusy = false;
             const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
             clear();
             if (activeThumbType === 'X' || activeThumbType === 'Y') {
@@ -83,7 +111,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         beforeDrawFrame({ snapshot }) {
-            const { xThumbRect, yThumbRect } = drawScroller(helperContext, { snapshot });
+            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot });
             sharer.setSharedStorage(keyXThumbRect, xThumbRect);
             sharer.setSharedStorage(keyYThumbRect, yThumbRect);
         }

package/dist/esm/middleware/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/middleware/scroller/types.js

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

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

@@ -1,6 +1,6 @@
 import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize } 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;

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

@@ -1,16 +1,17 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect } from './config';
+import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
 const minScrollerWidth = 12;
 const scrollerLineWidth = 16;
-const scrollerThumbAlpha = 0.36;
+const scrollerThumbAlpha = 0.3;
 const scrollConfig = {
     width: minScrollerWidth,
-    thumbColor: '#000000AA',
+    thumbColor: '#0000008A',
+    thumbHoverColor: '#000000EE',
     scrollBarColor: '#FFFFFF60',
     showScrollBar: false
 };
-function isPointAtRect(helperContext, p, rect) {
-    const ctx = helperContext;
+function isPointAtRect(overlayContext, p, rect) {
+    const ctx = overlayContext;
     const { x, y, w, h } = rect;
     ctx.beginPath();
     ctx.rect(x, y, w, h);
@@ -20,13 +21,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,11 +39,14 @@ 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 } = opts;
     const { width, height } = viewSizeInfo;
     const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
     const sliderMinSize = scrollerLineWidth * 2.5;
@@ -101,7 +105,8 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
         ySize,
         translateY,
         translateX,
-        thumbColor: scrollConfig.thumbColor,
+        xThumbColor: hoverXThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
+        yThumbColor: hoverYThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
         scrollBarColor: scrollConfig.scrollBarColor,
         xThumbRect,
         yThumbRect
@@ -155,12 +160,12 @@ function drawScrollerThumb(ctx, opts) {
     }
     ctx.restore();
 }
-function drawScrollerInfo(helperContext, opts) {
-    const ctx = helperContext;
+function drawScrollerInfo(overlayContext, opts) {
+    const ctx = overlayContext;
     const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
-    const { activeThumbType, prevPoint, activePoint } = scrollInfo;
+    const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo;
     const { width, height } = viewSizeInfo;
-    const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo);
+    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb });
     let xThumbRect = Object.assign({}, wrapper.xThumbRect);
     let yThumbRect = Object.assign({}, wrapper.yThumbRect);
     if (activeThumbType && prevPoint && activePoint) {
@@ -177,12 +182,12 @@ function drawScrollerInfo(helperContext, opts) {
         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 }));
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.xThumbColor }));
     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 }));
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.yThumbColor }));
     ctx.globalAlpha = 1;
     return {
         xThumbRect,

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

@@ -8,8 +8,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;
@@ -20,3 +24,11 @@ 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;
+export declare const middlewareEventSnapToGrid: string;

package/dist/esm/middleware/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`);
@@ -20,3 +24,11 @@ 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';
+export const middlewareEventSnapToGrid = '@middleware/snap-to-grid';

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;