mce 0.16.6 → 0.16.7

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

@@ -98,8 +98,8 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             movable: boolean;
             rotatable: boolean;
             resizable: boolean;
-            tag: string | any;
             threshold: number;
+            tag: string | any;
             handleShape: "rect" | "circle";
             handles: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
@@ -128,8 +128,8 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         movable: boolean;
         rotatable: boolean;
         resizable: boolean;
-        tag: string | any;
         threshold: number;
+        tag: string | any;
         handleShape: "rect" | "circle";
         handles: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
     }> & Omit<Readonly<{
@@ -159,7 +159,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         onStart?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
         onEnd?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
         "onUpdate:modelValue"?: ((value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any) | undefined;
-    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "tag" | "threshold" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
+    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "threshold" | "tag" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
         activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined, ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined>;
         transforming: import("vue").Ref<boolean, boolean>;
@@ -276,8 +276,8 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             movable: boolean;
             rotatable: boolean;
             resizable: boolean;
-            tag: string | any;
             threshold: number;
+            tag: string | any;
             handleShape: "rect" | "circle";
             handles: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
@@ -306,8 +306,8 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         movable: boolean;
         rotatable: boolean;
         resizable: boolean;
-        tag: string | any;
         threshold: number;
+        tag: string | any;
         handleShape: "rect" | "circle";
         handles: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
     }> & Omit<Readonly<{
@@ -337,7 +337,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         onStart?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
         onEnd?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
         "onUpdate:modelValue"?: ((value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any) | undefined;
-    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "tag" | "threshold" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
+    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "threshold" | "tag" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
         activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined, ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined>;
         transforming: import("vue").Ref<boolean, boolean>;

package/dist/components/shared/TransformControls.vue.d.ts

@@ -81,8 +81,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     movable: boolean;
     rotatable: boolean;
     resizable: boolean;
-    tag: string | any;
     threshold: number;
+    tag: string | any;
     handleShape: "rect" | "circle";
     handles: Handle[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/index.css

@@ -842,29 +842,65 @@
   top: 0;
   bottom: 0;
 }
-.mce-smart-selection .mce-smart-handle {
+.mce-smart-selection__node {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
-  pointer-events: auto;
 }
-.mce-smart-selection .mce-smart-handle__btn {
+.mce-smart-selection__node--active .mce-smart-selection__ring {
+  background: #FF24BD;
+}
+.mce-smart-selection__ghost {
+  position: absolute;
+  border: 1px solid rgb(var(--mce-theme-primary));
+}
+.mce-smart-selection__ring {
   width: 1px;
   height: 1px;
   border-radius: 100%;
   border: 1px solid #FF24BD;
   outline: 1px solid #FFFFFF;
+  pointer-events: auto;
 }
-.mce-smart-selection .mce-smart-handle__btn:hover {
+.mce-smart-selection__ring:hover {
   background: #FF24BD;
 }
-.mce-smart-selection .mce-smart-handle__btn--active {
+.mce-smart-selection__spacing {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  visibility: hidden;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.mce-smart-selection__spacing-line {
+  width: 100%;
+  height: 100%;
+  background-color: #FF24BD;
+}
+.mce-smart-selection--hover .mce-smart-selection__ring {
   width: 10px;
   height: 10px;
 }
-.mce-smart-selection .mce-smart-handle--active .mce-smart-handle__btn {
-  background: #FF24BD;
+.mce-smart-selection--hover .mce-smart-selection__spacing {
+  visibility: visible;
+}
+.mce-smart-selection--vertical .mce-smart-selection__spacing {
+  height: 4px;
+  cursor: row-resize;
+}
+.mce-smart-selection--vertical .mce-smart-selection__spacing-line {
+  height: 1px;
+}
+.mce-smart-selection--horizontal .mce-smart-selection__spacing {
+  width: 4px;
+  cursor: col-resize;
+}
+.mce-smart-selection--horizontal .mce-smart-selection__spacing-line {
+  width: 1px;
 }.progress-indicator[data-v-3b286483] {
   display: flex;
   align-items: center;
@@ -906,7 +942,7 @@
 100% {
     left: 100%;
 }
-}.mce-statusbar[data-v-a1f0e31b] {
+}.mce-statusbar[data-v-c3c7d56a] {
   user-select: none;
   position: relative;
   display: flex;
@@ -923,29 +959,29 @@
   white-space: nowrap;
   overflow-x: auto;
 }
-.mce-statusbar__main[data-v-a1f0e31b] {
+.mce-statusbar__main[data-v-c3c7d56a] {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 4px;
   height: 100%;
 }
-.mce-statusbar__item[data-v-a1f0e31b] {
+.mce-statusbar__item[data-v-c3c7d56a] {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-.mce-statusbar__item > svg[data-v-a1f0e31b] {
+.mce-statusbar__item > svg[data-v-c3c7d56a] {
   width: 1em;
   height: 1em;
 }
-.mce-statusbar__divider[data-v-a1f0e31b] {
+.mce-statusbar__divider[data-v-c3c7d56a] {
   width: 0;
   height: 60%;
   border-right: 1px solid rgba(var(--mce-theme-on-surface), 0.1);
   margin: 0 8px;
 }
-.mce-statusbar__kbd[data-v-a1f0e31b] {
+.mce-statusbar__kbd[data-v-c3c7d56a] {
   outline: 1px solid rgba(var(--mce-theme-on-surface), 0.1);
   border-radius: 4px;
   display: flex;

package/dist/index.js

@@ -1485,6 +1485,37 @@ async function createImageElement(image) {
     }
   };
 }
+function handleDrag(downEvent, options = {}) {
+  const {
+    start,
+    move,
+    end,
+    threshold = 3
+  } = options;
+  let dragging = false;
+  let currentPos = { x: downEvent.clientX, y: downEvent.clientY };
+  function onMouseMove(moveEvent) {
+    const movePos = { x: moveEvent.clientX, y: moveEvent.clientY };
+    const offsetPos = { x: movePos.x - currentPos.x, y: movePos.y - currentPos.y };
+    if (!dragging && (Math.abs(offsetPos.x) >= threshold || Math.abs(offsetPos.y) >= threshold)) {
+      dragging = true;
+      start?.(moveEvent);
+    }
+    if (dragging) {
+      currentPos = { ...movePos };
+      move?.(offsetPos, moveEvent);
+    }
+  }
+  function onMouseUp(upEvent) {
+    if (dragging) {
+      end?.(upEvent);
+    }
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  }
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+}
 function noop(..._args) {
 }
 function isClickInsideElement(event, targetDiv) {
@@ -5958,7 +5989,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$p = ["data-id"];
-const _hoisted_2$d = { class: "mce-layer__content" };
+const _hoisted_2$c = { class: "mce-layer__content" };
 const _hoisted_3$b = { class: "mce-layer__prepend" };
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
@@ -6182,7 +6213,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
         }, [
           _cache[5] || (_cache[5] = createElementVNode("span", { class: "mce-layer__underlay" }, null, -1)),
           _cache[6] || (_cache[6] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
-          createElementVNode("div", _hoisted_2$d, [
+          createElementVNode("div", _hoisted_2$c, [
             createElementVNode("div", _hoisted_3$b, [
               childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$E), {
                 key: 0,
@@ -6291,7 +6322,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$o = { class: "mce-layers" };
-const _hoisted_2$c = { class: "mce-layers__wrapper" };
+const _hoisted_2$b = { class: "mce-layers__wrapper" };
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "Layers",
   setup(__props) {
@@ -6337,7 +6368,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$o, [
-        createElementVNode("div", _hoisted_2$c, [
+        createElementVNode("div", _hoisted_2$b, [
           createVNode(_sfc_main$z, {
             root: true,
             node: unref(root),
@@ -6571,7 +6602,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$l = ["onMouseenter"];
-const _hoisted_2$b = ["onClick"];
+const _hoisted_2$a = ["onClick"];
 const _hoisted_3$a = {
   key: 0,
   class: "mce-list-item__checked"
@@ -6742,7 +6773,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                         icon: "$arrowRight"
                       })) : createCommentVNode("", true)
                     ])) : createCommentVNode("", true)
-                  ], 10, _hoisted_2$b)
+                  ], 10, _hoisted_2$a)
                 ], 40, _hoisted_1$l))
               ], 64);
             }), 128)),
@@ -7237,7 +7268,7 @@ const _new = definePlugin((editor) => {
   };
 });
 const _hoisted_1$k = { class: "mce-node-creator" };
-const _hoisted_2$a = { class: "mce-node-creator__tree" };
+const _hoisted_2$9 = { class: "mce-node-creator__tree" };
 const _hoisted_3$9 = { class: "mce-node-creator__actions" };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "NodeCreator",
@@ -7321,7 +7352,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$k, [
-        createElementVNode("div", _hoisted_2$a, [
+        createElementVNode("div", _hoisted_2$9, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(tree.value, (node, index) => {
             return openBlock(), createBlock(CreatorNode, {
               key: index,
@@ -11493,7 +11524,7 @@ const _hoisted_1$j = {
   key: 0,
   class: "mce-tooltip__arrow"
 };
-const _hoisted_2$9 = { class: "mce-tooltip__content" };
+const _hoisted_2$8 = { class: "mce-tooltip__content" };
 const _hoisted_3$8 = {
   key: 0,
   class: "mce-tooltip__kbd"
@@ -11543,7 +11574,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           isActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             __props.showArrow ? (openBlock(), createElementBlock("div", _hoisted_1$j)) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_2$9, [
+            createElementVNode("div", _hoisted_2$8, [
               renderSlot(_ctx.$slots, "default"),
               _ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
                 renderSlot(_ctx.$slots, "kbd")
@@ -11571,7 +11602,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$i = ["width", "height"];
-const _hoisted_2$8 = ["onDblclick", "onMousedown", "onMousemove"];
+const _hoisted_2$7 = ["onDblclick", "onMousedown", "onMousemove"];
 const _hoisted_3$7 = { style: { "font-size": "0.75rem", "text-wrap": "nowrap" } };
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
@@ -11871,7 +11902,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             onMousedown: ($event) => onReflineMousedown($event, index),
             onMousemove: () => tipText.value = `${item}`,
             onMouseleave: onLeave
-          }, null, 46, _hoisted_2$8);
+          }, null, 46, _hoisted_2$7);
         }), 128)),
         createVNode(_sfc_main$r, {
           "model-value": !!tipText.value,
@@ -12317,7 +12348,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$e = ["rx", "ry"];
-const _hoisted_2$7 = { "pointer-events": "none" };
+const _hoisted_2$6 = { "pointer-events": "none" };
 const _hoisted_3$6 = ["x", "y", "width", "height", "aria-label"];
 const _hoisted_4$3 = ["cx", "cy", "r", "aria-label"];
 const _hoisted_5$2 = ["x", "y", "width", "height", "aria-label", "rx", "ry"];
@@ -12915,7 +12946,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
               ry: model.value.borderRadius
             }, null, 8, _hoisted_1$e),
             createVNode(Diagonal),
-            createElementVNode("g", _hoisted_2$7, [
+            createElementVNode("g", _hoisted_2$6, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
                 return openBlock(), createElementBlock(Fragment, { key: index }, [
                   handle.shape ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -13242,6 +13273,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     } = useEditor();
     const transformControls = useTemplateRef("transformControlsTpl");
     const startEvent = ref();
+    const activeHandle = computed(() => transformControls.value?.activeHandle ?? "move");
     const resizeStrategy = computed(() => {
       if (elementSelection.value.length === 1) {
         const el = elementSelection.value[0];
@@ -13294,7 +13326,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     function createTransformContext() {
       return {
         startEvent: startEvent.value,
-        handle: transformControls.value?.activeHandle ?? "move"
+        handle: activeHandle.value
       };
     }
     function onStart() {
@@ -13302,11 +13334,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     }
     function onMove() {
       if (!state.value) {
-        state.value = "transforming";
+        state.value = activeHandle.value === "move" ? "moving" : "transforming";
       }
     }
     function onEnd() {
-      if (state.value === "transforming") {
+      if (state.value === "moving" || state.value === "transforming") {
         state.value = void 0;
       }
       emit("selectionTransformEnd", createTransformContext());
@@ -13358,7 +13390,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             style: normalizeStyle$1(style)
           }, null, 4);
         }), 128)),
-        unref(state) !== "transforming" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectionObbStyles.value, (style, index) => {
+        unref(state) !== "moving" && unref(state) !== "transforming" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectionObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
             class: "mce-selection__node",
@@ -13394,6 +13426,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           rotatable: rotatable.value,
           roundable: roundable.value,
           "resize-strategy": resizeStrategy.value,
+          "hide-ui": unref(state) === "moving",
           class: "mce-selection__transform",
           tip,
           scale: [unref(camera).zoom.x, unref(camera).zoom.y],
@@ -13409,7 +13442,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "scale", "offset"])) : createCommentVNode("", true)
+        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "hide-ui", "scale", "offset"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -13899,15 +13932,21 @@ const _slice = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$b = { class: "mce-smart-guides" };
+const _hoisted_1$b = {
+  key: 0,
+  class: "mce-smart-guides"
+};
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "SmartGuides",
   props: {
     snapLines: {}
   },
   setup(__props) {
+    const {
+      state
+    } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return unref(state) === "transforming" || unref(state) === "moving" ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.snapLines, (item, key) => {
           return openBlock(), createElementBlock("div", {
             key,
@@ -13920,7 +13959,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             })
           }, null, 6);
         }), 128))
-      ]);
+      ])) : createCommentVNode("", true);
     };
   }
 });
@@ -14865,7 +14904,6 @@ const _smartGuides = definePlugin((editor) => {
     isElement,
     elementSelection,
     selectionAabb,
-    state,
     getAabb,
     root,
     camera,
@@ -15090,8 +15128,6 @@ const _smartGuides = definePlugin((editor) => {
     linePairs.value = _linePairs;
   }
   const snapLines = computed(() => {
-    if (state.value !== "transforming")
-      return [];
     const { zoom, position } = camera.value;
     const scaleX = (v) => v * zoom.x;
     const scaleY = (v) => v * zoom.y;
@@ -15269,11 +15305,7 @@ function flipType(type) {
 function isLeftTopLine(line) {
   return ["vt", "hl"].includes(line.type);
 }
-const _hoisted_1$a = {
-  key: 0,
-  class: "mce-smart-selection"
-};
-const _hoisted_2$6 = ["onMousedown"];
+const _hoisted_1$a = ["onMousedown"];
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "SmartSelection",
   props: {
@@ -15287,92 +15319,94 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       isPointerInSelection,
       elementSelection,
       getObb,
-      getAabb,
       state,
       camera,
       resizeElement,
       inEditorIs,
-      getGlobalPointer
+      aabbToDrawboardAabb
     } = useEditor();
-    const info = ref({
-      active: false,
-      direction: void 0,
-      spacing: void 0,
-      xItems: [],
-      yItems: []
-    });
-    function update() {
-      if (currentElement.value) {
+    const info = ref();
+    const disableUpdate = ref(false);
+    function _update() {
+      if (disableUpdate.value) {
         return;
       }
-      const els = elementSelection.value;
-      let active = false;
-      let direction;
+      const _selection2 = elementSelection.value;
+      let direction = "vertical";
       let spacing;
-      let xItems = [];
-      let yItems = [];
-      if (state.value !== "transforming" && els.length > 1) {
+      let items = [];
+      if (_selection2.length > 1) {
         let prev;
-        const items = els.map((el) => ({ el, aabb: getAabb(el) }));
-        active = true;
-        const sorted = [...items].sort((a, b) => a.aabb.y - b.aabb.y);
+        const sorted = [..._selection2].sort((a, b) => a.globalAabb.y - b.globalAabb.y);
         for (let i = 0; i < sorted.length; i++) {
           const cur = sorted[i];
           if (prev) {
-            if (!cur.aabb.overlap(prev.aabb, "x")) {
-              active = false;
+            if (!cur.globalAabb.overlap(prev.globalAabb, "x")) {
+              spacing = void 0;
               break;
             }
-            const _spacing = cur.aabb.y - (prev.aabb.y + prev.aabb.height);
+            const _spacing = cur.globalAabb.top - prev.globalAabb.bottom;
             if (spacing !== void 0 && Math.abs(spacing - _spacing) >= 1) {
-              active = false;
+              spacing = void 0;
               break;
             }
             spacing = _spacing;
           }
           prev = cur;
         }
-        if (active) {
-          yItems = sorted;
+        if (spacing !== void 0) {
+          items = sorted;
           direction = "vertical";
         } else {
-          active = true;
           prev = void 0;
-          spacing = void 0;
-          const sorted2 = [...items].sort((a, b) => a.aabb.x - b.aabb.x);
+          const sorted2 = [..._selection2].sort((a, b) => a.globalAabb.x - b.globalAabb.x);
           for (let i = 0; i < sorted2.length; i++) {
             const cur = sorted2[i];
             if (prev) {
-              if (!cur.aabb.overlap(prev.aabb, "y")) {
-                active = false;
+              if (!cur.globalAabb.overlap(prev.globalAabb, "y")) {
+                spacing = void 0;
                 break;
               }
-              const _spacing = cur.aabb.x - (prev.aabb.x + prev.aabb.width);
+              const _spacing = cur.globalAabb.left - prev.globalAabb.right;
               if (spacing !== void 0 && Math.abs(spacing - _spacing) >= 1) {
-                active = false;
+                spacing = void 0;
                 break;
               }
               spacing = _spacing;
             }
             prev = cur;
           }
-          if (active) {
-            xItems = sorted2;
+          if (spacing !== void 0) {
+            items = sorted2;
             direction = "horizontal";
           }
         }
       }
-      info.value = {
-        active,
-        direction,
-        spacing,
-        xItems,
-        yItems
-      };
+      if (spacing !== void 0) {
+        info.value = {
+          direction,
+          spacing,
+          items
+        };
+      } else {
+        info.value = void 0;
+      }
     }
-    watch(() => elementSelection.value.map((el) => getAabb(el)), update);
-    watch(elementSelection, () => currentElement.value = void 0);
-    const handles = computed(() => {
+    watch(() => {
+      return elementSelection.value.map((el) => {
+        return {
+          left: el.style.left,
+          top: el.style.top,
+          width: el.style.width,
+          height: el.style.height,
+          rotate: el.style.rotate
+        };
+      });
+    }, _update);
+    watch(() => {
+      return elementSelection.value.map((el) => el.instanceId);
+    }, () => currentElement.value = void 0);
+    const boxes = computed(() => {
       return elementSelection.value.map((el) => {
         return {
           el,
@@ -15380,13 +15414,61 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         };
       });
     });
-    const transform = computed({
+    const spacingHandles = computed(() => {
+      const handles = [];
+      if (!info.value) {
+        return handles;
+      }
+      const { direction, spacing = 0, items } = info.value;
+      const { zoom, position } = camera.value;
+      const toScreen = (pos) => {
+        pos.x *= zoom.x;
+        pos.y *= zoom.y;
+        pos.x -= position.x;
+        pos.y -= position.y;
+      };
+      for (let i = 0; i < items.length; i++) {
+        const cur = items[i];
+        const next = items[i + 1];
+        if (!next) {
+          break;
+        }
+        const axis = direction === "horizontal" ? "y" : "x";
+        const min = Math.max(cur.globalAabb.min[axis], next.globalAabb.min[axis]);
+        const max = Math.min(cur.globalAabb.max[axis], next.globalAabb.max[axis]);
+        let pos;
+        switch (direction) {
+          case "horizontal":
+            pos = {
+              x: cur.globalAabb.x + cur.globalAabb.width + spacing / 2,
+              y: min + (max - min) / 2
+            };
+            break;
+          case "vertical":
+            pos = {
+              x: min + (max - min) / 2,
+              y: cur.globalAabb.y + cur.globalAabb.height + spacing / 2
+            };
+            break;
+        }
+        toScreen(pos);
+        pos[axis] -= 2;
+        handles.push({
+          el: cur,
+          style: {
+            transform: `matrix(1, 0, 0, 1, ${pos.x}, ${pos.y})`
+          }
+        });
+      }
+      return handles;
+    });
+    const currentTransform = computed({
       get: () => {
         const { left, top, width, height, rotationDegrees: rotate } = getObb(currentElement.value);
         return { left, top, width, height, rotate };
       },
       set: (val) => {
-        const oldTransform = transform.value;
+        const oldTransform = currentTransform.value;
         const offsetStyle = {
           left: val.left - oldTransform.left,
           top: val.top - oldTransform.top,
@@ -15422,63 +15504,244 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           right: aabb.right - right,
           bottom: aabb.bottom - bottom
         };
+        const _info = info.value;
+        if (!_info) {
+          return;
+        }
+        const { direction, items } = _info;
         let after = false;
-        info.value.yItems.forEach((item) => {
-          if (item.el.equal(el)) {
-            after = true;
-          } else if (after) {
-            item.el.style.top += offset2.bottom;
-          } else {
-            item.el.style.top += offset2.top;
-          }
-        });
-        after = false;
-        info.value.xItems.forEach((item) => {
-          if (item.el.equal(el)) {
-            after = true;
-          } else if (after) {
-            item.el.style.left += offset2.right;
-          } else {
-            item.el.style.left += offset2.left;
-          }
-        });
+        switch (direction) {
+          case "horizontal":
+            items.forEach((item) => {
+              if (item.equal(el)) {
+                after = true;
+              } else if (after) {
+                item.style.left += offset2.right;
+              } else {
+                item.style.left += offset2.left;
+              }
+            });
+            break;
+          case "vertical":
+            items.forEach((item) => {
+              if (item.equal(el)) {
+                after = true;
+              } else if (after) {
+                item.style.top += offset2.bottom;
+              } else {
+                item.style.top += offset2.top;
+              }
+            });
+            break;
+        }
       }
     });
-    function onMouseDown(item, downEvent) {
+    const globalAabb = ref();
+    const _globalAabb = computed(() => {
+      return globalAabb.value ? aabbToDrawboardAabb(globalAabb.value) : void 0;
+    });
+    function onRingMouseDown(event, item) {
       const el = item.el;
       currentElement.value = el;
-      return;
+      const _info = info.value;
+      if (!_info) {
+        return;
+      }
+      const { direction, spacing } = _info;
+      globalAabb.value = el.globalAabb.clone();
+      const elAabb = globalAabb.value;
+      handleDrag(event, {
+        start: () => {
+          disableUpdate.value = true;
+          state.value = "moving";
+        },
+        move: (offset2) => {
+          const { zoom } = camera.value;
+          el.position.set(
+            el.position.x + offset2.x / zoom.x,
+            el.position.y + offset2.y / zoom.y
+          );
+          const fixedCenter = elAabb.getCenter();
+          const center = el.globalAabb.getCenter();
+          switch (direction) {
+            case "horizontal": {
+              const diff = center.x - fixedCenter.x;
+              const absDiff = Math.abs(diff);
+              if (absDiff > spacing + elAabb.height / 2) {
+                const sorted = [...elementSelection.value].sort((a, b) => {
+                  if (a.equal(el))
+                    return elAabb.x - b.globalAabb.x;
+                  if (b.equal(el))
+                    return a.globalAabb.x - elAabb.x;
+                  return a.globalAabb.x - b.globalAabb.x;
+                });
+                const index = sorted.findIndex((v) => v.equal(el));
+                if (diff > 0) {
+                  const target = sorted[index + 1];
+                  if (target) {
+                    const left = target.globalAabb.right - elAabb.width;
+                    let _left = elAabb.left;
+                    const parentAabb = target.getParent()?.globalAabb;
+                    if (parentAabb) {
+                      _left -= parentAabb.x;
+                    }
+                    target.style.left = _left;
+                    elAabb.x = left;
+                    target.updateGlobalTransform();
+                  }
+                } else {
+                  const target = sorted[index - 1];
+                  if (target) {
+                    let left = elAabb.right - target.globalAabb.width;
+                    elAabb.x = target.globalAabb.left;
+                    const parentAabb = target.getParent()?.globalAabb;
+                    if (parentAabb) {
+                      left -= parentAabb.x;
+                    }
+                    target.style.left = left;
+                    target.updateGlobalTransform();
+                  }
+                }
+              }
+              break;
+            }
+            case "vertical": {
+              const diff = center.y - fixedCenter.y;
+              const absDiff = Math.abs(diff);
+              if (absDiff > spacing + elAabb.height / 2) {
+                const sorted = [...elementSelection.value].sort((a, b) => {
+                  if (a.equal(el))
+                    return elAabb.y - b.globalAabb.y;
+                  if (b.equal(el))
+                    return a.globalAabb.y - elAabb.y;
+                  return a.globalAabb.y - b.globalAabb.y;
+                });
+                const index = sorted.findIndex((v) => v.equal(el));
+                if (diff > 0) {
+                  const target = sorted[index + 1];
+                  if (target) {
+                    const top = target.globalAabb.bottom - elAabb.height;
+                    let _top = elAabb.top;
+                    const parentAabb = target.getParent()?.globalAabb;
+                    if (parentAabb) {
+                      _top -= parentAabb.y;
+                    }
+                    target.style.top = _top;
+                    elAabb.y = top;
+                    target.updateGlobalTransform();
+                  }
+                } else {
+                  const target = sorted[index - 1];
+                  if (target) {
+                    let top = elAabb.bottom - target.globalAabb.height;
+                    elAabb.y = target.globalAabb.top;
+                    const parentAabb = target.getParent()?.globalAabb;
+                    if (parentAabb) {
+                      top -= parentAabb.y;
+                    }
+                    target.style.top = top;
+                    target.updateGlobalTransform();
+                  }
+                }
+              }
+              break;
+            }
+          }
+        },
+        end: () => {
+          let x = elAabb.x;
+          let y = elAabb.y;
+          const parentAabb = el.getParent()?.globalAabb;
+          if (parentAabb) {
+            x -= parentAabb.x;
+            y -= parentAabb.y;
+          }
+          el.style.left = x;
+          el.style.top = y;
+          el.updateGlobalTransform();
+          globalAabb.value = void 0;
+          state.value = void 0;
+          disableUpdate.value = false;
+        }
+      });
+    }
+    function onSpacingMouseDown(event) {
+      const _info = info.value;
+      if (!_info) {
+        return;
+      }
+      const { direction, items } = _info;
+      handleDrag(event, {
+        start: () => state.value = "moving",
+        move: (offset2) => {
+          const { zoom } = camera.value;
+          offset2.x /= zoom.x;
+          offset2.y /= zoom.y;
+          switch (direction) {
+            case "horizontal":
+              items.forEach((item, index) => {
+                item.style.left += index * offset2.x;
+              });
+              break;
+            case "vertical":
+              items.forEach((item, index) => {
+                item.style.top += index * offset2.y;
+              });
+              break;
+          }
+        },
+        end: () => state.value = void 0
+      });
     }
     return (_ctx, _cache) => {
-      return info.value.active ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(handles.value, (item, index) => {
-          return openBlock(), createElementBlock("div", {
-            key: index,
-            class: normalizeClass(["mce-smart-handle", {
-              "mce-smart-handle--active": item.el.equal(currentElement.value)
-            }]),
-            style: normalizeStyle$1(item.style),
-            "data-pointerdown_to_drawboard": ""
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass(["mce-smart-handle__btn", {
-                "mce-smart-handle__btn--active": unref(state) === "transforming" || unref(isPointerInSelection)
+      return info.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["mce-smart-selection", {
+          "mce-smart-selection--hover": unref(isPointerInSelection),
+          [`mce-smart-selection--${info.value.direction}`]: true
+        }])
+      }, [
+        unref(state) !== "moving" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(boxes.value, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: index,
+              class: normalizeClass(["mce-smart-selection__node", {
+                "mce-smart-selection__node--active": item.el.equal(currentElement.value)
               }]),
-              onMousedown: ($event) => onMouseDown(item)
-            }, null, 42, _hoisted_2$6)
-          ], 6);
-        }), 128)),
-        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$l, {
-          key: 0,
-          modelValue: transform.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => transform.value = $event),
-          handles: ["resize-l", "resize-r", "resize-t", "resize-b"],
-          class: "mce-smart-selection__transform",
-          color: "#FF24BD",
-          scale: [unref(camera).zoom.x, unref(camera).zoom.y],
-          offset: [-unref(camera).position.x, -unref(camera).position.y]
-        }, null, 8, ["modelValue", "scale", "offset"])) : createCommentVNode("", true)
-      ])) : createCommentVNode("", true);
+              style: normalizeStyle$1(item.style)
+            }, [
+              createElementVNode("div", {
+                class: "mce-smart-selection__ring",
+                onMousedown: ($event) => onRingMouseDown($event, item)
+              }, null, 40, _hoisted_1$a)
+            ], 6);
+          }), 128)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(spacingHandles.value, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: index,
+              class: "mce-smart-selection__spacing",
+              style: normalizeStyle$1(item.style),
+              onMousedown: _cache[0] || (_cache[0] = ($event) => onSpacingMouseDown($event))
+            }, [..._cache[2] || (_cache[2] = [
+              createElementVNode("div", { class: "mce-smart-selection__spacing-line" }, null, -1)
+            ])], 36);
+          }), 128)),
+          currentTransform.value.width && currentTransform.value.height ? (openBlock(), createBlock(_sfc_main$l, {
+            key: 0,
+            modelValue: currentTransform.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => currentTransform.value = $event),
+            handles: ["resize-l", "resize-r", "resize-t", "resize-b"],
+            class: "mce-smart-selection__transform",
+            color: "#FF24BD",
+            scale: [unref(camera).zoom.x, unref(camera).zoom.y],
+            offset: [-unref(camera).position.x, -unref(camera).position.y]
+          }, null, 8, ["modelValue", "scale", "offset"])) : createCommentVNode("", true)
+        ], 64)) : _globalAabb.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "mce-smart-selection__ghost",
+          style: normalizeStyle$1(_globalAabb.value.toCssStyle())
+        }, null, 4)) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true);
     };
   }
 });
@@ -15603,7 +15866,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               createElementVNode("span", _hoisted_7, toDisplayString(unref(getKbd)("Escape")), 1),
               createElementVNode("span", null, toDisplayString(unref(t)("commitChanges")), 1)
             ])
-          ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          ], 64)) : unref(state) === "transforming" || unref(state) === "moving" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", _hoisted_8, [
               createVNode(unref(_sfc_main$E), { icon: "$mouseRightClick" })
             ]),
@@ -15663,7 +15926,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-a1f0e31b"]]);
+const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-c3c7d56a"]]);
 const _statusbar = definePlugin((editor) => {
   const {
     registerConfig

package/dist/typed-global.d.ts

@@ -33,6 +33,7 @@ declare global {
         | 'hand'
         | 'drawing'
         | 'selecting'
+        | 'moving'
         | 'transforming'
         | 'typing'
         | 'cropping'

package/dist/utils/dnd.d.ts

@@ -0,0 +1,10 @@
+export interface HandleDragOptions {
+    threshold?: number;
+    start?: (event: MouseEvent) => void;
+    move?: (offset: {
+        x: number;
+        y: number;
+    }, event: MouseEvent) => void;
+    end?: (event: MouseEvent) => void;
+}
+export declare function handleDrag(downEvent: MouseEvent, options?: HandleDragOptions): void;

package/dist/utils/index.d.ts

@@ -2,6 +2,7 @@ export * from './box';
 export * from './console';
 export * from './constants';
 export * from './create';
+export * from './dnd';
 export * from './helper';
 export * from './image';
 export * from './propsFactory';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.16.6",
+  "version": "0.16.7",
   "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",