mce 0.15.20 → 0.15.21

package/README.md

@@ -45,7 +45,6 @@ npm i mce
       svg(),
     ],
     theme: 'system',
-    viewMode: 'edgeless',
     watermark: '/example.jpg',
     checkerboard: true,
     checkerboardStyle: 'grid',

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, 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 { 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,
@@ -1123,8 +1122,8 @@ const en = {
   "selectAll": "Select all",
   "deselectAll": "Deselect all",
   "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 +1147,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",
@@ -1232,8 +1233,8 @@ const zhHans = {
   "selectAll": "选择全部",
   "deselectAll": "反选全部",
   "selectParent": "选择父元素",
-  "previousSelection": "选择前一个",
-  "nextSelection": "选择后一个",
+  "selectPreviousSibling": "选择前一个",
+  "selectNextSibling": "选择后一个",
   "view": "视图",
   "view:checkerboard": "棋盘",
   "view:pixelGrid": "像素网格",
@@ -1257,6 +1258,8 @@ const zhHans = {
   "zoomTo100": "缩放到100%",
   "zoomToFit": "缩放到合适",
   "zoomToSelection": "缩放到选区",
+  "zoomToNextFrame": "缩放到下个画板",
+  "zoomToPreviousFrame": "缩放到上个画板",
   "object": "对象",
   "groupSelection": "组合选区",
   "frameSelection": "组合选区为画板",
@@ -1317,39 +1320,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 +1444,8 @@ async function createImageElement(image) {
     }
   };
 }
+function noop(..._args) {
+}
 function isClickInsideElement(event, targetDiv) {
   const mouseX = event.clientX;
   const mouseY = event.clientY;
@@ -1832,15 +1818,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 +1898,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 +2007,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,
+      height: p2.y
+    });
+  });
   const rootAabb = computed(() => getAabb(root.value.children));
   const selectionAabb = computed(() => getAabb(selection.value));
   const selectionAabbInDrawboard = computed(() => getAabb(selection.value, "drawboard"));
@@ -2032,6 +2034,7 @@ const _2_box = defineMixin((editor) => {
     getObb,
     getAabb,
     aabbToDrawboardAabb,
+    viewportAabb,
     rootAabb,
     selectionAabb,
     selectionAabbInDrawboard,
@@ -2161,14 +2164,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 +2195,38 @@ 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
   } = editor;
+  function findSibling(target) {
+    const node = selection.value[0];
+    if (node) {
+      let value;
+      switch (target) {
+        case "previous":
+          value = node.nextSibling;
+          if (!value && node.parent) {
+            value = node.parent.children[0];
+          }
+          break;
+        case "next":
+          value = node.previousSibling;
+          if (!value && node.parent) {
+            value = node.parent.children[node.parent.children.length - 1];
+          }
+          break;
+      }
+      if (value && !node.equal(value)) {
+        return value;
+      }
+    }
+    return void 0;
+  }
   function addNode(value, options = {}) {
     const {
       parent,
@@ -2256,6 +2245,7 @@ const _4_0_node = defineMixin((editor) => {
     return node;
   }
   Object.assign(editor, {
+    findSibling,
     addNode
   });
 });
@@ -2402,7 +2392,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 +2713,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 +3305,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 +3348,16 @@ 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;
+            frame2.moveChild(element, index);
+            exec("layerScrollIntoView");
           }
           flag = false;
           break;
@@ -3362,14 +3365,19 @@ const _4_2_frame = defineMixin((editor) => {
       }
     }
     if (flag && frame1) {
-      root.value.moveChild(element, root.value.children.length);
       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);
+      exec("layerScrollIntoView");
     }
   }
   Object.assign(editor, {
-    setCurrentFrame,
-    handleElementInsideFrame
+    findFrame,
+    handleDragOutReparent
   });
 });
 const _4_3_element = defineMixin((editor) => {
@@ -3391,7 +3399,7 @@ const _4_3_element = defineMixin((editor) => {
     selection,
     camera,
     parseAnchor,
-    handleElementInsideFrame
+    handleDragOutReparent
   } = editor;
   function addElement(value, options = {}) {
     log("addElement", value, options);
@@ -3534,13 +3542,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 +3557,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 +3592,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 +3757,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 +3785,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 +3839,7 @@ const _scroll$1 = defineMixin((editor) => {
 const _snapshot = defineMixin((editor) => {
   const {
     isElement,
-    renderEngine,
     frames,
-    currentFrameAabb,
-    camera,
     frameThumbs,
     log,
     fonts,
@@ -3879,39 +3888,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 +3926,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 +3933,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 +3955,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);
@@ -5187,8 +5167,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 +5201,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 +5606,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
     });
   };
@@ -6043,20 +6032,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 +6148,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 +6161,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 +6227,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const {
       root,
       selection,
-      state
+      state,
+      registerCommand
     } = useEditor();
     const {
       selecting,
@@ -6245,12 +6236,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 +6257,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, [
@@ -6833,8 +6828,8 @@ const _menu = definePlugin((editor, options) => {
       { key: "selectAll" },
       { key: "deselectAll", 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 +6849,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 +11934,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 +11942,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 +11979,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 +11996,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _select = definePlugin((editor) => {
+const _selection = definePlugin((editor) => {
   const {
     isElement,
     selection,
-    root
+    root,
+    scrollTo,
+    findSibling
   } = editor;
   function selectAll() {
     selection.value = [...root.value.children];
@@ -12022,39 +12016,30 @@ const _select = definePlugin((editor) => {
       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];
+      scrollTo("selection", {
+        intoView: true
+      });
     }
   }
   return {
-    name: "mce:select",
+    name: "mce:selection",
     commands: [
       { command: "selectAll", handle: selectAll },
       { command: "deselectAll", handle: deselectAll },
       { 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: "selectPreviousSibling", key: "Shift+Tab" },
+      { command: "selectNextSibling", key: "Tab" }
     ],
     components: [
       { type: "overlay", component: _sfc_main$l }
@@ -13256,8 +13241,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 +13269,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;
@@ -14430,9 +14415,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 +14435,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 +14460,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() ?? {};
@@ -14508,7 +14504,7 @@ const plugins = [
   _ruler,
   _saveAs,
   _scroll,
-  _select,
+  _selection,
   _shape,
   _smartGuides,
   _state,
@@ -15544,7 +15540,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       config,
       snapThreshold,
       getSnapPoints,
-      handleElementInsideFrame,
+      handleDragOutReparent,
       getGlobalPointer
     } = useEditor();
     const transformable = useTemplateRef("transformableTpl");
@@ -15681,7 +15677,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             }
             return false;
           });
-          handleElementInsideFrame(
+          handleDragOutReparent(
             element,
             {
               ...startContext.value[element.instanceId],
@@ -16114,7 +16110,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const {
       pluginsComponents,
       isElement,
-      isTopLevelFrame,
+      isTopFrame,
       config,
       drawboardDom,
       renderEngine,
@@ -16174,7 +16170,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 +16189,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 +16204,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 +16217,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 +16403,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 +16653,7 @@ export {
   makeMceOverlayProps,
   makeMceStrategyProps,
   mixins,
+  noop,
   plugins,
   propsFactory,
   provideOverlay,

package/dist/locale/en.d.ts

@@ -58,8 +58,8 @@ declare const _default: {
     selectAll: string;
     deselectAll: string;
     selectParent: string;
-    previousSelection: string;
-    nextSelection: string;
+    selectPreviousSibling: string;
+    selectNextSibling: string;
     view: string;
     'view:checkerboard': string;
     'view:pixelGrid': string;
@@ -83,6 +83,8 @@ declare const _default: {
     zoomTo100: string;
     zoomToFit: string;
     zoomToSelection: string;
+    zoomToNextFrame: string;
+    zoomToPreviousFrame: string;
     object: string;
     groupSelection: string;
     frameSelection: string;

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

@@ -59,8 +59,8 @@ declare const _default: {
     selectAll: string;
     deselectAll: string;
     selectParent: string;
-    previousSelection: string;
-    nextSelection: string;
+    selectPreviousSibling: string;
+    selectNextSibling: string;
     view: string;
     'view:checkerboard': string;
     'view:pixelGrid': string;
@@ -84,6 +84,8 @@ declare const _default: {
     zoomTo100: string;
     zoomToFit: string;
     zoomToSelection: string;
+    zoomToNextFrame: string;
+    zoomToPreviousFrame: string;
     object: string;
     groupSelection: string;
     frameSelection: string;

package/dist/mixins/0.config/base.d.ts

@@ -4,7 +4,6 @@ declare global {
         interface Options extends Partial<Config> {
         }
         type Theme = 'system' | 'light' | 'dark';
-        type ViewMode = 'frame' | 'edgeless';
         type TypographyStrategy = 'autoHeight' | 'autoWidth' | 'fixedWidthHeight' | 'autoFontSize';
         type HandleShape = 'rect' | 'circle';
         interface ScreenCenterOffset {
@@ -15,7 +14,6 @@ declare global {
         }
         interface Config {
             theme: Theme;
-            viewMode: ViewMode;
             watermark?: string;
             msaa: boolean;
             checkerboard: boolean;

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

@@ -47,7 +47,7 @@ declare global {
             isRoot: (value: any) => value is Node;
             isElement: (value: any) => value is Element2D;
             isFrame: (value: any) => value is Element2D;
-            isTopLevelFrame: (value: any) => value is Element2D;
+            isTopFrame: (value: any) => value is Element2D;
             isVisible: (node: Node) => boolean;
             setVisible: (node: Node, visible: boolean) => void;
             isLock: (node: Node) => boolean;

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

@@ -1,6 +1,5 @@
 import type { Element2D, Node } from 'modern-canvas';
 import type { ComputedRef, Ref } from 'vue';
-import type { AxisAlignedBoundingBox } from '../types';
 declare global {
     namespace Mce {
         interface FrameThumb {
@@ -12,10 +11,7 @@ declare global {
         interface Editor {
             frameThumbs: Ref<FrameThumb[]>;
             frames: ComputedRef<Element2D[]>;
-            currentFrameIndex: Ref<number>;
-            currentFrame: ComputedRef<Element2D | undefined>;
-            currentFrameAabb: ComputedRef<AxisAlignedBoundingBox>;
-            getAncestorFrame: (node?: Node) => Element2D | undefined;
+            getAncestorFrame: (node?: Node, isTop?: boolean) => Element2D | undefined;
         }
     }
 }

package/dist/mixins/2.box.d.ts

@@ -8,6 +8,7 @@ declare global {
             getObb: (node: Node | Node[] | undefined, inTarget?: 'drawboard' | 'frame' | 'parent') => Obb2D;
             getAabb: (node: Node | Node[] | undefined, inTarget?: 'drawboard' | 'frame' | 'parent') => Aabb2D;
             aabbToDrawboardAabb: (aabb: Aabb2D) => Aabb2D;
+            viewportAabb: ComputedRef<Aabb2D>;
             rootAabb: ComputedRef<Aabb2D>;
             selectionAabb: ComputedRef<Aabb2D>;
             selectionAabbInDrawboard: ComputedRef<Aabb2D>;

package/dist/mixins/3.view.d.ts

@@ -1,9 +1,6 @@
-import type { ComputedRef } from 'vue';
-import type { AxisAlignedBoundingBox } from '../types';
 declare global {
     namespace Mce {
         interface Editor {
-            viewAabb: ComputedRef<AxisAlignedBoundingBox>;
             bindRenderCanvas: (canvas: HTMLCanvasElement, setEventTarget?: HTMLElement) => () => void;
         }
     }

package/dist/mixins/4.0.node.d.ts

@@ -9,6 +9,7 @@ declare global {
             regenId?: boolean;
         }
         interface Editor {
+            findSibling: (target: 'previous' | 'next') => Node | undefined;
             addNode: (value: Element, options?: AddNodeOptions) => Node;
         }
     }

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

@@ -1,12 +1,14 @@
-import type { Element2D } from 'modern-canvas';
+import type { Element2D, Vector2Like } from 'modern-canvas';
 declare global {
     namespace Mce {
-        interface Editor {
-            setCurrentFrame: (index?: number) => void;
-            handleElementInsideFrame: (element: Element2D, context?: Record<string, any>) => void;
+        interface HandleDragOutReparentOptions {
+            pointer: Vector2Like;
+            parent: Element2D;
+            index: number;
         }
-        interface Events {
-            setCurrentFrame: [index: number, oldIndex: number];
+        interface Editor {
+            findFrame: (target: 'next' | 'previous') => Element2D | undefined;
+            handleDragOutReparent: (element: Element2D, context?: HandleDragOutReparentOptions) => void;
         }
     }
 }

package/dist/mixins/scroll.d.ts

@@ -6,6 +6,7 @@ declare global {
             y: number;
         } | Element2D[];
         interface ScrollToOptions {
+            intoView?: boolean;
             duration?: number;
             behavior?: 'smooth' | 'instant';
         }

package/dist/mixins/snapshot.d.ts

@@ -8,8 +8,7 @@ declare global {
         interface Editor {
             snapshot: () => void;
             captureElementScreenshot: (element: Element | Element2D) => Promise<HTMLCanvasElement>;
-            captureFrameScreenshot: (pageIndex: number) => void;
-            renderFrameThumb: (target: HTMLCanvasElement) => void;
+            captureFrameScreenshot: (index: number) => void;
         }
     }
 }

package/dist/mixins/zoom.d.ts

@@ -1,9 +1,10 @@
 import type { Element2D } from 'modern-canvas';
 declare global {
     namespace Mce {
-        type ZoomTarget = 'root' | 'selection' | Element2D[] | number;
+        type ZoomTarget = 'root' | 'selection' | Element2D | Element2D[] | number;
         type ZoomToMode = 'contain' | 'cover';
         interface ZoomToOptions {
+            intoView?: boolean;
             mode?: ZoomToMode;
             duration?: number;
             behavior?: 'smooth' | 'instant';

package/dist/plugins/{select.d.ts → selection.d.ts}

@@ -4,15 +4,15 @@ declare global {
             selectAll: [event: KeyboardEvent];
             deselectAll: [event: KeyboardEvent];
             selectParent: [event: KeyboardEvent];
-            previousSelection: [event: KeyboardEvent];
-            nextSelection: [event: KeyboardEvent];
+            selectPreviousSibling: [event: KeyboardEvent];
+            selectNextSibling: [event: KeyboardEvent];
         }
         interface Commands {
             selectAll: () => void;
             deselectAll: () => void;
             selectParent: () => void;
-            previousSelection: () => void;
-            nextSelection: () => void;
+            selectPreviousSibling: () => void;
+            selectNextSibling: () => void;
         }
     }
 }

package/dist/plugins/ui.d.ts

@@ -10,6 +10,7 @@ declare global {
             startTyping: (e?: MouseEvent | PointerEvent) => Promise<boolean>;
             startTransform: (e?: MouseEvent | PointerEvent) => boolean;
             openContextMenu: (e?: MouseEvent | PointerEvent) => boolean;
+            layerScrollIntoView: () => boolean;
         }
         interface Events {
             setTransform: [value: {

package/dist/typed-plugins.d.ts

@@ -58,7 +58,7 @@ import './plugins/rotate'
 import './plugins/ruler'
 import './plugins/saveAs'
 import './plugins/scroll'
-import './plugins/select'
+import './plugins/selection'
 import './plugins/shape'
 import './plugins/smartGuides'
 import './plugins/state'

package/dist/utils/helper.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentInternalInstance, ComponentPublicInstance, InjectionKey, VNodeChild } from 'vue';
+export declare function noop(..._args: any): void;
 export declare function isClickInsideElement(event: MouseEvent, targetDiv: HTMLElement): boolean;
 export interface TemplateRef {
     (target: Element | ComponentPublicInstance | null): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.20",
+  "version": "0.15.21",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -58,10 +58,10 @@
     "@floating-ui/vue": "^1.1.9",
     "@vueuse/components": "^14.1.0",
     "@vueuse/core": "^14.1.0",
-    "diff": "^8.0.2",
+    "diff": "^8.0.3",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.22",
-    "modern-canvas": "^0.14.35",
+    "modern-canvas": "^0.14.36",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.9",
     "modern-text": "^1.10.15",