mce 0.15.30 → 0.15.32

package/dist/components/Floatbar.vue.d.ts

@@ -48,7 +48,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     offset: number;
     attach: string | boolean | Element | null | undefined;
-    middlewares: ("shift" | "offset" | "flip")[];
+    middlewares: ("flip" | "shift" | "offset")[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/shared/Dialog.vue.d.ts

@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
     attach: string | boolean | Element | null | undefined;
-    middlewares: ("shift" | "offset" | "flip")[];
+    middlewares: ("flip" | "shift" | "offset")[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/shared/Menu.vue.d.ts

@@ -82,7 +82,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onClick:item"?: ((item: MenuItem, event: MouseEvent) => any) | undefined;
 }>, {
     attach: string | boolean | Element | null | undefined;
-    middlewares: ("shift" | "offset" | "flip")[];
+    middlewares: ("flip" | "shift" | "offset")[];
     openOnHover: boolean;
     persistent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/shared/Overlay.vue.d.ts

@@ -58,7 +58,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onClick:outside"?: ((event: MouseEvent) => any) | undefined;
 }>, {
     attach: string | boolean | Element | null | undefined;
-    middlewares: ("shift" | "offset" | "flip")[];
+    middlewares: ("flip" | "shift" | "offset")[];
     modelValue: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/shared/Tooltip.vue.d.ts

@@ -78,7 +78,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     offset: number;
     location: import("@floating-ui/vue").Side | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
     attach: string | boolean | Element | null | undefined;
-    middlewares: ("shift" | "offset" | "flip")[];
+    middlewares: ("flip" | "shift" | "offset")[];
     showArrow: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/composables/overlay.d.ts

@@ -36,8 +36,8 @@ export declare const makeMceOverlayProps: <Defaults extends {
         type: PropType<("offset" | "flip" | "shift")[]>;
         default: () => string[];
     }, "type" | "default"> & {
-        type: PropType<unknown extends Defaults["middlewares"] ? ("shift" | "offset" | "flip")[] : ("shift" | "offset" | "flip")[] | Defaults["middlewares"]>;
-        default: unknown extends Defaults["middlewares"] ? ("shift" | "offset" | "flip")[] : ("shift" | "offset" | "flip")[] | Defaults["middlewares"];
+        type: PropType<unknown extends Defaults["middlewares"] ? ("flip" | "shift" | "offset")[] : ("flip" | "shift" | "offset")[] | Defaults["middlewares"]>;
+        default: unknown extends Defaults["middlewares"] ? ("flip" | "shift" | "offset")[] : ("flip" | "shift" | "offset")[] | Defaults["middlewares"];
     };
     target: unknown extends Defaults["target"] ? PropType<{
         x: number;

package/dist/index.js

@@ -1125,7 +1125,8 @@ const en = {
   "duplicate": "Duplicate",
   "delete": "Delete",
   "selectAll": "Select all",
-  "deselectAll": "Deselect all",
+  "selectInverse": "Deselect all",
+  "selectNone": "Select none",
   "selectChildren": "Select children",
   "selectParent": "Select parent",
   "selectPreviousSibling": "Select previous sibling",
@@ -1158,12 +1159,12 @@ const en = {
   "object": "Object",
   "groupSelection": "Group Selection",
   "frameSelection": "Frame selection",
-  "ungroup": "Ungroup",
+  "ungroupSelection": "ungroupSelection",
   "flip": "Flip",
   "flipHorizontal": "Flip horizontal",
   "flipVertical": "Flip vertical",
-  "hide/show": "Hide/Show",
-  "lock/unlock": "Lock/Unlock",
+  "showOrHideSelection": "Show/Hide",
+  "lockOrUnlockSelection": "Lock/Unlock",
   "layerOrder": "Layer order",
   "bringToFront": "Bring to front",
   "bringForward": "Bring forward",
@@ -1238,7 +1239,8 @@ const zhHans = {
   "duplicate": "创建副本",
   "delete": "删除",
   "selectAll": "选择全部",
-  "deselectAll": "反选全部",
+  "selectInverse": "反选全部",
+  "selectNone": "取消选择",
   "selectChildren": "选择子元素",
   "selectParent": "选择父元素",
   "selectPreviousSibling": "选择前一个",
@@ -1271,12 +1273,12 @@ const zhHans = {
   "object": "对象",
   "groupSelection": "组合选区",
   "frameSelection": "组合选区为画板",
-  "ungroup": "解组",
+  "ungroupSelection": "解组",
   "flip": "翻转",
   "flipHorizontal": "水平翻转",
   "flipVertical": "垂直翻转",
-  "hide/show": "隐藏/显示",
-  "lock/unlock": "锁/解锁",
+  "showOrHideSelection": "显示/隐藏",
+  "lockOrUnlockSelection": "锁/解锁",
   "layerOrder": "图层顺序",
   "bringToFront": "移到顶层",
   "bringForward": "上移一层",
@@ -3450,6 +3452,7 @@ const _4_1_text = defineMixin((editor) => {
 const _4_2_frame = defineMixin((editor) => {
   const {
     frames,
+    isElement,
     isTopFrame,
     selection,
     getAncestorFrame
@@ -3458,7 +3461,7 @@ const _4_2_frame = defineMixin((editor) => {
     let current;
     const node = selection.value[0];
     if (node) {
-      current = isTopFrame(node) ? node : getAncestorFrame(node, true);
+      current = isElement(node) && isTopFrame(node) ? node : getAncestorFrame(node, true);
     }
     const last = frames.value.length - 1;
     let index = frames.value.findIndex((node2) => node2.equal(current));
@@ -4300,19 +4303,24 @@ const _arrange = definePlugin((editor) => {
     });
   }
   function align(direction) {
+    const len = elementSelection.value.length;
+    if (!len) {
+      return;
+    }
     let targetAabb;
-    if (elementSelection.value.length > 1) {
-      targetAabb = getAabb(elementSelection.value);
-    } else {
+    if (len === 1) {
       const parent = elementSelection.value[0]?.parent;
       if (parent && isElement(parent)) {
         targetAabb = parent.getGlobalAabb();
       }
+    } else {
+      targetAabb = getAabb(elementSelection.value);
     }
     if (!targetAabb) {
       return;
     }
     elementSelection.value.forEach((el) => {
+      const parentAabb = el.getParent()?.getGlobalAabb?.() ?? new Aabb2D();
       const hw = el.size.x / 2;
       const hh = el.size.y / 2;
       const cos = Math.cos(el.rotation);
@@ -4321,22 +4329,22 @@ const _arrange = definePlugin((editor) => {
       const dy = Math.abs(hw * sin) + Math.abs(hh * cos);
       switch (direction) {
         case "left":
-          el.style.left = targetAabb.left + dx - hw;
+          el.style.left = targetAabb.left - parentAabb.left + dx - hw;
           break;
         case "horizontal-center":
-          el.style.left = targetAabb.left + targetAabb.width / 2 - hw;
+          el.style.left = targetAabb.left - parentAabb.left + targetAabb.width / 2 - hw;
           break;
         case "right":
-          el.style.left = targetAabb.left + targetAabb.width - dx - hw;
+          el.style.left = targetAabb.left - parentAabb.left + targetAabb.width - dx - hw;
           break;
         case "top":
-          el.style.top = targetAabb.top + dy - hh;
+          el.style.top = targetAabb.top - parentAabb.top + dy - hh;
           break;
         case "vertical-center":
-          el.style.top = targetAabb.top + targetAabb.height / 2 - hh;
+          el.style.top = targetAabb.top - parentAabb.top + targetAabb.height / 2 - hh;
           break;
         case "bottom":
-          el.style.top = targetAabb.top + targetAabb.height - dy - hh;
+          el.style.top = targetAabb.top - parentAabb.top + targetAabb.height - dy - hh;
           break;
       }
     });
@@ -4353,9 +4361,14 @@ const _arrange = definePlugin((editor) => {
   function sendToBack(target = selection.value) {
     target && zOrder2(target, "sendToBack");
   }
+  function distributeSpacing(_direction) {
+  }
+  function tidyUp() {
+  }
   return {
     name: "mce:arrange",
     commands: [
+      { command: "zOrder", handle: zOrder2 },
       { command: "bringForward", handle: bringForward },
       { command: "sendBackward", handle: sendBackward },
       { command: "bringToFront", handle: bringToFront },
@@ -4366,7 +4379,11 @@ const _arrange = definePlugin((editor) => {
       { command: "alignTop", handle: () => align("top") },
       { command: "alignBottom", handle: () => align("bottom") },
       { command: "alignHorizontalCenter", handle: () => align("horizontal-center") },
-      { command: "alignVerticalCenter", handle: () => align("vertical-center") }
+      { command: "alignVerticalCenter", handle: () => align("vertical-center") },
+      { command: "distributeSpacing", handle: distributeSpacing },
+      { command: "distributeHorizontalSpacing", handle: () => distributeSpacing() },
+      { command: "distributeVerticalSpacing", handle: () => distributeSpacing() },
+      { command: "tidyUp", handle: tidyUp }
     ],
     hotkeys: [
       { command: "bringForward", key: "CmdOrCtrl+]" },
@@ -4378,7 +4395,10 @@ const _arrange = definePlugin((editor) => {
       { command: "alignTop", key: "Alt+W" },
       { command: "alignBottom", key: "Alt+S" },
       { command: "alignHorizontalCenter", key: "Alt+H" },
-      { command: "alignVerticalCenter", key: "Alt+V" }
+      { command: "alignVerticalCenter", key: "Alt+V" },
+      { command: "distributeHorizontalSpacing", key: "Ctrl+Alt+H" },
+      { command: "distributeVerticalSpacing", key: "Ctrl+Alt+V" },
+      { command: "tidyUp", key: "Ctrl+Alt+T" }
     ]
   };
 });
@@ -4390,17 +4410,16 @@ const _autoNest = definePlugin((editor) => {
     exec,
     root
   } = editor;
-  let startFrame;
   let startContext = {};
-  function nestIntoFrame(element, options) {
+  function nestIntoFrame(el, options) {
     const pointer = options?.pointer;
-    const frame1 = element.findAncestor((node) => isTopFrame(node));
-    const aabb1 = element.getGlobalAabb();
+    const frame1 = el.findAncestor((node) => isTopFrame(node));
+    const aabb1 = el.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)) {
+      if (frame2.equal(el)) {
         continue;
       }
       const aabb2 = frame2.getGlobalAabb();
@@ -4410,10 +4429,10 @@ const _autoNest = definePlugin((editor) => {
           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();
+          frame2.moveChild(el, index);
+          el.style.left = aabb1.x - aabb2.x;
+          el.style.top = aabb1.y - aabb2.y;
+          el.updateGlobalTransform();
           exec("layerScrollIntoView");
         }
         flag = false;
@@ -4425,10 +4444,10 @@ const _autoNest = definePlugin((editor) => {
       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();
+      root.value.moveChild(el, index);
+      el.style.left = aabb1.x;
+      el.style.top = aabb1.y;
+      el.updateGlobalTransform();
       exec("layerScrollIntoView");
     }
   }
@@ -4438,20 +4457,10 @@ const _autoNest = definePlugin((editor) => {
       { command: "nestIntoFrame", handle: nestIntoFrame }
     ],
     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 }) => {
+      selectionTransformStart: ({ handle, startEvent, elements }) => {
         if (handle === "move" && !startEvent?.__FROM__) {
+          const pointer = getGlobalPointer();
+          const startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
           const idSet = /* @__PURE__ */ new Set();
           elements.forEach((el) => {
             const frame = isTopFrame(el) ? el : el.findAncestor(isTopFrame);
@@ -4464,11 +4473,25 @@ const _autoNest = definePlugin((editor) => {
             }
           });
           if (idSet.size === 1) {
-            elements.forEach((element) => {
+            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__) {
+          if (Object.keys(startContext).length > 0) {
+            elements.forEach((el) => {
               nestIntoFrame(
-                element,
+                el,
                 {
-                  ...startContext[element.instanceId],
+                  ...startContext[el.instanceId],
                   pointer: getGlobalPointer()
                 }
               );
@@ -4478,7 +4501,6 @@ const _autoNest = definePlugin((editor) => {
       },
       selectionTransformEnd: () => {
         startContext = {};
-        startFrame = void 0;
       }
     }
   };
@@ -5613,6 +5635,8 @@ const _frame = definePlugin((editor) => {
             position: start,
             active: true
           });
+          el.style.width = 1;
+          el.style.height = 1;
           el.style.backgroundColor = "#ffffff";
           return {
             move: (move) => {
@@ -5622,8 +5646,8 @@ const _frame = 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);
@@ -5678,103 +5702,6 @@ const _gif = definePlugin((editor, options) => {
     ]
   };
 });
-const _group = definePlugin((editor) => {
-  const {
-    getObb,
-    getAabb,
-    elementSelection,
-    addElement,
-    addElements,
-    doc,
-    isElement,
-    inEditorIs,
-    obbToFit
-  } = editor;
-  function group(inEditorIs2) {
-    const elements = elementSelection.value;
-    if (!elements.length) {
-      return;
-    }
-    const element = elements[0];
-    const parent = element.parent;
-    const aabb = getAabb(elements, "parent");
-    const children = elements.map((child) => {
-      const cloned = child.toJSON();
-      cloned.style.left = child.style.left - aabb.left;
-      cloned.style.top = child.style.top - aabb.top;
-      return cloned;
-    });
-    doc.value.transact(() => {
-      addElement({
-        name: inEditorIs2 === "Frame" ? "Frame" : "Group",
-        style: {
-          left: aabb.left,
-          top: aabb.top,
-          width: aabb.width,
-          height: aabb.height
-        },
-        children,
-        meta: {
-          inPptIs: "GroupShape",
-          inEditorIs: inEditorIs2
-        }
-      }, {
-        parent,
-        index: parent ? element.getIndex() : void 0,
-        active: true,
-        regenId: true
-      });
-      elements.forEach((node) => node.remove());
-    });
-  }
-  function ungroup() {
-    const element = elementSelection.value[0];
-    if (!element || !element.children.length)
-      return;
-    const parent = getObb(element, "parent");
-    const items = element.children.map((child) => {
-      const obb = getObb(child, "parent");
-      const cloned = child.toJSON();
-      cloned.style.left = obb.left + parent.left;
-      cloned.style.top = obb.top + parent.top;
-      return cloned;
-    });
-    doc.value.transact(() => {
-      addElements(items, {
-        parent: element.parent,
-        index: element.getIndex(),
-        active: true,
-        regenId: true
-      });
-      element.remove();
-    });
-  }
-  return {
-    name: "mce:group",
-    commands: [
-      { command: "groupSelection", handle: () => group("Element") },
-      { command: "frameSelection", handle: () => group("Frame") },
-      { command: "ungroup", handle: ungroup }
-    ],
-    hotkeys: [
-      { 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) => {
   const {
     doc,
@@ -6539,24 +6466,6 @@ const _layers = definePlugin(() => {
     ]
   };
 });
-const _lock = definePlugin((editor) => {
-  const {
-    selection,
-    isLock,
-    setLock
-  } = editor;
-  return {
-    name: "mce:lock",
-    commands: [
-      { command: "lock", handle: () => selection.value.forEach((el) => setLock(el, true)) },
-      { command: "unlock", handle: () => selection.value.forEach((el) => setLock(el, false)) },
-      { command: "lock/unlock", handle: () => selection.value.forEach((el) => setLock(el, !isLock(el))) }
-    ],
-    hotkeys: [
-      { command: "lock/unlock", key: "Shift+CmdOrCtrl+L" }
-    ]
-  };
-});
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -7111,7 +7020,8 @@ const _menu = definePlugin((editor, options) => {
     key: "select",
     children: [
       { key: "selectAll" },
-      { key: "deselectAll", disabled: !hasSelected.value },
+      { key: "selectInverse", disabled: !hasSelected.value },
+      { key: "selectNone", disabled: !hasSelected.value },
       { key: "selectChildren", disabled: !hasSelected.value },
       { key: "selectParent", disabled: !hasSelected.value },
       { key: "selectPreviousSibling", disabled: !hasSelected.value },
@@ -7211,7 +7121,7 @@ const _menu = definePlugin((editor, options) => {
   const objectMenu1 = computed(() => [
     { key: "groupSelection", disabled: !hasSelected.value },
     { key: "frameSelection", disabled: !hasSelected.value },
-    { key: "ungroup", disabled: !(hasSelected.value && selection.value[0]?.children.length) }
+    { key: "ungroupSelection", disabled: !(hasSelected.value && selection.value[0]?.children.length) }
   ]);
   const layerOrderMenu = computed(() => ({
     key: "layerOrder",
@@ -7230,8 +7140,8 @@ const _menu = definePlugin((editor, options) => {
     ]
   }));
   const objectMenu2 = computed(() => [
-    { key: "hide/show", disabled: !hasSelected.value },
-    { key: "lock/unlock", disabled: !hasSelected.value }
+    { key: "showOrHideSelection", disabled: !hasSelected.value },
+    { key: "lockOrUnlockSelection", disabled: !hasSelected.value }
   ]);
   const objectMenu = computed(() => ({
     key: "object",
@@ -12318,59 +12228,199 @@ const _selection = definePlugin((editor) => {
   const {
     isElement,
     selection,
+    elementSelection,
+    getObb,
+    getAabb,
+    doc,
     root,
     zoomTo,
-    findSibling
+    findSibling,
+    inEditorIs,
+    addElement,
+    addElements,
+    obbToFit,
+    setVisible,
+    isVisible,
+    setLock,
+    isLock
   } = editor;
-  function selectAll() {
-    selection.value = [...root.value.children];
-  }
-  function deselectAll() {
-    selection.value = [];
-  }
-  function selectChildren() {
-    const children = selection.value[0]?.children;
-    if (children?.length) {
-      selection.value = [...children];
+  function select(target) {
+    switch (target) {
+      case "none":
+        selection.value = [];
+        break;
+      case "all":
+        selection.value = [...root.value.children];
+        break;
+      case "inverse":
+        selection.value = [];
+        break;
+      case "children": {
+        const children = selection.value[0]?.children;
+        if (children?.length) {
+          selection.value = [...children];
+        }
+        break;
+      }
+      case "parent": {
+        const parent = selection.value[0]?.parent;
+        if (isElement(parent)) {
+          selection.value = [parent];
+        }
+        break;
+      }
+      case "previousSibling":
+      case "nextSibling": {
+        const value = findSibling(target === "previousSibling" ? "previous" : "next");
+        if (value) {
+          selection.value = [value];
+          zoomTo("selection", {
+            intoView: true,
+            behavior: "smooth"
+          });
+        }
+        break;
+      }
+      default:
+        selection.value = target;
+        break;
     }
   }
-  function selectParent() {
-    const parent = selection.value[0]?.parent;
-    if (isElement(parent)) {
-      selection.value = [parent];
+  function groupSelection(inEditorIs2) {
+    const elements = elementSelection.value;
+    if (!elements.length) {
+      return;
     }
+    const element = elements[0];
+    const parent = element.parent;
+    const aabb = getAabb(elements, "parent");
+    const children = elements.map((child) => {
+      const cloned = child.toJSON();
+      cloned.style.left = child.style.left - aabb.left;
+      cloned.style.top = child.style.top - aabb.top;
+      return cloned;
+    });
+    doc.value.transact(() => {
+      addElement({
+        name: inEditorIs2 === "Frame" ? "Frame" : "Group",
+        style: {
+          left: aabb.left,
+          top: aabb.top,
+          width: aabb.width,
+          height: aabb.height
+        },
+        children,
+        meta: {
+          inPptIs: "GroupShape",
+          inEditorIs: inEditorIs2
+        }
+      }, {
+        parent,
+        index: parent ? element.getIndex() : void 0,
+        active: true,
+        regenId: true
+      });
+      elements.forEach((node) => node.remove());
+    });
   }
-  function selectSibling(type) {
-    const value = findSibling(type);
-    if (value) {
-      selection.value = [value];
-      zoomTo("selection", {
-        intoView: true,
-        behavior: "smooth"
+  function ungroupSelection() {
+    const element = elementSelection.value[0];
+    if (!element || !element.children.length)
+      return;
+    const parent = getObb(element, "parent");
+    const items = element.children.map((child) => {
+      const obb = getObb(child, "parent");
+      const cloned = child.toJSON();
+      cloned.style.left = obb.left + parent.left;
+      cloned.style.top = obb.top + parent.top;
+      return cloned;
+    });
+    doc.value.transact(() => {
+      addElements(items, {
+        parent: element.parent,
+        index: element.getIndex(),
+        active: true,
+        regenId: true
       });
-    }
+      element.remove();
+    });
+  }
+  function showOrHideSelection(target) {
+    elementSelection.value.forEach((el) => {
+      switch (target) {
+        case "show":
+          setVisible(el, true);
+          break;
+        case "hide":
+          setVisible(el, false);
+          break;
+        default:
+          setVisible(el, !isVisible(el));
+          break;
+      }
+    });
+  }
+  function lockOrUnlockSelection(target) {
+    selection.value.forEach((el) => {
+      switch (target) {
+        case "lock":
+          setLock(el, true);
+          break;
+        case "unlock":
+          setLock(el, false);
+          break;
+        default:
+          setLock(el, !isLock(el));
+          break;
+      }
+    });
   }
   return {
     name: "mce:selection",
     commands: [
-      { command: "selectAll", handle: selectAll },
-      { command: "deselectAll", handle: deselectAll },
-      { command: "selectChildren", handle: selectChildren },
-      { command: "selectParent", handle: selectParent },
-      { command: "selectPreviousSibling", handle: () => selectSibling("previous") },
-      { command: "selectNextSibling", handle: () => selectSibling("next") }
+      { command: "select", handle: select },
+      { command: "selectAll", handle: () => select("all") },
+      { command: "selectInverse", handle: () => select("inverse") },
+      { command: "selectNone", handle: () => select("none") },
+      { command: "selectChildren", handle: () => select("children") },
+      { command: "selectParent", handle: () => select("parent") },
+      { command: "selectPreviousSibling", handle: () => select("previousSibling") },
+      { command: "selectNextSibling", handle: () => select("nextSibling") },
+      { command: "groupSelection", handle: () => groupSelection("Element") },
+      { command: "ungroupSelection", handle: ungroupSelection },
+      { command: "frameSelection", handle: () => groupSelection("Frame") },
+      { command: "showOrHideSelection", handle: showOrHideSelection },
+      { command: "lockOrUnlockSelection", handle: lockOrUnlockSelection }
     ],
     hotkeys: [
       { command: "selectAll", key: "CmdOrCtrl+A" },
-      { command: "deselectAll", key: "Shift+CmdOrCtrl+A" },
+      { command: "selectInverse", key: "Shift+CmdOrCtrl+A" },
+      { command: "selectNone", key: "Esc" },
       { command: "selectChildren", key: "Enter" },
       { command: "selectParent", key: "\\" },
       { command: "selectPreviousSibling", key: "Shift+Tab" },
-      { command: "selectNextSibling", key: "Tab" }
+      { command: "selectNextSibling", key: "Tab" },
+      { command: "groupSelection", key: "CmdOrCtrl+G" },
+      { command: "ungroupSelection", key: "CmdOrCtrl+Backspace" },
+      { command: "frameSelection", key: "Alt+CmdOrCtrl+G" },
+      { command: "showOrHideSelection", key: "Shift+CmdOrCtrl+H" },
+      { command: "lockOrUnlockSelection", key: "Shift+CmdOrCtrl+L" }
     ],
     components: [
       { type: "overlay", component: _sfc_main$l }
-    ]
+    ],
+    events: {
+      selectionTransforming: ({ elements }) => {
+        elements.forEach((el) => {
+          el.findAncestor((ancestor) => {
+            if (isElement(ancestor) && !inEditorIs(ancestor, "Frame")) {
+              obbToFit(ancestor);
+            }
+            return false;
+          });
+        });
+      }
+    }
   };
 });
 function rotatePoint(center, point, angleRad) {
@@ -12616,6 +12666,8 @@ const _slice = 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);
@@ -12624,8 +12676,8 @@ const _slice = 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);
@@ -14783,22 +14835,27 @@ const _transform = definePlugin((editor) => {
     }
   }
   const when = () => Boolean(elementSelection.value.length > 0);
-  function flipHorizontal() {
-    elementSelection.value.forEach((el) => {
-      el.style.scaleX = -el.style.scaleX;
-    });
-  }
-  function flipVertical() {
-    elementSelection.value.forEach((el) => {
-      el.style.scaleY = -el.style.scaleY;
-    });
+  function flip2(target) {
+    switch (target) {
+      case "horizontal":
+        elementSelection.value.forEach((el) => {
+          el.style.scaleX = -el.style.scaleX;
+        });
+        break;
+      case "vertical":
+        elementSelection.value.forEach((el) => {
+          el.style.scaleY = -el.style.scaleY;
+        });
+        break;
+    }
   }
   return {
     name: "mce:transform",
     commands: [
       { command: "enter", handle: _enter },
-      { command: "flipHorizontal", handle: flipHorizontal },
-      { command: "flipVertical", handle: flipVertical }
+      { command: "flip", handle: flip2 },
+      { command: "flipHorizontal", handle: () => flip2("horizontal") },
+      { command: "flipVertical", handle: () => flip2("vertical") }
     ],
     hotkeys: [
       { command: "enter", key: ["Enter"], when },
@@ -14871,39 +14928,6 @@ const _view = definePlugin((editor) => {
     ]
   };
 });
-const _visibility = definePlugin((editor) => {
-  const {
-    elementSelection,
-    setVisible,
-    isVisible
-  } = editor;
-  function show() {
-    elementSelection.value.forEach((el) => {
-      setVisible(el, true);
-    });
-  }
-  function hide() {
-    elementSelection.value.forEach((el) => {
-      setVisible(el, false);
-    });
-  }
-  function hideOrShow() {
-    elementSelection.value.forEach((el) => {
-      setVisible(el, !isVisible(el));
-    });
-  }
-  return {
-    name: "mce:visibility",
-    commands: [
-      { command: "hide", handle: hide },
-      { command: "show", handle: show },
-      { command: "hide/show", handle: hideOrShow }
-    ],
-    hotkeys: [
-      { command: "hide/show", key: "Shift+CmdOrCtrl+H" }
-    ]
-  };
-});
 const _zoom = definePlugin((editor) => {
   const {
     registerConfig,
@@ -14955,7 +14979,6 @@ const plugins = [
   _edit,
   _frame,
   _gif,
-  _group,
   _history,
   _hover,
   _html,
@@ -14963,7 +14986,6 @@ const plugins = [
   _import,
   _json,
   _layers,
-  _lock,
   _madeWith,
   _menu,
   _move,
@@ -14990,7 +15012,6 @@ const plugins = [
   _ui,
   _url,
   _view,
-  _visibility,
   _zoom
 ];
 class Editor extends Observable {
@@ -16242,16 +16263,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           if (handle.startsWith("resize")) {
             const selectionAabb2 = getAabb(els);
             els.forEach((el) => {
-              const pAabb = el.getParent()?.getGlobalAabb?.();
+              const parentAabb = el.getParent()?.getGlobalAabb?.() ?? new Aabb2D();
               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;
+              el.style.left = selectionAabb2.left - parentAabb.left + selectionAabb2.width * x;
+              el.style.top = selectionAabb2.top - parentAabb.left + selectionAabb2.height * y;
             });
           }
         }

package/dist/locale/en.d.ts

@@ -57,7 +57,8 @@ declare const _default: {
     duplicate: string;
     delete: string;
     selectAll: string;
-    deselectAll: string;
+    selectInverse: string;
+    selectNone: string;
     selectChildren: string;
     selectParent: string;
     selectPreviousSibling: string;
@@ -90,12 +91,12 @@ declare const _default: {
     object: string;
     groupSelection: string;
     frameSelection: string;
-    ungroup: string;
+    ungroupSelection: string;
     flip: string;
     flipHorizontal: string;
     flipVertical: string;
-    'hide/show': string;
-    'lock/unlock': string;
+    showOrHideSelection: string;
+    lockOrUnlockSelection: string;
     layerOrder: string;
     bringToFront: string;
     bringForward: string;

package/dist/locale/zh-Hans.d.ts

@@ -58,7 +58,8 @@ declare const _default: {
     duplicate: string;
     delete: string;
     selectAll: string;
-    deselectAll: string;
+    selectInverse: string;
+    selectNone: string;
     selectChildren: string;
     selectParent: string;
     selectPreviousSibling: string;
@@ -91,12 +92,12 @@ declare const _default: {
     object: string;
     groupSelection: string;
     frameSelection: string;
-    ungroup: string;
+    ungroupSelection: string;
     flip: string;
     flipHorizontal: string;
     flipVertical: string;
-    'hide/show': string;
-    'lock/unlock': string;
+    showOrHideSelection: string;
+    lockOrUnlockSelection: string;
     layerOrder: string;
     bringToFront: string;
     bringForward: string;

package/dist/mixins/0.context.d.ts

@@ -46,10 +46,10 @@ declare global {
             parseAnchor: (anchor: Anchor, isRtl?: boolean) => ParsedAnchor;
             isNode: (value: any) => value is Node;
             isRoot: (value: any) => value is Node;
-            inEditorIs: (value: Node, inEditorIs?: EditorNodeType) => boolean;
+            inEditorIs: (node: Node, inEditorIs?: EditorNodeType) => boolean;
             isElement: (value: any) => value is Element2D;
-            isFrame: (value: any) => value is Element2D;
-            isTopFrame: (value: any) => value is Element2D;
+            isFrame: (node: Node) => boolean;
+            isTopFrame: (node: Node) => boolean;
             isVisible: (node: Node) => boolean;
             setVisible: (node: Node, visible: boolean) => void;
             isLock: (node: Node) => boolean;

package/dist/plugins/arrange.d.ts

@@ -1,19 +1,41 @@
 import type { Node } from 'modern-canvas';
 declare global {
     namespace Mce {
-        type AlignCommandDirection = 'left' | 'horizontal-center' | 'right' | 'top' | 'vertical-center' | 'bottom';
+        type ZOrderType = 'bringForward' | 'sendBackward' | 'bringToFront' | 'sendToBack';
+        type AlignDirection = 'left' | 'horizontal-center' | 'right' | 'top' | 'vertical-center' | 'bottom';
+        type DistributeSpacingDirection = 'horizontal' | 'vertical';
         interface Commands {
+            zOrder: (target: Node | Node[], type: ZOrderType) => void;
             bringForward: (target?: Node) => void;
             sendBackward: (target?: Node) => void;
             bringToFront: (target?: Node | Node[]) => void;
             sendToBack: (target?: Node | Node[]) => void;
-            align: (direction: AlignCommandDirection) => void;
+            align: (direction: AlignDirection) => void;
             alignLeft: () => void;
             alignRight: () => void;
             alignTop: () => void;
             alignBottom: () => void;
             alignHorizontalCenter: () => void;
             alignVerticalCenter: () => void;
+            distributeSpacing: (direction: DistributeSpacingDirection) => void;
+            distributeHorizontalSpacing: () => void;
+            distributeVerticalSpacing: () => void;
+            tidyUp: () => void;
+        }
+        interface Hotkeys {
+            bringForward: [event: KeyboardEvent];
+            sendBackward: [event: KeyboardEvent];
+            bringToFront: [event: KeyboardEvent];
+            sendToBack: [event: KeyboardEvent];
+            alignLeft: [event: KeyboardEvent];
+            alignRight: [event: KeyboardEvent];
+            alignTop: [event: KeyboardEvent];
+            alignBottom: [event: KeyboardEvent];
+            alignHorizontalCenter: [event: KeyboardEvent];
+            alignVerticalCenter: [event: KeyboardEvent];
+            distributeHorizontalSpacing: [event: KeyboardEvent];
+            distributeVerticalSpacing: [event: KeyboardEvent];
+            tidyUp: [event: KeyboardEvent];
         }
     }
 }

package/dist/plugins/selection.d.ts

@@ -1,20 +1,35 @@
+import type { Node } from 'modern-canvas';
 declare global {
     namespace Mce {
-        interface Hotkeys {
-            selectAll: [event: KeyboardEvent];
-            deselectAll: [event: KeyboardEvent];
-            selectChildren: [event: KeyboardEvent];
-            selectParent: [event: KeyboardEvent];
-            selectPreviousSibling: [event: KeyboardEvent];
-            selectNextSibling: [event: KeyboardEvent];
-        }
+        type SelectTarget = 'none' | 'all' | 'inverse' | 'children' | 'parent' | 'previousSibling' | 'nextSibling' | Node[];
         interface Commands {
+            select: (target: SelectTarget) => void;
             selectAll: () => void;
-            deselectAll: () => void;
+            selectInverse: () => void;
+            selectNone: () => void;
             selectChildren: () => void;
             selectParent: () => void;
             selectPreviousSibling: () => void;
             selectNextSibling: () => void;
+            groupSelection: () => void;
+            ungroupSelection: () => void;
+            frameSelection: () => void;
+            showOrHideSelection: (target?: 'show' | 'hide') => void;
+            lockOrUnlockSelection: (target?: 'lock' | 'unlock') => void;
+        }
+        interface Hotkeys {
+            selectAll: [event: KeyboardEvent];
+            selectInverse: [event: KeyboardEvent];
+            selectNone: [event: KeyboardEvent];
+            selectChildren: [event: KeyboardEvent];
+            selectParent: [event: KeyboardEvent];
+            selectPreviousSibling: [event: KeyboardEvent];
+            selectNextSibling: [event: KeyboardEvent];
+            groupSelection: [event: KeyboardEvent];
+            ungroupSelection: [event: KeyboardEvent];
+            frameSelection: [event: KeyboardEvent];
+            showOrHideSelection: [event: KeyboardEvent];
+            lockOrUnlockSelection: [event: KeyboardEvent];
         }
     }
 }

package/dist/plugins/transform.d.ts

@@ -1,7 +1,9 @@
 declare global {
     namespace Mce {
+        type FlipTarget = 'horizontal' | 'vertical';
         interface Commands {
             enter: () => void;
+            flip: (target: Mce.FlipTarget) => void;
             flipHorizontal: () => void;
             flipVertical: () => void;
         }

package/dist/typed-plugins.d.ts

@@ -34,7 +34,6 @@ import './plugins/drawingTool'
 import './plugins/edit'
 import './plugins/frame'
 import './plugins/gif'
-import './plugins/group'
 import './plugins/history'
 import './plugins/hover'
 import './plugins/html'
@@ -42,7 +41,6 @@ import './plugins/image'
 import './plugins/import'
 import './plugins/json'
 import './plugins/layers'
-import './plugins/lock'
 import './plugins/madeWith'
 import './plugins/menu'
 import './plugins/move'
@@ -69,7 +67,6 @@ import './plugins/transform'
 import './plugins/ui'
 import './plugins/url'
 import './plugins/view'
-import './plugins/visibility'
 import './plugins/zoom'
 
 export {}

package/package.json

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

package/dist/plugins/group.d.ts

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

package/dist/plugins/lock.d.ts

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

package/dist/plugins/visibility.d.ts

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