mce 0.15.35 → 0.15.36

package/dist/index.css

@@ -804,20 +804,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
-.mce-smart-selection .mce-smart-handle--active > .mce-smart-handle__btn {
-  background: #FF24BD;
+  pointer-events: auto;
 }
 .mce-smart-selection .mce-smart-handle__btn {
-  pointer-events: auto;
-  width: 10px;
-  height: 10px;
+  width: 1px;
+  height: 1px;
   border-radius: 100%;
   border: 1px solid #FF24BD;
   outline: 1px solid #FFFFFF;
 }
 .mce-smart-selection .mce-smart-handle__btn:hover {
   background: #FF24BD;
+}
+.mce-smart-selection .mce-smart-handle__btn--active {
+  width: 10px;
+  height: 10px;
+}
+.mce-smart-selection .mce-smart-handle--active .mce-smart-handle__btn {
+  background: #FF24BD;
 }.progress-indicator[data-v-3b286483] {
   display: flex;
   align-items: center;

package/dist/index.js

@@ -1996,7 +1996,8 @@ const _2_box = defineMixin((editor) => {
     selection,
     getAncestorFrame,
     drawboardAabb,
-    screenControlsOffset
+    screenControlsOffset,
+    getGlobalPointer
   } = editor;
   function obbToFit(element) {
     const min = {
@@ -2208,6 +2209,7 @@ const _2_box = defineMixin((editor) => {
   const selectionAabbInDrawboard = computed(() => aabbToDrawboardAabb(selectionAabb.value));
   const selectionObb = computed(() => getObb(selection.value));
   const selectionObbInDrawboard = computed(() => obbToDrawboardObb(selectionObb.value));
+  const isPointerInSelection = computed(() => selectionAabb.value.contains(getGlobalPointer()));
   Object.assign(editor, {
     obbToFit,
     getObb,
@@ -2219,7 +2221,8 @@ const _2_box = defineMixin((editor) => {
     selectionAabb,
     selectionAabbInDrawboard,
     selectionObb,
-    selectionObbInDrawboard
+    selectionObbInDrawboard,
+    isPointerInSelection
   });
 });
 const _2_export = defineMixin((editor) => {
@@ -4291,7 +4294,7 @@ const _autoNest = definePlugin((editor) => {
     let flag = true;
     for (let i = 0, len = frames.value.length; i < len; i++) {
       const frame2 = frames.value[i];
-      if (frame2.equal(el)) {
+      if (options?.excluded.has(frame2.instanceId) || frame2.equal(el)) {
         continue;
       }
       const aabb2 = frame2.getGlobalAabb();
@@ -4359,12 +4362,14 @@ const _autoNest = definePlugin((editor) => {
       selectionTransform: ({ handle, startEvent, elements }) => {
         if (handle === "move" && !startEvent?.__FROM__) {
           if (Object.keys(startContext).length > 0) {
+            const excluded = new Set(elements.map((el) => el.instanceId));
             elements.forEach((el) => {
               nestIntoFrame(
                 el,
                 {
                   ...startContext[el.instanceId],
-                  pointer: getGlobalPointer()
+                  pointer: getGlobalPointer(),
+                  excluded
                 }
               );
             });
@@ -5624,6 +5629,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       getObb,
       camera
     } = useEditor();
+    watch(selection, () => hoverElement.value = void 0);
     const hoverElementObb = computed(() => getObb(hoverElement.value, "drawboard"));
     return (_ctx, _cache) => {
       return unref(hoverElement) && !unref(selection).some((node) => node.equal(unref(hoverElement))) ? (openBlock(), createElementBlock("div", {
@@ -14602,7 +14608,6 @@ const _smartGuides = definePlugin((editor) => {
     viewportAabb
   } = editor;
   const snapThreshold = computed(() => Math.max(1, 5 / camera.value.zoom.x));
-  const excluded = computed(() => new Set(elementSelection.value.map((el) => el.id)));
   const parnet = computed(() => elementSelection.value[0]?.parent ?? root.value);
   const parentBox = computed(() => createBox(parnet.value));
   function createBox(node) {
@@ -14720,8 +14725,9 @@ const _smartGuides = definePlugin((editor) => {
     const _linePairs = [];
     const box = createBox(selectionAabb.value);
     if (box) {
+      const excluded = new Set(elementSelection.value.map((el) => el.instanceId));
       const boxes = parnet.value.children.filter((node) => {
-        return !excluded.value.has(node.id) && isElement(node) && viewportAabb.value.overlap(node.getGlobalAabb());
+        return !excluded.has(node.instanceId) && isElement(node) && viewportAabb.value.overlap(node.getGlobalAabb());
       }).map((node) => createBox(node)).filter(Boolean);
       const { vLines, hLines } = boxes.reduce(
         (store, box2) => {
@@ -14987,7 +14993,7 @@ const _hoisted_1$b = {
   key: 0,
   class: "mce-smart-selection"
 };
-const _hoisted_2$6 = ["onClick"];
+const _hoisted_2$6 = ["onMousedown"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "SmartSelection",
   props: {
@@ -14998,16 +15004,19 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const currentElement = useModel(__props, "modelValue");
     const {
+      isPointerInSelection,
       elementSelection,
       getObb,
       getAabb,
       state,
       camera,
       resizeElement,
-      inEditorIs
+      inEditorIs,
+      getGlobalPointer
     } = useEditor();
     const info = ref({
       active: false,
+      direction: void 0,
       spacing: void 0,
       xItems: [],
       yItems: []
@@ -15018,6 +15027,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }
       const els = elementSelection.value;
       let active = false;
+      let direction;
       let spacing;
       let xItems = [];
       let yItems = [];
@@ -15044,6 +15054,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         }
         if (active) {
           yItems = sorted;
+          direction = "vertical";
         } else {
           active = true;
           prev = void 0;
@@ -15067,23 +15078,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           }
           if (active) {
             xItems = sorted2;
+            direction = "horizontal";
           }
         }
       }
       info.value = {
         active,
+        direction,
         spacing,
         xItems,
         yItems
       };
     }
     watch(() => elementSelection.value.map((el) => getAabb(el)), update);
-    watch(
-      state,
-      () => {
-        currentElement.value = void 0;
-      }
-    );
+    watch(elementSelection, () => currentElement.value = void 0);
     const handles = computed(() => {
       return elementSelection.value.map((el) => {
         return {
@@ -15156,6 +15164,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         });
       }
     });
+    function onMouseDown(item, downEvent) {
+      const el = item.el;
+      currentElement.value = el;
+      return;
+    }
     return (_ctx, _cache) => {
       return info.value.active ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(handles.value, (item, index) => {
@@ -15164,12 +15177,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["mce-smart-handle", {
               "mce-smart-handle--active": item.el.equal(currentElement.value)
             }]),
-            style: normalizeStyle$1(item.style)
+            style: normalizeStyle$1(item.style),
+            "data-pointerdown_to_drawboard": ""
           }, [
             createElementVNode("div", {
-              class: "mce-smart-handle__btn",
-              onClick: ($event) => currentElement.value = item.el
-            }, null, 8, _hoisted_2$6)
+              class: normalizeClass(["mce-smart-handle__btn", {
+                "mce-smart-handle__btn--active": unref(state) === "transforming" || unref(isPointerInSelection)
+              }]),
+              onMousedown: ($event) => onMouseDown(item)
+            }, null, 42, _hoisted_2$6)
           ], 6);
         }), 128)),
         transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$k, {
@@ -17237,9 +17253,17 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }),
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps))),
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(components), (item, key) => {
             return openBlock(), createElementBlock(Fragment, { key }, [
-              item.type === "panel" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              item.type === "overlay" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                unref(drawboardDom) ? (openBlock(), createBlock(Teleport, {
+                  key: 0,
+                  to: unref(drawboardDom)
+                }, [
+                  createVNode(RenderComponent, { item }, null, 8, ["item"])
+                ], 8, ["to"])) : createCommentVNode("", true)
+              ], 64)) : item.type === "panel" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 item.position === "float" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                   unref(config)[item.name] ? (openBlock(), createBlock(_sfc_main$6, {
                     key: 0,
@@ -17277,18 +17301,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     _: 2
                   }, 1032, ["modelValue", "onUpdate:modelValue", "position", "size", "order"])) : createCommentVNode("", true)
                 ], 64))
-              ], 64)) : item.type === "overlay" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                unref(drawboardDom) ? (openBlock(), createBlock(Teleport, {
-                  key: 0,
-                  to: unref(drawboardDom)
-                }, [
-                  createVNode(RenderComponent, { item }, null, 8, ["item"])
-                ], 8, ["to"])) : createCommentVNode("", true)
               ], 64)) : createCommentVNode("", true)
             ], 64);
           }), 128)),
-          createElementVNode("div", _hoisted_3, null, 512),
-          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))
+          createElementVNode("div", _hoisted_3, null, 512)
         ]),
         _: 3
       }, 8, ["class"]);

package/dist/mixins/2.box.d.ts

@@ -15,6 +15,7 @@ declare global {
             selectionAabbInDrawboard: ComputedRef<Aabb2D>;
             selectionObb: ComputedRef<Obb2D>;
             selectionObbInDrawboard: ComputedRef<Aabb2D>;
+            isPointerInSelection: ComputedRef<boolean>;
         }
     }
 }

package/dist/plugins/autoNest.d.ts

@@ -5,6 +5,7 @@ declare global {
             pointer: Vector2Like;
             parent: Element2D;
             index: number;
+            excluded: Set<number>;
         }
         interface Commands {
             nestIntoFrame: (element: Element2D, options?: NestIntoFrameOptions) => void;

package/package.json

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