@vectoriox/iox-builder 1.7.6 → 1.7.8

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1283,9 +1283,13 @@ class InteractionEngineService {
     }
     /** Wire all interactions for a node to its rendered DOM element. */
     attach(node) { this.runOutside(() => this._attach(node)); }
-    _attach(node) {
-        const ref = this.overlayService.getNodeRef(node);
-        if (!ref)
+    /** Attach interactions to a node whose element is NOT overlay-registered — e.g. repeater/slider
+     *  PREVIEW CLONES, which are non-selectable but must still animate (parity with the SSR runtime,
+     *  which animates every repeated row). See RenderDirective. */
+    attachTo(node, element) { this.runOutside(() => this._attach(node, element)); }
+    _attach(node, elementOverride) {
+        const element = elementOverride ?? this.overlayService.getNodeRef(node)?.element;
+        if (!element)
             return;
         const inBuilder = this.isBuilderMode();
         // Apply any pre-states queued for THIS element by earlier-registered nodes.
@@ -1294,7 +1298,7 @@ class InteractionEngineService {
             const pending = this.pendingPreStates.get(node.id);
             if (pending) {
                 for (const action of pending) {
-                    this.applyPreState(ref.element, action);
+                    this.applyPreState(element, action);
                 }
                 this.pendingPreStates.delete(node.id);
             }
@@ -1312,7 +1316,7 @@ class InteractionEngineService {
             if (!skipPreState) {
                 for (const action of ix.actions) {
                     if (this.ENTRANCE_TYPES.has(action.type)) {
-                        const target = this.resolveTarget(node, action);
+                        const target = this.resolveTarget(node, action, element);
                         if (target) {
                             this.applyPreState(target, action);
                         }
@@ -1324,7 +1328,7 @@ class InteractionEngineService {
                     }
                 }
             }
-            const cleanup = this.attachInteraction(node, ix, ref.element);
+            const cleanup = this.attachInteraction(node, ix, element);
             cleanups.push({ node, interaction: ix, cleanup });
         }
         this.attached.set(node, cleanups);
@@ -1628,10 +1632,9 @@ class InteractionEngineService {
                 break;
         }
     }
-    resolveTarget(ownerNode, action) {
-        if (action.target === 'self') {
-            const ref = this.overlayService.getNodeRef(ownerNode);
-            return ref?.element ?? null;
+    resolveTarget(ownerNode, action, selfEl) {
+        if (action.target === 'self' || !action.target) {
+            return selfEl ?? this.overlayService.getNodeRef(ownerNode)?.element ?? null;
         }
         // Find by node ID
         for (const [n, ref] of this.overlayService.getAllNodeEntries()) {
@@ -2608,6 +2611,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 +2621,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 +2648,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.
@@ -3060,10 +3081,19 @@ class RenderDirective {
             this.styleRegistry.upsert(cssId, composedBase);
             // Restore per-state overrides saved from a previous session.
             if (node.stateStyles) {
+                const childEl = componentRef.location?.nativeElement;
                 for (const state of Object.keys(node.stateStyles)) {
                     const stateMap = node.stateStyles[state];
                     if (stateMap && Object.keys(stateMap).length) {
-                        this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state);
+                        // Relational states (parent-hover) compile to
+                        // `.iox-node-{parentId}:hover .iox-node-{childId}` — they need the CURRENT parent id.
+                        // Resolve it from the DOM on EVERY render, so the rule is correct on load AND after a
+                        // cross-container move (which re-renders the child with a fresh instance). (issue #1)
+                        let relativeToId;
+                        if (RELATIONAL_STATES.includes(state) && childEl?.parentElement) {
+                            relativeToId = this.findParentNodeElement(childEl.parentElement)?.node?.id;
+                        }
+                        this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state, relativeToId);
                     }
                 }
             }
@@ -3158,11 +3188,15 @@ class RenderDirective {
                 this.overlayService.triggerContextMenu(event.clientX, event.clientY);
             });
         }
-        // Wire up interactions (animations) after the element is in the DOM.
-        // Preview clones are static rows — no per-clone interaction wiring.
+        // Wire up interactions (animations) after the element is in the DOM. Preview clones are
+        // non-selectable (not overlay-registered) but MUST still animate — parity with the SSR
+        // runtime, which animates every repeated row — so attach by element (issue #2).
         if (!isPreviewClone) {
             this.interactionEngine.attach(node);
         }
+        else if (nativeEl) {
+            this.interactionEngine.attachTo(node, nativeEl);
+        }
     }
     /** Try setInput(); fall back to direct assignment for non-@Input properties. */
     safeSetInput(ref, name, value) {