ngx-vflow 2.0.0 → 2.2.0

package/fesm2022/ngx-vflow.mjs

@@ -759,7 +759,7 @@ class DraggableService {
     moveNode(model, point) {
         const parent = model.parent();
         // keep node in bounds of parent
-        if (parent) {
+        if (model.extent() === 'parent' && parent) {
             point.x = Math.min(parent.width() - model.width(), point.x);
             point.x = Math.max(0, point.x);
             point.y = Math.min(parent.height() - model.height(), point.y);
@@ -1059,6 +1059,7 @@ const NODE_DEFAULTS = {
     height: 50,
     draggable: true,
     parentId: null,
+    extent: 'parent',
     preview: { style: {} },
     selected: false,
     color: '#1b262c',
@@ -1093,10 +1094,11 @@ function createBaseNode(node, useDefaults) {
         return {
             id: node.id,
             point: signal(node.point),
-            draggable: signal(node.draggable ?? NODE_DEFAULTS.draggable),
-            parentId: signal(node.parentId ?? NODE_DEFAULTS.parentId),
-            preview: signal(node.preview ?? NODE_DEFAULTS.preview),
-            selected: signal(node.selected ?? NODE_DEFAULTS.selected),
+            draggable: signal(isDefined(node.draggable) ? node.draggable : NODE_DEFAULTS.draggable),
+            parentId: signal(isDefined(node.parentId) ? node.parentId : NODE_DEFAULTS.parentId),
+            extent: signal(isDefined(node.extent) ? node.extent : NODE_DEFAULTS.extent),
+            preview: signal(isDefined(node.preview) ? node.preview : NODE_DEFAULTS.preview),
+            selected: signal(isDefined(node.selected) ? node.selected : NODE_DEFAULTS.selected),
         };
     }
     else {
@@ -1105,6 +1107,7 @@ function createBaseNode(node, useDefaults) {
             point: signal(node.point),
             draggable: isDefined(node.draggable) ? signal(node.draggable) : undefined,
             parentId: isDefined(node.parentId) ? signal(node.parentId) : undefined,
+            extent: isDefined(node.extent) ? signal(node.extent) : undefined,
             preview: isDefined(node.preview) ? signal(node.preview) : undefined,
             selected: isDefined(node.selected) ? signal(node.selected) : undefined,
         };
@@ -1413,6 +1416,7 @@ class NodeModel {
         this.renderOrder = signal(0);
         this.selected = signal(false);
         this.preview = signal({ style: {} });
+        this.extent = signal(NODE_DEFAULTS.extent);
         this.globalPoint = computed(() => {
             let parent = this.parent();
             let x = this.point().x;
@@ -1499,6 +1503,9 @@ class NodeModel {
         if (rawNode.selected) {
             this.selected = rawNode.selected;
         }
+        if (rawNode.extent) {
+            this.extent = rawNode.extent;
+        }
         if (rawNode.type === 'default-group' && rawNode.color) {
             this.color = rawNode.color;
         }
@@ -1569,18 +1576,18 @@ function createEdge(edge, options = { useDefaults: true }) {
     if (options.useDefaults) {
         return {
             id: edge.id,
-            type: edge.type ?? EDGE_DEFAULTS.type,
             source: edge.source,
             target: edge.target,
-            sourceHandle: edge.sourceHandle ?? '',
-            targetHandle: edge.targetHandle ?? '',
-            curve: signal(edge.curve ?? EDGE_DEFAULTS.curve),
-            data: signal(edge.data ?? EDGE_DEFAULTS.data),
-            edgeLabels: signal(edge.edgeLabels ?? EDGE_DEFAULTS.edgeLabels),
-            markers: signal(edge.markers ?? EDGE_DEFAULTS.markers),
-            reconnectable: signal(edge.reconnectable ?? EDGE_DEFAULTS.reconnectable),
-            floating: signal(edge.floating ?? EDGE_DEFAULTS.floating),
-            selected: signal(edge.selected ?? EDGE_DEFAULTS.selected),
+            type: isDefined(edge.type) ? edge.type : EDGE_DEFAULTS.type,
+            sourceHandle: isDefined(edge.sourceHandle) ? edge.sourceHandle : '',
+            targetHandle: isDefined(edge.targetHandle) ? edge.targetHandle : '',
+            curve: signal(isDefined(edge.curve) ? edge.curve : EDGE_DEFAULTS.curve),
+            data: signal(isDefined(edge.data) ? edge.data : EDGE_DEFAULTS.data),
+            edgeLabels: signal(isDefined(edge.edgeLabels) ? edge.edgeLabels : EDGE_DEFAULTS.edgeLabels),
+            markers: signal(isDefined(edge.markers) ? edge.markers : EDGE_DEFAULTS.markers),
+            reconnectable: signal(isDefined(edge.reconnectable) ? edge.reconnectable : EDGE_DEFAULTS.reconnectable),
+            floating: signal(isDefined(edge.floating) ? edge.floating : EDGE_DEFAULTS.floating),
+            selected: signal(isDefined(edge.selected) ? edge.selected : EDGE_DEFAULTS.selected),
         };
     }
     else {
@@ -3307,9 +3314,10 @@ function constrainRect(rect, model, side, minWidth, minHeight, maxWidth, maxHeig
 }
 
 class HandleModel {
-    constructor(rawHandle, parentNode) {
+    constructor(rawHandle, parentNode, batchingService) {
         this.rawHandle = rawHandle;
         this.parentNode = parentNode;
+        this.batchingService = batchingService;
         this.strokeWidth = 2;
         /**
          * Pre-computed size for default handle, changed dynamically
@@ -3332,10 +3340,15 @@ class HandleModel {
             initialValue: { width: 0, height: 0 },
         });
         // TODO: for some reason toLazySignal breaks unit tests, so we use toSignal here
-        this.hostPosition = toSignal(this.updateHostSizeAndPosition$.pipe(map(() => ({
-            x: this.hostReference instanceof HTMLElement ? this.hostReference.offsetLeft : 0, // for now just 0 for group nodes
-            y: this.hostReference instanceof HTMLElement ? this.hostReference.offsetTop : 0, // for now just 0 for group nodes
-        }))), {
+        this.hostPosition = toSignal(this.updateHostSizeAndPosition$.pipe(map(() => {
+            const offsets = this.hostReference instanceof HTMLElement
+                ? this.batchingService.getElementOffsets(this.hostReference)
+                : undefined;
+            return {
+                x: offsets ? offsets.offsetLeft : 0, // for now just 0 for group nodes
+                y: offsets ? offsets.offsetTop : 0, // for now just 0 for group nodes
+            };
+        })), {
             initialValue: { x: 0, y: 0 },
         });
         this.hostOffset = computed(() => {
@@ -3383,16 +3396,29 @@ class HandleModel {
                 node: this.parentNode.rawNode,
             },
         };
+        if (this.hostReference instanceof HTMLElement) {
+            this.batchingService.addElementCache(this.hostReference);
+        }
+    }
+    onDestroy() {
+        if (this.hostReference instanceof HTMLElement) {
+            this.batchingService.removeElementCache(this.hostReference);
+        }
     }
     updateHost() {
+        this.batchingService.markCacheAsDirty();
         this.updateHostSizeAndPosition$.next();
     }
     getHostSize() {
+        //TODO only get the hist ref width once ?
         if (this.hostReference instanceof HTMLElement) {
-            return {
-                width: this.hostReference.offsetWidth,
-                height: this.hostReference.offsetHeight,
-            };
+            const offsets = this.batchingService.getElementOffsets(this.hostReference);
+            if (offsets) {
+                return {
+                    width: offsets.offsetWidth,
+                    height: offsets.offsetHeight,
+                };
+            }
         }
         else if (this.hostReference instanceof SVGGraphicsElement) {
             return this.hostReference.getBBox();
@@ -3401,12 +3427,102 @@ class HandleModel {
     }
 }
 
+class OffsetBatchingCacheService {
+    constructor() {
+        this.elementOffsetCache = new Map();
+        this.cacheIsDirty = true;
+        this.minMsBetweenDirty = 16; //1000 ms/second to get 60fps = ~16ms
+        this.lastDirty = undefined;
+    }
+    addElementCache(element) {
+        this.elementOffsetCache.set(element, undefined);
+        this.markCacheAsDirty();
+    }
+    removeElementCache(element) {
+        this.elementOffsetCache.delete(element);
+    }
+    getElementOffsets(requestedElement) {
+        let requestedCache = undefined;
+        const cachedOffset = this.elementOffsetCache.get(requestedElement);
+        if (cachedOffset === undefined) {
+            this.addElementCache(requestedElement);
+        }
+        else {
+            requestedCache = cachedOffset;
+        }
+        //When something request to get the offset of a given element, compute the cache of all the elements of interest until we get the next dirty request.
+        if (this.cacheIsDirty) {
+            for (const { [0]: element } of this.elementOffsetCache) {
+                const offsetWidth = element.offsetWidth;
+                const offsetHeight = element.offsetHeight;
+                const offsetLeft = element.offsetLeft;
+                const offsetTop = element.offsetTop;
+                const cacheEntry = { offsetWidth, offsetHeight, offsetLeft, offsetTop };
+                this.elementOffsetCache.set(element, cacheEntry);
+                if (element === requestedElement) {
+                    requestedCache = cacheEntry;
+                }
+            }
+            this.cacheIsDirty = false;
+        }
+        return requestedCache;
+    }
+    markCacheAsDirty() {
+        const now = new Date();
+        if (this.lastDirty === undefined) {
+            this.cacheIsDirty = true;
+            this.lastDirty = now;
+            return;
+        }
+        //force the cache ttl to at minimum 16ms before considering it dirty
+        const msSinceLastDirty = now.getTime() - this.lastDirty?.getTime();
+        if (msSinceLastDirty > this.minMsBetweenDirty) {
+            this.cacheIsDirty = true;
+            this.lastDirty = now;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OffsetBatchingCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OffsetBatchingCacheService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OffsetBatchingCacheService, decorators: [{
+            type: Injectable
+        }] });
+
+class RequestAnimationFrameBatchingService {
+    constructor() {
+        this.callbacks = [];
+        this.requestAnimationFrameStarted = false;
+    }
+    batchAnimationFrame(callback) {
+        this.callbacks.push(callback);
+        if (!this.requestAnimationFrameStarted) {
+            this.requestAnimationFrameStarted = true;
+            requestAnimationFrame(() => {
+                this.callbacks.map((x) => {
+                    if (x) {
+                        x();
+                    }
+                });
+                this.callbacks = [];
+                this.requestAnimationFrameStarted = false;
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RequestAnimationFrameBatchingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RequestAnimationFrameBatchingService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RequestAnimationFrameBatchingService, decorators: [{
+            type: Injectable
+        }] });
+
 class HandleComponent {
     constructor() {
         this.injector = inject(Injector);
         this.handleService = inject(HandleService);
         this.element = inject(ElementRef).nativeElement;
         this.destroyRef = inject(DestroyRef);
+        this.requestAnimationFrameBatchingService = inject(RequestAnimationFrameBatchingService);
+        this.offsetBatchingCacheService = inject(OffsetBatchingCacheService);
         /**
          * At what side of node this component should be placed
          */
@@ -3435,10 +3551,15 @@ class HandleComponent {
                     template: this.template(),
                     userOffsetX: this.offsetX(),
                     userOffsetY: this.offsetY(),
-                }, node);
+                }, node, this.offsetBatchingCacheService);
                 this.handleService.createHandle(model);
-                requestAnimationFrame(() => model.updateHost());
-                this.destroyRef.onDestroy(() => this.handleService.destroyHandle(model));
+                this.requestAnimationFrameBatchingService.batchAnimationFrame(() => {
+                    model.updateHost();
+                });
+                this.destroyRef.onDestroy(() => {
+                    this.handleService.destroyHandle(model);
+                    model.onDestroy();
+                });
             }
         });
     }
@@ -3450,19 +3571,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             args: [{ standalone: true, selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
         }] });
 
+class ResizeObserverService {
+    constructor() {
+        this.zone = inject(NgZone);
+        this.thingsToObserve = new Map();
+        this.resizeObserver = new ResizeObserver((entries) => {
+            this.zone.run(() => {
+                for (const entry of entries) {
+                    const callbacks = this.thingsToObserve.get(entry.target);
+                    if (callbacks !== undefined) {
+                        callbacks.forEach((c) => c(entry));
+                    }
+                }
+            });
+        });
+    }
+    addObserver(element, callback) {
+        const callbacks = this.thingsToObserve.get(element);
+        if (callbacks === undefined) {
+            this.thingsToObserve.set(element, [callback]);
+        }
+        else {
+            callbacks.push(callback);
+        }
+        this.resizeObserver.observe(element);
+    }
+    removeObserver(element) {
+        this.thingsToObserve.delete(element);
+        if (this.resizeObserver) {
+            this.resizeObserver.unobserve(element);
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizeObserverService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizeObserverService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class NodeHandlesControllerDirective {
     constructor() {
         this.nodeAccessor = inject(NodeAccessorService);
-        this.zone = inject(NgZone);
         this.destroyRef = inject(DestroyRef);
         this.hostElementRef = inject(ElementRef);
+        this.resizeObserverService = inject(ResizeObserverService);
+        this.requestAnimationFrameBatchingService = inject(RequestAnimationFrameBatchingService);
     }
     ngOnInit() {
         const model = this.nodeAccessor.model();
+        let isTrackingHostElement = false;
         model.handles$
-            .pipe(switchMap((handles) => resizable([...handles.map((h) => h.hostReference), this.hostElementRef.nativeElement], this.zone).pipe(map(() => handles))), tap((handles) => {
+            .pipe(pairwise(), tap(([previousHandles, currentHandles]) => {
+            const handlesToRemove = previousHandles.filter((prev) => currentHandles.find((curr) => curr.hostReference === prev.hostReference) === undefined);
+            handlesToRemove.forEach((h) => this.resizeObserverService.removeObserver(h.hostReference));
+            const handlesToAdd = currentHandles.filter((curr) => previousHandles.find((prev) => curr.hostReference === prev.hostReference) === undefined);
+            if (!isTrackingHostElement) {
+                this.resizeObserverService.addObserver(this.hostElementRef.nativeElement, () => {
+                    currentHandles.forEach((h) => h.updateHost());
+                });
+                isTrackingHostElement = true;
+            }
+            handlesToAdd.forEach((h) => this.resizeObserverService.addObserver(h.hostReference, () => {
+                currentHandles.forEach((h) => h.updateHost());
+            }));
+            //Here we need this to be in a requestAnimationFrame otherwise the handle can still be present in the dom which throws off the offset cache
+            this.requestAnimationFrameBatchingService.batchAnimationFrame(() => {
+                currentHandles.forEach((h) => h.updateHost());
+            });
             // TODO (performance) inspect how to avoid calls of this when flow initially rendered
-            handles.forEach((h) => h.updateHost());
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
@@ -3483,19 +3662,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class NodeResizeControllerDirective {
     constructor() {
         this.nodeAccessor = inject(NodeAccessorService);
-        this.zone = inject(NgZone);
-        this.destroyRef = inject(DestroyRef);
+        this.resizeObserverService = inject(ResizeObserverService);
         this.hostElementRef = inject(ElementRef);
     }
     ngOnInit() {
         const model = this.nodeAccessor.model();
-        const host = this.hostElementRef.nativeElement;
-        merge(resizable([host], this.zone))
-            .pipe(startWith(null), filter(() => !model.resizing()), tap(() => {
-            model.width.set(host.clientWidth);
-            model.height.set(host.clientHeight);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
+        this.resizeObserverService.addObserver(this.hostElementRef.nativeElement, (resizeEntry) => {
+            model.width.set(resizeEntry.target.clientWidth);
+            model.height.set(resizeEntry.target.clientHeight);
+        });
+    }
+    ngOnDestroy() {
+        this.resizeObserverService.removeObserver(this.hostElementRef.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NodeResizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: NodeResizeControllerDirective, isStandalone: true, selector: "[nodeResizeController]", ngImport: i0 }); }
@@ -3749,6 +3927,8 @@ const defaultBg = '#fff';
 const defaultGap = 20;
 const defaultDotSize = 2;
 const defaultDotColor = 'rgb(177, 177, 183)';
+const defaultGridSize = 20;
+const defaultStrokeWidth = 2;
 const defaultImageScale = 0.1;
 const defaultRepeated = true;
 class BackgroundComponent {
@@ -3757,21 +3937,16 @@ class BackgroundComponent {
         this.rootSvg = inject(RootSvgReferenceDirective).element;
         this.settingsService = inject(FlowSettingsService);
         this.backgroundSignal = this.settingsService.background;
-        // DOTS PATTERN
-        this.scaledGap = computed(() => {
-            const background = this.backgroundSignal();
-            if (background.type === 'dots') {
-                const zoom = this.viewportService.readableViewport().zoom;
-                return zoom * (background.gap ?? defaultGap);
-            }
-            return 0;
+        this.x = computed(() => {
+            return this.viewportService.readableViewport().x % this.scaledGap();
+        });
+        this.y = computed(() => {
+            return this.viewportService.readableViewport().y % this.scaledGap();
         });
-        this.x = computed(() => this.viewportService.readableViewport().x % this.scaledGap());
-        this.y = computed(() => this.viewportService.readableViewport().y % this.scaledGap());
         this.patternColor = computed(() => {
-            const bg = this.backgroundSignal();
-            if (bg.type === 'dots') {
-                return bg.color ?? defaultDotColor;
+            const background = this.backgroundSignal();
+            if (background.type === 'dots' || background.type === 'grid') {
+                return background.color ?? defaultDotColor;
             }
             return defaultDotColor;
         });
@@ -3780,6 +3955,29 @@ class BackgroundComponent {
             if (background.type === 'dots') {
                 return (this.viewportService.readableViewport().zoom * (background.size ?? defaultDotSize)) / 2;
             }
+            if (background.type === 'grid') {
+                return this.viewportService.readableViewport().zoom * (background.size ?? defaultGridSize);
+            }
+            return 0;
+        });
+        this.scaledGap = computed(() => {
+            const background = this.backgroundSignal();
+            const zoom = this.viewportService.readableViewport().zoom;
+            if (background.type === 'dots') {
+                return zoom * (background.gap ?? defaultGap);
+            }
+            if (background.type === 'grid') {
+                return zoom * (background.size ?? defaultGridSize);
+            }
+            return 0;
+        });
+        // GRID PATTERN
+        this.strokeWidth = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'grid') {
+                const zoom = this.viewportService.readableViewport().zoom;
+                return zoom * ((background.strokeWidth ?? defaultStrokeWidth) / 2);
+            }
             return 0;
         });
         // IMAGE PATTERN
@@ -3837,17 +4035,20 @@ class BackgroundComponent {
             if (background.type === 'dots') {
                 this.rootSvg.style.backgroundColor = background.backgroundColor ?? defaultBg;
             }
+            if (background.type === 'grid') {
+                this.rootSvg.style.backgroundColor = background.backgroundColor ?? defaultBg;
+            }
             if (background.type === 'solid') {
                 this.rootSvg.style.backgroundColor = background.color;
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BackgroundComponent, isStandalone: true, selector: "g[background]", ngImport: i0, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    patternUnits=\"userSpaceOnUse\"\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\">\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\" />\n  </svg:pattern>\n\n  <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      patternUnits=\"userSpaceOnUse\"\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\">\n      <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n    </svg:pattern>\n\n    <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n  }\n\n  @if (!repeated()) {\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\" />\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BackgroundComponent, isStandalone: true, selector: "g[background]", ngImport: i0, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    patternUnits=\"userSpaceOnUse\"\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\">\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\" />\n  </svg:pattern>\n\n  <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      patternUnits=\"userSpaceOnUse\"\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\">\n      <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n    </svg:pattern>\n\n    <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n  }\n\n  @if (!repeated()) {\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\" />\n  }\n}\n\n@if (backgroundSignal().type === 'grid') {\n  <svg:pattern\n    patternUnits=\"userSpaceOnUse\"\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"patternSize()\"\n    [attr.height]=\"patternSize()\">\n    <svg:path\n      fill=\"none\"\n      [attr.d]=\"'M ' + patternSize() + ' 0 L 0 0 0 ' + patternSize()\"\n      [attr.stroke]=\"patternColor()\"\n      [attr.stroke-width]=\"strokeWidth()\" />\n  </svg:pattern>\n\n  <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BackgroundComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    patternUnits=\"userSpaceOnUse\"\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\">\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\" />\n  </svg:pattern>\n\n  <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      patternUnits=\"userSpaceOnUse\"\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\">\n      <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n    </svg:pattern>\n\n    <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n  }\n\n  @if (!repeated()) {\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\" />\n  }\n}\n" }]
+            args: [{ standalone: true, selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    patternUnits=\"userSpaceOnUse\"\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\">\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\" />\n  </svg:pattern>\n\n  <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      patternUnits=\"userSpaceOnUse\"\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\">\n      <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n    </svg:pattern>\n\n    <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n  }\n\n  @if (!repeated()) {\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\" />\n  }\n}\n\n@if (backgroundSignal().type === 'grid') {\n  <svg:pattern\n    patternUnits=\"userSpaceOnUse\"\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"patternSize()\"\n    [attr.height]=\"patternSize()\">\n    <svg:path\n      fill=\"none\"\n      [attr.d]=\"'M ' + patternSize() + ' 0 L 0 0 0 ' + patternSize()\"\n      [attr.stroke]=\"patternColor()\"\n      [attr.stroke-width]=\"strokeWidth()\" />\n  </svg:pattern>\n\n  <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n" }]
         }], ctorParameters: () => [] });
 function createImage(url) {
     const image = new Image();
@@ -4263,8 +4464,16 @@ class AlignmentHelperComponent {
             .pipe(filter(isNodeDragEndStatus), map((status) => status.payload.node), map((node) => [node, this.intersections()]), tap(([node, intersections]) => {
             if (intersections) {
                 const snapped = { x: intersections.snappedX, y: intersections.snappedY };
-                const parentIfExists = node.parent() ? [node.parent()] : [];
-                node.setPoint(getSpacePoints(snapped, parentIfExists)[0]);
+                const parent = node.parent();
+                if (parent) {
+                    node.setPoint({
+                        x: snapped.x - parent.globalPoint().x,
+                        y: snapped.y - parent.globalPoint().y,
+                    });
+                }
+                else {
+                    node.setPoint(snapped);
+                }
             }
         }), takeUntilDestroyed())
             .subscribe();
@@ -4680,6 +4889,9 @@ class VflowComponent {
             OverlaysService,
             { provide: PreviewFlowRenderStrategyService, useClass: ViewportPreviewFlowRenderStrategyService },
             FlowRenderingService,
+            ResizeObserverService,
+            OffsetBatchingCacheService,
+            RequestAnimationFrameBatchingService,
         ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["nodesChanges", "nodesChanges", "nodesChanges.position", "nodesChanges.position", "nodesChanges.size", "nodesChanges.size", "nodesChanges.add", "nodesChanges.add", "nodesChanges.remove", "nodesChanges.remove", "nodesChanges.select", "nodesChanges.select", "edgesChanges", "edgesChanges", "edgesChanges.detached", "edgesChanges.detached", "edgesChanges.add", "edgesChanges.add", "edgesChanges.remove", "edgesChanges.remove", "edgesChanges.select", "edgesChanges.select"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext autoPan>\n    @if (alignmentHelper(); as alignmentHelper) {\n      @if (alignmentHelper === true) {\n        <svg:g alignmentHelper />\n      } @else {\n        <svg:g alignmentHelper [tolerance]=\"alignmentHelper.tolerance\" [lineColor]=\"alignmentHelper.lineColor\" />\n      }\n    }\n\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (flowOptimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!flowOptimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n\n@if (flowOptimization().virtualization) {\n  <canvas previewFlow class=\"preview-flow\" [width]=\"flowWidth()\" [height]=\"flowHeight()\"></canvas>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}.root-svg{grid-row-start:1;grid-column-start:1}.preview-flow{pointer-events:none;grid-row-start:1;grid-column-start:1}\n"], dependencies: [{ kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PreviewFlowComponent, selector: "canvas[previewFlow]", inputs: ["width", "height"] }, { kind: "component", type: AlignmentHelperComponent, selector: "g[alignmentHelper]", inputs: ["tolerance", "lineColor"] }, { kind: "directive", type: AutoPanDirective, selector: "[autoPan]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: VflowComponent, decorators: [{
@@ -4700,6 +4912,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         OverlaysService,
                         { provide: PreviewFlowRenderStrategyService, useClass: ViewportPreviewFlowRenderStrategyService },
                         FlowRenderingService,
+                        ResizeObserverService,
+                        OffsetBatchingCacheService,
+                        RequestAnimationFrameBatchingService,
                     ], hostDirectives: [changesControllerHostDirective], imports: [
                         RootSvgReferenceDirective,
                         RootSvgContextDirective,