mce 0.17.3 → 0.17.5

package/dist/components/Selection.vue.d.ts

@@ -43,9 +43,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             readonly onEnd?: ((context: Mce.TransformContext) => any) | undefined;
             readonly "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
+        $attrs: import("vue").Attrs;
         $refs: {
             [x: string]: unknown;
         };
@@ -230,9 +228,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             readonly onEnd?: ((context: Mce.TransformContext) => any) | undefined;
             readonly "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
+        $attrs: import("vue").Attrs;
         $refs: {
             [x: string]: unknown;
         };

package/dist/crdt/YDoc.d.ts

@@ -4,7 +4,7 @@ import type { Transaction } from 'yjs';
 import { Node } from 'modern-canvas';
 import { Observable } from 'modern-idoc';
 import * as Y from 'yjs';
-import { IndexeddbProvider } from '../indexeddb';
+import { IndexeddbProvider } from './providers';
 export type YNode = Y.Map<unknown> & {
     get: ((prop: 'id') => string) & ((prop: 'name') => string) & ((prop: 'parentId') => string) & ((prop: 'style') => Y.Map<unknown>) & ((prop: 'background') => Y.Map<unknown>) & ((prop: 'shape') => Y.Map<unknown>) & ((prop: 'fill') => Y.Map<unknown>) & ((prop: 'outline') => Y.Map<unknown>) & ((prop: 'text') => Y.Map<unknown>) & ((prop: 'foreground') => Y.Map<unknown>) & ((prop: 'shadow') => Y.Map<unknown>) & ((prop: 'meta') => Y.Map<unknown>) & ((prop: 'childrenIds') => Y.Array<string>) & (<T = unknown>(prop: string) => T);
 };
@@ -41,6 +41,6 @@ export declare class YDoc extends Observable {
     _proxyRoot(root: Node): this;
     protected _proxyProps(obj: CoreObject, yMap: Y.Map<any>, isMeta?: boolean): void;
     protected _proxyChildren(node: Node, childrenIds: Y.Array<string>): void;
-    protected _proxyNode(node: Node, yNode?: YNode, yChildrenIds?: Y.Array<string>): void;
+    protected _proxyNode(node: Node, yNode?: YNode, yChildrenIds?: Y.Array<string>): Node;
     protected _initYNode(yNode: YNode): Node;
 }

package/dist/crdt/providers/index.d.ts

@@ -0,0 +1 @@
+export * from './indexeddb';

package/dist/index.js

@@ -613,17 +613,26 @@ const customStoreName = "custom";
 const updatesStoreName = "updates";
 const PREFERRED_TRIM_SIZE = 500;
 function fetchUpdates(idbPersistence, beforeApplyUpdatesCallback, afterApplyUpdatesCallback) {
-  const [updatesStore] = transact(
+  const [
+    updatesStore
+  ] = transact(
     idbPersistence.db,
     [updatesStoreName]
   );
-  const range = createIDBKeyRangeLowerBound(idbPersistence._dbref, false);
-  return getAll(updatesStore, range).then((updates) => {
+  return getAll(
+    updatesStore,
+    createIDBKeyRangeLowerBound(idbPersistence._dbref, false)
+  ).then((updates) => {
     if (!idbPersistence._destroyed) {
       beforeApplyUpdatesCallback?.(updatesStore);
-      Y.transact(idbPersistence.doc, () => {
-        updates.forEach((val) => Y.applyUpdate(idbPersistence.doc, val));
-      }, idbPersistence, false);
+      Y.transact(
+        idbPersistence.doc,
+        () => {
+          updates.forEach((val) => Y.applyUpdate(idbPersistence.doc, val));
+        },
+        idbPersistence,
+        false
+      );
       afterApplyUpdatesCallback?.(updatesStore);
     }
   }).then(() => getLastKey(updatesStore).then((lastKey) => {
@@ -686,8 +695,8 @@ class IndexeddbProvider extends Observable {
         }
       }
     };
-    doc.on("update", this._storeUpdate);
     this.destroy = this.destroy.bind(this);
+    doc.on("update", this._storeUpdate);
     doc.on("destroy", this.destroy);
   }
   db = null;
@@ -782,8 +791,7 @@ class YDoc extends Observable {
     this.undoManager = um;
   }
   async loadIndexeddb() {
-    const indexeddb = new IndexeddbProvider(this._yDoc.guid, this._yDoc);
-    this.indexeddb = await indexeddb.whenSynced;
+    this.indexeddb = await new IndexeddbProvider(this._yDoc.guid, this._yDoc).whenSynced;
     console.info("loaded data from indexed db");
   }
   load() {
@@ -1013,7 +1021,7 @@ class YDoc extends Observable {
   }
   _proxyNode(node, yNode, yChildrenIds) {
     if (node.internalMode !== "default") {
-      return;
+      return node;
     }
     const id = node.id;
     if (!yNode) {
@@ -1027,8 +1035,26 @@ class YDoc extends Observable {
       this._yChildren.set(id, yNode);
       this.undoManager.addToScope(yNode);
     }
-    if (!this._nodeMap.has(id)) {
+    const _node2 = this._nodeMap.get(id);
+    if (_node2) {
+      node = _node2;
+    } else {
       if (!isReactive(node)) {
+        const handle = (node2) => {
+          if (node2 instanceof Element2D) {
+            if (!node2.text.base.__markRaw__) {
+              const base = markRaw(node2.text.base);
+              base.__markRaw__ = true;
+              base.setPropertyAccessor(node2.text);
+              node2.text.base = base;
+            }
+          }
+        };
+        handle(node);
+        node.findOne((child) => {
+          handle(child);
+          return false;
+        });
         node = reactive(node);
         if (node.parent) {
           node.parent.children[node.getIndex()] = node;
@@ -1064,9 +1090,6 @@ class YDoc extends Observable {
           }
           this._proxyProps(node[key], yMap);
         });
-        const base = markRaw(node.text.base);
-        base.setPropertyAccessor(node.text);
-        node.text.base = base;
         node.text.update();
         node.requestRender();
       }
@@ -1080,20 +1103,19 @@ class YDoc extends Observable {
       }
       this._proxyChildren(node, yChildrenIds);
     }
+    return node;
   }
   _initYNode(yNode) {
     const id = yNode.get("id");
     let node = this._nodeMap.get(id);
     if (!node) {
       this.undoManager.addToScope(yNode);
-      node = reactive(
-        Node$1.parse({
-          meta: {
-            inCanvasIs: yNode.get("meta")?.get("inCanvasIs")
-          }
-        })
-      );
-      this._proxyNode(node, yNode);
+      node = Node$1.parse({
+        meta: {
+          inCanvasIs: yNode.get("meta")?.get("inCanvasIs")
+        }
+      });
+      node = this._proxyNode(node, yNode);
       this._nodeMap.set(id, node);
     }
     return node;
@@ -1137,21 +1159,11 @@ class Doc extends Node$1 {
     this._yDoc = _doc2;
     this._source = _source;
   }
-  transact = (fn, should = true) => {
-    return this._yDoc.transact(fn, should);
-  };
-  undo = () => {
-    this._yDoc.undoManager.undo();
-  };
-  redo = () => {
-    this._yDoc.undoManager.redo();
-  };
-  stopCapturing = () => {
-    this._yDoc.undoManager.stopCapturing();
-  };
-  clearHistory = () => {
-    this._yDoc.undoManager.clear();
-  };
+  transact = (fn, should = true) => this._yDoc.transact(fn, should);
+  undo = () => this._yDoc.undoManager.undo();
+  redo = () => this._yDoc.undoManager.redo();
+  stopCapturing = () => this._yDoc.undoManager.stopCapturing();
+  clearHistory = () => this._yDoc.undoManager.clear();
   set = (source) => {
     const { children = [], ...props } = source;
     const oldTransacting = this._yDoc._transacting;
@@ -1166,7 +1178,6 @@ class Doc extends Node$1 {
     return this;
   };
   loadIndexeddb = async () => {
-    console.log(this._yDoc.id);
     await this._yDoc.loadIndexeddb();
   };
   init = () => {
@@ -1379,7 +1390,11 @@ const _0_font = defineMixin((editor) => {
   } = editor;
   const loading = ref(false);
   async function loadFont(source, options) {
-    const res = await fonts.load(source, options);
+    const res = await fonts.load(source, {
+      ...options,
+      injectFontFace: false,
+      injectStyleTag: false
+    });
     emit("loadFont", res);
     return res;
   }
@@ -1856,7 +1871,7 @@ const _2_box = defineMixin((editor) => {
       const aabbs = {};
       element.children.forEach((child, index) => {
         if (isElement(child)) {
-          aabbs[index] = child.globalAabb;
+          aabbs[index] = getAabb(child);
         }
       });
       element.style.left += box.left;
@@ -3240,6 +3255,26 @@ const _autoNest = definePlugin((editor) => {
     }
   };
 });
+const _clipboard = definePlugin(() => {
+  return {
+    name: "mce:clipboard",
+    loaders: [
+      {
+        name: "mce-clipboard",
+        test: (doc) => {
+          return doc instanceof Document && Boolean(doc.querySelector("mce-clipboard"));
+        },
+        load: async (doc) => {
+          const mce = doc.querySelector("mce-clipboard");
+          if (mce) {
+            return JSON.parse(mce.textContent);
+          }
+          return [];
+        }
+      }
+    ]
+  };
+});
 const _doc = definePlugin((editor, options) => {
   const {
     root,
@@ -3905,45 +3940,40 @@ function createLayer() {
       registered.value = registered.value.filter((v) => v !== id);
     },
     onMousedown: (e, id) => {
-      const start = { x: e.clientX, y: e.clientY };
-      function onMove(e2) {
-        const current = { x: e2.clientX, y: e2.clientY };
-        if (!dragging.value && (Math.abs(current.x - start.x) >= 3 || Math.abs(current.y - start.y) >= 3)) {
+      const from = nodeItems.get(id)?.value;
+      addDragListener(e, {
+        threshold: 10,
+        start: () => {
           dragging.value = true;
-        }
-        if (dragging.value) {
-          const targets = e2.composedPath();
-          const layer = targets.find((target) => {
+        },
+        move: ({ event }) => {
+          const layer = event.composedPath().find((target) => {
             return target instanceof HTMLElement && target.classList.contains("m-layer");
           });
           const id2 = layer?.dataset?.id;
           if (id2) {
             droppingItemId.value = id2;
           }
-        }
-      }
-      function onUp() {
-        if (droppingItemId.value) {
-          const from = nodeItems.get(id)?.value;
-          const to = nodeItems.get(droppingItemId.value)?.value;
-          if (to && from && !from.equal(to)) {
-            let toIndex = to.getIndex() + 1;
-            if (to.parent && from.parent && to.parent.equal(from.parent)) {
-              toIndex--;
+        },
+        end: () => {
+          if (droppingItemId.value) {
+            const to = nodeItems.get(droppingItemId.value)?.value;
+            if (to && from && !from.equal(to)) {
+              let toIndex = to.getIndex() + 1;
+              if (to.parent && from.parent && to.parent.equal(from.parent)) {
+                toIndex--;
+              }
+              to.parent?.moveChild(
+                from,
+                toIndex
+              );
             }
-            to.parent?.moveChild(
-              from,
-              toIndex
-            );
           }
+          dragging.value = false;
+          droppingItemId.value = void 0;
+          dragging.value = false;
         }
-        dragging.value = false;
-        droppingItemId.value = void 0;
-        document.removeEventListener("mousemove", onMove);
-        document.removeEventListener("mouseup", onUp);
-      }
-      document.addEventListener("mousemove", onMove);
-      document.addEventListener("mouseup", onUp);
+      });
     }
   });
   return {
@@ -4638,7 +4668,10 @@ const _hover = definePlugin(() => {
     ]
   };
 });
-const _html = definePlugin(() => {
+const _html = definePlugin((editor) => {
+  const {
+    load
+  } = editor;
   const RE = /\.html$/i;
   return {
     name: "mce:html",
@@ -4661,11 +4694,12 @@ const _html = definePlugin(() => {
         },
         load: async (source) => {
           const dom = new DOMParser().parseFromString(await source.text(), "text/html");
-          const mce = dom.querySelector("mce-clipboard");
-          if (mce) {
-            return JSON.parse(mce.textContent);
+          try {
+            return await load(dom);
+          } catch (_err) {
+            console.log(dom);
+            return [];
           }
-          return [];
         }
       }
     ]
@@ -4938,6 +4972,10 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
 const _hoisted_1$q = ["data-id"];
 const _hoisted_2$c = { class: "m-layer__content" };
 const _hoisted_3$b = { class: "m-layer__prepend" };
+const _hoisted_4$5 = {
+  key: 0,
+  class: "m-layer__name"
+};
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
@@ -5179,7 +5217,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             }, [
               createVNode(unref(_sfc_main$F), { icon: thumbnailIcon.value }, null, 8, ["icon"])
             ], 32),
-            createElementVNode("div", {
+            props.root ? (openBlock(), createElementBlock("div", _hoisted_4$5, toDisplayString(unref(t)("layers")), 1)) : (openBlock(), createElementBlock("div", {
+              key: 1,
               class: "m-layer__name",
               onDblclick: onDblclickName
             }, [
@@ -5202,7 +5241,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 style: normalizeStyle$1({ visibility: editing.value ? "hidden" : void 0 })
               }, toDisplayString(editValue.value || thumbnailName.value), 5)
-            ], 32),
+            ], 32)),
             createElementVNode("div", {
               class: normalizeClass(["m-layer__action", {
                 "m-layer__action--hover": hovering.value,
@@ -17277,6 +17316,7 @@ const _zoom = definePlugin((editor) => {
 const plugins = [
   _arrange,
   _autoNest,
+  _clipboard,
   _doc,
   _edit,
   _formatPaint,

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

@@ -3,7 +3,7 @@ import type { IndexCharacter as _IndexCharacter } from 'modern-text/web-componen
 import type { Ref } from 'vue';
 import { Aabb2D, Camera2D, DrawboardEffect, Element2D, Engine, Node, Timeline, Vector2 } from 'modern-canvas';
 import { Fonts } from 'modern-font';
-import { Doc } from '../nodes';
+import { Doc } from '../scene';
 declare global {
     namespace Mce {
         type TBlock = 'top' | 'bottom';

package/dist/plugins/clipboard.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("..").Plugin;
+export default _default;

package/dist/plugins/doc.d.ts

@@ -1,5 +1,5 @@
 import type { Element } from 'modern-idoc';
-import { Doc } from '../nodes';
+import { Doc } from '../scene';
 declare global {
     namespace Mce {
         interface Options {

package/dist/{nodes → scene}/Doc.d.ts

@@ -18,8 +18,8 @@ export declare class Doc extends Node {
     protected _source: any;
     constructor(source?: Mce.DocumentSource);
     transact: <T>(fn: () => T, should?: boolean) => T;
-    undo: () => void;
-    redo: () => void;
+    undo: () => any | null;
+    redo: () => any | null;
     stopCapturing: () => void;
     clearHistory: () => void;
     set: (source: Document) => this;

package/dist/typed-plugins.d.ts

@@ -25,6 +25,7 @@ import './mixins/snapshot'
 import './mixins/tool'
 import './plugins/arrange'
 import './plugins/autoNest'
+import './plugins/clipboard'
 import './plugins/doc'
 import './plugins/edit'
 import './plugins/formatPaint'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.17.3",
+  "version": "0.17.5",
   "description": "A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -61,10 +61,11 @@
     "diff": "^8.0.3",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.23",
-    "modern-canvas": "^0.15.8",
-    "modern-font": "^0.4.4",
+    "modern-canvas": "^0.15.9",
+    "modern-font": "^0.5.0",
     "modern-idoc": "^0.10.21",
-    "modern-text": "^1.10.15",
+    "modern-text": "^1.10.16",
+    "y-protocols": "^1.0.7",
     "yjs": "^13.6.29"
   },
   "peerDependencies": {
@@ -89,7 +90,7 @@
     "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue": "^6.0.4",
     "jiti": "^2.6.1",
-    "sass-embedded": "^1.97.3",
+    "sass-embedded": "^1.98.0",
     "typedoc": "^0.28.17",
     "typedoc-plugin-markdown": "^4.10.0"
   },