mce 0.12.1 → 0.12.2

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

@@ -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,30 @@ 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)
+    };
+  };
+  Object.assign(editor, {
+    parseAnchor
+  });
+});
 const en = {
   "cancel": "Cancel",
   "constrainToAxis": "Constrain to axis",
@@ -1561,6 +1570,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,
@@ -2187,64 +2231,48 @@ const _4_2_element = defineMixin((editor) => {
     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,
       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 isArray = Array.isArray(value);
     let offsetX = 0;
     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,
+          regenId
+        });
+        if (parent) {
+          const { width, height } = parent.style;
           const halfWidth = width / 2;
           const halfHeight = height / 2;
           if (!el.style.width)
@@ -2265,22 +2293,79 @@ 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);
+      const parentAabb = parent ? getAabb(parent) : void 0;
+      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 +2376,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;
     });
@@ -2503,17 +2598,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 +2618,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 +2654,7 @@ const _scroll$1 = defineMixin((editor) => {
     getAabb,
     selectionAabb,
     viewAabb,
-    drawboardAabb,
-    getScreenCenterOffset
+    getScreenCenter
   } = editor;
   const scrollTo = async (target, options = {}) => {
     const {
@@ -2567,7 +2662,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 +2684,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 +2793,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 +2953,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,
@@ -4696,7 +4791,7 @@ const _image = definePlugin((editor) => {
   const insertImage = async (url, options) => {
     return addElement(await createImageElement(url), {
       sizeToFit: true,
-      position: "fit",
+      position: "right",
       ...options
     });
   };
@@ -4775,7 +4870,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 +4964,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 +4991,7 @@ const _json = definePlugin((editor) => {
             }),
             meta: {
               inPptIs: "Pptx",
+              inEditorIs: "Doc",
               inCanvasIs: "Element2D",
               ...getTimeRange(elements)
             }
@@ -5411,7 +5505,7 @@ const _text = definePlugin((editor) => {
     const { style, ...restOptions } = options;
     return addElement(createTextElement(content, style), {
       sizeToFit: true,
-      position: "fit",
+      position: "right",
       ...restOptions
     });
   };
@@ -6364,7 +6458,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(() => {
@@ -8323,7 +8417,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(() => {

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,22 @@
+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;
+        }
+    }
+}
+declare const _default: import("..").Mixin;
+export default _default;

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

@@ -3,10 +3,12 @@ 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;
+            parent?: Element2D;
+            position?: AddElementPosition;
+            append?: boolean;
             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/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'

package/package.json

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