@vectoriox/iox-builder 1.4.75 → 1.4.77

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1266,11 +1266,8 @@ 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.
+            // In builder mode: skip only suppressed triggers (pageLoad, scrollProgress).
+            // viewportEnter IS active in builder — elements must be hidden before trigger.
             const skipPreState = inBuilder && (ix.trigger === 'pageLoad' || ix.trigger === 'scrollProgress');
             if (!skipPreState) {
                 for (const action of ix.actions) {
@@ -1447,52 +1444,48 @@ class InteractionEngineService {
             firedSet.add(key);
             this.runActions(node, ix.actions);
         };
-        const canvasRoot = this.overlayService.getIntersectionRoot();
-        // IntersectionObserver (browser viewport, no root) fires immediately for elements
-        // already visible in the canvas frame. Works for initial above-fold detection.
+        // IntersectionObserver with no root uses the browser viewport.
+        // It respects overflow:hidden clipping from .preview-scroll so it fires
+        // correctly as Lenis scrolls (Lenis changes scrollTop on .preview-scroll).
         const observer = new IntersectionObserver((entries) => {
             for (const entry of entries) {
                 if (entry.isIntersecting) {
-                    observer.disconnect();
+                    cleanup();
                     fire();
                 }
             }
         }, { threshold: 0.1 });
         observer.observe(element);
-        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;
-        };
+        // Builder: also listen to Lenis scroll events on .preview-lenis-content
+        // as a fallback in case IntersectionObserver misses elements behind a
+        // CSS transform (scale) on iox-page-component.
+        const lenisEl = this.overlayService.getScrollContainer();
         let scrollFired = false;
-        const onLenisScroll = () => {
+        const onScroll = () => {
             if (scrollFired)
                 return;
-            if (isInCanvasViewport()) {
+            const rootEl = this.overlayService.getIntersectionRoot();
+            if (!rootEl)
+                return;
+            const rootRect = rootEl.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;
+            if (elH > 0 && overlapH / elH >= 0.1) {
                 scrollFired = true;
-                observer.disconnect();
+                cleanup();
                 fire();
             }
         };
-        const lenisEl = this.overlayService.getScrollContainer();
         if (lenisEl)
-            lenisEl.addEventListener('scroll', onLenisScroll, { passive: true });
-        return () => {
-            scrollFired = true;
+            lenisEl.addEventListener('scroll', onScroll, { passive: true });
+        const cleanup = () => {
             observer.disconnect();
+            scrollFired = true;
             if (lenisEl)
-                lenisEl.removeEventListener('scroll', onLenisScroll);
+                lenisEl.removeEventListener('scroll', onScroll);
         };
+        return cleanup;
     }
     isBuilderMode() {
         return document.body.classList.contains('builder-active');
@@ -1638,9 +1631,9 @@ class InteractionEngineService {
      * trigger fires. Called for ALL entrance-type actions regardless of trigger so
      * that a click-triggered fadeIn on a menu overlay also starts it hidden.
      *
-     * Also sets pointer-events:none so the invisible element does not block clicks
-     * on other content beneath it. Pointer events are restored in executeAction()
-     * once the entrance animation finishes.
+     * In production also sets pointer-events:none. In builder mode pointer-events
+     * are left as-is so wheel events still reach the Lenis scroll container;
+     * the data-iox-hidden guard in render.directive.ts prevents overlay selection.
      */
     applyPreState(element, action) {
         const { keyframes } = this.buildAnimation(action);
@@ -1650,10 +1643,10 @@ class InteractionEngineService {
         for (const [prop, val] of Object.entries(first)) {
             element.style[prop] = String(val);
         }
-        // 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');
+        if (!this.isBuilderMode()) {
+            element.style.setProperty('pointer-events', 'none');
+        }
         this.preStatedElements.add(element);
     }
     clearInlineAnimationStyles(element) {