@idraw/core 0.4.0-beta.23 → 0.4.0-beta.24

package/dist/index.global.js

@@ -656,23 +656,23 @@ var __privateMethod = (obj, member, method) => {
     const ctx = canvas.getContext("2d");
     if (createCustomContext2D) {
       const viewContext = createCustomContext2D(ctxOpts);
-      const helperContext = createCustomContext2D(ctxOpts);
-      const underContext = createCustomContext2D(ctxOpts);
+      const overlayContext = createCustomContext2D(ctxOpts);
+      const underlayContext = createCustomContext2D(ctxOpts);
       const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
       const drawView = () => {
         const { width: w2, height: h2 } = viewContext.$getSize();
         boardContext.clearRect(0, 0, w2, h2);
-        boardContext.drawImage(underContext.canvas, 0, 0, w2, h2);
+        boardContext.drawImage(underlayContext.canvas, 0, 0, w2, h2);
         boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(helperContext.canvas, 0, 0, w2, h2);
-        underContext.clearRect(0, 0, w2, h2);
+        boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
+        underlayContext.clearRect(0, 0, w2, h2);
         viewContext.clearRect(0, 0, w2, h2);
-        helperContext.clearRect(0, 0, w2, h2);
+        overlayContext.clearRect(0, 0, w2, h2);
       };
       const content = {
-        underContext,
+        underlayContext,
         viewContext,
-        helperContext,
+        overlayContext,
         boardContext,
         drawView
       };
@@ -680,45 +680,45 @@ var __privateMethod = (obj, member, method) => {
     }
     if (offscreen === true) {
       const viewContext = createOffscreenContext2D(ctxOpts);
-      const helperContext = createOffscreenContext2D(ctxOpts);
-      const underContext = createOffscreenContext2D(ctxOpts);
+      const overlayContext = createOffscreenContext2D(ctxOpts);
+      const underlayContext = createOffscreenContext2D(ctxOpts);
       const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
       const drawView = () => {
         const { width: w2, height: h2 } = viewContext.$getSize();
         boardContext.clearRect(0, 0, w2, h2);
-        boardContext.drawImage(underContext.canvas, 0, 0, w2, h2);
+        boardContext.drawImage(underlayContext.canvas, 0, 0, w2, h2);
         boardContext.drawImage(viewContext.canvas, 0, 0, w2, h2);
-        boardContext.drawImage(helperContext.canvas, 0, 0, w2, h2);
-        underContext.clearRect(0, 0, w2, h2);
+        boardContext.drawImage(overlayContext.canvas, 0, 0, w2, h2);
+        underlayContext.clearRect(0, 0, w2, h2);
         viewContext.clearRect(0, 0, w2, h2);
-        helperContext.clearRect(0, 0, w2, h2);
+        overlayContext.clearRect(0, 0, w2, h2);
       };
       const content = {
-        underContext,
+        underlayContext,
         viewContext,
-        helperContext,
+        overlayContext,
         boardContext,
         drawView
       };
       return content;
     } else {
       const viewContext = createContext2D(ctxOpts);
-      const helperContext = createContext2D(ctxOpts);
-      const underContext = createContext2D(ctxOpts);
+      const overlayContext = createContext2D(ctxOpts);
+      const underlayContext = createContext2D(ctxOpts);
       const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
       const drawView = () => {
         boardContext.clearRect(0, 0, width, height);
-        boardContext.drawImage(underContext.canvas, 0, 0, width, height);
+        boardContext.drawImage(underlayContext.canvas, 0, 0, width, height);
         boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
-        boardContext.drawImage(helperContext.canvas, 0, 0, width, height);
-        underContext.clearRect(0, 0, width, height);
+        boardContext.drawImage(overlayContext.canvas, 0, 0, width, height);
+        underlayContext.clearRect(0, 0, width, height);
         viewContext.clearRect(0, 0, width, height);
-        helperContext.clearRect(0, 0, width, height);
+        overlayContext.clearRect(0, 0, width, height);
       };
       const content = {
-        underContext,
+        underlayContext,
         viewContext,
-        helperContext,
+        overlayContext,
         boardContext,
         drawView
       };
@@ -2488,7 +2488,7 @@ var __privateMethod = (obj, member, method) => {
   function drawImage(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
       drawBoxShadow(ctx, viewElem, {
@@ -2511,6 +2511,10 @@ var __privateMethod = (obj, member, method) => {
                   viewScaleInfo,
                   viewSizeInfo
                 });
+                const { detail } = elem;
+                const { scaleMode, originW = 0, originH = 0 } = detail;
+                const imageW = ctx.$undoPixelRatio(originW);
+                const imageH = ctx.$undoPixelRatio(originH);
                 ctx.save();
                 ctx.fillStyle = "transparent";
                 ctx.beginPath();
@@ -2522,7 +2526,41 @@ var __privateMethod = (obj, member, method) => {
                 ctx.closePath();
                 ctx.fill();
                 ctx.clip();
-                ctx.drawImage(content, x3, y3, w3, h3);
+                if (scaleMode && originH && originW) {
+                  let sx = 0;
+                  let sy = 0;
+                  let sWidth = imageW;
+                  let sHeight = imageH;
+                  const dx = x3;
+                  const dy = y3;
+                  const dWidth = w3;
+                  const dHeight = h3;
+                  if (imageW > elem.w || imageH > elem.h) {
+                    if (scaleMode === "fill") {
+                      const sourceScale = Math.max(elem.w / imageW, elem.h / imageH);
+                      const newImageWidth = imageW * sourceScale;
+                      const newImageHeight = imageH * sourceScale;
+                      sx = (newImageWidth - elem.w) / 2 / sourceScale;
+                      sy = (newImageHeight - elem.h) / 2 / sourceScale;
+                      sWidth = elem.w / sourceScale;
+                      sHeight = elem.h / sourceScale;
+                    } else if (scaleMode === "tile") {
+                      sx = 0;
+                      sy = 0;
+                      sWidth = elem.w;
+                      sHeight = elem.h;
+                    } else if (scaleMode === "fit") {
+                      const sourceScale = Math.min(elem.w / imageW, elem.h / imageH);
+                      sx = (imageW - elem.w / sourceScale) / 2;
+                      sy = (imageH - elem.h / sourceScale) / 2;
+                      sWidth = elem.w / sourceScale;
+                      sHeight = elem.h / sourceScale;
+                    }
+                  }
+                  ctx.drawImage(content, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+                } else {
+                  ctx.drawImage(content, x3, y3, w3, h3);
+                }
                 ctx.globalAlpha = parentOpacity;
                 ctx.restore();
               }
@@ -2681,7 +2719,7 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawPath(ctx, elem, opts) {
     const { detail } = elem;
-    const { originX, originY, originW, originH } = detail;
+    const { originX, originY, originW, originH, fillRule } = detail;
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     const scaleW = w2 / originW;
@@ -2711,7 +2749,7 @@ var __privateMethod = (obj, member, method) => {
               const path2d = new Path2D(pathStr);
               if (detail.fill) {
                 ctx.fillStyle = detail.fill;
-                ctx.fill(path2d);
+                ctx.fill(path2d, fillRule);
               }
               if (detail.stroke && detail.strokeWidth !== 0) {
                 ctx.strokeStyle = detail.stroke;
@@ -3795,15 +3833,15 @@ var __privateMethod = (obj, member, method) => {
       const originViewSize = sharer.getActiveViewSizeInfo();
       const newViewSize = Object.assign(Object.assign({}, originViewSize), viewSize);
       const { width, height, devicePixelRatio } = newViewSize;
-      const { underContext, boardContext, helperContext, viewContext } = __classPrivateFieldGet$1(this, _Viewer_opts, "f").boardContent;
+      const { underlayContext, boardContext, overlayContext, viewContext } = __classPrivateFieldGet$1(this, _Viewer_opts, "f").boardContent;
       boardContext.canvas.width = width * devicePixelRatio;
       boardContext.canvas.height = height * devicePixelRatio;
       boardContext.canvas.style.width = `${width}px`;
       boardContext.canvas.style.height = `${height}px`;
-      underContext.canvas.width = width * devicePixelRatio;
-      underContext.canvas.height = height * devicePixelRatio;
-      helperContext.canvas.width = width * devicePixelRatio;
-      helperContext.canvas.height = height * devicePixelRatio;
+      underlayContext.canvas.width = width * devicePixelRatio;
+      underlayContext.canvas.height = height * devicePixelRatio;
+      overlayContext.canvas.width = width * devicePixelRatio;
+      overlayContext.canvas.height = height * devicePixelRatio;
       viewContext.canvas.width = width * devicePixelRatio;
       viewContext.canvas.height = height * devicePixelRatio;
       sharer.setActiveViewSizeInfo(newViewSize);
@@ -4036,18 +4074,18 @@ var __privateMethod = (obj, member, method) => {
       const { width, height, devicePixelRatio } = newViewSize;
       const { boardContent } = __classPrivateFieldGet(this, _Board_opts, "f");
       boardContent.viewContext.$resize({ width, height, devicePixelRatio });
-      boardContent.helperContext.$resize({ width, height, devicePixelRatio });
+      boardContent.overlayContext.$resize({ width, height, devicePixelRatio });
       boardContent.boardContext.$resize({ width, height, devicePixelRatio });
-      boardContent.underContext.$resize({ width, height, devicePixelRatio });
+      boardContent.underlayContext.$resize({ width, height, devicePixelRatio });
       __classPrivateFieldGet(this, _Board_viewer, "f").drawFrame();
       __classPrivateFieldGet(this, _Board_watcher, "f").trigger("resize", viewSize);
       __classPrivateFieldGet(this, _Board_sharer, "f").setActiveViewSizeInfo(newViewSize);
     }
     clear() {
       const { boardContent } = __classPrivateFieldGet(this, _Board_opts, "f");
-      const { underContext, helperContext, viewContext, boardContext } = boardContent;
-      underContext.clearRect(0, 0, underContext.canvas.width, underContext.canvas.height);
-      helperContext.clearRect(0, 0, helperContext.canvas.width, helperContext.canvas.height);
+      const { underlayContext, overlayContext, viewContext, boardContext } = boardContent;
+      underlayContext.clearRect(0, 0, underlayContext.canvas.width, underlayContext.canvas.height);
+      overlayContext.clearRect(0, 0, overlayContext.canvas.width, overlayContext.canvas.height);
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
       boardContext.clearRect(0, 0, boardContext.canvas.width, boardContext.canvas.height);
       __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleClear).call(this);
@@ -5834,7 +5872,7 @@ var __privateMethod = (obj, member, method) => {
   };
   const MiddlewareSelector = (opts) => {
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
-    const { helperContext } = boardContent;
+    const { overlayContext } = boardContent;
     let prevPoint = null;
     let inBusyMode = null;
     sharer.setSharedStorage(keyActionType, null);
@@ -5891,7 +5929,7 @@ var __privateMethod = (obj, member, method) => {
     };
     const pointTargetBaseOptions = () => {
       return {
-        ctx: helperContext,
+        ctx: overlayContext,
         calculator,
         data: sharer.getActiveStorage("data"),
         selectedElements: getActiveElements(),
@@ -5982,7 +6020,7 @@ var __privateMethod = (obj, member, method) => {
         };
         if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
           const isInActiveGroup = isPointInViewActiveGroup(e.point, {
-            ctx: helperContext,
+            ctx: overlayContext,
             viewScaleInfo: sharer.getActiveViewScaleInfo(),
             viewSizeInfo: sharer.getActiveViewSizeInfo(),
             groupQueue: sharer.getSharedStorage(keyGroupQueue)
@@ -6059,7 +6097,7 @@ var __privateMethod = (obj, member, method) => {
         const groupQueue = sharer.getSharedStorage(keyGroupQueue);
         if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
           if (isPointInViewActiveGroup(e.point, {
-            ctx: helperContext,
+            ctx: overlayContext,
             viewScaleInfo: sharer.getActiveViewScaleInfo(),
             viewSizeInfo: sharer.getActiveViewSizeInfo(),
             groupQueue
@@ -6404,10 +6442,10 @@ var __privateMethod = (obj, member, method) => {
         }) : null;
         const isLock = !!((_a = hoverElement == null ? void 0 : hoverElement.operations) == null ? void 0 : _a.lock);
         if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
-          drawGroupQueueVertexesWrappers(helperContext, groupQueueVertexesList, drawBaseOpts);
+          drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
           if (hoverElement && actionType !== "drag") {
             if (isLock) {
-              drawLockVertexesWrapper(helperContext, hoverElementVertexes, {
+              drawLockVertexesWrapper(overlayContext, hoverElementVertexes, {
                 ...drawBaseOpts,
                 controller: calcElementSizeController(hoverElement, {
                   groupQueue,
@@ -6416,11 +6454,11 @@ var __privateMethod = (obj, member, method) => {
                 })
               });
             } else {
-              drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+              drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
             }
           }
           if (!isLock && elem && ["select", "drag", "resize"].includes(actionType)) {
-            drawSelectedElementControllersVertexes(helperContext, selectedElementController, {
+            drawSelectedElementControllersVertexes(overlayContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
               calculator,
@@ -6429,7 +6467,7 @@ var __privateMethod = (obj, member, method) => {
             if (actionType === "drag") {
               const xLines = sharer2.getSharedStorage(keySelectedReferenceXLines);
               const yLines = sharer2.getSharedStorage(keySelectedReferenceYLines);
-              drawReferenceLines(helperContext, {
+              drawReferenceLines(overlayContext, {
                 xLines,
                 yLines
               });
@@ -6438,7 +6476,7 @@ var __privateMethod = (obj, member, method) => {
         } else {
           if (hoverElement && actionType !== "drag") {
             if (isLock) {
-              drawLockVertexesWrapper(helperContext, hoverElementVertexes, {
+              drawLockVertexesWrapper(overlayContext, hoverElementVertexes, {
                 ...drawBaseOpts,
                 controller: calcElementSizeController(hoverElement, {
                   groupQueue,
@@ -6447,11 +6485,11 @@ var __privateMethod = (obj, member, method) => {
                 })
               });
             } else {
-              drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+              drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
             }
           }
           if (!isLock && elem && ["select", "drag", "resize"].includes(actionType)) {
-            drawSelectedElementControllersVertexes(helperContext, selectedElementController, {
+            drawSelectedElementControllersVertexes(overlayContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
               calculator,
@@ -6460,13 +6498,13 @@ var __privateMethod = (obj, member, method) => {
             if (actionType === "drag") {
               const xLines = sharer2.getSharedStorage(keySelectedReferenceXLines);
               const yLines = sharer2.getSharedStorage(keySelectedReferenceYLines);
-              drawReferenceLines(helperContext, {
+              drawReferenceLines(overlayContext, {
                 xLines,
                 yLines
               });
             }
           } else if (actionType === "area" && areaStart && areaEnd) {
-            drawArea(helperContext, { start: areaStart, end: areaEnd });
+            drawArea(overlayContext, { start: areaStart, end: areaEnd });
           } else if (["drag-list", "drag-list-end"].includes(actionType)) {
             const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
               viewScaleInfo: sharer2.getActiveViewScaleInfo(),
@@ -6474,7 +6512,7 @@ var __privateMethod = (obj, member, method) => {
               calculator
             });
             if (listAreaSize) {
-              drawListArea(helperContext, { areaSize: listAreaSize });
+              drawListArea(overlayContext, { areaSize: listAreaSize });
             }
           }
         }
@@ -6496,8 +6534,8 @@ var __privateMethod = (obj, member, method) => {
     scrollBarColor: "#FFFFFF60",
     showScrollBar: false
   };
-  function isPointAtRect(helperContext, p, rect) {
-    const ctx = helperContext;
+  function isPointAtRect(overlayContext, p, rect) {
+    const ctx = overlayContext;
     const { x: x2, y: y2, w: w2, h: h2 } = rect;
     ctx.beginPath();
     ctx.rect(x2, y2, w2, h2);
@@ -6507,12 +6545,12 @@ var __privateMethod = (obj, member, method) => {
     }
     return false;
   }
-  function isPointInScrollThumb(helperContext, p, opts) {
+  function isPointInScrollThumb(overlayContext, p, opts) {
     let thumbType = null;
     const { xThumbRect, yThumbRect } = opts;
-    if (xThumbRect && isPointAtRect(helperContext, p, xThumbRect)) {
+    if (xThumbRect && isPointAtRect(overlayContext, p, xThumbRect)) {
       thumbType = "X";
-    } else if (yThumbRect && isPointAtRect(helperContext, p, yThumbRect)) {
+    } else if (yThumbRect && isPointAtRect(overlayContext, p, yThumbRect)) {
       thumbType = "Y";
     }
     return thumbType;
@@ -6636,8 +6674,8 @@ var __privateMethod = (obj, member, method) => {
     }
     ctx.restore();
   }
-  function drawScrollerInfo(helperContext, opts) {
-    const ctx = helperContext;
+  function drawScrollerInfo(overlayContext, opts) {
+    const ctx = overlayContext;
     const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
     const { activeThumbType, prevPoint, activePoint } = scrollInfo;
     const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo);
@@ -6680,7 +6718,7 @@ var __privateMethod = (obj, member, method) => {
   }
   const MiddlewareScroller = (opts) => {
     const { viewer, boardContent, sharer } = opts;
-    const { helperContext } = boardContent;
+    const { overlayContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
     const clear = () => {
@@ -6714,7 +6752,7 @@ var __privateMethod = (obj, member, method) => {
       }
     };
     const getThumbType = (p) => {
-      return isPointInScrollThumb(helperContext, p, {
+      return isPointInScrollThumb(overlayContext, p, {
         xThumbRect: sharer.getSharedStorage(keyXThumbRect),
         yThumbRect: sharer.getSharedStorage(keyYThumbRect)
       });
@@ -6761,7 +6799,7 @@ var __privateMethod = (obj, member, method) => {
         }
       },
       beforeDrawFrame({ snapshot }) {
-        const { xThumbRect, yThumbRect } = drawScroller(helperContext, { snapshot });
+        const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot });
         sharer.setSharedStorage(keyXThumbRect, xThumbRect);
         sharer.setSharedStorage(keyYThumbRect, yThumbRect);
       }
@@ -6806,12 +6844,35 @@ var __privateMethod = (obj, member, method) => {
   const gridKeyColor = "#AAAAAA40";
   const lineSize = 1;
   const selectedAreaColor = "#196097";
+  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]));
+    for (let i = 0; i < limitRulerUnitList.length - 1; i++) {
+      const thisUnit = limitRulerUnitList[i];
+      const nextUnit = limitRulerUnitList[i + 1];
+      if (unit > nextUnit) {
+        continue;
+      }
+      if (unit === thisUnit) {
+        return unit;
+      }
+      if (unit === nextUnit) {
+        return unit;
+      }
+      const mid = (thisUnit + nextUnit) / 2;
+      if (unit <= mid) {
+        return thisUnit;
+      }
+      return nextUnit;
+    }
+    return unit;
+  }
   function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
     const list = [];
     let rulerUnit = 10;
     rulerUnit = formatNumber(rulerUnit / scale, { decimalPlaces: 0 });
-    rulerUnit = Math.max(10, Math.min(rulerUnit, 1e3));
+    rulerUnit = limitRulerUnit(rulerUnit);
     const rulerKeyUnit = rulerUnit * 10;
     const rulerSubKeyUnit = rulerUnit * 5;
     let index = 0;
@@ -6834,7 +6895,7 @@ var __privateMethod = (obj, member, method) => {
       list.push(rulerScale);
       index++;
     }
-    return list;
+    return { list, rulerUnit };
   }
   function calcXRulerScaleList(opts) {
     const { viewScaleInfo, viewSizeInfo } = opts;
@@ -6946,7 +7007,7 @@ var __privateMethod = (obj, member, method) => {
     ctx.strokeStyle = borderColor;
     ctx.stroke();
   }
-  function drawUnderGrid(ctx, opts) {
+  function drawGrid(ctx, opts) {
     const { xList, yList, viewSizeInfo } = opts;
     const { width, height } = viewSizeInfo;
     for (let i = 0; i < xList.length; i++) {
@@ -7034,7 +7095,7 @@ var __privateMethod = (obj, member, method) => {
   const middlewareEventRuler = "@middleware/show-ruler";
   const MiddlewareRuler = (opts) => {
     const { boardContent, viewer, eventHub, calculator } = opts;
-    const { helperContext, underContext } = boardContent;
+    const { overlayContext, underlayContext } = boardContent;
     let show = true;
     let showGrid = true;
     const rulerCallback = (e) => {
@@ -7060,14 +7121,15 @@ var __privateMethod = (obj, member, method) => {
         if (show === true) {
           const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
           const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-          drawScrollerSelectedArea(helperContext, { snapshot, calculator });
-          drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
-          const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
-          drawXRuler(helperContext, { scaleList: xList });
-          const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
-          drawYRuler(helperContext, { scaleList: yList });
+          drawScrollerSelectedArea(overlayContext, { snapshot, calculator });
+          drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo });
+          const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
+          drawXRuler(overlayContext, { scaleList: xList });
+          const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
+          drawYRuler(overlayContext, { scaleList: yList });
           if (showGrid === true) {
-            drawUnderGrid(underContext, {
+            const ctx = rulerUnit === 1 ? overlayContext : underlayContext;
+            drawGrid(ctx, {
               xList,
               yList,
               viewScaleInfo,
@@ -7236,7 +7298,7 @@ var __privateMethod = (obj, member, method) => {
   const infoLineHeight = 16;
   const MiddlewareInfo = (opts) => {
     const { boardContent, calculator } = opts;
-    const { helperContext } = boardContent;
+    const { overlayContext } = boardContent;
     return {
       name: "@middleware/info",
       beforeDrawFrame({ snapshot }) {
@@ -7292,7 +7354,7 @@ var __privateMethod = (obj, member, method) => {
               const xyText = `${formatNumber(x22, { decimalPlaces: 0 })},${formatNumber(y22, { decimalPlaces: 0 })}`;
               const whText = `${formatNumber(w22, { decimalPlaces: 0 })}x${formatNumber(h22, { decimalPlaces: 0 })}`;
               const angleText = `${formatNumber(elem.angle || 0, { decimalPlaces: 0 })}°`;
-              drawSizeInfoText(helperContext, {
+              drawSizeInfoText(overlayContext, {
                 point: {
                   x: rectInfo.bottom.x,
                   y: rectInfo.bottom.y + infoFontSize
@@ -7305,7 +7367,7 @@ var __privateMethod = (obj, member, method) => {
                 color: infoTextColor,
                 background: infoBackground
               });
-              drawPositionInfoText(helperContext, {
+              drawPositionInfoText(overlayContext, {
                 point: {
                   x: rectInfo.topLeft.x,
                   y: rectInfo.topLeft.y - infoFontSize * 2
@@ -7318,7 +7380,7 @@ var __privateMethod = (obj, member, method) => {
                 color: infoTextColor,
                 background: infoBackground
               });
-              drawAngleInfoText(helperContext, {
+              drawAngleInfoText(overlayContext, {
                 point: {
                   x: rectInfo.top.x + infoFontSize,
                   y: rectInfo.top.y - infoFontSize * 2
@@ -7433,7 +7495,7 @@ var __privateMethod = (obj, member, method) => {
   }
   const MiddlewareLayoutSelector = (opts) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
-    const { helperContext } = boardContent;
+    const { overlayContext } = boardContent;
     let prevPoint = null;
     const clear = () => {
       prevPoint = null;
@@ -7653,7 +7715,7 @@ var __privateMethod = (obj, member, method) => {
             const { x: x2, y: y2, w: w2, h: h2 } = activeStore.data.layout;
             const size = { x: x2, y: y2, w: w2, h: h2 };
             const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 });
-            drawLayoutController(helperContext, { controller, operations: activeStore.data.layout.operations || {} });
+            drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} });
           }
         }
       },