mce 0.15.20 → 0.15.22

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, vShow, vModelText, 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";
@@ -113,7 +113,6 @@ const _0_config_base = defineMixin((editor, options) => {
     config
   } = editor;
   registerConfig("theme", "system");
-  registerConfig("viewMode", "edgeless");
   registerConfig("watermark", void 0);
   registerConfig("msaa", false);
   registerConfig("checkerboard", false);
@@ -942,7 +941,7 @@ const _0_context = defineMixin((editor) => {
   function isFrame(value) {
     return isElement(value) && value.meta.inEditorIs === "Frame";
   }
-  function isTopLevelFrame(value) {
+  function isTopFrame(value) {
     return isFrame(value) && Boolean(value.parent?.equal(root.value));
   }
   function isVisible(node) {
@@ -986,7 +985,7 @@ const _0_context = defineMixin((editor) => {
     isRoot,
     isElement,
     isFrame,
-    isTopLevelFrame,
+    isTopFrame,
     isVisible,
     setVisible,
     isLock,
@@ -1122,9 +1121,10 @@ const en = {
   "delete": "Delete",
   "selectAll": "Select all",
   "deselectAll": "Deselect all",
+  "selectChildren": "Select children",
   "selectParent": "Select parent",
-  "previousSelection": "Previous selection",
-  "nextSelection": "Next selection",
+  "selectPreviousSibling": "Select previous sibling",
+  "selectNextSibling": "Select next sibling",
   "view": "View",
   "view:checkerboard": "Checkerboard",
   "view:pixelGrid": "Pixel grid",
@@ -1148,6 +1148,8 @@ const en = {
   "zoomTo100": "Zoom to 100%",
   "zoomToFit": "Zoom to fit",
   "zoomToSelection": "Zoom to selection",
+  "zoomToNextFrame": "Zoom to next frame",
+  "zoomToPreviousFrame": "Zoom to previous frame",
   "object": "Object",
   "groupSelection": "Group Selection",
   "frameSelection": "Frame selection",
@@ -1231,9 +1233,10 @@ const zhHans = {
   "delete": "删除",
   "selectAll": "选择全部",
   "deselectAll": "反选全部",
+  "selectChildren": "选择子元素",
   "selectParent": "选择父元素",
-  "previousSelection": "选择前一个",
-  "nextSelection": "选择后一个",
+  "selectPreviousSibling": "选择前一个",
+  "selectNextSibling": "选择后一个",
   "view": "视图",
   "view:checkerboard": "棋盘",
   "view:pixelGrid": "像素网格",
@@ -1257,6 +1260,8 @@ const zhHans = {
   "zoomTo100": "缩放到100%",
   "zoomToFit": "缩放到合适",
   "zoomToSelection": "缩放到选区",
+  "zoomToNextFrame": "缩放到下个画板",
+  "zoomToPreviousFrame": "缩放到上个画板",
   "object": "对象",
   "groupSelection": "组合选区",
   "frameSelection": "组合选区为画板",
@@ -1317,39 +1322,20 @@ const _0_locale = defineMixin((editor, options) => {
 const _1_frame = defineMixin((editor) => {
   const {
     root,
-    isFrame
+    isFrame,
+    isTopFrame
   } = editor;
   const frames = computed(() => root.value.children.filter(isFrame) ?? []);
-  const currentFrameIndex = ref(-1);
-  const currentFrame = computed(() => frames.value[currentFrameIndex.value]);
-  const currentFrameAabb = computed(() => {
-    const { left = 0, top = 0, width = 0, height = 0 } = currentFrame.value?.style ?? {};
-    return { left, top, width, height };
-  });
   const frameThumbs = ref([]);
-  function getAncestorFrame(node) {
-    return node?.findAncestor((node2) => isFrame(node2));
+  function getAncestorFrame(node, isTop) {
+    const when = isTop ? isTopFrame : isFrame;
+    return node?.findAncestor((node2) => when(node2));
   }
   Object.assign(editor, {
     frames,
     frameThumbs,
-    currentFrameIndex,
-    currentFrame,
-    currentFrameAabb,
     getAncestorFrame
   });
-  return () => {
-    const {
-      selection
-    } = editor;
-    watch(() => {
-      return selection.value.length === 1 && selection.value[0];
-    }, (node) => {
-      if (node && isFrame(node)) {
-        currentFrameIndex.value = frames.value.findIndex((v) => v.equal(node));
-      }
-    });
-  };
 });
 function boundingBoxToStyle(box) {
   const style = {
@@ -1460,6 +1446,8 @@ async function createImageElement(image) {
     }
   };
 }
+function noop(..._args) {
+}
 function isClickInsideElement(event, targetDiv) {
   const mouseX = event.clientX;
   const mouseY = event.clientY;
@@ -1832,15 +1820,14 @@ const _1_upload = defineMixin((editor, options) => {
     upload
   });
 });
-function noop(..._args) {
-}
 const _2_box = defineMixin((editor) => {
   const {
     isElement,
     camera,
     root,
     selection,
-    getAncestorFrame
+    getAncestorFrame,
+    drawboardAabb
   } = editor;
   function obbToFit(element) {
     const min = {
@@ -1913,7 +1900,7 @@ const _2_box = defineMixin((editor) => {
       }
     } else if (isElement(node)) {
       const style = node.style;
-      noop([style.left, style.top, style.width, style.height, style.rotate]);
+      noop(style.left, style.top, style.width, style.height, style.rotate);
       obb = node.getGlobalObb();
     } else {
       obb = new Obb2D();
@@ -2022,6 +2009,23 @@ const _2_box = defineMixin((editor) => {
     _aabb.top -= position.y;
     return _aabb;
   }
+  const viewportAabb = computed(() => {
+    noop(
+      camera.value.position.x,
+      camera.value.position.y,
+      camera.value.zoom.x,
+      camera.value.zoom.y
+    );
+    const { width, height } = drawboardAabb.value;
+    const p1 = camera.value.toGlobal({ x: 0, y: 0 });
+    const p2 = camera.value.toGlobal({ x: width, y: height });
+    return new Aabb2D({
+      x: p1.x,
+      y: p1.y,
+      width: p2.x - p1.x,
+      height: p2.y - p1.y
+    });
+  });
   const rootAabb = computed(() => getAabb(root.value.children));
   const selectionAabb = computed(() => getAabb(selection.value));
   const selectionAabbInDrawboard = computed(() => getAabb(selection.value, "drawboard"));
@@ -2032,6 +2036,7 @@ const _2_box = defineMixin((editor) => {
     getObb,
     getAabb,
     aabbToDrawboardAabb,
+    viewportAabb,
     rootAabb,
     selectionAabb,
     selectionAabbInDrawboard,
@@ -2161,14 +2166,8 @@ const _2_load = defineMixin((editor) => {
 });
 const _3_view = defineMixin((editor) => {
   const {
-    renderEngine,
-    rootAabb,
-    currentFrameAabb,
-    config
+    renderEngine
   } = editor;
-  const viewAabb = computed(() => {
-    return config.value.viewMode === "frame" ? currentFrameAabb.value : rootAabb.value;
-  });
   function bindRenderCanvas(canvas, eventTarget) {
     function onRendered() {
       const target = renderEngine.value.view;
@@ -2198,46 +2197,46 @@ const _3_view = defineMixin((editor) => {
     return unbind;
   }
   Object.assign(editor, {
-    viewAabb,
     bindRenderCanvas
   });
-  return () => {
-    const {
-      isElement,
-      root,
-      currentFrame,
-      on,
-      exec
-    } = editor;
-    function onViewMode() {
-      switch (config.value.viewMode) {
-        case "frame":
-          root.value.children.forEach((child) => {
-            if (isElement(child)) {
-              child.visible = child.equal(currentFrame.value);
-            }
-          });
-          break;
-        case "edgeless":
-          root.value.children.forEach((child) => {
-            if (isElement(child)) {
-              child.visible = true;
-            }
-          });
-          break;
-      }
-      exec("zoomToFit");
-    }
-    watch(() => config.value.viewMode, onViewMode);
-    on("setCurrentFrame", onViewMode);
-    on("setDoc", onViewMode);
-  };
 });
 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) {
+      parent = node.parent;
+    } else {
+      parent = root.value;
+    }
+    switch (target) {
+      case "previous":
+        if (node) {
+          value = node.nextSibling;
+        }
+        if (!value && parent) {
+          value = parent.children[0];
+        }
+        break;
+      case "next":
+        if (node) {
+          value = node.previousSibling;
+        }
+        if (!value && parent) {
+          value = parent.children[parent.children.length - 1];
+        }
+        break;
+    }
+    if (value && (!node || !node.equal(value))) {
+      return value;
+    }
+    return void 0;
+  }
   function addNode(value, options = {}) {
     const {
       parent,
@@ -2256,6 +2255,7 @@ const _4_0_node = defineMixin((editor) => {
     return node;
   }
   Object.assign(editor, {
+    findSibling,
     addNode
   });
 });
@@ -2402,7 +2402,7 @@ class TextEditor extends HTMLElement {
   </style>
 
   <div class="container">
-    <textarea></textarea>
+    <textarea name="text-content"></textarea>
     <div class="selection"></div>
     <div class="cursor blink"></div>
   </div>
@@ -2723,18 +2723,18 @@ class TextEditor extends HTMLElement {
     } else {
       const { selectionStart, selectionEnd } = this._textarea;
       let count2 = 0;
-      const _selection = [-1, -1];
+      const _selection2 = [-1, -1];
       this._chars.forEach((char, index) => {
         if (count2 <= selectionStart) {
-          _selection[0] = index;
+          _selection2[0] = index;
         }
         if (count2 <= selectionEnd) {
-          _selection[1] = index;
+          _selection2[1] = index;
         }
         count2 += char.content.length;
       });
       const oldSelection = this.selection;
-      this.selection = _selection;
+      this.selection = _selection2;
       this._prevSelection = oldSelection;
     }
   }
@@ -3315,27 +3315,39 @@ const _4_1_text = defineMixin((editor) => {
 const _4_2_frame = defineMixin((editor) => {
   const {
     root,
-    currentFrameIndex,
-    emit,
-    selection,
     frames,
-    config,
-    isTopLevelFrame
+    isTopFrame,
+    exec,
+    selection,
+    getAncestorFrame
   } = editor;
-  function setCurrentFrame(index = currentFrameIndex.value) {
-    index = Math.max(0, Math.min(frames.value.length - 1, index));
-    const oldIndex = currentFrameIndex.value;
-    currentFrameIndex.value = index;
-    if (config.value.viewMode === "edgeless") {
-      selection.value = [frames.value[index]];
-    } else {
-      selection.value = [];
+  function findFrame(target) {
+    let current;
+    const node = selection.value[0];
+    if (node) {
+      current = isTopFrame(node) ? node : getAncestorFrame(node, true);
+    }
+    const last = frames.value.length - 1;
+    let index = frames.value.findIndex((node2) => node2.equal(current));
+    switch (target) {
+      case "next":
+        index--;
+        if (index < 0) {
+          index = last;
+        }
+        break;
+      case "previous":
+        index++;
+        if (index > last) {
+          index = 0;
+        }
+        break;
     }
-    emit("setCurrentFrame", index, oldIndex);
+    return frames.value[index];
   }
-  function handleElementInsideFrame(element, context) {
-    const pointer = context?.pointer;
-    const frame1 = element.findAncestor((node) => isTopLevelFrame(node));
+  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;
@@ -3346,15 +3358,17 @@ const _4_2_frame = defineMixin((editor) => {
       }
       const aabb2 = frame2.getGlobalAabb();
       if (aabb2) {
-        if (pointer && aabb2.containsPoint(pointer) || aabb1 && aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
+        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(context?.parent)) {
-              index = context.index;
+            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;
@@ -3362,14 +3376,20 @@ const _4_2_frame = defineMixin((editor) => {
       }
     }
     if (flag && frame1) {
-      root.value.moveChild(element, root.value.children.length);
+      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, {
-    setCurrentFrame,
-    handleElementInsideFrame
+    findFrame,
+    handleDragOutReparent
   });
 });
 const _4_3_element = defineMixin((editor) => {
@@ -3391,7 +3411,7 @@ const _4_3_element = defineMixin((editor) => {
     selection,
     camera,
     parseAnchor,
-    handleElementInsideFrame
+    handleDragOutReparent
   } = editor;
   function addElement(value, options = {}) {
     log("addElement", value, options);
@@ -3534,13 +3554,12 @@ const _4_3_element = defineMixin((editor) => {
         });
       } else if (globalPosition) {
         elements2.forEach((el) => {
-          el.style.left = Math.round(
+          el.style.left += Math.round(
             parentAabb ? parentAabb.left - globalPosition.x : globalPosition.x
           );
-          el.style.top = Math.round(
+          el.style.top += Math.round(
             parentAabb ? parentAabb.top - globalPosition.y : globalPosition.y
           );
-          globalPosition.x += el.style.width + frameGap;
         });
       }
       return elements2;
@@ -3550,7 +3569,7 @@ const _4_3_element = defineMixin((editor) => {
       selection.value = elements;
     }
     if (!isArray && !parent) {
-      handleElementInsideFrame(elements[0]);
+      handleDragOutReparent(elements[0]);
     }
     return isArray ? elements : elements[0];
   }
@@ -3585,7 +3604,7 @@ const _4_3_element = defineMixin((editor) => {
       }
       return [node];
     }).filter((node) => {
-      return "isVisibleInTree" in node && node.isVisibleInTree() && getObb(node, "drawboard").overlapsOnAxis(area2) && !isLock(node) && !node.findAncestor((ancestor) => isLock(ancestor));
+      return "isVisibleInTree" in node && node.isVisibleInTree() && getObb(node, "drawboard").overlap(area2) && !isLock(node) && !node.findAncestor((ancestor) => isLock(ancestor));
     }) ?? [];
     selection.value = selected;
     return selected;
@@ -3750,11 +3769,13 @@ const _scroll$1 = defineMixin((editor) => {
     camera,
     getAabb,
     selectionAabb,
-    viewAabb,
+    rootAabb,
+    viewportAabb,
     screenCenter
   } = editor;
   const scrollTo = async (target, options = {}) => {
     const {
+      intoView,
       behavior,
       duration = 500
     } = options;
@@ -3776,10 +3797,13 @@ const _scroll$1 = defineMixin((editor) => {
             break;
           case "root":
           default:
-            aabb = viewAabb.value;
+            aabb = rootAabb.value;
             break;
         }
       }
+      if (intoView && viewportAabb.value.contains(aabb)) {
+        return;
+      }
       position = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
       offset2.x += -_screenCenter.x;
       offset2.y = -_screenCenter.y;
@@ -3827,10 +3851,7 @@ const _scroll$1 = defineMixin((editor) => {
 const _snapshot = defineMixin((editor) => {
   const {
     isElement,
-    renderEngine,
     frames,
-    currentFrameAabb,
-    camera,
     frameThumbs,
     log,
     fonts,
@@ -3879,39 +3900,10 @@ const _snapshot = defineMixin((editor) => {
       log("captureFrameScreenshot", index);
     }
   }
-  function renderFrameThumb(target) {
-    const view = renderEngine.value.view;
-    const aabb = currentFrameAabb.value;
-    const pixelRatio = renderEngine.value.pixelRatio ?? 1;
-    if (!view)
-      return;
-    const ctx = target.getContext("2d");
-    if (!ctx)
-      return;
-    ctx.fillStyle = "rgba(0, 0, 0, 0)";
-    ctx.clearRect(0, 0, target.width, target.height);
-    const { zoom, position } = camera.value;
-    target.width = aabb.width;
-    target.height = aabb.height;
-    const sw = aabb.width * zoom.x;
-    const sh = aabb.height * zoom.y;
-    ctx.drawImage(
-      view,
-      (aabb.left * zoom.x - position.x) * pixelRatio,
-      (aabb.top * zoom.x - position.y) * pixelRatio,
-      sw * pixelRatio,
-      sh * pixelRatio,
-      0,
-      0,
-      target.width,
-      target.height
-    );
-  }
   Object.assign(editor, {
     snapshot,
     captureElementScreenshot,
-    captureFrameScreenshot,
-    renderFrameThumb
+    captureFrameScreenshot
   });
   return () => {
     const {
@@ -3946,11 +3938,6 @@ const _snapshot = defineMixin((editor) => {
       doc.root.on("addChild", onAddChild);
       doc.root.on("removeChild", onRemoveChild);
     });
-    on("setCurrentFrame", (_index, oldIndex) => {
-      if (config.value.frameScreenshot) {
-        captureFrameScreenshot(oldIndex);
-      }
-    });
   };
 });
 const _zoom$1 = defineMixin((editor) => {
@@ -3958,18 +3945,20 @@ const _zoom$1 = defineMixin((editor) => {
     camera,
     drawboardAabb,
     selectionAabb,
-    viewAabb,
+    rootAabb,
     getAabb,
-    screenCenterOffset
+    screenCenterOffset,
+    viewportAabb
   } = editor;
   const zoomTo = async (target, options = {}) => {
     const {
+      intoView,
       mode = "contain",
       duration = 500,
       behavior
     } = options;
     let aabb;
-    if (Array.isArray(target)) {
+    if (Array.isArray(target) || typeof target === "object") {
       aabb = getAabb(target);
     } else {
       switch (target) {
@@ -3978,10 +3967,13 @@ const _zoom$1 = defineMixin((editor) => {
           break;
         case "root":
         default:
-          aabb = viewAabb.value;
+          aabb = rootAabb.value;
           break;
       }
     }
+    if (intoView && viewportAabb.value.contains(aabb)) {
+      return;
+    }
     const offset2 = screenCenterOffset.value;
     const { width, height } = drawboardAabb.value;
     const tw = width - (offset2.left + offset2.right);
@@ -4090,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
@@ -4107,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,
@@ -4322,127 +4527,37 @@ const _clipboard = definePlugin((editor, options) => {
       }
     );
   }
-  Object.assign(editor, {
-    copiedData
-  });
-  return {
-    name: "mce:clipboard",
-    commands: [
-      { command: "copy", handle: copy },
-      { command: "cut", handle: cut },
-      { command: "paste", handle: paste },
-      { command: "duplicate", handle: duplicate }
-    ],
-    hotkeys: [
-      { command: "copy", key: "CmdOrCtrl+c", editable: false },
-      { command: "cut", key: "CmdOrCtrl+x", editable: false },
-      { command: "paste", key: "CmdOrCtrl+v", editable: false, preventDefault: false },
-      { command: "duplicate", key: "CmdOrCtrl+d", editable: false }
-    ],
-    setup: () => {
-      if (useClipboard) {
-        async function onPaste(e) {
-          if (isInputEvent(e)) {
-            return;
-          }
-          if (e.clipboardData) {
-            await paste(e.clipboardData);
-          }
-        }
-        window.addEventListener("paste", onPaste);
-        onBeforeUnmount(() => window.removeEventListener("paste", onPaste));
-      }
-    }
-  };
-});
-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;
+  Object.assign(editor, {
+    copiedData
+  });
   return {
-    name: "mce:drawingTool",
-    components: [
-      { name: "drawing", type: "overlay", component: _sfc_main$D }
-    ],
+    name: "mce:edit",
     commands: [
-      { command: "setActiveDrawingTool", handle: (val) => setActiveDrawingTool(val) }
-    ]
+      { command: "copy", handle: copy },
+      { command: "cut", handle: cut },
+      { command: "paste", handle: paste },
+      { command: "duplicate", handle: duplicate }
+    ],
+    hotkeys: [
+      { command: "copy", key: "CmdOrCtrl+c", editable: false },
+      { command: "cut", key: "CmdOrCtrl+x", editable: false },
+      { command: "paste", key: "CmdOrCtrl+v", editable: false, preventDefault: false },
+      { command: "duplicate", key: "CmdOrCtrl+d", editable: false }
+    ],
+    setup: () => {
+      if (useClipboard) {
+        async function onPaste(e) {
+          if (isInputEvent(e)) {
+            return;
+          }
+          if (e.clipboardData) {
+            await paste(e.clipboardData);
+          }
+        }
+        window.addEventListener("paste", onPaste);
+        onBeforeUnmount(() => window.removeEventListener("paste", onPaste));
+      }
+    }
   };
 });
 const _enter = definePlugin((editor) => {
@@ -4472,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: {
@@ -5187,8 +5276,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const editing = ref(false);
     async function onDblclick() {
       editing.value = true;
+      await nextTick();
       if (input.value) {
-        await nextTick();
         input.value.focus();
         input.value.select();
       }
@@ -5221,14 +5310,15 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           onPointerleave: _cache[3] || (_cache[3] = ($event) => !unref(state) && !unref(isLock)(frame.value) && (hoverElement.value = void 0))
         }, [
           createElementVNode("div", null, toDisplayString(frame.value.name), 1),
-          withDirectives(createElementVNode("input", {
+          editing.value ? withDirectives((openBlock(), createElementBlock("input", {
+            key: 0,
             ref: "inputTpl",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => frame.value.name = $event),
+            name: "frame-name",
             onBlur: _cache[1] || (_cache[1] = ($event) => editing.value = false)
-          }, null, 544), [
-            [vShow, editing.value],
+          }, null, 544)), [
             [vModelText, frame.value.name]
-          ])
+          ]) : createCommentVNode("", true)
         ], 32)
       ], 6)), [
         [vShow, frame.value.visible]
@@ -5625,8 +5715,16 @@ const _import = definePlugin((editor) => {
   } = editor;
   const _import2 = async (options = {}) => {
     const files = await openFileDialog({ multiple: true });
-    return addElements((await Promise.all(files.map((file) => load(file)))).flat(), {
-      sizeToFit: true,
+    return addElements((await Promise.all(files.map(async (file) => {
+      const items = await load(file);
+      return items.flatMap((item) => {
+        if (item.meta?.inEditorIs === "Doc" && item.children) {
+          return item.children;
+        }
+        return [item];
+      });
+    }))).flat(), {
+      position: "right",
       ...options
     });
   };
@@ -5762,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: {
@@ -6043,20 +6007,20 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           }
         });
         if (min !== void 0 && max !== void 0) {
-          let _selection = nodes.value.slice(min, max + 1);
-          const result = new Set(_selection.map((node) => node.id));
+          let _selection2 = nodes.value.slice(min, max + 1);
+          const result = new Set(_selection2.map((node) => node.id));
           const parents = /* @__PURE__ */ new Set();
-          _selection.forEach((node) => node.parent && parents.add(node.parent));
+          _selection2.forEach((node) => node.parent && parents.add(node.parent));
           parents.forEach((parent) => {
             if (parent.children.every((ch) => result.has(ch.id))) {
               const ids = new Set(parent.children.map((ch) => ch.id));
-              _selection = [
-                ..._selection.filter((v) => !ids.has(v.id)),
+              _selection2 = [
+                ..._selection2.filter((v) => !ids.has(v.id)),
                 parent
               ];
             }
           });
-          selection.value = _selection;
+          selection.value = _selection2;
         }
       } else if (e.ctrlKey || e.metaKey) {
         const filtered = selection.value.filter((v) => !v.equal(props.node));
@@ -6159,10 +6123,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               class: "mce-layer__name",
               onDblclick: onDblclickName
             }, [
-              withDirectives(createElementVNode("input", {
+              editing.value ? withDirectives((openBlock(), createElementBlock("input", {
+                key: 0,
                 ref_key: "inputDom",
                 ref: inputDom,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => editValue.value = $event),
+                name: "layer-name",
                 type: "text",
                 class: "mce-layer__input",
                 spellcheck: "false",
@@ -6170,10 +6136,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 autocorrect: "off",
                 autofocus: "",
                 onBlur: onInputBlur
-              }, null, 544), [
-                [vShow, editing.value],
+              }, null, 544)), [
                 [vModelText, editValue.value]
-              ]),
+              ]) : createCommentVNode("", true),
               createElementVNode("div", {
                 style: normalizeStyle$1({ visibility: editing.value ? "hidden" : void 0 })
               }, toDisplayString(editValue.value || thumbnailName.value), 5)
@@ -6237,7 +6202,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const {
       root,
       selection,
-      state
+      state,
+      registerCommand
     } = useEditor();
     const {
       selecting,
@@ -6245,12 +6211,10 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       domItems,
       getIdByNode
     } = createLayer();
-    watch(selection, (selection2) => {
-      if (state.value === "selecting" || selecting.value) {
-        return;
-      }
+    registerCommand({ command: "layerScrollIntoView", handle: layerScrollIntoView });
+    function layerScrollIntoView() {
       let last;
-      selection2.forEach((node) => {
+      selection.value.forEach((node) => {
         node.findAncestor((ancestor) => {
           const opened = openedItems.get(getIdByNode(ancestor) ?? "");
           if (opened) {
@@ -6268,6 +6232,12 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           });
         });
       }
+    }
+    watch(selection, () => {
+      if (state.value === "selecting" || selecting.value) {
+        return;
+      }
+      layerScrollIntoView();
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$k, [
@@ -6832,9 +6802,10 @@ const _menu = definePlugin((editor, options) => {
     children: [
       { key: "selectAll" },
       { key: "deselectAll", disabled: !hasSelected.value },
+      { key: "selectChildren", disabled: !hasSelected.value },
       { key: "selectParent", disabled: !hasSelected.value },
-      { key: "previousSelection", disabled: !hasSelected.value },
-      { key: "nextSelection", disabled: !hasSelected.value }
+      { key: "selectPreviousSibling", disabled: !hasSelected.value },
+      { key: "selectNextSibling", disabled: !hasSelected.value }
     ]
   }));
   const editMenu = computed(() => ({
@@ -6854,7 +6825,9 @@ const _menu = definePlugin((editor, options) => {
       { key: "zoomOut" },
       { key: "zoomTo100" },
       { key: "zoomToFit" },
-      { key: "zoomToSelection", disabled: !hasSelected.value }
+      { key: "zoomToSelection", disabled: !hasSelected.value },
+      { key: "zoomToNextFrame", disabled: !hasSelected.value },
+      { key: "zoomToPreviousFrame", disabled: !hasSelected.value }
     ]
   }));
   const panelsMenu = computed(() => ({
@@ -11937,7 +11910,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     const props = __props;
     const {
       camera,
-      viewAabb
+      rootAabb
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
@@ -11945,12 +11918,12 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           modelValue: unref(camera).position.y,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(camera).position.y = $event),
           vertical: "",
-          length: unref(viewAabb).height * unref(camera).zoom.y
+          length: unref(rootAabb).height * unref(camera).zoom.y
         }), null, 16, ["modelValue", "length"]),
         createVNode(_sfc_main$n, mergeProps(props, {
           modelValue: unref(camera).position.x,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(camera).position.x = $event),
-          length: unref(viewAabb).width * unref(camera).zoom.x
+          length: unref(rootAabb).width * unref(camera).zoom.x
         }), null, 16, ["modelValue", "length"])
       ], 64);
     };
@@ -11982,16 +11955,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const {
       selectionAabb,
-      drawboardAabb,
-      aabbToDrawboardAabb,
+      viewportAabb,
       t,
       exec
     } = useEditor();
-    const isActive = computed(() => {
-      return selectionAabb.value.width && selectionAabb.value.height && !drawboardAabb.value.overlapsOnAxis(
-        aabbToDrawboardAabb(selectionAabb.value)
-      );
-    });
+    const isActive = computed(() => !viewportAabb.value.overlap(selectionAabb.value));
     return (_ctx, _cache) => {
       return isActive.value ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -12004,11 +11972,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _select = definePlugin((editor) => {
+const _selection = definePlugin((editor) => {
   const {
     isElement,
     selection,
-    root
+    root,
+    zoomTo,
+    findSibling
   } = editor;
   function selectAll() {
     selection.value = [...root.value.children];
@@ -12016,45 +11986,45 @@ const _select = 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)) {
       selection.value = [parent];
     }
   }
-  function previousSelection() {
-    const node = selection.value[0];
-    if (node) {
-      const previousSibling = node.previousSibling;
-      if (previousSibling && !node.equal(previousSibling)) {
-        selection.value = [previousSibling];
-      }
-    }
-  }
-  function nextSelection() {
-    const node = selection.value[0];
-    if (node) {
-      const nextSibling = node.nextSibling;
-      if (nextSibling && node.equal(nextSibling)) {
-        selection.value = [nextSibling];
-      }
+  function selectSibling(type) {
+    const value = findSibling(type);
+    if (value) {
+      selection.value = [value];
+      zoomTo("selection", {
+        intoView: true,
+        behavior: "smooth"
+      });
     }
   }
   return {
-    name: "mce:select",
+    name: "mce:selection",
     commands: [
       { command: "selectAll", handle: selectAll },
       { command: "deselectAll", handle: deselectAll },
+      { command: "selectChildren", handle: selectChildren },
       { command: "selectParent", handle: selectParent },
-      { command: "previousSelection", handle: previousSelection },
-      { command: "nextSelection", handle: nextSelection }
+      { command: "selectPreviousSibling", handle: () => selectSibling("previous") },
+      { command: "selectNextSibling", handle: () => selectSibling("next") }
     ],
     hotkeys: [
       { command: "selectAll", key: "CmdOrCtrl+a" },
       { command: "deselectAll", key: "Shift+CmdOrCtrl+a" },
-      { command: "selectParent", key: "Alt+\\" },
-      { command: "previousSelection", key: "Alt+[" },
-      { command: "nextSelection", key: "Alt+]" }
+      { command: "selectChildren", key: "Enter" },
+      { command: "selectParent", key: "\\" },
+      { command: "selectPreviousSibling", key: "Shift+Tab" },
+      { command: "selectNextSibling", key: "Tab" }
     ],
     components: [
       { type: "overlay", component: _sfc_main$l }
@@ -13256,8 +13226,8 @@ const _smartGuides = definePlugin((editor) => {
     return line.box?.id === -1;
   }
   function findLines(targets, source) {
-    const axis = ["vt", "vb"].includes(source.type) ? "vertical" : "horizontal";
-    const flippedAxis = axis === "vertical" ? "horizontal" : "vertical";
+    const axis = ["vt", "vb"].includes(source.type) ? "y" : "x";
+    const flippedAxis = axis === "y" ? "x" : "y";
     const isLeftTop = isLeftTopLine(source);
     let type = flipType(source.type);
     if (parentBox.value) {
@@ -13284,9 +13254,9 @@ const _smartGuides = definePlugin((editor) => {
       const isCanvas = isCanvasLine(target);
       if (type !== target.type && !isCanvas)
         return;
-      if (!toBoundingBox(source).overlapsOnAxis(toBoundingBox(target), flippedAxis))
+      if (!toBoundingBox(source).overlap(toBoundingBox(target), flippedAxis))
         return;
-      if (!isCanvas && prev && prev.box.id !== target.box.id && toBoundingBox(prev).overlapsOnAxis(toBoundingBox(target), axis)) {
+      if (!isCanvas && prev && prev.box.id !== target.box.id && toBoundingBox(prev).overlap(toBoundingBox(target), axis)) {
         return;
       }
       prev = target;
@@ -13724,7 +13694,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
@@ -14333,6 +14303,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,
@@ -14430,9 +14426,18 @@ const _zoom = definePlugin((editor) => {
     zoomTo,
     elementSelection,
     exec,
-    config
+    config,
+    findFrame,
+    selection
   } = editor;
   registerConfig("zoomToFit", "contain");
+  function zoomToFrame(type, options) {
+    const value = findFrame(type);
+    if (value) {
+      selection.value = [value];
+      zoomTo(value, options);
+    }
+  }
   return {
     name: "mce:zoom",
     commands: [
@@ -14441,14 +14446,18 @@ const _zoom = definePlugin((editor) => {
       { command: "zoomTo100", handle: () => camera.value.setZoom(1) },
       { command: "zoomToCover", handle: () => zoomTo("root", { mode: "cover" }) },
       { command: "zoomToFit", handle: () => zoomTo("root", { mode: config.value.zoomToFit }) },
-      { command: "zoomToSelection", handle: (options) => zoomTo("selection", options) }
+      { command: "zoomToSelection", handle: (options) => zoomTo("selection", options) },
+      { command: "zoomToNextFrame", handle: (options) => zoomToFrame("next", options) },
+      { command: "zoomToPreviousFrame", handle: (options) => zoomToFrame("previous", options) }
     ],
     hotkeys: [
       { command: "zoomIn", key: "CmdOrCtrl+=" },
       { command: "zoomOut", key: "CmdOrCtrl+-" },
-      { command: "zoomTo100", key: "CmdOrCtrl+º" },
-      { command: "zoomToFit", key: "Shift+¡" },
-      { command: "zoomToSelection", key: "Shift+™" }
+      { command: "zoomTo100", key: "CmdOrCtrl+0" },
+      { command: "zoomToFit", key: "Shift+!" },
+      { command: "zoomToSelection", key: "Shift+@" },
+      { command: "zoomToNextFrame", key: "n" },
+      { command: "zoomToPreviousFrame", key: "Shift+N" }
     ],
     events: {
       setDoc: () => exec("zoomToFit"),
@@ -14462,10 +14471,8 @@ const _zoom = definePlugin((editor) => {
     },
     setup: () => {
       const {
-        drawboardDom,
-        config: config2
+        drawboardDom
       } = editor;
-      watch(() => config2.value.viewMode, () => exec("zoomToFit"));
       useResizeObserver$1(drawboardDom, (entries) => {
         const { left: _left, top: _top, width, height } = entries[0].contentRect;
         const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
@@ -14476,13 +14483,13 @@ const _zoom = definePlugin((editor) => {
   };
 });
 const plugins = [
+  _arrange,
   _cancel,
-  _clipboard,
   _copyAs,
   _delete,
   _drawingTool,
+  _edit,
   _enter,
-  _flip,
   _frame,
   _gif,
   _group,
@@ -14492,8 +14499,6 @@ const plugins = [
   _image,
   _import,
   _json,
-  _layerOrder,
-  _layerPosition,
   _layers,
   _lock,
   _madeWith,
@@ -14508,7 +14513,7 @@ const plugins = [
   _ruler,
   _saveAs,
   _scroll,
-  _select,
+  _selection,
   _shape,
   _smartGuides,
   _state,
@@ -14516,6 +14521,7 @@ const plugins = [
   _text,
   _timeline,
   _toolbelt,
+  _transform,
   _ui,
   _url,
   _view,
@@ -15544,7 +15550,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       config,
       snapThreshold,
       getSnapPoints,
-      handleElementInsideFrame,
+      handleDragOutReparent,
       getGlobalPointer
     } = useEditor();
     const transformable = useTemplateRef("transformableTpl");
@@ -15580,7 +15586,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 {
@@ -15622,11 +15628,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,
@@ -15681,7 +15687,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             }
             return false;
           });
-          handleElementInsideFrame(
+          handleDragOutReparent(
             element,
             {
               ...startContext.value[element.instanceId],
@@ -16114,7 +16120,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const {
       pluginsComponents,
       isElement,
-      isTopLevelFrame,
+      isTopFrame,
       config,
       drawboardDom,
       renderEngine,
@@ -16174,7 +16180,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     function onHover(event) {
       let cursor;
       let hovered;
-      if (elementSelection.value.length > 1 && selectionAabbInDrawboard.value.containsPoint({
+      if (elementSelection.value.length > 1 && selectionAabbInDrawboard.value.contains({
         x: event.clientX,
         y: event.clientY
       })) {
@@ -16193,7 +16199,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           hovered = result;
         }
       }
-      if (!(isElement(hovered) && !isLock(hovered) && !hovered.findAncestor((ancestor) => isLock(ancestor)) && !isTopLevelFrame(hovered))) {
+      if (!(isElement(hovered) && !isLock(hovered) && !hovered.findAncestor((ancestor) => isLock(ancestor)) && !isTopFrame(hovered))) {
         hovered = void 0;
         cursor = void 0;
       }
@@ -16208,7 +16214,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         allowRootFrame = false
       } = options;
       function isIncluded(node) {
-        return isElement(node) && !isLock(node) && (allowRootFrame || !isTopLevelFrame(node)) && !node.findAncestor((ancestor) => isLock(ancestor));
+        return isElement(node) && !isLock(node) && (allowRootFrame || !isTopFrame(node)) && !node.findAncestor((ancestor) => isLock(ancestor));
       }
       const drawing = state.value === "drawing";
       const hand = state.value === "hand";
@@ -16221,7 +16227,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       let isUp = false;
       let selected = [];
       let ctxState;
-      const inSelection = selectionAabbInDrawboard.value.containsPoint({
+      const inSelection = selectionAabbInDrawboard.value.contains({
         x: start.x - drawboardAabb.value.left,
         y: start.y - drawboardAabb.value.top
       });
@@ -16407,8 +16413,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       onHover(event);
     }
-    function onPointerover() {
-      drawboardPointer.value = void 0;
+    function onPointerover(event) {
+      if (event.srcElement !== drawboardDom.value) {
+        return;
+      }
       hoverElement.value = void 0;
     }
     function onScroll() {
@@ -16655,6 +16663,7 @@ export {
   makeMceOverlayProps,
   makeMceStrategyProps,
   mixins,
+  noop,
   plugins,
   propsFactory,
   provideOverlay,