mce 0.12.0 → 0.12.1

package/dist/index.js

@@ -2187,25 +2187,20 @@ const _4_2_element = defineMixin((editor) => {
     getAncestorFrame,
     getAabb,
     getGlobalPointer,
-    selection
+    selection,
+    getScreenCenterOffset,
+    camera,
+    drawboardAabb
   } = editor;
   function addElement(value, options = {}) {
     log("addElement", value, options);
     let {
       frame,
-      positionToFit,
       sizeToFit,
       position,
-      inPointerPosition,
       active,
       regenId
     } = options;
-    if (!position && inPointerPosition) {
-      position = getGlobalPointer();
-    }
-    if (position) {
-      positionToFit = false;
-    }
     if (!frame) {
       if (config.value.viewMode === "frame") {
         frame = currentFrame.value;
@@ -2220,8 +2215,28 @@ const _4_2_element = defineMixin((editor) => {
         }
       }
     }
-    let top = rootAabb.value.top;
-    const left = rootAabb.value.left + rootAabb.value.width + config.value.frameGap;
+    let initPos;
+    switch (position) {
+      case "screenCenter": {
+        const screenCenterOffset = getScreenCenterOffset();
+        const { zoom, position: position2 } = camera.value;
+        const centerOffset = {
+          x: position2.x + screenCenterOffset.left + (drawboardAabb.value.width - screenCenterOffset.left - screenCenterOffset.right) / 2,
+          y: position2.y + screenCenterOffset.top + (drawboardAabb.value.height - screenCenterOffset.top - screenCenterOffset.bottom) / 2
+        };
+        initPos = {
+          x: centerOffset.x * zoom.x,
+          y: centerOffset.y * zoom.y
+        };
+        break;
+      }
+      case "fit":
+        initPos = {
+          x: rootAabb.value.left + rootAabb.value.width + config.value.frameGap,
+          y: rootAabb.value.top
+        };
+        break;
+    }
     const isArray = Array.isArray(value);
     let offsetX = 0;
     const elements = doc.value.transact(() => {
@@ -2250,15 +2265,15 @@ const _4_2_element = defineMixin((editor) => {
               }
             );
           }
-          if (positionToFit) {
+          if (position === "fit") {
             el.style.left = Math.round(width - el.style.width) / 2;
             el.style.top = Math.round(height - el.style.height) / 2;
           }
         } else {
-          if (positionToFit) {
-            el.style.top = Math.round(top);
-            el.style.left = Math.round(left);
-            top += el.style.height + config.value.frameGap;
+          if (initPos) {
+            el.style.top = Math.round(initPos.x);
+            el.style.left = Math.round(initPos.y);
+            initPos.x += el.style.height + config.value.frameGap;
           }
         }
         el.style.left += offsetX;
@@ -2266,10 +2281,11 @@ const _4_2_element = defineMixin((editor) => {
         return el;
       });
       const aabb = getAabb(elements2);
-      if (position) {
+      if (position === "pointer") {
+        const pointer = getGlobalPointer();
         const diff = {
-          x: Math.round(position.x - aabb.left),
-          y: Math.round(position.y - aabb.top)
+          x: Math.round(pointer.x - aabb.left),
+          y: Math.round(pointer.y - aabb.top)
         };
         elements2.forEach((el) => {
           el.style.left += diff.x;
@@ -2574,8 +2590,8 @@ const _scroll$1 = defineMixin((editor) => {
       }
       position = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
       offset2.x -= screenCenterOffset.left;
-      offset2.y -= screenCenterOffset.top;
       offset2.x -= (drawboardAabb.value.width - screenCenterOffset.left - screenCenterOffset.right) / 2;
+      offset2.y -= screenCenterOffset.top;
       offset2.y -= (drawboardAabb.value.height - screenCenterOffset.top - screenCenterOffset.bottom) / 2;
     }
     position.x *= _camera.zoom.x;
@@ -4233,7 +4249,7 @@ const _clipboard = definePlugin((editor, options) => {
     }
     if (elements.length) {
       addElement(elements, {
-        inPointerPosition: true,
+        position: "pointer",
         active: true,
         regenId: true
       });
@@ -4254,6 +4270,17 @@ const _clipboard = definePlugin((editor, options) => {
               }
               break;
             }
+            case "string":
+              switch (item.type) {
+                case "application/json": {
+                  const json = await new Promise((r) => item.getAsString(r));
+                  const blob = new Blob([json], { type: item.type });
+                  const file = new File([blob], "data.json", { type: item.type });
+                  items.push(new ClipboardItem({ [item.type]: file }));
+                  break;
+                }
+              }
+              break;
           }
         }
       } else {
@@ -4273,7 +4300,7 @@ const _clipboard = definePlugin((editor, options) => {
         } else if (copiedData.value) {
           if (Array.isArray(copiedData.value)) {
             addElement(copiedData.value?.map((el) => cloneDeep(el)) ?? [], {
-              inPointerPosition: true,
+              position: "pointer",
               active: true,
               regenId: true
             });
@@ -4669,7 +4696,7 @@ const _image = definePlugin((editor) => {
   const insertImage = async (url, options) => {
     return addElement(await createImageElement(url), {
       sizeToFit: true,
-      positionToFit: true,
+      position: "fit",
       ...options
     });
   };
@@ -4748,7 +4775,7 @@ const _import = definePlugin((editor) => {
     return addElement((await Promise.all(files.map((file) => load(file)))).flat(), {
       ...options,
       sizeToFit: true,
-      positionToFit: true
+      position: "fit"
     });
   };
   return {
@@ -5384,7 +5411,7 @@ const _text = definePlugin((editor) => {
     const { style, ...restOptions } = options;
     return addElement(createTextElement(content, style), {
       sizeToFit: true,
-      positionToFit: true,
+      position: "fit",
       ...restOptions
     });
   };

package/dist/mixins/4.2.element.d.ts

@@ -5,10 +5,8 @@ declare global {
     namespace Mce {
         interface AddElementOptions {
             frame?: Element2D;
-            positionToFit?: boolean;
             sizeToFit?: boolean;
-            position?: Vector2Data;
-            inPointerPosition?: boolean;
+            position?: Vector2Data | 'fit' | 'screenCenter' | 'pointer';
             active?: boolean;
             regenId?: boolean;
         }

package/package.json

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