@idraw/core 0.4.3 → 1.0.0-alpha.1

package/dist/esm/middlewares/path-editor/index.js

@@ -0,0 +1,312 @@
+import { createId, calcPointMoveMaterialInGroup, getMaterialSize, updateMaterialInList, moveInAnchorCommands, moveCurveCtrlInAnchorCommands, addClassName, removeClassName, refinePathMaterial, getMaterialAndGroupQueueFromList, } from '@idraw/util';
+import { coreEventKeys } from '../../static';
+import { ATTR_HELPER_TYPE, HELPER_ANCHOR, HELPER_DIRECTOR, classNameMap, defaultStyles, getRootClassName, getMiddlewarePathEditorStyles, } from './static';
+import { resetRoot, resetAnchorStyle, getAnchorHandlerInfo, getDirectorHandlerInfo } from './dom';
+import { calcPointInCanvas, getPathAnchorCommands } from './util';
+import { calcPathSize, initRoot, initStyles, destroyStyles } from './dom';
+export { getMiddlewarePathEditorStyles };
+export const MiddlewarePathEditor = (opts, config) => {
+    const { viewer, eventHub, sharer, calculator } = opts;
+    const innerConfig = Object.assign(Object.assign({}, defaultStyles), config);
+    const { afterClickAway } = innerConfig;
+    const rootClassName = getRootClassName();
+    const styles = getMiddlewarePathEditorStyles(innerConfig);
+    const container = opts.container;
+    const id = `idraw-middleware-path-editor-${createId()}`;
+    let root = null;
+    let showEditor = false;
+    let hasInitedEvent = false;
+    let handlerStatus = null;
+    let selectedPathMaterial = null;
+    let selectedGroupQueue = null;
+    let prevPoint = null;
+    let moveOriginalStartMaterialSize = null;
+    let selectedAnchorHandler = null;
+    let selectedAnchorHandlerInfo = null;
+    let selectedPathAnchorCommands = null;
+    let selectedDirectorHandler = null;
+    let selectedDirectorHandlerInfo = null;
+    const clearData = () => {
+        selectedPathMaterial = null;
+        clearMoveData();
+        clearSelectedAnchorData();
+    };
+    const clearSelectedAnchorData = () => {
+        clearSelectedDirectorData();
+        selectedAnchorHandler = null;
+        selectedAnchorHandlerInfo = null;
+        selectedPathAnchorCommands = null;
+    };
+    const clearSelectedDirectorData = () => {
+        selectedDirectorHandler = null;
+        selectedDirectorHandlerInfo = null;
+    };
+    const clearSelectedStatus = () => {
+        if (!root) {
+            return;
+        }
+        const $selectedHandlers = Array.from(root.getElementsByClassName(classNameMap.selected));
+        $selectedHandlers.forEach(($handler) => {
+            removeClassName($handler, [classNameMap.selected]);
+        });
+    };
+    const clearMoveData = () => {
+        handlerStatus = null;
+        prevPoint = null;
+        moveOriginalStartMaterialSize = null;
+    };
+    const mouseDownEvent = (e) => {
+        const handler = e.target;
+        const helperType = handler === null || handler === void 0 ? void 0 : handler.getAttribute(ATTR_HELPER_TYPE);
+        if (helperType === HELPER_ANCHOR && selectedPathMaterial) {
+            e.stopPropagation();
+            e.preventDefault();
+            clearSelectedAnchorData();
+            moveOriginalStartMaterialSize = getMaterialSize(selectedPathMaterial);
+            const start = calcPointInCanvas(e, root);
+            prevPoint = start;
+            handlerStatus = 'dragging-anchor';
+            selectedAnchorHandler = handler;
+            selectedAnchorHandlerInfo = getAnchorHandlerInfo(handler);
+            selectedPathAnchorCommands = getPathAnchorCommands(selectedPathMaterial, { calculator });
+            window.addEventListener('mousemove', mouseMoveEvent);
+            addClassName(selectedAnchorHandler, [classNameMap.selected]);
+            viewer.drawFrame();
+        }
+        else if (helperType === HELPER_DIRECTOR && selectedPathMaterial) {
+            e.stopPropagation();
+            e.preventDefault();
+            clearSelectedDirectorData();
+            moveOriginalStartMaterialSize = getMaterialSize(selectedPathMaterial);
+            const start = calcPointInCanvas(e, root);
+            prevPoint = start;
+            handlerStatus = 'dragging-director';
+            selectedDirectorHandler = handler;
+            selectedDirectorHandlerInfo = getDirectorHandlerInfo(handler);
+            selectedPathAnchorCommands = getPathAnchorCommands(selectedPathMaterial, { calculator });
+            window.addEventListener('mousemove', mouseMoveEvent);
+            addClassName(selectedDirectorHandler, [classNameMap.selected]);
+            viewer.drawFrame();
+        }
+        else {
+            clearPathEditCallback();
+            afterClickAway === null || afterClickAway === void 0 ? void 0 : afterClickAway();
+        }
+    };
+    const mouseMoveEvent = (e) => {
+        if (prevPoint && selectedPathMaterial && moveOriginalStartMaterialSize && selectedPathAnchorCommands) {
+            const current = calcPointInCanvas(e, root);
+            const queue = [
+                ...(selectedGroupQueue || []),
+                Object.assign(Object.assign({}, moveOriginalStartMaterialSize), { type: 'group', id: selectedPathMaterial.id, angle: selectedPathMaterial.angle, children: [] }),
+            ];
+            const { moveX, moveY } = calcPointMoveMaterialInGroup(prevPoint, current, queue);
+            const scale = sharer.getActiveStorage('scale') || 1;
+            const totalMoveX = calculator.toGridNum(moveX / scale);
+            const totalMoveY = calculator.toGridNum(moveY / scale);
+            const acmds = [...selectedPathAnchorCommands];
+            if (selectedAnchorHandler && selectedAnchorHandlerInfo && handlerStatus === 'dragging-anchor') {
+                const newAcmds = moveInAnchorCommands(acmds, {
+                    type: 'start',
+                    index: selectedAnchorHandlerInfo.index,
+                    moveX: totalMoveX,
+                    moveY: totalMoveY,
+                });
+                const data = sharer.getActiveStorage('data');
+                const newCommands = newAcmds.map(({ id, type, params }) => ({ id, type, params }));
+                updateMaterialInList(selectedPathMaterial.id, {
+                    commands: newCommands,
+                }, data.materials);
+                selectedPathMaterial.commands = newCommands;
+                calculator.modifyVirtualAttributes(selectedPathMaterial, {
+                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                    groupQueue: selectedGroupQueue || [],
+                });
+                viewer.drawFrame();
+            }
+            else if (selectedDirectorHandler && selectedDirectorHandlerInfo && handlerStatus === 'dragging-director') {
+                const { type, fromAnchorId } = selectedDirectorHandlerInfo;
+                const updatedCmdIndex = acmds.findIndex((item) => item.id === fromAnchorId);
+                const newAcmds = moveCurveCtrlInAnchorCommands(acmds, {
+                    type,
+                    index: updatedCmdIndex,
+                    moveX: totalMoveX,
+                    moveY: totalMoveY,
+                });
+                const data = sharer.getActiveStorage('data') || { materials: [] };
+                const newCommands = newAcmds.map(({ id, type, params }) => ({ id, type, params }));
+                updateMaterialInList(selectedPathMaterial.id, {
+                    commands: newCommands,
+                }, data.materials);
+                selectedPathMaterial.commands = newCommands;
+                calculator.modifyVirtualAttributes(selectedPathMaterial, {
+                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                    groupQueue: selectedGroupQueue || [],
+                });
+                viewer.drawFrame();
+            }
+        }
+    };
+    const resetPathSize = () => {
+        calcPathSize(root);
+    };
+    const refineAction = () => {
+        if (!selectedPathMaterial) {
+            return;
+        }
+        selectedPathMaterial = refinePathMaterial(selectedPathMaterial);
+        const data = sharer.getActiveStorage('data') || { materials: [] };
+        updateMaterialInList(selectedPathMaterial.id, {
+            x: selectedPathMaterial.x,
+            y: selectedPathMaterial.y,
+            width: selectedPathMaterial.width,
+            height: selectedPathMaterial.height,
+            commands: selectedPathMaterial.commands,
+        }, data.materials);
+        calculator.modifyVirtualAttributes(selectedPathMaterial, {
+            viewScaleInfo: sharer.getActiveViewScaleInfo(),
+            viewSizeInfo: sharer.getActiveViewSizeInfo(),
+            groupQueue: selectedGroupQueue || [],
+        });
+        viewer.drawFrame();
+    };
+    const mouseUpEvent = () => {
+        window.removeEventListener('mousemove', mouseMoveEvent);
+        refineAction();
+        clearSelectedStatus();
+        clearMoveData();
+        resetPathSize();
+    };
+    const mouseLeaveEvent = () => {
+        window.removeEventListener('mousemove', mouseMoveEvent);
+        refineAction();
+        clearSelectedStatus();
+        clearMoveData();
+        resetPathSize();
+    };
+    const onEvents = () => {
+        if (hasInitedEvent) {
+            return;
+        }
+        root === null || root === void 0 ? void 0 : root.addEventListener('mousedown', mouseDownEvent);
+        window.addEventListener('mouseup', mouseUpEvent);
+        window.addEventListener('mouseleave', mouseLeaveEvent);
+        hasInitedEvent = true;
+    };
+    const offEvents = () => {
+        root === null || root === void 0 ? void 0 : root.removeEventListener('mousedown', mouseDownEvent);
+        window.removeEventListener('mouseup', mouseUpEvent);
+        window.removeEventListener('mouseleave', mouseLeaveEvent);
+        hasInitedEvent = false;
+    };
+    const init = () => {
+        if (!container) {
+            return;
+        }
+        root = initRoot(container, { id, rootClassName });
+        if (!container.contains(root)) {
+            container.appendChild(root);
+        }
+        showEditor = true;
+    };
+    const destroy = () => {
+        offEvents();
+        root === null || root === void 0 ? void 0 : root.remove();
+        root = null;
+        showEditor = false;
+    };
+    const pathEditCallback = (e) => {
+        init();
+        const { id } = e;
+        if (typeof id === 'string' && id) {
+            const data = sharer.getActiveStorage('data');
+            const { groupQueue, material } = getMaterialAndGroupQueueFromList(id, data.materials);
+            if ((material === null || material === void 0 ? void 0 : material.type) === 'path') {
+                selectedPathMaterial = material;
+                selectedGroupQueue = [...groupQueue];
+                resetRoot(root, {
+                    material: material,
+                    groupQueue,
+                    calculator,
+                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                    styles,
+                });
+                onEvents();
+                const map = sharer.getActiveOverrideMaterialMap() || {};
+                map[material.id] = {
+                    operations: { renderPathTrace: true },
+                };
+                sharer.setActiveOverrideMaterialMap(map);
+                viewer.drawFrame();
+            }
+        }
+    };
+    const clearPathEditCallback = () => {
+        const map = sharer.getActiveOverrideMaterialMap() || {};
+        delete map[selectedPathMaterial === null || selectedPathMaterial === void 0 ? void 0 : selectedPathMaterial.id];
+        sharer.setActiveOverrideMaterialMap(map);
+        clearData();
+        destroy();
+        viewer.drawFrame();
+    };
+    return {
+        name: '@middleware/pen-edit',
+        use() {
+            initStyles(rootClassName, styles);
+            eventHub.on(coreEventKeys.PATH_EDIT, pathEditCallback);
+            eventHub.on(coreEventKeys.CLEAR_PATH_EDIT, clearPathEditCallback);
+        },
+        disuse() {
+            destroyStyles(rootClassName);
+            eventHub.off(coreEventKeys.PATH_EDIT, pathEditCallback);
+            eventHub.off(coreEventKeys.CLEAR_PATH_EDIT, clearPathEditCallback);
+        },
+        beforeDrawFrame() {
+            resetAnchorStyle(root, {
+                selectedAnchorId: selectedAnchorHandlerInfo === null || selectedAnchorHandlerInfo === void 0 ? void 0 : selectedAnchorHandlerInfo.id,
+                material: selectedPathMaterial,
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                calculator,
+                styles,
+            });
+        },
+        hover() {
+            return !showEditor;
+        },
+        pointStart() {
+            return !showEditor;
+        },
+        pointMove() {
+            return !showEditor;
+        },
+        pointEnd() {
+            return !showEditor;
+        },
+        pointLeave() {
+            return !showEditor;
+        },
+        doubleClick() {
+            return !showEditor;
+        },
+        contextMenu() {
+            return !showEditor;
+        },
+        wheel() {
+            return !showEditor;
+        },
+        wheelScale() {
+            return !showEditor;
+        },
+        scrollX() {
+            return !showEditor;
+        },
+        scrollY() {
+            return !showEditor;
+        },
+        resize() {
+            return !showEditor;
+        },
+    };
+};

package/dist/esm/middlewares/path-editor/parse.d.ts

@@ -0,0 +1,5 @@
+import type { Point, Context2DMoveToCommand, Context2DBezierCurveCommand, Context2DEllipseCommand } from '@idraw/types';
+import type { CommandItem } from './types';
+export declare function parseMoveTo(cmd: Context2DMoveToCommand): CommandItem;
+export declare function parseBezierCurveTo(prevPoint: Point, cmd: Context2DBezierCurveCommand): CommandItem;
+export declare function parseEllipse(prevPoint: Point, cmd: Context2DEllipseCommand): CommandItem;

package/dist/esm/middlewares/path-editor/parse.js

@@ -0,0 +1,37 @@
+import { rotatePoint } from '@idraw/util';
+export function parseMoveTo(cmd) {
+    const { id, name, params } = cmd;
+    const { x, y } = params;
+    const item = {
+        id,
+        name,
+        start: { x, y },
+        end: { x, y },
+    };
+    return item;
+}
+export function parseBezierCurveTo(prevPoint, cmd) {
+    const { id, name, params } = cmd;
+    const { cp1x, cp1y, cp2x, cp2y, x, y } = params;
+    const item = {
+        id,
+        name,
+        start: { x: prevPoint.x, y: prevPoint.y },
+        end: { x, y },
+        ctrl1: { x: cp1x, y: cp1y },
+        ctrl2: { x: cp2x, y: cp2y },
+    };
+    return item;
+}
+export function parseEllipse(prevPoint, cmd) {
+    const { id, name, params } = cmd;
+    const { centerX, centerY, endRadian, startRadian } = params;
+    const item = {
+        id,
+        name,
+        start: { x: prevPoint.x, y: prevPoint.y },
+        end: rotatePoint({ x: centerX, y: centerY }, prevPoint, endRadian - startRadian),
+        center: { x: centerX, y: centerY },
+    };
+    return item;
+}

package/dist/esm/middlewares/path-editor/static.d.ts

@@ -0,0 +1,34 @@
+import type { MiddlewarePathEditorStyles, MiddlewarePathEditorConfig } from '@idraw/types';
+export declare const key = "PATH-EDITOR";
+export declare const getRootClassName: () => string;
+export declare const classNameMap: {
+    hide: string;
+    anchor: string;
+    director: string;
+    directorLines: string;
+    pathLine: string;
+    selected: string;
+};
+export declare const ATTR_UUID = "data-uuid";
+export declare const ATTR_X = "data-x";
+export declare const ATTR_Y = "data-y";
+export declare const ATTR_W = "data-w";
+export declare const ATTR_H = "data-h";
+export declare const ATTR_ANGLE = "data-angle";
+export declare const ATTR_TYPE = "data-type";
+export declare const ATTR_HELPER_TYPE = "data-helper-type";
+export declare const ATTR_AHCHOR_CMD_TYPE = "data-anchor-cmd-type";
+export declare const ATTR_AHCHOR_INDEX = "data-anchor-index";
+export declare const ATTR_AHCHOR_ID = "data-anchor-id";
+export declare const ATTR_DIRECTOR_FROM_AHCHOR_ID = "data-director-from-anchor-id";
+export declare const ATTR_DIRECTOR_CONTROL_TYPE = "data-director-control-type";
+export declare const ATTR_DIRECTOR_OPENED_BY_AHCHOR_ID = "data-director-opened-by-anchor-id";
+export declare const HELPER_GROUP = "group";
+export declare const HELPER_ELEMENT = "material";
+export declare const HELPER_ANCHOR = "anchor";
+export declare const HELPER_DIRECTOR = "director";
+export declare const HELPER_DIRECTOR_LINE = "director-line";
+export declare const HELPER_PATH_PREVIEW = "path-preview";
+export declare const HELPER_PATH_DEFINITION = "path-definition";
+export declare const defaultStyles: MiddlewarePathEditorStyles;
+export declare function getMiddlewarePathEditorStyles<C = MiddlewarePathEditorConfig, S = MiddlewarePathEditorStyles>(config: C): S;

package/dist/esm/middlewares/path-editor/static.js

@@ -0,0 +1,82 @@
+import { createId, getMiddlewareValidStyles } from '@idraw/util';
+export const key = 'PATH-EDITOR';
+const prefix = `idraw-middleware-path-creator`;
+export const getRootClassName = () => `${prefix}-${createId()}`;
+export const classNameMap = {
+    hide: `${prefix}-hide`,
+    anchor: `${prefix}-anchor`,
+    director: `${prefix}-director`,
+    directorLines: `${prefix}-director-lines`,
+    pathLine: `${prefix}-path-line`,
+    selected: `${prefix}-selected`,
+};
+export const ATTR_UUID = `data-uuid`;
+export const ATTR_X = `data-x`;
+export const ATTR_Y = `data-y`;
+export const ATTR_W = `data-w`;
+export const ATTR_H = `data-h`;
+export const ATTR_ANGLE = `data-angle`;
+export const ATTR_TYPE = `data-type`;
+export const ATTR_HELPER_TYPE = `data-helper-type`;
+export const ATTR_AHCHOR_CMD_TYPE = `data-anchor-cmd-type`;
+export const ATTR_AHCHOR_INDEX = `data-anchor-index`;
+export const ATTR_AHCHOR_ID = `data-anchor-id`;
+export const ATTR_DIRECTOR_FROM_AHCHOR_ID = `data-director-from-anchor-id`;
+export const ATTR_DIRECTOR_CONTROL_TYPE = `data-director-control-type`;
+export const ATTR_DIRECTOR_OPENED_BY_AHCHOR_ID = `data-director-opened-by-anchor-id`;
+export const HELPER_GROUP = 'group';
+export const HELPER_ELEMENT = 'material';
+export const HELPER_ANCHOR = 'anchor';
+export const HELPER_DIRECTOR = 'director';
+export const HELPER_DIRECTOR_LINE = 'director-line';
+export const HELPER_PATH_PREVIEW = 'path-preview';
+export const HELPER_PATH_DEFINITION = 'path-definition';
+export const defaultStyles = {
+    zIndex: 2,
+    anchorSize: 8,
+    anchorSelectedSize: 12,
+    anchorBorderWidth: 2,
+    anchorBorderColor: '#0c8ce9',
+    anchorBackground: '#ffffff',
+    anchorHoverBorderColor: '#1671b8',
+    anchorHoverBackground: '#cfe4f4',
+    anchorActiveBorderColor: '#0d548c',
+    anchorActiveBackground: '#88c0ec',
+    directorSize: 10,
+    directorBorderWidth: 2,
+    directorBorderColor: '#7315d1ff',
+    directorBackground: '#ffffff',
+    directorHoverBorderColor: '#4716b8ff',
+    directorHoverBackground: '#ebcff4ff',
+    directorActiveBorderColor: '#510d8cff',
+    directorActiveBackground: '#c988ecff',
+    directorLineColor: '#7315d1ff',
+    helperStrokeColor: '#0c8ce9',
+    helperStrokeWidth: 1,
+};
+export function getMiddlewarePathEditorStyles(config) {
+    const styles = getMiddlewareValidStyles(config, [
+        'zIndex',
+        'anchorSize',
+        'anchorSelectedSize',
+        'anchorBorderWidth',
+        'anchorBorderColor',
+        'anchorBackground',
+        'anchorHoverBorderColor',
+        'anchorHoverBackground',
+        'anchorActiveBorderColor',
+        'anchorActiveBackground',
+        'directorSize',
+        'directorBorderWidth',
+        'directorBorderColor',
+        'directorBackground',
+        'directorHoverBorderColor',
+        'directorHoverBackground',
+        'directorActiveBorderColor',
+        'directorActiveBackground',
+        'directorLineColor',
+        'helperStrokeColor',
+        'helperStrokeWidth',
+    ]);
+    return styles;
+}

package/dist/esm/middlewares/path-editor/types.d.ts

@@ -0,0 +1,26 @@
+import type { Point, Context2DCommand } from '@idraw/types';
+export type PathEditorSharedStorage = {};
+export type CommandItem = {
+    id: string;
+    name: Context2DCommand['name'];
+    start: Point;
+    end: Point;
+    ctrl1?: Point;
+    ctrl2?: Point;
+    center?: Point;
+};
+export type Directioner = {
+    anchorId: string;
+    openedByAnchorId: string;
+    anchorPoint: Point;
+    directPoint: Point;
+};
+export type AnchorInfo = {
+    id: string;
+    index: number;
+};
+export type DirectorInfo = {
+    type: 'curve-ctrl1' | 'curve-ctrl2';
+    fromAnchorId: string;
+    openedAnchorId: string;
+};

package/dist/esm/middlewares/path-editor/types.js

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

package/dist/esm/middlewares/path-editor/util.d.ts

@@ -0,0 +1,5 @@
+import type { StrictMaterial, Point, PathAnchorCommand, ViewCalculator } from '@idraw/types';
+export declare function calcPointInCanvas(e: MouseEvent, container: HTMLElement): Point;
+export declare function getPathAnchorCommands(material: StrictMaterial<'path'> | null, opts: {
+    calculator: ViewCalculator;
+}): PathAnchorCommand[];

package/dist/esm/middlewares/path-editor/util.js

@@ -0,0 +1,21 @@
+export function calcPointInCanvas(e, container) {
+    const { pageX, pageY } = e;
+    const rect = container.getBoundingClientRect();
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const containerPageX = rect.left + scrollLeft;
+    const containerPageY = rect.top + scrollTop;
+    const containerX = pageX - containerPageX;
+    const containerY = pageY - containerPageY;
+    return {
+        x: containerX,
+        y: containerY,
+    };
+}
+export function getPathAnchorCommands(material, opts) {
+    const { calculator } = opts;
+    const { id } = material;
+    const flatItem = calculator.getVirtualItem(id);
+    const cmds = [...(flatItem.anchorCommands || [])];
+    return cmds;
+}

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

@@ -1,5 +1,5 @@
-import { keySelectedElementList } from '../selector';
-import { coreEventKeys } from '../../config';
+import { keySelectedMaterialList } from '../selector';
+import { coreEventKeys } from '../../static';
 export const MiddlewarePointer = (opts) => {
     const { boardContent, eventHub, sharer } = opts;
     const canvas = boardContent.boardContext.canvas;
@@ -32,11 +32,11 @@ export const MiddlewarePointer = (opts) => {
             const { left, top } = getCanvasRect();
             contextMenuPointer.style.left = `${left + point.x}px`;
             contextMenuPointer.style.top = `${top + point.y}px`;
-            const selectedElements = sharer.getSharedStorage(keySelectedElementList);
+            const selectedMaterials = sharer.getSharedStorage(keySelectedMaterialList);
             eventHub.trigger(coreEventKeys.CONTEXT_MENU, {
                 pointerContainer: contextMenuPointer,
-                selectedElements: selectedElements || []
+                selectedMaterials: selectedMaterials || [],
             });
-        }
+        },
     };
 };

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

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

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

@@ -1,3 +1,5 @@
 import type { Middleware, CoreEventMap, MiddlewareRulerConfig } from '@idraw/types';
 import type { DeepRulerSharedStorage } from './types';
+import { getMiddlewareRulerStyles } from './static';
+export { getMiddlewareRulerStyles };
 export declare const MiddlewareRuler: Middleware<DeepRulerSharedStorage, CoreEventMap, MiddlewareRulerConfig>;

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

@@ -1,11 +1,13 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawGrid, drawScrollerSelectedArea } from './util';
-import { defaultStyle } from './config';
-import { coreEventKeys } from '../../config';
+import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawGrid, drawScrollerSelectedArea, } from './util';
+import { defaultStyle, getMiddlewareRulerStyles } from './static';
+import { coreEventKeys } from '../../static';
+export { getMiddlewareRulerStyles };
 export const MiddlewareRuler = (opts, config) => {
     const { boardContent, viewer, eventHub, calculator } = opts;
     const { overlayContext, underlayContext } = boardContent;
     let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    let styles = getMiddlewareRulerStyles(innerConfig);
     let show = true;
     let showGrid = true;
     const rulerCallback = (e) => {
@@ -29,27 +31,18 @@ export const MiddlewareRuler = (opts, config) => {
         },
         resetConfig(config) {
             innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+            styles = getMiddlewareRulerStyles(innerConfig);
         },
         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(overlayContext, { viewScaleInfo, viewSizeInfo, style });
-                drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
+                drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo, styles });
+                drawScrollerSelectedArea(overlayContext, { snapshot, calculator, styles });
                 const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawXRuler(overlayContext, { scaleList: xList, style });
+                drawXRuler(overlayContext, { scaleList: xList, styles });
                 const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawYRuler(overlayContext, { scaleList: yList, style });
+                drawYRuler(overlayContext, { scaleList: yList, styles });
                 if (showGrid === true) {
                     const ctx = rulerUnit === 1 ? overlayContext : underlayContext;
                     drawGrid(ctx, {
@@ -57,10 +50,10 @@ export const MiddlewareRuler = (opts, config) => {
                         yList,
                         viewScaleInfo,
                         viewSizeInfo,
-                        style
+                        styles,
                     });
                 }
             }
-        }
+        },
     };
 };

package/dist/esm/middlewares/ruler/static.d.ts

@@ -0,0 +1,8 @@
+import type { MiddlewareRulerConfig, MiddlewareRulerStyles } 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: MiddlewareRulerStyles;
+export declare function getMiddlewareRulerStyles<C = MiddlewareRulerConfig, S = MiddlewareRulerStyles>(config: C): S;