@foblex/flow 18.6.0 → 18.6.1

package/fesm2022/foblex-flow.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, ElementRef, Injector, input, effect, untracked, Directive, signal, numberAttribute, model, booleanAttribute, ChangeDetectionStrategy, Component, viewChild, Input, computed, contentChildren, contentChild, NgZone, Renderer2, DestroyRef, output, ViewContainerRef, TemplateRef, runInInjectionContext, EventEmitter, Output, afterNextRender, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, ElementRef, DestroyRef, Injector, input, effect, untracked, Directive, signal, numberAttribute, model, booleanAttribute, ChangeDetectionStrategy, Component, viewChild, Input, computed, contentChildren, contentChild, NgZone, Renderer2, output, ViewContainerRef, TemplateRef, runInInjectionContext, EventEmitter, Output, afterNextRender, NgModule } from '@angular/core';
 import { TransformModelExtensions, PointExtensions, RectExtensions, GetIntersections, RoundedRect, Point, LineExtensions, SizeExtensions, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
 import { FExecutionRegister, FMediator } from '@foblex/mediator';
@@ -1320,6 +1320,40 @@ class FConnectionContentBase {
      * Used internally for positioning calculations.
      */
     hostElement = inject((ElementRef)).nativeElement;
+    // ResizeObserver-backed size cache. Avoids `getBoundingClientRect`
+    // inside the placement loop, where one DOM read per label per redraw
+    // forced a synchronous layout flush and dominated drag-time at a few
+    // hundred labelled connections (issue #304). The observer also keeps
+    // the cache correct when the label content actually resizes.
+    //
+    // The initial size is populated by the observer's first asynchronous
+    // delivery — calling `getBoundingClientRect()` from the constructor
+    // re-introduces the thrashing during Angular CD when many labels
+    // mount in the same tick. Until the first delivery, the size stays
+    // at zero; the only visible effect is that the edge-guard does not
+    // push labels away from path endpoints on the very first frame.
+    // Labels at `position` ≠ 0 / 1 are unaffected.
+    _cachedSize = { width: 0, height: 0 };
+    _observer = null;
+    constructor() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this._observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const rect = entry.contentRect;
+                this._cachedSize = { width: rect.width, height: rect.height };
+            }
+        });
+        this._observer.observe(this.hostElement);
+        inject(DestroyRef).onDestroy(() => {
+            this._observer?.disconnect();
+            this._observer = null;
+        });
+    }
+    measureSize() {
+        return this._cachedSize;
+    }
 }
 
 /**
@@ -1555,7 +1589,7 @@ class PolylineContentPlace {
         const x = point.x + normal.x * lateral;
         const y = point.y + normal.y * lateral;
         // Edge guard
-        const projectedSize = this._sizeAlongDirection(content.hostElement, tangent);
+        const projectedSize = this._sizeAlongDirection(content, tangent);
         const halfExtent = projectedSize * 0.5;
         const distanceFromStart = progress * sampler.totalLength;
         const distanceFromEnd = sampler.totalLength - distanceFromStart;
@@ -1577,9 +1611,14 @@ class PolylineContentPlace {
         }
         return { x, y };
     }
-    _sizeAlongDirection(element, dir) {
-        const rect = RectExtensions.fromElement(element);
-        return Math.abs(dir.x) * rect.width + Math.abs(dir.y) * rect.height;
+    // Reads the size via `content.measureSize()` — a ResizeObserver-backed
+    // cache. This loop runs interleaved with `style.transform` writes for
+    // every label, so a `getBoundingClientRect()` here would force a
+    // synchronous layout flush per label and stall drag at a few hundred
+    // labelled connections (issue #304).
+    _sizeAlongDirection(content, dir) {
+        const size = content.measureSize();
+        return Math.abs(dir.x) * size.width + Math.abs(dir.y) * size.height;
     }
     _normalize180(angleDeg) {
         let a = (angleDeg + 180) % 360;
@@ -13415,10 +13454,22 @@ class FReflowOrchestrator {
         }
         return result;
     }
+    // We only emit a shift plan for nodes whose model signal matches
+    // `_position`. A mismatch means the node is mid-flight — either its
+    // `positionChanges()` effect has not yet mirrored the latest signal
+    // into `_position`, or an internal write (fit-to-children) advanced
+    // `_position` ahead of the model. Planning against a half-applied
+    // state poisons every candidate read from DOM and propagates one
+    // measured rect onto many siblings (issue #305). Skipping the rect
+    // makes the orchestrator wait until the next coherent tick.
     _safeGetRect(node) {
         if (!node.hostElement) {
             return null;
         }
+        const modelPos = node.position();
+        if (modelPos.x !== node._position.x || modelPos.y !== node._position.y) {
+            return null;
+        }
         try {
             return this._mediator.execute(new GetNormalizedElementRectRequest(node.hostElement));
         }