@vectoriox/iox-builder 1.5.8 → 1.5.10

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1277,10 +1277,12 @@ class InteractionEngineService {
             return;
         const cleanups = [];
         for (const ix of node.interactions) {
-            // Pre-state: hide target elements before their entrance animation fires.
-            // 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');
+            // Pre-state: hide target elements before their entrance animation fires so
+            // the user sees a real hidden→visible animation on the canvas. Every trigger
+            // now runs live in the builder (see attachInteraction), so pre-state is applied
+            // for all of them EXCEPT scrollProgress — that trigger is unimplemented (no-op),
+            // so pre-stating it would leave the element stuck at opacity:0 forever.
+            const skipPreState = inBuilder && ix.trigger === 'scrollProgress';
             if (!skipPreState) {
                 for (const action of ix.actions) {
                     if (this.ENTRANCE_TYPES.has(action.type)) {
@@ -1407,16 +1409,13 @@ class InteractionEngineService {
     }
     // ── Private ──────────────────────────────────────────────
     attachInteraction(node, ix, element) {
-        // In builder mode, scroll-based and time-based triggers don't auto-fire — use the
-        // play button instead. viewportEnter is skipped because the IntersectionObserver
-        // fires immediately (element is visible in the canvas) and its WAAPI animation +
-        // the overlay ResizeObserver feedback loop triggers NG0103 during synchronize().
-        // Click/hover remain active so users can test those interactions on the canvas.
-        if (this.isBuilderMode() && (ix.trigger === 'pageLoad' ||
-            ix.trigger === 'scrollProgress' ||
-            ix.trigger === 'viewportEnter')) {
-            return () => { };
-        }
+        // All triggers run live in the builder canvas so the user sees the real
+        // animation (pageLoad on attach, viewportEnter on scroll-into-view, click/hover).
+        // The former NG0103 crash was caused by (a) Swiper's ResizeObserver created inside
+        // the Angular zone — fixed in SliderContainerComponent via runOutsideAngular — and
+        // (b) the overlay's Resize/MutationObservers synchronously re-dirtying the view
+        // during synchronize() — fixed by coalescing overlay updates through a RAF.
+        // scrollProgress is still unimplemented and returns a no-op below.
         switch (ix.trigger) {
             case 'pageLoad':
                 return this.attachPageLoad(node, ix, element);
@@ -2972,12 +2971,20 @@ class OverlayComponent {
         // Tracks which badge was last clicked — used by Cmd+C in page-ui.
         this.activeBadgeType = null;
         this.subs = [];
-        this.boundUpdate = () => this.updateAll();
-        this._scrollRaf = 0;
-        this.boundScrollUpdate = () => {
-            cancelAnimationFrame(this._scrollRaf);
-            this._scrollRaf = requestAnimationFrame(() => this.updateAll());
+        // All overlay repositioning is funnelled through a single coalesced RAF.
+        // Observer callbacks (Resize/Mutation) MUST NOT call updateAll()/markForCheck()
+        // synchronously — during a live interaction animation they can fire while
+        // Angular is inside ApplicationRef.synchronize(), re-dirtying the view within
+        // the same loop and blowing past MAX_SYNC_RUNS → NG0103. scheduleUpdate() defers
+        // the markForCheck to the next frame, outside the current synchronize() pass,
+        // and collapses a burst of notifications into one update per frame.
+        this._updateRaf = 0;
+        this.scheduleUpdate = () => {
+            cancelAnimationFrame(this._updateRaf);
+            this._updateRaf = requestAnimationFrame(() => this.updateAll());
         };
+        this.boundUpdate = () => this.scheduleUpdate();
+        this.boundScrollUpdate = () => this.scheduleUpdate();
         this.activeScrollContainer = null;
     }
     ngOnInit() {
@@ -2997,16 +3004,16 @@ class OverlayComponent {
         // Re-calculate overlay positions whenever zoom / device changes.
         this.subs.push(this.viewportService.state$.subscribe(() => {
             // Delay one frame so the DOM has applied the new transform/width.
-            requestAnimationFrame(() => this.updateAll());
+            this.scheduleUpdate();
         }));
         // Re-calculate when CSS rules change (margin/width applied via stylesheet).
-        this.subs.push(this.styleRegistry.changes$.subscribe(() => requestAnimationFrame(() => this.updateAll())));
+        this.subs.push(this.styleRegistry.changes$.subscribe(() => this.scheduleUpdate()));
         // Watch the canvas container for size changes (e.g. right panel open/close
         // transition changes canvas width, shifting element positions).
         const container = this.overlayService.getContainer();
         if (container) {
             if (typeof ResizeObserver !== 'undefined') {
-                this.containerResizeObserver = new ResizeObserver(() => this.updateAll());
+                this.containerResizeObserver = new ResizeObserver(this.scheduleUpdate);
                 this.containerResizeObserver.observe(container);
             }
         }
@@ -3030,7 +3037,7 @@ class OverlayComponent {
         this.resizeObserver?.disconnect();
         this.containerResizeObserver?.disconnect();
         this.mutationObserver?.disconnect();
-        cancelAnimationFrame(this._scrollRaf);
+        cancelAnimationFrame(this._updateRaf);
         window.removeEventListener('resize', this.boundUpdate);
         this.activeScrollContainer?.removeEventListener('scroll', this.boundScrollUpdate);
         this.activeScrollContainer = null;
@@ -3296,12 +3303,12 @@ class OverlayComponent {
                     skipFirst = false;
                     return;
                 }
-                this.updateAll();
+                this.scheduleUpdate();
             });
             this.resizeObserver.observe(styledEl);
         }
         // MutationObserver — catches style attribute changes (margin, padding etc.)
-        this.mutationObserver = new MutationObserver(() => this.updateAll());
+        this.mutationObserver = new MutationObserver(this.scheduleUpdate);
         this.mutationObserver.observe(styledEl, {
             attributes: true,
             attributeFilter: ['style', 'class'],