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

package/dist/esm/index.d.ts

@@ -13,8 +13,8 @@ export declare class Core<E extends CoreEventMap = CoreEventMap> {
     constructor(container: HTMLDivElement, opts: CoreOptions);
     isDestroyed(): boolean;
     destroy(): void;
-    use(middleware: BoardMiddleware<any, any>): void;
-    disuse(middleware: BoardMiddleware<any, any>): void;
+    use<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: C): void;
+    disuse(middleware: BoardMiddleware<any, any, any>): void;
     setData(data: Data, opts?: {
         modifiedOptions?: ModifyOptions;
     }): void;

package/dist/esm/index.js

@@ -58,8 +58,8 @@ export class Core {
         __classPrivateFieldGet(this, _Core_board, "f").destroy();
         __classPrivateFieldGet(this, _Core_canvas, "f").remove();
     }
-    use(middleware) {
-        __classPrivateFieldGet(this, _Core_board, "f").use(middleware);
+    use(middleware, config) {
+        __classPrivateFieldGet(this, _Core_board, "f").use(middleware, config);
     }
     disuse(middleware) {
         __classPrivateFieldGet(this, _Core_board, "f").disuse(middleware);

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

@@ -0,0 +1,4 @@
+import type { MiddlewareInfoStyle } from '@idraw/types';
+export declare const infoFontSize = 10;
+export declare const infoLineHeight = 16;
+export declare const defaltStyle: MiddlewareInfoStyle;

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

@@ -0,0 +1,8 @@
+const infoBackground = '#1973bac6';
+const infoTextColor = '#ffffff';
+export const infoFontSize = 10;
+export const infoLineHeight = 16;
+export const defaltStyle = {
+    textBackground: infoBackground,
+    textColor: infoTextColor
+};

package/dist/esm/middleware/info/draw-info.d.ts

@@ -1,4 +1,5 @@
 import type { PointSize, ViewContext2D } from '@idraw/types';
+import type { MiddlewareInfoStyle } from './types';
 export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
     point: PointSize;
     rotateCenter: PointSize;
@@ -6,8 +7,7 @@ export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
     text: string;
     fontSize: number;
     lineHeight: number;
-    color: string;
-    background: string;
+    style: MiddlewareInfoStyle;
 }): void;
 export declare function drawPositionInfoText(ctx: ViewContext2D, opts: {
     point: PointSize;
@@ -16,8 +16,7 @@ export declare function drawPositionInfoText(ctx: ViewContext2D, opts: {
     text: string;
     fontSize: number;
     lineHeight: number;
-    color: string;
-    background: string;
+    style: MiddlewareInfoStyle;
 }): void;
 export declare function drawAngleInfoText(ctx: ViewContext2D, opts: {
     point: PointSize;
@@ -26,6 +25,5 @@ export declare function drawAngleInfoText(ctx: ViewContext2D, opts: {
     text: string;
     fontSize: number;
     lineHeight: number;
-    color: string;
-    background: string;
+    style: MiddlewareInfoStyle;
 }): void;

package/dist/esm/middleware/info/draw-info.js

@@ -1,7 +1,8 @@
 import { rotateByCenter } from '@idraw/util';
 const fontFamily = 'monospace';
 export function drawSizeInfoText(ctx, opts) {
-    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textColor, textBackground } = style;
     rotateByCenter(ctx, angle, rotateCenter, () => {
         ctx.$setFont({
             fontWeight: '300',
@@ -23,7 +24,7 @@ export function drawSizeInfoText(ctx, opts) {
             y: point.y
         };
         ctx.setLineDash([]);
-        ctx.fillStyle = background;
+        ctx.fillStyle = textBackground;
         ctx.beginPath();
         ctx.moveTo(bgStart.x, bgStart.y);
         ctx.lineTo(bgEnd.x, bgStart.y);
@@ -31,13 +32,14 @@ export function drawSizeInfoText(ctx, opts) {
         ctx.lineTo(bgStart.x, bgEnd.y);
         ctx.closePath();
         ctx.fill();
-        ctx.fillStyle = color;
+        ctx.fillStyle = textColor;
         ctx.textBaseline = 'top';
         ctx.fillText(text, textStart.x, textStart.y + padding);
     });
 }
 export function drawPositionInfoText(ctx, opts) {
-    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = style;
     rotateByCenter(ctx, angle, rotateCenter, () => {
         ctx.$setFont({
             fontWeight: '300',
@@ -59,7 +61,7 @@ export function drawPositionInfoText(ctx, opts) {
             y: point.y
         };
         ctx.setLineDash([]);
-        ctx.fillStyle = background;
+        ctx.fillStyle = textBackground;
         ctx.beginPath();
         ctx.moveTo(bgStart.x, bgStart.y);
         ctx.lineTo(bgEnd.x, bgStart.y);
@@ -67,13 +69,14 @@ export function drawPositionInfoText(ctx, opts) {
         ctx.lineTo(bgStart.x, bgEnd.y);
         ctx.closePath();
         ctx.fill();
-        ctx.fillStyle = color;
+        ctx.fillStyle = textColor;
         ctx.textBaseline = 'top';
         ctx.fillText(text, textStart.x, textStart.y + padding);
     });
 }
 export function drawAngleInfoText(ctx, opts) {
-    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = style;
     rotateByCenter(ctx, angle, rotateCenter, () => {
         ctx.$setFont({
             fontWeight: '300',
@@ -95,7 +98,7 @@ export function drawAngleInfoText(ctx, opts) {
             y: point.y
         };
         ctx.setLineDash([]);
-        ctx.fillStyle = background;
+        ctx.fillStyle = textBackground;
         ctx.beginPath();
         ctx.moveTo(bgStart.x, bgStart.y);
         ctx.lineTo(bgEnd.x, bgStart.y);
@@ -103,7 +106,7 @@ export function drawAngleInfoText(ctx, opts) {
         ctx.lineTo(bgStart.x, bgEnd.y);
         ctx.closePath();
         ctx.fill();
-        ctx.fillStyle = color;
+        ctx.fillStyle = textColor;
         ctx.textBaseline = 'top';
         ctx.fillText(text, textStart.x, textStart.y + padding);
     });

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

@@ -1,3 +1,3 @@
-import type { BoardMiddleware } from '@idraw/types';
+import type { BoardMiddleware, MiddlewareInfoConfig } from '@idraw/types';
 import type { DeepInfoSharedStorage } from './types';
-export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage>;
+export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, any, MiddlewareInfoConfig>;

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

@@ -1,13 +1,18 @@
 import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
 import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
 import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
-const infoBackground = '#1973bac6';
-const infoTextColor = '#ffffff';
+import { defaltStyle } from './config';
 const infoFontSize = 10;
 const infoLineHeight = 16;
-export const MiddlewareInfo = (opts) => {
+export const MiddlewareInfo = (opts, config) => {
     const { boardContent, calculator } = opts;
     const { overlayContext } = boardContent;
+    const innerConfig = Object.assign(Object.assign({}, defaltStyle), config);
+    const { textBackground, textColor } = innerConfig;
+    const style = {
+        textBackground,
+        textColor
+    };
     return {
         name: '@middleware/info',
         beforeDrawFrame({ snapshot }) {
@@ -73,8 +78,7 @@ export const MiddlewareInfo = (opts) => {
                             text: whText,
                             fontSize: infoFontSize,
                             lineHeight: infoLineHeight,
-                            color: infoTextColor,
-                            background: infoBackground
+                            style
                         });
                         drawPositionInfoText(overlayContext, {
                             point: {
@@ -86,8 +90,7 @@ export const MiddlewareInfo = (opts) => {
                             text: xyText,
                             fontSize: infoFontSize,
                             lineHeight: infoLineHeight,
-                            color: infoTextColor,
-                            background: infoBackground
+                            style
                         });
                         drawAngleInfoText(overlayContext, {
                             point: {
@@ -99,8 +102,7 @@ export const MiddlewareInfo = (opts) => {
                             text: angleText,
                             fontSize: infoFontSize,
                             lineHeight: infoLineHeight,
-                            color: infoTextColor,
-                            background: infoBackground
+                            style
                         });
                     }
                 }

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,4 +1,4 @@
-import type { BoardMiddleware, CoreEventMap } 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<DeepRulerSharedStorage, CoreEventMap>;
+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, drawGrid, drawScrollerSelectedArea } from './util';
+import { defaultStyle } from './config';
 export const middlewareEventRuler = '@middleware/show-ruler';
-export const MiddlewareRuler = (opts) => {
+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) => {
@@ -29,19 +41,20 @@ export const MiddlewareRuler = (opts) => {
             if (show === true) {
                 const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
                 const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-                drawScrollerSelectedArea(overlayContext, { snapshot, calculator });
-                drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo });
+                drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
+                drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo, style });
                 const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawXRuler(overlayContext, { scaleList: xList });
+                drawXRuler(overlayContext, { scaleList: xList, style });
                 const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawYRuler(overlayContext, { scaleList: yList });
+                drawYRuler(overlayContext, { scaleList: yList, style });
                 if (showGrid === true) {
                     const ctx = rulerUnit === 1 ? overlayContext : underlayContext;
                     drawGrid(ctx, {
                         xList,
                         yList,
                         viewScaleInfo,
-                        viewSizeInfo
+                        viewSizeInfo,
+                        style
                     });
                 }
             }

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

@@ -1,5 +1,5 @@
 import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator } from '@idraw/types';
-import type { DeepRulerSharedStorage } from './types';
+import type { DeepRulerSharedStorage, MiddlewareRulerStyle } from './types';
 interface RulerScale {
     num: number;
     showNum: boolean;
@@ -23,22 +23,27 @@ export declare function calcYRulerScaleList(opts: {
 };
 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 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,17 +1,6 @@
 import { formatNumber, rotateByCenter, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 import { keySelectedElementList, keyActionType } from '../selector';
-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;
-const selectedAreaColor = '#196097';
+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]));
@@ -88,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;
@@ -120,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;
@@ -157,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);
@@ -176,15 +168,16 @@ export function drawRulerBackground(ctx, opts) {
     ctx.stroke();
 }
 export function drawGrid(ctx, opts) {
-    const { xList, yList, viewSizeInfo } = 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;
@@ -200,7 +193,7 @@ export function drawGrid(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;
@@ -211,8 +204,9 @@ export function drawGrid(ctx, opts) {
     }
 }
 export function drawScrollerSelectedArea(ctx, opts) {
-    const { snapshot, calculator } = 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) {

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

@@ -1,3 +1,4 @@
+import type { MiddlewareScrollerStyle } from '@idraw/types';
 export declare const key = "SCROLL";
 export declare const keyXThumbRect: unique symbol;
 export declare const keyYThumbRect: unique symbol;
@@ -6,3 +7,4 @@ 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

@@ -6,3 +6,11 @@ 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,3 +1,3 @@
-import type { BoardMiddleware } from '@idraw/types';
+import type { BoardMiddleware, MiddlewareScrollerConfig } from '@idraw/types';
 import type { DeepScrollerSharedStorage } from './types';
-export declare const MiddlewareScroller: BoardMiddleware<DeepScrollerSharedStorage>;
+export declare const MiddlewareScroller: BoardMiddleware<DeepScrollerSharedStorage, any, MiddlewareScrollerConfig>;

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

@@ -1,11 +1,21 @@
 import { drawScroller, isPointInScrollThumb } from './util';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
-export const MiddlewareScroller = (opts) => {
+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);
@@ -111,7 +121,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         beforeDrawFrame({ snapshot }) {
-            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot });
+            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style });
             sharer.setSharedStorage(keyXThumbRect, xThumbRect);
             sharer.setSharedStorage(keyYThumbRect, yThumbRect);
         }

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

@@ -1,4 +1,4 @@
-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(overlayContext: ViewContext2D, p: Point, opts: {
     xThumbRect?: ElementSize | null;
@@ -6,6 +6,7 @@ export declare function isPointInScrollThumb(overlayContext: ViewContext2D, p: P
 }): ScrollbarThumbType | null;
 export declare function drawScroller(ctx: ViewContext2D, opts: {
     snapshot: BoardViewerFrameSnapshot;
+    style: MiddlewareScrollerStyle;
 }): {
     xThumbRect: ElementSize;
     yThumbRect: ElementSize;

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

@@ -1,15 +1,7 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
-const minScrollerWidth = 12;
 const scrollerLineWidth = 16;
-const scrollerThumbAlpha = 0.3;
-const scrollConfig = {
-    width: minScrollerWidth,
-    thumbColor: '#0000008A',
-    thumbHoverColor: '#000000EE',
-    scrollBarColor: '#FFFFFF60',
-    showScrollBar: false
-};
+const minThumbLength = scrollerLineWidth * 2.5;
 function isPointAtRect(overlayContext, p, rect) {
     const ctx = overlayContext;
     const { x, y, w, h } = rect;
@@ -46,11 +38,12 @@ function getScrollInfoFromSnapshot(snapshot) {
     return info;
 }
 function calcScrollerInfo(opts) {
-    const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb } = opts;
+    const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style } = opts;
     const { width, height } = viewSizeInfo;
     const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
-    const sliderMinSize = scrollerLineWidth * 2.5;
+    const sliderMinSize = minThumbLength;
     const lineSize = scrollerLineWidth;
+    const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor } = style;
     let xSize = 0;
     let ySize = 0;
     xSize = Math.max(sliderMinSize, width - lineSize * 2 - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
@@ -105,23 +98,24 @@ function calcScrollerInfo(opts) {
         ySize,
         translateY,
         translateX,
-        xThumbColor: hoverXThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
-        yThumbColor: hoverYThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
-        scrollBarColor: scrollConfig.scrollBarColor,
+        xThumbBackground: hoverXThumb ? hoverThumbBackground : thumbBackground,
+        yThumbBackground: hoverYThumb ? hoverThumbBackground : thumbBackground,
+        xThumbBorderColor: hoverXThumb ? hoverThumbBorderColor : thumbBorderColor,
+        yThumbBorderColor: hoverYThumb ? hoverThumbBorderColor : thumbBorderColor,
         xThumbRect,
         yThumbRect
     };
     return scrollWrapper;
 }
 function drawScrollerThumb(ctx, opts) {
-    let { x, y, h, w } = opts;
+    let { x, y, h, w, background, borderColor } = opts;
     ctx.save();
     ctx.shadowColor = '#FFFFFF';
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
     ctx.shadowBlur = 1;
     {
-        const { color, axis } = opts;
+        const { axis } = opts;
         if (axis === 'X') {
             y = y + h / 4 + 0;
             h = h / 2;
@@ -135,7 +129,7 @@ function drawScrollerThumb(ctx, opts) {
         if (w < r * 2 || h < r * 2) {
             r = 0;
         }
-        ctx.globalAlpha = scrollerThumbAlpha;
+        ctx.globalAlpha = 1;
         ctx.beginPath();
         ctx.moveTo(x + r, y);
         ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -143,12 +137,11 @@ function drawScrollerThumb(ctx, opts) {
         ctx.arcTo(x, y + h, x, y, r);
         ctx.arcTo(x, y, x + w, y, r);
         ctx.closePath();
-        ctx.fillStyle = color;
+        ctx.fillStyle = background;
         ctx.fill();
-        ctx.globalAlpha = 1;
         ctx.beginPath();
         ctx.lineWidth = 1;
-        ctx.strokeStyle = color;
+        ctx.strokeStyle = borderColor;
         ctx.setLineDash([]);
         ctx.moveTo(x + r, y);
         ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -162,10 +155,9 @@ function drawScrollerThumb(ctx, opts) {
 }
 function drawScrollerInfo(overlayContext, opts) {
     const ctx = overlayContext;
-    const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
+    const { viewScaleInfo, viewSizeInfo, scrollInfo, style } = opts;
     const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo;
-    const { width, height } = viewSizeInfo;
-    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb });
+    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style });
     let xThumbRect = Object.assign({}, wrapper.xThumbRect);
     let yThumbRect = Object.assign({}, wrapper.yThumbRect);
     if (activeThumbType && prevPoint && activePoint) {
@@ -178,27 +170,18 @@ function drawScrollerInfo(overlayContext, opts) {
             yThumbRect.y = yThumbRect.y + (activePoint.y - prevPoint.y);
         }
     }
-    if (scrollConfig.showScrollBar === true) {
-        ctx.fillStyle = wrapper.scrollBarColor;
-        ctx.fillRect(0, height - wrapper.lineSize, width, wrapper.lineSize);
-    }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.xThumbColor }));
-    if (scrollConfig.showScrollBar === true) {
-        ctx.fillStyle = wrapper.scrollBarColor;
-        ctx.fillRect(width - wrapper.lineSize, 0, wrapper.lineSize, height);
-    }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.yThumbColor }));
-    ctx.globalAlpha = 1;
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, background: wrapper.xThumbBackground, borderColor: wrapper.xThumbBorderColor }));
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, background: wrapper.yThumbBackground, borderColor: wrapper.yThumbBorderColor }));
     return {
         xThumbRect,
         yThumbRect
     };
 }
 export function drawScroller(ctx, opts) {
-    const { snapshot } = opts;
+    const { snapshot, style } = opts;
     const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
     const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
     const scrollInfo = getScrollInfoFromSnapshot(snapshot);
-    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo });
+    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo, style });
     return { xThumbRect, yThumbRect };
 }

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

@@ -1,3 +1,4 @@
+import type { MiddlewareSelectorStyle } from '@idraw/types';
 export declare const key = "SELECT";
 export declare const keyActionType: unique symbol;
 export declare const keyResizeType: unique symbol;
@@ -23,11 +24,8 @@ export declare const keyDebugEnd0: unique symbol;
 export declare const selectWrapperBorderWidth = 2;
 export declare const resizeControllerBorderWidth = 4;
 export declare const areaBorderWidth = 1;
-export declare const wrapperColor = "#1973ba";
-export declare const lockColor = "#5b5959b5";
 export declare const controllerSize = 10;
-export declare const auxiliaryColor = "#f7276e";
-export declare const referenceColor = "#f7276e";
+export declare const defaultStyle: MiddlewareSelectorStyle;
 export declare const middlewareEventSelect: string;
 export declare const middlewareEventSelectClear: string;
 export declare const middlewareEventSelectInGroup: string;