mce 0.15.28 → 0.15.30

package/dist/index.js

@@ -942,7 +942,7 @@ const _0_context = defineMixin((editor) => {
     return value.meta.inEditorIs === inEditorIs2;
   }
   function isFrame(value) {
-    return isElement(value) && inEditorIs(value, "Frame");
+    return inEditorIs(value, "Frame");
   }
   function isTopFrame(value) {
     return isFrame(value) && Boolean(value.parent?.equal(root.value));
@@ -3449,10 +3449,8 @@ const _4_1_text = defineMixin((editor) => {
 });
 const _4_2_frame = defineMixin((editor) => {
   const {
-    root,
     frames,
     isTopFrame,
-    exec,
     selection,
     getAncestorFrame
   } = editor;
@@ -3480,100 +3478,9 @@ const _4_2_frame = defineMixin((editor) => {
     }
     return frames.value[index];
   }
-  function handleDragOutReparent(element, options) {
-    const pointer = options?.pointer;
-    const frame1 = element.findAncestor((node) => isTopFrame(node));
-    const aabb1 = element.getGlobalAabb();
-    const area1 = aabb1.getArea();
-    let flag = true;
-    for (let i = 0, len = frames.value.length; i < len; i++) {
-      const frame2 = frames.value[i];
-      if (frame2.equal(element)) {
-        continue;
-      }
-      const aabb2 = frame2.getGlobalAabb();
-      if (pointer ? aabb2.contains(pointer) : aabb1 && aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
-        if (!frame2.equal(frame1)) {
-          let index = frame2.children.length;
-          if (frame2.equal(options?.parent)) {
-            index = options.index;
-          }
-          frame2.moveChild(element, index);
-          element.style.left = aabb1.x - aabb2.x;
-          element.style.top = aabb1.y - aabb2.y;
-          element.updateGlobalTransform();
-          exec("layerScrollIntoView");
-        }
-        flag = false;
-        break;
-      }
-    }
-    if (flag && frame1) {
-      let index = root.value.children.length;
-      if (root.value.equal(options?.parent)) {
-        index = options.index;
-      }
-      root.value.moveChild(element, index);
-      element.style.left = aabb1.x;
-      element.style.top = aabb1.y;
-      element.updateGlobalTransform();
-      exec("layerScrollIntoView");
-    }
-  }
   Object.assign(editor, {
-    findFrame,
-    handleDragOutReparent
+    findFrame
   });
-  return () => {
-    const {
-      on,
-      getGlobalPointer
-    } = editor;
-    let startFrame;
-    let startContext = {};
-    on("selectionTransformStart", ({ elements }) => {
-      const pointer = getGlobalPointer();
-      startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
-      const ctx = {};
-      elements.forEach((el) => {
-        ctx[el.instanceId] = {
-          parent: el.getParent(),
-          index: el.getIndex()
-        };
-      });
-      startContext = ctx;
-    });
-    on("selectionTransforming", ({ handle, startEvent, elements }) => {
-      if (handle === "move" && !startEvent?.__FROM__) {
-        const idSet = /* @__PURE__ */ new Set();
-        elements.forEach((el) => {
-          const frame = isTopFrame(el) ? el : el.findAncestor(isTopFrame);
-          if (frame) {
-            if (frame.equal(startFrame)) {
-              idSet.add(frame.instanceId);
-            }
-          } else {
-            idSet.add(0);
-          }
-        });
-        if (idSet.size === 1) {
-          elements.forEach((element) => {
-            handleDragOutReparent(
-              element,
-              {
-                ...startContext[element.instanceId],
-                pointer: getGlobalPointer()
-              }
-            );
-          });
-        }
-      }
-    });
-    on("selectionTransformEnd", () => {
-      startContext = {};
-      startFrame = void 0;
-    });
-  };
 });
 const _4_3_element = defineMixin((editor) => {
   const {
@@ -3584,7 +3491,7 @@ const _4_3_element = defineMixin((editor) => {
     log,
     root,
     isElement,
-    isFrame,
+    inEditorIs,
     isLock,
     getObb,
     config,
@@ -3594,7 +3501,7 @@ const _4_3_element = defineMixin((editor) => {
     selection,
     camera,
     parseAnchor,
-    handleDragOutReparent
+    exec
   } = editor;
   function addElement(value, options = {}) {
     log("addElement", value, options);
@@ -3643,8 +3550,8 @@ const _4_3_element = defineMixin((editor) => {
             const newHeight = aspectRatio > 1 ? halfWidth / aspectRatio : halfHeight;
             resizeElement(
               el,
-              newWidth / el.style.width,
-              newHeight / el.style.height,
+              newWidth,
+              newHeight,
               {
                 deep: true,
                 textFontSizeToFit: true
@@ -3752,37 +3659,39 @@ const _4_3_element = defineMixin((editor) => {
       selection.value = elements;
     }
     if (!isArray && !parent) {
-      handleDragOutReparent(elements[0]);
+      exec("nestIntoFrame", elements[0]);
     }
     return isArray ? elements : elements[0];
   }
-  function resizeElement(element, scaleX, scaleY, options = {}) {
-    scaleX = Math.abs(scaleX);
-    scaleY = Math.abs(scaleY);
-    function handle(element2) {
-      const style = element2.style;
-      style.left = style.left * scaleX;
-      style.top = style.top * scaleY;
-      style.width = style.width * scaleX;
-      style.height = style.height * scaleY;
-      element2?.requestRender?.();
-    }
-    handle(element);
+  function resizeElement(el, newWidth, newHeight, options = {}) {
+    const scaleX = Math.abs(newWidth / el.style.width);
+    const scaleY = Math.abs(newHeight / el.style.height);
+    function handle(el2, isChild = false) {
+      const style = el2.style;
+      if (isChild) {
+        style.left *= scaleX;
+        style.top *= scaleY;
+      }
+      style.width *= scaleX;
+      style.height *= scaleY;
+      el2?.requestRender?.();
+    }
+    handle(el);
     if (options.deep) {
-      element.findOne((node) => {
+      el.findOne((node) => {
         if (isElement(node)) {
-          handle(node);
+          handle(node, true);
         }
         return false;
       });
     }
-    options.textToFit && textToFit(element);
-    options.textFontSizeToFit && textFontSizeToFit(element, scaleX);
+    options.textToFit && textToFit(el);
+    options.textFontSizeToFit && textFontSizeToFit(el, scaleX);
   }
   function selectArea(areaInDrawboard) {
     const area2 = new Obb2D(areaInDrawboard);
     const selected = root.value?.children.flatMap((node) => {
-      if (isFrame(node) && node.parent?.equal(root.value)) {
+      if (inEditorIs(node, "Frame") && node.parent?.equal(root.value)) {
         return node.children;
       }
       return [node];
@@ -4174,14 +4083,14 @@ const _snapshot = defineMixin((editor) => {
     const {
       on,
       config,
-      isFrame
+      inEditorIs
     } = editor;
     on("setDoc", (doc) => {
       if (config.value.frameScreenshot) {
         snapshot();
       }
       function onAddChild(node, _newIndex) {
-        if (config.value.frameScreenshot && isFrame(node)) {
+        if (config.value.frameScreenshot && inEditorIs(node, "Frame")) {
           const index = frames.value.findIndex((f) => f.equal(node));
           frameThumbs.value.splice(index, 0, {
             instanceId: -1,
@@ -4193,7 +4102,7 @@ const _snapshot = defineMixin((editor) => {
         }
       }
       function onRemoveChild(node, _oldIndex) {
-        if (config.value.frameScreenshot && isFrame(node)) {
+        if (config.value.frameScreenshot && inEditorIs(node, "Frame")) {
           frameThumbs.value.splice(
             frameThumbs.value.findIndex((v) => v.instanceId === node.instanceId),
             1
@@ -4360,59 +4269,10 @@ function definePlugin(cb) {
 const _arrange = definePlugin((editor) => {
   const {
     isElement,
-    rootAabb,
     elementSelection,
     selection,
     getAabb
   } = editor;
-  function align(direction) {
-    elementSelection.value.forEach((el) => {
-      if (el.parent && isElement(el.parent)) {
-        const parentAabb = getAabb(el.parent);
-        switch (direction) {
-          case "left":
-            el.style.left = 0;
-            break;
-          case "horizontal-center":
-            el.style.left = (parentAabb.width - el.style.width) / 2;
-            break;
-          case "right":
-            el.style.left = parentAabb.width - el.style.width;
-            break;
-          case "top":
-            el.style.top = 0;
-            break;
-          case "vertical-center":
-            el.style.top = (parentAabb.height - el.style.height) / 2;
-            break;
-          case "bottom":
-            el.style.top = parentAabb.height - el.style.height;
-            break;
-        }
-      } else {
-        switch (direction) {
-          case "left":
-            el.style.left = rootAabb.value.left;
-            break;
-          case "horizontal-center":
-            el.style.left = (rootAabb.value.left + rootAabb.value.width - el.style.width) / 2;
-            break;
-          case "right":
-            el.style.left = rootAabb.value.left + rootAabb.value.width - el.style.width;
-            break;
-          case "top":
-            el.style.top = rootAabb.value.top;
-            break;
-          case "vertical-center":
-            el.style.top = (rootAabb.value.top + rootAabb.value.height - el.style.height) / 2;
-            break;
-          case "bottom":
-            el.style.top = rootAabb.value.top + rootAabb.value.height - el.style.height;
-            break;
-        }
-      }
-    });
-  }
   function zOrder2(target, type) {
     const els = Array.isArray(target) ? target : [target];
     els.forEach((el) => {
@@ -4439,6 +4299,48 @@ const _arrange = definePlugin((editor) => {
       parent.moveChild(el, index);
     });
   }
+  function align(direction) {
+    let targetAabb;
+    if (elementSelection.value.length > 1) {
+      targetAabb = getAabb(elementSelection.value);
+    } else {
+      const parent = elementSelection.value[0]?.parent;
+      if (parent && isElement(parent)) {
+        targetAabb = parent.getGlobalAabb();
+      }
+    }
+    if (!targetAabb) {
+      return;
+    }
+    elementSelection.value.forEach((el) => {
+      const hw = el.size.x / 2;
+      const hh = el.size.y / 2;
+      const cos = Math.cos(el.rotation);
+      const sin = Math.sin(el.rotation);
+      const dx = Math.abs(hw * cos) + Math.abs(hh * sin);
+      const dy = Math.abs(hw * sin) + Math.abs(hh * cos);
+      switch (direction) {
+        case "left":
+          el.style.left = targetAabb.left + dx - hw;
+          break;
+        case "horizontal-center":
+          el.style.left = targetAabb.left + targetAabb.width / 2 - hw;
+          break;
+        case "right":
+          el.style.left = targetAabb.left + targetAabb.width - dx - hw;
+          break;
+        case "top":
+          el.style.top = targetAabb.top + dy - hh;
+          break;
+        case "vertical-center":
+          el.style.top = targetAabb.top + targetAabb.height / 2 - hh;
+          break;
+        case "bottom":
+          el.style.top = targetAabb.top + targetAabb.height - dy - hh;
+          break;
+      }
+    });
+  }
   function bringToFront(target = selection.value) {
     target && zOrder2(target, "bringToFront");
   }
@@ -4480,21 +4382,105 @@ const _arrange = definePlugin((editor) => {
     ]
   };
 });
-const _cancel = definePlugin((editor) => {
+const _autoNest = definePlugin((editor) => {
   const {
-    state
+    getGlobalPointer,
+    frames,
+    isTopFrame,
+    exec,
+    root
   } = editor;
-  function cancel() {
-    state.value = void 0;
+  let startFrame;
+  let startContext = {};
+  function nestIntoFrame(element, options) {
+    const pointer = options?.pointer;
+    const frame1 = element.findAncestor((node) => isTopFrame(node));
+    const aabb1 = element.getGlobalAabb();
+    const area1 = aabb1.getArea();
+    let flag = true;
+    for (let i = 0, len = frames.value.length; i < len; i++) {
+      const frame2 = frames.value[i];
+      if (frame2.equal(element)) {
+        continue;
+      }
+      const aabb2 = frame2.getGlobalAabb();
+      if (pointer ? aabb2.contains(pointer) : aabb1 && aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
+        if (!frame2.equal(frame1)) {
+          let index = frame2.children.length;
+          if (frame2.equal(options?.parent)) {
+            index = options.index;
+          }
+          frame2.moveChild(element, index);
+          element.style.left = aabb1.x - aabb2.x;
+          element.style.top = aabb1.y - aabb2.y;
+          element.updateGlobalTransform();
+          exec("layerScrollIntoView");
+        }
+        flag = false;
+        break;
+      }
+    }
+    if (flag && frame1) {
+      let index = root.value.children.length;
+      if (root.value.equal(options?.parent)) {
+        index = options.index;
+      }
+      root.value.moveChild(element, index);
+      element.style.left = aabb1.x;
+      element.style.top = aabb1.y;
+      element.updateGlobalTransform();
+      exec("layerScrollIntoView");
+    }
   }
   return {
-    name: "mce:cancel",
+    name: "mce:autoNest",
     commands: [
-      { command: "cancel", handle: cancel }
+      { command: "nestIntoFrame", handle: nestIntoFrame }
     ],
-    hotkeys: [
-      { command: "cancel", key: "escape", editable: false }
-    ]
+    events: {
+      selectionTransformStart: ({ elements }) => {
+        const pointer = getGlobalPointer();
+        startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
+        const ctx = {};
+        elements.forEach((el) => {
+          ctx[el.instanceId] = {
+            parent: el.getParent(),
+            index: el.getIndex()
+          };
+        });
+        startContext = ctx;
+      },
+      selectionTransforming: ({ handle, startEvent, elements }) => {
+        if (handle === "move" && !startEvent?.__FROM__) {
+          const idSet = /* @__PURE__ */ new Set();
+          elements.forEach((el) => {
+            const frame = isTopFrame(el) ? el : el.findAncestor(isTopFrame);
+            if (frame) {
+              if (frame.equal(startFrame)) {
+                idSet.add(frame.instanceId);
+              }
+            } else {
+              idSet.add(0);
+            }
+          });
+          if (idSet.size === 1) {
+            elements.forEach((element) => {
+              nestIntoFrame(
+                element,
+                {
+                  ...startContext[element.instanceId],
+                  pointer: getGlobalPointer()
+                }
+              );
+            });
+          }
+        }
+      },
+      selectionTransformEnd: () => {
+        startContext = {};
+        startFrame = void 0;
+      }
+    }
   };
 });
 const _copyAs = definePlugin((editor) => {
@@ -4521,31 +4507,6 @@ const _copyAs = definePlugin((editor) => {
     ]
   };
 });
-const _delete = definePlugin((editor) => {
-  const {
-    selection,
-    hoverElement
-  } = editor;
-  function _delete2() {
-    if (selection.value.length) {
-      selection.value.forEach((node) => {
-        node.remove();
-      });
-      selection.value = [];
-    }
-    hoverElement.value = void 0;
-  }
-  const when = () => Boolean(selection.value.length > 0);
-  return {
-    name: "mce:delete",
-    commands: [
-      { command: "delete", handle: _delete2 }
-    ],
-    hotkeys: [
-      { command: "delete", key: ["Backspace", "Delete"], when }
-    ]
-  };
-});
 const _hoisted_1$n = {
   key: 0,
   class: "mce-drawing__tip"
@@ -4589,14 +4550,28 @@ const _drawingTool = definePlugin((editor) => {
 });
 const _edit = definePlugin((editor, options) => {
   const {
+    state,
     selection,
     exec,
     canLoad,
     load,
-    addElements
+    addElements,
+    hoverElement
   } = editor;
   const copiedData = ref();
   const useClipboard = options.clipboard !== false && SUPPORTS_CLIPBOARD;
+  const cancel = () => {
+    state.value = void 0;
+  };
+  const _delete = () => {
+    if (selection.value.length) {
+      selection.value.forEach((node) => {
+        node.remove();
+      });
+      selection.value = [];
+    }
+    hoverElement.value = void 0;
+  };
   const copy = async (source) => {
     if (typeof source === "string") {
       if (useClipboard) {
@@ -4808,12 +4783,16 @@ const _edit = definePlugin((editor, options) => {
   return {
     name: "mce:edit",
     commands: [
+      { command: "cancel", handle: cancel },
+      { command: "delete", handle: _delete },
       { command: "copy", handle: copy },
       { command: "cut", handle: cut },
       { command: "paste", handle: paste },
       { command: "duplicate", handle: duplicate }
     ],
     hotkeys: [
+      { command: "cancel", key: "escape", editable: false },
+      { command: "delete", key: ["Backspace", "Delete"], when: () => Boolean(selection.value.length > 0) },
       { command: "copy", key: "CmdOrCtrl+C", editable: false },
       { command: "cut", key: "CmdOrCtrl+X", editable: false },
       { command: "paste", key: "CmdOrCtrl+V", editable: false, preventDefault: false },
@@ -5465,10 +5444,16 @@ const defaultActiveStrategy = (context) => {
   if (!element) {
     return void 0;
   }
-  const { isRoot, isFrame, isElement, elementSelection } = editor;
+  const {
+    isRoot,
+    inEditorIs,
+    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))) {
+    const parent = node.parent;
+    if (isElement(node) && (node.equal(activeElement) || parent?.equal(activeElement) || parent?.equal(activeElement?.parent) || parent && inEditorIs(parent, "Frame") && isRoot(parent.parent) || isRoot(parent))) {
       return true;
     }
     return false;
@@ -5492,10 +5477,16 @@ const defaultHoverStrategy = (context) => {
   if (!element) {
     return void 0;
   }
-  const { isRoot, isFrame, isElement, elementSelection } = editor;
+  const {
+    isRoot,
+    inEditorIs,
+    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))) {
+    const parent = node.parent;
+    if (isElement(node) && (node.equal(activeElement) || parent?.equal(activeElement) || parent?.equal(activeElement?.parent) || parent && inEditorIs(parent, "Frame") && isRoot(parent.parent) || isRoot(parent))) {
       return true;
     }
     return false;
@@ -5694,9 +5685,12 @@ const _group = definePlugin((editor) => {
     elementSelection,
     addElement,
     addElements,
-    doc
+    doc,
+    isElement,
+    inEditorIs,
+    obbToFit
   } = editor;
-  function group(inEditorIs) {
+  function group(inEditorIs2) {
     const elements = elementSelection.value;
     if (!elements.length) {
       return;
@@ -5712,7 +5706,7 @@ const _group = definePlugin((editor) => {
     });
     doc.value.transact(() => {
       addElement({
-        name: inEditorIs === "Frame" ? "Frame" : "Group",
+        name: inEditorIs2 === "Frame" ? "Frame" : "Group",
         style: {
           left: aabb.left,
           top: aabb.top,
@@ -5722,7 +5716,7 @@ const _group = definePlugin((editor) => {
         children,
         meta: {
           inPptIs: "GroupShape",
-          inEditorIs
+          inEditorIs: inEditorIs2
         }
       }, {
         parent,
@@ -5766,7 +5760,19 @@ const _group = definePlugin((editor) => {
       { command: "groupSelection", key: "CmdOrCtrl+G" },
       { command: "frameSelection", key: "Alt+CmdOrCtrl+G" },
       { command: "ungroup", key: "CmdOrCtrl+Backspace" }
-    ]
+    ],
+    events: {
+      selectionTransforming: ({ elements }) => {
+        elements.forEach((el) => {
+          el.findAncestor((ancestor) => {
+            if (isElement(ancestor) && !inEditorIs(ancestor, "Frame")) {
+              obbToFit(ancestor);
+            }
+            return false;
+          });
+        });
+      }
+    }
   };
 });
 const _history = definePlugin((editor) => {
@@ -5818,7 +5824,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     } = useEditor();
     const hoverElementObb = computed(() => getObb(hoverElement.value, "drawboard"));
     return (_ctx, _cache) => {
-      return unref(hoverElement) && !unref(hoverElement).equal(unref(selection)[0]) ? (openBlock(), createElementBlock("div", {
+      return unref(hoverElement) && !unref(selection).some((node) => node.equal(unref(hoverElement))) ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: "mce-hover",
         "data-name": unref(hoverElement).name,
@@ -5835,7 +5841,7 @@ const _hover = definePlugin(() => {
   return {
     name: "mce:hover",
     components: [
-      { type: "overlay", component: _sfc_main$z }
+      { type: "overlay", component: _sfc_main$z, order: "before" }
     ]
   };
 });
@@ -6162,7 +6168,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const props = __props;
     const {
       isElement,
-      isFrame,
+      inEditorIs,
       isVisible,
       setVisible,
       isLock,
@@ -6199,7 +6205,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const editValue = ref();
     const thumbnailIcon = computed(() => {
       const node = props.node;
-      if (isFrame(node)) {
+      if (inEditorIs(node, "Frame")) {
         return "$frame";
       } else if (node.children.filter(isElement).length) {
         return "$group";
@@ -6221,7 +6227,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       const node = props.node;
       let value = node.name;
       if (!value) {
-        if (isFrame(node)) {
+        if (inEditorIs(node, "Frame")) {
           return t("frame");
         } else if (node.children.filter(isElement).length) {
           value = t("group");
@@ -12422,6 +12428,8 @@ const _shape = definePlugin((editor) => {
         position: start,
         active: true
       });
+      el.style.width = 1;
+      el.style.height = 1;
       return {
         move: (move) => {
           const minX = Math.min(move.x, start.x);
@@ -12430,8 +12438,8 @@ const _shape = definePlugin((editor) => {
           const maxY = Math.max(move.y, start.y);
           el.style.left = minX;
           el.style.top = minY;
-          el.style.width = maxX - minX;
-          el.style.height = maxY - minY;
+          el.style.width = Math.max(1, maxX - minX);
+          el.style.height = Math.max(1, maxY - minY);
         },
         end: () => {
           setActiveDrawingTool(void 0);
@@ -13601,29 +13609,13 @@ const _smartGuides = definePlugin((editor) => {
     state,
     getAabb,
     root,
-    camera
+    camera,
+    viewportAabb
   } = editor;
   const snapThreshold = computed(() => Math.max(1, 5 / camera.value.zoom.x));
   const excluded = computed(() => new Set(elementSelection.value.map((el) => el.id)));
-  const activeBox = computed(() => createBox(selectionAabb.value));
   const parnet = computed(() => elementSelection.value[0]?.parent ?? root.value);
   const parentBox = computed(() => createBox(parnet.value));
-  const boxes = computed(() => {
-    return parnet.value.children.filter((node) => !excluded.value.has(node.id)).map((node) => createBox(node)).filter(Boolean);
-  });
-  const store = computed(() => {
-    return boxes.value.reduce(
-      (store2, box) => {
-        [box.vt, box.vm, box.vb].forEach((val) => store2.vLines.add(val));
-        [box.hl, box.hm, box.hr].forEach((val) => store2.hLines.add(val));
-        return store2;
-      },
-      {
-        vLines: new BSTree((a, b) => a.pos - b.pos),
-        hLines: new BSTree((a, b) => a.pos - b.pos)
-      }
-    );
-  });
   function createBox(node) {
     if (!node)
       return void 0;
@@ -13734,87 +13726,110 @@ const _smartGuides = definePlugin((editor) => {
     };
     return areas;
   }
-  const linePairs = computed(() => {
-    const { vLines, hLines } = store.value;
-    const box = activeBox.value;
-    if (!box) {
-      return [];
-    }
-    const areaLine = {
-      vt: [],
-      vb: [],
-      hl: [],
-      hr: []
-    };
-    const linePairs2 = [];
-    [
-      { sources: [box.vt, box.vm, box.vb], targets: vLines },
-      { sources: [box.hl, box.hm, box.hr], targets: hLines }
-    ].forEach(({ targets, sources }) => {
-      for (const source of sources) {
-        const target = targets.searchClosest(source, (a, b, c) => {
-          return !c || Math.abs(a.pos - b.pos) < Math.abs(a.pos - c.pos);
-        });
-        if (!target)
-          continue;
-        const distance2 = Math.abs(target.pos - source.pos);
-        if (distance2 >= snapThreshold.value)
-          continue;
-        linePairs2.push({ source, target, type: "alignment", distance: distance2 });
-      }
-    });
-    [
-      { sources: [box.vt, box.vb], targets: vLines },
-      { sources: [box.hl, box.hr], targets: hLines }
-    ].forEach(({ sources, targets }) => {
-      for (const source of sources) {
-        areaLine[source.type] = findLines(targets, source);
-      }
-    });
-    areaLine.vt = areaLine.vt.sort((a, b) => b.pos - a.pos);
-    areaLine.hl = areaLine.hl.sort((a, b) => b.pos - a.pos);
-    [
-      { targets: [areaLine.vt, areaLine.vb], sources: [box.vt, box.vb] },
-      { targets: [areaLine.hl, areaLine.hr], sources: [box.hl, box.hr] }
-    ].forEach(({ sources, targets }) => {
-      const targetA = targets[0][0];
-      const sourceA = sources[0];
-      const targetB = targets[1][0];
-      const sourceB = sources[1];
-      if (targetA && targetB && (!isCanvasLine(targetA) || !isCanvasLine(targetB))) {
-        const distanceA = Math.abs(sourceA.pos - targetA.pos);
-        const distanceB = Math.abs(sourceB.pos - targetB.pos);
-        if (Math.abs(distanceA - distanceB) < snapThreshold.value) {
-          const isLeftTop = isLeftTopLine(sourceA);
-          linePairs2.push({
-            target: targetA,
-            source: sourceA,
-            type: "area",
-            distance: distanceA,
-            _ctx: {
-              type: sourceA.type,
-              pos: isLeftTop ? targetA.pos + (distanceA + distanceB) / 2 : targetA.pos - (distanceA + distanceB) / 2
-            }
-          });
-          linePairs2.push({
-            target: targetB,
-            source: sourceB,
-            type: "area",
-            distance: distanceB
+  const linePairs = ref([]);
+  function updateSmartGuides() {
+    const _linePairs = [];
+    const box = createBox(selectionAabb.value);
+    if (box) {
+      const boxes = parnet.value.children.filter((node) => {
+        return !excluded.value.has(node.id) && isElement(node) && viewportAabb.value.overlap(node.getGlobalAabb());
+      }).map((node) => createBox(node)).filter(Boolean);
+      const { vLines, hLines } = boxes.reduce(
+        (store, box2) => {
+          [box2.vt, box2.vm, box2.vb].forEach((val) => store.vLines.add(val));
+          [box2.hl, box2.hm, box2.hr].forEach((val) => store.hLines.add(val));
+          return store;
+        },
+        {
+          vLines: new BSTree((a, b) => a.pos - b.pos),
+          hLines: new BSTree((a, b) => a.pos - b.pos)
+        }
+      );
+      const areaLine = {
+        vt: [],
+        vb: [],
+        hl: [],
+        hr: []
+      };
+      const alignmentItems = [
+        { sources: [box.vt, box.vm, box.vb], targets: vLines },
+        { sources: [box.hl, box.hm, box.hr], targets: hLines }
+      ];
+      alignmentItems.forEach(({ targets, sources }) => {
+        const items = [];
+        for (const source of sources) {
+          const target = targets.searchClosest(source, (a, b, c) => {
+            return !c || Math.abs(a.pos - b.pos) < Math.abs(a.pos - c.pos);
           });
-          return;
+          if (!target) {
+            continue;
+          }
+          const distance2 = Math.abs(target.pos - source.pos);
+          if (distance2 >= snapThreshold.value) {
+            continue;
+          }
+          items.push({ source, target, type: "alignment", distance: distance2 });
         }
-      }
-      for (const i in sources) {
-        const areas = findAreas(targets[i], sources[i]);
-        if (areas.length) {
-          linePairs2.push(...areas);
-          break;
+        items.sort((a, b) => a.distance - b.distance);
+        if (items.length) {
+          _linePairs.push(items[0]);
         }
-      }
-    });
-    return linePairs2;
-  });
+      });
+      const areaLineItems = [
+        { sources: [box.vt, box.vb], targets: vLines },
+        { sources: [box.hl, box.hr], targets: hLines }
+      ];
+      areaLineItems.forEach(({ sources, targets }) => {
+        for (const source of sources) {
+          areaLine[source.type] = findLines(targets, source);
+        }
+      });
+      areaLine.vt = areaLine.vt.sort((a, b) => b.pos - a.pos);
+      areaLine.hl = areaLine.hl.sort((a, b) => b.pos - a.pos);
+      const areaItems = [
+        { targets: [areaLine.vt, areaLine.vb], sources: [box.vt, box.vb] },
+        { targets: [areaLine.hl, areaLine.hr], sources: [box.hl, box.hr] }
+      ];
+      areaItems.forEach(({ sources, targets }) => {
+        const targetA = targets[0][0];
+        const sourceA = sources[0];
+        const targetB = targets[1][0];
+        const sourceB = sources[1];
+        if (targetA && targetB && (!isCanvasLine(targetA) || !isCanvasLine(targetB))) {
+          const distanceA = Math.abs(sourceA.pos - targetA.pos);
+          const distanceB = Math.abs(sourceB.pos - targetB.pos);
+          if (Math.abs(distanceA - distanceB) < snapThreshold.value) {
+            const isLeftTop = isLeftTopLine(sourceA);
+            _linePairs.push({
+              target: targetA,
+              source: sourceA,
+              type: "area",
+              distance: distanceA,
+              _ctx: {
+                type: sourceA.type,
+                pos: isLeftTop ? targetA.pos + (distanceA + distanceB) / 2 : targetA.pos - (distanceA + distanceB) / 2
+              }
+            });
+            _linePairs.push({
+              target: targetB,
+              source: sourceB,
+              type: "area",
+              distance: distanceB
+            });
+            return;
+          }
+        }
+        for (const i in sources) {
+          const areas = findAreas(targets[i], sources[i]);
+          if (areas.length) {
+            _linePairs.push(...areas);
+            break;
+          }
+        }
+      });
+    }
+    linePairs.value = _linePairs;
+  }
   const snapLines = computed(() => {
     if (state.value !== "transforming")
       return [];
@@ -13938,7 +13953,17 @@ const _smartGuides = definePlugin((editor) => {
     name: "mce:smartGuides",
     components: [
       { type: "overlay", component: _sfc_main$k }
-    ]
+    ],
+    events: {
+      selectionTransforming: ({ handle }) => {
+        if (handle === "move") {
+          updateSmartGuides();
+        }
+      },
+      selectionTransformEnd: () => {
+        linePairs.value = [];
+      }
+    }
   };
 });
 function createLine(pos, type, box) {
@@ -13967,6 +13992,11 @@ function flipType(type) {
 function isLeftTopLine(line) {
   return ["vt", "hl"].includes(line.type);
 }
+const _smartSelection = definePlugin((_editor) => {
+  return {
+    name: "mce:smartSelection"
+  };
+});
 const _state = definePlugin((editor) => {
   const {
     state
@@ -14784,14 +14814,12 @@ const _ui = definePlugin((editor) => {
       const {
         drawboardDom,
         drawboardAabb,
-        drawboardPointer,
-        exec
+        drawboardPointer
       } = editor;
       useResizeObserver$1(drawboardDom, (entries) => {
         const { left: _left, top: _top, width, height } = entries[0].contentRect;
         const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
         drawboardAabb.value = new Aabb2D(left, top, width, height);
-        exec("zoomToFit");
       });
       document.addEventListener("mousemove", (event) => {
         drawboardPointer.value = new Vector2$1(
@@ -14921,9 +14949,8 @@ const _zoom = definePlugin((editor) => {
 });
 const plugins = [
   _arrange,
-  _cancel,
+  _autoNest,
   _copyAs,
-  _delete,
   _drawingTool,
   _edit,
   _frame,
@@ -14953,6 +14980,7 @@ const plugins = [
   _shape,
   _slice,
   _smartGuides,
+  _smartSelection,
   _state,
   _statusbar,
   _text,
@@ -15126,7 +15154,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const {
       elementSelection,
       selectionAabbInDrawboard,
-      isFrame
+      inEditorIs
     } = useEditor();
     const overlay = useTemplateRef("overlayTpl");
     const style = computed(() => {
@@ -15134,17 +15162,19 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       const aabb = selectionAabbInDrawboard.value;
       if (location?.startsWith("top") || location?.startsWith("bottom")) {
         return {
-          minWidth: `${aabb.width}px`
+          "--height": "auto",
+          "--width": `${aabb.width}px`
         };
       } else if (location?.startsWith("left") || location?.startsWith("right")) {
         return {
-          minHeight: `${aabb.height}px`
+          "--height": `${aabb.height}px`,
+          "--width": "auto"
         };
       }
       return {};
     });
     const offset2 = computed(() => {
-      if (elementSelection.value.some((v) => isFrame(v)) || props.location?.startsWith("bottom")) {
+      if (elementSelection.value.some((v) => inEditorIs(v, "Frame")) || props.location?.startsWith("bottom")) {
         return 32;
       }
       return 8;
@@ -15497,7 +15527,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               rotatedCurrentPoint.y - centerPoint.y,
               rotatedCurrentPoint.x - centerPoint.x
             ) / (Math.PI / 180);
-            updated.rotate = (rotate + endAngle - startAngle + 360) % 360;
+            updated.rotate = rotate + endAngle - startAngle;
           }
         } else if (isRound) {
           const offset2 = rotatePoint2(rotatedOffset, { x: 0, y: 0 }, -rotate);
@@ -16020,16 +16050,17 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       selectionObb,
       selectionObbInDrawboard,
       camera,
-      obbToFit,
       getObb,
+      getAabb,
       registerCommand,
       unregisterCommand,
-      isFrame,
+      inEditorIs,
       isLock,
       config,
       snapThreshold,
       getSnapPoints,
-      hoverElement
+      hoverElement,
+      selectionAabb
     } = useEditor();
     const transformable = useTemplateRef("transformableTpl");
     const startEvent = ref();
@@ -16070,18 +16101,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         };
       });
     });
-    const _transform2 = computed(() => {
-      const zoom = camera.value.zoom;
-      const { left, top, width, height, rotationDegrees } = selectionObbInDrawboard.value;
-      return {
-        left,
-        top,
-        width,
-        height,
-        rotate: rotationDegrees,
-        borderRadius: (elementSelection.value[0]?.style.borderRadius ?? 0) * zoom.x
-      };
-    });
     function snap(currentPos, type) {
       const points = getSnapPoints();
       const zoom = camera.value.zoom;
@@ -16118,6 +16137,45 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         elements: elementSelection.value
       };
     }
+    const startContext = {
+      rotate: 0,
+      offsetMap: {}
+    };
+    function onStart() {
+      startContext.rotate = 0;
+      const aabb = selectionAabb.value;
+      elementSelection.value.forEach((el) => {
+        const elAabb = el.getGlobalAabb();
+        startContext.offsetMap[el.instanceId] = {
+          x: (elAabb.x - aabb.x) / aabb.width,
+          y: (elAabb.y - aabb.y) / aabb.height
+        };
+      });
+      emit("selectionTransformStart", createSelectionTransformContext());
+    }
+    function onMove() {
+      if (!state.value) {
+        state.value = "transforming";
+      }
+    }
+    function onEnd() {
+      if (state.value === "transforming") {
+        state.value = void 0;
+      }
+      emit("selectionTransformEnd", createSelectionTransformContext());
+    }
+    const _transform2 = computed(() => {
+      const zoom = camera.value.zoom;
+      const { left, top, width, height, rotationDegrees } = selectionObbInDrawboard.value;
+      return {
+        left,
+        top,
+        width,
+        height,
+        rotate: rotationDegrees,
+        borderRadius: (elementSelection.value[0]?.style.borderRadius ?? 0) * zoom.x
+      };
+    });
     const transform = computed({
       get: () => _transform2.value,
       set: (val) => {
@@ -16144,80 +16202,84 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           rotate: transform2.rotate - (oldTransform.rotate ?? 0),
           borderRadius: transform2.borderRadius - (oldTransform.borderRadius ?? 0) / zoom.y
         };
-        elementSelection.value.forEach((element) => {
-          const style = element.style;
+        const els = elementSelection.value;
+        if (els.length > 1) {
+          if (handle.startsWith("rotate")) {
+            offsetStyle.rotate = transform2.rotate - startContext.rotate;
+            startContext.rotate += offsetStyle.rotate;
+          }
+        }
+        els.forEach((el) => {
+          const style = el.style;
           const newStyle = {
             left: style.left + offsetStyle.left,
             top: style.top + offsetStyle.top,
             width: style.width + offsetStyle.width,
             height: style.height + offsetStyle.height,
-            rotate: style.rotate + offsetStyle.rotate,
+            rotate: (style.rotate + offsetStyle.rotate + 360) % 360,
             borderRadius: Math.round(style.borderRadius + offsetStyle.borderRadius)
           };
           if (handle.startsWith("rotate")) {
             newStyle.rotate = Math.round(newStyle.rotate * 100) / 100;
           } else if (handle.startsWith("resize")) {
             const scale = newStyle.rotate ? 100 : 1;
-            newStyle.width = Math.round(newStyle.width * scale) / scale;
-            newStyle.height = Math.round(newStyle.height * scale) / scale;
-            const shape = element.shape;
+            const newWidth = Math.max(1, Math.round(newStyle.width * scale) / scale);
+            const newHeight = Math.max(1, Math.round(newStyle.height * scale) / scale);
+            const shape = el.shape;
             resizeElement(
-              element,
-              newStyle.width / element.style.width,
-              newStyle.height / element.style.height,
-              isFrame(element) ? void 0 : shape.isValid() ? { deep: true } : handle.split("-")[1].length > 1 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
+              el,
+              newWidth,
+              newHeight,
+              inEditorIs(el, "Frame") ? void 0 : shape.isValid() ? { deep: true } : handle.split("-")[1].length > 1 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
             );
-            newStyle.width = element.style.width;
-            newStyle.height = element.style.height;
+            newStyle.width = el.style.width;
+            newStyle.height = el.style.height;
           }
           Object.assign(style, newStyle);
-          element.updateGlobalTransform();
-          element.findAncestor((ancestor) => {
-            if (isElement(ancestor) && !isFrame(ancestor)) {
-              obbToFit(ancestor);
-            }
-            return false;
-          });
+          el.updateGlobalTransform();
         });
+        if (els.length > 1) {
+          if (handle.startsWith("resize")) {
+            const selectionAabb2 = getAabb(els);
+            els.forEach((el) => {
+              const pAabb = el.getParent()?.getGlobalAabb?.();
+              const { x, y } = startContext.offsetMap[el.instanceId];
+              let left = selectionAabb2.left + selectionAabb2.width * x;
+              let top = selectionAabb2.top + selectionAabb2.height * y;
+              if (pAabb) {
+                left -= pAabb.left;
+                top -= pAabb.top;
+              }
+              el.style.left = left;
+              el.style.top = top;
+            });
+          }
+        }
         emit("selectionTransforming", createSelectionTransformContext());
       }
     });
     const movable = computed(() => {
-      return elementSelection.value.every((element) => {
+      return state.value !== "typing" && elementSelection.value.every((element) => {
         return !isLock(element) && element.meta.movable !== false && element.meta.transformable !== false;
       });
     });
     const resizable = computed(() => {
-      return elementSelection.value.every((element) => {
+      return state.value !== "typing" && elementSelection.value.every((element) => {
         return !isLock(element) && element.meta.resizable !== false && element.meta.transformable !== false;
       });
     });
     const rotatable = computed(() => {
-      return elementSelection.value.every((element) => {
+      return state.value !== "typing" && elementSelection.value.every((element) => {
         return !isLock(element) && element.meta.rotatable !== false && element.meta.transformable !== false;
       });
     });
     const roundable = computed(() => {
-      if (elementSelection.value.length === 1) {
+      if (state.value !== "typing" && elementSelection.value.length === 1) {
         const element = elementSelection.value[0];
         return hoverElement.value?.equal(element) && !isLock(element) && element.foreground.isValid();
       }
       return false;
     });
-    function onStart() {
-      emit("selectionTransformStart", createSelectionTransformContext());
-    }
-    function onMove() {
-      if (!state.value) {
-        state.value = "transforming";
-      }
-    }
-    function onEnd() {
-      if (state.value === "transforming") {
-        state.value = void 0;
-      }
-      emit("selectionTransformEnd", createSelectionTransformContext());
-    }
     function tipFormat() {
       const obb = elementSelection.value.length === 1 ? elementSelection.value[0].style : selectionObb.value;
       return `${Number(obb.width.toFixed(2))} × ${Number(obb.height.toFixed(2))}`;
@@ -16230,44 +16292,43 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(parentObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-selector__parent-element",
+            class: "mce-selector__parent-obb",
             style: normalizeStyle$1({
               borderColor: "currentColor",
               ...style
             })
           }, null, 4);
         }), 128)),
-        unref(state) === "selecting" ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "mce-selector__selected-area",
-          style: normalizeStyle$1({
-            borderColor: "currentcolor",
-            ...props.selectedArea.toCssStyle()
-          })
-        }, null, 4)) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(selectionObbStyles.value, (style, index) => {
+        unref(state) !== "transforming" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectionObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-selector__element",
+            class: "mce-selector__obb",
             style: normalizeStyle$1({
               borderColor: "currentcolor",
               ...style
             })
           }, null, 4);
-        }), 128)),
-        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$a, mergeProps({
+        }), 128)) : createCommentVNode("", true),
+        unref(state) === "selecting" ? (openBlock(), createElementBlock("div", {
           key: 1,
+          class: "mce-selector__selected-area",
+          style: normalizeStyle$1({
+            borderColor: "currentcolor",
+            ...props.selectedArea.toCssStyle()
+          })
+        }, null, 4)) : createCommentVNode("", true),
+        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$a, mergeProps({
+          key: 2,
           ref: "transformableTpl"
         }, unref(config).transformControls, {
           modelValue: transform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => transform.value = $event),
-          movable: unref(state) !== "typing" && movable.value,
-          resizable: unref(state) !== "typing" && resizable.value,
-          rotatable: unref(state) !== "typing" && rotatable.value,
-          roundable: unref(state) !== "typing" && roundable.value,
+          movable: movable.value,
+          resizable: resizable.value,
+          rotatable: rotatable.value,
+          roundable: roundable.value,
           "resize-strategy": props.resizeStrategy,
           class: "mce-selector__transform",
-          "border-style": unref(elementSelection).length > 1 ? "dashed" : "solid",
           "tip-format": tipFormat,
           onStart,
           onMove,
@@ -16280,9 +16341,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "border-style"])) : createCommentVNode("", true),
+        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy"])) : createCommentVNode("", true),
         transform.value.width && transform.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
-          key: 2,
+          key: 3,
           class: "mce-selector__slot",
           style: normalizeStyle$1(unref(boundingBoxToStyle)(transform.value))
         }, [