mce 0.15.25 → 0.15.27

package/dist/index.js

@@ -123,7 +123,7 @@ const _0_config_base = defineMixin((editor, options) => {
   registerConfig("frameOutline", false);
   registerConfig("frameGap", 48);
   registerConfig("typographyStrategy", "autoHeight");
-  registerConfig("handleShape", "rect");
+  registerConfig("transformControls", {});
   registerConfig("screenCenterOffset", { left: 0, top: 0, bottom: 0, right: 0 });
   registerConfig("localDb", false);
   return () => {
@@ -938,8 +938,11 @@ const _0_context = defineMixin((editor) => {
   function isElement(value) {
     return value instanceof Element2D;
   }
+  function inEditorIs(value, inEditorIs2) {
+    return value.meta.inEditorIs === inEditorIs2;
+  }
   function isFrame(value) {
-    return isElement(value) && value.meta.inEditorIs === "Frame";
+    return isElement(value) && inEditorIs(value, "Frame");
   }
   function isTopFrame(value) {
     return isFrame(value) && Boolean(value.parent?.equal(root.value));
@@ -984,6 +987,7 @@ const _0_context = defineMixin((editor) => {
     isNode,
     isRoot,
     isElement,
+    inEditorIs,
     isFrame,
     isTopFrame,
     isVisible,
@@ -1079,6 +1083,7 @@ const en = {
   "move": "Move",
   "hand": "Hand",
   "frame": "Frame",
+  "slice": "Slice",
   "group": "Group",
   "text": "Text",
   "doubleClickEditText": "DoubleClickEditText",
@@ -1191,6 +1196,7 @@ const zhHans = {
   "move": "移动",
   "hand": "抓手",
   "frame": "画板",
+  "slice": "切片",
   "group": "组合",
   "text": "文字",
   "doubleClickEditText": "双击编辑文字",
@@ -1815,22 +1821,36 @@ const _1_screen = defineMixin((editor) => {
     config,
     drawboardAabb
   } = editor;
-  const screenCenterOffset = computed(() => {
+  const screenControlsOffset = computed(() => {
     const offset2 = {
       left: 0,
       top: 0,
       bottom: 0,
-      right: 0,
-      ...config.value.screenCenterOffset
+      right: 0
     };
-    if (config.value.scrollbar) {
-      offset2.right += 8;
-      offset2.bottom += 8;
-    }
     if (config.value.ruler) {
       offset2.left += 16;
       offset2.top += 16;
     }
+    if (config.value.scrollbar) {
+      offset2.right += 8;
+      offset2.bottom += 8;
+    }
+    return offset2;
+  });
+  const screenCenterOffset = computed(() => {
+    const _screenControlsOffset = screenControlsOffset.value;
+    const offset2 = {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      ...config.value.screenCenterOffset
+    };
+    offset2.left += _screenControlsOffset.left;
+    offset2.top += _screenControlsOffset.top;
+    offset2.right += _screenControlsOffset.right;
+    offset2.bottom += _screenControlsOffset.bottom;
     return offset2;
   });
   const screenCenter = computed(() => {
@@ -1841,6 +1861,7 @@ const _1_screen = defineMixin((editor) => {
     };
   });
   Object.assign(editor, {
+    screenControlsOffset,
     screenCenterOffset,
     screenCenter
   });
@@ -1937,7 +1958,8 @@ const _2_box = defineMixin((editor) => {
     root,
     selection,
     getAncestorFrame,
-    drawboardAabb
+    drawboardAabb,
+    screenControlsOffset
   } = editor;
   function obbToFit(element) {
     const min = {
@@ -2120,15 +2142,18 @@ const _2_box = defineMixin((editor) => {
     return _aabb;
   }
   const viewportAabb = computed(() => {
+    const _camera = camera.value;
+    const { position, zoom } = _camera;
     noop(
-      camera.value.position.x,
-      camera.value.position.y,
-      camera.value.zoom.x,
-      camera.value.zoom.y
+      position.x,
+      position.y,
+      zoom.x,
+      zoom.y
     );
+    const { left, top, right, bottom } = screenControlsOffset.value;
     const { width, height } = drawboardAabb.value;
-    const p1 = camera.value.toGlobal({ x: 0, y: 0 });
-    const p2 = camera.value.toGlobal({ x: width, y: height });
+    const p1 = _camera.toGlobal({ x: left, y: top });
+    const p2 = _camera.toGlobal({ x: width - (right + left), y: height - (bottom + top) });
     return new Aabb2D({
       x: p1.x,
       y: p1.y,
@@ -3467,22 +3492,20 @@ const _4_2_frame = defineMixin((editor) => {
         continue;
       }
       const aabb2 = frame2.getGlobalAabb();
-      if (aabb2) {
-        if (pointer ? aabb2.contains(pointer) : aabb1 && aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
-          if (!frame2.equal(frame1)) {
-            let index = frame2.children.length;
-            if (frame2.equal(options?.parent)) {
-              index = options.index;
-            }
-            frame2.moveChild(element, index);
-            element.style.left = aabb1.x - aabb2.x;
-            element.style.top = aabb1.y - aabb2.y;
-            element.updateGlobalTransform();
-            exec("layerScrollIntoView");
+      if (pointer ? aabb2.contains(pointer) : aabb1 && aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
+        if (!frame2.equal(frame1)) {
+          let index = frame2.children.length;
+          if (frame2.equal(options?.parent)) {
+            index = options.index;
           }
-          flag = false;
-          break;
+          frame2.moveChild(element, index);
+          element.style.left = aabb1.x - aabb2.x;
+          element.style.top = aabb1.y - aabb2.y;
+          element.updateGlobalTransform();
+          exec("layerScrollIntoView");
         }
+        flag = false;
+        break;
       }
     }
     if (flag && frame1) {
@@ -3506,8 +3529,11 @@ const _4_2_frame = defineMixin((editor) => {
       on,
       getGlobalPointer
     } = editor;
-    const startContext = ref({});
+    let startFrame;
+    let startContext = {};
     on("selectionTransformStart", ({ elements }) => {
+      const pointer = getGlobalPointer();
+      startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
       const ctx = {};
       elements.forEach((el) => {
         ctx[el.instanceId] = {
@@ -3515,16 +3541,19 @@ const _4_2_frame = defineMixin((editor) => {
           index: el.getIndex()
         };
       });
-      startContext.value = ctx;
+      startContext = ctx;
     });
     on("selectionTransforming", ({ handle, startEvent, elements }) => {
       if (handle === "move" && !startEvent?.__FROM__) {
         const idSet = /* @__PURE__ */ new Set();
         elements.forEach((el) => {
-          if (isTopFrame(el)) {
-            idSet.add(el.instanceId);
+          const frame = isTopFrame(el) ? el : el.findAncestor(isTopFrame);
+          if (frame) {
+            if (frame.equal(startFrame)) {
+              idSet.add(frame.instanceId);
+            }
           } else {
-            idSet.add(el.findAncestor(isTopFrame)?.instanceId ?? 0);
+            idSet.add(0);
           }
         });
         if (idSet.size === 1) {
@@ -3532,7 +3561,7 @@ const _4_2_frame = defineMixin((editor) => {
             handleDragOutReparent(
               element,
               {
-                ...startContext.value[element.instanceId],
+                ...startContext[element.instanceId],
                 pointer: getGlobalPointer()
               }
             );
@@ -3541,7 +3570,8 @@ const _4_2_frame = defineMixin((editor) => {
       }
     });
     on("selectionTransformEnd", () => {
-      startContext.value = {};
+      startContext = {};
+      startFrame = void 0;
     });
   };
 });
@@ -3917,6 +3947,72 @@ const _drawingTool$1 = defineMixin((editor) => {
     });
   };
 });
+function createHttp() {
+  async function request(config) {
+    const {
+      url,
+      method = "GET",
+      data,
+      responseType
+    } = config;
+    const fetchConfig = {
+      method: method.toUpperCase(),
+      headers: new Headers()
+    };
+    if (data !== void 0) {
+      if (data instanceof FormData || data instanceof URLSearchParams || data instanceof Blob) {
+        fetchConfig.body = data;
+      } else if (typeof data === "object") {
+        fetchConfig.body = JSON.stringify(data);
+        fetchConfig.headers.set("Content-Type", "application/json");
+      } else {
+        fetchConfig.body = String(data);
+      }
+    }
+    const response = await fetch(url, fetchConfig);
+    if (!response.ok) {
+      const error = new Error(`HTTP Error: ${response.status} ${response.statusText}`);
+      error.response = {
+        status: response.status,
+        statusText: response.statusText,
+        headers: Object.fromEntries(response.headers.entries()),
+        data: await response.text().catch(() => null)
+      };
+      throw error;
+    }
+    let _responseType = responseType;
+    if (!_responseType) {
+      const repContentType = response.headers.get("content-type");
+      if (repContentType) {
+        if (repContentType.includes("application/json")) {
+          _responseType = "json";
+        }
+      }
+    }
+    switch (_responseType ?? "text") {
+      case "arraybuffer":
+        return await response.arrayBuffer();
+      case "blob":
+        return await response.blob();
+      case "json":
+        return await response.json();
+      case "document":
+      case "stream":
+      case "formdata":
+      case "text":
+      default:
+        return await response.text();
+    }
+  }
+  return {
+    request
+  };
+}
+const _http = defineMixin((editor, options) => {
+  Object.assign(editor, {
+    http: options.http ?? createHttp()
+  });
+});
 const _scroll$1 = defineMixin((editor) => {
   const {
     camera,
@@ -3924,7 +4020,8 @@ const _scroll$1 = defineMixin((editor) => {
     selectionAabb,
     rootAabb,
     viewportAabb,
-    screenCenter
+    screenCenter,
+    screenCenterOffset
   } = editor;
   const scrollTo = async (target, options = {}) => {
     const {
@@ -3933,12 +4030,20 @@ const _scroll$1 = defineMixin((editor) => {
       duration = 500
     } = options;
     const _camera = camera.value;
+    const { position: _position, zoom } = _camera;
+    const oldPosition = { x: _position.x, y: _position.y };
     const _screenCenter = screenCenter.value;
     const offset2 = { x: 0, y: 0 };
-    let position = { x: 0, y: 0 };
-    if (typeof target === "object" && "x" in target && "y" in target) {
-      position.x = target.x;
-      position.y = target.y;
+    let targetPosition = {};
+    if (typeof target === "object") {
+      if ("x" in target) {
+        targetPosition.x = target.x;
+        offset2.x = -screenCenterOffset.value.left;
+      }
+      if ("y" in target) {
+        targetPosition.y = target.y;
+        offset2.y = -screenCenterOffset.value.top;
+      }
     } else {
       let aabb;
       if (Array.isArray(target)) {
@@ -3957,15 +4062,22 @@ const _scroll$1 = defineMixin((editor) => {
       if (intoView && viewportAabb.value.contains(aabb)) {
         return;
       }
-      position = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
+      targetPosition = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
       offset2.x += -_screenCenter.x;
       offset2.y = -_screenCenter.y;
     }
-    position.x *= _camera.zoom.x;
-    position.x += offset2.x;
-    position.y *= _camera.zoom.y;
-    position.y += offset2.y;
-    const oldPosition = { x: _camera.position.x, y: _camera.position.y };
+    if (targetPosition.x !== void 0) {
+      targetPosition.x *= zoom.x;
+      targetPosition.x += offset2.x;
+    }
+    if (targetPosition.y !== void 0) {
+      targetPosition.y *= zoom.y;
+      targetPosition.y += offset2.y;
+    }
+    const position = {
+      ...oldPosition,
+      ...targetPosition
+    };
     switch (behavior) {
       case "smooth":
         await new Promise((resolve) => {
@@ -3978,7 +4090,7 @@ const _scroll$1 = defineMixin((editor) => {
             const elapsed = now - startTime;
             const progress = Math.min(elapsed / duration, 1);
             const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
-            _camera.position.set(
+            _position.set(
               oldPosition.x + positionDistance.x * ease,
               oldPosition.y + positionDistance.y * ease
             );
@@ -3993,7 +4105,7 @@ const _scroll$1 = defineMixin((editor) => {
         break;
       case "instant":
       default:
-        _camera.position.set(position.x, position.y);
+        _position.set(position.x, position.y);
         break;
     }
   };
@@ -4237,6 +4349,7 @@ const mixins = [
   _4_3_element,
   _4_4_doc,
   _drawingTool$1,
+  _http,
   _scroll$1,
   _snapshot,
   _zoom$1
@@ -4722,33 +4835,6 @@ const _edit = definePlugin((editor, options) => {
     }
   };
 });
-const _enter = definePlugin((editor) => {
-  const {
-    selection,
-    isElement,
-    exec
-  } = editor;
-  async function _enter2() {
-    if (selection.value.length === 1) {
-      const node = selection.value[0];
-      if (isElement(node)) {
-        if (node.text.isValid()) {
-          await exec("startTyping");
-        }
-      }
-    }
-  }
-  const when = () => Boolean(selection.value.length > 0);
-  return {
-    name: "mce:enter",
-    commands: [
-      { command: "enter", handle: _enter2 }
-    ],
-    hotkeys: [
-      { command: "enter", key: ["Enter"], when }
-    ]
-  };
-});
 function makeIconProps() {
   return {
     icon: {
@@ -4837,7 +4923,9 @@ const aliases = {
   mouseLeftClick: "M13 9V1.07A8.01 8.01 0 0 1 19.75 7c.16.64.25 1.31.25 2zm4.66-2c-.48-1.35-1.43-2.5-2.66-3.19V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4zm7-6V1.07C7.06 1.56 4 4.92 4 9z",
   mouseRightClick: "M13 9V1.07c3.94.49 7 3.85 7 7.93zm-2 0V1.07A8.01 8.01 0 0 0 4.25 7C4.09 7.64 4 8.31 4 9zM6.34 7C6.82 5.65 7.78 4.5 9 3.81V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4z",
   check: "M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z",
+  collapse: "m12 17.4l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.875-3.875q.575-.575 1.425-.575t1.425.575L17.3 19.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275zm0-10.8l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-3.875 3.875Q12.85 8.55 12 8.55t-1.425-.575L6.7 4.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275z",
   frame: "M17 9v6H7V9zm2-6h-2v3h2zM7 3H5v3h2zm16 4h-3v2h3zm-4 0H5v10h14zM4 7H1v2h3zm19 8h-3v2h3zM4 15H1v2h3zm15 3h-2v3h2zM7 18H5v3h2z",
+  slice: "M20.802 4.221a2.166 2.166 0 0 0-3.062 0L2.24 19.72l.001.001A.75.75 0 0 0 2.773 21h8.125a2.25 2.25 0 0 0 2.25-2.25v-3.812l7.654-7.654a2.166 2.166 0 0 0 0-3.063m-7.654 8.596v-1.883L18.8 5.282a.665.665 0 1 1 .941.941zM4.584 19.5l7.064-7.064v6.314a.75.75 0 0 1-.75.75z",
   group: "M10 22q-.825 0-1.412-.587T8 20v-4H4q-.825 0-1.412-.587T2 14V4q0-.825.588-1.412T4 2h10q.825 0 1.413.588T16 4v4h4q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22zm0-2h10V10h-6V4H4v10h6zm2-8",
   shape: "M8 17.95q.25.025.488.038T9 18t.513-.012t.487-.038V20h10V10h-2.05q.025-.25.038-.488T18 9t-.012-.513T17.95 8H20q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22H10q-.825 0-1.412-.587T8 20zM9 16q-2.925 0-4.962-2.037T2 9t2.038-4.962T9 2t4.963 2.038T16 9t-2.037 4.963T9 16m0-2q2.075 0 3.538-1.463T14 9t-1.463-3.537T9 4T5.463 5.463T4 9t1.463 3.538T9 14m0-5",
   text: "m18.5 4l1.16 4.35l-.96.26c-.45-.87-.91-1.74-1.44-2.18C16.73 6 16.11 6 15.5 6H13v10.5c0 .5 0 1 .33 1.25c.34.25 1 .25 1.67.25v1H9v-1c.67 0 1.33 0 1.67-.25c.33-.25.33-.75.33-1.25V6H8.5c-.61 0-1.23 0-1.76.43c-.53.44-.99 1.31-1.44 2.18l-.96-.26L5.5 4z",
@@ -4937,6 +5025,7 @@ function createLayer() {
   }
   provide(MceLayerKey, {
     selecting,
+    openedItems,
     dragging,
     droppingItemId,
     register: (vm, item) => {
@@ -5318,7 +5407,9 @@ const makeMceOverlayProps = propsFactory({
   attach: {
     type: [String, Boolean, Object],
     default: void 0
-  }
+  },
+  contentClass: Object,
+  contentStyle: Object
 }, "makeMceOverlayProps");
 let globalOverlayRoot;
 function getGlobalOverlayRoot() {
@@ -5513,9 +5604,6 @@ const _frame = definePlugin((editor) => {
   } = editor;
   return {
     name: "mce:frame",
-    components: [
-      { type: "overlay", component: _sfc_main$A }
-    ],
     drawingTools: [
       {
         name: "frame",
@@ -5555,6 +5643,9 @@ const _frame = definePlugin((editor) => {
     ],
     hotkeys: [
       { command: "setActiveDrawingTool:frame", key: "F" }
+    ],
+    components: [
+      { type: "overlay", component: _sfc_main$A, order: "before" }
     ]
   };
 });
@@ -6091,13 +6182,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       dragging,
       dropping,
       onMousedown,
-      id
+      id,
+      openedItems
     } = useLayerItem({
       opened,
       node: computed(() => props.node),
       dom: computed(() => dom.value)
     });
-    const isActive = computed(() => selection.value.some((v) => v.equal(props.node)));
+    const selected = computed(() => selection.value.some((v) => v.equal(props.node)));
     const children = computed(() => props.node.children);
     const childrenLength = computed(() => children.value.length);
     const inputDom = ref();
@@ -6250,7 +6342,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ref: dom,
           class: normalizeClass(["mce-layer", [
             props.root && "mce-layer--root",
-            (__props.active || isActive.value) && "mce-layer--active",
+            (__props.active || selected.value) && "mce-layer--active",
+            selected.value && "mce-layer--selected",
             opened.value && "mce-layer--open",
             isHoverElement.value && "mce-layer--hover",
             unref(dropping) && "mce-layer--dropping"
@@ -6264,12 +6357,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           onMouseleave,
           onContextmenu
         }, [
-          _cache[4] || (_cache[4] = createElementVNode("span", { class: "mce-layer__underlay" }, null, -1)),
-          _cache[5] || (_cache[5] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
+          _cache[5] || (_cache[5] = createElementVNode("span", { class: "mce-layer__underlay" }, null, -1)),
+          _cache[6] || (_cache[6] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
           createElementVNode("div", _hoisted_2$c, [
             createElementVNode("div", _hoisted_3$b, [
               childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
                 key: 0,
+                class: "mce-layer__arrow",
                 icon: "$arrowRight",
                 onClick: onClickExpand,
                 onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
@@ -6312,13 +6406,29 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 "mce-layer__action--show": hovering.value || unref(isLock)(props.node) || !unref(isVisible)(props.node)
               }])
             }, [
-              props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(_sfc_main$y, {
+                  key: 0,
+                  icon: "",
+                  class: "mce-layer__btn mce-layer__btn--show",
+                  onMousedown: _cache[2] || (_cache[2] = withModifiers(($event) => unref(openedItems).forEach((item, _id) => {
+                    if (_id !== unref(id)) {
+                      item.value = false;
+                    }
+                  }), ["prevent", "stop"]))
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(_sfc_main$C), { icon: "$collapse" })
+                  ]),
+                  _: 1
+                })) : createCommentVNode("", true)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 createVNode(_sfc_main$y, {
                   icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": unref(isLock)(props.node)
                   }]),
-                  onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
+                  onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
                     createVNode(unref(_sfc_main$C), {
@@ -6332,7 +6442,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": !unref(isVisible)(props.node)
                   }]),
-                  onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
+                  onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
                     createVNode(unref(_sfc_main$C), {
@@ -6350,7 +6460,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             key: i,
             node: children.value[childrenLength.value - i],
             indent: __props.root ? props.indent : props.indent + 1,
-            active: __props.active || isActive.value
+            active: __props.active || selected.value
           }, null, 8, ["node", "indent", "active"]);
         }), 128)) : createCommentVNode("", true)
       ], 64);
@@ -6513,7 +6623,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
     };
     const target = computed(() => {
-      if (typeof props.target === "object" && !(props.target instanceof Element) && "x" in props.target && "y" in props.target) {
+      if (typeof props.target === "object" && !("getBoundingClientRect" in props.target) && !(props.target instanceof Element) && "x" in props.target && "y" in props.target) {
         return virtualElement;
       }
       return props.target ?? activatorEl.value;
@@ -6527,15 +6637,20 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       middleware: [
         middlewares.has("offset") && offset(() => props.offset ?? 0),
         middlewares.has("flip") && flip(),
-        middlewares.has("shift") && shift({ padding: 20 })
+        middlewares.has("shift") && shift({ crossAxis: true, padding: 20 })
       ].filter(Boolean)
     });
     const style = computed(() => {
       return {
-        ...floatingStyles.value,
         zIndex: 1500 + overlayItem.index.value
       };
     });
+    const contentStyle = computed(() => {
+      return {
+        ...floatingStyles.value,
+        ...props.contentStyle
+      };
+    });
     const activatorProps = computed(() => {
       return {
         ref: (el) => activatorEl.value = el
@@ -6583,11 +6698,16 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         }, [
           isActive.value ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
-            ref: "contentElTpl",
             class: "mce-overlay",
             style: style.value
           }, _ctx.$attrs), [
-            renderSlot(_ctx.$slots, "default")
+            createElementVNode("div", {
+              ref: "contentElTpl",
+              style: normalizeStyle$1(contentStyle.value),
+              class: normalizeClass(["mce-overlay-content", props.contentClass])
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 6)
           ], 16)) : createCommentVNode("", true)
         ], 8, ["disabled", "to"]))
       ], 64);
@@ -6690,6 +6810,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     }
     __expose({
       isActive,
+      activatorEl: computed(() => overlay.value?.activatorEl),
+      contentEl: computed(() => overlay.value?.contentEl),
       updateLocation
     });
     return (_ctx, _cache) => {
@@ -6843,6 +6965,24 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const isActive = useModel(__props, "modelValue");
     const position = useModel(__props, "position");
     const menuRef = useTemplateRef("menuTplRef");
+    const target = {
+      getBoundingClientRect() {
+        const box = menuRef.value?.contentEl?.getBoundingClientRect();
+        const { x, y } = position.value;
+        const width = 0;
+        const height = box?.height ?? 0;
+        return {
+          x,
+          y,
+          left: x,
+          top: y,
+          bottom: x + height,
+          right: y + width,
+          width,
+          height
+        };
+      }
+    };
     onBeforeMount(() => {
       registerCommand({ command: "openContextMenu", handle: onContextmenu });
     });
@@ -6888,14 +7028,15 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ref: "menuTplRef",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
-        offset: 10,
         class: "mce-context-menu",
-        target: position.value,
-        location: "bottom-start",
+        offset: 10,
+        target,
+        location: "right-start",
         items: unref(contextMenu),
         style: normalizeStyle$1({
-          maxHeight: `${unref(drawboardAabb).height * 0.8}px`
+          "--max-height": `${unref(drawboardAabb).height * 0.8}px`
         }),
+        middlewares: ["offset", "shift"],
         "onClick:item": onClickItem
       }, {
         title: withCtx(({ item }) => [
@@ -6907,7 +7048,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           ], 64)) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["modelValue", "target", "items", "style"]);
+      }, 8, ["modelValue", "items", "style"]);
     };
   }
 });
@@ -11514,7 +11655,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const isActive = useModel(__props, "modelValue");
     const overlay = useTemplateRef("overlayTpl");
-    const classes = computed(() => {
+    const contentClass = computed(() => {
       const [side, align = "center"] = props.location.split("-");
       return [
         `mce-tooltip--side-${side}`,
@@ -11532,7 +11673,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
-        class: normalizeClass(["mce-tooltip", classes.value]),
+        class: "mce-tooltip",
+        "content-class": contentClass.value,
         location: props.location,
         offset: props.offset,
         target: props.target,
@@ -11564,7 +11706,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["modelValue", "class", "location", "offset", "target", "attach"]);
+      ]), 1032, ["modelValue", "content-class", "location", "offset", "target", "attach"]);
     };
   }
 });
@@ -12065,7 +12207,6 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   },
   __name: "Scrollbars",
   props: {
-    infinite: { type: Boolean, default: true },
     offset: { default: 0 },
     size: { default: 8 }
   },
@@ -12111,6 +12252,36 @@ const _scroll = definePlugin((editor) => {
         ignore: () => !config.value.scrollbar
       }
     ]
+    // setup: () => {
+    //   const {
+    //     viewportAabb,
+    //     getGlobalPointer,
+    //     state,
+    //     camera,
+    //   } = editor
+    //
+    //   setInterval(() => {
+    //     if (state.value === 'transforming' || state.value === 'selecting') {
+    //       const _camera = camera.value
+    //       const { min, max } = viewportAabb.value
+    //       const { zoom } = _camera
+    //       const dist = 10 / zoom.x
+    //       const pointer = getGlobalPointer()
+    //       if (pointer.x - dist <= min.x) {
+    //         scrollTo({ x: min.x })
+    //       }
+    //       if (pointer.x + dist >= max.x) {
+    //         scrollTo({ x: max.x })
+    //       }
+    //       if (pointer.y - dist <= min.y) {
+    //         scrollTo({ y: min.y })
+    //       }
+    //       if (pointer.y + dist >= max.y) {
+    //         scrollTo({ y: max.y })
+    //       }
+    //     }
+    //   }, 100)
+    // },
   };
 });
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
@@ -12367,6 +12538,102 @@ const _shape = definePlugin((editor) => {
     ]
   };
 });
+const _slice = definePlugin((editor) => {
+  const {
+    setActiveDrawingTool,
+    addElement,
+    t,
+    elementSelection,
+    inEditorIs,
+    to,
+    fonts,
+    drawboardEffect
+  } = editor;
+  async function exportSlice(options) {
+    const el = elementSelection.value[0];
+    if (!el || !inEditorIs(el, "Slice")) {
+      return;
+    }
+    const aabb = el.getGlobalAabb();
+    const doc = to("json", {
+      ...options,
+      selected: el.parent?.children.filter((node) => !node.equal(el)) ?? []
+    });
+    doc.children.unshift({
+      position: {
+        x: aabb.left,
+        y: aabb.top
+      },
+      meta: {
+        inCanvasIs: "Camera2D"
+      }
+    });
+    return await render({
+      data: doc,
+      fonts,
+      width: aabb.width,
+      height: aabb.height,
+      onBefore: (engine) => {
+        engine.root.append(
+          new DrawboardEffect({
+            ...drawboardEffect.value.getProperties(),
+            internalMode: "back",
+            effectMode: "before",
+            checkerboard: false,
+            pixelGrid: false
+          })
+        );
+      }
+    });
+  }
+  return {
+    name: "mce:slice",
+    drawingTools: [
+      {
+        name: "slice",
+        handle: (start) => {
+          const el = addElement({
+            name: t("slice"),
+            outline: {
+              color: "#d9d9d9",
+              width: 1,
+              style: "dashed"
+            },
+            meta: {
+              inPptIs: "Shape",
+              inEditorIs: "Slice",
+              inCanvasIs: "Element2D"
+            }
+          }, {
+            position: start,
+            active: true
+          });
+          return {
+            move: (move) => {
+              const minX = Math.min(move.x, start.x);
+              const minY = Math.min(move.y, start.y);
+              const maxX = Math.max(move.x, start.x);
+              const maxY = Math.max(move.y, start.y);
+              el.style.left = minX;
+              el.style.top = minY;
+              el.style.width = maxX - minX;
+              el.style.height = maxY - minY;
+            },
+            end: () => {
+              setActiveDrawingTool(void 0);
+            }
+          };
+        }
+      }
+    ],
+    hotkeys: [
+      { command: "setActiveDrawingTool:slice", key: "S" }
+    ],
+    commands: [
+      { command: "exportSlice", handle: exportSlice }
+    ]
+  };
+});
 const _hoisted_1$c = { class: "mce-smart-guides" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "SmartGuides",
@@ -13760,9 +14027,9 @@ const _hoisted_5$2 = { class: "mce-statusbar__kbd" };
 const _hoisted_6$2 = { class: "mce-statusbar__item" };
 const _hoisted_7$2 = { class: "mce-statusbar__kbd" };
 const _hoisted_8$1 = { class: "mce-statusbar__item" };
-const _hoisted_9 = { class: "mce-statusbar__item" };
-const _hoisted_10 = { class: "mce-statusbar__kbd" };
-const _hoisted_11 = { class: "mce-statusbar__item" };
+const _hoisted_9$1 = { class: "mce-statusbar__item" };
+const _hoisted_10$1 = { class: "mce-statusbar__kbd" };
+const _hoisted_11$1 = { class: "mce-statusbar__item" };
 const _hoisted_12 = { class: "mce-statusbar__kbd" };
 const _hoisted_13 = { key: 2 };
 const _hoisted_14 = { class: "mce-statusbar__item" };
@@ -13804,12 +14071,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               createVNode(unref(_sfc_main$C), { icon: "$mouseRightClick" })
             ]),
             _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
-            createElementVNode("div", _hoisted_9, [
-              createElementVNode("span", _hoisted_10, toDisplayString(unref(getKbd)("Escape")), 1),
+            createElementVNode("div", _hoisted_9$1, [
+              createElementVNode("span", _hoisted_10$1, toDisplayString(unref(getKbd)("Escape")), 1),
               createElementVNode("span", null, toDisplayString(unref(t)("cancel")), 1)
             ]),
             _cache[3] || (_cache[3] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
-            createElementVNode("div", _hoisted_11, [
+            createElementVNode("div", _hoisted_11$1, [
               createElementVNode("span", _hoisted_12, toDisplayString(unref(getKbd)("Shift")), 1),
               createElementVNode("span", null, toDisplayString(unref(t)("constrainToAxis")), 1)
             ])
@@ -14355,9 +14622,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           ]
         },
         {
-          key: "frame",
-          active: activeDrawingTool.value?.name === "frame",
-          handle: () => setActiveDrawingTool("frame")
+          key: activeDrawingTool.value?.name === "slice" ? "slice" : "frame",
+          active: ["frame", "slice"].includes(activeDrawingTool.value?.name),
+          handle: () => setActiveDrawingTool("frame"),
+          children: [
+            { key: "frame", handle: () => setActiveDrawingTool("frame") },
+            { key: "slice", handle: () => setActiveDrawingTool("slice") }
+          ]
         },
         {
           ...shapeItems.value.find((v) => v.checked) ?? shapeItems.value[activeShape.value],
@@ -14470,8 +14741,18 @@ const _toolbelt = definePlugin((editor) => {
 });
 const _transform = definePlugin((editor) => {
   const {
-    elementSelection
+    elementSelection,
+    exec
   } = editor;
+  async function _enter() {
+    if (elementSelection.value.length === 1) {
+      const element = elementSelection.value[0];
+      if (element.text.isValid()) {
+        await exec("startTyping");
+      }
+    }
+  }
+  const when = () => Boolean(elementSelection.value.length > 0);
   function flipHorizontal() {
     elementSelection.value.forEach((el) => {
       el.style.scaleX = -el.style.scaleX;
@@ -14485,23 +14766,46 @@ const _transform = definePlugin((editor) => {
   return {
     name: "mce:transform",
     commands: [
+      { command: "enter", handle: _enter },
       { command: "flipHorizontal", handle: flipHorizontal },
       { command: "flipVertical", handle: flipVertical }
     ],
     hotkeys: [
+      { command: "enter", key: ["Enter"], when },
       { command: "flipHorizontal", key: "Shift+H" },
       { command: "flipVertical", key: "Shift+V" }
     ]
   };
 });
-const _ui = definePlugin(() => {
+const _ui = definePlugin((editor) => {
   return {
-    name: "mce:ui"
+    name: "mce:ui",
+    setup: () => {
+      const {
+        drawboardDom,
+        drawboardAabb,
+        drawboardPointer,
+        exec
+      } = editor;
+      useResizeObserver$1(drawboardDom, (entries) => {
+        const { left: _left, top: _top, width, height } = entries[0].contentRect;
+        const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
+        drawboardAabb.value = new Aabb2D(left, top, width, height);
+        exec("zoomToFit");
+      });
+      document.addEventListener("mousemove", (event) => {
+        drawboardPointer.value = new Vector2$1(
+          event.clientX - drawboardAabb.value.left,
+          event.clientY - drawboardAabb.value.top
+        );
+      });
+    }
   };
 });
 const _url = definePlugin((editor) => {
   const {
-    load
+    load,
+    http
   } = editor;
   return {
     name: "mce:url",
@@ -14512,7 +14816,7 @@ const _url = definePlugin((editor) => {
           return typeof source === "string";
         },
         load: async (url) => {
-          const blob = await fetch(url).then((rep) => rep.blob());
+          const blob = await http.request({ url, responseType: "blob" });
           const file = new File([blob], url, { type: blob.type });
           try {
             return await load(file);
@@ -14576,7 +14880,6 @@ const _zoom = definePlugin((editor) => {
   const {
     registerConfig,
     camera,
-    drawboardAabb,
     zoomTo,
     exec,
     config,
@@ -14613,17 +14916,6 @@ const _zoom = definePlugin((editor) => {
     ],
     events: {
       setDoc: () => exec("zoomToFit")
-    },
-    setup: () => {
-      const {
-        drawboardDom
-      } = editor;
-      useResizeObserver$1(drawboardDom, (entries) => {
-        const { left: _left, top: _top, width, height } = entries[0].contentRect;
-        const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
-        drawboardAabb.value = new Aabb2D(left, top, width, height);
-        exec("zoomToFit");
-      });
     }
   };
 });
@@ -14634,7 +14926,6 @@ const plugins = [
   _delete,
   _drawingTool,
   _edit,
-  _enter,
   _frame,
   _gif,
   _group,
@@ -14660,6 +14951,7 @@ const plugins = [
   _scroll,
   _selection,
   _shape,
+  _slice,
   _smartGuides,
   _state,
   _statusbar,
@@ -14826,7 +15118,6 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "Floatbar",
   props: {
     ...makeMceOverlayProps({
-      middlewares: ["offset", "shift"],
       offset: 8
     })
   },
@@ -14843,11 +15134,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       const aabb = selectionAabbInDrawboard.value;
       if (location?.startsWith("top") || location?.startsWith("bottom")) {
         return {
-          width: `${aabb.width}px`
+          minWidth: `${aabb.width}px`
         };
       } else if (location?.startsWith("left") || location?.startsWith("right")) {
         return {
-          height: `${aabb.height}px`
+          minHeight: `${aabb.height}px`
         };
       }
       return {};
@@ -14868,7 +15159,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$u, {
         ref: "overlayTpl",
-        style: normalizeStyle$1(style.value),
+        "content-style": style.value,
         class: "mce-floatbar",
         location: props.location,
         middlewares: props.middlewares,
@@ -14881,33 +15172,37 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           unref(elementSelection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["style", "location", "middlewares", "offset", "target"]);
+      }, 8, ["content-style", "location", "middlewares", "offset", "target"]);
     };
   }
 });
-const _hoisted_1$4 = { class: "mce-transformable__svg" };
+const _hoisted_1$4 = { class: "mce-transform-controls__svg" };
 const _hoisted_2$1 = ["rx", "ry"];
-const _hoisted_3$1 = ["x", "y", "width", "height", "aria-label"];
-const _hoisted_4 = ["cx", "cy", "r", "aria-label"];
-const _hoisted_5 = { "pointer-events": "all" };
-const _hoisted_6 = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"];
-const _hoisted_7 = {
+const _hoisted_3$1 = { "pointer-events": "none" };
+const _hoisted_4 = ["x", "y", "width", "height", "aria-label"];
+const _hoisted_5 = ["cx", "cy", "r", "aria-label"];
+const _hoisted_6 = ["x", "y", "width", "height", "aria-label", "rx", "ry"];
+const _hoisted_7 = ["transform"];
+const _hoisted_8 = { "pointer-events": "all" };
+const _hoisted_9 = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"];
+const _hoisted_10 = {
   "pointer-events": "all",
-  class: "mce-transformable__svg-slot"
+  class: "mce-transform-controls__svg-slot"
 };
-const _hoisted_8 = {
+const _hoisted_11 = {
   key: 0,
-  class: "mce-transformable__tip"
+  class: "mce-transform-controls__tip"
 };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "Transformable",
+  __name: "TransformControls",
   props: {
     tag: { default: "div" },
     modelValue: {},
     movable: { type: Boolean, default: true },
     rotatable: { type: Boolean, default: true },
+    rotator: { type: Boolean },
     resizable: { type: Boolean, default: true },
-    adjustableBorderRadius: { type: Boolean, default: false },
+    roundable: { type: Boolean },
     threshold: { default: 0 },
     resizeStrategy: {},
     handleStrategy: {},
@@ -14916,24 +15211,24 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     handles: { default: () => [
       "move",
       // resize
-      "resize-left",
-      "resize-top",
-      "resize-right",
-      "resize-bottom",
-      "resize-top-left",
-      "resize-top-right",
-      "resize-bottom-right",
-      "resize-bottom-left",
-      // border-radius
-      "border-radius-top-left",
-      "border-radius-top-right",
-      "border-radius-bottom-left",
-      "border-radius-bottom-right",
+      "resize-l",
+      "resize-t",
+      "resize-r",
+      "resize-b",
+      "resize-tl",
+      "resize-tr",
+      "resize-br",
+      "resize-bl",
+      // round
+      "round-tl",
+      "round-tr",
+      "round-bl",
+      "round-br",
       // rotate
-      "rotate-top-left",
-      "rotate-top-right",
-      "rotate-bottom-left",
-      "rotate-bottom-right"
+      "rotate-tl",
+      "rotate-tr",
+      "rotate-bl",
+      "rotate-br"
     ] },
     initialSize: { type: Boolean },
     borderStyle: {},
@@ -14944,18 +15239,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const cursors = {
-      "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)
+      "rotate-tl": (angle) => createCursor("rotate", 360 + angle),
+      "rotate-tr": (angle) => createCursor("rotate", 90 + angle),
+      "rotate-bl": (angle) => createCursor("rotate", 270 + angle),
+      "rotate-br": (angle) => createCursor("rotate", 180 + angle),
+      "resize-l": (angle) => createCursor("resizeXy", 180 + angle),
+      "resize-t": (angle) => createCursor("resizeXy", 90 + angle),
+      "resize-r": (angle) => createCursor("resizeXy", 180 + angle),
+      "resize-b": (angle) => createCursor("resizeXy", 90 + angle),
+      "resize-tl": (angle) => createCursor("resizeBevel", 90 + angle),
+      "resize-tr": (angle) => createCursor("resizeBevel", 180 + angle),
+      "resize-br": (angle) => createCursor("resizeBevel", 90 + angle),
+      "resize-bl": (angle) => createCursor("resizeBevel", 180 + angle)
     };
     const modelValue = useModel(props, "modelValue");
     const model = computed({
@@ -14972,25 +15267,25 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const transforming = ref(false);
     const activeHandle = ref();
     const computedHandles = computed(() => {
-      const size = 8;
+      const shape = props.handleShape;
+      const size = shape === "rect" ? 8 : 10;
       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]] }
+        { type: "t", points: [[0, 0], [1, 0]] },
+        { type: "r", points: [[1, 0], [1, 1]] },
+        { type: "b", points: [[0, 1], [1, 1]] },
+        { type: "l", 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] }
+        { type: "t", point: [0.5, 0], width: 1.4, height: 0.6 },
+        { type: "r", point: [1, 0.5], width: 0.6, height: 1.4 },
+        { type: "b", point: [0.5, 1], width: 1.4, height: 0.6 },
+        { type: "l", point: [0, 0.5], width: 0.6, height: 1.4 },
+        { type: "tl", point: [0, 0] },
+        { type: "tr", point: [1, 0] },
+        { type: "bl", point: [0, 1] },
+        { type: "br", point: [1, 1] }
       ];
       const lineHandles = lines.map((item) => {
         const [p1, p2] = item.points;
@@ -15007,31 +15302,47 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         };
       });
       const pointHandles = points.map((item) => {
+        const _w = size * (item.width ?? 1);
+        const _h = size * (item.height ?? 1);
         return {
           type: item.type,
           shape,
-          x: item.point[0] * width - size / 2,
-          y: item.point[1] * height - size / 2,
-          width: size,
-          height: size
+          x: item.point[0] * width - _w / 2,
+          y: item.point[1] * height - _h / 2,
+          width: _w,
+          height: _h
         };
       });
-      const diagonalPointHandles = pointHandles.filter((item) => item.type.split("-").length === 2);
+      const diagonalPointHandles = pointHandles.filter((item) => item.type.length === 2);
       const rotateHandles = diagonalPointHandles.map((item) => {
-        const sign2 = {
-          x: center.x - item.x > 0 ? 1 : -1,
-          y: center.y - item.y > 0 ? 1 : -1
-        };
+        const _w = item.width * 1.5;
+        const _h = item.height * 1.5;
+        let x = item.x;
+        let y = item.y;
+        if (center.x > item.x) {
+          x -= _w;
+        } else {
+          x += item.width;
+        }
+        if (center.y > item.y) {
+          y -= _h;
+        } else {
+          y += item.height;
+        }
         return {
           ...item,
           shape: void 0,
           type: `rotate-${item.type}`,
-          x: item.x - sign2.x * size,
-          y: item.y - sign2.y * size
+          x,
+          y,
+          width: _w,
+          height: _h
         };
       });
       const minSize = Math.min(width, height);
-      const borderRadiusHandles = props.adjustableBorderRadius ? diagonalPointHandles.map((item) => {
+      const roundedHandles = props.roundable ? diagonalPointHandles.map((item) => {
+        const _w = item.width * 0.8;
+        const _h = item.height * 0.8;
         const sign2 = {
           x: center.x - item.x > 0 ? 1 : -1,
           y: center.y - item.y > 0 ? 1 : -1
@@ -15042,9 +15353,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         return {
           ...item,
           shape: "circle",
-          type: `border-radius-${item.type}`,
+          type: `round-${item.type}`,
           x: item.x + sign2.x * width / 2 * ws,
-          y: item.y + sign2.y * height / 2 * hs
+          y: item.y + sign2.y * height / 2 * hs,
+          width: _w,
+          height: _h
         };
       }) : [];
       let handles;
@@ -15054,8 +15367,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           ...lineHandles.map((item) => ({ ...item, type: "move" })),
           // resize
           ...pointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          // border-radius
-          ...borderRadiusHandles,
+          // round
+          ...roundedHandles,
           // rotate
           ...rotateHandles
         ];
@@ -15064,8 +15377,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           // resize
           ...lineHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
           ...diagonalPointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          // border-radius
-          ...borderRadiusHandles,
+          // round
+          ...roundedHandles,
           // rotate
           ...rotateHandles
         ];
@@ -15113,11 +15426,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
       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 handleArr = handle.type.split("-");
+      const last = handleArr.length > 1 ? handleArr.pop() || "" : "";
+      const key = handleArr.join("-");
+      const isMove = key === "move";
+      const isRotate = key === "rotate";
+      const isRound = key === "round";
+      const isHorizontal = last === "l" || last === "r";
+      const isHorizontalVertical = last.length === 1;
       const centerPoint = {
         x: left + width / 2,
         y: top + height / 2
@@ -15151,7 +15467,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       if (!props.threshold && !transforming.value) {
         startTransform();
       }
-      function onMove(event2) {
+      function _onPointerMove(event2) {
         const updated = {};
         if (!startClientPoint) {
           startClientPoint = { x: event2.clientX, y: event2.clientY };
@@ -15183,7 +15499,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ) / (Math.PI / 180);
             updated.rotate = (rotate + endAngle - startAngle + 360) % 360;
           }
-        } else if (isBorderRadius) {
+        } else if (isRound) {
           const offset2 = rotatePoint2(rotatedOffset, { x: 0, y: 0 }, -rotate);
           const dx = -sign2.x * offset2.x;
           const dy = -sign2.y * offset2.y;
@@ -15260,15 +15576,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         model.value = newValue;
         emit("move", newValue, oldValue);
       }
-      function onEnd() {
-        window.removeEventListener("pointermove", onMove);
-        window.removeEventListener("pointerup", onEnd, true);
+      function _onPointerUp() {
+        window.removeEventListener("pointermove", _onPointerMove);
+        window.removeEventListener("pointerup", _onPointerUp, true);
         transforming.value = false;
         activeHandle.value = void 0;
         emit("end", model.value);
       }
-      window.addEventListener("pointermove", onMove);
-      window.addEventListener("pointerup", onEnd, true);
+      window.addEventListener("pointermove", _onPointerMove);
+      window.addEventListener("pointerup", _onPointerUp, true);
       return true;
     }
     const cursorMap = {
@@ -15362,17 +15678,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         default:
           return void 0;
       }
-      if (handle === "resize-top" || handle === "resize-right" || handle === "resize-top-right" || handle === "resize-bottom-left") {
+      if (handle === "resize-t" || handle === "resize-r" || handle === "resize-tr" || handle === "resize-bl") {
         return h("line", {
-          class: "mce-transformable__diagonal",
+          class: "mce-transform-controls__diagonal",
           x1: "100%",
           y1: "0",
           x2: "0",
           y2: "100%"
         });
-      } else if (handle === "resize-left" || handle === "resize-bottom" || handle === "resize-top-left" || handle === "resize-bottom-right") {
+      } else if (handle === "resize-l" || handle === "resize-b" || handle === "resize-tl" || handle === "resize-br") {
         return h("line", {
-          class: "mce-transformable__diagonal",
+          class: "mce-transform-controls__diagonal",
           x1: "0",
           y1: "0",
           x2: "100%",
@@ -15383,15 +15699,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-        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}`
+        class: normalizeClass(["mce-transform-controls", [
+          transforming.value && "mce-transform-controls--transforming",
+          props.hideUi && "mce-transform-controls--hide-ui",
+          __props.resizeStrategy && `mce-transform-controls--${__props.resizeStrategy}`,
+          activeHandle.value && `mce-transform-controls--${activeHandle.value}`,
+          activeHandle.value === "move" && "mce-transform-controls--moving",
+          activeHandle.value?.startsWith("resize") && "mce-transform-controls--resizing",
+          activeHandle.value?.startsWith("rotate") && "mce-transform-controls--rotateing",
+          props.borderStyle && `mce-transform-controls--${props.borderStyle}`
         ]]),
         style: normalizeStyle$1(style.value)
       }, {
@@ -15404,14 +15720,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             start
           }),
           (openBlock(), createElementBlock("svg", _hoisted_1$4, [
-            _cache[0] || (_cache[0] = createElementVNode("rect", {
+            _cache[1] || (_cache[1] = createElementVNode("rect", {
               width: "100%",
               height: "100%",
               fill: "none",
-              class: "mce-transformable__rect"
+              class: "mce-transform-controls__rect"
             }, null, -1)),
             createElementVNode("rect", {
-              class: "mce-transformable__rect",
+              class: "mce-transform-controls__rect",
               width: "100%",
               height: "100%",
               fill: "none",
@@ -15419,7 +15735,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               ry: model.value.borderRadius
             }, null, 8, _hoisted_2$1),
             createVNode(Diagonal),
-            createElementVNode("g", null, [
+            createElementVNode("g", _hoisted_3$1, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
                 return openBlock(), createElementBlock(Fragment, { key: index }, [
                   handle.shape ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -15430,20 +15746,37 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       width: handle.width,
                       height: handle.height,
                       "aria-label": handle.type,
-                      class: "mce-transformable__handle"
-                    }, null, 8, _hoisted_3$1)) : (openBlock(), createElementBlock("circle", {
+                      class: "mce-transform-controls__handle"
+                    }, null, 8, _hoisted_4)) : handle.width === handle.height ? (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,
-                      class: "mce-transformable__handle"
-                    }, null, 8, _hoisted_4))
+                      class: "mce-transform-controls__handle"
+                    }, null, 8, _hoisted_5)) : (openBlock(), createElementBlock("rect", {
+                      key: 2,
+                      x: handle.x,
+                      y: handle.y,
+                      width: handle.width,
+                      height: handle.height,
+                      "aria-label": handle.type,
+                      rx: handle.width / 4,
+                      ry: handle.height / 4,
+                      class: "mce-transform-controls__handle"
+                    }, null, 8, _hoisted_6))
                   ], 64)) : createCommentVNode("", true)
                 ], 64);
-              }), 128))
+              }), 128)),
+              __props.rotator ? (openBlock(), createElementBlock("g", {
+                key: 0,
+                transform: `matrix(1, 0, 0, 1, -32, ${model.value.height}) rotate(270 16 16)`,
+                class: "mce-transform-controls__rotator"
+              }, [..._cache[0] || (_cache[0] = [
+                createElementVNode("path", { d: "M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z" }, null, -1)
+              ])], 8, _hoisted_7)) : createCommentVNode("", true)
             ]),
-            createElementVNode("g", _hoisted_5, [
+            createElementVNode("g", _hoisted_8, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
                 return openBlock(), createElementBlock("rect", {
                   key: index,
@@ -15455,17 +15788,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   width: handle.width,
                   height: handle.height,
                   "aria-label": handle.type,
-                  class: "mce-transformable__handle-rect",
+                  class: "mce-transform-controls__handle-rect",
                   cursor: transforming.value ? "auto" : getCursor(handle.type),
                   onPointerdown: (event) => start(event, index)
-                }, null, 40, _hoisted_6);
+                }, null, 40, _hoisted_9);
               }), 128))
             ]),
-            createElementVNode("g", _hoisted_7, [
+            createElementVNode("g", _hoisted_10, [
               renderSlot(_ctx.$slots, "svg", { box: model.value })
             ])
           ])),
-          tip.value ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
+          tip.value ? (openBlock(), createElementBlock("div", _hoisted_11, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["class", "style"]);
@@ -15695,7 +16028,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       isLock,
       config,
       snapThreshold,
-      getSnapPoints
+      getSnapPoints,
+      hoverElement
     } = useEditor();
     const transformable = useTemplateRef("transformableTpl");
     const startEvent = ref();
@@ -15810,8 +16144,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           rotate: transform2.rotate - (oldTransform.rotate ?? 0),
           borderRadius: transform2.borderRadius - (oldTransform.borderRadius ?? 0) / zoom.y
         };
-        const elements = elementSelection.value;
-        elements.forEach((element) => {
+        elementSelection.value.forEach((element) => {
           const style = element.style;
           const newStyle = {
             left: style.left + offsetStyle.left,
@@ -15832,7 +16165,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               element,
               newStyle.width / element.style.width,
               newStyle.height / element.style.height,
-              isFrame(element) ? void 0 : shape.isValid() ? { deep: true } : handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
+              isFrame(element) ? void 0 : shape.isValid() ? { deep: true } : handle.split("-")[1].length > 1 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
             );
             newStyle.width = element.style.width;
             newStyle.height = element.style.height;
@@ -15864,9 +16197,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         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();
+    const roundable = computed(() => {
+      if (elementSelection.value.length === 1) {
+        const element = elementSelection.value[0];
+        return hoverElement.value?.equal(element) && !isLock(element) && element.foreground.isValid();
+      }
+      return false;
     });
     function onStart() {
       emit("selectionTransformStart", createSelectionTransformContext());
@@ -15919,24 +16255,24 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             })
           }, null, 4);
         }), 128)),
-        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$a, {
+        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$a, mergeProps({
           key: 1,
-          ref: "transformableTpl",
+          ref: "transformableTpl"
+        }, unref(config).transformControls, {
           modelValue: transform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => transform.value = $event),
           movable: unref(state) !== "typing" && movable.value,
           resizable: unref(state) !== "typing" && resizable.value,
           rotatable: unref(state) !== "typing" && rotatable.value,
-          "adjustable-border-radius": adjustableBorderRadius.value,
+          roundable: unref(state) !== "typing" && roundable.value,
           "resize-strategy": props.resizeStrategy,
-          "handle-shape": unref(config).handleShape,
           class: "mce-selector__transform",
           "border-style": unref(elementSelection).length > 1 ? "dashed" : "solid",
           "tip-format": tipFormat,
           onStart,
           onMove,
           onEnd
-        }, createSlots({ _: 2 }, [
+        }), createSlots({ _: 2 }, [
           _ctx.$slots.transformable ? {
             name: "svg",
             fn: withCtx((slotProps) => [
@@ -15944,7 +16280,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["modelValue", "movable", "resizable", "rotatable", "adjustable-border-radius", "resize-strategy", "handle-shape", "border-style"])) : createCommentVNode("", true),
+        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "border-style"])) : createCommentVNode("", true),
         transform.value.width && transform.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "mce-selector__slot",
@@ -16237,7 +16573,7 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = {
   ref: "overlayContainerTpl",
-  class: "mce-editor__overlay-container"
+  class: "mce-overlay-container"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "EditorLayout",
@@ -16310,17 +16646,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       renderEngine.value.resize(width, height);
     });
     onBeforeMount(() => {
-      renderEngine.value.on("pointerdown", onPointerdown);
-      renderEngine.value.on("pointermove", onPointermove);
-      renderEngine.value.on("pointerover", onPointerover);
+      renderEngine.value.on("pointerdown", onEnginePointerDown);
+      renderEngine.value.on("pointermove", onEnginePointerMove);
+      renderEngine.value.on("pointerover", onEnginePointerOver);
     });
     onMounted(() => {
       bindRenderCanvas(canvas.value, drawboardDom.value);
     });
     onBeforeUnmount(() => {
-      renderEngine.value.off("pointerdown", onPointerdown);
-      renderEngine.value.off("pointermove", onPointermove);
-      renderEngine.value.off("pointerover", onPointerover);
+      renderEngine.value.off("pointerdown", onEnginePointerDown);
+      renderEngine.value.off("pointermove", onEnginePointerMove);
+      renderEngine.value.off("pointerover", onEnginePointerOver);
     });
     function onHover(event) {
       let cursor;
@@ -16351,7 +16687,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       hoverElement.value = hovered;
       setCursor(cursor);
     }
-    function onPointerdown(downEvent, options = {}) {
+    function onEnginePointerDown(downEvent, options = {}) {
       if (downEvent.srcElement && downEvent.srcElement !== drawboardDom.value && downEvent.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(downEvent.button)) {
         return;
       }
@@ -16456,7 +16792,7 @@ 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(moveEvent) {
+      function _onEnginePointerMove(moveEvent) {
         if (drawing || hand) ;
         else {
           if (inSelection) {
@@ -16479,7 +16815,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           }
         }
       }
-      function onMove(moveEvent) {
+      function _onPointerMove(moveEvent) {
         current = { x: moveEvent.clientX, y: moveEvent.clientY };
         if (drawing) {
           drawingTool?.move?.(
@@ -16502,7 +16838,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
         prev = { ...current };
       }
-      async function onUp(upEvent) {
+      async function _onPointerUp(upEvent) {
         current = { x: upEvent.clientX, y: upEvent.clientY };
         if (drawing) {
           drawingTool?.end?.(
@@ -16535,30 +16871,26 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onHover(downEvent);
           }
         }
-        renderEngine.value.off("pointermove", onEngineMove);
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
+        renderEngine.value.off("pointermove", _onEnginePointerMove);
+        document.removeEventListener("pointermove", _onPointerMove);
+        document.removeEventListener("pointerup", _onPointerUp);
         isUp = true;
       }
-      renderEngine.value.on("pointermove", onEngineMove);
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
+      renderEngine.value.on("pointermove", _onEnginePointerMove);
+      document.addEventListener("pointermove", _onPointerMove);
+      document.addEventListener("pointerup", _onPointerUp);
     }
-    editor.registerCommand({ command: "pointerDown", handle: onPointerdown });
-    function onPointermove(event) {
+    editor.registerCommand({ command: "pointerDown", handle: onEnginePointerDown });
+    function onEnginePointerMove(event) {
       if (event.srcElement !== drawboardDom.value) {
         return;
       }
-      drawboardPointer.value = new Vector2$1(
-        event.clientX - drawboardAabb.value.left,
-        event.clientY - drawboardAabb.value.top
-      );
       if (camera.value.grabbing || event.button === 1 || state.value && state.value !== "typing") {
         return;
       }
       onHover(event);
     }
-    function onPointerover(event) {
+    function onEnginePointerOver(event) {
       if (event.srcElement !== drawboardDom.value) {
         return;
       }
@@ -16611,7 +16943,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 }, ["prevent"]))
               }, [
                 createElementVNode("canvas", _hoisted_2, null, 512),
-                createVNode(_sfc_main$2, { ref: "textEditorTpl" }, null, 512),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay.filter((v) => v.order === "before"), (p, key) => {
+                  return openBlock(), createBlock(resolveDynamicComponent(p.component), { key });
+                }), 128)),
                 createVNode(_sfc_main$7, {
                   ref: "selectorTpl",
                   "selected-area": selectedArea.value,
@@ -16626,28 +16960,44 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }, 8, ["selected-area", "resize-strategy"]),
-                slots.floatbar || slots["floatbar-top"] ? (openBlock(), createBlock(_sfc_main$b, {
+                createVNode(_sfc_main$2, { ref: "textEditorTpl" }, null, 512),
+                slots.floatbar ? (openBlock(), createBlock(_sfc_main$b, {
                   key: 0,
                   location: "top-start",
-                  target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el
+                  target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el,
+                  middlewares: ["offset", "shift"]
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "floatbar", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  _: 3
+                }, 8, ["target"])) : createCommentVNode("", true),
+                slots["floatbar-top"] ? (openBlock(), createBlock(_sfc_main$b, {
+                  key: 1,
+                  location: "top-start",
+                  target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el,
+                  middlewares: ["offset", "shift"]
                 }, {
                   default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "floatbar", normalizeProps(guardReactiveProps(slotProps))),
                     renderSlot(_ctx.$slots, "floatbar-top", normalizeProps(guardReactiveProps(slotProps)))
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
                 slots["floatbar-bottom"] ? (openBlock(), createBlock(_sfc_main$b, {
-                  key: 1,
+                  key: 2,
                   location: "bottom-start",
-                  target: selector.value?.transformable?.$el
+                  target: selector.value?.transformable?.$el,
+                  middlewares: ["offset", "shift"]
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "floatbar-bottom", normalizeProps(guardReactiveProps(slotProps)))
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay, (p, key) => {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay.filter((v) => v.order !== "before" && v.order !== "after"), (p, key) => {
+                  return openBlock(), createBlock(resolveDynamicComponent(p.component), { key });
+                }), 128)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay.filter((v) => v.order === "after"), (p, key) => {
                   return openBlock(), createBlock(resolveDynamicComponent(p.component), { key });
                 }), 128)),
                 renderSlot(_ctx.$slots, "drawboard", normalizeProps(guardReactiveProps(slotProps)))
@@ -16775,7 +17125,7 @@ export {
   _sfc_main$p as Ruler,
   SUPPORTS_CLIPBOARD,
   _sfc_main$n as Scrollbar,
-  _sfc_main$a as Transformable,
+  _sfc_main$a as TransformControls,
   USER_AGENT,
   boundingBoxToStyle,
   consoleError,