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

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) {
@@ -1348,7 +1371,7 @@ var iDrawCore = function(exports) {
   }
   function getDefaultElementDetailConfig() {
     const config = {
-      boxSizing: "border-box",
+      boxSizing: "center-line",
       borderWidth: 0,
       borderColor: "#000000",
       shadowColor: "#000000",
@@ -2972,9 +2995,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);
     }
@@ -3958,6 +3981,140 @@ 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;
@@ -4331,7 +4488,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 +4497,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 +4608,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 +4630,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 +4643,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 +4859,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 +4873,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();
@@ -4726,12 +4894,13 @@ var iDrawCore = function(exports) {
   const fontWeight = 100;
   const gridColor = "#AAAAAA30";
   const gridKeyColor = "#AAAAAA70";
+  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 +4963,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 +4996,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 +5030,8 @@ var iDrawCore = function(exports) {
     ctx.closePath();
     ctx.fillStyle = background;
     ctx.fill();
+    ctx.lineWidth = lineSize;
+    ctx.setLineDash([]);
     ctx.strokeStyle = borderColor;
     ctx.stroke();
   }
@@ -4873,8 +5048,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 +5073,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 +5090,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 +5098,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 +5133,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 +5141,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 +5165,38 @@ 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);
     }
   }
+  _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;
 }({});