@vectoriox/iox-builder 1.7.5 → 1.7.7

package/fesm2022/vectoriox-iox-builder.mjs

@@ -242,11 +242,18 @@ class OverlayService {
         return this.intersectionRootElement;
     }
     /**
-     * Resolve the inner styled element.
-     * Builder components apply [ngStyle] on their first child element,
-     * so computed styles (padding, margin) live there — not on the host.
+     * Resolve the styled element (the one carrying `.iox-node-{id}` — where padding/margin/size live).
+     * Directive-host components (Image/Heading/Container/Section/…) put `iox-node-{id}` on the HOST
+     * itself, so the host IS the styled element. Legacy wrapper components (Card/Repeater/Slider) put
+     * it on the first child. Prefer the host when it's the styled element; fall back to the first
+     * child otherwise. (Before this, directive-host containers outlined their first child — e.g. a
+     * container's outline landed on the image inside it, desyncing from Moveable's resize handles.)
      */
     getStyledElement(host) {
+        for (let i = 0; i < host.classList.length; i++) {
+            if (host.classList[i].startsWith('iox-node-'))
+                return host;
+        }
         return host.firstElementChild || host;
     }
     // ── Node → Element registry ──────────────────────────────
@@ -2601,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).
@@ -2609,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() {
@@ -2628,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.