@vectoriox/iox-builder 1.4.20 → 1.4.21

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1088,6 +1088,14 @@ 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();
+        /** 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) {
@@ -1098,11 +1106,12 @@ class InteractionEngineService {
             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). Without this, a click-triggered
+            // fadeIn on a menu overlay would start the overlay fully visible.
+            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);
@@ -1127,9 +1136,20 @@ 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) {
+                    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 +1269,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 +1307,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);