mce 0.11.2 → 0.11.4

package/README.md

@@ -45,8 +45,8 @@ npm i mce
       svg(),
     ],
     theme: 'system',
-    language: 'en',
     viewMode: 'edgeless',
+    clipboard: true,
     checkerboard: true,
     pixelGrid: true,
     camera: true,
@@ -60,6 +60,7 @@ npm i mce
     zoomToFitOffset: { left: 0, top: 0, right: 0, bottom: 0 },
     localDb: false,
     customUpload: async (blob) => URL.createObjectURL(blob),
+    customContextMenu: (menu) => menu,
     defaultFont: { family: 'SourceHanSansCN-Normal', src: '/SourceHanSansCN-Normal.woff' },
     doc: {
       children: [

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, markRaw, reactive, warn, shallowRef, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, onBeforeUnmount, readonly, toRef, onMounted, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, withDirectives, vShow, vModelText, nextTick, withModifiers, onBeforeMount, isRef } from "vue";
+import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, onMounted, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, readonly, toRef, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, withDirectives, vShow, vModelText, nextTick, withModifiers, onBeforeMount, isRef } from "vue";
 import { useFileDialog, useEventListener, isClient, useResizeObserver as useResizeObserver$1, useLocalStorage, onClickOutside, useMouse, useDebounceFn } from "@vueuse/core";
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation } from "modern-canvas";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent } from "modern-idoc";
@@ -110,7 +110,6 @@ const _0_config_base = defineMixin((editor, options) => {
     config
   } = editor;
   registerConfig("theme", "system");
-  registerConfig("language", "en");
   registerConfig("viewMode", "edgeless");
   registerConfig("checkerboard", false);
   registerConfig("pixelGrid", false);
@@ -1362,6 +1361,18 @@ function findChildrenWithProvide(key, vnode) {
   }
   return [];
 }
+function isInputEvent(event) {
+  if (!event)
+    return false;
+  let path = event.path;
+  if (!path && event.composedPath)
+    path = event.composedPath();
+  if (!path)
+    return false;
+  return path?.some(
+    (el) => ["INPUT", "TEXTAREA", "SELECT"].includes(el?.tagName) || el?.contentEditable === "true"
+  );
+}
 function propsFactory(props, source) {
   return (defaults) => {
     return Object.keys(props).reduce((obj, prop) => {
@@ -1391,18 +1402,6 @@ function uuidv4() {
 const defaultHotkeys = [
   { command: "cancel", key: "Esc", editable: false }
 ];
-function isInputEvent(event) {
-  if (!event)
-    return false;
-  let path = event.path;
-  if (!path && event.composedPath)
-    path = event.composedPath();
-  if (!path)
-    return false;
-  return path?.some(
-    (el) => ["INPUT", "TEXTAREA", "SELECT"].includes(el?.tagName) || el?.contentEditable === "true"
-  );
-}
 const _1_hotkey = defineMixin((editor) => {
   const {
     registerConfig
@@ -1874,69 +1873,6 @@ const _2_export = defineMixin((editor) => {
     to
   });
 });
-const _2_export_json = defineMixin((editor) => {
-  const {
-    registerExporter,
-    getAabb,
-    selection,
-    root,
-    getTimeRange
-  } = editor;
-  registerExporter({
-    name: "json",
-    copyAs: (exported) => JSON.stringify(exported),
-    saveAs: (exported) => new Blob([JSON.stringify(exported)], { type: "application/json" }),
-    handle: (options) => {
-      const {
-        selected = false,
-        scale = 1
-      } = options;
-      let id = idGenerator();
-      let elements = [];
-      if (Array.isArray(selected)) {
-        elements = selected;
-      } else {
-        if (selected === true) {
-          elements = selection.value;
-        }
-        if (elements.length === 0 && root.value) {
-          if (root.value.meta.id) {
-            id = root.value.meta.id;
-          }
-          elements = root.value.children;
-        }
-      }
-      const box = getAabb(elements, "parent");
-      console.log(box);
-      return {
-        id,
-        style: {
-          width: box.width * scale,
-          height: box.height * scale,
-          transformOrigin: "left top",
-          transform: `scale(${scale})`
-        },
-        children: elements.map((el) => {
-          const json = el.toJSON();
-          if (box.left) {
-            json.style.left = (json.style.left ?? 0) - box.left;
-          }
-          if (box.top) {
-            json.style.top = (json.style.top ?? 0) - box.top;
-          }
-          json.meta ??= {};
-          json.meta.inPptIs = "Slide";
-          return json;
-        }),
-        meta: {
-          inPptIs: "Pptx",
-          inCanvasIs: "Element2D",
-          ...getTimeRange(elements)
-        }
-      };
-    }
-  });
-});
 const _2_load = defineMixin((editor) => {
   const {
     state
@@ -1962,15 +1898,15 @@ const _2_load = defineMixin((editor) => {
   };
   const load = async (source) => {
     state.value = "loading";
-    let result;
+    const items = [];
     try {
       for (const loader of loaders.value.values()) {
         if (await loader.test(source)) {
           const res = await loader.load(source);
           if (Array.isArray(res)) {
-            result = { id: idGenerator(), children: res };
+            items.push(...res);
           } else {
-            result = res;
+            items.push(res);
           }
           break;
         }
@@ -1978,10 +1914,10 @@ const _2_load = defineMixin((editor) => {
     } finally {
       state.value = void 0;
     }
-    if (!result) {
+    if (!items.length) {
       throw new Error(`Failed to load source "${source}"`);
     }
-    return result;
+    return items;
   };
   const openFileDialog = (options = {}) => {
     const {
@@ -2013,36 +1949,6 @@ const _2_load = defineMixin((editor) => {
     openFileDialog
   });
 });
-const _2_loader_json = defineMixin((editor) => {
-  const {
-    registerLoader
-  } = editor;
-  const RE = /\.json$/i;
-  registerLoader({
-    name: "json",
-    accept: ".json",
-    test: (source) => {
-      if (source instanceof Blob) {
-        if (source.type.startsWith("application/json")) {
-          return true;
-        }
-      }
-      if (source instanceof File) {
-        if (RE.test(source.name)) {
-          return true;
-        }
-      }
-      return false;
-    },
-    load: async (source) => {
-      const json = JSON.parse(await source.text());
-      if ("version" in json && "elements" in json) {
-        console.log(json);
-      }
-      return json;
-    }
-  });
-});
 const _3_view = defineMixin((editor) => {
   const {
     renderEngine,
@@ -2549,7 +2455,11 @@ const _4_4_doc = defineMixin((editor, options) => {
         }
       }
       if (source && typeof source !== "string") {
-        doc2.set(source);
+        if (Array.isArray(source)) {
+          doc2.set({ children: source });
+        } else {
+          doc2.set(source);
+        }
       }
     });
     doc2.on("update", throttle((update, origin) => emit("updateDoc", update, origin), 200));
@@ -2559,8 +2469,17 @@ const _4_4_doc = defineMixin((editor, options) => {
     let id;
     if (typeof source === "string") {
       id = source;
-    } else {
-      id = source?.id;
+    } else if (source) {
+      if (Array.isArray(source) && source.length === 1) {
+        source = source[0];
+      }
+      if (!Array.isArray(source)) {
+        if (source.meta?.inEditorIs === "Doc") {
+          id = source.id;
+        } else {
+          source = [source];
+        }
+      }
     }
     const _doc = new Doc(id);
     state.value = "loading";
@@ -2576,11 +2495,7 @@ const _4_4_doc = defineMixin((editor, options) => {
     return _doc;
   };
   const loadDoc = async (source) => {
-    let loaded = await load(source);
-    if (loaded.meta?.inEditorIs !== "Doc") {
-      loaded = { id: idGenerator(), children: [loaded] };
-    }
-    const _doc = await setDoc(loaded);
+    const _doc = await setDoc(await load(source));
     emit("loadDoc", _doc, source);
     return _doc;
   };
@@ -2726,9 +2641,7 @@ const mixins = [
   _1_upload,
   _2_box,
   _2_export,
-  _2_export_json,
   _2_load,
-  _2_loader_json,
   _3_view,
   _4_0_text,
   _4_1_lock,
@@ -4054,7 +3967,12 @@ const _clipboard = definePlugin((editor, options) => {
   const useClipboard = options.clipboard !== false && SUPPORTS_CLIPBOARD;
   const copy = async (data) => {
     if (data === void 0) {
-      data = selection.value.length === 1 ? [selection.value[0].toJSON()] : selection.value.map((v) => v.toJSON());
+      data = selection.value.map((v) => {
+        const json = v.toJSON();
+        delete json.style.left;
+        delete json.style.top;
+        return json;
+      });
     }
     if (useClipboard) {
       if (Array.isArray(data)) {
@@ -4077,46 +3995,69 @@ const _clipboard = definePlugin((editor, options) => {
       }
     }
   };
-  async function cut() {
+  const cut = async () => {
     await copy();
     exec("delete");
-  }
-  let lock = false;
-  function pasteLock() {
-    if (!lock) {
-      lock = true;
-    }
+  };
+  let locked = false;
+  function getPasteLock() {
     return {
-      lock,
-      unlock: () => lock = false
+      locked,
+      lock: () => locked = true,
+      unlock: () => locked = false
     };
   }
-  async function onPaste(source) {
-    const items = source ?? await navigator.clipboard.read();
+  async function _paste(items) {
     const elements = [];
     for (const item of items) {
       for (const type of item.types) {
         const blob = await item.getType(type);
         if (await canLoad(blob)) {
-          elements.push(await load(blob));
+          elements.push(...await load(blob));
         } else {
           console.warn(`Unhandled clipboard ${blob.type}`, await blob.text());
         }
       }
     }
-    addElement(elements, {
-      inPointerPosition: true,
-      active: true,
-      regenId: true
-    });
+    if (elements.length) {
+      addElement(elements, {
+        inPointerPosition: true,
+        active: true,
+        regenId: true
+      });
+    }
   }
-  async function paste() {
-    await new Promise((r) => setTimeout(r, 0));
-    const { lock: lock2, unlock } = pasteLock();
-    if (!lock2) {
-      try {
+  const paste = async (source) => {
+    if (source) {
+      const { unlock, lock } = getPasteLock();
+      lock();
+      let items = [];
+      if (source instanceof DataTransfer) {
+        for (const item of source.items) {
+          switch (item.kind) {
+            case "file": {
+              const file = item.getAsFile();
+              if (file) {
+                items.push(new ClipboardItem({ [file.type]: file }));
+              }
+              break;
+            }
+          }
+        }
+      } else {
+        items = source;
+      }
+      if (items.length) {
+        await _paste(items);
+      } else {
+        unlock();
+      }
+    } else {
+      await new Promise((r) => setTimeout(r, 100));
+      const { locked: locked2, unlock } = getPasteLock();
+      if (!locked2) {
         if (useClipboard) {
-          await onPaste();
+          await _paste(await navigator.clipboard.read());
         } else if (copiedData.value) {
           if (Array.isArray(copiedData.value)) {
             addElement(copiedData.value?.map((el) => cloneDeep(el)) ?? [], {
@@ -4126,13 +4067,11 @@ const _clipboard = definePlugin((editor, options) => {
             });
           }
         }
-      } finally {
+      } else {
         unlock();
       }
-    } else {
-      unlock();
     }
-  }
+  };
   async function duplicate() {
     await copy();
     await paste();
@@ -4156,31 +4095,16 @@ const _clipboard = definePlugin((editor, options) => {
     ],
     setup: () => {
       if (useClipboard) {
-        window.addEventListener("paste", async (e) => {
-          const items = e.clipboardData?.items;
-          if (items?.length) {
-            pasteLock();
-            const clipboardItems = [];
-            for (const item of items) {
-              switch (item.kind) {
-                case "file": {
-                  const file = item.getAsFile();
-                  if (file) {
-                    clipboardItems.push(
-                      new ClipboardItem({
-                        [file.type]: file
-                      })
-                    );
-                  }
-                  break;
-                }
-              }
-            }
-            await onPaste(
-              clipboardItems.length ? clipboardItems : void 0
-            );
+        async function onPaste(e) {
+          if (isInputEvent(e)) {
+            return;
           }
-        });
+          if (e.clipboardData) {
+            await paste(e.clipboardData);
+          }
+        }
+        window.addEventListener("paste", onPaste);
+        onBeforeUnmount(() => window.removeEventListener("paste", onPaste));
       }
     }
   };
@@ -4609,7 +4533,7 @@ const _import = definePlugin((editor) => {
   } = editor;
   const _import2 = async (options = {}) => {
     const files = await openFileDialog({ multiple: true });
-    return addElement(await Promise.all(files.map((file) => load(file))), {
+    return addElement((await Promise.all(files.map((file) => load(file)))).flat(), {
       ...options,
       sizeToFit: true,
       positionToFit: true
@@ -4622,6 +4546,125 @@ const _import = definePlugin((editor) => {
     ],
     hotkeys: [
       { command: "import", key: "CmdOrCtrl+i" }
+    ],
+    setup: () => {
+      const {
+        drawboardPointer,
+        drawboardDom,
+        exec
+      } = editor;
+      function onDragover(e) {
+        e.preventDefault();
+        drawboardPointer.value = { x: e.clientX, y: e.clientY };
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = "copy";
+        }
+      }
+      async function onDrop(e) {
+        e.preventDefault();
+        if (e.dataTransfer) {
+          await exec("paste", e.dataTransfer);
+        }
+      }
+      onMounted(() => {
+        drawboardDom.value?.addEventListener("dragover", onDragover);
+        drawboardDom.value?.addEventListener("drop", onDrop);
+      });
+      onBeforeUnmount(() => {
+        drawboardDom.value?.removeEventListener("dragover", onDragover);
+        drawboardDom.value?.removeEventListener("drop", onDrop);
+      });
+    }
+  };
+});
+const _json = definePlugin((editor) => {
+  const {
+    getAabb,
+    selection,
+    root,
+    getTimeRange
+  } = editor;
+  const RE = /\.json$/i;
+  return {
+    name: "mce:json",
+    loaders: [
+      {
+        name: "json",
+        accept: ".json",
+        test: (source) => {
+          if (source instanceof Blob) {
+            if (source.type.startsWith("application/json")) {
+              return true;
+            }
+          }
+          if (source instanceof File) {
+            if (RE.test(source.name)) {
+              return true;
+            }
+          }
+          return false;
+        },
+        load: async (source) => {
+          const json = JSON.parse(await source.text());
+          if ("version" in json && "elements" in json) {
+            console.log(json);
+          }
+          return json;
+        }
+      }
+    ],
+    exporters: [
+      {
+        name: "json",
+        handle: (options) => {
+          const {
+            selected = false,
+            scale = 1
+          } = options;
+          let id = idGenerator();
+          let elements = [];
+          if (Array.isArray(selected)) {
+            elements = selected;
+          } else {
+            if (selected === true) {
+              elements = selection.value;
+            }
+            if (elements.length === 0 && root.value) {
+              if (root.value.meta.id) {
+                id = root.value.meta.id;
+              }
+              elements = root.value.children;
+            }
+          }
+          const box = getAabb(elements, "parent");
+          return {
+            id,
+            style: {
+              width: box.width * scale,
+              height: box.height * scale,
+              transformOrigin: "left top",
+              transform: `scale(${scale})`
+            },
+            children: elements.map((el) => {
+              const json = el.toJSON();
+              if (box.left) {
+                json.style.left = (json.style.left ?? 0) - box.left;
+              }
+              if (box.top) {
+                json.style.top = (json.style.top ?? 0) - box.top;
+              }
+              json.meta ??= {};
+              json.meta.inPptIs = "Slide";
+              return json;
+            }),
+            meta: {
+              inPptIs: "Pptx",
+              inCanvasIs: "Element2D",
+              ...getTimeRange(elements)
+            }
+          };
+        }
+      }
     ]
   };
 });
@@ -4778,25 +4821,26 @@ const _menu = definePlugin((editor, options) => {
       { key: "open" },
       { type: "divider" },
       { key: "import" },
-      exportMenu.value
-    ]
+      exportMenu.value.children.length && exportMenu.value
+    ].filter(Boolean)
   }));
   const historyMenus = computed(() => [
     { key: "undo", disabled: !canUndo.value },
     { key: "redo", disabled: !canRedo.value }
   ]);
+  const copyAsMenu = computed(() => ({
+    key: "copyAs",
+    disabled: !hasSelected.value,
+    children: [...exporters.value.values()].filter((v) => Boolean(v.copyAs)).map((v) => ({ key: `copyAs:${v.name}` }))
+  }));
   const editMenus1 = computed(() => [
     { key: "copy", disabled: !hasSelected.value },
-    {
-      key: "copyAs",
-      disabled: !hasSelected.value,
-      children: [...exporters.value.values()].filter((v) => Boolean(v.copyAs)).map((v) => ({ key: `copyAs:${v.name}` }))
-    },
+    copyAsMenu.value.children.length && copyAsMenu.value,
     { key: "cut", disabled: !hasSelected.value },
     { key: "paste" },
     { key: "duplicate", disabled: !hasSelected.value },
     { key: "delete", disabled: !hasSelected.value }
-  ]);
+  ].filter(Boolean));
   const selectMenu = computed(() => ({
     key: "select",
     children: [
@@ -4988,10 +5032,7 @@ const _new = definePlugin((editor) => {
     setDoc
   } = editor;
   function _new2() {
-    setDoc({
-      id: idGenerator(),
-      children: []
-    });
+    setDoc([]);
   }
   return {
     name: "mce:new",
@@ -5379,6 +5420,7 @@ const plugins = [
   _html,
   _image,
   _import,
+  _json,
   _layerOrder,
   _layerPosition,
   _lock,
@@ -8872,6 +8914,7 @@ export {
   imageExts,
   imageMimeTypeExtMap,
   isClickInsideElement,
+  isInputEvent,
   isMac,
   isOverlappingAabb,
   isOverlappingObb,

package/dist/mixins/0.config/base.d.ts

@@ -3,13 +3,11 @@ declare global {
         interface Options extends Partial<Config> {
         }
         type Theme = 'system' | 'light' | 'dark';
-        type Language = string;
         type ViewMode = 'frame' | 'edgeless';
         type TypographyStrategy = 'autoHeight' | 'autoWidth' | 'fixedWidthHeight' | 'autoFontSize';
         type HandleShape = 'rect' | 'circle';
         interface Config {
             theme: Theme;
-            language: Language;
             viewMode: ViewMode;
             checkerboard: boolean;
             pixelGrid: boolean;

package/dist/mixins/2.load.d.ts

@@ -13,7 +13,7 @@ declare global {
             registerLoader: (value: Loader | Loader[]) => void;
             unregisterLoader: (name: string) => void;
             canLoad: (source: any) => Promise<boolean>;
-            load: <T = NormalizedElement>(source: any) => Promise<T>;
+            load: <T = NormalizedElement>(source: any) => Promise<T[]>;
             openFileDialog: (options?: {
                 multiple?: boolean;
             }) => Promise<File[]>;

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

@@ -1,10 +1,10 @@
-import type { Document } from 'modern-idoc';
+import type { Document, Element } from 'modern-idoc';
 import { Doc } from '../models';
 declare global {
     namespace Mce {
         interface Editor {
             getDoc: () => JsonData;
-            setDoc: (doc: Document | string) => Promise<Doc>;
+            setDoc: (doc: Document | Element[] | string) => Promise<Doc>;
             loadDoc: (source: any) => Promise<Doc>;
             clearDoc: () => void;
         }

package/dist/plugins/clipboard.d.ts

@@ -7,10 +7,11 @@ declare global {
             paste: [event: KeyboardEvent];
             duplicate: [event: KeyboardEvent];
         }
+        type PasteSource = DataTransfer | ClipboardItem[];
         interface Commands {
             copy: (data?: any) => Promise<void>;
             cut: () => Promise<void>;
-            paste: () => Promise<void>;
+            paste: (source?: PasteSource) => Promise<void>;
             duplicate: () => Promise<void>;
         }
         interface Editor {

package/dist/{mixins/2.export → plugins}/json.d.ts

@@ -22,5 +22,5 @@ declare global {
         }
     }
 }
-declare const _default: import("../..").Mixin;
+declare const _default: import("..").Plugin;
 export default _default;

package/dist/typed-plugins.d.ts

@@ -15,9 +15,7 @@ import './mixins/1.timeline'
 import './mixins/1.upload'
 import './mixins/2.box'
 import './mixins/2.export'
-import './mixins/2.export/json'
 import './mixins/2.load'
-import './mixins/2.loader/json'
 import './mixins/3.view'
 import './mixins/4.0.text'
 import './mixins/4.1.lock'
@@ -37,6 +35,7 @@ import './plugins/history'
 import './plugins/html'
 import './plugins/image'
 import './plugins/import'
+import './plugins/json'
 import './plugins/layerOrder'
 import './plugins/layerPosition'
 import './plugins/lock'

package/dist/utils/helper.d.ts

@@ -10,3 +10,4 @@ export declare function convertToUnit(str: number, unit?: string): string;
 export declare function convertToUnit(str: string | number | null | undefined, unit?: string): string | undefined;
 export declare function templateRef(): TemplateRef;
 export declare function findChildrenWithProvide(key: InjectionKey<any> | symbol, vnode?: VNodeChild): ComponentInternalInstance[];
+export declare function isInputEvent(event?: Event): boolean;

package/package.json

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

package/dist/mixins/2.loader/json.d.ts

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