@vectoriox/iox-builder 1.4.72 → 1.4.73

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1431,31 +1431,59 @@ 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;
+            };
+            const checkAndFire = () => { if (isInCanvasViewport())
+                fire(); };
+            // Initial check — defer one animation frame so layout is settled after render.
+            const rafId = requestAnimationFrame(checkAndFire);
+            // 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 () => {
+                cancelAnimationFrame(rafId);
+                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();
     }