@idraw/core 0.4.0-beta.9 → 0.4.0

package/dist/esm/middlewares/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/middlewares/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/middlewares/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/middlewares/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/middlewares/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/middlewares/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/middlewares/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/middlewares/pointer/types.js

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

package/dist/esm/middlewares/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/middlewares/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/middlewares/ruler/index.d.ts

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

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

@@ -0,0 +1,66 @@
+import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
+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) => {
+        if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean') {
+            show = e.show;
+        }
+        if (typeof (e === null || e === void 0 ? void 0 : e.showGrid) === 'boolean') {
+            showGrid = e.showGrid;
+        }
+        if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean' || typeof (e === null || e === void 0 ? void 0 : e.showGrid) === 'boolean') {
+            viewer.drawFrame();
+        }
+    };
+    return {
+        name: '@middleware/ruler',
+        use() {
+            eventHub.on(coreEventKeys.RULER, rulerCallback);
+        },
+        disuse() {
+            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(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) {
+                    const ctx = rulerUnit === 1 ? overlayContext : underlayContext;
+                    drawGrid(ctx, {
+                        xList,
+                        yList,
+                        viewScaleInfo,
+                        viewSizeInfo,
+                        style
+                    });
+                }
+            }
+        }
+    };
+};

package/dist/esm/middlewares/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/middlewares/ruler/types.js

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

package/dist/esm/{middleware → middlewares}/ruler/util.d.ts

@@ -1,4 +1,5 @@
-import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D } from '@idraw/types';
+import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator, MiddlewareRulerStyle } from '@idraw/types';
+import type { DeepRulerSharedStorage } from './types';
 interface RulerScale {
     num: number;
     showNum: boolean;
@@ -9,25 +10,40 @@ interface RulerScale {
 export declare function calcXRulerScaleList(opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-}): RulerScale[];
+}): {
+    list: RulerScale[];
+    rulerUnit: number;
+};
 export declare function calcYRulerScaleList(opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-}): RulerScale[];
+}): {
+    list: RulerScale[];
+    rulerUnit: number;
+};
 export declare function drawXRuler(ctx: ViewContext2D, opts: {
     scaleList: RulerScale[];
+    style: MiddlewareRulerStyle;
 }): void;
 export declare function drawYRuler(ctx: ViewContext2D, opts: {
     scaleList: RulerScale[];
+    style: MiddlewareRulerStyle;
 }): void;
 export declare function drawRulerBackground(ctx: ViewContext2D, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareRulerStyle;
 }): void;
-export declare function drawUnderGrid(ctx: ViewContext2D, opts: {
+export declare function drawGrid(ctx: ViewContext2D, opts: {
     xList: RulerScale[];
     yList: RulerScale[];
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareRulerStyle;
+}): void;
+export declare function drawScrollerSelectedArea(ctx: ViewContext2D, opts: {
+    snapshot: BoardViewerFrameSnapshot<DeepRulerSharedStorage>;
+    calculator: ViewCalculator;
+    style: MiddlewareRulerStyle;
 }): void;
 export {};

package/dist/esm/{middleware → middlewares}/ruler/util.js

@@ -1,21 +1,35 @@
-import { formatNumber, rotateByCenter } from '@idraw/util';
-const rulerSize = 16;
-const background = '#FFFFFFA8';
-const borderColor = '#00000080';
-const scaleColor = '#000000';
-const textColor = '#00000080';
-const fontFamily = 'monospace';
-const fontSize = 10;
-const fontWeight = 100;
-const gridColor = '#AAAAAA20';
-const gridKeyColor = '#AAAAAA40';
-const lineSize = 1;
+import { formatNumber, rotateByCenter, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
+import { keySelectedElementList, keyActionType } from '../selector';
+import { rulerSize, fontSize, fontWeight, lineSize, fontFamily } from './config';
+const limitRulerUnitList = [1, 2, 5, 10, 20, 50, 100, 200, 500];
+function limitRulerUnit(unit) {
+    unit = Math.max(limitRulerUnitList[0], Math.min(unit, limitRulerUnitList[limitRulerUnitList.length - 1]));
+    for (let i = 0; i < limitRulerUnitList.length - 1; i++) {
+        const thisUnit = limitRulerUnitList[i];
+        const nextUnit = limitRulerUnitList[i + 1];
+        if (unit > nextUnit) {
+            continue;
+        }
+        if (unit === thisUnit) {
+            return unit;
+        }
+        if (unit === nextUnit) {
+            return unit;
+        }
+        const mid = (thisUnit + nextUnit) / 2;
+        if (unit <= mid) {
+            return thisUnit;
+        }
+        return nextUnit;
+    }
+    return unit;
+}
 function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
     const list = [];
     let rulerUnit = 10;
     rulerUnit = formatNumber(rulerUnit / scale, { decimalPlaces: 0 });
-    rulerUnit = Math.max(10, Math.min(rulerUnit, 1000));
+    rulerUnit = limitRulerUnit(rulerUnit);
     const rulerKeyUnit = rulerUnit * 10;
     const rulerSubKeyUnit = rulerUnit * 5;
     let index = 0;
@@ -38,7 +52,7 @@ function calcRulerScaleList(opts) {
         list.push(rulerScale);
         index++;
     }
-    return list;
+    return { list, rulerUnit };
 }
 export function calcXRulerScaleList(opts) {
     const { viewScaleInfo, viewSizeInfo } = opts;
@@ -63,7 +77,8 @@ export function calcYRulerScaleList(opts) {
     });
 }
 export function drawXRuler(ctx, opts) {
-    const { scaleList } = opts;
+    const { scaleList, style } = opts;
+    const { scaleColor, textColor } = style;
     const scaleDrawStart = rulerSize;
     const scaleDrawEnd = (rulerSize * 4) / 5;
     const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
@@ -95,7 +110,8 @@ export function drawXRuler(ctx, opts) {
     }
 }
 export function drawYRuler(ctx, opts) {
-    const { scaleList } = opts;
+    const { scaleList, style } = opts;
+    const { scaleColor, textColor } = style;
     const scaleDrawStart = rulerSize;
     const scaleDrawEnd = (rulerSize * 4) / 5;
     const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
@@ -132,34 +148,37 @@ export function drawYRuler(ctx, opts) {
     }
 }
 export function drawRulerBackground(ctx, opts) {
-    const { viewSizeInfo } = opts;
+    const { viewSizeInfo, style } = opts;
     const { width, height } = viewSizeInfo;
+    const { background, borderColor } = style;
     ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(width + 1, 0);
+    const basePosition = -1;
+    ctx.moveTo(basePosition, basePosition);
+    ctx.lineTo(width + 1, basePosition);
     ctx.lineTo(width + 1, rulerSize);
     ctx.lineTo(rulerSize, rulerSize);
     ctx.lineTo(rulerSize, height + 1);
-    ctx.lineTo(0, height + 1);
-    ctx.lineTo(0, 0);
+    ctx.lineTo(basePosition, height + 1);
+    ctx.lineTo(basePosition, basePosition);
     ctx.closePath();
     ctx.fillStyle = background;
-    ctx.fill();
+    ctx.fill('nonzero');
     ctx.lineWidth = lineSize;
     ctx.setLineDash([]);
     ctx.strokeStyle = borderColor;
     ctx.stroke();
 }
-export function drawUnderGrid(ctx, opts) {
-    const { xList, yList, viewSizeInfo } = opts;
+export function drawGrid(ctx, opts) {
+    const { xList, yList, viewSizeInfo, style } = opts;
     const { width, height } = viewSizeInfo;
+    const { gridColor, gridPrimaryColor } = style;
     for (let i = 0; i < xList.length; i++) {
         const item = xList[i];
         ctx.beginPath();
         ctx.moveTo(item.position, 0);
         ctx.lineTo(item.position, height);
         if (item.isKeyNum === true || item.isSubKeyNum === true) {
-            ctx.strokeStyle = gridKeyColor;
+            ctx.strokeStyle = gridPrimaryColor;
         }
         else {
             ctx.strokeStyle = gridColor;
@@ -175,7 +194,7 @@ export function drawUnderGrid(ctx, opts) {
         ctx.moveTo(0, item.position);
         ctx.lineTo(width, item.position);
         if (item.isKeyNum === true || item.isSubKeyNum === true) {
-            ctx.strokeStyle = gridKeyColor;
+            ctx.strokeStyle = gridPrimaryColor;
         }
         else {
             ctx.strokeStyle = gridColor;
@@ -185,3 +204,57 @@ export function drawUnderGrid(ctx, opts) {
         ctx.stroke();
     }
 }
+export function drawScrollerSelectedArea(ctx, opts) {
+    const { snapshot, calculator, style } = opts;
+    const { sharedStore } = snapshot;
+    const { selectedAreaColor } = style;
+    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('nonzero');
+        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('nonzero');
+    }
+}

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

@@ -0,0 +1,2 @@
+import type { Middleware, CoreEventMap } from '@idraw/types';
+export declare const MiddlewareScaler: Middleware<Record<string, any>, CoreEventMap>;

package/dist/esm/{middleware → middlewares}/scaler/index.js

@@ -1,5 +1,5 @@
 import { formatNumber } from '@idraw/util';
-export const middlewareEventScale = '@middleware/scale';
+import { coreEventKeys } from '../../config';
 export const MiddlewareScaler = (opts) => {
     const { viewer, sharer, eventHub } = opts;
     const maxScale = 50;
@@ -23,7 +23,7 @@ export const MiddlewareScaler = (opts) => {
             viewer.scroll({ moveX, moveY });
             viewer.drawFrame();
             const scaleNum = formatNumber(scale);
-            eventHub.trigger(middlewareEventScale, { scale: scaleNum });
+            eventHub.trigger(coreEventKeys.SCALE, { scale: scaleNum });
         }
     };
 };

package/dist/esm/{middleware → middlewares}/scroller/config.d.ts

@@ -1,6 +1,10 @@
+import type { MiddlewareScrollerStyle } from '@idraw/types';
 export declare const key = "SCROLL";
 export declare const keyXThumbRect: unique symbol;
 export declare const keyYThumbRect: unique symbol;
+export declare const keyHoverXThumbRect: unique symbol;
+export declare const keyHoverYThumbRect: unique symbol;
 export declare const keyPrevPoint: unique symbol;
 export declare const keyActivePoint: unique symbol;
 export declare const keyActiveThumbType: unique symbol;
+export declare const defaultStyle: MiddlewareScrollerStyle;

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

@@ -0,0 +1,16 @@
+export const key = 'SCROLL';
+export const keyXThumbRect = Symbol(`${key}_xThumbRect`);
+export const keyYThumbRect = Symbol(`${key}_yThumbRect`);
+export const keyHoverXThumbRect = Symbol(`${key}_hoverXThumbRect`);
+export const keyHoverYThumbRect = Symbol(`${key}_hoverYThumbRect`);
+export const keyPrevPoint = Symbol(`${key}_prevPoint`);
+export const keyActivePoint = Symbol(`${key}_activePoint`);
+export const keyActiveThumbType = Symbol(`${key}_activeThumbType`);
+export const defaultStyle = {
+    thumbBackground: '#0000003A',
+    thumbBorderColor: '#0000008A',
+    hoverThumbBackground: '#0000005F',
+    hoverThumbBorderColor: '#000000EE',
+    activeThumbBackground: '#0000005E',
+    activeThumbBorderColor: '#000000F0'
+};

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

@@ -0,0 +1,3 @@
+import type { Middleware, MiddlewareScrollerConfig } from '@idraw/types';
+import type { DeepScrollerSharedStorage } from './types';
+export declare const MiddlewareScroller: Middleware<DeepScrollerSharedStorage, any, MiddlewareScrollerConfig>;