mce 0.15.19 → 0.15.20

package/dist/components/Selector.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
     resizeStrategy?: 'lockAspectRatio' | 'lockAspectRatioDiagonal';
     selectedArea?: Aabb2D;
 };
-declare var __VLS_13: {
+declare var __VLS_14: {
     box: {
         left: number;
         top: number;
@@ -13,7 +13,7 @@ declare var __VLS_13: {
         rotate: number;
         borderRadius: number;
     };
-}, __VLS_15: {
+}, __VLS_16: {
     box: {
         left: number;
         top: number;
@@ -24,9 +24,9 @@ declare var __VLS_13: {
     };
 };
 type __VLS_Slots = {} & {
-    transformable?: (props: typeof __VLS_13) => any;
+    transformable?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     transformable: Readonly<import("vue").ShallowRef<({

package/dist/index.js

@@ -3333,7 +3333,8 @@ const _4_2_frame = defineMixin((editor) => {
     }
     emit("setCurrentFrame", index, oldIndex);
   }
-  function handleElementInsideFrame(element) {
+  function handleElementInsideFrame(element, context) {
+    const pointer = context?.pointer;
     const frame1 = element.findAncestor((node) => isTopLevelFrame(node));
     const aabb1 = element.getGlobalAabb();
     const area1 = aabb1.getArea();
@@ -3344,10 +3345,14 @@ const _4_2_frame = defineMixin((editor) => {
         continue;
       }
       const aabb2 = frame2.getGlobalAabb();
-      if (aabb1 && aabb2) {
-        if (aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
+      if (aabb2) {
+        if (pointer && aabb2.containsPoint(pointer) || aabb1 && aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
           if (!frame2.equal(frame1)) {
-            frame2.appendChild(element);
+            let index = frame2.children.length;
+            if (frame2.equal(context?.parent)) {
+              index = context.index;
+            }
+            frame2.moveChild(element, index);
             element.style.left = aabb1.x - aabb2.x;
             element.style.top = aabb1.y - aabb2.y;
           }
@@ -3357,7 +3362,7 @@ const _4_2_frame = defineMixin((editor) => {
       }
     }
     if (flag && frame1) {
-      root.value.moveChild(element, 0);
+      root.value.moveChild(element, root.value.children.length);
       element.style.left = aabb1.x;
       element.style.top = aabb1.y;
     }
@@ -3833,7 +3838,12 @@ const _snapshot = defineMixin((editor) => {
   } = editor;
   registerConfig("frameScreenshot", false);
   async function snapshot() {
-    frameThumbs.value.length = frames.value.length;
+    frameThumbs.value = frames.value.map(() => ({
+      instanceId: -1,
+      width: 0,
+      height: 0,
+      url: ""
+    }));
     for (let i = 0; i < frames.value.length; i++) {
       await captureFrameScreenshot(i);
     }
@@ -14414,12 +14424,15 @@ const _visibility = definePlugin((editor) => {
 });
 const _zoom = definePlugin((editor) => {
   const {
+    registerConfig,
     camera,
     drawboardAabb,
     zoomTo,
     elementSelection,
-    exec
+    exec,
+    config
   } = editor;
+  registerConfig("zoomToFit", "contain");
   return {
     name: "mce:zoom",
     commands: [
@@ -14427,7 +14440,7 @@ const _zoom = definePlugin((editor) => {
       { command: "zoomOut", handle: () => camera.value.addZoom(-0.25) },
       { command: "zoomTo100", handle: () => camera.value.setZoom(1) },
       { command: "zoomToCover", handle: () => zoomTo("root", { mode: "cover" }) },
-      { command: "zoomToFit", handle: () => zoomTo("root", { mode: "contain" }) },
+      { command: "zoomToFit", handle: () => zoomTo("root", { mode: config.value.zoomToFit }) },
       { command: "zoomToSelection", handle: (options) => zoomTo("selection", options) }
     ],
     hotkeys: [
@@ -14450,9 +14463,9 @@ const _zoom = definePlugin((editor) => {
     setup: () => {
       const {
         drawboardDom,
-        config
+        config: config2
       } = editor;
-      watch(() => config.value.viewMode, () => exec("zoomToFit"));
+      watch(() => config2.value.viewMode, () => exec("zoomToFit"));
       useResizeObserver$1(drawboardDom, (entries) => {
         const { left: _left, top: _top, width, height } = entries[0].contentRect;
         const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
@@ -15531,9 +15544,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       config,
       snapThreshold,
       getSnapPoints,
-      handleElementInsideFrame
+      handleElementInsideFrame,
+      getGlobalPointer
     } = useEditor();
     const transformable = useTemplateRef("transformableTpl");
+    const startContext = ref({});
     onBeforeMount(() => {
       registerCommand({ command: "startTransform", handle: (e) => Boolean(transformable.value?.start(e)) });
     });
@@ -15666,7 +15681,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             }
             return false;
           });
-          handleElementInsideFrame(element);
+          handleElementInsideFrame(
+            element,
+            {
+              ...startContext.value[element.instanceId],
+              pointer: getGlobalPointer()
+            }
+          );
         });
       }
     });
@@ -15689,6 +15710,27 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       const element = elementSelection.value[0];
       return elementSelection.value.length === 1 && !isLock(element) && element.foreground.isValid();
     });
+    function onStart() {
+      const ctx = {};
+      elementSelection.value.forEach((el) => {
+        ctx[el.instanceId] = {
+          parent: el.getParent(),
+          index: el.getIndex()
+        };
+      });
+      startContext.value = ctx;
+    }
+    function onMove() {
+      if (!state.value) {
+        state.value = "transforming";
+      }
+    }
+    function onEnd() {
+      if (state.value === "transforming") {
+        state.value = void 0;
+      }
+      startContext.value = {};
+    }
     function tipFormat() {
       const obb = elementSelection.value.length === 1 ? elementSelection.value[0].style : selectionObb.value;
       return `${Number(obb.width.toFixed(2))} × ${Number(obb.height.toFixed(2))}`;
@@ -15740,8 +15782,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "mce-selector__transform",
           "border-style": unref(elementSelection).length > 1 ? "dashed" : "solid",
           "tip-format": tipFormat,
-          onMove: _cache[1] || (_cache[1] = () => !unref(state) && (state.value = "transforming")),
-          onEnd: _cache[2] || (_cache[2] = () => unref(state) === "transforming" && (state.value = void 0))
+          onStart,
+          onMove,
+          onEnd
         }, createSlots({ _: 2 }, [
           _ctx.$slots.transformable ? {
             name: "svg",

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

@@ -3,7 +3,7 @@ declare global {
     namespace Mce {
         interface Editor {
             setCurrentFrame: (index?: number) => void;
-            handleElementInsideFrame: (element: Element2D) => void;
+            handleElementInsideFrame: (element: Element2D, context?: Record<string, any>) => void;
         }
         interface Events {
             setCurrentFrame: [index: number, oldIndex: number];

package/dist/mixins/zoom.d.ts

@@ -2,8 +2,9 @@ import type { Element2D } from 'modern-canvas';
 declare global {
     namespace Mce {
         type ZoomTarget = 'root' | 'selection' | Element2D[] | number;
+        type ZoomToMode = 'contain' | 'cover';
         interface ZoomToOptions {
-            mode?: 'contain' | 'cover';
+            mode?: ZoomToMode;
             duration?: number;
             behavior?: 'smooth' | 'instant';
         }

package/dist/plugins/zoom.d.ts

@@ -1,5 +1,8 @@
 declare global {
     namespace Mce {
+        interface Config {
+            zoomToFit: ZoomToMode;
+        }
         interface Commands {
             zoomIn: () => void;
             zoomOut: () => void;

package/package.json

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