mce 0.17.2 → 0.17.4

package/dist/index.js

@@ -1856,7 +1856,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 +3240,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 +3925,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 +4653,10 @@ const _hover = definePlugin(() => {
     ]
   };
 });
-const _html = definePlugin(() => {
+const _html = definePlugin((editor) => {
+  const {
+    load
+  } = editor;
   const RE = /\.html$/i;
   return {
     name: "mce:html",
@@ -4661,11 +4679,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 +4957,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 +5202,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 +5226,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,
@@ -17244,8 +17268,8 @@ const _zoom = definePlugin((editor) => {
   return {
     name: "mce:zoom",
     commands: [
-      { command: "zoomIn", handle: () => camera.value.addZoom(0.25) },
-      { command: "zoomOut", handle: () => camera.value.addZoom(-0.25) },
+      { command: "zoomIn", handle: () => camera.value.zoomIn() },
+      { command: "zoomOut", handle: () => camera.value.zoomOut() },
       { command: "zoomTo", handle: zoomTo },
       { command: "zoomTo100", handle: () => zoomTo(1) },
       { command: "zoomToFit", handle: () => zoomTo("root", { strategy: config.value.strategy }) },
@@ -17277,6 +17301,7 @@ const _zoom = definePlugin((editor) => {
 const plugins = [
   _arrange,
   _autoNest,
+  _clipboard,
   _doc,
   _edit,
   _formatPaint,

package/dist/plugins/clipboard.d.ts

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

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.2",
+  "version": "0.17.4",
   "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",
@@ -55,13 +55,13 @@
     "dist"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.1.10",
+    "@floating-ui/vue": "^1.1.11",
     "@vueuse/components": "^14.2.1",
     "@vueuse/core": "^14.2.1",
     "diff": "^8.0.3",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.23",
-    "modern-canvas": "^0.15.6",
+    "modern-canvas": "^0.15.8",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.21",
     "modern-text": "^1.10.15",