mce 0.15.2 → 0.15.4

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";
@@ -535,13 +535,8 @@ class Doc extends Model {
   }
   async load(initFn) {
     return super.load(async () => {
-      this._proxyNode(
-        this.root,
-        this._yProps,
-        this._yChildrenIds
-      );
-      this._yChildren.observe(this._yChildrenChange.bind(this));
       await initFn?.();
+      this._yChildren.observe(this._yChildrenChange.bind(this));
     });
   }
   _isSelfTransaction(transaction) {
@@ -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 = {
@@ -623,13 +615,17 @@ class Doc extends Model {
     };
     this.reset();
     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)));
     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) {
@@ -696,8 +692,13 @@ class Doc extends Model {
         return;
       }
       this.transact(() => {
-        childrenIds.insert(newIndex, [child.id]);
         this._debug(`addChild ${child.id}`, child.name, newIndex);
+        if (!isReactive(child)) {
+          child = reactive(child);
+          node.children[newIndex] = child;
+        }
+        this._proxyNode(child);
+        childrenIds.insert(newIndex, [child.id]);
       });
     });
     node.on("removeChild", (child, oldIndex) => {
@@ -705,11 +706,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) => {
@@ -794,6 +795,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);
@@ -935,6 +937,9 @@ const _0_context = defineMixin((editor) => {
   function isFrame(value) {
     return isElement(value) && value.meta.inEditorIs === "Frame";
   }
+  function isRootFrame(value) {
+    return isFrame(value) && Boolean(value.parent?.equal(root.value));
+  }
   function isVisible(node) {
     return isElement(node) && node.style.visibility === "visible";
   }
@@ -975,6 +980,7 @@ const _0_context = defineMixin((editor) => {
     isRoot,
     isElement,
     isFrame,
+    isRootFrame,
     isVisible,
     setVisible,
     isLock,
@@ -2077,6 +2083,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)) {
@@ -2086,13 +2093,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;
@@ -2782,7 +2790,7 @@ const _4_3_element = defineMixin((editor) => {
   function selectArea(areaInDrawboard) {
     const area2 = new Obb2D(areaInDrawboard);
     const selected = root.value?.children.flatMap((node) => {
-      if (isFrame(node)) {
+      if (isFrame(node) && node.parent?.equal(root.value)) {
         return node.children;
       }
       return [node];
@@ -3292,36 +3300,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;
+        }
       }
     }
   };
@@ -3340,10 +3386,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());
         }
@@ -3687,7 +3740,7 @@ const aliases = {
 const svg = {
   component: SvgIcon
 };
-const IconsSymbol = Symbol.for("mce:icons");
+const IconsSymbol = /* @__PURE__ */ Symbol.for("mce:icons");
 function createIcons(options = {}) {
   return merge({
     defaultSet: "svg",
@@ -3740,8 +3793,8 @@ function useIcon(props) {
     iconData
   };
 }
-const MceLayerKey = Symbol.for("mce:layer");
-const MceLayerItemKey = Symbol.for("mce:layer-item");
+const MceLayerKey = /* @__PURE__ */ Symbol.for("mce:layer");
+const MceLayerItemKey = /* @__PURE__ */ Symbol.for("mce:layer-item");
 function createLayer(options) {
   const registered = ref([]);
   const nodeItems = /* @__PURE__ */ new Map();
@@ -3892,8 +3945,8 @@ function useResizeObserver(callback, box = "content") {
     contentRect: readonly(contentRect)
   };
 }
-const MceLayoutKey = Symbol.for("mce:layout");
-const MceLayoutItemKey = Symbol.for("mce:layout-item");
+const MceLayoutKey = /* @__PURE__ */ Symbol.for("mce:layout");
+const MceLayoutItemKey = /* @__PURE__ */ Symbol.for("mce:layout-item");
 const ROOT_ZINDEX = 500;
 function makeLayoutProps() {
   return {
@@ -4131,8 +4184,8 @@ function createLayout(props) {
     layoutRef: resizeRef
   };
 }
-const MceMenuSymbol = Symbol.for("MceMenuSymbol");
-const MceOverlaySymbol = Symbol.for("MceOverlaySymbol");
+const MceMenuSymbol = /* @__PURE__ */ Symbol.for("MceMenuSymbol");
+const MceOverlaySymbol = /* @__PURE__ */ Symbol.for("MceOverlaySymbol");
 const makeMceOverlayProps = propsFactory({
   location: String,
   offset: Number,
@@ -4256,7 +4309,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       selection,
       state,
       config,
-      exec
+      exec,
+      renderEngine,
+      drawboardDom
     } = useEditor();
     const editing = ref(false);
     async function onDblclick() {
@@ -4267,11 +4322,14 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         input.value.select();
       }
     }
-    async function onPointerdown(ev) {
+    async function onPointerdown(event) {
       if (!editing.value) {
-        selection.value = [frame.value];
-        await nextTick();
-        exec("startTransform", ev);
+        const cloend = renderEngine.value.input._clonePointerEvent(event);
+        cloend.srcElement = drawboardDom.value;
+        cloend.target = frame.value;
+        exec("startPointerdown", cloend, {
+          allowRootFrame: true
+        });
       }
     }
     return (_ctx, _cache) => {
@@ -8543,7 +8601,7 @@ class Curve {
   }
   getLength() {
     const lengths = this.getLengths();
-    return lengths[lengths.length - 1];
+    return lengths[lengths.length - 1] ?? 0;
   }
   getLengths() {
     if (this._lengths.length !== this.arcLengthDivision + 1) {
@@ -13523,7 +13581,7 @@ const plugins = [
   _zoom
 ];
 class Editor extends Observable {
-  static injectionKey = Symbol.for("EditorKey");
+  static injectionKey = /* @__PURE__ */ Symbol.for("EditorKey");
   debug = ref(false);
   onEmit;
   plugins = /* @__PURE__ */ new Map();
@@ -14666,7 +14724,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               element,
               newStyle.width / element.style.width,
               newStyle.height / element.style.height,
-              isFrame(element) ? void 0 : !shape.enabled || !shape._path2DSet.paths.length ? handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true } : void 0
+              isFrame(element) ? void 0 : !shape.isValid() ? handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true } : void 0
             );
             newStyle.width = element.style.width;
             newStyle.height = element.style.height;
@@ -14981,7 +15039,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     }
     function onUpdate() {
       const element = elementSelection.value[0];
-      if (!element.shape.enabled || !element.shape._path2DSet.paths.length) {
+      if (!element.shape.isValid()) {
         textToFit(element);
       }
     }
@@ -15076,6 +15134,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const {
       pluginsComponents,
       isElement,
+      isRootFrame,
       config,
       drawboardDom,
       renderEngine,
@@ -15147,20 +15206,30 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           event,
           editor
         });
-        if (result && !isElement(result)) {
+        if (result && "element" in result) {
           hovered = result.element;
           cursor = result.cursor;
         } else {
           hovered = result;
         }
       }
+      if (!(isElement(hovered) && !isRootFrame(hovered))) {
+        hovered = void 0;
+        cursor = void 0;
+      }
       hoverElement.value = hovered;
       setCursor(cursor);
     }
-    function onPointerdown(downEvent) {
-      if (downEvent.srcElement !== drawboardDom.value && downEvent.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(downEvent.button)) {
+    function onPointerdown(downEvent, options = {}) {
+      if (downEvent.srcElement && downEvent.srcElement !== drawboardDom.value && downEvent.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(downEvent.button)) {
         return;
       }
+      const {
+        allowRootFrame = false
+      } = options;
+      function isIncluded(node) {
+        return isElement(node) && (allowRootFrame || !isRootFrame(node));
+      }
       const drawing = state.value === "drawing";
       const hand = state.value === "hand";
       const element = downEvent.target;
@@ -15183,11 +15252,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             event: downEvent,
             editor
           });
-          if (result && !isElement(result)) {
-            selected = result.element ? [result.element] : [];
-          } else {
-            selected = result ? [result] : [];
+          let _element = result && "element" in result ? result.element : result;
+          if (!isIncluded(_element)) {
+            _element = void 0;
           }
+          selected = _element ? [_element] : [];
           elementSelection.value = selected;
         }
         return;
@@ -15209,11 +15278,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           event,
           editor
         });
-        if (result && !isElement(result)) {
-          selected = result.element ? [result.element] : [];
-        } else {
-          selected = result ? [result] : [];
+        let _element = result && "element" in result ? result.element : result;
+        if (!isIncluded(_element)) {
+          _element = void 0;
         }
+        selected = _element ? [_element] : [];
         elementSelection.value = selected;
       }
       function onSelectArea() {
@@ -15234,12 +15303,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           editor
         });
         let _element;
-        if (result && !isElement(result)) {
+        if (result && "element" in result) {
           _element = result.element;
           ctxState = result.state;
         } else {
           _element = result;
         }
+        if (!isIncluded(_element)) {
+          _element = void 0;
+        }
         if (_element && (downEvent?.ctrlKey || downEvent?.shiftKey || downEvent?.metaKey)) {
           if (elementSelection.value.findIndex((v) => v.equal(_element)) > -1) {
             selected = elementSelection.value.filter((v) => !v.equal(_element));
@@ -15292,7 +15364,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           );
         } else {
           if (!inSelection) {
-            if (!element) {
+            if (!isIncluded(element)) {
               onSelectArea();
             }
           }
@@ -15341,6 +15413,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       document.addEventListener("pointermove", onMove);
       document.addEventListener("pointerup", onUp);
     }
+    editor.registerCommand({ command: "startPointerdown", handle: onPointerdown });
     function onPointermove(event) {
       if (event.srcElement !== drawboardDom.value) {
         return;

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

@@ -45,6 +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;
             isVisible: (node: Node) => boolean;
             setVisible: (node: Node, visible: boolean) => void;
             isLock: (node: Node) => boolean;

package/dist/plugins/ui.d.ts

@@ -1,7 +1,12 @@
+import type { PointerInputEvent } from 'modern-canvas';
 import type { AxisAlignedBoundingBox } from '../types';
 declare global {
     namespace Mce {
+        interface StartPointerdownOptions {
+            allowRootFrame?: boolean;
+        }
         interface Commands {
+            startPointerdown: (e: PointerInputEvent, options?: StartPointerdownOptions) => void;
             startTyping: (e?: MouseEvent | PointerEvent) => Promise<boolean>;
             startTransform: (e?: MouseEvent | PointerEvent) => boolean;
             openContextMenu: (e?: MouseEvent | PointerEvent) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -60,10 +60,10 @@
     "@vueuse/core": "^14.1.0",
     "diff": "^8.0.2",
     "file-saver": "^2.0.5",
-    "lodash-es": "^4.17.21",
-    "modern-canvas": "^0.14.16",
+    "lodash-es": "^4.17.22",
+    "modern-canvas": "^0.14.19",
     "modern-font": "^0.4.4",
-    "modern-idoc": "^0.10.6",
+    "modern-idoc": "^0.10.7",
     "modern-text": "^1.10.5",
     "yjs": "^13.6.27"
   },
@@ -94,7 +94,7 @@
     "@vitejs/plugin-vue": "^6.0.3",
     "jiti": "^2.6.1",
     "modern-gif": "^2.0.4",
-    "sass-embedded": "^1.96.0"
+    "sass-embedded": "^1.97.0"
   },
   "scripts": {
     "build:code": "vite build",