mce 0.12.1 → 0.12.3

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.d.ts

@@ -17,4 +17,4 @@ export * from './plugins';
 export * from './types';
 export * from './utils';
 export type { Camera2D, Element2D, Engine } from 'modern-canvas';
-export type { Element, NormalizedElement } from 'modern-idoc';
+export type { Document, Element, NormalizedElement } from 'modern-idoc';

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
@@ -124,26 +124,7 @@ const _0_config_base = defineMixin((editor, options) => {
   registerConfig("typographyStrategy", "autoHeight");
   registerConfig("handleShape", "rect");
   registerConfig("localDb", false);
-  const screenCenterOffset = { left: 0, top: 0, bottom: 0, right: 0 };
-  registerConfig("screenCenterOffset", { ...screenCenterOffset });
-  const getScreenCenterOffset = () => {
-    const offset2 = {
-      ...screenCenterOffset,
-      ...config.value.screenCenterOffset
-    };
-    if (config.value.scrollbar) {
-      offset2.right += 8;
-      offset2.bottom += 8;
-    }
-    if (config.value.ruler) {
-      offset2.left += 16;
-      offset2.top += 16;
-    }
-    return offset2;
-  };
-  Object.assign(editor, {
-    getScreenCenterOffset
-  });
+  registerConfig("screenCenterOffset", { left: 0, top: 0, bottom: 0, right: 0 });
   return () => {
     const {
       camera,
@@ -667,6 +648,10 @@ class Doc extends Model {
     this.reset();
     this.addElements(children);
     this.setProperties(props);
+    this._yProps.clear();
+    for (const key in props) {
+      this._yProps.set(key, props[key]);
+    }
     this._yProps.set("meta", new Y.Map(Object.entries(meta)));
     return this;
   }
@@ -998,6 +983,42 @@ const _0_font = defineMixin((editor, options) => {
     }
   };
 });
+const _0_helper = defineMixin((editor) => {
+  const block = ["top", "bottom"];
+  const inline = ["start", "end", "left", "right"];
+  function toPhysical(str, isRtl) {
+    if (str === "start")
+      return isRtl ? "right" : "left";
+    if (str === "end")
+      return isRtl ? "left" : "right";
+    return str;
+  }
+  const parseAnchor = (anchor, isRtl) => {
+    let [side, align] = anchor.split(" ");
+    if (!align) {
+      align = block.includes(side) ? "start" : inline.includes(side) ? "top" : "center";
+    }
+    return {
+      side: toPhysical(side, isRtl),
+      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,
+    isFrame,
+    isLocked,
+    setLock
+  });
+});
 const en = {
   "cancel": "Cancel",
   "constrainToAxis": "Constrain to axis",
@@ -1053,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",
@@ -1110,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);
@@ -1120,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));
   }
@@ -1132,7 +1152,6 @@ const _1_frame = defineMixin((editor) => {
     currentFrameIndex,
     currentFrame,
     currentFrameAabb,
-    isFrame,
     getAncestorFrame
   });
   return () => {
@@ -1561,6 +1580,41 @@ const _1_hotkey = defineMixin((editor) => {
     );
   };
 });
+const _1_screen = defineMixin((editor) => {
+  const {
+    config,
+    drawboardAabb
+  } = editor;
+  const getScreenCenterOffset = () => {
+    const offset2 = {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      ...config.value.screenCenterOffset
+    };
+    if (config.value.scrollbar) {
+      offset2.right += 8;
+      offset2.bottom += 8;
+    }
+    if (config.value.ruler) {
+      offset2.left += 16;
+      offset2.top += 16;
+    }
+    return offset2;
+  };
+  const getScreenCenter = () => {
+    const offset2 = getScreenCenterOffset();
+    return {
+      x: offset2.left + (drawboardAabb.value.width - offset2.left - offset2.right) / 2,
+      y: offset2.top + (drawboardAabb.value.height - offset2.top - offset2.bottom) / 2
+    };
+  };
+  Object.assign(editor, {
+    getScreenCenterOffset,
+    getScreenCenter
+  });
+});
 const _1_timeline = defineMixin((editor) => {
   const {
     root,
@@ -2154,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,
@@ -2181,70 +2219,66 @@ const _4_2_element = defineMixin((editor) => {
     log,
     root,
     isFrame,
-    isLock,
+    isLocked,
     getObbInDrawboard,
     config,
     getAncestorFrame,
     getAabb,
     getGlobalPointer,
+    getScreenCenter,
     selection,
-    getScreenCenterOffset,
     camera,
-    drawboardAabb
+    parseAnchor
   } = editor;
   function addElement(value, options = {}) {
     log("addElement", value, options);
+    const {
+      frameGap
+    } = config.value;
     let {
-      frame,
+      parent,
+      index,
       sizeToFit,
       position,
       active,
       regenId
     } = options;
-    if (!frame) {
+    if (!parent) {
       if (config.value.viewMode === "frame") {
-        frame = currentFrame.value;
+        parent = currentFrame.value;
       } else {
         const element = selection.value[0];
         if (element) {
           if (isFrame(element)) {
-            frame = element;
+            parent = element;
           } else {
-            frame = getAncestorFrame(element);
+            parent = getAncestorFrame(element);
           }
         }
       }
     }
-    let initPos;
-    switch (position) {
-      case "screenCenter": {
-        const screenCenterOffset = getScreenCenterOffset();
-        const { zoom, position: position2 } = camera.value;
-        const centerOffset = {
-          x: position2.x + screenCenterOffset.left + (drawboardAabb.value.width - screenCenterOffset.left - screenCenterOffset.right) / 2,
-          y: position2.y + screenCenterOffset.top + (drawboardAabb.value.height - screenCenterOffset.top - screenCenterOffset.bottom) / 2
-        };
-        initPos = {
-          x: centerOffset.x * zoom.x,
-          y: centerOffset.y * zoom.y
-        };
-        break;
-      }
-      case "fit":
-        initPos = {
-          x: rootAabb.value.left + rootAabb.value.width + config.value.frameGap,
-          y: rootAabb.value.top
-        };
-        break;
-    }
+    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: frame?.id, regenId });
-        if (frame) {
-          const { width, height } = frame.style;
+        const el = doc.value.addElement(element, {
+          parentId: parent?.id,
+          index: offsetIndex,
+          regenId
+        });
+        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)
@@ -2265,22 +2299,76 @@ const _4_2_element = defineMixin((editor) => {
               }
             );
           }
-          if (position === "fit") {
-            el.style.left = Math.round(width - el.style.width) / 2;
-            el.style.top = Math.round(height - el.style.height) / 2;
-          }
-        } else {
-          if (initPos) {
-            el.style.top = Math.round(initPos.x);
-            el.style.left = Math.round(initPos.y);
-            initPos.x += el.style.height + config.value.frameGap;
-          }
         }
-        el.style.left += offsetX;
-        offsetX += el.style.width;
         return el;
       });
       const aabb = getAabb(elements2);
+      let globalPosition;
+      if (typeof position === "string") {
+        switch (position) {
+          case "pointer":
+            break;
+          case "screenCenter":
+            globalPosition = camera.value.toGlobal(getScreenCenter());
+            break;
+          default: {
+            const _parentAabb = parentAabb ?? rootAabb.value;
+            const anchor = parseAnchor(position);
+            globalPosition = { x: 0, y: 0 };
+            const map = {
+              centerX: () => globalPosition.x = _parentAabb.left + _parentAabb.width / 2,
+              centerY: () => globalPosition.y = _parentAabb.top + _parentAabb.height / 2
+            };
+            if (anchor.side === "center") {
+              map.centerX();
+              map.centerY();
+            } else {
+              if (anchor.side === "left" || anchor.side === "right") {
+                switch (anchor.side) {
+                  case "left":
+                    globalPosition.x = _parentAabb.left - (aabb.width + frameGap);
+                    break;
+                  case "right":
+                    globalPosition.x = _parentAabb.left + _parentAabb.width + frameGap;
+                    break;
+                }
+                switch (anchor.align) {
+                  case "top":
+                    globalPosition.y = _parentAabb.top;
+                    break;
+                  case "bottom":
+                    globalPosition.y = _parentAabb.top + _parentAabb.height;
+                    break;
+                  case "center":
+                    map.centerY();
+                    break;
+                }
+              } else if (anchor.side === "top" || anchor.side === "bottom") {
+                switch (anchor.side) {
+                  case "top":
+                    globalPosition.y = _parentAabb.top - (aabb.height + frameGap);
+                    break;
+                  case "bottom":
+                    globalPosition.y = _parentAabb.top + _parentAabb.height + frameGap;
+                    break;
+                }
+                switch (anchor.align) {
+                  case "left":
+                    globalPosition.x = _parentAabb.left;
+                    break;
+                  case "right":
+                    globalPosition.x = _parentAabb.left + _parentAabb.width;
+                    break;
+                  case "center":
+                    map.centerX();
+                    break;
+                }
+              }
+            }
+            break;
+          }
+        }
+      }
       if (position === "pointer") {
         const pointer = getGlobalPointer();
         const diff = {
@@ -2291,6 +2379,16 @@ const _4_2_element = defineMixin((editor) => {
           el.style.left += diff.x;
           el.style.top += diff.y;
         });
+      } else if (globalPosition) {
+        elements2.forEach((el) => {
+          el.style.left = Math.round(
+            parentAabb ? parentAabb.left - globalPosition.x : globalPosition.x
+          );
+          el.style.top = Math.round(
+            parentAabb ? parentAabb.top - globalPosition.y : globalPosition.y
+          );
+          globalPosition.x += el.style.width + frameGap;
+        });
       }
       return elements2;
     });
@@ -2358,7 +2456,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;
@@ -2503,17 +2601,18 @@ const _4_4_doc = defineMixin((editor, options) => {
   }
   const setDoc = async (source) => {
     let id;
+    let _source = source;
     if (typeof source === "string") {
       id = source;
     } else if (source) {
       if (Array.isArray(source) && source.length === 1) {
-        source = source[0];
+        _source = source[0];
       }
       if (!Array.isArray(source)) {
         if (source.meta?.inEditorIs === "Doc") {
           id = source.id;
         } else {
-          source = [source];
+          _source = [source];
         }
       }
     }
@@ -2522,7 +2621,7 @@ const _4_4_doc = defineMixin((editor, options) => {
     try {
       await waitUntilFontLoad();
       clearDoc();
-      await initDoc(_doc, source);
+      await initDoc(_doc, _source);
       doc.value = _doc;
       emit("setDoc", _doc);
     } finally {
@@ -2558,8 +2657,7 @@ const _scroll$1 = defineMixin((editor) => {
     getAabb,
     selectionAabb,
     viewAabb,
-    drawboardAabb,
-    getScreenCenterOffset
+    getScreenCenter
   } = editor;
   const scrollTo = async (target, options = {}) => {
     const {
@@ -2567,7 +2665,7 @@ const _scroll$1 = defineMixin((editor) => {
       duration = 500
     } = options;
     const _camera = camera.value;
-    const screenCenterOffset = getScreenCenterOffset();
+    const screenCenter = getScreenCenter();
     const offset2 = { x: 0, y: 0 };
     let position = { x: 0, y: 0 };
     if (typeof target === "object" && "x" in target && "y" in target) {
@@ -2589,10 +2687,8 @@ const _scroll$1 = defineMixin((editor) => {
         }
       }
       position = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
-      offset2.x -= screenCenterOffset.left;
-      offset2.x -= (drawboardAabb.value.width - screenCenterOffset.left - screenCenterOffset.right) / 2;
-      offset2.y -= screenCenterOffset.top;
-      offset2.y -= (drawboardAabb.value.height - screenCenterOffset.top - screenCenterOffset.bottom) / 2;
+      offset2.x += -screenCenter.x;
+      offset2.y = -screenCenter.y;
     }
     position.x *= _camera.zoom.x;
     position.x += offset2.x;
@@ -2700,8 +2796,8 @@ const _snapshot = defineMixin((editor) => {
     const sh = aabb.height * zoom.y;
     ctx.drawImage(
       view,
-      (aabb.left * zoom.x + position.x) * pixelRatio,
-      (aabb.top * zoom.x + position.y) * pixelRatio,
+      (aabb.left * zoom.x - position.x) * pixelRatio,
+      (aabb.top * zoom.x - position.y) * pixelRatio,
       sw * pixelRatio,
       sh * pixelRatio,
       0,
@@ -2860,9 +2956,11 @@ const mixins = [
   _0_context,
   _0_element,
   _0_font,
+  _0_helper,
   _0_locale,
   _1_frame,
   _1_hotkey,
+  _1_screen,
   _1_timeline,
   _1_upload,
   _2_box,
@@ -2870,7 +2968,6 @@ const mixins = [
   _2_load,
   _3_view,
   _4_0_text,
-  _4_1_lock,
   _4_2_element,
   _4_3_frame,
   _4_4_doc,
@@ -4311,9 +4408,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
@@ -4427,82 +4534,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,
@@ -4550,26 +4581,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
       });
@@ -4578,39 +4615,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" }
     ]
   };
 });
@@ -4696,7 +4731,7 @@ const _image = definePlugin((editor) => {
   const insertImage = async (url, options) => {
     return addElement(await createImageElement(url), {
       sizeToFit: true,
-      position: "fit",
+      position: "right",
       ...options
     });
   };
@@ -4775,7 +4810,7 @@ const _import = definePlugin((editor) => {
     return addElement((await Promise.all(files.map((file) => load(file)))).flat(), {
       ...options,
       sizeToFit: true,
-      position: "fit"
+      position: "right"
     });
   };
   return {
@@ -4869,9 +4904,7 @@ const _json = definePlugin((editor) => {
               elements = selection.value;
             }
             if (elements.length === 0 && root.value) {
-              if (root.value.meta.id) {
-                id = root.value.meta.id;
-              }
+              id = root.value.id;
               elements = root.value.children;
             }
           }
@@ -4898,6 +4931,7 @@ const _json = definePlugin((editor) => {
             }),
             meta: {
               inPptIs: "Pptx",
+              inEditorIs: "Doc",
               inCanvasIs: "Element2D",
               ...getTimeRange(elements)
             }
@@ -5020,16 +5054,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" }
@@ -5125,8 +5158,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",
@@ -5411,7 +5445,7 @@ const _text = definePlugin((editor) => {
     const { style, ...restOptions } = options;
     return addElement(createTextElement(content, style), {
       sizeToFit: true,
-      position: "fit",
+      position: "right",
       ...restOptions
     });
   };
@@ -5602,7 +5636,6 @@ const plugins = [
   _copyAs,
   _delete,
   _flip,
-  _frame,
   _gif,
   _group,
   _history,
@@ -6364,7 +6397,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     const style = computed(() => {
       return {
         ...floatingStyles.value,
-        zIndex: 2e3 + overlayItem.index.value
+        zIndex: 1500 + overlayItem.index.value
       };
     });
     const activatorProps = computed(() => {
@@ -7279,15 +7312,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: {}
   }, {
@@ -7298,66 +7327,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", {
@@ -7372,10 +7400,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,
@@ -7383,13 +7411,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)]
       ]);
     };
   }
@@ -7415,16 +7440,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);
     };
   }
@@ -7909,7 +7932,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       registerCommand,
       unregisterCommand,
       isFrame,
-      isLock,
+      isLocked,
       config
     } = useEditor();
     const transformable = useTemplateRef("transformableRef");
@@ -8032,7 +8055,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",
@@ -8323,7 +8346,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const { zoom, position } = camera.value;
       return {
         transformOrigin: "left top",
-        transform: `translate(${position.x}px, ${position.y}px) scale(${zoom.x}, ${zoom.y})`
+        transform: `translate(${-position.x}px, ${-position.y}px) scale(${zoom.x}, ${zoom.y})`
       };
     });
     const textEditorStyle = computed(() => {
@@ -8726,7 +8749,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       isFrame,
       selectArea,
       exec,
-      isLock,
+      isLocked,
       selection,
       getAabbInDrawboard,
       drawboardAabb,
@@ -8911,7 +8934,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);
@@ -9047,7 +9070,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       root,
       selection,
       exec,
-      zoomTo
+      zoomTo,
+      isFrame
     } = useEditor();
     const rootRef = ref();
     const hover = ref();
@@ -9091,9 +9115,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) {
@@ -9113,10 +9144,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) {
@@ -9149,12 +9188,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.config/base.d.ts

@@ -30,9 +30,6 @@ declare global {
             localDb: boolean;
             screenCenterOffset: ScreenCenterOffset;
         }
-        interface Editor {
-            getScreenCenterOffset: () => Required<ScreenCenterOffset>;
-        }
     }
 }
 declare const _default: import("../..").Mixin;

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

@@ -0,0 +1,27 @@
+import type { Node } from 'modern-canvas';
+import { Element2D } from 'modern-canvas';
+declare global {
+    namespace Mce {
+        type Tblock = 'top' | 'bottom';
+        type Tinline = 'start' | 'end' | 'left' | 'right';
+        type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
+        type ParsedAnchor = {
+            side: 'center';
+            align: 'center';
+        } | {
+            side: Tblock;
+            align: 'left' | 'right' | 'center';
+        } | {
+            side: 'left' | 'right';
+            align: Tblock | 'center';
+        };
+        interface Editor {
+            parseAnchor: (anchor: Anchor, isRtl?: boolean) => ParsedAnchor;
+            isFrame: (node: Node) => node is Element2D;
+            isLocked: (element: Element2D) => boolean;
+            setLock: (element: Element2D, lock: boolean) => void;
+        }
+    }
+}
+declare const _default: import("..").Mixin;
+export default _default;

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/1.screen.d.ts

@@ -0,0 +1,13 @@
+declare global {
+    namespace Mce {
+        interface Editor {
+            getScreenCenterOffset: () => Required<ScreenCenterOffset>;
+            getScreenCenter: () => {
+                x: number;
+                y: number;
+            };
+        }
+    }
+}
+declare const _default: import("..").Mixin;
+export default _default;

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

@@ -1,12 +1,14 @@
-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 {
-            frame?: Element2D;
+            position?: AddElementPosition;
+            parent?: Node;
+            index?: number;
             sizeToFit?: boolean;
-            position?: Vector2Data | 'fit' | 'screenCenter' | 'pointer';
             active?: boolean;
             regenId?: boolean;
         }

package/dist/mixins/4.4.doc.d.ts

@@ -2,14 +2,22 @@ import type { Document, Element } from 'modern-idoc';
 import { Doc } from '../models';
 declare global {
     namespace Mce {
+        interface InternalDocument extends Document {
+            id: string;
+            meta: {
+                [key: string]: any;
+                inEditorIs: 'Doc';
+            };
+        }
+        type DocumentSource = InternalDocument | Element[] | string;
         interface Editor {
             getDoc: () => JsonData;
-            setDoc: (doc: Document | Element[] | string) => Promise<Doc>;
+            setDoc: (doc: DocumentSource) => Promise<Doc>;
             loadDoc: (source: any) => Promise<Doc>;
             clearDoc: () => void;
         }
         interface Options {
-            doc?: Document | string;
+            doc?: DocumentSource;
         }
         interface Events {
             setDoc: [doc: Doc];

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/plugins/json.d.ts

@@ -12,7 +12,8 @@ declare global {
             children: NormalizedElement[];
             meta: {
                 inPptIs: 'Pptx';
-                inCanvasIs: 'Node2D';
+                inEditorIs: 'Doc';
+                inCanvasIs: 'Element2D';
                 startTime: number;
                 endTime: number;
             };

package/dist/typed-plugins.d.ts

@@ -8,9 +8,11 @@ import './mixins/0.config/base'
 import './mixins/0.context'
 import './mixins/0.element'
 import './mixins/0.font'
+import './mixins/0.helper'
 import './mixins/0.locale'
 import './mixins/1.frame'
 import './mixins/1.hotkey'
+import './mixins/1.screen'
 import './mixins/1.timeline'
 import './mixins/1.upload'
 import './mixins/2.box'
@@ -18,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'
@@ -30,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.1",
+  "version": "0.12.3",
   "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;