@vectoriox/iox-builder 1.4.71 → 1.4.73

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,12 +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: skip pre-state for all auto-fire triggers (pageLoad,
-            // viewportEnter, scrollProgress) — they would stay permanently hidden if
-            // the trigger is suppressed or the canvas scroll container doesn't expose
-            // a standard browser viewport for IntersectionObserver.
-            // Click/hover triggers are always active so their pre-state is applied.
-            const skipPreState = inBuilder && ix.trigger !== 'click' && ix.trigger !== 'hover';
+            // 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)) {
@@ -1423,25 +1431,56 @@ class InteractionEngineService {
     }
     attachViewportEnter(node, ix, element) {
         const firedSet = new Set();
-        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 });
@@ -3848,6 +3887,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) {
@@ -3876,6 +3918,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);