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

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/layout-selector/config.d.ts

@@ -1,9 +1,9 @@
+import type { MiddlewareLayoutSelectorStyle } from '@idraw/types';
 export declare const key = "LAYOUT_SELECT";
 export declare const keyLayoutActionType: unique symbol;
 export declare const keyLayoutControlType: unique symbol;
 export declare const keyLayoutController: unique symbol;
 export declare const keyLayoutIsHover: unique symbol;
 export declare const keyLayoutIsSelected: unique symbol;
-export declare const selectColor = "#b331c9";
-export declare const disableColor = "#5b5959b5";
 export declare const controllerSize = 10;
+export declare const defaultStyle: MiddlewareLayoutSelectorStyle;

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

@@ -4,6 +4,7 @@ export const keyLayoutControlType = Symbol(`${key}_layoutControlType`);
 export const keyLayoutController = Symbol(`${key}_layoutController`);
 export const keyLayoutIsHover = Symbol(`${key}_layoutIsHover`);
 export const keyLayoutIsSelected = Symbol(`${key}_layoutIsSelected`);
-export const selectColor = '#b331c9';
-export const disableColor = '#5b5959b5';
 export const controllerSize = 10;
+export const defaultStyle = {
+    activeColor: '#b331c9'
+};

package/dist/esm/middleware/layout-selector/index.d.ts

@@ -1,5 +1,5 @@
-import type { BoardMiddleware } from '@idraw/types';
+import type { BoardMiddleware, MiddlewareLayoutSelectorConfig } from '@idraw/types';
 import type { LayoutSelectorSharedStorage } from './types';
 import { keyLayoutIsSelected } from './config';
 export { keyLayoutIsSelected };
-export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage>;
+export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage, any, MiddlewareLayoutSelectorConfig>;

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

@@ -1,12 +1,15 @@
 import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize } from '@idraw/util';
-import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize } from './config';
+import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize, defaultStyle } from './config';
 import { keyActionType as keyElementActionType, keyHoverElement, middlewareEventSelectClear } from '../selector';
 import { drawLayoutController, drawLayoutHover } from './util';
 import { eventChange } from '../../config';
 export { keyLayoutIsSelected };
-export const MiddlewareLayoutSelector = (opts) => {
+export const MiddlewareLayoutSelector = (opts, config) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
     const { overlayContext } = boardContent;
+    const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const { activeColor } = innerConfig;
+    const style = { activeColor };
     let prevPoint = null;
     let prevIsHover = null;
     let prevIsSelected = null;
@@ -312,10 +315,10 @@ export const MiddlewareLayoutSelector = (opts) => {
                 const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize });
                 if (layoutIsHover === true) {
                     const viewSize = calcViewElementSize(size, { viewScaleInfo });
-                    drawLayoutHover(overlayContext, { layoutSize: viewSize });
+                    drawLayoutHover(overlayContext, { layoutSize: viewSize, style });
                 }
                 if ((layoutActionType && ['resize'].includes(layoutActionType)) || layoutIsSelected === true) {
-                    drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} });
+                    drawLayoutController(overlayContext, { controller, style });
                 }
             }
         },

package/dist/esm/middleware/layout-selector/util.d.ts

@@ -1,8 +1,9 @@
-import type { ViewContext2D, LayoutSizeController, DataLayout, ElementSize } from '@idraw/types';
+import type { ViewContext2D, LayoutSizeController, ElementSize, MiddlewareLayoutSelectorStyle } from '@idraw/types';
 export declare function drawLayoutController(ctx: ViewContext2D, opts: {
     controller: LayoutSizeController;
-    operations: DataLayout['operations'];
+    style: MiddlewareLayoutSelectorStyle;
 }): void;
 export declare function drawLayoutHover(ctx: ViewContext2D, opts: {
     layoutSize: ElementSize;
+    style: MiddlewareLayoutSelectorStyle;
 }): void;

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

@@ -1,5 +1,5 @@
-import { selectColor, disableColor } from './config';
-function drawControllerBox(ctx, boxVertexes) {
+function drawControllerBox(ctx, boxVertexes, style) {
+    const { activeColor } = style;
     ctx.setLineDash([]);
     ctx.fillStyle = '#FFFFFF';
     ctx.beginPath();
@@ -9,7 +9,7 @@ function drawControllerBox(ctx, boxVertexes) {
     ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
     ctx.closePath();
     ctx.fill();
-    ctx.strokeStyle = selectColor;
+    ctx.strokeStyle = activeColor;
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
@@ -19,26 +19,11 @@ function drawControllerBox(ctx, boxVertexes) {
     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;
+    const { start, end, style } = opts;
+    const { activeColor } = style;
+    const lineWidth = 2;
+    const strokeStyle = activeColor;
     ctx.setLineDash([]);
     ctx.strokeStyle = strokeStyle;
     ctx.lineWidth = lineWidth;
@@ -47,55 +32,25 @@ function drawControllerLine(ctx, opts) {
     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 { controller, style } = 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);
-    }
+    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 } = opts;
+    const { layoutSize, style } = opts;
+    const { activeColor } = style;
     const { x, y, w, h } = layoutSize;
     ctx.setLineDash([]);
-    ctx.strokeStyle = selectColor;
+    ctx.strokeStyle = activeColor;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(x, y);

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>;