@vectoriox/iox-builder 1.4.45 → 1.4.47

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1150,8 +1150,9 @@ 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.
+        const inBuilder = this.isBuilderMode();
+        // Apply any pre-states queued for THIS element by earlier-registered nodes.
+        // Pending entries are only added when appropriate (see loop below), so always consume.
         if (node.id) {
             const pending = this.pendingPreStates.get(node.id);
             if (pending) {
@@ -1165,21 +1166,24 @@ 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 target elements before their entrance animation fires.
+            // In builder mode, skip auto-fire triggers (pageLoad, viewportEnter, scrollProgress)
+            // because those triggers are also suppressed in builder mode — targets would stay
+            // permanently hidden. Manual triggers (click, hover) are kept active on the canvas,
+            // so their targets should start in the correct pre-state.
+            const skipPreState = inBuilder && ix.trigger !== 'click' && ix.trigger !== 'hover';
+            if (!skipPreState) {
+                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 +1255,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 +1279,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);
@@ -1317,6 +1339,9 @@ 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;
@@ -1405,12 +1430,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 and clear the pre-state tracker so children
-            // waiting on this ancestor can fire their deferred animations.
             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)) {