mce 0.15.33 → 0.15.34

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, Aabb2D, IN_BROWSER, clamp, assets, TimelineNode, Video2D, Transform2D, Obb2D, render, Vector2 as Vector2$1, Lottie2D, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
-import { reactive, computed, watch, markRaw, isReactive, ref, warn, shallowRef, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle as normalizeStyle$1, toDisplayString, onBeforeUnmount, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, withModifiers, vModelText, vShow, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
+import { reactive, computed, watch, markRaw, isReactive, ref, onBeforeMount, onScopeDispose, warn, shallowRef, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle as normalizeStyle$1, toDisplayString, onMounted, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, onBeforeUnmount, readonly, toRef, onDeactivated, onActivated, useModel, useTemplateRef, withDirectives, withModifiers, vModelText, vShow, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, h, isRef, effectScope, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useResizeObserver as useResizeObserver$1, useLocalStorage, useImage } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeTextContent, isCRLF, textContentToString, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
@@ -885,7 +885,6 @@ const _0_context = defineMixin((editor) => {
   _renderEngine.root.append(camera.value);
   _renderEngine.root.append(drawboardEffect.value);
   const renderEngine = ref(_renderEngine);
-  renderEngine.value.start();
   const drawboardDom = ref();
   const drawboardAabb = ref(new Aabb2D());
   const drawboardPointer = ref();
@@ -998,6 +997,7 @@ const _0_context = defineMixin((editor) => {
   return () => {
     const {
       on,
+      off,
       root: root2,
       state: state2
     } = editor;
@@ -1016,7 +1016,9 @@ const _0_context = defineMixin((editor) => {
       nodes.value.push(node);
       nodeIndexMap.set(node.id, nodes.value.length - 1);
     }
-    on("setDoc", () => updateNodes());
+    function onSetDoc() {
+      updateNodes();
+    }
     watch(selection, (value) => {
       window.$$0 = value[0];
     });
@@ -1024,6 +1026,14 @@ const _0_context = defineMixin((editor) => {
       textSelection.value = void 0;
       hoverElement.value = void 0;
     });
+    onBeforeMount(() => {
+      on("setDoc", onSetDoc);
+      renderEngine.value.start();
+    });
+    onScopeDispose(() => {
+      off("setDoc", onSetDoc);
+      renderEngine.value.stop();
+    });
   };
 });
 const _0_font = defineMixin((editor, options) => {
@@ -1077,7 +1087,7 @@ const en = {
   "selectObject": "Select object",
   "commitChanges": "Commit changes",
   "extend": "Extend",
-  "goBackSelectedArea": "Go back selected area",
+  "scrollToSelection": "Scroll to selection",
   "selectArea": "Select area",
   "dragSelected": "Drag selected",
   "startTyping": "Start typing",
@@ -1193,7 +1203,7 @@ const zhHans = {
   "selectObject": "选择对象",
   "commitChanges": "提交修改",
   "extend": "扩展",
-  "goBackSelectedArea": "返回选中区域",
+  "scrollToSelection": "返回选中区域",
   "selectArea": "选择区域",
   "dragSelected": "拖拽选择的",
   "startTyping": "编辑文字",
@@ -1939,14 +1949,21 @@ const _1_timeline = defineMixin((editor) => {
   });
   return () => {
     const {
-      on
+      on,
+      off
     } = editor;
     async function updateEndTime() {
       await renderEngine.value.nextTick();
       timeline.value.endTime = root.value ? getTimeRange(root.value).endTime : 0;
     }
-    assets.on("loaded", updateEndTime);
-    on("setDoc", updateEndTime);
+    onBeforeMount(() => {
+      on("setDoc", updateEndTime);
+      assets.on("loaded", updateEndTime);
+    });
+    onScopeDispose(() => {
+      off("setDoc", updateEndTime);
+      assets.off("loaded", updateEndTime);
+    });
   };
 });
 const _1_upload = defineMixin((editor, options) => {
@@ -2047,14 +2064,7 @@ const _2_box = defineMixin((editor) => {
       obb = new Obb2D();
     }
     if (inTarget === "drawboard") {
-      const zoom = camera.value.zoom;
-      const position = camera.value.position;
-      obb.left *= zoom.x;
-      obb.top *= zoom.y;
-      obb.width *= zoom.x;
-      obb.height *= zoom.y;
-      obb.left -= position.x;
-      obb.top -= position.y;
+      obb = obbToDrawboardObb(obb);
     } else if (inTarget === "frame") {
       const first = Array.isArray(node) ? node[0] : node;
       if (isElement(first)) {
@@ -2150,6 +2160,18 @@ const _2_box = defineMixin((editor) => {
     _aabb.top -= position.y;
     return _aabb;
   }
+  function obbToDrawboardObb(obb) {
+    const _obb = new Obb2D(obb);
+    const zoom = camera.value.zoom;
+    const position = camera.value.position;
+    _obb.left *= zoom.x;
+    _obb.top *= zoom.y;
+    _obb.width *= zoom.x;
+    _obb.height *= zoom.y;
+    _obb.left -= position.x;
+    _obb.top -= position.y;
+    return _obb;
+  }
   const viewportAabb = computed(() => {
     const _camera = camera.value;
     const { position, zoom } = _camera;
@@ -2172,12 +2194,13 @@ const _2_box = defineMixin((editor) => {
   });
   const rootAabb = computed(() => getAabb(root.value.children));
   const selectionAabb = computed(() => getAabb(selection.value));
-  const selectionAabbInDrawboard = computed(() => getAabb(selection.value, "drawboard"));
+  const selectionAabbInDrawboard = computed(() => aabbToDrawboardAabb(selectionAabb.value));
   const selectionObb = computed(() => getObb(selection.value));
-  const selectionObbInDrawboard = computed(() => getObb(selection.value, "drawboard"));
+  const selectionObbInDrawboard = computed(() => obbToDrawboardObb(selectionObb.value));
   Object.assign(editor, {
     obbToFit,
     getObb,
+    obbToDrawboardObb,
     getAabb,
     aabbToDrawboardAabb,
     viewportAabb,
@@ -3932,106 +3955,6 @@ const _http = defineMixin((editor, options) => {
     http: options.http ?? createHttp()
   });
 });
-const _scroll$1 = defineMixin((editor) => {
-  const {
-    camera,
-    getAabb,
-    selectionAabb,
-    rootAabb,
-    viewportAabb,
-    screenCenter,
-    screenCenterOffset
-  } = editor;
-  const scrollTo = async (target, options = {}) => {
-    const {
-      intoView,
-      behavior,
-      duration = 500
-    } = options;
-    const _camera = camera.value;
-    const { position: _position, zoom } = _camera;
-    const oldPosition = { x: _position.x, y: _position.y };
-    const _screenCenter = screenCenter.value;
-    const offset2 = { x: 0, y: 0 };
-    let targetPosition = {};
-    if (typeof target === "object") {
-      if ("x" in target) {
-        targetPosition.x = target.x;
-        offset2.x = -screenCenterOffset.value.left;
-      }
-      if ("y" in target) {
-        targetPosition.y = target.y;
-        offset2.y = -screenCenterOffset.value.top;
-      }
-    } else {
-      let aabb;
-      if (Array.isArray(target)) {
-        aabb = getAabb(target);
-      } else {
-        switch (target) {
-          case "selection":
-            aabb = selectionAabb.value;
-            break;
-          case "root":
-          default:
-            aabb = rootAabb.value;
-            break;
-        }
-      }
-      if (intoView && viewportAabb.value.contains(aabb)) {
-        return;
-      }
-      targetPosition = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
-      offset2.x += -_screenCenter.x;
-      offset2.y = -_screenCenter.y;
-    }
-    if (targetPosition.x !== void 0) {
-      targetPosition.x *= zoom.x;
-      targetPosition.x += offset2.x;
-    }
-    if (targetPosition.y !== void 0) {
-      targetPosition.y *= zoom.y;
-      targetPosition.y += offset2.y;
-    }
-    const position = {
-      ...oldPosition,
-      ...targetPosition
-    };
-    switch (behavior) {
-      case "smooth":
-        await new Promise((resolve) => {
-          const positionDistance = {
-            x: position.x - oldPosition.x,
-            y: position.y - oldPosition.y
-          };
-          const startTime = performance.now();
-          function step(now) {
-            const elapsed = now - startTime;
-            const progress = Math.min(elapsed / duration, 1);
-            const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
-            _position.set(
-              oldPosition.x + positionDistance.x * ease,
-              oldPosition.y + positionDistance.y * ease
-            );
-            if (elapsed < duration) {
-              requestAnimationFrame(step);
-            } else {
-              resolve();
-            }
-          }
-          requestAnimationFrame(step);
-        });
-        break;
-      case "instant":
-      default:
-        _position.set(position.x, position.y);
-        break;
-    }
-  };
-  Object.assign(editor, {
-    scrollTo
-  });
-});
 const _snapshot = defineMixin((editor) => {
   const {
     isElement,
@@ -4092,10 +4015,11 @@ const _snapshot = defineMixin((editor) => {
   return () => {
     const {
       on,
+      off,
       config,
       inEditorIs
     } = editor;
-    on("setDoc", (doc) => {
+    function onSetDoc(doc) {
       if (config.value.frameScreenshot) {
         snapshot();
       }
@@ -4121,130 +4045,14 @@ const _snapshot = defineMixin((editor) => {
       }
       doc.root.on("addChild", onAddChild);
       doc.root.on("removeChild", onRemoveChild);
-    });
-  };
-});
-const _zoom$1 = defineMixin((editor) => {
-  const {
-    camera,
-    drawboardAabb,
-    selectionAabb,
-    rootAabb,
-    getAabb,
-    screenCenterOffset,
-    viewportAabb
-  } = editor;
-  const zoomTo = async (target, options = {}) => {
-    const {
-      intoView,
-      mode = "contain",
-      duration = 500,
-      behavior
-    } = options;
-    let aabb;
-    if (Array.isArray(target) || typeof target === "object") {
-      aabb = getAabb(target);
-    } else {
-      switch (target) {
-        case "selection":
-          aabb = selectionAabb.value;
-          break;
-        case "root":
-        default:
-          aabb = rootAabb.value;
-          break;
-      }
-    }
-    if (intoView && viewportAabb.value.contains(aabb)) {
-      return;
-    }
-    const offset2 = screenCenterOffset.value;
-    const { width, height } = drawboardAabb.value;
-    const tw = width - (offset2.left + offset2.right);
-    const th = height - (offset2.top + offset2.bottom);
-    const [sx, sy, sw, sh] = aabb.toArray();
-    if (!sw || !sh)
-      return;
-    const zw = tw / sw;
-    const zh = th / sh;
-    const _camera = camera.value;
-    let targetZoom;
-    if (typeof target === "number") {
-      targetZoom = target;
-    } else {
-      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(
-      clamp(targetZoom, _camera.minZoom.x, _camera.maxZoom.x),
-      clamp(targetZoom, _camera.minZoom.y, _camera.maxZoom.y)
-    );
-    let x = offset2.left;
-    let y = offset2.top;
-    if (zw < zh) {
-      y += (th - sh * newZoom) / 2;
-    } else {
-      x += (tw - sw * newZoom) / 2;
-    }
-    const oldPosition = {
-      x: _camera.position.x,
-      y: _camera.position.y
-    };
-    const newPosition = {
-      x: sx * newZoom - x,
-      y: sy * newZoom - y
-    };
-    switch (behavior) {
-      case "smooth":
-        await new Promise((resolve) => {
-          const zoomDistance = newZoom - oldZoom;
-          const positionDistance = {
-            x: newPosition.x - oldPosition.x,
-            y: newPosition.y - oldPosition.y
-          };
-          const startTime = performance.now();
-          function step(now) {
-            const elapsed = now - startTime;
-            const progress = Math.min(elapsed / duration, 1);
-            const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
-            _camera.zoom.set(oldZoom + zoomDistance * ease);
-            _camera.position.set(
-              oldPosition.x + positionDistance.x * ease,
-              oldPosition.y + positionDistance.y * ease
-            );
-            if (elapsed < duration) {
-              requestAnimationFrame(step);
-            } else {
-              resolve();
-            }
-          }
-          requestAnimationFrame(step);
-        });
-        break;
-      case "instant":
-      default:
-        _camera.zoom.set(newZoom);
-        _camera.position.set(newPosition.x, newPosition.y);
-        break;
     }
+    onBeforeMount(() => {
+      on("setDoc", onSetDoc);
+    });
+    onScopeDispose(() => {
+      off("setDoc", onSetDoc);
+    });
   };
-  Object.assign(editor, {
-    zoomTo
-  });
 });
 const mixins = [
   _0_command,
@@ -4269,9 +4077,7 @@ const mixins = [
   _4_4_doc,
   _drawingTool$1,
   _http,
-  _scroll$1,
-  _snapshot,
-  _zoom$1
+  _snapshot
 ];
 function definePlugin(cb) {
   return cb;
@@ -4539,7 +4345,7 @@ const _autoNest = definePlugin((editor) => {
           }
         }
       },
-      selectionTransforming: ({ handle, startEvent, elements }) => {
+      selectionTransform: ({ handle, startEvent, elements }) => {
         if (handle === "move" && !startEvent?.__FROM__) {
           if (Object.keys(startContext).length > 0) {
             elements.forEach((el) => {
@@ -4617,11 +4423,11 @@ const _drawingTool = definePlugin((editor) => {
   } = editor;
   return {
     name: "mce:drawingTool",
-    components: [
-      { name: "drawing", type: "overlay", component: _sfc_main$E }
-    ],
     commands: [
       { command: "setActiveDrawingTool", handle: (val) => setActiveDrawingTool(val) }
+    ],
+    components: [
+      { name: "drawing", type: "overlay", component: _sfc_main$E }
     ]
   };
 });
@@ -4885,8 +4691,8 @@ const _edit = definePlugin((editor, options) => {
             await paste(e.clipboardData);
           }
         }
-        window.addEventListener("paste", onPaste);
-        onBeforeUnmount(() => window.removeEventListener("paste", onPaste));
+        onMounted(() => window.addEventListener("paste", onPaste));
+        onScopeDispose(() => window.removeEventListener("paste", onPaste));
       }
     }
   };
@@ -6008,7 +5814,7 @@ const _import = definePlugin((editor) => {
         drawboardDom.value?.addEventListener("dragover", onDragover);
         drawboardDom.value?.addEventListener("drop", onDrop);
       });
-      onBeforeUnmount(() => {
+      onScopeDispose(() => {
         drawboardDom.value?.removeEventListener("dragover", onDragover);
         drawboardDom.value?.removeEventListener("drop", onDrop);
       });
@@ -6161,7 +5967,6 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       selection,
       nodes,
       nodeIndexMap,
-      zoomTo,
       hoverElement,
       exec,
       t
@@ -6286,7 +6091,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     function onDblclickThumbnail(e) {
       e.stopPropagation();
       if (isElement(props.node)) {
-        zoomTo("selection", {
+        exec("zoomTo", "selection", {
           behavior: "smooth"
         });
       }
@@ -12213,22 +12018,115 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
 });
 const _scroll = definePlugin((editor) => {
   const {
-    scrollTo,
     config,
-    registerConfig
+    registerConfig,
+    camera,
+    getAabb,
+    selectionAabb,
+    rootAabb,
+    viewportAabb,
+    screenCenter,
+    screenCenterOffset
   } = editor;
   registerConfig("scrollbar", false);
-  return {
-    name: "mce:scroll",
-    commands: [
-      { command: "scrollToSelection", handle: (options) => scrollTo("selection", options) }
-    ],
-    components: [
-      {
-        type: "overlay",
-        component: _sfc_main$n,
-        ignore: () => !config.value.scrollbar
-      }
+  const scrollTo = async (target, options = {}) => {
+    const {
+      intoView,
+      behavior,
+      duration = 500
+    } = options;
+    const _camera = camera.value;
+    const { position: _position, zoom } = _camera;
+    const oldPosition = { x: _position.x, y: _position.y };
+    const _screenCenter = screenCenter.value;
+    const offset2 = { x: 0, y: 0 };
+    let targetPosition = {};
+    if (typeof target === "object") {
+      if ("x" in target) {
+        targetPosition.x = target.x;
+        offset2.x = -screenCenterOffset.value.left;
+      }
+      if ("y" in target) {
+        targetPosition.y = target.y;
+        offset2.y = -screenCenterOffset.value.top;
+      }
+    } else {
+      let aabb;
+      if (Array.isArray(target)) {
+        aabb = getAabb(target);
+      } else {
+        switch (target) {
+          case "selection":
+            aabb = selectionAabb.value;
+            break;
+          case "root":
+          default:
+            aabb = rootAabb.value;
+            break;
+        }
+      }
+      if (intoView && viewportAabb.value.contains(aabb)) {
+        return;
+      }
+      targetPosition = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
+      offset2.x += -_screenCenter.x;
+      offset2.y = -_screenCenter.y;
+    }
+    if (targetPosition.x !== void 0) {
+      targetPosition.x *= zoom.x;
+      targetPosition.x += offset2.x;
+    }
+    if (targetPosition.y !== void 0) {
+      targetPosition.y *= zoom.y;
+      targetPosition.y += offset2.y;
+    }
+    const position = {
+      ...oldPosition,
+      ...targetPosition
+    };
+    switch (behavior) {
+      case "smooth":
+        await new Promise((resolve) => {
+          const positionDistance = {
+            x: position.x - oldPosition.x,
+            y: position.y - oldPosition.y
+          };
+          const startTime = performance.now();
+          function step(now) {
+            const elapsed = now - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
+            _position.set(
+              oldPosition.x + positionDistance.x * ease,
+              oldPosition.y + positionDistance.y * ease
+            );
+            if (elapsed < duration) {
+              requestAnimationFrame(step);
+            } else {
+              resolve();
+            }
+          }
+          requestAnimationFrame(step);
+        });
+        break;
+      case "instant":
+      default:
+        _position.set(position.x, position.y);
+        break;
+    }
+  };
+  return {
+    name: "mce:scroll",
+    commands: [
+      { command: "scrollTo", handle: scrollTo },
+      { command: "scrollToSelection", handle: (options) => scrollTo("selection", options) }
+    ],
+    components: [
+      {
+        type: "overlay",
+        component: _sfc_main$n,
+        ignore: () => !config.value.scrollbar
+      }
     ]
     // setup: () => {
     //   const {
@@ -12263,7 +12161,7 @@ const _scroll = definePlugin((editor) => {
   };
 });
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  __name: "GoBackSelectedArea",
+  __name: "ScrollToSelection",
   setup(__props) {
     const {
       selectionAabb,
@@ -12277,11 +12175,11 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return isActive.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: "mce-back-selected-aera",
+        class: "mce-scroll-to-selection",
         onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
       }, [
         createVNode(unref(_sfc_main$D), { icon: "$gps" }),
-        createElementVNode("span", null, toDisplayString(unref(t)("goBackSelectedArea")), 1)
+        createElementVNode("span", null, toDisplayString(unref(t)("scrollToSelection")), 1)
       ])) : createCommentVNode("", true);
     };
   }
@@ -12295,7 +12193,6 @@ const _selection = definePlugin((editor) => {
     getAabb,
     doc,
     root,
-    zoomTo,
     findSibling,
     inEditorIs,
     addElement,
@@ -12304,7 +12201,8 @@ const _selection = definePlugin((editor) => {
     setVisible,
     isVisible,
     setLock,
-    isLock
+    isLock,
+    exec
   } = editor;
   function select(target) {
     switch (target) {
@@ -12336,7 +12234,7 @@ const _selection = definePlugin((editor) => {
         const value = findSibling(target === "previousSibling" ? "previous" : "next");
         if (value) {
           selection.value = [value];
-          zoomTo("selection", {
+          exec("zoomTo", "selection", {
             intoView: true,
             behavior: "smooth"
           });
@@ -12468,11 +12366,8 @@ const _selection = definePlugin((editor) => {
       { command: "showOrHideSelection", key: "Shift+CmdOrCtrl+H" },
       { command: "lockOrUnlockSelection", key: "Shift+CmdOrCtrl+L" }
     ],
-    components: [
-      { type: "overlay", component: _sfc_main$m }
-    ],
     events: {
-      selectionTransforming: ({ elements }) => {
+      selectionTransform: ({ elements }) => {
         elements.forEach((el) => {
           el.findAncestor((ancestor) => {
             if (isElement(ancestor) && !inEditorIs(ancestor, "Frame")) {
@@ -12482,7 +12377,10 @@ const _selection = definePlugin((editor) => {
           });
         });
       }
-    }
+    },
+    components: [
+      { type: "overlay", component: _sfc_main$m }
+    ]
   };
 });
 function rotatePoint(center, point, angleRad) {
@@ -12748,11 +12646,11 @@ const _slice = definePlugin((editor) => {
         }
       }
     ],
-    hotkeys: [
-      { command: "setActiveDrawingTool:slice", key: "S" }
-    ],
     commands: [
       { command: "exportSlice", handle: exportSlice }
+    ],
+    hotkeys: [
+      { command: "setActiveDrawingTool:slice", key: "S" }
     ]
   };
 });
@@ -14067,7 +13965,7 @@ const _smartGuides = definePlugin((editor) => {
   return {
     name: "mce:smartGuides",
     events: {
-      selectionTransforming: ({ handle }) => {
+      selectionTransform: ({ handle }) => {
         if (handle === "move") {
           updateSmartGuides();
         }
@@ -14128,9 +14026,8 @@ const _hoisted_10$1 = {
 };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "TransformControls",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     tag: { default: "div" },
-    modelValue: {},
     color: {},
     movable: { type: Boolean, default: true },
     rotatable: { type: Boolean, default: true },
@@ -14141,7 +14038,6 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     resizeStrategy: {},
     handleStrategy: {},
     handleShape: { default: "rect" },
-    hideUi: { type: Boolean },
     handles: { default: () => [
       "move",
       // resize
@@ -14164,14 +14060,21 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       "rotate-bl",
       "rotate-br"
     ] },
+    scale: { default: () => [1, 1] },
+    offset: { default: () => [0, 0] },
+    hideUi: { type: Boolean },
     initialSize: { type: Boolean },
     borderStyle: {},
     tipFormat: {}
-  },
-  emits: ["update:modelValue", "start", "move", "end"],
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["start", "move", "end"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const _model = useModel(__props, "modelValue");
     const cursors = {
       "rotate-tl": (angle) => createCursor("rotate", 360 + angle),
       "rotate-tr": (angle) => createCursor("rotate", 90 + angle),
@@ -14186,17 +14089,43 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       "resize-br": (angle) => createCursor("resizeBevel", 90 + angle),
       "resize-bl": (angle) => createCursor("resizeBevel", 180 + angle)
     };
-    const modelValue = useModel(props, "modelValue");
     const model = computed({
       get: () => {
-        let { left = 0, top = 0, width = 0, height = 0, rotate = 0, borderRadius = 0 } = modelValue.value ?? {};
+        const scale = props.scale;
+        const offset2 = props.offset;
+        let {
+          left = 0,
+          top = 0,
+          width = 0,
+          height = 0,
+          rotate = 0,
+          borderRadius = 0
+        } = _model.value ?? {};
         if (Number.isNaN(Number(width)))
           width = 0;
         if (Number.isNaN(Number(height)))
           height = 0;
-        return { left, top, width, height, rotate, borderRadius };
+        return {
+          left: left * scale[0] + offset2[0],
+          top: top * scale[1] + offset2[1],
+          width: width * scale[0],
+          height: height * scale[1],
+          rotate,
+          borderRadius
+        };
       },
-      set: (val) => modelValue.value = val
+      set: (val) => {
+        const scale = props.scale;
+        const offset2 = props.offset;
+        _model.value = {
+          left: (val.left - offset2[0]) / scale[0],
+          top: (val.top - offset2[1]) / scale[1],
+          width: val.width / scale[0],
+          height: val.height / scale[1],
+          rotate: val.rotate,
+          borderRadius: val.borderRadius
+        };
+      }
     });
     const transforming = ref(false);
     const activeHandle = ref();
@@ -14496,8 +14425,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           updated.left = minX;
           updated.top = minY;
         }
-        if ("width" in updated && updated.width <= 0 || "height" in updated && updated.height <= 0) {
-          return;
+        if ("width" in updated) {
+          updated.width = Math.max(1, updated.width);
+        }
+        if ("height" in updated) {
+          updated.height = Math.max(1, updated.height);
         }
         if (updated.borderRadius ?? borderRadius) {
           updated.borderRadius = Math.min(
@@ -14647,7 +14579,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {
-            value: unref(modelValue),
+            value: model.value,
             props: {
               onPointerdown: start
             },
@@ -14749,7 +14681,13 @@ const _hoisted_1$c = {
 const _hoisted_2$6 = ["onClick"];
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "SmartSelection",
+  props: {
+    "modelValue": {},
+    "modelModifiers": {}
+  },
+  emits: ["update:modelValue"],
   setup(__props) {
+    const currentElement = useModel(__props, "modelValue");
     const {
       elementSelection,
       getObb,
@@ -14757,19 +14695,13 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       state,
       camera,
       resizeElement,
-      inEditorIs,
-      registerCommand
+      inEditorIs
     } = useEditor();
-    const currentElement = ref();
     const info = ref({
       active: false,
-      spacing: void 0
-    });
-    registerCommand({
-      command: "setSmartSelectionCurrentElement",
-      handle: (el) => {
-        currentElement.value = el;
-      }
+      spacing: void 0,
+      xItems: [],
+      yItems: []
     });
     function update() {
       if (currentElement.value) {
@@ -14778,6 +14710,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       const els = elementSelection.value;
       let active = false;
       let spacing;
+      let xItems = [];
+      let yItems = [];
       if (state.value !== "transforming" && els.length > 1) {
         let prev;
         const items = els.map((el) => ({ el, aabb: getAabb(el) }));
@@ -14799,7 +14733,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           }
           prev = cur;
         }
-        if (!active) {
+        if (active) {
+          yItems = sorted;
+        } else {
           active = true;
           prev = void 0;
           spacing = void 0;
@@ -14820,11 +14756,16 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             }
             prev = cur;
           }
+          if (active) {
+            xItems = sorted2;
+          }
         }
       }
       info.value = {
         active,
-        spacing
+        spacing,
+        xItems,
+        yItems
       };
     }
     watch(() => elementSelection.value.map((el) => getAabb(el)), update);
@@ -14842,32 +14783,19 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         };
       });
     });
-    const _transform2 = computed(() => {
-      const { left, top, width, height, rotationDegrees } = getObb(currentElement.value, "drawboard");
-      return {
-        left,
-        top,
-        width,
-        height,
-        rotate: rotationDegrees
-      };
-    });
     const transform = computed({
-      get: () => _transform2.value,
+      get: () => {
+        const { left, top, width, height, rotationDegrees: rotate } = getObb(currentElement.value);
+        return { left, top, width, height, rotate };
+      },
       set: (val) => {
-        const zoom = camera.value.zoom;
-        const oldTransform = _transform2.value;
-        const transform2 = {
-          left: val.left / zoom.x,
-          top: val.top / zoom.y,
-          width: Math.max(1, val.width / zoom.x),
-          height: Math.max(1, val.height / zoom.y)
-        };
+        const oldTransform = transform.value;
         const offsetStyle = {
-          left: transform2.left - oldTransform.left / zoom.x,
-          top: transform2.top - oldTransform.top / zoom.y,
-          width: transform2.width - oldTransform.width / zoom.x,
-          height: transform2.height - oldTransform.height / zoom.y
+          left: val.left - oldTransform.left,
+          top: val.top - oldTransform.top,
+          width: val.width - oldTransform.width,
+          height: val.height - oldTransform.height,
+          rotate: val.rotate - oldTransform.rotate
         };
         const el = currentElement.value;
         const style = el.style;
@@ -14875,21 +14803,48 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           left: style.left + offsetStyle.left,
           top: style.top + offsetStyle.top,
           width: style.width + offsetStyle.width,
-          height: style.height + offsetStyle.height
+          height: style.height + offsetStyle.height,
+          rotate: (style.rotate + offsetStyle.rotate + 360) % 360
         };
-        const newWidth = Math.max(1, newStyle.width);
-        const newHeight = Math.max(1, newStyle.height);
+        const oldAabb = el.getGlobalAabb();
         const shape = el.shape;
         resizeElement(
           el,
-          newWidth,
-          newHeight,
+          newStyle.width,
+          newStyle.height,
           inEditorIs(el, "Frame") ? void 0 : shape.isValid() ? { deep: true } : { deep: true, textToFit: true }
         );
         newStyle.width = el.style.width;
         newStyle.height = el.style.height;
-        Object.assign(style, newStyle);
+        Object.assign(el.style, newStyle);
         el.updateGlobalTransform();
+        const aabb = el.getGlobalAabb();
+        const offset2 = {
+          left: aabb.left - oldAabb.left,
+          top: aabb.top - oldAabb.top,
+          right: aabb.right - oldAabb.right,
+          bottom: aabb.bottom - oldAabb.bottom
+        };
+        let after = false;
+        info.value.yItems.forEach((item) => {
+          if (item.el.equal(el)) {
+            after = true;
+          } else if (after) {
+            item.el.style.top += offset2.bottom;
+          } else {
+            item.el.style.top += offset2.top;
+          }
+        });
+        after = false;
+        info.value.xItems.forEach((item) => {
+          if (item.el.equal(el)) {
+            after = true;
+          } else if (after) {
+            item.el.style.left += offset2.right;
+          } else {
+            item.el.style.left += offset2.left;
+          }
+        });
       }
     });
     return (_ctx, _cache) => {
@@ -14914,19 +14869,31 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => transform.value = $event),
           handles: ["resize-l", "resize-r", "resize-t", "resize-b"],
           class: "mce-smart-selection__transform",
-          color: "#FF24BD"
-        }, null, 8, ["modelValue"])) : createCommentVNode("", true)
+          color: "#FF24BD",
+          scale: [unref(camera).zoom.x, unref(camera).zoom.y],
+          offset: [-unref(camera).position.x, -unref(camera).position.y]
+        }, null, 8, ["modelValue", "scale", "offset"])) : createCommentVNode("", true)
       ])) : createCommentVNode("", true);
     };
   }
 });
 const _smartSelection = definePlugin((_editor) => {
+  const currentElement = ref();
   return {
     name: "mce:smartSelection",
+    commands: [
+      {
+        command: "setSmartSelectionCurrentElement",
+        handle: (el) => currentElement.value = el
+      }
+    ],
     components: [
       {
         type: "overlay",
-        component: _sfc_main$j
+        component: () => h(_sfc_main$j, {
+          "modelValue": currentElement.value,
+          "onUpdate:modelValue": (el) => currentElement.value = el
+        })
       }
     ]
   };
@@ -15760,12 +15727,14 @@ const _ui = definePlugin((editor) => {
         const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
         drawboardAabb.value = new Aabb2D(left, top, width, height);
       });
-      document.addEventListener("mousemove", (event) => {
+      function onMouseMove(event) {
         drawboardPointer.value = new Vector2$1(
           event.clientX - drawboardAabb.value.left,
           event.clientY - drawboardAabb.value.top
         );
-      });
+      }
+      onMounted(() => document.addEventListener("mousemove", onMouseMove));
+      onScopeDispose(() => document.removeEventListener("mousemove", onMouseMove));
     }
   };
 });
@@ -15814,13 +15783,127 @@ const _zoom = definePlugin((editor) => {
   const {
     registerConfig,
     camera,
-    zoomTo,
     exec,
     config,
     findFrame,
-    selection
+    selection,
+    drawboardAabb,
+    selectionAabb,
+    rootAabb,
+    getAabb,
+    screenCenterOffset,
+    viewportAabb
   } = editor;
   registerConfig("zoomToFit", "contain");
+  async function zoomTo(target, options = {}) {
+    const {
+      intoView,
+      mode = "contain",
+      duration = 500,
+      behavior
+    } = options;
+    let aabb;
+    if (Array.isArray(target) || typeof target === "object") {
+      aabb = getAabb(target);
+    } else {
+      switch (target) {
+        case "selection":
+          aabb = selectionAabb.value;
+          break;
+        case "root":
+        default:
+          aabb = rootAabb.value;
+          break;
+      }
+    }
+    if (intoView && viewportAabb.value.contains(aabb)) {
+      return;
+    }
+    const [sx, sy, sw, sh] = aabb.toArray();
+    if (!sw || !sh) {
+      return;
+    }
+    const offset2 = screenCenterOffset.value;
+    const { width, height } = drawboardAabb.value;
+    const tw = width - (offset2.left + offset2.right);
+    const th = height - (offset2.top + offset2.bottom);
+    const zw = tw / sw;
+    const zh = th / sh;
+    const _camera = camera.value;
+    let targetZoom;
+    if (typeof target === "number") {
+      targetZoom = target;
+    } else {
+      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(
+      clamp(targetZoom, _camera.minZoom.x, _camera.maxZoom.x),
+      clamp(targetZoom, _camera.minZoom.y, _camera.maxZoom.y)
+    );
+    let x = offset2.left;
+    let y = offset2.top;
+    if (zw < zh) {
+      y += (th - sh * newZoom) / 2;
+    } else {
+      x += (tw - sw * newZoom) / 2;
+    }
+    const oldPosition = {
+      x: _camera.position.x,
+      y: _camera.position.y
+    };
+    const newPosition = {
+      x: sx * newZoom - x,
+      y: sy * newZoom - y
+    };
+    switch (behavior) {
+      case "smooth":
+        await new Promise((resolve) => {
+          const zoomDistance = newZoom - oldZoom;
+          const positionDistance = {
+            x: newPosition.x - oldPosition.x,
+            y: newPosition.y - oldPosition.y
+          };
+          const startTime = performance.now();
+          function step(now) {
+            const elapsed = now - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
+            _camera.zoom.set(oldZoom + zoomDistance * ease);
+            _camera.position.set(
+              oldPosition.x + positionDistance.x * ease,
+              oldPosition.y + positionDistance.y * ease
+            );
+            if (elapsed < duration) {
+              requestAnimationFrame(step);
+            } else {
+              resolve();
+            }
+          }
+          requestAnimationFrame(step);
+        });
+        break;
+      case "instant":
+      default:
+        _camera.zoom.set(newZoom);
+        _camera.position.set(newPosition.x, newPosition.y);
+        break;
+    }
+  }
   function zoomToFrame(type, options) {
     const value = findFrame(type);
     if (value) {
@@ -15833,7 +15916,8 @@ const _zoom = definePlugin((editor) => {
     commands: [
       { command: "zoomIn", handle: () => camera.value.addZoom(0.25) },
       { command: "zoomOut", handle: () => camera.value.addZoom(-0.25) },
-      { command: "zoomTo100", handle: () => camera.value.setZoom(1) },
+      { command: "zoomTo", handle: zoomTo },
+      { command: "zoomTo100", handle: () => zoomTo(1) },
       { command: "zoomToFit", handle: () => zoomTo("root", { mode: config.value.zoomToFit }) },
       { command: "zoomToSelection", handle: (options) => zoomTo("selection", options) },
       { command: "zoomToNextFrame", handle: (options) => zoomToFrame("next", options) },
@@ -15850,6 +15934,13 @@ const _zoom = definePlugin((editor) => {
     ],
     events: {
       setDoc: () => exec("zoomToFit")
+    },
+    setup: () => {
+      watch(drawboardAabb, (_aabb, oldAabb) => {
+        if (!oldAabb.width || !oldAabb.height) {
+          exec("zoomToFit");
+        }
+      });
     }
   };
 });
@@ -15920,9 +16011,11 @@ class Editor extends Observable {
     this.emit = this.emit.bind(this);
   }
   getPlugins = (type) => {
-    return Array.from(this.plugins.values()).flatMap((p) => p.components?.filter((c) => {
-      return c.type === type && c.ignore?.() !== true;
-    }) ?? []);
+    return Array.from(this.plugins.values()).flatMap((p) => {
+      return p.components?.filter((c) => {
+        return c.type === type && c.ignore?.() !== true;
+      }) ?? [];
+    });
   };
   log = (...args) => {
     if (this.debug.value) {
@@ -15942,7 +16035,7 @@ class Editor extends Observable {
     this.debug.value = debug;
     this.config = configCacheInLocal ? useLocalStorage("config", () => ({})) : ref({});
     this._setups = [];
-    this._useMixins(
+    this.mixin(
       mixins,
       options
     );
@@ -15951,13 +16044,21 @@ class Editor extends Observable {
       ...plugins$1
     ], options);
   }
-  _useMixins(mixins2, options) {
-    const use = (mixin) => {
+  mixin(mixin, options = {}) {
+    if (Array.isArray(mixin)) {
+      mixin.forEach((item) => {
+        try {
+          this.mixin(item, options);
+        } catch (err) {
+          console.error(`Failed to use mixin`, err);
+        }
+      });
+    } else {
       const result = mixin(this, options);
       switch (typeof result) {
         case "object":
           if (Array.isArray(result)) {
-            result.map((v) => use(v));
+            result.map((v) => this.mixin(v));
           } else {
             Object.assign(this, result);
           }
@@ -15969,11 +16070,18 @@ class Editor extends Observable {
           }
           break;
       }
-    };
-    mixins2.forEach(use);
+    }
   }
-  use(plugins2, options) {
-    const use = (plugin) => {
+  use(plugin, options) {
+    if (Array.isArray(plugin)) {
+      plugin.forEach((p) => {
+        try {
+          this.use(p, options);
+        } catch (err) {
+          console.error(`Failed to use plugin`, err);
+        }
+      });
+    } else {
       let result;
       if (typeof plugin === "function") {
         result = plugin(this, options);
@@ -15999,19 +16107,13 @@ class Editor extends Observable {
           this.on(k, events[k]);
         }
       }
-    };
-    plugins2.forEach((p) => {
-      try {
-        use(p);
-      } catch (err) {
-        console.error(`Failed to use plugin`, err);
-      }
-    });
+    }
   }
-  _setuped = false;
+  _effectScope;
   setup = async () => {
-    if (!this._setuped) {
-      this._setuped = true;
+    this._effectScope?.stop();
+    const scope = effectScope();
+    scope.run(async () => {
       await Promise.all([
         ...this._setups.map(async (setup) => {
           try {
@@ -16029,7 +16131,8 @@ class Editor extends Observable {
         })
       ]);
       this.emit("ready");
-    }
+    });
+    this._effectScope = scope;
   };
   install = (app) => {
     app.provide(Editor.injectionKey, this);
@@ -16261,11 +16364,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         createVNode(_sfc_main$k, {
           modelValue: sourceTransform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sourceTransform.value = $event),
-          class: "mce-cropper__transformable",
+          class: "mce-cropper__transform",
           rotatable: false
         }, {
           default: withCtx(({ props: slotProps }) => [
-            createElementVNode("div", mergeProps({ class: "mce-cropper__transformable_rect" }, slotProps), null, 16)
+            createElementVNode("div", mergeProps({ class: "mce-cropper__transform_rect" }, slotProps), null, 16)
           ]),
           _: 1
         }, 8, ["modelValue"]),
@@ -16323,7 +16426,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       selection,
       elementSelection,
       selectionObb,
-      selectionObbInDrawboard,
       camera,
       getObb,
       getAabb,
@@ -16378,15 +16480,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     function snap(currentPos, type) {
       const points = getSnapPoints();
-      const zoom = camera.value.zoom;
-      const position = camera.value.position;
       let closest;
       let minDist = Infinity;
-      if (type === "x") {
-        currentPos += position.x / zoom.x;
-      } else {
-        currentPos += position.y / zoom.y;
-      }
       for (const pt of points[type]) {
         const dist = pt - currentPos;
         const absDist = Math.abs(dist);
@@ -16395,14 +16490,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           closest = pt;
         }
       }
-      if (minDist <= snapThreshold.value) {
+      if (minDist < snapThreshold.value) {
         currentPos = closest ?? currentPos;
       }
-      if (type === "x") {
-        currentPos -= position.x / zoom.x;
-      } else {
-        currentPos -= position.y / zoom.y;
-      }
       return currentPos;
     }
     function createSelectionTransformContext() {
@@ -16440,42 +16530,32 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       emit("selectionTransformEnd", createSelectionTransformContext());
     }
     const _transform2 = computed(() => {
-      const zoom = camera.value.zoom;
-      const { left, top, width, height, rotationDegrees } = selectionObbInDrawboard.value;
+      const { left, top, width, height, rotationDegrees } = selectionObb.value;
       return {
         left,
         top,
         width,
         height,
         rotate: rotationDegrees,
-        borderRadius: (elementSelection.value[0]?.style.borderRadius ?? 0) * zoom.x
+        borderRadius: elementSelection.value[0]?.style.borderRadius ?? 0
       };
     });
     const transform = computed({
       get: () => _transform2.value,
-      set: (val) => {
-        const handle = transformable.value?.activeHandle ?? "move";
-        const zoom = camera.value.zoom;
+      set: (transform2) => {
         const oldTransform = _transform2.value;
-        const transform2 = {
-          left: val.left / zoom.x,
-          top: val.top / zoom.y,
-          width: Math.max(1, val.width / zoom.x),
-          height: Math.max(1, val.height / zoom.y),
-          rotate: val.rotate ?? 0,
-          borderRadius: (val.borderRadius ?? 0) / zoom.y
-        };
+        const handle = transformable.value?.activeHandle ?? "move";
         if (handle === "move") {
           transform2.left = snap(Math.round(transform2.left), "x");
           transform2.top = snap(Math.round(transform2.top), "y");
         }
         const offsetStyle = {
-          left: transform2.left - oldTransform.left / zoom.x,
-          top: transform2.top - oldTransform.top / zoom.y,
-          width: transform2.width - oldTransform.width / zoom.x,
-          height: transform2.height - oldTransform.height / zoom.y,
-          rotate: transform2.rotate - (oldTransform.rotate ?? 0),
-          borderRadius: transform2.borderRadius - (oldTransform.borderRadius ?? 0) / zoom.y
+          left: transform2.left - oldTransform.left,
+          top: transform2.top - oldTransform.top,
+          width: transform2.width - oldTransform.width,
+          height: transform2.height - oldTransform.height,
+          rotate: transform2.rotate - oldTransform.rotate,
+          borderRadius: transform2.borderRadius - oldTransform.borderRadius
         };
         const els = elementSelection.value;
         if (els.length > 1) {
@@ -16524,7 +16604,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             });
           }
         }
-        emit("selectionTransforming", createSelectionTransformContext());
+        emit("selectionTransform", createSelectionTransformContext());
       }
     });
     const movable = computed(() => {
@@ -16599,6 +16679,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           "resize-strategy": props.resizeStrategy,
           class: "mce-selector__transform",
           "tip-format": tipFormat,
+          scale: [unref(camera).zoom.x, unref(camera).zoom.y],
+          offset: [-unref(camera).position.x, -unref(camera).position.y],
           onStart,
           onMove,
           onEnd
@@ -16610,7 +16692,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy"])) : createCommentVNode("", true),
+        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "scale", "offset"])) : createCommentVNode("", true),
         transform.value.width && transform.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
           key: 3,
           class: "mce-selector__slot",