mce 0.13.1 → 0.13.3

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";
@@ -900,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();
@@ -933,6 +940,10 @@ const _0_context = defineMixin((editor) => {
     root,
     nodes,
     nodeIndexMap,
+    selection,
+    elementSelection,
+    textSelection,
+    hoverElement,
     drawboardDom,
     drawboardAabb,
     state,
@@ -945,7 +956,8 @@ const _0_context = defineMixin((editor) => {
   return () => {
     const {
       on,
-      root: root2
+      root: root2,
+      state: state2
     } = editor;
     function updateNodes(value) {
       let node;
@@ -963,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;
     });
@@ -1121,8 +1113,8 @@ const en = {
   "cut": "Cut",
   "copy": "Copy",
   "copyAs": "Copy as",
+  "copyAs:png": "Copy as PNG",
   "copyAs:svg": "Copy as SVG",
-  "copyAs:json": "Copy as JSON",
   "paste": "Paste",
   "duplicate": "Duplicate",
   "delete": "Delete",
@@ -1205,8 +1197,8 @@ const zhHans = {
   "cut": "剪切",
   "copy": "复制",
   "copyAs": "复制为",
+  "copyAs:png": "复制为 PNG",
   "copyAs:svg": "复制为 SVG",
-  "copyAs:json": "复制为 JSON",
   "paste": "粘贴",
   "duplicate": "创建副本",
   "delete": "删除",
@@ -1481,7 +1473,9 @@ function createTextElement(content, style) {
       height: box.height
     },
     text: { content: normalizeTextContent(content) },
-    meta: { inPptIs: "Shape" }
+    meta: {
+      inPptIs: "Shape"
+    }
   };
 }
 async function createImageElement(image) {
@@ -1491,7 +1485,10 @@ async function createImageElement(image) {
       ...await getImageSizeFromUrl(image)
     },
     foreground: { image },
-    meta: { inPptIs: "Picture" }
+    meta: {
+      inPptIs: "Picture",
+      lockAspectRatio: true
+    }
   };
 }
 function isClickInsideElement(event, targetDiv) {
@@ -2263,47 +2260,49 @@ const _4_0_text = defineMixin((editor) => {
   const {
     config
   } = editor;
-  function textFontSizeToFit(element) {
+  function textFontSizeToFit(element, scale) {
     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("");
-      const { boundingBox } = measureText({
-        style: {
-          ...element2.style.toJSON(),
-          width: "auto"
-        },
-        content: [
-          {
-            fragments: [
-              { ...style, content }
-            ]
+      if (!scale) {
+        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 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;
+        });
+        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("");
+        const { boundingBox } = measureText({
+          style: {
+            ...element2.style.toJSON(),
+            width: "auto"
+          },
+          content: [
+            {
+              fragments: [
+                { ...style, content }
+              ]
+            }
+          ]
+        });
+        const fontSize = (element2.style.fontSize || 12) / 2;
+        scale = (element2.style.width ?? 0) / (boundingBox.width + fontSize);
+      }
+      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)) {
@@ -2595,24 +2594,7 @@ const _4_2_element = defineMixin((editor) => {
     }
     options.deep && deepHandle(element);
     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] : [];
-    }
+    options.textFontSizeToFit && textFontSizeToFit(element, scaleX);
   }
   function selectArea(areaInDrawboard) {
     const selected = root.value?.children.flatMap((node) => {
@@ -2632,7 +2614,6 @@ const _4_2_element = defineMixin((editor) => {
     updateElement,
     getElement,
     resizeElement,
-    pointerActivateElement,
     selectArea
   });
 });
@@ -3119,7 +3100,6 @@ const mixins = [
   _0_config,
   _0_config_base,
   _0_context,
-  _0_element,
   _0_font,
   _0_helper,
   _0_locale,
@@ -4455,9 +4435,23 @@ const _clipboard = definePlugin((editor, options) => {
   } = editor;
   const copiedData = ref();
   const useClipboard = options.clipboard !== false && SUPPORTS_CLIPBOARD;
-  const copy = async (data) => {
-    if (data === void 0) {
-      data = selection.value.map((v) => {
+  function toClipboardItem(source) {
+    if (typeof source === "string") {
+      const type = "text/plain";
+      return new ClipboardItem({ [type]: new Blob([source], { type }) });
+    } else if (source instanceof Blob) {
+      return new ClipboardItem({ [source.type]: source });
+    } else {
+      const type = "text/html";
+      const content = `<mce-clipboard>${JSON.stringify(source)}</mce-clipboard>`;
+      return new ClipboardItem({
+        [type]: new Blob([content], { type })
+      });
+    }
+  }
+  const copy = async (source) => {
+    if (source === void 0) {
+      source = selection.value.map((v) => {
         const json = v.toJSON();
         delete json.style.left;
         delete json.style.top;
@@ -4465,23 +4459,12 @@ const _clipboard = definePlugin((editor, options) => {
       });
     }
     if (useClipboard) {
-      if (Array.isArray(data)) {
-        const type = "text/html";
-        const content = `<mce-clipboard>${JSON.stringify(data)}</mce-clipboard>`;
-        await navigator.clipboard.write([
-          new ClipboardItem({
-            [type]: new Blob([content], { type })
-          })
-        ]);
-      } else if (typeof data === "string") {
-        const type = "text/plain";
-        await navigator.clipboard.write([
-          new ClipboardItem({ [type]: new Blob([data], { type }) })
-        ]);
-      }
+      await navigator.clipboard.write([
+        toClipboardItem(source)
+      ]);
     } else {
-      if (Array.isArray(data)) {
-        copiedData.value = data;
+      if (Array.isArray(source)) {
+        copiedData.value = source;
       }
     }
   };
@@ -4635,9 +4618,6 @@ const _copyAs = definePlugin((editor) => {
     if (exporter && typeof exporter.copyAs === "function") {
       res = exporter.copyAs(res);
     }
-    if (typeof res !== "string") {
-      res = JSON.stringify(res);
-    }
     exec("copy", res);
   };
   return {
@@ -4928,7 +4908,6 @@ const _image = definePlugin((editor) => {
                 ...drawboardEffect.value.getProperties()
               })
             );
-            console.log(drawboardEffect.value.getProperties());
           }
         });
         return await new Promise((resolve) => {
@@ -4947,8 +4926,8 @@ const _image = definePlugin((editor) => {
       { command: "drawImage", handle: drawImage }
     ],
     exporters: [
+      { ...createExporter("png"), copyAs: true },
       createExporter("jpeg"),
-      createExporter("png"),
       createExporter("webp")
     ],
     loaders: [
@@ -4972,6 +4951,9 @@ const _image = definePlugin((editor) => {
           return await createImageElement(await upload(source));
         }
       }
+    ],
+    hotkeys: [
+      { command: "copyAs:png", key: "Shift+CmdOrCtrl+c" }
     ]
   };
 });
@@ -5184,26 +5166,49 @@ const _layerPosition = definePlugin((editor) => {
   } = editor;
   function align(direction) {
     elementSelection.value.forEach((el) => {
-      const box = el.parent && isElement(el.parent) ? getAabb(el.parent) : rootAabb.value;
-      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;
+        }
       }
     });
   }
@@ -6212,14 +6217,10 @@ const makeMceStrategyProps = propsFactory({
   hoverStrategy: Function
 }, "makeMceStrategyProps");
 const defaultResizeStrategy = (element) => {
-  switch (element.meta?.inPptIs) {
-    case "Picture":
-      return "diagonalAspectRatio";
+  if (element.meta.lockAspectRatio) {
+    return "lockAspectRatio";
   }
-  if (element.foreground.isValid()) {
-    return "diagonalAspectRatio";
-  }
-  return "free";
+  return void 0;
 };
 const defaultActiveStrategy = (context) => {
   const { element, oldElement, isExcluded } = context;
@@ -8120,11 +8121,32 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$a = { class: "mce-transformable__svg" };
-const _hoisted_2$5 = { "pointer-events": "all" };
-const _hoisted_3$5 = ["x", "y", "width", "height", "aria-label", "fill"];
-const _hoisted_4$3 = ["cx", "cy", "r", "aria-label", "fill"];
-const _hoisted_5$2 = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"];
-const _hoisted_6$2 = {
+const _hoisted_2$5 = ["rx", "ry"];
+const _hoisted_3$5 = {
+  key: 0,
+  class: "mce-transformable__diagonal",
+  x1: "100%",
+  y1: "0",
+  x2: "0",
+  y2: "100%"
+};
+const _hoisted_4$3 = {
+  key: 1,
+  class: "mce-transformable__diagonal",
+  x1: "0",
+  y1: "0",
+  x2: "100%",
+  y2: "100%"
+};
+const _hoisted_5$2 = ["x", "y", "width", "height", "aria-label"];
+const _hoisted_6$2 = ["cx", "cy", "r", "aria-label"];
+const _hoisted_7$2 = { "pointer-events": "all" };
+const _hoisted_8$1 = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"];
+const _hoisted_9$1 = {
+  "pointer-events": "all",
+  class: "mce-transformable__svg-slot"
+};
+const _hoisted_10$1 = {
   key: 0,
   class: "mce-transformable__tip"
 };
@@ -8133,22 +8155,18 @@ 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 },
+    adjustableBorderRadius: { type: Boolean, default: false },
     threshold: { default: 0 },
-    resizeStrategy: { default: "free" },
-    handleStrategy: { default: "default" },
-    handleShape: {},
-    color: { default: "black" },
-    handleColor: { default: "white" },
-    visibility: { default: "auto" },
+    resizeStrategy: {},
+    handleStrategy: {},
+    handleShape: { default: "rect" },
+    hideUi: { type: Boolean },
     handles: { default: () => [
       "move",
-      "rotate-top-left",
-      "rotate-top-right",
-      "rotate-bottom-left",
-      "rotate-bottom-right",
+      // resize
       "resize-left",
       "resize-top",
       "resize-right",
@@ -8156,7 +8174,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       "resize-top-left",
       "resize-top-right",
       "resize-bottom-right",
-      "resize-bottom-left"
+      "resize-bottom-left",
+      // border-radius
+      "border-radius-top-left",
+      "border-radius-top-right",
+      "border-radius-bottom-left",
+      "border-radius-bottom-right",
+      // rotate
+      "rotate-top-left",
+      "rotate-top-right",
+      "rotate-bottom-left",
+      "rotate-bottom-right"
     ] },
     initialSize: { type: Boolean },
     borderStyle: {},
@@ -8167,83 +8195,136 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const cursors = {
-      "rotate-top-left": (rotation) => createCursor("rotate", 360 + rotation),
-      "rotate-top-right": (rotation) => createCursor("rotate", 90 + rotation),
-      "rotate-bottom-left": (rotation) => createCursor("rotate", 270 + rotation),
-      "rotate-bottom-right": (rotation) => createCursor("rotate", 180 + rotation),
-      "resize-left": (rotation) => createCursor("resizeXy", 180 + rotation),
-      "resize-top": (rotation) => createCursor("resizeXy", 90 + rotation),
-      "resize-right": (rotation) => createCursor("resizeXy", 180 + rotation),
-      "resize-bottom": (rotation) => createCursor("resizeXy", 90 + rotation),
-      "resize-top-left": (rotation) => createCursor("resizeBevel", 90 + rotation),
-      "resize-top-right": (rotation) => createCursor("resizeBevel", 180 + rotation),
-      "resize-bottom-right": (rotation) => createCursor("resizeBevel", 90 + rotation),
-      "resize-bottom-left": (rotation) => createCursor("resizeBevel", 180 + rotation)
+      "rotate-top-left": (angle) => createCursor("rotate", 360 + angle),
+      "rotate-top-right": (angle) => createCursor("rotate", 90 + angle),
+      "rotate-bottom-left": (angle) => createCursor("rotate", 270 + angle),
+      "rotate-bottom-right": (angle) => createCursor("rotate", 180 + angle),
+      "resize-left": (angle) => createCursor("resizeXy", 180 + angle),
+      "resize-top": (angle) => createCursor("resizeXy", 90 + angle),
+      "resize-right": (angle) => createCursor("resizeXy", 180 + angle),
+      "resize-bottom": (angle) => createCursor("resizeXy", 90 + angle),
+      "resize-top-left": (angle) => createCursor("resizeBevel", 90 + angle),
+      "resize-top-right": (angle) => createCursor("resizeBevel", 180 + angle),
+      "resize-bottom-right": (angle) => createCursor("resizeBevel", 90 + angle),
+      "resize-bottom-left": (angle) => createCursor("resizeBevel", 180 + angle)
     };
     const modelValue = useModel(props, "modelValue");
     const model = computed({
       get: () => {
-        let { left = 0, top = 0, width = 0, height = 0, rotate = 0 } = modelValue.value ?? {};
+        let { left = 0, top = 0, width = 0, height = 0, rotate = 0, borderRadius = 0 } = modelValue.value ?? {};
         if (Number.isNaN(Number(width)))
           width = 0;
         if (Number.isNaN(Number(height)))
           height = 0;
-        return { left, top, width, height, rotate };
+        return { left, top, width, height, rotate, borderRadius };
       },
       set: (val) => modelValue.value = val
     });
     const transforming = ref(false);
     const activeHandle = ref();
     const computedHandles = computed(() => {
-      const { width = 0, height = 0 } = model.value;
-      const size = 6;
-      const sizeHalf = size / 2;
-      const size1 = 8;
-      const size1Half = size1 / 2;
-      const size2 = 12;
+      const size = 8;
+      const { width = 0, height = 0, borderRadius } = model.value;
+      const center = { x: width / 2, y: height / 2 };
+      const shape = props.handleShape;
+      const lines = [
+        { type: "top", points: [[0, 0], [1, 0]] },
+        { type: "right", points: [[1, 0], [1, 1]] },
+        { type: "bottom", points: [[0, 1], [1, 1]] },
+        { type: "left", points: [[0, 0], [0, 1]] }
+      ];
+      const points = [
+        { type: "top", point: [0.5, 0] },
+        { type: "right", point: [1, 0.5] },
+        { type: "bottom", point: [0.5, 1] },
+        { type: "left", point: [0, 0.5] },
+        { type: "top-left", point: [0, 0] },
+        { type: "top-right", point: [1, 0] },
+        { type: "bottom-left", point: [0, 1] },
+        { type: "bottom-right", point: [1, 1] }
+      ];
+      const lineHandles = lines.map((item) => {
+        const [p1, p2] = item.points;
+        const minX = Math.min(p1[0], p2[0]) * width;
+        const maxX = Math.max(p1[0], p2[0]) * width;
+        const minY = Math.min(p1[1], p2[1]) * height;
+        const maxY = Math.max(p1[1], p2[1]) * height;
+        return {
+          type: item.type,
+          x: minX - size / 2,
+          y: minY - size / 2,
+          width: maxX - minX + size,
+          height: maxY - minY + size
+        };
+      });
+      const pointHandles = points.map((item) => {
+        return {
+          type: item.type,
+          shape,
+          x: item.point[0] * width - size / 2,
+          y: item.point[1] * height - size / 2,
+          width: size,
+          height: size
+        };
+      });
+      const diagonalPointHandles = pointHandles.filter((item) => item.type.split("-").length === 2);
+      const rotateHandles = diagonalPointHandles.map((item) => {
+        const sign = {
+          x: center.x - item.x > 0 ? 1 : -1,
+          y: center.y - item.y > 0 ? 1 : -1
+        };
+        return {
+          ...item,
+          shape: void 0,
+          type: `rotate-${item.type}`,
+          x: item.x - sign.x * size,
+          y: item.y - sign.y * size
+        };
+      });
+      const minSize = Math.min(width, height);
+      const borderRadiusHandles = props.adjustableBorderRadius ? diagonalPointHandles.map((item) => {
+        const sign = {
+          x: center.x - item.x > 0 ? 1 : -1,
+          y: center.y - item.y > 0 ? 1 : -1
+        };
+        const offset2 = minSize * 0.1;
+        return {
+          ...item,
+          shape: "circle",
+          type: `border-radius-${item.type}`,
+          x: item.x + sign.x * Math.min(width / 2, offset2 + borderRadius),
+          y: item.y + sign.y * Math.min(height / 2, offset2 + borderRadius)
+        };
+      }) : [];
       let handles;
       if (props.handleStrategy === "point") {
         handles = [
           // move
-          { type: "move", x: -sizeHalf, y: size1Half, width: size, height: height - size1 },
-          { type: "move", x: size1Half, y: -sizeHalf, width: width - size1, height: size },
-          { type: "move", x: width - sizeHalf, y: size1Half, width: size, height: height - size1 },
-          { type: "move", x: size1Half, y: height - sizeHalf, width: width - size1, height: size },
-          { type: "move", x: -sizeHalf, y: size1Half, width: size, height: height - size1 },
+          ...lineHandles.map((item) => ({ ...item, type: "move" })),
           // resize
-          { type: "resize-top", x: width / 2 - size1Half, y: -size1Half, width: size1, height: size1 },
-          { type: "resize-right", x: width - size1Half, y: height / 2 - size1Half, width: size1, height: size1 },
-          { type: "resize-bottom", x: width / 2 - size1Half, y: height + -size1Half, width: size1, height: size1 },
-          { type: "resize-left", x: -size1Half, y: height / 2 - size1Half, width: size1, height: size1 },
-          { type: "resize-top-left", x: -size1Half, y: -size1Half, width: size1, height: size1 },
-          { type: "resize-top-right", x: width - size1Half, y: -size1Half, width: size1, height: size1 },
-          { type: "resize-bottom-left", x: -size1Half, y: height - size1Half, width: size1, height: size1 },
-          { type: "resize-bottom-right", x: width - size1Half, y: height - size1Half, width: size1, height: size1 },
+          ...pointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
+          // border-radius
+          ...borderRadiusHandles,
           // rotate
-          { type: "rotate-top-left", x: -size2 - size1Half, y: -size2 - size1Half, width: size2, height: size2 },
-          { type: "rotate-top-right", x: width + size1Half, y: -size2 - size1Half, width: size2, height: size2 },
-          { type: "rotate-bottom-left", x: -size2 - size1Half, y: height + size1Half, width: size2, height: size2 },
-          { type: "rotate-bottom-right", x: width + size1Half, y: height + size1Half, width: size2, height: size2 }
+          ...rotateHandles
         ];
       } else {
         handles = [
           // resize
-          { type: "resize-top", x: size1Half, y: -sizeHalf, width: width - size1, height: size },
-          { type: "resize-right", x: width - sizeHalf, y: size1Half, width: size, height: height - size1 },
-          { type: "resize-bottom", x: size1Half, y: height - sizeHalf, width: width - size1, height: size },
-          { type: "resize-left", x: -sizeHalf, y: size1Half, width: size, height: height - size1 },
-          { type: "resize-top-left", x: -size1Half, y: -size1Half, width: size1, height: size1 },
-          { type: "resize-top-right", x: width - size1Half, y: -size1Half, width: size1, height: size1 },
-          { type: "resize-bottom-left", x: -size1Half, y: height - size1Half, width: size1, height: size1 },
-          { type: "resize-bottom-right", x: width - size1Half, y: height - size1Half, width: size1, height: size1 },
+          ...lineHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
+          ...diagonalPointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
+          // border-radius
+          ...borderRadiusHandles,
           // rotate
-          { type: "rotate-top-left", x: -size2 - size1Half, y: -size2 - size1Half, width: size2, height: size2 },
-          { type: "rotate-top-right", x: width + size1Half, y: -size2 - size1Half, width: size2, height: size2 },
-          { type: "rotate-bottom-left", x: -size2 - size1Half, y: height + size1Half, width: size2, height: size2 },
-          { type: "rotate-bottom-right", x: width + size1Half, y: height + size1Half, width: size2, height: size2 }
+          ...rotateHandles
         ];
       }
-      return handles.filter((val) => props.handles.includes(val.type)).map((anchor) => {
+      return handles.filter((handle) => {
+        if (props.handles.includes(handle.type)) {
+          return !(!props.resizable && handle.type.startsWith("resize") || !props.rotatable && handle.type.startsWith("rotate") || !props.movable && handle.type === "move");
+        }
+        return false;
+      }).map((anchor) => {
         anchor.width = Math.max(anchor.width, 0);
         anchor.height = Math.max(anchor.height, 0);
         return anchor;
@@ -8267,7 +8348,6 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         transform: `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${left}, ${top})`
       };
     });
-    const isAutoVisibilityTransforming = computed(() => props.visibility === "auto" && transforming.value);
     const tip = computed(() => props.tipFormat?.("size"));
     function start(event, index) {
       if (event && event.button !== void 0 && event.button !== 0) {
@@ -8275,40 +8355,44 @@ 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;
+      const { left, top, width, height, rotate, borderRadius } = model.value;
+      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 isBorderRadius = handle.type.startsWith("border-radius");
+      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 = {
+      const startPoint = {
         x: left,
         y: top
       };
       if (!isMove) {
-        startingPointBefore.x += anchor.x + anchor.width / 2;
-        startingPointBefore.y += anchor.y + anchor.height / 2;
+        startPoint.x += handle.x + handle.width / 2;
+        startPoint.y += handle.y + handle.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 sign = {
+        x: startPoint.x - centerPoint.x > 0 ? 1 : -1,
+        y: startPoint.y - centerPoint.y > 0 ? 1 : -1
+      };
+      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);
@@ -8318,81 +8402,86 @@ 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 rotatedOffset = {
+          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(rotatedOffset.x) < props.threshold && Math.abs(rotatedOffset.y) < props.threshold) {
             return;
           }
           startTransform();
         }
-        const cursorPoint = {
-          x: startingPoint.x + clientOffset.x,
-          y: startingPoint.y + clientOffset.y
+        const rotatedCurrentPoint = {
+          x: rotatedStartPoint.x + rotatedOffset.x,
+          y: rotatedStartPoint.y + rotatedOffset.y
         };
         if (isMove) {
-          if (!props.moveable) {
-            return;
+          if (props.movable) {
+            updated.left = startPoint.x + rotatedOffset.x;
+            updated.top = startPoint.y + rotatedOffset.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;
-        } 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
+          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 (isBorderRadius) {
+          const offset2 = rotatePoint(rotatedOffset, { x: 0, y: 0 }, -rotate);
+          const _offset = Math.abs(offset2.x) < Math.abs(offset2.y) ? -sign.x * offset2.x : -sign.y * offset2.y * aspectRatio;
+          updated.borderRadius = Math.min(
+            Math.max(0, borderRadius + _offset),
+            Math.min(width / 2, height / 2)
           );
-          const newCenterPoint = {
-            x: rotationAfter.x - (rotationAfter.x - symmetricPoint.x) / 2,
-            y: rotationAfter.y + (symmetricPoint.y - rotationAfter.y) / 2
-          };
-          const hypotenuse = calcHypotenuse(rotationAfter, symmetricPoint);
+        } else if (isHorizontalVertical) {
+          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 distance = Math.abs(getDistance(newRotatedCurrentPoint, rotatedSymmetricPoint));
           if (isHorizontal) {
-            updated.width = hypotenuse;
-            if (aspectRatio && props.resizeStrategy === "aspectRatio") {
-              updated.height = hypotenuse / aspectRatio;
+            updated.width = distance;
+            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
+              updated.height = distance / aspectRatio;
+            } else {
+              updated.height = height;
             }
           } else {
-            updated.height = hypotenuse;
-            if (aspectRatio && props.resizeStrategy === "aspectRatio") {
-              updated.width = hypotenuse * aspectRatio;
+            updated.height = distance;
+            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
+              updated.width = distance * aspectRatio;
+            } else {
+              updated.width = width;
             }
           }
-          updated.left = newCenterPoint.x - (isHorizontal ? hypotenuse : width) / 2;
-          updated.top = newCenterPoint.y - (isHorizontal ? height : hypotenuse) / 2;
+          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
+          updated.left = newCenterPoint.x - updated.width / 2;
+          updated.top = newCenterPoint.y - updated.height / 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;
-            }
+          let newRotatedCurrentPoint;
+          if ((props.resizeStrategy === "lockAspectRatio" || props.resizeStrategy === "lockAspectRatioDiagonal") && aspectRatio) {
+            const offset2 = rotatePoint(rotatedOffset, { x: 0, y: 0 }, -rotate);
+            const _offset = Math.abs(offset2.x) < Math.abs(offset2.y) ? sign.x * offset2.x : sign.y * offset2.y * aspectRatio;
+            newRotatedCurrentPoint = rotatePoint(
+              {
+                x: startPoint.x + sign.x * _offset,
+                y: startPoint.y + sign.y * _offset / aspectRatio
+              },
+              centerPoint,
+              rotate
+            );
+          } else {
+            newRotatedCurrentPoint = rotatedCurrentPoint;
           }
-          const newCenterPoint = calcCenter(cursorPoint, symmetricPoint);
+          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
           const points = [
-            calcRotation(cursorPoint, newCenterPoint, -rotate),
-            calcRotation(symmetricPoint, newCenterPoint, -rotate)
+            rotatePoint(newRotatedCurrentPoint, 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];
@@ -8413,6 +8502,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         window.removeEventListener("pointermove", onMove);
         window.removeEventListener("pointerup", onEnd, true);
         transforming.value = false;
+        activeHandle.value = void 0;
         emit("end", model.value);
       }
       window.addEventListener("pointermove", onMove);
@@ -8424,16 +8514,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       resizeXy: '<path d="m9 17.9907v.005l5.997 5.996.001-3.999h1.999 2.02v4l5.98-6.001-5.98-5.999.001 4.019-2.021.002h-2l.001-4.022zm1.411.003 3.587-3.588-.001 2.587h3.5 2.521v-2.585l3.565 3.586-3.564 3.585-.001-2.585h-2.521l-3.499-.001-.001 2.586z" fill="white"/><path d="m17.4971 18.9932h2.521v2.586l3.565-3.586-3.565-3.585v2.605h-2.521-3.5v-2.607l-3.586 3.587 3.586 3.586v-2.587z" fill="black"/>',
       resizeBevel: '<path d="m19.7432 17.0869-4.072 4.068 2.829 2.828-8.473-.013-.013-8.47 2.841 2.842 4.075-4.068 1.414-1.415-2.844-2.842h8.486v8.484l-2.83-2.827z" fill="white"/><path d="m18.6826 16.7334-4.427 4.424 1.828 1.828-5.056-.016-.014-5.054 1.842 1.841 4.428-4.422 2.474-2.475-1.844-1.843h5.073v5.071l-1.83-1.828z" fill="black"/>'
     };
-    function createCursor(type, rotation) {
+    function createCursor(type, angle) {
       const path = cursorMap[type];
-      return `<svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><filter id="shadow" color-interpolation-filters="sRGB"><feDropShadow dx="1" dy="1" stdDeviation="1.2" flood-opacity=".5"/></filter></defs><g fill="none" transform="rotate(${rotation} 16 16)" filter="url(%23shadow)">${path}</g></svg>`.replace(/"/g, "'");
+      return `<svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><filter id="shadow" color-interpolation-filters="sRGB"><feDropShadow dx="1" dy="1" stdDeviation="1.2" flood-opacity=".5"/></filter></defs><g fill="none" transform="rotate(${angle} 16 16)" filter="url(%23shadow)">${path}</g></svg>`.replace(/"/g, "'");
     }
     function getCursor(type) {
       if (type === "move")
         return "move";
-      return `url("data:image/svg+xml,${cursors[type](model.value.rotate ?? 0)}") 16 16, pointer`;
+      const create = cursors[type];
+      if (!create) {
+        return "default";
+      }
+      return `url("data:image/svg+xml,${create(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);
@@ -8442,14 +8536,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();
@@ -8489,7 +8585,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-        class: "mce-transformable",
+        class: normalizeClass(["mce-transformable", [
+          transforming.value && "mce-transformable--transforming",
+          props.hideUi && "mce-transformable--hide-ui",
+          __props.resizeStrategy && `mce-transformable--${__props.resizeStrategy}`,
+          activeHandle.value && `mce-transformable--${activeHandle.value}`,
+          activeHandle.value === "move" && "mce-transformable--moving",
+          activeHandle.value?.startsWith("resize") && "mce-transformable--resizing",
+          activeHandle.value?.startsWith("rotate") && "mce-transformable--rotateing",
+          props.borderStyle && `mce-transformable--${props.borderStyle}`
+        ]]),
         style: normalizeStyle(style.value)
       }, {
         default: withCtx(() => [
@@ -8501,78 +8606,71 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             start
           }),
           (openBlock(), createElementBlock("svg", _hoisted_1$a, [
+            _cache[0] || (_cache[0] = createElementVNode("rect", {
+              width: "100%",
+              height: "100%",
+              fill: "none",
+              class: "mce-transformable__rect"
+            }, null, -1)),
             createElementVNode("rect", {
+              class: "mce-transformable__border",
               width: "100%",
               height: "100%",
               fill: "none",
-              class: "mce-transformable__box",
-              style: normalizeStyle({
-                strokeDasharray: props.borderStyle === "dashed" ? "4px" : void 0,
-                opacity: __props.visibility === "none" ? 0 : isAutoVisibilityTransforming.value ? ".4" : void 0,
-                strokeWidth: isAutoVisibilityTransforming.value ? "0.5px" : void 0
-              })
-            }, 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");
-              }), (handle, index) => {
+              rx: model.value.borderRadius,
+              ry: model.value.borderRadius
+            }, null, 8, _hoisted_2$5),
+            activeHandle.value === "resize-top" || activeHandle.value === "resize-right" || activeHandle.value === "resize-top-right" || activeHandle.value === "resize-bottom-left" ? (openBlock(), createElementBlock("line", _hoisted_3$5)) : activeHandle.value === "resize-left" || activeHandle.value === "resize-bottom" || activeHandle.value === "resize-top-left" || activeHandle.value === "resize-bottom-right" ? (openBlock(), createElementBlock("line", _hoisted_4$3)) : createCommentVNode("", true),
+            createElementVNode("g", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (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 }, [
-                    props.handleShape === "rect" ? (openBlock(), createElementBlock("rect", {
+                  handle.shape ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    handle.shape === "rect" ? (openBlock(), createElementBlock("rect", {
                       key: 0,
                       x: handle.x,
                       y: handle.y,
                       width: handle.width,
                       height: handle.height,
                       "aria-label": handle.type,
-                      fill: __props.handleColor,
-                      class: "mce-transformable__handle",
-                      style: normalizeStyle({
-                        opacity: __props.visibility === "none" || transforming.value && __props.visibility !== "visible" ? 0 : void 0
-                      })
-                    }, null, 12, _hoisted_3$5)) : (openBlock(), createElementBlock("circle", {
+                      class: "mce-transformable__handle"
+                    }, null, 8, _hoisted_5$2)) : (openBlock(), createElementBlock("circle", {
                       key: 1,
                       cx: handle.x + handle.width / 2,
                       cy: handle.y + handle.width / 2,
                       r: handle.width / 2,
                       "aria-label": handle.type,
-                      fill: __props.handleColor,
-                      class: "mce-transformable__handle",
-                      style: normalizeStyle({
-                        opacity: __props.visibility === "none" || transforming.value && __props.visibility !== "visible" ? 0 : void 0
-                      })
-                    }, null, 12, _hoisted_4$3))
-                  ], 64)) : createCommentVNode("", true),
-                  createElementVNode("rect", {
-                    ref_for: true,
-                    ref_key: "handlesRef",
-                    ref: handlesRef,
-                    x: handle.x,
-                    y: handle.y,
-                    width: handle.width,
-                    height: handle.height,
-                    "aria-label": handle.type,
-                    class: "mce-transformable__handle-box",
-                    style: normalizeStyle({
-                      opacity: __props.visibility === "none" || transforming.value && __props.visibility !== "visible" ? 0 : void 0
-                    }),
-                    cursor: transforming.value ? "auto" : getCursor(handle.type),
-                    onPointerdown: (event) => start(event, index)
-                  }, null, 44, _hoisted_5$2)
+                      class: "mce-transformable__handle"
+                    }, null, 8, _hoisted_6$2))
+                  ], 64)) : createCommentVNode("", true)
                 ], 64);
               }), 128))
             ]),
-            createElementVNode("g", {
-              "pointer-events": "all",
-              style: normalizeStyle(isAutoVisibilityTransforming.value ? { opacity: ".4", strokeWidth: "0.5px" } : void 0)
-            }, [
+            createElementVNode("g", _hoisted_7$2, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+                return openBlock(), createElementBlock("rect", {
+                  key: index,
+                  ref_for: true,
+                  ref_key: "handlesRef",
+                  ref: handlesRef,
+                  x: handle.x,
+                  y: handle.y,
+                  width: handle.width,
+                  height: handle.height,
+                  "aria-label": handle.type,
+                  class: "mce-transformable__handle-rect",
+                  cursor: transforming.value ? "auto" : getCursor(handle.type),
+                  onPointerdown: (event) => start(event, index)
+                }, null, 40, _hoisted_8$1);
+              }), 128))
+            ]),
+            createElementVNode("g", _hoisted_9$1, [
               renderSlot(_ctx.$slots, "svg", { box: model.value })
-            ], 4)
+            ])
           ])),
-          tip.value ? (openBlock(), createElementBlock("div", _hoisted_6$2, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
+          tip.value ? (openBlock(), createElementBlock("div", _hoisted_10$1, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["style"]);
+      }, 8, ["class", "style"]);
     };
   }
 });
@@ -8632,42 +8730,48 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         };
       });
     });
-    const _selectionObb = computed(() => getObbInDrawboard(elementSelection.value));
-    const selectionObb = computed({
-      get: () => _selectionObb.value,
+    const _selectionTransform = computed(() => {
+      const zoom = camera.value.zoom;
+      return {
+        ...getObbInDrawboard(elementSelection.value),
+        borderRadius: (elementSelection.value[0]?.style.borderRadius ?? 0) * zoom.x
+      };
+    });
+    const selectionTransform = computed({
+      get: () => _selectionTransform.value,
       set: (val) => {
         const zoom = camera.value.zoom;
-        const oldBox = _selectionObb.value;
-        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),
-          rotate: Math.round((val.rotate ?? 0) - (oldBox.rotate ?? 0))
+        const oldTransform = _selectionTransform.value;
+        const offsetStyle = {
+          left: (val.left - oldTransform.left) / zoom.x,
+          top: (val.top - oldTransform.top) / zoom.y,
+          width: Math.max(1, val.width / zoom.x) - oldTransform.width / zoom.x,
+          height: Math.max(1, val.height / zoom.y) - oldTransform.height / zoom.y,
+          rotate: (val.rotate ?? 0) - (oldTransform.rotate ?? 0),
+          borderRadius: ((val.borderRadius ?? 0) - (oldTransform.borderRadius ?? 0)) / zoom.y
         };
         const handle = transformable.value?.activeHandle ?? "move";
         elementSelection.value.forEach((element) => {
           const style = element.style;
-          const box = {
-            left: style.left + offsetBox.left,
-            top: style.top + offsetBox.top,
-            width: style.width + offsetBox.width,
-            height: style.height + offsetBox.height,
-            rotate: style.rotate + offsetBox.rotate
+          const newStyle = {
+            left: style.left + offsetStyle.left,
+            top: style.top + offsetStyle.top,
+            width: style.width + offsetStyle.width,
+            height: style.height + offsetStyle.height,
+            rotate: style.rotate + offsetStyle.rotate,
+            borderRadius: style.borderRadius + offsetStyle.borderRadius
           };
-          if (!handle.startsWith("rotate")) {
-            if (handle.startsWith("resize")) {
-              resizeElement(
-                element,
-                box.width / element.style.width,
-                box.height / element.style.height,
-                isFrame(element) ? void 0 : handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
-              );
-              box.width = element.style.width;
-              box.height = element.style.height;
-            }
+          if (handle.startsWith("resize")) {
+            resizeElement(
+              element,
+              newStyle.width / element.style.width,
+              newStyle.height / element.style.height,
+              isFrame(element) ? void 0 : handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
+            );
+            newStyle.width = element.style.width;
+            newStyle.height = element.style.height;
           }
-          Object.assign(style, box);
+          Object.assign(style, newStyle);
           element.updateGlobalTransform();
           element.findAncestor((ancestor) => {
             if (ancestor instanceof Element2D && !isFrame(ancestor)) {
@@ -8678,6 +8782,25 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         });
       }
     });
+    const movable = computed(() => {
+      return elementSelection.value.every((element) => {
+        return !isLock(element) && element.meta.movable !== false && element.meta.transformable !== false;
+      });
+    });
+    const resizable = computed(() => {
+      return elementSelection.value.every((element) => {
+        return !isLock(element) && element.meta.resizable !== false && element.meta.transformable !== false;
+      });
+    });
+    const rotatable = computed(() => {
+      return elementSelection.value.every((element) => {
+        return !isLock(element) && element.meta.rotatable !== false && element.meta.transformable !== false;
+      });
+    });
+    const adjustableBorderRadius = computed(() => {
+      const element = elementSelection.value[0];
+      return elementSelection.value.length === 1 && !isLock(element) && element.foreground.isValid();
+    });
     function tipFormat() {
       const obb = elementSelection.value.length === 1 ? elementSelection.value[0].style : getObb(elementSelection.value);
       return `${Number(obb.width.toFixed(2))} × ${Number(obb.height.toFixed(2))}`;
@@ -8715,13 +8838,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             })
           }, null, 4);
         }), 128)),
-        selectionObb.value.width && selectionObb.value.height ? (openBlock(), createBlock(_sfc_main$h, {
+        selectionTransform.value.width && selectionTransform.value.height ? (openBlock(), createBlock(_sfc_main$h, {
           key: 1,
           ref: "transformableRef",
-          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]),
+          modelValue: selectionTransform.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectionTransform.value = $event),
+          movable: movable.value,
+          resizable: resizable.value,
+          rotatable: rotatable.value,
+          "adjustable-border-radius": adjustableBorderRadius.value,
           "resize-strategy": props.resizeStrategy,
           "handle-shape": unref(config).handleShape,
           class: "mce-selection-obb",
@@ -8737,12 +8862,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["modelValue", "visibility", "moveable", "resize-strategy", "handle-shape", "border-style"])) : createCommentVNode("", true),
-        selectionObb.value.width && selectionObb.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+        ]), 1032, ["modelValue", "movable", "resizable", "rotatable", "adjustable-border-radius", "resize-strategy", "handle-shape", "border-style"])) : createCommentVNode("", true),
+        selectionTransform.value.width && selectionTransform.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
           key: 2,
-          style: normalizeStyle([{ "position": "absolute" }, unref(boundingBoxToStyle)(selectionObb.value)])
+          style: normalizeStyle([{ "position": "absolute" }, unref(boundingBoxToStyle)(selectionTransform.value)])
         }, [
-          renderSlot(_ctx.$slots, "default", { box: selectionObb.value })
+          renderSlot(_ctx.$slots, "default", { box: selectionTransform.value })
         ], 4)) : createCommentVNode("", true)
       ], 64);
     };
@@ -8786,7 +8911,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         modelValue: transform.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => transform.value = $event),
         class: "mce-float-panel",
-        visibility: "none",
+        "hide-ui": "",
         onWheel: _cache[3] || (_cache[3] = withModifiers(() => {
         }, ["stop"]))
       }, {
@@ -9489,6 +9614,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 "lockAspectRatioDiagonal";
+        }
+        return props.resizeStrategy(first);
+      }
+      return void 0;
+    });
     provideOverlay({
       attach: computed(() => overlayContainer.value)
     });
@@ -9539,28 +9674,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)) {
@@ -9572,11 +9707,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)) {
@@ -9602,7 +9737,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         const result = props.activeStrategy({
           element,
           oldElement,
-          event,
+          event: downEvent,
           isExcluded: () => false
         });
         let _element;
@@ -9612,7 +9747,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 {
@@ -9625,29 +9760,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();
           }
@@ -9672,7 +9807,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               }
             }
           }
-          onHover(event);
+          onHover(downEvent);
         }
         renderEngine.value.off("pointermove", onEngineMove);
         document.removeEventListener("pointermove", onMove);
@@ -9733,7 +9868,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 })