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

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

@@ -0,0 +1,108 @@
+import { selectColor, disableColor } from './config';
+function drawControllerBox(ctx, boxVertexes) {
+    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();
+    ctx.strokeStyle = selectColor;
+    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 drawControllerCross(ctx, opts) {
+    const { vertexes, strokeStyle, lineWidth } = opts;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = strokeStyle;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(vertexes[0].x, vertexes[0].y);
+    ctx.lineTo(vertexes[2].x, vertexes[2].y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(vertexes[1].x, vertexes[1].y);
+    ctx.lineTo(vertexes[3].x, vertexes[3].y);
+    ctx.closePath();
+    ctx.stroke();
+}
+function drawControllerLine(ctx, opts) {
+    const { start, end, centerVertexes, disabled } = opts;
+    const lineWidth = disabled === true ? 1 : 2;
+    const strokeStyle = disabled === true ? disableColor : selectColor;
+    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();
+    if (disabled === true) {
+        drawControllerCross(ctx, {
+            vertexes: centerVertexes,
+            lineWidth,
+            strokeStyle
+        });
+    }
+}
+export function drawLayoutController(ctx, opts) {
+    const { controller, operations } = opts;
+    const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller;
+    drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledTop) });
+    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledRight) });
+    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledBottom) });
+    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledLeft) });
+    const disabledOpts = {
+        lineWidth: 1,
+        strokeStyle: disableColor
+    };
+    if ((operations === null || operations === void 0 ? void 0 : operations.disabledTopLeft) === true) {
+        drawControllerCross(ctx, Object.assign({ vertexes: topLeft.vertexes }, disabledOpts));
+    }
+    else {
+        drawControllerBox(ctx, topLeft.vertexes);
+    }
+    if ((operations === null || operations === void 0 ? void 0 : operations.disabledTopRight) === true) {
+        drawControllerCross(ctx, Object.assign({ vertexes: topRight.vertexes }, disabledOpts));
+    }
+    else {
+        drawControllerBox(ctx, topRight.vertexes);
+    }
+    if ((operations === null || operations === void 0 ? void 0 : operations.disabledBottomRight) === true) {
+        drawControllerCross(ctx, Object.assign({ vertexes: bottomRight.vertexes }, disabledOpts));
+    }
+    else {
+        drawControllerBox(ctx, bottomRight.vertexes);
+    }
+    if ((operations === null || operations === void 0 ? void 0 : operations.disabledBottomLeft) === true) {
+        drawControllerCross(ctx, Object.assign({ vertexes: bottomLeft.vertexes }, disabledOpts));
+    }
+    else {
+        drawControllerBox(ctx, bottomLeft.vertexes);
+    }
+}
+export function drawLayoutHover(ctx, opts) {
+    const { layoutSize } = opts;
+    const { x, y, w, h } = layoutSize;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = selectColor;
+    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/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 = '#196097';
+export const defaultStyle = {
+    background,
+    borderColor,
+    scaleColor,
+    textColor,
+    gridColor,
+    gridPrimaryColor,
+    selectedAreaColor
+};

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

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

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

@@ -1,9 +1,21 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid } from './util';
+import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawGrid, drawScrollerSelectedArea } from './util';
+import { defaultStyle } from './config';
 export const middlewareEventRuler = '@middleware/show-ruler';
-export const MiddlewareRuler = (opts) => {
-    const { boardContent, viewer, eventHub } = opts;
-    const { helperContext, underContext } = boardContent;
+export const MiddlewareRuler = (opts, config) => {
+    const { boardContent, viewer, eventHub, calculator } = opts;
+    const { overlayContext, underlayContext } = boardContent;
+    const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const { background, borderColor, scaleColor, textColor, gridColor, gridPrimaryColor, selectedAreaColor } = innerConfig;
+    const style = {
+        background,
+        borderColor,
+        scaleColor,
+        textColor,
+        gridColor,
+        gridPrimaryColor,
+        selectedAreaColor
+    };
     let show = true;
     let showGrid = true;
     const rulerCallback = (e) => {
@@ -18,6 +30,7 @@ export const MiddlewareRuler = (opts) => {
         }
     };
     return {
+        name: '@middleware/ruler',
         use() {
             eventHub.on(middlewareEventRuler, rulerCallback);
         },
@@ -28,17 +41,20 @@ export const MiddlewareRuler = (opts) => {
             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 });
+                drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
+                drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo, 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 {};

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

@@ -1,4 +1,5 @@
-import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D } from '@idraw/types';
+import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator } from '@idraw/types';
+import type { DeepRulerSharedStorage, MiddlewareRulerStyle } 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/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,8 +148,9 @@ 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);
@@ -150,16 +167,17 @@ export function drawRulerBackground(ctx, opts) {
     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 +193,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 +203,56 @@ 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();
+        ctx.beginPath();
+        ctx.moveTo(0, yAreaStart);
+        ctx.lineTo(rulerSize, yAreaStart);
+        ctx.lineTo(rulerSize, yAreaEnd);
+        ctx.lineTo(0, yAreaEnd);
+        ctx.fillStyle = selectedAreaColor;
+        ctx.closePath();
+        ctx.fill();
+    }
+}

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

@@ -1,3 +1,3 @@
-import type { BoardMiddleware, CoreEvent } from '@idraw/types';
+import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
 export declare const middlewareEventScale = "@middleware/scale";
-export declare const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEvent>;
+export declare const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEventMap>;

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

@@ -5,6 +5,7 @@ export const MiddlewareScaler = (opts) => {
     const maxScale = 50;
     const minScale = 0.05;
     return {
+        name: '@middleware/scaler',
         wheelScale(e) {
             const { deltaY, point } = e;
             const { scale } = sharer.getActiveViewScaleInfo();

package/dist/esm/middleware/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/middleware/scroller/config.js

@@ -1,6 +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/middleware/scroller/index.d.ts

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

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

@@ -1,14 +1,28 @@
 import { drawScroller, isPointInScrollThumb } from './util';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
-export const MiddlewareScroller = (opts) => {
-    const { viewer, boardContent, sharer } = opts;
-    const { helperContext } = boardContent;
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect, defaultStyle } from './config';
+export const MiddlewareScroller = (opts, config) => {
+    const { viewer, boardContent, sharer, eventHub } = opts;
+    const { overlayContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
+    let isBusy = false;
+    const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor, activeThumbBackground, activeThumbBorderColor } = innerConfig;
+    const style = {
+        thumbBackground,
+        thumbBorderColor,
+        hoverThumbBackground,
+        hoverThumbBorderColor,
+        activeThumbBackground,
+        activeThumbBorderColor
+    };
     const clear = () => {
         sharer.setSharedStorage(keyPrevPoint, null);
         sharer.setSharedStorage(keyActivePoint, null);
         sharer.setSharedStorage(keyActiveThumbType, null);
+        sharer.setSharedStorage(keyHoverXThumbRect, null);
+        sharer.setSharedStorage(keyHoverYThumbRect, null);
+        isBusy = false;
     };
     clear();
     const scrollX = (p) => {
@@ -36,12 +50,13 @@ export const MiddlewareScroller = (opts) => {
         }
     };
     const getThumbType = (p) => {
-        return isPointInScrollThumb(helperContext, p, {
+        return isPointInScrollThumb(overlayContext, p, {
             xThumbRect: sharer.getSharedStorage(keyXThumbRect),
             yThumbRect: sharer.getSharedStorage(keyYThumbRect)
         });
     };
     return {
+        name: '@middleware/scroller',
         wheel: (e) => {
             viewer.scroll({
                 moveX: 0 - e.deltaX,
@@ -49,10 +64,32 @@ export const MiddlewareScroller = (opts) => {
             });
             viewer.drawFrame();
         },
+        hover: (e) => {
+            if (isBusy === true) {
+                return false;
+            }
+            const { point } = e;
+            const thumbType = getThumbType(point);
+            if (thumbType === 'X' || thumbType === 'Y') {
+                if (thumbType === 'X') {
+                    sharer.setSharedStorage(keyHoverXThumbRect, true);
+                    sharer.setSharedStorage(keyHoverYThumbRect, false);
+                }
+                else {
+                    sharer.setSharedStorage(keyHoverXThumbRect, false);
+                    sharer.setSharedStorage(keyHoverYThumbRect, true);
+                }
+                eventHub.trigger('cursor', { type: 'default' });
+                return false;
+            }
+            sharer.setSharedStorage(keyHoverXThumbRect, false);
+            sharer.setSharedStorage(keyHoverYThumbRect, false);
+        },
         pointStart: (e) => {
             const { point } = e;
             const thumbType = getThumbType(point);
             if (thumbType === 'X' || thumbType === 'Y') {
+                isBusy = true;
                 sharer.setSharedStorage(keyActiveThumbType, thumbType);
                 sharer.setSharedStorage(keyPrevPoint, point);
                 return false;
@@ -74,6 +111,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         pointEnd: () => {
+            isBusy = false;
             const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
             clear();
             if (activeThumbType === 'X' || activeThumbType === 'Y') {
@@ -83,7 +121,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         beforeDrawFrame({ snapshot }) {
-            const { xThumbRect, yThumbRect } = drawScroller(helperContext, { snapshot });
+            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style });
             sharer.setSharedStorage(keyXThumbRect, xThumbRect);
             sharer.setSharedStorage(keyYThumbRect, yThumbRect);
         }

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

@@ -0,0 +1,11 @@
+import type { Point, ElementSize } from '@idraw/types';
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
+export type DeepScrollerSharedStorage = {
+    [keyXThumbRect]: null | ElementSize;
+    [keyYThumbRect]: null | ElementSize;
+    [keyHoverXThumbRect]: boolean | null;
+    [keyHoverYThumbRect]: boolean | null;
+    [keyPrevPoint]: null | Point;
+    [keyActivePoint]: null | Point;
+    [keyActiveThumbType]: null | 'X' | 'Y';
+};

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

@@ -0,0 +1 @@
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';

package/dist/esm/middleware/scroller/util.d.ts

@@ -1,11 +1,12 @@
-import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize } from '@idraw/types';
+import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize, MiddlewareScrollerStyle } from '@idraw/types';
 export type ScrollbarThumbType = 'X' | 'Y';
-export declare function isPointInScrollThumb(helperContext: ViewContext2D, p: Point, opts: {
+export declare function isPointInScrollThumb(overlayContext: ViewContext2D, p: Point, opts: {
     xThumbRect?: ElementSize | null;
     yThumbRect?: ElementSize | null;
 }): ScrollbarThumbType | null;
 export declare function drawScroller(ctx: ViewContext2D, opts: {
     snapshot: BoardViewerFrameSnapshot;
+    style: MiddlewareScrollerStyle;
 }): {
     xThumbRect: ElementSize;
     yThumbRect: ElementSize;