mce 0.15.27 → 0.15.29

package/dist/index.css

@@ -298,7 +298,7 @@
   inset: 0;
   pointer-events: none;
 }
-.mce-overlay > * {
+.mce-overlay-content > * {
   pointer-events: auto;
 }.mce-menu {
   user-select: none;
@@ -1123,10 +1123,10 @@
 .mce-transform-controls--resizing .mce-transform-controls__diagonal {
   visibility: visible;
 }
-.mce-transform-controls--moving .mce-transform-controls__handle {
-  visibility: hidden;
-}
-.mce-transform-controls--moving .mce-transform-controls__handle-rect {
+.mce-transform-controls--moving .mce-transform-controls__handle,
+.mce-transform-controls--moving .mce-transform-controls__handle-rect,
+.mce-transform-controls--moving .mce-transform-controls__rotator,
+.mce-transform-controls--moving .mce-transform-controls__tip {
   visibility: hidden;
 }
 .mce-transform-controls--moving .mce-transform-controls__rect {
@@ -1137,13 +1137,11 @@
   opacity: 0.4;
   stroke-width: 0.5px;
 }
-.mce-transform-controls--hide-ui .mce-transform-controls__handle {
-  visibility: hidden;
-}
-.mce-transform-controls--hide-ui .mce-transform-controls__handle-rect {
-  visibility: hidden;
-}
-.mce-transform-controls--hide-ui .mce-transform-controls__rect {
+.mce-transform-controls--hide-ui .mce-transform-controls__handle,
+.mce-transform-controls--hide-ui .mce-transform-controls__handle-rect,
+.mce-transform-controls--hide-ui .mce-transform-controls__rect,
+.mce-transform-controls--hide-ui .mce-transform-controls__rotator,
+.mce-transform-controls--hide-ui .mce-transform-controls__tip {
   visibility: hidden;
 }.mce-cropper {
   pointer-events: auto;

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);
@@ -3752,7 +3659,7 @@ const _4_3_element = defineMixin((editor) => {
       selection.value = elements;
     }
     if (!isArray && !parent) {
-      handleDragOutReparent(elements[0]);
+      exec("nestIntoFrame", elements[0]);
     }
     return isArray ? elements : elements[0];
   }
@@ -3782,7 +3689,7 @@ const _4_3_element = defineMixin((editor) => {
   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 +4081,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 +4100,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
@@ -4480,21 +4387,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 +4512,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 +4555,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 +4788,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 +5449,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 +5482,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;
@@ -5818,7 +5814,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 +5831,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 +6158,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const props = __props;
     const {
       isElement,
-      isFrame,
+      inEditorIs,
       isVisible,
       setVisible,
       isLock,
@@ -6199,7 +6195,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 +6217,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");
@@ -13734,87 +13730,100 @@ const _smartGuides = definePlugin((editor) => {
     };
     return areas;
   }
-  const linePairs = computed(() => {
-    const { vLines, hLines } = store.value;
+  const linePairs = ref([]);
+  function updateSmartGuides() {
+    const _linePairs = [];
     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
+    if (box) {
+      const {
+        vLines,
+        hLines
+      } = store.value;
+      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 +13947,10 @@ const _smartGuides = definePlugin((editor) => {
     name: "mce:smartGuides",
     components: [
       { type: "overlay", component: _sfc_main$k }
-    ]
+    ],
+    events: {
+      selectionTransforming: updateSmartGuides
+    }
   };
 });
 function createLine(pos, type, box) {
@@ -13967,6 +13979,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
@@ -14921,9 +14938,8 @@ const _zoom = definePlugin((editor) => {
 });
 const plugins = [
   _arrange,
-  _cancel,
+  _autoNest,
   _copyAs,
-  _delete,
   _drawingTool,
   _edit,
   _frame,
@@ -14953,6 +14969,7 @@ const plugins = [
   _shape,
   _slice,
   _smartGuides,
+  _smartSelection,
   _state,
   _statusbar,
   _text,
@@ -15126,7 +15143,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const {
       elementSelection,
       selectionAabbInDrawboard,
-      isFrame
+      inEditorIs
     } = useEditor();
     const overlay = useTemplateRef("overlayTpl");
     const style = computed(() => {
@@ -15144,7 +15161,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       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;
@@ -16024,7 +16041,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       getObb,
       registerCommand,
       unregisterCommand,
-      isFrame,
+      inEditorIs,
       isLock,
       config,
       snapThreshold,
@@ -16165,7 +16182,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               element,
               newStyle.width / element.style.width,
               newStyle.height / element.style.height,
-              isFrame(element) ? void 0 : shape.isValid() ? { deep: true } : handle.split("-")[1].length > 1 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
+              inEditorIs(element, "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;
@@ -16173,7 +16190,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           Object.assign(style, newStyle);
           element.updateGlobalTransform();
           element.findAncestor((ancestor) => {
-            if (isElement(ancestor) && !isFrame(ancestor)) {
+            if (isElement(ancestor) && !inEditorIs(ancestor, "Frame")) {
               obbToFit(ancestor);
             }
             return false;

package/dist/mixins/4.2.frame.d.ts

@@ -1,14 +1,8 @@
-import type { Element2D, Vector2Like } from 'modern-canvas';
+import type { Element2D } from 'modern-canvas';
 declare global {
     namespace Mce {
-        interface HandleDragOutReparentOptions {
-            pointer: Vector2Like;
-            parent: Element2D;
-            index: number;
-        }
         interface Editor {
             findFrame: (target: 'next' | 'previous') => Element2D | undefined;
-            handleDragOutReparent: (element: Element2D, context?: HandleDragOutReparentOptions) => void;
         }
     }
 }

package/dist/plugins/autoNest.d.ts

@@ -0,0 +1,15 @@
+import type { Element2D, Vector2Like } from 'modern-canvas';
+declare global {
+    namespace Mce {
+        interface NestIntoFrameOptions {
+            pointer: Vector2Like;
+            parent: Element2D;
+            index: number;
+        }
+        interface Commands {
+            nestIntoFrame: (element: Element2D, options?: NestIntoFrameOptions) => void;
+        }
+    }
+}
+declare const _default: import("..").Plugin;
+export default _default;

package/dist/plugins/edit.d.ts

@@ -1,20 +1,24 @@
 import type { Ref } from 'vue';
 declare global {
     namespace Mce {
-        interface Hotkeys {
-            copy: [event: KeyboardEvent];
-            cut: [event: KeyboardEvent];
-            paste: [event: KeyboardEvent];
-            duplicate: [event: KeyboardEvent];
-        }
         type CopySource = string | Blob | Blob[] | Record<string, any>[];
         type PasteSource = DataTransfer | ClipboardItem[];
         interface Commands {
+            cancel: () => void;
+            delete: () => void;
             copy: (source?: CopySource) => Promise<void>;
             cut: () => Promise<void>;
             paste: (source?: PasteSource) => Promise<void>;
             duplicate: () => void;
         }
+        interface Hotkeys {
+            cancel: [event: KeyboardEvent];
+            delete: [event: KeyboardEvent];
+            copy: [event: KeyboardEvent];
+            cut: [event: KeyboardEvent];
+            paste: [event: KeyboardEvent];
+            duplicate: [event: KeyboardEvent];
+        }
         interface Editor {
             copiedData: Ref<any | undefined>;
         }

package/dist/plugins/{cancel.d.ts → smartSelection.d.ts}

@@ -1,7 +1,6 @@
 declare global {
     namespace Mce {
-        interface Commands {
-            cancel: () => void;
+        interface Editor {
         }
     }
 }

package/dist/typed-plugins.d.ts

@@ -28,9 +28,8 @@ import './mixins/scroll'
 import './mixins/snapshot'
 import './mixins/zoom'
 import './plugins/arrange'
-import './plugins/cancel'
+import './plugins/autoNest'
 import './plugins/copyAs'
-import './plugins/delete'
 import './plugins/drawingTool'
 import './plugins/edit'
 import './plugins/frame'
@@ -60,6 +59,7 @@ import './plugins/selection'
 import './plugins/shape'
 import './plugins/slice'
 import './plugins/smartGuides'
+import './plugins/smartSelection'
 import './plugins/state'
 import './plugins/statusbar'
 import './plugins/text'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.27",
+  "version": "0.15.29",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",

package/dist/plugins/delete.d.ts

@@ -1,12 +0,0 @@
-declare global {
-    namespace Mce {
-        interface Commands {
-            delete: () => void;
-        }
-        interface Hotkeys {
-            delete: [event: KeyboardEvent];
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;