@idraw/core 0.4.0-beta.13 → 0.4.0-beta.15

package/dist/index.global.js

@@ -378,12 +378,16 @@ var __privateMethod = (obj, member, method) => {
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
   };
   var _Context2D_ctx, _Context2D_opts;
+  const defaultFontSize = 12;
+  const defaultFontWeight = "400";
+  const defaultFontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`;
   class Context2D {
     constructor(ctx, opts) {
       _Context2D_ctx.set(this, void 0);
       _Context2D_opts.set(this, void 0);
       __classPrivateFieldSet$9(this, _Context2D_ctx, ctx, "f");
       __classPrivateFieldSet$9(this, _Context2D_opts, Object.assign({ devicePixelRatio: 1, offscreenCanvas: null }, opts), "f");
+      this.$resetFont();
     }
     $undoPixelRatio(num) {
       return num / __classPrivateFieldGet$9(this, _Context2D_opts, "f").devicePixelRatio;
@@ -406,6 +410,13 @@ var __privateMethod = (obj, member, method) => {
       strList.push(`${opts.fontFamily || "sans-serif"}`);
       __classPrivateFieldGet$9(this, _Context2D_ctx, "f").font = `${strList.join(" ")}`;
     }
+    $resetFont() {
+      this.$setFont({
+        fontSize: defaultFontSize,
+        fontFamily: defaultFontFamily,
+        fontWeight: defaultFontWeight
+      });
+    }
     $getOffscreenCanvas() {
       return __classPrivateFieldGet$9(this, _Context2D_opts, "f").offscreenCanvas;
     }
@@ -1215,6 +1226,32 @@ var __privateMethod = (obj, member, method) => {
     }
     return result;
   }
+  function getElementPositionFromList(uuid, elements) {
+    const result = [];
+    let over = false;
+    const _loop = (list) => {
+      var _a;
+      for (let i = 0; i < list.length; i++) {
+        if (over === true) {
+          break;
+        }
+        result.push(i);
+        const elem = list[i];
+        if (elem.uuid === uuid) {
+          over = true;
+          break;
+        } else if (elem.type === "group") {
+          _loop(((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
+        }
+        if (over) {
+          break;
+        }
+        result.pop();
+      }
+    };
+    _loop(elements);
+    return result;
+  }
   function checkRectIntersect(rect1, rect2) {
     const react1MinX = rect1.x;
     const react1MinY = rect1.y;
@@ -2107,11 +2144,18 @@ var __privateMethod = (obj, member, method) => {
       renderContent();
       ctx.restore();
     } else {
+      ctx.save();
+      ctx.shadowColor = "transparent";
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+      ctx.shadowBlur = 0;
       renderContent();
+      ctx.restore();
     }
   }
   function drawCircle(ctx, elem, opts) {
     const { detail, angle: angle2 } = elem;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { background: background2 = "#000000", borderColor: borderColor2 = "#000000", boxSizing, borderWidth: borderWidth2 = 0 } = detail;
     let bw = 0;
     if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
@@ -2119,7 +2163,7 @@ var __privateMethod = (obj, member, method) => {
     } else if (Array.isArray(borderWidth2) && typeof borderWidth2[0] === "number" && borderWidth2[0] > 0) {
       bw = borderWidth2[0];
     }
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    bw = bw * viewScaleInfo.scale;
     const { x: x2, y: y2, w: w2, h: h2 } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || 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 }, () => {
@@ -2146,12 +2190,12 @@ var __privateMethod = (obj, member, method) => {
           if (a >= 0 && b >= 0) {
             const opacity = getOpacity(viewElem) * parentOpacity;
             ctx.globalAlpha = opacity;
-            if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
-              const ba = borderWidth2 / 2 + a;
-              const bb = borderWidth2 / 2 + b;
+            if (typeof bw === "number" && bw > 0) {
+              const ba = bw / 2 + a;
+              const bb = bw / 2 + b;
               ctx.beginPath();
               ctx.strokeStyle = borderColor2;
-              ctx.lineWidth = borderWidth2;
+              ctx.lineWidth = bw;
               ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
               ctx.closePath();
               ctx.stroke();
@@ -2786,6 +2830,9 @@ var __privateMethod = (obj, member, method) => {
   }, _Loader_loadResource = function _Loader_loadResource2(element, assets) {
     const item = __classPrivateFieldGet$6(this, _Loader_instances, "m", _Loader_createLoadItem).call(this, element);
     const assetId = getAssetIdFromElement(element);
+    if (__classPrivateFieldGet$6(this, _Loader_currentLoadItemMap, "f")[assetId]) {
+      return;
+    }
     __classPrivateFieldGet$6(this, _Loader_currentLoadItemMap, "f")[assetId] = item;
     const loadFunc = __classPrivateFieldGet$6(this, _Loader_loadFuncMap, "f")[element.type];
     if (typeof loadFunc === "function" && !__classPrivateFieldGet$6(this, _Loader_hasDestroyed, "f")) {
@@ -2921,7 +2968,8 @@ var __privateMethod = (obj, member, method) => {
     loader.on("load", (e) => {
       this.trigger("load", e);
     });
-    loader.on("error", () => {
+    loader.on("error", (e) => {
+      console.error(e);
     });
   };
   var __classPrivateFieldSet$4 = function(receiver, state, value, kind, f) {
@@ -3598,6 +3646,9 @@ var __privateMethod = (obj, member, method) => {
     __classPrivateFieldGet(this, _Board_watcher, "f").on("scrollY", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollY).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("resize", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleResize).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("doubleClick", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleDoubleClick).bind(this));
+    __classPrivateFieldGet(this, _Board_renderer, "f").on("load", () => {
+      __classPrivateFieldGet(this, _Board_eventHub, "f").trigger("loadResource");
+    });
   }, _Board_handlePointStart = function _Board_handlePointStart2(e) {
     var _a;
     for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
@@ -3884,6 +3935,7 @@ var __privateMethod = (obj, member, method) => {
   const keySelectedElementController = Symbol(`${key$2}_selectedElementController`);
   const keyGroupQueue = Symbol(`${key$2}_groupQueue`);
   const keyGroupQueueVertexesList = Symbol(`${key$2}_groupQueueVertexesList`);
+  const keyIsMoving = Symbol(`${key$2}_isMoving`);
   const selectWrapperBorderWidth = 2;
   const resizeControllerBorderWidth = 4;
   const areaBorderWidth = 1;
@@ -3943,13 +3995,6 @@ var __privateMethod = (obj, member, method) => {
       ctx.fill();
     }
   }
-  function drawHoverVertexesWrapper(ctx, vertexes, opts) {
-    if (!vertexes) {
-      return;
-    }
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: "transparent", lineDash: [] };
-    drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
-  }
   function drawCrossVertexes(ctx, vertexes, opts) {
     const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
     ctx.setLineDash([]);
@@ -3968,6 +4013,13 @@ var __privateMethod = (obj, member, method) => {
     ctx.closePath();
     ctx.stroke();
   }
+  function drawHoverVertexesWrapper(ctx, vertexes, opts) {
+    if (!vertexes) {
+      return;
+    }
+    const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: "transparent", lineDash: [] };
+    drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
+  }
   function drawLockVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
       return;
@@ -3992,16 +4044,19 @@ var __privateMethod = (obj, member, method) => {
     if (!controller) {
       return;
     }
+    const { hideControllers } = opts;
     const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: "transparent", lineDash: [] };
     const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: "#FFFFFF" };
-    drawLine(ctx, calcViewPointSize(top.center, opts), calcViewPointSize(rotate.center, opts), { ...ctrlOpts, borderWidth: 2 });
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
-    drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
-    drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: controllerSize, borderWidth: 2 });
+    if (!hideControllers) {
+      drawLine(ctx, calcViewPointSize(top.center, opts), calcViewPointSize(rotate.center, opts), { ...ctrlOpts, borderWidth: 2 });
+      drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+      drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+      drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+      drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+      drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: controllerSize, borderWidth: 2 });
+    }
   }
   function drawArea(ctx, opts) {
     const { start, end } = opts;
@@ -4811,15 +4866,18 @@ var __privateMethod = (obj, member, method) => {
     };
   }
   const middlewareEventTextEdit = "@middleware/text-edit";
+  const middlewareEventTextChange = "@middleware/text-change";
   const defaultElementDetail = getDefaultElementDetailConfig();
   const MiddlewareTextEditor = (opts) => {
     const { eventHub, boardContent, viewer } = opts;
     const canvas = boardContent.boardContext.canvas;
-    const textarea = document.createElement("textarea");
+    const textarea = document.createElement("div");
+    textarea.setAttribute("contenteditable", "true");
     const canvasWrapper = document.createElement("div");
     const container = opts.container || document.body;
     const mask = document.createElement("div");
     let activeElem = null;
+    let activePosition = [];
     canvasWrapper.appendChild(textarea);
     canvasWrapper.style.position = "absolute";
     mask.appendChild(canvasWrapper);
@@ -4838,6 +4896,7 @@ var __privateMethod = (obj, member, method) => {
     const hideTextArea = () => {
       mask.style.display = "none";
       activeElem = null;
+      activePosition = [];
     };
     const getCanvasRect = () => {
       const clientRect = canvas.getBoundingClientRect();
@@ -4898,6 +4957,21 @@ var __privateMethod = (obj, member, method) => {
         elemW = element.w * scale;
         elemH = element.h * scale;
       }
+      let justifyContent = "center";
+      let alignItems = "center";
+      if (detail.textAlign === "left") {
+        justifyContent = "start";
+      } else if (detail.textAlign === "right") {
+        justifyContent = "end";
+      }
+      if (detail.verticalAlign === "top") {
+        alignItems = "start";
+      } else if (detail.verticalAlign === "bottom") {
+        alignItems = "end";
+      }
+      textarea.style.display = "inline-flex";
+      textarea.style.justifyContent = justifyContent;
+      textarea.style.alignItems = alignItems;
       textarea.style.position = "absolute";
       textarea.style.left = `${elemX - 1}px`;
       textarea.style.top = `${elemY - 1}px`;
@@ -4918,7 +4992,7 @@ var __privateMethod = (obj, member, method) => {
       textarea.style.padding = "0";
       textarea.style.margin = "0";
       textarea.style.outline = "none";
-      textarea.value = detail.text || "";
+      textarea.innerText = detail.text || "";
       parent.appendChild(textarea);
     };
     const resetCanvasWrapper = () => {
@@ -4936,19 +5010,40 @@ var __privateMethod = (obj, member, method) => {
     textarea.addEventListener("click", (e) => {
       e.stopPropagation();
     });
-    textarea.addEventListener("input", (e) => {
-      if (activeElem) {
-        activeElem.detail.text = e.target.value || "";
+    textarea.addEventListener("input", () => {
+      if (activeElem && activePosition) {
+        activeElem.detail.text = textarea.innerText || "";
+        eventHub.trigger(middlewareEventTextChange, {
+          element: {
+            uuid: activeElem.uuid,
+            detail: {
+              text: activeElem.detail.text
+            }
+          },
+          position: [...activePosition || []]
+        });
         viewer.drawFrame();
       }
     });
     textarea.addEventListener("blur", () => {
+      if (activeElem && activePosition) {
+        eventHub.trigger(middlewareEventTextChange, {
+          element: {
+            uuid: activeElem.uuid,
+            detail: {
+              text: activeElem.detail.text
+            }
+          },
+          position: [...activePosition]
+        });
+      }
       hideTextArea();
     });
     const textEditCallback = (e) => {
       var _a;
-      if ((e == null ? void 0 : e.element) && ((_a = e == null ? void 0 : e.element) == null ? void 0 : _a.type) === "text") {
+      if ((e == null ? void 0 : e.position) && (e == null ? void 0 : e.element) && ((_a = e == null ? void 0 : e.element) == null ? void 0 : _a.type) === "text") {
         activeElem = e.element;
+        activePosition = e.position;
       }
       showTextArea(e);
     };
@@ -5043,6 +5138,7 @@ var __privateMethod = (obj, member, method) => {
       sharer.setSharedStorage(keySelectedElementList, []);
       sharer.setSharedStorage(keySelectedElementListVertexes, null);
       sharer.setSharedStorage(keySelectedElementController, null);
+      sharer.setSharedStorage(keyIsMoving, null);
     };
     clear();
     const selectCallback = ({ uuids, positions }) => {
@@ -5231,6 +5327,7 @@ var __privateMethod = (obj, member, method) => {
       },
       pointMove: (e) => {
         var _a, _b, _c;
+        sharer.setSharedStorage(keyIsMoving, true);
         const data = sharer.getActiveStorage("data");
         const elems = getActiveElements();
         const scale = sharer.getActiveStorage("scale") || 1;
@@ -5330,6 +5427,7 @@ var __privateMethod = (obj, member, method) => {
       },
       pointEnd(e) {
         inBusyMode = null;
+        sharer.setSharedStorage(keyIsMoving, false);
         const data = sharer.getActiveStorage("data");
         const resizeType = sharer.getSharedStorage(keyResizeType);
         const actionType = sharer.getSharedStorage(keyActionType);
@@ -5402,7 +5500,7 @@ var __privateMethod = (obj, member, method) => {
         viewer.drawFrame();
       },
       doubleClick(e) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const target = getPointTarget(e.point, pointTargetBaseOptions());
         sharer.setSharedStorage(keySelectedElementController, null);
         sharer.setSharedStorage(keySelectedElementList, []);
@@ -5420,6 +5518,7 @@ var __privateMethod = (obj, member, method) => {
           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) || []),
             viewScaleInfo: sharer.getActiveViewScaleInfo()
           });
         }
@@ -5441,6 +5540,7 @@ var __privateMethod = (obj, member, method) => {
         const areaEnd = sharedStore[keyAreaEnd];
         const groupQueue = sharedStore[keyGroupQueue];
         const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
+        const isMoving = sharedStore[keyIsMoving];
         const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
         const selectedElementController = elem ? calcElementSizeController(elem, {
           groupQueue,
@@ -5465,7 +5565,12 @@ var __privateMethod = (obj, member, method) => {
             }
           }
           if (!isLock && elem && ["select", "drag", "resize"].includes(actionType)) {
-            drawSelectedElementControllersVertexes(helperContext, selectedElementController, { ...drawBaseOpts });
+            drawSelectedElementControllersVertexes(helperContext, selectedElementController, {
+              ...drawBaseOpts,
+              element: elem,
+              groupQueue,
+              hideControllers: !!isMoving && actionType === "drag"
+            });
           }
         } else {
           if (hoverElement && actionType !== "drag") {
@@ -5483,7 +5588,12 @@ var __privateMethod = (obj, member, method) => {
             }
           }
           if (!isLock && elem && ["select", "drag", "resize"].includes(actionType)) {
-            drawSelectedElementControllersVertexes(helperContext, selectedElementController, { ...drawBaseOpts });
+            drawSelectedElementControllersVertexes(helperContext, selectedElementController, {
+              ...drawBaseOpts,
+              element: elem,
+              groupQueue,
+              hideControllers: !!isMoving && actionType === "drag"
+            });
           } else if (actionType === "area" && areaStart && areaEnd) {
             drawArea(helperContext, { start: areaStart, end: areaEnd });
           } else if (["drag-list", "drag-list-end"].includes(actionType)) {
@@ -6210,6 +6320,7 @@ var __privateMethod = (obj, member, method) => {
   exports.middlewareEventScale = middlewareEventScale;
   exports.middlewareEventSelect = middlewareEventSelect;
   exports.middlewareEventSelectClear = middlewareEventSelectClear;
+  exports.middlewareEventTextChange = middlewareEventTextChange;
   exports.middlewareEventTextEdit = middlewareEventTextEdit;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;