mce 0.13.5 → 0.13.7

package/dist/index.js

@@ -1,7 +1,7 @@
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation } from "modern-canvas";
-import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, onMounted, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, readonly, toRef, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, withDirectives, vShow, vModelText, nextTick, withModifiers, h, isRef } from "vue";
-import { useFileDialog, useEventListener, isClient, useResizeObserver as useResizeObserver$1, useLocalStorage, onClickOutside, useMouse, useDebounceFn } from "@vueuse/core";
-import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent } from "modern-idoc";
+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";
 import { Fonts } from "modern-font";
 import * as Y from "yjs";
@@ -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,12 +2250,15 @@ const _3_view = defineMixin((editor) => {
 });
 const _4_0_text = defineMixin((editor) => {
   const {
-    config
+    isElement,
+    config,
+    elementSelection,
+    textSelection
   } = editor;
-  function textFontSizeToFit(element, scale) {
-    function _handle(element2) {
+  function textFontSizeToFit(element2, scale) {
+    function _handle(element3) {
       if (!scale) {
-        const chars = element2.text.base.characters;
+        const chars = element3.text.base.characters;
         let pos = 0;
         let char;
         chars.forEach((_char) => {
@@ -2284,7 +2279,7 @@ const _4_0_text = defineMixin((editor) => {
         }).join("");
         const { boundingBox } = measureText({
           style: {
-            ...element2.style.toJSON(),
+            ...element3.style.toJSON(),
             width: "auto"
           },
           content: [
@@ -2295,8 +2290,8 @@ const _4_0_text = defineMixin((editor) => {
             }
           ]
         });
-        const fontSize = (element2.style.fontSize || 12) / 2;
-        scale = (element2.style.width ?? 0) / (boundingBox.width + fontSize);
+        const fontSize = (element3.style.fontSize || 12) / 2;
+        scale = (element3.style.width ?? 0) / (boundingBox.width + fontSize);
       }
       function _scaleStyle(style) {
         if (style.fontSize)
@@ -2304,38 +2299,38 @@ const _4_0_text = defineMixin((editor) => {
         if (style.letterSpacing)
           style.letterSpacing = style.letterSpacing * scale;
       }
-      _scaleStyle(element2.style);
-      if (element2.text?.isValid?.() && Array.isArray(element2.text?.content)) {
-        element2.text.content.forEach((p) => {
+      _scaleStyle(element3.style);
+      if (element3.text?.isValid?.() && Array.isArray(element3.text?.content)) {
+        element3.text.content.forEach((p) => {
           _scaleStyle(p);
           p.fragments.forEach((f) => {
             _scaleStyle(f);
           });
         });
       }
-      element2.requestRedraw();
+      element3.requestRedraw();
     }
-    _handle(element);
-    element.findOne((descendant) => {
-      if (descendant instanceof Element2D) {
+    _handle(element2);
+    element2.findOne((descendant) => {
+      if (isElement(descendant)) {
         _handle(descendant);
       }
       return false;
     });
   }
-  function textToFit(element, typography) {
+  function textToFit(element2, typography) {
     const strategy = typography ?? config.value.typographyStrategy;
     if (strategy === "fixedWidthHeight") {
       return;
     } else if (strategy === "autoFontSize") {
-      textFontSizeToFit(element);
+      textFontSizeToFit(element2);
       return;
     }
-    function _handle(element2) {
-      if (!element2.text?.isValid?.() || typeof element2.text?.content !== "object") {
+    function _handle(element3) {
+      if (!element3.text?.isValid?.() || typeof element3.text?.content !== "object") {
         return;
       }
-      const style = element2.style.toJSON();
+      const style = element3.style.toJSON();
       switch (strategy) {
         case "autoWidth":
           style.width = "auto";
@@ -2346,25 +2341,205 @@ const _4_0_text = defineMixin((editor) => {
       }
       const { boundingBox } = measureText({
         style,
-        content: element2.text.content
+        content: element3.text.content
       });
-      if (element2.style.width !== boundingBox.width || element2.style.height !== boundingBox.height) {
-        element2.style.width = boundingBox.width;
-        element2.style.height = boundingBox.height;
-        element2.requestRedraw();
+      if (element3.style.width !== boundingBox.width || element3.style.height !== boundingBox.height) {
+        element3.style.width = boundingBox.width;
+        element3.style.height = boundingBox.height;
+        element3.requestRedraw();
       }
     }
-    _handle(element);
-    element.findOne((descendant) => {
-      if (descendant instanceof Element2D) {
+    _handle(element2);
+    element2.findOne((descendant) => {
+      if (isElement(descendant)) {
         _handle(descendant);
       }
       return false;
     });
   }
+  const element = computed(() => elementSelection.value[0]);
+  const hasSelectionRange = computed(() => {
+    return (textSelection.value?.length ?? 0) > 1 && textSelection.value[0] !== textSelection.value[1];
+  });
+  function handleSelection([start, end], cb) {
+    let flag = true;
+    element.value?.text?.content.forEach((p, pIndex, pItems) => {
+      if (!flag)
+        return;
+      p.fragments.forEach((f, fIndex, fItems) => {
+        if (!flag)
+          return;
+        const { content, ...fStyle } = f;
+        Array.from(normalizeCRLF(content)).forEach((c, cIndex, cItems) => {
+          flag = cb({
+            selected: (pIndex > start.paragraphIndex || pIndex === start.paragraphIndex && fIndex > start.fragmentIndex || pIndex === start.paragraphIndex && fIndex === start.fragmentIndex && cIndex >= start.charIndex) && (pIndex < end.paragraphIndex || pIndex === end.paragraphIndex && fIndex < end.fragmentIndex || pIndex === end.paragraphIndex && fIndex === end.fragmentIndex && (end.isLastSelected ? cIndex <= end.charIndex : cIndex < end.charIndex)),
+            p,
+            pIndex,
+            pLength: pItems.length,
+            f,
+            fIndex,
+            fStyle,
+            fLength: fItems.length,
+            c,
+            cLength: cItems.length,
+            cIndex
+          });
+        });
+      });
+    });
+  }
+  function getTextStyle(key) {
+    if (!element.value) {
+      return void 0;
+    }
+    let value = element.value.style[key];
+    const content = element.value.text.content;
+    if (hasSelectionRange.value) {
+      const selection = textSelection.value;
+      if (selection && selection[0] && selection[1]) {
+        handleSelection(selection, ({ selected, fStyle }) => {
+          if (selected && fStyle[key]) {
+            value = fStyle[key];
+            return false;
+          }
+          return true;
+        });
+      }
+    } else {
+      switch (key) {
+        case "fontSize":
+          return content?.reduce((prev, p) => {
+            return p.fragments.reduce((prev2, f) => {
+              return ~~Math.max(prev2, f[key] ?? 0);
+            }, prev);
+          }, value) ?? value;
+        default:
+          if (content.length === 1 && content[0].fragments.length === 1 && content[0].fragments[0][key]) {
+            return content[0].fragments[0][key];
+          }
+      }
+    }
+    return value;
+  }
+  function setTextStyle(key, value) {
+    if (!element.value) {
+      return;
+    }
+    let isAllSelected = false;
+    if (hasSelectionRange.value) {
+      const selection = textSelection.value;
+      if (selection && selection[0] && selection[1]) {
+        if (selection[0].isFirst && selection[1].isLast && selection[1].isLastSelected) {
+          isAllSelected = true;
+        } else {
+          const newContent = [];
+          let newParagraph = { fragments: [] };
+          let newFragment;
+          handleSelection(selection, ({ selected, fIndex, fStyle, fLength, c, cIndex, cLength }) => {
+            if (fIndex === 0 && cIndex === 0) {
+              newParagraph = { fragments: [] };
+              newFragment = void 0;
+            }
+            const style = { ...fStyle };
+            if (selected) {
+              style[key] = value;
+            }
+            if (newFragment) {
+              const { content: _, ..._style } = newFragment;
+              if (isEqualObject(style, _style)) {
+                newFragment.content += c;
+              } else {
+                newParagraph.fragments.push(newFragment);
+                newFragment = { ...style, content: c };
+              }
+            } else {
+              newFragment = { ...style, content: c };
+            }
+            if (fIndex === fLength - 1 && cIndex === cLength - 1) {
+              if (newFragment) {
+                newParagraph.fragments.push(newFragment);
+              }
+              if (newParagraph.fragments.length) {
+                newContent.push(newParagraph);
+                newParagraph = { fragments: [] };
+              }
+            }
+            return true;
+          });
+          if (newContent.length) {
+            element.value.text.content = newContent;
+          }
+        }
+      }
+    } else {
+      isAllSelected = true;
+    }
+    if (isAllSelected) {
+      const el = element.value;
+      switch (key) {
+        case "fill":
+        case "outline":
+          el.text[key] = value;
+          break;
+        default:
+          el.style[key] = value;
+          break;
+      }
+      const content = element.value.text.content;
+      content.forEach((p) => {
+        delete p[key];
+        p.fragments.forEach((f) => {
+          delete f[key];
+        });
+      });
+      el.text.content = content;
+    }
+    element.value.requestRedraw();
+    textToFit(element.value);
+  }
+  function getTextFill() {
+    if (!element.value) {
+      return void 0;
+    }
+    let fill;
+    if (hasSelectionRange.value) {
+      fill = getTextStyle("fill");
+      if (!fill) {
+        const color = getTextStyle("color");
+        fill = { color };
+      }
+    }
+    fill = fill ?? element.value.text.fill ?? { color: element.value.style.color };
+    return fill;
+  }
+  function setTextFill(value) {
+    if (!element.value) {
+      return;
+    }
+    if (hasSelectionRange.value && value?.color) {
+      setTextStyle("fill", value);
+    } else {
+      element.value.text.fill = value;
+      if (value?.color) {
+        element.value.style.color = value.color;
+      }
+      element.value.text.content.forEach((p) => {
+        delete p.fill;
+        delete p.color;
+        p.fragments.forEach((f) => {
+          delete f.fill;
+          delete f.color;
+        });
+      });
+    }
+  }
   Object.assign(editor, {
     textFontSizeToFit,
-    textToFit
+    textToFit,
+    setTextStyle,
+    getTextStyle,
+    getTextFill,
+    setTextFill
   });
   return () => {
     TextEditor.register();
@@ -2382,7 +2557,7 @@ const _4_2_element = defineMixin((editor) => {
     root,
     isFrame,
     isLock,
-    getObbInDrawboard,
+    getObb,
     config,
     getAncestorFrame,
     getAabb,
@@ -2603,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;
@@ -2878,6 +3053,7 @@ const _scroll$1 = defineMixin((editor) => {
 });
 const _snapshot = defineMixin((editor) => {
   const {
+    isElement,
     renderEngine,
     frames,
     currentFrameAabb,
@@ -2897,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 };
@@ -3101,7 +3277,6 @@ const mixins = [
   _0_config_base,
   _0_context,
   _0_font,
-  _0_helper,
   _0_locale,
   _1_frame,
   _1_hotkey,
@@ -4083,10 +4258,11 @@ function isLeftTopLine(line) {
 }
 const _auxiliary = definePlugin((editor) => {
   const {
+    isElement,
     currentFrame,
     elementSelection,
     state,
-    getObbInDrawboard,
+    getObb,
     root
   } = editor;
   function createBox(node) {
@@ -4099,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);
@@ -4128,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 }
@@ -4903,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
               })
             );
           }
@@ -5615,6 +5793,7 @@ const _scroll = definePlugin((editor) => {
 });
 const _select = definePlugin((editor) => {
   const {
+    isElement,
     selection,
     root
   } = editor;
@@ -5626,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];
     }
   }
@@ -5722,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 }
       );
@@ -5896,6 +6074,7 @@ const plugins = [
 class Editor extends Observable {
   static injectionKey = Symbol.for("EditorKey");
   debug = ref(false);
+  showMadeWith = ref(false);
   onEmit;
   plugins = /* @__PURE__ */ new Map();
   _setups = [];
@@ -5922,10 +6101,12 @@ class Editor extends Observable {
   _setupOptions(options) {
     const {
       debug = false,
+      showMadeWith = false,
       plugins: plugins$1 = [],
       configCacheInLocal
     } = options;
     this.debug.value = debug;
+    this.showMadeWith.value = showMadeWith;
     this.config = configCacheInLocal ? useLocalStorage("config", () => ({})) : ref({});
     this._setups = [];
     this._useMixins(
@@ -6026,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() {
@@ -6231,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;
@@ -6258,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;
@@ -6268,13 +6452,13 @@ const defaultHoverStrategy = (context) => {
   }
   return element.findAncestor(cb);
 };
-const _hoisted_1$l = { class: "mce-auxiliary" };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _hoisted_1$n = { class: "mce-auxiliary" };
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "Auxiliary",
   setup(__props) {
     const { auxiliaryLines } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(auxiliaryLines), (item, key) => {
           return openBlock(), createElementBlock("div", {
             key,
@@ -6628,7 +6812,7 @@ function createLayout(props) {
   };
 }
 const MceMenuSymbol = Symbol.for("MceMenuSymbol");
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     disabled: Boolean,
@@ -6653,7 +6837,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6766,7 +6950,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = ["onMouseenter"];
+const _hoisted_1$m = ["onMouseenter"];
 const _hoisted_2$a = ["onClick"];
 const _hoisted_3$7 = {
   key: 0,
@@ -6777,7 +6961,7 @@ const _hoisted_5$3 = {
   key: 1,
   class: "mce-list-item__append"
 };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceMenu"
   },
@@ -6856,7 +7040,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_MceMenu = resolveComponent("MceMenu");
-      return openBlock(), createBlock(_sfc_main$y, {
+      return openBlock(), createBlock(_sfc_main$A, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isActive.value = $event),
@@ -6900,7 +7084,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
                     hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
-                      item.checked ? (openBlock(), createBlock(_sfc_main$z, {
+                      item.checked ? (openBlock(), createBlock(_sfc_main$B, {
                         key: 0,
                         icon: "$check"
                       })) : createCommentVNode("", true)
@@ -6911,10 +7095,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                       ])
                     ]),
                     item.children?.length ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
-                      createVNode(_sfc_main$z, { icon: "$arrowRight" })
+                      createVNode(_sfc_main$B, { icon: "$arrowRight" })
                     ])) : createCommentVNode("", true)
                   ], 10, _hoisted_2$a)
-                ], 40, _hoisted_1$k))
+                ], 40, _hoisted_1$m))
               ], 64);
             }), 128)),
             opened.value > -1 && __props.items?.[opened.value]?.children?.length ? (openBlock(), createBlock(_component_MceMenu, {
@@ -6944,12 +7128,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = { class: "mce-context-menu__title" };
+const _hoisted_1$l = { class: "mce-context-menu__title" };
 const _hoisted_2$9 = {
   key: 0,
   class: "mce-context-menu__kbd"
 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "ContextMenu",
   props: {
     "modelValue": { type: Boolean },
@@ -7007,7 +7191,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$x, {
+      return openBlock(), createBlock(_sfc_main$z, {
         ref: "menuTplRef",
         modelValue: model.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
@@ -7022,7 +7206,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         "onClick:item": onClickItem
       }, {
         title: withCtx(({ item }) => [
-          createElementVNode("span", _hoisted_1$j, toDisplayString(unref(t)(item.key)), 1),
+          createElementVNode("span", _hoisted_1$l, toDisplayString(unref(t)(item.key)), 1),
           unref(hotkeys).has(item.key) ? (openBlock(), createElementBlock("span", _hoisted_2$9, toDisplayString(unref(getKbd)(item.key)), 1)) : createCommentVNode("", true)
         ]),
         _: 1
@@ -7030,11 +7214,11 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = {
+const _hoisted_1$k = {
   key: 0,
   class: "mce-drawing__content"
 };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "Drawing",
   setup(__props) {
     const {
@@ -7064,16 +7248,15 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         }),
         onMousedown
       }, [
-        unref(stateContext)?.content ? (openBlock(), createElementBlock("div", _hoisted_1$i, toDisplayString(unref(t)(unref(stateContext).content)), 1)) : createCommentVNode("", true)
+        unref(stateContext)?.content ? (openBlock(), createElementBlock("div", _hoisted_1$k, toDisplayString(unref(t)(unref(stateContext).content)), 1)) : createCommentVNode("", true)
       ], 36)) : createCommentVNode("", true);
     };
   }
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "Floatbar",
   props: {
     ...makeMceOverlayProps({
-      location: "top-start",
       middlewares: ["offset", "shift"],
       offset: 8
     })
@@ -7081,27 +7264,46 @@ const _sfc_main$u = /* @__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$y, {
+      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
@@ -7110,1608 +7312,1838 @@ const _sfc_main$u = /* @__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"]);
     };
   }
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
-  __name: "Frame",
+const _hoisted_1$j = { class: "mce-transformable__svg" };
+const _hoisted_2$8 = ["rx", "ry"];
+const _hoisted_3$6 = ["x", "y", "width", "height", "aria-label"];
+const _hoisted_4$3 = ["cx", "cy", "r", "aria-label"];
+const _hoisted_5$2 = { "pointer-events": "all" };
+const _hoisted_6$2 = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"];
+const _hoisted_7$2 = {
+  "pointer-events": "all",
+  class: "mce-transformable__svg-slot"
+};
+const _hoisted_8$1 = {
+  key: 0,
+  class: "mce-transformable__tip"
+};
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  __name: "Transformable",
   props: {
-    "modelValue": { required: true },
-    "modelModifiers": {}
-  },
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const frame = useModel(__props, "modelValue");
-    const input = useTemplateRef("inputTpl");
-    const {
-      getObbInDrawboard,
-      hoverElement,
-      selection,
-      state,
-      config,
-      exec
-    } = useEditor();
-    const editing = ref(false);
-    async function onDblclick() {
-      editing.value = true;
-      await nextTick();
-      if (input.value) {
-        input.value.focus();
-        input.value.select();
-      }
-    }
-    async function onPointerdown(ev) {
-      if (!editing.value) {
-        selection.value = [frame.value];
-        await nextTick();
-        exec("startTransform", ev);
-      }
-    }
-    return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", {
-        style: normalizeStyle(unref(boundingBoxToStyle)(unref(getObbInDrawboard)(frame.value))),
-        class: normalizeClass(["mce-frame", [
-          unref(config).frameOutline && "mce-frame--outline"
-        ]])
-      }, [
-        withDirectives(createElementVNode("div", {
-          class: "mce-frame__name",
-          onDblclick,
-          onPointerdown,
-          onPointerenter: _cache[2] || (_cache[2] = ($event) => !unref(state) && (hoverElement.value = frame.value)),
-          onPointerleave: _cache[3] || (_cache[3] = ($event) => !unref(state) && (hoverElement.value = void 0))
-        }, [
-          createElementVNode("div", null, toDisplayString(frame.value.name), 1),
-          withDirectives(createElementVNode("input", {
-            ref: "inputTpl",
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => frame.value.name = $event),
-            onBlur: _cache[1] || (_cache[1] = ($event) => editing.value = false)
-          }, null, 544), [
-            [vShow, editing.value],
-            [vModelText, frame.value.name]
-          ])
-        ], 544), [
-          [vShow, unref(config).viewMode === "edgeless"]
-        ])
-      ], 6)), [
-        [vShow, frame.value.visible]
-      ]);
-    };
-  }
-});
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  __name: "Frames",
-  setup(__props) {
-    const {
-      frames
-    } = useEditor();
-    return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
-        return openBlock(), createBlock(_sfc_main$t, {
-          key,
-          "model-value": frame
-        }, null, 8, ["model-value"]);
-      }), 128);
-    };
-  }
-});
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  __name: "GoBackSelectedArea",
-  setup(__props) {
-    const {
-      selectionAabb,
-      drawboardAabb,
-      aabbToDrawboardAabb,
-      t,
-      exec
-    } = useEditor();
-    const isActive = computed(() => {
-      return selectionAabb.value.width && selectionAabb.value.height && !isOverlappingAabb(
-        drawboardAabb.value,
-        aabbToDrawboardAabb(selectionAabb.value)
-      );
-    });
-    return (_ctx, _cache) => {
-      return isActive.value ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: "mce-back-selected-aera",
-        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
-      }, [
-        createVNode(_sfc_main$z, { icon: "$gps" }),
-        createElementVNode("span", null, toDisplayString(unref(t)("goBackSelectedArea")), 1)
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
-const _hoisted_1$h = ["data-name"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  __name: "Hover",
-  setup(__props) {
-    const {
-      selection,
-      hoverElement,
-      getObbInDrawboard
-    } = useEditor();
-    const hoverElementObb = computed(() => getObbInDrawboard(hoverElement.value));
-    return (_ctx, _cache) => {
-      return unref(hoverElement) && !unref(hoverElement).equal(unref(selection)[0]) ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: "mce-hover",
-        "data-name": unref(hoverElement).name,
-        style: normalizeStyle({
-          borderColor: "currentcolor",
-          ...unref(boundingBoxToStyle)(hoverElementObb.value)
-        })
-      }, null, 12, _hoisted_1$h)) : createCommentVNode("", true);
-    };
-  }
-});
-const _hoisted_1$g = { class: "mce-btn" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  __name: "Btn",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
-        renderSlot(_ctx.$slots, "default")
-      ]);
-    };
-  }
-});
-const _hoisted_1$f = { class: "mce-layer__name" };
-const _hoisted_2$8 = { class: "mce-layer__action" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MceLayer",
-    inheritAttrs: false
+    tag: { default: "div" },
+    modelValue: {},
+    movable: { type: Boolean, default: true },
+    rotatable: { type: Boolean, default: true },
+    resizable: { type: Boolean, default: true },
+    adjustableBorderRadius: { type: Boolean, default: false },
+    threshold: { default: 0 },
+    resizeStrategy: {},
+    handleStrategy: {},
+    handleShape: { default: "rect" },
+    hideUi: { type: Boolean },
+    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",
+      // rotate
+      "rotate-top-left",
+      "rotate-top-right",
+      "rotate-bottom-left",
+      "rotate-bottom-right"
+    ] },
+    initialSize: { type: Boolean },
+    borderStyle: {},
+    tipFormat: {}
   },
-  __name: "Layer",
-  props: /* @__PURE__ */ mergeModels({
-    root: Boolean,
-    node: {
-      type: Object,
-      required: true
-    },
-    active: Boolean,
-    indent: {
-      type: Number,
-      default: 0
-    }
-  }, {
-    "opened": { default: false },
-    "openedModifiers": {}
-  }),
-  emits: ["update:opened"],
-  setup(__props) {
+  emits: ["update:modelValue", "start", "move", "end"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
-    const {
-      isElement,
-      isFrame,
-      isVisible,
-      setVisible,
-      isLock,
-      setLock,
-      selection,
-      nodes,
-      nodeIndexMap,
-      zoomTo,
-      hoverElement,
-      exec
-    } = useEditor();
-    const opened = useModel(__props, "opened");
-    const dom = ref();
-    const {
-      selecting,
-      sortedSelection
-    } = useLayerItem({
-      id: props.node.id,
-      opened,
-      node: computed(() => props.node),
-      dom: computed(() => dom.value)
+    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)
+    };
+    const modelValue = useModel(props, "modelValue");
+    const model = computed({
+      get: () => {
+        let { left = 0, top = 0, width = 0, height = 0, rotate = 0, borderRadius = 0 } = modelValue.value ?? {};
+        if (Number.isNaN(Number(width)))
+          width = 0;
+        if (Number.isNaN(Number(height)))
+          height = 0;
+        return { left, top, width, height, rotate, borderRadius };
+      },
+      set: (val) => modelValue.value = val
     });
-    const isFrist = computed(() => sortedSelection.value[0]?.equal(props.node));
-    const isLast = computed(() => {
-      const last = sortedSelection.value[sortedSelection.value.length - 1];
-      if (last) {
-        if (last.equal(props.node)) {
-          if (!opened.value || !props.node?.children.length)
-            return true;
-        } else if (last.equal(props.node?.parent)) ;
+    const transforming = ref(false);
+    const activeHandle = ref();
+    const computedHandles = computed(() => {
+      const size = 8;
+      const { width = 0, height = 0, borderRadius } = model.value;
+      const center = { x: width / 2, y: height / 2 };
+      const shape = props.handleShape;
+      const lines = [
+        { type: "top", points: [[0, 0], [1, 0]] },
+        { type: "right", points: [[1, 0], [1, 1]] },
+        { type: "bottom", points: [[0, 1], [1, 1]] },
+        { type: "left", points: [[0, 0], [0, 1]] }
+      ];
+      const points = [
+        { type: "top", point: [0.5, 0] },
+        { type: "right", point: [1, 0.5] },
+        { type: "bottom", point: [0.5, 1] },
+        { type: "left", point: [0, 0.5] },
+        { type: "top-left", point: [0, 0] },
+        { type: "top-right", point: [1, 0] },
+        { type: "bottom-left", point: [0, 1] },
+        { type: "bottom-right", point: [1, 1] }
+      ];
+      const lineHandles = lines.map((item) => {
+        const [p1, p2] = item.points;
+        const minX = Math.min(p1[0], p2[0]) * width;
+        const maxX = Math.max(p1[0], p2[0]) * width;
+        const minY = Math.min(p1[1], p2[1]) * height;
+        const maxY = Math.max(p1[1], p2[1]) * height;
+        return {
+          type: item.type,
+          x: minX - size / 2,
+          y: minY - size / 2,
+          width: maxX - minX + size,
+          height: maxY - minY + size
+        };
+      });
+      const pointHandles = points.map((item) => {
+        return {
+          type: item.type,
+          shape,
+          x: item.point[0] * width - size / 2,
+          y: item.point[1] * height - size / 2,
+          width: size,
+          height: size
+        };
+      });
+      const diagonalPointHandles = pointHandles.filter((item) => item.type.split("-").length === 2);
+      const rotateHandles = diagonalPointHandles.map((item) => {
+        const sign = {
+          x: center.x - item.x > 0 ? 1 : -1,
+          y: center.y - item.y > 0 ? 1 : -1
+        };
+        return {
+          ...item,
+          shape: void 0,
+          type: `rotate-${item.type}`,
+          x: item.x - sign.x * size,
+          y: item.y - sign.y * size
+        };
+      });
+      const minSize = Math.min(width, height);
+      const borderRadiusHandles = props.adjustableBorderRadius ? diagonalPointHandles.map((item) => {
+        const sign = {
+          x: center.x - item.x > 0 ? 1 : -1,
+          y: center.y - item.y > 0 ? 1 : -1
+        };
+        const offset2 = minSize * 0.1;
+        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 * width / 2 * ws,
+          y: item.y + sign.y * height / 2 * hs
+        };
+      }) : [];
+      let handles;
+      if (props.handleStrategy === "point") {
+        handles = [
+          // move
+          ...lineHandles.map((item) => ({ ...item, type: "move" })),
+          // resize
+          ...pointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
+          // border-radius
+          ...borderRadiusHandles,
+          // rotate
+          ...rotateHandles
+        ];
+      } else {
+        handles = [
+          // resize
+          ...lineHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
+          ...diagonalPointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
+          // border-radius
+          ...borderRadiusHandles,
+          // rotate
+          ...rotateHandles
+        ];
       }
-      return false;
+      return handles.filter((handle) => {
+        if (props.handles.includes(handle.type)) {
+          return !(!props.resizable && handle.type.startsWith("resize") || !props.rotatable && handle.type.startsWith("rotate") || !props.movable && handle.type === "move");
+        }
+        return false;
+      }).map((anchor) => {
+        anchor.width = Math.max(anchor.width, 0);
+        anchor.height = Math.max(anchor.height, 0);
+        return anchor;
+      });
     });
-    const isActive = computed(() => selection.value.some((v) => v.equal(props.node)));
-    const inputDom = ref();
-    const isHoverElement = computed(() => props.node?.equal(hoverElement.value));
-    const hovering = ref(false);
-    const editing = ref(false);
-    const editValue = ref();
-    const thumbnailIcon = computed(() => {
-      const node = props.node;
-      if (isFrame(node)) {
-        return "$frame";
-      } else if (node.children.length) {
-        return "$group";
-      } else if (isElement(node)) {
-        if (node.foreground.isValid() && node.foreground.image) {
-          return "$image";
+    const handlesRef = ref();
+    const sizeStyle = computed(() => {
+      const { width = 0, height = 0 } = model.value;
+      return {
+        width: props.initialSize && !width ? void 0 : `${width}px`,
+        height: props.initialSize && !height ? void 0 : `${height}px`
+      };
+    });
+    const style = computed(() => {
+      const { left = 0, top = 0, rotate = 0 } = model.value;
+      const radian = rotate * Math.PI / 180;
+      const cos = Math.cos(radian);
+      const sin = Math.sin(radian);
+      return {
+        ...sizeStyle.value,
+        transform: `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${left}, ${top})`
+      };
+    });
+    const tip = computed(() => props.tipFormat?.("size"));
+    function start(event, index) {
+      if (event && event.button !== void 0 && event.button !== 0) {
+        return false;
+      }
+      event?.preventDefault();
+      event?.stopPropagation();
+      const { left, top, width, height, rotate, borderRadius } = model.value;
+      let aspectRatio = 0;
+      if (width && height) {
+        aspectRatio = width / height;
+      }
+      const handle = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
+      activeHandle.value = handle.type;
+      const isMove = handle.type === "move";
+      const isRotate = handle.type.startsWith("rotate");
+      const isBorderRadius = handle.type.startsWith("border-radius");
+      const isHorizontal = handle.type === "resize-left" || handle.type === "resize-right";
+      const isHorizontalVertical = handle.type.split("-").length === 2;
+      const centerPoint = {
+        x: left + width / 2,
+        y: top + height / 2
+      };
+      const startPoint = {
+        x: left,
+        y: top
+      };
+      if (!isMove) {
+        startPoint.x += handle.x + handle.width / 2;
+        startPoint.y += handle.y + handle.height / 2;
+      }
+      const sign = {
+        x: startPoint.x - centerPoint.x > 0 ? 1 : -1,
+        y: startPoint.y - centerPoint.y > 0 ? 1 : -1
+      };
+      const rotatedStartPoint = rotatePoint(startPoint, centerPoint, rotate);
+      const rotatedSymmetricPoint = {
+        x: centerPoint.x * 2 - rotatedStartPoint.x,
+        y: centerPoint.y * 2 - rotatedStartPoint.y
+      };
+      const startAngle = Math.atan2(
+        rotatedStartPoint.y - centerPoint.y,
+        rotatedStartPoint.x - centerPoint.x
+      ) / (Math.PI / 180);
+      let startClientPoint = event ? { x: event.clientX, y: event.clientY } : void 0;
+      function startTransform() {
+        transforming.value = true;
+        emit("start", model.value);
+      }
+      if (!props.threshold && !transforming.value) {
+        startTransform();
+      }
+      function onMove(event2) {
+        const updated = {};
+        if (!startClientPoint) {
+          startClientPoint = { x: event2.clientX, y: event2.clientY };
         }
-        if (node.text.isValid()) {
-          return "$text";
+        const rotatedOffset = {
+          x: event2.clientX - startClientPoint.x,
+          y: event2.clientY - startClientPoint.y
+        };
+        if (!transforming.value) {
+          if (Math.abs(rotatedOffset.x) < props.threshold && Math.abs(rotatedOffset.y) < props.threshold) {
+            return;
+          }
+          startTransform();
         }
-      }
-      return "$shape";
-    });
-    function onMousedown() {
-    }
-    function onClickExpand() {
-      opened.value = !opened.value;
-    }
-    function onClickContent(e) {
-      selecting.value = true;
-      if (isElement(props.node)) {
-        if (e.shiftKey) {
-          const _nodes = [
-            ...selection.value.filter((v) => !v.equal(props.node)),
-            props.node
-          ];
-          let min;
-          let max;
-          _nodes.forEach((el) => {
-            const index = nodeIndexMap.get(el.id);
-            if (index !== void 0) {
-              min = min === void 0 ? index : Math.min(min, index);
-              max = max === void 0 ? index : Math.max(max, index);
-            }
-          });
-          if (min !== void 0 && max !== void 0) {
-            let _selection = nodes.value.slice(min, max + 1);
-            const result = new Set(_selection.map((node) => node.id));
-            const parents = /* @__PURE__ */ new Set();
-            _selection.forEach((node) => node.parent && parents.add(node.parent));
-            parents.forEach((parent) => {
-              if (parent.children.every((ch) => result.has(ch.id))) {
-                const ids = new Set(parent.children.map((ch) => ch.id));
-                _selection = [
-                  ..._selection.filter((v) => !ids.has(v.id)),
-                  parent
-                ];
-              }
-            });
-            selection.value = _selection;
+        const rotatedCurrentPoint = {
+          x: rotatedStartPoint.x + rotatedOffset.x,
+          y: rotatedStartPoint.y + rotatedOffset.y
+        };
+        if (isMove) {
+          if (props.movable) {
+            updated.left = startPoint.x + rotatedOffset.x;
+            updated.top = startPoint.y + rotatedOffset.y;
           }
-        } else if (e.ctrlKey || e.metaKey) {
-          const filtered = selection.value.filter((v) => !v.equal(props.node));
-          if (filtered.length !== selection.value.length) {
-            selection.value = filtered;
+        } else if (isRotate) {
+          if (props.rotatable) {
+            const endAngle = Math.atan2(
+              rotatedCurrentPoint.y - centerPoint.y,
+              rotatedCurrentPoint.x - centerPoint.x
+            ) / (Math.PI / 180);
+            updated.rotate = (rotate + endAngle - startAngle + 360) % 360;
+          }
+        } else if (isBorderRadius) {
+          const offset2 = rotatePoint(rotatedOffset, { x: 0, y: 0 }, -rotate);
+          const 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 };
+          const newRotatedCurrentPoint = rotatePoint(newCurrentPoint, centerPoint, rotate);
+          const distance = Math.abs(getDistance(newRotatedCurrentPoint, rotatedSymmetricPoint));
+          if (isHorizontal) {
+            updated.width = distance;
+            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
+              updated.height = distance / aspectRatio;
+            } else {
+              updated.height = height;
+            }
           } else {
-            selection.value = [...filtered, props.node];
+            updated.height = distance;
+            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
+              updated.width = distance * aspectRatio;
+            } else {
+              updated.width = width;
+            }
           }
+          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
+          updated.left = newCenterPoint.x - updated.width / 2;
+          updated.top = newCenterPoint.y - updated.height / 2;
         } else {
-          selection.value = [props.node];
+          let newRotatedCurrentPoint;
+          if ((props.resizeStrategy === "lockAspectRatio" || props.resizeStrategy === "lockAspectRatioDiagonal") && aspectRatio) {
+            const offset2 = rotatePoint(rotatedOffset, { x: 0, y: 0 }, -rotate);
+            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,
+                y: startPoint.y + sign.y * _offset / aspectRatio
+              },
+              centerPoint,
+              rotate
+            );
+          } else {
+            newRotatedCurrentPoint = rotatedCurrentPoint;
+          }
+          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
+          const points = [
+            rotatePoint(newRotatedCurrentPoint, newCenterPoint, -rotate),
+            rotatePoint(rotatedSymmetricPoint, newCenterPoint, -rotate)
+          ];
+          const [minX, maxX] = points[0].x > points[1].x ? [points[1].x, points[0].x] : [points[0].x, points[1].x];
+          const [minY, maxY] = points[0].y > points[1].y ? [points[1].y, points[0].y] : [points[0].y, points[1].y];
+          updated.width = maxX - minX;
+          updated.height = maxY - minY;
+          updated.left = minX;
+          updated.top = minY;
+        }
+        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;
+        emit("move", newValue, oldValue);
       }
-      nextTick().then(() => {
-        selecting.value = false;
-      });
-    }
-    function onDblclickThumbnail(e) {
-      e.stopPropagation();
-      if (isElement(props.node)) {
-        zoomTo("selection", {
-          behavior: "smooth"
-        });
+      function onEnd() {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onEnd, true);
+        transforming.value = false;
+        activeHandle.value = void 0;
+        emit("end", model.value);
       }
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onEnd, true);
+      return true;
     }
-    function onDblclickContent() {
-      editing.value = true;
-      editValue.value = props.node.name;
-      nextTick().then(() => {
-        inputDom.value?.focus();
-      });
+    const cursorMap = {
+      rotate: '<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" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z" fill="white"/>',
+      resizeXy: '<path d="m9 17.9907v.005l5.997 5.996.001-3.999h1.999 2.02v4l5.98-6.001-5.98-5.999.001 4.019-2.021.002h-2l.001-4.022zm1.411.003 3.587-3.588-.001 2.587h3.5 2.521v-2.585l3.565 3.586-3.564 3.585-.001-2.585h-2.521l-3.499-.001-.001 2.586z" fill="white"/><path d="m17.4971 18.9932h2.521v2.586l3.565-3.586-3.565-3.585v2.605h-2.521-3.5v-2.607l-3.586 3.587 3.586 3.586v-2.587z" fill="black"/>',
+      resizeBevel: '<path d="m19.7432 17.0869-4.072 4.068 2.829 2.828-8.473-.013-.013-8.47 2.841 2.842 4.075-4.068 1.414-1.415-2.844-2.842h8.486v8.484l-2.83-2.827z" fill="white"/><path d="m18.6826 16.7334-4.427 4.424 1.828 1.828-5.056-.016-.014-5.054 1.842 1.841 4.428-4.422 2.474-2.475-1.844-1.843h5.073v5.071l-1.83-1.828z" fill="black"/>'
+    };
+    function createCursor(type, angle) {
+      const path = cursorMap[type];
+      return `<svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><filter id="shadow" color-interpolation-filters="sRGB"><feDropShadow dx="1" dy="1" stdDeviation="1.2" flood-opacity=".5"/></filter></defs><g fill="none" transform="rotate(${angle} 16 16)" filter="url(%23shadow)">${path}</g></svg>`.replace(/"/g, "'");
     }
-    function onMouseenter() {
-      if (isElement(props.node)) {
-        hoverElement.value = props.node;
-        hovering.value = true;
+    function getCursor(type) {
+      if (type === "move") {
+        return "move";
+      }
+      const create = cursors[type];
+      if (!create) {
+        return void 0;
       }
+      return `url("data:image/svg+xml,${create(model.value.rotate ?? 0)}") 16 16, pointer`;
     }
-    function onMouseleave() {
-      hoverElement.value = void 0;
-      hovering.value = false;
+    function rotatePoint(point, origin, angle) {
+      const radian = angle * Math.PI / 180;
+      const cos = Math.cos(radian);
+      const sin = Math.sin(radian);
+      return {
+        x: (point.x - origin.x) * cos - (point.y - origin.y) * sin + origin.x,
+        y: (point.x - origin.x) * sin + (point.y - origin.y) * cos + origin.y
+      };
     }
-    function onContextmenu(e) {
-      if (isElement(props.node)) {
-        if (!selection.value.some((v) => v.equal(props.node))) {
-          selection.value = [props.node];
+    function getMidpoint(point1, point2) {
+      return {
+        x: (point2.x + point1.x) / 2,
+        y: (point2.y + point1.y) / 2
+      };
+    }
+    function getDistance(point1, point2) {
+      const dx = point2.x - point1.x;
+      const dy = point2.y - point1.y;
+      return (dx + dy >= 0 ? 1 : -1) * Math.sqrt(dx * dx + dy * dy);
+    }
+    onMounted(async () => {
+      const vm = getCurrentInstance();
+      const root = vm?.proxy?.$el;
+      if (root && props.initialSize) {
+        await nextTick();
+        let width;
+        let height;
+        const style2 = getComputedStyle(root);
+        if (style2.width.endsWith("px") && style2.height.endsWith("px")) {
+          width = Number(style2.width.replace("px", ""));
+          height = Number(style2.height.replace("px", ""));
+        } else {
+          ({ width, height } = root.getBoundingClientRect());
+        }
+        if (width && height) {
+          model.value = { ...model.value, width, height };
+        } else if ("ResizeObserver" in globalThis) {
+          const observer = new ResizeObserver(([entry]) => {
+            if (entry.contentRect.width && entry.contentRect.height) {
+              model.value = {
+                ...model.value,
+                width: entry.contentRect.width,
+                height: entry.contentRect.height
+              };
+              observer.unobserve(root);
+            }
+          });
+          observer.observe(root);
         }
-        exec("openContextMenu", e);
       }
-    }
-    function onInputBlur() {
-      console.log("onInputBlur");
-      editing.value = false;
-      if (editValue.value) {
-        props.node.name = editValue.value;
-        editValue.value = void 0;
+    });
+    __expose({
+      start,
+      activeHandle,
+      transforming
+    });
+    function Diagonal() {
+      const handle = activeHandle.value;
+      if (!handle || !handle.startsWith("resize")) {
+        return void 0;
+      }
+      switch (props.resizeStrategy) {
+        case "lockAspectRatio":
+          break;
+        case "lockAspectRatioDiagonal":
+          if (handle.split("-").length === 2) {
+            return void 0;
+          }
+          break;
+        default:
+          return void 0;
+      }
+      if (handle === "resize-top" || handle === "resize-right" || handle === "resize-top-right" || handle === "resize-bottom-left") {
+        return h("line", {
+          class: "mce-transformable__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") {
+        return h("line", {
+          class: "mce-transformable__diagonal",
+          x1: "0",
+          y1: "0",
+          x2: "100%",
+          y2: "100%"
+        });
       }
+      return void 0;
     }
     return (_ctx, _cache) => {
-      const _component_MceLayer = resolveComponent("MceLayer");
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", {
-          ref_key: "dom",
-          ref: dom,
-          class: normalizeClass(["mce-layer", [
-            props.root && "mce-layer--root",
-            (__props.active || isActive.value) && "mce-layer--active",
-            isFrist.value && "mce-layer--first",
-            isLast.value && "mce-layer--last",
-            opened.value && "mce-layer--open",
-            isHoverElement.value && "mce-layer--hover"
-          ]]),
-          style: normalizeStyle({
-            "--indent-padding": `${props.indent * 16}px`
+      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}`
+        ]]),
+        style: normalizeStyle(style.value)
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {
+            value: unref(modelValue),
+            props: {
+              onPointerdown: start
+            },
+            start
           }),
-          onMousedown,
-          onMouseenter,
-          onMouseleave,
-          onContextmenu
-        }, [
-          createElementVNode("div", {
-            class: "mce-layer__expand",
-            onClick: onClickExpand
-          }, [
-            props.node.children.length ? (openBlock(), createBlock(_sfc_main$z, {
-              key: 0,
-              icon: "$arrowRight"
-            })) : createCommentVNode("", true)
-          ]),
-          createElementVNode("div", {
-            class: "mce-layer__content",
-            onClick: onClickContent,
-            onDblclick: onDblclickContent
-          }, [
-            createElementVNode("div", {
-              class: "mce-layer__thumbnail",
-              onDblclick: onDblclickThumbnail
-            }, [
-              createVNode(_sfc_main$z, { icon: thumbnailIcon.value }, null, 8, ["icon"])
-            ], 32),
-            createElementVNode("div", _hoisted_1$f, [
-              withDirectives(createElementVNode("input", {
-                ref_key: "inputDom",
-                ref: inputDom,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editValue.value = $event),
-                type: "text",
-                class: "mce-layer__input",
-                autofocus: "",
-                onBlur: onInputBlur
-              }, null, 544), [
-                [vShow, editing.value],
-                [vModelText, editValue.value]
-              ]),
-              createElementVNode("div", {
-                style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 })
-              }, toDisplayString(editValue.value || props.node.name || props.node.id), 5)
+          (openBlock(), createElementBlock("svg", _hoisted_1$j, [
+            _cache[0] || (_cache[0] = createElementVNode("rect", {
+              width: "100%",
+              height: "100%",
+              fill: "none",
+              class: "mce-transformable__rect"
+            }, null, -1)),
+            createElementVNode("rect", {
+              class: "mce-transformable__rect",
+              width: "100%",
+              height: "100%",
+              fill: "none",
+              rx: model.value.borderRadius,
+              ry: model.value.borderRadius
+            }, null, 8, _hoisted_2$8),
+            createVNode(Diagonal),
+            createElementVNode("g", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+                return openBlock(), createElementBlock(Fragment, { key: index }, [
+                  handle.shape ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    handle.shape === "rect" ? (openBlock(), createElementBlock("rect", {
+                      key: 0,
+                      x: handle.x,
+                      y: handle.y,
+                      width: handle.width,
+                      height: handle.height,
+                      "aria-label": handle.type,
+                      class: "mce-transformable__handle"
+                    }, null, 8, _hoisted_3$6)) : (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$3))
+                  ], 64)) : createCommentVNode("", true)
+                ], 64);
+              }), 128))
+            ]),
+            createElementVNode("g", _hoisted_5$2, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+                return openBlock(), createElementBlock("rect", {
+                  key: index,
+                  ref_for: true,
+                  ref_key: "handlesRef",
+                  ref: handlesRef,
+                  x: handle.x,
+                  y: handle.y,
+                  width: handle.width,
+                  height: handle.height,
+                  "aria-label": handle.type,
+                  class: "mce-transformable__handle-rect",
+                  cursor: transforming.value ? "auto" : getCursor(handle.type),
+                  onPointerdown: (event) => start(event, index)
+                }, null, 40, _hoisted_6$2);
+              }), 128))
             ]),
-            createElementVNode("div", _hoisted_2$8, [
-              props.root ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: normalizeClass(["mce-btn", {
-                  "mce-btn--hide": !hovering.value && !unref(isLock)(props.node)
-                }]),
-                onClick: _cache[1] || (_cache[1] = ($event) => unref(setLock)(props.node, !unref(isLock)(props.node)))
-              }, [
-                createVNode(_sfc_main$z, {
-                  icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
-                }, null, 8, ["icon"])
-              ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createVNode(_sfc_main$p, {
-                  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$z, {
-                      icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
-                    }, null, 8, ["icon"])
-                  ]),
-                  _: 1
-                }, 8, ["class"]),
-                createVNode(_sfc_main$p, {
-                  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$z, {
-                      icon: unref(isVisible)(props.node) ? "$visible" : "$unvisible"
-                    }, null, 8, ["icon"])
-                  ]),
-                  _: 1
-                }, 8, ["class"])
-              ], 64))
+            createElementVNode("g", _hoisted_7$2, [
+              renderSlot(_ctx.$slots, "svg", { box: model.value })
             ])
-          ], 32)
-        ], 38),
-        opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.node.children, (child, key) => {
-          return openBlock(), createBlock(_component_MceLayer, {
-            key,
-            node: child,
-            indent: __props.root ? props.indent : props.indent + 1,
-            active: __props.active || isActive.value
-          }, null, 8, ["node", "indent", "active"]);
-        }), 128)) : createCommentVNode("", true)
-      ], 64);
+          ])),
+          tip.value ? (openBlock(), createElementBlock("div", _hoisted_8$1, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["class", "style"]);
     };
   }
 });
-const _hoisted_1$e = { class: "mce-layers" };
-const _hoisted_2$7 = { class: "mce-layers__wrapper" };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  __name: "Layers",
+const _hoisted_1$i = { class: "mce-cropper" };
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  __name: "Cropper",
+  props: /* @__PURE__ */ mergeModels({
+    image: {},
+    minScale: { default: 0.1 },
+    maxScale: { default: 3 }
+  }, {
+    "modelValue": { default: () => ({}) },
+    "modelModifiers": {},
+    "style": { default: () => ({}) },
+    "styleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["start", "end", "update:transform"], ["update:modelValue", "update:style"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const cropRect = useModel(__props, "modelValue");
+    const styleModel = useModel(__props, "style");
+    const rootBox = ref({ width: 0, height: 0 });
+    const { state: imageRef } = useImage(
+      computed(() => ({
+        src: props.image
+      }))
+    );
+    const backup = cloneDeep(cropRect.value);
+    const canvasRef = useTemplateRef("canvasRef");
+    const computedCropRect = computed({
+      get: () => {
+        const { left = 0, top = 0, right = 0, bottom = 0 } = cropRect.value;
+        return { left, top, right, bottom };
+      },
+      set: (val) => cropRect.value = val
+    });
+    const inverseMat = computed(() => {
+      const { left, top, right, bottom } = computedCropRect.value;
+      const sx = 1 / (1 - left - right);
+      const sy = 1 / (1 - top - bottom);
+      const tx = -left;
+      const ty = -top;
+      return { sx, sy, tx, ty };
+    });
+    const sourceTransform = computed({
+      get: () => {
+        const { sx, sy, tx, ty } = inverseMat.value;
+        const { scaleX = 1, scaleY = 1 } = styleModel.value;
+        const { width, height } = rootBox.value;
+        return {
+          width: sx * width,
+          height: sy * height,
+          left: tx * scaleX * (sx * width),
+          top: ty * scaleY * (sy * height)
+        };
+      },
+      set: (newValue) => {
+        const { width, height } = rootBox.value;
+        const { scaleX = 1, scaleY = 1 } = styleModel.value;
+        const transform = {
+          sx: newValue.width / width,
+          sy: newValue.height / height,
+          tx: newValue.left / newValue.width / scaleX,
+          ty: newValue.top / newValue.height / scaleY
+        };
+        const left = -transform.tx;
+        const top = -transform.ty;
+        const w = 1 - 1 / transform.sx;
+        const h2 = 1 - 1 / transform.sy;
+        const right = w - left;
+        const bottom = h2 - top;
+        computedCropRect.value = { left, top, right, bottom };
+      }
+    });
+    const scale = computed({
+      get: () => inverseMat.value.sx,
+      set: (value) => {
+        const transform = inverseMat.value;
+        const rate = transform.sx / value;
+        const left = -transform.tx;
+        const top = -transform.ty;
+        const w = 1 - 1 / value;
+        const h2 = 1 - 1 / transform.sy * rate;
+        const right = w - left;
+        const bottom = h2 - top;
+        computedCropRect.value = { left, top, right, bottom };
+      }
+    });
+    onBeforeMount(() => emit("start"));
+    onBeforeUnmount(() => emit("end"));
+    const sourceStyle = computed(() => {
+      const { sx, sy, tx, ty } = inverseMat.value;
+      const { scaleX = 1, scaleY = 1 } = styleModel.value;
+      return {
+        transform: [
+          `scale(${sx}, ${sy})`,
+          `translate(${tx * scaleX * 100}%, ${ty * scaleY * 100}%)`
+        ].join(" ")
+      };
+    });
+    watch([canvasRef, imageRef], render2);
+    watch(computedCropRect, render2, { deep: true });
+    watch([() => styleModel.value.scaleX, () => styleModel.value.scaleY], render2);
+    function render2() {
+      const ctx = canvasRef.value?.getContext("2d");
+      if (!ctx || !imageRef.value)
+        return;
+      const { scaleX = 1, scaleY = 1 } = styleModel.value;
+      const { naturalWidth, naturalHeight } = imageRef.value;
+      ctx.canvas.width = naturalWidth;
+      ctx.canvas.height = naturalHeight;
+      ctx.clearRect(0, 0, naturalWidth, naturalHeight);
+      ctx.globalAlpha = 0.4;
+      ctx.scale(scaleX, scaleY);
+      ctx.drawImage(imageRef.value, 0, 0, naturalWidth, naturalHeight);
+    }
+    function ok() {
+      emit("end");
+    }
+    function cancel() {
+      cropRect.value = backup;
+      ok();
+    }
+    function onResizeObserver(entries) {
+      const { width, height } = entries[0].contentRect;
+      rootBox.value = { width, height };
+    }
+    function applySourceTransformToStyle() {
+      const { left = 0, top = 0, width = 0, height = 0 } = styleModel.value;
+      const { sx, sy, tx, ty } = inverseMat.value;
+      cropRect.value = {};
+      styleModel.value = {
+        ...styleModel.value,
+        width: sx * width,
+        height: sy * height,
+        left: left + tx * (sx * width),
+        top: top + ty * (sy * height)
+      };
+      ok();
+    }
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$i, [
+        createElementVNode("div", {
+          class: "mce-cropper__source",
+          style: normalizeStyle(sourceStyle.value)
+        }, [
+          createElementVNode("canvas", {
+            ref_key: "canvasRef",
+            ref: canvasRef
+          }, null, 512)
+        ], 4),
+        createVNode(_sfc_main$v, {
+          modelValue: sourceTransform.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sourceTransform.value = $event),
+          class: "mce-cropper__transformable",
+          rotatable: false
+        }, {
+          default: withCtx(({ props: slotProps }) => [
+            createElementVNode("div", mergeProps({ class: "mce-cropper__transformable_rect" }, slotProps), null, 16)
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        renderSlot(_ctx.$slots, "default", {
+          scale: scale.value,
+          ok,
+          cancel,
+          applySourceTransformToStyle
+        })
+      ])), [
+        [unref(vResizeObserver), onResizeObserver]
+      ]);
+    };
+  }
+});
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  __name: "ForegroundCropper",
   setup(__props) {
     const {
-      root,
-      selection,
       state,
-      nodeIndexMap
+      setState,
+      elementSelection
     } = useEditor();
-    const sortedSelection = computed(() => {
-      return selection.value.map((node) => {
-        return {
-          node,
-          index: nodeIndexMap.get(node.id) ?? 0
-        };
-      }).sort((a, b) => a.index - b.index).map((v) => v.node);
-    });
+    const element = computed(() => elementSelection.value[0]);
+    return (_ctx, _cache) => {
+      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),
+        style: normalizeStyle(element.value.style.toJSON()),
+        image: element.value.foreground.image,
+        class: "pointer-events-auto",
+        "onUpdate:style": _cache[1] || (_cache[1] = (val) => element.value.style.setProperties(val)),
+        onEnd: _cache[2] || (_cache[2] = () => unref(setState)(void 0))
+      }, null, 8, ["modelValue", "style", "image"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  __name: "Frame",
+  props: {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const frame = useModel(__props, "modelValue");
+    const input = useTemplateRef("inputTpl");
     const {
-      selecting,
-      openedItems,
-      domItems
-    } = createLayer({
-      sortedSelection
-    });
-    watch(selection, (selection2) => {
-      if (state.value === "selecting" || selecting.value) {
-        return;
+      getObb,
+      hoverElement,
+      selection,
+      state,
+      config,
+      exec
+    } = useEditor();
+    const editing = ref(false);
+    async function onDblclick() {
+      editing.value = true;
+      await nextTick();
+      if (input.value) {
+        input.value.focus();
+        input.value.select();
       }
-      let last;
-      selection2.forEach((node) => {
-        node.findAncestor((ancestor) => {
-          const opened = openedItems.get(ancestor.id);
-          if (opened) {
-            opened.value = true;
-          }
-          return false;
-        });
-        last = node;
-      });
-      if (last) {
-        nextTick().then(() => {
-          domItems.get(last.id)?.value?.scrollIntoView({
-            block: "center"
-          });
-        });
+    }
+    async function onPointerdown(ev) {
+      if (!editing.value) {
+        selection.value = [frame.value];
+        await nextTick();
+        exec("startTransform", ev);
       }
-    });
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createElementVNode("div", _hoisted_2$7, [
-          createVNode(_sfc_main$o, {
-            root: true,
-            node: unref(root),
-            opened: true
-          }, null, 8, ["node"])
+      return withDirectives((openBlock(), createElementBlock("div", {
+        style: normalizeStyle(unref(boundingBoxToStyle)(unref(getObb)(frame.value, "drawboard"))),
+        class: normalizeClass(["mce-frame", [
+          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", {
+          class: "mce-frame__name",
+          onDblclick,
+          onPointerdown,
+          onPointerenter: _cache[2] || (_cache[2] = ($event) => !unref(state) && (hoverElement.value = frame.value)),
+          onPointerleave: _cache[3] || (_cache[3] = ($event) => !unref(state) && (hoverElement.value = void 0))
+        }, [
+          createElementVNode("div", null, toDisplayString(frame.value.name), 1),
+          withDirectives(createElementVNode("input", {
+            ref: "inputTpl",
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => frame.value.name = $event),
+            onBlur: _cache[1] || (_cache[1] = ($event) => editing.value = false)
+          }, null, 544), [
+            [vShow, editing.value],
+            [vModelText, frame.value.name]
+          ])
+        ], 544), [
+          [vShow, unref(config).viewMode === "edgeless"]
         ])
+      ], 6)), [
+        [vShow, frame.value.visible]
       ]);
     };
   }
 });
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  __name: "Tooltip",
-  props: /* @__PURE__ */ mergeModels({
-    ...makeMceOverlayProps({
-      location: "right",
-      offset: 8
-    })
-  }, {
-    "modelValue": { type: Boolean },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const isActive = useModel(__props, "modelValue");
-    const overlay = useTemplateRef("overlayTpl");
-    function updateLocation() {
-      overlay.value?.updateLocation();
-    }
-    __expose({
-      updateLocation
-    });
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  __name: "Frames",
+  setup(__props) {
+    const {
+      frames
+    } = useEditor();
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
+        return openBlock(), createBlock(_sfc_main$s, {
+          key,
+          "model-value": frame
+        }, null, 8, ["model-value"]);
+      }), 128);
+    };
+  }
+});
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  __name: "GoBackSelectedArea",
+  setup(__props) {
+    const {
+      selectionAabb,
+      drawboardAabb,
+      aabbToDrawboardAabb,
+      t,
+      exec
+    } = useEditor();
+    const isActive = computed(() => {
+      return selectionAabb.value.width && selectionAabb.value.height && !isOverlappingAabb(
+        drawboardAabb.value,
+        aabbToDrawboardAabb(selectionAabb.value)
+      );
+    });
+    return (_ctx, _cache) => {
+      return isActive.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "mce-back-selected-aera",
+        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
+      }, [
+        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$p = /* @__PURE__ */ defineComponent({
+  __name: "Hover",
+  setup(__props) {
+    const {
+      selection,
+      hoverElement,
+      getObb,
+      camera
+    } = useEditor();
+    const hoverElementObb = computed(() => getObb(hoverElement.value, "drawboard"));
+    return (_ctx, _cache) => {
+      return unref(hoverElement) && !unref(hoverElement).equal(unref(selection)[0]) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "mce-hover",
+        "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);
+    };
+  }
+});
+const _hoisted_1$g = { class: "mce-btn" };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  __name: "Btn",
+  setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$y, {
-        ref: "overlayTpl",
-        modelValue: isActive.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
-        class: "mce-tooltip",
-        location: props.location,
-        offset: props.offset,
-        target: props.target,
-        attach: props.attach
-      }, createSlots({
-        default: withCtx(() => [
-          isActive.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
-        ]),
-        _: 2
-      }, [
-        _ctx.$slots.activator ? {
-          name: "activator",
-          fn: withCtx((activatorProps) => [
-            renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps(activatorProps)))
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["modelValue", "location", "offset", "target", "attach"]);
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
     };
   }
 });
-const _hoisted_1$d = ["width", "height"];
-const _hoisted_2$6 = ["onDblclick", "onMousedown", "onMousemove"];
-const _hoisted_3$6 = { style: { "font-size": "12px", "text-wrap": "nowrap" } };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = { class: "mce-layer__name" };
+const _hoisted_2$7 = { class: "mce-layer__action" };
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
+    name: "MceLayer",
     inheritAttrs: false
   },
-  __name: "Ruler",
-  props: {
-    size: { default: 16 },
-    vertical: { type: Boolean },
-    zoom: { default: 1 },
-    position: { default: 0 },
-    unit: { default: 50 },
-    unitFractions: { default: () => [1, 2, 5, 10] },
-    selected: {},
-    pixelRatio: { default: window.devicePixelRatio || 1 },
-    refline: { type: Boolean },
-    axis: { type: Boolean },
-    labelFormat: { type: Function, default: (tick) => String(tick) }
-  },
-  setup(__props, { expose: __expose }) {
+  __name: "Layer",
+  props: /* @__PURE__ */ mergeModels({
+    root: Boolean,
+    node: {
+      type: Object,
+      required: true
+    },
+    active: Boolean,
+    indent: {
+      type: Number,
+      default: 0
+    }
+  }, {
+    "opened": { default: false },
+    "openedModifiers": {}
+  }),
+  emits: ["update:opened"],
+  setup(__props) {
     const props = __props;
-    const attrs = useAttrs();
-    const pixelRatio = computed(() => props.pixelRatio);
-    const tipText = ref();
-    const tipPos = ref({ x: 0, y: 0 });
-    const canvas = useTemplateRef("canvasTpl");
-    const offscreenCanvas = "OffscreenCanvas" in window ? new OffscreenCanvas(props.size, props.size) : document.createElement("canvas");
-    const ctx = offscreenCanvas.getContext("2d");
-    const box = ref();
-    const colors = reactive({
-      text: "#000",
-      border: "#000"
+    const {
+      isElement,
+      isFrame,
+      isVisible,
+      setVisible,
+      isLock,
+      setLock,
+      selection,
+      nodes,
+      nodeIndexMap,
+      zoomTo,
+      hoverElement,
+      exec
+    } = useEditor();
+    const opened = useModel(__props, "opened");
+    const dom = ref();
+    const {
+      selecting,
+      sortedSelection
+    } = useLayerItem({
+      id: props.node.id,
+      opened,
+      node: computed(() => props.node),
+      dom: computed(() => dom.value)
     });
-    function drawSelected() {
-      if (!props.selected?.width || !props.selected?.height)
-        return;
-      ctx.fillStyle = "#6165FD20";
-      const offset2 = props.vertical ? props.selected.top : props.selected.left;
-      const length = props.vertical ? props.selected.height : props.selected.width;
-      ctx.fillRect(offset2, 0, length, props.size);
-    }
-    function drawAxis(start2, end2, size, color) {
-      ctx.lineWidth = size;
-      ctx.strokeStyle = color;
-      ctx.beginPath();
-      ctx.moveTo(start2[0], start2[1]);
-      ctx.lineTo(end2[0], end2[1]);
-      ctx.stroke();
-    }
-    function drawTick(tick, len, direction = 1) {
-      const x1 = tick;
-      const y1 = props.size;
-      const x2 = tick;
-      const y2 = props.size - len * direction;
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-    }
-    function drawText(content, tick, top, size) {
-      ctx.font = `${size}px sans-serif`;
-      ctx.textAlign = "left";
-      ctx.textBaseline = "bottom";
-      const x2 = tick;
-      const y2 = props.size - top;
-      ctx.save();
-      if (props.vertical) {
-        ctx.translate(0, props.size);
-        ctx.scale(1, -1);
-      }
-      ctx.fillText(content, x2, y2);
-      ctx.restore();
-    }
-    const unit = computed(() => {
-      const idealUnit = Math.max(props.unit / props.zoom, 1);
-      const unitFractions = props.unitFractions;
-      const exponent = Math.floor(Math.log10(idealUnit));
-      const fraction = idealUnit / 10 ** exponent;
-      let niceFraction = unitFractions[unitFractions.length - 1];
-      for (const cur of unitFractions) {
-        if (fraction <= cur) {
-          niceFraction = cur;
-          break;
-        }
+    const isFrist = computed(() => sortedSelection.value[0]?.equal(props.node));
+    const isLast = computed(() => {
+      const last = sortedSelection.value[sortedSelection.value.length - 1];
+      if (last) {
+        if (last.equal(props.node)) {
+          if (!opened.value || !props.node?.children.length)
+            return true;
+        } else if (last.equal(props.node?.parent)) ;
       }
-      return niceFraction * 10 ** exponent;
-    });
-    const start = computed(() => {
-      const value = props.position / props.zoom;
-      return Math.floor(value / unit.value) * unit.value;
-    });
-    const end = computed(() => {
-      const len = (props.vertical ? box.value?.height : box.value?.width) ?? 0;
-      const value = len / props.zoom;
-      return start.value + Math.ceil(value / unit.value) * unit.value;
+      return false;
     });
-    function numToPx(num) {
-      return Math.round(num * props.zoom - props.position);
-    }
-    function pxToNum(px) {
-      return Math.round((px + props.position) / props.zoom);
-    }
-    function render2() {
-      const cvs = canvas.value;
-      if (!cvs || !offscreenCanvas.width || !offscreenCanvas.height)
-        return;
-      ctx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-      ctx.save();
-      ctx.scale(pixelRatio.value, pixelRatio.value);
-      if (props.vertical) {
-        ctx.scale(1, -1);
-        ctx.translate(0, 0);
-        ctx.rotate(-Math.PI / 2);
-      }
-      drawSelected();
-      if (props.axis) {
-        drawAxis(
-          [0, props.size],
-          [props.vertical ? cvs.height : cvs.width, props.size],
-          2,
-          colors.border
-        );
-      }
-      const drawPrimary = (tick, label) => {
-        drawTick(tick, 10);
-        drawText(label, tick + 2, 4, 8);
-      };
-      const drawSecondary = (tick) => drawTick(tick, 4);
-      let inc = unit.value / 10;
-      inc = (inc > 0 ? 1 : -1) * Math.max(1, Math.abs(inc));
-      ctx.beginPath();
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = colors.text;
-      ctx.fillStyle = colors.text;
-      for (let tick = start.value; tick <= end.value; tick += inc) {
-        if (tick % unit.value === 0) {
-          drawPrimary(numToPx(tick), props.labelFormat(tick));
-        }
-      }
-      ctx.stroke();
-      ctx.beginPath();
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = colors.border;
-      for (let tick = start.value; tick <= end.value; tick += inc) {
-        if (tick % unit.value === 0) ;
-        else if (tick % inc === 0) {
-          drawSecondary(numToPx(tick));
+    const isActive = computed(() => selection.value.some((v) => v.equal(props.node)));
+    const inputDom = ref();
+    const isHoverElement = computed(() => props.node?.equal(hoverElement.value));
+    const hovering = ref(false);
+    const editing = ref(false);
+    const editValue = ref();
+    const thumbnailIcon = computed(() => {
+      const node = props.node;
+      if (isFrame(node)) {
+        return "$frame";
+      } else if (node.children.length) {
+        return "$group";
+      } else if (isElement(node)) {
+        if (node.foreground.isValid() && node.foreground.image) {
+          return "$image";
         }
-      }
-      ctx.stroke();
-      ctx.restore();
-      if ("transferToImageBitmap" in offscreenCanvas) {
-        cvs.getContext("bitmaprenderer").transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());
-      } else {
-        const mainCtx = cvs.getContext("2d");
-        if (mainCtx) {
-          mainCtx.clearRect(0, 0, cvs.width, cvs.height);
-          mainCtx.drawImage(offscreenCanvas, 0, 0);
+        if (node.text.isValid()) {
+          return "$text";
         }
       }
+      return "$shape";
+    });
+    function onMousedown() {
     }
-    watch(
-      [canvas, () => props.zoom, () => props.position, () => props.selected],
-      () => {
-        render2();
-      },
-      { immediate: true, deep: true }
-    );
-    const resize = useDebounceFn(() => {
-      if (!canvas.value)
-        return;
-      const _box = canvas.value.parentElement.getBoundingClientRect();
-      offscreenCanvas.width = canvas.value.width = _box.width * pixelRatio.value;
-      offscreenCanvas.height = canvas.value.height = _box.height * pixelRatio.value;
-      canvas.value.style.width = `${_box.width}px`;
-      canvas.value.style.height = `${_box.height}px`;
-      box.value = _box;
-      render2();
-    }, 50);
-    onMounted(() => {
-      resize();
-      const dom = canvas.value;
-      if (dom) {
-        const style = window.getComputedStyle(dom);
-        colors.text = style.getPropertyValue("--text-color").trim();
-        colors.border = style.getPropertyValue("--border-color").trim();
+    function onClickExpand() {
+      opened.value = !opened.value;
+    }
+    function onClickContent(e) {
+      selecting.value = true;
+      if (isElement(props.node)) {
+        if (e.shiftKey) {
+          const _nodes = [
+            ...selection.value.filter((v) => !v.equal(props.node)),
+            props.node
+          ];
+          let min;
+          let max;
+          _nodes.forEach((el) => {
+            const index = nodeIndexMap.get(el.id);
+            if (index !== void 0) {
+              min = min === void 0 ? index : Math.min(min, index);
+              max = max === void 0 ? index : Math.max(max, index);
+            }
+          });
+          if (min !== void 0 && max !== void 0) {
+            let _selection = nodes.value.slice(min, max + 1);
+            const result = new Set(_selection.map((node) => node.id));
+            const parents = /* @__PURE__ */ new Set();
+            _selection.forEach((node) => node.parent && parents.add(node.parent));
+            parents.forEach((parent) => {
+              if (parent.children.every((ch) => result.has(ch.id))) {
+                const ids = new Set(parent.children.map((ch) => ch.id));
+                _selection = [
+                  ..._selection.filter((v) => !ids.has(v.id)),
+                  parent
+                ];
+              }
+            });
+            selection.value = _selection;
+          }
+        } else if (e.ctrlKey || e.metaKey) {
+          const filtered = selection.value.filter((v) => !v.equal(props.node));
+          if (filtered.length !== selection.value.length) {
+            selection.value = filtered;
+          } else {
+            selection.value = [...filtered, props.node];
+          }
+        } else {
+          selection.value = [props.node];
+        }
       }
-    });
-    onBeforeUnmount(() => {
-      offscreenCanvas.width = 0;
-      offscreenCanvas.height = 0;
-    });
-    const savedLines = ref([]);
-    const tempLine = ref();
-    const lines = computed(() => {
-      const res = [...savedLines.value];
-      if (typeof tempLine.value === "number")
-        res.unshift(tempLine.value);
-      return res;
-    });
-    function getTick(e) {
-      return pxToNum(
-        props.vertical ? e.clientY - box.value.top : e.clientX - box.value.left
-      );
+      nextTick().then(() => {
+        selecting.value = false;
+      });
     }
-    function onMousedown(e) {
-      const tick = getTick(e);
-      if (props.refline) {
-        savedLines.value.push(tick);
+    function onDblclickThumbnail(e) {
+      e.stopPropagation();
+      if (isElement(props.node)) {
+        zoomTo("selection", {
+          behavior: "smooth"
+        });
       }
     }
-    function onMousemove(e, temp = false) {
-      const tick = getTick(e);
-      if (props.refline && temp) {
-        tempLine.value = tick;
+    function onDblclickContent() {
+      editing.value = true;
+      editValue.value = props.node.name;
+      nextTick().then(() => {
+        const dom2 = inputDom.value;
+        if (dom2) {
+          dom2.focus();
+          dom2.select();
+        }
+      });
+    }
+    function onMouseenter() {
+      if (isElement(props.node)) {
+        hoverElement.value = props.node;
+        hovering.value = true;
       }
-      tipText.value = props.labelFormat(tick);
-      tipPos.value = { x: e.clientX, y: e.clientY };
     }
-    function onLeave() {
-      tempLine.value = void 0;
-      tipText.value = void 0;
+    function onMouseleave() {
+      hoverElement.value = void 0;
+      hovering.value = false;
     }
-    function onReflineDblclick(index) {
-      savedLines.value.splice(index, 1);
+    function onContextmenu(e) {
+      if (isElement(props.node)) {
+        if (!selection.value.some((v) => v.equal(props.node))) {
+          selection.value = [props.node];
+        }
+        exec("openContextMenu", e);
+      }
     }
-    function onReflineMousedown(e, index) {
-      e.stopPropagation();
-      e.preventDefault();
-      const move = (e2) => {
-        savedLines.value[index] = getTick(e2);
-      };
-      const up = () => {
-        window.removeEventListener("mousemove", move);
-        window.removeEventListener("mouseup", up);
-      };
-      window.addEventListener("mousemove", move);
-      window.addEventListener("mouseup", up);
+    function onInputBlur() {
+      editing.value = false;
+      if (editValue.value) {
+        props.node.name = editValue.value;
+        editValue.value = void 0;
+      }
     }
-    __expose({
-      box
-    });
     return (_ctx, _cache) => {
+      const _component_MceLayer = resolveComponent("MceLayer");
       return openBlock(), createElementBlock(Fragment, null, [
-        withDirectives((openBlock(), createElementBlock("div", mergeProps({
-          class: ["mce-ruler", [
-            `mce-ruler--${props.vertical ? "vertical" : "horizontal"}`
-          ]],
-          style: { "--size": `${props.size}px` }
-        }, unref(attrs), {
+        createElementVNode("div", {
+          ref_key: "dom",
+          ref: dom,
+          class: normalizeClass(["mce-layer", [
+            props.root && "mce-layer--root",
+            (__props.active || isActive.value) && "mce-layer--active",
+            isFrist.value && "mce-layer--first",
+            isLast.value && "mce-layer--last",
+            opened.value && "mce-layer--open",
+            isHoverElement.value && "mce-layer--hover"
+          ]]),
+          style: normalizeStyle({
+            "--indent-padding": `${props.indent * 16}px`
+          }),
           onMousedown,
-          onMousemove: _cache[0] || (_cache[0] = ($event) => onMousemove($event, true)),
-          onMouseleave: onLeave
-        }), [
-          createElementVNode("canvas", {
-            ref: "canvasTpl",
-            class: "mce-ruler__canvas",
-            width: props.size,
-            height: props.size
-          }, null, 8, _hoisted_1$d)
-        ], 16)), [
-          [unref(vResizeObserver), unref(resize)]
-        ]),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (item, index) => {
-          return openBlock(), createElementBlock("div", {
-            key: index,
-            class: normalizeClass(["mce-ruler-refline", {
-              "mce-ruler-refline--vertical": props.vertical,
-              "mce-ruler-refline--horizontal": !props.vertical,
-              "mce-ruler-refline--temp": item === tempLine.value
-            }]),
-            style: normalizeStyle({
-              [props.vertical ? "height" : "width"]: "0",
-              [props.vertical ? "width" : "height"]: "100%",
-              [props.vertical ? "top" : "left"]: `${numToPx(item)}px`,
-              [props.vertical ? "left" : "top"]: 0
-            }),
-            onDblclick: ($event) => onReflineDblclick(index),
-            onMousedown: ($event) => onReflineMousedown($event, index),
-            onMousemove: () => tipText.value = `${item}`,
-            onMouseleave: onLeave
-          }, null, 46, _hoisted_2$6);
-        }), 128)),
-        createVNode(_sfc_main$m, {
-          "model-value": !!tipText.value,
-          target: tipPos.value,
-          offset: 24
-        }, {
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_3$6, toDisplayString(tipText.value), 1)
+          onMouseenter,
+          onMouseleave,
+          onContextmenu
+        }, [
+          createElementVNode("div", {
+            class: "mce-layer__expand",
+            onClick: onClickExpand
+          }, [
+            props.node.children.length ? (openBlock(), createBlock(_sfc_main$B, {
+              key: 0,
+              icon: "$arrowRight"
+            })) : createCommentVNode("", true)
           ]),
-          _: 1
-        }, 8, ["model-value", "target"])
+          createElementVNode("div", {
+            class: "mce-layer__content",
+            onClick: onClickContent,
+            onDblclick: onDblclickContent
+          }, [
+            createElementVNode("div", {
+              class: "mce-layer__thumbnail",
+              onDblclick: onDblclickThumbnail
+            }, [
+              createVNode(_sfc_main$B, { icon: thumbnailIcon.value }, null, 8, ["icon"])
+            ], 32),
+            createElementVNode("div", _hoisted_1$f, [
+              withDirectives(createElementVNode("input", {
+                ref_key: "inputDom",
+                ref: inputDom,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editValue.value = $event),
+                type: "text",
+                class: "mce-layer__input",
+                autofocus: "",
+                onBlur: onInputBlur
+              }, null, 544), [
+                [vShow, editing.value],
+                [vModelText, editValue.value]
+              ]),
+              createElementVNode("div", {
+                style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 })
+              }, toDisplayString(editValue.value || props.node.name || props.node.id), 5)
+            ]),
+            createElementVNode("div", _hoisted_2$7, [
+              props.root ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(["mce-btn", {
+                  "mce-btn--hide": !hovering.value && !unref(isLock)(props.node)
+                }]),
+                onClick: _cache[1] || (_cache[1] = ($event) => unref(setLock)(props.node, !unref(isLock)(props.node)))
+              }, [
+                createVNode(_sfc_main$B, {
+                  icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
+                }, null, 8, ["icon"])
+              ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                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$B, {
+                      icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
+                    }, null, 8, ["icon"])
+                  ]),
+                  _: 1
+                }, 8, ["class"]),
+                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$B, {
+                      icon: unref(isVisible)(props.node) ? "$visible" : "$unvisible"
+                    }, null, 8, ["icon"])
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ], 64))
+            ])
+          ], 32)
+        ], 38),
+        opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.node.children, (child, key) => {
+          return openBlock(), createBlock(_component_MceLayer, {
+            key,
+            node: child,
+            indent: __props.root ? props.indent : props.indent + 1,
+            active: __props.active || isActive.value
+          }, null, 8, ["node", "indent", "active"]);
+        }), 128)) : createCommentVNode("", true)
       ], 64);
     };
   }
 });
-const _hoisted_1$c = { class: "mce-rulers" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "Rulers",
+const _hoisted_1$e = { class: "mce-layers" };
+const _hoisted_2$6 = { class: "mce-layers__wrapper" };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  __name: "Layers",
   setup(__props) {
     const {
-      camera,
-      getAabbInDrawboard,
-      selection
+      root,
+      selection,
+      state,
+      nodeIndexMap
     } = useEditor();
-    const activeAabb = computed(() => getAabbInDrawboard(selection.value));
+    const sortedSelection = computed(() => {
+      return selection.value.map((node) => {
+        return {
+          node,
+          index: nodeIndexMap.get(node.id) ?? 0
+        };
+      }).sort((a, b) => a.index - b.index).map((v) => v.node);
+    });
+    const {
+      selecting,
+      openedItems,
+      domItems
+    } = createLayer({
+      sortedSelection
+    });
+    watch(selection, (selection2) => {
+      if (state.value === "selecting" || selecting.value) {
+        return;
+      }
+      let last;
+      selection2.forEach((node) => {
+        node.findAncestor((ancestor) => {
+          const opened = openedItems.get(ancestor.id);
+          if (opened) {
+            opened.value = true;
+          }
+          return false;
+        });
+        last = node;
+      });
+      if (last) {
+        nextTick().then(() => {
+          domItems.get(last.id)?.value?.scrollIntoView({
+            block: "center"
+          });
+        });
+      }
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        createVNode(_sfc_main$l, {
-          refline: "",
-          zoom: unref(camera).zoom.x,
-          position: unref(camera).position.x,
-          selected: activeAabb.value,
-          axis: "",
-          size: 16
-        }, null, 8, ["zoom", "position", "selected"]),
-        createVNode(_sfc_main$l, {
-          refline: "",
-          zoom: unref(camera).zoom.y,
-          position: unref(camera).position.y,
-          selected: activeAabb.value,
-          axis: "",
-          vertical: "",
-          size: 16
-        }, null, 8, ["zoom", "position", "selected"]),
-        _cache[0] || (_cache[0] = createElementVNode("div", { class: "mce-rulers__left-top" }, null, -1))
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        createElementVNode("div", _hoisted_2$6, [
+          createVNode(_sfc_main$n, {
+            root: true,
+            node: unref(root),
+            opened: true
+          }, null, 8, ["node"])
+        ])
       ]);
     };
   }
 });
-const _hoisted_1$b = {
-  ref: "trackTplRef",
-  class: "mce-scrollbar__track"
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  __name: "Scrollbar",
+const _sfc_main$l = {};
+const _hoisted_1$d = {
+  class: "mce-made-with",
+  href: "https://github.com/qq15725/mce",
+  target: "_blank"
+};
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("a", _hoisted_1$d, [..._cache[0] || (_cache[0] = [
+    createElementVNode("div", null, "MADE WITH", -1),
+    createElementVNode("div", null, "MCE", -1)
+  ])]);
+}
+const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$1]]);
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  __name: "Tooltip",
   props: /* @__PURE__ */ mergeModels({
-    length: {},
-    vertical: { type: Boolean },
-    size: {},
-    offset: {}
+    ...makeMceOverlayProps({
+      location: "right",
+      offset: 8
+    })
   }, {
-    "modelValue": { required: true },
+    "modelValue": { type: Boolean },
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["scroll"], ["update:modelValue"]),
-  setup(__props, { emit: __emit }) {
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
     const props = __props;
-    const emit = __emit;
-    const position = useModel(__props, "modelValue");
-    const track = useTemplateRef("trackTplRef");
-    const thumb = useTemplateRef("thumbTplRef");
-    const trackLength = ref(0);
-    const contentLength = computed(() => {
-      return props.length + trackLength.value + Math.abs(position.value) * 2;
-    });
-    const thumbLength = computed(() => {
-      return Math.max(0.05, Math.min(1, trackLength.value / contentLength.value));
-    });
-    const thumbPosition = computed(() => {
-      return (Math.abs(position.value) + position.value) / (contentLength.value - trackLength.value) * (1 - thumbLength.value);
-    });
-    const resize = useDebounceFn(() => {
-      const box = track.value?.getBoundingClientRect() ?? { width: 0, height: 0 };
-      trackLength.value = props.vertical ? box.height : box.width;
-    }, 50);
-    const lerp = (a, b, t) => a * (1 - t) + b * t;
-    const thumbToTrack = (thumbLength2, thumbPosition2) => lerp(thumbLength2 / 2, 1 - thumbLength2 / 2, thumbPosition2);
-    const start = computed(() => thumbToTrack(thumbLength.value, thumbPosition.value));
-    const end = computed(() => 1 - start.value - thumbLength.value);
-    const thumbTop = computed(() => props.vertical ? `${start.value * 100}%` : "0%");
-    const thumbBottom = computed(() => props.vertical ? `${end.value * 100}%` : "50%");
-    const thumbLeft = computed(() => props.vertical ? "0%" : `${start.value * 100}%`);
-    const thumbRight = computed(() => props.vertical ? "50%" : `${end.value * 100}%`);
-    function update(val) {
-      emit("scroll", val - position.value);
-      position.value = val;
-    }
-    function amount(val) {
-      update(position.value + val);
+    const isActive = useModel(__props, "modelValue");
+    const overlay = useTemplateRef("overlayTpl");
+    function updateLocation() {
+      overlay.value?.updateLocation();
     }
-    const isActive = ref(false);
-    watch(track, (track2, oldTrack) => {
-      function onMousedown(event) {
-        if (!thumb.value?.contains(event.target)) {
-          return;
-        }
-        isActive.value = true;
-        let last = event;
-        event.stopPropagation();
-        function onMousemove(event2) {
-          const offset2 = {
-            x: last.clientX - event2.clientX,
-            y: last.clientY - event2.clientY
-          };
-          last = event2;
-          amount((props.vertical ? offset2.y : offset2.x) / (trackLength.value * (1 - thumbLength.value)) * contentLength.value * -1);
-        }
-        function onMouseup() {
-          isActive.value = false;
-          window.removeEventListener("mousemove", onMousemove);
-          window.removeEventListener("mouseup", onMouseup);
-        }
-        window.addEventListener("mousemove", onMousemove);
-        window.addEventListener("mouseup", onMouseup);
-      }
-      oldTrack?.removeEventListener("mousedown", onMousedown);
-      track2?.addEventListener("mousedown", onMousedown);
+    __expose({
+      updateLocation
     });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", {
-        class: normalizeClass(["mce-scrollbar", {
-          "mce-scrollbar--vertical": props.vertical,
-          "mce-scrollbar--horizontal": !props.vertical
-        }]),
-        style: normalizeStyle({
-          [props.vertical ? "height" : "width"]: `calc(100% - ${props.size + props.offset}px)`,
-          [props.vertical ? "width" : "height"]: `${props.size}px`,
-          [props.vertical ? "top" : "left"]: `${props.offset}px`
-        })
-      }, [
-        createElementVNode("div", _hoisted_1$b, [
-          createElementVNode("div", {
-            ref: "thumbTplRef",
-            class: normalizeClass(["mce-scrollbar__thumb", {
-              "mce-scrollbar__thumb--active": isActive.value
-            }]),
-            style: normalizeStyle({
-              top: thumbTop.value,
-              bottom: thumbBottom.value,
-              left: thumbLeft.value,
-              right: thumbRight.value
-            })
-          }, null, 6)
-        ], 512)
-      ], 6)), [
-        [unref(vResizeObserver), unref(resize)]
-      ]);
+      return openBlock(), createBlock(_sfc_main$A, {
+        ref: "overlayTpl",
+        modelValue: isActive.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
+        class: "mce-tooltip",
+        location: props.location,
+        offset: props.offset,
+        target: props.target,
+        attach: props.attach
+      }, createSlots({
+        default: withCtx(() => [
+          isActive.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.activator ? {
+          name: "activator",
+          fn: withCtx((activatorProps) => [
+            renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps(activatorProps)))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["modelValue", "location", "offset", "target", "attach"]);
     };
   }
 });
-const _sfc_main$i = /* @__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$j = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
-  __name: "Scrollbars",
-  props: {
-    infinite: { type: Boolean, default: true },
-    offset: { default: 0 },
-    size: { default: 8 }
-  },
-  setup(__props) {
-    const props = __props;
-    const {
-      camera,
-      viewAabb
-    } = useEditor();
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$j, 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$j, 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
-        }), null, 16, ["modelValue", "length"])
-      ], 64);
-    };
-  }
-});
-const _hoisted_1$a = { class: "mce-transformable__svg" };
-const _hoisted_2$5 = ["rx", "ry"];
-const _hoisted_3$5 = ["x", "y", "width", "height", "aria-label"];
-const _hoisted_4$3 = ["cx", "cy", "r", "aria-label"];
-const _hoisted_5$2 = { "pointer-events": "all" };
-const _hoisted_6$2 = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"];
-const _hoisted_7$2 = {
-  "pointer-events": "all",
-  class: "mce-transformable__svg-slot"
-};
-const _hoisted_8$1 = {
-  key: 0,
-  class: "mce-transformable__tip"
-};
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  __name: "Transformable",
+  __name: "Ruler",
   props: {
-    tag: { default: "div" },
-    modelValue: {},
-    movable: { type: Boolean, default: true },
-    rotatable: { type: Boolean, default: true },
-    resizable: { type: Boolean, default: true },
-    adjustableBorderRadius: { type: Boolean, default: false },
-    threshold: { default: 0 },
-    resizeStrategy: {},
-    handleStrategy: {},
-    handleShape: { default: "rect" },
-    hideUi: { type: Boolean },
-    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",
-      // rotate
-      "rotate-top-left",
-      "rotate-top-right",
-      "rotate-bottom-left",
-      "rotate-bottom-right"
-    ] },
-    initialSize: { type: Boolean },
-    borderStyle: {},
-    tipFormat: {}
+    size: { default: 16 },
+    vertical: { type: Boolean },
+    zoom: { default: 1 },
+    position: { default: 0 },
+    unit: { default: 50 },
+    unitFractions: { default: () => [1, 2, 5, 10] },
+    selected: {},
+    pixelRatio: { default: window.devicePixelRatio || 1 },
+    refline: { type: Boolean },
+    axis: { type: Boolean },
+    labelFormat: { type: Function, default: (tick) => String(tick) }
   },
-  emits: ["update:modelValue", "start", "move", "end"],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props, { expose: __expose }) {
     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)
-    };
-    const modelValue = useModel(props, "modelValue");
-    const model = computed({
-      get: () => {
-        let { left = 0, top = 0, width = 0, height = 0, rotate = 0, borderRadius = 0 } = modelValue.value ?? {};
-        if (Number.isNaN(Number(width)))
-          width = 0;
-        if (Number.isNaN(Number(height)))
-          height = 0;
-        return { left, top, width, height, rotate, borderRadius };
-      },
-      set: (val) => modelValue.value = val
+    const attrs = useAttrs();
+    const pixelRatio = computed(() => props.pixelRatio);
+    const tipText = ref();
+    const tipPos = ref({ x: 0, y: 0 });
+    const canvas = useTemplateRef("canvasTpl");
+    const offscreenCanvas = "OffscreenCanvas" in window ? new OffscreenCanvas(props.size, props.size) : document.createElement("canvas");
+    const ctx = offscreenCanvas.getContext("2d");
+    const box = ref();
+    const colors = reactive({
+      text: "#000",
+      border: "#000"
     });
-    const transforming = ref(false);
-    const activeHandle = ref();
-    const computedHandles = computed(() => {
-      const size = 8;
-      const { width = 0, height = 0, borderRadius } = model.value;
-      const center = { x: width / 2, y: height / 2 };
-      const shape = props.handleShape;
-      const lines = [
-        { type: "top", points: [[0, 0], [1, 0]] },
-        { type: "right", points: [[1, 0], [1, 1]] },
-        { type: "bottom", points: [[0, 1], [1, 1]] },
-        { type: "left", points: [[0, 0], [0, 1]] }
-      ];
-      const points = [
-        { type: "top", point: [0.5, 0] },
-        { type: "right", point: [1, 0.5] },
-        { type: "bottom", point: [0.5, 1] },
-        { type: "left", point: [0, 0.5] },
-        { type: "top-left", point: [0, 0] },
-        { type: "top-right", point: [1, 0] },
-        { type: "bottom-left", point: [0, 1] },
-        { type: "bottom-right", point: [1, 1] }
-      ];
-      const lineHandles = lines.map((item) => {
-        const [p1, p2] = item.points;
-        const minX = Math.min(p1[0], p2[0]) * width;
-        const maxX = Math.max(p1[0], p2[0]) * width;
-        const minY = Math.min(p1[1], p2[1]) * height;
-        const maxY = Math.max(p1[1], p2[1]) * height;
-        return {
-          type: item.type,
-          x: minX - size / 2,
-          y: minY - size / 2,
-          width: maxX - minX + size,
-          height: maxY - minY + size
-        };
-      });
-      const pointHandles = points.map((item) => {
-        return {
-          type: item.type,
-          shape,
-          x: item.point[0] * width - size / 2,
-          y: item.point[1] * height - size / 2,
-          width: size,
-          height: size
-        };
-      });
-      const diagonalPointHandles = pointHandles.filter((item) => item.type.split("-").length === 2);
-      const rotateHandles = diagonalPointHandles.map((item) => {
-        const sign = {
-          x: center.x - item.x > 0 ? 1 : -1,
-          y: center.y - item.y > 0 ? 1 : -1
-        };
-        return {
-          ...item,
-          shape: void 0,
-          type: `rotate-${item.type}`,
-          x: item.x - sign.x * size,
-          y: item.y - sign.y * size
-        };
-      });
-      const minSize = Math.min(width, height);
-      const borderRadiusHandles = props.adjustableBorderRadius ? diagonalPointHandles.map((item) => {
-        const sign = {
-          x: center.x - item.x > 0 ? 1 : -1,
-          y: center.y - item.y > 0 ? 1 : -1
-        };
-        const offset2 = minSize * 0.1;
-        return {
-          ...item,
-          shape: "circle",
-          type: `border-radius-${item.type}`,
-          x: item.x + sign.x * Math.min(width / 2, offset2 + borderRadius),
-          y: item.y + sign.y * Math.min(height / 2, offset2 + borderRadius)
-        };
-      }) : [];
-      let handles;
-      if (props.handleStrategy === "point") {
-        handles = [
-          // move
-          ...lineHandles.map((item) => ({ ...item, type: "move" })),
-          // resize
-          ...pointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          // border-radius
-          ...borderRadiusHandles,
-          // rotate
-          ...rotateHandles
-        ];
-      } else {
-        handles = [
-          // resize
-          ...lineHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          ...diagonalPointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          // border-radius
-          ...borderRadiusHandles,
-          // rotate
-          ...rotateHandles
-        ];
+    function drawSelected() {
+      if (!props.selected?.width || !props.selected?.height)
+        return;
+      ctx.fillStyle = "#6165FD20";
+      const offset2 = props.vertical ? props.selected.top : props.selected.left;
+      const length = props.vertical ? props.selected.height : props.selected.width;
+      ctx.fillRect(offset2, 0, length, props.size);
+    }
+    function drawAxis(start2, end2, size, color) {
+      ctx.lineWidth = size;
+      ctx.strokeStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(start2[0], start2[1]);
+      ctx.lineTo(end2[0], end2[1]);
+      ctx.stroke();
+    }
+    function drawTick(tick, len, direction = 1) {
+      const x1 = tick;
+      const y1 = props.size;
+      const x2 = tick;
+      const y2 = props.size - len * direction;
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+    }
+    function drawText(content, tick, top, size) {
+      ctx.font = `${size}px sans-serif`;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "bottom";
+      const x2 = tick;
+      const y2 = props.size - top;
+      ctx.save();
+      if (props.vertical) {
+        ctx.translate(0, props.size);
+        ctx.scale(1, -1);
       }
-      return handles.filter((handle) => {
-        if (props.handles.includes(handle.type)) {
-          return !(!props.resizable && handle.type.startsWith("resize") || !props.rotatable && handle.type.startsWith("rotate") || !props.movable && handle.type === "move");
+      ctx.fillText(content, x2, y2);
+      ctx.restore();
+    }
+    const unit = computed(() => {
+      const idealUnit = Math.max(props.unit / props.zoom, 1);
+      const unitFractions = props.unitFractions;
+      const exponent = Math.floor(Math.log10(idealUnit));
+      const fraction = idealUnit / 10 ** exponent;
+      let niceFraction = unitFractions[unitFractions.length - 1];
+      for (const cur of unitFractions) {
+        if (fraction <= cur) {
+          niceFraction = cur;
+          break;
         }
-        return false;
-      }).map((anchor) => {
-        anchor.width = Math.max(anchor.width, 0);
-        anchor.height = Math.max(anchor.height, 0);
-        return anchor;
-      });
+      }
+      return niceFraction * 10 ** exponent;
     });
-    const handlesRef = ref();
-    const sizeStyle = computed(() => {
-      const { width = 0, height = 0 } = model.value;
-      return {
-        width: props.initialSize && !width ? void 0 : `${width}px`,
-        height: props.initialSize && !height ? void 0 : `${height}px`
-      };
+    const start = computed(() => {
+      const value = props.position / props.zoom;
+      return Math.floor(value / unit.value) * unit.value;
     });
-    const style = computed(() => {
-      const { left = 0, top = 0, rotate = 0 } = model.value;
-      const radian = rotate * Math.PI / 180;
-      const cos = Math.cos(radian);
-      const sin = Math.sin(radian);
-      return {
-        ...sizeStyle.value,
-        transform: `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${left}, ${top})`
-      };
+    const end = computed(() => {
+      const len = (props.vertical ? box.value?.height : box.value?.width) ?? 0;
+      const value = len / props.zoom;
+      return start.value + Math.ceil(value / unit.value) * unit.value;
     });
-    const tip = computed(() => props.tipFormat?.("size"));
-    function start(event, index) {
-      if (event && event.button !== void 0 && event.button !== 0) {
-        return false;
-      }
-      event?.preventDefault();
-      event?.stopPropagation();
-      const { left, top, width, height, rotate, borderRadius } = model.value;
-      let aspectRatio = 0;
-      if (width && height) {
-        aspectRatio = width / height;
+    function numToPx(num) {
+      return Math.round(num * props.zoom - props.position);
+    }
+    function pxToNum(px) {
+      return Math.round((px + props.position) / props.zoom);
+    }
+    function render2() {
+      const cvs = canvas.value;
+      if (!cvs || !offscreenCanvas.width || !offscreenCanvas.height)
+        return;
+      ctx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+      ctx.save();
+      ctx.scale(pixelRatio.value, pixelRatio.value);
+      if (props.vertical) {
+        ctx.scale(1, -1);
+        ctx.translate(0, 0);
+        ctx.rotate(-Math.PI / 2);
       }
-      const handle = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
-      activeHandle.value = handle.type;
-      const isMove = handle.type === "move";
-      const isRotate = handle.type.startsWith("rotate");
-      const isBorderRadius = handle.type.startsWith("border-radius");
-      const isHorizontal = handle.type === "resize-left" || handle.type === "resize-right";
-      const isHorizontalVertical = handle.type.split("-").length === 2;
-      const centerPoint = {
-        x: left + width / 2,
-        y: top + height / 2
-      };
-      const startPoint = {
-        x: left,
-        y: top
-      };
-      if (!isMove) {
-        startPoint.x += handle.x + handle.width / 2;
-        startPoint.y += handle.y + handle.height / 2;
+      drawSelected();
+      if (props.axis) {
+        drawAxis(
+          [0, props.size],
+          [props.vertical ? cvs.height : cvs.width, props.size],
+          2,
+          colors.border
+        );
       }
-      const sign = {
-        x: startPoint.x - centerPoint.x > 0 ? 1 : -1,
-        y: startPoint.y - centerPoint.y > 0 ? 1 : -1
-      };
-      const rotatedStartPoint = rotatePoint(startPoint, centerPoint, rotate);
-      const rotatedSymmetricPoint = {
-        x: centerPoint.x * 2 - rotatedStartPoint.x,
-        y: centerPoint.y * 2 - rotatedStartPoint.y
+      const drawPrimary = (tick, label) => {
+        drawTick(tick, 10);
+        drawText(label, tick + 2, 4, 8);
       };
-      const startAngle = Math.atan2(
-        rotatedStartPoint.y - centerPoint.y,
-        rotatedStartPoint.x - centerPoint.x
-      ) / (Math.PI / 180);
-      let startClientPoint = event ? { x: event.clientX, y: event.clientY } : void 0;
-      function startTransform() {
-        transforming.value = true;
-        emit("start", model.value);
-      }
-      if (!props.threshold && !transforming.value) {
-        startTransform();
-      }
-      function onMove(event2) {
-        const updated = {};
-        if (!startClientPoint) {
-          startClientPoint = { x: event2.clientX, y: event2.clientY };
-        }
-        const rotatedOffset = {
-          x: event2.clientX - startClientPoint.x,
-          y: event2.clientY - startClientPoint.y
-        };
-        if (!transforming.value) {
-          if (Math.abs(rotatedOffset.x) < props.threshold && Math.abs(rotatedOffset.y) < props.threshold) {
-            return;
-          }
-          startTransform();
+      const drawSecondary = (tick) => drawTick(tick, 4);
+      let inc = unit.value / 10;
+      inc = (inc > 0 ? 1 : -1) * Math.max(1, Math.abs(inc));
+      ctx.beginPath();
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = colors.text;
+      ctx.fillStyle = colors.text;
+      for (let tick = start.value; tick <= end.value; tick += inc) {
+        if (tick % unit.value === 0) {
+          drawPrimary(numToPx(tick), props.labelFormat(tick));
         }
-        const rotatedCurrentPoint = {
-          x: rotatedStartPoint.x + rotatedOffset.x,
-          y: rotatedStartPoint.y + rotatedOffset.y
-        };
-        if (isMove) {
-          if (props.movable) {
-            updated.left = startPoint.x + rotatedOffset.x;
-            updated.top = startPoint.y + rotatedOffset.y;
-          }
-        } else if (isRotate) {
-          if (props.rotatable) {
-            const endAngle = Math.atan2(
-              rotatedCurrentPoint.y - centerPoint.y,
-              rotatedCurrentPoint.x - centerPoint.x
-            ) / (Math.PI / 180);
-            updated.rotate = (rotate + endAngle - startAngle + 360) % 360;
-          }
-        } else if (isBorderRadius) {
-          const offset2 = rotatePoint(rotatedOffset, { x: 0, y: 0 }, -rotate);
-          const _offset = Math.abs(offset2.x) < Math.abs(offset2.y) ? -sign.x * offset2.x : -sign.y * offset2.y * aspectRatio;
-          updated.borderRadius = Math.min(
-            Math.max(0, borderRadius + _offset),
-            Math.min(width / 2, height / 2)
-          );
-        } else if (isHorizontalVertical) {
-          const currentPoint = rotatePoint(rotatedCurrentPoint, centerPoint, -rotate);
-          const newCurrentPoint = isHorizontal ? { x: currentPoint.x, y: startPoint.y } : { x: startPoint.x, y: currentPoint.y };
-          const newRotatedCurrentPoint = rotatePoint(newCurrentPoint, centerPoint, rotate);
-          const distance = Math.abs(getDistance(newRotatedCurrentPoint, rotatedSymmetricPoint));
-          if (isHorizontal) {
-            updated.width = distance;
-            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
-              updated.height = distance / aspectRatio;
-            } else {
-              updated.height = height;
-            }
-          } else {
-            updated.height = distance;
-            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
-              updated.width = distance * aspectRatio;
-            } else {
-              updated.width = width;
-            }
-          }
-          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
-          updated.left = newCenterPoint.x - updated.width / 2;
-          updated.top = newCenterPoint.y - updated.height / 2;
-        } else {
-          let newRotatedCurrentPoint;
-          if ((props.resizeStrategy === "lockAspectRatio" || props.resizeStrategy === "lockAspectRatioDiagonal") && aspectRatio) {
-            const offset2 = rotatePoint(rotatedOffset, { x: 0, y: 0 }, -rotate);
-            const _offset = Math.abs(offset2.x) < Math.abs(offset2.y) ? sign.x * offset2.x : sign.y * offset2.y * aspectRatio;
-            newRotatedCurrentPoint = rotatePoint(
-              {
-                x: startPoint.x + sign.x * _offset,
-                y: startPoint.y + sign.y * _offset / aspectRatio
-              },
-              centerPoint,
-              rotate
-            );
-          } else {
-            newRotatedCurrentPoint = rotatedCurrentPoint;
-          }
-          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
-          const points = [
-            rotatePoint(newRotatedCurrentPoint, newCenterPoint, -rotate),
-            rotatePoint(rotatedSymmetricPoint, newCenterPoint, -rotate)
-          ];
-          const [minX, maxX] = points[0].x > points[1].x ? [points[1].x, points[0].x] : [points[0].x, points[1].x];
-          const [minY, maxY] = points[0].y > points[1].y ? [points[1].y, points[0].y] : [points[0].y, points[1].y];
-          updated.width = maxX - minX;
-          updated.height = maxY - minY;
-          updated.left = minX;
-          updated.top = minY;
+      }
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = colors.border;
+      for (let tick = start.value; tick <= end.value; tick += inc) {
+        if (tick % unit.value === 0) ;
+        else if (tick % inc === 0) {
+          drawSecondary(numToPx(tick));
         }
-        if ("width" in updated && updated.width <= 0 || "height" in updated && updated.height <= 0) {
-          return;
+      }
+      ctx.stroke();
+      ctx.restore();
+      if ("transferToImageBitmap" in offscreenCanvas) {
+        cvs.getContext("bitmaprenderer").transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());
+      } else {
+        const mainCtx = cvs.getContext("2d");
+        if (mainCtx) {
+          mainCtx.clearRect(0, 0, cvs.width, cvs.height);
+          mainCtx.drawImage(offscreenCanvas, 0, 0);
         }
-        const oldValue = { ...model.value };
-        const newValue = { ...model.value, ...updated };
-        model.value = newValue;
-        emit("move", newValue, oldValue);
       }
-      function onEnd() {
-        window.removeEventListener("pointermove", onMove);
-        window.removeEventListener("pointerup", onEnd, true);
-        transforming.value = false;
-        activeHandle.value = void 0;
-        emit("end", model.value);
+    }
+    watch(
+      [canvas, () => props.zoom, () => props.position, () => props.selected],
+      () => {
+        render2();
+      },
+      { immediate: true, deep: true }
+    );
+    const resize = useDebounceFn(() => {
+      if (!canvas.value)
+        return;
+      const _box = canvas.value.parentElement.getBoundingClientRect();
+      offscreenCanvas.width = canvas.value.width = _box.width * pixelRatio.value;
+      offscreenCanvas.height = canvas.value.height = _box.height * pixelRatio.value;
+      canvas.value.style.width = `${_box.width}px`;
+      canvas.value.style.height = `${_box.height}px`;
+      box.value = _box;
+      render2();
+    }, 50);
+    onMounted(() => {
+      resize();
+      const dom = canvas.value;
+      if (dom) {
+        const style = window.getComputedStyle(dom);
+        colors.text = style.getPropertyValue("--text-color").trim();
+        colors.border = style.getPropertyValue("--border-color").trim();
       }
-      window.addEventListener("pointermove", onMove);
-      window.addEventListener("pointerup", onEnd, true);
-      return true;
+    });
+    onBeforeUnmount(() => {
+      offscreenCanvas.width = 0;
+      offscreenCanvas.height = 0;
+    });
+    const savedLines = ref([]);
+    const tempLine = ref();
+    const lines = computed(() => {
+      const res = [...savedLines.value];
+      if (typeof tempLine.value === "number")
+        res.unshift(tempLine.value);
+      return res;
+    });
+    function getTick(e) {
+      return pxToNum(
+        props.vertical ? e.clientY - box.value.top : e.clientX - box.value.left
+      );
     }
-    const cursorMap = {
-      rotate: '<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" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z" fill="white"/>',
-      resizeXy: '<path d="m9 17.9907v.005l5.997 5.996.001-3.999h1.999 2.02v4l5.98-6.001-5.98-5.999.001 4.019-2.021.002h-2l.001-4.022zm1.411.003 3.587-3.588-.001 2.587h3.5 2.521v-2.585l3.565 3.586-3.564 3.585-.001-2.585h-2.521l-3.499-.001-.001 2.586z" fill="white"/><path d="m17.4971 18.9932h2.521v2.586l3.565-3.586-3.565-3.585v2.605h-2.521-3.5v-2.607l-3.586 3.587 3.586 3.586v-2.587z" fill="black"/>',
-      resizeBevel: '<path d="m19.7432 17.0869-4.072 4.068 2.829 2.828-8.473-.013-.013-8.47 2.841 2.842 4.075-4.068 1.414-1.415-2.844-2.842h8.486v8.484l-2.83-2.827z" fill="white"/><path d="m18.6826 16.7334-4.427 4.424 1.828 1.828-5.056-.016-.014-5.054 1.842 1.841 4.428-4.422 2.474-2.475-1.844-1.843h5.073v5.071l-1.83-1.828z" fill="black"/>'
-    };
-    function createCursor(type, angle) {
-      const path = cursorMap[type];
-      return `<svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><filter id="shadow" color-interpolation-filters="sRGB"><feDropShadow dx="1" dy="1" stdDeviation="1.2" flood-opacity=".5"/></filter></defs><g fill="none" transform="rotate(${angle} 16 16)" filter="url(%23shadow)">${path}</g></svg>`.replace(/"/g, "'");
+    function onMousedown(e) {
+      const tick = getTick(e);
+      if (props.refline) {
+        savedLines.value.push(tick);
+      }
     }
-    function getCursor(type) {
-      if (type === "move")
-        return "move";
-      const create = cursors[type];
-      if (!create) {
-        return "default";
+    function onMousemove(e, temp = false) {
+      const tick = getTick(e);
+      if (props.refline && temp) {
+        tempLine.value = tick;
       }
-      return `url("data:image/svg+xml,${create(model.value.rotate ?? 0)}") 16 16, pointer`;
+      tipText.value = props.labelFormat(tick);
+      tipPos.value = { x: e.clientX, y: e.clientY };
     }
-    function rotatePoint(point, origin, angle) {
-      const radian = angle * Math.PI / 180;
-      const cos = Math.cos(radian);
-      const sin = Math.sin(radian);
-      return {
-        x: (point.x - origin.x) * cos - (point.y - origin.y) * sin + origin.x,
-        y: (point.x - origin.x) * sin + (point.y - origin.y) * cos + origin.y
-      };
+    function onLeave() {
+      tempLine.value = void 0;
+      tipText.value = void 0;
     }
-    function getMidpoint(point1, point2) {
-      return {
-        x: (point2.x + point1.x) / 2,
-        y: (point2.y + point1.y) / 2
-      };
+    function onReflineDblclick(index) {
+      savedLines.value.splice(index, 1);
     }
-    function getDistance(point1, point2) {
-      const dx = point2.x - point1.x;
-      const dy = point2.y - point1.y;
-      return (dx + dy >= 0 ? 1 : -1) * Math.sqrt(dx * dx + dy * dy);
+    function onReflineMousedown(e, index) {
+      e.stopPropagation();
+      e.preventDefault();
+      const move = (e2) => {
+        savedLines.value[index] = getTick(e2);
+      };
+      const up = () => {
+        window.removeEventListener("mousemove", move);
+        window.removeEventListener("mouseup", up);
+      };
+      window.addEventListener("mousemove", move);
+      window.addEventListener("mouseup", up);
     }
-    onMounted(async () => {
-      const vm = getCurrentInstance();
-      const root = vm?.proxy?.$el;
-      if (root && props.initialSize) {
-        await nextTick();
-        let width;
-        let height;
-        const style2 = getComputedStyle(root);
-        if (style2.width.endsWith("px") && style2.height.endsWith("px")) {
-          width = Number(style2.width.replace("px", ""));
-          height = Number(style2.height.replace("px", ""));
-        } else {
-          ({ width, height } = root.getBoundingClientRect());
+    __expose({
+      box
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        withDirectives((openBlock(), createElementBlock("div", mergeProps({
+          class: ["mce-ruler", [
+            `mce-ruler--${props.vertical ? "vertical" : "horizontal"}`
+          ]],
+          style: { "--size": `${props.size}px` }
+        }, unref(attrs), {
+          onMousedown,
+          onMousemove: _cache[0] || (_cache[0] = ($event) => onMousemove($event, true)),
+          onMouseleave: onLeave
+        }), [
+          createElementVNode("canvas", {
+            ref: "canvasTpl",
+            class: "mce-ruler__canvas",
+            width: props.size,
+            height: props.size
+          }, null, 8, _hoisted_1$c)
+        ], 16)), [
+          [unref(vResizeObserver), unref(resize)]
+        ]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            class: normalizeClass(["mce-ruler-refline", {
+              "mce-ruler-refline--vertical": props.vertical,
+              "mce-ruler-refline--horizontal": !props.vertical,
+              "mce-ruler-refline--temp": item === tempLine.value
+            }]),
+            style: normalizeStyle({
+              [props.vertical ? "height" : "width"]: "0",
+              [props.vertical ? "width" : "height"]: "100%",
+              [props.vertical ? "top" : "left"]: `${numToPx(item)}px`,
+              [props.vertical ? "left" : "top"]: 0
+            }),
+            onDblclick: ($event) => onReflineDblclick(index),
+            onMousedown: ($event) => onReflineMousedown($event, index),
+            onMousemove: () => tipText.value = `${item}`,
+            onMouseleave: onLeave
+          }, null, 46, _hoisted_2$5);
+        }), 128)),
+        createVNode(_sfc_main$k, {
+          "model-value": !!tipText.value,
+          target: tipPos.value,
+          offset: 24
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_3$5, toDisplayString(tipText.value), 1)
+          ]),
+          _: 1
+        }, 8, ["model-value", "target"])
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$b = { class: "mce-rulers" };
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Rulers",
+  setup(__props) {
+    const {
+      camera,
+      selectionAabbInDrawboard
+    } = useEditor();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createVNode(_sfc_main$j, {
+          refline: "",
+          zoom: unref(camera).zoom.x,
+          position: unref(camera).position.x,
+          selected: unref(selectionAabbInDrawboard),
+          axis: "",
+          size: 16
+        }, null, 8, ["zoom", "position", "selected"]),
+        createVNode(_sfc_main$j, {
+          refline: "",
+          zoom: unref(camera).zoom.y,
+          position: unref(camera).position.y,
+          selected: unref(selectionAabbInDrawboard),
+          axis: "",
+          vertical: "",
+          size: 16
+        }, null, 8, ["zoom", "position", "selected"]),
+        _cache[0] || (_cache[0] = createElementVNode("div", { class: "mce-rulers__left-top" }, null, -1))
+      ]);
+    };
+  }
+});
+const _hoisted_1$a = {
+  ref: "trackTplRef",
+  class: "mce-scrollbar__track"
+};
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "Scrollbar",
+  props: /* @__PURE__ */ mergeModels({
+    length: {},
+    vertical: { type: Boolean },
+    size: {},
+    offset: {}
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["scroll"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const position = useModel(__props, "modelValue");
+    const track = useTemplateRef("trackTplRef");
+    const thumb = useTemplateRef("thumbTplRef");
+    const trackLength = ref(0);
+    const contentLength = computed(() => {
+      return props.length + trackLength.value + Math.abs(position.value) * 2;
+    });
+    const thumbLength = computed(() => {
+      return Math.max(0.05, Math.min(1, trackLength.value / contentLength.value));
+    });
+    const thumbPosition = computed(() => {
+      return (Math.abs(position.value) + position.value) / (contentLength.value - trackLength.value) * (1 - thumbLength.value);
+    });
+    const resize = useDebounceFn(() => {
+      const box = track.value?.getBoundingClientRect() ?? { width: 0, height: 0 };
+      trackLength.value = props.vertical ? box.height : box.width;
+    }, 50);
+    const lerp = (a, b, t) => a * (1 - t) + b * t;
+    const thumbToTrack = (thumbLength2, thumbPosition2) => lerp(thumbLength2 / 2, 1 - thumbLength2 / 2, thumbPosition2);
+    const start = computed(() => thumbToTrack(thumbLength.value, thumbPosition.value));
+    const end = computed(() => 1 - start.value - thumbLength.value);
+    const thumbTop = computed(() => props.vertical ? `${start.value * 100}%` : "0%");
+    const thumbBottom = computed(() => props.vertical ? `${end.value * 100}%` : "50%");
+    const thumbLeft = computed(() => props.vertical ? "0%" : `${start.value * 100}%`);
+    const thumbRight = computed(() => props.vertical ? "50%" : `${end.value * 100}%`);
+    function update(val) {
+      emit("scroll", val - position.value);
+      position.value = val;
+    }
+    function amount(val) {
+      update(position.value + val);
+    }
+    const isActive = ref(false);
+    watch(track, (track2, oldTrack) => {
+      function onMousedown(event) {
+        if (!thumb.value?.contains(event.target)) {
+          return;
         }
-        if (width && height) {
-          model.value = { ...model.value, width, height };
-        } else if ("ResizeObserver" in globalThis) {
-          const observer = new ResizeObserver(([entry]) => {
-            if (entry.contentRect.width && entry.contentRect.height) {
-              model.value = {
-                ...model.value,
-                width: entry.contentRect.width,
-                height: entry.contentRect.height
-              };
-              observer.unobserve(root);
-            }
-          });
-          observer.observe(root);
+        isActive.value = true;
+        let last = event;
+        event.stopPropagation();
+        function onMousemove(event2) {
+          const offset2 = {
+            x: last.clientX - event2.clientX,
+            y: last.clientY - event2.clientY
+          };
+          last = event2;
+          amount((props.vertical ? offset2.y : offset2.x) / (trackLength.value * (1 - thumbLength.value)) * contentLength.value * -1);
+        }
+        function onMouseup() {
+          isActive.value = false;
+          window.removeEventListener("mousemove", onMousemove);
+          window.removeEventListener("mouseup", onMouseup);
         }
+        window.addEventListener("mousemove", onMousemove);
+        window.addEventListener("mouseup", onMouseup);
       }
+      oldTrack?.removeEventListener("mousedown", onMousedown);
+      track2?.addEventListener("mousedown", onMousedown);
     });
-    __expose({
-      start,
-      activeHandle,
-      transforming
-    });
-    function Diagonal() {
-      const handle = activeHandle.value;
-      if (!handle || !handle.startsWith("resize")) {
-        return void 0;
-      }
-      switch (props.resizeStrategy) {
-        case "lockAspectRatio":
-          break;
-        case "lockAspectRatioDiagonal":
-          if (handle.split("-").length === 2) {
-            return void 0;
-          }
-          break;
-        default:
-          return void 0;
-      }
-      if (handle === "resize-top" || handle === "resize-right" || handle === "resize-top-right" || handle === "resize-bottom-left") {
-        return h("line", {
-          class: "mce-transformable__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") {
-        return h("line", {
-          class: "mce-transformable__diagonal",
-          x1: "0",
-          y1: "0",
-          x2: "100%",
-          y2: "100%"
-        });
-      }
-      return void 0;
-    }
     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}`
-        ]]),
-        style: normalizeStyle(style.value)
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {
-            value: unref(modelValue),
-            props: {
-              onPointerdown: start
-            },
-            start
-          }),
-          (openBlock(), createElementBlock("svg", _hoisted_1$a, [
-            _cache[0] || (_cache[0] = createElementVNode("rect", {
-              width: "100%",
-              height: "100%",
-              fill: "none",
-              class: "mce-transformable__rect"
-            }, null, -1)),
-            createElementVNode("rect", {
-              class: "mce-transformable__rect",
-              width: "100%",
-              height: "100%",
-              fill: "none",
-              rx: model.value.borderRadius,
-              ry: model.value.borderRadius
-            }, null, 8, _hoisted_2$5),
-            createVNode(Diagonal),
-            createElementVNode("g", null, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
-                return openBlock(), createElementBlock(Fragment, { key: index }, [
-                  handle.shape ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    handle.shape === "rect" ? (openBlock(), createElementBlock("rect", {
-                      key: 0,
-                      x: handle.x,
-                      y: handle.y,
-                      width: handle.width,
-                      height: handle.height,
-                      "aria-label": handle.type,
-                      class: "mce-transformable__handle"
-                    }, null, 8, _hoisted_3$5)) : (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$3))
-                  ], 64)) : createCommentVNode("", true)
-                ], 64);
-              }), 128))
-            ]),
-            createElementVNode("g", _hoisted_5$2, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
-                return openBlock(), createElementBlock("rect", {
-                  key: index,
-                  ref_for: true,
-                  ref_key: "handlesRef",
-                  ref: handlesRef,
-                  x: handle.x,
-                  y: handle.y,
-                  width: handle.width,
-                  height: handle.height,
-                  "aria-label": handle.type,
-                  class: "mce-transformable__handle-rect",
-                  cursor: transforming.value ? "auto" : getCursor(handle.type),
-                  onPointerdown: (event) => start(event, index)
-                }, null, 40, _hoisted_6$2);
-              }), 128))
-            ]),
-            createElementVNode("g", _hoisted_7$2, [
-              renderSlot(_ctx.$slots, "svg", { box: model.value })
-            ])
-          ])),
-          tip.value ? (openBlock(), createElementBlock("div", _hoisted_8$1, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
-        ]),
-        _: 3
-      }, 8, ["class", "style"]);
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: normalizeClass(["mce-scrollbar", {
+          "mce-scrollbar--vertical": props.vertical,
+          "mce-scrollbar--horizontal": !props.vertical
+        }]),
+        style: normalizeStyle({
+          [props.vertical ? "height" : "width"]: `calc(100% - ${props.size + props.offset}px)`,
+          [props.vertical ? "width" : "height"]: `${props.size}px`,
+          [props.vertical ? "top" : "left"]: `${props.offset}px`
+        })
+      }, [
+        createElementVNode("div", _hoisted_1$a, [
+          createElementVNode("div", {
+            ref: "thumbTplRef",
+            class: normalizeClass(["mce-scrollbar__thumb", {
+              "mce-scrollbar__thumb--active": isActive.value
+            }]),
+            style: normalizeStyle({
+              top: thumbTop.value,
+              bottom: thumbBottom.value,
+              left: thumbLeft.value,
+              right: thumbRight.value
+            })
+          }, null, 6)
+        ], 512)
+      ], 6)), [
+        [unref(vResizeObserver), unref(resize)]
+      ]);
     };
   }
 });
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Scrollbars",
+  props: {
+    infinite: { type: Boolean, default: true },
+    offset: { default: 0 },
+    size: { default: 8 }
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      camera,
+      viewAabb
+    } = useEditor();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        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$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
+        }), null, 16, ["modelValue", "length"])
+      ], 64);
+    };
+  }
+});
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -8723,12 +9155,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,
@@ -8749,8 +9183,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;
       });
@@ -8762,15 +9196,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
       };
     });
@@ -8811,7 +9245,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;
@@ -8839,7 +9273,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({
@@ -8850,7 +9284,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)
@@ -8859,7 +9293,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)
@@ -8868,14 +9302,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$h, {
+        selectionTransform.value.width && selectionTransform.value.height ? (openBlock(), createBlock(_sfc_main$v, {
           key: 1,
           ref: "transformableRef",
           modelValue: selectionTransform.value,
@@ -8886,7 +9321,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")),
@@ -8902,7 +9337,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)
@@ -8910,15 +9346,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"
@@ -8944,7 +9371,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       ...props.defaultTransform
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$h, {
+      return openBlock(), createBlock(_sfc_main$v, {
         modelValue: transform.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => transform.value = $event),
         class: "mce-float-panel",
@@ -8956,11 +9383,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$z, { icon: "$close" })
+                  createVNode(_sfc_main$B, { icon: "$close" })
                 ]),
                 _: 1
               })
@@ -9110,13 +9537,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
 const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-c4234331"]]);
 const _hoisted_1$6 = { class: "mce-statusbar" };
 const _hoisted_2$3 = { class: "mce-statusbar__main" };
@@ -9164,7 +9584,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             ])
           ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", _hoisted_8, [
-              createVNode(_sfc_main$z, { icon: "$mouseRightClick" })
+              createVNode(_sfc_main$B, { icon: "$mouseRightClick" })
             ]),
             _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
             createElementVNode("div", _hoisted_9, [
@@ -9178,7 +9598,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$z, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$B, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
             ]),
             _cache[4] || (_cache[4] = createElementVNode("span", null, " + ", -1)),
@@ -9188,7 +9608,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$z, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$B, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
             ]),
             _cache[6] || (_cache[6] = createElementVNode("span", null, " + ", -1)),
@@ -9198,7 +9618,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$z, { icon: "$mouseLeftClick" }),
+              createVNode(_sfc_main$B, { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
             ])
           ], 64))
@@ -9275,6 +9695,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       await nextTick();
       if (editor.pointerDown(e)) {
         editor.selectAll();
+        editor._updateSelectionByDom();
         return true;
       }
       return false;
@@ -9521,7 +9942,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             class: "mce-timeline__play",
             onClick: toggle
           }, [
-            createVNode(_sfc_main$z, {
+            createVNode(_sfc_main$B, {
               icon: paused.value ? "$play" : "$pause"
             }, null, 8, ["icon"])
           ])
@@ -9550,7 +9971,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", _hoisted_5, [
               createElementVNode("div", _hoisted_6, [
-                createVNode(_sfc_main$l, {
+                createVNode(_sfc_main$j, {
                   ref: "rulerTpl",
                   zoom: 1 / unref(msPerPx) * fps.value,
                   unit: 100,
@@ -9624,12 +10045,16 @@ 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,
       renderEngine,
@@ -9638,12 +10063,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       hoverElement,
       state,
       setCursor,
-      isFrame,
       selectArea,
       exec,
       isLock,
+      selectionAabbInDrawboard,
       elementSelection,
-      getAabbInDrawboard,
       drawboardAabb,
       drawboardPointer,
       screenCenterOffset,
@@ -9689,7 +10113,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 {
@@ -9699,7 +10123,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 {
@@ -9724,7 +10148,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({
@@ -9732,7 +10156,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] : [];
@@ -9747,7 +10171,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] : [];
@@ -9774,7 +10198,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 {
@@ -9800,7 +10224,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             exec("startTransform", downEvent);
           }
         } else {
-          if (element && !isFrame(element)) {
+          if (element) {
             if (canStartDrag()) {
               dragging = true;
               onDrag(moveEvent);
@@ -9816,7 +10240,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();
           }
         }
@@ -9888,10 +10312,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", {
@@ -9906,38 +10332,52 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               }, [
                 createElementVNode("canvas", _hoisted_2, null, 512),
                 createVNode(_sfc_main$8, { ref: "textEditorTpl" }, null, 512),
-                createVNode(_sfc_main$A),
-                createVNode(_sfc_main$q),
-                createVNode(_sfc_main$s),
-                createVNode(_sfc_main$v),
-                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 }) => [
-                    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$i, { key: 0 })) : createCommentVNode("", true),
-                _ctx.$slots.floatbar ? (openBlock(), createBlock(_sfc_main$u, {
-                  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", normalizeProps(guardReactiveProps(slotProps))),
+                    renderSlot(_ctx.$slots, "floatbar-top", normalizeProps(guardReactiveProps(slotProps)))
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                createVNode(_sfc_main$w),
-                createVNode(_sfc_main$r),
-                unref(config).ruler ? (openBlock(), createBlock(_sfc_main$k, { key: 2 })) : createCommentVNode("", true),
+                _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", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  _: 3
+                }, 8, ["target"])) : createCommentVNode("", true),
+                createVNode(_sfc_main$y),
+                createVNode(_sfc_main$q),
                 unref(config).layers ? (openBlock(), createBlock(_sfc_main$e, {
-                  key: 3,
+                  key: 5,
                   modelValue: unref(config).layers,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(config).layers = $event),
                   title: unref(t)("layers"),
@@ -9949,17 +10389,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),
                 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),
@@ -10016,7 +10456,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$y, {
+      return openBlock(), createBlock(_sfc_main$A, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -10040,10 +10480,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
+  _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,
@@ -10056,12 +10497,12 @@ export {
   MceMenuSymbol,
   MceOverlaySymbol,
   MceSvgIcon,
-  _sfc_main$x as Menu,
+  _sfc_main$z as Menu,
   Model,
-  _sfc_main$l as Ruler,
+  _sfc_main$j as Ruler,
   SUPPORTS_CLIPBOARD,
-  _sfc_main$j as Scrollbar,
-  _sfc_main$h as Transformable,
+  _sfc_main$h as Scrollbar,
+  _sfc_main$v as Transformable,
   USER_AGENT,
   boundingBoxToStyle,
   consoleError,
@@ -10101,7 +10542,6 @@ export {
   mixins,
   plugins,
   propsFactory,
-  provideEditor,
   provideOverlay,
   refElement,
   templateRef,