mce 0.13.6 → 0.13.8

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation } from "modern-canvas";
-import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, onMounted, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, readonly, toRef, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, nextTick, h, withDirectives, vShow, vModelText, withModifiers, isRef } from "vue";
+import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, onMounted, inject, getCurrentInstance, defineComponent, createVNode, mergeProps, createElementVNode, toValue, onScopeDispose, provide, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, readonly, toRef, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, nextTick, h, withDirectives, vShow, vModelText, withModifiers, isRef } from "vue";
 import { useFileDialog, useEventListener, isClient, useResizeObserver as useResizeObserver$1, useLocalStorage, onClickOutside, useMouse, useImage, useDebounceFn } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
@@ -902,7 +902,7 @@ const _0_context = defineMixin((editor) => {
   const nodeIndexMap = reactive(/* @__PURE__ */ new Map());
   const selection = ref([]);
   const elementSelection = computed({
-    get: () => selection.value.filter((v) => v instanceof Element2D),
+    get: () => selection.value.filter((v) => isElement(v)),
     set: (val) => selection.value = val
   });
   const textSelection = ref();
@@ -930,6 +930,48 @@ const _0_context = defineMixin((editor) => {
       y: y - drawboardAabb.value.top
     }, { x: 0, y: 0 });
   }
+  const block = ["top", "bottom"];
+  const inline = ["start", "end", "left", "right"];
+  function toPhysical(str, isRtl) {
+    if (str === "start")
+      return isRtl ? "right" : "left";
+    if (str === "end")
+      return isRtl ? "left" : "right";
+    return str;
+  }
+  const parseAnchor = (anchor, isRtl) => {
+    let [side, align] = anchor.split(" ");
+    if (!align) {
+      align = block.includes(side) ? "start" : inline.includes(side) ? "top" : "center";
+    }
+    return {
+      side: toPhysical(side, isRtl),
+      align: toPhysical(align, isRtl)
+    };
+  };
+  function isRoot(value) {
+    return value instanceof Node$1 && root.value.equal(value);
+  }
+  function isElement(value) {
+    return value instanceof Element2D;
+  }
+  function isFrame(value) {
+    return isElement(value) && value.meta.inEditorIs === "Frame";
+  }
+  function isVisible(node) {
+    return isElement(node) && node.style.visibility === "visible";
+  }
+  function setVisible(node, visible) {
+    if (isElement(node)) {
+      node.style.visibility = visible ? "visible" : "hidden";
+    }
+  }
+  function isLock(node) {
+    return Boolean(node.meta.lock);
+  }
+  function setLock(node, lock) {
+    node.meta.lock = lock;
+  }
   Object.assign(editor, {
     fonts,
     renderEngine,
@@ -951,7 +993,15 @@ const _0_context = defineMixin((editor) => {
     setState,
     setCursor,
     drawboardPointer,
-    getGlobalPointer
+    getGlobalPointer,
+    parseAnchor,
+    isRoot,
+    isElement,
+    isFrame,
+    isVisible,
+    setVisible,
+    isLock,
+    setLock
   });
   return () => {
     const {
@@ -1025,63 +1075,6 @@ const _0_font = defineMixin((editor, options) => {
     }
   };
 });
-const _0_helper = defineMixin((editor) => {
-  const {
-    root
-  } = editor;
-  const block = ["top", "bottom"];
-  const inline = ["start", "end", "left", "right"];
-  function toPhysical(str, isRtl) {
-    if (str === "start")
-      return isRtl ? "right" : "left";
-    if (str === "end")
-      return isRtl ? "left" : "right";
-    return str;
-  }
-  const parseAnchor = (anchor, isRtl) => {
-    let [side, align] = anchor.split(" ");
-    if (!align) {
-      align = block.includes(side) ? "start" : inline.includes(side) ? "top" : "center";
-    }
-    return {
-      side: toPhysical(side, isRtl),
-      align: toPhysical(align, isRtl)
-    };
-  };
-  function isRoot(value) {
-    return value instanceof Node$1 && root.value.equal(value);
-  }
-  function isElement(value) {
-    return value instanceof Element2D;
-  }
-  function isFrame(value) {
-    return isElement(value) && value.meta.inEditorIs === "Frame";
-  }
-  function isVisible(node) {
-    return isElement(node) && node.style.visibility === "visible";
-  }
-  function setVisible(node, visible) {
-    if (isElement(node)) {
-      node.style.visibility = visible ? "visible" : "hidden";
-    }
-  }
-  function isLock(node) {
-    return Boolean(node.meta.lock);
-  }
-  function setLock(node, lock) {
-    node.meta.lock = lock;
-  }
-  Object.assign(editor, {
-    parseAnchor,
-    isRoot,
-    isElement,
-    isFrame,
-    isVisible,
-    setVisible,
-    isLock,
-    setLock
-  });
-});
 const en = {
   "cancel": "Cancel",
   "constrainToAxis": "Constrain to axis",
@@ -1866,7 +1859,7 @@ const _2_box = defineMixin((editor) => {
     };
     let flag = false;
     element.children.forEach((child) => {
-      if (child instanceof Element2D) {
+      if (isElement(child)) {
         const _minmax = child.getAabb().toMinmax();
         minmax.minX = Math.min(minmax.minX, _minmax.minX);
         minmax.minY = Math.min(minmax.minY, _minmax.minY);
@@ -1884,7 +1877,7 @@ const _2_box = defineMixin((editor) => {
       };
       const aabbs = {};
       element.children.forEach((child, index) => {
-        if (child instanceof Element2D) {
+        if (isElement(child)) {
           aabbs[index] = child.getGlobalAabb();
         }
       });
@@ -1894,7 +1887,7 @@ const _2_box = defineMixin((editor) => {
       element.style.height = box.height;
       element.updateGlobalTransform();
       element.children.forEach((child, index) => {
-        if (child instanceof Element2D) {
+        if (isElement(child)) {
           child.updateGlobalTransform();
           const oldAabb = aabbs[index];
           const localCenter = child.toLocal({
@@ -1949,7 +1942,7 @@ const _2_box = defineMixin((editor) => {
       obb.top -= position.y;
     } else if (inTarget === "frame") {
       const first = Array.isArray(node) ? node[0] : node;
-      if (first instanceof Element2D) {
+      if (isElement(first)) {
         const frame = getAncestorFrame(first);
         if (frame) {
           obb.left -= frame.style.left;
@@ -1958,8 +1951,8 @@ const _2_box = defineMixin((editor) => {
       }
     } else if (inTarget === "parent") {
       const first = Array.isArray(node) ? node[0] : node;
-      if (first instanceof Element2D) {
-        const parent = first.findAncestor((el) => el instanceof Element2D);
+      if (isElement(first)) {
+        const parent = first.findAncestor((el) => isElement(el));
         if (parent) {
           const parentBox = getAabb(parent);
           obb.left -= parentBox.left;
@@ -1969,9 +1962,6 @@ const _2_box = defineMixin((editor) => {
     }
     return obb;
   }
-  function getObbInDrawboard(node) {
-    return getObb(node, "drawboard");
-  }
   function getAabb(node, inTarget) {
     let aabb;
     if (Array.isArray(node) && node.length > 0) {
@@ -1985,7 +1975,7 @@ const _2_box = defineMixin((editor) => {
           maxY: Number.MIN_SAFE_INTEGER
         };
         node.forEach((child) => {
-          if (child instanceof Element2D) {
+          if (isElement(child)) {
             const aabb2 = getAabb(child);
             minmax.minX = Math.min(minmax.minX, aabb2.left);
             minmax.minY = Math.min(minmax.minY, aabb2.top);
@@ -2017,7 +2007,7 @@ const _2_box = defineMixin((editor) => {
       aabb = aabbToDrawboardAabb(aabb);
     } else if (inTarget === "frame") {
       const first = Array.isArray(node) ? node[0] : node;
-      if (first instanceof Element2D) {
+      if (isElement(first)) {
         const frame = getAncestorFrame(first);
         if (frame) {
           aabb.left -= frame.style.left;
@@ -2026,8 +2016,8 @@ const _2_box = defineMixin((editor) => {
       }
     } else if (inTarget === "parent") {
       const first = Array.isArray(node) ? node[0] : node;
-      if (first instanceof Element2D) {
-        const parent = first.findAncestor((el) => el instanceof Element2D);
+      if (isElement(first)) {
+        const parent = first.findAncestor((el) => isElement(el));
         if (parent) {
           const parentBox = getAabb(parent);
           aabb.left -= parentBox.left;
@@ -2037,9 +2027,6 @@ const _2_box = defineMixin((editor) => {
     }
     return aabb;
   }
-  function getAabbInDrawboard(node) {
-    return getAabb(node, "drawboard");
-  }
   function aabbToDrawboardAabb(aabb) {
     const _aabb = { ...aabb };
     const zoom = camera.value.zoom;
@@ -2054,15 +2041,19 @@ const _2_box = defineMixin((editor) => {
   }
   const rootAabb = computed(() => getAabb(root.value.children));
   const selectionAabb = computed(() => getAabb(selection.value));
+  const selectionAabbInDrawboard = computed(() => getAabb(selection.value, "drawboard"));
+  const selectionObb = computed(() => getObb(selection.value));
+  const selectionObbInDrawboard = computed(() => getObb(selection.value, "drawboard"));
   Object.assign(editor, {
     obbToFit,
     getObb,
-    getObbInDrawboard,
     getAabb,
-    getAabbInDrawboard,
     aabbToDrawboardAabb,
     rootAabb,
-    selectionAabb
+    selectionAabb,
+    selectionAabbInDrawboard,
+    selectionObb,
+    selectionObbInDrawboard
   });
 });
 const _2_export = defineMixin((editor) => {
@@ -2227,6 +2218,7 @@ const _3_view = defineMixin((editor) => {
   });
   return () => {
     const {
+      isElement,
       root,
       currentFrame,
       on,
@@ -2236,14 +2228,14 @@ const _3_view = defineMixin((editor) => {
       switch (config.value.viewMode) {
         case "frame":
           root.value.children.forEach((child) => {
-            if (child instanceof Element2D) {
+            if (isElement(child)) {
               child.visible = child.equal(currentFrame.value);
             }
           });
           break;
         case "edgeless":
           root.value.children.forEach((child) => {
-            if (child instanceof Element2D) {
+            if (isElement(child)) {
               child.visible = true;
             }
           });
@@ -2258,6 +2250,7 @@ const _3_view = defineMixin((editor) => {
 });
 const _4_0_text = defineMixin((editor) => {
   const {
+    isElement,
     config,
     elementSelection,
     textSelection
@@ -2319,7 +2312,7 @@ const _4_0_text = defineMixin((editor) => {
     }
     _handle(element2);
     element2.findOne((descendant) => {
-      if (descendant instanceof Element2D) {
+      if (isElement(descendant)) {
         _handle(descendant);
       }
       return false;
@@ -2358,7 +2351,7 @@ const _4_0_text = defineMixin((editor) => {
     }
     _handle(element2);
     element2.findOne((descendant) => {
-      if (descendant instanceof Element2D) {
+      if (isElement(descendant)) {
         _handle(descendant);
       }
       return false;
@@ -2564,7 +2557,7 @@ const _4_2_element = defineMixin((editor) => {
     root,
     isFrame,
     isLock,
-    getObbInDrawboard,
+    getObb,
     config,
     getAncestorFrame,
     getAabb,
@@ -2785,7 +2778,7 @@ const _4_2_element = defineMixin((editor) => {
       }
       return [node];
     }).filter((node) => {
-      return "isVisibleInTree" in node && node.isVisibleInTree() && isOverlappingObb(areaInDrawboard, getObbInDrawboard(node)) && !isLock(node);
+      return "isVisibleInTree" in node && node.isVisibleInTree() && isOverlappingObb(areaInDrawboard, getObb(node, "drawboard")) && !isLock(node);
     }) ?? [];
     selection.value = selected;
     return selected;
@@ -3060,6 +3053,7 @@ const _scroll$1 = defineMixin((editor) => {
 });
 const _snapshot = defineMixin((editor) => {
   const {
+    isElement,
     renderEngine,
     frames,
     currentFrameAabb,
@@ -3079,7 +3073,7 @@ const _snapshot = defineMixin((editor) => {
   async function captureElementScreenshot(element) {
     await editor.waitUntilFontLoad();
     let data;
-    if (element instanceof Element2D) {
+    if (isElement(element)) {
       data = element.toJSON();
     } else {
       data = { ...element };
@@ -3283,7 +3277,6 @@ const mixins = [
   _0_config_base,
   _0_context,
   _0_font,
-  _0_helper,
   _0_locale,
   _1_frame,
   _1_hotkey,
@@ -4265,10 +4258,11 @@ function isLeftTopLine(line) {
 }
 const _auxiliary = definePlugin((editor) => {
   const {
+    isElement,
     currentFrame,
     elementSelection,
     state,
-    getObbInDrawboard,
+    getObb,
     root
   } = editor;
   function createBox(node) {
@@ -4281,7 +4275,7 @@ const _auxiliary = definePlugin((editor) => {
     let width;
     if (node.instanceId) {
       box.id = node.instanceId;
-      ({ top, left, height, width } = getObbInDrawboard(node));
+      ({ top, left, height, width } = getObb(node, "drawboard"));
     } else {
       box.id = Math.random();
       ({ top, left, height, width } = node);
@@ -4310,7 +4304,7 @@ const _auxiliary = definePlugin((editor) => {
   });
   const parnet = computed(() => {
     const p = elementSelection.value[0].parent;
-    return p instanceof Element2D ? p : void 0;
+    return isElement(p) ? p : void 0;
   });
   const parentBox = computed(() => createBox(
     parnet.value ?? { left: 0, top: 0, width: 0, height: 0 }
@@ -5085,9 +5079,11 @@ const _image = definePlugin((editor) => {
           onBefore: (engine) => {
             engine.root.append(
               new DrawboardEffect({
+                ...drawboardEffect.value.getProperties(),
                 internalMode: "back",
                 effectMode: "before",
-                ...drawboardEffect.value.getProperties()
+                checkerboard: false,
+                pixelGrid: false
               })
             );
           }
@@ -5797,6 +5793,7 @@ const _scroll = definePlugin((editor) => {
 });
 const _select = definePlugin((editor) => {
   const {
+    isElement,
     selection,
     root
   } = editor;
@@ -5808,7 +5805,7 @@ const _select = definePlugin((editor) => {
   }
   function selectParent() {
     const parent = selection.value[0]?.parent;
-    if (parent instanceof Element2D) {
+    if (isElement(parent)) {
       selection.value = [parent];
     }
   }
@@ -5904,15 +5901,14 @@ const _text = definePlugin((editor) => {
 });
 const _ui = definePlugin((editor) => {
   const {
-    selection,
-    getAabbInDrawboard,
+    selectionAabbInDrawboard,
     emit
   } = editor;
   return {
     name: "mce:ui",
     setup: () => {
       watch(
-        () => getAabbInDrawboard(selection.value),
+        selectionAabbInDrawboard,
         (aabb) => emit("setTransform", { aabb }),
         { deep: true }
       );
@@ -6211,10 +6207,13 @@ function defineMixin(cb) {
   return cb;
 }
 function useEditor() {
-  return inject(Editor.injectionKey);
-}
-function provideEditor(editor = new Editor()) {
-  provide(Editor.injectionKey, editor);
+  let editor = inject(Editor.injectionKey, null);
+  if (!editor) {
+    const _editor = getCurrentInstance()?.proxy?.editor;
+    if (_editor instanceof Editor) {
+      editor = _editor;
+    }
+  }
   return editor;
 }
 function makeIconProps() {
@@ -6416,7 +6415,7 @@ const defaultActiveStrategy = (context) => {
   const { isRoot, isFrame, isElement, elementSelection } = editor;
   const activeElement = elementSelection.value[0];
   const cb = (node) => {
-    if (isElement(node) && (node.equal(activeElement) || node.parent?.equal(activeElement) || node.parent?.equal(activeElement?.parent) || isFrame(node.parent) && isRoot(node.parent.parent) || isRoot(node.parent) && !isFrame(node))) {
+    if (isElement(node) && (node.equal(activeElement) || node.parent?.equal(activeElement) || node.parent?.equal(activeElement?.parent) || isFrame(node.parent) && isRoot(node.parent.parent) || isRoot(node.parent))) {
       return true;
     }
     return false;
@@ -6443,7 +6442,7 @@ const defaultHoverStrategy = (context) => {
   const { isRoot, isFrame, isElement, elementSelection } = editor;
   const activeElement = elementSelection.value[0];
   const cb = (node) => {
-    if (isElement(node) && (node.equal(activeElement) || node.parent?.equal(activeElement) || node.parent?.equal(activeElement?.parent) || isFrame(node.parent) && isRoot(node.parent.parent) || isRoot(node.parent) && !isFrame(node))) {
+    if (isElement(node) && (node.equal(activeElement) || node.parent?.equal(activeElement) || node.parent?.equal(activeElement?.parent) || isFrame(node.parent) && isRoot(node.parent.parent) || isRoot(node.parent))) {
       return true;
     }
     return false;
@@ -6454,7 +6453,7 @@ const defaultHoverStrategy = (context) => {
   return element.findAncestor(cb);
 };
 const _hoisted_1$n = { class: "mce-auxiliary" };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "Auxiliary",
   setup(__props) {
     const { auxiliaryLines } = useEditor();
@@ -6572,7 +6571,7 @@ function useResizeObserver(callback, box = "content") {
 }
 const MceLayoutKey = Symbol.for("mce:layout");
 const MceLayoutItemKey = Symbol.for("mce:layout-item");
-const ROOT_ZINDEX = 1e3;
+const ROOT_ZINDEX = 999;
 function makeLayoutProps() {
   return {
     overlaps: {
@@ -6590,8 +6589,7 @@ function makeLayoutItemProps() {
     order: {
       type: [Number, String],
       default: 0
-    },
-    absolute: Boolean
+    }
   };
 }
 function useLayout() {
@@ -6727,8 +6725,7 @@ function createLayout(props) {
       layoutSize,
       elementSize,
       active,
-      disableTransitions,
-      absolute
+      disableTransitions
     }) => {
       priorities.set(id, order);
       positions.set(id, position);
@@ -6752,7 +6749,6 @@ function createLayout(props) {
           [position.value]: 0,
           zIndex: zIndex.value,
           transform: `translate${isHorizontal ? "X" : "Y"}(${(active.value ? 0 : -(size === 0 ? 100 : size)) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}${unit})`,
-          position: absolute.value || rootZIndex.value !== ROOT_ZINDEX ? "absolute" : "fixed",
           ...transitionsEnabled.value ? void 0 : { transition: "none" }
         };
         if (!isMounted.value)
@@ -6813,7 +6809,7 @@ function createLayout(props) {
   };
 }
 const MceMenuSymbol = Symbol.for("MceMenuSymbol");
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     disabled: Boolean,
@@ -6838,7 +6834,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6962,7 +6958,7 @@ const _hoisted_5$3 = {
   key: 1,
   class: "mce-list-item__append"
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceMenu"
   },
@@ -7041,7 +7037,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_MceMenu = resolveComponent("MceMenu");
-      return openBlock(), createBlock(_sfc_main$B, {
+      return openBlock(), createBlock(_sfc_main$A, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isActive.value = $event),
@@ -7085,7 +7081,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
                     hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
-                      item.checked ? (openBlock(), createBlock(_sfc_main$C, {
+                      item.checked ? (openBlock(), createBlock(_sfc_main$B, {
                         key: 0,
                         icon: "$check"
                       })) : createCommentVNode("", true)
@@ -7096,7 +7092,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                       ])
                     ]),
                     item.children?.length ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
-                      createVNode(_sfc_main$C, { icon: "$arrowRight" })
+                      createVNode(_sfc_main$B, { icon: "$arrowRight" })
                     ])) : createCommentVNode("", true)
                   ], 10, _hoisted_2$a)
                 ], 40, _hoisted_1$m))
@@ -7134,7 +7130,7 @@ const _hoisted_2$9 = {
   key: 0,
   class: "mce-context-menu__kbd"
 };
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "ContextMenu",
   props: {
     "modelValue": { type: Boolean },
@@ -7192,7 +7188,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$A, {
+      return openBlock(), createBlock(_sfc_main$z, {
         ref: "menuTplRef",
         modelValue: model.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
@@ -7219,7 +7215,7 @@ const _hoisted_1$k = {
   key: 0,
   class: "mce-drawing__content"
 };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "Drawing",
   setup(__props) {
     const {
@@ -7254,7 +7250,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "Floatbar",
   props: {
     ...makeMceOverlayProps({
@@ -7265,27 +7261,46 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const {
-      getAabbInDrawboard,
       selection,
+      selectionAabbInDrawboard,
       isFrame
     } = useEditor();
     const overlay = useTemplateRef("overlayTpl");
+    const style = computed(() => {
+      const location = props.location;
+      const aabb = selectionAabbInDrawboard.value;
+      if (location?.startsWith("top") || location?.startsWith("bottom")) {
+        return {
+          width: `${aabb.width}px`
+        };
+      } else if (location?.startsWith("left") || location?.startsWith("right")) {
+        return {
+          height: `${aabb.height}px`
+        };
+      }
+      return {};
+    });
+    const offset2 = computed(() => {
+      if (selection.value.some((v) => isFrame(v)) || props.location?.startsWith("bottom")) {
+        return 32;
+      }
+      return 8;
+    });
     function updateLocation() {
       overlay.value?.updateLocation();
     }
-    watch(() => getAabbInDrawboard(selection.value), updateLocation, {
-      deep: true
-    });
+    watch(selectionAabbInDrawboard, updateLocation, { deep: true });
     __expose({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$B, {
+      return openBlock(), createBlock(_sfc_main$A, {
         ref: "overlayTpl",
+        style: normalizeStyle(style.value),
         class: "mce-floatbar",
         location: props.location,
         middlewares: props.middlewares,
-        offset: unref(selection)[0] && unref(isFrame)(unref(selection)[0]) ? 32 : 8,
+        offset: offset2.value,
         target: props.target,
         attach: false,
         "model-value": true
@@ -7294,7 +7309,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           unref(selection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["location", "middlewares", "offset", "target"]);
+      }, 8, ["style", "location", "middlewares", "offset", "target"]);
     };
   }
 });
@@ -7312,7 +7327,7 @@ const _hoisted_8$1 = {
   key: 0,
   class: "mce-transformable__tip"
 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "Transformable",
   props: {
     tag: { default: "div" },
@@ -7450,12 +7465,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           y: center.y - item.y > 0 ? 1 : -1
         };
         const offset2 = minSize * 0.1;
+        const ws = (borderRadius + offset2) / (width / 2 + offset2);
+        const hs = (borderRadius + offset2) / (height / 2 + offset2);
         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)
+          x: item.x + sign.x * width / 2 * ws,
+          y: item.y + sign.y * height / 2 * hs
         };
       }) : [];
       let handles;
@@ -7596,11 +7613,10 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           }
         } else if (isBorderRadius) {
           const offset2 = rotatePoint(rotatedOffset, { x: 0, y: 0 }, -rotate);
-          const _offset = Math.abs(offset2.x) < Math.abs(offset2.y) ? -sign.x * offset2.x : -sign.y * offset2.y * aspectRatio;
-          updated.borderRadius = Math.min(
-            Math.max(0, borderRadius + _offset),
-            Math.min(width / 2, height / 2)
-          );
+          const dx = -sign.x * offset2.x;
+          const dy = -sign.y * offset2.y;
+          const _offset = Math.abs(dx) < Math.abs(dy) ? dy : dx;
+          updated.borderRadius = borderRadius + _offset;
         } else if (isHorizontalVertical) {
           const currentPoint = rotatePoint(rotatedCurrentPoint, centerPoint, -rotate);
           const newCurrentPoint = isHorizontal ? { x: currentPoint.x, y: startPoint.y } : { x: startPoint.x, y: currentPoint.y };
@@ -7628,7 +7644,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           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;
+            const dx = sign.x * offset2.x;
+            const dy = sign.y * offset2.y * aspectRatio;
+            const _offset = Math.abs(dx) < Math.abs(dy) ? dx : dy;
             newRotatedCurrentPoint = rotatePoint(
               {
                 x: startPoint.x + sign.x * _offset,
@@ -7655,6 +7673,12 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         if ("width" in updated && updated.width <= 0 || "height" in updated && updated.height <= 0) {
           return;
         }
+        if (updated.borderRadius ?? borderRadius) {
+          updated.borderRadius = Math.min(
+            Math.max(0, updated.borderRadius ?? borderRadius),
+            Math.min((updated.width ?? width) / 2, (updated.height ?? height) / 2)
+          );
+        }
         const oldValue = { ...model.value };
         const newValue = { ...model.value, ...updated };
         model.value = newValue;
@@ -7681,11 +7705,12 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       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")
+      if (type === "move") {
         return "move";
+      }
       const create = cursors[type];
       if (!create) {
-        return "default";
+        return void 0;
       }
       return `url("data:image/svg+xml,${create(model.value.rotate ?? 0)}") 16 16, pointer`;
     }
@@ -7872,7 +7897,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$i = { class: "mce-cropper" };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "Cropper",
   props: /* @__PURE__ */ mergeModels({
     image: {},
@@ -8020,7 +8045,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             ref: canvasRef
           }, null, 512)
         ], 4),
-        createVNode(_sfc_main$w, {
+        createVNode(_sfc_main$v, {
           modelValue: sourceTransform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sourceTransform.value = $event),
           class: "mce-cropper__transformable",
@@ -8043,7 +8068,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "ForegroundCropper",
   setup(__props) {
     const {
@@ -8053,7 +8078,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     } = useEditor();
     const element = computed(() => elementSelection.value[0]);
     return (_ctx, _cache) => {
-      return unref(state) === "cropping" && element.value?.foreground.isValid() ? (openBlock(), createBlock(_sfc_main$v, {
+      return unref(state) === "cropping" && element.value?.foreground.isValid() ? (openBlock(), createBlock(_sfc_main$u, {
         key: 0,
         modelValue: element.value.foreground.cropRect,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => element.value.foreground.cropRect = $event),
@@ -8066,7 +8091,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "Frame",
   props: {
     "modelValue": { required: true },
@@ -8077,7 +8102,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     const frame = useModel(__props, "modelValue");
     const input = useTemplateRef("inputTpl");
     const {
-      getObbInDrawboard,
+      getObb,
       hoverElement,
       selection,
       state,
@@ -8102,9 +8127,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
-        style: normalizeStyle(unref(boundingBoxToStyle)(unref(getObbInDrawboard)(frame.value))),
+        style: normalizeStyle(unref(boundingBoxToStyle)(unref(getObb)(frame.value, "drawboard"))),
         class: normalizeClass(["mce-frame", [
-          unref(config).frameOutline && "mce-frame--outline"
+          unref(config).frameOutline && "mce-frame--outline",
+          unref(hoverElement)?.equal(frame.value) && "mce-frame--hover",
+          unref(selection).some((v) => v.equal(frame.value)) && "mce-frame--selected"
         ]])
       }, [
         withDirectives(createElementVNode("div", {
@@ -8132,7 +8159,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "Frames",
   setup(__props) {
     const {
@@ -8140,7 +8167,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
-        return openBlock(), createBlock(_sfc_main$t, {
+        return openBlock(), createBlock(_sfc_main$s, {
           key,
           "model-value": frame
         }, null, 8, ["model-value"]);
@@ -8148,7 +8175,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "GoBackSelectedArea",
   setup(__props) {
     const {
@@ -8170,22 +8197,23 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         class: "mce-back-selected-aera",
         onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
       }, [
-        createVNode(_sfc_main$C, { icon: "$gps" }),
+        createVNode(_sfc_main$B, { icon: "$gps" }),
         createElementVNode("span", null, toDisplayString(unref(t)("goBackSelectedArea")), 1)
       ])) : createCommentVNode("", true);
     };
   }
 });
 const _hoisted_1$h = ["data-name"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "Hover",
   setup(__props) {
     const {
       selection,
       hoverElement,
-      getObbInDrawboard
+      getObb,
+      camera
     } = useEditor();
-    const hoverElementObb = computed(() => getObbInDrawboard(hoverElement.value));
+    const hoverElementObb = computed(() => getObb(hoverElement.value, "drawboard"));
     return (_ctx, _cache) => {
       return unref(hoverElement) && !unref(hoverElement).equal(unref(selection)[0]) ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -8193,6 +8221,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         "data-name": unref(hoverElement).name,
         style: normalizeStyle({
           borderColor: "currentcolor",
+          borderRadius: `${(unref(hoverElement).style.borderRadius ?? 0) * unref(camera).zoom.x}px`,
           ...unref(boundingBoxToStyle)(hoverElementObb.value)
         })
       }, null, 12, _hoisted_1$h)) : createCommentVNode("", true);
@@ -8200,7 +8229,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$g = { class: "mce-btn" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "Btn",
   setup(__props) {
     return (_ctx, _cache) => {
@@ -8212,7 +8241,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$f = { class: "mce-layer__name" };
 const _hoisted_2$7 = { class: "mce-layer__action" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
     inheritAttrs: false
@@ -8359,7 +8388,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       editing.value = true;
       editValue.value = props.node.name;
       nextTick().then(() => {
-        inputDom.value?.focus();
+        const dom2 = inputDom.value;
+        if (dom2) {
+          dom2.focus();
+          dom2.select();
+        }
       });
     }
     function onMouseenter() {
@@ -8381,7 +8414,6 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }
     }
     function onInputBlur() {
-      console.log("onInputBlur");
       editing.value = false;
       if (editValue.value) {
         props.node.name = editValue.value;
@@ -8414,7 +8446,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             class: "mce-layer__expand",
             onClick: onClickExpand
           }, [
-            props.node.children.length ? (openBlock(), createBlock(_sfc_main$C, {
+            props.node.children.length ? (openBlock(), createBlock(_sfc_main$B, {
               key: 0,
               icon: "$arrowRight"
             })) : createCommentVNode("", true)
@@ -8428,7 +8460,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               class: "mce-layer__thumbnail",
               onDblclick: onDblclickThumbnail
             }, [
-              createVNode(_sfc_main$C, { icon: thumbnailIcon.value }, null, 8, ["icon"])
+              createVNode(_sfc_main$B, { icon: thumbnailIcon.value }, null, 8, ["icon"])
             ], 32),
             createElementVNode("div", _hoisted_1$f, [
               withDirectives(createElementVNode("input", {
@@ -8455,31 +8487,31 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 }]),
                 onClick: _cache[1] || (_cache[1] = ($event) => unref(setLock)(props.node, !unref(isLock)(props.node)))
               }, [
-                createVNode(_sfc_main$C, {
+                createVNode(_sfc_main$B, {
                   icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
                 }, null, 8, ["icon"])
               ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createVNode(_sfc_main$p, {
+                createVNode(_sfc_main$o, {
                   class: normalizeClass({
                     "mce-btn--hide": !hovering.value && !unref(isLock)(props.node)
                   }),
                   onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$C, {
+                    createVNode(_sfc_main$B, {
                       icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
                     }, null, 8, ["icon"])
                   ]),
                   _: 1
                 }, 8, ["class"]),
-                createVNode(_sfc_main$p, {
+                createVNode(_sfc_main$o, {
                   class: normalizeClass({
                     "mce-btn--hide": !hovering.value && unref(isVisible)(props.node)
                   }),
                   onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$C, {
+                    createVNode(_sfc_main$B, {
                       icon: unref(isVisible)(props.node) ? "$visible" : "$unvisible"
                     }, null, 8, ["icon"])
                   ]),
@@ -8503,7 +8535,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$e = { class: "mce-layers" };
 const _hoisted_2$6 = { class: "mce-layers__wrapper" };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "Layers",
   setup(__props) {
     const {
@@ -8553,7 +8585,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", _hoisted_2$6, [
-          createVNode(_sfc_main$o, {
+          createVNode(_sfc_main$n, {
             root: true,
             node: unref(root),
             opened: true
@@ -8570,7 +8602,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$m = {};
+const _sfc_main$l = {};
 const _hoisted_1$d = {
   class: "mce-made-with",
   href: "https://github.com/qq15725/mce",
@@ -8582,8 +8614,8 @@ function _sfc_render$1(_ctx, _cache) {
     createElementVNode("div", null, "MCE", -1)
   ])]);
 }
-const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$1]]);
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$1]]);
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "Tooltip",
   props: /* @__PURE__ */ mergeModels({
     ...makeMceOverlayProps({
@@ -8606,7 +8638,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$B, {
+      return openBlock(), createBlock(_sfc_main$A, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -8635,7 +8667,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
 const _hoisted_1$c = ["width", "height"];
 const _hoisted_2$5 = ["onDblclick", "onMousedown", "onMousemove"];
 const _hoisted_3$5 = { style: { "font-size": "12px", "text-wrap": "nowrap" } };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -8915,7 +8947,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             onMouseleave: onLeave
           }, null, 46, _hoisted_2$5);
         }), 128)),
-        createVNode(_sfc_main$l, {
+        createVNode(_sfc_main$k, {
           "model-value": !!tipText.value,
           target: tipPos.value,
           offset: 24
@@ -8930,7 +8962,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$b = { class: "mce-rulers" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -8938,25 +8970,23 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const {
       camera,
-      getAabbInDrawboard,
-      selection
+      selectionAabbInDrawboard
     } = useEditor();
-    const activeAabb = computed(() => getAabbInDrawboard(selection.value));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createVNode(_sfc_main$k, {
+        createVNode(_sfc_main$j, {
           refline: "",
           zoom: unref(camera).zoom.x,
           position: unref(camera).position.x,
-          selected: activeAabb.value,
+          selected: unref(selectionAabbInDrawboard),
           axis: "",
           size: 16
         }, null, 8, ["zoom", "position", "selected"]),
-        createVNode(_sfc_main$k, {
+        createVNode(_sfc_main$j, {
           refline: "",
           zoom: unref(camera).zoom.y,
           position: unref(camera).position.y,
-          selected: activeAabb.value,
+          selected: unref(selectionAabbInDrawboard),
           axis: "",
           vertical: "",
           size: 16
@@ -8970,7 +9000,7 @@ const _hoisted_1$a = {
   ref: "trackTplRef",
   class: "mce-scrollbar__track"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "Scrollbar",
   props: /* @__PURE__ */ mergeModels({
     length: {},
@@ -9077,7 +9107,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -9095,13 +9125,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$i, mergeProps(props, {
+        createVNode(_sfc_main$h, mergeProps(props, {
           modelValue: unref(camera).position.y,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(camera).position.y = $event),
           vertical: "",
           length: unref(viewAabb).height * unref(camera).zoom.y
         }), null, 16, ["modelValue", "length"]),
-        createVNode(_sfc_main$i, mergeProps(props, {
+        createVNode(_sfc_main$h, mergeProps(props, {
           modelValue: unref(camera).position.x,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(camera).position.x = $event),
           length: unref(viewAabb).width * unref(camera).zoom.x
@@ -9110,7 +9140,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -9122,12 +9152,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const {
+      isElement,
       state,
       resizeElement,
       elementSelection,
+      selectionObb,
+      selectionObbInDrawboard,
       camera,
       obbToFit,
-      getObbInDrawboard,
       getObb,
       registerCommand,
       unregisterCommand,
@@ -9148,8 +9180,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
       const obbs = [];
       elementSelection.value[0]?.findAncestor((ancestor) => {
-        if (ancestor instanceof Element2D) {
-          obbs.push(getObbInDrawboard(ancestor));
+        if (isElement(ancestor)) {
+          obbs.push(getObb(ancestor, "drawboard"));
         }
         return false;
       });
@@ -9161,15 +9193,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
       return elementSelection.value.map((el) => {
         return {
-          name: el.name,
-          box: getObbInDrawboard(el)
+          element: el,
+          box: getObb(el, "drawboard")
         };
       });
     });
     const _selectionTransform = computed(() => {
       const zoom = camera.value.zoom;
       return {
-        ...getObbInDrawboard(elementSelection.value),
+        ...selectionObbInDrawboard.value,
         borderRadius: (elementSelection.value[0]?.style.borderRadius ?? 0) * zoom.x
       };
     });
@@ -9210,7 +9242,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           Object.assign(style, newStyle);
           element.updateGlobalTransform();
           element.findAncestor((ancestor) => {
-            if (ancestor instanceof Element2D && !isFrame(ancestor)) {
+            if (isElement(ancestor) && !isFrame(ancestor)) {
               obbToFit(ancestor);
             }
             return false;
@@ -9238,7 +9270,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       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);
+      const obb = elementSelection.value.length === 1 ? elementSelection.value[0].style : selectionObb.value;
       return `${Number(obb.width.toFixed(2))} × ${Number(obb.height.toFixed(2))}`;
     }
     __expose({
@@ -9249,7 +9281,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(parentObbs.value, (obb, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-parent-element-obb",
+            class: "mce-selector__parent-element",
             style: normalizeStyle({
               borderColor: "currentColor",
               ...unref(boundingBoxToStyle)(obb)
@@ -9258,7 +9290,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         }), 128)),
         unref(state) === "selecting" ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: "mce-selected-area",
+          class: "mce-selector__selected-area",
           style: normalizeStyle({
             borderColor: "currentcolor",
             ...unref(boundingBoxToStyle)(props.selectedArea)
@@ -9267,14 +9299,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(selectionObbs.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-element-obb",
+            class: "mce-selector__element",
             style: normalizeStyle({
               borderColor: "currentcolor",
+              borderRadius: `${(item.element.style.borderRadius ?? 0) * unref(camera).zoom.x}px`,
               ...unref(boundingBoxToStyle)(item.box)
             })
           }, null, 4);
         }), 128)),
-        selectionTransform.value.width && selectionTransform.value.height ? (openBlock(), createBlock(_sfc_main$w, {
+        selectionTransform.value.width && selectionTransform.value.height ? (openBlock(), createBlock(_sfc_main$v, {
           key: 1,
           ref: "transformableRef",
           modelValue: selectionTransform.value,
@@ -9285,7 +9318,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           "adjustable-border-radius": adjustableBorderRadius.value,
           "resize-strategy": props.resizeStrategy,
           "handle-shape": unref(config).handleShape,
-          class: "mce-selection-obb",
+          class: "mce-selector__transform",
           "border-style": unref(elementSelection).length > 1 ? "dashed" : "solid",
           "tip-format": tipFormat,
           onMove: _cache[1] || (_cache[1] = () => !unref(state) && (state.value = "transforming")),
@@ -9301,7 +9334,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         ]), 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)(selectionTransform.value)])
+          class: "mce-selector__slot",
+          style: normalizeStyle(unref(boundingBoxToStyle)(selectionTransform.value))
         }, [
           renderSlot(_ctx.$slots, "default", { box: selectionTransform.value })
         ], 4)) : createCommentVNode("", true)
@@ -9309,15 +9343,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "Setup",
-  setup(__props) {
-    useEditor().setup();
-    return (_ctx, _cache) => {
-      return null;
-    };
-  }
-});
 const _hoisted_1$9 = {
   key: 0,
   class: "mce-float-panel__title"
@@ -9343,7 +9368,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       ...props.defaultTransform
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$w, {
+      return openBlock(), createBlock(_sfc_main$v, {
         modelValue: transform.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => transform.value = $event),
         class: "mce-float-panel",
@@ -9355,11 +9380,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           createElementVNode("div", mergeProps({ class: "mce-float-panel__card" }, slotProps), [
             __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
               createElementVNode("div", null, toDisplayString(__props.title), 1),
-              createVNode(_sfc_main$p, {
+              createVNode(_sfc_main$o, {
                 onClick: _cache[0] || (_cache[0] = ($event) => isActive.value = false)
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$C, { icon: "$close" })
+                  createVNode(_sfc_main$B, { icon: "$close" })
                 ]),
                 _: 1
               })
@@ -9381,6 +9406,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {
+    class: [String, Array, Object],
+    style: {
+      type: [String, Array, Object],
+      default: null
+    },
     ...makeLayoutProps()
   },
   setup(__props, { expose: __expose }) {
@@ -9399,8 +9429,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref: unref(layoutRef),
-        class: normalizeClass([unref(layoutClasses)]),
-        style: normalizeStyle([unref(layoutStyles)])
+        class: normalizeClass(normalizeClass([unref(layoutClasses), props.class])),
+        style: normalizeStyle(normalizeStyle([unref(layoutStyles), props.style]))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 6);
@@ -9410,6 +9440,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "LayoutItem",
   props: {
+    class: [String, Array, Object],
+    style: {
+      type: [String, Array, Object],
+      default: null
+    },
     position: {
       type: String,
       required: true
@@ -9432,15 +9467,16 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       position: toRef(() => props.position),
       elementSize: toRef(() => props.size),
       layoutSize: toRef(() => props.size),
-      active: toRef(() => props.modelValue),
-      absolute: toRef(() => props.absolute)
+      active: toRef(() => props.modelValue)
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["mce-layout-item", [
-          `mce-layout-item--${props.position}`
-        ]]),
-        style: normalizeStyle([unref(layoutItemStyles)])
+        class: normalizeClass(normalizeClass([
+          "mce-layout-item",
+          `mce-layout-item--${props.position}`,
+          props.class
+        ])),
+        style: normalizeStyle(normalizeStyle([unref(layoutItemStyles), props.style]))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 6);
@@ -9556,7 +9592,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", _hoisted_8, [
-              createVNode(_sfc_main$C, { icon: "$mouseRightClick" })
+              createVNode(_sfc_main$B, { icon: "$mouseRightClick" })
             ]),
             _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
             createElementVNode("div", _hoisted_9, [
@@ -9570,7 +9606,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(unref(t)(unref(state))), 1)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
             createElementVNode("div", _hoisted_14, [
-              createVNode(_sfc_main$C, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$B, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
             ]),
             _cache[4] || (_cache[4] = createElementVNode("span", null, " + ", -1)),
@@ -9580,7 +9616,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             ]),
             _cache[5] || (_cache[5] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_17, [
-              createVNode(_sfc_main$C, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$B, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
             ]),
             _cache[6] || (_cache[6] = createElementVNode("span", null, " + ", -1)),
@@ -9590,7 +9626,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             ]),
             _cache[7] || (_cache[7] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_20, [
-              createVNode(_sfc_main$C, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$B, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
             ])
           ], 64))
@@ -9667,6 +9703,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       await nextTick();
       if (editor.pointerDown(e)) {
         editor.selectAll();
+        editor._updateSelectionByDom();
         return true;
       }
       return false;
@@ -9913,7 +9950,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             class: "mce-timeline__play",
             onClick: toggle
           }, [
-            createVNode(_sfc_main$C, {
+            createVNode(_sfc_main$B, {
               icon: paused.value ? "$play" : "$pause"
             }, null, 8, ["icon"])
           ])
@@ -9942,7 +9979,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", _hoisted_5, [
               createElementVNode("div", _hoisted_6, [
-                createVNode(_sfc_main$k, {
+                createVNode(_sfc_main$j, {
                   ref: "rulerTpl",
                   zoom: 1 / unref(msPerPx) * fps.value,
                   unit: 100,
@@ -10016,12 +10053,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const props = __props;
     let editor;
     if (props.editor) {
-      editor = provideEditor(props.editor);
+      editor = props.editor;
+      provide(Editor.injectionKey, editor);
     } else {
       editor = useEditor();
     }
+    editor.setup();
     provide(IconsSymbol, createIcons());
     const {
+      isElement,
       showMadeWith,
       config,
       drawboardDom,
@@ -10031,12 +10071,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       hoverElement,
       state,
       setCursor,
-      isFrame,
       selectArea,
       exec,
       isLock,
+      selectionAabbInDrawboard,
       elementSelection,
-      getAabbInDrawboard,
       drawboardAabb,
       drawboardPointer,
       screenCenterOffset,
@@ -10082,7 +10121,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       let hovered;
       if (elementSelection.value.length > 1 && isPointInsideAabb(
         { x: event.clientX, y: event.clientY },
-        getAabbInDrawboard(elementSelection.value)
+        selectionAabbInDrawboard.value
       )) {
         cursor = "move";
       } else {
@@ -10092,7 +10131,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           event,
           editor
         });
-        if (result && !(result instanceof Element2D)) {
+        if (result && !isElement(result)) {
           hovered = result.element;
           cursor = result.cursor;
         } else {
@@ -10117,7 +10156,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       const inSelection = isPointInsideAabb({
         x: start.x + -drawboardAabb.value.left,
         y: start.y + -drawboardAabb.value.top
-      }, getAabbInDrawboard(elementSelection.value));
+      }, selectionAabbInDrawboard.value);
       if (downEvent.button === 2) {
         if (!inSelection) {
           const result = props.activeStrategy({
@@ -10125,7 +10164,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             event: downEvent,
             editor
           });
-          if (result && !(result instanceof Element2D)) {
+          if (result && !isElement(result)) {
             selected = result.element ? [result.element] : [];
           } else {
             selected = result ? [result] : [];
@@ -10140,7 +10179,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           event,
           editor
         });
-        if (result && !(result instanceof Element2D)) {
+        if (result && !isElement(result)) {
           selected = result.element ? [result.element] : [];
         } else {
           selected = result ? [result] : [];
@@ -10167,7 +10206,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           editor
         });
         let _element;
-        if (result && !(result instanceof Element2D)) {
+        if (result && !isElement(result)) {
           _element = result.element;
           ctxState = result.state;
         } else {
@@ -10193,7 +10232,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             exec("startTransform", downEvent);
           }
         } else {
-          if (element && !isFrame(element)) {
+          if (element) {
             if (canStartDrag()) {
               dragging = true;
               onDrag(moveEvent);
@@ -10209,7 +10248,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       function onMove(moveEvent) {
         current = { x: moveEvent.clientX, y: moveEvent.clientY };
         if (!inSelection) {
-          if (!element || isFrame(element)) {
+          if (!element) {
             onSelectArea();
           }
         }
@@ -10281,10 +10320,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       }
     }
+    const slotProps = {
+      editor
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$d, { class: "mce-editor" }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$f),
           createVNode(_sfc_main$b, null, {
             default: withCtx(() => [
               createElementVNode("div", {
@@ -10299,51 +10340,52 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               }, [
                 createElementVNode("canvas", _hoisted_2, null, 512),
                 createVNode(_sfc_main$8, { ref: "textEditorTpl" }, null, 512),
-                createVNode(_sfc_main$D),
-                createVNode(_sfc_main$q),
-                createVNode(_sfc_main$s),
-                createVNode(_sfc_main$y),
-                createVNode(_sfc_main$g, {
+                createVNode(_sfc_main$C),
+                createVNode(_sfc_main$p),
+                createVNode(_sfc_main$r),
+                createVNode(_sfc_main$x),
+                unref(config).ruler ? (openBlock(), createBlock(_sfc_main$i, { key: 0 })) : createCommentVNode("", true),
+                unref(config).scrollbar ? (openBlock(), createBlock(_sfc_main$g, { key: 1 })) : createCommentVNode("", true),
+                unref(showMadeWith) ? (openBlock(), createBlock(MadeWith, { key: 2 })) : createCommentVNode("", true),
+                createVNode(_sfc_main$f, {
                   ref: "selectorTpl",
                   "selected-area": selectedArea.value,
                   "resize-strategy": resizeStrategy.value
                 }, {
                   transformable: withCtx(({ box }) => [
-                    renderSlot(_ctx.$slots, "transformer", { box })
+                    renderSlot(_ctx.$slots, "transformer", mergeProps({ box }, slotProps))
                   ]),
                   default: withCtx(({ box }) => [
-                    createVNode(_sfc_main$u),
-                    renderSlot(_ctx.$slots, "selector", { box })
+                    createVNode(_sfc_main$t),
+                    renderSlot(_ctx.$slots, "selector", mergeProps({ box }, slotProps))
                   ]),
                   _: 3
                 }, 8, ["selected-area", "resize-strategy"]),
-                unref(config).scrollbar ? (openBlock(), createBlock(_sfc_main$h, { key: 0 })) : createCommentVNode("", true),
-                _ctx.$slots.floatbar || _ctx.$slots["floatbar-top"] ? (openBlock(), createBlock(_sfc_main$x, {
-                  key: 1,
+                _ctx.$slots.floatbar || _ctx.$slots["floatbar-top"] ? (openBlock(), createBlock(_sfc_main$w, {
+                  key: 3,
                   location: "top-start",
                   target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el
                 }, {
                   default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "floatbar"),
-                    renderSlot(_ctx.$slots, "floatbar-top")
+                    renderSlot(_ctx.$slots, "floatbar", normalizeProps(guardReactiveProps(slotProps))),
+                    renderSlot(_ctx.$slots, "floatbar-top", normalizeProps(guardReactiveProps(slotProps)))
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                _ctx.$slots["floatbar-bottom"] ? (openBlock(), createBlock(_sfc_main$x, {
-                  key: 2,
+                _ctx.$slots["floatbar-bottom"] ? (openBlock(), createBlock(_sfc_main$w, {
+                  key: 4,
                   location: "bottom-start",
                   target: selector.value?.transformable?.$el
                 }, {
                   default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "floatbar-bottom")
+                    renderSlot(_ctx.$slots, "floatbar-bottom", normalizeProps(guardReactiveProps(slotProps)))
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                createVNode(_sfc_main$z),
-                createVNode(_sfc_main$r),
-                unref(config).ruler ? (openBlock(), createBlock(_sfc_main$j, { key: 3 })) : createCommentVNode("", true),
+                createVNode(_sfc_main$y),
+                createVNode(_sfc_main$q),
                 unref(config).layers ? (openBlock(), createBlock(_sfc_main$e, {
-                  key: 4,
+                  key: 5,
                   modelValue: unref(config).layers,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(config).layers = $event),
                   title: unref(t)("layers"),
@@ -10355,18 +10397,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   }
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$n)
+                    createVNode(_sfc_main$m)
                   ]),
                   _: 1
                 }, 8, ["modelValue", "title", "default-transform"])) : createCommentVNode("", true),
-                unref(showMadeWith) ? (openBlock(), createBlock(MadeWith, { key: 5 })) : createCommentVNode("", true),
                 createVNode(Toolbelt),
-                renderSlot(_ctx.$slots, "drawboard")
+                renderSlot(_ctx.$slots, "drawboard", normalizeProps(guardReactiveProps(slotProps)))
               ], 40, _hoisted_1)
             ]),
             _: 3
           }),
-          renderSlot(_ctx.$slots, "default"),
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps))),
           createVNode(_sfc_main$c, {
             modelValue: unref(config).statusbar,
             "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(config).statusbar = $event),
@@ -10423,7 +10464,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$B, {
+      return openBlock(), createBlock(_sfc_main$A, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -10447,11 +10488,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$v as Cropper,
+  _sfc_main$u as Cropper,
   _sfc_main as Dialog,
   Doc,
   Editor,
-  _sfc_main$n as EditorLayers,
+  _sfc_main$m as EditorLayers,
   _sfc_main$1 as EditorLayout,
   _sfc_main$c as EditorLayoutItem,
   Toolbelt as EditorToolbelt,
@@ -10464,12 +10505,12 @@ export {
   MceMenuSymbol,
   MceOverlaySymbol,
   MceSvgIcon,
-  _sfc_main$A as Menu,
+  _sfc_main$z as Menu,
   Model,
-  _sfc_main$k as Ruler,
+  _sfc_main$j as Ruler,
   SUPPORTS_CLIPBOARD,
-  _sfc_main$i as Scrollbar,
-  _sfc_main$w as Transformable,
+  _sfc_main$h as Scrollbar,
+  _sfc_main$v as Transformable,
   USER_AGENT,
   boundingBoxToStyle,
   consoleError,
@@ -10509,7 +10550,6 @@ export {
   mixins,
   plugins,
   propsFactory,
-  provideEditor,
   provideOverlay,
   refElement,
   templateRef,