@idraw/core 0.4.0-beta.14 → 0.4.0-beta.16

package/dist/index.global.js

@@ -23,18 +23,6 @@ var __privateMethod = (obj, member, method) => {
 };
 
   var _eventHub, _container, _cursorType, _resizeCursorBaseImage, _cursorImageMap, _init, init_fn, _loadResizeCursorBaseImage, loadResizeCursorBaseImage_fn, _resetCursor, resetCursor_fn, _setCursorResize, setCursorResize_fn, _appendRotateResizeImage, appendRotateResizeImage_fn, _board, _canvas, _container2, _initContainer, initContainer_fn;
-  function throttle(fn, timeout) {
-    let timer = -1;
-    return function(...args) {
-      if (timer >= 0) {
-        return;
-      }
-      timer = setTimeout(() => {
-        fn(...args);
-        timer = -1;
-      }, timeout);
-    };
-  }
   function isColorStr(color2) {
     return typeof color2 === "string" && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color2) || /^[a-z]{1,}$/i.test(color2));
   }
@@ -378,12 +366,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 +398,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;
     }
@@ -841,7 +840,7 @@ var __privateMethod = (obj, member, method) => {
       return __classPrivateFieldGet$7(this, _Store_temp, "f")[name];
     }
     getSnapshot() {
-      return deepClone(__classPrivateFieldGet$7(this, _Store_temp, "f"));
+      return __classPrivateFieldGet$7(this, _Store_temp, "f");
     }
     clear() {
       __classPrivateFieldSet$7(this, _Store_temp, __classPrivateFieldGet$7(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
@@ -1215,6 +1214,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;
@@ -1226,6 +1251,77 @@ var __privateMethod = (obj, member, method) => {
     const react2MaxY = rect2.y + rect2.h;
     return react1MinX <= react2MaxX && react1MaxX >= react2MinX && react1MinY <= react2MaxY && react1MaxY >= react2MinY;
   }
+  function getElementVertexes(elemSize) {
+    const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
+    return [
+      { x: x2, y: y2 },
+      { x: x2 + w2, y: y2 },
+      { x: x2 + w2, y: y2 + h2 },
+      { x: x2, y: y2 + h2 }
+    ];
+  }
+  function calcElementVertexes(elemSize) {
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
+    if (angle2 === 0) {
+      return getElementVertexes(elemSize);
+    }
+    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 }), angle2);
+  }
+  function calcElementQueueVertexesQueueInGroup(groupQueue) {
+    const vesList = [];
+    let totalX = 0;
+    let totalY = 0;
+    const rotateActionList = [];
+    const elemQueue = [...groupQueue];
+    for (let i = 0; i < elemQueue.length; i++) {
+      const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemQueue[i];
+      totalX += x2;
+      totalY += y2;
+      let ves;
+      if (i === 0) {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
+        rotateActionList.push({
+          center: calcElementCenter(elemSize),
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      } else {
+        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
+        ves = getElementVertexes(elemSize);
+        for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
+          const { center, radian } = rotateActionList[aIdx];
+          ves = rotateVertexes(center, ves, radian);
+        }
+        const vesCenter = calcElementCenterFromVertexes(ves);
+        if (angle2 > 0 || angle2 < 0) {
+          const radian = parseAngleToRadian(angle2);
+          ves = rotateVertexes(vesCenter, ves, radian);
+        }
+        rotateActionList.push({
+          center: vesCenter,
+          angle: angle2,
+          radian: parseAngleToRadian(angle2)
+        });
+      }
+      vesList.push(ves);
+    }
+    return vesList;
+  }
+  function calcElementVertexesQueueInGroup(targetElem, opts) {
+    const { groupQueue } = opts;
+    if (!(groupQueue.length > 0)) {
+      return [calcElementVertexes(targetElem)];
+    }
+    const elemQueue = [...groupQueue, ...[targetElem]];
+    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
+    return vesList;
+  }
+  function calcElementVertexesInGroup(targetElem, opts) {
+    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
+    const ves = vesList.pop();
+    return ves || null;
+  }
   function calcViewScaleInfo(info, opts) {
     const { scale, offsetX, offsetY } = info;
     const { viewSizeInfo } = opts;
@@ -1409,77 +1505,6 @@ var __privateMethod = (obj, member, method) => {
     const elemSize = { x: elemStartX, y: elemStartY, w: elemEndX - elemStartX, h: elemEndY - elemStartY };
     return checkRectIntersect(viewSize, elemSize);
   }
-  function getElementVertexes(elemSize) {
-    const { x: x2, y: y2, h: h2, w: w2 } = elemSize;
-    return [
-      { x: x2, y: y2 },
-      { x: x2 + w2, y: y2 },
-      { x: x2 + w2, y: y2 + h2 },
-      { x: x2, y: y2 + h2 }
-    ];
-  }
-  function calcElementVertexes(elemSize) {
-    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemSize;
-    if (angle2 === 0) {
-      return getElementVertexes(elemSize);
-    }
-    return getElementRotateVertexes(elemSize, calcElementCenter({ x: x2, y: y2, w: w2, h: h2, angle: angle2 }), angle2);
-  }
-  function calcElementQueueVertexesQueueInGroup(groupQueue) {
-    const vesList = [];
-    let totalX = 0;
-    let totalY = 0;
-    const rotateActionList = [];
-    const elemQueue = [...groupQueue];
-    for (let i = 0; i < elemQueue.length; i++) {
-      const { x: x2, y: y2, w: w2, h: h2, angle: angle2 = 0 } = elemQueue[i];
-      totalX += x2;
-      totalY += y2;
-      let ves;
-      if (i === 0) {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
-        ves = calcElementVertexes({ x: x2, y: y2, w: w2, h: h2, angle: angle2 });
-        rotateActionList.push({
-          center: calcElementCenter(elemSize),
-          angle: angle2,
-          radian: parseAngleToRadian(angle2)
-        });
-      } else {
-        const elemSize = { x: totalX, y: totalY, w: w2, h: h2, angle: angle2 };
-        ves = getElementVertexes(elemSize);
-        for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
-          const { center, radian } = rotateActionList[aIdx];
-          ves = rotateVertexes(center, ves, radian);
-        }
-        const vesCenter = calcElementCenterFromVertexes(ves);
-        if (angle2 > 0 || angle2 < 0) {
-          const radian = parseAngleToRadian(angle2);
-          ves = rotateVertexes(vesCenter, ves, radian);
-        }
-        rotateActionList.push({
-          center: vesCenter,
-          angle: angle2,
-          radian: parseAngleToRadian(angle2)
-        });
-      }
-      vesList.push(ves);
-    }
-    return vesList;
-  }
-  function calcElementVertexesQueueInGroup(targetElem, opts) {
-    const { groupQueue } = opts;
-    if (!(groupQueue.length > 0)) {
-      return [calcElementVertexes(targetElem)];
-    }
-    const elemQueue = [...groupQueue, ...[targetElem]];
-    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
-    return vesList;
-  }
-  function calcElementVertexesInGroup(targetElem, opts) {
-    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
-    const ves = vesList.pop();
-    return ves || null;
-  }
   function createControllerElementSizeFromCenter(center, opts) {
     const { x: x2, y: y2 } = center;
     const { size, angle: angle2 } = opts;
@@ -2107,11 +2132,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 +2151,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 +2178,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 +2818,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 +2956,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) {
@@ -3416,7 +3452,6 @@ var __privateMethod = (obj, member, method) => {
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
   };
   var _Board_instances, _Board_opts, _Board_middlewareMap, _Board_middlewares, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_hasDestroyed, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handleHover, _Board_handleDoubleClick, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
-  const throttleTime = 10;
   class Board {
     constructor(opts) {
       _Board_instances.add(this);
@@ -3582,22 +3617,17 @@ var __privateMethod = (obj, member, method) => {
   _Board_opts = /* @__PURE__ */ new WeakMap(), _Board_middlewareMap = /* @__PURE__ */ new WeakMap(), _Board_middlewares = /* @__PURE__ */ new WeakMap(), _Board_activeMiddlewareObjs = /* @__PURE__ */ new WeakMap(), _Board_watcher = /* @__PURE__ */ new WeakMap(), _Board_renderer = /* @__PURE__ */ new WeakMap(), _Board_sharer = /* @__PURE__ */ new WeakMap(), _Board_viewer = /* @__PURE__ */ new WeakMap(), _Board_calculator = /* @__PURE__ */ new WeakMap(), _Board_eventHub = /* @__PURE__ */ new WeakMap(), _Board_hasDestroyed = /* @__PURE__ */ new WeakMap(), _Board_instances = /* @__PURE__ */ new WeakSet(), _Board_init = function _Board_init2() {
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointStart", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointStart).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("pointEnd", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointEnd).bind(this));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("pointMove", throttle((e) => {
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).call(this, e);
-    }, throttleTime));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("hover", throttle((e) => {
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleHover).call(this, e);
-    }, throttleTime));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheel", throttle((e) => {
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheel).call(this, e);
-    }, throttleTime));
-    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheelScale", throttle((e) => {
-      __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheelScale).call(this, e);
-    }, throttleTime));
+    __classPrivateFieldGet(this, _Board_watcher, "f").on("pointMove", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handlePointMove).bind(this));
+    __classPrivateFieldGet(this, _Board_watcher, "f").on("hover", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleHover).bind(this));
+    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheel", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheel).bind(this));
+    __classPrivateFieldGet(this, _Board_watcher, "f").on("wheelScale", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleWheelScale).bind(this));
     __classPrivateFieldGet(this, _Board_watcher, "f").on("scrollX", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollX).bind(this));
     __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 +3914,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,19 +3974,11 @@ 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;
+    const { borderColor: borderColor2, borderWidth: borderWidth2, lineDash } = opts;
     ctx.setLineDash([]);
     ctx.lineWidth = borderWidth2;
     ctx.strokeStyle = borderColor2;
-    ctx.fillStyle = background2;
     ctx.setLineDash(lineDash);
     ctx.beginPath();
     ctx.moveTo(vertexes[0].x, vertexes[0].y);
@@ -3968,6 +3991,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 +4022,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 +4844,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 +4874,7 @@ var __privateMethod = (obj, member, method) => {
     const hideTextArea = () => {
       mask.style.display = "none";
       activeElem = null;
+      activePosition = [];
     };
     const getCanvasRect = () => {
       const clientRect = canvas.getBoundingClientRect();
@@ -4898,6 +4935,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 +4970,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 +4988,53 @@ 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();
     });
+    textarea.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+    });
+    textarea.addEventListener("keypress", (e) => {
+      e.stopPropagation();
+    });
+    textarea.addEventListener("keyup", (e) => {
+      e.stopPropagation();
+    });
+    textarea.addEventListener("wheel", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
     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 +5129,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 +5318,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 +5418,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 +5491,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 +5509,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 +5531,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 +5556,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 +5579,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 +6311,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;