@vectoriox/iox-builder 1.4.74 → 1.4.75

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1448,58 +1448,51 @@ class InteractionEngineService {
             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.
+        // IntersectionObserver (browser viewport, no root) fires immediately for elements
+        // already visible in the canvas frame. Works for initial above-fold detection.
         const observer = new IntersectionObserver((entries) => {
             for (const entry of entries) {
                 if (entry.isIntersecting) {
+                    observer.disconnect();
                     fire();
                 }
             }
         }, { threshold: 0.1 });
         observer.observe(element);
-        return () => observer.disconnect();
+        if (!canvasRoot) {
+            // Production mode: IntersectionObserver alone is sufficient.
+            return () => observer.disconnect();
+        }
+        // Builder mode: Lenis scrolls .preview-scroll via scrollTop on an overflow:hidden
+        // element. Browsers may not re-trigger IntersectionObserver when scrollTop changes
+        // on a non-scroll-container. Add a manual BoundingClientRect check on every Lenis
+        // scroll frame (dispatched as a native 'scroll' event on .preview-lenis-content).
+        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 scrollFired = false;
+        const onLenisScroll = () => {
+            if (scrollFired)
+                return;
+            if (isInCanvasViewport()) {
+                scrollFired = true;
+                observer.disconnect();
+                fire();
+            }
+        };
+        const lenisEl = this.overlayService.getScrollContainer();
+        if (lenisEl)
+            lenisEl.addEventListener('scroll', onLenisScroll, { passive: true });
+        return () => {
+            scrollFired = true;
+            observer.disconnect();
+            if (lenisEl)
+                lenisEl.removeEventListener('scroll', onLenisScroll);
+        };
     }
     isBuilderMode() {
         return document.body.classList.contains('builder-active');
@@ -1660,11 +1653,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 +2763,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 +2785,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);
             });