@vectoriox/iox-builder 1.4.20 → 1.4.22

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1088,24 +1088,57 @@ class InteractionEngineService {
     constructor(overlayService) {
         this.overlayService = overlayService;
         this.attached = new Map();
+        /** Elements that have had pre-state applied (hidden by attach). */
+        this.preStatedElements = new Set();
+        /**
+         * Pre-states queued for elements that weren't registered yet when the owner
+         * node's attach() ran. Keyed by target node ID. Consumed when the target
+         * element's own attach() fires.
+         */
+        this.pendingPreStates = new Map();
+        /** Action types that animate an element from hidden → visible. */
+        this.ENTRANCE_TYPES = new Set([
+            'fadeIn', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'scaleIn', 'show',
+        ]);
+        /** Action types that animate an element from visible → hidden. */
+        this.EXIT_TYPES = new Set(['fadeOut', 'scaleOut', 'hide']);
     }
     /** Wire all interactions for a node to its rendered DOM element. */
     attach(node) {
-        if (!node.interactions?.length)
-            return;
         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 pending = this.pendingPreStates.get(node.id);
+            if (pending) {
+                for (const action of pending) {
+                    this.applyPreState(ref.element, action);
+                }
+                this.pendingPreStates.delete(node.id);
+            }
+        }
+        if (!node.interactions?.length)
+            return;
         const cleanups = [];
         for (const ix of node.interactions) {
-            // For entrance-type triggers, freeze the target at the animation's
-            // starting frame immediately so it is never briefly visible before
-            // the trigger fires (avoids the flash-then-animate flicker).
-            if (ix.trigger === 'pageLoad' || ix.trigger === 'viewportEnter') {
-                for (const action of ix.actions) {
+            // 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)
+                    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);
+                    }
                 }
             }
             const cleanup = this.attachInteraction(node, ix, ref.element);
@@ -1127,9 +1160,34 @@ class InteractionEngineService {
         const ref = this.overlayService.getNodeRef(node);
         if (ref) {
             ref.element.getAnimations().forEach(a => a.cancel());
-            ref.element.style.removeProperty('opacity');
-            ref.element.style.removeProperty('transform');
-            ref.element.style.removeProperty('visibility');
+            this.clearInlineAnimationStyles(ref.element);
+        }
+        // Also clean up pre-state on any target elements this node was animating.
+        if (node.interactions) {
+            for (const ix of node.interactions) {
+                for (const action of ix.actions) {
+                    // Remove any pending pre-states for unregistered targets.
+                    if (action.target && action.target !== 'self') {
+                        const pending = this.pendingPreStates.get(action.target);
+                        if (pending) {
+                            const filtered = pending.filter(a => a !== action);
+                            if (filtered.length) {
+                                this.pendingPreStates.set(action.target, filtered);
+                            }
+                            else {
+                                this.pendingPreStates.delete(action.target);
+                            }
+                        }
+                    }
+                    // Clean up inline styles on already-registered target elements.
+                    const target = this.resolveTarget(node, action);
+                    if (target && this.preStatedElements.has(target)) {
+                        target.getAnimations().forEach(a => a.cancel());
+                        this.clearInlineAnimationStyles(target);
+                        this.preStatedElements.delete(target);
+                    }
+                }
+            }
         }
     }
     /** Re-attach interactions after they have been edited in the panel. */
@@ -1249,23 +1307,35 @@ class InteractionEngineService {
         if (!keyframes.length)
             return;
         // 'both' = backwards (holds first keyframe during delay) + forwards (holds last keyframe after end).
-        // This eliminates any flicker during the delay period.
-        element.animate(keyframes, {
+        const anim = element.animate(keyframes, {
             duration: action.duration,
             delay: action.delay,
             easing: action.easing,
             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');
+            }).catch(() => { });
+        }
+        else if (this.EXIT_TYPES.has(action.type)) {
+            // Once the exit animation finishes the element is invisible —
+            // disable pointer events so it doesn't silently block clicks underneath it.
+            anim.finished.then(() => {
+                element.style.setProperty('pointer-events', 'none');
+            }).catch(() => { });
+        }
     }
     /**
      * Freeze an element at the animation's starting frame immediately, before any
-     * trigger fires. Without this, entrance animations (fadeIn, moveUp, …) show the
-     * element at its natural visible state for the time between mount and trigger —
-     * causing a visible-then-disappear-then-animate flicker.
+     * trigger fires. Called for ALL entrance-type actions regardless of trigger so
+     * that a click-triggered fadeIn on a menu overlay also starts it hidden.
      *
-     * Only call this for triggers that will eventually animate the element in
-     * (pageLoad, viewportEnter). Click/hover triggers must NOT pre-hide the element
-     * because the element should remain normally visible until interacted with.
+     * Also sets pointer-events:none so the invisible element does not block clicks
+     * on other content beneath it. Pointer events are restored in executeAction()
+     * once the entrance animation finishes.
      */
     applyPreState(element, action) {
         const { keyframes } = this.buildAnimation(action);
@@ -1275,6 +1345,18 @@ class InteractionEngineService {
         for (const [prop, val] of Object.entries(first)) {
             element.style[prop] = String(val);
         }
+        // Invisible element must not intercept pointer events.
+        const opacity = first['opacity'];
+        if (opacity === '0' || opacity === 0) {
+            element.style.setProperty('pointer-events', 'none');
+        }
+        this.preStatedElements.add(element);
+    }
+    clearInlineAnimationStyles(element) {
+        element.style.removeProperty('opacity');
+        element.style.removeProperty('transform');
+        element.style.removeProperty('visibility');
+        element.style.removeProperty('pointer-events');
     }
     reverseAction(element, action) {
         const { keyframes } = this.buildAnimation(action);