@vectoriox/iox-builder 1.7.6 → 1.7.7

package/fesm2022/vectoriox-iox-builder.mjs

@@ -2608,6 +2608,8 @@ class MoveableCanvasService {
         this.sourceId = this.resolveDropzoneId(element);
         this.ensureMoveable();
         this.moveable.target = element;
+        // Snap against sibling/cousin nodes (not self, ancestors, or own descendants).
+        this.moveable.elementGuidelines = this.guidelines(element);
         // Drag is initiated by grabbing the ELEMENT itself (like interact.js) — not a Moveable
         // overlay area — so a plain click still passes through to selection/child-selection and only
         // a movement past the threshold starts a drag. Keeps Moveable visually silent (no hit-area box).
@@ -2616,6 +2618,14 @@ class MoveableCanvasService {
     }
     /** Recompute the control-box position (call on scroll/zoom/layout changes). */
     refresh() { this.moveable?.updateRect(); }
+    /** Snap guideline elements for `target`: every node host except itself, its ancestors, and its
+     *  own descendants — i.e. siblings/cousins to align edges/centers against. */
+    guidelines(target) {
+        if (!this.container)
+            return [];
+        const all = Array.from(this.container.querySelectorAll('[class*="iox-node-"]'));
+        return all.filter(el => el !== target && !target.contains(el) && !el.contains(target));
+    }
     destroy() { this.destroyMoveable(); this.container = null; }
     // ── internals ────────────────────────────────────────────────────────────
     ensureMoveable() {
@@ -2635,6 +2645,14 @@ class MoveableCanvasService {
             hideDefaultLines: true,
             renderDirections: ['nw', 'ne', 'sw', 'se'],
             className: 'iox-moveable-silent',
+            // Snap-to-guides: align edges/centers to sibling elements while dragging/resizing, with
+            // the distance readout. elementGuidelines are refreshed per selection (see select()).
+            snappable: true,
+            snapThreshold: 6,
+            snapDirections: { top: true, left: true, bottom: true, right: true, center: true, middle: true },
+            elementSnapDirections: { top: true, left: true, bottom: true, right: true, center: true, middle: true },
+            snapGap: true,
+            isDisplaySnapDigit: true,
         });
         this.moveable.on('dragStart', (e) => {
             // Never start a drag from inside inline text editing.