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

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

@@ -0,0 +1,113 @@
+import { rotateByCenter } from '@idraw/util';
+const fontFamily = 'monospace';
+export function drawSizeInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textColor, textBackground } = style;
+    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 = textBackground;
+        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 = textColor;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}
+export function drawPositionInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = style;
+    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 = textBackground;
+        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 = textColor;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}
+export function drawAngleInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = style;
+    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 = textBackground;
+        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 = textColor;
+        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, MiddlewareInfoConfig } from '@idraw/types';
+import type { DeepInfoSharedStorage } from './types';
+export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, any, MiddlewareInfoConfig>;

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

@@ -0,0 +1,112 @@
+import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
+import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
+import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
+import { defaltStyle } from './config';
+const infoFontSize = 10;
+const infoLineHeight = 16;
+export const MiddlewareInfo = (opts, config) => {
+    const { boardContent, calculator } = opts;
+    const { overlayContext } = boardContent;
+    const innerConfig = Object.assign(Object.assign({}, defaltStyle), config);
+    const { textBackground, textColor } = innerConfig;
+    const style = {
+        textBackground,
+        textColor
+    };
+    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(overlayContext, {
+                            point: {
+                                x: rectInfo.bottom.x,
+                                y: rectInfo.bottom.y + infoFontSize
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: whText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            style
+                        });
+                        drawPositionInfoText(overlayContext, {
+                            point: {
+                                x: rectInfo.topLeft.x,
+                                y: rectInfo.topLeft.y - infoFontSize * 2
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: xyText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            style
+                        });
+                        drawAngleInfoText(overlayContext, {
+                            point: {
+                                x: rectInfo.top.x + infoFontSize,
+                                y: rectInfo.top.y - infoFontSize * 2
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: angleText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            style
+                        });
+                    }
+                }
+            }
+        }
+    };
+};

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/layout-selector/config.d.ts

@@ -0,0 +1,9 @@
+export declare const key = "LAYOUT_SELECT";
+export declare const keyLayoutActionType: unique symbol;
+export declare const keyLayoutControlType: unique symbol;
+export declare const keyLayoutController: unique symbol;
+export declare const keyLayoutIsHover: unique symbol;
+export declare const keyLayoutIsSelected: unique symbol;
+export declare const selectColor = "#b331c9";
+export declare const disableColor = "#5b5959b5";
+export declare const controllerSize = 10;

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

@@ -0,0 +1,9 @@
+export const key = 'LAYOUT_SELECT';
+export const keyLayoutActionType = Symbol(`${key}_layoutActionType`);
+export const keyLayoutControlType = Symbol(`${key}_layoutControlType`);
+export const keyLayoutController = Symbol(`${key}_layoutController`);
+export const keyLayoutIsHover = Symbol(`${key}_layoutIsHover`);
+export const keyLayoutIsSelected = Symbol(`${key}_layoutIsSelected`);
+export const selectColor = '#b331c9';
+export const disableColor = '#5b5959b5';
+export const controllerSize = 10;

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

@@ -0,0 +1,5 @@
+import type { BoardMiddleware } from '@idraw/types';
+import type { LayoutSelectorSharedStorage } from './types';
+import { keyLayoutIsSelected } from './config';
+export { keyLayoutIsSelected };
+export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage>;

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

@@ -0,0 +1,332 @@
+import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize } from '@idraw/util';
+import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize } from './config';
+import { keyActionType as keyElementActionType, keyHoverElement, middlewareEventSelectClear } from '../selector';
+import { drawLayoutController, drawLayoutHover } from './util';
+import { eventChange } from '../../config';
+export { keyLayoutIsSelected };
+export const MiddlewareLayoutSelector = (opts) => {
+    const { sharer, boardContent, calculator, viewer, eventHub } = opts;
+    const { overlayContext } = boardContent;
+    let prevPoint = null;
+    let prevIsHover = null;
+    let prevIsSelected = null;
+    let isBusy = null;
+    const clear = () => {
+        prevPoint = null;
+        sharer.setSharedStorage(keyLayoutActionType, null);
+        sharer.setSharedStorage(keyLayoutControlType, null);
+        sharer.setSharedStorage(keyLayoutController, null);
+        sharer.setSharedStorage(keyLayoutIsHover, null);
+        sharer.setSharedStorage(keyLayoutIsSelected, null);
+        prevIsHover = null;
+        prevIsSelected = null;
+        isBusy = null;
+    };
+    const isInElementHover = () => {
+        const hoverElement = sharer.getSharedStorage(keyHoverElement);
+        if (hoverElement) {
+            clear();
+            return true;
+        }
+        return false;
+    };
+    const isInElementAction = () => {
+        const elementActionType = sharer.getSharedStorage(keyElementActionType);
+        if (elementActionType && elementActionType !== 'area') {
+            clear();
+            return true;
+        }
+        return false;
+    };
+    const getLayoutSize = () => {
+        const data = sharer.getActiveStorage('data');
+        if (data === null || data === void 0 ? void 0 : data.layout) {
+            const { x, y, w, h } = data.layout;
+            return { x, y, w, h };
+        }
+        return null;
+    };
+    const isInLayout = (p) => {
+        const size = getLayoutSize();
+        if (size) {
+            const { x, y, w, h } = size;
+            const viewScaleInfo = sharer.getActiveViewScaleInfo();
+            const viewSize = calcViewElementSize({
+                x: x - controllerSize / 2,
+                y: y - controllerSize / 2,
+                w: w + controllerSize,
+                h: h + controllerSize
+            }, { viewScaleInfo });
+            return isViewPointInElementSize(p, viewSize);
+        }
+        return false;
+    };
+    const resetController = () => {
+        const viewScaleInfo = sharer.getActiveViewScaleInfo();
+        const size = getLayoutSize();
+        if (size) {
+            const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 });
+            sharer.setSharedStorage(keyLayoutController, controller);
+        }
+        else {
+            sharer.setSharedStorage(keyLayoutController, null);
+        }
+    };
+    const resetControlType = (e) => {
+        const data = sharer.getActiveStorage('data');
+        const controller = sharer.getSharedStorage(keyLayoutController);
+        if (controller && (data === null || data === void 0 ? void 0 : data.layout) && (e === null || e === void 0 ? void 0 : e.point)) {
+            let layoutControlType = null;
+            if (controller) {
+                const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = controller;
+                const list = [topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left];
+                for (let i = 0; i < list.length; i++) {
+                    const item = list[i];
+                    if (isViewPointInVertexes(e.point, item.vertexes)) {
+                        layoutControlType = `${item.type}`;
+                        break;
+                    }
+                }
+                if (layoutControlType) {
+                    sharer.setSharedStorage(keyLayoutControlType, layoutControlType);
+                    eventHub.trigger(middlewareEventSelectClear, {});
+                    return layoutControlType;
+                }
+            }
+        }
+        return null;
+    };
+    const updateCursor = (controlType) => {
+        if (isBusy === true) {
+            return;
+        }
+        eventHub.trigger('cursor', {
+            type: controlType ? `resize-${controlType}` : controlType,
+            groupQueue: [],
+            element: getLayoutSize()
+        });
+    };
+    return {
+        name: '@middleware/layout-selector',
+        use: () => {
+            clear();
+            resetController();
+        },
+        hover: (e) => {
+            if (isBusy === true) {
+                return;
+            }
+            if (isInElementAction()) {
+                return;
+            }
+            if (isInElementHover()) {
+                return;
+            }
+            if (isInLayout(e.point)) {
+                sharer.setSharedStorage(keyLayoutIsHover, true);
+            }
+            else {
+                sharer.setSharedStorage(keyLayoutIsHover, false);
+                if (prevIsHover === true) {
+                    viewer.drawFrame();
+                    prevIsHover = false;
+                }
+            }
+            if (sharer.getSharedStorage(keyLayoutIsSelected) === true) {
+                const prevLayoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+                const data = sharer.getActiveStorage('data');
+                if (data === null || data === void 0 ? void 0 : data.layout) {
+                    if (prevLayoutActionType !== 'resize') {
+                        resetController();
+                        const layoutControlType = resetControlType(e);
+                        if (layoutControlType) {
+                            updateCursor(layoutControlType);
+                        }
+                        else {
+                            updateCursor();
+                            sharer.setSharedStorage(keyLayoutActionType, null);
+                        }
+                    }
+                    else {
+                        const layoutControlType = resetControlType(e);
+                        updateCursor(layoutControlType);
+                    }
+                }
+                return;
+            }
+            if (sharer.getSharedStorage(keyLayoutIsHover) && !prevIsHover) {
+                viewer.drawFrame();
+            }
+            prevIsHover = sharer.getSharedStorage(keyLayoutIsHover);
+        },
+        pointStart: (e) => {
+            if (isInElementAction()) {
+                return;
+            }
+            if (isInLayout(e.point)) {
+                sharer.setSharedStorage(keyLayoutIsSelected, true);
+            }
+            else {
+                if (prevIsSelected === true) {
+                    clear();
+                    viewer.drawFrame();
+                }
+                sharer.setSharedStorage(keyLayoutIsSelected, false);
+            }
+            resetController();
+            const layoutControlType = resetControlType(e);
+            prevPoint = e.point;
+            if (layoutControlType) {
+                sharer.setSharedStorage(keyLayoutActionType, 'resize');
+            }
+            if (sharer.getSharedStorage(keyLayoutIsSelected) === true && !prevIsSelected) {
+                viewer.drawFrame();
+            }
+            prevIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
+        },
+        pointMove: (e) => {
+            if (!sharer.getSharedStorage(keyLayoutIsSelected)) {
+                if (isInElementAction()) {
+                    return;
+                }
+            }
+            const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+            const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
+            const data = sharer.getActiveStorage('data');
+            if (layoutActionType === 'resize' && layoutControlType && (data === null || data === void 0 ? void 0 : data.layout)) {
+                if (prevPoint) {
+                    isBusy = true;
+                    const scale = sharer.getActiveStorage('scale');
+                    const viewMoveX = e.point.x - prevPoint.x;
+                    const viewMoveY = e.point.y - prevPoint.y;
+                    const moveX = viewMoveX / scale;
+                    const moveY = viewMoveY / scale;
+                    const { x, y, w, h, operations = {} } = data.layout;
+                    const { position = 'absolute' } = operations;
+                    if (layoutControlType === 'top') {
+                        if (position === 'relative') {
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                            viewer.scroll({ moveY: viewMoveY });
+                        }
+                        else {
+                            data.layout.y = calculator.toGridNum(y + moveY);
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                        }
+                    }
+                    else if (layoutControlType === 'right') {
+                        data.layout.w = calculator.toGridNum(w + moveX);
+                    }
+                    else if (layoutControlType === 'bottom') {
+                        data.layout.h = calculator.toGridNum(h + moveY);
+                    }
+                    else if (layoutControlType === 'left') {
+                        if (position === 'relative') {
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                            viewer.scroll({ moveX: viewMoveX });
+                        }
+                        else {
+                            data.layout.x = calculator.toGridNum(x + moveX);
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                        }
+                    }
+                    else if (layoutControlType === 'top-left') {
+                        if (position === 'relative') {
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                            viewer.scroll({ moveX: viewMoveX, moveY: viewMoveY });
+                        }
+                        else {
+                            data.layout.x = calculator.toGridNum(x + moveX);
+                            data.layout.y = calculator.toGridNum(y + moveY);
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                        }
+                    }
+                    else if (layoutControlType === 'top-right') {
+                        if (position === 'relative') {
+                            viewer.scroll({
+                                moveY: viewMoveY
+                            });
+                            data.layout.w = calculator.toGridNum(w + moveX);
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                        }
+                        else {
+                            data.layout.y = calculator.toGridNum(y + moveY);
+                            data.layout.w = calculator.toGridNum(w + moveX);
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                        }
+                    }
+                    else if (layoutControlType === 'bottom-right') {
+                        data.layout.w = calculator.toGridNum(w + moveX);
+                        data.layout.h = calculator.toGridNum(h + moveY);
+                    }
+                    else if (layoutControlType === 'bottom-left') {
+                        if (position === 'relative') {
+                            viewer.scroll({
+                                moveX: viewMoveX
+                            });
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                            data.layout.h = calculator.toGridNum(h + moveY);
+                        }
+                        else {
+                            data.layout.x = calculator.toGridNum(x + moveX);
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                            data.layout.h = calculator.toGridNum(h + moveY);
+                        }
+                    }
+                }
+                prevPoint = e.point;
+                resetController();
+                viewer.drawFrame();
+                return false;
+            }
+            if (['resize'].includes(layoutActionType)) {
+                return false;
+            }
+        },
+        pointEnd: () => {
+            isBusy = false;
+            const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+            const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
+            const data = sharer.getActiveStorage('data');
+            if (data && layoutActionType === 'resize' && layoutControlType) {
+                eventHub.trigger(eventChange, {
+                    type: 'changeLayout',
+                    data
+                });
+            }
+        },
+        beforeDrawFrame: ({ snapshot }) => {
+            var _a;
+            if (isInElementAction()) {
+                return;
+            }
+            const { sharedStore, activeStore } = snapshot;
+            const layoutActionType = sharedStore[keyLayoutActionType];
+            const layoutIsHover = sharedStore[keyLayoutIsHover];
+            const layoutIsSelected = sharedStore[keyLayoutIsSelected];
+            if ((_a = activeStore.data) === null || _a === void 0 ? void 0 : _a.layout) {
+                const { x, y, w, h } = activeStore.data.layout;
+                const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+                const size = { x, y, w, h };
+                const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize });
+                if (layoutIsHover === true) {
+                    const viewSize = calcViewElementSize(size, { viewScaleInfo });
+                    drawLayoutHover(overlayContext, { layoutSize: viewSize });
+                }
+                if ((layoutActionType && ['resize'].includes(layoutActionType)) || layoutIsSelected === true) {
+                    drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} });
+                }
+            }
+        },
+        scrollX: () => {
+            clear();
+        },
+        scrollY: () => {
+            clear();
+        },
+        wheelScale: () => {
+            clear();
+        }
+    };
+};

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

@@ -0,0 +1,15 @@
+import type { LayoutSizeController, Element } from '@idraw/types';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHover, keyLayoutIsSelected } from './config';
+import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';
+import type { ActionType as ElementActionType } from '../selector';
+export type ActionType = 'resize' | null;
+export type ControlType = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type LayoutSelectorSharedStorage = {
+    [keyLayoutActionType]: ActionType | null;
+    [keyLayoutControlType]: ControlType | null;
+    [keyLayoutController]: LayoutSizeController | null;
+    [keyElementActionType]: ElementActionType | null;
+    [keyHoverElement]: Element | null;
+    [keyLayoutIsHover]: boolean | null;
+    [keyLayoutIsSelected]: boolean | null;
+};

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

@@ -0,0 +1,2 @@
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHover, keyLayoutIsSelected } from './config';
+import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';

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

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