mce 0.13.0 → 0.13.2

package/dist/index.js

@@ -1,6 +1,6 @@
+import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation } from "modern-canvas";
 import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, onMounted, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, readonly, toRef, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, withDirectives, vShow, vModelText, nextTick, withModifiers, isRef } from "vue";
 import { useFileDialog, useEventListener, isClient, useResizeObserver as useResizeObserver$1, useLocalStorage, onClickOutside, useMouse, useDebounceFn } from "@vueuse/core";
-import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation } from "modern-canvas";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent } from "modern-idoc";
 import { saveAs } from "file-saver";
 import { Fonts } from "modern-font";
@@ -111,23 +111,26 @@ const _0_config_base = defineMixin((editor, options) => {
   } = editor;
   registerConfig("theme", "system");
   registerConfig("viewMode", "edgeless");
+  registerConfig("watermark", void 0);
   registerConfig("checkerboard", false);
+  registerConfig("checkerboardStyle", "grid");
   registerConfig("pixelGrid", false);
+  registerConfig("pixelate", true);
   registerConfig("camera", false);
   registerConfig("ruler", false);
   registerConfig("scrollbar", false);
   registerConfig("layers", false);
   registerConfig("timeline", false);
   registerConfig("statusbar", false);
-  registerConfig("wheelZoom", false);
   registerConfig("frameOutline", false);
   registerConfig("frameGap", 48);
   registerConfig("typographyStrategy", "autoHeight");
   registerConfig("handleShape", "rect");
-  registerConfig("localDb", false);
   registerConfig("screenCenterOffset", { left: 0, top: 0, bottom: 0, right: 0 });
+  registerConfig("localDb", false);
   return () => {
     const {
+      renderEngine,
       camera,
       drawboardEffect
     } = editor;
@@ -136,6 +139,11 @@ const _0_config_base = defineMixin((editor, options) => {
         config.value[key] = options[key];
       }
     });
+    watch(
+      () => config.value.pixelate,
+      (value) => renderEngine.value.pixelate = value,
+      { immediate: true }
+    );
     watch(
       () => config.value.camera,
       (enable) => {
@@ -143,14 +151,24 @@ const _0_config_base = defineMixin((editor, options) => {
       },
       { immediate: true }
     );
+    watch(
+      () => config.value.watermark,
+      (value) => drawboardEffect.value.watermark = value,
+      { immediate: true }
+    );
     watch(
       () => config.value.checkerboard,
-      (enable) => drawboardEffect.value.checkerboard = enable,
+      (value) => drawboardEffect.value.checkerboard = value,
+      { immediate: true }
+    );
+    watch(
+      () => config.value.checkerboardStyle,
+      (value) => drawboardEffect.value.checkerboardStyle = value,
       { immediate: true }
     );
     watch(
       () => config.value.pixelGrid,
-      (enable) => drawboardEffect.value.pixelGrid = enable,
+      (value) => drawboardEffect.value.pixelGrid = value,
       { immediate: true }
     );
   };
@@ -882,6 +900,13 @@ const _0_context = defineMixin((editor) => {
   const root = computed(() => doc.value.root);
   const nodes = ref([]);
   const nodeIndexMap = reactive(/* @__PURE__ */ new Map());
+  const selection = ref([]);
+  const elementSelection = computed({
+    get: () => selection.value.filter((v) => v instanceof Element2D),
+    set: (val) => selection.value = val
+  });
+  const textSelection = ref();
+  const hoverElement = ref();
   const drawboardPointer = ref();
   const state = ref();
   const stateContext = ref();
@@ -915,6 +940,10 @@ const _0_context = defineMixin((editor) => {
     root,
     nodes,
     nodeIndexMap,
+    selection,
+    elementSelection,
+    textSelection,
+    hoverElement,
     drawboardDom,
     drawboardAabb,
     state,
@@ -927,7 +956,8 @@ const _0_context = defineMixin((editor) => {
   return () => {
     const {
       on,
-      root: root2
+      root: root2,
+      state: state2
     } = editor;
     function updateNodes(value) {
       let node;
@@ -945,30 +975,10 @@ const _0_context = defineMixin((editor) => {
       nodeIndexMap.set(node.id, nodes.value.length - 1);
     }
     on("setDoc", () => updateNodes());
-  };
-});
-const _0_element = defineMixin((editor) => {
-  const selection = ref([]);
-  const elementSelection = computed({
-    get: () => selection.value.filter((v) => v instanceof Element2D),
-    set: (val) => selection.value = val
-  });
-  const hoverElement = ref();
-  const textSelection = ref();
-  Object.assign(editor, {
-    selection,
-    elementSelection,
-    textSelection,
-    hoverElement
-  });
-  return () => {
-    const {
-      state
-    } = editor;
     watch(selection, (value) => {
       window.$$0 = value[0];
     });
-    watch(state, () => {
+    watch(state2, () => {
       textSelection.value = void 0;
       hoverElement.value = void 0;
     });
@@ -1118,10 +1128,14 @@ const en = {
   "view:pixelGrid": "Pixel grid",
   "view:ruler": "Ruler",
   "view:scrollbar": "Scrollbar",
-  "view:layers": "Layers",
   "view:timeline": "Timeline",
   "view:statusbar": "Statusbar",
   "view:frameOutline": "Frame outlines",
+  "checkerboardStyle:grid": "Grid checkerboard",
+  "checkerboardStyle:dot": "Dot checkerboard",
+  "panels": "Panels",
+  "panels:layers": "Open layers panel",
+  "pixelate": "Pixelate",
   "layers": "Layers",
   "zoomIn": "Zoom in",
   "zoomOut": "Zoom out",
@@ -1198,10 +1212,14 @@ const zhHans = {
   "view:pixelGrid": "像素网格",
   "view:ruler": "标尺",
   "view:scrollbar": "滚动条",
-  "view:layers": "图层",
   "view:timeline": "时间线",
   "view:statusbar": "状态栏",
   "view:frameOutline": "框架轮廓",
+  "checkerboardStyle:grid": "网格棋盘",
+  "checkerboardStyle:dot": "点状棋盘",
+  "panels": "面板",
+  "panels:layers": "打开图层面板",
+  "pixelate": "像素化",
   "layers": "图层",
   "zoomIn": "放大",
   "zoomOut": "缩小",
@@ -1455,7 +1473,9 @@ function createTextElement(content, style) {
       height: box.height
     },
     text: { content: normalizeTextContent(content) },
-    meta: { inPptIs: "Shape" }
+    meta: {
+      inPptIs: "Shape"
+    }
   };
 }
 async function createImageElement(image) {
@@ -1465,7 +1485,10 @@ async function createImageElement(image) {
       ...await getImageSizeFromUrl(image)
     },
     foreground: { image },
-    meta: { inPptIs: "Picture" }
+    meta: {
+      inPptIs: "Picture",
+      lockAspectRatio: true
+    }
   };
 }
 function isClickInsideElement(event, targetDiv) {
@@ -2235,64 +2258,41 @@ const _3_view = defineMixin((editor) => {
 });
 const _4_0_text = defineMixin((editor) => {
   const {
-    config
+    config,
+    isElement
   } = editor;
   function textFontSizeToFit(element) {
     function _handle(element2) {
-      const chars = element2.text.base.characters;
-      let pos = 0;
-      let char;
-      chars.forEach((_char) => {
-        const _pos = _char.lineBox.left + _char.lineBox.width;
-        if (_pos > pos) {
-          char = _char;
-          pos = _pos;
-        }
-      });
-      const style = {};
-      const content = chars.filter((_char) => _char.lineBox.top === char?.lineBox.top).map((char2) => {
-        Object.assign(
-          style,
-          { ...char2.parent.style },
-          { ...char2.parent.parent.style }
-        );
-        return char2.content;
-      }).join("");
+      if (!element2.text.isValid()) {
+        return;
+      }
       const { boundingBox } = measureText({
         style: {
           ...element2.style.toJSON(),
           width: "auto"
         },
-        content: [
-          {
-            fragments: [
-              { ...style, content }
-            ]
-          }
-        ]
+        content: element2.text.content
       });
       const fontSize = (element2.style.fontSize || 12) / 2;
       const scale = (element2.style.width ?? 0) / (boundingBox.width + fontSize);
-      function _scaleStyle(style2) {
-        if (style2.fontSize)
-          style2.fontSize = style2.fontSize * scale;
-        if (style2.letterSpacing)
-          style2.letterSpacing = style2.letterSpacing * scale;
+      function _scaleStyle(style) {
+        if (style.fontSize)
+          style.fontSize = style.fontSize * scale;
+        if (style.letterSpacing)
+          style.letterSpacing = style.letterSpacing * scale;
       }
       _scaleStyle(element2.style);
-      if (element2.text?.isValid?.() && Array.isArray(element2.text?.content)) {
-        element2.text.content.forEach((p) => {
-          _scaleStyle(p);
-          p.fragments.forEach((f) => {
-            _scaleStyle(f);
-          });
+      element2.text.content.forEach((p) => {
+        _scaleStyle(p);
+        p.fragments.forEach((f) => {
+          _scaleStyle(f);
         });
-      }
+      });
       element2.requestRedraw();
     }
     _handle(element);
     element.findOne((descendant) => {
-      if (descendant instanceof Element2D) {
+      if (isElement(descendant)) {
         _handle(descendant);
       }
       return false;
@@ -2307,7 +2307,7 @@ const _4_0_text = defineMixin((editor) => {
       return;
     }
     function _handle(element2) {
-      if (!element2.text?.isValid?.() || typeof element2.text?.content !== "object") {
+      if (!element2.text.isValid()) {
         return;
       }
       const style = element2.style.toJSON();
@@ -2331,7 +2331,7 @@ const _4_0_text = defineMixin((editor) => {
     }
     _handle(element);
     element.findOne((descendant) => {
-      if (descendant instanceof Element2D) {
+      if (isElement(descendant)) {
         _handle(descendant);
       }
       return false;
@@ -2571,23 +2571,6 @@ const _4_2_element = defineMixin((editor) => {
     options.textToFit && textToFit(element);
     options.textFontSizeToFit && textFontSizeToFit(element);
   }
-  function pointerActivateElement(element, event) {
-    if (element && (event?.ctrlKey || event?.shiftKey || event?.metaKey)) {
-      let elements;
-      if (selection.value.length === 1) {
-        elements = [selection.value[0], element];
-      } else {
-        if (selection.value.findIndex((v) => v.equal(element)) > -1) {
-          elements = selection.value.filter((v) => v.equal(element));
-        } else {
-          elements = [...selection.value, element];
-        }
-      }
-      selection.value = elements;
-    } else {
-      selection.value = element ? [element] : [];
-    }
-  }
   function selectArea(areaInDrawboard) {
     const selected = root.value?.children.flatMap((node) => {
       if (isFrame(node)) {
@@ -2606,7 +2589,6 @@ const _4_2_element = defineMixin((editor) => {
     updateElement,
     getElement,
     resizeElement,
-    pointerActivateElement,
     selectArea
   });
 });
@@ -3093,7 +3075,6 @@ const mixins = [
   _0_config,
   _0_config_base,
   _0_context,
-  _0_element,
   _0_font,
   _0_helper,
   _0_locale,
@@ -4865,7 +4846,8 @@ const _image = definePlugin((editor) => {
     addElement,
     to,
     fonts,
-    upload
+    upload,
+    drawboardEffect
   } = editor;
   const insertImage = async (url, options) => {
     return addElement(await createImageElement(url), {
@@ -4892,7 +4874,17 @@ const _image = definePlugin((editor) => {
           data: doc,
           fonts,
           width: doc.style.width,
-          height: doc.style.height
+          height: doc.style.height,
+          onBefore: (engine) => {
+            engine.root.append(
+              new DrawboardEffect({
+                internalMode: "back",
+                effectMode: "before",
+                ...drawboardEffect.value.getProperties()
+              })
+            );
+            console.log(drawboardEffect.value.getProperties());
+          }
         });
         return await new Promise((resolve) => {
           canvas.toBlob(
@@ -5140,32 +5132,56 @@ const _layerOrder = definePlugin((editor) => {
 });
 const _layerPosition = definePlugin((editor) => {
   const {
-    currentFrameAabb,
+    isElement,
+    rootAabb,
     elementSelection,
     getAabb
   } = editor;
   function align(direction) {
-    const box = elementSelection.value.length === 1 ? currentFrameAabb.value : getAabb(elementSelection.value);
     elementSelection.value.forEach((el) => {
-      switch (direction) {
-        case "left":
-          el.style.left = 0;
-          break;
-        case "horizontal-center":
-          el.style.left = (box.width - el.style.width) / 2;
-          break;
-        case "right":
-          el.style.left = box.width - el.style.width;
-          break;
-        case "top":
-          el.style.top = 0;
-          break;
-        case "vertical-center":
-          el.style.top = (box.height - el.style.height) / 2;
-          break;
-        case "bottom":
-          el.style.top = box.height - el.style.height;
-          break;
+      if (el.parent && isElement(el.parent)) {
+        const parentAabb = getAabb(el.parent);
+        switch (direction) {
+          case "left":
+            el.style.left = 0;
+            break;
+          case "horizontal-center":
+            el.style.left = (parentAabb.width - el.style.width) / 2;
+            break;
+          case "right":
+            el.style.left = parentAabb.width - el.style.width;
+            break;
+          case "top":
+            el.style.top = 0;
+            break;
+          case "vertical-center":
+            el.style.top = (parentAabb.height - el.style.height) / 2;
+            break;
+          case "bottom":
+            el.style.top = parentAabb.height - el.style.height;
+            break;
+        }
+      } else {
+        switch (direction) {
+          case "left":
+            el.style.left = rootAabb.value.left;
+            break;
+          case "horizontal-center":
+            el.style.left = (rootAabb.value.left + rootAabb.value.width - el.style.width) / 2;
+            break;
+          case "right":
+            el.style.left = rootAabb.value.left + rootAabb.value.width - el.style.width;
+            break;
+          case "top":
+            el.style.top = rootAabb.value.top;
+            break;
+          case "vertical-center":
+            el.style.top = (rootAabb.value.top + rootAabb.value.height - el.style.height) / 2;
+            break;
+          case "bottom":
+            el.style.top = rootAabb.value.top + rootAabb.value.height - el.style.height;
+            break;
+        }
       }
     });
   }
@@ -5282,20 +5298,55 @@ const _menu = definePlugin((editor, options) => {
       { key: "zoomToSelection", disabled: !hasSelected.value }
     ]
   }));
+  const panelsMenu = computed(() => ({
+    key: "panels",
+    children: [
+      { key: "panels:layers", checked: config.value.layers }
+    ]
+  }));
+  function setCheckerboard(value) {
+    if (config.value.checkerboard && config.value.checkerboardStyle === value) {
+      config.value.checkerboard = false;
+    } else {
+      config.value.checkerboard = true;
+      config.value.checkerboardStyle = value;
+    }
+  }
+  const checkerboardMenu = computed(() => ({
+    key: "view:checkerboard",
+    children: [
+      {
+        key: "checkerboardStyle:grid",
+        checked: config.value.checkerboard && config.value.checkerboardStyle === "grid",
+        handle: () => setCheckerboard("grid")
+      },
+      {
+        key: "checkerboardStyle:dot",
+        checked: config.value.checkerboard && config.value.checkerboardStyle === "dot",
+        handle: () => setCheckerboard("dot")
+      }
+    ]
+  }));
   const viewMenu = computed(() => ({
     key: "view",
     children: [
-      { key: "view:checkerboard", checked: config.value.checkerboard },
+      checkerboardMenu.value,
       { key: "view:pixelGrid", checked: config.value.pixelGrid },
       { key: "view:ruler", checked: config.value.ruler },
       { key: "view:scrollbar", checked: config.value.scrollbar },
-      { key: "view:layers", checked: config.value.layers },
       { key: "view:timeline", checked: config.value.timeline },
       { key: "view:statusbar", checked: config.value.statusbar },
       { key: "view:frameOutline", checked: config.value.frameOutline },
       { type: "divider" },
+      {
+        key: "pixelate",
+        checked: config.value.pixelate,
+        handle: () => config.value.pixelate = !config.value.pixelate
+      },
+      panelsMenu.value,
+      { type: "divider" },
       ...zoomViewMenu.value.children
-    ]
+    ].filter(Boolean)
   }));
   const objectMenu1 = computed(() => [
     { key: "groupSelection", disabled: !hasSelected.value },
@@ -5479,6 +5530,20 @@ const _open = definePlugin((editor) => {
     ]
   };
 });
+const _panels = definePlugin((editor) => {
+  const {
+    config
+  } = editor;
+  return {
+    name: "mce:panels",
+    commands: [
+      { command: "panels", handle: (panel) => config.value[panel] = !config.value[panel] }
+    ],
+    hotkeys: [
+      { command: "panels:layers", key: "Alt+¡" }
+    ]
+  };
+});
 const _saveAs = definePlugin((editor) => {
   const {
     to,
@@ -5790,6 +5855,7 @@ const plugins = [
   _move,
   _new,
   _open,
+  _panels,
   _saveAs,
   _scroll,
   _select,
@@ -6071,6 +6137,10 @@ const MceOverlaySymbol = Symbol.for("MceOverlaySymbol");
 const makeMceOverlayProps = propsFactory({
   location: String,
   offset: Number,
+  middlewares: {
+    type: Object,
+    default: () => ["offset", "flip", "shift"]
+  },
   target: Object,
   attach: {
     type: [String, Boolean, Object],
@@ -6120,14 +6190,10 @@ const makeMceStrategyProps = propsFactory({
   hoverStrategy: Function
 }, "makeMceStrategyProps");
 const defaultResizeStrategy = (element) => {
-  switch (element.meta?.inPptIs) {
-    case "Picture":
-      return "diagonalAspectRatio";
+  if (element.meta.lockAspectRatio) {
+    return "aspectRatio";
   }
-  if (element.foreground.isValid()) {
-    return "diagonalAspectRatio";
-  }
-  return "free";
+  return void 0;
 };
 const defaultActiveStrategy = (context) => {
   const { element, oldElement, isExcluded } = context;
@@ -6587,14 +6653,15 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     });
     const contentEl = useTemplateRef("contentElTpl");
     const attach = computed(() => props.attach ?? overlayItem.attach?.value ?? "body");
+    const middlewares = new Set(props.middlewares);
     const { floatingStyles, update } = useFloating(target, contentEl, {
       placement: computed(() => props.location),
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(() => props.offset ?? 0),
-        flip(),
-        shift({ padding: 20 })
-      ]
+        middlewares.has("offset") && offset(() => props.offset ?? 0),
+        middlewares.has("flip") && flip(),
+        middlewares.has("shift") && shift({ padding: 20 })
+      ].filter(Boolean)
     });
     const style = computed(() => {
       return {
@@ -6686,7 +6753,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const isActive = useModel(__props, "modelValue");
     const opened = ref(-1);
     const overlay = useTemplateRef("overlayTpl");
-    const menuItemRefs = useTemplateRef("menuItemTplRefs");
+    const menuItemRefs = ref([]);
     const hasPrepend = computed(() => Boolean(props.items?.some((v) => "checked" in v)));
     const uid = useId();
     const parent = inject(MceMenuSymbol, null);
@@ -6723,10 +6790,16 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       } else {
         isActive.value = false;
         parent?.closeParents(e);
-        item.handle?.(e);
-        emit("click:item", item, e);
+        if (item.handle) {
+          item.handle?.(e);
+        } else {
+          emit("click:item", item, e);
+        }
       }
     }
+    function onMouseenter(item, index) {
+      opened.value = item.disabled ? -1 : index;
+    }
     function onMouseleave() {
       if (props.items?.[opened.value]?.children?.length === void 0) {
         opened.value = -1;
@@ -6765,14 +6838,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 item.type === "divider" ? (openBlock(), createElementBlock("div", {
                   key: 0,
                   ref_for: true,
-                  ref: "menuItemTplRefs",
+                  ref: (el) => menuItemRefs.value[index] = el ?? void 0,
                   class: "mce-list__divider"
                 }, null, 512)) : (openBlock(), createElementBlock("div", {
                   key: 1,
                   ref_for: true,
-                  ref: "menuItemTplRefs",
+                  ref: (el) => menuItemRefs.value[index] = el ?? void 0,
                   class: "mce-list__item",
-                  onMouseenter: ($event) => item.disabled ? opened.value = -1 : opened.value = index
+                  onMouseenter: ($event) => onMouseenter(item, index)
                 }, [
                   createElementVNode("div", {
                     class: normalizeClass(["mce-list-item", [
@@ -6956,6 +7029,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   props: {
     ...makeMceOverlayProps({
       location: "top-start",
+      middlewares: ["offset", "shift"],
       offset: 8
     })
   },
@@ -6981,6 +7055,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         ref: "overlayTpl",
         class: "mce-floatbar",
         location: props.location,
+        middlewares: props.middlewares,
         offset: unref(selection)[0] && unref(isFrame)(unref(selection)[0]) ? 32 : 8,
         target: props.target,
         attach: false,
@@ -6990,7 +7065,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           unref(selection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["location", "offset", "target"]);
+      }, 8, ["location", "middlewares", "offset", "target"]);
     };
   }
 });
@@ -8032,11 +8107,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   props: {
     tag: { default: "div" },
     modelValue: {},
-    moveable: { type: Boolean, default: true },
+    movable: { type: Boolean, default: true },
     rotatable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
     threshold: { default: 0 },
-    resizeStrategy: { default: "free" },
+    resizeStrategy: {},
     handleStrategy: { default: "default" },
     handleShape: {},
     color: { default: "black" },
@@ -8175,39 +8250,34 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       event?.preventDefault();
       event?.stopPropagation();
       const { left = 0, top = 0, width = 0, height = 0, rotate = 0 } = model.value;
-      const aspectRatio = width && height ? width / height : 0;
-      const anchor = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
-      activeHandle.value = anchor.type;
-      const isMove = anchor.type === "move";
-      const isRotate = anchor.type.startsWith("rotate");
-      const isHorizontal = anchor.type === "resize-left" || anchor.type === "resize-right";
-      const isHorizontalVertical = anchor.type.split("-").length === 2;
+      let aspectRatio = 0;
+      if (width && height) {
+        aspectRatio = width / height;
+      }
+      const handle = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
+      activeHandle.value = handle.type;
+      const isMove = handle.type === "move";
+      const isRotate = handle.type.startsWith("rotate");
+      const isHorizontal = handle.type === "resize-left" || handle.type === "resize-right";
+      const isHorizontalVertical = handle.type.split("-").length === 2;
       const centerPoint = {
         x: left + width / 2,
         y: top + height / 2
       };
-      const startingPointBefore = {
-        x: left,
-        y: top
+      const startPoint = {
+        x: left + handle.x + handle.width / 2,
+        y: top + handle.y + handle.height / 2
       };
-      if (!isMove) {
-        startingPointBefore.x += anchor.x + anchor.width / 2;
-        startingPointBefore.y += anchor.y + anchor.height / 2;
-      }
-      const startingPoint = calcRotation(
-        startingPointBefore,
-        centerPoint,
-        isMove ? 0 : rotate
-      );
-      const symmetricPoint = {
-        x: centerPoint.x * 2 - startingPoint.x,
-        y: centerPoint.y * 2 - startingPoint.y
+      const rotatedStartPoint = rotatePoint(startPoint, centerPoint, rotate);
+      const rotatedSymmetricPoint = {
+        x: centerPoint.x * 2 - rotatedStartPoint.x,
+        y: centerPoint.y * 2 - rotatedStartPoint.y
       };
-      const rotationBefore = Math.atan2(
-        startingPoint.y - centerPoint.y,
-        startingPoint.x - centerPoint.x
+      const startAngle = Math.atan2(
+        rotatedStartPoint.y - centerPoint.y,
+        rotatedStartPoint.x - centerPoint.x
       ) / (Math.PI / 180);
-      let client = event ? { x: event.clientX, y: event.clientY } : void 0;
+      let startClientPoint = event ? { x: event.clientX, y: event.clientY } : void 0;
       function startTransform() {
         transforming.value = true;
         emit("start", model.value);
@@ -8217,81 +8287,67 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }
       function onMove(event2) {
         const updated = {};
-        if (!client) {
-          client = { x: event2.clientX, y: event2.clientY };
+        if (!startClientPoint) {
+          startClientPoint = { x: event2.clientX, y: event2.clientY };
         }
-        const clientOffset = {
-          x: event2.clientX - client.x,
-          y: event2.clientY - client.y
+        const offset2 = {
+          x: event2.clientX - startClientPoint.x,
+          y: event2.clientY - startClientPoint.y
         };
         if (!transforming.value) {
-          if (Math.abs(clientOffset.x) < props.threshold && Math.abs(clientOffset.y) < props.threshold) {
+          if (Math.abs(offset2.x) < props.threshold && Math.abs(offset2.y) < props.threshold) {
             return;
           }
           startTransform();
         }
-        const cursorPoint = {
-          x: startingPoint.x + clientOffset.x,
-          y: startingPoint.y + clientOffset.y
+        const rotatedCurrentPoint = {
+          x: rotatedStartPoint.x + offset2.x,
+          y: rotatedStartPoint.y + offset2.y
         };
         if (isMove) {
-          if (!props.moveable) {
-            return;
+          if (props.movable) {
+            updated.left = startPoint.x + offset2.x;
+            updated.top = startPoint.y + offset2.y;
           }
-          updated.left = cursorPoint.x;
-          updated.top = cursorPoint.y;
         } else if (isRotate) {
-          const rotationAfter = Math.atan2(
-            cursorPoint.y - centerPoint.y,
-            cursorPoint.x - centerPoint.x
-          ) / (Math.PI / 180);
-          updated.rotate = (rotate + rotationAfter - rotationBefore + 360) % 360;
+          if (props.rotatable) {
+            const endAngle = Math.atan2(
+              rotatedCurrentPoint.y - centerPoint.y,
+              rotatedCurrentPoint.x - centerPoint.x
+            ) / (Math.PI / 180);
+            updated.rotate = (rotate + endAngle - startAngle + 360) % 360;
+          }
         } else if (isHorizontalVertical) {
-          const rotationBefore2 = calcRotation(cursorPoint, startingPoint, -rotate);
-          const rotationAfter = calcRotation(
-            isHorizontal ? { x: rotationBefore2.x, y: startingPoint.y } : { x: startingPoint.x, y: rotationBefore2.y },
-            startingPoint,
-            rotate
-          );
-          const newCenterPoint = {
-            x: rotationAfter.x - (rotationAfter.x - symmetricPoint.x) / 2,
-            y: rotationAfter.y + (symmetricPoint.y - rotationAfter.y) / 2
-          };
-          const hypotenuse = calcHypotenuse(rotationAfter, symmetricPoint);
+          const currentPoint = rotatePoint(rotatedCurrentPoint, centerPoint, -rotate);
+          const newCurrentPoint = isHorizontal ? { x: currentPoint.x, y: startPoint.y } : { x: startPoint.x, y: currentPoint.y };
+          const newRotatedCurrentPoint = rotatePoint(newCurrentPoint, centerPoint, rotate);
+          const hypotenuse = Math.abs(getDistance(newRotatedCurrentPoint, rotatedSymmetricPoint));
           if (isHorizontal) {
             updated.width = hypotenuse;
-            if (aspectRatio && props.resizeStrategy === "aspectRatio") {
+            if (props.resizeStrategy === "aspectRatio" && aspectRatio) {
               updated.height = hypotenuse / aspectRatio;
+            } else {
+              updated.height = height;
             }
           } else {
             updated.height = hypotenuse;
-            if (aspectRatio && props.resizeStrategy === "aspectRatio") {
+            if (props.resizeStrategy === "aspectRatio" && aspectRatio) {
               updated.width = hypotenuse * aspectRatio;
-            }
-          }
-          updated.left = newCenterPoint.x - (isHorizontal ? hypotenuse : width) / 2;
-          updated.top = newCenterPoint.y - (isHorizontal ? height : hypotenuse) / 2;
-        } else {
-          if (aspectRatio && (props.resizeStrategy === "aspectRatio" || props.resizeStrategy === "diagonalAspectRatio")) {
-            let flag = 1;
-            switch (anchor.type) {
-              case "resize-top-right":
-              case "resize-bottom-left":
-                flag = -1;
-                break;
-            }
-            if (clientOffset.x > clientOffset.y) {
-              cursorPoint.x = startingPoint.x + clientOffset.x;
-              cursorPoint.y = startingPoint.y + flag * clientOffset.x / aspectRatio;
             } else {
-              cursorPoint.x = startingPoint.x + flag * clientOffset.y * aspectRatio;
-              cursorPoint.y = startingPoint.y + clientOffset.y;
+              updated.width = width;
             }
           }
-          const newCenterPoint = calcCenter(cursorPoint, symmetricPoint);
+          const newCenterPoint = {
+            x: newRotatedCurrentPoint.x - (newRotatedCurrentPoint.x - rotatedSymmetricPoint.x) / 2,
+            y: newRotatedCurrentPoint.y + (rotatedSymmetricPoint.y - newRotatedCurrentPoint.y) / 2
+          };
+          updated.left = newCenterPoint.x - updated.width / 2;
+          updated.top = newCenterPoint.y - updated.height / 2;
+        } else {
+          const newCenterPoint = getMidpoint(rotatedCurrentPoint, rotatedSymmetricPoint);
           const points = [
-            calcRotation(cursorPoint, newCenterPoint, -rotate),
-            calcRotation(symmetricPoint, newCenterPoint, -rotate)
+            rotatePoint(rotatedCurrentPoint, newCenterPoint, -rotate),
+            rotatePoint(rotatedSymmetricPoint, newCenterPoint, -rotate)
           ];
           const [minX, maxX] = points[0].x > points[1].x ? [points[1].x, points[0].x] : [points[0].x, points[1].x];
           const [minY, maxY] = points[0].y > points[1].y ? [points[1].y, points[0].y] : [points[0].y, points[1].y];
@@ -8299,6 +8355,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           updated.height = maxY - minY;
           updated.left = minX;
           updated.top = minY;
+          if ((props.resizeStrategy === "aspectRatio" || props.resizeStrategy === "diagonalAspectRatio") && aspectRatio) {
+            if (updated.width / updated.height > aspectRatio) {
+              updated.width = updated.height * aspectRatio;
+            } else {
+              updated.height = updated.width / aspectRatio;
+            }
+          }
         }
         if ("width" in updated && updated.width <= 0 || "height" in updated && updated.height <= 0) {
           return;
@@ -8332,7 +8395,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         return "move";
       return `url("data:image/svg+xml,${cursors[type](model.value.rotate ?? 0)}") 16 16, pointer`;
     }
-    function calcRotation(point, origin, angle) {
+    function rotatePoint(point, origin, angle) {
       const radian = angle * Math.PI / 180;
       const cos = Math.cos(radian);
       const sin = Math.sin(radian);
@@ -8341,14 +8404,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         y: (point.x - origin.x) * sin + (point.y - origin.y) * cos + origin.y
       };
     }
-    function calcCenter(point1, point2) {
+    function getMidpoint(point1, point2) {
       return {
         x: (point2.x + point1.x) / 2,
         y: (point2.y + point1.y) / 2
       };
     }
-    function calcHypotenuse(point1, point2) {
-      return Math.sqrt((point1.x - point2.x) ** 2 + (point1.y - point2.y) ** 2);
+    function getDistance(point1, point2) {
+      const dx = point2.x - point1.x;
+      const dy = point2.y - point1.y;
+      return (dx + dy >= 0 ? 1 : -1) * Math.sqrt(dx * dx + dy * dy);
     }
     onMounted(async () => {
       const vm = getCurrentInstance();
@@ -8413,7 +8478,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             }, null, 4),
             createElementVNode("g", _hoisted_2$5, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value.filter((v) => {
-                return !(!__props.resizable && v.type.startsWith("resize") || !__props.rotatable && v.type.startsWith("rotate") || !__props.moveable && v.type === "move");
+                return !(!__props.resizable && v.type.startsWith("resize") || !__props.rotatable && v.type.startsWith("rotate") || !__props.movable && v.type === "move");
               }), (handle, index) => {
                 return openBlock(), createElementBlock(Fragment, { key: index }, [
                   (__props.handleStrategy === "point" ? handle.type.startsWith("resize") : handle.type === "resize-top-left" || handle.type === "resize-top-right" || handle.type === "resize-bottom-left" || handle.type === "resize-bottom-right") ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -8540,8 +8605,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         const offsetBox = {
           left: Math.round((val.left - oldBox.left) / zoom.x),
           top: Math.round((val.top - oldBox.top) / zoom.y),
-          width: Math.round((val.width - oldBox.width) / zoom.x),
-          height: Math.round((val.height - oldBox.height) / zoom.y),
+          width: Math.round(Math.max(1, val.width / zoom.x) - oldBox.width / zoom.x),
+          height: Math.round(Math.max(1, val.height / zoom.y) - oldBox.height / zoom.y),
           rotate: Math.round((val.rotate ?? 0) - (oldBox.rotate ?? 0))
         };
         const handle = transformable.value?.activeHandle ?? "move";
@@ -8620,7 +8685,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           modelValue: selectionObb.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectionObb.value = $event),
           visibility: unref(state) !== "selecting" ? "auto" : "none",
-          moveable: unref(elementSelection)[0] && !unref(isLock)(unref(elementSelection)[0]),
+          movable: unref(elementSelection)[0] && !unref(isLock)(unref(elementSelection)[0]),
           "resize-strategy": props.resizeStrategy,
           "handle-shape": unref(config).handleShape,
           class: "mce-selection-obb",
@@ -8636,7 +8701,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["modelValue", "visibility", "moveable", "resize-strategy", "handle-shape", "border-style"])) : createCommentVNode("", true),
+        ]), 1032, ["modelValue", "visibility", "movable", "resize-strategy", "handle-shape", "border-style"])) : createCommentVNode("", true),
         selectionObb.value.width && selectionObb.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
           key: 2,
           style: normalizeStyle([{ "position": "absolute" }, unref(boundingBoxToStyle)(selectionObb.value)])
@@ -9388,6 +9453,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const selector = useTemplateRef("selectorTpl");
     const textEditor = useTemplateRef("textEditorTpl");
     const selectedArea = ref({ left: 0, top: 0, width: 0, height: 0 });
+    const resizeStrategy = computed(() => {
+      const first = elementSelection.value[0];
+      if (first) {
+        if (first.text.isValid()) {
+          return "diagonalAspectRatio";
+        }
+        return props.resizeStrategy(first);
+      }
+      return void 0;
+    });
     provideOverlay({
       attach: computed(() => overlayContainer.value)
     });
@@ -9438,28 +9513,28 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       hoverElement.value = hovered;
       setCursor(cursor);
     }
-    function onPointerdown(event) {
-      if (event.srcElement !== drawboardDom.value && event.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(event.button)) {
+    function onPointerdown(downEvent) {
+      if (downEvent.srcElement !== drawboardDom.value && downEvent.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(downEvent.button)) {
         return;
       }
       const oldElement = elementSelection.value[0];
-      const element = event.target;
-      const start = { x: event.clientX, y: event.clientY };
+      const element = downEvent.target;
+      const start = { x: downEvent.clientX, y: downEvent.clientY };
       let current = { ...start };
       let dragging = false;
       let isUp = false;
       let selected = [];
       let ctxState;
-      const inSelected = isPointInsideAabb({
+      const inSelection = isPointInsideAabb({
         x: start.x + -drawboardAabb.value.left,
         y: start.y + -drawboardAabb.value.top
       }, getAabbInDrawboard(elementSelection.value));
-      if (event.button === 2) {
-        if (!inSelected) {
+      if (downEvent.button === 2) {
+        if (!inSelection) {
           const result = props.activeStrategy({
             element,
             oldElement,
-            event,
+            event: downEvent,
             isExcluded
           });
           if (result && !(result instanceof Element2D)) {
@@ -9471,11 +9546,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
         return;
       }
-      function onDrag(event2) {
+      function onDrag(event) {
         const result = props.activeStrategy({
           element,
           oldElement,
-          event: event2,
+          event,
           isExcluded
         });
         if (result && !(result instanceof Element2D)) {
@@ -9501,7 +9576,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         const result = props.activeStrategy({
           element,
           oldElement,
-          event,
+          event: downEvent,
           isExcluded: () => false
         });
         let _element;
@@ -9511,7 +9586,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         } else {
           _element = result;
         }
-        if (_element && (event?.ctrlKey || event?.shiftKey || event?.metaKey)) {
+        if (_element && (downEvent?.ctrlKey || downEvent?.shiftKey || downEvent?.metaKey)) {
           if (elementSelection.value.findIndex((v) => v.equal(_element)) > -1) {
             selected = elementSelection.value.filter((v) => !v.equal(_element));
           } else {
@@ -9524,29 +9599,29 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       function canStartDrag() {
         return !dragging && (Math.abs(current.x - start.x) >= 3 || Math.abs(current.y - start.y) >= 3);
       }
-      function onEngineMove(event2) {
-        if (inSelected) {
+      function onEngineMove(moveEvent) {
+        if (inSelection) {
           if (canStartDrag()) {
             dragging = true;
-            exec("startTransform");
+            exec("startTransform", downEvent);
           }
         } else {
           if (element && !isFrame(element)) {
             if (canStartDrag()) {
               dragging = true;
-              onDrag(event2);
+              onDrag(moveEvent);
               nextTick(() => {
                 if (!isUp) {
-                  exec("startTransform");
+                  exec("startTransform", downEvent);
                 }
               });
             }
           }
         }
       }
-      function onMove(event2) {
-        current = { x: event2.clientX, y: event2.clientY };
-        if (!inSelected) {
+      function onMove(moveEvent) {
+        current = { x: moveEvent.clientX, y: moveEvent.clientY };
+        if (!inSelection) {
           if (!element || isFrame(element)) {
             onSelectArea();
           }
@@ -9571,7 +9646,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               }
             }
           }
-          onHover(event);
+          onHover(downEvent);
         }
         renderEngine.value.off("pointermove", onEngineMove);
         document.removeEventListener("pointermove", onMove);
@@ -9632,7 +9707,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 createVNode(_sfc_main$g, {
                   ref: "selectorTpl",
                   "selected-area": selectedArea.value,
-                  "resize-strategy": unref(elementSelection)[0] ? props.resizeStrategy(unref(elementSelection)[0]) : void 0
+                  "resize-strategy": resizeStrategy.value
                 }, {
                   transformable: withCtx(({ box }) => [
                     renderSlot(_ctx.$slots, "transformer", { box })