@vectoriox/iox-builder 1.4.44 → 1.4.46

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1150,9 +1150,10 @@ class InteractionEngineService {
         const ref = this.overlayService.getNodeRef(node);
         if (!ref)
             return;
-        // Apply any pre-states that were queued by other nodes that target THIS
-        // element with an entrance animation but registered before we did.
-        if (node.id) {
+        const inBuilder = this.isBuilderMode();
+        // Apply any pre-states queued for THIS element by earlier-registered nodes.
+        // Skip in builder mode — all elements must remain visible for editing.
+        if (!inBuilder && node.id) {
             const pending = this.pendingPreStates.get(node.id);
             if (pending) {
                 for (const action of pending) {
@@ -1165,21 +1166,20 @@ class InteractionEngineService {
             return;
         const cleanups = [];
         for (const ix of node.interactions) {
-            // Apply pre-state to targets of ANY entrance animation so the element
-            // starts hidden regardless of whether the trigger is automatic (pageLoad,
-            // viewportEnter) or user-driven (click).
-            for (const action of ix.actions) {
-                if (this.ENTRANCE_TYPES.has(action.type)) {
-                    const target = this.resolveTarget(node, action);
-                    if (target) {
-                        this.applyPreState(target, action);
-                    }
-                    else if (action.target && action.target !== 'self') {
-                        // Target element not registered yet — queue the pre-state so
-                        // it gets applied the moment that element's attach() fires.
-                        const list = this.pendingPreStates.get(action.target) ?? [];
-                        list.push(action);
-                        this.pendingPreStates.set(action.target, list);
+            // Pre-state: hide elements before their entrance animation fires.
+            // Skipped in builder so elements are always editable on the canvas.
+            if (!inBuilder) {
+                for (const action of ix.actions) {
+                    if (this.ENTRANCE_TYPES.has(action.type)) {
+                        const target = this.resolveTarget(node, action);
+                        if (target) {
+                            this.applyPreState(target, action);
+                        }
+                        else if (action.target && action.target !== 'self') {
+                            const list = this.pendingPreStates.get(action.target) ?? [];
+                            list.push(action);
+                            this.pendingPreStates.set(action.target, list);
+                        }
                     }
                 }
             }
@@ -1251,10 +1251,23 @@ class InteractionEngineService {
     replay(node) {
         if (!node.interactions?.length)
             return;
-        // Cancel any in-progress animations first to reset the element cleanly.
         const ref = this.overlayService.getNodeRef(node);
         if (ref) {
             ref.element.getAnimations().forEach(a => a.cancel());
+            // Clear any leftover inline styles so the pre-state applies cleanly.
+            this.clearInlineAnimationStyles(ref.element);
+        }
+        // In builder mode pre-state is never applied on attach, so apply it now
+        // to give an accurate hidden→visible preview. It is cleaned up via
+        // executeAction's anim.finished handler once the animation completes.
+        for (const ix of node.interactions) {
+            for (const action of ix.actions) {
+                if (this.ENTRANCE_TYPES.has(action.type)) {
+                    const target = this.resolveTarget(node, action);
+                    if (target)
+                        this.applyPreState(target, action);
+                }
+            }
         }
         for (const ix of node.interactions) {
             this.runActions(node, ix.actions);
@@ -1262,6 +1275,11 @@ class InteractionEngineService {
     }
     // ── Private ──────────────────────────────────────────────
     attachInteraction(node, ix, element) {
+        // In builder mode, automatic triggers don't auto-fire — use the play button instead.
+        // Click/hover remain active so users can test those interactions on the canvas.
+        if (this.isBuilderMode() && (ix.trigger === 'pageLoad' || ix.trigger === 'viewportEnter' || ix.trigger === 'scrollProgress')) {
+            return () => { };
+        }
         switch (ix.trigger) {
             case 'pageLoad':
                 return this.attachPageLoad(node, ix, element);
@@ -1280,9 +1298,13 @@ class InteractionEngineService {
     }
     // ── Triggers ─────────────────────────────────────────────
     attachPageLoad(node, ix, element) {
-        // Execute immediately (next microtask to let rendering settle)
         const timer = setTimeout(() => {
-            this.runActions(node, ix.actions);
+            if (this.hasPreStatedAncestor(element)) {
+                this.deferUntilVisible(element, () => this.runActions(node, ix.actions));
+            }
+            else {
+                this.runActions(node, ix.actions);
+            }
         }, 50);
         return () => clearTimeout(timer);
     }
@@ -1294,6 +1316,17 @@ class InteractionEngineService {
                     const key = ix.id;
                     if (ix.actions.some(a => a.once) && firedSet.has(key))
                         continue;
+                    // Element is in viewport but may be inside a still-fading parent.
+                    // Defer until all pre-stated ancestors finish their entrance animation.
+                    if (this.hasPreStatedAncestor(element)) {
+                        this.deferUntilVisible(element, () => {
+                            if (ix.actions.some(a => a.once) && firedSet.has(key))
+                                return;
+                            firedSet.add(key);
+                            this.runActions(node, ix.actions);
+                        });
+                        continue;
+                    }
                     firedSet.add(key);
                     this.runActions(node, ix.actions);
                 }
@@ -1302,6 +1335,31 @@ class InteractionEngineService {
         observer.observe(element);
         return () => observer.disconnect();
     }
+    isBuilderMode() {
+        return document.body.classList.contains('builder-active');
+    }
+    /** Returns true if any DOM ancestor of element is currently faded out via pre-state. */
+    hasPreStatedAncestor(element) {
+        let el = element.parentElement;
+        while (el && el !== document.body) {
+            if (this.preStatedElements.has(el))
+                return true;
+            el = el.parentElement;
+        }
+        return false;
+    }
+    /** Polls via RAF until no ancestor is in pre-state, then fires callback. */
+    deferUntilVisible(element, callback) {
+        const poll = () => {
+            if (!this.hasPreStatedAncestor(element)) {
+                callback();
+            }
+            else {
+                requestAnimationFrame(poll);
+            }
+        };
+        requestAnimationFrame(poll);
+    }
     attachClick(node, ix, element) {
         const handler = () => {
             if (ix.reverseActions?.length) {
@@ -1368,10 +1426,13 @@ class InteractionEngineService {
             fill: 'both',
         });
         if (this.ENTRANCE_TYPES.has(action.type)) {
-            // Once the entrance animation finishes the element is fully visible —
-            // restore pointer events so it can be interacted with.
             anim.finished.then(() => {
                 element.style.removeProperty('pointer-events');
+                this.preStatedElements.delete(element);
+                // Builder: clear inline pre-state so cancelling animations later
+                // doesn't leave the element invisible after a play preview.
+                if (this.isBuilderMode())
+                    this.clearInlineAnimationStyles(element);
             }).catch(() => { });
         }
         else if (this.EXIT_TYPES.has(action.type)) {