@idraw/core 0.4.3 → 1.0.0-alpha.1

package/dist/esm/middlewares/ruler/{config.js → static.js}

@@ -1,10 +1,11 @@
+import { getMiddlewareValidStyles } from '@idraw/util';
 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 stroke = '#00000080';
 const scaleColor = '#000000';
 const textColor = '#00000080';
 const gridColor = '#AAAAAA20';
@@ -12,10 +13,22 @@ const gridPrimaryColor = '#AAAAAA40';
 const selectedAreaColor = '#19609780';
 export const defaultStyle = {
     background,
-    borderColor,
+    stroke,
     scaleColor,
     textColor,
     gridColor,
     gridPrimaryColor,
-    selectedAreaColor
+    selectedAreaColor,
 };
+export function getMiddlewareRulerStyles(config) {
+    const styles = getMiddlewareValidStyles(config, [
+        'background',
+        'stroke',
+        'scaleColor',
+        'textColor',
+        'gridColor',
+        'gridPrimaryColor',
+        'selectedAreaColor',
+    ]);
+    return styles;
+}

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

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

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

@@ -1,4 +1,4 @@
-import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator, MiddlewareRulerStyle } from '@idraw/types';
+import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator, MiddlewareRulerStyles } from '@idraw/types';
 import type { DeepRulerSharedStorage } from './types';
 interface RulerScale {
     num: number;
@@ -23,27 +23,27 @@ export declare function calcYRulerScaleList(opts: {
 };
 export declare function drawXRuler(ctx: ViewContext2D, opts: {
     scaleList: RulerScale[];
-    style: MiddlewareRulerStyle;
+    styles: MiddlewareRulerStyles;
 }): void;
 export declare function drawYRuler(ctx: ViewContext2D, opts: {
     scaleList: RulerScale[];
-    style: MiddlewareRulerStyle;
+    styles: MiddlewareRulerStyles;
 }): void;
 export declare function drawRulerBackground(ctx: ViewContext2D, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-    style: MiddlewareRulerStyle;
+    styles: MiddlewareRulerStyles;
 }): void;
 export declare function drawGrid(ctx: ViewContext2D, opts: {
     xList: RulerScale[];
     yList: RulerScale[];
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-    style: MiddlewareRulerStyle;
+    styles: MiddlewareRulerStyles;
 }): void;
 export declare function drawScrollerSelectedArea(ctx: ViewContext2D, opts: {
     snapshot: BoardViewerFrameSnapshot<DeepRulerSharedStorage>;
     calculator: ViewCalculator;
-    style: MiddlewareRulerStyle;
+    styles: MiddlewareRulerStyles;
 }): void;
 export {};

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

@@ -1,6 +1,6 @@
 import { formatNumber, rotateByCenter, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { keySelectedElementList, keyActionType } from '../selector';
-import { rulerSize, fontSize, fontWeight, lineSize, fontFamily } from './config';
+import { keySelectedMaterialList, keyActionType } from '../selector';
+import { rulerSize, fontSize, fontWeight, lineSize, fontFamily } from './static';
 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]));
@@ -47,7 +47,7 @@ function calcRulerScaleList(opts) {
             position,
             showNum: num % rulerKeyUnit === 0,
             isKeyNum: num % rulerKeyUnit === 0,
-            isSubKeyNum: num % rulerSubKeyUnit === 0
+            isSubKeyNum: num % rulerSubKeyUnit === 0,
         };
         list.push(rulerScale);
         index++;
@@ -62,7 +62,7 @@ export function calcXRulerScaleList(opts) {
         axis: 'X',
         scale,
         viewLength: width,
-        viewOffset: offsetLeft
+        viewOffset: offsetLeft,
     });
 }
 export function calcYRulerScaleList(opts) {
@@ -73,12 +73,12 @@ export function calcYRulerScaleList(opts) {
         axis: 'Y',
         scale,
         viewLength: height,
-        viewOffset: offsetTop
+        viewOffset: offsetTop,
     });
 }
 export function drawXRuler(ctx, opts) {
-    const { scaleList, style } = opts;
-    const { scaleColor, textColor } = style;
+    const { scaleList, styles } = opts;
+    const { scaleColor, textColor } = styles;
     const scaleDrawStart = rulerSize;
     const scaleDrawEnd = (rulerSize * 4) / 5;
     const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
@@ -103,15 +103,15 @@ export function drawXRuler(ctx, opts) {
             ctx.$setFont({
                 fontWeight,
                 fontSize,
-                fontFamily
+                fontFamily,
             });
             ctx.fillText(`${item.num}`, item.position + fontStart, fontStart);
         }
     }
 }
 export function drawYRuler(ctx, opts) {
-    const { scaleList, style } = opts;
-    const { scaleColor, textColor } = style;
+    const { scaleList, styles } = opts;
+    const { scaleColor, textColor } = styles;
     const scaleDrawStart = rulerSize;
     const scaleDrawEnd = (rulerSize * 4) / 5;
     const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
@@ -140,7 +140,7 @@ export function drawYRuler(ctx, opts) {
                 ctx.$setFont({
                     fontWeight,
                     fontSize,
-                    fontFamily
+                    fontFamily,
                 });
                 ctx.fillText(numText, fontStart + fontSize, item.position + fontStart);
             });
@@ -148,9 +148,9 @@ export function drawYRuler(ctx, opts) {
     }
 }
 export function drawRulerBackground(ctx, opts) {
-    const { viewSizeInfo, style } = opts;
+    const { viewSizeInfo, styles } = opts;
     const { width, height } = viewSizeInfo;
-    const { background, borderColor } = style;
+    const { background, stroke } = styles;
     ctx.beginPath();
     const basePosition = -1;
     ctx.moveTo(basePosition, basePosition);
@@ -165,13 +165,13 @@ export function drawRulerBackground(ctx, opts) {
     ctx.fill('nonzero');
     ctx.lineWidth = lineSize;
     ctx.setLineDash([]);
-    ctx.strokeStyle = borderColor;
+    ctx.strokeStyle = stroke;
     ctx.stroke();
 }
 export function drawGrid(ctx, opts) {
-    const { xList, yList, viewSizeInfo, style } = opts;
+    const { xList, yList, viewSizeInfo, styles } = opts;
     const { width, height } = viewSizeInfo;
-    const { gridColor, gridPrimaryColor } = style;
+    const { gridColor, gridPrimaryColor } = styles;
     for (let i = 0; i < xList.length; i++) {
         const item = xList[i];
         ctx.beginPath();
@@ -205,34 +205,34 @@ export function drawGrid(ctx, opts) {
     }
 }
 export function drawScrollerSelectedArea(ctx, opts) {
-    const { snapshot, calculator, style } = opts;
+    const { snapshot, calculator, styles } = opts;
     const { sharedStore } = snapshot;
-    const { selectedAreaColor } = style;
-    const selectedElementList = sharedStore[keySelectedElementList];
+    const { selectedAreaColor } = styles;
+    const selectedMaterialList = sharedStore[keySelectedMaterialList];
     const actionType = sharedStore[keyActionType];
     if (['select', 'drag', 'drag-list', 'drag-list-end'].includes(actionType) &&
-        selectedElementList.length > 0) {
+        selectedMaterialList.length > 0) {
         const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
         const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-        const rangeRectInfoList = [];
+        const rangeBoundingInfoList = [];
         const xAreaStartList = [];
         const xAreaEndList = [];
         const yAreaStartList = [];
         const yAreaEndList = [];
-        selectedElementList.forEach((elem) => {
-            const rectInfo = calculator.calcViewRectInfoFromRange(elem.uuid, {
+        selectedMaterialList.forEach((mtrl) => {
+            const boundingBox = calculator.calcViewBoundingInfoFromRange(mtrl.id, {
                 viewScaleInfo,
-                viewSizeInfo
+                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 (boundingBox) {
+                rangeBoundingInfoList.push(boundingBox);
+                xAreaStartList.push(boundingBox.left.x);
+                xAreaEndList.push(boundingBox.right.x);
+                yAreaStartList.push(boundingBox.top.y);
+                yAreaEndList.push(boundingBox.bottom.y);
             }
         });
-        if (!(rangeRectInfoList.length > 0)) {
+        if (!(rangeBoundingInfoList.length > 0)) {
             return;
         }
         const xAreaStart = Math.min(...xAreaStartList);

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

@@ -1,5 +1,5 @@
 import { formatNumber } from '@idraw/util';
-import { coreEventKeys } from '../../config';
+import { coreEventKeys } from '../../static';
 export const MiddlewareScaler = (opts) => {
     const { viewer, sharer, eventHub } = opts;
     const maxScale = 50;
@@ -24,6 +24,6 @@ export const MiddlewareScaler = (opts) => {
             viewer.drawFrame();
             const scaleNum = formatNumber(scale);
             eventHub.trigger(coreEventKeys.SCALE, { scale: scaleNum });
-        }
+        },
     };
 };

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

@@ -0,0 +1,14 @@
+import type { ScrollbarStyles } from './types';
+export declare function initRoot(opts: {
+    rootClassName: string;
+    $container: HTMLElement;
+}): {
+    $horizontal: HTMLDivElement;
+    $vertical: HTMLDivElement;
+};
+export declare function isInScrollbar(e: Event): boolean;
+export declare function updateScrollbarStyles(opts: ScrollbarStyles & {
+    $horizontal: HTMLElement | null;
+    $vertical: HTMLElement | null;
+}): void;
+export declare function getThumbType(e: Event): "X" | "Y" | null;

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

@@ -0,0 +1,53 @@
+import { ATTR_VALID_WATCH, createHTMLElement, setHTMLCSSProps } from '@idraw/util';
+import { classNameMap, ATTR_THUMB_TYPE, THUMB_X, THUMB_Y } from './static';
+export function initRoot(opts) {
+    const { rootClassName, $container } = opts;
+    const create = createHTMLElement;
+    const $horizontal = create('div', {
+        className: `${rootClassName} ${classNameMap.horizontal}`,
+        [ATTR_VALID_WATCH]: 'true',
+    }, [create('div', { className: classNameMap.thumb, [ATTR_VALID_WATCH]: 'true', [ATTR_THUMB_TYPE]: THUMB_X })]);
+    const $vertical = create('div', {
+        className: `${rootClassName} ${classNameMap.vertical}`,
+        [ATTR_VALID_WATCH]: 'true',
+    }, [create('div', { className: classNameMap.thumb, [ATTR_VALID_WATCH]: 'true', [ATTR_THUMB_TYPE]: THUMB_Y })]);
+    $container.appendChild($horizontal);
+    $container.appendChild($vertical);
+    return {
+        $horizontal,
+        $vertical,
+    };
+}
+export function isInScrollbar(e) {
+    var _a, _b, _c;
+    const $target = e.target;
+    if (((_a = $target === null || $target === void 0 ? void 0 : $target.classList) === null || _a === void 0 ? void 0 : _a.contains(classNameMap.thumb)) ||
+        ((_b = $target === null || $target === void 0 ? void 0 : $target.classList) === null || _b === void 0 ? void 0 : _b.contains(classNameMap.horizontal)) ||
+        ((_c = $target === null || $target === void 0 ? void 0 : $target.classList) === null || _c === void 0 ? void 0 : _c.contains(classNameMap.vertical))) {
+        return true;
+    }
+    return false;
+}
+export function updateScrollbarStyles(opts) {
+    const { xThumbStyle, yThumbStyle, $horizontal, $vertical } = opts;
+    if ($horizontal && xThumbStyle) {
+        const $thumb = $horizontal.getElementsByClassName(classNameMap.thumb)[0];
+        if ($thumb) {
+            setHTMLCSSProps($thumb, xThumbStyle);
+        }
+    }
+    if ($vertical && yThumbStyle) {
+        const $thumb = $vertical.getElementsByClassName(classNameMap.thumb)[0];
+        if ($thumb) {
+            setHTMLCSSProps($thumb, yThumbStyle);
+        }
+    }
+}
+export function getThumbType(e) {
+    var _a;
+    const $target = e === null || e === void 0 ? void 0 : e.target;
+    if (((_a = $target === null || $target === void 0 ? void 0 : $target.classList) === null || _a === void 0 ? void 0 : _a.contains(classNameMap.thumb)) && $target.hasAttribute(ATTR_THUMB_TYPE)) {
+        return $target.getAttribute(ATTR_THUMB_TYPE);
+    }
+    return null;
+}

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

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

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

@@ -1,22 +1,76 @@
-import { drawScroller, isPointInScrollThumb } from './util';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect, defaultStyle } from './config';
-import { coreEventKeys } from '../../config';
+import { coreEventKeys } from '../../static';
+import { keyXThumbStyle, keyYThumbStyle, keyPrevPoint, keyActivePoint, keyActiveThumbType, defaultStyles, getRootClassName, scrollbarTrackSize, scrollbarThumbLength, } from './static';
+import { initStyles, destroyStyles, getMiddlewareScrollerStyles } from './styles';
+import { initRoot, isInScrollbar, updateScrollbarStyles, getThumbType } from './dom';
+import { calcScrollbarStyles } from './util';
+export { getMiddlewareScrollerStyles };
 export const MiddlewareScroller = (opts, config) => {
-    const { viewer, boardContent, sharer, eventHub } = opts;
-    const { overlayContext } = boardContent;
-    sharer.setSharedStorage(keyXThumbRect, null);
-    sharer.setSharedStorage(keyYThumbRect, null);
+    const { viewer, sharer, eventHub } = opts;
     let isBusy = false;
-    let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    let innerConfig = Object.assign(Object.assign({}, defaultStyles), config);
+    const styles = getMiddlewareScrollerStyles(innerConfig);
+    const rootClassName = getRootClassName();
+    let $horizontal = null;
+    let $vertical = null;
     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 updateScrollbar = () => {
+        const { xThumbStyle, yThumbStyle } = calcScrollbarStyles({
+            viewScaleInfo: sharer.getActiveViewScaleInfo(),
+            viewSizeInfo: sharer.getActiveViewSizeInfo(),
+        });
+        sharer.setSharedStorage(keyXThumbStyle, xThumbStyle);
+        sharer.setSharedStorage(keyYThumbStyle, yThumbStyle);
+    };
+    const updateMovingScrollbar = (opts) => {
+        const { thumbMoveX, thumbMoveY } = opts;
+        const xThumbStyle = sharer.getSharedStorage(keyXThumbStyle);
+        const yThumbStyle = sharer.getSharedStorage(keyYThumbStyle);
+        const viewSizeInfo = sharer.getActiveViewSizeInfo();
+        if (xThumbStyle && (thumbMoveX > 0 || thumbMoveX < 0)) {
+            const maxScrollWidth = viewSizeInfo.width - scrollbarTrackSize * 2;
+            const minLeft = scrollbarTrackSize;
+            let left = xThumbStyle.left - thumbMoveX;
+            left = Math.min(viewSizeInfo.width - scrollbarTrackSize - scrollbarThumbLength, Math.max(scrollbarTrackSize, left));
+            let width = xThumbStyle.width;
+            if (left + width >= maxScrollWidth || left <= minLeft) {
+                if (thumbMoveX < 0) {
+                    width += thumbMoveX;
+                }
+                else {
+                    width -= thumbMoveX;
+                }
+            }
+            width = Math.min(maxScrollWidth, Math.max(scrollbarThumbLength, width));
+            xThumbStyle.left = left;
+            xThumbStyle.width = width;
+            sharer.setSharedStorage(keyXThumbStyle, xThumbStyle);
+        }
+        if (yThumbStyle && (thumbMoveY > 0 || thumbMoveY < 0)) {
+            const maxScrollHeight = viewSizeInfo.height - scrollbarTrackSize * 2;
+            const minTop = scrollbarTrackSize;
+            let top = yThumbStyle.top - thumbMoveY;
+            top = Math.min(viewSizeInfo.height - scrollbarTrackSize - scrollbarThumbLength, Math.max(scrollbarTrackSize, top));
+            let height = yThumbStyle.height;
+            if (top + height >= maxScrollHeight || top <= minTop) {
+                if (thumbMoveY < 0) {
+                    height += thumbMoveY;
+                }
+                else {
+                    height -= thumbMoveY;
+                }
+            }
+            height = Math.min(maxScrollHeight, Math.max(scrollbarThumbLength, height));
+            yThumbStyle.top = top;
+            yThumbStyle.height = height;
+            sharer.setSharedStorage(keyYThumbStyle, yThumbStyle);
+        }
+    };
     const scrollX = (p) => {
         const prevPoint = sharer.getSharedStorage(keyPrevPoint);
         if (prevPoint) {
@@ -26,6 +80,7 @@ export const MiddlewareScroller = (opts, config) => {
             const totalWidth = width + Math.abs(offsetLeft) + Math.abs(offsetRight);
             const moveX = (thumbMoveX * totalWidth) / width;
             viewer.scroll({ moveX });
+            updateMovingScrollbar({ thumbMoveX, thumbMoveY: 0 });
             viewer.drawFrame();
         }
     };
@@ -38,60 +93,72 @@ export const MiddlewareScroller = (opts, config) => {
             const totalHeight = height + Math.abs(offsetTop) + Math.abs(offsetBottom);
             const moveY = (thumbMoveY * totalHeight) / height;
             viewer.scroll({ moveY });
+            updateMovingScrollbar({ thumbMoveX: 0, thumbMoveY });
             viewer.drawFrame();
         }
     };
-    const getThumbType = (p) => {
-        return isPointInScrollThumb(overlayContext, p, {
-            xThumbRect: sharer.getSharedStorage(keyXThumbRect),
-            yThumbRect: sharer.getSharedStorage(keyYThumbRect)
-        });
-    };
     return {
         name: '@middleware/scroller',
+        use() {
+            initStyles(rootClassName, styles);
+            const initedResult = initRoot({ rootClassName, $container: opts.container });
+            $horizontal = initedResult.$horizontal;
+            $vertical = initedResult.$vertical;
+            updateScrollbar();
+            updateScrollbarStyles({
+                xThumbStyle: sharer.getSharedStorage(keyXThumbStyle),
+                yThumbStyle: sharer.getSharedStorage(keyYThumbStyle),
+                $horizontal,
+                $vertical,
+            });
+        },
+        disuse() {
+            destroyStyles(rootClassName);
+            $horizontal === null || $horizontal === void 0 ? void 0 : $horizontal.remove();
+            $horizontal = null;
+            $vertical === null || $vertical === void 0 ? void 0 : $vertical.remove();
+            $vertical = null;
+        },
         resetConfig(config) {
             innerConfig = Object.assign(Object.assign({}, innerConfig), config);
         },
         wheel: (e) => {
             viewer.scroll({
                 moveX: 0 - e.deltaX,
-                moveY: 0 - e.deltaY
+                moveY: 0 - e.deltaY,
             });
+            updateScrollbar();
             viewer.drawFrame();
         },
         hover: (e) => {
             if (isBusy === true) {
                 return false;
             }
-            const { point } = e;
-            const thumbType = getThumbType(point);
+            const { nativeEvent } = e;
+            const thumbType = getThumbType(nativeEvent);
             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(coreEventKeys.CURSOR, { type: 'default' });
                 return false;
             }
-            sharer.setSharedStorage(keyHoverXThumbRect, false);
-            sharer.setSharedStorage(keyHoverYThumbRect, false);
+            if (isInScrollbar(nativeEvent)) {
+                return false;
+            }
         },
         pointStart: (e) => {
-            const { point } = e;
-            const thumbType = getThumbType(point);
+            const { point, nativeEvent } = e;
+            const thumbType = getThumbType(nativeEvent);
             if (thumbType === 'X' || thumbType === 'Y') {
                 isBusy = true;
                 sharer.setSharedStorage(keyActiveThumbType, thumbType);
                 sharer.setSharedStorage(keyPrevPoint, point);
                 return false;
             }
+            if (isInScrollbar(nativeEvent)) {
+                return false;
+            }
         },
         pointMove: (e) => {
-            const { point } = e;
+            const { point, nativeEvent } = e;
             const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
             if (activeThumbType === 'X' || activeThumbType === 'Y') {
                 sharer.setSharedStorage(keyActivePoint, point);
@@ -104,6 +171,9 @@ export const MiddlewareScroller = (opts, config) => {
                 sharer.setSharedStorage(keyPrevPoint, point);
                 return false;
             }
+            if (isInScrollbar(nativeEvent)) {
+                return false;
+            }
         },
         pointEnd: () => {
             isBusy = false;
@@ -111,23 +181,18 @@ export const MiddlewareScroller = (opts, config) => {
             clear();
             if (activeThumbType === 'X' || activeThumbType === 'Y') {
                 viewer.scroll({ moveX: 0, moveY: 0 });
+                updateScrollbar();
                 viewer.drawFrame();
                 return false;
             }
         },
-        beforeDrawFrame({ snapshot }) {
-            const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor, activeThumbBackground, activeThumbBorderColor } = innerConfig;
-            const style = {
-                thumbBackground,
-                thumbBorderColor,
-                hoverThumbBackground,
-                hoverThumbBorderColor,
-                activeThumbBackground,
-                activeThumbBorderColor
-            };
-            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style });
-            sharer.setSharedStorage(keyXThumbRect, xThumbRect);
-            sharer.setSharedStorage(keyYThumbRect, yThumbRect);
-        }
+        beforeDrawFrame() {
+            updateScrollbarStyles({
+                $horizontal,
+                $vertical,
+                xThumbStyle: sharer.getSharedStorage(keyXThumbStyle),
+                yThumbStyle: sharer.getSharedStorage(keyYThumbStyle),
+            });
+        },
     };
 };

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

@@ -0,0 +1,21 @@
+import type { MiddlewareScrollerStyles } from '@idraw/types';
+export declare const key = "SCROLL";
+export declare const keyXThumbStyle: unique symbol;
+export declare const keyYThumbStyle: unique symbol;
+export declare const keyPrevPoint: unique symbol;
+export declare const keyActivePoint: unique symbol;
+export declare const keyActiveThumbType: unique symbol;
+export declare const prefix = "idraw-middleware-scroller";
+export declare const getRootClassName: () => string;
+export declare const scrollbarTrackSize = 16;
+export declare const scrollbarThumbLength: number;
+export declare const scrollbarThumbSize: number;
+export declare const ATTR_THUMB_TYPE = "data-idraw-thumb-type";
+export declare const THUMB_X = "X";
+export declare const THUMB_Y = "Y";
+export declare const defaultStyles: MiddlewareScrollerStyles;
+export declare const classNameMap: {
+    horizontal: string;
+    vertical: string;
+    thumb: string;
+};

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

@@ -0,0 +1,29 @@
+import { createId } from '@idraw/util';
+export const key = 'SCROLL';
+export const keyXThumbStyle = Symbol(`${key}_xThumbStyle`);
+export const keyYThumbStyle = Symbol(`${key}_yThumbStyle`);
+export const keyPrevPoint = Symbol(`${key}_prevPoint`);
+export const keyActivePoint = Symbol(`${key}_activePoint`);
+export const keyActiveThumbType = Symbol(`${key}_activeThumbType`);
+export const prefix = `idraw-middleware-scroller`;
+export const getRootClassName = () => `${prefix}-${createId()}`;
+export const scrollbarTrackSize = 16;
+export const scrollbarThumbLength = scrollbarTrackSize * 2.5;
+export const scrollbarThumbSize = scrollbarTrackSize * 0.5;
+export const ATTR_THUMB_TYPE = 'data-idraw-thumb-type';
+export const THUMB_X = 'X';
+export const THUMB_Y = 'Y';
+export const defaultStyles = {
+    zIndex: 2,
+    thumbBackground: '#0000003A',
+    thumbBorderColor: '#0000008A',
+    hoverThumbBackground: '#0000005F',
+    hoverThumbBorderColor: '#000000EE',
+    activeThumbBackground: '#0000005E',
+    activeThumbBorderColor: '#000000F0',
+};
+export const classNameMap = {
+    horizontal: `${prefix}-horizontal`,
+    vertical: `${prefix}-vertical`,
+    thumb: `${prefix}-thumb`,
+};

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

@@ -0,0 +1,4 @@
+import type { MiddlewareScrollerStyles, MiddlewareScrollerConfig } from '@idraw/types';
+export declare function initStyles(rootClassName: string, styles: MiddlewareScrollerStyles): void;
+export declare function destroyStyles(rootClassName: string): void;
+export declare function getMiddlewareScrollerStyles<C = MiddlewareScrollerConfig, S = MiddlewareScrollerStyles>(config: C): S;