ngx-vflow 0.2.1 → 0.2.2

package/esm2022/lib/vflow/services/handle.service.mjs

@@ -2,13 +2,20 @@ import { Injectable, signal } from '@angular/core';
 import * as i0 from "@angular/core";
 export class HandleService {
     constructor() {
-        this.handles = signal([]);
+        this.node = signal(null);
     }
     createHandle(newHandle) {
-        this.handles.update(handles => [...handles, newHandle]);
+        const node = this.node();
+        if (node) {
+            node.rawHandles.update(handles => [...handles, newHandle]);
+        }
     }
     destroyHandle(handleToDestoy) {
-        this.handles.update(handles => handles.filter(handle => handle !== handleToDestoy));
+        const node = this.node();
+        // TODO: microtask
+        if (node) {
+            queueMicrotask(() => node.rawHandles.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 }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService }); }
@@ -16,4 +23,4 @@ export class HandleService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, decorators: [{
             type: Injectable
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGFuZGxlLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvc2VydmljZXMvaGFuZGxlLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBYzNELE1BQU0sT0FBTyxhQUFhO0lBRDFCO1FBRWtCLFlBQU8sR0FBRyxNQUFNLENBQWUsRUFBRSxDQUFDLENBQUE7S0FXbkQ7SUFUUSxZQUFZLENBQUMsU0FBcUI7UUFDdkMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsT0FBTyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDekQsQ0FBQztJQUVNLGFBQWEsQ0FBQyxjQUEwQjtRQUM3QyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FDakIsT0FBTyxDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsTUFBTSxLQUFLLGNBQWMsQ0FBQyxDQUMvRCxDQUFBO0lBQ0gsQ0FBQzsrR0FYVSxhQUFhO21IQUFiLGFBQWE7OzRGQUFiLGFBQWE7a0JBRHpCLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlLCBTaWduYWwsIHNpZ25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUG9zaXRpb24gfSBmcm9tICcuLi90eXBlcy9wb3NpdGlvbi50eXBlJztcbmltcG9ydCB7IEhhbmRsZVR5cGUgfSBmcm9tICcuLi90eXBlcy9oYW5kbGUtdHlwZS50eXBlJztcbmltcG9ydCB7IFBvaW50IH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9wb2ludC5pbnRlcmZhY2UnO1xuXG5leHBvcnQgaW50ZXJmYWNlIE5vZGVIYW5kbGUge1xuICBwb3NpdGlvbjogUG9zaXRpb25cbiAgdHlwZTogSGFuZGxlVHlwZVxuICBwYXJlbnRQb3NpdGlvbjogU2lnbmFsPFBvaW50PlxuICBwYXJlbnRTaXplOiBTaWduYWw8eyB3aWR0aDogbnVtYmVyLCBoZWlnaHQ6IG51bWJlciB9PlxuICBpZD86IHN0cmluZ1xufVxuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgSGFuZGxlU2VydmljZSB7XG4gIHB1YmxpYyByZWFkb25seSBoYW5kbGVzID0gc2lnbmFsPE5vZGVIYW5kbGVbXT4oW10pXG5cbiAgcHVibGljIGNyZWF0ZUhhbmRsZShuZXdIYW5kbGU6IE5vZGVIYW5kbGUpIHtcbiAgICB0aGlzLmhhbmRsZXMudXBkYXRlKGhhbmRsZXMgPT4gWy4uLmhhbmRsZXMsIG5ld0hhbmRsZV0pXG4gIH1cblxuICBwdWJsaWMgZGVzdHJveUhhbmRsZShoYW5kbGVUb0Rlc3RveTogTm9kZUhhbmRsZSkge1xuICAgIHRoaXMuaGFuZGxlcy51cGRhdGUoXG4gICAgICBoYW5kbGVzID0+IGhhbmRsZXMuZmlsdGVyKGhhbmRsZSA9PiBoYW5kbGUgIT09IGhhbmRsZVRvRGVzdG95KVxuICAgIClcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGFuZGxlLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvc2VydmljZXMvaGFuZGxlLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBZ0IzRCxNQUFNLE9BQU8sYUFBYTtJQUQxQjtRQUVrQixTQUFJLEdBQUcsTUFBTSxDQUFtQixJQUFJLENBQUMsQ0FBQTtLQWtCdEQ7SUFoQlEsWUFBWSxDQUFDLFNBQXNCO1FBQ3hDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQTtRQUN4QixJQUFJLElBQUksRUFBRTtZQUNSLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsQ0FBQyxHQUFHLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO1NBQzNEO0lBQ0gsQ0FBQztJQUVNLGFBQWEsQ0FBQyxjQUEyQjtRQUM5QyxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUE7UUFDeEIsa0JBQWtCO1FBQ2xCLElBQUksSUFBSSxFQUFFO1lBQ1IsY0FBYyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUN6QyxPQUFPLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxNQUFNLEtBQUssY0FBYyxDQUFDLENBQy9ELENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQzsrR0FsQlUsYUFBYTttSEFBYixhQUFhOzs0RkFBYixhQUFhO2tCQUR6QixVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgU2lnbmFsLCBzaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBvc2l0aW9uIH0gZnJvbSAnLi4vdHlwZXMvcG9zaXRpb24udHlwZSc7XG5pbXBvcnQgeyBIYW5kbGVUeXBlIH0gZnJvbSAnLi4vdHlwZXMvaGFuZGxlLXR5cGUudHlwZSc7XG5pbXBvcnQgeyBQb2ludCB9IGZyb20gJy4uL2ludGVyZmFjZXMvcG9pbnQuaW50ZXJmYWNlJztcbmltcG9ydCB7IE5vZGVNb2RlbCB9IGZyb20gJy4uL21vZGVscy9ub2RlLm1vZGVsJztcbmltcG9ydCB7IEhhbmRsZU1vZGVsIH0gZnJvbSAnLi4vbW9kZWxzL2hhbmRsZS5tb2RlbCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTm9kZUhhbmRsZSB7XG4gIHBvc2l0aW9uOiBQb3NpdGlvblxuICB0eXBlOiBIYW5kbGVUeXBlXG4gIHBhcmVudFBvc2l0aW9uOiBQb2ludFxuICBwYXJlbnRTaXplOiB7IHdpZHRoOiBudW1iZXIsIGhlaWdodDogbnVtYmVyIH1cbiAgaWQ/OiBzdHJpbmdcbn1cblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIEhhbmRsZVNlcnZpY2Uge1xuICBwdWJsaWMgcmVhZG9ubHkgbm9kZSA9IHNpZ25hbDxOb2RlTW9kZWwgfCBudWxsPihudWxsKVxuXG4gIHB1YmxpYyBjcmVhdGVIYW5kbGUobmV3SGFuZGxlOiBIYW5kbGVNb2RlbCkge1xuICAgIGNvbnN0IG5vZGUgPSB0aGlzLm5vZGUoKVxuICAgIGlmIChub2RlKSB7XG4gICAgICBub2RlLnJhd0hhbmRsZXMudXBkYXRlKGhhbmRsZXMgPT4gWy4uLmhhbmRsZXMsIG5ld0hhbmRsZV0pXG4gICAgfVxuICB9XG5cbiAgcHVibGljIGRlc3Ryb3lIYW5kbGUoaGFuZGxlVG9EZXN0b3k6IEhhbmRsZU1vZGVsKSB7XG4gICAgY29uc3Qgbm9kZSA9IHRoaXMubm9kZSgpXG4gICAgLy8gVE9ETzogbWljcm90YXNrXG4gICAgaWYgKG5vZGUpIHtcbiAgICAgIHF1ZXVlTWljcm90YXNrKCgpID0+IG5vZGUucmF3SGFuZGxlcy51cGRhdGUoXG4gICAgICAgIGhhbmRsZXMgPT4gaGFuZGxlcy5maWx0ZXIoaGFuZGxlID0+IGhhbmRsZSAhPT0gaGFuZGxlVG9EZXN0b3kpXG4gICAgICApKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==

package/esm2022/lib/vflow/services/node-changes.service.mjs

@@ -1,7 +1,7 @@
 import { Injectable, inject } from '@angular/core';
 import { FlowEntitiesService } from './flow-entities.service';
 import { toObservable } from '@angular/core/rxjs-interop';
-import { filter, map, merge, pairwise, skip, switchMap } from 'rxjs';
+import { asyncScheduler, filter, map, merge, observeOn, pairwise, skip, switchMap } from 'rxjs';
 import * as i0 from "@angular/core";
 export class NodesChangeService {
     constructor() {
@@ -21,7 +21,10 @@ export class NodesChangeService {
             .pipe(pairwise(), map(([oldList, newList]) => newList.filter(node => !oldList.includes(node))), filter((nodes) => !!nodes.length), map((nodes) => nodes.map(node => ({ type: 'add', id: node.node.id }))));
         this.nodeRemoveChange$ = toObservable(this.entitiesService.nodes)
             .pipe(pairwise(), map(([oldList, newList]) => oldList.filter(node => !newList.includes(node))), filter((nodes) => !!nodes.length), map((nodes) => nodes.map(node => ({ type: 'remove', id: node.node.id }))));
-        this.changes$ = merge(this.nodesPositionChange$, this.nodeAddChange$, this.nodeRemoveChange$);
+        this.changes$ = merge(this.nodesPositionChange$, this.nodeAddChange$, this.nodeRemoveChange$).pipe(
+        // this fixes a bug when on fire node event change,
+        // you can't get valid list of detached edges
+        observeOn(asyncScheduler));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService }); }
@@ -29,4 +32,4 @@ export class NodesChangeService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService, decorators: [{
             type: Injectable
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS1jaGFuZ2VzLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvc2VydmljZXMvbm9kZS1jaGFuZ2VzLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0QsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDOUQsT0FBTyxFQUFFLFlBQVksRUFBWSxNQUFNLDRCQUE0QixDQUFDO0FBQ3BFLE9BQU8sRUFBYyxNQUFNLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBTSxRQUFRLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFJckYsTUFBTSxPQUFPLGtCQUFrQjtJQUQvQjtRQUVZLG9CQUFlLEdBQUcsTUFBTSxDQUFDLG1CQUFtQixDQUFDLENBQUE7UUFFN0MseUJBQW9CLEdBQUcsWUFBWSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDO2FBQ3RFLElBQUk7UUFDSCw2RkFBNkY7UUFDN0YsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FDbEIsS0FBSyxDQUNILEdBQUcsS0FBSyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUNsQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUk7UUFDZCxvQ0FBb0M7UUFDcEMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUNQLEdBQUcsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FDaEIsQ0FDRixDQUNGLENBQ0Y7UUFDRCxrRUFBa0U7UUFDbEUsbUNBQW1DO1FBQ25DLEdBQUcsQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO1lBQ2pCLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxFQUFFLEVBQUUsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsS0FBSyxFQUFFLFdBQVcsQ0FBQyxLQUFLLEVBQUUsRUFBRTtTQUMxRSxDQUFDLENBQ2dDLENBQUE7UUFFNUIsbUJBQWMsR0FBRyxZQUFZLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUM7YUFDaEUsSUFBSSxDQUNILFFBQVEsRUFBRSxFQUNWLEdBQUcsQ0FBQyxDQUFDLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxFQUFFLEVBQUUsQ0FDekIsT0FBTyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUNoRCxFQUNELE1BQU0sQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsRUFDakMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FDWixLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUN2RCxDQUNpQyxDQUFBO1FBRTVCLHNCQUFpQixHQUFHLFlBQVksQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLEtBQUssQ0FBQzthQUNuRSxJQUFJLENBQ0gsUUFBUSxFQUFFLEVBQ1YsR0FBRyxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsT0FBTyxDQUFDLEVBQUUsRUFBRSxDQUN6QixPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQ2hELEVBQ0QsTUFBTSxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxFQUNqQyxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUNaLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQzFELENBQ2lDLENBQUE7UUFFdEIsYUFBUSxHQUE2QixLQUFLLENBQ3hELElBQUksQ0FBQyxvQkFBb0IsRUFDekIsSUFBSSxDQUFDLGNBQWMsRUFDbkIsSUFBSSxDQUFDLGlCQUFpQixDQUN2QixDQUFBO0tBQ0Y7K0dBckRZLGtCQUFrQjttSEFBbEIsa0JBQWtCOzs0RkFBbEIsa0JBQWtCO2tCQUQ5QixVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgU2lnbmFsLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZsb3dFbnRpdGllc1NlcnZpY2UgfSBmcm9tICcuL2Zsb3ctZW50aXRpZXMuc2VydmljZSc7XG5pbXBvcnQgeyB0b09ic2VydmFibGUsIHRvU2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgZmlsdGVyLCBtYXAsIG1lcmdlLCBvZiwgcGFpcndpc2UsIHNraXAsIHN3aXRjaE1hcCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgTm9kZUNoYW5nZSB9IGZyb20gJy4uL3R5cGVzL25vZGUtY2hhbmdlLnR5cGUnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgTm9kZXNDaGFuZ2VTZXJ2aWNlIHtcbiAgcHJvdGVjdGVkIGVudGl0aWVzU2VydmljZSA9IGluamVjdChGbG93RW50aXRpZXNTZXJ2aWNlKVxuXG4gIHByb3RlY3RlZCBub2Rlc1Bvc2l0aW9uQ2hhbmdlJCA9IHRvT2JzZXJ2YWJsZSh0aGlzLmVudGl0aWVzU2VydmljZS5ub2RlcylcbiAgICAucGlwZShcbiAgICAgIC8vIENoZWNrIGZvciBub2RlcyBsaXN0IGNoYW5nZSBhbmQgd2F0Y2ggZm9yIHNwZWNpZmljIG5vZGUgZnJvbSB0aGlzIGxpc3QgY2hhbmdlIGl0cyBwb3NpdGlvblxuICAgICAgc3dpdGNoTWFwKChub2RlcykgPT5cbiAgICAgICAgbWVyZ2UoXG4gICAgICAgICAgLi4ubm9kZXMubWFwKG5vZGUgPT5cbiAgICAgICAgICAgIG5vZGUucG9pbnQkLnBpcGUoXG4gICAgICAgICAgICAgIC8vIHNraXAgaW5pdGlhbCBwb3NpdGlvbiBmcm9tIHNpZ25hbFxuICAgICAgICAgICAgICBza2lwKDEpLFxuICAgICAgICAgICAgICBtYXAoKCkgPT4gbm9kZSlcbiAgICAgICAgICAgIClcbiAgICAgICAgICApXG4gICAgICAgIClcbiAgICAgICksXG4gICAgICAvLyBGb3Igbm93IGl0J3MgYSBzaW5nbGUgbm9kZSwgbGF0ZXIgdGhpcyBsaXN0IHdpbGwgYWxzbyBiZSBmaWxsZWRcbiAgICAgIC8vIHdpdGggY2hpbGQgbm9kZSBwb3NpdGlvbiBjaGFuZ2VzXG4gICAgICBtYXAoY2hhbmdlZE5vZGUgPT4gW1xuICAgICAgICB7IHR5cGU6ICdwb3NpdGlvbicsIGlkOiBjaGFuZ2VkTm9kZS5ub2RlLmlkLCBwb2ludDogY2hhbmdlZE5vZGUucG9pbnQoKSB9XG4gICAgICBdKVxuICAgICkgc2F0aXNmaWVzIE9ic2VydmFibGU8Tm9kZUNoYW5nZVtdPlxuXG4gIHByb3RlY3RlZCBub2RlQWRkQ2hhbmdlJCA9IHRvT2JzZXJ2YWJsZSh0aGlzLmVudGl0aWVzU2VydmljZS5ub2RlcylcbiAgICAucGlwZShcbiAgICAgIHBhaXJ3aXNlKCksXG4gICAgICBtYXAoKFtvbGRMaXN0LCBuZXdMaXN0XSkgPT5cbiAgICAgICAgbmV3TGlzdC5maWx0ZXIobm9kZSA9PiAhb2xkTGlzdC5pbmNsdWRlcyhub2RlKSlcbiAgICAgICksXG4gICAgICBmaWx0ZXIoKG5vZGVzKSA9PiAhIW5vZGVzLmxlbmd0aCksXG4gICAgICBtYXAoKG5vZGVzKSA9PlxuICAgICAgICBub2Rlcy5tYXAobm9kZSA9PiAoeyB0eXBlOiAnYWRkJywgaWQ6IG5vZGUubm9kZS5pZCB9KSlcbiAgICAgIClcbiAgICApIHNhdGlzZmllcyBPYnNlcnZhYmxlPE5vZGVDaGFuZ2VbXT5cblxuICBwcm90ZWN0ZWQgbm9kZVJlbW92ZUNoYW5nZSQgPSB0b09ic2VydmFibGUodGhpcy5lbnRpdGllc1NlcnZpY2Uubm9kZXMpXG4gICAgLnBpcGUoXG4gICAgICBwYWlyd2lzZSgpLFxuICAgICAgbWFwKChbb2xkTGlzdCwgbmV3TGlzdF0pID0+XG4gICAgICAgIG9sZExpc3QuZmlsdGVyKG5vZGUgPT4gIW5ld0xpc3QuaW5jbHVkZXMobm9kZSkpXG4gICAgICApLFxuICAgICAgZmlsdGVyKChub2RlcykgPT4gISFub2Rlcy5sZW5ndGgpLFxuICAgICAgbWFwKChub2RlcykgPT5cbiAgICAgICAgbm9kZXMubWFwKG5vZGUgPT4gKHsgdHlwZTogJ3JlbW92ZScsIGlkOiBub2RlLm5vZGUuaWQgfSkpXG4gICAgICApXG4gICAgKSBzYXRpc2ZpZXMgT2JzZXJ2YWJsZTxOb2RlQ2hhbmdlW10+XG5cbiAgcHVibGljIHJlYWRvbmx5IGNoYW5nZXMkOiBPYnNlcnZhYmxlPE5vZGVDaGFuZ2VbXT4gPSBtZXJnZShcbiAgICB0aGlzLm5vZGVzUG9zaXRpb25DaGFuZ2UkLFxuICAgIHRoaXMubm9kZUFkZENoYW5nZSQsXG4gICAgdGhpcy5ub2RlUmVtb3ZlQ2hhbmdlJFxuICApXG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS1jaGFuZ2VzLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvc2VydmljZXMvbm9kZS1jaGFuZ2VzLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0QsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDOUQsT0FBTyxFQUFFLFlBQVksRUFBWSxNQUFNLDRCQUE0QixDQUFDO0FBQ3BFLE9BQU8sRUFBYyxjQUFjLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFNLFFBQVEsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLE1BQU0sTUFBTSxDQUFDOztBQUloSCxNQUFNLE9BQU8sa0JBQWtCO0lBRC9CO1FBRVksb0JBQWUsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQTtRQUU3Qyx5QkFBb0IsR0FBRyxZQUFZLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUM7YUFDdEUsSUFBSTtRQUNILDZGQUE2RjtRQUM3RixTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUNsQixLQUFLLENBQ0gsR0FBRyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQ2xCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSTtRQUNkLG9DQUFvQztRQUNwQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQ1AsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUNoQixDQUNGLENBQ0YsQ0FDRjtRQUNELGtFQUFrRTtRQUNsRSxtQ0FBbUM7UUFDbkMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUM7WUFDakIsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxLQUFLLEVBQUUsV0FBVyxDQUFDLEtBQUssRUFBRSxFQUFFO1NBQzFFLENBQUMsQ0FDZ0MsQ0FBQTtRQUU1QixtQkFBYyxHQUFHLFlBQVksQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLEtBQUssQ0FBQzthQUNoRSxJQUFJLENBQ0gsUUFBUSxFQUFFLEVBQ1YsR0FBRyxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsT0FBTyxDQUFDLEVBQUUsRUFBRSxDQUN6QixPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQ2hELEVBQ0QsTUFBTSxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxFQUNqQyxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUNaLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQ3ZELENBQ2lDLENBQUE7UUFFNUIsc0JBQWlCLEdBQUcsWUFBWSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDO2FBQ25FLElBQUksQ0FDSCxRQUFRLEVBQUUsRUFDVixHQUFHLENBQUMsQ0FBQyxDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUMsRUFBRSxFQUFFLENBQ3pCLE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FDaEQsRUFDRCxNQUFNLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEVBQ2pDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQ1osS0FBSyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FDMUQsQ0FDaUMsQ0FBQTtRQUV0QixhQUFRLEdBQTZCLEtBQUssQ0FDeEQsSUFBSSxDQUFDLG9CQUFvQixFQUN6QixJQUFJLENBQUMsY0FBYyxFQUNuQixJQUFJLENBQUMsaUJBQWlCLENBQ3ZCLENBQUMsSUFBSTtRQUNKLG1EQUFtRDtRQUNuRCw2Q0FBNkM7UUFDN0MsU0FBUyxDQUFDLGNBQWMsQ0FBQyxDQUMxQixDQUFBO0tBQ0Y7K0dBekRZLGtCQUFrQjttSEFBbEIsa0JBQWtCOzs0RkFBbEIsa0JBQWtCO2tCQUQ5QixVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgU2lnbmFsLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZsb3dFbnRpdGllc1NlcnZpY2UgfSBmcm9tICcuL2Zsb3ctZW50aXRpZXMuc2VydmljZSc7XG5pbXBvcnQgeyB0b09ic2VydmFibGUsIHRvU2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgYXN5bmNTY2hlZHVsZXIsIGZpbHRlciwgbWFwLCBtZXJnZSwgb2JzZXJ2ZU9uLCBvZiwgcGFpcndpc2UsIHNraXAsIHN3aXRjaE1hcCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgTm9kZUNoYW5nZSB9IGZyb20gJy4uL3R5cGVzL25vZGUtY2hhbmdlLnR5cGUnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgTm9kZXNDaGFuZ2VTZXJ2aWNlIHtcbiAgcHJvdGVjdGVkIGVudGl0aWVzU2VydmljZSA9IGluamVjdChGbG93RW50aXRpZXNTZXJ2aWNlKVxuXG4gIHByb3RlY3RlZCBub2Rlc1Bvc2l0aW9uQ2hhbmdlJCA9IHRvT2JzZXJ2YWJsZSh0aGlzLmVudGl0aWVzU2VydmljZS5ub2RlcylcbiAgICAucGlwZShcbiAgICAgIC8vIENoZWNrIGZvciBub2RlcyBsaXN0IGNoYW5nZSBhbmQgd2F0Y2ggZm9yIHNwZWNpZmljIG5vZGUgZnJvbSB0aGlzIGxpc3QgY2hhbmdlIGl0cyBwb3NpdGlvblxuICAgICAgc3dpdGNoTWFwKChub2RlcykgPT5cbiAgICAgICAgbWVyZ2UoXG4gICAgICAgICAgLi4ubm9kZXMubWFwKG5vZGUgPT5cbiAgICAgICAgICAgIG5vZGUucG9pbnQkLnBpcGUoXG4gICAgICAgICAgICAgIC8vIHNraXAgaW5pdGlhbCBwb3NpdGlvbiBmcm9tIHNpZ25hbFxuICAgICAgICAgICAgICBza2lwKDEpLFxuICAgICAgICAgICAgICBtYXAoKCkgPT4gbm9kZSlcbiAgICAgICAgICAgIClcbiAgICAgICAgICApXG4gICAgICAgIClcbiAgICAgICksXG4gICAgICAvLyBGb3Igbm93IGl0J3MgYSBzaW5nbGUgbm9kZSwgbGF0ZXIgdGhpcyBsaXN0IHdpbGwgYWxzbyBiZSBmaWxsZWRcbiAgICAgIC8vIHdpdGggY2hpbGQgbm9kZSBwb3NpdGlvbiBjaGFuZ2VzXG4gICAgICBtYXAoY2hhbmdlZE5vZGUgPT4gW1xuICAgICAgICB7IHR5cGU6ICdwb3NpdGlvbicsIGlkOiBjaGFuZ2VkTm9kZS5ub2RlLmlkLCBwb2ludDogY2hhbmdlZE5vZGUucG9pbnQoKSB9XG4gICAgICBdKVxuICAgICkgc2F0aXNmaWVzIE9ic2VydmFibGU8Tm9kZUNoYW5nZVtdPlxuXG4gIHByb3RlY3RlZCBub2RlQWRkQ2hhbmdlJCA9IHRvT2JzZXJ2YWJsZSh0aGlzLmVudGl0aWVzU2VydmljZS5ub2RlcylcbiAgICAucGlwZShcbiAgICAgIHBhaXJ3aXNlKCksXG4gICAgICBtYXAoKFtvbGRMaXN0LCBuZXdMaXN0XSkgPT5cbiAgICAgICAgbmV3TGlzdC5maWx0ZXIobm9kZSA9PiAhb2xkTGlzdC5pbmNsdWRlcyhub2RlKSlcbiAgICAgICksXG4gICAgICBmaWx0ZXIoKG5vZGVzKSA9PiAhIW5vZGVzLmxlbmd0aCksXG4gICAgICBtYXAoKG5vZGVzKSA9PlxuICAgICAgICBub2Rlcy5tYXAobm9kZSA9PiAoeyB0eXBlOiAnYWRkJywgaWQ6IG5vZGUubm9kZS5pZCB9KSlcbiAgICAgIClcbiAgICApIHNhdGlzZmllcyBPYnNlcnZhYmxlPE5vZGVDaGFuZ2VbXT5cblxuICBwcm90ZWN0ZWQgbm9kZVJlbW92ZUNoYW5nZSQgPSB0b09ic2VydmFibGUodGhpcy5lbnRpdGllc1NlcnZpY2Uubm9kZXMpXG4gICAgLnBpcGUoXG4gICAgICBwYWlyd2lzZSgpLFxuICAgICAgbWFwKChbb2xkTGlzdCwgbmV3TGlzdF0pID0+XG4gICAgICAgIG9sZExpc3QuZmlsdGVyKG5vZGUgPT4gIW5ld0xpc3QuaW5jbHVkZXMobm9kZSkpXG4gICAgICApLFxuICAgICAgZmlsdGVyKChub2RlcykgPT4gISFub2Rlcy5sZW5ndGgpLFxuICAgICAgbWFwKChub2RlcykgPT5cbiAgICAgICAgbm9kZXMubWFwKG5vZGUgPT4gKHsgdHlwZTogJ3JlbW92ZScsIGlkOiBub2RlLm5vZGUuaWQgfSkpXG4gICAgICApXG4gICAgKSBzYXRpc2ZpZXMgT2JzZXJ2YWJsZTxOb2RlQ2hhbmdlW10+XG5cbiAgcHVibGljIHJlYWRvbmx5IGNoYW5nZXMkOiBPYnNlcnZhYmxlPE5vZGVDaGFuZ2VbXT4gPSBtZXJnZShcbiAgICB0aGlzLm5vZGVzUG9zaXRpb25DaGFuZ2UkLFxuICAgIHRoaXMubm9kZUFkZENoYW5nZSQsXG4gICAgdGhpcy5ub2RlUmVtb3ZlQ2hhbmdlJFxuICApLnBpcGUoXG4gICAgLy8gdGhpcyBmaXhlcyBhIGJ1ZyB3aGVuIG9uIGZpcmUgbm9kZSBldmVudCBjaGFuZ2UsXG4gICAgLy8geW91IGNhbid0IGdldCB2YWxpZCBsaXN0IG9mIGRldGFjaGVkIGVkZ2VzXG4gICAgb2JzZXJ2ZU9uKGFzeW5jU2NoZWR1bGVyKSxcbiAgKVxufVxuIl19

package/esm2022/lib/vflow/types/edge-change.type.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRnZS1jaGFuZ2UudHlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL2xpYi92Zmxvdy90eXBlcy9lZGdlLWNoYW5nZS50eXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgdHlwZSBFZGdlQ2hhbmdlID0gRWRnZURldGFjaGVkQ2hhbmdlIHwgRWRnZUFkZENoYW5nZSB8IEVkZ2VSZW1vdmVDaGFuZ2VcblxuZXhwb3J0IGludGVyZmFjZSBFZGdlRGV0YWNoZWRDaGFuZ2UgZXh0ZW5kcyBFZGdlQ2hhbmdlU2hhcmVkIHtcbiAgdHlwZTogJ2RldGFjaGVkJ1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEVkZ2VBZGRDaGFuZ2UgZXh0ZW5kcyBFZGdlQ2hhbmdlU2hhcmVkIHtcbiAgdHlwZTogJ2FkZCdcbn1cblxuZXhwb3J0IGludGVyZmFjZSBFZGdlUmVtb3ZlQ2hhbmdlIGV4dGVuZHMgRWRnZUNoYW5nZVNoYXJlZCB7XG4gIHR5cGU6ICdyZW1vdmUnXG59XG5cbmludGVyZmFjZSBFZGdlQ2hhbmdlU2hhcmVkIHtcbiAgaWQ6IHN0cmluZ1xufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRnZS1jaGFuZ2UudHlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL2xpYi92Zmxvdy90eXBlcy9lZGdlLWNoYW5nZS50eXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgdHlwZSBFZGdlQ2hhbmdlID0gRWRnZURldGFjaGVkQ2hhbmdlIHwgRWRnZUFkZENoYW5nZSB8IEVkZ2VSZW1vdmVDaGFuZ2VcblxuLyoqXG4gKiBAZXhwZXJpbWVudGFsXG4gKi9cbmV4cG9ydCBpbnRlcmZhY2UgRWRnZURldGFjaGVkQ2hhbmdlIGV4dGVuZHMgRWRnZUNoYW5nZVNoYXJlZCB7XG4gIHR5cGU6ICdkZXRhY2hlZCdcbn1cblxuZXhwb3J0IGludGVyZmFjZSBFZGdlQWRkQ2hhbmdlIGV4dGVuZHMgRWRnZUNoYW5nZVNoYXJlZCB7XG4gIHR5cGU6ICdhZGQnXG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRWRnZVJlbW92ZUNoYW5nZSBleHRlbmRzIEVkZ2VDaGFuZ2VTaGFyZWQge1xuICB0eXBlOiAncmVtb3ZlJ1xufVxuXG5pbnRlcmZhY2UgRWRnZUNoYW5nZVNoYXJlZCB7XG4gIGlkOiBzdHJpbmdcbn1cbiJdfQ==

package/fesm2022/ngx-vflow.mjs

@@ -1,12 +1,12 @@
 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, runInInjectionContext, Component, ChangeDetectionStrategy, ViewChild, HostListener, ContentChild, NgModule } 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 { 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, tap, fromEvent } from 'rxjs';
+import { switchMap, merge, skip, map, pairwise, filter, observeOn, asyncScheduler, zip, distinctUntilChanged, tap, fromEvent } from 'rxjs';
 import { path } from 'd3-path';
 
 class ViewportService {
@@ -350,6 +350,9 @@ class FlowEntitiesService {
     getNode(id) {
         return this.nodes().find(({ node }) => node.id === id);
     }
+    getDetachedEdges() {
+        return this.edges().filter(e => e.detached());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowEntitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowEntitiesService }); }
 }
@@ -412,18 +415,18 @@ class HandleModel {
             switch (this.rawHandle.position) {
                 case 'left': return {
                     x: 0,
-                    y: this.rawHandle.parentPosition().y + (this.rawHandle.parentSize().height / 2)
+                    y: this.parentPosition().y + (this.parentSize().height / 2)
                 };
                 case 'right': return {
                     x: this.parentNode.size().width,
-                    y: this.rawHandle.parentPosition().y + (this.rawHandle.parentSize().height / 2)
+                    y: this.parentPosition().y + (this.parentSize().height / 2)
                 };
                 case 'top': return {
-                    x: this.rawHandle.parentPosition().x + (this.rawHandle.parentSize().width / 2),
+                    x: this.parentPosition().x + (this.parentSize().width / 2),
                     y: 0
                 };
                 case 'bottom': return {
-                    x: this.rawHandle.parentPosition().x + this.rawHandle.parentSize().width / 2,
+                    x: this.parentPosition().x + this.parentSize().width / 2,
                     y: this.parentNode.size().height
                 };
             }
@@ -442,6 +445,8 @@ class HandleModel {
                 y: this.parentNode.point().y + this.offset().y + this.sizeOffset().y,
             };
         });
+        this.parentSize = signal(this.rawHandle.parentSize);
+        this.parentPosition = signal(this.rawHandle.parentPosition);
     }
 }
 
@@ -457,20 +462,20 @@ class NodeModel {
         this.targetPosition = computed(() => this.flow.handlePositions().target);
         this.handles = computed(() => {
             if (this.node.type === 'html-template') {
-                return this.rawHandles().map((handle => new HandleModel(handle, this)));
+                return this.rawHandles();
             }
             return [
                 new HandleModel({
                     position: this.sourcePosition(),
                     type: 'source',
-                    parentPosition: signal({ x: 0, y: 0 }),
-                    parentSize: signal(this.size())
+                    parentPosition: { x: 0, y: 0 },
+                    parentSize: this.size()
                 }, this),
                 new HandleModel({
                     position: this.targetPosition(),
                     type: 'target',
-                    parentPosition: signal({ x: 0, y: 0 }),
-                    parentSize: signal(this.size())
+                    parentPosition: { x: 0, y: 0 },
+                    parentSize: this.size()
                 }, this),
             ];
         });
@@ -605,6 +610,31 @@ function getPointOnBezier(sourcePoint, targetPoint, controlPoint1, controlPoint2
 class EdgeModel {
     constructor(edge) {
         this.edge = edge;
+        this.detached = computed(() => {
+            if (!this.source || !this.target) {
+                return true;
+            }
+            let existsSourceHandle = false;
+            let existsTargetHandle = false;
+            if (this.edge.sourceHandle) {
+                existsSourceHandle = !!this.source.handles()
+                    .find(handle => handle.rawHandle.id === this.edge.sourceHandle);
+            }
+            else {
+                existsSourceHandle = !!this.source.handles()
+                    .find(handle => handle.rawHandle.type === 'source');
+            }
+            if (this.edge.targetHandle) {
+                existsTargetHandle = !!this.target.handles()
+                    .find(handle => handle.rawHandle.id === this.edge.targetHandle);
+            }
+            else {
+                existsTargetHandle = !!this.target.handles()
+                    .find(handle => handle.rawHandle.type === 'target');
+            }
+            return !existsSourceHandle || !existsTargetHandle;
+        });
+        this.detached$ = toObservable(this.detached);
         this.path = computed(() => {
             let source;
             if (this.edge.sourceHandle) {
@@ -702,7 +732,10 @@ class NodesChangeService {
             .pipe(pairwise(), map(([oldList, newList]) => newList.filter(node => !oldList.includes(node))), filter((nodes) => !!nodes.length), map((nodes) => nodes.map(node => ({ type: 'add', id: node.node.id }))));
         this.nodeRemoveChange$ = toObservable(this.entitiesService.nodes)
             .pipe(pairwise(), map(([oldList, newList]) => oldList.filter(node => !newList.includes(node))), filter((nodes) => !!nodes.length), map((nodes) => nodes.map(node => ({ type: 'remove', id: node.node.id }))));
-        this.changes$ = merge(this.nodesPositionChange$, this.nodeAddChange$, this.nodeRemoveChange$);
+        this.changes$ = merge(this.nodesPositionChange$, this.nodeAddChange$, this.nodeRemoveChange$).pipe(
+        // this fixes a bug when on fire node event change,
+        // you can't get valid list of detached edges
+        observeOn(asyncScheduler));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService }); }
@@ -711,16 +744,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+const haveSameContents = (a, b) => a.length === b.length &&
+    [...new Set([...a, ...b])].every(v => a.filter(e => e === v).length === b.filter(e => e === v).length);
 class EdgeChangesService {
     constructor() {
         this.entitiesService = inject(FlowEntitiesService);
-        this.edgeDetachedChange$ = toObservable(computed(() => {
+        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));
-        })).pipe(
-        // TODO check why there are 2 emits from single call inside computed
-        filter(edges => !!edges.length), map((edges) => edges.map(({ edge }) => ({ type: 'detached', id: edge.id }))));
+        })), toObservable(this.entitiesService.edges).pipe(switchMap((edges) => {
+            return zip(...edges.map(e => e.detached$.pipe(map(() => e))));
+        }), map((edges) => edges.filter(e => e.detached())), 
+        // TODO check why there are 2 emits
+        skip(2))).pipe(
+        // here we check if 2 approaches to detect detached edges emits same
+        // and same values (this may happen on node delete)
+        distinctUntilChanged(haveSameContents), filter(edges => !!edges.length), map((edges) => edges.map(({ edge }) => ({ type: 'detached', id: edge.id }))));
         this.edgeAddChange$ = toObservable(this.entitiesService.edges)
             .pipe(pairwise(), map(([oldList, newList]) => {
             return newList.filter(edge => !oldList.includes(edge));
@@ -780,13 +820,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class HandleService {
     constructor() {
-        this.handles = signal([]);
+        this.node = signal(null);
     }
     createHandle(newHandle) {
-        this.handles.update(handles => [...handles, newHandle]);
+        const node = this.node();
+        if (node) {
+            node.rawHandles.update(handles => [...handles, newHandle]);
+        }
     }
     destroyHandle(handleToDestoy) {
-        this.handles.update(handles => handles.filter(handle => handle !== handleToDestoy));
+        const node = this.node();
+        // TODO: microtask
+        if (node) {
+            queueMicrotask(() => node.rawHandles.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 }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService }); }
@@ -809,9 +856,7 @@ class NodeComponent {
         this.targetHandleState = signal('idle');
     }
     ngOnInit() {
-        runInInjectionContext(this.injector, () => {
-            effect(() => this.nodeModel.rawHandles.set(this.handleService.handles()), { allowSignalWrites: true });
-        });
+        this.handleService.node.set(this.nodeModel);
         this.draggableService.toggleDraggable(this.hostRef.nativeElement, this.nodeModel);
     }
     ngAfterViewInit() {
@@ -1277,7 +1322,7 @@ class VflowComponent {
      * Edges to render
      */
     set edges(newEdges) {
-        const newModels = ReferenceKeeper.edges(newEdges, this.flowEntitiesService.edges());
+        const newModels = runInInjectionContext(this.injector, () => ReferenceKeeper.edges(newEdges, this.flowEntitiesService.edges()));
         // quick and dirty binding nodes to edges
         addNodesToEdges(this.nodeModels, newModels);
         this.flowEntitiesService.edges.set(newModels);
@@ -1316,6 +1361,12 @@ class VflowComponent {
     getNode(id) {
         return this.flowEntitiesService.getNode(id)?.node;
     }
+    /**
+     * Sync method to get detached edges
+     */
+    getDetachedEdges() {
+        return this.flowEntitiesService.getDetachedEdges().map(e => e.edge);
+    }
     // #endregion
     trackNodes(idx, { node }) {
         return node.id;
@@ -1391,27 +1442,27 @@ class HandleComponent {
     }
     ngOnInit() {
         queueMicrotask(() => {
-            const rect = this.parentRect();
-            this.handleService.createHandle({
+            const { width, height, x, y } = this.parentRect();
+            this.model = new HandleModel({
                 position: this.position,
                 type: this.type,
                 id: this.id,
-                parentPosition: signal({ x: rect.x, y: rect.y }),
-                parentSize: signal({ width: rect.width, height: rect.height })
-            });
+                parentPosition: { x, y },
+                parentSize: { width, height }
+            }, this.handleService.node());
+            this.handleService.createHandle(this.model);
         });
     }
+    ngOnDestroy() {
+        this.handleService.destroyHandle(this.model);
+    }
     parentRect() {
-        // we assume there is only one foreignObject that wraps node
-        const fo = this.element.closest('foreignObject');
         const parent = this.element.parentElement;
-        const foRect = fo.getBoundingClientRect();
-        const parentRect = parent.getBoundingClientRect();
         return {
-            x: parentRect.left - foRect.left,
-            y: parentRect.top - foRect.top,
-            width: parentRect.width,
-            height: parentRect.height
+            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 }); }