mce 0.15.3 → 0.15.5

package/dist/crdt/Doc.d.ts

@@ -38,7 +38,6 @@ export declare class Doc extends Model {
     reset(): this;
     protected _addNode(data: Element, options?: AddNodeOptions): Node;
     addNode(data: Element, options?: AddNodeOptions): Node;
-    addNodes(dataItems: Element[], options?: AddNodeOptions): Node[];
     set(source: Document): this;
     protected _proxyProps(obj: CoreObject, yMap: Y.Map<any>, isMeta?: boolean): void;
     protected _proxyChildren(node: Node, childrenIds: Y.Array<string>): void;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, Aabb2D, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, Obb2D, render, Vector2 as Vector2$1, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
-import { reactive, computed, watch, markRaw, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withModifiers, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
+import { reactive, computed, watch, markRaw, isReactive, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withModifiers, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useResizeObserver as useResizeObserver$1, useLocalStorage, useImage } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeTextContent, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
@@ -536,11 +536,6 @@ class Doc extends Model {
   async load(initFn) {
     return super.load(async () => {
       await initFn?.();
-      this._proxyNode(
-        this.root,
-        this._yProps,
-        this._yChildrenIds
-      );
       this._yChildren.observe(this._yChildrenChange.bind(this));
     });
   }
@@ -611,9 +606,6 @@ class Doc extends Model {
   addNode(data, options) {
     return this.transact(() => this._addNode(data, options));
   }
-  addNodes(dataItems, options) {
-    return this.transact(() => dataItems.map((data) => this._addNode(data, options)));
-  }
   set(source) {
     const { children = [], meta = {}, ..._props } = source;
     const props = {
@@ -628,7 +620,12 @@ class Doc extends Model {
     }
     this._yProps.set("meta", new Y.Map(Object.entries(meta)));
     this._transacting = true;
-    this.addNodes(children);
+    this._proxyNode(
+      this.root,
+      this._yProps,
+      this._yChildrenIds
+    );
+    this.root.append(children);
     return this;
   }
   _proxyProps(obj, yMap, isMeta = false) {
@@ -695,8 +692,9 @@ class Doc extends Model {
         return;
       }
       this.transact(() => {
-        childrenIds.insert(newIndex, [child.id]);
         this._debug(`addChild ${child.id}`, child.name, newIndex);
+        this._proxyNode(child);
+        childrenIds.insert(newIndex, [child.id]);
       });
     });
     node.on("removeChild", (child, oldIndex) => {
@@ -704,11 +702,11 @@ class Doc extends Model {
         return;
       }
       this.transact(() => {
+        this._debug(`removeChild ${child.id}`, child.name, oldIndex);
         const index = childrenIds.toJSON().indexOf(child.id);
         if (index > -1) {
           childrenIds.delete(index, 1);
         }
-        this._debug(`removeChild ${child.id}`, child.name, oldIndex);
       });
     });
     node.children.forEach((child) => {
@@ -786,6 +784,12 @@ class Doc extends Model {
       this.undoManager.addToScope(yNode);
     }
     if (!this._nodeMap.has(id)) {
+      if (!isReactive(node)) {
+        node = reactive(node);
+        if (node.parent) {
+          node.parent.children[node.getIndex()] = node;
+        }
+      }
       this._nodeMap.set(id, node);
       yNode.set("parentId", node.parent?.id);
       node.on("parented", () => {
@@ -793,6 +797,7 @@ class Doc extends Model {
       });
       node.on("destroy", () => {
         this._nodeMap.delete(node.id);
+        this._yChildren.delete(node.id);
         this._debug("destroy", node.id);
       });
       this._proxyProps(node, yNode);
@@ -934,7 +939,7 @@ const _0_context = defineMixin((editor) => {
   function isFrame(value) {
     return isElement(value) && value.meta.inEditorIs === "Frame";
   }
-  function isRootFrame(value) {
+  function isTopLevelFrame(value) {
     return isFrame(value) && Boolean(value.parent?.equal(root.value));
   }
   function isVisible(node) {
@@ -977,7 +982,7 @@ const _0_context = defineMixin((editor) => {
     isRoot,
     isElement,
     isFrame,
-    isRootFrame,
+    isTopLevelFrame,
     isVisible,
     setVisible,
     isLock,
@@ -2080,6 +2085,7 @@ const _2_load = defineMixin((editor) => {
   const load = async (source) => {
     state.value = "loading";
     const items = [];
+    let hasLoader = false;
     try {
       for (const loader of loaders.values()) {
         if (await loader.test(source)) {
@@ -2089,13 +2095,14 @@ const _2_load = defineMixin((editor) => {
           } else {
             items.push(res);
           }
+          hasLoader = true;
           break;
         }
       }
     } finally {
       state.value = void 0;
     }
-    if (!items.length) {
+    if (!hasLoader) {
       throw new Error(`Failed to load source "${source}"`);
     }
     return items;
@@ -2534,7 +2541,8 @@ const _4_2_frame = defineMixin((editor) => {
     emit,
     selection,
     frames,
-    config
+    config,
+    isTopLevelFrame
   } = editor;
   function setCurrentFrame(index = currentFrameIndex.value) {
     index = Math.max(0, Math.min(frames.value.length - 1, index));
@@ -2548,31 +2556,32 @@ const _4_2_frame = defineMixin((editor) => {
     emit("setCurrentFrame", index, oldIndex);
   }
   function handleElementInsideFrame(element) {
-    const source = element.getGlobalAabb();
-    const aArea = source.getArea();
+    const frame1 = element.findAncestor((node) => isTopLevelFrame(node));
+    const aabb1 = element.getGlobalAabb();
+    const area1 = aabb1.getArea();
     let flag = true;
     for (let i = 0, len = frames.value.length; i < len; i++) {
-      const frame = frames.value[i];
-      if (element.equal(frame)) {
+      const frame2 = frames.value[i];
+      if (frame2.equal(element)) {
         continue;
       }
-      const target = frame.getGlobalAabb();
-      if (source && target) {
-        if (source.getIntersectionRect(target).getArea() > aArea * 0.5) {
-          if (!element.findAncestor((ancestor) => ancestor.equal(frame))) {
-            frame.appendChild(element);
-            element.style.left = source.x - target.x;
-            element.style.top = source.y - target.y;
+      const aabb2 = frame2.getGlobalAabb();
+      if (aabb1 && aabb2) {
+        if (aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
+          if (!frame2.equal(frame1)) {
+            frame2.appendChild(element);
+            element.style.left = aabb1.x - aabb2.x;
+            element.style.top = aabb1.y - aabb2.y;
           }
           flag = false;
           break;
         }
       }
     }
-    if (flag && element.parent && !element.parent.equal(root.value)) {
+    if (flag && frame1) {
       root.value.moveChild(element, 0);
-      element.style.left = source.x;
-      element.style.top = source.y;
+      element.style.left = aabb1.x;
+      element.style.top = aabb1.y;
     }
   }
   Object.assign(editor, {
@@ -3295,36 +3304,74 @@ const _clipboard = definePlugin((editor, options) => {
   } = editor;
   const copiedData = ref();
   const useClipboard = options.clipboard !== false && SUPPORTS_CLIPBOARD;
-  function toClipboardItem(source) {
+  const copy = async (source) => {
     if (typeof source === "string") {
-      const type = "text/plain";
-      return new ClipboardItem({ [type]: new Blob([source], { type }) });
+      if (useClipboard) {
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            "text/plain": new Blob([source], { type: "text/plain" })
+          })
+        ]);
+      }
     } else if (source instanceof Blob) {
-      return new ClipboardItem({ [source.type]: source });
-    } else {
-      const type = "text/html";
-      const content = `<mce-clipboard>${JSON.stringify(source)}</mce-clipboard>`;
-      return new ClipboardItem({
-        [type]: new Blob([content], { type })
-      });
-    }
-  }
-  const copy = async (source) => {
-    if (source === void 0) {
-      source = selection.value.map((v) => {
-        const json = v.toJSON();
-        delete json.style.left;
-        delete json.style.top;
-        return json;
-      });
-    }
-    if (useClipboard) {
-      await navigator.clipboard.write([
-        toClipboardItem(source)
-      ]);
+      if (useClipboard) {
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            [source.type]: source
+          })
+        ]);
+      }
     } else {
-      if (Array.isArray(source)) {
-        copiedData.value = source;
+      if (useClipboard) {
+        const textItems = [];
+        let html = "";
+        if (!source) {
+          const selected = selection.value;
+          html += `<mce-clipboard>${JSON.stringify(selected.map((v) => {
+            const json = v.toJSON();
+            if (json.style) {
+              delete json.style.left;
+              delete json.style.top;
+            }
+            return json;
+          }))}</mce-clipboard>`;
+          const cb = (child) => {
+            if (child instanceof Element2D) {
+              const _text2 = child.text.base.toString();
+              textItems.push(_text2);
+              html += `<span>${_text2}</span>`;
+            }
+            return false;
+          };
+          selected.forEach((node) => {
+            cb(node);
+            node.findOne(cb);
+          });
+        } else {
+          html += `<mce-clipboard>${JSON.stringify(source)}</mce-clipboard>`;
+        }
+        const items = {};
+        if (textItems.length) {
+          items["text/plain"] = new Blob([textItems.join("\n")], { type: "text/plain" });
+        }
+        if (html) {
+          items["text/html"] = new Blob([html], { type: "text/html" });
+        }
+        await navigator.clipboard.write([
+          new ClipboardItem(items)
+        ]);
+      } else {
+        if (source === void 0) {
+          source = selection.value.map((v) => {
+            const json = v.toJSON();
+            delete json.style.left;
+            delete json.style.top;
+            return json;
+          });
+        }
+        if (Array.isArray(source)) {
+          copiedData.value = source;
+        }
       }
     }
   };
@@ -3343,10 +3390,17 @@ const _clipboard = definePlugin((editor, options) => {
   async function _paste(items) {
     const elements = [];
     for (const item of items) {
-      for (const type of item.types) {
+      const types = [...item.types];
+      const index = types.indexOf("text/html");
+      if (index > -1) {
+        types.splice(index, 1);
+        types.unshift("text/html");
+      }
+      for (const type of types) {
         const blob = await item.getType(type);
         if (await canLoad(blob)) {
           elements.push(...await load(blob));
+          break;
         } else {
           console.warn(`Unhandled clipboard ${blob.type}`, await blob.text());
         }
@@ -4351,7 +4405,8 @@ const _frame = definePlugin((editor) => {
             name: t("frame"),
             meta: {
               inPptIs: "GroupShape",
-              inEditorIs: "Frame"
+              inEditorIs: "Frame",
+              inCanvasIs: "Element2D"
             }
           }, {
             position: start,
@@ -15084,7 +15139,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const {
       pluginsComponents,
       isElement,
-      isRootFrame,
+      isTopLevelFrame,
       config,
       drawboardDom,
       renderEngine,
@@ -15163,7 +15218,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           hovered = result;
         }
       }
-      if (!(isElement(hovered) && !isRootFrame(hovered))) {
+      if (!(isElement(hovered) && !isTopLevelFrame(hovered))) {
         hovered = void 0;
         cursor = void 0;
       }
@@ -15178,7 +15233,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         allowRootFrame = false
       } = options;
       function isIncluded(node) {
-        return isElement(node) && (allowRootFrame || !isRootFrame(node));
+        return isElement(node) && (allowRootFrame || !isTopLevelFrame(node));
       }
       const drawing = state.value === "drawing";
       const hand = state.value === "hand";

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

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

package/package.json

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