@vectoriox/iox-builder 1.4.70 → 1.4.72

package/fesm2022/vectoriox-iox-builder.mjs

@@ -209,6 +209,7 @@ class OverlayService {
         this.select$ = this.selectSubject.asObservable();
         this.containerElement = null;
         this.scrollContainerElement = null;
+        this.intersectionRootElement = null;
         /** Emits the scroll container element whenever it is registered. */
         this.scrollContainer$ = new Subject();
         /** Emits cursor coords when a canvas element is right-clicked. */
@@ -232,6 +233,13 @@ class OverlayService {
     getScrollContainer() {
         return this.scrollContainerElement;
     }
+    /** The clipping container used as IntersectionObserver root in builder mode (.preview-scroll). */
+    setIntersectionRoot(el) {
+        this.intersectionRootElement = el;
+    }
+    getIntersectionRoot() {
+        return this.intersectionRootElement;
+    }
     /**
      * Resolve the inner styled element.
      * Builder components apply [ngStyle] on their first child element,
@@ -1258,11 +1266,12 @@ class InteractionEngineService {
         const cleanups = [];
         for (const ix of node.interactions) {
             // Pre-state: hide target elements before their entrance animation fires.
-            // In builder mode, pageLoad and scrollProgress are suppressed so their
-            // targets must not be pre-hidden (would stay permanently hidden).
-            // viewportEnter IS active in builder mode so its pre-state is applied normally.
-            // Click/hover triggers are always active.
-            const skipPreState = inBuilder && ix.trigger === 'pageLoad' || inBuilder && ix.trigger === 'scrollProgress';
+            // 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.
+            const skipPreState = inBuilder && (ix.trigger === 'pageLoad' || ix.trigger === 'scrollProgress');
             if (!skipPreState) {
                 for (const action of ix.actions) {
                     if (this.ENTRANCE_TYPES.has(action.type)) {
@@ -1422,6 +1431,9 @@ 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) {
@@ -1443,7 +1455,7 @@ class InteractionEngineService {
                     this.runActions(node, ix.actions);
                 }
             }
-        }, { threshold: 0.1 });
+        }, { threshold: 0.1, root });
         observer.observe(element);
         return () => observer.disconnect();
     }
@@ -3847,6 +3859,9 @@ class BuilderComponent {
         // (Not previewScrollRef which is the Lenis eventsTarget — dispatching there
         // would cause Lenis to re-fire its scroll handler → infinite loop.)
         this.overlayService.setScrollContainer(this.lenisContentRef?.nativeElement || null);
+        // .preview-scroll is the Lenis clipping container (overflow:hidden, scrollTop changes).
+        // Used as IntersectionObserver root so viewportEnter triggers fire correctly on canvas scroll.
+        this.overlayService.setIntersectionRoot(this.previewScrollRef?.nativeElement || null);
         // Register the root canvas as a dropzone.
         const canvasEl = document.getElementById('canvas-preview');
         if (canvasEl) {
@@ -3875,6 +3890,7 @@ class BuilderComponent {
         this.previewFrameRo?.disconnect();
         this.overlayService.setContainer(null);
         this.overlayService.setScrollContainer(null);
+        this.overlayService.setIntersectionRoot(null);
         const canvasEl = document.getElementById('canvas-preview');
         if (canvasEl) {
             this.dragEngine.unregisterDropzone('canvas-preview', canvasEl);