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

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
       };
@@ -1932,6 +1932,8 @@ var __privateMethod = (obj, member, method) => {
       fontSize: 16,
       fontFamily: "sans-serif",
       fontWeight: 400,
+      minInlineSize: "auto",
+      wordBreak: "break-all",
       overflow: "hidden"
     };
     return config;
@@ -2084,6 +2086,10 @@ var __privateMethod = (obj, member, method) => {
     resizeElementBaseDetail(elem, opts);
     return elem;
   }
+  const baseFontFamilyList = ["-apple-system", '"system-ui"', ' "Segoe UI"', " Roboto", '"Helvetica Neue"', "Arial", '"Noto Sans"', " sans-serif"];
+  function enhanceFontFamliy(fontFamily2) {
+    return [fontFamily2, ...baseFontFamilyList].join(", ");
+  }
   function createColorStyle(ctx, color2, opts) {
     if (typeof color2 === "string") {
       return color2;
@@ -2140,19 +2146,36 @@ var __privateMethod = (obj, member, method) => {
     const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
     const { parentOpacity } = opts;
     const opacity = getOpacity(originElem) * parentOpacity;
-    drawClipPath(ctx, viewElem, {
-      originElem,
-      calcElemSize,
-      viewScaleInfo,
-      viewSizeInfo,
-      renderContent: () => {
-        ctx.globalAlpha = opacity;
-        drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
-        renderContent === null || renderContent === void 0 ? void 0 : renderContent();
-        drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-        ctx.globalAlpha = parentOpacity;
+    const { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = originElem.detail;
+    const mainRender = () => {
+      ctx.globalAlpha = opacity;
+      drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
+      renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+      drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+      ctx.globalAlpha = parentOpacity;
+    };
+    if (clipPath) {
+      drawClipPath(ctx, viewElem, {
+        originElem,
+        calcElemSize,
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+          mainRender();
+        }
+      });
+      if (typeof clipPathStrokeWidth === "number" && clipPathStrokeWidth > 0 && clipPathStrokeColor) {
+        drawClipPathStroke(ctx, viewElem, {
+          originElem,
+          calcElemSize,
+          viewScaleInfo,
+          viewSizeInfo,
+          parentOpacity
+        });
       }
-    });
+    } else {
+      mainRender();
+    }
   }
   function drawClipPath(ctx, viewElem, opts) {
     const { renderContent, originElem, calcElemSize, viewSizeInfo } = opts;
@@ -2183,6 +2206,38 @@ var __privateMethod = (obj, member, method) => {
       renderContent === null || renderContent === void 0 ? void 0 : renderContent();
     }
   }
+  function drawClipPathStroke(ctx, viewElem, opts) {
+    const { renderContent, originElem, calcElemSize, viewSizeInfo, parentOpacity } = opts;
+    const totalScale = viewSizeInfo.devicePixelRatio;
+    const { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = (originElem === null || originElem === void 0 ? void 0 : originElem.detail) || {};
+    if (clipPath && calcElemSize && clipPath.commands && typeof clipPathStrokeWidth === "number" && clipPathStrokeWidth > 0 && clipPathStrokeColor) {
+      const { x: x2, y: y2, w: w2, h: h2 } = calcElemSize;
+      const { originW, originH, originX, originY } = clipPath;
+      const scaleW = w2 / originW;
+      const scaleH = h2 / originH;
+      const viewOriginX = originX * scaleW;
+      const viewOriginY = originY * scaleH;
+      const internalX = x2 - viewOriginX;
+      const internalY = y2 - viewOriginY;
+      ctx.save();
+      ctx.globalAlpha = parentOpacity;
+      ctx.translate(internalX, internalY);
+      ctx.scale(totalScale * scaleW, totalScale * scaleH);
+      const pathStr = generateSVGPath(clipPath.commands || []);
+      const path2d = new Path2D(pathStr);
+      ctx.strokeStyle = clipPathStrokeColor;
+      ctx.lineWidth = clipPathStrokeWidth;
+      ctx.stroke(path2d);
+      ctx.translate(0 - internalX, 0 - internalY);
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      rotateElement$1(ctx, Object.assign({}, viewElem), () => {
+        renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+      });
+      ctx.restore();
+    } else {
+      renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+    }
+  }
   function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
@@ -2488,7 +2543,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 +2566,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 +2581,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();
               }
@@ -2563,6 +2656,14 @@ var __privateMethod = (obj, member, method) => {
     });
   }
   const detailConfig = getDefaultElementDetailConfig();
+  function isTextWidthWithinErrorRange(w0, w1, scale) {
+    if (scale < 0.5) {
+      if (w0 < w1 && (w0 - w1) / w0 > -0.15) {
+        return true;
+      }
+    }
+    return w0 >= w1;
+  }
   function drawText(ctx, elem, opts) {
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
@@ -2578,6 +2679,9 @@ var __privateMethod = (obj, member, method) => {
           const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
           const originFontSize = detail.fontSize || detailConfig.fontSize;
           const fontSize2 = originFontSize * viewScaleInfo.scale;
+          if (fontSize2 < 2) {
+            return;
+          }
           const originLineHeight = detail.lineHeight || originFontSize;
           const lineHeight2 = originLineHeight * viewScaleInfo.scale;
           ctx.fillStyle = elem.detail.color || detailConfig.color;
@@ -2585,7 +2689,7 @@ var __privateMethod = (obj, member, method) => {
           ctx.$setFont({
             fontWeight: detail.fontWeight,
             fontSize: fontSize2,
-            fontFamily: detail.fontFamily
+            fontFamily: enhanceFontFamliy(detail.fontFamily)
           });
           let detailText = detail.text.replace(/\r\n/gi, "\n");
           if (detail.textTransform === "lowercase") {
@@ -2597,30 +2701,48 @@ var __privateMethod = (obj, member, method) => {
           const detailTextList = detailText.split("\n");
           const lines = [];
           let lineNum = 0;
-          detailTextList.forEach((tempText, idx) => {
+          detailTextList.forEach((itemText, idx) => {
             if (detail.minInlineSize === "maxContent") {
               lines.push({
-                text: tempText,
-                width: ctx.$undoPixelRatio(ctx.measureText(tempText).width)
+                text: itemText,
+                width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
               });
             } else {
               let lineText = "";
-              if (tempText.length > 0) {
-                for (let i = 0; i < tempText.length; i++) {
-                  if (ctx.measureText(lineText + (tempText[i] || "")).width <= ctx.$doPixelRatio(w2)) {
-                    lineText += tempText[i] || "";
+              let splitStr = "";
+              let tempStrList = itemText.split(splitStr);
+              if (detail.wordBreak === "normal") {
+                const splitStr2 = " ";
+                const wordList = itemText.split(splitStr2);
+                tempStrList = [];
+                wordList.forEach((word, idx2) => {
+                  tempStrList.push(word);
+                  if (idx2 < wordList.length - 1) {
+                    tempStrList.push(splitStr2);
+                  }
+                });
+              }
+              if (tempStrList.length === 1 && detail.overflow === "visible") {
+                lines.push({
+                  text: tempStrList[0],
+                  width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width)
+                });
+              } else if (tempStrList.length > 0) {
+                for (let i = 0; i < tempStrList.length; i++) {
+                  if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w2), ctx.measureText(lineText + tempStrList[i]).width, viewScaleInfo.scale)) {
+                    lineText += tempStrList[i] || "";
                   } else {
                     lines.push({
                       text: lineText,
                       width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
                     });
-                    lineText = tempText[i] || "";
+                    lineText = tempStrList[i] || "";
                     lineNum++;
                   }
-                  if ((lineNum + 1) * fontHeight > h2) {
+                  if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") {
                     break;
                   }
-                  if (tempText.length - 1 === i) {
+                  if (tempStrList.length - 1 === i) {
                     if ((lineNum + 1) * fontHeight <= h2) {
                       lines.push({
                         text: lineText,
@@ -2642,6 +2764,10 @@ var __privateMethod = (obj, member, method) => {
             }
           });
           let startY = 0;
+          let eachLineStartY = 0;
+          if (fontHeight > fontSize2) {
+            eachLineStartY = (fontHeight - fontSize2) / 2;
+          }
           if (lines.length * fontHeight < h2) {
             if (elem.detail.verticalAlign === "top") {
               startY = 0;
@@ -2672,7 +2798,7 @@ var __privateMethod = (obj, member, method) => {
               } else if (detail.textAlign === "right") {
                 _x = x2 + (w2 - line.width);
               }
-              ctx.fillText(line.text, _x, _y + fontHeight * i);
+              ctx.fillText(line.text, _x, _y + fontHeight * i + eachLineStartY);
             });
           }
         }
@@ -2681,7 +2807,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 +2837,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;
@@ -2728,7 +2854,7 @@ var __privateMethod = (obj, member, method) => {
     });
   }
   function drawElement(ctx, elem, opts) {
-    var _a;
+    var _a, _b, _c;
     if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
       return;
     }
@@ -2737,6 +2863,10 @@ var __privateMethod = (obj, member, method) => {
     if (scale < 1 && (w2 * scale < 1 || h2 * scale < 1) || opts.parentOpacity === 0) {
       return;
     }
+    const { overrideElementMap } = opts;
+    if ((_c = (_b = overrideElementMap === null || overrideElementMap === void 0 ? void 0 : overrideElementMap[elem.uuid]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.invisible) {
+      return;
+    }
     try {
       switch (elem.type) {
         case "rect": {
@@ -2782,7 +2912,7 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawGroup(ctx, elem, opts) {
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, { viewScaleInfo, viewSizeInfo }) || elem;
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, { 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 }, () => {
       ctx.globalAlpha = getOpacity(elem) * parentOpacity;
@@ -2879,7 +3009,7 @@ var __privateMethod = (obj, member, method) => {
   function drawLayout(ctx, layout, opts, renderContent) {
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const elem = Object.assign({ uuid: "layout", type: "group" }, layout);
-    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
+    const { x: x2, y: y2, w: w2, h: h2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     const angle2 = 0;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     ctx.globalAlpha = 1;
@@ -2893,7 +3023,7 @@ var __privateMethod = (obj, member, method) => {
     if (layout.detail.overflow === "hidden") {
       const { viewScaleInfo: viewScaleInfo2, viewSizeInfo: viewSizeInfo2 } = opts;
       const elem2 = Object.assign({ uuid: "layout", type: "group" }, layout);
-      const viewElemSize = calcViewElementSize(elem2, { viewScaleInfo: viewScaleInfo2, viewSizeInfo: viewSizeInfo2 }) || elem2;
+      const viewElemSize = calcViewElementSize(elem2, { viewScaleInfo: viewScaleInfo2 }) || elem2;
       const viewElem2 = Object.assign(Object.assign({}, elem2), viewElemSize);
       const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem2, {
         viewScaleInfo: viewScaleInfo2,
@@ -2918,6 +3048,15 @@ var __privateMethod = (obj, member, method) => {
     drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
     ctx.globalAlpha = parentOpacity;
   }
+  function drawGlobalBackground(ctx, global, opts) {
+    if (typeof (global === null || global === void 0 ? void 0 : global.background) === "string") {
+      const { viewSizeInfo } = opts;
+      const { width, height } = viewSizeInfo;
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = global.background;
+      ctx.fillRect(0, 0, width, height);
+    }
+  }
   var __awaiter = function(thisArg, _arguments, P, generator) {
     function adopt(value) {
       return value instanceof P ? value : new P(function(resolve) {
@@ -3184,7 +3323,7 @@ var __privateMethod = (obj, member, method) => {
     }
     drawData(data, opts) {
       const loader = __classPrivateFieldGet$5(this, _Renderer_loader, "f");
-      const { calculator } = __classPrivateFieldGet$5(this, _Renderer_opts, "f");
+      const { calculator, sharer } = __classPrivateFieldGet$5(this, _Renderer_opts, "f");
       const viewContext = __classPrivateFieldGet$5(this, _Renderer_opts, "f").viewContext;
       viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
       const parentElementSize = {
@@ -3198,8 +3337,10 @@ var __privateMethod = (obj, member, method) => {
         calculator,
         parentElementSize,
         elementAssets: data.assets,
-        parentOpacity: 1
+        parentOpacity: 1,
+        overrideElementMap: sharer === null || sharer === void 0 ? void 0 : sharer.getActiveOverrideElemenentMap()
       }, opts);
+      drawGlobalBackground(viewContext, data.global, drawOpts);
       if (data.layout) {
         drawLayout(viewContext, data.layout, drawOpts, () => {
           drawElementList(viewContext, data, drawOpts);
@@ -3627,7 +3768,8 @@ var __privateMethod = (obj, member, method) => {
     offsetLeft: 0,
     offsetRight: 0,
     offsetTop: 0,
-    offsetBottom: 0
+    offsetBottom: 0,
+    overrideElementMap: null
   };
   class Sharer {
     constructor() {
@@ -3695,6 +3837,12 @@ var __privateMethod = (obj, member, method) => {
       };
       return sizeInfo;
     }
+    getActiveOverrideElemenentMap() {
+      return __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").get("overrideElementMap");
+    }
+    setActiveOverrideElemenentMap(map) {
+      __classPrivateFieldGet$2(this, _Sharer_activeStore, "f").set("overrideElementMap", map);
+    }
   }
   _Sharer_activeStore = /* @__PURE__ */ new WeakMap(), _Sharer_sharedStore = /* @__PURE__ */ new WeakMap();
   var __classPrivateFieldSet$1 = function(receiver, state, value, kind, f) {
@@ -3795,15 +3943,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 +4184,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);
@@ -5631,7 +5779,7 @@ var __privateMethod = (obj, member, method) => {
   const middlewareEventTextChange = "@middleware/text-change";
   const defaultElementDetail = getDefaultElementDetailConfig();
   const MiddlewareTextEditor = (opts) => {
-    const { eventHub, boardContent, viewer } = opts;
+    const { eventHub, boardContent, viewer, sharer } = opts;
     const canvas = boardContent.boardContext.canvas;
     const textarea = document.createElement("div");
     textarea.setAttribute("contenteditable", "true");
@@ -5654,8 +5802,24 @@ var __privateMethod = (obj, member, method) => {
       resetCanvasWrapper();
       resetTextArea(e);
       mask.style.display = "block";
+      if (activeElem == null ? void 0 : activeElem.uuid) {
+        sharer.setActiveOverrideElemenentMap({
+          [activeElem.uuid]: {
+            operations: { invisible: true }
+          }
+        });
+        viewer.drawFrame();
+      }
     };
     const hideTextArea = () => {
+      if (activeElem == null ? void 0 : activeElem.uuid) {
+        const map = sharer.getActiveOverrideElemenentMap();
+        if (map) {
+          delete map[activeElem.uuid];
+        }
+        sharer.setActiveOverrideElemenentMap(map);
+        viewer.drawFrame();
+      }
       mask.style.display = "none";
       activeElem = null;
       activePosition = [];
@@ -5745,11 +5909,11 @@ var __privateMethod = (obj, member, method) => {
       textarea.style.resize = "none";
       textarea.style.overflow = "hidden";
       textarea.style.wordBreak = "break-all";
-      textarea.style.background = "#FFFFFF";
-      textarea.style.color = "#333333";
+      textarea.style.background = "transparent";
+      textarea.style.color = `${detail.color || "#333333"}`;
       textarea.style.fontSize = `${detail.fontSize * scale}px`;
-      textarea.style.lineHeight = `${detail.lineHeight * scale}px`;
-      textarea.style.fontFamily = detail.fontFamily;
+      textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`;
+      textarea.style.fontFamily = enhanceFontFamliy(detail.fontFamily);
       textarea.style.fontWeight = `${detail.fontWeight}`;
       textarea.style.padding = "0";
       textarea.style.margin = "0";
@@ -5834,7 +5998,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 +6055,7 @@ var __privateMethod = (obj, member, method) => {
     };
     const pointTargetBaseOptions = () => {
       return {
-        ctx: helperContext,
+        ctx: overlayContext,
         calculator,
         data: sharer.getActiveStorage("data"),
         selectedElements: getActiveElements(),
@@ -5982,7 +6146,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 +6223,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
@@ -6352,7 +6516,7 @@ var __privateMethod = (obj, member, method) => {
         viewer.drawFrame();
       },
       doubleClick(e) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (sharer.getSharedStorage(keyEnableSelectInGroup) === false) {
           return;
         }
@@ -6369,11 +6533,11 @@ var __privateMethod = (obj, member, method) => {
             viewer.drawFrame();
             return;
           }
-        } else if (target.elements.length === 1 && ((_d = target.elements[0]) == null ? void 0 : _d.type) === "text") {
+        } else if (target.elements.length === 1 && ((_d = target.elements[0]) == null ? void 0 : _d.type) === "text" && !((_f = (_e = target.elements[0]) == null ? void 0 : _e.operations) == null ? void 0 : _f.invisible)) {
           eventHub.trigger(middlewareEventTextEdit, {
             element: target.elements[0],
             groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
-            position: getElementPositionFromList((_e = target.elements[0]) == null ? void 0 : _e.uuid, ((_f = sharer.getActiveStorage("data")) == null ? void 0 : _f.elements) || []),
+            position: getElementPositionFromList((_g = target.elements[0]) == null ? void 0 : _g.uuid, ((_h = sharer.getActiveStorage("data")) == null ? void 0 : _h.elements) || []),
             viewScaleInfo: sharer.getActiveViewScaleInfo()
           });
         }
@@ -6404,10 +6568,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 +6580,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 +6593,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 +6602,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 +6611,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 +6624,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 +6638,7 @@ var __privateMethod = (obj, member, method) => {
               calculator
             });
             if (listAreaSize) {
-              drawListArea(helperContext, { areaSize: listAreaSize });
+              drawListArea(overlayContext, { areaSize: listAreaSize });
             }
           }
         }
@@ -6496,8 +6660,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 +6671,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 +6800,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 +6844,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 +6878,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 +6925,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 +6970,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 +7021,7 @@ var __privateMethod = (obj, member, method) => {
       list.push(rulerScale);
       index++;
     }
-    return list;
+    return { list, rulerUnit };
   }
   function calcXRulerScaleList(opts) {
     const { viewScaleInfo, viewSizeInfo } = opts;
@@ -6946,7 +7133,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 +7221,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 +7247,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 +7424,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 +7480,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 +7493,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 +7506,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 +7621,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 +7841,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 || {} });
           }
         }
       },