mce 0.14.4 → 0.15.0

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, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
-import { reactive, computed, watch, markRaw, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, readonly, toRef, onMounted, useId, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, withModifiers, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
+import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, Obb2D, Aabb2D, render, Vector2 as Vector2$1, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
+import { reactive, computed, watch, markRaw, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withModifiers, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useResizeObserver as useResizeObserver$1, useLocalStorage, useImage } from "@vueuse/core";
-import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent, normalizeCRLF, isEqualObject } from "modern-idoc";
+import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeTextContent, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
 import { Fonts } from "modern-font";
 import * as Y from "yjs";
@@ -495,58 +495,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-function initYElement(yMap, element = {}, parentId, regenId = false) {
-  const normalized = normalizeElement({
-    ...element,
-    id: regenId ? void 0 : element.id,
-    meta: {
-      inCanvasIs: "Element2D",
-      ...element?.meta ?? {}
-    }
-  });
-  const id = normalized.id;
-  const yChildrenIds = new Y.Array();
-  for (const key in normalized) {
-    yMap.set(key, normalized[key]);
-  }
-  yMap.set("id", id);
-  yMap.set("parentId", parentId);
-  yMap.set("name", normalized.name ?? id);
-  yMap.set("childrenIds", yChildrenIds);
-  yMap.set("meta", new Y.Map(Object.entries(normalized.meta ?? {})));
-  const inCanvasIs = normalized?.meta?.inCanvasIs;
-  if (inCanvasIs === "Element2D" || inCanvasIs === "Lottie2D") {
-    yMap.set("style", new Y.Map(Object.entries(normalized.style ?? {})));
-    yMap.set("background", new Y.Map(Object.entries(normalized.background ?? {})));
-    yMap.set("shape", new Y.Map(Object.entries(normalized.shape ?? {})));
-    yMap.set("fill", new Y.Map(Object.entries(normalized.fill ?? {})));
-    yMap.set("outline", new Y.Map(Object.entries(normalized.outline ?? {})));
-    yMap.set("text", new Y.Map(Object.entries(normalized.text ?? {})));
-    yMap.set("foreground", new Y.Map(Object.entries(normalized.foreground ?? {})));
-    yMap.set("shadow", new Y.Map(Object.entries(normalized.shadow ?? {})));
-  }
-  return {
-    normalized,
-    yChildrenIds
-  };
-}
-function iElementToYNodes(element, parentId, regenId = false) {
-  const results = [];
-  const yNode = new Y.Map();
-  const { normalized, yChildrenIds } = initYElement(yNode, element, parentId, regenId);
-  const id = normalized.id;
-  results.push({ id, node: yNode });
-  normalized.children?.forEach((iChild) => {
-    const result = iElementToYNodes(iChild, id, regenId);
-    yChildrenIds.push([result[0].id]);
-    results.push(...result);
-  });
-  return results;
-}
 class Doc extends Model {
   _yChildren;
   _yChildrenIds;
-  root = reactive(new Node$1());
+  root = reactive(new Node$1({
+    id: "root",
+    name: "Doc"
+  }));
   _nodeMap = /* @__PURE__ */ new Map();
   get meta() {
     return this.root.meta;
@@ -562,6 +517,8 @@ class Doc extends Model {
       this._yChildren,
       this._yChildrenIds
     ]);
+    this._yProps.set("id", this.root.id);
+    this._yProps.set("name", this.root.name);
   }
   setProperties(properties) {
     if (properties) {
@@ -578,20 +535,13 @@ class Doc extends Model {
   }
   async load(initFn) {
     return super.load(async () => {
+      this._proxyNode(
+        this.root,
+        this._yProps,
+        this._yChildrenIds
+      );
+      this._yChildren.observe(this._yChildrenChange.bind(this));
       await initFn?.();
-      this._proxyProps(this.root, this._yProps);
-      const meta = this._yProps.get("meta");
-      if (meta) {
-        this._proxyProps(this.root.meta, meta, true);
-      }
-      this._proxyChildren(this.root, this._yChildrenIds);
-      this._yChildrenIds.forEach((id) => {
-        const yNode = this._yChildren.get(id);
-        if (yNode) {
-          this._getOrCreateNode(yNode);
-        }
-      });
-      this._yChildren.observe(this._onChildrenChange.bind(this));
     });
   }
   _isSelfTransaction(transaction) {
@@ -599,11 +549,11 @@ class Doc extends Model {
   }
   _debug(..._args) {
   }
-  _onChildrenChange(event, transaction) {
+  _yChildrenChange(event, transaction) {
     if (this._isSelfTransaction(transaction)) {
       return;
     }
-    this._debug("_onChildrenChange", event);
+    this._debug("yChildrenChange", event);
     const { keysChanged, changes } = event;
     keysChanged.forEach((key) => {
       const change = changes.keys.get(key);
@@ -611,7 +561,7 @@ class Doc extends Model {
       switch (change?.action) {
         case "add":
           if (yNode) {
-            this._getOrCreateNode(yNode);
+            this._initYNode(yNode);
           }
           break;
         case "delete":
@@ -623,6 +573,7 @@ class Doc extends Model {
   }
   reset() {
     super.reset();
+    this.root.resetProperties();
     this._yChildren.clear();
     this._yChildrenIds.delete(0, this._yChildrenIds.length);
     this._nodeMap.clear();
@@ -630,92 +581,57 @@ class Doc extends Model {
     this.indexeddb?.clearData();
     return this;
   }
-  _addNode(node, options = {}) {
+  _addNode(data, options = {}) {
     const { parentId, index, regenId } = options;
-    const yNodes = iElementToYNodes(node, parentId, regenId);
-    yNodes.forEach((result) => this._yChildren.set(result.id, result.node));
-    const _nodeMap = yNodes.map((result) => this._getOrCreateNode(result.node));
-    const first = _nodeMap[0];
     let parent;
-    let childrenIds;
     if (parentId && parentId !== this.root.id) {
-      parent = this._nodeMap.get(parentId);
-      childrenIds = this._yChildren.get(parentId)?.get("childrenIds");
+      parent = this._nodeMap.get(parentId) ?? this.root;
     } else {
       parent = this.root;
-      childrenIds = this._yChildrenIds;
     }
-    if (parent && childrenIds) {
-      if (index === void 0) {
-        childrenIds.push([first.id]);
-        parent.appendChild(first);
-      } else {
-        childrenIds.insert(index, [first.id]);
-        parent.moveChild(first, index);
+    const value = {
+      ...data,
+      meta: {
+        inCanvasIs: "Element2D",
+        ...data?.meta ?? {}
       }
+    };
+    if (regenId) {
+      delete value.id;
+    }
+    const node = reactive(Node$1.parse(value));
+    if (index === void 0) {
+      parent.appendChild(node);
+    } else {
+      parent.moveChild(node, index);
     }
-    return first;
+    this._proxyNode(node);
+    return node;
   }
-  addNode(node, options) {
-    return this.transact(() => this._addNode(node, options));
+  addNode(data, options) {
+    return this.transact(() => this._addNode(data, options));
   }
-  addNodes(nodes, options) {
-    return this.transact(() => nodes.map((element) => this._addNode(element, options)));
+  addNodes(dataItems, options) {
+    return this.transact(() => dataItems.map((data) => this._addNode(data, options)));
   }
   set(source) {
-    const { children = [], meta = {}, ...props } = source;
+    const { children = [], meta = {}, ..._props } = source;
+    const props = {
+      id: this.root.id,
+      name: this.root.name,
+      ..._props
+    };
     this.reset();
-    this.addNodes(children);
     this.setProperties(props);
     this._yProps.clear();
     for (const key in props) {
       this._yProps.set(key, props[key]);
     }
     this._yProps.set("meta", new Y.Map(Object.entries(meta)));
+    this._transacting = true;
+    this.addNodes(children);
     return this;
   }
-  _deleteNode(id) {
-    const node = this._nodeMap.get(id);
-    const yNode = this._yChildren.get(id);
-    if (!yNode || !node) {
-      return;
-    }
-    const parentId = yNode.get("parentId");
-    const parentChildrenIds = parentId ? this._yChildren.get(parentId)?.get("childrenIds") : this._yChildrenIds;
-    if (parentChildrenIds) {
-      const index = parentChildrenIds.toJSON().indexOf(id);
-      if (index > -1) {
-        parentChildrenIds.delete(index);
-      }
-    }
-    yNode.get("childrenIds").forEach((id2) => this._deleteNode(id2));
-    node.remove();
-  }
-  deleteNode(id) {
-    this.transact(() => this._deleteNode(id));
-  }
-  getNode(id) {
-    return this._nodeMap.get(id);
-  }
-  moveNode(id, toIndex) {
-    const node = this._nodeMap.get(id);
-    if (!node) {
-      return;
-    }
-    const parent = node.parent;
-    const childrenIds = parent?.id ? this._yChildren.get(parent.id)?.get("childrenIds") : this._yChildrenIds;
-    if (!childrenIds) {
-      return;
-    }
-    const fromIndex = childrenIds.toJSON().indexOf(id);
-    childrenIds.delete(fromIndex, 1);
-    childrenIds.insert(toIndex, [id]);
-    if (parent && !parent.equal(this.root)) {
-      parent.moveChild(node, toIndex);
-    } else {
-      this.root.moveChild(node, toIndex);
-    }
-  }
   _proxyProps(obj, yMap, isMeta = false) {
     const accessor = {
       getProperty: (key) => yMap.doc ? yMap.get(key) : void 0,
@@ -775,45 +691,80 @@ class Doc extends Model {
     yMap.observe(observeFn);
   }
   _proxyChildren(node, childrenIds) {
-    childrenIds.forEach((id) => {
-      const child = this._yChildren.get(id);
-      if (child) {
-        node.appendChild(this._getOrCreateNode(child));
+    node.on("addChild", (child, newIndex) => {
+      if (this._transacting === false) {
+        return;
       }
+      this.transact(() => {
+        childrenIds.insert(newIndex, [child.id]);
+        this._debug(`addChild ${child.id}`, child.name, newIndex);
+      });
     });
-    const observeFn = (event, transaction) => {
-      if (this._isSelfTransaction(transaction)) {
+    node.on("removeChild", (child, oldIndex) => {
+      if (this._transacting === false) {
         return;
       }
-      this._debug("_proxyChildren", event, node);
-      const children = node.children;
+      this.transact(() => {
+        const index = childrenIds.toJSON().indexOf(child.id);
+        if (index > -1) {
+          childrenIds.delete(index, 1);
+        }
+        this._debug(`removeChild ${child.id}`, child.name, oldIndex);
+      });
+    });
+    node.children.forEach((child) => {
+      this._proxyNode(child);
+    });
+    const cachedChildrenIds = childrenIds.toArray();
+    const observeFn = (event, transaction) => {
+      const skip = this._isSelfTransaction(transaction);
+      this._debug(`yChildren ${node.id} changes`, event.changes.delta);
       let retain = 0;
       event.changes.delta.forEach((action) => {
         if (action.retain !== void 0) {
           retain += action.retain;
         }
         if (action.delete) {
-          for (let i = retain; i < retain + action.delete; i++) {
-            children[i]?.remove();
+          if (!skip) {
+            for (let i = retain; i < retain + action.delete; i++) {
+              const id = cachedChildrenIds[i];
+              if (!id) {
+                continue;
+              }
+              const child = this._nodeMap.get(id);
+              if (child && child.parent?.equal(node) && child.getIndex() === i) {
+                this.transact(() => {
+                  child.remove();
+                  this._debug(`yChildren remove ${child.id}`, child.name, i);
+                }, false);
+              }
+            }
           }
+          cachedChildrenIds.splice(retain, action.delete);
         }
         if (action.insert) {
-          const ids = Array.isArray(action.insert) ? action.insert : [action.insert];
-          ids.forEach((id, index) => {
-            let child = this._nodeMap.get(id);
-            const cb = (child2) => {
-              node.moveChild(child2, retain + index);
-            };
-            if (child) {
-              cb(child);
-            } else {
-              setTimeout(() => {
-                child = this._nodeMap.get(id);
-                child && cb(child);
-              }, 0);
-            }
-          });
-          retain += ids.length;
+          const insert = Array.isArray(action.insert) ? action.insert : [action.insert];
+          if (!skip) {
+            insert.forEach((id, index) => {
+              let child = this._nodeMap.get(id);
+              const cb = (child2) => {
+                this.transact(() => {
+                  node.moveChild(child2, retain + index);
+                  this._debug(`yChildren insert ${child2.id}`, child2.name, retain + index);
+                }, false);
+              };
+              if (child) {
+                cb(child);
+              } else {
+                setTimeout(() => {
+                  child = this._nodeMap.get(id);
+                  child && cb(child);
+                }, 0);
+              }
+            });
+          }
+          cachedChildrenIds.splice(retain, 0, ...insert);
+          retain += insert.length;
         }
       });
     };
@@ -822,35 +773,71 @@ class Doc extends Model {
     node._childrenIdsObserveFn = markRaw(observeFn);
     childrenIds.observe(observeFn);
   }
-  _proxyNode(node, yEle) {
-    this._proxyProps(node, yEle);
-    const meta = yEle.get("meta");
-    if (meta) {
-      this._proxyProps(node.meta, meta, true);
+  _proxyNode(node, yNode, yChildrenIds) {
+    const id = node.id;
+    if (!yNode) {
+      yNode = this._yChildren.get(id);
     }
-    if (node instanceof Element2D) {
-      [
-        "style",
-        "background",
-        "shape",
-        "fill",
-        "outline",
-        "text",
-        "foreground",
-        "shadow"
-      ].forEach((key) => {
-        const yMap = yEle.get(key);
-        if (yMap) {
-          this._proxyProps(node[key], yMap);
-        }
+    if (!yNode) {
+      yNode = new Y.Map(Object.entries({
+        ...node.getProperties(),
+        id
+      }));
+      this._yChildren.set(id, yNode);
+      this.undoManager.addToScope(yNode);
+    }
+    if (!this._nodeMap.has(id)) {
+      this._nodeMap.set(id, node);
+      yNode.set("parentId", node.parent?.id);
+      node.on("parented", () => {
+        yNode.set("parentId", node.parent?.id);
       });
-      node._text = markRaw(node._text);
-      node.text.update();
-      node.requestRender();
+      node.on("destroy", () => {
+        this._nodeMap.delete(node.id);
+        this._debug("destroy", node.id);
+      });
+      this._proxyProps(node, yNode);
+      let meta = yNode.get("meta");
+      if (!meta || !(meta instanceof Y.Map)) {
+        meta = new Y.Map(Object.entries(node.meta.getProperties()));
+        yNode.set("meta", meta);
+      }
+      this._proxyProps(node.meta, meta, true);
+      if (node instanceof Element2D) {
+        [
+          "style",
+          "background",
+          "shape",
+          "fill",
+          "outline",
+          "text",
+          "foreground",
+          "shadow"
+        ].forEach((key) => {
+          let yMap = yNode.get(key);
+          if (!yMap || !(yMap instanceof Y.Map)) {
+            yMap = new Y.Map(Object.entries(node[key].getProperties()));
+            yNode.set(key, yMap);
+          }
+          this._proxyProps(node[key], yMap);
+        });
+        node._text = markRaw(node._text);
+        node.text.update();
+        node.requestRender();
+      }
+      if (!yChildrenIds) {
+        yChildrenIds = yNode.get("childrenIds");
+      }
+      if (!yChildrenIds) {
+        yChildrenIds = new Y.Array();
+        yChildrenIds.push(node.children.map((c) => c.id));
+        yNode.set("childrenIds", yChildrenIds);
+      }
+      this._proxyChildren(node, yChildrenIds);
     }
-    this._proxyChildren(node, yEle.get("childrenIds"));
+    return yNode;
   }
-  _getOrCreateNode(yNode) {
+  _initYNode(yNode) {
     const id = yNode.get("id");
     let node = this._nodeMap.get(id);
     if (!node) {
@@ -875,7 +862,7 @@ class Doc extends Model {
   }
 }
 __decorateClass([
-  property({ default: "doc" })
+  property()
 ], Doc.prototype, "name");
 const _0_context = defineMixin((editor) => {
   const fonts = markRaw(new Fonts());
@@ -1357,76 +1344,6 @@ function boundingBoxToStyle(box) {
   }
   return style;
 }
-function isPointInsideAabb(point, box) {
-  const right = box.left + box.width;
-  const bottom = box.top + box.height;
-  return point.x >= box.left && point.x <= right && point.y >= box.top && point.y <= bottom;
-}
-function isOverlappingAabb(aabb1, aabb2, axis) {
-  switch (axis) {
-    case "horizontal":
-      return aabb1.left + aabb1.width >= aabb2.left && aabb2.left + aabb2.width >= aabb1.left;
-    case "vertical":
-      return aabb1.top + aabb1.height >= aabb2.top && aabb2.top + aabb2.height >= aabb1.top;
-    default:
-      return isOverlappingAabb(aabb1, aabb2, "horizontal") && isOverlappingAabb(aabb1, aabb2, "vertical");
-  }
-}
-function isOverlappingObb(box1, box2) {
-  if (!box1.rotate && !box2.rotate) {
-    return isOverlappingAabb(box1, box2);
-  } else {
-    const dotProduct = ([ax, ay], [bx, by]) => Math.abs(ax * bx + ay * by);
-    const createSAT = ({ width, height, rotate = 0 }) => {
-      rotate = -rotate % 180;
-      const deg = rotate / 180 * Math.PI;
-      const axisX = [Math.cos(deg), -Math.sin(deg)];
-      const axisY = [Math.sin(deg), Math.cos(deg)];
-      return {
-        axis: [axisX, axisY],
-        projectionRadius: (axis) => width / 2 * dotProduct(axis, axisX) + height / 2 * dotProduct(axis, axisY)
-      };
-    };
-    const data1 = createSAT(box1);
-    const data2 = createSAT(box2);
-    const center = [
-      box1.left + box1.width / 2 - (box2.left + box2.width / 2),
-      box1.top + box1.height / 2 - (box2.top + box2.height / 2)
-    ];
-    for (const axis of [...data1.axis, ...data2.axis]) {
-      if (data1.projectionRadius(axis) + data2.projectionRadius(axis) < dotProduct(axis, center)) {
-        return false;
-      }
-    }
-    return true;
-  }
-}
-function minBoundingBox(rects) {
-  if (rects.length < 2) {
-    return {
-      left: rects[0]?.left ?? 0,
-      top: rects[0]?.top ?? 0,
-      width: rects[0]?.width ?? 0,
-      height: rects[0]?.height ?? 0
-    };
-  }
-  const res = rects.slice(1).reduce(
-    (acc, rect) => {
-      acc.x1 = Math.min(acc.x1, rect.left);
-      acc.y1 = Math.min(acc.y1, rect.top);
-      acc.x2 = Math.max(acc.x2, rect.left + rect.width);
-      acc.y2 = Math.max(acc.y2, rect.top + rect.height);
-      return acc;
-    },
-    {
-      x1: rects[0].left,
-      y1: rects[0].top,
-      x2: rects[0].left + rects[0].width,
-      y2: rects[0].top + rects[0].height
-    }
-  );
-  return { left: res.x1, top: res.y1, width: res.x2 - res.x1, height: res.y2 - res.y1 };
-}
 function consoleWarn(message) {
   warn(`mce: ${message}`);
 }
@@ -1896,29 +1813,31 @@ const _2_box = defineMixin((editor) => {
     getAncestorFrame
   } = editor;
   function obbToFit(element) {
-    const minmax = {
-      minX: Number.MAX_SAFE_INTEGER,
-      minY: Number.MAX_SAFE_INTEGER,
-      maxX: Number.MIN_SAFE_INTEGER,
-      maxY: Number.MIN_SAFE_INTEGER
+    const min = {
+      x: Number.MAX_SAFE_INTEGER,
+      y: Number.MAX_SAFE_INTEGER
+    };
+    const max = {
+      x: Number.MIN_SAFE_INTEGER,
+      y: Number.MIN_SAFE_INTEGER
     };
     let flag = false;
     element.children.forEach((child) => {
       if (isElement(child)) {
-        const _minmax = child.getAabb().toMinmax();
-        minmax.minX = Math.min(minmax.minX, _minmax.minX);
-        minmax.minY = Math.min(minmax.minY, _minmax.minY);
-        minmax.maxX = Math.max(minmax.maxX, _minmax.maxX);
-        minmax.maxY = Math.max(minmax.maxY, _minmax.maxY);
+        const { min: _min, max: _max } = child.getAabb().toMinmax();
+        min.x = Math.min(min.x, _min.x);
+        min.y = Math.min(min.y, _min.y);
+        max.x = Math.max(max.x, _max.x);
+        max.y = Math.max(max.y, _max.y);
         flag = true;
       }
     });
     if (flag) {
       const box = {
-        left: minmax.minX,
-        top: minmax.minY,
-        width: minmax.maxX - minmax.minX,
-        height: minmax.maxY - minmax.minY
+        left: min.x,
+        top: min.y,
+        width: max.x - min.x,
+        height: max.y - min.y
       };
       const aabbs = {};
       element.children.forEach((child, index) => {
@@ -1960,21 +1879,14 @@ const _2_box = defineMixin((editor) => {
       if (node.length === 1) {
         obb = getObb(node[0]);
       } else {
-        obb = { ...getAabb(node), rotate: 0 };
+        obb = new Obb2D(getAabb(node));
       }
     } else if (isElement(node)) {
       const style = node.style;
       noop([style.left, style.top, style.width, style.height, style.rotate]);
-      const { rect, rotation } = node.getGlobalObb();
-      obb = {
-        left: rect.left,
-        top: rect.top,
-        width: rect.width,
-        height: rect.height,
-        rotate: rotation / DEG_TO_RAD
-      };
+      obb = node.getGlobalObb();
     } else {
-      obb = { left: 0, top: 0, width: 0, height: 0, rotate: 0 };
+      obb = new Obb2D();
     }
     if (inTarget === "drawboard") {
       const zoom = camera.value.zoom;
@@ -2013,40 +1925,36 @@ const _2_box = defineMixin((editor) => {
       if (node.length === 1) {
         aabb = getAabb(node[0]);
       } else {
-        const minmax = {
-          minX: Number.MAX_SAFE_INTEGER,
-          minY: Number.MAX_SAFE_INTEGER,
-          maxX: Number.MIN_SAFE_INTEGER,
-          maxY: Number.MIN_SAFE_INTEGER
+        const min = {
+          x: Number.MAX_SAFE_INTEGER,
+          y: Number.MAX_SAFE_INTEGER
+        };
+        const max = {
+          x: Number.MIN_SAFE_INTEGER,
+          y: Number.MIN_SAFE_INTEGER
         };
         node.forEach((child) => {
           if (isElement(child)) {
             const aabb2 = getAabb(child);
-            minmax.minX = Math.min(minmax.minX, aabb2.left);
-            minmax.minY = Math.min(minmax.minY, aabb2.top);
-            minmax.maxX = Math.max(minmax.maxX, aabb2.left + aabb2.width);
-            minmax.maxY = Math.max(minmax.maxY, aabb2.top + aabb2.height);
+            min.x = Math.min(min.x, aabb2.left);
+            min.y = Math.min(min.y, aabb2.top);
+            max.x = Math.max(max.x, aabb2.left + aabb2.width);
+            max.y = Math.max(max.y, aabb2.top + aabb2.height);
           }
         });
-        aabb = {
-          left: minmax.minX,
-          top: minmax.minY,
-          width: minmax.maxX - minmax.minX,
-          height: minmax.maxY - minmax.minY
-        };
+        aabb = new Aabb2D(
+          min.x,
+          min.y,
+          max.x - min.x,
+          max.y - min.y
+        );
       }
     } else if (isElement(node)) {
       const style = node.style;
       noop([style.left, style.top, style.width, style.height, style.rotate]);
-      const rect = node.getGlobalAabb();
-      aabb = {
-        left: rect.left,
-        top: rect.top,
-        width: rect.width,
-        height: rect.height
-      };
+      aabb = node.getGlobalAabb();
     } else {
-      aabb = { left: 0, top: 0, width: 0, height: 0 };
+      aabb = new Aabb2D();
     }
     if (inTarget === "drawboard") {
       aabb = aabbToDrawboardAabb(aabb);
@@ -2073,7 +1981,7 @@ const _2_box = defineMixin((editor) => {
     return aabb;
   }
   function aabbToDrawboardAabb(aabb) {
-    const _aabb = { ...aabb };
+    const _aabb = new Aabb2D(aabb);
     const zoom = camera.value.zoom;
     const position = camera.value.position;
     _aabb.left *= zoom.x;
@@ -2616,11 +2524,63 @@ const _4_1_text = defineMixin((editor) => {
     TextEditor.register();
   };
 });
-const _4_2_element = defineMixin((editor) => {
+const _4_2_frame = defineMixin((editor) => {
+  const {
+    root,
+    currentFrameIndex,
+    emit,
+    selection,
+    frames,
+    config
+  } = editor;
+  function setCurrentFrame(index = currentFrameIndex.value) {
+    index = Math.max(0, Math.min(frames.value.length - 1, index));
+    const oldIndex = currentFrameIndex.value;
+    currentFrameIndex.value = index;
+    if (config.value.viewMode === "edgeless") {
+      selection.value = [frames.value[index]];
+    } else {
+      selection.value = [];
+    }
+    emit("setCurrentFrame", index, oldIndex);
+  }
+  function handleElementInsideFrame(element) {
+    const source = element.getGlobalAabb();
+    const aArea = source.getArea();
+    let flag = true;
+    for (let i = 0, len = frames.value.length; i < len; i++) {
+      const frame = frames.value[i];
+      if (element.equal(frame)) {
+        continue;
+      }
+      const target = frame.getGlobalAabb();
+      if (source && target) {
+        if (source.getIntersectionRect(target).getArea() > aArea * 0.5) {
+          if (!element.findAncestor((ancestor) => ancestor.equal(frame))) {
+            frame.appendChild(element);
+            element.style.left = source.x - target.x;
+            element.style.top = source.y - target.y;
+          }
+          flag = false;
+          break;
+        }
+      }
+    }
+    if (flag && element.parent && !element.parent.equal(root.value)) {
+      root.value.moveChild(element, 0);
+      element.style.left = source.x;
+      element.style.top = source.y;
+    }
+  }
+  Object.assign(editor, {
+    setCurrentFrame,
+    handleElementInsideFrame
+  });
+});
+const _4_3_element = defineMixin((editor) => {
   const {
     doc,
     rootAabb,
-    emit,
     textFontSizeToFit,
     textToFit,
     log,
@@ -2634,7 +2594,8 @@ const _4_2_element = defineMixin((editor) => {
     screenCenter,
     selection,
     camera,
-    parseAnchor
+    parseAnchor,
+    handleElementInsideFrame
   } = editor;
   function addElement(value, options = {}) {
     log("addElement", value, options);
@@ -2792,20 +2753,10 @@ const _4_2_element = defineMixin((editor) => {
     if (active) {
       selection.value = elements;
     }
-    emit("addElement", elements);
-    return isArray ? elements : elements[0];
-  }
-  function deleteElement(id) {
-    if (id === selection.value[0]?.id) {
-      selection.value = [];
+    if (!isArray && !parent) {
+      handleElementInsideFrame(elements[0]);
     }
-    doc.value.deleteNode(id);
-  }
-  function updateElement(id, properties) {
-    getElement(id)?.setProperties(properties);
-  }
-  function getElement(id) {
-    return doc.value.getNode(id);
+    return isArray ? elements : elements[0];
   }
   function resizeElement(element, scaleX, scaleY, options = {}) {
     scaleX = Math.abs(scaleX);
@@ -2829,111 +2780,25 @@ const _4_2_element = defineMixin((editor) => {
     options.textFontSizeToFit && textFontSizeToFit(element, scaleX);
   }
   function selectArea(areaInDrawboard) {
+    const area2 = new Obb2D(areaInDrawboard);
     const selected = root.value?.children.flatMap((node) => {
       if (isFrame(node)) {
         return node.children;
       }
       return [node];
     }).filter((node) => {
-      return "isVisibleInTree" in node && node.isVisibleInTree() && isOverlappingObb(areaInDrawboard, getObb(node, "drawboard")) && !isLock(node);
+      return "isVisibleInTree" in node && node.isVisibleInTree() && getObb(node, "drawboard").overlapsOnAxis(area2) && !isLock(node);
     }) ?? [];
     selection.value = selected;
     return selected;
   }
   Object.assign(editor, {
     addElement,
-    deleteElement,
-    updateElement,
-    getElement,
+    addElements: addElement,
     resizeElement,
     selectArea
   });
 });
-const _4_3_frame = defineMixin((editor) => {
-  const {
-    doc,
-    root,
-    rootAabb,
-    currentFrameIndex,
-    frameThumbs,
-    emit,
-    selection,
-    frames,
-    config
-  } = editor;
-  function addFrame(value = {}, toIndex) {
-    const element = normalizeElement({
-      ...value,
-      id: void 0,
-      name: "Frame",
-      meta: {
-        ...value.meta,
-        inEditorIs: "Frame"
-      }
-    });
-    element.style ??= {};
-    element.style.left = rootAabb.value.left + rootAabb.value.width + config.value.frameGap;
-    element.style.width ||= rootAabb.value.width;
-    element.style.height ||= rootAabb.value.height;
-    const index = toIndex ?? (currentFrameIndex.value > -1 ? currentFrameIndex.value + 1 : frames.value.length - 1);
-    doc.value.addNode(element, { index });
-    setCurrentFrame(index);
-    emit("addFrame", index);
-  }
-  function duplicateFrame(index = currentFrameIndex.value) {
-    const page = root.value.children[index];
-    if (!page)
-      return;
-    doc.value.addNode(page.toJSON(), {
-      index: index + 1,
-      regenId: true
-    });
-    emit("duplicateFrame", index);
-  }
-  function moveFrame(fromIndex, toIndex) {
-    const id = root.value.children[fromIndex]?.id;
-    if (!id)
-      return;
-    doc.value.moveNode(id, toIndex);
-    frameThumbs.value.splice(
-      toIndex,
-      0,
-      frameThumbs.value.splice(fromIndex, 1)[0]
-    );
-    setCurrentFrame(toIndex);
-    emit("moveFrame", fromIndex, toIndex);
-  }
-  function deleteFrame(index = currentFrameIndex.value) {
-    if (!root.value || root.value.children.length === 1) {
-      return;
-    }
-    const id = root.value.children[index]?.id;
-    if (!id)
-      return;
-    doc.value.deleteNode(id);
-    frameThumbs.value.splice(index, 1);
-    setCurrentFrame(index);
-    emit("deleteFrame", index);
-  }
-  function setCurrentFrame(index = currentFrameIndex.value) {
-    index = Math.max(0, Math.min(frames.value.length - 1, index));
-    const oldIndex = currentFrameIndex.value;
-    currentFrameIndex.value = index;
-    if (config.value.viewMode === "edgeless") {
-      selection.value = [frames.value[index]];
-    } else {
-      selection.value = [];
-    }
-    emit("setCurrentFrame", index, oldIndex);
-  }
-  Object.assign(editor, {
-    addFrame,
-    duplicateFrame,
-    moveFrame,
-    deleteFrame,
-    setCurrentFrame
-  });
-});
 const _4_4_doc = defineMixin((editor, options) => {
   const {
     doc,
@@ -3389,8 +3254,8 @@ const mixins = [
   _3_view,
   _4_0_node,
   _4_1_text,
-  _4_2_element,
-  _4_3_frame,
+  _4_2_frame,
+  _4_3_element,
   _4_4_doc,
   _drawingTool$1,
   _scroll$1,
@@ -3423,7 +3288,7 @@ const _clipboard = definePlugin((editor, options) => {
     exec,
     canLoad,
     load,
-    addElement
+    addElements
   } = editor;
   const copiedData = ref();
   const useClipboard = options.clipboard !== false && SUPPORTS_CLIPBOARD;
@@ -3485,7 +3350,7 @@ const _clipboard = definePlugin((editor, options) => {
       }
     }
     if (elements.length) {
-      addElement(elements, {
+      addElements(elements, {
         position: "pointer",
         active: true,
         regenId: true
@@ -3536,7 +3401,7 @@ const _clipboard = definePlugin((editor, options) => {
           await _paste(await navigator.clipboard.read());
         } else if (copiedData.value) {
           if (Array.isArray(copiedData.value)) {
-            addElement(copiedData.value?.map((el) => cloneDeep(el)) ?? [], {
+            addElements(copiedData.value?.map((el) => cloneDeep(el)) ?? [], {
               position: "pointer",
               active: true,
               regenId: true
@@ -3552,7 +3417,7 @@ const _clipboard = definePlugin((editor, options) => {
     if (!selection.value.length) {
       return;
     }
-    addElement(
+    addElements(
       selection.value.map((v) => v.toJSON()),
       {
         parent: selection.value[0].parent,
@@ -3621,14 +3486,13 @@ const _copyAs = definePlugin((editor) => {
 });
 const _delete = definePlugin((editor) => {
   const {
-    deleteElement,
     selection,
     hoverElement
   } = editor;
   function _delete2() {
     if (selection.value.length) {
-      selection.value.forEach((element) => {
-        deleteElement(element.id);
+      selection.value.forEach((node) => {
+        node.remove();
       });
       selection.value = [];
     }
@@ -3879,23 +3743,36 @@ function useIcon(props) {
 const MceLayerKey = Symbol.for("mce:layer");
 const MceLayerItemKey = Symbol.for("mce:layer-item");
 function createLayer(options) {
-  const {
-    sortedSelection
-  } = options;
   const registered = ref([]);
-  const selecting = ref(false);
+  const nodeItems = /* @__PURE__ */ new Map();
   const openedItems = reactive(/* @__PURE__ */ new Map());
   const domItems = reactive(/* @__PURE__ */ new Map());
   const rootVm = getCurrentInstance();
+  const selecting = ref(false);
+  const dragging = ref(false);
+  const droppingItemId = ref();
+  function getIdByNode(node) {
+    let id;
+    nodeItems.forEach((_node2, _id) => {
+      if (node.equal(_node2.value)) {
+        id = _id;
+      }
+    });
+    return id;
+  }
   provide(MceLayerKey, {
+    ...options,
     selecting,
-    sortedSelection,
-    register: (vm, options2) => {
+    dragging,
+    droppingItemId,
+    register: (vm, item) => {
       const {
         id,
         dom,
-        opened
-      } = options2;
+        opened,
+        node
+      } = item;
+      nodeItems.set(id, node);
       openedItems.set(id, opened);
       domItems.set(id, dom);
       registered.value.push(id);
@@ -3908,34 +3785,79 @@ function createLayer(options) {
       }
     },
     unregister: (id) => {
+      nodeItems.delete(id);
       openedItems.delete(id);
       domItems.delete(id);
       registered.value = registered.value.filter((v) => v !== id);
+    },
+    onMousedown: (e, id) => {
+      const start = { x: e.clientX, y: e.clientY };
+      function onMove(e2) {
+        const current = { x: e2.clientX, y: e2.clientY };
+        if (!dragging.value && (Math.abs(current.x - start.x) >= 3 || Math.abs(current.y - start.y) >= 3)) {
+          dragging.value = true;
+        }
+        if (dragging.value) {
+          const targets = e2.composedPath();
+          const layer = targets.find((target) => {
+            return target instanceof HTMLElement && target.classList.contains("mce-layer");
+          });
+          const id2 = layer?.dataset?.id;
+          if (id2) {
+            droppingItemId.value = id2;
+          }
+        }
+      }
+      function onUp() {
+        if (droppingItemId.value) {
+          const from = nodeItems.get(id)?.value;
+          const to = nodeItems.get(droppingItemId.value)?.value;
+          if (to && from && !from.equal(to)) {
+            let toIndex = to.getIndex() + 1;
+            if (to.parent && from.parent && to.parent.equal(from.parent)) {
+              toIndex--;
+            }
+            to.parent?.moveChild(
+              from,
+              toIndex
+            );
+          }
+        }
+        dragging.value = false;
+        droppingItemId.value = void 0;
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      }
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
     }
   });
   return {
     selecting,
     openedItems,
-    domItems
+    domItems,
+    getIdByNode
   };
 }
 function useLayerItem(options) {
-  const {
+  const root = inject(MceLayerKey);
+  if (!root)
+    throw new Error("[mce] Could not find injected layer root");
+  const id = `layer-item-${useId()}`;
+  const item = {
     id,
-    opened,
-    dom
-  } = options;
+    ...options
+  };
   const vm = getCurrentInstance();
   provide(MceLayerItemKey, { id });
-  const rootLayer = inject(MceLayerKey);
-  const { register, unregister, ...props } = rootLayer;
-  register(vm, {
+  root.register(vm, item);
+  onBeforeUnmount(() => root.unregister(id));
+  return {
+    ...root,
     id,
-    dom,
-    opened
-  });
-  onBeforeUnmount(() => unregister(id));
-  return props;
+    dropping: computed(() => root.droppingItemId.value === id),
+    onMousedown: (e) => root.onMousedown?.(e, id)
+  };
 }
 function useResizeObserver(callback, box = "content") {
   const resizeRef = templateRef();
@@ -4354,7 +4276,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
-        style: normalizeStyle(unref(boundingBoxToStyle)(unref(getObb)(frame.value, "drawboard"))),
+        style: normalizeStyle(unref(getObb)(frame.value, "drawboard").toCssStyle()),
         class: normalizeClass(["mce-frame", [
           unref(config).frameOutline && "mce-frame--outline",
           unref(hoverElement)?.equal(frame.value) && "mce-frame--hover",
@@ -4495,7 +4417,7 @@ const _group = definePlugin((editor) => {
     getAabb,
     elementSelection,
     addElement,
-    deleteElement,
+    addElements,
     doc
   } = editor;
   function group(inEditorIs) {
@@ -4515,7 +4437,12 @@ const _group = definePlugin((editor) => {
     doc.value.transact(() => {
       addElement({
         name: inEditorIs === "Frame" ? "Frame" : "Group",
-        style: { ...aabb },
+        style: {
+          left: aabb.left,
+          top: aabb.top,
+          width: aabb.width,
+          height: aabb.height
+        },
         children,
         meta: {
           inPptIs: "GroupShape",
@@ -4527,7 +4454,7 @@ const _group = definePlugin((editor) => {
         active: true,
         regenId: true
       });
-      elements.forEach((v) => deleteElement(v.id));
+      elements.forEach((node) => node.remove());
     });
   }
   function ungroup() {
@@ -4543,13 +4470,13 @@ const _group = definePlugin((editor) => {
       return cloned;
     });
     doc.value.transact(() => {
-      addElement(items, {
+      addElements(items, {
         parent: element.parent,
         index: element.getIndex(),
         active: true,
         regenId: true
       });
-      deleteElement(element.id);
+      element.remove();
     });
   }
   return {
@@ -4762,11 +4689,11 @@ const _import = definePlugin((editor) => {
   const {
     load,
     openFileDialog,
-    addElement
+    addElements
   } = editor;
   const _import2 = async (options = {}) => {
     const files = await openFileDialog({ multiple: true });
-    return addElement((await Promise.all(files.map((file) => load(file)))).flat(), {
+    return addElements((await Promise.all(files.map((file) => load(file)))).flat(), {
       sizeToFit: true,
       ...options
     });
@@ -4788,10 +4715,10 @@ const _import = definePlugin((editor) => {
       } = editor;
       function onDragover(e) {
         e.preventDefault();
-        drawboardPointer.value = {
-          x: e.clientX - drawboardAabb.value.left,
-          y: e.clientY - drawboardAabb.value.top
-        };
+        drawboardPointer.value = new Vector2$1(
+          e.clientX - drawboardAabb.value.left,
+          e.clientY - drawboardAabb.value.top
+        );
         if (e.dataTransfer) {
           e.dataTransfer.dropEffect = "copy";
         }
@@ -5056,8 +4983,10 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$l = { class: "mce-layer__name" };
-const _hoisted_2$c = { class: "mce-layer__action" };
+const _hoisted_1$l = ["data-id"];
+const _hoisted_2$c = { class: "mce-layer__content" };
+const _hoisted_3$b = { class: "mce-layer__prepend" };
+const _hoisted_4$5 = { class: "mce-layer__action" };
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
@@ -5100,9 +5029,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const dom = ref();
     const {
       selecting,
-      sortedSelection
+      sortedSelection,
+      dragging,
+      dropping,
+      onMousedown,
+      id
     } = useLayerItem({
-      id: props.node.id,
       opened,
       node: computed(() => props.node),
       dom: computed(() => dom.value)
@@ -5140,12 +5072,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       return "$shape";
     });
-    function onMousedown() {
-    }
     function onClickExpand() {
       opened.value = !opened.value;
     }
-    function onClickContent(e) {
+    function onMousedownContent(e) {
       selecting.value = true;
       if (e.shiftKey) {
         const _nodes = [
@@ -5190,6 +5120,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       nextTick().then(() => {
         selecting.value = false;
       });
+      onMousedown(e);
     }
     function onDblclickThumbnail(e) {
       e.stopPropagation();
@@ -5199,7 +5130,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         });
       }
     }
-    function onDblclickContent() {
+    function onDblclickName() {
       editing.value = true;
       editValue.value = props.node.name;
       nextTick().then(() => {
@@ -5211,7 +5142,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       });
     }
     function onMouseenter() {
-      if (isElement(props.node)) {
+      if (!dragging.value && isElement(props.node)) {
         hoverElement.value = props.node;
         hovering.value = true;
       }
@@ -5245,41 +5176,44 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             isFrist.value && "mce-layer--first",
             isLast.value && "mce-layer--last",
             opened.value && "mce-layer--open",
-            isHoverElement.value && "mce-layer--hover"
+            isHoverElement.value && "mce-layer--hover",
+            unref(dropping) && "mce-layer--dropping"
           ]]),
           style: normalizeStyle({
             "--indent-padding": `${props.indent * 16}px`
           }),
-          onMousedown,
+          "data-id": unref(id),
+          onMousedown: onMousedownContent,
           onMouseenter,
           onMouseleave,
           onContextmenu
         }, [
-          createElementVNode("div", {
-            class: "mce-layer__expand",
-            onClick: onClickExpand
-          }, [
-            props.node.children.length ? (openBlock(), createBlock(unref(_sfc_main$C), {
-              key: 0,
-              icon: "$arrowRight"
-            })) : createCommentVNode("", true)
-          ]),
-          createElementVNode("div", {
-            class: "mce-layer__content",
-            onClick: onClickContent,
-            onDblclick: onDblclickContent
-          }, [
+          _cache[5] || (_cache[5] = createElementVNode("span", { class: "mce-layer__underlay" }, null, -1)),
+          _cache[6] || (_cache[6] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
+          createElementVNode("div", _hoisted_2$c, [
+            createElementVNode("div", _hoisted_3$b, [
+              props.node.children.length ? (openBlock(), createBlock(unref(_sfc_main$C), {
+                key: 0,
+                icon: "$arrowRight",
+                onClick: onClickExpand,
+                onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["stop"]))
+              })) : createCommentVNode("", true)
+            ]),
             createElementVNode("div", {
               class: "mce-layer__thumbnail",
               onDblclick: onDblclickThumbnail
             }, [
               createVNode(unref(_sfc_main$C), { icon: thumbnailIcon.value }, null, 8, ["icon"])
             ], 32),
-            createElementVNode("div", _hoisted_1$l, [
+            createElementVNode("div", {
+              class: "mce-layer__name",
+              onDblclick: onDblclickName
+            }, [
               withDirectives(createElementVNode("input", {
                 ref_key: "inputDom",
                 ref: inputDom,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editValue.value = $event),
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => editValue.value = $event),
                 type: "text",
                 class: "mce-layer__input",
                 autofocus: "",
@@ -5291,15 +5225,15 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 })
               }, toDisplayString(editValue.value || props.node.name || props.node.id), 5)
-            ]),
-            createElementVNode("div", _hoisted_2$c, [
+            ], 32),
+            createElementVNode("div", _hoisted_4$5, [
               props.root ? (openBlock(), createBlock(_sfc_main$y, {
                 key: 0,
                 icon: "",
                 class: normalizeClass(["mce-layer__btn", {
                   "mce-layer__btn--hide": !hovering.value && !unref(isLock)(props.node)
                 }]),
-                onClick: _cache[1] || (_cache[1] = ($event) => unref(setLock)(props.node, !unref(isLock)(props.node)))
+                onClick: _cache[2] || (_cache[2] = ($event) => unref(setLock)(props.node, !unref(isLock)(props.node)))
               }, {
                 default: withCtx(() => [
                   createVNode(unref(_sfc_main$C), {
@@ -5313,7 +5247,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__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"]))
+                  onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
                     createVNode(unref(_sfc_main$C), {
@@ -5327,7 +5261,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__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"]))
+                  onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
                     createVNode(unref(_sfc_main$C), {
@@ -5338,8 +5272,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 }, 8, ["class"])
               ], 64))
             ])
-          ], 32)
-        ], 38),
+          ])
+        ], 46, _hoisted_1$l),
         opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.node.children, (child, key) => {
           return openBlock(), createBlock(_component_MceLayer, {
             key,
@@ -5374,7 +5308,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const {
       selecting,
       openedItems,
-      domItems
+      domItems,
+      getIdByNode
     } = createLayer({
       sortedSelection
     });
@@ -5385,7 +5320,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       let last;
       selection2.forEach((node) => {
         node.findAncestor((ancestor) => {
-          const opened = openedItems.get(ancestor.id);
+          const opened = openedItems.get(getIdByNode(ancestor) ?? "");
           if (opened) {
             opened.value = true;
           }
@@ -5395,7 +5330,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       });
       if (last) {
         nextTick().then(() => {
-          domItems.get(last.id)?.value?.scrollIntoView({
+          domItems.get(getIdByNode(last) ?? "")?.value?.scrollIntoView({
             block: "center"
           });
         });
@@ -5863,10 +5798,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         x: event.clientX,
         y: event.clientY
       };
-      drawboardContextMenuPointer.value = {
-        x: event.clientX - drawboardAabb.value.left,
-        y: event.clientY - drawboardAabb.value.top
-      };
+      drawboardContextMenuPointer.value = new Vector2$1(
+        event.clientX - drawboardAabb.value.left,
+        event.clientY - drawboardAabb.value.top
+      );
       updateLocation();
     }
     watch(drawboardDom, (el, old) => {
@@ -10352,8 +10287,8 @@ const _pen = definePlugin((editor) => {
       const box = currentPath.getBoundingBox();
       el.style.left = box.left;
       el.style.top = box.top;
-      el.style.width = box.width;
-      el.style.height = box.height;
+      el.style.width = box.width || 1;
+      el.style.height = box.height || 1;
     }
   };
   return {
@@ -10374,6 +10309,10 @@ const _pen = definePlugin((editor) => {
           } else {
             el = addElement({
               name: "pen",
+              style: {
+                width: 1,
+                height: 1
+              },
               outline: {
                 color: "#d9d9d9",
                 width: 5,
@@ -10392,6 +10331,7 @@ const _pen = definePlugin((editor) => {
               new Vector2(start.x, start.y)
             );
             currentPath.currentCurve.addCurve(currentLine);
+            update();
             const onMove = () => {
               const move = getGlobalPointer();
               if (currentLine && move) {
@@ -10416,6 +10356,10 @@ const _pen = definePlugin((editor) => {
         handle: (start) => {
           const el2 = addElement({
             name: "pencil",
+            style: {
+              width: 1,
+              height: 1
+            },
             outline: {
               color: "#d9d9d9",
               width: 5,
@@ -10428,20 +10372,25 @@ const _pen = definePlugin((editor) => {
           }, {
             position: start
           });
+          const parentAabb = el2.getParent()?.getGlobalAabb() ?? new Aabb2D();
           const path = new Path2D();
-          path.moveTo(start.x, start.y);
+          path.moveTo(start.x - parentAabb.x, start.y - parentAabb.y);
+          const update2 = () => {
+            el2.shape.paths = [
+              { data: path.toData() }
+            ];
+            const box = path.getBoundingBox();
+            el2.style.left = box.left;
+            el2.style.top = box.top;
+            el2.style.width = box.width || 1;
+            el2.style.height = box.height || 1;
+          };
+          update2();
           return {
             move: (move) => {
-              path.lineTo(move.x, move.y);
-              path.moveTo(move.x, move.y);
-              el2.shape.paths = [
-                { data: path.toData() }
-              ];
-              const box = path.getBoundingBox();
-              el2.style.left = box.left;
-              el2.style.top = box.top;
-              el2.style.width = box.width;
-              el2.style.height = box.height;
+              path.lineTo(move.x - parentAabb.x, move.y - parentAabb.y);
+              path.moveTo(move.x - parentAabb.x, move.y - parentAabb.y);
+              update2();
             }
           };
         }
@@ -11089,8 +11038,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       exec
     } = useEditor();
     const isActive = computed(() => {
-      return selectionAabb.value.width && selectionAabb.value.height && !isOverlappingAabb(
-        drawboardAabb.value,
+      return selectionAabb.value.width && selectionAabb.value.height && !drawboardAabb.value.overlapsOnAxis(
         aabbToDrawboardAabb(selectionAabb.value)
       );
     });
@@ -12386,9 +12334,9 @@ const _smartGuides = definePlugin((editor) => {
       const isCanvas = isCanvasLine(target);
       if (type !== target.type && !isCanvas)
         return;
-      if (!isOverlappingAabb(toBoundingBox(source), toBoundingBox(target), flippedAxis))
+      if (!toBoundingBox(source).overlapsOnAxis(toBoundingBox(target), flippedAxis))
         return;
-      if (!isCanvas && prev && prev.box.id !== target.box.id && isOverlappingAabb(toBoundingBox(prev), toBoundingBox(target), axis)) {
+      if (!isCanvas && prev && prev.box.id !== target.box.id && toBoundingBox(prev).overlapsOnAxis(toBoundingBox(target), axis)) {
         return;
       }
       prev = target;
@@ -12646,12 +12594,12 @@ function createLine(pos, type, box) {
 }
 function toBoundingBox(value) {
   const box = "box" in value ? value.box : value;
-  return {
-    left: box.hl.pos,
-    top: box.vt.pos,
+  return new Aabb2D({
+    x: box.hl.pos,
+    y: box.vt.pos,
     width: box.hr.pos - box.hl.pos,
     height: box.vb.pos - box.vt.pos
-  };
+  });
 }
 function flipType(type) {
   if (type === "vt")
@@ -13406,29 +13354,25 @@ const _ui = definePlugin((editor) => {
     }
   };
 });
-const _url = definePlugin(() => {
-  async function isImage(url) {
-    try {
-      const response = await fetch(url, { method: "HEAD" });
-      const contentType = response.headers.get("Content-Type");
-      return contentType && contentType.startsWith("image/");
-    } catch (_error) {
-      return false;
-    }
-  }
+const _url = definePlugin((editor) => {
+  const {
+    load
+  } = editor;
   return {
     name: "mce:url",
     loaders: [
       {
         name: "url",
         test: (source) => {
-          return typeof source === "string" && (source.startsWith("http") || imageExtRe.test(source));
+          return typeof source === "string";
         },
-        load: async (source) => {
-          if (imageExtRe.test(source) || await isImage(source)) {
-            return await createImageElement(source);
-          } else {
-            throw new Error(`Failed to load url, ${source}`);
+        load: async (url) => {
+          const blob = await fetch(url).then((rep) => rep.blob());
+          const file = new File([blob], url, { type: blob.type });
+          try {
+            return await load(file);
+          } catch (error) {
+            throw new Error(`Failed to load source "${url}", ${error}`);
           }
         }
       }
@@ -13527,7 +13471,7 @@ const _zoom = definePlugin((editor) => {
       useResizeObserver$1(drawboardDom, (entries) => {
         const { left: _left, top: _top, width, height } = entries[0].contentRect;
         const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
-        drawboardAabb.value = { left, top, width, height };
+        drawboardAabb.value = new Aabb2D(left, top, width, height);
         exec("zoomToFit");
       });
     }
@@ -14578,7 +14522,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "Selector",
   props: {
     resizeStrategy: {},
-    selectedArea: { default: () => ({ left: 0, top: 0, width: 0, height: 0 }) }
+    selectedArea: { default: () => new Aabb2D() }
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -14599,7 +14543,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       isLock,
       config,
       snapThreshold,
-      getSnapPoints
+      getSnapPoints,
+      handleElementInsideFrame
     } = useEditor();
     const transformable = useTemplateRef("transformableTpl");
     onBeforeMount(() => {
@@ -14634,8 +14579,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     const _selectionTransform = computed(() => {
       const zoom = camera.value.zoom;
+      const { left, top, width, height, rotationDegrees } = selectionObbInDrawboard.value;
       return {
-        ...selectionObbInDrawboard.value,
+        left,
+        top,
+        width,
+        height,
+        rotate: rotationDegrees,
         borderRadius: (elementSelection.value[0]?.style.borderRadius ?? 0) * zoom.x
       };
     });
@@ -14707,6 +14657,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             }
             return false;
           });
+          handleElementInsideFrame(element);
         });
       }
     });
@@ -14744,7 +14695,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             class: "mce-selector__parent-element",
             style: normalizeStyle({
               borderColor: "currentColor",
-              ...unref(boundingBoxToStyle)(obb)
+              ...obb.toCssStyle()
             })
           }, null, 4);
         }), 128)),
@@ -14753,7 +14704,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "mce-selector__selected-area",
           style: normalizeStyle({
             borderColor: "currentcolor",
-            ...unref(boundingBoxToStyle)(props.selectedArea)
+            ...props.selectedArea.toCssStyle()
           })
         }, null, 4)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(selectionObbs.value, (item, index) => {
@@ -14763,7 +14714,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({
               borderColor: "currentcolor",
               borderRadius: `${(item.element.style.borderRadius ?? 0) * unref(camera).zoom.x}px`,
-              ...unref(boundingBoxToStyle)(item.box)
+              ...item.box.toCssStyle()
             })
           }, null, 4);
         }), 128)),
@@ -15002,10 +14953,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         obb.left += textBox.left;
         obb.top += textBox.top;
       }
-      const style = boundingBoxToStyle(obb);
-      return {
-        ...style
-      };
+      return obb.toCssStyle();
     });
     function onUpdateTextSelection(e) {
       textSelection.value = e.detail;
@@ -15133,7 +15081,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const selector = useTemplateRef("selectorTpl");
     const textEditor = useTemplateRef("textEditorTpl");
     const grabbing = ref(false);
-    const selectedArea = ref({ left: 0, top: 0, width: 0, height: 0 });
+    const selectedArea = ref(new Aabb2D());
     const resizeStrategy = computed(() => {
       const first = elementSelection.value[0];
       if (first) {
@@ -15167,10 +15115,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     function onHover(event) {
       let cursor;
       let hovered;
-      if (elementSelection.value.length > 1 && isPointInsideAabb(
-        { x: event.clientX, y: event.clientY },
-        selectionAabbInDrawboard.value
-      )) {
+      if (elementSelection.value.length > 1 && selectionAabbInDrawboard.value.containsPoint({
+        x: event.clientX,
+        y: event.clientY
+      })) {
         cursor = "move";
       } else {
         const element = event.target;
@@ -15204,10 +15152,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       let isUp = false;
       let selected = [];
       let ctxState;
-      const inSelection = isPointInsideAabb({
+      const inSelection = selectionAabbInDrawboard.value.containsPoint({
         x: start.x - drawboardAabb.value.left,
         y: start.y - drawboardAabb.value.top
-      }, selectionAabbInDrawboard.value);
+      });
       if (downEvent.button === 2) {
         if (!inSelection) {
           const result = props.activeStrategy({
@@ -15253,12 +15201,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         if (state.value !== "selecting") {
           state.value = "selecting";
         }
-        selectedArea.value = {
-          left: Math.min(start.x, current.x) - drawboardAabb.value.left,
-          top: Math.min(start.y, current.y) - drawboardAabb.value.top,
-          width: Math.abs(start.x - current.x),
-          height: Math.abs(start.y - current.y)
-        };
+        selectedArea.value.x = Math.min(start.x, current.x) - drawboardAabb.value.left;
+        selectedArea.value.y = Math.min(start.y, current.y) - drawboardAabb.value.top;
+        selectedArea.value.width = Math.abs(start.x - current.x);
+        selectedArea.value.height = Math.abs(start.y - current.y);
         selected = selectArea(selectedArea.value);
       }
       function onActivate() {
@@ -15379,10 +15325,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (event.srcElement !== drawboardDom.value) {
         return;
       }
-      drawboardPointer.value = {
-        x: event.clientX - drawboardAabb.value.left,
-        y: event.clientY - drawboardAabb.value.top
-      };
+      drawboardPointer.value = new Vector2$1(
+        event.clientX - drawboardAabb.value.left,
+        event.clientY - drawboardAabb.value.top
+      );
       if (camera.value.grabbing || event.button === 1 || state.value && state.value !== "typing") {
         return;
       }
@@ -15624,22 +15570,17 @@ export {
   findChildrenWithProvide,
   getImageSizeFromUrl,
   getRandomValues,
-  iElementToYNodes,
   imageExtRe,
   imageExts,
   imageMimeTypeExtMap,
   isClickInsideElement,
   isInputEvent,
   isMac,
-  isOverlappingAabb,
-  isOverlappingObb,
-  isPointInsideAabb,
   isWindows,
   makeLayoutItemProps,
   makeLayoutProps,
   makeMceOverlayProps,
   makeMceStrategyProps,
-  minBoundingBox,
   mixins,
   plugins,
   propsFactory,