@vectoriox/iox-builder 1.4.72 → 1.4.74

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1431,31 +1431,73 @@ class InteractionEngineService {
     }
     attachViewportEnter(node, ix, element) {
         const firedSet = new Set();
-        // In builder mode, use .preview-scroll as root so IntersectionObserver fires
-        // against the canvas clipping container (scrollTop-driven) rather than the browser viewport.
-        const root = this.overlayService.getIntersectionRoot() ?? null;
-        const observer = new IntersectionObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    const key = ix.id;
+        const fire = () => {
+            const key = ix.id;
+            if (ix.actions.some(a => a.once) && firedSet.has(key))
+                return;
+            if (this.hasPreStatedAncestor(element)) {
+                this.deferUntilVisible(element, () => {
                     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;
-                    }
+                        return;
                     firedSet.add(key);
                     this.runActions(node, ix.actions);
+                });
+                return;
+            }
+            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) {
+                    fire();
                 }
             }
-        }, { threshold: 0.1, root });
+        }, { threshold: 0.1 });
         observer.observe(element);
         return () => observer.disconnect();
     }
@@ -1618,7 +1660,11 @@ 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', '');
-        element.style.setProperty('pointer-events', 'none');
+        // 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');
+        }
         this.preStatedElements.add(element);
     }
     clearInlineAnimationStyles(element) {