mce 0.15.30 → 0.15.31

package/dist/index.js

@@ -3450,6 +3450,7 @@ const _4_1_text = defineMixin((editor) => {
 const _4_2_frame = defineMixin((editor) => {
   const {
     frames,
+    isElement,
     isTopFrame,
     selection,
     getAncestorFrame
@@ -3458,7 +3459,7 @@ const _4_2_frame = defineMixin((editor) => {
     let current;
     const node = selection.value[0];
     if (node) {
-      current = isTopFrame(node) ? node : getAncestorFrame(node, true);
+      current = isElement(node) && isTopFrame(node) ? node : getAncestorFrame(node, true);
     }
     const last = frames.value.length - 1;
     let index = frames.value.findIndex((node2) => node2.equal(current));
@@ -4300,19 +4301,24 @@ const _arrange = definePlugin((editor) => {
     });
   }
   function align(direction) {
+    const len = elementSelection.value.length;
+    if (!len) {
+      return;
+    }
     let targetAabb;
-    if (elementSelection.value.length > 1) {
-      targetAabb = getAabb(elementSelection.value);
-    } else {
+    if (len === 1) {
       const parent = elementSelection.value[0]?.parent;
       if (parent && isElement(parent)) {
         targetAabb = parent.getGlobalAabb();
       }
+    } else {
+      targetAabb = getAabb(elementSelection.value);
     }
     if (!targetAabb) {
       return;
     }
     elementSelection.value.forEach((el) => {
+      const parentAabb = el.getParent()?.getGlobalAabb?.() ?? new Aabb2D();
       const hw = el.size.x / 2;
       const hh = el.size.y / 2;
       const cos = Math.cos(el.rotation);
@@ -4321,22 +4327,22 @@ const _arrange = definePlugin((editor) => {
       const dy = Math.abs(hw * sin) + Math.abs(hh * cos);
       switch (direction) {
         case "left":
-          el.style.left = targetAabb.left + dx - hw;
+          el.style.left = targetAabb.left - parentAabb.left + dx - hw;
           break;
         case "horizontal-center":
-          el.style.left = targetAabb.left + targetAabb.width / 2 - hw;
+          el.style.left = targetAabb.left - parentAabb.left + targetAabb.width / 2 - hw;
           break;
         case "right":
-          el.style.left = targetAabb.left + targetAabb.width - dx - hw;
+          el.style.left = targetAabb.left - parentAabb.left + targetAabb.width - dx - hw;
           break;
         case "top":
-          el.style.top = targetAabb.top + dy - hh;
+          el.style.top = targetAabb.top - parentAabb.top + dy - hh;
           break;
         case "vertical-center":
-          el.style.top = targetAabb.top + targetAabb.height / 2 - hh;
+          el.style.top = targetAabb.top - parentAabb.top + targetAabb.height / 2 - hh;
           break;
         case "bottom":
-          el.style.top = targetAabb.top + targetAabb.height - dy - hh;
+          el.style.top = targetAabb.top - parentAabb.top + targetAabb.height - dy - hh;
           break;
       }
     });
@@ -4390,17 +4396,16 @@ const _autoNest = definePlugin((editor) => {
     exec,
     root
   } = editor;
-  let startFrame;
   let startContext = {};
-  function nestIntoFrame(element, options) {
+  function nestIntoFrame(el, options) {
     const pointer = options?.pointer;
-    const frame1 = element.findAncestor((node) => isTopFrame(node));
-    const aabb1 = element.getGlobalAabb();
+    const frame1 = el.findAncestor((node) => isTopFrame(node));
+    const aabb1 = el.getGlobalAabb();
     const area1 = aabb1.getArea();
     let flag = true;
     for (let i = 0, len = frames.value.length; i < len; i++) {
       const frame2 = frames.value[i];
-      if (frame2.equal(element)) {
+      if (frame2.equal(el)) {
         continue;
       }
       const aabb2 = frame2.getGlobalAabb();
@@ -4410,10 +4415,10 @@ const _autoNest = definePlugin((editor) => {
           if (frame2.equal(options?.parent)) {
             index = options.index;
           }
-          frame2.moveChild(element, index);
-          element.style.left = aabb1.x - aabb2.x;
-          element.style.top = aabb1.y - aabb2.y;
-          element.updateGlobalTransform();
+          frame2.moveChild(el, index);
+          el.style.left = aabb1.x - aabb2.x;
+          el.style.top = aabb1.y - aabb2.y;
+          el.updateGlobalTransform();
           exec("layerScrollIntoView");
         }
         flag = false;
@@ -4425,10 +4430,10 @@ const _autoNest = definePlugin((editor) => {
       if (root.value.equal(options?.parent)) {
         index = options.index;
       }
-      root.value.moveChild(element, index);
-      element.style.left = aabb1.x;
-      element.style.top = aabb1.y;
-      element.updateGlobalTransform();
+      root.value.moveChild(el, index);
+      el.style.left = aabb1.x;
+      el.style.top = aabb1.y;
+      el.updateGlobalTransform();
       exec("layerScrollIntoView");
     }
   }
@@ -4438,20 +4443,10 @@ const _autoNest = definePlugin((editor) => {
       { command: "nestIntoFrame", handle: nestIntoFrame }
     ],
     events: {
-      selectionTransformStart: ({ elements }) => {
-        const pointer = getGlobalPointer();
-        startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
-        const ctx = {};
-        elements.forEach((el) => {
-          ctx[el.instanceId] = {
-            parent: el.getParent(),
-            index: el.getIndex()
-          };
-        });
-        startContext = ctx;
-      },
-      selectionTransforming: ({ handle, startEvent, elements }) => {
+      selectionTransformStart: ({ handle, startEvent, elements }) => {
         if (handle === "move" && !startEvent?.__FROM__) {
+          const pointer = getGlobalPointer();
+          const startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
           const idSet = /* @__PURE__ */ new Set();
           elements.forEach((el) => {
             const frame = isTopFrame(el) ? el : el.findAncestor(isTopFrame);
@@ -4464,11 +4459,25 @@ const _autoNest = definePlugin((editor) => {
             }
           });
           if (idSet.size === 1) {
-            elements.forEach((element) => {
+            const ctx = {};
+            elements.forEach((el) => {
+              ctx[el.instanceId] = {
+                parent: el.getParent(),
+                index: el.getIndex()
+              };
+            });
+            startContext = ctx;
+          }
+        }
+      },
+      selectionTransforming: ({ handle, startEvent, elements }) => {
+        if (handle === "move" && !startEvent?.__FROM__) {
+          if (Object.keys(startContext).length > 0) {
+            elements.forEach((el) => {
               nestIntoFrame(
-                element,
+                el,
                 {
-                  ...startContext[element.instanceId],
+                  ...startContext[el.instanceId],
                   pointer: getGlobalPointer()
                 }
               );
@@ -4478,7 +4487,6 @@ const _autoNest = definePlugin((editor) => {
       },
       selectionTransformEnd: () => {
         startContext = {};
-        startFrame = void 0;
       }
     }
   };
@@ -16242,16 +16250,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           if (handle.startsWith("resize")) {
             const selectionAabb2 = getAabb(els);
             els.forEach((el) => {
-              const pAabb = el.getParent()?.getGlobalAabb?.();
+              const parentAabb = el.getParent()?.getGlobalAabb?.() ?? new Aabb2D();
               const { x, y } = startContext.offsetMap[el.instanceId];
-              let left = selectionAabb2.left + selectionAabb2.width * x;
-              let top = selectionAabb2.top + selectionAabb2.height * y;
-              if (pAabb) {
-                left -= pAabb.left;
-                top -= pAabb.top;
-              }
-              el.style.left = left;
-              el.style.top = top;
+              el.style.left = selectionAabb2.left - parentAabb.left + selectionAabb2.width * x;
+              el.style.top = selectionAabb2.top - parentAabb.left + selectionAabb2.height * y;
             });
           }
         }

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

@@ -46,10 +46,10 @@ declare global {
             parseAnchor: (anchor: Anchor, isRtl?: boolean) => ParsedAnchor;
             isNode: (value: any) => value is Node;
             isRoot: (value: any) => value is Node;
-            inEditorIs: (value: Node, inEditorIs?: EditorNodeType) => boolean;
+            inEditorIs: (node: Node, inEditorIs?: EditorNodeType) => boolean;
             isElement: (value: any) => value is Element2D;
-            isFrame: (value: any) => value is Element2D;
-            isTopFrame: (value: any) => value is Element2D;
+            isFrame: (node: Node) => boolean;
+            isTopFrame: (node: Node) => boolean;
             isVisible: (node: Node) => boolean;
             setVisible: (node: Node, visible: boolean) => void;
             isLock: (node: Node) => boolean;

package/package.json

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