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

package/dist/index.global.js

@@ -4205,7 +4205,7 @@ var __privateMethod = (obj, member, method) => {
       const { data } = __classPrivateFieldGet(this, _Board_sharer, "f").getActiveStoreSnapshot();
       return data;
     }
-    use(middleware) {
+    use(middleware, config) {
       var _a, _b, _c;
       if (__classPrivateFieldGet(this, _Board_middlewareMap, "f").has(middleware)) {
         const item = __classPrivateFieldGet(this, _Board_middlewareMap, "f").get(middleware);
@@ -4222,13 +4222,14 @@ var __privateMethod = (obj, member, method) => {
       const viewer = __classPrivateFieldGet(this, _Board_viewer, "f");
       const calculator = __classPrivateFieldGet(this, _Board_calculator, "f");
       const eventHub = __classPrivateFieldGet(this, _Board_eventHub, "f");
-      const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub, container });
+      const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub, container }, config);
       (_c = obj.use) === null || _c === void 0 ? void 0 : _c.call(obj);
       __classPrivateFieldGet(this, _Board_middlewares, "f").push(middleware);
       __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").push(obj);
       __classPrivateFieldGet(this, _Board_middlewareMap, "f").set(middleware, {
         status: "enable",
-        middlewareObject: obj
+        middlewareObject: obj,
+        config
       });
       __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
     }
@@ -4597,10 +4598,17 @@ var __privateMethod = (obj, member, method) => {
   const selectWrapperBorderWidth = 2;
   const resizeControllerBorderWidth = 4;
   const areaBorderWidth = 1;
-  const wrapperColor = "#1973ba";
-  const lockColor = "#5b5959b5";
   const controllerSize$1 = 10;
+  const activeColor = "#1973ba";
+  const activeAreaColor = "#1976d21c";
+  const lockedColor = "#5b5959b5";
   const referenceColor = "#f7276e";
+  const defaultStyle$3 = {
+    activeColor,
+    activeAreaColor,
+    lockedColor,
+    referenceColor
+  };
   const middlewareEventSelect = "@middleware/select";
   const middlewareEventSelectClear = "@middleware/select-clear";
   const middlewareEventSelectInGroup = "@middleware/select-in-group";
@@ -4709,19 +4717,23 @@ var __privateMethod = (obj, member, method) => {
     if (!vertexes) {
       return;
     }
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: "transparent", lineDash: [] };
+    const { style } = opts;
+    const { activeColor: activeColor2 } = style;
+    const wrapperOpts = { borderColor: activeColor2, borderWidth: 1, background: "transparent", lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
   }
   function drawLockVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
       return;
     }
-    const wrapperOpts = { borderColor: lockColor, borderWidth: 1, background: "transparent", lineDash: [] };
+    const { style } = opts;
+    const { lockedColor: lockedColor2 } = style;
+    const wrapperOpts = { borderColor: lockedColor2, borderWidth: 1, background: "transparent", lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     const { controller } = opts;
     if (controller) {
       const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, bottomMiddle, leftMiddle, rightMiddle } = controller;
-      const ctrlOpts = { ...wrapperOpts, borderWidth: 1, background: lockColor };
+      const ctrlOpts = { ...wrapperOpts, borderWidth: 1, background: lockedColor2 };
       drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts);
       drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
       drawCrossVertexes(ctx, calcViewVertexes(leftMiddle.vertexes, opts), ctrlOpts);
@@ -4737,11 +4749,13 @@ var __privateMethod = (obj, member, method) => {
       return;
     }
     const {
-      hideControllers
+      hideControllers,
+      style
       // calculator, element, viewScaleInfo, viewSizeInfo
     } = opts;
+    const { activeColor: activeColor2 } = style;
     const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [] };
+    const wrapperOpts = { borderColor: activeColor2, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [] };
     const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: "#FFFFFF" };
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
     if (!hideControllers) {
@@ -4754,11 +4768,12 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawArea(ctx, opts) {
-    const { start, end } = opts;
+    const { start, end, style } = opts;
+    const { activeColor: activeColor2, activeAreaColor: activeAreaColor2 } = style;
     ctx.setLineDash([]);
     ctx.lineWidth = areaBorderWidth;
-    ctx.strokeStyle = wrapperColor;
-    ctx.fillStyle = "#1976d24f";
+    ctx.strokeStyle = activeColor2;
+    ctx.fillStyle = activeAreaColor2;
     ctx.beginPath();
     ctx.moveTo(start.x, start.y);
     ctx.lineTo(end.x, start.y);
@@ -4769,12 +4784,13 @@ var __privateMethod = (obj, member, method) => {
     ctx.fill();
   }
   function drawListArea(ctx, opts) {
-    const { areaSize } = opts;
+    const { areaSize, style } = opts;
+    const { activeColor: activeColor2, activeAreaColor: activeAreaColor2 } = style;
     const { x: x2, y: y2, w: w2, h: h2 } = areaSize;
     ctx.setLineDash([]);
     ctx.lineWidth = areaBorderWidth;
-    ctx.strokeStyle = wrapperColor;
-    ctx.fillStyle = "#1976d21c";
+    ctx.strokeStyle = activeColor2;
+    ctx.fillStyle = activeAreaColor2;
     ctx.beginPath();
     ctx.moveTo(x2, y2);
     ctx.lineTo(x2 + w2, y2);
@@ -4785,16 +4801,19 @@ var __privateMethod = (obj, member, method) => {
     ctx.fill();
   }
   function drawGroupQueueVertexesWrappers(ctx, vertexesList, opts) {
+    const { style } = opts;
+    const { activeColor: activeColor2 } = style;
     for (let i = 0; i < vertexesList.length; i++) {
       const vertexes = vertexesList[i];
-      const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [4, 4] };
+      const wrapperOpts = { borderColor: activeColor2, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [4, 4] };
       drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     }
   }
   function drawReferenceLines(ctx, opts) {
-    const { xLines, yLines } = opts;
+    const { xLines, yLines, style } = opts;
+    const { referenceColor: referenceColor2 } = style;
     const lineOpts = {
-      borderColor: referenceColor,
+      borderColor: referenceColor2,
       borderWidth: 1,
       lineDash: []
     };
@@ -6076,10 +6095,12 @@ var __privateMethod = (obj, member, method) => {
   const keyLayoutController = Symbol(`${key$2}_layoutController`);
   const keyLayoutIsHover = Symbol(`${key$2}_layoutIsHover`);
   const keyLayoutIsSelected = Symbol(`${key$2}_layoutIsSelected`);
-  const selectColor = "#b331c9";
-  const disableColor = "#5b5959b5";
   const controllerSize = 10;
-  function drawControllerBox(ctx, boxVertexes) {
+  const defaultStyle$2 = {
+    activeColor: "#b331c9"
+  };
+  function drawControllerBox(ctx, boxVertexes, style) {
+    const { activeColor: activeColor2 } = style;
     ctx.setLineDash([]);
     ctx.fillStyle = "#FFFFFF";
     ctx.beginPath();
@@ -6089,7 +6110,7 @@ var __privateMethod = (obj, member, method) => {
     ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
     ctx.closePath();
     ctx.fill();
-    ctx.strokeStyle = selectColor;
+    ctx.strokeStyle = activeColor2;
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
@@ -6099,26 +6120,11 @@ var __privateMethod = (obj, member, method) => {
     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: activeColor2 } = style;
+    const lineWidth = 2;
+    const strokeStyle = activeColor2;
     ctx.setLineDash([]);
     ctx.strokeStyle = strokeStyle;
     ctx.lineWidth = lineWidth;
@@ -6127,51 +6133,25 @@ var __privateMethod = (obj, member, method) => {
     ctx.lineTo(end.x, end.y);
     ctx.closePath();
     ctx.stroke();
-    if (disabled === true) {
-      drawControllerCross(ctx, {
-        vertexes: centerVertexes,
-        lineWidth,
-        strokeStyle
-      });
-    }
   }
   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 ? void 0 : operations.disabledTop) });
-    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disabledRight) });
-    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disabledBottom) });
-    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, disabled: !!(operations == null ? void 0 : operations.disabledLeft) });
-    const disabledOpts = {
-      lineWidth: 1,
-      strokeStyle: disableColor
-    };
-    if ((operations == null ? void 0 : operations.disabledTopLeft) === true) {
-      drawControllerCross(ctx, { vertexes: topLeft.vertexes, ...disabledOpts });
-    } else {
-      drawControllerBox(ctx, topLeft.vertexes);
-    }
-    if ((operations == null ? void 0 : operations.disabledTopRight) === true) {
-      drawControllerCross(ctx, { vertexes: topRight.vertexes, ...disabledOpts });
-    } else {
-      drawControllerBox(ctx, topRight.vertexes);
-    }
-    if ((operations == null ? void 0 : operations.disabledBottomRight) === true) {
-      drawControllerCross(ctx, { vertexes: bottomRight.vertexes, ...disabledOpts });
-    } else {
-      drawControllerBox(ctx, bottomRight.vertexes);
-    }
-    if ((operations == null ? void 0 : operations.disabledBottomLeft) === true) {
-      drawControllerCross(ctx, { 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);
   }
   function drawLayoutHover(ctx, opts) {
-    const { layoutSize } = opts;
+    const { layoutSize, style } = opts;
+    const { activeColor: activeColor2 } = style;
     const { x: x2, y: y2, w: w2, h: h2 } = layoutSize;
     ctx.setLineDash([]);
-    ctx.strokeStyle = selectColor;
+    ctx.strokeStyle = activeColor2;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(x2, y2);
@@ -6182,9 +6162,15 @@ var __privateMethod = (obj, member, method) => {
     ctx.closePath();
     ctx.stroke();
   }
-  const MiddlewareLayoutSelector = (opts) => {
+  const MiddlewareLayoutSelector = (opts, config) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
     const { overlayContext } = boardContent;
+    const innerConfig = {
+      ...defaultStyle$2,
+      ...config
+    };
+    const { activeColor: activeColor2 } = innerConfig;
+    const style = { activeColor: activeColor2 };
     let prevPoint = null;
     let prevIsHover = null;
     let prevIsSelected = null;
@@ -6476,10 +6462,10 @@ var __privateMethod = (obj, member, method) => {
           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 });
           }
         }
       },
@@ -6494,7 +6480,13 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  const MiddlewareSelector = (opts) => {
+  const MiddlewareSelector = (opts, config) => {
+    const 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;
@@ -6580,7 +6572,6 @@ var __privateMethod = (obj, member, method) => {
       sharer.setSharedStorage(keySelectedElementController, null);
       sharer.setSharedStorage(keySelectedElementPosition, []);
       sharer.setSharedStorage(keyIsMoving, null);
-      sharer.setSharedStorage(keyEnableSelectInGroup, null);
     };
     clear();
     const selectCallback = ({ uuids, positions }) => {
@@ -7066,7 +7057,7 @@ var __privateMethod = (obj, member, method) => {
         const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
         const isMoving = sharedStore[keyIsMoving];
         const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
-        const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
+        const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
         const selectedElementController = elem ? calcElementSizeController(elem, {
           groupQueue,
           controllerSize: 10,
@@ -7083,7 +7074,8 @@ var __privateMethod = (obj, member, method) => {
                   groupQueue,
                   controllerSize: 10,
                   viewScaleInfo
-                })
+                }),
+                style
               });
             } else {
               drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
@@ -7094,7 +7086,8 @@ var __privateMethod = (obj, member, method) => {
               ...drawBaseOpts,
               element: elem,
               calculator,
-              hideControllers: !!isMoving && actionType === "drag"
+              hideControllers: !!isMoving && actionType === "drag",
+              style
             });
             if (actionType === "drag") {
               if (enableSnapToGrid === true) {
@@ -7110,7 +7103,8 @@ var __privateMethod = (obj, member, method) => {
                   if (offsetX === 0 || offsetY === 0) {
                     drawReferenceLines(overlayContext, {
                       xLines,
-                      yLines
+                      yLines,
+                      style
                     });
                   }
                 }
@@ -7126,7 +7120,8 @@ var __privateMethod = (obj, member, method) => {
                   groupQueue,
                   controllerSize: 10,
                   viewScaleInfo
-                })
+                }),
+                style
               });
             } else {
               drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
@@ -7137,7 +7132,8 @@ var __privateMethod = (obj, member, method) => {
               ...drawBaseOpts,
               element: elem,
               calculator,
-              hideControllers: !!isMoving && actionType === "drag"
+              hideControllers: !!isMoving && actionType === "drag",
+              style
             });
             if (actionType === "drag") {
               if (enableSnapToGrid === true) {
@@ -7153,14 +7149,15 @@ var __privateMethod = (obj, member, method) => {
                   if (offsetX === 0 || offsetY === 0) {
                     drawReferenceLines(overlayContext, {
                       xLines,
-                      yLines
+                      yLines,
+                      style
                     });
                   }
                 }
               }
             }
           } else if (actionType === "area" && areaStart && areaEnd) {
-            drawArea(overlayContext, { start: areaStart, end: areaEnd });
+            drawArea(overlayContext, { start: areaStart, end: areaEnd, style });
           } else if (["drag-list", "drag-list-end"].includes(actionType)) {
             const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
               viewScaleInfo: sharer2.getActiveViewScaleInfo(),
@@ -7168,7 +7165,7 @@ var __privateMethod = (obj, member, method) => {
               calculator
             });
             if (listAreaSize) {
-              drawListArea(overlayContext, { areaSize: listAreaSize });
+              drawListArea(overlayContext, { areaSize: listAreaSize, style });
             }
           }
         }
@@ -7183,16 +7180,16 @@ var __privateMethod = (obj, member, method) => {
   const keyPrevPoint$1 = Symbol(`${key$1}_prevPoint`);
   const keyActivePoint = Symbol(`${key$1}_activePoint`);
   const keyActiveThumbType = Symbol(`${key$1}_activeThumbType`);
-  const minScrollerWidth = 12;
-  const scrollerLineWidth = 16;
-  const scrollerThumbAlpha = 0.3;
-  const scrollConfig = {
-    width: minScrollerWidth,
-    thumbColor: "#0000008A",
-    thumbHoverColor: "#000000EE",
-    scrollBarColor: "#FFFFFF60",
-    showScrollBar: false
+  const defaultStyle$1 = {
+    thumbBackground: "#0000003A",
+    thumbBorderColor: "#0000008A",
+    hoverThumbBackground: "#0000005F",
+    hoverThumbBorderColor: "#000000EE",
+    activeThumbBackground: "#0000005E",
+    activeThumbBorderColor: "#000000F0"
   };
+  const scrollerLineWidth = 16;
+  const minThumbLength = scrollerLineWidth * 2.5;
   function isPointAtRect(overlayContext, p, rect) {
     const ctx = overlayContext;
     const { x: x2, y: y2, w: w2, h: h2 } = rect;
@@ -7228,11 +7225,12 @@ var __privateMethod = (obj, member, method) => {
     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 lineSize2 = scrollerLineWidth;
+    const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor } = style;
     let xSize = 0;
     let ySize = 0;
     xSize = Math.max(sliderMinSize, width - lineSize2 * 2 - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
@@ -7283,23 +7281,25 @@ var __privateMethod = (obj, member, method) => {
       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,
+      // scrollBarColor: scrollConfig.scrollBarColor,
       xThumbRect,
       yThumbRect
     };
     return scrollWrapper;
   }
   function drawScrollerThumb(ctx, opts) {
-    let { x: x2, y: y2, h: h2, w: w2 } = opts;
+    let { x: x2, y: y2, h: h2, w: w2, background: background2, borderColor: borderColor2 } = opts;
     ctx.save();
     ctx.shadowColor = "#FFFFFF";
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
     ctx.shadowBlur = 1;
     {
-      const { color: color2, axis } = opts;
+      const { axis } = opts;
       if (axis === "X") {
         y2 = y2 + h2 / 4 + 0;
         h2 = h2 / 2;
@@ -7312,7 +7312,7 @@ var __privateMethod = (obj, member, method) => {
       if (w2 < r * 2 || h2 < r * 2) {
         r = 0;
       }
-      ctx.globalAlpha = scrollerThumbAlpha;
+      ctx.globalAlpha = 1;
       ctx.beginPath();
       ctx.moveTo(x2 + r, y2);
       ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
@@ -7320,12 +7320,11 @@ var __privateMethod = (obj, member, method) => {
       ctx.arcTo(x2, y2 + h2, x2, y2, r);
       ctx.arcTo(x2, y2, x2 + w2, y2, r);
       ctx.closePath();
-      ctx.fillStyle = color2;
+      ctx.fillStyle = background2;
       ctx.fill();
-      ctx.globalAlpha = 1;
       ctx.beginPath();
       ctx.lineWidth = 1;
-      ctx.strokeStyle = color2;
+      ctx.strokeStyle = borderColor2;
       ctx.setLineDash([]);
       ctx.moveTo(x2 + r, y2);
       ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
@@ -7339,9 +7338,9 @@ var __privateMethod = (obj, member, method) => {
   }
   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 wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb });
+    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style });
     let xThumbRect = { ...wrapper.xThumbRect };
     let yThumbRect = { ...wrapper.yThumbRect };
     if (activeThumbType && prevPoint && activePoint) {
@@ -7357,34 +7356,48 @@ var __privateMethod = (obj, member, method) => {
       axis: "X",
       ...xThumbRect,
       r: wrapper.lineSize / 2,
-      color: wrapper.xThumbColor
+      background: wrapper.xThumbBackground,
+      borderColor: wrapper.xThumbBorderColor
     });
     drawScrollerThumb(ctx, {
       axis: "Y",
       ...yThumbRect,
       r: wrapper.lineSize / 2,
-      color: wrapper.yThumbColor
+      background: wrapper.yThumbBackground,
+      borderColor: wrapper.yThumbBorderColor
     });
-    ctx.globalAlpha = 1;
     return {
       xThumbRect,
       yThumbRect
     };
   }
   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 };
   }
-  const MiddlewareScroller = (opts) => {
+  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 = {
+      ...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);
@@ -7488,7 +7501,7 @@ var __privateMethod = (obj, member, method) => {
         }
       },
       beforeDrawFrame({ snapshot }) {
-        const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot });
+        const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style });
         sharer.setSharedStorage(keyXThumbRect, xThumbRect);
         sharer.setSharedStorage(keyYThumbRect, yThumbRect);
       }
@@ -7522,17 +7535,26 @@ var __privateMethod = (obj, member, method) => {
     };
   };
   const rulerSize = 16;
+  const fontSize = 10;
+  const fontWeight = 100;
+  const lineSize = 1;
+  const fontFamily$1 = "monospace";
   const background = "#FFFFFFA8";
   const borderColor = "#00000080";
   const scaleColor = "#000000";
   const textColor = "#00000080";
-  const fontFamily$1 = "monospace";
-  const fontSize = 10;
-  const fontWeight = 100;
   const gridColor = "#AAAAAA20";
-  const gridKeyColor = "#AAAAAA40";
-  const lineSize = 1;
+  const gridPrimaryColor = "#AAAAAA40";
   const selectedAreaColor = "#196097";
+  const defaultStyle = {
+    background,
+    borderColor,
+    scaleColor,
+    textColor,
+    gridColor,
+    gridPrimaryColor,
+    selectedAreaColor
+  };
   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]));
@@ -7609,7 +7631,8 @@ var __privateMethod = (obj, member, method) => {
     });
   }
   function drawXRuler(ctx, opts) {
-    const { scaleList } = opts;
+    const { scaleList, style } = opts;
+    const { scaleColor: scaleColor2, textColor: textColor2 } = style;
     const scaleDrawStart = rulerSize;
     const scaleDrawEnd = rulerSize * 4 / 5;
     const subKeyScaleDrawEnd = rulerSize * 2 / 5;
@@ -7626,10 +7649,10 @@ var __privateMethod = (obj, member, method) => {
       ctx.closePath();
       ctx.lineWidth = lineSize;
       ctx.setLineDash([]);
-      ctx.fillStyle = scaleColor;
+      ctx.fillStyle = scaleColor2;
       ctx.stroke();
       if (item.isKeyNum) {
-        ctx.fillStyle = textColor;
+        ctx.fillStyle = textColor2;
         ctx.textBaseline = "top";
         ctx.$setFont({
           fontWeight,
@@ -7641,7 +7664,8 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawYRuler(ctx, opts) {
-    const { scaleList } = opts;
+    const { scaleList, style } = opts;
+    const { scaleColor: scaleColor2, textColor: textColor2 } = style;
     const scaleDrawStart = rulerSize;
     const scaleDrawEnd = rulerSize * 4 / 5;
     const subKeyScaleDrawEnd = rulerSize * 2 / 5;
@@ -7656,7 +7680,7 @@ var __privateMethod = (obj, member, method) => {
       ctx.moveTo(scaleDrawStart, item.position);
       ctx.lineTo(item.isKeyNum ? keyScaleDrawEnd : item.isSubKeyNum ? subKeyScaleDrawEnd : scaleDrawEnd, item.position);
       ctx.closePath();
-      ctx.fillStyle = scaleColor;
+      ctx.fillStyle = scaleColor2;
       ctx.lineWidth = lineSize;
       ctx.setLineDash([]);
       ctx.stroke();
@@ -7665,7 +7689,7 @@ var __privateMethod = (obj, member, method) => {
         const textY = item.position + fontStart;
         const numText = `${item.num}`;
         rotateByCenter(ctx, -90, { x: textX, y: textY }, () => {
-          ctx.fillStyle = textColor;
+          ctx.fillStyle = textColor2;
           ctx.textBaseline = "top";
           ctx.$setFont({
             fontWeight,
@@ -7678,8 +7702,9 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawRulerBackground(ctx, opts) {
-    const { viewSizeInfo } = opts;
+    const { viewSizeInfo, style } = opts;
     const { width, height } = viewSizeInfo;
+    const { background: background2, borderColor: borderColor2 } = style;
     ctx.beginPath();
     ctx.moveTo(0, 0);
     ctx.lineTo(width + 1, 0);
@@ -7689,25 +7714,26 @@ var __privateMethod = (obj, member, method) => {
     ctx.lineTo(0, height + 1);
     ctx.lineTo(0, 0);
     ctx.closePath();
-    ctx.fillStyle = background;
+    ctx.fillStyle = background2;
     ctx.fill();
     ctx.lineWidth = lineSize;
     ctx.setLineDash([]);
-    ctx.strokeStyle = borderColor;
+    ctx.strokeStyle = borderColor2;
     ctx.stroke();
   }
   function drawGrid(ctx, opts) {
-    const { xList, yList, viewSizeInfo } = opts;
+    const { xList, yList, viewSizeInfo, style } = opts;
     const { width, height } = viewSizeInfo;
+    const { gridColor: gridColor2, gridPrimaryColor: gridPrimaryColor2 } = 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 = gridPrimaryColor2;
       } else {
-        ctx.strokeStyle = gridColor;
+        ctx.strokeStyle = gridColor2;
       }
       ctx.closePath();
       ctx.lineWidth = lineSize;
@@ -7720,9 +7746,9 @@ var __privateMethod = (obj, member, method) => {
       ctx.moveTo(0, item.position);
       ctx.lineTo(width, item.position);
       if (item.isKeyNum === true || item.isSubKeyNum === true) {
-        ctx.strokeStyle = gridKeyColor;
+        ctx.strokeStyle = gridPrimaryColor2;
       } else {
-        ctx.strokeStyle = gridColor;
+        ctx.strokeStyle = gridColor2;
       }
       ctx.lineWidth = 1;
       ctx.closePath();
@@ -7730,8 +7756,9 @@ var __privateMethod = (obj, member, method) => {
     }
   }
   function drawScrollerSelectedArea(ctx, opts) {
-    const { snapshot, calculator } = opts;
+    const { snapshot, calculator, style } = opts;
     const { sharedStore } = snapshot;
+    const { selectedAreaColor: selectedAreaColor2 } = style;
     const selectedElementList = sharedStore[keySelectedElementList];
     const actionType = sharedStore[keyActionType];
     if (["select", "drag", "drag-list", "drag-list-end"].includes(actionType) && selectedElementList.length > 0) {
@@ -7768,7 +7795,7 @@ var __privateMethod = (obj, member, method) => {
       ctx.lineTo(xAreaEnd, 0);
       ctx.lineTo(xAreaEnd, rulerSize);
       ctx.lineTo(xAreaStart, rulerSize);
-      ctx.fillStyle = selectedAreaColor;
+      ctx.fillStyle = selectedAreaColor2;
       ctx.closePath();
       ctx.fill();
       ctx.beginPath();
@@ -7776,15 +7803,29 @@ var __privateMethod = (obj, member, method) => {
       ctx.lineTo(rulerSize, yAreaStart);
       ctx.lineTo(rulerSize, yAreaEnd);
       ctx.lineTo(0, yAreaEnd);
-      ctx.fillStyle = selectedAreaColor;
+      ctx.fillStyle = selectedAreaColor2;
       ctx.closePath();
       ctx.fill();
     }
   }
   const middlewareEventRuler = "@middleware/show-ruler";
-  const MiddlewareRuler = (opts) => {
+  const MiddlewareRuler = (opts, config) => {
     const { boardContent, viewer, eventHub, calculator } = opts;
     const { overlayContext, underlayContext } = boardContent;
+    const 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) => {
@@ -7810,19 +7851,20 @@ var __privateMethod = (obj, member, method) => {
         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
             });
           }
         }
@@ -7874,7 +7916,8 @@ var __privateMethod = (obj, member, method) => {
   };
   const fontFamily = "monospace";
   function drawSizeInfoText(ctx, opts) {
-    const { point, rotateCenter, angle: angle2, text: text2, color: color2, background: background2, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    const { point, rotateCenter, angle: angle2, text: text2, style, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    const { textColor: textColor2, textBackground } = style;
     rotateByCenter(ctx, angle2, rotateCenter, () => {
       ctx.$setFont({
         fontWeight: "300",
@@ -7896,7 +7939,7 @@ var __privateMethod = (obj, member, method) => {
         y: point.y
       };
       ctx.setLineDash([]);
-      ctx.fillStyle = background2;
+      ctx.fillStyle = textBackground;
       ctx.beginPath();
       ctx.moveTo(bgStart.x, bgStart.y);
       ctx.lineTo(bgEnd.x, bgStart.y);
@@ -7904,13 +7947,14 @@ var __privateMethod = (obj, member, method) => {
       ctx.lineTo(bgStart.x, bgEnd.y);
       ctx.closePath();
       ctx.fill();
-      ctx.fillStyle = color2;
+      ctx.fillStyle = textColor2;
       ctx.textBaseline = "top";
       ctx.fillText(text2, textStart.x, textStart.y + padding);
     });
   }
   function drawPositionInfoText(ctx, opts) {
-    const { point, rotateCenter, angle: angle2, text: text2, color: color2, background: background2, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    const { point, rotateCenter, angle: angle2, text: text2, style, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    const { textBackground, textColor: textColor2 } = style;
     rotateByCenter(ctx, angle2, rotateCenter, () => {
       ctx.$setFont({
         fontWeight: "300",
@@ -7932,7 +7976,7 @@ var __privateMethod = (obj, member, method) => {
         y: point.y
       };
       ctx.setLineDash([]);
-      ctx.fillStyle = background2;
+      ctx.fillStyle = textBackground;
       ctx.beginPath();
       ctx.moveTo(bgStart.x, bgStart.y);
       ctx.lineTo(bgEnd.x, bgStart.y);
@@ -7940,13 +7984,14 @@ var __privateMethod = (obj, member, method) => {
       ctx.lineTo(bgStart.x, bgEnd.y);
       ctx.closePath();
       ctx.fill();
-      ctx.fillStyle = color2;
+      ctx.fillStyle = textColor2;
       ctx.textBaseline = "top";
       ctx.fillText(text2, textStart.x, textStart.y + padding);
     });
   }
   function drawAngleInfoText(ctx, opts) {
-    const { point, rotateCenter, angle: angle2, text: text2, color: color2, background: background2, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    const { point, rotateCenter, angle: angle2, text: text2, style, fontSize: fontSize2, lineHeight: lineHeight2 } = opts;
+    const { textBackground, textColor: textColor2 } = style;
     rotateByCenter(ctx, angle2, rotateCenter, () => {
       ctx.$setFont({
         fontWeight: "300",
@@ -7968,7 +8013,7 @@ var __privateMethod = (obj, member, method) => {
         y: point.y
       };
       ctx.setLineDash([]);
-      ctx.fillStyle = background2;
+      ctx.fillStyle = textBackground;
       ctx.beginPath();
       ctx.moveTo(bgStart.x, bgStart.y);
       ctx.lineTo(bgEnd.x, bgStart.y);
@@ -7976,18 +8021,31 @@ var __privateMethod = (obj, member, method) => {
       ctx.lineTo(bgStart.x, bgEnd.y);
       ctx.closePath();
       ctx.fill();
-      ctx.fillStyle = color2;
+      ctx.fillStyle = textColor2;
       ctx.textBaseline = "top";
       ctx.fillText(text2, textStart.x, textStart.y + padding);
     });
   }
   const infoBackground = "#1973bac6";
   const infoTextColor = "#ffffff";
+  const defaltStyle = {
+    textBackground: infoBackground,
+    textColor: infoTextColor
+  };
   const infoFontSize = 10;
   const infoLineHeight = 16;
-  const MiddlewareInfo = (opts) => {
+  const MiddlewareInfo = (opts, config) => {
     const { boardContent, calculator } = opts;
     const { overlayContext } = boardContent;
+    const innerConfig = {
+      ...defaltStyle,
+      ...config
+    };
+    const { textBackground, textColor: textColor2 } = innerConfig;
+    const style = {
+      textBackground,
+      textColor: textColor2
+    };
     return {
       name: "@middleware/info",
       beforeDrawFrame({ snapshot }) {
@@ -8053,8 +8111,7 @@ var __privateMethod = (obj, member, method) => {
                 text: whText,
                 fontSize: infoFontSize,
                 lineHeight: infoLineHeight,
-                color: infoTextColor,
-                background: infoBackground
+                style
               });
               drawPositionInfoText(overlayContext, {
                 point: {
@@ -8066,8 +8123,7 @@ var __privateMethod = (obj, member, method) => {
                 text: xyText,
                 fontSize: infoFontSize,
                 lineHeight: infoLineHeight,
-                color: infoTextColor,
-                background: infoBackground
+                style
               });
               drawAngleInfoText(overlayContext, {
                 point: {
@@ -8079,8 +8135,7 @@ var __privateMethod = (obj, member, method) => {
                 text: angleText,
                 fontSize: infoFontSize,
                 lineHeight: infoLineHeight,
-                color: infoTextColor,
-                background: infoBackground
+                style
               });
             }
           }
@@ -8125,8 +8180,8 @@ var __privateMethod = (obj, member, method) => {
       __privateGet(this, _board).destroy();
       __privateGet(this, _canvas).remove();
     }
-    use(middleware) {
-      __privateGet(this, _board).use(middleware);
+    use(middleware, config) {
+      __privateGet(this, _board).use(middleware, config);
     }
     disuse(middleware) {
       __privateGet(this, _board).disuse(middleware);