@idraw/core 0.4.0-alpha.4 → 0.4.0-alpha.6

package/dist/index.global.js

@@ -1,5 +1,28 @@
 var iDrawCore = function(exports) {
-  "use strict";
+  "use strict";var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+
+  var _board, _container, _initContainer, initContainer_fn;
   function throttle(fn, timeout) {
     let timer = -1;
     return function(...args) {
@@ -986,6 +1009,32 @@ var iDrawCore = function(exports) {
     _scan(uuid, elements);
     return groupQueue;
   }
+  function findElementsFromListByPositions(positions, list) {
+    const elements = [];
+    positions.forEach((pos) => {
+      const elem = findElementFromListByPosition(pos, list);
+      if (elem) {
+        elements.push(elem);
+      }
+    });
+    return elements;
+  }
+  function findElementFromListByPosition(position, list) {
+    let result = null;
+    let tempList = list;
+    for (let i = 0; i < position.length; i++) {
+      const pos = position[i];
+      const item = tempList[pos];
+      if (i < position.length - 1 && item.type === "group") {
+        tempList = item.detail.children;
+      } else if (i === position.length - 1) {
+        result = item;
+      } else {
+        break;
+      }
+    }
+    return result;
+  }
   function checkRectIntersect(rect1, rect2) {
     const react1MinX = rect1.x;
     const react1MinY = rect1.y;
@@ -997,6 +1046,25 @@ var iDrawCore = function(exports) {
     const react2MaxY = rect2.y + rect2.h;
     return react1MinX <= react2MaxX && react1MaxX >= react2MinX && react1MinY <= react2MaxY && react1MaxY >= react2MinY;
   }
+  function calcViewScaleInfo(info, opts) {
+    const { scale, offsetX, offsetY } = info;
+    const { viewSizeInfo } = opts;
+    const { width, height, contextWidth, contextHeight } = viewSizeInfo;
+    const w2 = contextWidth * scale;
+    const h2 = contextHeight * scale;
+    const offsetLeft = 0 - offsetX * scale;
+    const offsetTop = 0 - offsetY * scale;
+    const offsetRight = width - (w2 + offsetLeft / scale);
+    const offsetBottom = height - (h2 + offsetTop / scale);
+    const newScaleInfo = {
+      scale,
+      offsetLeft,
+      offsetTop,
+      offsetRight,
+      offsetBottom
+    };
+    return newScaleInfo;
+  }
   function viewScale(opts) {
     const { scale, point, viewScaleInfo: prevViewScaleInfo } = opts;
     const { offsetLeft, offsetTop } = prevViewScaleInfo;
@@ -1364,7 +1432,8 @@ var iDrawCore = function(exports) {
       fontSize: 16,
       lineHeight: 20,
       fontFamily: "sans-serif",
-      fontWeight: 400
+      fontWeight: 400,
+      overflow: "hidden"
     };
     return config;
   }
@@ -1386,7 +1455,7 @@ var iDrawCore = function(exports) {
     }
     let bw = 0;
     if (typeof borderWidth2 === "number") {
-      bw = (borderWidth2 || 1) * scale;
+      bw = (borderWidth2 || 0) * scale;
     }
     if (boxSizing === "border-box") {
       x2 = viewElem.x + bw / 2;
@@ -1404,6 +1473,11 @@ var iDrawCore = function(exports) {
       w2 = viewElem.w;
       h2 = viewElem.h;
     }
+    w2 = Math.max(w2, 1);
+    h2 = Math.max(h2, 1);
+    radiusList = radiusList.map((r) => {
+      return Math.min(r, w2 / 2, h2 / 2);
+    });
     return {
       x: x2,
       y: y2,
@@ -1683,6 +1757,11 @@ var iDrawCore = function(exports) {
       } else {
         ctx.lineCap = "square";
       }
+      w2 = Math.max(w2, 1);
+      h2 = Math.max(h2, 1);
+      radiusList = radiusList.map((r) => {
+        return Math.min(r, w2 / 2, h2 / 2);
+      });
       ctx.setLineDash(viewBorderDash);
       ctx.lineWidth = bw;
       ctx.beginPath();
@@ -1807,6 +1886,7 @@ var iDrawCore = function(exports) {
                   viewSizeInfo
                 });
                 ctx.save();
+                ctx.fillStyle = "transparent";
                 ctx.beginPath();
                 ctx.moveTo(x3 + radiusList[0], y3);
                 ctx.arcTo(x3 + w3, y3, x3 + w3, y3 + h3, radiusList[1]);
@@ -2059,49 +2139,65 @@ var iDrawCore = function(exports) {
     const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo);
     const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 });
     rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
-      drawBox(ctx, viewElem, {
-        originElem: elem,
-        calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+      drawBoxShadow(ctx, viewElem, {
         viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
-          if (Array.isArray(elem.detail.children)) {
-            const { parentElementSize: parentSize } = opts;
-            const newParentSize = {
-              x: parentSize.x + elem.x,
-              y: parentSize.y + elem.y,
-              w: elem.w || parentSize.w,
-              h: elem.h || parentSize.h,
-              angle: elem.angle
-            };
-            const { calculator: calculator2 } = opts;
-            if (elem.detail.overflow === "hidden") {
-              ctx.save();
-              ctx.beginPath();
-              ctx.moveTo(x2, y2);
-              ctx.lineTo(x2 + w2, y2);
-              ctx.lineTo(x2 + w2, y2 + h2);
-              ctx.lineTo(x2, y2 + h2);
-              ctx.closePath();
-              ctx.clip();
-            }
-            for (let i = 0; i < elem.detail.children.length; i++) {
-              let child = elem.detail.children[i];
-              child = Object.assign(Object.assign({}, child), {
-                x: newParentSize.x + child.x,
-                y: newParentSize.y + child.y
+          drawBox(ctx, viewElem, {
+            originElem: elem,
+            calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+              const { x: x3, y: y3, w: w3, h: h3, radiusList } = calcViewBoxSize(viewElem, {
+                viewScaleInfo,
+                viewSizeInfo
               });
-              if (!calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
-                continue;
+              if (elem.detail.overflow === "hidden") {
+                ctx.save();
+                ctx.fillStyle = "transparent";
+                ctx.beginPath();
+                ctx.moveTo(x3 + radiusList[0], y3);
+                ctx.arcTo(x3 + w3, y3, x3 + w3, y3 + h3, radiusList[1]);
+                ctx.arcTo(x3 + w3, y3 + h3, x3, y3 + h3, radiusList[2]);
+                ctx.arcTo(x3, y3 + h3, x3, y3, radiusList[3]);
+                ctx.arcTo(x3, y3, x3 + w3, y3, radiusList[0]);
+                ctx.closePath();
+                ctx.fill();
+                ctx.clip();
               }
-              try {
-                drawElement(ctx, child, Object.assign({}, opts));
-              } catch (err) {
-                console.error(err);
+              if (Array.isArray(elem.detail.children)) {
+                const { parentElementSize: parentSize } = opts;
+                const newParentSize = {
+                  x: parentSize.x + elem.x,
+                  y: parentSize.y + elem.y,
+                  w: elem.w || parentSize.w,
+                  h: elem.h || parentSize.h,
+                  angle: elem.angle
+                };
+                const { calculator: calculator2 } = opts;
+                for (let i = 0; i < elem.detail.children.length; i++) {
+                  let child = elem.detail.children[i];
+                  child = Object.assign(Object.assign({}, child), {
+                    x: newParentSize.x + child.x,
+                    y: newParentSize.y + child.y
+                  });
+                  if (!calculator2.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
+                    continue;
+                  }
+                  try {
+                    drawElement(ctx, child, Object.assign({}, opts));
+                  } catch (err) {
+                    console.error(err);
+                  }
+                }
+              }
+              if (elem.detail.overflow === "hidden") {
+                ctx.globalAlpha = 1;
+                ctx.restore();
               }
             }
-            ctx.restore();
-          }
+          });
         }
       });
     });
@@ -2710,6 +2806,14 @@ var iDrawCore = function(exports) {
       sharer.setActiveViewScaleInfo(viewScaleInfo);
       return viewScaleInfo;
     }
+    updateViewScaleInfo(opts) {
+      const { sharer } = this._opts;
+      const viewScaleInfo = calcViewScaleInfo(opts, {
+        viewSizeInfo: sharer.getActiveViewSizeInfo()
+      });
+      sharer.setActiveViewScaleInfo(viewScaleInfo);
+      return viewScaleInfo;
+    }
     resize(viewSize = {}) {
       const { sharer } = this._opts;
       const originViewSize = sharer.getActiveViewSizeInfo();
@@ -2730,7 +2834,7 @@ var iDrawCore = function(exports) {
       return newViewSize;
     }
   }
-  const frameTime = 16;
+  const throttleTime = 10;
   const LOCK_MODES = ["RULER"];
   class Board {
     constructor(opts) {
@@ -2753,7 +2857,6 @@ var iDrawCore = function(exports) {
       });
       this._opts = opts;
       this._sharer = sharer;
-      this._renderer = renderer;
       this._watcher = watcher;
       this._calculator = calculator;
       this._viewer = new Viewer({
@@ -2776,19 +2879,19 @@ var iDrawCore = function(exports) {
       this._watcher.on("pointEnd", this._handlePointEnd.bind(this));
       this._watcher.on("pointMove", throttle((e) => {
         this._handlePointMove(e);
-      }, frameTime));
+      }, throttleTime));
       this._watcher.on("hover", throttle((e) => {
         this._handleHover(e);
-      }, frameTime));
+      }, throttleTime));
       this._watcher.on("wheelX", throttle((e) => {
         this._handleWheelX(e);
-      }, frameTime));
+      }, throttleTime));
       this._watcher.on("wheelY", throttle((e) => {
         this._handleWheelY(e);
-      }, frameTime));
+      }, throttleTime));
       this._watcher.on("wheelScale", throttle((e) => {
         this._handleWheelScale(e);
-      }, frameTime));
+      }, throttleTime));
       this._watcher.on("scrollX", this._handleScrollX.bind(this));
       this._watcher.on("scrollY", this._handleScrollY.bind(this));
       this._watcher.on("resize", this._handleResize.bind(this));
@@ -2972,9 +3075,9 @@ var iDrawCore = function(exports) {
       return data;
     }
     use(middleware) {
-      const { viewContent } = this._opts;
+      const { viewContent, container } = this._opts;
       const { _sharer: sharer, _viewer: viewer, _calculator: calculator, _eventHub: eventHub } = this;
-      const obj = middleware({ viewContent, sharer, viewer, calculator, eventHub });
+      const obj = middleware({ viewContent, sharer, viewer, calculator, eventHub, container });
       this._middlewares.push(middleware);
       this._activeMiddlewareObjs.push(obj);
     }
@@ -2986,6 +3089,9 @@ var iDrawCore = function(exports) {
     scroll(opts) {
       return this._viewer.scroll(opts);
     }
+    updateViewScaleInfo(opts) {
+      return this._viewer.updateViewScaleInfo(opts);
+    }
     resize(newViewSize) {
       const viewSize = this._viewer.resize(newViewSize);
       const { width, height, devicePixelRatio } = newViewSize;
@@ -3958,16 +4064,155 @@ var iDrawCore = function(exports) {
       moveY
     };
   }
+  const middlewareEventTextEdit = "@middleware/text-edit";
+  const defaultElementDetail = getDefaultElementDetailConfig();
+  const MiddlewareTextEditor = (opts) => {
+    const key2 = "SELECT";
+    const { eventHub, viewContent, viewer } = opts;
+    const canvas = viewContent.boardContext.canvas;
+    const textarea = document.createElement("textarea");
+    const canvasWrapper = document.createElement("div");
+    const container = opts.container || document.body;
+    const mask = document.createElement("div");
+    let activeElem = null;
+    canvasWrapper.appendChild(textarea);
+    canvasWrapper.style.position = "absolute";
+    mask.appendChild(canvasWrapper);
+    mask.style.position = "fixed";
+    mask.style.top = "0";
+    mask.style.bottom = "0";
+    mask.style.left = "0";
+    mask.style.right = "0";
+    mask.style.display = "none";
+    container.appendChild(mask);
+    const showTextArea = (e) => {
+      resetCanvasWrapper();
+      resetTextArea(e);
+      mask.style.display = "block";
+    };
+    const hideTextArea = () => {
+      mask.style.display = "none";
+      activeElem = null;
+    };
+    const getCanvasRect = () => {
+      const clientRect = canvas.getBoundingClientRect();
+      const { left, top, width, height } = clientRect;
+      return { left, top, width, height };
+    };
+    const createBox = (opts2) => {
+      const { size, parent } = opts2;
+      const div = document.createElement("div");
+      const { x: x2, y: y2, w: w2, h: h2 } = size;
+      const angle2 = limitAngle(size.angle || 0);
+      div.style.position = "absolute";
+      div.style.left = `${x2}px`;
+      div.style.top = `${y2}px`;
+      div.style.width = `${w2}px`;
+      div.style.height = `${h2}px`;
+      div.style.transform = `rotate(${angle2}deg)`;
+      parent.appendChild(div);
+      return div;
+    };
+    const resetTextArea = (e) => {
+      const { viewScaleInfo, element, groupQueue } = e;
+      const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+      if (canvasWrapper.children) {
+        Array.from(canvasWrapper.children).forEach((child) => {
+          child.remove();
+        });
+      }
+      let parent = canvasWrapper;
+      for (let i = 0; i < groupQueue.length; i++) {
+        const group = groupQueue[i];
+        const { x: x2, y: y2, w: w2, h: h2 } = group;
+        const angle2 = limitAngle(group.angle || 0);
+        const size = {
+          x: x2 * scale,
+          y: y2 * scale,
+          w: w2 * scale,
+          h: h2 * scale,
+          angle: angle2
+        };
+        if (i === 0) {
+          size.x += offsetLeft;
+          size.y += offsetTop;
+        }
+        parent = createBox({ size, parent });
+      }
+      const detail = {
+        ...defaultElementDetail,
+        ...element.detail
+      };
+      textarea.style.position = "absolute";
+      textarea.style.left = `${element.x * scale}px`;
+      textarea.style.top = `${element.y * scale}px`;
+      textarea.style.width = `${element.w * scale}px`;
+      textarea.style.height = `${element.h * scale}px`;
+      textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
+      textarea.style.border = "none";
+      textarea.style.resize = "none";
+      textarea.style.overflow = "hidden";
+      textarea.style.wordBreak = "break-all";
+      textarea.style.background = "#FFFFFF";
+      textarea.style.color = "#333333";
+      textarea.style.fontSize = `${detail.fontSize * scale}px`;
+      textarea.style.lineHeight = `${detail.lineHeight * scale}px`;
+      textarea.style.fontFamily = detail.fontFamily;
+      textarea.style.fontWeight = `${detail.fontWeight}`;
+      textarea.value = detail.text || "";
+      parent.appendChild(textarea);
+    };
+    const resetCanvasWrapper = () => {
+      const { left, top, width, height } = getCanvasRect();
+      canvasWrapper.style.position = "absolute";
+      canvasWrapper.style.overflow = "hidden";
+      canvasWrapper.style.top = `${top}px`;
+      canvasWrapper.style.left = `${left}px`;
+      canvasWrapper.style.width = `${width}px`;
+      canvasWrapper.style.height = `${height}px`;
+    };
+    mask.addEventListener("click", () => {
+      hideTextArea();
+    });
+    textarea.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    textarea.addEventListener("input", (e) => {
+      if (activeElem) {
+        activeElem.detail.text = e.target.value || "";
+        viewer.drawFrame();
+      }
+    });
+    textarea.addEventListener("blur", () => {
+      hideTextArea();
+    });
+    eventHub.on(middlewareEventTextEdit, (e) => {
+      var _a;
+      if ((e == null ? void 0 : e.element) && ((_a = e == null ? void 0 : e.element) == null ? void 0 : _a.type) === "text") {
+        activeElem = e.element;
+      }
+      showTextArea(e);
+    });
+    return {
+      mode: key2,
+      isDefault: true
+    };
+  };
   const middlewareEventSelect = "@middleware/select";
   const MiddlewareSelector = (opts) => {
     const { viewer, sharer, viewContent, calculator, eventHub } = opts;
     const { helperContext } = viewContent;
     let prevPoint = null;
     let inBusyMode = null;
-    eventHub.on(middlewareEventSelect, ({ uuids }) => {
+    eventHub.on(middlewareEventSelect, ({ uuids, positions }) => {
+      let elements = [];
       const actionType = sharer.getSharedStorage(keyActionType);
       const data = sharer.getActiveStorage("data");
-      const elements = findElementsFromList(uuids, (data == null ? void 0 : data.elements) || []);
+      if (positions && Array.isArray(positions)) {
+        elements = findElementsFromListByPositions(positions, (data == null ? void 0 : data.elements) || []);
+      } else {
+        elements = findElementsFromList(uuids, (data == null ? void 0 : data.elements) || []);
+      }
       let needRefresh = false;
       if (!actionType && elements.length === 1) {
         sharer.setSharedStorage(keyActionType, "select");
@@ -4331,7 +4576,7 @@ var iDrawCore = function(exports) {
         viewer.drawFrame();
       },
       doubleClick(e) {
-        var _a;
+        var _a, _b;
         const target = getPointTarget(e.point, pointTargetBaseOptions());
         if (target.elements.length === 1 && ((_a = target.elements[0]) == null ? void 0 : _a.type) === "group") {
           const pushResult = pushGroupQueue(target.elements[0]);
@@ -4340,6 +4585,12 @@ var iDrawCore = function(exports) {
             viewer.drawFrame();
             return;
           }
+        } else if (target.elements.length === 1 && ((_b = target.elements[0]) == null ? void 0 : _b.type) === "text") {
+          eventHub.trigger(middlewareEventTextEdit, {
+            element: target.elements[0],
+            groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
+            viewScaleInfo: sharer.getActiveViewScaleInfo()
+          });
         }
         sharer.setSharedStorage(keyActionType, null);
       },
@@ -4445,19 +4696,19 @@ var iDrawCore = function(exports) {
     const { width, height } = viewSizeInfo;
     const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
     const sliderMinSize = scrollerLineWidth * 2.5;
-    const lineSize = scrollerLineWidth;
+    const lineSize2 = scrollerLineWidth;
     let xSize = 0;
     let ySize = 0;
-    xSize = Math.max(sliderMinSize, width - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
+    xSize = Math.max(sliderMinSize, width - lineSize2 * 2 - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
     if (xSize >= width) {
       xSize = width;
     }
-    ySize = Math.max(sliderMinSize, height - (Math.abs(offsetTop) + Math.abs(offsetBottom)));
+    ySize = Math.max(sliderMinSize, height - lineSize2 * 2 - (Math.abs(offsetTop) + Math.abs(offsetBottom)));
     if (ySize >= height) {
       ySize = height;
     }
-    const xStart = lineSize;
-    const xEnd = width - xSize - lineSize;
+    const xStart = lineSize2;
+    const xEnd = width - xSize - lineSize2;
     let translateX = xStart;
     if (offsetLeft > 0) {
       translateX = xStart;
@@ -4467,8 +4718,8 @@ var iDrawCore = function(exports) {
       translateX = xStart + (width - xSize) * Math.abs(offsetLeft) / (Math.abs(offsetLeft) + Math.abs(offsetRight));
       translateX = Math.min(Math.max(0, translateX - xStart), width - xSize);
     }
-    const yStart = lineSize;
-    const yEnd = height - ySize - lineSize;
+    const yStart = lineSize2;
+    const yEnd = height - ySize - lineSize2;
     let translateY = yStart;
     if (offsetTop > 0) {
       translateY = yStart;
@@ -4480,18 +4731,18 @@ var iDrawCore = function(exports) {
     }
     const xThumbRect = {
       x: translateX,
-      y: height - lineSize,
+      y: height - lineSize2,
       w: xSize,
-      h: lineSize
+      h: lineSize2
     };
     const yThumbRect = {
-      x: width - lineSize,
+      x: width - lineSize2,
       y: translateY,
-      w: lineSize,
+      w: lineSize2,
       h: ySize
     };
     const scrollWrapper = {
-      lineSize,
+      lineSize: lineSize2,
       xSize,
       ySize,
       translateY,
@@ -4696,6 +4947,8 @@ var iDrawCore = function(exports) {
   const MiddlewareScaler = (opts) => {
     const key2 = "SCALE";
     const { viewer, sharer, eventHub } = opts;
+    const maxScale = 50;
+    const minScale = 0.05;
     return {
       mode: key2,
       isDefault: true,
@@ -4708,6 +4961,9 @@ var iDrawCore = function(exports) {
         } else if (deltaY > 0) {
           newScaleNum = scale * 0.9;
         }
+        if (newScaleNum < minScale || newScaleNum > maxScale) {
+          return;
+        }
         const { moveX, moveY } = viewer.scale({ scale: newScaleNum, point });
         viewer.scroll({ moveX, moveY });
         viewer.drawFrame();
@@ -4724,14 +4980,15 @@ var iDrawCore = function(exports) {
   const fontFamily = "monospace";
   const fontSize = 10;
   const fontWeight = 100;
-  const gridColor = "#AAAAAA30";
-  const gridKeyColor = "#AAAAAA70";
+  const gridColor = "#AAAAAA20";
+  const gridKeyColor = "#AAAAAA40";
+  const lineSize = 1;
   function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
     const list = [];
     let rulerUnit = 10;
     rulerUnit = formatNumber(rulerUnit / scale, { decimalPlaces: 0 });
-    rulerUnit = Math.max(1, Math.min(rulerUnit, 1e3));
+    rulerUnit = Math.max(10, Math.min(rulerUnit, 1e3));
     const rulerKeyUnit = rulerUnit * 10;
     const rulerSubKeyUnit = rulerUnit * 5;
     let index = 0;
@@ -4794,6 +5051,8 @@ var iDrawCore = function(exports) {
       ctx.moveTo(item.position, scaleDrawStart);
       ctx.lineTo(item.position, item.isKeyNum ? keyScaleDrawEnd : item.isSubKeyNum ? subKeyScaleDrawEnd : scaleDrawEnd);
       ctx.closePath();
+      ctx.lineWidth = lineSize;
+      ctx.setLineDash([]);
       ctx.fillStyle = scaleColor;
       ctx.stroke();
       if (item.isKeyNum) {
@@ -4825,6 +5084,8 @@ var iDrawCore = function(exports) {
       ctx.lineTo(item.isKeyNum ? keyScaleDrawEnd : item.isSubKeyNum ? subKeyScaleDrawEnd : scaleDrawEnd, item.position);
       ctx.closePath();
       ctx.fillStyle = scaleColor;
+      ctx.lineWidth = lineSize;
+      ctx.setLineDash([]);
       ctx.stroke();
       if (item.showNum === true) {
         const textX = fontStart;
@@ -4857,6 +5118,8 @@ var iDrawCore = function(exports) {
     ctx.closePath();
     ctx.fillStyle = background;
     ctx.fill();
+    ctx.lineWidth = lineSize;
+    ctx.setLineDash([]);
     ctx.strokeStyle = borderColor;
     ctx.stroke();
   }
@@ -4873,8 +5136,9 @@ var iDrawCore = function(exports) {
       } else {
         ctx.strokeStyle = gridColor;
       }
-      ctx.lineWidth = 1;
       ctx.closePath();
+      ctx.lineWidth = lineSize;
+      ctx.setLineDash([]);
       ctx.stroke();
     }
     for (let i = 0; i < yList.length; i++) {
@@ -4897,10 +5161,16 @@ var iDrawCore = function(exports) {
     const key2 = "RULE";
     const { viewContent, viewer, eventHub } = opts;
     const { helperContext, underContext } = viewContent;
-    let showRuler = true;
+    let show = true;
+    let showGrid = true;
     eventHub.on(middlewareEventRuler, (e) => {
       if (typeof (e == null ? void 0 : e.show) === "boolean") {
-        showRuler = e.show;
+        show = e.show;
+      }
+      if (typeof (e == null ? void 0 : e.showGrid) === "boolean") {
+        showGrid = e.showGrid;
+      }
+      if (typeof (e == null ? void 0 : e.show) === "boolean" || typeof (e == null ? void 0 : e.showGrid) === "boolean") {
         viewer.drawFrame();
       }
     });
@@ -4908,7 +5178,7 @@ var iDrawCore = function(exports) {
       mode: key2,
       isDefault: true,
       beforeDrawFrame: ({ snapshot }) => {
-        if (showRuler === true) {
+        if (show === true) {
           const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
           const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
           drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
@@ -4916,27 +5186,33 @@ var iDrawCore = function(exports) {
           drawXRuler(helperContext, { scaleList: xList });
           const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
           drawYRuler(helperContext, { scaleList: yList });
-          drawUnderGrid(underContext, {
-            xList,
-            yList,
-            viewScaleInfo,
-            viewSizeInfo
-          });
+          if (showGrid === true) {
+            drawUnderGrid(underContext, {
+              xList,
+              yList,
+              viewScaleInfo,
+              viewSizeInfo
+            });
+          }
         }
       }
     };
   };
   class Core {
     constructor(container, opts) {
+      __privateAdd(this, _initContainer);
+      __privateAdd(this, _board, void 0);
+      // #opts: CoreOptions;
+      // #canvas: HTMLCanvasElement;
+      __privateAdd(this, _container, void 0);
       const { devicePixelRatio = 1, width, height } = opts;
-      this._opts = opts;
-      this._container = container;
+      __privateSet(this, _container, container);
       const canvas = document.createElement("canvas");
-      this._canvas = canvas;
+      __privateMethod(this, _initContainer, initContainer_fn).call(this);
       container.appendChild(canvas);
       const ctx = canvas.getContext("2d");
       const viewContent = createBoardContexts(ctx, { devicePixelRatio });
-      const board = new Board({ viewContent });
+      const board = new Board({ viewContent, container });
       const sharer = board.getSharer();
       sharer.setActiveViewSizeInfo({
         width,
@@ -4945,7 +5221,7 @@ var iDrawCore = function(exports) {
         contextWidth: width,
         contextHeight: height
       });
-      this._board = board;
+      __privateSet(this, _board, board);
       this.resize(sharer.getActiveViewSizeInfo());
       const eventHub = board.getEventHub();
       new Cursor(container, {
@@ -4953,22 +5229,22 @@ var iDrawCore = function(exports) {
       });
     }
     use(middleware) {
-      this._board.use(middleware);
+      __privateGet(this, _board).use(middleware);
     }
     setData(data) {
       validateElements((data == null ? void 0 : data.elements) || []);
-      this._board.setData(data);
+      __privateGet(this, _board).setData(data);
     }
     getData() {
-      return this._board.getData();
+      return __privateGet(this, _board).getData();
     }
     scale(opts) {
-      this._board.scale(opts);
-      const viewer = this._board.getViewer();
+      __privateGet(this, _board).scale(opts);
+      const viewer = __privateGet(this, _board).getViewer();
       viewer.drawFrame();
     }
     resize(newViewSize) {
-      const { _board: board } = this;
+      const board = __privateGet(this, _board);
       const sharer = board.getSharer();
       const viewSizeInfo = sharer.getActiveViewSizeInfo();
       board.resize({
@@ -4977,29 +5253,54 @@ var iDrawCore = function(exports) {
       });
     }
     clear() {
-      this._board.clear();
+      __privateGet(this, _board).clear();
     }
     on(name, callback) {
-      const eventHub = this._board.getEventHub();
+      const eventHub = __privateGet(this, _board).getEventHub();
       eventHub.on(name, callback);
     }
     off(name, callback) {
-      const eventHub = this._board.getEventHub();
+      const eventHub = __privateGet(this, _board).getEventHub();
       eventHub.off(name, callback);
     }
     trigger(name, e) {
-      const eventHub = this._board.getEventHub();
+      const eventHub = __privateGet(this, _board).getEventHub();
       eventHub.trigger(name, e);
     }
+    getViewInfo() {
+      const board = __privateGet(this, _board);
+      const sharer = board.getSharer();
+      const viewSizeInfo = sharer.getActiveViewSizeInfo();
+      const viewScaleInfo = sharer.getActiveViewScaleInfo();
+      return {
+        viewSizeInfo,
+        viewScaleInfo
+      };
+    }
+    refresh() {
+      __privateGet(this, _board).getViewer().drawFrame();
+    }
+    updateViewScale(opts) {
+      __privateGet(this, _board).updateViewScaleInfo(opts);
+    }
   }
+  _board = new WeakMap();
+  _container = new WeakMap();
+  _initContainer = new WeakSet();
+  initContainer_fn = function() {
+    const container = __privateGet(this, _container);
+    container.style.position = "relative";
+  };
   exports.Core = Core;
   exports.MiddlewareRuler = MiddlewareRuler;
   exports.MiddlewareScaler = MiddlewareScaler;
   exports.MiddlewareScroller = MiddlewareScroller;
   exports.MiddlewareSelector = MiddlewareSelector;
+  exports.MiddlewareTextEditor = MiddlewareTextEditor;
   exports.middlewareEventRuler = middlewareEventRuler;
   exports.middlewareEventScale = middlewareEventScale;
   exports.middlewareEventSelect = middlewareEventSelect;
+  exports.middlewareEventTextEdit = middlewareEventTextEdit;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
 }({});