mce 0.11.3 → 0.11.4

package/dist/index.js

@@ -1873,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
@@ -2012,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,
@@ -2734,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,
@@ -4672,6 +4577,97 @@ const _import = definePlugin((editor) => {
     }
   };
 });
+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)
+            }
+          };
+        }
+      }
+    ]
+  };
+});
 const _layerOrder = definePlugin((editor) => {
   const {
     selection
@@ -4825,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: [
@@ -5423,6 +5420,7 @@ const plugins = [
   _html,
   _image,
   _import,
+  _json,
   _layerOrder,
   _layerPosition,
   _lock,

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.11.3",
+  "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;