mce 0.12.2 → 0.12.4

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

@@ -1,8 +1,6 @@
 type __VLS_Props = {
-    zoom: number;
     length: number;
     vertical?: boolean;
-    infinite?: boolean;
     size: number;
     offset: number;
 };

package/dist/index.js

@@ -9,7 +9,7 @@ import { merge, throttle, cloneDeep } from "lodash-es";
 import { measureText } from "modern-text";
 import { TextEditor } from "modern-text/web-components";
 import { useFloating, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
-import { vResizeObserver, vOnLongPress } from "@vueuse/components";
+import { vResizeObserver } from "@vueuse/components";
 const _0_command = defineMixin((editor) => {
   const {
     emit
@@ -1003,8 +1003,20 @@ const _0_helper = defineMixin((editor) => {
       align: toPhysical(align, isRtl)
     };
   };
+  function isFrame(node) {
+    return node instanceof Element2D && node.meta?.inEditorIs === "Frame";
+  }
+  function isLocked(element) {
+    return Boolean(element.meta.lock);
+  }
+  function setLock(element, lock) {
+    element.meta.lock = lock;
+  }
   Object.assign(editor, {
-    parseAnchor
+    parseAnchor,
+    isFrame,
+    isLocked,
+    setLock
   });
 });
 const en = {
@@ -1062,8 +1074,9 @@ const en = {
   "zoomToFit": "Zoom to fit",
   "zoomToSelection": "Zoom to selection",
   "object": "Object",
-  "frame/unframe": "Frame/Unframe",
-  "group/ungroup": "Group/Ungroup",
+  "groupSelection": "Group Selection",
+  "frameSelection": "Frame selection",
+  "ungroup": "Ungroup",
   "flip": "Flip",
   "flipHorizontal": "Flip horizontal",
   "flipVertical": "Flip vertical",
@@ -1119,7 +1132,8 @@ const _0_locale = defineMixin((editor, options) => {
 });
 const _1_frame = defineMixin((editor) => {
   const {
-    root
+    root,
+    isFrame
   } = editor;
   const frames = computed(() => root.value.children.filter(isFrame) ?? []);
   const currentFrameIndex = ref(-1);
@@ -1129,9 +1143,6 @@ const _1_frame = defineMixin((editor) => {
     return { left, top, width, height };
   });
   const frameThumbs = ref([]);
-  function isFrame(node) {
-    return node instanceof Element2D && node.meta?.inEditorIs === "Frame";
-  }
   function getAncestorFrame(element) {
     return element?.findAncestor((node) => isFrame(node));
   }
@@ -1141,7 +1152,6 @@ const _1_frame = defineMixin((editor) => {
     currentFrameIndex,
     currentFrame,
     currentFrameAabb,
-    isFrame,
     getAncestorFrame
   });
   return () => {
@@ -2198,22 +2208,6 @@ const _4_0_text = defineMixin((editor) => {
     TextEditor.register();
   };
 });
-const _4_1_lock = defineMixin((editor) => {
-  function isLock(element) {
-    return Boolean(element.meta.lock);
-  }
-  function lock(element) {
-    element.meta.lock = true;
-  }
-  function unlock(element) {
-    element.meta.lock = false;
-  }
-  Object.assign(editor, {
-    isLock,
-    lock,
-    unlock
-  });
-});
 const _4_2_element = defineMixin((editor) => {
   const {
     doc,
@@ -2225,7 +2219,7 @@ const _4_2_element = defineMixin((editor) => {
     log,
     root,
     isFrame,
-    isLock,
+    isLocked,
     getObbInDrawboard,
     config,
     getAncestorFrame,
@@ -2243,6 +2237,7 @@ const _4_2_element = defineMixin((editor) => {
     } = config.value;
     let {
       parent,
+      index,
       sizeToFit,
       position,
       active,
@@ -2262,17 +2257,28 @@ const _4_2_element = defineMixin((editor) => {
         }
       }
     }
+    const parentAabb = parent ? getAabb(parent) : void 0;
     const isArray = Array.isArray(value);
-    let offsetX = 0;
+    let offsetIndex = index;
     const elements = doc.value.transact(() => {
       const values = isArray ? value : [value];
       const elements2 = values.map((element) => {
         const el = doc.value.addElement(element, {
           parentId: parent?.id,
+          index: offsetIndex,
           regenId
         });
-        if (parent) {
-          const { width, height } = parent.style;
+        if (offsetIndex !== void 0) {
+          offsetIndex++;
+        }
+        if (el.text.isValid()) {
+          if (!el.style.width)
+            el.style.width = el.text.base.boundingBox.width;
+          if (!el.style.height)
+            el.style.height = el.text.base.boundingBox.height;
+        }
+        if (parentAabb && parentAabb.width && parentAabb.height) {
+          const { width, height } = parentAabb;
           const halfWidth = width / 2;
           const halfHeight = height / 2;
           if (!el.style.width)
@@ -2294,12 +2300,9 @@ const _4_2_element = defineMixin((editor) => {
             );
           }
         }
-        el.style.left += offsetX;
-        offsetX += el.style.width;
         return el;
       });
       const aabb = getAabb(elements2);
-      const parentAabb = parent ? getAabb(parent) : void 0;
       let globalPosition;
       if (typeof position === "string") {
         switch (position) {
@@ -2307,6 +2310,8 @@ const _4_2_element = defineMixin((editor) => {
             break;
           case "screenCenter":
             globalPosition = camera.value.toGlobal(getScreenCenter());
+            globalPosition.x -= aabb.width / 2;
+            globalPosition.y -= aabb.height / 2;
             break;
           default: {
             const _parentAabb = parentAabb ?? rootAabb.value;
@@ -2453,7 +2458,7 @@ const _4_2_element = defineMixin((editor) => {
       }
       return [node];
     }).filter((node) => {
-      return "isVisibleInTree" in node && node.isVisibleInTree() && isOverlappingObb(areaInDrawboard, getObbInDrawboard(node)) && !isLock(node);
+      return "isVisibleInTree" in node && node.isVisibleInTree() && isOverlappingObb(areaInDrawboard, getObbInDrawboard(node)) && !isLocked(node);
     }) ?? [];
     selection.value = selected;
     return selected;
@@ -2605,11 +2610,11 @@ const _4_4_doc = defineMixin((editor, options) => {
       if (Array.isArray(source) && source.length === 1) {
         _source = source[0];
       }
-      if (!Array.isArray(source)) {
-        if (source.meta?.inEditorIs === "Doc") {
-          id = source.id;
+      if (!Array.isArray(_source)) {
+        if (_source.meta?.inEditorIs === "Doc") {
+          id = _source.id;
         } else {
-          _source = [source];
+          _source = [_source];
         }
       }
     }
@@ -2965,7 +2970,6 @@ const mixins = [
   _2_load,
   _3_view,
   _4_0_text,
-  _4_1_lock,
   _4_2_element,
   _4_3_frame,
   _4_4_doc,
@@ -4406,9 +4410,19 @@ const _clipboard = definePlugin((editor, options) => {
       }
     }
   };
-  async function duplicate() {
-    await copy();
-    await paste();
+  function duplicate() {
+    if (!selection.value.length) {
+      return;
+    }
+    addElement(
+      selection.value.map((v) => v.toJSON()),
+      {
+        parent: selection.value[0].parent,
+        index: selection.value[0].getIndex(),
+        active: true,
+        regenId: true
+      }
+    );
   }
   Object.assign(editor, {
     copiedData
@@ -4522,82 +4536,6 @@ const _flip = definePlugin((editor) => {
     ]
   };
 });
-const _frame = definePlugin((editor) => {
-  const {
-    deleteElement,
-    getAabb,
-    getObb,
-    selection,
-    addElement,
-    isFrame,
-    doc
-  } = editor;
-  function frame() {
-    const elements = selection.value;
-    if (elements.length === 0) {
-      return;
-    }
-    const aabb = getAabb(elements, "frame");
-    const children = elements.map((v) => {
-      const cloned = v.toJSON();
-      cloned.style.left = (cloned.style.left ?? 0) - aabb.left;
-      cloned.style.top = (cloned.style.top ?? 0) - aabb.top;
-      return cloned;
-    });
-    doc.value.transact(() => {
-      addElement({
-        style: { ...aabb },
-        children,
-        meta: {
-          inEditorIs: "Frame"
-        }
-      }, {
-        regenId: true,
-        active: true
-      });
-      elements.forEach((v) => deleteElement(v.id));
-    });
-  }
-  function unframe() {
-    const element = selection.value[0];
-    if (!element)
-      return;
-    const items = element.children.map((el) => {
-      const obb = getObb(el);
-      const cloned = el.toJSON();
-      cloned.style.left = obb.left;
-      cloned.style.top = obb.top;
-      return cloned;
-    });
-    doc.value.transact(() => {
-      deleteElement(element.id);
-      addElement(items, {
-        active: true,
-        regenId: true
-      });
-    });
-  }
-  function frameOrUnframe() {
-    if (selection.value.length === 1) {
-      if (isFrame(selection.value[0])) {
-        unframe();
-      }
-    } else if (selection.value.length > 1) {
-      frame();
-    }
-  }
-  return {
-    name: "mce:frame",
-    commands: [
-      { command: "frame", handle: frame },
-      { command: "unframe", handle: unframe },
-      { command: "frame/unframe", handle: frameOrUnframe }
-    ],
-    hotkeys: [
-      { command: "frame/unframe", key: "Alt+CmdOrCtrl+g" }
-    ]
-  };
-});
 const _gif = definePlugin((editor, options) => {
   const {
     fonts,
@@ -4645,26 +4583,32 @@ const _group = definePlugin((editor) => {
     deleteElement,
     doc
   } = editor;
-  function group() {
+  function group(inEditorIs) {
     const elements = selection.value;
-    if (elements.length === 0) {
+    if (!elements.length) {
       return;
     }
+    const element = elements[0];
+    const parent = element.parent;
     const aabb = getAabb(elements, "parent");
-    const children = elements.map((v) => {
-      const cloned = v.toJSON();
-      cloned.style.left = (cloned.style.left ?? 0) - aabb.left;
-      cloned.style.top = (cloned.style.top ?? 0) - aabb.top;
+    const children = elements.map((child) => {
+      const cloned = child.toJSON();
+      cloned.style.left = child.style.left - aabb.left;
+      cloned.style.top = child.style.top - aabb.top;
       return cloned;
     });
     doc.value.transact(() => {
       addElement({
+        name: inEditorIs === "Frame" ? "Frame" : "Group",
         style: { ...aabb },
         children,
         meta: {
-          inPptIs: "GroupShape"
+          inPptIs: "GroupShape",
+          inEditorIs
         }
       }, {
+        parent,
+        index: parent ? element.getIndex() : void 0,
         active: true,
         regenId: true
       });
@@ -4673,39 +4617,37 @@ const _group = definePlugin((editor) => {
   }
   function ungroup() {
     const element = selection.value[0];
-    if (!element)
+    if (!element || !element.children.length)
       return;
+    const parent = getObb(element, "parent");
     const items = element.children.map((child) => {
-      const obb = getObb(child, "frame");
+      const obb = getObb(child, "parent");
       const cloned = child.toJSON();
-      cloned.style.left = obb.left;
-      cloned.style.top = obb.top;
+      cloned.style.left = obb.left + parent.left;
+      cloned.style.top = obb.top + parent.top;
       return cloned;
     });
     doc.value.transact(() => {
       addElement(items, {
+        parent: element.parent,
+        index: element.getIndex(),
         active: true,
         regenId: true
       });
       deleteElement(element.id);
     });
   }
-  function groupOrUngroup() {
-    if (selection.value.length === 1) {
-      ungroup();
-    } else if (selection.value.length > 1) {
-      group();
-    }
-  }
   return {
     name: "mce:group",
     commands: [
-      { command: "group", handle: group },
-      { command: "ungroup", handle: ungroup },
-      { command: "group/ungroup", handle: groupOrUngroup }
+      { command: "groupSelection", handle: () => group("Element") },
+      { command: "frameSelection", handle: () => group("Frame") },
+      { command: "ungroup", handle: ungroup }
     ],
     hotkeys: [
-      { command: "group/ungroup", key: "CmdOrCtrl+g" }
+      { command: "groupSelection", key: "CmdOrCtrl+g" },
+      { command: "frameSelection", key: "Alt+CmdOrCtrl+g" },
+      { command: "ungroup", key: "CmdOrCtrl+Backspace" }
     ]
   };
 });
@@ -5114,16 +5056,15 @@ const _layerPosition = definePlugin((editor) => {
 const _lock = definePlugin((editor) => {
   const {
     selection,
-    lock,
-    unlock,
-    isLock
+    isLocked,
+    setLock
   } = editor;
   return {
     name: "mce:lock",
     commands: [
-      { command: "lock", handle: () => selection.value.forEach(lock) },
-      { command: "unlock", handle: () => selection.value.forEach(unlock) },
-      { command: "lock/unlock", handle: () => selection.value.forEach((el) => isLock(el) ? unlock(el) : lock(el)) }
+      { command: "lock", handle: () => selection.value.forEach((el) => setLock(el, true)) },
+      { command: "unlock", handle: () => selection.value.forEach((el) => setLock(el, false)) },
+      { command: "lock/unlock", handle: () => selection.value.forEach((el) => setLock(el, !isLocked(el))) }
     ],
     hotkeys: [
       { command: "lock/unlock", key: "Shift+CmdOrCtrl+l" }
@@ -5219,8 +5160,9 @@ const _menu = definePlugin((editor, options) => {
     ]
   }));
   const objectMenu1 = computed(() => [
-    { key: "group/ungroup", disabled: !hasSelected.value },
-    { key: "frame/unframe", disabled: !hasSelected.value }
+    { key: "groupSelection", disabled: !hasSelected.value },
+    { key: "frameSelection", disabled: !hasSelected.value },
+    { key: "ungroup", disabled: !(hasSelected.value && selection.value[0]?.children.length) }
   ]);
   const layerOrderMenu = computed(() => ({
     key: "layerOrder",
@@ -5696,7 +5638,6 @@ const plugins = [
   _copyAs,
   _delete,
   _flip,
-  _frame,
   _gif,
   _group,
   _history,
@@ -7373,15 +7314,11 @@ const _hoisted_1$a = {
   ref: "trackTplRef",
   class: "mce-scrollbar__track"
 };
-const AMOUNT_STEP = 50;
-const AMOUNT_REPEAR_DELAY = 50;
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "Scrollbar",
   props: /* @__PURE__ */ mergeModels({
-    zoom: {},
     length: {},
     vertical: { type: Boolean },
-    infinite: { type: Boolean },
     size: {},
     offset: {}
   }, {
@@ -7392,66 +7329,65 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const lerp = (a, b, t) => a * (1 - t) + b * t;
-    const thumbToTrack = (thumbLength2, thumbPosition2) => lerp(thumbLength2 / 2, 1 - thumbLength2 / 2, thumbPosition2);
-    const offset2 = useModel(__props, "modelValue");
+    const position = useModel(__props, "modelValue");
     const track = useTemplateRef("trackTplRef");
     const thumb = useTemplateRef("thumbTplRef");
     const trackLength = ref(0);
-    const contentLength = computed(
-      () => props.infinite ? props.length * props.zoom + trackLength.value + Math.abs(offset2.value) * 2 : offset2.value > 0 ? offset2.value + props.length * props.zoom : Math.max(trackLength.value - offset2.value, props.length * props.zoom)
-    );
-    const scrollOffset = computed(
-      () => props.infinite ? Math.abs(offset2.value) - offset2.value : offset2.value > 0 ? 0 : -offset2.value
-    );
+    const contentLength = computed(() => {
+      return props.length + trackLength.value + Math.abs(position.value) * 2;
+    });
     const thumbLength = computed(() => {
       return Math.max(0.05, Math.min(1, trackLength.value / contentLength.value));
     });
-    const thumbPosition = computed(() => scrollOffset.value / (contentLength.value - trackLength.value) * (1 - thumbLength.value));
+    const thumbPosition = computed(() => {
+      return (Math.abs(position.value) + position.value) / (contentLength.value - trackLength.value) * (1 - thumbLength.value);
+    });
     const resize = useDebounceFn(() => {
       const box = track.value?.getBoundingClientRect() ?? { width: 0, height: 0 };
       trackLength.value = props.vertical ? box.height : box.width;
     }, 50);
-    const start = computed(() => props.infinite ? thumbToTrack(thumbLength.value, thumbPosition.value) : thumbPosition.value);
+    const lerp = (a, b, t) => a * (1 - t) + b * t;
+    const thumbToTrack = (thumbLength2, thumbPosition2) => lerp(thumbLength2 / 2, 1 - thumbLength2 / 2, thumbPosition2);
+    const start = computed(() => thumbToTrack(thumbLength.value, thumbPosition.value));
     const end = computed(() => 1 - start.value - thumbLength.value);
     const thumbTop = computed(() => props.vertical ? `${start.value * 100}%` : "0%");
     const thumbBottom = computed(() => props.vertical ? `${end.value * 100}%` : "50%");
     const thumbLeft = computed(() => props.vertical ? "0%" : `${start.value * 100}%`);
     const thumbRight = computed(() => props.vertical ? "50%" : `${end.value * 100}%`);
     function update(val) {
-      emit("scroll", val - offset2.value);
-      offset2.value = val;
+      emit("scroll", val - position.value);
+      position.value = val;
     }
     function amount(val) {
-      update(offset2.value + val);
-    }
-    const actived = ref(false);
-    let clearId;
-    function startAmount(e) {
-      const el = e.target;
-      let direction = 0;
-      if (thumb.value?.contains(el)) {
-        stopAmount();
-        return;
-      } else if (track.value?.contains(el)) {
-        const point = (props.vertical ? e.offsetY : e.offsetX) / trackLength.value;
-        if (point < start.value) {
-          direction = 1;
-        } else if (point > 1 - end.value) {
-          direction = -1;
-        } else {
-          stopAmount();
+      update(position.value + val);
+    }
+    const isActive = ref(false);
+    watch(track, (track2, oldTrack) => {
+      function onMousedown(event) {
+        if (!thumb.value?.contains(event.target)) {
           return;
         }
+        isActive.value = true;
+        let last = event;
+        event.stopPropagation();
+        function onMousemove(event2) {
+          const offset2 = {
+            x: last.clientX - event2.clientX,
+            y: last.clientY - event2.clientY
+          };
+          last = event2;
+          amount((props.vertical ? offset2.y : offset2.x) / (trackLength.value * (1 - thumbLength.value)) * contentLength.value * -1);
+        }
+        function onMouseup() {
+          isActive.value = false;
+          window.removeEventListener("mousemove", onMousemove);
+          window.removeEventListener("mouseup", onMouseup);
+        }
+        window.addEventListener("mousemove", onMousemove);
+        window.addEventListener("mouseup", onMouseup);
       }
-      amount(AMOUNT_STEP * direction);
-      clearId = setTimeout(() => startAmount(e), AMOUNT_REPEAR_DELAY);
-    }
-    function stopAmount() {
-      clearTimeout(clearId);
-    }
-    onBeforeUnmount(() => {
-      stopAmount();
+      oldTrack?.removeEventListener("mousedown", onMousedown);
+      track2?.addEventListener("mousedown", onMousedown);
     });
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
@@ -7466,10 +7402,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         })
       }, [
         createElementVNode("div", _hoisted_1$a, [
-          withDirectives(createElementVNode("div", {
+          createElementVNode("div", {
             ref: "thumbTplRef",
             class: normalizeClass(["mce-scrollbar__thumb", {
-              "mce-scrollbar__thumb--active": actived.value
+              "mce-scrollbar__thumb--active": isActive.value
             }]),
             style: normalizeStyle({
               top: thumbTop.value,
@@ -7477,13 +7413,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               left: thumbLeft.value,
               right: thumbRight.value
             })
-          }, null, 6), [
-            [vShow, props.infinite || thumbLength.value < 1]
-          ])
+          }, null, 6)
         ], 512)
       ], 6)), [
-        [unref(vResizeObserver), unref(resize)],
-        [unref(vOnLongPress), [startAmount, { delay: AMOUNT_REPEAR_DELAY, onMouseUp: stopAmount }]]
+        [unref(vResizeObserver), unref(resize)]
       ]);
     };
   }
@@ -7509,16 +7442,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         createVNode(_sfc_main$j, mergeProps(props, {
           modelValue: unref(camera).position.y,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(camera).position.y = $event),
-          zoom: unref(camera).zoom.y,
           vertical: "",
-          length: unref(viewAabb).height
-        }), null, 16, ["modelValue", "zoom", "length"]),
+          length: unref(viewAabb).height * unref(camera).zoom.y
+        }), null, 16, ["modelValue", "length"]),
         createVNode(_sfc_main$j, mergeProps(props, {
           modelValue: unref(camera).position.x,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(camera).position.x = $event),
-          zoom: unref(camera).zoom.x,
-          length: unref(viewAabb).width
-        }), null, 16, ["modelValue", "zoom", "length"])
+          length: unref(viewAabb).width * unref(camera).zoom.x
+        }), null, 16, ["modelValue", "length"])
       ], 64);
     };
   }
@@ -8003,7 +7934,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       registerCommand,
       unregisterCommand,
       isFrame,
-      isLock,
+      isLocked,
       config
     } = useEditor();
     const transformable = useTemplateRef("transformableRef");
@@ -8126,7 +8057,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           modelValue: selectionObb.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectionObb.value = $event),
           visibility: unref(state) !== "selecting" ? "auto" : "none",
-          moveable: unref(selection)[0] && !unref(isLock)(unref(selection)[0]),
+          moveable: unref(selection)[0] && !unref(isLocked)(unref(selection)[0]),
           "resize-strategy": props.resizeStrategy,
           "handle-shape": unref(config).handleShape,
           class: "mce-selection-obb",
@@ -8820,7 +8751,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       isFrame,
       selectArea,
       exec,
-      isLock,
+      isLocked,
       selection,
       getAabbInDrawboard,
       drawboardAabb,
@@ -9005,7 +8936,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           }
           selection.value = selected;
           if (ctxState) {
-            if (selected[0] && !isLock(selected[0])) {
+            if (selected[0] && !isLocked(selected[0])) {
               switch (ctxState) {
                 case "typing": {
                   await exec("startTyping", _event);
@@ -9141,7 +9072,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       root,
       selection,
       exec,
-      zoomTo
+      zoomTo,
+      isFrame
     } = useEditor();
     const rootRef = ref();
     const hover = ref();
@@ -9185,9 +9117,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         function onClickExpand() {
           opened.value = !opened.value;
         }
-        function onClickContent() {
+        function onClickContent(e) {
           if (props.node instanceof Element2D) {
-            selection.value = [props.node];
+            if (e.shiftKey) {
+              selection.value = [
+                ...selection.value.filter((v) => !v.equal(props.node)),
+                props.node
+              ];
+            } else {
+              selection.value = [props.node];
+            }
           }
         }
         function onDblclickThumbnail(e) {
@@ -9207,10 +9146,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             dom: itemRef.value
           };
         }
+        function onContextmenu(e) {
+          if (props.node instanceof Element2D) {
+            if (!selection.value.some((v) => v.equal(props.node))) {
+              selection.value = [props.node];
+            }
+            exec("openContextMenu", e);
+          }
+        }
         return () => {
           function thumbnail() {
             const node = props.node;
-            if (node.meta.inEditorIs === "Frame") {
+            if (isFrame(node)) {
               return createVNode(_sfc_main$w, { icon: "$frame" });
             }
             if (node.children.length > 0) {
@@ -9243,12 +9190,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 },
                 ref: itemRef,
                 onMouseenter,
-                onContextmenu: (e) => {
-                  if (props.node instanceof Element2D) {
-                    selection.value = [props.node];
-                    exec("openContextMenu", e);
-                  }
-                }
+                onContextmenu
               }, [
                 createElementVNode("div", {
                   class: "mce-layer-item__expand",

package/dist/locale/en.d.ts

@@ -53,8 +53,9 @@ declare const _default: {
     zoomToFit: string;
     zoomToSelection: string;
     object: string;
-    'frame/unframe': string;
-    'group/ungroup': string;
+    groupSelection: string;
+    frameSelection: string;
+    ungroup: string;
     flip: string;
     flipHorizontal: string;
     flipVertical: string;

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

@@ -1,3 +1,5 @@
+import type { Node } from 'modern-canvas';
+import { Element2D } from 'modern-canvas';
 declare global {
     namespace Mce {
         type Tblock = 'top' | 'bottom';
@@ -15,6 +17,9 @@ declare global {
         };
         interface Editor {
             parseAnchor: (anchor: Anchor, isRtl?: boolean) => ParsedAnchor;
+            isFrame: (node: Node) => node is Element2D;
+            isLocked: (element: Element2D) => boolean;
+            setLock: (element: Element2D, lock: boolean) => void;
         }
     }
 }

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

@@ -1,7 +1,6 @@
-import type { Node } from 'modern-canvas';
+import type { Element2D } from 'modern-canvas';
 import type { ComputedRef, Ref } from 'vue';
 import type { AxisAlignedBoundingBox } from '../types';
-import { Element2D } from 'modern-canvas';
 declare global {
     namespace Mce {
         interface FrameThumb {
@@ -15,7 +14,6 @@ declare global {
             currentFrameIndex: Ref<number>;
             currentFrame: ComputedRef<Element2D | undefined>;
             currentFrameAabb: ComputedRef<AxisAlignedBoundingBox>;
-            isFrame: (node: Node) => node is Element2D;
             getAncestorFrame: (element?: Element2D) => Element2D | undefined;
         }
     }

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

@@ -1,13 +1,13 @@
-import type { Element2D, Vector2Data } from 'modern-canvas';
+import type { Element2D, Node, Vector2Data } from 'modern-canvas';
 import type { Element } from 'modern-idoc';
 import type { AxisAlignedBoundingBox } from '../types';
 declare global {
     namespace Mce {
         type AddElementPosition = Vector2Data | Anchor | 'screenCenter' | 'pointer';
         interface AddElementOptions {
-            parent?: Element2D;
             position?: AddElementPosition;
-            append?: boolean;
+            parent?: Node;
+            index?: number;
             sizeToFit?: boolean;
             active?: boolean;
             regenId?: boolean;

package/dist/plugins/clipboard.d.ts

@@ -12,7 +12,7 @@ declare global {
             copy: (data?: any) => Promise<void>;
             cut: () => Promise<void>;
             paste: (source?: PasteSource) => Promise<void>;
-            duplicate: () => Promise<void>;
+            duplicate: () => void;
         }
         interface Editor {
             copiedData: Ref<any | undefined>;

package/dist/plugins/group.d.ts

@@ -1,12 +1,14 @@
 declare global {
     namespace Mce {
         interface Commands {
-            'group': () => void;
-            'ungroup': () => void;
-            'group/ungroup': () => void;
+            groupSelection: () => void;
+            frameSelection: () => void;
+            ungroup: () => void;
         }
         interface Hotkeys {
-            'group/ungroup': [event: KeyboardEvent];
+            groupSelection: [event: KeyboardEvent];
+            frameSelection: [event: KeyboardEvent];
+            ungroup: [event: KeyboardEvent];
         }
     }
 }

package/dist/typed-plugins.d.ts

@@ -20,7 +20,6 @@ import './mixins/2.export'
 import './mixins/2.load'
 import './mixins/3.view'
 import './mixins/4.0.text'
-import './mixins/4.1.lock'
 import './mixins/4.2.element'
 import './mixins/4.3.frame'
 import './mixins/4.4.doc'
@@ -32,7 +31,6 @@ import './plugins/clipboard'
 import './plugins/copyAs'
 import './plugins/delete'
 import './plugins/flip'
-import './plugins/frame'
 import './plugins/gif'
 import './plugins/group'
 import './plugins/history'

package/package.json

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

package/dist/mixins/4.1.lock.d.ts

@@ -1,12 +0,0 @@
-import type { Element2D } from 'modern-canvas';
-declare global {
-    namespace Mce {
-        interface Editor {
-            isLock: (element: Element2D) => boolean;
-            lock: (element: Element2D) => void;
-            unlock: (element: Element2D) => void;
-        }
-    }
-}
-declare const _default: import("..").Mixin;
-export default _default;

package/dist/plugins/frame.d.ts

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