mce 0.13.2 → 0.13.3

package/dist/index.js

@@ -1113,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",
@@ -1197,8 +1197,8 @@ const zhHans = {
   "cut": "剪切",
   "copy": "复制",
   "copyAs": "复制为",
+  "copyAs:png": "复制为 PNG",
   "copyAs:svg": "复制为 SVG",
-  "copyAs:json": "复制为 JSON",
   "paste": "粘贴",
   "duplicate": "创建副本",
   "delete": "删除",
@@ -2258,23 +2258,46 @@ const _3_view = defineMixin((editor) => {
 });
 const _4_0_text = defineMixin((editor) => {
   const {
-    config,
-    isElement
+    config
   } = editor;
-  function textFontSizeToFit(element) {
+  function textFontSizeToFit(element, scale) {
     function _handle(element2) {
-      if (!element2.text.isValid()) {
-        return;
+      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 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);
       }
-      const { boundingBox } = measureText({
-        style: {
-          ...element2.style.toJSON(),
-          width: "auto"
-        },
-        content: element2.text.content
-      });
-      const fontSize = (element2.style.fontSize || 12) / 2;
-      const scale = (element2.style.width ?? 0) / (boundingBox.width + fontSize);
       function _scaleStyle(style) {
         if (style.fontSize)
           style.fontSize = style.fontSize * scale;
@@ -2282,17 +2305,19 @@ const _4_0_text = defineMixin((editor) => {
           style.letterSpacing = style.letterSpacing * scale;
       }
       _scaleStyle(element2.style);
-      element2.text.content.forEach((p) => {
-        _scaleStyle(p);
-        p.fragments.forEach((f) => {
-          _scaleStyle(f);
+      if (element2.text?.isValid?.() && Array.isArray(element2.text?.content)) {
+        element2.text.content.forEach((p) => {
+          _scaleStyle(p);
+          p.fragments.forEach((f) => {
+            _scaleStyle(f);
+          });
         });
-      });
+      }
       element2.requestRedraw();
     }
     _handle(element);
     element.findOne((descendant) => {
-      if (isElement(descendant)) {
+      if (descendant instanceof Element2D) {
         _handle(descendant);
       }
       return false;
@@ -2307,7 +2332,7 @@ const _4_0_text = defineMixin((editor) => {
       return;
     }
     function _handle(element2) {
-      if (!element2.text.isValid()) {
+      if (!element2.text?.isValid?.() || typeof element2.text?.content !== "object") {
         return;
       }
       const style = element2.style.toJSON();
@@ -2331,7 +2356,7 @@ const _4_0_text = defineMixin((editor) => {
     }
     _handle(element);
     element.findOne((descendant) => {
-      if (isElement(descendant)) {
+      if (descendant instanceof Element2D) {
         _handle(descendant);
       }
       return false;
@@ -2569,7 +2594,7 @@ const _4_2_element = defineMixin((editor) => {
     }
     options.deep && deepHandle(element);
     options.textToFit && textToFit(element);
-    options.textFontSizeToFit && textFontSizeToFit(element);
+    options.textFontSizeToFit && textFontSizeToFit(element, scaleX);
   }
   function selectArea(areaInDrawboard) {
     const selected = root.value?.children.flatMap((node) => {
@@ -4410,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;
@@ -4420,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;
       }
     }
   };
@@ -4590,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 {
@@ -4883,7 +4908,6 @@ const _image = definePlugin((editor) => {
                 ...drawboardEffect.value.getProperties()
               })
             );
-            console.log(drawboardEffect.value.getProperties());
           }
         });
         return await new Promise((resolve) => {
@@ -4902,8 +4926,8 @@ const _image = definePlugin((editor) => {
       { command: "drawImage", handle: drawImage }
     ],
     exporters: [
+      { ...createExporter("png"), copyAs: true },
       createExporter("jpeg"),
-      createExporter("png"),
       createExporter("webp")
     ],
     loaders: [
@@ -4927,6 +4951,9 @@ const _image = definePlugin((editor) => {
           return await createImageElement(await upload(source));
         }
       }
+    ],
+    hotkeys: [
+      { command: "copyAs:png", key: "Shift+CmdOrCtrl+c" }
     ]
   };
 });
@@ -6191,7 +6218,7 @@ const makeMceStrategyProps = propsFactory({
 }, "makeMceStrategyProps");
 const defaultResizeStrategy = (element) => {
   if (element.meta.lockAspectRatio) {
-    return "aspectRatio";
+    return "lockAspectRatio";
   }
   return void 0;
 };
@@ -8094,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"
 };
@@ -8110,19 +8158,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     movable: { type: Boolean, default: true },
     rotatable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
+    adjustableBorderRadius: { type: Boolean, default: false },
     threshold: { default: 0 },
     resizeStrategy: {},
-    handleStrategy: { default: "default" },
-    handleShape: {},
-    color: { default: "black" },
-    handleColor: { default: "white" },
-    visibility: { default: "auto" },
+    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",
@@ -8130,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: {},
@@ -8141,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;
@@ -8241,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) {
@@ -8249,7 +8355,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }
       event?.preventDefault();
       event?.stopPropagation();
-      const { left = 0, top = 0, width = 0, height = 0, rotate = 0 } = model.value;
+      const { left, top, width, height, rotate, borderRadius } = model.value;
       let aspectRatio = 0;
       if (width && height) {
         aspectRatio = width / height;
@@ -8258,6 +8364,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       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 = {
@@ -8265,8 +8372,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         y: top + height / 2
       };
       const startPoint = {
-        x: left + handle.x + handle.width / 2,
-        y: top + handle.y + handle.height / 2
+        x: left,
+        y: top
+      };
+      if (!isMove) {
+        startPoint.x += handle.x + handle.width / 2;
+        startPoint.y += handle.y + handle.height / 2;
+      }
+      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 = {
@@ -8290,24 +8405,24 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         if (!startClientPoint) {
           startClientPoint = { x: event2.clientX, y: event2.clientY };
         }
-        const offset2 = {
+        const rotatedOffset = {
           x: event2.clientX - startClientPoint.x,
           y: event2.clientY - startClientPoint.y
         };
         if (!transforming.value) {
-          if (Math.abs(offset2.x) < props.threshold && Math.abs(offset2.y) < props.threshold) {
+          if (Math.abs(rotatedOffset.x) < props.threshold && Math.abs(rotatedOffset.y) < props.threshold) {
             return;
           }
           startTransform();
         }
         const rotatedCurrentPoint = {
-          x: rotatedStartPoint.x + offset2.x,
-          y: rotatedStartPoint.y + offset2.y
+          x: rotatedStartPoint.x + rotatedOffset.x,
+          y: rotatedStartPoint.y + rotatedOffset.y
         };
         if (isMove) {
           if (props.movable) {
-            updated.left = startPoint.x + offset2.x;
-            updated.top = startPoint.y + offset2.y;
+            updated.left = startPoint.x + rotatedOffset.x;
+            updated.top = startPoint.y + rotatedOffset.y;
           }
         } else if (isRotate) {
           if (props.rotatable) {
@@ -8317,36 +8432,55 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             ) / (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)
+          );
         } 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 hypotenuse = Math.abs(getDistance(newRotatedCurrentPoint, rotatedSymmetricPoint));
+          const distance = Math.abs(getDistance(newRotatedCurrentPoint, rotatedSymmetricPoint));
           if (isHorizontal) {
-            updated.width = hypotenuse;
-            if (props.resizeStrategy === "aspectRatio" && 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 (props.resizeStrategy === "aspectRatio" && aspectRatio) {
-              updated.width = hypotenuse * aspectRatio;
+            updated.height = distance;
+            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
+              updated.width = distance * aspectRatio;
             } else {
               updated.width = width;
             }
           }
-          const newCenterPoint = {
-            x: newRotatedCurrentPoint.x - (newRotatedCurrentPoint.x - rotatedSymmetricPoint.x) / 2,
-            y: newRotatedCurrentPoint.y + (rotatedSymmetricPoint.y - newRotatedCurrentPoint.y) / 2
-          };
+          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
           updated.left = newCenterPoint.x - updated.width / 2;
           updated.top = newCenterPoint.y - updated.height / 2;
         } else {
-          const newCenterPoint = getMidpoint(rotatedCurrentPoint, rotatedSymmetricPoint);
+          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 = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
           const points = [
-            rotatePoint(rotatedCurrentPoint, 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];
@@ -8355,13 +8489,6 @@ 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;
@@ -8375,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);
@@ -8386,14 +8514,18 @@ 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 rotatePoint(point, origin, angle) {
       const radian = angle * Math.PI / 180;
@@ -8453,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(() => [
@@ -8465,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.movable && 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"]);
     };
   }
 });
@@ -8596,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(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 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)) {
@@ -8642,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))}`;
@@ -8679,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",
-          movable: 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",
@@ -8701,12 +8862,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["modelValue", "visibility", "movable", "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);
     };
@@ -8750,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"]))
       }, {
@@ -9457,7 +9618,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       const first = elementSelection.value[0];
       if (first) {
         if (first.text.isValid()) {
-          return "diagonalAspectRatio";
+          return "lockAspectRatioDiagonal";
         }
         return props.resizeStrategy(first);
       }