@idraw/core 0.4.0-beta.4 → 0.4.0-beta.41

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

@@ -0,0 +1,371 @@
+import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize, getElementSize, toFlattenLayout } from '@idraw/util';
+import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving, controllerSize, defaultStyle } from './config';
+import { keyActionType as keyElementActionType } from '../selector';
+import { drawLayoutController, drawLayoutHover } from './util';
+import { coreEventKeys } from '../../config';
+export { keyLayoutIsSelected, keyLayoutIsBusyMoving };
+export const MiddlewareLayoutSelector = (opts, config) => {
+    const { sharer, boardContent, calculator, viewer, eventHub } = opts;
+    const { overlayContext } = boardContent;
+    let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    let prevPoint = null;
+    let prevIsHoverContent = null;
+    let prevIsSelected = null;
+    let pointStartLayoutSize = null;
+    const clear = () => {
+        prevPoint = null;
+        sharer.setSharedStorage(keyLayoutActionType, null);
+        sharer.setSharedStorage(keyLayoutControlType, null);
+        sharer.setSharedStorage(keyLayoutController, null);
+        sharer.setSharedStorage(keyLayoutIsHoverContent, null);
+        sharer.setSharedStorage(keyLayoutIsHoverController, null);
+        sharer.setSharedStorage(keyLayoutIsSelected, null);
+        sharer.setSharedStorage(keyLayoutIsBusyMoving, null);
+        prevIsHoverContent = null;
+        prevIsSelected = null;
+    };
+    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);
+        let controllerType = null;
+        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(coreEventKeys.CLEAR_SELECT);
+                    controllerType = layoutControlType;
+                }
+            }
+        }
+        if (controllerType) {
+            sharer.setSharedStorage(keyLayoutIsHoverController, true);
+        }
+        else {
+            sharer.setSharedStorage(keyLayoutIsHoverController, false);
+        }
+        return controllerType;
+    };
+    const updateCursor = (controlType) => {
+        if (sharer.getSharedStorage(keyLayoutIsBusyMoving) === true) {
+            return;
+        }
+        eventHub.trigger(coreEventKeys.CURSOR, {
+            type: controlType ? `resize-${controlType}` : controlType,
+            groupQueue: [],
+            element: getLayoutSize()
+        });
+    };
+    return {
+        name: '@middleware/layout-selector',
+        use: () => {
+            clear();
+            resetController();
+        },
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
+        hover: (e) => {
+            if (sharer.getSharedStorage(keyLayoutIsBusyMoving) === true) {
+                return;
+            }
+            if (isInElementAction()) {
+                return;
+            }
+            if (isInLayout(e.point)) {
+                sharer.setSharedStorage(keyLayoutIsHoverContent, true);
+            }
+            else {
+                sharer.setSharedStorage(keyLayoutIsHoverContent, false);
+                if (prevIsHoverContent === true) {
+                    viewer.drawFrame();
+                    prevIsHoverContent = 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);
+                    }
+                }
+                if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
+                    return false;
+                }
+                return;
+            }
+            if (sharer.getSharedStorage(keyLayoutIsHoverContent) && !prevIsHoverContent) {
+                viewer.drawFrame();
+            }
+            prevIsHoverContent = sharer.getSharedStorage(keyLayoutIsHoverContent);
+            if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
+                return false;
+            }
+        },
+        pointStart: (e) => {
+            if (isInElementAction()) {
+                return;
+            }
+            if (isInLayout(e.point)) {
+                sharer.setSharedStorage(keyLayoutIsSelected, true);
+            }
+            else {
+                if (prevIsSelected === true) {
+                    clear();
+                    viewer.drawFrame();
+                }
+                sharer.setSharedStorage(keyLayoutIsSelected, false);
+            }
+            const data = sharer.getActiveStorage('data');
+            if (data === null || data === void 0 ? void 0 : data.layout) {
+                pointStartLayoutSize = getElementSize(data.layout);
+            }
+            else {
+                pointStartLayoutSize = null;
+            }
+            resetController();
+            const layoutControlType = resetControlType(e);
+            prevPoint = e.point;
+            if (layoutControlType) {
+                sharer.setSharedStorage(keyLayoutActionType, 'resize');
+            }
+            if (sharer.getSharedStorage(keyLayoutIsSelected) === true && !prevIsSelected) {
+                viewer.drawFrame();
+                eventHub.trigger(coreEventKeys.SELECT_LAYOUT);
+            }
+            prevIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
+            if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
+                return false;
+            }
+        },
+        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) {
+                    sharer.setSharedStorage(keyLayoutIsBusyMoving, 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: () => {
+            sharer.setSharedStorage(keyLayoutIsBusyMoving, false);
+            const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+            const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
+            const data = sharer.getActiveStorage('data');
+            if (data && layoutActionType === 'resize' && layoutControlType) {
+                let modifyRecord = undefined;
+                if (pointStartLayoutSize) {
+                    modifyRecord = {
+                        type: 'modifyLayout',
+                        time: Date.now(),
+                        content: {
+                            method: 'modifyLayout',
+                            before: toFlattenLayout(pointStartLayoutSize),
+                            after: toFlattenLayout(getElementSize(data.layout))
+                        }
+                    };
+                }
+                eventHub.trigger(coreEventKeys.CHANGE, {
+                    type: 'dragLayout',
+                    data,
+                    modifyRecord
+                });
+            }
+            pointStartLayoutSize = null;
+            sharer.setSharedStorage(keyLayoutActionType, null);
+            sharer.setSharedStorage(keyLayoutControlType, null);
+            if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
+                return false;
+            }
+        },
+        beforeDrawFrame: ({ snapshot }) => {
+            var _a;
+            if (isInElementAction()) {
+                return;
+            }
+            const { activeColor } = innerConfig;
+            const style = { activeColor };
+            const { sharedStore, activeStore } = snapshot;
+            const layoutActionType = sharedStore[keyLayoutActionType];
+            const layoutIsHover = sharedStore[keyLayoutIsHoverContent];
+            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, style });
+                }
+                if ((layoutActionType && ['resize'].includes(layoutActionType)) || layoutIsSelected === true) {
+                    drawLayoutController(overlayContext, { controller, style });
+                }
+            }
+        },
+        scrollX: () => {
+            clear();
+        },
+        scrollY: () => {
+            clear();
+        },
+        wheelScale: () => {
+            clear();
+        }
+    };
+};

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

@@ -0,0 +1,17 @@
+import type { LayoutSizeController, Element } from '@idraw/types';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving } 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;
+    [keyLayoutIsHoverContent]: boolean | null;
+    [keyLayoutIsHoverController]: boolean | null;
+    [keyLayoutIsSelected]: boolean | null;
+    [keyLayoutIsBusyMoving]: boolean | null;
+};

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

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

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

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

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

@@ -0,0 +1,78 @@
+function drawControllerBox(ctx, boxVertexes, style) {
+    const { activeColor } = style;
+    ctx.setLineDash([]);
+    ctx.fillStyle = '#FFFFFF';
+    ctx.beginPath();
+    ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
+    ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y);
+    ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y);
+    ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
+    ctx.closePath();
+    ctx.fill('nonzero');
+    ctx.strokeStyle = activeColor;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
+    ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y);
+    ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y);
+    ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
+    ctx.closePath();
+    ctx.stroke();
+}
+function drawControllerLine(ctx, opts) {
+    const { start, end, style } = opts;
+    const { activeColor } = style;
+    const lineWidth = 2;
+    const strokeStyle = activeColor;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = strokeStyle;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    ctx.closePath();
+    ctx.stroke();
+}
+export function drawLayoutController(ctx, opts) {
+    const { controller, style } = opts;
+    const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller;
+    drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, style });
+    drawControllerLine(ctx, {
+        start: topRight.center,
+        end: bottomRight.center,
+        centerVertexes: rightMiddle.vertexes,
+        style
+    });
+    drawControllerLine(ctx, {
+        start: bottomRight.center,
+        end: bottomLeft.center,
+        centerVertexes: bottomMiddle.vertexes,
+        style
+    });
+    drawControllerLine(ctx, {
+        start: bottomLeft.center,
+        end: topLeft.center,
+        centerVertexes: leftMiddle.vertexes,
+        style
+    });
+    drawControllerBox(ctx, topLeft.vertexes, style);
+    drawControllerBox(ctx, topRight.vertexes, style);
+    drawControllerBox(ctx, bottomRight.vertexes, style);
+    drawControllerBox(ctx, bottomLeft.vertexes, style);
+}
+export function drawLayoutHover(ctx, opts) {
+    const { layoutSize, style } = opts;
+    const { activeColor } = style;
+    const { x, y, w, h } = layoutSize;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = activeColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + w, y);
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x, y + h);
+    ctx.lineTo(x, y);
+    ctx.closePath();
+    ctx.stroke();
+}

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

@@ -0,0 +1,3 @@
+import type { Middleware, CoreEventMap } from '@idraw/types';
+import type { DeepPointerSharedStorage } from './types';
+export declare const MiddlewarePointer: Middleware<DeepPointerSharedStorage, CoreEventMap>;

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

@@ -0,0 +1,42 @@
+import { keySelectedElementList } from '../selector';
+import { coreEventKeys } from '../../config';
+export const MiddlewarePointer = (opts) => {
+    const { boardContent, eventHub, sharer } = opts;
+    const canvas = boardContent.boardContext.canvas;
+    const container = opts.container || document.body;
+    const id = `idraw-middleware-pointer-${Math.random().toString(26).substring(2)}`;
+    const getCanvasRect = () => {
+        const clientRect = canvas.getBoundingClientRect();
+        const { left, top, width, height } = clientRect;
+        return { left, top, width, height };
+    };
+    let contextMenuPointer = document.createElement('div');
+    return {
+        name: '@middleware/pointer',
+        use() {
+            contextMenuPointer.setAttribute('id', id);
+            contextMenuPointer.style.position = 'fixed';
+            contextMenuPointer.style.top = '0';
+            contextMenuPointer.style.bottom = 'unset';
+            contextMenuPointer.style.left = '0';
+            contextMenuPointer.style.right = 'unset';
+            container.appendChild(contextMenuPointer);
+        },
+        disuse() {
+            container.removeChild(contextMenuPointer);
+            contextMenuPointer.remove();
+            contextMenuPointer = null;
+        },
+        contextMenu(e) {
+            const { point } = e;
+            const { left, top } = getCanvasRect();
+            contextMenuPointer.style.left = `${left + point.x}px`;
+            contextMenuPointer.style.top = `${top + point.y}px`;
+            const selectedElements = sharer.getSharedStorage(keySelectedElementList);
+            eventHub.trigger(coreEventKeys.CONTEXT_MENU, {
+                pointerContainer: contextMenuPointer,
+                selectedElements: selectedElements || []
+            });
+        }
+    };
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { MiddlewareRulerStyle } from '@idraw/types';
+export declare const rulerSize = 16;
+export declare const fontSize = 10;
+export declare const fontWeight = 100;
+export declare const lineSize = 1;
+export declare const fontFamily = "monospace";
+export declare const defaultStyle: MiddlewareRulerStyle;

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

@@ -0,0 +1,21 @@
+export const rulerSize = 16;
+export const fontSize = 10;
+export const fontWeight = 100;
+export const lineSize = 1;
+export const fontFamily = 'monospace';
+const background = '#FFFFFFA8';
+const borderColor = '#00000080';
+const scaleColor = '#000000';
+const textColor = '#00000080';
+const gridColor = '#AAAAAA20';
+const gridPrimaryColor = '#AAAAAA40';
+const selectedAreaColor = '#19609780';
+export const defaultStyle = {
+    background,
+    borderColor,
+    scaleColor,
+    textColor,
+    gridColor,
+    gridPrimaryColor,
+    selectedAreaColor
+};

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

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

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

@@ -1,9 +1,11 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid } from './util';
-export const middlewareEventRuler = '@middleware/show-ruler';
-export const MiddlewareRuler = (opts) => {
-    const { boardContent, viewer, eventHub } = opts;
-    const { helperContext, underContext } = boardContent;
+import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawGrid, drawScrollerSelectedArea } from './util';
+import { defaultStyle } from './config';
+import { coreEventKeys } from '../../config';
+export const MiddlewareRuler = (opts, config) => {
+    const { boardContent, viewer, eventHub, calculator } = opts;
+    const { overlayContext, underlayContext } = boardContent;
+    let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
     let show = true;
     let showGrid = true;
     const rulerCallback = (e) => {
@@ -18,27 +20,44 @@ export const MiddlewareRuler = (opts) => {
         }
     };
     return {
+        name: '@middleware/ruler',
         use() {
-            eventHub.on(middlewareEventRuler, rulerCallback);
+            eventHub.on(coreEventKeys.RULER, rulerCallback);
         },
         disuse() {
-            eventHub.off(middlewareEventRuler, rulerCallback);
+            eventHub.off(coreEventKeys.RULER, rulerCallback);
+        },
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
         },
         beforeDrawFrame: ({ snapshot }) => {
+            const { background, borderColor, scaleColor, textColor, gridColor, gridPrimaryColor, selectedAreaColor } = innerConfig;
+            const style = {
+                background,
+                borderColor,
+                scaleColor,
+                textColor,
+                gridColor,
+                gridPrimaryColor,
+                selectedAreaColor
+            };
             if (show === true) {
                 const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
                 const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-                drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
-                const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawXRuler(helperContext, { scaleList: xList });
-                const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawYRuler(helperContext, { scaleList: yList });
+                drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo, style });
+                drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
+                const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
+                drawXRuler(overlayContext, { scaleList: xList, style });
+                const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
+                drawYRuler(overlayContext, { scaleList: yList, style });
                 if (showGrid === true) {
-                    drawUnderGrid(underContext, {
+                    const ctx = rulerUnit === 1 ? overlayContext : underlayContext;
+                    drawGrid(ctx, {
                         xList,
                         yList,
                         viewScaleInfo,
-                        viewSizeInfo
+                        viewSizeInfo,
+                        style
                     });
                 }
             }

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 {};