mce 0.15.23 → 0.15.25

package/dist/index.js

@@ -1515,6 +1515,14 @@ function findChildrenWithProvide(key, vnode) {
   }
   return [];
 }
+function isInputElement(target) {
+  const { tagName } = target;
+  const isInput = tagName === "INPUT" && !["checkbox", "radio", "range", "button", "file", "reset", "submit", "color"].includes(target.type);
+  if (target.isContentEditable || (isInput || tagName === "TEXTAREA" || tagName === "SELECT") && !target.readOnly) {
+    return true;
+  }
+  return false;
+}
 function isInputEvent(event) {
   if (!event)
     return false;
@@ -1522,10 +1530,8 @@ function isInputEvent(event) {
   if (!path && event.composedPath)
     path = event.composedPath();
   if (!path)
-    return false;
-  return path?.some(
-    (el) => ["INPUT", "TEXTAREA", "SELECT"].includes(el?.tagName) || el?.contentEditable === "true"
-  );
+    return isInputElement(event.target || event.srcElement);
+  return path?.some((el) => isInputElement(el));
 }
 function toKebabCase$1(str = "") {
   if (toKebabCase$1.cache.has(str))
@@ -1561,6 +1567,146 @@ const uuidv4Template = "10000000-1000-4000-8000" + -1e11;
 function uuidv4() {
   return uuidv4Template.replace(/[018]/g, (c) => (c ^ uint32() & 15 >> c / 4).toString(16));
 }
+const isff = typeof navigator !== "undefined" ? navigator.userAgent.toLowerCase().indexOf("firefox") > 0 : false;
+const _keyMap = {
+  "backspace": 8,
+  "⌫": 8,
+  "tab": 9,
+  "clear": 12,
+  "enter": 13,
+  "↩": 13,
+  "return": 13,
+  "esc": 27,
+  "escape": 27,
+  "space": 32,
+  "left": 37,
+  "up": 38,
+  "right": 39,
+  "down": 40,
+  /// https://w3c.github.io/uievents/#events-keyboard-key-location
+  "arrowup": 38,
+  "arrowdown": 40,
+  "arrowleft": 37,
+  "arrowright": 39,
+  "del": 46,
+  "delete": 46,
+  "ins": 45,
+  "insert": 45,
+  "home": 36,
+  "end": 35,
+  "pageup": 33,
+  "pagedown": 34,
+  "capslock": 20,
+  "num_0": 96,
+  "num_1": 97,
+  "num_2": 98,
+  "num_3": 99,
+  "num_4": 100,
+  "num_5": 101,
+  "num_6": 102,
+  "num_7": 103,
+  "num_8": 104,
+  "num_9": 105,
+  "num_multiply": 106,
+  "num_add": 107,
+  "num_enter": 108,
+  "num_subtract": 109,
+  "num_decimal": 110,
+  "num_divide": 111,
+  "⇪": 20,
+  ",": 188,
+  ".": 190,
+  "/": 191,
+  "`": 192,
+  "-": isff ? 173 : 189,
+  "=": isff ? 61 : 187,
+  ";": isff ? 59 : 186,
+  "'": 222,
+  "{": 219,
+  "}": 221,
+  "[": 219,
+  "]": 221,
+  "\\": 220
+};
+const _modifier = {
+  // shiftKey
+  "⇧": 16,
+  "shift": 16,
+  // altKey
+  "⌥": 18,
+  "alt": 18,
+  "option": 18,
+  // ctrlKey
+  "⌃": 17,
+  "ctrl": 17,
+  "control": 17,
+  // metaKey
+  "⌘": 91,
+  "cmd": 91,
+  "meta": 91,
+  "command": 91
+};
+const kbdMap = {
+  ArrowUp: "↑",
+  ArrowDown: "↓",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+  Slash: "/",
+  Semicolon: ";",
+  BracketLeft: "[",
+  BracketRight: "]",
+  Backslash: "\\",
+  Quote: "'",
+  Comma: ",",
+  Minus: "-",
+  Equal: "=",
+  Backspace: "⌫",
+  Enter: "⏎",
+  Escape: "Esc",
+  Dead: "N"
+};
+function getCharCode(x) {
+  let code = _keyMap[x.toLowerCase()] || _modifier[x.toLowerCase()] || x.toUpperCase().charCodeAt(0);
+  if (code === 93 || code === 224) {
+    code = 91;
+  }
+  if (code === 229) {
+    return 0;
+  }
+  return code;
+}
+function parseKey(key) {
+  return key.split("+").map((v) => {
+    switch (v) {
+      case "Meta":
+      case "Control":
+      case "CommandOrControl":
+        return "CmdOrCtrl";
+      case "Alt":
+      case "Shift":
+      case "CmdOrCtrl":
+        return v;
+      default:
+        return String.fromCharCode(getCharCode(v));
+    }
+  }).filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+}
+function parseKeyboardEvent(event) {
+  if (event.key.toLowerCase() === "capslock") {
+    return;
+  }
+  const { code } = event;
+  let key = event.keyCode || event.which || event.charCode;
+  if (code && /^Key[A-Z]$/.test(code)) {
+    key = code.charCodeAt(3);
+  }
+  return [
+    (event.metaKey || event.ctrlKey) && "CmdOrCtrl",
+    event.altKey && "Alt",
+    event.shiftKey && "Shift",
+    !["Meta", "Control", "Alt", "Shift"].includes(event.key) && String.fromCharCode(key)
+  ].filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+}
 const _1_hotkey = defineMixin((editor) => {
   const {
     registerConfig
@@ -1589,29 +1735,6 @@ const _1_hotkey = defineMixin((editor) => {
   function unregisterHotkey(command) {
     hotkeysData.value = hotkeysData.value.filter((v) => v.command !== command);
   }
-  const kbdMap = {
-    "ArrowUp": "↑",
-    "ArrowDown": "↓",
-    "ArrowLeft": "←",
-    "ArrowRight": "→",
-    "Slash": "/",
-    "Semicolon": ";",
-    "BracketLeft": "[",
-    "BracketRight": "]",
-    "Backslash": "\\",
-    "Quote": "'",
-    "Comma": ",",
-    "Minus": "-",
-    "Equal": "=",
-    "Backspace": "⌫",
-    "Enter": "⏎",
-    "Escape": "Esc",
-    "=": "+",
-    "º": "0",
-    "¡": "1",
-    "™": "2",
-    "Dead": "N"
-  };
   function getKbd(command) {
     if (!command) {
       return "";
@@ -1661,30 +1784,17 @@ const _1_hotkey = defineMixin((editor) => {
         if (isInputEvent(e)) {
           return;
         }
-        const eKey = [
-          (e.metaKey || e.ctrlKey) && "CmdOrCtrl",
-          e.altKey && "Alt",
-          e.shiftKey && "Shift",
-          !["Meta", "Control", "Alt", "Shift"].includes(e.key) && e.key
-        ].filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+        const eKey = parseKeyboardEvent(e);
         hotkeysData.value.forEach((hotkeyData) => {
           const command = hotkeyData.command;
           const hotkey = hotkeys.get(command);
           const keys = Array.isArray(hotkeyData.key) ? hotkeyData.key : [hotkeyData.key];
           keys.forEach((key) => {
-            const tKey = key.split("+").map((v) => {
-              switch (v) {
-                case "Meta":
-                case "Control":
-                case "CommandOrControl":
-                  return "CmdOrCtrl";
-                default:
-                  return v;
-              }
-            }).filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+            const tKey = parseKey(key);
             if (eKey === tKey && (!hotkey?.when || hotkey.when(e))) {
               if (hotkey?.preventDefault !== false) {
                 e.preventDefault();
+                e.stopPropagation();
               }
               if (hotkey?.handle) {
                 hotkey.handle(e);
@@ -3391,6 +3501,49 @@ const _4_2_frame = defineMixin((editor) => {
     findFrame,
     handleDragOutReparent
   });
+  return () => {
+    const {
+      on,
+      getGlobalPointer
+    } = editor;
+    const startContext = ref({});
+    on("selectionTransformStart", ({ elements }) => {
+      const ctx = {};
+      elements.forEach((el) => {
+        ctx[el.instanceId] = {
+          parent: el.getParent(),
+          index: el.getIndex()
+        };
+      });
+      startContext.value = ctx;
+    });
+    on("selectionTransforming", ({ handle, startEvent, elements }) => {
+      if (handle === "move" && !startEvent?.__FROM__) {
+        const idSet = /* @__PURE__ */ new Set();
+        elements.forEach((el) => {
+          if (isTopFrame(el)) {
+            idSet.add(el.instanceId);
+          } else {
+            idSet.add(el.findAncestor(isTopFrame)?.instanceId ?? 0);
+          }
+        });
+        if (idSet.size === 1) {
+          elements.forEach((element) => {
+            handleDragOutReparent(
+              element,
+              {
+                ...startContext.value[element.instanceId],
+                pointer: getGlobalPointer()
+              }
+            );
+          });
+        }
+      }
+    });
+    on("selectionTransformEnd", () => {
+      startContext.value = {};
+    });
+  };
 });
 const _4_3_element = defineMixin((editor) => {
   const {
@@ -3978,10 +4131,7 @@ const _zoom$1 = defineMixin((editor) => {
     const { width, height } = drawboardAabb.value;
     const tw = width - (offset2.left + offset2.right);
     const th = height - (offset2.top + offset2.bottom);
-    const sx = aabb.left;
-    const sy = aabb.top;
-    const sw = aabb.width;
-    const sh = aabb.height;
+    const [sx, sy, sw, sh] = aabb.toArray();
     if (!sw || !sh)
       return;
     const zw = tw / sw;
@@ -3990,10 +4140,22 @@ const _zoom$1 = defineMixin((editor) => {
     let targetZoom;
     if (typeof target === "number") {
       targetZoom = target;
-    } else if (mode === "cover") {
-      targetZoom = Math.max(zw, zh);
     } else {
-      targetZoom = Math.min(zw, zh);
+      switch (mode) {
+        case "width":
+          targetZoom = zw;
+          break;
+        case "height":
+          targetZoom = zh;
+          break;
+        case "cover":
+          targetZoom = Math.max(zw, zh);
+          break;
+        case "contain":
+        default:
+          targetZoom = Math.min(zw, zh);
+          break;
+      }
     }
     const oldZoom = Math.min(_camera.zoom.x, _camera.zoom.y);
     const newZoom = Math.min(
@@ -4196,12 +4358,12 @@ const _arrange = definePlugin((editor) => {
       { command: "sendBackward", key: "CmdOrCtrl+[" },
       { command: "bringToFront", key: "]" },
       { command: "sendToBack", key: "[" },
-      { command: "alignLeft", key: "Alt+a" },
-      { command: "alignRight", key: "Alt+d" },
-      { command: "alignTop", key: "Alt+w" },
-      { command: "alignBottom", key: "Alt+s" },
-      { command: "alignHorizontalCenter", key: "Alt+h" },
-      { command: "alignVerticalCenter", key: "Alt+v" }
+      { command: "alignLeft", key: "Alt+A" },
+      { command: "alignRight", key: "Alt+D" },
+      { command: "alignTop", key: "Alt+W" },
+      { command: "alignBottom", key: "Alt+S" },
+      { command: "alignHorizontalCenter", key: "Alt+H" },
+      { command: "alignVerticalCenter", key: "Alt+V" }
     ]
   };
 });
@@ -4539,10 +4701,10 @@ const _edit = definePlugin((editor, options) => {
       { command: "duplicate", handle: duplicate }
     ],
     hotkeys: [
-      { command: "copy", key: "CmdOrCtrl+c", editable: false },
-      { command: "cut", key: "CmdOrCtrl+x", editable: false },
-      { command: "paste", key: "CmdOrCtrl+v", editable: false, preventDefault: false },
-      { command: "duplicate", key: "CmdOrCtrl+d", editable: false }
+      { command: "copy", key: "CmdOrCtrl+C", editable: false },
+      { command: "cut", key: "CmdOrCtrl+X", editable: false },
+      { command: "paste", key: "CmdOrCtrl+V", editable: false, preventDefault: false },
+      { command: "duplicate", key: "CmdOrCtrl+D", editable: false }
     ],
     setup: () => {
       if (useClipboard) {
@@ -5287,8 +5449,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         const cloend = renderEngine.value.input._clonePointerEvent(event);
         cloend.srcElement = drawboardDom.value;
         cloend.target = frame.value;
-        exec("startPointerdown", cloend, {
-          allowRootFrame: true
+        cloend.__FROM__ = event.target;
+        exec("pointerDown", cloend, {
+          allowTopFrame: true
         });
       }
     }
@@ -5391,7 +5554,7 @@ const _frame = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "setActiveDrawingTool:frame", key: "f" }
+      { command: "setActiveDrawingTool:frame", key: "F" }
     ]
   };
 });
@@ -5509,8 +5672,8 @@ const _group = definePlugin((editor) => {
       { command: "ungroup", handle: ungroup }
     ],
     hotkeys: [
-      { command: "groupSelection", key: "CmdOrCtrl+g" },
-      { command: "frameSelection", key: "Alt+CmdOrCtrl+g" },
+      { command: "groupSelection", key: "CmdOrCtrl+G" },
+      { command: "frameSelection", key: "Alt+CmdOrCtrl+G" },
       { command: "ungroup", key: "CmdOrCtrl+Backspace" }
     ]
   };
@@ -5547,8 +5710,8 @@ const _history = definePlugin((editor) => {
       { command: "redo", handle: redo }
     ],
     hotkeys: [
-      { command: "undo", key: "CmdOrCtrl+z" },
-      { command: "redo", key: "Shift+CmdOrCtrl+z" }
+      { command: "undo", key: "CmdOrCtrl+Z" },
+      { command: "redo", key: "Shift+CmdOrCtrl+Z" }
     ]
   };
 });
@@ -5702,8 +5865,8 @@ const _image = definePlugin((editor) => {
       { name: "image", handle: (position) => exec("import", { position }) }
     ],
     hotkeys: [
-      { command: "copyAs:png", key: "Shift+CmdOrCtrl+c" },
-      { command: "setActiveDrawingTool:image", key: "Shift+CmdOrCtrl+k" }
+      { command: "copyAs:png", key: "Shift+CmdOrCtrl+C" },
+      { command: "setActiveDrawingTool:image", key: "Shift+CmdOrCtrl+K" }
     ]
   };
 });
@@ -5734,7 +5897,7 @@ const _import = definePlugin((editor) => {
       { command: "import", handle: _import2 }
     ],
     hotkeys: [
-      { command: "import", key: "CmdOrCtrl+i" }
+      { command: "import", key: "CmdOrCtrl+I" }
     ],
     setup: () => {
       const {
@@ -6274,7 +6437,7 @@ const _lock = definePlugin((editor) => {
       { command: "lock/unlock", handle: () => selection.value.forEach((el) => setLock(el, !isLock(el))) }
     ],
     hotkeys: [
-      { command: "lock/unlock", key: "Shift+CmdOrCtrl+l" }
+      { command: "lock/unlock", key: "Shift+CmdOrCtrl+L" }
     ]
   };
 });
@@ -7216,7 +7379,7 @@ const _open = definePlugin((editor) => {
       { command: "open", handle: open }
     ],
     hotkeys: [
-      { command: "open", key: "CmdOrCtrl+o" }
+      { command: "open", key: "CmdOrCtrl+O" }
     ]
   };
 });
@@ -7230,7 +7393,7 @@ const _panels = definePlugin((editor) => {
       { command: "panels", handle: (panel) => config.value[panel] = !config.value[panel] }
     ],
     hotkeys: [
-      { command: "panels:layers", key: "Alt+¡" }
+      { command: "panels:layers", key: "Alt+1" }
     ]
   };
 });
@@ -11303,8 +11466,8 @@ const _pen = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "setActiveDrawingTool:pen", key: "p" },
-      { command: "setActiveDrawingTool:pencil", key: "Shift+p" }
+      { command: "setActiveDrawingTool:pen", key: "P" },
+      { command: "setActiveDrawingTool:pencil", key: "Shift+P" }
     ]
   };
 });
@@ -12021,8 +12184,8 @@ const _selection = definePlugin((editor) => {
       { command: "selectNextSibling", handle: () => selectSibling("next") }
     ],
     hotkeys: [
-      { command: "selectAll", key: "CmdOrCtrl+a" },
-      { command: "deselectAll", key: "Shift+CmdOrCtrl+a" },
+      { command: "selectAll", key: "CmdOrCtrl+A" },
+      { command: "deselectAll", key: "Shift+CmdOrCtrl+A" },
       { command: "selectChildren", key: "Enter" },
       { command: "selectParent", key: "\\" },
       { command: "selectPreviousSibling", key: "Shift+Tab" },
@@ -12197,10 +12360,10 @@ const _shape = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "setActiveDrawingTool:rectangle", key: "r" },
-      { command: "setActiveDrawingTool:line", key: "l" },
-      { command: "setActiveDrawingTool:arrow", key: "Shift+l" },
-      { command: "setActiveDrawingTool:ellipse", key: "o" }
+      { command: "setActiveDrawingTool:rectangle", key: "R" },
+      { command: "setActiveDrawingTool:line", key: "L" },
+      { command: "setActiveDrawingTool:arrow", key: "Shift+L" },
+      { command: "setActiveDrawingTool:ellipse", key: "O" }
     ]
   };
 });
@@ -13547,8 +13710,8 @@ const _state = definePlugin((editor) => {
       { command: "setState", handle: (val) => state.value = val }
     ],
     hotkeys: [
-      { command: "setState:move", key: "v" },
-      { command: "setState:hand", key: "h" }
+      { command: "setState:move", key: "V" },
+      { command: "setState:hand", key: "H" }
     ]
   };
 });
@@ -13779,7 +13942,7 @@ const _text = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "setActiveDrawingTool:text", key: "t" }
+      { command: "setActiveDrawingTool:text", key: "T" }
     ]
   };
 });
@@ -14110,7 +14273,7 @@ const _timeline = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "panels:timeline", key: "Alt+™" }
+      { command: "panels:timeline", key: "Alt+2" }
     ]
   };
 });
@@ -14326,25 +14489,14 @@ const _transform = definePlugin((editor) => {
       { command: "flipVertical", handle: flipVertical }
     ],
     hotkeys: [
-      { command: "flipHorizontal", key: "Shift+h" },
-      { command: "flipVertical", key: "Shift+v" }
+      { command: "flipHorizontal", key: "Shift+H" },
+      { command: "flipVertical", key: "Shift+V" }
     ]
   };
 });
-const _ui = definePlugin((editor) => {
-  const {
-    selectionAabbInDrawboard,
-    emit
-  } = editor;
+const _ui = definePlugin(() => {
   return {
-    name: "mce:ui",
-    setup: () => {
-      watch(
-        selectionAabbInDrawboard,
-        (aabb) => emit("setTransform", { aabb }),
-        { deep: true }
-      );
-    }
+    name: "mce:ui"
   };
 });
 const _url = definePlugin((editor) => {
@@ -14416,7 +14568,7 @@ const _visibility = definePlugin((editor) => {
       { command: "hide/show", handle: hideOrShow }
     ],
     hotkeys: [
-      { command: "hide/show", key: "Shift+CmdOrCtrl+h" }
+      { command: "hide/show", key: "Shift+CmdOrCtrl+H" }
     ]
   };
 });
@@ -14426,7 +14578,6 @@ const _zoom = definePlugin((editor) => {
     camera,
     drawboardAabb,
     zoomTo,
-    elementSelection,
     exec,
     config,
     findFrame,
@@ -14446,7 +14597,6 @@ const _zoom = definePlugin((editor) => {
       { command: "zoomIn", handle: () => camera.value.addZoom(0.25) },
       { command: "zoomOut", handle: () => camera.value.addZoom(-0.25) },
       { command: "zoomTo100", handle: () => camera.value.setZoom(1) },
-      { command: "zoomToCover", handle: () => zoomTo("root", { mode: "cover" }) },
       { command: "zoomToFit", handle: () => zoomTo("root", { mode: config.value.zoomToFit }) },
       { command: "zoomToSelection", handle: (options) => zoomTo("selection", options) },
       { command: "zoomToNextFrame", handle: (options) => zoomToFrame("next", options) },
@@ -14456,20 +14606,13 @@ const _zoom = definePlugin((editor) => {
       { command: "zoomIn", key: "CmdOrCtrl+=" },
       { command: "zoomOut", key: "CmdOrCtrl+-" },
       { command: "zoomTo100", key: "CmdOrCtrl+0" },
-      { command: "zoomToFit", key: "Shift+!" },
-      { command: "zoomToSelection", key: "Shift+@" },
-      { command: "zoomToNextFrame", key: "n" },
+      { command: "zoomToFit", key: "Shift+1" },
+      { command: "zoomToSelection", key: "Shift+2" },
+      { command: "zoomToNextFrame", key: "N" },
       { command: "zoomToPreviousFrame", key: "Shift+N" }
     ],
     events: {
-      setDoc: () => exec("zoomToFit"),
-      setCurrentFrame: () => {
-        if (elementSelection.value.length) {
-          exec("zoomToSelection");
-        } else {
-          exec("zoomToFit");
-        }
-      }
+      setDoc: () => exec("zoomToFit")
     },
     setup: () => {
       const {
@@ -15535,6 +15678,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const {
+      emit,
       isElement,
       state,
       resizeElement,
@@ -15551,14 +15695,18 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       isLock,
       config,
       snapThreshold,
-      getSnapPoints,
-      handleDragOutReparent,
-      getGlobalPointer
+      getSnapPoints
     } = useEditor();
     const transformable = useTemplateRef("transformableTpl");
-    const startContext = ref({});
+    const startEvent = ref();
     onBeforeMount(() => {
-      registerCommand({ command: "startTransform", handle: (e) => Boolean(transformable.value?.start(e)) });
+      registerCommand({
+        command: "startTransform",
+        handle: (event) => {
+          startEvent.value = event;
+          Boolean(transformable.value?.start(event));
+        }
+      });
     });
     onBeforeUnmount(() => {
       unregisterCommand("startTransform");
@@ -15629,6 +15777,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }
       return currentPos;
     }
+    function createSelectionTransformContext() {
+      return {
+        startEvent: startEvent.value,
+        handle: transformable.value?.activeHandle ?? "move",
+        elements: elementSelection.value
+      };
+    }
     const transform = computed({
       get: () => _transform2.value,
       set: (val) => {
@@ -15655,7 +15810,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           rotate: transform2.rotate - (oldTransform.rotate ?? 0),
           borderRadius: transform2.borderRadius - (oldTransform.borderRadius ?? 0) / zoom.y
         };
-        elementSelection.value.forEach((element) => {
+        const elements = elementSelection.value;
+        elements.forEach((element) => {
           const style = element.style;
           const newStyle = {
             left: style.left + offsetStyle.left,
@@ -15689,14 +15845,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             }
             return false;
           });
-          handleDragOutReparent(
-            element,
-            {
-              ...startContext.value[element.instanceId],
-              pointer: getGlobalPointer()
-            }
-          );
         });
+        emit("selectionTransforming", createSelectionTransformContext());
       }
     });
     const movable = computed(() => {
@@ -15719,14 +15869,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       return elementSelection.value.length === 1 && !isLock(element) && element.foreground.isValid();
     });
     function onStart() {
-      const ctx = {};
-      elementSelection.value.forEach((el) => {
-        ctx[el.instanceId] = {
-          parent: el.getParent(),
-          index: el.getIndex()
-        };
-      });
-      startContext.value = ctx;
+      emit("selectionTransformStart", createSelectionTransformContext());
     }
     function onMove() {
       if (!state.value) {
@@ -15737,7 +15880,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       if (state.value === "transforming") {
         state.value = void 0;
       }
-      startContext.value = {};
+      emit("selectionTransformEnd", createSelectionTransformContext());
     }
     function tipFormat() {
       const obb = elementSelection.value.length === 1 ? elementSelection.value[0].style : selectionObb.value;
@@ -16201,7 +16344,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           hovered = result;
         }
       }
-      if (!(isElement(hovered) && !isLock(hovered) && !hovered.findAncestor((ancestor) => isLock(ancestor)) && !isTopFrame(hovered))) {
+      if (!(isElement(hovered) && !isLock(hovered) && !hovered.findAncestor((ancestor) => isLock(ancestor)) && (!hovered.children.some((node) => isElement(node)) || !isTopFrame(hovered)))) {
         hovered = void 0;
         cursor = void 0;
       }
@@ -16213,10 +16356,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return;
       }
       const {
-        allowRootFrame = false
+        allowTopFrame = false
       } = options;
       function isIncluded(node) {
-        return isElement(node) && !isLock(node) && (allowRootFrame || !isTopFrame(node)) && !node.findAncestor((ancestor) => isLock(ancestor));
+        return isElement(node) && !isLock(node) && (allowTopFrame || (!node.children.some((node2) => isElement(node2)) || !isTopFrame(node))) && !node.findAncestor((ancestor) => isLock(ancestor));
       }
       const drawing = state.value === "drawing";
       const hand = state.value === "hand";
@@ -16229,7 +16372,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       let isUp = false;
       let selected = [];
       let ctxState;
-      const inSelection = selectionAabbInDrawboard.value.contains({
+      const inSelection = allowTopFrame && elementSelection.value.some((node) => node.equal(element)) || selectionAabbInDrawboard.value.contains({
         x: start.x - drawboardAabb.value.left,
         y: start.y - drawboardAabb.value.top
       });
@@ -16401,7 +16544,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       document.addEventListener("pointermove", onMove);
       document.addEventListener("pointerup", onUp);
     }
-    editor.registerCommand({ command: "startPointerdown", handle: onPointerdown });
+    editor.registerCommand({ command: "pointerDown", handle: onPointerdown });
     function onPointermove(event) {
       if (event.srcElement !== drawboardDom.value) {
         return;
@@ -16657,6 +16800,7 @@ export {
   imageExts,
   imageMimeTypeExtMap,
   isClickInsideElement,
+  isInputElement,
   isInputEvent,
   isMac,
   isWindows,

package/dist/mixins/zoom.d.ts

@@ -2,7 +2,7 @@ import type { Element2D } from 'modern-canvas';
 declare global {
     namespace Mce {
         type ZoomTarget = 'root' | 'selection' | Element2D | Element2D[] | number;
-        type ZoomToMode = 'contain' | 'cover';
+        type ZoomToMode = 'contain' | 'cover' | 'width' | 'height';
         interface ZoomToOptions {
             intoView?: boolean;
             mode?: ZoomToMode;

package/dist/plugins/ui.d.ts

@@ -1,21 +1,26 @@
-import type { PointerInputEvent } from 'modern-canvas';
-import type { AxisAlignedBoundingBox } from '../types';
+import type { Element2D, PointerInputEvent } from 'modern-canvas';
 declare global {
     namespace Mce {
-        interface StartPointerdownOptions {
-            allowRootFrame?: boolean;
+        interface PointerDownOptions {
+            allowTopFrame?: boolean;
         }
         interface Commands {
-            startPointerdown: (e: PointerInputEvent, options?: StartPointerdownOptions) => void;
+            pointerDown: (e: PointerInputEvent, options?: PointerDownOptions) => void;
             startTyping: (e?: MouseEvent | PointerEvent) => Promise<boolean>;
             startTransform: (e?: MouseEvent | PointerEvent) => boolean;
             openContextMenu: (e?: MouseEvent | PointerEvent) => boolean;
             layerScrollIntoView: () => boolean;
         }
+        type TransformableHandle = 'move' | 'resize-top' | 'resize-right' | 'resize-bottom' | 'resize-left' | 'resize-top-left' | 'resize-top-right' | 'resize-bottom-left' | 'resize-bottom-right' | 'rotate-top-left' | 'rotate-top-right' | 'rotate-bottom-left' | 'rotate-bottom-right' | 'border-radius-top-left' | 'border-radius-top-right' | 'border-radius-bottom-left' | 'border-radius-bottom-right';
+        interface SelectionTransformContext {
+            startEvent: MouseEvent | PointerEvent;
+            handle: TransformableHandle;
+            elements: Element2D[];
+        }
         interface Events {
-            setTransform: [value: {
-                aabb: AxisAlignedBoundingBox;
-            }];
+            selectionTransformStart: [context: SelectionTransformContext];
+            selectionTransforming: [context: SelectionTransformContext];
+            selectionTransformEnd: [context: SelectionTransformContext];
         }
     }
 }

package/dist/plugins/zoom.d.ts

@@ -8,7 +8,6 @@ declare global {
             zoomOut: () => void;
             zoomTo100: () => void;
             zoomToFit: () => void;
-            zoomToCover: () => void;
             zoomToSelection: (options?: ZoomToOptions) => void;
         }
         interface Hotkeys {
@@ -16,7 +15,6 @@ declare global {
             zoomOut: [event: KeyboardEvent];
             zoomTo100: [event: KeyboardEvent];
             zoomToFit: [event: KeyboardEvent];
-            zoomToCover: [event: KeyboardEvent];
             zoomToSelection: [event: KeyboardEvent];
         }
         interface Editor {

package/dist/utils/helper.d.ts

@@ -11,6 +11,7 @@ export declare function convertToUnit(str: number, unit?: string): string;
 export declare function convertToUnit(str: string | number | null | undefined, unit?: string): string | undefined;
 export declare function templateRef(): TemplateRef;
 export declare function findChildrenWithProvide(key: InjectionKey<any> | symbol, vnode?: VNodeChild): ComponentInternalInstance[];
+export declare function isInputElement(target: HTMLElement): boolean;
 export declare function isInputEvent(event?: Event): boolean;
 export declare function toKebabCase(str?: string): string;
 export declare namespace toKebabCase {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.23",
+  "version": "0.15.25",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",