@idraw/core 0.4.0-beta.33 → 0.4.0-beta.34

package/dist/index.global.js

@@ -3680,6 +3680,9 @@ var __privateMethod = (obj, member, method) => {
         }
       });
       _BoardWatcher_onContextMenu.set(this, (e) => {
+        if (e.button !== 2) {
+          return;
+        }
         if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
         }
@@ -3688,6 +3691,7 @@ var __privateMethod = (obj, member, method) => {
         if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
           return;
         }
+        this.trigger("contextMenu", { point });
       });
       _BoardWatcher_onClick.set(this, (e) => {
         if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
@@ -3745,6 +3749,9 @@ var __privateMethod = (obj, member, method) => {
         this.trigger("pointMove", { point });
       });
       _BoardWatcher_onPointStart.set(this, (e) => {
+        if (e.button !== 0) {
+          return;
+        }
         if (!__classPrivateFieldGet$3(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
           return;
         }
@@ -4113,7 +4120,7 @@ var __privateMethod = (obj, member, method) => {
       throw new TypeError("Cannot read private member from an object whose class did not declare it");
     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;
+  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_handleContextMenu, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
   class Board {
     constructor(opts) {
       _Board_instances.add(this);
@@ -4306,6 +4313,7 @@ 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_watcher, "f").on("contextMenu", __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleContextMenu).bind(this));
     __classPrivateFieldGet(this, _Board_renderer, "f").on("load", () => {
       __classPrivateFieldGet(this, _Board_eventHub, "f").trigger("loadResource");
     });
@@ -4354,6 +4362,15 @@ var __privateMethod = (obj, member, method) => {
         return;
       }
     }
+  }, _Board_handleContextMenu = function _Board_handleContextMenu2(e) {
+    var _a;
+    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
+      const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
+      const result = (_a = obj === null || obj === void 0 ? void 0 : obj.contextMenu) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+      if (result === false) {
+        return;
+      }
+    }
   }, _Board_handleWheel = function _Board_handleWheel2(e) {
     var _a;
     for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
@@ -4442,6 +4459,36 @@ var __privateMethod = (obj, member, method) => {
   const CURSOR_DRAG_DEFAULT = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAApCAYAAABHomvIAAAEvUlEQVRYhc2Y20/cVRDHP8v+uKzAWkpDCtZq8BYhJkq8PBoJxgj7I2m0ryaSyFN9IT74pI8+8WJiggRj/APApFkSTGRJ+qKGUiyxbGPEWsUSuVhYC12Wy8+HmeMeYPe3d3WSye/k/M7le+bMzJkZ+J9ToEJreGVYN+vihcytstjQocUlAw0WCSoIVCv3Ae8CXwIt+u8XHVeOG8qLqgAHqAFCQCNwGugCthBJGd7S/tM6LqTzHI5KuqzgaoAHgEvAtwrkG2AG8FzXvep5nue67lX9N6P/PR1/SefXlBtkFXKNDUA/RyX1D9uUbYzOb9D1ygbSQU7eDMxhSSsSiVz3AxiJRK57nuf19/fPad8coqONFCBJPyUOIKc1OvcbgiY9ICDT8+0DHge2gR0gBeyTtviM5HeKAGlrrfMZVwhdAVaAr4F3KNF4gkA9cBbowOc68+3LwDn1Mhdy4/OcYk54nPr6+m54nofruvPa9SFQ6wfQTweNgTwInAGuQWk6mEUvHwb+Au4Dexx7ffK9+0q+CHWIBIOZ9skHYKWfK9tQ8gZoLDjIyWCg3ORY+2T8aYOyg4EaRIFrkCs4QU1NTSvabC20zyIDzuyfkYzEahHX8jHwE/LwXwHeJ4P7KIVIu5ouxFDC+HgLAy4MfEF2v1UpgOezATSiNVf6EvAWsD01NXVtdnb2bk9Pz81sp/q3KIi8t83Ae4DX0tJy0z7t8PDwD4FAYIX/WILVwKMAzc3Nu/agoaGhzmg0ugcsV0hIvlSNoH8IuIiebHJycrls4sotwaxGYvueAPAjEg3jum79yMjIr5WUjFLOxMpBIopWoBN4GfhOJ+4NDg4ulVt6i4uLm7r+BvAscA4fCXrAAfJQJ5Fg8gPgMuCMjo62d3V1LW1sbKRKlpXSxMTEmjZ/5qQrOwHwUAGmkIjiHhJdfKrM/Pz8Y+3t7RvT09Ob5QAYi8X2tbmke2cEZwAaCdoAt5QvIzEbiUSitbe3tyoej++UCnBhYSGkzdu6d1aQxkgOkfwgieQMCeCu8iwSnpNKpcIdHR3BZDJ5UCy4SCSyvL6+/giiSou67wE+eYmhAKKkIaAJUdynkdflNcQF3dFTpooxjmg0aozDAz4DXkB8bxPy1OYM7QzIOuAU0AY8pQu9CrwJ3AK8UCj0RyHgZmZmli1w3wOvAM/oHo1kiZiygbSDh7PAE8DzQA/wBqKnnuM4a2NjY7dygbtw4cICRy31deBFJA09o7eWsU7kJ1KTLJmyRyOSn5zS70fAkwBtbW2/DwwMHHR3d9d3dnY2rK6u7o2Pj2/GYrH9eDzurK2tndM1vwI+QXT7T2BTD5skQz6SCyAcLRoZkGEFGQbeRqpbubK+BPA5MI14h00L3I6Cy2h4+eQbJsKuRa6iQcGFFfB5oBt4DpFsI+Ky7iDBxW3gBhBH/GtC+R7i1lKk3UxRAG2QpvxWr0AbtB3SA5jkx36djH/dVlDbyibN3M8GDvJPyI2PSulixm/u6kZ1OQCaJ/S+tndJX6tvsFBIxcCUdA3vW5ubxMrObc0hDMhd/Rqp5QQHxeW8dubnHGM7tzVv/IECMlxQ/bpcRfRMqaNRheNcUGG9XFWDACfzWs/6Fl3t/xtO//8gpbCORQAAAABJRU5ErkJggg==`;
   const CURSOR_DRAG_ACTIVE = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAER0lEQVRYhe2YT2hjRRjAf8lL22xsNsm6EWKrSKvuIkIh+O9QRFxEW18KUsoe7FHoRaWCN1FPetOrIHgVKS0q9P5OxaJbodkalgVrtVZjS7Ntd02z6abPw3yzmaT585q+elj2g2HmvZn35jffN/PNNwP35R6XgM/fuif4n+dO2klQvgsaZRc4NJJvoJbHdhrIAkJAN2ADHwFfAw9J3ZoB/b9I0AA6A0SBc0Aa2EVpSqddeZ+QdmfkO+u0gIPSQQR4HfhRQH4AHMDNZDJXXNd1M5nMFalzdB3wJTAOPAD0yEB9066G6wXepVZTd5MpTdporZ6jVqsatmMJoTR3HvgJQ1u2bS+3ArRte9l1XXdsbGyJo1pdBN6Wf3d3ChlAmSQO9LeC8fquQRpDWaerHWSjSr1iu4BkJyOsF9u2s67rkslkluTVxygltAVsJBZqdCngEj5osIlW+4EYytRNF04jeu3vulCT+7QkLH20dEOhumft97pQI4s3+iiRSPwtxVSbd39J8eEGvzFXc1NAs8KSFAZeBt4AHgNeBFDWObkEAne7HAK2gT2gCFQatdca1GbtBj4E3veFprVYVLXXcg4GqM6588BbAMlkcm1qamqzr6/v6ikBet5RgiizJoDPAXdgYGDZXHkzMzPrrk9CdRWngUeAsxxdCzVwpgZ/BigWiz1mo4mJif7jqMajeJrU5hywgGvAej6fvzA0NLThN1Eul9uT4g5VTbYFNKUIfAbsZ7PZvuHh4Wt+As7Ozu5IcY2j219TQB0NV4A7qODgO4CFhYWLg4ODOb8AHccpG4A68m6pRQ1YAQ6A28A+8BXwBcDq6upTqVTquh+AuVyuW4q/opRRaQdZD1gCbgE3ge+BT4HdfD7/ZDwe/z2bzRY6hRsfH1/e3Nx8FDX/sgbgoZfvg6jo4ixqW7oIPA+8CrwHrAJuJBLJd+JaHMf5k6qmPgGeQe1SCenXk0/U21xcIC8AzwGvAJPAEuAmEon1xcXFba9w8/Pz5oqdB14CnpY+oij35km0qwmjwqAU8ISM9hIwBeQA17KsG9PT07+1gxsZGdmgdqW+BjwLDAAPoo4ALU+W9arVwWoIpXp9kouKZpPAO8AwQCwW+2d0dLQ0OTkZSafT0UKhUJ6bm9t2HKeysrIS3tra0g7+KvABUJC0g5rrJdRcbLpImtleRzYashc1P2OSXwbebDVykX3gW+Ab1AHqhuQ3pe6AJlFMO0CoPROHDcio5I8DL1A9C8dQbmod+APYAK4DvwjQnsDdErgyVTfTEaCG1GFYGHXG7TVSo2OkdvhlAflXoHSuNdfStFqaRhEi2kfdprrj6M5LAt0I8EDaaMdflPal48CB95hMr3Bt8h4jD0kyL5E0pN6dysZzW7N2AqjbmhdIZjJvufTOpE19x3g+9s1XJ/ck5tVbfdhu+rxDfLiSO+lFToCjZwrXyH2/0Lwv95z8B1jAqXmDnj4YAAAAAElFTkSuQmCC`;
   const CURSOR_RESIZE_ROTATE = `data:image/png;base64,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`;
+  const EVENT_KEY_CHANGE = "change";
+  const EVENT_KEY_CURSOR = "cursor";
+  const EVENT_KEY_RULER = "ruler";
+  const EVENT_KEY_SCALE = "scale";
+  const EVENT_KEY_SELECT = "select";
+  const EVENT_KEY_CLEAR_SELECT = "clearSelect";
+  const EVENT_KEY_TEXT_EDIT = "textEdit";
+  const EVENT_KEY_TEXT_CHANGE = "textChange";
+  const EVENT_KEY_CONTEXT_MENU = "contextMenu";
+  const EVENT_KEY_SELECT_IN_GROUP = "selectInGroup";
+  const innerEventKeys = {
+    CURSOR: EVENT_KEY_CURSOR,
+    CHANGE: EVENT_KEY_CHANGE,
+    RULER: EVENT_KEY_RULER,
+    SCALE: EVENT_KEY_SCALE,
+    SELECT: EVENT_KEY_SELECT,
+    CLEAR_SELECT: EVENT_KEY_CLEAR_SELECT,
+    TEXT_EDIT: EVENT_KEY_TEXT_EDIT,
+    TEXT_CHANGE: EVENT_KEY_TEXT_CHANGE,
+    CONTEXT_MENU: EVENT_KEY_CONTEXT_MENU,
+    SELECT_IN_GROUP: EVENT_KEY_SELECT_IN_GROUP,
+    SNAP_TO_GRID: EVENT_KEY_SELECT_IN_GROUP
+  };
+  const coreEventKeys = {};
+  Object.keys(innerEventKeys).forEach((keyName) => {
+    Object.defineProperty(coreEventKeys, keyName, {
+      value: innerEventKeys[keyName],
+      writable: false
+    });
+  });
   class Cursor {
     constructor(container, opts) {
       __privateAdd(this, _init);
@@ -4475,7 +4522,7 @@ var __privateMethod = (obj, member, method) => {
   init_fn = function() {
     const eventHub = __privateGet(this, _eventHub);
     __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "default");
-    eventHub.on("cursor", (e) => {
+    eventHub.on(coreEventKeys.CURSOR, (e) => {
       var _a;
       if (e.type === "over-element" || !e.type) {
         __privateMethod(this, _resetCursor, resetCursor_fn).call(this, "auto");
@@ -4583,7 +4630,6 @@ var __privateMethod = (obj, member, method) => {
     }
     return key2;
   };
-  const eventChange = "change";
   const key$3 = "SELECT";
   const keyActionType = Symbol(`${key$3}_actionType`);
   const keyResizeType = Symbol(`${key$3}_resizeType`);
@@ -4614,10 +4660,6 @@ var __privateMethod = (obj, member, method) => {
     lockedColor,
     referenceColor
   };
-  const middlewareEventSelect = "@middleware/select";
-  const middlewareEventSelectClear = "@middleware/select-clear";
-  const middlewareEventSelectInGroup = "@middleware/select-in-group";
-  const middlewareEventSnapToGrid = "@middleware/snap-to-grid";
   function drawVertexes(ctx, vertexes, opts) {
     const { borderColor: borderColor2, borderWidth: borderWidth2, background: background2, lineDash } = opts;
     ctx.setLineDash([]);
@@ -5872,228 +5914,6 @@ var __privateMethod = (obj, member, method) => {
       xLines
     };
   }
-  const middlewareEventTextEdit = "@middleware/text-edit";
-  const middlewareEventTextChange = "@middleware/text-change";
-  const defaultElementDetail = getDefaultElementDetailConfig();
-  const MiddlewareTextEditor = (opts) => {
-    const { eventHub, boardContent, viewer, sharer } = opts;
-    const canvas = boardContent.boardContext.canvas;
-    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);
-    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";
-      if (activeElem == null ? void 0 : activeElem.uuid) {
-        sharer.setActiveOverrideElemenentMap({
-          [activeElem.uuid]: {
-            operations: { invisible: true }
-          }
-        });
-        viewer.drawFrame();
-      }
-    };
-    const hideTextArea = () => {
-      if (activeElem == null ? void 0 : activeElem.uuid) {
-        const map = sharer.getActiveOverrideElemenentMap();
-        if (map) {
-          delete map[activeElem.uuid];
-        }
-        sharer.setActiveOverrideElemenentMap(map);
-        viewer.drawFrame();
-      }
-      mask.style.display = "none";
-      activeElem = null;
-      activePosition = [];
-    };
-    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
-      };
-      let elemX = element.x * scale + offsetLeft;
-      let elemY = element.y * scale + offsetTop;
-      let elemW = element.w * scale;
-      let elemH = element.h * scale;
-      if (groupQueue.length > 0) {
-        elemX = element.x * scale;
-        elemY = element.y * scale;
-        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`;
-      textarea.style.width = `${elemW + 2}px`;
-      textarea.style.height = `${elemH + 2}px`;
-      textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
-      textarea.style.boxSizing = "border-box";
-      textarea.style.border = "1px solid #1973ba";
-      textarea.style.resize = "none";
-      textarea.style.overflow = "hidden";
-      textarea.style.wordBreak = "break-all";
-      textarea.style.borderRadius = `${(typeof detail.borderRadius === "number" ? detail.borderRadius : 0) * scale}px`;
-      textarea.style.background = `${detail.background || "transparent"}`;
-      textarea.style.color = `${detail.color || "#333333"}`;
-      textarea.style.fontSize = `${detail.fontSize * scale}px`;
-      textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`;
-      textarea.style.fontFamily = enhanceFontFamliy(detail.fontFamily);
-      textarea.style.fontWeight = `${detail.fontWeight}`;
-      textarea.style.padding = "0";
-      textarea.style.margin = "0";
-      textarea.style.outline = "none";
-      textarea.innerText = 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", () => {
-      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.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);
-    };
-    return {
-      name: "@middleware/text-editor",
-      use() {
-        eventHub.on(middlewareEventTextEdit, textEditCallback);
-      },
-      disuse() {
-        eventHub.off(middlewareEventTextEdit, textEditCallback);
-      }
-    };
-  };
   const key$2 = "LAYOUT_SELECT";
   const keyLayoutActionType = Symbol(`${key$2}_layoutActionType`);
   const keyLayoutControlType = Symbol(`${key$2}_layoutControlType`);
@@ -6260,7 +6080,7 @@ var __privateMethod = (obj, member, method) => {
           }
           if (layoutControlType) {
             sharer.setSharedStorage(keyLayoutControlType, layoutControlType);
-            eventHub.trigger(middlewareEventSelectClear, {});
+            eventHub.trigger(coreEventKeys.CLEAR_SELECT);
             return layoutControlType;
           }
         }
@@ -6271,7 +6091,7 @@ var __privateMethod = (obj, member, method) => {
       if (isBusy === true) {
         return;
       }
-      eventHub.trigger("cursor", {
+      eventHub.trigger(coreEventKeys.CURSOR, {
         type: controlType ? `resize-${controlType}` : controlType,
         groupQueue: [],
         element: getLayoutSize()
@@ -6445,7 +6265,7 @@ var __privateMethod = (obj, member, method) => {
         const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
         const data = sharer.getActiveStorage("data");
         if (data && layoutActionType === "resize" && layoutControlType) {
-          eventHub.trigger(eventChange, {
+          eventHub.trigger(coreEventKeys.CHANGE, {
             type: "changeLayout",
             data
           });
@@ -6548,7 +6368,7 @@ var __privateMethod = (obj, member, method) => {
         sharer.setSharedStorage(keySelectedElementPosition, []);
       }
       if ((opts2 == null ? void 0 : opts2.triggerEvent) === true) {
-        eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
+        eventHub.trigger(coreEventKeys.SELECT, { uuids: list.map((elem) => elem.uuid), positions: [] });
       }
     };
     const pointTargetBaseOptions = () => {
@@ -6581,7 +6401,7 @@ var __privateMethod = (obj, member, method) => {
       sharer.setSharedStorage(keyIsMoving, null);
     };
     clear();
-    const selectCallback = ({ uuids, positions }) => {
+    const selectCallback = ({ uuids = [], positions }) => {
       let elements = [];
       const actionType = sharer.getSharedStorage(keyActionType);
       const data = sharer.getActiveStorage("data");
@@ -6618,16 +6438,16 @@ var __privateMethod = (obj, member, method) => {
     return {
       name: "@middleware/selector",
       use() {
-        eventHub.on(middlewareEventSelect, selectCallback);
-        eventHub.on(middlewareEventSelectClear, selectClearCallback);
-        eventHub.on(middlewareEventSelectInGroup, selectInGroupCallback);
-        eventHub.on(middlewareEventSnapToGrid, setSnapToSnapCallback);
+        eventHub.on(coreEventKeys.SELECT, selectCallback);
+        eventHub.on(coreEventKeys.CLEAR_SELECT, selectClearCallback);
+        eventHub.on(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
+        eventHub.on(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
       },
       disuse() {
-        eventHub.off(middlewareEventSelect, selectCallback);
-        eventHub.off(middlewareEventSelectClear, selectClearCallback);
-        eventHub.off(middlewareEventSelectInGroup, selectInGroupCallback);
-        eventHub.off(middlewareEventSnapToGrid, setSnapToSnapCallback);
+        eventHub.off(coreEventKeys.SELECT, selectCallback);
+        eventHub.off(coreEventKeys.CLEAR_SELECT, selectClearCallback);
+        eventHub.off(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
+        eventHub.off(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
       },
       hover: (e) => {
         var _a, _b, _c, _d, _e;
@@ -6641,7 +6461,7 @@ var __privateMethod = (obj, member, method) => {
           }
           const cursor = target2.type;
           if (inBusyMode === null) {
-            eventHub.trigger("cursor", {
+            eventHub.trigger(coreEventKeys.CURSOR, {
               type: cursor,
               groupQueue: target2.groupQueue,
               element: target2.elements[0]
@@ -6734,15 +6554,14 @@ var __privateMethod = (obj, member, method) => {
             groupQueue
           })) {
             const target2 = getPointTarget(e.point, pointTargetBaseOptions());
-            if (((_a = target2 == null ? void 0 : target2.elements) == null ? void 0 : _a.length) === 1 && ((_c = (_b = target2.elements[0]) == null ? void 0 : _b.operations) == null ? void 0 : _c.locked) === true) {
-              return;
-            } else {
-              updateHoverElement(null);
-            }
+            const isLockedElement2 = ((_a = target2 == null ? void 0 : target2.elements) == null ? void 0 : _a.length) === 1 && ((_c = (_b = target2.elements[0]) == null ? void 0 : _b.operations) == null ? void 0 : _c.locked) === true;
+            updateHoverElement(null);
             if (((_d = target2 == null ? void 0 : target2.elements) == null ? void 0 : _d.length) === 1) {
               moveOriginalStartElementSize = getElementSize(target2 == null ? void 0 : target2.elements[0]);
             }
-            if (target2.type === "over-element" && ((_e = target2 == null ? void 0 : target2.elements) == null ? void 0 : _e.length) === 1) {
+            if (isLockedElement2 === true) {
+              clear();
+            } else if (target2.type === "over-element" && ((_e = target2 == null ? void 0 : target2.elements) == null ? void 0 : _e.length) === 1) {
               updateSelectedElementList([target2.elements[0]], { triggerEvent: true });
               sharer.setSharedStorage(keyActionType, "drag");
             } else if ((_f = target2.type) == null ? void 0 : _f.startsWith("resize-")) {
@@ -6768,27 +6587,23 @@ var __privateMethod = (obj, member, method) => {
           groupQueue: []
         });
         const isLockedElement = ((_g = target == null ? void 0 : target.elements) == null ? void 0 : _g.length) === 1 && ((_i = (_h = target.elements[0]) == null ? void 0 : _h.operations) == null ? void 0 : _i.locked) === true;
-        if (!isLockedElement) {
-          updateHoverElement(null);
-        }
+        updateHoverElement(null);
         if (((_j = target == null ? void 0 : target.elements) == null ? void 0 : _j.length) === 1) {
           moveOriginalStartElementSize = getElementSize(target == null ? void 0 : target.elements[0]);
         }
-        if (!isLockedElement) {
-          if (target.type === "list-area") {
-            sharer.setSharedStorage(keyActionType, "drag-list");
-          } else if (target.type === "over-element" && ((_k = target == null ? void 0 : target.elements) == null ? void 0 : _k.length) === 1) {
-            updateSelectedElementList([target.elements[0]], { triggerEvent: true });
-            sharer.setSharedStorage(keyActionType, "drag");
-          } else if ((_l = target.type) == null ? void 0 : _l.startsWith("resize-")) {
-            sharer.setSharedStorage(keyResizeType, target.type);
-            sharer.setSharedStorage(keyActionType, "resize");
-          } else {
-            clear();
-            sharer.setSharedStorage(keyActionType, "area");
-            sharer.setSharedStorage(keyAreaStart, e.point);
-            updateSelectedElementList([], { triggerEvent: true });
-          }
+        if (isLockedElement === true) {
+          clear();
+          sharer.setSharedStorage(keyActionType, "area");
+          sharer.setSharedStorage(keyAreaStart, e.point);
+          updateSelectedElementList([], { triggerEvent: true });
+        } else if (target.type === "list-area") {
+          sharer.setSharedStorage(keyActionType, "drag-list");
+        } else if (target.type === "over-element" && ((_k = target == null ? void 0 : target.elements) == null ? void 0 : _k.length) === 1) {
+          updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+          sharer.setSharedStorage(keyActionType, "drag");
+        } else if ((_l = target.type) == null ? void 0 : _l.startsWith("resize-")) {
+          sharer.setSharedStorage(keyResizeType, target.type);
+          sharer.setSharedStorage(keyActionType, "resize");
         } else {
           clear();
           sharer.setSharedStorage(keyActionType, "area");
@@ -7023,7 +6838,7 @@ var __privateMethod = (obj, member, method) => {
           }
           if (data && ["drag", "drag-list", "drag-list-end", "resize"].includes(actionType)) {
             let type = "dragElement";
-            eventHub.trigger(eventChange, { data, type, selectedElements, hoverElement });
+            eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement });
           }
           viewer.drawFrame();
         };
@@ -7055,7 +6870,7 @@ var __privateMethod = (obj, member, method) => {
             return;
           }
         } else if (target.elements.length === 1 && ((_d = target.elements[0]) == null ? void 0 : _d.type) === "text" && !((_f = (_e = target.elements[0]) == null ? void 0 : _e.operations) == null ? void 0 : _f.invisible)) {
-          eventHub.trigger(middlewareEventTextEdit, {
+          eventHub.trigger(coreEventKeys.TEXT_EDIT, {
             element: target.elements[0],
             groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
             position: getElementPositionFromList((_g = target.elements[0]) == null ? void 0 : _g.uuid, ((_h = sharer.getActiveStorage("data")) == null ? void 0 : _h.elements) || []),
@@ -7064,20 +6879,60 @@ var __privateMethod = (obj, member, method) => {
         }
         sharer.setSharedStorage(keyActionType, null);
       },
-      beforeDrawFrame({ snapshot }) {
-        var _a;
-        const { activeStore, sharedStore } = snapshot;
-        const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
-        const sharer2 = opts.sharer;
-        const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
-        const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
-        const selectedElements = sharedStore[keySelectedElementList];
-        const elem = selectedElements[0];
-        const hoverElement = sharedStore[keyHoverElement];
-        const hoverElementVertexes = sharedStore[keyHoverElementVertexes];
-        const actionType = sharedStore[keyActionType];
-        const areaStart = sharedStore[keyAreaStart];
-        const areaEnd = sharedStore[keyAreaEnd];
+      contextMenu: (e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const groupQueue = sharer.getSharedStorage(keyGroupQueue);
+        if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
+          if (isPointInViewActiveGroup(e.point, {
+            ctx: overlayContext,
+            viewScaleInfo: sharer.getActiveViewScaleInfo(),
+            viewSizeInfo: sharer.getActiveViewSizeInfo(),
+            groupQueue
+          })) {
+            const target2 = getPointTarget(e.point, pointTargetBaseOptions());
+            if (((_a = target2 == null ? void 0 : target2.elements) == null ? void 0 : _a.length) === 1 && ((_c = (_b = target2.elements[0]) == null ? void 0 : _b.operations) == null ? void 0 : _c.locked) !== true) {
+              clear();
+              updateSelectedElementList([target2.elements[0]], { triggerEvent: true });
+              viewer.drawFrame();
+            } else if (!((_d = target2 == null ? void 0 : target2.elements) == null ? void 0 : _d.length)) {
+              clear();
+            }
+          }
+          return;
+        }
+        const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
+          viewScaleInfo: sharer.getActiveViewScaleInfo(),
+          viewSizeInfo: sharer.getActiveViewSizeInfo(),
+          calculator
+        });
+        const target = getPointTarget(e.point, {
+          ...pointTargetBaseOptions(),
+          areaSize: listAreaSize,
+          groupQueue: []
+        });
+        if (((_e = target == null ? void 0 : target.elements) == null ? void 0 : _e.length) === 1 && ((_g = (_f = target.elements[0]) == null ? void 0 : _f.operations) == null ? void 0 : _g.locked) !== true) {
+          clear();
+          updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+          viewer.drawFrame();
+          return;
+        } else if (!((_h = target == null ? void 0 : target.elements) == null ? void 0 : _h.length)) {
+          clear();
+        }
+      },
+      beforeDrawFrame({ snapshot }) {
+        var _a;
+        const { activeStore, sharedStore } = snapshot;
+        const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
+        const sharer2 = opts.sharer;
+        const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
+        const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
+        const selectedElements = sharedStore[keySelectedElementList];
+        const elem = selectedElements[0];
+        const hoverElement = sharedStore[keyHoverElement];
+        const hoverElementVertexes = sharedStore[keyHoverElementVertexes];
+        const actionType = sharedStore[keyActionType];
+        const areaStart = sharedStore[keyAreaStart];
+        const areaEnd = sharedStore[keyAreaEnd];
         const groupQueue = sharedStore[keyGroupQueue];
         const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
         const isMoving = sharedStore[keyIsMoving];
@@ -7088,11 +6943,11 @@ var __privateMethod = (obj, member, method) => {
           controllerSize: 10,
           viewScaleInfo
         }) : null;
-        const isLocked = !!((_a = hoverElement == null ? void 0 : hoverElement.operations) == null ? void 0 : _a.locked);
+        const isHoverLocked = !!((_a = hoverElement == null ? void 0 : hoverElement.operations) == null ? void 0 : _a.locked);
         if ((groupQueue == null ? void 0 : groupQueue.length) > 0) {
           drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
           if (hoverElement && actionType !== "drag") {
-            if (isLocked) {
+            if (isHoverLocked) {
               drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, {
                 ...drawBaseOpts,
                 controller: calcElementSizeController(hoverElement, {
@@ -7106,7 +6961,7 @@ var __privateMethod = (obj, member, method) => {
               drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
             }
           }
-          if (!isLocked && elem && ["select", "drag", "resize"].includes(actionType)) {
+          if (elem && ["select", "drag", "resize"].includes(actionType)) {
             drawSelectedElementControllersVertexes(overlayContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
@@ -7138,7 +6993,7 @@ var __privateMethod = (obj, member, method) => {
           }
         } else {
           if (hoverElement && actionType !== "drag") {
-            if (isLocked) {
+            if (isHoverLocked) {
               drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, {
                 ...drawBaseOpts,
                 controller: calcElementSizeController(hoverElement, {
@@ -7152,7 +7007,7 @@ var __privateMethod = (obj, member, method) => {
               drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
             }
           }
-          if (!isLocked && elem && ["select", "drag", "resize"].includes(actionType)) {
+          if (elem && ["select", "drag", "resize"].includes(actionType)) {
             drawSelectedElementControllersVertexes(overlayContext, selectedElementController, {
               ...drawBaseOpts,
               element: elem,
@@ -7485,7 +7340,7 @@ var __privateMethod = (obj, member, method) => {
             sharer.setSharedStorage(keyHoverXThumbRect, false);
             sharer.setSharedStorage(keyHoverYThumbRect, true);
           }
-          eventHub.trigger("cursor", { type: "default" });
+          eventHub.trigger(coreEventKeys.CURSOR, { type: "default" });
           return false;
         }
         sharer.setSharedStorage(keyHoverXThumbRect, false);
@@ -7532,7 +7387,6 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
-  const middlewareEventScale = "@middleware/scale";
   const MiddlewareScaler = (opts) => {
     const { viewer, sharer, eventHub } = opts;
     const maxScale = 50;
@@ -7555,7 +7409,7 @@ var __privateMethod = (obj, member, method) => {
         viewer.scroll({ moveX, moveY });
         viewer.drawFrame();
         const scaleNum = formatNumber(scale);
-        eventHub.trigger(middlewareEventScale, { scale: scaleNum });
+        eventHub.trigger(coreEventKeys.SCALE, { scale: scaleNum });
       }
     };
   };
@@ -7833,7 +7687,6 @@ var __privateMethod = (obj, member, method) => {
       ctx.fill();
     }
   }
-  const middlewareEventRuler = "@middleware/show-ruler";
   const MiddlewareRuler = (opts, config) => {
     const { boardContent, viewer, eventHub, calculator } = opts;
     const { overlayContext, underlayContext } = boardContent;
@@ -7867,10 +7720,10 @@ var __privateMethod = (obj, member, method) => {
     return {
       name: "@middleware/ruler",
       use() {
-        eventHub.on(middlewareEventRuler, rulerCallback);
+        eventHub.on(coreEventKeys.RULER, rulerCallback);
       },
       disuse() {
-        eventHub.off(middlewareEventRuler, rulerCallback);
+        eventHub.off(coreEventKeys.RULER, rulerCallback);
       },
       beforeDrawFrame: ({ snapshot }) => {
         if (show === true) {
@@ -7896,6 +7749,228 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
+  const defaultElementDetail = getDefaultElementDetailConfig();
+  const MiddlewareTextEditor = (opts) => {
+    const { eventHub, boardContent, viewer, sharer } = opts;
+    const canvas = boardContent.boardContext.canvas;
+    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 = [];
+    const id = `idraw-middleware-text-editor-${Math.random().toString(26).substring(2)}`;
+    mask.setAttribute("id", id);
+    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";
+      if (activeElem == null ? void 0 : activeElem.uuid) {
+        sharer.setActiveOverrideElemenentMap({
+          [activeElem.uuid]: {
+            operations: { invisible: true }
+          }
+        });
+        viewer.drawFrame();
+      }
+    };
+    const hideTextArea = () => {
+      if (activeElem == null ? void 0 : activeElem.uuid) {
+        const map = sharer.getActiveOverrideElemenentMap();
+        if (map) {
+          delete map[activeElem.uuid];
+        }
+        sharer.setActiveOverrideElemenentMap(map);
+        viewer.drawFrame();
+      }
+      mask.style.display = "none";
+      activeElem = null;
+      activePosition = [];
+    };
+    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
+      };
+      let elemX = element.x * scale + offsetLeft;
+      let elemY = element.y * scale + offsetTop;
+      let elemW = element.w * scale;
+      let elemH = element.h * scale;
+      if (groupQueue.length > 0) {
+        elemX = element.x * scale;
+        elemY = element.y * scale;
+        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`;
+      textarea.style.width = `${elemW + 2}px`;
+      textarea.style.height = `${elemH + 2}px`;
+      textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
+      textarea.style.boxSizing = "border-box";
+      textarea.style.border = "1px solid #1973ba";
+      textarea.style.resize = "none";
+      textarea.style.overflow = "hidden";
+      textarea.style.wordBreak = "break-all";
+      textarea.style.borderRadius = `${(typeof detail.borderRadius === "number" ? detail.borderRadius : 0) * scale}px`;
+      textarea.style.background = `${detail.background || "transparent"}`;
+      textarea.style.color = `${detail.color || "#333333"}`;
+      textarea.style.fontSize = `${detail.fontSize * scale}px`;
+      textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`;
+      textarea.style.fontFamily = enhanceFontFamliy(detail.fontFamily);
+      textarea.style.fontWeight = `${detail.fontWeight}`;
+      textarea.style.padding = "0";
+      textarea.style.margin = "0";
+      textarea.style.outline = "none";
+      textarea.innerText = 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", () => {
+      if (activeElem && activePosition) {
+        activeElem.detail.text = textarea.innerText || "";
+        eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
+          element: {
+            uuid: activeElem.uuid,
+            detail: {
+              text: activeElem.detail.text
+            }
+          },
+          position: [...activePosition || []]
+        });
+        viewer.drawFrame();
+      }
+    });
+    textarea.addEventListener("blur", () => {
+      if (activeElem && activePosition) {
+        eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
+          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.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);
+    };
+    return {
+      name: "@middleware/text-editor",
+      use() {
+        eventHub.on(coreEventKeys.TEXT_EDIT, textEditCallback);
+      },
+      disuse() {
+        eventHub.off(coreEventKeys.TEXT_EDIT, textEditCallback);
+      }
+    };
+  };
   const key = "DRAG";
   const keyPrevPoint = Symbol(`${key}_prevPoint`);
   const MiddlewareDragger = (opts) => {
@@ -7907,7 +7982,7 @@ var __privateMethod = (obj, member, method) => {
         if (isDragging === true) {
           return;
         }
-        eventHub.trigger("cursor", {
+        eventHub.trigger(coreEventKeys.CURSOR, {
           type: "drag-default"
         });
       },
@@ -7915,7 +7990,7 @@ var __privateMethod = (obj, member, method) => {
         const { point } = e;
         sharer.setSharedStorage(keyPrevPoint, point);
         isDragging = true;
-        eventHub.trigger("cursor", {
+        eventHub.trigger(coreEventKeys.CURSOR, {
           type: "drag-active"
         });
       },
@@ -7933,7 +8008,7 @@ var __privateMethod = (obj, member, method) => {
       pointEnd() {
         isDragging = false;
         sharer.setSharedStorage(keyPrevPoint, null);
-        eventHub.trigger("cursor", {
+        eventHub.trigger(coreEventKeys.CURSOR, {
           type: "drag-default"
         });
       }
@@ -8074,13 +8149,11 @@ var __privateMethod = (obj, member, method) => {
     return {
       name: "@middleware/info",
       beforeDrawFrame({ snapshot }) {
-        var _a;
         const { sharedStore } = snapshot;
         const selectedElementList = sharedStore[keySelectedElementList];
-        const hoverElement = sharedStore[keyHoverElement];
         const actionType = sharedStore[keyActionType];
         const groupQueue = sharedStore[keyGroupQueue] || [];
-        if (selectedElementList.length === 1 && !((_a = hoverElement == null ? void 0 : hoverElement.operations) == null ? void 0 : _a.locked)) {
+        if (selectedElementList.length === 1) {
           const elem = selectedElementList[0];
           if (elem && ["select", "drag", "resize"].includes(actionType)) {
             const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
@@ -8170,6 +8243,47 @@ var __privateMethod = (obj, member, method) => {
       }
     };
   };
+  const MiddlewarePointer = (opts) => {
+    const { boardContent, eventHub, sharer } = opts;
+    const canvas = boardContent.boardContext.canvas;
+    const container = opts.container || document.body;
+    const id = `idraw-middleware-pointer-${Math.random().toString(26).substring(2)}`;
+    const getCanvasRect = () => {
+      const clientRect = canvas.getBoundingClientRect();
+      const { left, top, width, height } = clientRect;
+      return { left, top, width, height };
+    };
+    const contextMenuPointer = document.createElement("div");
+    contextMenuPointer.setAttribute("id", id);
+    contextMenuPointer.style.position = "fixed";
+    contextMenuPointer.style.top = "0";
+    contextMenuPointer.style.bottom = "unset";
+    contextMenuPointer.style.left = "0";
+    contextMenuPointer.style.right = "unset";
+    container.appendChild(contextMenuPointer);
+    return {
+      name: "@middleware/pointer",
+      use() {
+      },
+      disuse() {
+      },
+      pointStart(e) {
+      },
+      pointEnd() {
+      },
+      contextMenu(e) {
+        const { point } = e;
+        const { left, top } = getCanvasRect();
+        contextMenuPointer.style.left = `${left + point.x}px`;
+        contextMenuPointer.style.top = `${top + point.y}px`;
+        const selectedElements = sharer.getSharedStorage(keySelectedElementList);
+        eventHub.trigger(coreEventKeys.CONTEXT_MENU, {
+          pointerContainer: contextMenuPointer,
+          selectedElements: selectedElements || []
+        });
+      }
+    };
+  };
   class Core {
     constructor(container, opts) {
       __privateAdd(this, _initContainer);
@@ -8287,20 +8401,13 @@ var __privateMethod = (obj, member, method) => {
   exports.MiddlewareDragger = MiddlewareDragger;
   exports.MiddlewareInfo = MiddlewareInfo;
   exports.MiddlewareLayoutSelector = MiddlewareLayoutSelector;
+  exports.MiddlewarePointer = MiddlewarePointer;
   exports.MiddlewareRuler = MiddlewareRuler;
   exports.MiddlewareScaler = MiddlewareScaler;
   exports.MiddlewareScroller = MiddlewareScroller;
   exports.MiddlewareSelector = MiddlewareSelector;
   exports.MiddlewareTextEditor = MiddlewareTextEditor;
-  exports.eventChange = eventChange;
-  exports.middlewareEventRuler = middlewareEventRuler;
-  exports.middlewareEventScale = middlewareEventScale;
-  exports.middlewareEventSelect = middlewareEventSelect;
-  exports.middlewareEventSelectClear = middlewareEventSelectClear;
-  exports.middlewareEventSelectInGroup = middlewareEventSelectInGroup;
-  exports.middlewareEventSnapToGrid = middlewareEventSnapToGrid;
-  exports.middlewareEventTextChange = middlewareEventTextChange;
-  exports.middlewareEventTextEdit = middlewareEventTextEdit;
+  exports.coreEventKeys = coreEventKeys;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
 }({});