@idraw/core 0.4.0-beta.38 → 0.4.0-beta.39

package/dist/esm/index.d.ts

@@ -17,6 +17,7 @@ export declare class Core<E extends CoreEventMap = CoreEventMap> {
     destroy(): void;
     use<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: C): void;
     disuse(middleware: BoardMiddleware<any, any, any>): void;
+    resetMiddlewareConfig<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: Partial<C>): void;
     setData(data: Data, opts?: {
         modifiedOptions?: ModifyOptions;
     }): void;

package/dist/esm/index.js

@@ -66,6 +66,9 @@ export class Core {
     disuse(middleware) {
         __classPrivateFieldGet(this, _Core_board, "f").disuse(middleware);
     }
+    resetMiddlewareConfig(middleware, config) {
+        __classPrivateFieldGet(this, _Core_board, "f").resetMiddlewareConfig(middleware, config);
+    }
     setData(data, opts) {
         validateElements((data === null || data === void 0 ? void 0 : data.elements) || []);
         __classPrivateFieldGet(this, _Core_board, "f").setData(data, opts);

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

@@ -8,12 +8,7 @@ const infoLineHeight = 16;
 export const MiddlewareInfo = (opts, config) => {
     const { boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
-    const innerConfig = Object.assign(Object.assign({}, defaltStyle), config);
-    const { textBackground, textColor } = innerConfig;
-    const style = {
-        textBackground,
-        textColor
-    };
+    let innerConfig = Object.assign(Object.assign({}, defaltStyle), config);
     let showAngleInfo = true;
     const showInfoAngleCallback = ({ show }) => {
         showAngleInfo = show;
@@ -26,8 +21,16 @@ export const MiddlewareInfo = (opts, config) => {
         disuse() {
             eventHub.off(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
         },
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
         beforeDrawFrame({ snapshot }) {
             var _a;
+            const { textBackground, textColor } = innerConfig;
+            const style = {
+                textBackground,
+                textColor
+            };
             const { sharedStore } = snapshot;
             const selectedElementList = sharedStore[keySelectedElementList];
             const actionType = sharedStore[keyActionType];

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

@@ -7,9 +7,7 @@ export { keyLayoutIsSelected, keyLayoutIsBusyMoving };
 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 innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
     let prevPoint = null;
     let prevIsHoverContent = null;
     let prevIsSelected = null;
@@ -114,6 +112,9 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             clear();
             resetController();
         },
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
         hover: (e) => {
             if (sharer.getSharedStorage(keyLayoutIsBusyMoving) === true) {
                 return;
@@ -312,6 +313,8 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             if (isInElementAction()) {
                 return;
             }
+            const { activeColor } = innerConfig;
+            const style = { activeColor };
             const { sharedStore, activeStore } = snapshot;
             const layoutActionType = sharedStore[keyLayoutActionType];
             const layoutIsHover = sharedStore[keyLayoutIsHoverContent];

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

@@ -5,17 +5,7 @@ import { coreEventKeys } from '../../config';
 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 innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
     let show = true;
     let showGrid = true;
     const rulerCallback = (e) => {
@@ -37,7 +27,20 @@ export const MiddlewareRuler = (opts, config) => {
         disuse() {
             eventHub.off(coreEventKeys.RULER, rulerCallback);
         },
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
         beforeDrawFrame: ({ snapshot }) => {
+            const { background, borderColor, scaleColor, textColor, gridColor, gridPrimaryColor, selectedAreaColor } = innerConfig;
+            const style = {
+                background,
+                borderColor,
+                scaleColor,
+                textColor,
+                gridColor,
+                gridPrimaryColor,
+                selectedAreaColor
+            };
             if (show === true) {
                 const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
                 const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);

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, MiddlewareRulerStyle } from './types';
+import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator, MiddlewareRulerStyle } from '@idraw/types';
+import type { DeepRulerSharedStorage } from './types';
 interface RulerScale {
     num: number;
     showNum: boolean;

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

@@ -152,13 +152,14 @@ export function drawRulerBackground(ctx, opts) {
     const { width, height } = viewSizeInfo;
     const { background, borderColor } = style;
     ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(width + 1, 0);
+    const basePosition = -1;
+    ctx.moveTo(basePosition, basePosition);
+    ctx.lineTo(width + 1, basePosition);
     ctx.lineTo(width + 1, rulerSize);
     ctx.lineTo(rulerSize, rulerSize);
     ctx.lineTo(rulerSize, height + 1);
-    ctx.lineTo(0, height + 1);
-    ctx.lineTo(0, 0);
+    ctx.lineTo(basePosition, height + 1);
+    ctx.lineTo(basePosition, basePosition);
     ctx.closePath();
     ctx.fillStyle = background;
     ctx.fill();

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

@@ -7,16 +7,7 @@ export const MiddlewareScroller = (opts, config) => {
     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
-    };
+    let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
     const clear = () => {
         sharer.setSharedStorage(keyPrevPoint, null);
         sharer.setSharedStorage(keyActivePoint, null);
@@ -58,6 +49,9 @@ export const MiddlewareScroller = (opts, config) => {
     };
     return {
         name: '@middleware/scroller',
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
         wheel: (e) => {
             viewer.scroll({
                 moveX: 0 - e.deltaX,
@@ -122,6 +116,15 @@ export const MiddlewareScroller = (opts, config) => {
             }
         },
         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);

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

@@ -10,9 +10,7 @@ import { createRotateControllerPattern } from './pattern';
 import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from '../info';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export const MiddlewareSelector = (opts, config) => {
-    const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
-    const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig;
-    const style = { activeColor, activeAreaColor, lockedColor, referenceColor };
+    let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
@@ -20,8 +18,8 @@ export const MiddlewareSelector = (opts, config) => {
     let moveOriginalStartElementSize = null;
     let inBusyMode = null;
     let hasChangedData = null;
-    const rotateControllerPattern = createRotateControllerPattern({
-        fill: style.activeColor,
+    let rotateControllerPattern = createRotateControllerPattern({
+        fill: innerConfig.activeColor,
         devicePixelRatio: sharer.getActiveViewSizeInfo().devicePixelRatio
     });
     sharer.setSharedStorage(keyActionType, null);
@@ -171,6 +169,9 @@ export const MiddlewareSelector = (opts, config) => {
             eventHub.off(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
             eventHub.off(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
         },
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
         hover: (e) => {
             var _a, _b, _c, _d, _e;
             const layoutIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
@@ -682,8 +683,16 @@ export const MiddlewareSelector = (opts, config) => {
         },
         beforeDrawFrame({ snapshot }) {
             var _a;
+            const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig;
+            const style = { activeColor, activeAreaColor, lockedColor, referenceColor };
             const { activeStore, sharedStore } = snapshot;
             const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
+            if (rotateControllerPattern.fill !== activeColor) {
+                rotateControllerPattern = createRotateControllerPattern({
+                    fill: innerConfig.activeColor,
+                    devicePixelRatio
+                });
+            }
             const sharer = opts.sharer;
             const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
             const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
@@ -724,8 +733,7 @@ export const MiddlewareSelector = (opts, config) => {
                     }
                 }
                 if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern,
-                        style }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern: rotateControllerPattern.context2d, style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
                             const referenceInfo = calcReferenceInfo(elem.uuid, {
@@ -759,8 +767,7 @@ export const MiddlewareSelector = (opts, config) => {
                     }
                 }
                 if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern,
-                        style }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern: rotateControllerPattern.context2d, style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
                             const referenceInfo = calcReferenceInfo(elem.uuid, {

package/dist/esm/middleware/selector/pattern/index.d.ts

@@ -2,4 +2,7 @@ import type { ViewContext2D } from '@idraw/types';
 export declare function createRotateControllerPattern(opts: {
     fill: string;
     devicePixelRatio: number;
-}): ViewContext2D;
+}): {
+    context2d: ViewContext2D;
+    fill: string;
+};

package/dist/esm/middleware/selector/pattern/index.js

@@ -34,5 +34,5 @@ export function createRotateControllerPattern(opts) {
         },
         parentOpacity: 1
     });
-    return context2d;
+    return { context2d, fill };
 }

package/dist/index.global.js

@@ -4281,6 +4281,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
       }
     }
+    resetMiddlewareConfig(middleware, config) {
+      var _a, _b;
+      if (__classPrivateFieldGet(this, _Board_middlewareMap, "f").has(middleware)) {
+        const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
+        if (item) {
+          (_b = (_a = item.middlewareObject).resetConfig) === null || _b === void 0 ? void 0 : _b.call(_a, config);
+        }
+      }
+    }
     scale(opts) {
       const viewer = __classPrivateFieldGet(this, _Board_viewer, "f");
       const { ignoreUpdateVisibleStatus } = opts;
@@ -6018,12 +6027,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const MiddlewareLayoutSelector = (opts, config) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
     const { overlayContext } = boardContent;
-    const innerConfig = {
+    let innerConfig = {
       ...defaultStyle$2,
       ...config
     };
-    const { activeColor: activeColor2 } = innerConfig;
-    const style = { activeColor: activeColor2 };
     let prevPoint = null;
     let prevIsHoverContent = null;
     let prevIsSelected = null;
@@ -6129,6 +6136,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         clear();
         resetController();
       },
+      resetConfig(config2) {
+        innerConfig = { ...innerConfig, ...config2 };
+      },
       hover: (e) => {
         if (sharer.getSharedStorage(keyLayoutIsBusyMoving) === true) {
           return;
@@ -6311,6 +6321,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         if (isInElementAction()) {
           return;
         }
+        const { activeColor: activeColor2 } = innerConfig;
+        const style = { activeColor: activeColor2 };
         const { sharedStore, activeStore } = snapshot;
         const layoutActionType = sharedStore[keyLayoutActionType];
         const layoutIsHover = sharedStore[keyLayoutIsHoverContent];
@@ -6533,7 +6545,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       },
       parentOpacity: 1
     });
-    return context2d;
+    return { context2d, fill };
   }
   const fontFamily$1 = "monospace";
   function drawSizeInfoText(ctx, opts) {
@@ -6659,15 +6671,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const MiddlewareInfo = (opts, config) => {
     const { boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
-    const innerConfig = {
+    let innerConfig = {
       ...defaltStyle,
       ...config
     };
-    const { textBackground, textColor: textColor2 } = innerConfig;
-    const style = {
-      textBackground,
-      textColor: textColor2
-    };
     let showAngleInfo = true;
     const showInfoAngleCallback = ({ show }) => {
       showAngleInfo = show;
@@ -6680,8 +6687,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       disuse() {
         eventHub.off(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
       },
+      resetConfig(config2) {
+        innerConfig = { ...innerConfig, ...config2 };
+      },
       beforeDrawFrame({ snapshot }) {
         var _a;
+        const { textBackground, textColor: textColor2 } = innerConfig;
+        const style = {
+          textBackground,
+          textColor: textColor2
+        };
         const { sharedStore } = snapshot;
         const selectedElementList = sharedStore[keySelectedElementList];
         const actionType = sharedStore[keyActionType];
@@ -6781,12 +6796,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     };
   };
   const MiddlewareSelector = (opts, config) => {
-    const innerConfig = {
+    let innerConfig = {
       ...defaultStyle$3,
       ...config
     };
-    const { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 } = innerConfig;
-    const style = { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 };
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
@@ -6794,8 +6807,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     let moveOriginalStartElementSize = null;
     let inBusyMode = null;
     let hasChangedData = null;
-    const rotateControllerPattern = createRotateControllerPattern({
-      fill: style.activeColor,
+    let rotateControllerPattern = createRotateControllerPattern({
+      fill: innerConfig.activeColor,
       devicePixelRatio: sharer.getActiveViewSizeInfo().devicePixelRatio
     });
     sharer.setSharedStorage(keyActionType, null);
@@ -6940,6 +6953,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         eventHub.off(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
         eventHub.off(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
       },
+      resetConfig(config2) {
+        innerConfig = { ...innerConfig, ...config2 };
+      },
       hover: (e) => {
         var _a, _b, _c, _d, _e;
         const layoutIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
@@ -7432,8 +7448,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       },
       beforeDrawFrame({ snapshot }) {
         var _a;
+        const { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 } = innerConfig;
+        const style = { activeColor: activeColor2, activeAreaColor: activeAreaColor2, lockedColor: lockedColor2, referenceColor: referenceColor2 };
         const { activeStore, sharedStore } = snapshot;
         const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
+        if (rotateControllerPattern.fill !== activeColor2) {
+          rotateControllerPattern = createRotateControllerPattern({
+            fill: innerConfig.activeColor,
+            devicePixelRatio
+          });
+        }
         const sharer2 = opts.sharer;
         const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
         const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
@@ -7482,7 +7506,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
               element: elem,
               calculator,
               hideControllers: !!isMoving && actionType === "drag",
-              rotateControllerPattern,
+              rotateControllerPattern: rotateControllerPattern.context2d,
               style
             });
             if (actionType === "drag") {
@@ -7525,7 +7549,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
               element: elem,
               calculator,
               hideControllers: !!isMoving && actionType === "drag",
-              rotateControllerPattern,
+              rotateControllerPattern: rotateControllerPattern.context2d,
               style
             });
             if (actionType === "drag") {
@@ -7778,19 +7802,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
     let isBusy = false;
-    const innerConfig = {
+    let innerConfig = {
       ...defaultStyle$1,
       ...config
     };
-    const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor, activeThumbBackground, activeThumbBorderColor } = innerConfig;
-    const style = {
-      thumbBackground,
-      thumbBorderColor,
-      hoverThumbBackground,
-      hoverThumbBorderColor,
-      activeThumbBackground,
-      activeThumbBorderColor
-    };
     const clear = () => {
       sharer.setSharedStorage(keyPrevPoint$1, null);
       sharer.setSharedStorage(keyActivePoint, null);
@@ -7832,6 +7847,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     };
     return {
       name: "@middleware/scroller",
+      resetConfig(config2) {
+        innerConfig = { ...innerConfig, ...config2 };
+      },
       wheel: (e) => {
         viewer.scroll({
           moveX: 0 - e.deltaX,
@@ -7894,6 +7912,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         }
       },
       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);
@@ -8098,13 +8125,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     const { width, height } = viewSizeInfo;
     const { background: background2, borderColor: borderColor2 } = style;
     ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(width + 1, 0);
+    const basePosition = -1;
+    ctx.moveTo(basePosition, basePosition);
+    ctx.lineTo(width + 1, basePosition);
     ctx.lineTo(width + 1, rulerSize);
     ctx.lineTo(rulerSize, rulerSize);
     ctx.lineTo(rulerSize, height + 1);
-    ctx.lineTo(0, height + 1);
-    ctx.lineTo(0, 0);
+    ctx.lineTo(basePosition, height + 1);
+    ctx.lineTo(basePosition, basePosition);
     ctx.closePath();
     ctx.fillStyle = background2;
     ctx.fill();
@@ -8203,20 +8231,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const MiddlewareRuler = (opts, config) => {
     const { boardContent, viewer, eventHub, calculator } = opts;
     const { overlayContext, underlayContext } = boardContent;
-    const innerConfig = {
+    let innerConfig = {
       ...defaultStyle,
       ...config
     };
-    const { background: background2, borderColor: borderColor2, scaleColor: scaleColor2, textColor: textColor2, gridColor: gridColor2, gridPrimaryColor: gridPrimaryColor2, selectedAreaColor: selectedAreaColor2 } = innerConfig;
-    const style = {
-      background: background2,
-      borderColor: borderColor2,
-      scaleColor: scaleColor2,
-      textColor: textColor2,
-      gridColor: gridColor2,
-      gridPrimaryColor: gridPrimaryColor2,
-      selectedAreaColor: selectedAreaColor2
-    };
     let show = true;
     let showGrid = true;
     const rulerCallback = (e) => {
@@ -8238,7 +8256,20 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       disuse() {
         eventHub.off(coreEventKeys.RULER, rulerCallback);
       },
+      resetConfig(config2) {
+        innerConfig = { ...innerConfig, ...config2 };
+      },
       beforeDrawFrame: ({ snapshot }) => {
+        const { background: background2, borderColor: borderColor2, scaleColor: scaleColor2, textColor: textColor2, gridColor: gridColor2, gridPrimaryColor: gridPrimaryColor2, selectedAreaColor: selectedAreaColor2 } = innerConfig;
+        const style = {
+          background: background2,
+          borderColor: borderColor2,
+          scaleColor: scaleColor2,
+          textColor: textColor2,
+          gridColor: gridColor2,
+          gridPrimaryColor: gridPrimaryColor2,
+          selectedAreaColor: selectedAreaColor2
+        };
         if (show === true) {
           const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
           const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
@@ -8612,6 +8643,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     disuse(middleware) {
       __privateGet(this, _board).disuse(middleware);
     }
+    resetMiddlewareConfig(middleware, config) {
+      __privateGet(this, _board).resetMiddlewareConfig(middleware, config);
+    }
     setData(data, opts) {
       validateElements((data == null ? void 0 : data.elements) || []);
       __privateGet(this, _board).setData(data, opts);