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

package/dist/index.global.js

@@ -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;
@@ -2465,7 +2520,7 @@ var __privateMethod = (obj, member, method) => {
   }
   function drawRect(ctx, elem, opts) {
     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, {
@@ -2601,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;
@@ -2616,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;
@@ -2623,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") {
@@ -2635,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,
@@ -2680,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;
@@ -2710,14 +2798,27 @@ 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);
             });
           }
         }
       });
     });
   }
+  var __rest = function(s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  };
   function drawPath(ctx, elem, opts) {
+    var _a, _b;
     const { detail } = elem;
     const { originX, originY, originW, originH, fillRule } = detail;
     const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
@@ -2728,11 +2829,31 @@ var __privateMethod = (obj, member, method) => {
     const viewOriginY = originY * scaleH;
     const internalX = x2 - viewOriginX;
     const internalY = y2 - viewOriginY;
+    const _c = elem.detail, restDetail = __rest(_c, ["clipPath", "clipPathStrokeColor", "clipPathStrokeWidth"]);
     const scaleNum = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+    let boxViewElem = Object.assign({}, viewElem);
+    boxViewElem.detail = restDetail;
+    let boxOriginElem = Object.assign({}, elem);
+    boxOriginElem.detail = restDetail;
+    if (detail.fill && detail.fill !== "string" && ((_b = (_a = detail.fill) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.includes("gradient"))) {
+      boxViewElem = Object.assign(Object.assign({}, viewElem), {
+        detail: Object.assign(Object.assign({}, viewElem.detail), {
+          background: detail.fill,
+          clipPath: {
+            commands: detail.commands,
+            originX,
+            originY,
+            originW,
+            originH
+          }
+        })
+      });
+      boxOriginElem.detail = Object.assign({}, boxViewElem.detail);
+    }
     rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
-      drawBox(ctx, viewElem, {
-        originElem: elem,
+      drawBox(ctx, boxViewElem, {
+        originElem: boxOriginElem,
         calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
         viewScaleInfo,
         viewSizeInfo,
@@ -2748,7 +2869,13 @@ var __privateMethod = (obj, member, method) => {
               const pathStr = generateSVGPath(detail.commands || []);
               const path2d = new Path2D(pathStr);
               if (detail.fill) {
-                ctx.fillStyle = detail.fill;
+                if (typeof detail.fill === "string") {
+                  ctx.fillStyle = detail.fill;
+                } else {
+                  ctx.fillStyle = "transparent";
+                }
+              }
+              if (detail.fill) {
                 ctx.fill(path2d, fillRule);
               }
               if (detail.stroke && detail.strokeWidth !== 0) {
@@ -2765,14 +2892,19 @@ var __privateMethod = (obj, member, method) => {
       });
     });
   }
+  const visiableMinSize = 0.4;
   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;
     }
     const { w: w2, h: h2 } = elem;
     const { scale } = opts.viewScaleInfo;
-    if (scale < 1 && (w2 * scale < 1 || h2 * scale < 1) || opts.parentOpacity === 0) {
+    if (scale < 1 && (w2 * scale < visiableMinSize || h2 * scale < visiableMinSize) || 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 {
@@ -2820,7 +2952,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;
@@ -2917,7 +3049,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;
@@ -2931,7 +3063,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,
@@ -2956,6 +3088,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) {
@@ -3222,7 +3363,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 = {
@@ -3236,8 +3377,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);
@@ -3665,7 +3808,8 @@ var __privateMethod = (obj, member, method) => {
     offsetLeft: 0,
     offsetRight: 0,
     offsetTop: 0,
-    offsetBottom: 0
+    offsetBottom: 0,
+    overrideElementMap: null
   };
   class Sharer {
     constructor() {
@@ -3733,6 +3877,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) {
@@ -4405,7 +4555,8 @@ var __privateMethod = (obj, member, method) => {
   const keyGroupQueue = Symbol(`${key$3}_groupQueue`);
   const keyGroupQueueVertexesList = Symbol(`${key$3}_groupQueueVertexesList`);
   const keyIsMoving = Symbol(`${key$3}_isMoving`);
-  const keyEnableSelectInGroup = Symbol(`${key$3}_canSelectInGroup`);
+  const keyEnableSelectInGroup = Symbol(`${key$3}_enableSelectInGroup`);
+  const keyEnableSnapToGrid = Symbol(`${key$3}_enableSnapToGrid`);
   const selectWrapperBorderWidth = 2;
   const resizeControllerBorderWidth = 4;
   const areaBorderWidth = 1;
@@ -4416,6 +4567,7 @@ var __privateMethod = (obj, member, method) => {
   const middlewareEventSelect = "@middleware/select";
   const middlewareEventSelectClear = "@middleware/select-clear";
   const middlewareEventSelectInGroup = "@middleware/select-in-group";
+  const middlewareEventSnapToGrid = "@middleware/snap-to-grid";
   function drawVertexes(ctx, vertexes, opts) {
     const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
     ctx.setLineDash([]);
@@ -5669,7 +5821,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");
@@ -5692,8 +5844,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 = [];
@@ -5783,11 +5951,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";
@@ -5876,6 +6044,7 @@ var __privateMethod = (obj, member, method) => {
     let prevPoint = null;
     let inBusyMode = null;
     sharer.setSharedStorage(keyActionType, null);
+    sharer.setSharedStorage(keyEnableSnapToGrid, true);
     const getActiveElements = () => {
       return sharer.getSharedStorage(keySelectedElementList);
     };
@@ -5988,6 +6157,9 @@ var __privateMethod = (obj, member, method) => {
       clear();
       viewer.drawFrame();
     };
+    const setSnapToSnapCallback = (e) => {
+      sharer.setSharedStorage(keyEnableSnapToGrid, !!e.enable);
+    };
     const selectInGroupCallback = (e) => {
       sharer.setSharedStorage(keyEnableSelectInGroup, !!e.enable);
     };
@@ -5997,11 +6169,13 @@ var __privateMethod = (obj, member, method) => {
         eventHub.on(middlewareEventSelect, selectCallback);
         eventHub.on(middlewareEventSelectClear, selectClearCallback);
         eventHub.on(middlewareEventSelectInGroup, selectInGroupCallback);
+        eventHub.on(middlewareEventSnapToGrid, setSnapToSnapCallback);
       },
       disuse() {
         eventHub.off(middlewareEventSelect, selectCallback);
         eventHub.off(middlewareEventSelectClear, selectClearCallback);
         eventHub.off(middlewareEventSelectInGroup, selectInGroupCallback);
+        eventHub.off(middlewareEventSnapToGrid, setSnapToSnapCallback);
       },
       hover: (e) => {
         var _a, _b, _c, _d, _e;
@@ -6169,32 +6343,35 @@ var __privateMethod = (obj, member, method) => {
         const resizeType = sharer.getSharedStorage(keyResizeType);
         const actionType = sharer.getSharedStorage(keyActionType);
         const groupQueue = sharer.getSharedStorage(keyGroupQueue);
+        const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
         if (actionType === "drag") {
           inBusyMode = "drag";
           if (data && (elems == null ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) == null ? void 0 : _a.operations) == null ? void 0 : _b.lock) !== true) {
             const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
             let totalMoveX = calculator.toGridNum(moveX / scale);
             let totalMoveY = calculator.toGridNum(moveY / scale);
-            const referenceInfo = calcReferenceInfo(elems[0].uuid, {
-              calculator,
-              data,
-              groupQueue,
-              viewScaleInfo,
-              viewSizeInfo
-            });
-            try {
-              if (referenceInfo) {
-                if (is.x(referenceInfo.offsetX) && referenceInfo.offsetX !== null) {
-                  totalMoveX = calculator.toGridNum(totalMoveX + referenceInfo.offsetX);
-                }
-                if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
-                  totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
+            if (enableSnapToGrid === true) {
+              const referenceInfo = calcReferenceInfo(elems[0].uuid, {
+                calculator,
+                data,
+                groupQueue,
+                viewScaleInfo,
+                viewSizeInfo
+              });
+              try {
+                if (referenceInfo) {
+                  if (is.x(referenceInfo.offsetX) && referenceInfo.offsetX !== null) {
+                    totalMoveX = calculator.toGridNum(totalMoveX + referenceInfo.offsetX);
+                  }
+                  if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
+                    totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
+                  }
+                  sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
+                  sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
                 }
-                sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
-                sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
+              } catch (err) {
+                console.error(err);
               }
-            } catch (err) {
-              console.error(err);
             }
             elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
             elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
@@ -6390,7 +6567,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;
         }
@@ -6407,11 +6584,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()
           });
         }
@@ -6434,6 +6611,7 @@ var __privateMethod = (obj, member, method) => {
         const groupQueue = sharedStore[keyGroupQueue];
         const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
         const isMoving = sharedStore[keyIsMoving];
+        const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
         const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
         const selectedElementController = elem ? calcElementSizeController(elem, {
           groupQueue,
@@ -6467,10 +6645,12 @@ var __privateMethod = (obj, member, method) => {
             if (actionType === "drag") {
               const xLines = sharer2.getSharedStorage(keySelectedReferenceXLines);
               const yLines = sharer2.getSharedStorage(keySelectedReferenceYLines);
-              drawReferenceLines(overlayContext, {
-                xLines,
-                yLines
-              });
+              if (enableSnapToGrid === true) {
+                drawReferenceLines(overlayContext, {
+                  xLines,
+                  yLines
+                });
+              }
             }
           }
         } else {
@@ -6498,10 +6678,12 @@ var __privateMethod = (obj, member, method) => {
             if (actionType === "drag") {
               const xLines = sharer2.getSharedStorage(keySelectedReferenceXLines);
               const yLines = sharer2.getSharedStorage(keySelectedReferenceYLines);
-              drawReferenceLines(overlayContext, {
-                xLines,
-                yLines
-              });
+              if (enableSnapToGrid === true) {
+                drawReferenceLines(overlayContext, {
+                  xLines,
+                  yLines
+                });
+              }
             }
           } else if (actionType === "area" && areaStart && areaEnd) {
             drawArea(overlayContext, { start: areaStart, end: areaEnd });
@@ -7858,6 +8040,7 @@ var __privateMethod = (obj, member, method) => {
   exports.middlewareEventSelect = middlewareEventSelect;
   exports.middlewareEventSelectClear = middlewareEventSelectClear;
   exports.middlewareEventSelectInGroup = middlewareEventSelectInGroup;
+  exports.middlewareEventSnapToGrid = middlewareEventSnapToGrid;
   exports.middlewareEventTextChange = middlewareEventTextChange;
   exports.middlewareEventTextEdit = middlewareEventTextEdit;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });