@idraw/core 0.4.0-beta.16 → 0.4.0-beta.18

package/dist/esm/index.d.ts

@@ -1,10 +1,11 @@
-import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap } from '@idraw/types';
+import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ModifyOptions } from '@idraw/types';
 export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
 export { MiddlewareTextEditor, middlewareEventTextEdit, middlewareEventTextChange } from './middleware/text-editor';
 export { MiddlewareDragger } from './middleware/dragger';
+export { MiddlewareInfo } from './middleware/info';
 export declare class Core<E extends CoreEventMap = CoreEventMap> {
     #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);
@@ -12,7 +13,9 @@ export declare class Core<E extends CoreEventMap = CoreEventMap> {
     destroy(): void;
     use(middleware: BoardMiddleware<any, any>): void;
     disuse(middleware: BoardMiddleware<any, any>): void;
-    setData(data: Data): void;
+    setData(data: Data, opts?: {
+        modifiedOptions?: ModifyOptions;
+    }): void;
     getData(): Data | null;
     scale(opts: {
         scale: number;

package/dist/esm/index.js

@@ -19,6 +19,7 @@ export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
 export { MiddlewareTextEditor, middlewareEventTextEdit, middlewareEventTextChange } from './middleware/text-editor';
 export { MiddlewareDragger } from './middleware/dragger';
+export { MiddlewareInfo } from './middleware/info';
 export class Core {
     constructor(container, opts) {
         _Core_instances.add(this);
@@ -61,9 +62,9 @@ export class Core {
     disuse(middleware) {
         __classPrivateFieldGet(this, _Core_board, "f").disuse(middleware);
     }
-    setData(data) {
+    setData(data, opts) {
         validateElements((data === null || data === void 0 ? void 0 : data.elements) || []);
-        __classPrivateFieldGet(this, _Core_board, "f").setData(data);
+        __classPrivateFieldGet(this, _Core_board, "f").setData(data, opts);
     }
     getData() {
         return __classPrivateFieldGet(this, _Core_board, "f").getData();

package/dist/esm/middleware/info/draw-info.d.ts

@@ -0,0 +1,31 @@
+import type { PointSize, ViewContext2D } from '@idraw/types';
+export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    color: string;
+    background: string;
+}): void;
+export declare function drawPositionInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    color: string;
+    background: string;
+}): void;
+export declare function drawAngleInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    color: string;
+    background: string;
+}): void;

package/dist/esm/middleware/info/draw-info.js

@@ -0,0 +1,110 @@
+import { rotateByCenter } from '@idraw/util';
+const fontFamily = 'monospace';
+export function drawSizeInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    rotateByCenter(ctx, angle, rotateCenter, () => {
+        ctx.$setFont({
+            fontWeight: '300',
+            fontSize,
+            fontFamily
+        });
+        const padding = (lineHeight - fontSize) / 2;
+        const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
+        const bgStart = {
+            x: point.x - textWidth / 2 - padding,
+            y: point.y
+        };
+        const bgEnd = {
+            x: bgStart.x + textWidth + padding * 2,
+            y: bgStart.y + fontSize + padding
+        };
+        const textStart = {
+            x: point.x - textWidth / 2,
+            y: point.y
+        };
+        ctx.setLineDash([]);
+        ctx.fillStyle = background;
+        ctx.beginPath();
+        ctx.moveTo(bgStart.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgEnd.y);
+        ctx.lineTo(bgStart.x, bgEnd.y);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = color;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}
+export function drawPositionInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    rotateByCenter(ctx, angle, rotateCenter, () => {
+        ctx.$setFont({
+            fontWeight: '300',
+            fontSize,
+            fontFamily
+        });
+        const padding = (lineHeight - fontSize) / 2;
+        const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
+        const bgStart = {
+            x: point.x,
+            y: point.y
+        };
+        const bgEnd = {
+            x: bgStart.x + textWidth + padding * 2,
+            y: bgStart.y + fontSize + padding
+        };
+        const textStart = {
+            x: point.x + padding,
+            y: point.y
+        };
+        ctx.setLineDash([]);
+        ctx.fillStyle = background;
+        ctx.beginPath();
+        ctx.moveTo(bgStart.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgEnd.y);
+        ctx.lineTo(bgStart.x, bgEnd.y);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = color;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}
+export function drawAngleInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    rotateByCenter(ctx, angle, rotateCenter, () => {
+        ctx.$setFont({
+            fontWeight: '300',
+            fontSize,
+            fontFamily
+        });
+        const padding = (lineHeight - fontSize) / 2;
+        const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
+        const bgStart = {
+            x: point.x,
+            y: point.y
+        };
+        const bgEnd = {
+            x: bgStart.x + textWidth + padding * 2,
+            y: bgStart.y + fontSize + padding
+        };
+        const textStart = {
+            x: point.x + padding,
+            y: point.y
+        };
+        ctx.setLineDash([]);
+        ctx.fillStyle = background;
+        ctx.beginPath();
+        ctx.moveTo(bgStart.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgEnd.y);
+        ctx.lineTo(bgStart.x, bgEnd.y);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = color;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}

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

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

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

@@ -0,0 +1,110 @@
+import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
+import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
+import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
+const infoBackground = '#1973bac6';
+const infoTextColor = '#ffffff';
+const infoFontSize = 10;
+const infoLineHeight = 16;
+export const MiddlewareInfo = (opts) => {
+    const { boardContent, calculator } = opts;
+    const { helperContext } = boardContent;
+    return {
+        name: '@middleware/info',
+        beforeDrawFrame({ snapshot }) {
+            const { sharedStore } = snapshot;
+            const selectedElementList = sharedStore[keySelectedElementList];
+            const actionType = sharedStore[keyActionType];
+            const groupQueue = sharedStore[keyGroupQueue] || [];
+            if (selectedElementList.length === 1) {
+                const elem = selectedElementList[0];
+                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                    const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+                    const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+                    const { x, y, w, h, angle } = elem;
+                    const totalGroupQueue = [
+                        ...groupQueue,
+                        ...[
+                            {
+                                uuid: createUUID(),
+                                x,
+                                y,
+                                w,
+                                h,
+                                angle,
+                                type: 'group',
+                                detail: { children: [] }
+                            }
+                        ]
+                    ];
+                    const calcOpts = { viewScaleInfo, viewSizeInfo };
+                    const rangeRectInfo = calculator.calcViewRectInfoFromOrigin(elem.uuid, calcOpts);
+                    let totalAngle = 0;
+                    totalGroupQueue.forEach((group) => {
+                        totalAngle += group.angle || 0;
+                    });
+                    const totalRadian = parseAngleToRadian(limitAngle(0 - totalAngle));
+                    if (rangeRectInfo) {
+                        const elemCenter = rangeRectInfo === null || rangeRectInfo === void 0 ? void 0 : rangeRectInfo.center;
+                        const rectInfo = {
+                            topLeft: rotatePoint(elemCenter, rangeRectInfo.topLeft, totalRadian),
+                            topRight: rotatePoint(elemCenter, rangeRectInfo.topRight, totalRadian),
+                            bottomRight: rotatePoint(elemCenter, rangeRectInfo.bottomRight, totalRadian),
+                            bottomLeft: rotatePoint(elemCenter, rangeRectInfo.bottomLeft, totalRadian),
+                            center: rotatePoint(elemCenter, rangeRectInfo.center, totalRadian),
+                            top: rotatePoint(elemCenter, rangeRectInfo.top, totalRadian),
+                            right: rotatePoint(elemCenter, rangeRectInfo.right, totalRadian),
+                            bottom: rotatePoint(elemCenter, rangeRectInfo.bottom, totalRadian),
+                            left: rotatePoint(elemCenter, rangeRectInfo.left, totalRadian)
+                        };
+                        const x = formatNumber(elem.x, { decimalPlaces: 2 });
+                        const y = formatNumber(elem.y, { decimalPlaces: 2 });
+                        const w = formatNumber(elem.w, { decimalPlaces: 2 });
+                        const h = formatNumber(elem.h, { decimalPlaces: 2 });
+                        const xyText = `${formatNumber(x, { decimalPlaces: 0 })},${formatNumber(y, { decimalPlaces: 0 })}`;
+                        const whText = `${formatNumber(w, { decimalPlaces: 0 })}x${formatNumber(h, { decimalPlaces: 0 })}`;
+                        const angleText = `${formatNumber(elem.angle || 0, { decimalPlaces: 0 })}°`;
+                        drawSizeInfoText(helperContext, {
+                            point: {
+                                x: rectInfo.bottom.x,
+                                y: rectInfo.bottom.y + infoFontSize
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: whText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            color: infoTextColor,
+                            background: infoBackground
+                        });
+                        drawPositionInfoText(helperContext, {
+                            point: {
+                                x: rectInfo.topLeft.x,
+                                y: rectInfo.topLeft.y - infoFontSize * 2
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: xyText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            color: infoTextColor,
+                            background: infoBackground
+                        });
+                        drawAngleInfoText(helperContext, {
+                            point: {
+                                x: rectInfo.top.x + infoFontSize,
+                                y: rectInfo.top.y - infoFontSize * 2
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: angleText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            color: infoTextColor,
+                            background: infoBackground
+                        });
+                    }
+                }
+            }
+        }
+    };
+};

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

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

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

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

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

@@ -1,3 +1,4 @@
 import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
+import type { DeepRulerSharedStorage } from './types';
 export declare const middlewareEventRuler = "@middleware/show-ruler";
-export declare const MiddlewareRuler: BoardMiddleware<Record<string, any>, CoreEventMap>;
+export declare const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap>;

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

@@ -1,8 +1,8 @@
 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 { boardContent, viewer, eventHub } = opts;
+    const { boardContent, viewer, eventHub, calculator } = opts;
     const { helperContext, underContext } = boardContent;
     let show = true;
     let showGrid = true;
@@ -29,6 +29,7 @@ export const MiddlewareRuler = (opts) => {
             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/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/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,6 +8,9 @@ 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;
@@ -24,3 +27,4 @@ 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";

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

@@ -8,6 +8,9 @@ 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`);
@@ -24,3 +27,4 @@ export const wrapperColor = '#1973ba';
 export const lockColor = '#5b5959b5';
 export const controllerSize = 10;
 export const auxiliaryColor = '#f7276e';
+export const referenceColor = '#f7276e';

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

@@ -1,7 +1,7 @@
-import type { ViewContext2D, ViewRectVertexes, Element, ViewScaleInfo } from '@idraw/types';
-export declare function drawAuxiliaryLines(ctx: ViewContext2D, opts: {
-    vertexes: ViewRectVertexes;
+import type { ViewContext2D, Element, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
+export declare function drawAuxiliaryExperimentBox(ctx: ViewContext2D, opts: {
+    calculator: ViewCalculator;
     element: Element | null;
-    groupQueue: Element<'group'>[];
     viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
 }): void;

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

@@ -1,25 +1,40 @@
-import { getElementViewRectInfo } from './auxiliary';
 import { auxiliaryColor } from './config';
 import { drawLine, drawCrossByCenter } from './draw-base';
-export function drawAuxiliaryLines(ctx, opts) {
-    const { element, groupQueue, viewScaleInfo } = opts;
+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 = getElementViewRectInfo(element, {
-        groupQueue,
-        viewScaleInfo
-    });
+    const viewRectInfo = calculator.calcViewRectInfoFromRange(element.uuid, { viewScaleInfo, viewSizeInfo });
+    if (!viewRectInfo) {
+        return;
+    }
     const lineOpts = {
         borderColor: auxiliaryColor,
         borderWidth: 1,
         lineDash: []
     };
-    drawLine(ctx, viewRectInfo.topLeft, viewRectInfo.topRight, lineOpts);
-    drawLine(ctx, viewRectInfo.topRight, viewRectInfo.bottomRight, lineOpts);
-    drawLine(ctx, viewRectInfo.bottomRight, viewRectInfo.bottomLeft, lineOpts);
-    drawLine(ctx, viewRectInfo.bottomLeft, viewRectInfo.topLeft, lineOpts);
+    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);

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,4 +1,4 @@
-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;
@@ -14,7 +14,7 @@ export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
     element: Element | null;
-    groupQueue: Element<'group'>[];
+    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,4 +1,4 @@
-import { rotateElementVertexes, calcViewPointSize, calcViewVertexes } from '@idraw/util';
+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) {
@@ -51,8 +51,7 @@ export function drawElementListShadows(ctx, elements, opts) {
         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,5 +1,8 @@
 import type { CoreEventMap } from '@idraw/types';
 import type { BoardMiddleware, DeepSelectorSharedStorage } from './types';
+import { keyActionType, keyResizeType, keyGroupQueue, keySelectedElementList } from './config';
+export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
+export type { DeepSelectorSharedStorage };
 export declare const middlewareEventSelect: string;
 export declare const middlewareEventSelectClear: string;
 export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap>;