mce 0.15.36 → 0.15.37

package/dist/index.js

@@ -1,6 +1,6 @@
 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, 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 { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useImage, useResizeObserver as useResizeObserver$1, useLocalStorage } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeTextContent, isCRLF, textContentToString, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
 import { Fonts } from "modern-font";
@@ -4410,7 +4410,7 @@ const _hoisted_1$r = {
   key: 0,
   class: "mce-drawing__tip"
 };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "Drawing",
   setup(__props) {
     const {
@@ -4443,7 +4443,7 @@ const _drawingTool = definePlugin((editor) => {
       { command: "setActiveDrawingTool", handle: (val) => setActiveDrawingTool(val) }
     ],
     components: [
-      { name: "drawing", type: "overlay", component: _sfc_main$D }
+      { name: "drawing", type: "overlay", component: _sfc_main$E }
     ]
   };
 });
@@ -4737,7 +4737,7 @@ const ComponentIcon = defineComponent({
     };
   }
 });
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     disabled: Boolean,
@@ -5395,7 +5395,7 @@ const defaultHoverStrategy = (context) => {
   }
   return element.findAncestor(cb);
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "Frame",
   props: {
     "modelValue": { required: true },
@@ -5471,7 +5471,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$q = { class: "mce-frames" };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Frames",
   setup(__props) {
     const {
@@ -5480,7 +5480,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$q, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
-          return openBlock(), createBlock(_sfc_main$B, {
+          return openBlock(), createBlock(_sfc_main$C, {
             key,
             "model-value": frame
           }, null, 8, ["model-value"]);
@@ -5540,7 +5540,7 @@ const _frame = definePlugin((editor) => {
       { command: "setActiveDrawingTool:frame", key: "F" }
     ],
     components: [
-      { type: "overlay", component: _sfc_main$A, order: "before" }
+      { type: "overlay", component: _sfc_main$B, order: "before" }
     ]
   };
 });
@@ -5620,7 +5620,7 @@ const _history = definePlugin((editor) => {
   };
 });
 const _hoisted_1$p = ["data-name"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "Hover",
   setup(__props) {
     const {
@@ -5649,7 +5649,7 @@ const _hover = definePlugin(() => {
   return {
     name: "mce:hover",
     components: [
-      { type: "overlay", component: _sfc_main$z, order: "before" }
+      { type: "overlay", component: _sfc_main$A, order: "before" }
     ]
   };
 });
@@ -5928,7 +5928,7 @@ const _json = definePlugin((editor) => {
     ]
   };
 });
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "Btn",
   props: {
     active: { type: Boolean },
@@ -5950,7 +5950,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
 const _hoisted_1$o = ["data-id"];
 const _hoisted_2$d = { class: "mce-layer__content" };
 const _hoisted_3$b = { class: "mce-layer__prepend" };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
     inheritAttrs: false
@@ -6174,7 +6174,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           _cache[6] || (_cache[6] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
           createElementVNode("div", _hoisted_2$d, [
             createElementVNode("div", _hoisted_3$b, [
-              childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
+              childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$D), {
                 key: 0,
                 class: "mce-layer__arrow",
                 icon: "$arrowRight",
@@ -6187,7 +6187,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               class: "mce-layer__thumbnail",
               onDblclick: onDblclickThumbnail
             }, [
-              createVNode(unref(_sfc_main$C), { icon: thumbnailIcon.value }, null, 8, ["icon"])
+              createVNode(unref(_sfc_main$D), { icon: thumbnailIcon.value }, null, 8, ["icon"])
             ], 32),
             createElementVNode("div", {
               class: "mce-layer__name",
@@ -6220,7 +6220,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               }])
             }, [
               props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(_sfc_main$y, {
+                Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(_sfc_main$z, {
                   key: 0,
                   icon: "",
                   class: "mce-layer__btn mce-layer__btn--show",
@@ -6231,12 +6231,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   }), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), { icon: "$collapse" })
+                    createVNode(unref(_sfc_main$D), { icon: "$collapse" })
                   ]),
                   _: 1
                 })) : createCommentVNode("", true)
               ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createVNode(_sfc_main$y, {
+                createVNode(_sfc_main$z, {
                   icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": unref(isLock)(props.node)
@@ -6244,13 +6244,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), {
+                    createVNode(unref(_sfc_main$D), {
                       icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
                     }, null, 8, ["icon"])
                   ]),
                   _: 1
                 }, 8, ["class"]),
-                createVNode(_sfc_main$y, {
+                createVNode(_sfc_main$z, {
                   icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": !unref(isVisible)(props.node)
@@ -6258,7 +6258,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), {
+                    createVNode(unref(_sfc_main$D), {
                       icon: unref(isVisible)(props.node) ? "$visible" : "$unvisible"
                     }, null, 8, ["icon"])
                   ]),
@@ -6282,7 +6282,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$n = { class: "mce-layers" };
 const _hoisted_2$c = { class: "mce-layers__wrapper" };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "Layers",
   setup(__props) {
     const {
@@ -6328,7 +6328,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", _hoisted_2$c, [
-          createVNode(_sfc_main$x, {
+          createVNode(_sfc_main$y, {
             root: true,
             node: unref(root),
             opened: true
@@ -6342,7 +6342,7 @@ const _layers = definePlugin(() => {
   return {
     name: "mce:layers",
     components: [
-      { name: "layers", type: "panel", position: "float", component: _sfc_main$w }
+      { name: "layers", type: "panel", position: "float", component: _sfc_main$x }
     ]
   };
 });
@@ -6353,7 +6353,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$v = {};
+const _sfc_main$w = {};
 const _hoisted_1$m = {
   class: "mce-made-with",
   href: "https://github.com/qq15725/mce",
@@ -6365,7 +6365,7 @@ function _sfc_render(_ctx, _cache) {
     createElementVNode("div", null, "MCE", -1)
   ])]);
 }
-const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render]]);
+const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render]]);
 const _madeWith = definePlugin((editor) => {
   const {
     config,
@@ -6383,7 +6383,7 @@ const _madeWith = definePlugin((editor) => {
     ]
   };
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6528,7 +6528,7 @@ const _hoisted_7$3 = {
   key: 3,
   class: "mce-list-item__append"
 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceMenu"
   },
@@ -6611,7 +6611,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_MceMenu = resolveComponent("MceMenu");
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isActive.value = $event),
@@ -6658,7 +6658,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
                     hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
-                      item.checked ? (openBlock(), createBlock(unref(_sfc_main$C), {
+                      item.checked ? (openBlock(), createBlock(unref(_sfc_main$D), {
                         key: 0,
                         icon: "$check"
                       })) : createCommentVNode("", true)
@@ -6676,7 +6676,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true),
                     item.children?.length || _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
                       renderSlot(_ctx.$slots, "append", { item }),
-                      item.children?.length ? (openBlock(), createBlock(unref(_sfc_main$C), {
+                      item.children?.length ? (openBlock(), createBlock(unref(_sfc_main$D), {
                         key: 0,
                         icon: "$arrowRight"
                       })) : createCommentVNode("", true)
@@ -6733,7 +6733,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "ContextMenu",
   props: {
     "modelValue": { type: Boolean },
@@ -6819,7 +6819,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         ref: "menuTplRef",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -7109,7 +7109,7 @@ const _menu = definePlugin((editor, options) => {
   return {
     name: "mce:menu",
     components: [
-      { type: "overlay", component: _sfc_main$s, order: "after" }
+      { type: "overlay", component: _sfc_main$t, order: "after" }
     ]
   };
 });
@@ -7176,7 +7176,7 @@ const _new = definePlugin((editor) => {
 const _hoisted_1$k = { class: "mce-node-creator" };
 const _hoisted_2$a = { class: "mce-node-creator__tree" };
 const _hoisted_3$9 = { class: "mce-node-creator__actions" };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "NodeCreator",
   props: {
     "isActive": { type: Boolean },
@@ -7269,13 +7269,13 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         createElementVNode("div", _hoisted_3$9, [
-          createVNode(_sfc_main$y, { onClick: cancel }, {
+          createVNode(_sfc_main$z, { onClick: cancel }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(t)("cancel")), 1)
             ]),
             _: 1
           }),
-          createVNode(_sfc_main$y, { onClick: create }, {
+          createVNode(_sfc_main$z, { onClick: create }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(t)("create")), 1)
             ]),
@@ -7295,7 +7295,7 @@ const _node = definePlugin((editor) => {
   return {
     name: "mce:node",
     components: [
-      { name: "nodeCreator", type: "panel", position: "float", component: _sfc_main$r }
+      { name: "nodeCreator", type: "panel", position: "float", component: _sfc_main$s }
     ],
     commands: [
       { command: "addSubNode", handle: () => config.value.nodeCreator = true }
@@ -11437,7 +11437,7 @@ const _hoisted_3$8 = {
   key: 0,
   class: "mce-tooltip__kbd"
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "Tooltip",
   props: /* @__PURE__ */ mergeModels({
     ...makeMceOverlayProps({
@@ -11468,7 +11468,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -11512,7 +11512,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 const _hoisted_1$i = ["width", "height"];
 const _hoisted_2$8 = ["onDblclick", "onMousedown", "onMousemove"];
 const _hoisted_3$7 = { style: { "font-size": "0.75rem", "text-wrap": "nowrap" } };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -11792,7 +11792,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             onMouseleave: onLeave
           }, null, 46, _hoisted_2$8);
         }), 128)),
-        createVNode(_sfc_main$q, {
+        createVNode(_sfc_main$r, {
           "model-value": !!tipText.value,
           target: tipPos.value,
           offset: 24
@@ -11807,7 +11807,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$h = { class: "mce-rulers" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "Rulers",
   setup(__props) {
     const {
@@ -11816,7 +11816,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createVNode(_sfc_main$p, {
+        createVNode(_sfc_main$q, {
           refline: "",
           zoom: unref(camera).zoom.x,
           position: unref(camera).position.x,
@@ -11824,7 +11824,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           axis: "",
           size: 16
         }, null, 8, ["zoom", "position", "selected"]),
-        createVNode(_sfc_main$p, {
+        createVNode(_sfc_main$q, {
           refline: "",
           zoom: unref(camera).zoom.y,
           position: unref(camera).position.y,
@@ -11849,7 +11849,7 @@ const _ruler = definePlugin((editor) => {
     components: [
       {
         type: "overlay",
-        component: _sfc_main$o,
+        component: _sfc_main$p,
         ignore: () => !config.value.ruler,
         order: "after"
       }
@@ -11891,7 +11891,7 @@ const _hoisted_1$g = {
   ref: "trackTplRef",
   class: "mce-scrollbar__track"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "Scrollbar",
   props: /* @__PURE__ */ mergeModels({
     length: {},
@@ -11999,7 +11999,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$f = { class: "mce-scrollbars" };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "Scrollbars",
   props: {
     offset: { default: 0 },
@@ -12013,13 +12013,13 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        createVNode(_sfc_main$n, mergeProps(props, {
+        createVNode(_sfc_main$o, mergeProps(props, {
           modelValue: unref(camera).position.y,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(camera).position.y = $event),
           vertical: "",
           length: unref(rootAabb).height * unref(camera).zoom.y
         }), null, 16, ["modelValue", "length"]),
-        createVNode(_sfc_main$n, mergeProps(props, {
+        createVNode(_sfc_main$o, mergeProps(props, {
           modelValue: unref(camera).position.x,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(camera).position.x = $event),
           length: unref(rootAabb).width * unref(camera).zoom.x
@@ -12136,7 +12136,7 @@ const _scroll = definePlugin((editor) => {
     components: [
       {
         type: "overlay",
-        component: _sfc_main$m,
+        component: _sfc_main$n,
         ignore: () => !config.value.scrollbar,
         order: "after"
       }
@@ -12173,7 +12173,7 @@ const _scroll = definePlugin((editor) => {
     // },
   };
 });
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "ScrollToSelection",
   setup(__props) {
     const {
@@ -12191,7 +12191,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         class: "mce-scroll-to-selection",
         onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
       }, [
-        createVNode(unref(_sfc_main$C), { icon: "$gps" }),
+        createVNode(unref(_sfc_main$D), { icon: "$gps" }),
         createElementVNode("span", null, toDisplayString(unref(t)("scrollToSelection")), 1)
       ])) : createCommentVNode("", true);
     };
@@ -12213,7 +12213,7 @@ const _hoisted_10$1 = {
   key: 0,
   class: "mce-transform-controls__tip"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "TransformControls",
   props: /* @__PURE__ */ mergeModels({
     tag: { default: "div" },
@@ -12863,8 +12863,202 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "mce-selection" };
+const _hoisted_1$d = { class: "mce-cropper" };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  __name: "Cropper",
+  props: /* @__PURE__ */ mergeModels({
+    image: {},
+    minScale: { default: 0.1 },
+    maxScale: { default: 3 }
+  }, {
+    "modelValue": { default: () => ({}) },
+    "modelModifiers": {},
+    "style": { default: () => ({}) },
+    "styleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["start", "end", "update:transform"], ["update:modelValue", "update:style"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const cropRect = useModel(__props, "modelValue");
+    const styleModel = useModel(__props, "style");
+    const rootBox = ref({ width: 0, height: 0 });
+    const { state: imageRef } = useImage(
+      computed(() => ({
+        src: props.image
+      }))
+    );
+    const backup = cloneDeep(cropRect.value);
+    const canvasRef = useTemplateRef("canvasRef");
+    const computedCropRect = computed({
+      get: () => {
+        const { left = 0, top = 0, right = 0, bottom = 0 } = cropRect.value;
+        return { left, top, right, bottom };
+      },
+      set: (val) => cropRect.value = val
+    });
+    const inverseMat = computed(() => {
+      const { left, top, right, bottom } = computedCropRect.value;
+      const sx = 1 / (1 - left - right);
+      const sy = 1 / (1 - top - bottom);
+      const tx = -left;
+      const ty = -top;
+      return { sx, sy, tx, ty };
+    });
+    const sourceTransform = computed({
+      get: () => {
+        const { sx, sy, tx, ty } = inverseMat.value;
+        const { scaleX = 1, scaleY = 1 } = styleModel.value;
+        const { width, height } = rootBox.value;
+        return {
+          width: sx * width,
+          height: sy * height,
+          left: tx * scaleX * (sx * width),
+          top: ty * scaleY * (sy * height)
+        };
+      },
+      set: (newValue) => {
+        const { width, height } = rootBox.value;
+        const { scaleX = 1, scaleY = 1 } = styleModel.value;
+        const transform = {
+          sx: newValue.width / width,
+          sy: newValue.height / height,
+          tx: newValue.left / newValue.width / scaleX,
+          ty: newValue.top / newValue.height / scaleY
+        };
+        const left = -transform.tx;
+        const top = -transform.ty;
+        const w = 1 - 1 / transform.sx;
+        const h2 = 1 - 1 / transform.sy;
+        const right = w - left;
+        const bottom = h2 - top;
+        computedCropRect.value = { left, top, right, bottom };
+      }
+    });
+    const scale = computed({
+      get: () => inverseMat.value.sx,
+      set: (value) => {
+        const transform = inverseMat.value;
+        const rate = transform.sx / value;
+        const left = -transform.tx;
+        const top = -transform.ty;
+        const w = 1 - 1 / value;
+        const h2 = 1 - 1 / transform.sy * rate;
+        const right = w - left;
+        const bottom = h2 - top;
+        computedCropRect.value = { left, top, right, bottom };
+      }
+    });
+    onBeforeMount(() => emit("start"));
+    onBeforeUnmount(() => emit("end"));
+    const sourceStyle = computed(() => {
+      const { sx, sy, tx, ty } = inverseMat.value;
+      const { scaleX = 1, scaleY = 1 } = styleModel.value;
+      return {
+        transform: [
+          `scale(${sx}, ${sy})`,
+          `translate(${tx * scaleX * 100}%, ${ty * scaleY * 100}%)`
+        ].join(" ")
+      };
+    });
+    watch([canvasRef, imageRef], render2);
+    watch(computedCropRect, render2, { deep: true });
+    watch([() => styleModel.value.scaleX, () => styleModel.value.scaleY], render2);
+    function render2() {
+      const ctx = canvasRef.value?.getContext("2d");
+      if (!ctx || !imageRef.value)
+        return;
+      const { scaleX = 1, scaleY = 1 } = styleModel.value;
+      const { naturalWidth, naturalHeight } = imageRef.value;
+      ctx.canvas.width = naturalWidth;
+      ctx.canvas.height = naturalHeight;
+      ctx.clearRect(0, 0, naturalWidth, naturalHeight);
+      ctx.globalAlpha = 0.4;
+      ctx.scale(scaleX, scaleY);
+      ctx.drawImage(imageRef.value, 0, 0, naturalWidth, naturalHeight);
+    }
+    function ok() {
+      emit("end");
+    }
+    function cancel() {
+      cropRect.value = backup;
+      ok();
+    }
+    function onResizeObserver(entries) {
+      const { width, height } = entries[0].contentRect;
+      rootBox.value = { width, height };
+    }
+    function applySourceTransformToStyle() {
+      const { left = 0, top = 0, width = 0, height = 0 } = styleModel.value;
+      const { sx, sy, tx, ty } = inverseMat.value;
+      cropRect.value = {};
+      styleModel.value = {
+        ...styleModel.value,
+        width: sx * width,
+        height: sy * height,
+        left: left + tx * (sx * width),
+        top: top + ty * (sy * height)
+      };
+      ok();
+    }
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createElementVNode("div", {
+          class: "mce-cropper__source",
+          style: normalizeStyle$1(sourceStyle.value)
+        }, [
+          createElementVNode("canvas", {
+            ref_key: "canvasRef",
+            ref: canvasRef
+          }, null, 512)
+        ], 4),
+        createVNode(_sfc_main$l, {
+          modelValue: sourceTransform.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sourceTransform.value = $event),
+          class: "mce-cropper__transform",
+          rotatable: false
+        }, {
+          default: withCtx(({ props: slotProps }) => [
+            createElementVNode("div", mergeProps({ class: "mce-cropper__transform_rect" }, slotProps), null, 16)
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        renderSlot(_ctx.$slots, "default", {
+          scale: scale.value,
+          ok,
+          cancel,
+          applySourceTransformToStyle
+        })
+      ])), [
+        [unref(vResizeObserver), onResizeObserver]
+      ]);
+    };
+  }
+});
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "ForegroundCropper",
+  setup(__props) {
+    const {
+      state,
+      elementSelection
+    } = useEditor();
+    const element = computed(() => elementSelection.value[0]);
+    return (_ctx, _cache) => {
+      return unref(state) === "cropping" && element.value?.foreground.isValid() ? (openBlock(), createBlock(_sfc_main$k, {
+        key: 0,
+        modelValue: element.value.foreground.cropRect,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => element.value.foreground.cropRect = $event),
+        style: normalizeStyle$1(element.value.style.toJSON()),
+        image: element.value.foreground.image,
+        class: "pointer-events-auto",
+        "onUpdate:style": _cache[1] || (_cache[1] = (val) => element.value.style.setProperties(val)),
+        onEnd: _cache[2] || (_cache[2] = () => state.value = void 0)
+      }, null, 8, ["modelValue", "style", "image"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$c = { class: "mce-selection" };
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "Selection",
   setup(__props, { expose: __expose }) {
     const {
@@ -13097,7 +13291,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       transformControls
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(parentObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
@@ -13126,7 +13320,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             ...unref(selectionArea).toCssStyle()
           })
         }, null, 4)) : createCommentVNode("", true),
-        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
           key: 2,
           ref: "transformControlsTpl"
         }, unref(config).transformControls, {
@@ -13147,18 +13341,19 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         }), createSlots({ _: 2 }, [
           _ctx.$slots.transform ? {
             name: "svg",
-            fn: withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "transform", normalizeProps(guardReactiveProps(slotProps)))
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "transform")
             ]),
             key: "0"
           } : void 0
         ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "scale", "offset"])) : createCommentVNode("", true),
-        transform.value.width && transform.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+        transform.value.width && transform.value.height ? (openBlock(), createElementBlock("div", {
           key: 3,
           class: "mce-selection__slot",
           style: normalizeStyle$1(unref(selectionObbInDrawboard).toCssStyle())
         }, [
-          renderSlot(_ctx.$slots, "default", { transform: transform.value })
+          createVNode(_sfc_main$j),
+          renderSlot(_ctx.$slots, "default")
         ], 4)) : createCommentVNode("", true)
       ]);
     };
@@ -13359,8 +13554,8 @@ const _selection = definePlugin((editor) => {
       }
     },
     components: [
-      { slot: "selection", type: "overlay", component: _sfc_main$j },
-      { type: "overlay", component: _sfc_main$l }
+      { slot: "selection", type: "overlay", component: _sfc_main$i },
+      { type: "overlay", component: _sfc_main$m }
     ]
   };
 });
@@ -13635,15 +13830,15 @@ const _slice = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$c = { class: "mce-smart-guides" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b = { class: "mce-smart-guides" };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "SmartGuides",
   props: {
     snapLines: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.snapLines, (item, key) => {
           return openBlock(), createElementBlock("div", {
             key,
@@ -14958,7 +15153,7 @@ const _smartGuides = definePlugin((editor) => {
     components: [
       {
         type: "overlay",
-        component: () => h(_sfc_main$i, { snapLines: snapLines.value })
+        component: () => h(_sfc_main$h, { snapLines: snapLines.value })
       }
     ]
   };
@@ -14989,12 +15184,12 @@ function flipType(type) {
 function isLeftTopLine(line) {
   return ["vt", "hl"].includes(line.type);
 }
-const _hoisted_1$b = {
+const _hoisted_1$a = {
   key: 0,
   class: "mce-smart-selection"
 };
 const _hoisted_2$6 = ["onMousedown"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "SmartSelection",
   props: {
     "modelValue": {},
@@ -15170,7 +15365,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return;
     }
     return (_ctx, _cache) => {
-      return info.value.active ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return info.value.active ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(handles.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
@@ -15188,7 +15383,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             }, null, 42, _hoisted_2$6)
           ], 6);
         }), 128)),
-        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$k, {
+        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$l, {
           key: 0,
           modelValue: transform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => transform.value = $event),
@@ -15215,7 +15410,7 @@ const _smartSelection = definePlugin((_editor) => {
     components: [
       {
         type: "overlay",
-        component: () => h(_sfc_main$h, {
+        component: () => h(_sfc_main$g, {
           "modelValue": currentElement.value,
           "onUpdate:modelValue": (el) => currentElement.value = el
         })
@@ -15238,7 +15433,7 @@ const _state = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$a = { class: "progress-indicator" };
+const _hoisted_1$9 = { class: "progress-indicator" };
 const _hoisted_2$5 = {
   key: 0,
   class: "progress-indicator__status"
@@ -15248,7 +15443,7 @@ const _hoisted_4$2 = {
   key: 1,
   class: "progress-indicator__bar-indeterminate"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ProgressIndicator",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -15261,7 +15456,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const progress = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         __props.label ? (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3$5, [
           !__props.indeterminate ? (openBlock(), createElementBlock("div", {
@@ -15274,8 +15469,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-3b286483"]]);
-const _hoisted_1$9 = { class: "mce-statusbar" };
+const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-3b286483"]]);
+const _hoisted_1$8 = { class: "mce-statusbar" };
 const _hoisted_2$4 = { class: "mce-statusbar__main" };
 const _hoisted_3$4 = { class: "mce-statusbar__item" };
 const _hoisted_4$1 = { class: "mce-statusbar__kbd" };
@@ -15297,7 +15492,7 @@ const _hoisted_19 = { class: "mce-statusbar__kbd" };
 const _hoisted_20 = { class: "mce-statusbar__item" };
 const _hoisted_21 = { class: "mce-statusbar__item" };
 const _hoisted_22 = { class: "mce-statusbar__progress" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Statusbar",
   setup(__props) {
     const {
@@ -15310,7 +15505,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       isElement
     } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         createElementVNode("div", _hoisted_2$4, [
           unref(state) === "typing" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createElementVNode("div", _hoisted_3$4, [
@@ -15324,7 +15519,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", _hoisted_8, [
-              createVNode(unref(_sfc_main$C), { icon: "$mouseRightClick" })
+              createVNode(unref(_sfc_main$D), { icon: "$mouseRightClick" })
             ]),
             _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
             createElementVNode("div", _hoisted_9, [
@@ -15338,7 +15533,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(unref(t)(unref(state))), 1)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
             createElementVNode("div", _hoisted_14, [
-              createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
+              createVNode(unref(_sfc_main$D), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
             ]),
             _cache[5] || (_cache[5] = createElementVNode("span", null, " + ", -1)),
@@ -15348,7 +15543,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             ]),
             _cache[6] || (_cache[6] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_17, [
-              createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
+              createVNode(unref(_sfc_main$D), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
             ]),
             _cache[7] || (_cache[7] = createElementVNode("span", null, " + ", -1)),
@@ -15358,7 +15553,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             ]),
             _cache[8] || (_cache[8] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_20, [
-              createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
+              createVNode(unref(_sfc_main$D), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
             ]),
             unref(selection).length === 1 && unref(isElement)(unref(selection)[0]) && unref(selection)[0].text.isValid() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -15382,7 +15577,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-a1f0e31b"]]);
+const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-a1f0e31b"]]);
 const _statusbar = definePlugin((editor) => {
   const {
     registerConfig
@@ -15401,7 +15596,7 @@ const _statusbar = definePlugin((editor) => {
     ]
   };
 });
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   setup(__props, { expose: __expose }) {
     const {
@@ -15572,23 +15767,23 @@ const _text = definePlugin((editor) => {
       { command: "setActiveDrawingTool:text", key: "T" }
     ],
     components: [
-      { type: "overlay", component: _sfc_main$e }
+      { type: "overlay", component: _sfc_main$d }
     ]
   };
 });
-const _hoisted_1$8 = { class: "mce-payhead" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "mce-payhead" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "Playhead",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [..._cache[0] || (_cache[0] = [
         createElementVNode("header", { class: "mce-payhead__header" }, null, -1),
         createElementVNode("main", { class: "mce-payhead__main" }, null, -1)
       ])]);
     };
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$6 = {
   key: 0,
   class: "mce-segment__edge mce-segment__edge--front"
 };
@@ -15600,7 +15795,7 @@ const _hoisted_3$3 = {
   key: 1,
   class: "mce-segment__edge mce-segment__edge--end"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "Segment",
   props: {
     node: {},
@@ -15666,25 +15861,25 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             style: normalizeStyle$1(block.style)
           }, toDisplayString(block.name), 5);
         }), 128)),
-        __props.active ? (openBlock(), createElementBlock("div", _hoisted_1$7)) : createCommentVNode("", true),
+        __props.active ? (openBlock(), createElementBlock("div", _hoisted_1$6)) : createCommentVNode("", true),
         createElementVNode("span", _hoisted_2$3, toDisplayString(props.node.name), 1),
         __props.active ? (openBlock(), createElementBlock("div", _hoisted_3$3)) : createCommentVNode("", true)
       ], 6);
     };
   }
 });
-const _hoisted_1$6 = { class: "mce-track" };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = { class: "mce-track" };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "Track",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
         renderSlot(_ctx.$slots, "default")
       ]);
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "Trackhead",
   props: {
     node: {}
@@ -15700,14 +15895,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = { class: "mce-timeline__toolbar" };
+const _hoisted_1$4 = { class: "mce-timeline__toolbar" };
 const _hoisted_2$2 = { class: "mce-timeline__main" };
 const _hoisted_3$2 = { class: "mce-timeline__left" };
 const _hoisted_4 = { class: "mce-timeline__left-wrapper" };
 const _hoisted_5 = { class: "mce-timeline__right-wrapper" };
 const _hoisted_6 = { class: "mce-timeline__ruler" };
 const _hoisted_7 = { class: "mce-timeline__track" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "Timeline",
   setup(__props) {
     const {
@@ -15808,12 +16003,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         onWheel: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["prevent"]))
       }, [
-        createElementVNode("div", _hoisted_1$5, [
+        createElementVNode("div", _hoisted_1$4, [
           createElementVNode("div", {
             class: "mce-timeline__play",
             onClick: toggle
           }, [
-            createVNode(unref(_sfc_main$C), {
+            createVNode(unref(_sfc_main$D), {
               icon: paused.value ? "$play" : "$pause"
             }, null, 8, ["icon"])
           ])
@@ -15827,7 +16022,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 })
               }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
-                  return openBlock(), createBlock(_sfc_main$a, {
+                  return openBlock(), createBlock(_sfc_main$9, {
                     key: index,
                     node
                   }, null, 8, ["node"]);
@@ -15842,7 +16037,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", _hoisted_5, [
               createElementVNode("div", _hoisted_6, [
-                createVNode(_sfc_main$p, {
+                createVNode(_sfc_main$q, {
                   ref: "rulerTpl",
                   zoom: 1 / unref(msPerPx) * fps.value,
                   unit: 100,
@@ -15860,9 +16055,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   })
                 }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
-                    return openBlock(), createBlock(_sfc_main$b, { key: index }, {
+                    return openBlock(), createBlock(_sfc_main$a, { key: index }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$c, {
+                        createVNode(_sfc_main$b, {
                           node,
                           "ms-per-px": unref(msPerPx),
                           active: unref(selection).some((v) => v.equal(node)),
@@ -15874,7 +16069,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   }), 128))
                 ], 4)
               ]),
-              createVNode(_sfc_main$d, {
+              createVNode(_sfc_main$c, {
                 style: normalizeStyle$1({
                   transform: `translate(${offset2.value[0] + Math.ceil(unref(currentTime) / unref(msPerPx))}px, 0px)`
                 })
@@ -15899,7 +16094,7 @@ const _timeline = definePlugin((editor) => {
         type: "panel",
         position: "bottom",
         size: 160,
-        component: _sfc_main$9
+        component: _sfc_main$8
       }
     ],
     hotkeys: [
@@ -15907,10 +16102,10 @@ const _timeline = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$4 = { class: "mce-toolbelt" };
+const _hoisted_1$3 = { class: "mce-toolbelt" };
 const _hoisted_2$1 = { key: 0 };
 const _hoisted_3$1 = { key: 1 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "Toolbelt",
   setup(__props) {
     const {
@@ -16009,19 +16204,19 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       ];
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (tool, key) => {
           return openBlock(), createElementBlock("div", {
             key,
             class: "mce-toolbelt__group"
           }, [
-            createVNode(_sfc_main$q, {
+            createVNode(_sfc_main$r, {
               location: "top",
               offset: 12,
               "show-arrow": ""
             }, {
               activator: withCtx(({ props: slotProps }) => [
-                createVNode(_sfc_main$y, mergeProps({
+                createVNode(_sfc_main$z, mergeProps({
                   icon: "",
                   class: "mce-toolbelt__btn",
                   active: tool.active || tool.checked || false
@@ -16029,7 +16224,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                   onClick: tool.handle
                 }), {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), {
+                    createVNode(unref(_sfc_main$D), {
                       icon: `$${tool.key}`
                     }, null, 8, ["icon"])
                   ]),
@@ -16044,19 +16239,19 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               ]),
               _: 2
             }, 1024),
-            tool.children?.length ? (openBlock(), createBlock(_sfc_main$t, {
+            tool.children?.length ? (openBlock(), createBlock(_sfc_main$u, {
               key: 0,
               items: tool.children,
               offset: 12,
               location: "top-start"
             }, {
               activator: withCtx(({ props }) => [
-                createVNode(_sfc_main$y, mergeProps({
+                createVNode(_sfc_main$z, mergeProps({
                   icon: "",
                   class: "mce-toolbelt__arrow"
                 }, { ref_for: true }, props), {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), { icon: "$arrowDown" })
+                    createVNode(unref(_sfc_main$D), { icon: "$arrowDown" })
                   ]),
                   _: 1
                 }, 16)
@@ -16072,7 +16267,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 ], 64)) : createCommentVNode("", true)
               ]),
               prepend: withCtx(({ item }) => [
-                createVNode(unref(_sfc_main$C), {
+                createVNode(unref(_sfc_main$D), {
                   class: "mce-toolbelt__icon",
                   icon: `$${item.key}`
                 }, null, 8, ["icon"])
@@ -16096,7 +16291,7 @@ const _toolbelt = definePlugin((editor) => {
       {
         name: "toolbelt",
         type: "overlay",
-        component: _sfc_main$8,
+        component: _sfc_main$7,
         ignore: () => !toolbelt.value
       }
     ]
@@ -16601,7 +16796,7 @@ function useEditor() {
   }
   return editor;
 }
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "Floatbar",
   props: {
     ...makeMceOverlayProps({
@@ -16646,7 +16841,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         "content-style": style.value,
         class: "mce-floatbar",
@@ -16665,11 +16860,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "mce-float-panel__title"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "FloatPanel",
   props: /* @__PURE__ */ mergeModels({
     title: {},
@@ -16693,7 +16888,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       isActive
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$k, {
+      return openBlock(), createBlock(_sfc_main$l, {
         modelValue: transform.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => transform.value = $event),
         class: "mce-float-panel",
@@ -16703,14 +16898,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(({ props: slotProps }) => [
           createElementVNode("div", mergeProps({ class: "mce-float-panel__card" }, slotProps), [
-            __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+            __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
               createElementVNode("div", null, toDisplayString(__props.title), 1),
-              createVNode(_sfc_main$y, {
+              createVNode(_sfc_main$z, {
                 icon: "",
                 onClick: _cache[0] || (_cache[0] = ($event) => isActive.value = false)
               }, {
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$C), { icon: "$close" })
+                  createVNode(unref(_sfc_main$D), { icon: "$close" })
                 ]),
                 _: 1
               })
@@ -16729,7 +16924,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {
     class: [String, Array, Object],
@@ -16763,7 +16958,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "LayoutItem",
   props: {
     class: [String, Array, Object],
@@ -16809,11 +17004,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$1 = {
   key: 0,
   class: "mce-main__scroller"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "Main",
   props: {
     scrollable: Boolean
@@ -16828,14 +17023,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         ]]),
         style: normalizeStyle$1([unref(mainStyles)])
       }, [
-        props.scrollable ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+        props.scrollable ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
           renderSlot(_ctx.$slots, "default")
         ])) : renderSlot(_ctx.$slots, "default", { key: 1 })
       ], 6);
     };
   }
 });
-const _hoisted_1$1 = ["data-pixel-ratio"];
+const _hoisted_1 = ["data-pixel-ratio"];
 const _hoisted_2 = {
   ref: "canvasTpl",
   class: "mce-editor__canvas"
@@ -16844,7 +17039,7 @@ const _hoisted_3 = {
   ref: "overlayContainerTpl",
   class: "mce-overlay-container"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "EditorLayout",
   props: {
     ...makeMceStrategyProps({
@@ -17204,7 +17399,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       editor
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$5, {
+      return openBlock(), createBlock(_sfc_main$4, {
         class: normalizeClass(["mce-editor", [
           unref(state) && `mce-editor--${unref(state)}`,
           unref(activeDrawingTool) && `mce-editor--drawing-tool-${unref(activeDrawingTool).name}`,
@@ -17212,7 +17407,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         ]])
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$3, null, {
+          createVNode(_sfc_main$2, null, {
             default: withCtx(() => [
               createElementVNode("div", {
                 ref_key: "drawboardDom",
@@ -17225,7 +17420,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 }, ["prevent"]))
               }, [
                 createElementVNode("canvas", _hoisted_2, null, 512),
-                slots["floatbar-top"] || slots.floatbar ? (openBlock(), createBlock(_sfc_main$7, {
+                slots["floatbar-top"] || slots.floatbar ? (openBlock(), createBlock(_sfc_main$6, {
                   key: 0,
                   location: "top-start",
                   target: unref(state) === "typing" ? unref(componentRefs)["mce:text"]?.[0]?.textEditor : unref(componentRefs)["mce:selection"]?.[0]?.transformControls?.$el,
@@ -17237,7 +17432,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                slots["floatbar-bottom"] ? (openBlock(), createBlock(_sfc_main$7, {
+                slots["floatbar-bottom"] ? (openBlock(), createBlock(_sfc_main$6, {
                   key: 1,
                   location: "bottom-start",
                   target: unref(componentRefs)["mce:selection"]?.[0]?.transformControls?.$el,
@@ -17249,7 +17444,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
                 renderSlot(_ctx.$slots, "drawboard", normalizeProps(guardReactiveProps(slotProps)))
-              ], 40, _hoisted_1$1)
+              ], 40, _hoisted_1)
             ]),
             _: 3
           }),
@@ -17265,7 +17460,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 ], 8, ["to"])) : createCommentVNode("", true)
               ], 64)) : item.type === "panel" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 item.position === "float" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  unref(config)[item.name] ? (openBlock(), createBlock(_sfc_main$6, {
+                  unref(config)[item.name] ? (openBlock(), createBlock(_sfc_main$5, {
                     key: 0,
                     modelValue: unref(config)[item.name],
                     "onUpdate:modelValue": ($event) => unref(config)[item.name] = $event,
@@ -17287,7 +17482,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     _: 2
                   }, 1032, ["modelValue", "onUpdate:modelValue", "title", "default-transform"])) : createCommentVNode("", true)
                 ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  unref(config)[item.name] ? (openBlock(), createBlock(_sfc_main$4, {
+                  unref(config)[item.name] ? (openBlock(), createBlock(_sfc_main$3, {
                     key: 0,
                     modelValue: unref(config)[item.name],
                     "onUpdate:modelValue": ($event) => unref(config)[item.name] = $event,
@@ -17311,178 +17506,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "mce-cropper" };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "Cropper",
-  props: /* @__PURE__ */ mergeModels({
-    image: {},
-    minScale: { default: 0.1 },
-    maxScale: { default: 3 }
-  }, {
-    "modelValue": { default: () => ({}) },
-    "modelModifiers": {},
-    "style": { default: () => ({}) },
-    "styleModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["start", "end", "update:transform"], ["update:modelValue", "update:style"]),
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const cropRect = useModel(__props, "modelValue");
-    const styleModel = useModel(__props, "style");
-    const rootBox = ref({ width: 0, height: 0 });
-    const { state: imageRef } = useImage(
-      computed(() => ({
-        src: props.image
-      }))
-    );
-    const backup = cloneDeep(cropRect.value);
-    const canvasRef = useTemplateRef("canvasRef");
-    const computedCropRect = computed({
-      get: () => {
-        const { left = 0, top = 0, right = 0, bottom = 0 } = cropRect.value;
-        return { left, top, right, bottom };
-      },
-      set: (val) => cropRect.value = val
-    });
-    const inverseMat = computed(() => {
-      const { left, top, right, bottom } = computedCropRect.value;
-      const sx = 1 / (1 - left - right);
-      const sy = 1 / (1 - top - bottom);
-      const tx = -left;
-      const ty = -top;
-      return { sx, sy, tx, ty };
-    });
-    const sourceTransform = computed({
-      get: () => {
-        const { sx, sy, tx, ty } = inverseMat.value;
-        const { scaleX = 1, scaleY = 1 } = styleModel.value;
-        const { width, height } = rootBox.value;
-        return {
-          width: sx * width,
-          height: sy * height,
-          left: tx * scaleX * (sx * width),
-          top: ty * scaleY * (sy * height)
-        };
-      },
-      set: (newValue) => {
-        const { width, height } = rootBox.value;
-        const { scaleX = 1, scaleY = 1 } = styleModel.value;
-        const transform = {
-          sx: newValue.width / width,
-          sy: newValue.height / height,
-          tx: newValue.left / newValue.width / scaleX,
-          ty: newValue.top / newValue.height / scaleY
-        };
-        const left = -transform.tx;
-        const top = -transform.ty;
-        const w = 1 - 1 / transform.sx;
-        const h2 = 1 - 1 / transform.sy;
-        const right = w - left;
-        const bottom = h2 - top;
-        computedCropRect.value = { left, top, right, bottom };
-      }
-    });
-    const scale = computed({
-      get: () => inverseMat.value.sx,
-      set: (value) => {
-        const transform = inverseMat.value;
-        const rate = transform.sx / value;
-        const left = -transform.tx;
-        const top = -transform.ty;
-        const w = 1 - 1 / value;
-        const h2 = 1 - 1 / transform.sy * rate;
-        const right = w - left;
-        const bottom = h2 - top;
-        computedCropRect.value = { left, top, right, bottom };
-      }
-    });
-    onBeforeMount(() => emit("start"));
-    onBeforeUnmount(() => emit("end"));
-    const sourceStyle = computed(() => {
-      const { sx, sy, tx, ty } = inverseMat.value;
-      const { scaleX = 1, scaleY = 1 } = styleModel.value;
-      return {
-        transform: [
-          `scale(${sx}, ${sy})`,
-          `translate(${tx * scaleX * 100}%, ${ty * scaleY * 100}%)`
-        ].join(" ")
-      };
-    });
-    watch([canvasRef, imageRef], render2);
-    watch(computedCropRect, render2, { deep: true });
-    watch([() => styleModel.value.scaleX, () => styleModel.value.scaleY], render2);
-    function render2() {
-      const ctx = canvasRef.value?.getContext("2d");
-      if (!ctx || !imageRef.value)
-        return;
-      const { scaleX = 1, scaleY = 1 } = styleModel.value;
-      const { naturalWidth, naturalHeight } = imageRef.value;
-      ctx.canvas.width = naturalWidth;
-      ctx.canvas.height = naturalHeight;
-      ctx.clearRect(0, 0, naturalWidth, naturalHeight);
-      ctx.globalAlpha = 0.4;
-      ctx.scale(scaleX, scaleY);
-      ctx.drawImage(imageRef.value, 0, 0, naturalWidth, naturalHeight);
-    }
-    function ok() {
-      emit("end");
-    }
-    function cancel() {
-      cropRect.value = backup;
-      ok();
-    }
-    function onResizeObserver(entries) {
-      const { width, height } = entries[0].contentRect;
-      rootBox.value = { width, height };
-    }
-    function applySourceTransformToStyle() {
-      const { left = 0, top = 0, width = 0, height = 0 } = styleModel.value;
-      const { sx, sy, tx, ty } = inverseMat.value;
-      cropRect.value = {};
-      styleModel.value = {
-        ...styleModel.value,
-        width: sx * width,
-        height: sy * height,
-        left: left + tx * (sx * width),
-        top: top + ty * (sy * height)
-      };
-      ok();
-    }
-    return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", {
-          class: "mce-cropper__source",
-          style: normalizeStyle$1(sourceStyle.value)
-        }, [
-          createElementVNode("canvas", {
-            ref_key: "canvasRef",
-            ref: canvasRef
-          }, null, 512)
-        ], 4),
-        createVNode(_sfc_main$k, {
-          modelValue: sourceTransform.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sourceTransform.value = $event),
-          class: "mce-cropper__transform",
-          rotatable: false
-        }, {
-          default: withCtx(({ props: slotProps }) => [
-            createElementVNode("div", mergeProps({ class: "mce-cropper__transform_rect" }, slotProps), null, 16)
-          ]),
-          _: 1
-        }, 8, ["modelValue"]),
-        renderSlot(_ctx.$slots, "default", {
-          scale: scale.value,
-          ok,
-          cancel,
-          applySourceTransformToStyle
-        })
-      ])), [
-        [unref(vResizeObserver), onResizeObserver]
-      ]);
-    };
-  }
-});
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Dialog",
   props: /* @__PURE__ */ mergeModels({
@@ -17510,7 +17533,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -17534,14 +17557,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$1 as Cropper,
+  _sfc_main$k as Cropper,
   _sfc_main as Dialog,
   Doc,
   Editor,
-  _sfc_main$w as EditorLayers,
-  _sfc_main$2 as EditorLayout,
-  _sfc_main$4 as EditorLayoutItem,
-  _sfc_main$8 as EditorToolbelt,
+  _sfc_main$x as EditorLayers,
+  _sfc_main$1 as EditorLayout,
+  _sfc_main$3 as EditorLayoutItem,
+  _sfc_main$7 as EditorToolbelt,
   IconsSymbol,
   MceLayerItemKey,
   MceLayerKey,
@@ -17549,12 +17572,12 @@ export {
   MceLayoutKey,
   MceMenuSymbol,
   MceOverlaySymbol,
-  _sfc_main$t as Menu,
+  _sfc_main$u as Menu,
   Model,
-  _sfc_main$p as Ruler,
+  _sfc_main$q as Ruler,
   SUPPORTS_CLIPBOARD,
-  _sfc_main$n as Scrollbar,
-  _sfc_main$k as TransformControls,
+  _sfc_main$o as Scrollbar,
+  _sfc_main$l as TransformControls,
   USER_AGENT,
   boundingBoxToStyle,
   consoleError,