@vectoriox/iox-builder 1.4.73 → 1.4.75

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1448,44 +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;
-            };
-            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.
+        // 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');
@@ -2756,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.
@@ -2774,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);
             });