@vectoriox/iox-builder 1.4.74 → 1.4.76

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1266,12 +1266,11 @@ class InteractionEngineService {
         const cleanups = [];
         for (const ix of node.interactions) {
             // Pre-state: hide target elements before their entrance animation fires.
-            // In builder mode: skip pre-state only for pageLoad and scrollProgress —
-            // those triggers are suppressed in the canvas so elements would stay hidden.
-            // viewportEnter uses IntersectionObserver with .preview-scroll as its root,
-            // so it fires correctly when the canvas scrolls — pre-state is safe to apply.
-            // Click/hover triggers are always active so their pre-state is applied too.
-            const skipPreState = inBuilder && (ix.trigger === 'pageLoad' || ix.trigger === 'scrollProgress');
+            // In builder mode: skip pre-state for auto-fire triggers that either are
+            // suppressed (pageLoad, scrollProgress) or use a Lenis scroll container
+            // where pointer-events:none on canvas elements breaks wheel event routing
+            // (viewportEnter). Click/hover triggers are always active.
+            const skipPreState = inBuilder && ix.trigger !== 'click' && ix.trigger !== 'hover';
             if (!skipPreState) {
                 for (const action of ix.actions) {
                     if (this.ENTRANCE_TYPES.has(action.type)) {
@@ -1447,53 +1446,10 @@ class InteractionEngineService {
             firedSet.add(key);
             this.runActions(node, ix.actions);
         };
-        const canvasRoot = this.overlayService.getIntersectionRoot();
-        if (canvasRoot) {
-            // Builder mode: IntersectionObserver with a scaled/transformed canvas root is unreliable.
-            // Use getBoundingClientRect against the canvas clipping container instead.
-            const isInCanvasViewport = () => {
-                const rootRect = canvasRoot.getBoundingClientRect();
-                const elRect = element.getBoundingClientRect();
-                const overlapH = Math.min(elRect.bottom, rootRect.bottom) - Math.max(elRect.top, rootRect.top);
-                const elH = elRect.bottom - elRect.top;
-                return elH > 0 && overlapH / elH >= 0.1;
-            };
-            let fired = false;
-            const checkAndFire = () => {
-                if (fired)
-                    return;
-                if (isInCanvasViewport()) {
-                    fired = true;
-                    fire();
-                }
-            };
-            // Initial checks: a single RAF fires before deeply-nested Angular components
-            // have settled their layout. Schedule retries so above-fold elements are
-            // detected even when render takes a few frames.
-            const rafId = requestAnimationFrame(checkAndFire);
-            const t1 = window.setTimeout(checkAndFire, 100);
-            const t2 = window.setTimeout(checkAndFire, 400);
-            // Lenis changes scrollTop on .preview-scroll → native scroll event fires.
-            // Builder also dispatches a synthetic scroll on .preview-lenis-content.
-            // Listen on both so we catch all scroll notifications.
-            const lenisEl = this.overlayService.getScrollContainer();
-            canvasRoot.addEventListener('scroll', checkAndFire, { passive: true });
-            if (lenisEl)
-                lenisEl.addEventListener('scroll', checkAndFire, { passive: true });
-            return () => {
-                fired = true; // stop any pending checks
-                cancelAnimationFrame(rafId);
-                clearTimeout(t1);
-                clearTimeout(t2);
-                canvasRoot.removeEventListener('scroll', checkAndFire);
-                if (lenisEl)
-                    lenisEl.removeEventListener('scroll', checkAndFire);
-            };
-        }
-        // Production mode: standard IntersectionObserver against browser viewport.
         const observer = new IntersectionObserver((entries) => {
             for (const entry of entries) {
                 if (entry.isIntersecting) {
+                    observer.disconnect();
                     fire();
                 }
             }
@@ -1660,11 +1616,7 @@ class InteractionEngineService {
         // Mark as hidden so the builder overlay and drag engine can ignore this element
         // and all of its children regardless of which entrance animation type is used.
         element.setAttribute('data-iox-hidden', '');
-        // In builder mode the overlay handles all pointer interaction — omit
-        // pointer-events:none so wheel events still reach Lenis and canvas scroll works.
-        if (!this.isBuilderMode()) {
-            element.style.setProperty('pointer-events', 'none');
-        }
+        element.style.setProperty('pointer-events', 'none');
         this.preStatedElements.add(element);
     }
     clearInlineAnimationStyles(element) {
@@ -2774,9 +2726,13 @@ class RenderDirective {
             nativeEl.addEventListener('mouseenter', (event) => {
                 if (event._fromClick)
                     return;
+                if (nativeEl.hasAttribute('data-iox-hidden'))
+                    return;
                 this.onMouseEnter.emit({ element: nativeEl, node });
             });
             nativeEl.addEventListener('mouseleave', (event) => {
+                if (nativeEl.hasAttribute('data-iox-hidden'))
+                    return;
                 // When leaving a child component, check if the mouse moved to a
                 // parent component (e.g. card → section). If so, emit mouseenter
                 // for that parent instead of clearing hover entirely.
@@ -2792,12 +2748,15 @@ class RenderDirective {
             });
             nativeEl.addEventListener('click', (event) => {
                 event.stopPropagation();
+                if (nativeEl.hasAttribute('data-iox-hidden'))
+                    return;
                 this.onClick.emit({ element: nativeEl, node, componentRef });
             });
             nativeEl.addEventListener('contextmenu', (event) => {
                 event.preventDefault();
                 event.stopPropagation();
-                // Select the element first, then open the more menu at cursor position.
+                if (nativeEl.hasAttribute('data-iox-hidden'))
+                    return;
                 this.onClick.emit({ element: nativeEl, node, componentRef });
                 this.overlayService.triggerContextMenu(event.clientX, event.clientY);
             });