mce 0.15.21 → 0.15.23

package/dist/index.css

@@ -607,6 +607,7 @@
   border-radius: 8px;
   font-size: 0.875rem;
   cursor: pointer;
+  white-space: nowrap;
 }.mce-smart-guides {
   position: absolute;
   overflow: hidden;
@@ -694,7 +695,7 @@
 100% {
     left: 100%;
 }
-}.mce-statusbar[data-v-79192677] {
+}.mce-statusbar[data-v-a1f0e31b] {
   user-select: none;
   position: relative;
   display: flex;
@@ -708,30 +709,32 @@
   background-color: rgba(var(--mce-theme-surface), 1);
   color: rgba(var(--mce-theme-on-surface), 1);
   font-weight: bold;
+  white-space: nowrap;
+  overflow-x: auto;
 }
-.mce-statusbar__main[data-v-79192677] {
+.mce-statusbar__main[data-v-a1f0e31b] {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 4px;
   height: 100%;
 }
-.mce-statusbar__item[data-v-79192677] {
+.mce-statusbar__item[data-v-a1f0e31b] {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-.mce-statusbar__item > svg[data-v-79192677] {
+.mce-statusbar__item > svg[data-v-a1f0e31b] {
   width: 1em;
   height: 1em;
 }
-.mce-statusbar__divider[data-v-79192677] {
+.mce-statusbar__divider[data-v-a1f0e31b] {
   width: 0;
   height: 60%;
-  border-right: 1px solid rgba(var(--mce-theme-on-surface), 0.2);
+  border-right: 1px solid rgba(var(--mce-theme-on-surface), 0.1);
   margin: 0 8px;
 }
-.mce-statusbar__kbd[data-v-79192677] {
+.mce-statusbar__kbd[data-v-a1f0e31b] {
   outline: 1px solid rgba(var(--mce-theme-on-surface), 0.1);
   border-radius: 4px;
   display: flex;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, Aabb2D, IN_BROWSER, clamp, assets, TimelineNode, Video2D, Transform2D, Obb2D, render, Vector2 as Vector2$1, Lottie2D, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
-import { reactive, computed, watch, markRaw, isReactive, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle as normalizeStyle$1, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, withModifiers, vModelText, vShow, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
+import { reactive, computed, watch, markRaw, isReactive, ref, warn, shallowRef, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle as normalizeStyle$1, toDisplayString, onBeforeUnmount, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, withModifiers, vModelText, vShow, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useResizeObserver as useResizeObserver$1, useLocalStorage, useImage } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeTextContent, isCRLF, textContentToString, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
@@ -1121,6 +1121,7 @@ const en = {
   "delete": "Delete",
   "selectAll": "Select all",
   "deselectAll": "Deselect all",
+  "selectChildren": "Select children",
   "selectParent": "Select parent",
   "selectPreviousSibling": "Select previous sibling",
   "selectNextSibling": "Select next sibling",
@@ -1232,6 +1233,7 @@ const zhHans = {
   "delete": "删除",
   "selectAll": "选择全部",
   "deselectAll": "反选全部",
+  "selectChildren": "选择子元素",
   "selectParent": "选择父元素",
   "selectPreviousSibling": "选择前一个",
   "selectNextSibling": "选择后一个",
@@ -2020,8 +2022,8 @@ const _2_box = defineMixin((editor) => {
     return new Aabb2D({
       x: p1.x,
       y: p1.y,
-      width: p2.x,
-      height: p2.y
+      width: p2.x - p1.x,
+      height: p2.y - p1.y
     });
   });
   const rootAabb = computed(() => getAabb(root.value.children));
@@ -2201,29 +2203,37 @@ const _3_view = defineMixin((editor) => {
 const _4_0_node = defineMixin((editor) => {
   const {
     doc,
-    selection
+    selection,
+    root
   } = editor;
   function findSibling(target) {
     const node = selection.value[0];
+    let value, parent;
     if (node) {
-      let value;
-      switch (target) {
-        case "previous":
+      parent = node.parent;
+    } else {
+      parent = root.value;
+    }
+    switch (target) {
+      case "previous":
+        if (node) {
           value = node.nextSibling;
-          if (!value && node.parent) {
-            value = node.parent.children[0];
-          }
-          break;
-        case "next":
+        }
+        if (!value && parent) {
+          value = parent.children[0];
+        }
+        break;
+      case "next":
+        if (node) {
           value = node.previousSibling;
-          if (!value && node.parent) {
-            value = node.parent.children[node.parent.children.length - 1];
-          }
-          break;
-      }
-      if (value && !node.equal(value)) {
-        return value;
-      }
+        }
+        if (!value && parent) {
+          value = parent.children[parent.children.length - 1];
+        }
+        break;
+    }
+    if (value && (!node || !node.equal(value))) {
+      return value;
     }
     return void 0;
   }
@@ -3354,9 +3364,10 @@ const _4_2_frame = defineMixin((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;
-            frame2.moveChild(element, index);
+            element.updateGlobalTransform();
             exec("layerScrollIntoView");
           }
           flag = false;
@@ -3365,13 +3376,14 @@ const _4_2_frame = defineMixin((editor) => {
       }
     }
     if (flag && frame1) {
-      element.style.left = aabb1.x;
-      element.style.top = aabb1.y;
       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");
     }
   }
@@ -4070,6 +4082,129 @@ const mixins = [
 function definePlugin(cb) {
   return 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) => {
+      const parent = el.getParent();
+      if (!parent)
+        return;
+      let index = el.getIndex();
+      const front = parent.children.length - 1;
+      const back = 0;
+      switch (type) {
+        case "bringForward":
+          index = Math.min(parent.children.length - 1, index + 1);
+          break;
+        case "bringToFront":
+          index = front;
+          break;
+        case "sendBackward":
+          index = Math.max(back, index - 1);
+          break;
+        case "sendToBack":
+          index = back;
+          break;
+      }
+      parent.moveChild(el, index);
+    });
+  }
+  function bringToFront(target = selection.value) {
+    target && zOrder2(target, "bringToFront");
+  }
+  function bringForward(target = selection.value[0]) {
+    target && zOrder2(target, "bringForward");
+  }
+  function sendBackward(target = selection.value[0]) {
+    target && zOrder2(target, "sendBackward");
+  }
+  function sendToBack(target = selection.value) {
+    target && zOrder2(target, "sendToBack");
+  }
+  return {
+    name: "mce:arrange",
+    commands: [
+      { command: "bringForward", handle: bringForward },
+      { command: "sendBackward", handle: sendBackward },
+      { command: "bringToFront", handle: bringToFront },
+      { command: "sendToBack", handle: sendToBack },
+      { command: "align", handle: align },
+      { command: "alignLeft", handle: () => align("left") },
+      { command: "alignRight", handle: () => align("right") },
+      { command: "alignTop", handle: () => align("top") },
+      { command: "alignBottom", handle: () => align("bottom") },
+      { command: "alignHorizontalCenter", handle: () => align("horizontal-center") },
+      { command: "alignVerticalCenter", handle: () => align("vertical-center") }
+    ],
+    hotkeys: [
+      { command: "bringForward", key: "CmdOrCtrl+]" },
+      { command: "sendBackward", key: "CmdOrCtrl+[" },
+      { command: "bringToFront", key: "]" },
+      { command: "sendToBack", key: "[" },
+      { command: "alignLeft", key: "Alt+a" },
+      { command: "alignRight", key: "Alt+d" },
+      { command: "alignTop", key: "Alt+w" },
+      { command: "alignBottom", key: "Alt+s" },
+      { command: "alignHorizontalCenter", key: "Alt+h" },
+      { command: "alignVerticalCenter", key: "Alt+v" }
+    ]
+  };
+});
 const _cancel = definePlugin((editor) => {
   const {
     state
@@ -4087,7 +4222,97 @@ const _cancel = definePlugin((editor) => {
     ]
   };
 });
-const _clipboard = definePlugin((editor, options) => {
+const _copyAs = definePlugin((editor) => {
+  const {
+    to,
+    exec,
+    exporters
+  } = editor;
+  const copyAs = async (key, options = {}) => {
+    let res = await to(key, {
+      selected: true,
+      ...options
+    });
+    const exporter = exporters.get(key);
+    if (exporter && typeof exporter.copyAs === "function") {
+      res = exporter.copyAs(res);
+    }
+    exec("copy", res);
+  };
+  return {
+    name: "mce:copyAs",
+    commands: [
+      { command: "copyAs", handle: copyAs }
+    ]
+  };
+});
+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"
+};
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  __name: "Drawing",
+  setup(__props) {
+    const {
+      drawboardPointer,
+      state,
+      activeDrawingTool,
+      t
+    } = useEditor();
+    return (_ctx, _cache) => {
+      return unref(state) === "drawing" && unref(drawboardPointer) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "mce-drawing",
+        style: normalizeStyle$1({
+          left: `${unref(drawboardPointer).x}px`,
+          top: `${unref(drawboardPointer).y}px`
+        })
+      }, [
+        unref(activeDrawingTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$n, toDisplayString(unref(t)(unref(activeDrawingTool).name)), 1)) : createCommentVNode("", true)
+      ], 4)) : createCommentVNode("", true);
+    };
+  }
+});
+const _drawingTool = definePlugin((editor) => {
+  const {
+    setActiveDrawingTool
+  } = editor;
+  return {
+    name: "mce:drawingTool",
+    components: [
+      { name: "drawing", type: "overlay", component: _sfc_main$D }
+    ],
+    commands: [
+      { command: "setActiveDrawingTool", handle: (val) => setActiveDrawingTool(val) }
+    ]
+  };
+});
+const _edit = definePlugin((editor, options) => {
   const {
     selection,
     exec,
@@ -4306,7 +4531,7 @@ const _clipboard = definePlugin((editor, options) => {
     copiedData
   });
   return {
-    name: "mce:clipboard",
+    name: "mce:edit",
     commands: [
       { command: "copy", handle: copy },
       { command: "cut", handle: cut },
@@ -4335,96 +4560,6 @@ const _clipboard = definePlugin((editor, options) => {
     }
   };
 });
-const _copyAs = definePlugin((editor) => {
-  const {
-    to,
-    exec,
-    exporters
-  } = editor;
-  const copyAs = async (key, options = {}) => {
-    let res = await to(key, {
-      selected: true,
-      ...options
-    });
-    const exporter = exporters.get(key);
-    if (exporter && typeof exporter.copyAs === "function") {
-      res = exporter.copyAs(res);
-    }
-    exec("copy", res);
-  };
-  return {
-    name: "mce:copyAs",
-    commands: [
-      { command: "copyAs", handle: copyAs }
-    ]
-  };
-});
-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"
-};
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
-  __name: "Drawing",
-  setup(__props) {
-    const {
-      drawboardPointer,
-      state,
-      activeDrawingTool,
-      t
-    } = useEditor();
-    return (_ctx, _cache) => {
-      return unref(state) === "drawing" && unref(drawboardPointer) ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: "mce-drawing",
-        style: normalizeStyle$1({
-          left: `${unref(drawboardPointer).x}px`,
-          top: `${unref(drawboardPointer).y}px`
-        })
-      }, [
-        unref(activeDrawingTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$n, toDisplayString(unref(t)(unref(activeDrawingTool).name)), 1)) : createCommentVNode("", true)
-      ], 4)) : createCommentVNode("", true);
-    };
-  }
-});
-const _drawingTool = definePlugin((editor) => {
-  const {
-    setActiveDrawingTool
-  } = editor;
-  return {
-    name: "mce:drawingTool",
-    components: [
-      { name: "drawing", type: "overlay", component: _sfc_main$D }
-    ],
-    commands: [
-      { command: "setActiveDrawingTool", handle: (val) => setActiveDrawingTool(val) }
-    ]
-  };
-});
 const _enter = definePlugin((editor) => {
   const {
     selection,
@@ -4452,32 +4587,6 @@ const _enter = definePlugin((editor) => {
     ]
   };
 });
-const _flip = definePlugin((editor) => {
-  const {
-    elementSelection
-  } = editor;
-  function flipHorizontal() {
-    elementSelection.value.forEach((el) => {
-      el.style.scaleX = -el.style.scaleX;
-    });
-  }
-  function flipVertical() {
-    elementSelection.value.forEach((el) => {
-      el.style.scaleY = -el.style.scaleY;
-    });
-  }
-  return {
-    name: "mce:flip",
-    commands: [
-      { command: "flipHorizontal", handle: flipHorizontal },
-      { command: "flipVertical", handle: flipVertical }
-    ],
-    hotkeys: [
-      { command: "flipHorizontal", key: "Shift+h" },
-      { command: "flipVertical", key: "Shift+v" }
-    ]
-  };
-});
 function makeIconProps() {
   return {
     icon: {
@@ -5751,140 +5860,6 @@ const _json = definePlugin((editor) => {
     ]
   };
 });
-const _layerOrder = definePlugin((editor) => {
-  const {
-    selection
-  } = editor;
-  function zOrder2(target, type) {
-    const els = Array.isArray(target) ? target : [target];
-    els.forEach((el) => {
-      const parent = el.getParent();
-      if (!parent)
-        return;
-      let index = el.getIndex();
-      const front = parent.children.length - 1;
-      const back = 0;
-      switch (type) {
-        case "bringForward":
-          index = Math.min(parent.children.length - 1, index + 1);
-          break;
-        case "bringToFront":
-          index = front;
-          break;
-        case "sendBackward":
-          index = Math.max(back, index - 1);
-          break;
-        case "sendToBack":
-          index = back;
-          break;
-      }
-      parent.moveChild(el, index);
-    });
-  }
-  function bringToFront(target = selection.value) {
-    target && zOrder2(target, "bringToFront");
-  }
-  function bringForward(target = selection.value[0]) {
-    target && zOrder2(target, "bringForward");
-  }
-  function sendBackward(target = selection.value[0]) {
-    target && zOrder2(target, "sendBackward");
-  }
-  function sendToBack(target = selection.value) {
-    target && zOrder2(target, "sendToBack");
-  }
-  return {
-    name: "mce:layerOrder",
-    commands: [
-      { command: "bringToFront", handle: bringToFront },
-      { command: "bringForward", handle: bringForward },
-      { command: "sendBackward", handle: sendBackward },
-      { command: "sendToBack", handle: sendToBack }
-    ],
-    hotkeys: [
-      { command: "bringToFront", key: "]" },
-      { command: "bringForward", key: "CmdOrCtrl+]" },
-      { command: "sendBackward", key: "CmdOrCtrl+[" },
-      { command: "sendToBack", key: "[" }
-    ]
-  };
-});
-const _layerPosition = definePlugin((editor) => {
-  const {
-    isElement,
-    rootAabb,
-    elementSelection,
-    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;
-        }
-      }
-    });
-  }
-  return {
-    name: "mce:layerPosition",
-    commands: [
-      { command: "align", handle: align },
-      { command: "alignLeft", handle: () => align("left") },
-      { command: "alignHorizontalCenter", handle: () => align("horizontal-center") },
-      { command: "alignRight", handle: () => align("right") },
-      { command: "alignTop", handle: () => align("top") },
-      { command: "alignVerticalCenter", handle: () => align("vertical-center") },
-      { command: "alignBottom", handle: () => align("bottom") }
-    ],
-    hotkeys: [
-      { command: "alignLeft", key: "Alt+a" },
-      { command: "alignHorizontalCenter", key: "Alt+h" },
-      { command: "alignRight", key: "Alt+d" },
-      { command: "alignTop", key: "Alt+w" },
-      { command: "alignVerticalCenter", key: "Alt+v" },
-      { command: "alignBottom", key: "Alt+s" }
-    ]
-  };
-});
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "Btn",
   props: {
@@ -6827,6 +6802,7 @@ const _menu = definePlugin((editor, options) => {
     children: [
       { key: "selectAll" },
       { key: "deselectAll", disabled: !hasSelected.value },
+      { key: "selectChildren", disabled: !hasSelected.value },
       { key: "selectParent", disabled: !hasSelected.value },
       { key: "selectPreviousSibling", disabled: !hasSelected.value },
       { key: "selectNextSibling", disabled: !hasSelected.value }
@@ -11983,7 +11959,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       t,
       exec
     } = useEditor();
-    const isActive = computed(() => !viewportAabb.value.overlap(selectionAabb.value));
+    const isActive = computed(() => {
+      return selectionAabb.value.width && selectionAabb.value.height && !viewportAabb.value.overlap(selectionAabb.value);
+    });
     return (_ctx, _cache) => {
       return isActive.value ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -12001,7 +11979,7 @@ const _selection = definePlugin((editor) => {
     isElement,
     selection,
     root,
-    scrollTo,
+    zoomTo,
     findSibling
   } = editor;
   function selectAll() {
@@ -12010,6 +11988,12 @@ const _selection = definePlugin((editor) => {
   function deselectAll() {
     selection.value = [];
   }
+  function selectChildren() {
+    const children = selection.value[0]?.children;
+    if (children?.length) {
+      selection.value = [...children];
+    }
+  }
   function selectParent() {
     const parent = selection.value[0]?.parent;
     if (isElement(parent)) {
@@ -12020,8 +12004,9 @@ const _selection = definePlugin((editor) => {
     const value = findSibling(type);
     if (value) {
       selection.value = [value];
-      scrollTo("selection", {
-        intoView: true
+      zoomTo("selection", {
+        intoView: true,
+        behavior: "smooth"
       });
     }
   }
@@ -12030,6 +12015,7 @@ const _selection = definePlugin((editor) => {
     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") }
@@ -12037,7 +12023,8 @@ const _selection = definePlugin((editor) => {
     hotkeys: [
       { command: "selectAll", key: "CmdOrCtrl+a" },
       { command: "deselectAll", key: "Shift+CmdOrCtrl+a" },
-      { command: "selectParent", key: "Alt+\\" },
+      { command: "selectChildren", key: "Enter" },
+      { command: "selectParent", key: "\\" },
       { command: "selectPreviousSibling", key: "Shift+Tab" },
       { command: "selectNextSibling", key: "Tab" }
     ],
@@ -13709,7 +13696,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-79192677"]]);
+const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-a1f0e31b"]]);
 const _statusbar = definePlugin((editor) => {
   const {
     registerConfig
@@ -14318,6 +14305,32 @@ const _toolbelt = definePlugin((editor) => {
     ]
   };
 });
+const _transform = definePlugin((editor) => {
+  const {
+    elementSelection
+  } = editor;
+  function flipHorizontal() {
+    elementSelection.value.forEach((el) => {
+      el.style.scaleX = -el.style.scaleX;
+    });
+  }
+  function flipVertical() {
+    elementSelection.value.forEach((el) => {
+      el.style.scaleY = -el.style.scaleY;
+    });
+  }
+  return {
+    name: "mce:transform",
+    commands: [
+      { command: "flipHorizontal", handle: flipHorizontal },
+      { command: "flipVertical", handle: flipVertical }
+    ],
+    hotkeys: [
+      { command: "flipHorizontal", key: "Shift+h" },
+      { command: "flipVertical", key: "Shift+v" }
+    ]
+  };
+});
 const _ui = definePlugin((editor) => {
   const {
     selectionAabbInDrawboard,
@@ -14472,13 +14485,13 @@ const _zoom = definePlugin((editor) => {
   };
 });
 const plugins = [
+  _arrange,
   _cancel,
-  _clipboard,
   _copyAs,
   _delete,
   _drawingTool,
+  _edit,
   _enter,
-  _flip,
   _frame,
   _gif,
   _group,
@@ -14488,8 +14501,6 @@ const plugins = [
   _image,
   _import,
   _json,
-  _layerOrder,
-  _layerPosition,
   _layers,
   _lock,
   _madeWith,
@@ -14512,6 +14523,7 @@ const plugins = [
   _text,
   _timeline,
   _toolbelt,
+  _transform,
   _ui,
   _url,
   _view,
@@ -15576,7 +15588,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         };
       });
     });
-    const _transform = computed(() => {
+    const _transform2 = computed(() => {
       const zoom = camera.value.zoom;
       const { left, top, width, height, rotationDegrees } = selectionObbInDrawboard.value;
       return {
@@ -15618,11 +15630,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       return currentPos;
     }
     const transform = computed({
-      get: () => _transform.value,
+      get: () => _transform2.value,
       set: (val) => {
         const handle = transformable.value?.activeHandle ?? "move";
         const zoom = camera.value.zoom;
-        const oldTransform = _transform.value;
+        const oldTransform = _transform2.value;
         const transform2 = {
           left: val.left / zoom.x,
           top: val.top / zoom.y,

package/dist/locale/en.d.ts

@@ -57,6 +57,7 @@ declare const _default: {
     delete: string;
     selectAll: string;
     deselectAll: string;
+    selectChildren: string;
     selectParent: string;
     selectPreviousSibling: string;
     selectNextSibling: string;

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

@@ -58,6 +58,7 @@ declare const _default: {
     delete: string;
     selectAll: string;
     deselectAll: string;
+    selectChildren: string;
     selectParent: string;
     selectPreviousSibling: string;
     selectNextSibling: string;

package/dist/plugins/{layerPosition.d.ts → arrange.d.ts}

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

package/dist/plugins/selection.d.ts

@@ -3,6 +3,7 @@ declare global {
         interface Hotkeys {
             selectAll: [event: KeyboardEvent];
             deselectAll: [event: KeyboardEvent];
+            selectChildren: [event: KeyboardEvent];
             selectParent: [event: KeyboardEvent];
             selectPreviousSibling: [event: KeyboardEvent];
             selectNextSibling: [event: KeyboardEvent];
@@ -10,6 +11,7 @@ declare global {
         interface Commands {
             selectAll: () => void;
             deselectAll: () => void;
+            selectChildren: () => void;
             selectParent: () => void;
             selectPreviousSibling: () => void;
             selectNextSibling: () => void;

package/dist/typed-plugins.d.ts

@@ -26,13 +26,13 @@ import './mixins/drawingTool'
 import './mixins/scroll'
 import './mixins/snapshot'
 import './mixins/zoom'
+import './plugins/arrange'
 import './plugins/cancel'
-import './plugins/clipboard'
 import './plugins/copyAs'
 import './plugins/delete'
 import './plugins/drawingTool'
+import './plugins/edit'
 import './plugins/enter'
-import './plugins/flip'
 import './plugins/frame'
 import './plugins/gif'
 import './plugins/group'
@@ -42,8 +42,6 @@ import './plugins/html'
 import './plugins/image'
 import './plugins/import'
 import './plugins/json'
-import './plugins/layerOrder'
-import './plugins/layerPosition'
 import './plugins/layers'
 import './plugins/lock'
 import './plugins/madeWith'
@@ -66,6 +64,7 @@ import './plugins/statusbar'
 import './plugins/text'
 import './plugins/timeline'
 import './plugins/toolbelt'
+import './plugins/transform'
 import './plugins/ui'
 import './plugins/url'
 import './plugins/view'

package/package.json

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

package/dist/plugins/layerOrder.d.ts

@@ -1,19 +0,0 @@
-import type { Node } from 'modern-canvas';
-declare global {
-    namespace Mce {
-        interface Hotkeys {
-            bringToFront: [event: KeyboardEvent];
-            bringForward: [event: KeyboardEvent];
-            sendBackward: [event: KeyboardEvent];
-            sendToBack: [event: KeyboardEvent];
-        }
-        interface Commands {
-            bringToFront: (target?: Node | Node[]) => void;
-            bringForward: (target?: Node) => void;
-            sendBackward: (target?: Node) => void;
-            sendToBack: (target?: Node | Node[]) => void;
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;