ngx-vflow 0.2.2 → 0.3.0

package/fesm2022/ngx-vflow.mjs

@@ -1,13 +1,14 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, Directive, effect, Input, TemplateRef, computed, EventEmitter, Output, untracked, Injector, Component, ChangeDetectionStrategy, ViewChild, HostListener, runInInjectionContext, ContentChild, NgModule } from '@angular/core';
+import { signal, Injectable, inject, ElementRef, Directive, effect, Input, TemplateRef, computed, EventEmitter, Output, untracked, runInInjectionContext, Injector, NgZone, Component, ChangeDetectionStrategy, ViewChild, HostListener, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
 import { drag } from 'd3-drag';
 import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { switchMap, merge, skip, map, pairwise, filter, observeOn, asyncScheduler, zip, distinctUntilChanged, tap, fromEvent } from 'rxjs';
+import { switchMap, merge, skip, map, pairwise, filter, observeOn, asyncScheduler, zip, distinctUntilChanged, tap, Subject, Observable, Subscription, startWith, fromEvent } from 'rxjs';
 import { path } from 'd3-path';
+import { __decorate } from 'tslib';
 
 class ViewportService {
     constructor() {
@@ -237,8 +238,8 @@ function addNodesToEdges(nodes, edges) {
         return acc;
     }, {});
     edges.forEach(e => {
-        e.source = nodesById[e.edge.source];
-        e.target = nodesById[e.edge.target];
+        e.source.set(nodesById[e.edge.source]);
+        e.target.set(nodesById[e.edge.target]);
     });
 }
 
@@ -344,7 +345,7 @@ class FlowEntitiesService {
         });
         this.validEdges = computed(() => {
             const nodes = this.nodes();
-            return this.edges().filter(e => nodes.includes(e.source) && nodes.includes(e.target));
+            return this.edges().filter(e => nodes.includes(e.source()) && nodes.includes(e.target()));
         });
     }
     getNode(id) {
@@ -402,54 +403,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class HandleModel {
-    constructor(rawHandle, parentNode) {
-        this.rawHandle = rawHandle;
-        this.parentNode = parentNode;
-        this.strokeWidth = 2;
-        this.size = signal({
-            width: 10 + (2 * this.strokeWidth),
-            height: 10 + (2 * this.strokeWidth)
-        });
-        this.offset = computed(() => {
-            switch (this.rawHandle.position) {
-                case 'left': return {
-                    x: 0,
-                    y: this.parentPosition().y + (this.parentSize().height / 2)
-                };
-                case 'right': return {
-                    x: this.parentNode.size().width,
-                    y: this.parentPosition().y + (this.parentSize().height / 2)
-                };
-                case 'top': return {
-                    x: this.parentPosition().x + (this.parentSize().width / 2),
-                    y: 0
-                };
-                case 'bottom': return {
-                    x: this.parentPosition().x + this.parentSize().width / 2,
-                    y: this.parentNode.size().height
-                };
-            }
-        });
-        this.sizeOffset = computed(() => {
-            switch (this.rawHandle.position) {
-                case 'left': return { x: -(this.size().width / 2), y: 0 };
-                case 'right': return { x: this.size().width / 2, y: 0 };
-                case 'top': return { x: 0, y: -(this.size().height / 2) };
-                case 'bottom': return { x: 0, y: this.size().height / 2 };
-            }
-        });
-        this.pointAbsolute = computed(() => {
-            return {
-                x: this.parentNode.point().x + this.offset().x + this.sizeOffset().x,
-                y: this.parentNode.point().y + this.offset().y + this.sizeOffset().y,
-            };
-        });
-        this.parentSize = signal(this.rawHandle.parentSize);
-        this.parentPosition = signal(this.rawHandle.parentPosition);
-    }
-}
-
 class NodeModel {
     constructor(node) {
         this.node = node;
@@ -460,26 +413,8 @@ class NodeModel {
         // Now source and handle positions derived from parent flow
         this.sourcePosition = computed(() => this.flow.handlePositions().source);
         this.targetPosition = computed(() => this.flow.handlePositions().target);
-        this.handles = computed(() => {
-            if (this.node.type === 'html-template') {
-                return this.rawHandles();
-            }
-            return [
-                new HandleModel({
-                    position: this.sourcePosition(),
-                    type: 'source',
-                    parentPosition: { x: 0, y: 0 },
-                    parentSize: this.size()
-                }, this),
-                new HandleModel({
-                    position: this.targetPosition(),
-                    type: 'target',
-                    parentPosition: { x: 0, y: 0 },
-                    parentSize: this.size()
-                }, this),
-            ];
-        });
-        this.rawHandles = signal([]);
+        this.handles = signal([]);
+        this.handles$ = toObservable(this.handles);
         this.draggable = true;
         // disabled for configuration for now
         this.magnetRadius = 20;
@@ -610,26 +545,30 @@ function getPointOnBezier(sourcePoint, targetPoint, controlPoint1, controlPoint2
 class EdgeModel {
     constructor(edge) {
         this.edge = edge;
+        this.source = signal(undefined);
+        this.target = signal(undefined);
         this.detached = computed(() => {
-            if (!this.source || !this.target) {
+            const source = this.source();
+            const target = this.target();
+            if (!source || !target) {
                 return true;
             }
             let existsSourceHandle = false;
             let existsTargetHandle = false;
             if (this.edge.sourceHandle) {
-                existsSourceHandle = !!this.source.handles()
+                existsSourceHandle = !!source.handles()
                     .find(handle => handle.rawHandle.id === this.edge.sourceHandle);
             }
             else {
-                existsSourceHandle = !!this.source.handles()
+                existsSourceHandle = !!source.handles()
                     .find(handle => handle.rawHandle.type === 'source');
             }
             if (this.edge.targetHandle) {
-                existsTargetHandle = !!this.target.handles()
+                existsTargetHandle = !!target.handles()
                     .find(handle => handle.rawHandle.id === this.edge.targetHandle);
             }
             else {
-                existsTargetHandle = !!this.target.handles()
+                existsTargetHandle = !!target.handles()
                     .find(handle => handle.rawHandle.type === 'target');
             }
             return !existsSourceHandle || !existsTargetHandle;
@@ -638,20 +577,20 @@ class EdgeModel {
         this.path = computed(() => {
             let source;
             if (this.edge.sourceHandle) {
-                source = this.source.handles()
+                source = this.source()?.handles()
                     .find(handle => handle.rawHandle.id === this.edge.sourceHandle);
             }
             else {
-                source = this.source.handles()
+                source = this.source()?.handles()
                     .find(handle => handle.rawHandle.type === 'source');
             }
             let target;
             if (this.edge.targetHandle) {
-                target = this.target.handles()
+                target = this.target()?.handles()
                     .find(handle => handle.rawHandle.id === this.edge.targetHandle);
             }
             else {
-                target = this.target.handles()
+                target = this.target()?.handles()
                     .find(handle => handle.rawHandle.type === 'target');
             }
             // TODO: don't like this
@@ -752,7 +691,7 @@ class EdgeChangesService {
         this.edgeDetachedChange$ = merge(toObservable(computed(() => {
             const nodes = this.entitiesService.nodes();
             const edges = untracked(this.entitiesService.edges);
-            return edges.filter(({ source, target }) => !nodes.includes(source) || !nodes.includes(target));
+            return edges.filter(({ source, target }) => !nodes.includes(source()) || !nodes.includes(target()));
         })), toObservable(this.entitiesService.edges).pipe(switchMap((edges) => {
             return zip(...edges.map(e => e.detached$.pipe(map(() => e))));
         }), map((edges) => edges.filter(e => e.detached())), 
@@ -825,14 +764,13 @@ class HandleService {
     createHandle(newHandle) {
         const node = this.node();
         if (node) {
-            node.rawHandles.update(handles => [...handles, newHandle]);
+            node.handles.update(handles => [...handles, newHandle]);
         }
     }
     destroyHandle(handleToDestoy) {
         const node = this.node();
-        // TODO: microtask
         if (node) {
-            queueMicrotask(() => node.rawHandles.update(handles => handles.filter(handle => handle !== handleToDestoy)));
+            node.handles.update(handles => handles.filter(handle => handle !== handleToDestoy));
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -842,39 +780,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
-class NodeComponent {
+class HandleModel {
+    constructor(rawHandle, parentNode) {
+        this.rawHandle = rawHandle;
+        this.parentNode = parentNode;
+        this.strokeWidth = 2;
+        /**
+         * Pre-computed size for default handle, changed dynamically
+         * for custom handles
+         */
+        this.size = signal({
+            width: 10 + (2 * this.strokeWidth),
+            height: 10 + (2 * this.strokeWidth)
+        });
+        this.offset = computed(() => {
+            switch (this.rawHandle.position) {
+                case 'left': return {
+                    x: 0,
+                    y: this.parentPosition().y + (this.parentSize().height / 2)
+                };
+                case 'right': return {
+                    x: this.parentNode.size().width,
+                    y: this.parentPosition().y + (this.parentSize().height / 2)
+                };
+                case 'top': return {
+                    x: this.parentPosition().x + (this.parentSize().width / 2),
+                    y: 0
+                };
+                case 'bottom': return {
+                    x: this.parentPosition().x + this.parentSize().width / 2,
+                    y: this.parentNode.size().height
+                };
+            }
+        });
+        this.sizeOffset = computed(() => {
+            switch (this.rawHandle.position) {
+                case 'left': return { x: -(this.size().width / 2), y: 0 };
+                case 'right': return { x: this.size().width / 2, y: 0 };
+                case 'top': return { x: 0, y: -(this.size().height / 2) };
+                case 'bottom': return { x: 0, y: this.size().height / 2 };
+            }
+        });
+        this.pointAbsolute = computed(() => {
+            return {
+                x: this.parentNode.point().x + this.offset().x + this.sizeOffset().x,
+                y: this.parentNode.point().y + this.offset().y + this.sizeOffset().y,
+            };
+        });
+        this.state = signal('idle');
+        this.updateParentSizeAndPosition$ = new Subject();
+        this.parentSize = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
+            width: this.parentReference.offsetWidth,
+            height: this.parentReference.offsetHeight
+        }))), {
+            initialValue: { width: 0, height: 0 }
+        });
+        this.parentPosition = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
+            x: this.parentReference.offsetLeft,
+            y: this.parentReference.offsetTop
+        }))), {
+            initialValue: { x: 0, y: 0 }
+        });
+        this.parentReference = this.rawHandle.parentReference;
+        this.template = this.rawHandle.template;
+        this.templateContext = {
+            $implicit: {
+                point: this.offset,
+                state: this.state
+            }
+        };
+    }
+    updateParent() {
+        this.updateParentSizeAndPosition$.next();
+    }
+}
+
+function resizable(elems, zone) {
+    return new Observable((subscriber) => {
+        let ro = new ResizeObserver((entries) => {
+            zone.run(() => subscriber.next(entries));
+        });
+        elems.forEach(e => ro.observe(e));
+        return () => ro.disconnect();
+    });
+}
+
+function InjectionContext(target, key, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        if (this instanceof WithInjectorDirective) {
+            return runInInjectionContext(this.injector, () => originalMethod.apply(this, args));
+        }
+        else {
+            throw new Error('Class that contains decorated method must extends WithInjectorDirective class');
+        }
+    };
+    // Return the modified descriptor
+    return descriptor;
+}
+class WithInjectorDirective {
+    constructor() {
+        this.injector = inject(Injector);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithInjectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: WithInjectorDirective, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithInjectorDirective, decorators: [{
+            type: Directive
+        }] });
+
+function Microtask(target, key, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        queueMicrotask(() => {
+            originalMethod?.apply(this, args);
+        });
+    };
+    // Return the modified descriptor
+    return descriptor;
+}
+
+class HandleSizeControllerDirective {
+    constructor() {
+        this.handleWrapper = inject(ElementRef);
+    }
+    ngAfterViewInit() {
+        const element = this.handleWrapper.nativeElement;
+        const rect = element.getBBox();
+        const stroke = getChildStrokeWidth(element);
+        this.handleModel.size.set({
+            width: rect.width + stroke,
+            height: rect.height + stroke
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: { handleModel: ["handleSizeController", "handleModel"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[handleSizeController]' }]
+        }], propDecorators: { handleModel: [{
+                type: Input,
+                args: [{ required: true, alias: 'handleSizeController' }]
+            }] } });
+function getChildStrokeWidth(element) {
+    const child = element.firstElementChild;
+    if (child) {
+        const stroke = getComputedStyle(child).strokeWidth;
+        const strokeAsNumber = Number(stroke.replace('px', ''));
+        if (isNaN(strokeAsNumber)) {
+            return 0;
+        }
+        return strokeAsNumber;
+    }
+    return 0;
+}
+
+class NodeComponent extends WithInjectorDirective {
     constructor() {
+        super(...arguments);
         this.handleService = inject(HandleService);
-        this.injector = inject(Injector);
+        this.zone = inject(NgZone);
         this.draggableService = inject(DraggableService);
         this.flowStatusService = inject(FlowStatusService);
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.hostRef = inject(ElementRef);
         this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
             this.flowStatusService.status().state === 'connection-validation');
-        this.sourceHanldeState = signal('idle');
-        this.targetHandleState = signal('idle');
+        this.subscription = new Subscription();
     }
     ngOnInit() {
         this.handleService.node.set(this.nodeModel);
         this.draggableService.toggleDraggable(this.hostRef.nativeElement, this.nodeModel);
+        const sub = this.nodeModel.handles$
+            .pipe(switchMap((handles) => resizable(handles.map(h => h.parentReference), this.zone)
+            .pipe(map(() => handles))), tap((handles) => handles.forEach(h => h.updateParent())))
+            .subscribe();
+        this.subscription.add(sub);
     }
     ngAfterViewInit() {
-        // TODO remove microtask
-        queueMicrotask(() => {
-            if (this.nodeModel.node.type === 'default') {
-                const { width, height } = this.nodeContentRef.nativeElement.getBBox();
-                this.nodeModel.size.set({ width, height });
-            }
-            if (this.nodeModel.node.type === 'html-template') {
+        this.setInitialHandles();
+        if (this.nodeModel.node.type === 'default') {
+            const { width, height } = this.nodeContentRef.nativeElement.getBBox();
+            this.nodeModel.size.set({ width, height });
+        }
+        if (this.nodeModel.node.type === 'html-template') {
+            const sub = resizable([this.htmlWrapperRef.nativeElement], this.zone)
+                .pipe(startWith(null), tap(() => {
                 const width = this.htmlWrapperRef.nativeElement.clientWidth;
                 const height = this.htmlWrapperRef.nativeElement.clientHeight;
                 this.nodeModel.size.set({ width, height });
-            }
-        });
+            })).subscribe();
+            this.subscription.add(sub);
+        }
     }
     ngOnDestroy() {
         this.draggableService.destroy(this.hostRef.nativeElement);
+        this.subscription.unsubscribe();
     }
     startConnection(event, handle) {
         // ignore drag by stopping propagation
@@ -912,27 +1014,47 @@ class NodeComponent {
                 sourceHandle: sourceHandle.rawHandle.id,
                 targetHandle: targetHandle.rawHandle.id
             });
-            this.targetHandleState.set(valid ? 'valid' : 'invalid');
+            targetHandle.state.set(valid ? 'valid' : 'invalid');
             this.flowStatusService.setConnectionValidationStatus(valid, sourceNode, targetNode, sourceHandle, targetHandle);
         }
     }
     /**
      * TODO srp
      */
-    resetValidateTargetHandle() {
-        this.targetHandleState.set('idle');
+    resetValidateTargetHandle(targetHandle) {
+        targetHandle.state.set('idle');
         // drop back to start status
         const status = this.flowStatusService.status();
         if (status.state === 'connection-validation') {
             this.flowStatusService.setConnectionStartStatus(status.payload.sourceNode, status.payload.sourceHandle);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (mouseup)=\"endConnection(); resetValidateTargetHandle()\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle()\"\n  />\n</ng-container>\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    setInitialHandles() {
+        if (this.nodeModel.node.type === 'default') {
+            this.handleService.createHandle(new HandleModel({
+                position: this.nodeModel.sourcePosition(),
+                type: 'source',
+                parentReference: this.htmlWrapperRef.nativeElement
+            }, this.nodeModel));
+            this.handleService.createHandle(new HandleModel({
+                position: this.nodeModel.targetPosition(),
+                type: 'target',
+                parentReference: this.htmlWrapperRef.nativeElement
+            }, this.nodeModel));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div #htmlWrapper class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (mouseup)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+__decorate([
+    Microtask
+], NodeComponent.prototype, "ngAfterViewInit", null);
+__decorate([
+    InjectionContext
+], NodeComponent.prototype, "setInitialHandles", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (mouseup)=\"endConnection(); resetValidateTargetHandle()\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle()\"\n  />\n</ng-container>\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\n"] }]
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div #htmlWrapper class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (mouseup)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\n"] }]
         }], propDecorators: { nodeModel: [{
                 type: Input
             }], nodeHtmlTemplate: [{
@@ -943,7 +1065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], htmlWrapperRef: [{
                 type: ViewChild,
                 args: ['htmlWrapper']
-            }] } });
+            }], ngAfterViewInit: [], setInitialHandles: [] } });
 
 class EdgeLabelComponent {
     constructor() {
@@ -964,14 +1086,12 @@ class EdgeLabelComponent {
     }
     set point(point) { this.pointSignal.set(point); }
     ngAfterViewInit() {
-        queueMicrotask(() => {
-            // this is a fix for visual artifact in chrome that for some reason adresses only for edge label.
-            // the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
-            const MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME = 2;
-            const width = this.edgeLabelWrapperRef.nativeElement.clientWidth + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
-            const height = this.edgeLabelWrapperRef.nativeElement.clientHeight + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
-            this.model.size.set({ width, height });
-        });
+        // this is a fix for visual artifact in chrome that for some reason adresses only for edge label.
+        // the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
+        const MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME = 2;
+        const width = this.edgeLabelWrapperRef.nativeElement.clientWidth + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+        const height = this.edgeLabelWrapperRef.nativeElement.clientHeight + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+        this.model.size.set({ width, height });
     }
     getLabelContext() {
         return {
@@ -984,6 +1104,9 @@ class EdgeLabelComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: { model: "model", edgeModel: "edgeModel", point: "point", htmlTemplate: "htmlTemplate" }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  [attr.x]=\"edgeLabelPoint().x\"\n  [attr.y]=\"edgeLabelPoint().y\"\n  [attr.width]=\"model.size().width\"\n  [attr.height]=\"model.size().height\"\n  *ngIf=\"model.edgeLabel.type === 'html-template' && htmlTemplate\"\n>\n  <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n    />\n  </div>\n</svg:foreignObject>\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+__decorate([
+    Microtask
+], EdgeLabelComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:foreignObject\n  [attr.x]=\"edgeLabelPoint().x\"\n  [attr.y]=\"edgeLabelPoint().y\"\n  [attr.width]=\"model.size().width\"\n  [attr.height]=\"model.size().height\"\n  *ngIf=\"model.edgeLabel.type === 'html-template' && htmlTemplate\"\n>\n  <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n    />\n  </div>\n</svg:foreignObject>\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
@@ -998,7 +1121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], edgeLabelWrapperRef: [{
                 type: ViewChild,
                 args: ['edgeLabelWrapper']
-            }] } });
+            }], ngAfterViewInit: [] } });
 
 class EdgeComponent {
     constructor() {
@@ -1369,10 +1492,10 @@ class VflowComponent {
     }
     // #endregion
     trackNodes(idx, { node }) {
-        return node.id;
+        return node;
     }
     trackEdges(idx, { edge }) {
-        return edge.id;
+        return edge;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: VflowComponent, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", handlePositions: "handlePositions", background: "background", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], nodes: "nodes", edges: "edges" }, providers: [
@@ -1435,39 +1558,32 @@ function bindFlowToNodes(flow, nodes) {
     nodes.forEach(n => n.bindFlow(flow));
 }
 
-class HandleComponent {
+class HandleComponent extends WithInjectorDirective {
     constructor() {
+        super(...arguments);
         this.handleService = inject(HandleService);
         this.element = inject(ElementRef).nativeElement;
     }
     ngOnInit() {
-        queueMicrotask(() => {
-            const { width, height, x, y } = this.parentRect();
-            this.model = new HandleModel({
-                position: this.position,
-                type: this.type,
-                id: this.id,
-                parentPosition: { x, y },
-                parentSize: { width, height }
-            }, this.handleService.node());
-            this.handleService.createHandle(this.model);
-        });
+        this.model = new HandleModel({
+            position: this.position,
+            type: this.type,
+            id: this.id,
+            parentReference: this.element.parentElement,
+            template: this.template
+        }, this.handleService.node());
+        this.handleService.createHandle(this.model);
+        queueMicrotask(() => this.model.updateParent());
     }
     ngOnDestroy() {
         this.handleService.destroyHandle(this.model);
     }
-    parentRect() {
-        const parent = this.element.parentElement;
-        return {
-            x: parent.offsetLeft,
-            y: parent.offsetTop,
-            width: parent.clientWidth,
-            height: parent.clientHeight
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id" }, ngImport: i0, template: "" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id", template: "template" }, usesInheritance: true, ngImport: i0, template: "" }); }
 }
+__decorate([
+    InjectionContext
+], HandleComponent.prototype, "ngOnInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'handle', template: "" }]
@@ -1479,7 +1595,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [{ required: true }]
             }], id: [{
                 type: Input
-            }] } });
+            }], template: [{
+                type: Input
+            }], ngOnInit: [] } });
 
 const components = [
     VflowComponent,
@@ -1495,6 +1613,7 @@ const directives = [
     MapContextDirective,
     RootSvgReferenceDirective,
     RootSvgContextDirective,
+    HandleSizeControllerDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -1514,7 +1633,8 @@ class VflowModule {
             DefsComponent, SpacePointContextDirective,
             MapContextDirective,
             RootSvgReferenceDirective,
-            RootSvgContextDirective, NodeHtmlTemplateDirective,
+            RootSvgContextDirective,
+            HandleSizeControllerDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,