ngx-vflow 1.0.1 → 1.0.4

package/fesm2022/ngx-vflow.mjs

@@ -13,7 +13,7 @@ function getNodesBounds(nodes) {
         return { x: 0, y: 0, width: 0, height: 0 };
     }
     let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };
-    nodes.forEach(node => {
+    nodes.forEach((node) => {
         const nodeBox = nodeToBox(node);
         box = getBoundsOfBoxes(box, nodeBox);
     });
@@ -77,7 +77,7 @@ const hasSourceAndTargetHandleValidator = (connection) => {
 
 function hashCode(str) {
     return str.split('').reduce((a, b) => {
-        a = ((a << 5) - a) + b.charCodeAt(0);
+        a = (a << 5) - a + b.charCodeAt(0);
         return a & a;
     }, 0);
 }
@@ -86,20 +86,20 @@ class FlowEntitiesService {
     constructor() {
         this.nodes = signal([], {
             // empty arrays considered equal, other arrays may not be equal
-            equal: (a, b) => !a.length && !b.length ? true : a === b
+            equal: (a, b) => (!a.length && !b.length ? true : a === b),
         });
         this.edges = signal([], {
             // empty arrays considered equal, other arrays may not be equal
-            equal: (a, b) => !a.length && !b.length ? true : a === b
+            equal: (a, b) => (!a.length && !b.length ? true : a === b),
         });
         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()));
         });
         this.connection = signal(new ConnectionModel({}));
         this.markers = computed(() => {
             const markersMap = new Map();
-            this.validEdges().forEach(e => {
+            this.validEdges().forEach((e) => {
                 if (e.edge.markers?.start) {
                     const hash = hashCode(JSON.stringify(e.edge.markers.start));
                     markersMap.set(hash, e.edge.markers.start);
@@ -116,17 +116,14 @@ class FlowEntitiesService {
             }
             return markersMap;
         });
-        this.entities = computed(() => [
-            ...this.nodes(),
-            ...this.edges()
-        ]);
+        this.entities = computed(() => [...this.nodes(), ...this.edges()]);
         this.minimap = signal(null);
     }
     getNode(id) {
         return this.nodes().find(({ node }) => node.id === id);
     }
     getDetachedEdges() {
-        return this.edges().filter(e => e.detached());
+        return this.edges().filter((e) => e.detached());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowEntitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowEntitiesService }); }
@@ -187,7 +184,7 @@ class ViewportService {
         this.writableViewport = signal({
             changeType: 'initial',
             state: ViewportService.getDefaultViewport(),
-            duration: 0
+            duration: 0,
         });
         /**
          * Public signal with viewport state. User can directly read from this signal. It's updated by:
@@ -201,22 +198,24 @@ class ViewportService {
      *
      * @returns default viewport value
      */
-    static getDefaultViewport() { return { zoom: 1, x: 0, y: 0 }; }
+    static getDefaultViewport() {
+        return { zoom: 1, x: 0, y: 0 };
+    }
     // TODO: add writableViewportWithConstraints (to apply min zoom/max zoom values)
-    fitView(options = { padding: .1, duration: 0, nodes: [] }) {
+    fitView(options = { padding: 0.1, duration: 0, nodes: [] }) {
         const nodes = this.getBoundsNodes(options.nodes ?? []);
-        const state = getViewportForBounds(getNodesBounds(nodes), this.flowSettingsService.computedFlowWidth(), this.flowSettingsService.computedFlowHeight(), this.flowSettingsService.minZoom(), this.flowSettingsService.maxZoom(), options.padding ?? .1);
+        const state = getViewportForBounds(getNodesBounds(nodes), this.flowSettingsService.computedFlowWidth(), this.flowSettingsService.computedFlowHeight(), this.flowSettingsService.minZoom(), this.flowSettingsService.maxZoom(), options.padding ?? 0.1);
         const duration = options.duration ?? 0;
         this.writableViewport.set({ changeType: 'absolute', state, duration });
     }
     getBoundsNodes(nodeIds) {
         return !nodeIds?.length
-            // If nodes option not passed or the list is empty, then get fit the whole view
-            ? this.entitiesService.nodes()
-            // Otherwise fit to specific nodes
-            : nodeIds
-                .map(nodeId => this.entitiesService.nodes().find(({ node }) => node.id === nodeId))
-                .filter((node) => !!node);
+            ? // If nodes option not passed or the list is empty, then get fit the whole view
+                this.entitiesService.nodes()
+            : // Otherwise fit to specific nodes
+                nodeIds
+                    .map((nodeId) => this.entitiesService.nodes().find(({ node }) => node.id === nodeId))
+                    .filter((node) => !!node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportService }); }
@@ -251,19 +250,19 @@ function getOS() {
     const iosPlatforms = /(iphone|ipad|ipod)/i;
     let os = null;
     if (macosPlatforms.test(userAgent)) {
-        os = "macos";
+        os = 'macos';
     }
     else if (iosPlatforms.test(userAgent)) {
-        os = "ios";
+        os = 'ios';
     }
     else if (windowsPlatforms.test(userAgent)) {
-        os = "windows";
+        os = 'windows';
     }
     else if (/android/.test(userAgent)) {
-        os = "android";
+        os = 'android';
     }
     else if (!os && /linux/.test(userAgent)) {
-        os = "linux";
+        os = 'linux';
     }
     return os;
 }
@@ -274,26 +273,28 @@ class KeyboardService {
             multiSelection: [
                 getOS() === 'macos' ? 'MetaLeft' : 'ControlLeft',
                 getOS() === 'macos' ? 'MetaRight' : 'ControlRight',
-            ]
+            ],
         });
         this.actionsActive = {
-            multiSelection: false
+            multiSelection: false,
         };
-        toObservable(this.actions).pipe(switchMap(() => merge(fromEvent(document, 'keydown').pipe(tap(event => {
+        toObservable(this.actions)
+            .pipe(switchMap(() => merge(fromEvent(document, 'keydown').pipe(tap((event) => {
             for (const action in this.actions()) {
                 const keyCodes = this.actions()[action] ?? [];
                 if (keyCodes.includes(event.code)) {
                     this.actionsActive[action] = true;
                 }
             }
-        })), fromEvent(document, 'keyup').pipe(tap(event => {
+        })), fromEvent(document, 'keyup').pipe(tap((event) => {
             for (const action in this.actions()) {
                 const keyCodes = this.actions()[action] ?? [];
                 if (keyCodes.includes(event.code)) {
                     this.actionsActive[action] = false;
                 }
             }
-        })))), takeUntilDestroyed()).subscribe();
+        })))), takeUntilDestroyed())
+            .subscribe();
     }
     setShortcuts(newActions) {
         this.actions.update((actions) => ({ ...actions, ...newActions }));
@@ -313,7 +314,8 @@ class SelectionService {
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.keyboardService = inject(KeyboardService);
         this.viewport$ = new Subject();
-        this.resetSelection = this.viewport$.pipe(tap(({ start, end, target }) => {
+        this.resetSelection = this.viewport$
+            .pipe(tap(({ start, end, target }) => {
             if (start && end && target) {
                 const delta = SelectionService.delta;
                 const diffX = Math.abs(end.x - start.x);
@@ -326,7 +328,8 @@ class SelectionService {
                     this.select(null);
                 }
             }
-        }), takeUntilDestroyed()).subscribe();
+        }), takeUntilDestroyed())
+            .subscribe();
     }
     static { this.delta = 6; }
     setViewport(viewport) {
@@ -340,7 +343,7 @@ class SelectionService {
         }
         if (!this.keyboardService.isActiveAction('multiSelection')) {
             // undo select for previously selected nodes
-            this.flowEntitiesService.entities().forEach(n => n.selected.set(false));
+            this.flowEntitiesService.entities().forEach((n) => n.selected.set(false));
         }
         if (entity) {
             // select passed entity
@@ -372,25 +375,25 @@ class MapContextDirective {
                 return;
             }
             // If only zoom provided
-            if (isDefined(state.zoom) && (!isDefined(state.x) && !isDefined(state.y))) {
-                this.rootSvgSelection
-                    .transition().duration(viewport.duration)
-                    .call(this.zoomBehavior.scaleTo, state.zoom);
+            if (isDefined(state.zoom) && !isDefined(state.x) && !isDefined(state.y)) {
+                this.rootSvgSelection.transition().duration(viewport.duration).call(this.zoomBehavior.scaleTo, state.zoom);
                 return;
             }
             // If only pan provided
-            if ((isDefined(state.x) && isDefined(state.y)) && !isDefined(state.zoom)) {
+            if (isDefined(state.x) && isDefined(state.y) && !isDefined(state.zoom)) {
                 // remain same zoom value
                 const zoom = untracked(this.viewportService.readableViewport).zoom;
                 this.rootSvgSelection
-                    .transition().duration(viewport.duration)
+                    .transition()
+                    .duration(viewport.duration)
                     .call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(zoom));
                 return;
             }
             // If whole viewort state provided
             if (isDefined(state.x) && isDefined(state.y) && isDefined(state.zoom)) {
                 this.rootSvgSelection
-                    .transition().duration(viewport.duration)
+                    .transition()
+                    .duration(viewport.duration)
                     .call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(state.zoom));
                 return;
             }
@@ -402,14 +405,14 @@ class MapContextDirective {
         };
         this.handleZoomStart = ({ transform }) => {
             this.viewportForSelection = {
-                start: mapTransformToViewportState(transform)
+                start: mapTransformToViewportState(transform),
             };
         };
         this.handleZoomEnd = ({ transform, sourceEvent }) => {
             this.viewportForSelection = {
                 ...this.viewportForSelection,
                 end: mapTransformToViewportState(transform),
-                target: evTarget(sourceEvent)
+                target: evTarget(sourceEvent),
             };
             this.selectionService.setViewport(this.viewportForSelection);
         };
@@ -427,9 +430,7 @@ class MapContextDirective {
             .on('start', this.handleZoomStart)
             .on('zoom', this.handleZoom)
             .on('end', this.handleZoomEnd);
-        this.rootSvgSelection
-            .call(this.zoomBehavior)
-            .on('dblclick.zoom', null);
+        this.rootSvgSelection.call(this.zoomBehavior).on('dblclick.zoom', null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: MapContextDirective, isStandalone: true, selector: "g[mapContext]", ngImport: i0 }); }
@@ -441,7 +442,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'g[mapContext]',
                 }]
         }] });
-const mapTransformToViewportState = (transform) => ({ zoom: transform.k, x: transform.x, y: transform.y });
+const mapTransformToViewportState = (transform) => ({
+    zoom: transform.k,
+    x: transform.x,
+    y: transform.y,
+});
 const evTarget = (anyEvent) => {
     if (anyEvent instanceof Event && anyEvent.target instanceof Element) {
         return anyEvent.target;
@@ -462,8 +467,7 @@ class DraggableService {
      * @param model model with data for this element
      */
     enable(element, model) {
-        select(element)
-            .call(this.getDragBehavior(model));
+        select(element).call(this.getDragBehavior(model));
     }
     /**
      * Disable draggable behavior for element.
@@ -472,8 +476,7 @@ class DraggableService {
      * @param model model with data for this element
      */
     disable(element) {
-        select(element)
-            .call(drag().on('drag', null));
+        select(element).call(drag().on('drag', null));
     }
     /**
      * TODO: not shure if this work, need to check
@@ -503,16 +506,16 @@ class DraggableService {
             .filter(filterCondition)
             .on('start', (event) => {
             dragNodes = this.getDragNodes(model);
-            initialPositions = dragNodes.map(node => ({
+            initialPositions = dragNodes.map((node) => ({
                 x: node.point().x - event.x,
-                y: node.point().y - event.y
+                y: node.point().y - event.y,
             }));
         })
             .on('drag', (event) => {
             dragNodes.forEach((model, index) => {
-                let point = {
+                const point = {
                     x: round(event.x + initialPositions[index].x),
-                    y: round(event.y + initialPositions[index].y)
+                    y: round(event.y + initialPositions[index].y),
                 };
                 moveNode(model, point);
             });
@@ -523,9 +526,9 @@ class DraggableService {
             ? this.entitiesService
                 .nodes()
                 // selected draggable nodes (with current node)
-                .filter(node => node.selected() && node.draggable())
-            // we only can move current node if it's not selected
-            : [model];
+                .filter((node) => node.selected() && node.draggable())
+            : // we only can move current node if it's not selected
+                [model];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService }); }
@@ -570,7 +573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'ng-template[connection]'
+                    selector: 'ng-template[connection]',
                 }]
         }] });
 class EdgeLabelHtmlTemplateDirective {
@@ -584,7 +587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'ng-template[edgeLabelHtml]'
+                    selector: 'ng-template[edgeLabelHtml]',
                 }]
         }] });
 class NodeHtmlTemplateDirective {
@@ -598,7 +601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'ng-template[nodeHtml]'
+                    selector: 'ng-template[nodeHtml]',
                 }]
         }] });
 class GroupNodeTemplateDirective {
@@ -612,7 +615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'ng-template[groupNode]'
+                    selector: 'ng-template[groupNode]',
                 }]
         }] });
 class HandleTemplateDirective {
@@ -626,7 +629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'ng-template[handle]'
+                    selector: 'ng-template[handle]',
                 }]
         }] });
 
@@ -635,7 +638,7 @@ function addNodesToEdges(nodes, edges) {
         acc[n.node.id] = n;
         return acc;
     }, {});
-    edges.forEach(e => {
+    edges.forEach((e) => {
         e.source.set(nodesById[e.edge.source]);
         e.target.set(nodesById[e.edge.target]);
     });
@@ -674,7 +677,7 @@ function batchStatusChanges(...changes) {
         // first change is sync
         firstChange();
         // without timer, subscribed effects/comuted signals only get latest value
-        restChanges.forEach(change => setTimeout(() => change()));
+        restChanges.forEach((change) => setTimeout(() => change()));
     }
 }
 
@@ -717,7 +720,10 @@ class ConnectionControllerDirective {
          *
          * Also it's important to note, that this event only fires when connection is valid by validator function in `ConnectionSettings`,
          * by default without passing the validator every connection concidered valid.
+         *
+         * @todo add connect event and deprecate onConnect
          */
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         this.onConnect = output();
         this.statusService = inject(FlowStatusService);
         this.flowEntitiesService = inject(FlowEntitiesService);
@@ -803,7 +809,7 @@ class ConnectionControllerDirective {
             this.statusService.setConnectionStartStatus(status.payload.source, status.payload.sourceHandle);
         }
     }
-    endConnection(handle) {
+    endConnection() {
         const status = this.statusService.status();
         if (status.state === 'connection-validation') {
             const source = status.payload.source;
@@ -958,10 +964,10 @@ function isDynamicNode(node) {
     return typeof node.point === 'function';
 }
 function isComponentStaticNode(node) {
-    return CustomNodeComponent.isPrototypeOf(node.type);
+    return Object.prototype.isPrototypeOf.call(CustomNodeComponent, node.type);
 }
 function isComponentDynamicNode(node) {
-    return CustomDynamicNodeComponent.isPrototypeOf(node.type);
+    return Object.prototype.isPrototypeOf.call(CustomDynamicNodeComponent, node.type);
 }
 function isTemplateStaticNode(node) {
     return node.type === 'html-template';
@@ -1001,7 +1007,7 @@ class NodeModel {
         this.throttledPoint$ = toObservable(this.internalPoint).pipe(observeOn(animationFrameScheduler));
         this.notThrottledPoint$ = new Subject();
         this.point = toSignal(merge(this.throttledPoint$, this.notThrottledPoint$), {
-            initialValue: this.internalPoint()
+            initialValue: this.internalPoint(),
         });
         this.point$ = this.throttledPoint$;
         this.size = signal({ width: 0, height: 0 });
@@ -1030,16 +1036,15 @@ class NodeModel {
         // disabled for configuration for now
         this.magnetRadius = 20;
         // TODO: not sure if we need to statically store it
-        this.isComponentType = CustomNodeComponent.isPrototypeOf(this.node.type) ||
-            CustomDynamicNodeComponent.isPrototypeOf(this.node.type);
+        this.isComponentType = isComponentStaticNode(this.node) || isComponentDynamicNode(this.node);
         // Default node specific thing
         this.text = this.createTextSignal();
         // Component node specific thing
         this.componentTypeInputs = {
             node: this.node,
         };
-        this.parent = computed(() => this.entitiesService.nodes().find(n => n.node.id === this.parentId()) ?? null);
-        this.children = computed(() => this.entitiesService.nodes().filter(n => n.parentId() === this.node.id));
+        this.parent = computed(() => this.entitiesService.nodes().find((n) => n.node.id === this.parentId()) ?? null);
+        this.children = computed(() => this.entitiesService.nodes().filter((n) => n.parentId() === this.node.id));
         this.color = signal(NodeModel.defaultColor);
         this.resizable = signal(false);
         this.resizing = signal(false);
@@ -1106,7 +1111,7 @@ class NodeModel {
                 else {
                     this.size.set({
                         width: node.width ?? NodeModel.defaultWidth,
-                        height: node.height ?? NodeModel.defaultHeight
+                        height: node.height ?? NodeModel.defaultHeight,
                     });
                 }
             }
@@ -1142,9 +1147,7 @@ class NodeModel {
         return signal('');
     }
     createInternalPointSignal() {
-        return isDynamicNode(this.node)
-            ? this.node.point
-            : signal({ x: this.node.point.x, y: this.node.point.y });
+        return isDynamicNode(this.node) ? this.node.point : signal({ x: this.node.point.x, y: this.node.point.y });
     }
 }
 
@@ -1173,10 +1176,10 @@ function straightPath(source, target, usingPoints = [false, false, false]) {
     return {
         path: `M ${source.x},${source.y}L ${target.x},${target.y}`,
         points: {
-            start: start ? getPointOnLineByRatio(source, target, .15) : nullPoint,
-            center: center ? getPointOnLineByRatio(source, target, .50) : nullPoint,
-            end: end ? getPointOnLineByRatio(source, target, .85) : nullPoint,
-        }
+            start: start ? getPointOnLineByRatio(source, target, 0.15) : nullPoint,
+            center: center ? getPointOnLineByRatio(source, target, 0.5) : nullPoint,
+            end: end ? getPointOnLineByRatio(source, target, 0.85) : nullPoint,
+        },
     };
 }
 
@@ -1231,15 +1234,9 @@ function getPathData(path, source, target, sourceControl, targetControl, usingPo
     return {
         path,
         points: {
-            start: start
-                ? getPointOnBezier(source, target, sourceControl, targetControl, 0.1)
-                : nullPoint,
-            center: center
-                ? getPointOnBezier(source, target, sourceControl, targetControl, 0.5)
-                : nullPoint,
-            end: end
-                ? getPointOnBezier(source, target, sourceControl, targetControl, 0.9)
-                : nullPoint,
+            start: start ? getPointOnBezier(source, target, sourceControl, targetControl, 0.1) : nullPoint,
+            center: center ? getPointOnBezier(source, target, sourceControl, targetControl, 0.5) : nullPoint,
+            end: end ? getPointOnBezier(source, target, sourceControl, targetControl, 0.9) : nullPoint,
         },
     };
 }
@@ -1399,7 +1396,7 @@ function smoothStepPath(source, target, sourcePosition, targetPosition, borderRa
         sourcePosition,
         target,
         targetPosition,
-        offset: 20
+        offset: 20,
     });
     const path = points.reduce((res, p, i) => {
         let segment = '';
@@ -1419,7 +1416,7 @@ function smoothStepPath(source, target, sourcePosition, targetPosition, borderRa
             start: { x: labelX, y: labelY },
             center: { x: labelX, y: labelY },
             end: { x: labelX, y: labelY },
-        }
+        },
     };
 }
 
@@ -1439,20 +1436,16 @@ class EdgeModel {
             let existsSourceHandle = false;
             let existsTargetHandle = false;
             if (this.edge.sourceHandle) {
-                existsSourceHandle = !!source.handles()
-                    .find(handle => handle.rawHandle.id === this.edge.sourceHandle);
+                existsSourceHandle = !!source.handles().find((handle) => handle.rawHandle.id === this.edge.sourceHandle);
             }
             else {
-                existsSourceHandle = !!source.handles()
-                    .find(handle => handle.rawHandle.type === 'source');
+                existsSourceHandle = !!source.handles().find((handle) => handle.rawHandle.type === 'source');
             }
             if (this.edge.targetHandle) {
-                existsTargetHandle = !!target.handles()
-                    .find(handle => handle.rawHandle.id === this.edge.targetHandle);
+                existsTargetHandle = !!target.handles().find((handle) => handle.rawHandle.id === this.edge.targetHandle);
             }
             else {
-                existsTargetHandle = !!target.handles()
-                    .find(handle => handle.rawHandle.type === 'target');
+                existsTargetHandle = !!target.handles().find((handle) => handle.rawHandle.type === 'target');
             }
             return !existsSourceHandle || !existsTargetHandle;
         });
@@ -1460,21 +1453,25 @@ class EdgeModel {
         this.path = computed(() => {
             let source;
             if (this.edge.sourceHandle) {
-                source = this.source()?.handles()
-                    .find(handle => handle.rawHandle.id === this.edge.sourceHandle);
+                source = this.source()
+                    ?.handles()
+                    .find((handle) => handle.rawHandle.id === this.edge.sourceHandle);
             }
             else {
-                source = this.source()?.handles()
-                    .find(handle => handle.rawHandle.type === 'source');
+                source = this.source()
+                    ?.handles()
+                    .find((handle) => handle.rawHandle.type === 'source');
             }
             let target;
             if (this.edge.targetHandle) {
-                target = this.target()?.handles()
-                    .find(handle => handle.rawHandle.id === this.edge.targetHandle);
+                target = this.target()
+                    ?.handles()
+                    .find((handle) => handle.rawHandle.id === this.edge.targetHandle);
             }
             else {
-                target = this.target()?.handles()
-                    .find(handle => handle.rawHandle.type === 'target');
+                target = this.target()
+                    ?.handles()
+                    .find((handle) => handle.rawHandle.type === 'target');
             }
             // TODO: don't like this
             if (!source || !target) {
@@ -1483,8 +1480,8 @@ class EdgeModel {
                     points: {
                         start: { x: 0, y: 0 },
                         center: { x: 0, y: 0 },
-                        end: { x: 0, y: 0 }
-                    }
+                        end: { x: 0, y: 0 },
+                    },
                 };
             }
             switch (this.curve) {
@@ -1517,8 +1514,8 @@ class ReferenceKeeper {
      */
     static nodes(newNodes, oldNodeModels) {
         const oldNodesMap = new Map();
-        oldNodeModels.forEach(model => oldNodesMap.set(model.node, model));
-        return newNodes.map(newNode => {
+        oldNodeModels.forEach((model) => oldNodesMap.set(model.node, model));
+        return newNodes.map((newNode) => {
             if (oldNodesMap.has(newNode))
                 return oldNodesMap.get(newNode);
             else
@@ -1530,8 +1527,8 @@ class ReferenceKeeper {
      */
     static edges(newEdges, oldEdgeModels) {
         const oldEdgesMap = new Map();
-        oldEdgeModels.forEach(model => oldEdgesMap.set(model.edge, model));
-        return newEdges.map(newEdge => {
+        oldEdgeModels.forEach((model) => oldEdgesMap.set(model.edge, model));
+        return newEdges.map((newEdge) => {
             if (oldEdgesMap.has(newEdge))
                 return oldEdgesMap.get(newEdge);
             else
@@ -1546,28 +1543,20 @@ const DELAY_FOR_SCHEDULER = 25;
 class NodesChangeService {
     constructor() {
         this.entitiesService = inject(FlowEntitiesService);
-        this.nodesPositionChange$ = toObservable(this.entitiesService.nodes)
-            .pipe(
+        this.nodesPositionChange$ = toObservable(this.entitiesService.nodes).pipe(
         // Check for nodes list change and watch for specific node from this list change its position
-        switchMap((nodes) => merge(...nodes.map(node => node.point$.pipe(
+        switchMap((nodes) => merge(...nodes.map((node) => node.point$.pipe(
         // skip initial position from signal
         skip(1), map(() => node))))), map((changedNode) => {
-            return this.entitiesService.nodes()
-                .filter(node => node === changedNode || node.selected())
-                .map(node => ({ type: 'position', id: node.node.id, point: node.point() }));
+            return this.entitiesService
+                .nodes()
+                .filter((node) => node === changedNode || node.selected())
+                .map((node) => ({ type: 'position', id: node.node.id, point: node.point() }));
         }));
-        this.nodeSizeChange$ = toObservable(this.entitiesService.nodes)
-            .pipe(switchMap((nodes) => merge(...nodes.map(node => node.size$.pipe(skip(1), map(() => node))))), map(changedNode => [
-            { type: 'size', id: changedNode.node.id, size: changedNode.size() }
-        ]));
-        this.nodeAddChange$ = toObservable(this.entitiesService.nodes)
-            .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.nodeSelectedChange$ = toObservable(this.entitiesService.nodes)
-            .pipe(switchMap((nodes) => merge(...nodes.map(node => node.selected$.pipe(distinctUntilChanged(), skip(1), map(() => node))))), map((changedNode) => [
-            { type: 'select', id: changedNode.node.id, selected: changedNode.selected() }
-        ]));
+        this.nodeSizeChange$ = toObservable(this.entitiesService.nodes).pipe(switchMap((nodes) => merge(...nodes.map((node) => node.size$.pipe(skip(1), map(() => node))))), map((changedNode) => [{ type: 'size', id: changedNode.node.id, size: changedNode.size() }]));
+        this.nodeAddChange$ = toObservable(this.entitiesService.nodes).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.nodeSelectedChange$ = toObservable(this.entitiesService.nodes).pipe(switchMap((nodes) => merge(...nodes.map((node) => node.selected$.pipe(distinctUntilChanged(), skip(1), map(() => node))))), map((changedNode) => [{ type: 'select', id: changedNode.node.id, selected: changedNode.selected() }]));
         this.changes$ = merge(this.nodesPositionChange$, this.nodeSizeChange$, this.nodeAddChange$, this.nodeRemoveChange$, this.nodeSelectedChange$).pipe(
         // this fixes a bug when on fire node event change,
         // you can't get valid list of detached edges
@@ -1581,7 +1570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 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);
+    [...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);
@@ -1590,27 +1579,21 @@ class EdgeChangesService {
             const edges = untracked(this.entitiesService.edges);
             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())), 
+            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));
-        }), filter(edges => !!edges.length), map((edges) => edges.map(({ edge }) => ({ type: 'add', id: edge.id }))));
-        this.edgeRemoveChange$ = toObservable(this.entitiesService.edges)
-            .pipe(pairwise(), map(([oldList, newList]) => {
-            return oldList.filter(edge => !newList.includes(edge));
-        }), filter(edges => !!edges.length), map((edges) => edges.map(({ edge }) => ({ type: 'remove', id: edge.id }))));
-        this.edgeSelectChange$ = toObservable(this.entitiesService.edges)
-            .pipe(switchMap((edges) => merge(...edges.map(edge => edge.selected$.pipe(distinctUntilChanged(), skip(1), map(() => edge))))), map((changedEdge) => [
-            { type: 'select', id: changedEdge.edge.id, selected: changedEdge.selected() }
-        ]));
-        this.changes$ = merge(this.edgeDetachedChange$, this.edgeAddChange$, this.edgeRemoveChange$, this.edgeSelectChange$)
-            .pipe(
+        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));
+        }), filter((edges) => !!edges.length), map((edges) => edges.map(({ edge }) => ({ type: 'add', id: edge.id }))));
+        this.edgeRemoveChange$ = toObservable(this.entitiesService.edges).pipe(pairwise(), map(([oldList, newList]) => {
+            return oldList.filter((edge) => !newList.includes(edge));
+        }), filter((edges) => !!edges.length), map((edges) => edges.map(({ edge }) => ({ type: 'remove', id: edge.id }))));
+        this.edgeSelectChange$ = toObservable(this.entitiesService.edges).pipe(switchMap((edges) => merge(...edges.map((edge) => edge.selected$.pipe(distinctUntilChanged(), skip(1), map(() => edge))))), map((changedEdge) => [{ type: 'select', id: changedEdge.edge.id, selected: changedEdge.selected() }]));
+        this.changes$ = merge(this.edgeDetachedChange$, this.edgeAddChange$, this.edgeRemoveChange$, this.edgeSelectChange$).pipe(
         // this fixes the case when user gets 'deteched' changes
         // and tries to delete these edges inside stream
         // angular may ignore this change because [edges] input changed
@@ -1632,37 +1615,79 @@ class ChangesControllerDirective {
          * Watch nodes change
          */
         this.onNodesChange = outputFromObservable(this.nodesChangeService.changes$);
-        this.onNodesChangePosition = outputFromObservable(this.nodeChangesOfType('position'), { alias: 'onNodesChange.position' });
+        this.onNodesChangePosition = outputFromObservable(this.nodeChangesOfType('position'), {
+            alias: 'onNodesChange.position',
+        });
         this.onNodesChangePositionSignle = outputFromObservable(this.singleChange(this.nodeChangesOfType('position')), { alias: 'onNodesChange.position.single' });
         this.onNodesChangePositionMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('position')), { alias: 'onNodesChange.position.many' });
-        this.onNodesChangeSize = outputFromObservable(this.nodeChangesOfType('size'), { alias: 'onNodesChange.size' });
-        this.onNodesChangeSizeSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('size')), { alias: 'onNodesChange.size.single' });
-        this.onNodesChangeSizeMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('size')), { alias: 'onNodesChange.size.many' });
-        this.onNodesChangeAdd = outputFromObservable(this.nodeChangesOfType('add'), { alias: 'onNodesChange.add' });
-        this.onNodesChangeAddSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('add')), { alias: 'onNodesChange.add.single' });
-        this.onNodesChangeAddMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('add')), { alias: 'onNodesChange.add.many' });
-        this.onNodesChangeRemove = outputFromObservable(this.nodeChangesOfType('remove'), { alias: 'onNodesChange.remove' });
+        this.onNodesChangeSize = outputFromObservable(this.nodeChangesOfType('size'), {
+            alias: 'onNodesChange.size',
+        });
+        this.onNodesChangeSizeSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('size')), {
+            alias: 'onNodesChange.size.single',
+        });
+        this.onNodesChangeSizeMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('size')), {
+            alias: 'onNodesChange.size.many',
+        });
+        this.onNodesChangeAdd = outputFromObservable(this.nodeChangesOfType('add'), {
+            alias: 'onNodesChange.add',
+        });
+        this.onNodesChangeAddSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('add')), {
+            alias: 'onNodesChange.add.single',
+        });
+        this.onNodesChangeAddMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('add')), {
+            alias: 'onNodesChange.add.many',
+        });
+        this.onNodesChangeRemove = outputFromObservable(this.nodeChangesOfType('remove'), {
+            alias: 'onNodesChange.remove',
+        });
         this.onNodesChangeRemoveSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('remove')), { alias: 'onNodesChange.remove.single' });
-        this.onNodesChangeRemoveMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('remove')), { alias: 'onNodesChange.remove.many' });
-        this.onNodesChangeSelect = outputFromObservable(this.nodeChangesOfType('select'), { alias: 'onNodesChange.select' });
+        this.onNodesChangeRemoveMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('remove')), {
+            alias: 'onNodesChange.remove.many',
+        });
+        this.onNodesChangeSelect = outputFromObservable(this.nodeChangesOfType('select'), {
+            alias: 'onNodesChange.select',
+        });
         this.onNodesChangeSelectSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('select')), { alias: 'onNodesChange.select.single' });
-        this.onNodesChangeSelectMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('select')), { alias: 'onNodesChange.select.many' });
+        this.onNodesChangeSelectMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('select')), {
+            alias: 'onNodesChange.select.many',
+        });
         /**
          * Watch edges change
          */
         this.onEdgesChange = outputFromObservable(this.edgesChangeService.changes$);
-        this.onNodesChangeDetached = outputFromObservable(this.edgeChangesOfType('detached'), { alias: 'onEdgesChange.detached' });
+        this.onNodesChangeDetached = outputFromObservable(this.edgeChangesOfType('detached'), {
+            alias: 'onEdgesChange.detached',
+        });
         this.onNodesChangeDetachedSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('detached')), { alias: 'onEdgesChange.detached.single' });
         this.onNodesChangeDetachedMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('detached')), { alias: 'onEdgesChange.detached.many' });
-        this.onEdgesChangeAdd = outputFromObservable(this.edgeChangesOfType('add'), { alias: 'onEdgesChange.add' });
-        this.onEdgeChangeAddSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('add')), { alias: 'onEdgesChange.add.single' });
-        this.onEdgeChangeAddMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('add')), { alias: 'onEdgesChange.add.many' });
-        this.onEdgeChangeRemove = outputFromObservable(this.edgeChangesOfType('remove'), { alias: 'onEdgesChange.remove' });
-        this.onEdgeChangeRemoveSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('remove')), { alias: 'onEdgesChange.remove.single' });
-        this.onEdgeChangeRemoveMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('remove')), { alias: 'onEdgesChange.remove.many' });
-        this.onEdgeChangeSelect = outputFromObservable(this.edgeChangesOfType('select'), { alias: 'onEdgesChange.select' });
-        this.onEdgeChangeSelectSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('select')), { alias: 'onEdgesChange.select.single' });
-        this.onEdgeChangeSelectMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('select')), { alias: 'onEdgesChange.select.many' });
+        this.onEdgesChangeAdd = outputFromObservable(this.edgeChangesOfType('add'), {
+            alias: 'onEdgesChange.add',
+        });
+        this.onEdgeChangeAddSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('add')), {
+            alias: 'onEdgesChange.add.single',
+        });
+        this.onEdgeChangeAddMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('add')), {
+            alias: 'onEdgesChange.add.many',
+        });
+        this.onEdgeChangeRemove = outputFromObservable(this.edgeChangesOfType('remove'), {
+            alias: 'onEdgesChange.remove',
+        });
+        this.onEdgeChangeRemoveSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('remove')), {
+            alias: 'onEdgesChange.remove.single',
+        });
+        this.onEdgeChangeRemoveMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('remove')), {
+            alias: 'onEdgesChange.remove.many',
+        });
+        this.onEdgeChangeSelect = outputFromObservable(this.edgeChangesOfType('select'), {
+            alias: 'onEdgesChange.select',
+        });
+        this.onEdgeChangeSelectSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('select')), {
+            alias: 'onEdgesChange.select.single',
+        });
+        this.onEdgeChangeSelectMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('select')), {
+            alias: 'onEdgesChange.select.many',
+        });
     }
     nodeChangesOfType(type) {
         return this.nodesChangeService.changes$.pipe(map((changes) => changes.filter((c) => c.type === type)), filter((changes) => !!changes.length));
@@ -1695,14 +1720,13 @@ class NodeRenderingService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.nodes = computed(() => {
-            return this.flowEntitiesService.nodes()
-                .sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
+            return this.flowEntitiesService.nodes().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
         });
         this.groups = computed(() => {
-            return this.nodes().filter(n => isGroupNode(n));
+            return this.nodes().filter((n) => isGroupNode(n));
         });
         this.nonGroups = computed(() => {
-            return this.nodes().filter(n => !isGroupNode(n));
+            return this.nodes().filter((n) => !isGroupNode(n));
         });
         this.maxOrder = computed(() => {
             return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
@@ -1715,8 +1739,8 @@ class NodeRenderingService {
         // pull children
         this.flowEntitiesService
             .nodes()
-            .filter(n => n.parent() === node)
-            .forEach(n => this.pullNode(n));
+            .filter((n) => n.parent() === node)
+            .forEach((n) => this.pullNode(n));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService }); }
@@ -1731,33 +1755,29 @@ class RootPointerDirective {
         this.initialTouch$ = new Subject();
         this.prevTouchEvent = null;
         // TODO: do not emit if mouse not down
-        this.mouseMovement$ = fromEvent(this.host, 'mousemove').pipe(map(event => ({
+        this.mouseMovement$ = fromEvent(this.host, 'mousemove').pipe(map((event) => ({
             x: event.clientX,
             y: event.clientY,
             movementX: event.movementX,
             movementY: event.movementY,
             target: event.target,
-            originalEvent: event
+            originalEvent: event,
         })), observeOn(animationFrameScheduler), share());
         this.touchMovement$ = merge(this.initialTouch$, fromEvent(this.host, 'touchmove')).pipe(tap((event) => event.preventDefault()), map((originalEvent) => {
             const x = originalEvent.touches[0]?.clientX ?? 0;
             const y = originalEvent.touches[0]?.clientY ?? 0;
-            const movementX = this.prevTouchEvent
-                ? originalEvent.touches[0].pageX - this.prevTouchEvent.touches[0].pageX
-                : 0;
-            const movementY = this.prevTouchEvent
-                ? originalEvent.touches[0].pageY - this.prevTouchEvent.touches[0].pageY
-                : 0;
+            const movementX = this.prevTouchEvent ? originalEvent.touches[0].pageX - this.prevTouchEvent.touches[0].pageX : 0;
+            const movementY = this.prevTouchEvent ? originalEvent.touches[0].pageY - this.prevTouchEvent.touches[0].pageY : 0;
             const target = document.elementFromPoint(x, y);
             return { x, y, movementX, movementY, target, originalEvent };
-        }), tap((event) => this.prevTouchEvent = event.originalEvent), observeOn(animationFrameScheduler), share());
+        }), tap((event) => (this.prevTouchEvent = event.originalEvent)), observeOn(animationFrameScheduler), share());
         this.pointerMovement$ = merge(this.mouseMovement$, this.touchMovement$);
         this.touchEnd$ = fromEvent(this.host, 'touchend').pipe(map((originalEvent) => {
             const x = originalEvent.changedTouches[0]?.clientX ?? 0;
             const y = originalEvent.changedTouches[0]?.clientY ?? 0;
             const target = document.elementFromPoint(x, y);
             return { x, y, target, originalEvent };
-        }), tap(() => this.prevTouchEvent = null), share());
+        }), tap(() => (this.prevTouchEvent = null)), share());
         this.mouseUp$ = fromEvent(this.host, 'mouseup').pipe(map((originalEvent) => {
             const x = originalEvent.clientX;
             const y = originalEvent.clientY;
@@ -1799,7 +1819,7 @@ class SpacePointContextDirective {
             }
             return this.documentPointToFlowPoint({
                 x: movement.x,
-                y: movement.y
+                y: movement.y,
             });
         });
         this.pointerMovement = toSignal(this.pointerMovementDirective.pointerMovement$);
@@ -1822,9 +1842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 function transformBackground(background) {
-    return typeof background === 'string'
-        ? { type: 'solid', color: background }
-        : background;
+    return typeof background === 'string' ? { type: 'solid', color: background } : background;
 }
 
 function Microtask(target, key, descriptor) {
@@ -1853,7 +1871,7 @@ class OverlaysService {
         this.toolbars.update((toolbars) => [...toolbars, toolbar]);
     }
     removeToolbar(toolbar) {
-        this.toolbars.update((toolbars) => toolbars.filter(t => t !== toolbar));
+        this.toolbars.update((toolbars) => toolbars.filter((t) => t !== toolbar));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlaysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlaysService }); }
@@ -1894,10 +1912,8 @@ class EdgeLabelComponent {
         // 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;
+        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() {
@@ -1909,14 +1925,14 @@ class EdgeLabelComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model().edgeLabel.type === \"html-template\" && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <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    >\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container\n          *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n        />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model().edgeLabel.type === 'html-template' && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <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      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Microtask
 ], EdgeLabelComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model().edgeLabel.type === \"html-template\" && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <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    >\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container\n          *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n        />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
+            args: [{ standalone: true, selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model().edgeLabel.type === 'html-template' && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <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      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
         }], propDecorators: { ngAfterViewInit: [] } });
 
 class EdgeComponent {
@@ -1954,13 +1970,13 @@ class EdgeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === \"default\") {\n  <svg:path\n    (mousedown)=\"onEdgeMouseDown()\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    class=\"edge\"\n    [class.edge_selected]=\"model().selected()\"\n  />\n}\n\n@if (model().type === \"template\" && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\"\n  />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\"\n  />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\"\n  />\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\"\n    (mousedown)=\"onEdgeMouseDown()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'selectable',
-                    }, imports: [NgTemplateOutlet, EdgeLabelComponent], template: "@if (model().type === \"default\") {\n  <svg:path\n    (mousedown)=\"onEdgeMouseDown()\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    class=\"edge\"\n    [class.edge_selected]=\"model().selected()\"\n  />\n}\n\n@if (model().type === \"template\" && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\"\n  />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\"\n  />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\"\n  />\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"] }]
+                    }, imports: [NgTemplateOutlet, EdgeLabelComponent], template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\"\n    (mousedown)=\"onEdgeMouseDown()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"] }]
         }] });
 
 class HandleService {
@@ -1970,13 +1986,13 @@ class HandleService {
     createHandle(newHandle) {
         const node = this.node();
         if (node) {
-            node.handles.update(handles => [...handles, newHandle]);
+            node.handles.update((handles) => [...handles, newHandle]);
         }
     }
     destroyHandle(handleToDestoy) {
         const node = this.node();
         if (node) {
-            node.handles.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: "17.3.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1991,10 +2007,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 function resizable(elems, zone) {
     return new Observable((subscriber) => {
-        let ro = new ResizeObserver((entries) => {
+        const ro = new ResizeObserver((entries) => {
             zone.run(() => subscriber.next(entries));
         });
-        elems.forEach(e => ro.observe(e));
+        elems.forEach((e) => ro.observe(e));
         return () => ro.disconnect();
     });
 }
@@ -2060,13 +2076,13 @@ class DefaultNodeComponent {
         this.selected = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: DefaultNodeComponent, isStandalone: true, selector: "default-node", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: DefaultNodeComponent, isStandalone: true, selector: "default-node", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'default-node', host: {
                         '[class.selected]': 'selected()',
-                    }, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }]
         }] });
 
 class PointerDirective {
@@ -2188,10 +2204,8 @@ class ResizableComponent {
         this.model.resizerTemplate.set(this.resizer());
     }
     ngAfterViewInit() {
-        this.minWidth =
-            +getComputedStyle(this.hostRef.nativeElement).minWidth.replace('px', '') || 0;
-        this.minHeight =
-            +getComputedStyle(this.hostRef.nativeElement).minHeight.replace('px', '') || 0;
+        this.minWidth = +getComputedStyle(this.hostRef.nativeElement).minWidth.replace('px', '') || 0;
+        this.minHeight = +getComputedStyle(this.hostRef.nativeElement).minHeight.replace('px', '') || 0;
     }
     startResize(side, event) {
         event.stopPropagation();
@@ -2212,15 +2226,13 @@ class ResizableComponent {
         this.resizeSide = null;
         this.model.resizing.set(false);
     }
-    isResizeConstrained({ x, y, movementX, movementY, }) {
+    isResizeConstrained({ x, y, movementX, movementY }) {
         const flowPoint = this.spacePointContext.documentPointToFlowPoint({ x, y });
         if (this.resizeSide?.includes('right')) {
-            if (movementX > 0 &&
-                flowPoint.x < this.model.point().x + this.model.size().width) {
+            if (movementX > 0 && flowPoint.x < this.model.point().x + this.model.size().width) {
                 return true;
             }
-            if (movementX < 0 &&
-                flowPoint.x > this.model.point().x + this.model.size().width) {
+            if (movementX < 0 && flowPoint.x > this.model.point().x + this.model.size().width) {
                 return true;
             }
         }
@@ -2233,12 +2245,10 @@ class ResizableComponent {
             }
         }
         if (this.resizeSide?.includes('bottom')) {
-            if (movementY > 0 &&
-                flowPoint.y < this.model.point().y + this.model.size().height) {
+            if (movementY > 0 && flowPoint.y < this.model.point().y + this.model.size().height) {
                 return true;
             }
-            if (movementY < 0 &&
-                flowPoint.y > this.model.point().y + this.model.size().height) {
+            if (movementY < 0 && flowPoint.y > this.model.point().y + this.model.size().height) {
                 return true;
             }
         }
@@ -2253,14 +2263,14 @@ class ResizableComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: ResizableComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('top', $event)\"\n    />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('left', $event)\"\n    />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('bottom', $event)\"\n    />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('right', $event)\"\n    />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\"\n    />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\"\n    />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\"\n    />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\"\n    />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: ResizableComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top', $event)\" />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      stroke-width=\"2\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('left', $event)\" />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom', $event)\" />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      stroke-width=\"2\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('right', $event)\" />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\" />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\" />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\" />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Microtask
 ], ResizableComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: '[resizable]', imports: [PointerDirective], template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('top', $event)\"\n    />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('left', $event)\"\n    />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('bottom', $event)\"\n    />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('right', $event)\"\n    />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\"\n    />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\"\n    />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\"\n    />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\"\n    />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"] }]
+            args: [{ standalone: true, selector: '[resizable]', imports: [PointerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top', $event)\" />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      stroke-width=\"2\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('left', $event)\" />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom', $event)\" />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      stroke-width=\"2\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('right', $event)\" />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\" />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\" />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\" />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ngAfterViewInit: [] } });
 function calcOffset(movementX, movementY, zoom) {
     return {
@@ -2368,35 +2378,43 @@ class HandleModel {
          * for custom handles
          */
         this.size = signal({
-            width: 10 + (2 * this.strokeWidth),
-            height: 10 + (2 * this.strokeWidth)
+            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
-                };
+                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 };
+                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(() => {
@@ -2408,17 +2426,13 @@ class HandleModel {
         this.state = signal('idle');
         this.updateParentSizeAndPosition$ = new Subject();
         this.parentSize = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => this.getParentSize())), {
-            initialValue: { width: 0, height: 0 }
+            initialValue: { width: 0, height: 0 },
         });
         this.parentPosition = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
-            x: this.parentReference instanceof HTMLElement
-                ? this.parentReference.offsetLeft
-                : 0, // for now just 0 for group nodes
-            y: this.parentReference instanceof HTMLElement
-                ? this.parentReference.offsetTop
-                : 0 // for now just 0 for group nodes
+            x: this.parentReference instanceof HTMLElement ? this.parentReference.offsetLeft : 0, // for now just 0 for group nodes
+            y: this.parentReference instanceof HTMLElement ? this.parentReference.offsetTop : 0, // for now just 0 for group nodes
         }))), {
-            initialValue: { x: 0, y: 0 }
+            initialValue: { x: 0, y: 0 },
         });
         this.parentReference = this.rawHandle.parentReference;
         this.template = this.rawHandle.template;
@@ -2426,8 +2440,8 @@ class HandleModel {
             $implicit: {
                 point: this.offset,
                 state: this.state,
-                node: this.parentNode.node
-            }
+                node: this.parentNode.node,
+            },
         };
     }
     updateParent() {
@@ -2437,7 +2451,7 @@ class HandleModel {
         if (this.parentReference instanceof HTMLElement) {
             return {
                 width: this.parentReference.offsetWidth,
-                height: this.parentReference.offsetHeight
+                height: this.parentReference.offsetHeight,
             };
         }
         else if (this.parentReference instanceof SVGGraphicsElement) {
@@ -2537,8 +2551,7 @@ class NodeComponent {
     }
     ngAfterViewInit() {
         this.nodeModel().linkDefaultNodeSizeWithModelSize();
-        if (this.nodeModel().node.type === 'html-template' ||
-            this.nodeModel().isComponentType) {
+        if (this.nodeModel().node.type === 'html-template' || this.nodeModel().isComponentType) {
             resizable([this.htmlWrapperRef().nativeElement], this.zone)
                 .pipe(startWith(null), tap(() => this.nodeModel()
                 .handles()
@@ -2564,8 +2577,8 @@ class NodeComponent {
     resetValidateConnection(targetHandle) {
         this.connectionController.resetValidateConnection(targetHandle);
     }
-    endConnection(handle) {
-        this.connectionController.endConnection(handle);
+    endConnection() {
+        this.connectionController.endConnection();
     }
     pullNode() {
         this.nodeRenderingService.pullNode(this.nodeModel());
@@ -2576,7 +2589,7 @@ class NodeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { nodeModel: { classPropertyName: "nodeModel", publicName: "nodeModel", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Default node -->\n@if (nodeModel().node.type === \"default\") {\n  @defer {\n    <svg:foreignObject\n      class=\"selectable\"\n      [attr.width]=\"nodeModel().size().width\"\n      [attr.height]=\"nodeModel().size().height\"\n      (pointerStart)=\"pullNode(); selectNode()\"\n    >\n      <default-node\n        #htmlWrapper\n        [selected]=\"nodeModel().selected()\"\n        [style.width]=\"styleWidth()\"\n        [style.height]=\"styleHeight()\"\n        [style.max-width]=\"styleWidth()\"\n        [style.max-height]=\"styleHeight()\"\n      >\n        <div [outerHTML]=\"nodeModel().text()\"></div>\n\n        <handle type=\"source\" position=\"right\"/>\n        <handle type=\"target\" position=\"left\" />\n      </default-node>\n    </svg:foreignObject>\n  }\n}\n\n<!-- Template node -->\n@if (nodeModel().node.type === \"html-template\" && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\"\n  >\n    <div\n      #htmlWrapper\n      class=\"wrapper\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: nodeModel().node, selected: nodeModel().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\"\n      />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (nodeModel().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\"\n  >\n    <div\n      #htmlWrapper\n      class=\"wrapper\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n    >\n      <ng-container\n        [ngComponentOutlet]=\"$any(nodeModel().node.type)\"\n        [ngComponentOutletInputs]=\"nodeModel().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\"\n      />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (nodeModel().node.type === \"default-group\") {\n  @defer {\n    <svg:rect\n      [resizable]=\"nodeModel().resizable()\"\n      [gap]=\"3\"\n      [resizerColor]=\"nodeModel().color()\"\n      class=\"default-group-node\"\n      rx=\"5\"\n      ry=\"5\"\n      [class.default-group-node_selected]=\"nodeModel().selected()\"\n      [attr.width]=\"nodeModel().size().width\"\n      [attr.height]=\"nodeModel().size().height\"\n      [style.stroke]=\"nodeModel().color()\"\n      [style.fill]=\"nodeModel().color()\"\n      (pointerStart)=\"pullNode(); selectNode()\"\n    />\n  }\n}\n\n<!-- Template group node  -->\n@if (nodeModel().node.type === \"template-group\" && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: nodeModel().node,\n          selected: nodeModel().selected,\n          width: nodeModel().width,\n          height: nodeModel().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (nodeModel().resizerTemplate(); as template) {\n  @if (nodeModel().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of nodeModel().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      r=\"5\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection(handle)\"\n    />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection(handle)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"handle.template; context: handle.templateContext\"\n      />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"nodeModel().magnetRadius\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\"\n    />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { nodeModel: { classPropertyName: "nodeModel", publicName: "nodeModel", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Default node -->\n@if (nodeModel().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      #htmlWrapper\n      [selected]=\"nodeModel().selected()\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n      [style.max-width]=\"styleWidth()\"\n      [style.max-height]=\"styleHeight()\">\n      <div [outerHTML]=\"nodeModel().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- Template node -->\n@if (nodeModel().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div #htmlWrapper class=\"wrapper\" [style.width]=\"styleWidth()\" [style.height]=\"styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: nodeModel().node, selected: nodeModel().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (nodeModel().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div #htmlWrapper class=\"wrapper\" [style.width]=\"styleWidth()\" [style.height]=\"styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(nodeModel().node.type)\"\n        [ngComponentOutletInputs]=\"nodeModel().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (nodeModel().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"nodeModel().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"nodeModel().color()\"\n    [class.default-group-node_selected]=\"nodeModel().selected()\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    [style.stroke]=\"nodeModel().color()\"\n    [style.fill]=\"nodeModel().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (nodeModel().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: nodeModel().node,\n          selected: nodeModel().selected,\n          width: nodeModel().width,\n          height: nodeModel().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (nodeModel().resizerTemplate(); as template) {\n  @if (nodeModel().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of nodeModel().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"nodeModel().magnetRadius\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     InjectionContext
@@ -2596,7 +2609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgComponentOutlet,
                         ResizableComponent,
                         HandleSizeControllerDirective,
-                    ], template: "<!-- Default node -->\n@if (nodeModel().node.type === \"default\") {\n  @defer {\n    <svg:foreignObject\n      class=\"selectable\"\n      [attr.width]=\"nodeModel().size().width\"\n      [attr.height]=\"nodeModel().size().height\"\n      (pointerStart)=\"pullNode(); selectNode()\"\n    >\n      <default-node\n        #htmlWrapper\n        [selected]=\"nodeModel().selected()\"\n        [style.width]=\"styleWidth()\"\n        [style.height]=\"styleHeight()\"\n        [style.max-width]=\"styleWidth()\"\n        [style.max-height]=\"styleHeight()\"\n      >\n        <div [outerHTML]=\"nodeModel().text()\"></div>\n\n        <handle type=\"source\" position=\"right\"/>\n        <handle type=\"target\" position=\"left\" />\n      </default-node>\n    </svg:foreignObject>\n  }\n}\n\n<!-- Template node -->\n@if (nodeModel().node.type === \"html-template\" && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\"\n  >\n    <div\n      #htmlWrapper\n      class=\"wrapper\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: nodeModel().node, selected: nodeModel().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\"\n      />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (nodeModel().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\"\n  >\n    <div\n      #htmlWrapper\n      class=\"wrapper\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n    >\n      <ng-container\n        [ngComponentOutlet]=\"$any(nodeModel().node.type)\"\n        [ngComponentOutletInputs]=\"nodeModel().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\"\n      />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (nodeModel().node.type === \"default-group\") {\n  @defer {\n    <svg:rect\n      [resizable]=\"nodeModel().resizable()\"\n      [gap]=\"3\"\n      [resizerColor]=\"nodeModel().color()\"\n      class=\"default-group-node\"\n      rx=\"5\"\n      ry=\"5\"\n      [class.default-group-node_selected]=\"nodeModel().selected()\"\n      [attr.width]=\"nodeModel().size().width\"\n      [attr.height]=\"nodeModel().size().height\"\n      [style.stroke]=\"nodeModel().color()\"\n      [style.fill]=\"nodeModel().color()\"\n      (pointerStart)=\"pullNode(); selectNode()\"\n    />\n  }\n}\n\n<!-- Template group node  -->\n@if (nodeModel().node.type === \"template-group\" && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: nodeModel().node,\n          selected: nodeModel().selected,\n          width: nodeModel().width,\n          height: nodeModel().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (nodeModel().resizerTemplate(); as template) {\n  @if (nodeModel().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of nodeModel().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      r=\"5\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection(handle)\"\n    />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection(handle)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"handle.template; context: handle.templateContext\"\n      />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"nodeModel().magnetRadius\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\"\n    />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+                    ], template: "<!-- Default node -->\n@if (nodeModel().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      #htmlWrapper\n      [selected]=\"nodeModel().selected()\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n      [style.max-width]=\"styleWidth()\"\n      [style.max-height]=\"styleHeight()\">\n      <div [outerHTML]=\"nodeModel().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- Template node -->\n@if (nodeModel().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div #htmlWrapper class=\"wrapper\" [style.width]=\"styleWidth()\" [style.height]=\"styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: nodeModel().node, selected: nodeModel().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (nodeModel().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\">\n    <div #htmlWrapper class=\"wrapper\" [style.width]=\"styleWidth()\" [style.height]=\"styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(nodeModel().node.type)\"\n        [ngComponentOutletInputs]=\"nodeModel().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (nodeModel().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"nodeModel().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"nodeModel().color()\"\n    [class.default-group-node_selected]=\"nodeModel().selected()\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    [style.stroke]=\"nodeModel().color()\"\n    [style.fill]=\"nodeModel().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (nodeModel().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: nodeModel().node,\n          selected: nodeModel().selected,\n          width: nodeModel().width,\n          height: nodeModel().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (nodeModel().resizerTemplate(); as template) {\n  @if (nodeModel().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of nodeModel().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"nodeModel().magnetRadius\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
         }], propDecorators: { ngOnInit: [], ngAfterViewInit: [] } });
 
 class ConnectionComponent {
@@ -2671,12 +2684,11 @@ class ConnectionComponent {
     @if (model().type === 'default') {
       @if (path(); as path) {
         <svg:path
-          [attr.d]="path"
-          [attr.marker-end]="markerUrl()"
-          [attr.stroke]="defaultColor"
           fill="none"
           stroke-width="2"
-        />
+          [attr.d]="path"
+          [attr.marker-end]="markerUrl()"
+          [attr.stroke]="defaultColor" />
       }
     }
 
@@ -2696,12 +2708,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     @if (model().type === 'default') {
       @if (path(); as path) {
         <svg:path
-          [attr.d]="path"
-          [attr.marker-end]="markerUrl()"
-          [attr.stroke]="defaultColor"
           fill="none"
           stroke-width="2"
-        />
+          [attr.d]="path"
+          [attr.marker-end]="markerUrl()"
+          [attr.stroke]="defaultColor" />
       }
     }
 
@@ -2798,9 +2809,7 @@ class BackgroundComponent {
                 if (!background.repeat) {
                     return background.fixed ? 0 : this.viewportService.readableViewport().x;
                 }
-                return background.fixed
-                    ? 0
-                    : this.viewportService.readableViewport().x % this.scaledImageWidth();
+                return background.fixed ? 0 : this.viewportService.readableViewport().x % this.scaledImageWidth();
             }
             return 0;
         });
@@ -2810,9 +2819,7 @@ class BackgroundComponent {
                 if (!background.repeat) {
                     return background.fixed ? 0 : this.viewportService.readableViewport().y;
                 }
-                return background.fixed
-                    ? 0
-                    : this.viewportService.readableViewport().y % this.scaledImageHeight();
+                return background.fixed ? 0 : this.viewportService.readableViewport().y % this.scaledImageHeight();
             }
             return 0;
         });
@@ -2835,16 +2842,16 @@ class BackgroundComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BackgroundComponent, isStandalone: true, selector: "g[background]", ngImport: i0, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n    >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n      />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n    />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      patternUnits=\"userSpaceOnUse\"\n      >\n      <svg:image\n        [attr.href]=\"bgImageSrc()\"\n        [attr.width]=\"scaledImageWidth()\"\n        [attr.height]=\"scaledImageHeight()\"\n        />\n    </svg:pattern>\n\n    <svg:rect\n      x=\"0\"\n      y=\"0\"\n      width=\"100%\"\n      height=\"100%\"\n      [attr.fill]=\"patternUrl\"\n      />\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", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n    >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n      />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n    />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      patternUnits=\"userSpaceOnUse\"\n      >\n      <svg:image\n        [attr.href]=\"bgImageSrc()\"\n        [attr.width]=\"scaledImageWidth()\"\n        [attr.height]=\"scaledImageHeight()\"\n        />\n    </svg:pattern>\n\n    <svg:rect\n      x=\"0\"\n      y=\"0\"\n      width=\"100%\"\n      height=\"100%\"\n      [attr.fill]=\"patternUrl\"\n      />\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" }]
+            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" }]
         }], ctorParameters: () => [] });
 function createImage(url) {
     const image = new Image();
     image.src = url;
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         image.onload = () => resolve(image);
     });
 }
@@ -2855,11 +2862,11 @@ class DefsComponent {
         this.defaultColor = 'rgb(177, 177, 183)';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DefsComponent, isStandalone: true, selector: "defs[flowDefs]", inputs: { markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    viewBox=\"-10 -10 20 20\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n    refX=\"0\"\n    refY=\"0\"\n  >\n    @if (marker.value.type === \"arrow-closed\" || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n      />\n    }\n\n    @if (marker.value.type === \"arrow\") {\n      <polyline\n        class=\"marker__arrow_default\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        points=\"-5,-4 0,0 -5,4\"\n      />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DefsComponent, isStandalone: true, selector: "defs[flowDefs]", inputs: { markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    viewBox=\"-10 -10 20 20\"\n    refX=\"0\"\n    refY=\"0\"\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\">\n    @if (marker.value.type === 'arrow-closed' || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\" />\n    }\n\n    @if (marker.value.type === 'arrow') {\n      <polyline\n        class=\"marker__arrow_default\"\n        points=\"-5,-4 0,0 -5,4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\" />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'defs[flowDefs]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KeyValuePipe], template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    viewBox=\"-10 -10 20 20\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n    refX=\"0\"\n    refY=\"0\"\n  >\n    @if (marker.value.type === \"arrow-closed\" || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n      />\n    }\n\n    @if (marker.value.type === \"arrow\") {\n      <polyline\n        class=\"marker__arrow_default\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        points=\"-5,-4 0,0 -5,4\"\n      />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"] }]
+            args: [{ standalone: true, selector: 'defs[flowDefs]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KeyValuePipe], template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    viewBox=\"-10 -10 20 20\"\n    refX=\"0\"\n    refY=\"0\"\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\">\n    @if (marker.value.type === 'arrow-closed' || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\" />\n    }\n\n    @if (marker.value.type === 'arrow') {\n      <polyline\n        class=\"marker__arrow_default\"\n        points=\"-5,-4 0,0 -5,4\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\" />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"] }]
         }] });
 
 class FlowSizeControllerDirective {
@@ -2874,10 +2881,12 @@ class FlowSizeControllerDirective {
             const view = this.flowSettingsService.view();
             return view === 'auto' ? '100%' : view[1];
         });
-        resizable([this.host.nativeElement], inject(NgZone)).pipe(tap(([entry]) => {
+        resizable([this.host.nativeElement], inject(NgZone))
+            .pipe(tap(([entry]) => {
             this.flowSettingsService.computedFlowWidth.set(entry.contentRect.width);
             this.flowSettingsService.computedFlowHeight.set(entry.contentRect.height);
-        }), takeUntilDestroyed()).subscribe();
+        }), takeUntilDestroyed())
+            .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FlowSizeControllerDirective, isStandalone: true, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "flowWidth()", "attr.height": "flowHeight()" } }, ngImport: i0 }); }
@@ -2889,7 +2898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'svg[flowSizeController]',
                     host: {
                         '[attr.width]': 'flowWidth()',
-                        '[attr.height]': 'flowHeight()'
+                        '[attr.height]': 'flowHeight()',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -3199,7 +3208,7 @@ class VflowComponent {
             ComponentEventBusService,
             KeyboardService,
             OverlaysService,
-        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, 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: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective()?.templateRef\"\n    />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\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      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\n      }\n    }\n\n    @if (!optimization().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      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\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: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, 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: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], 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>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"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          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().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      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.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", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\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: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -3216,10 +3225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ComponentEventBusService,
                         KeyboardService,
                         OverlaysService,
-                    ], hostDirectives: [
-                        connectionControllerHostDirective,
-                        changesControllerHostDirective,
-                    ], imports: [
+                    ], hostDirectives: [connectionControllerHostDirective, changesControllerHostDirective], imports: [
                         RootSvgReferenceDirective,
                         RootSvgContextDirective,
                         RootPointerDirective,
@@ -3232,7 +3238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NodeComponent,
                         EdgeComponent,
                         NgTemplateOutlet,
-                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective()?.templateRef\"\n    />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\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      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\n      }\n    }\n\n    @if (!optimization().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      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
+                    ], 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>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"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          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().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      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.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", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -3265,7 +3271,7 @@ class DragHandleDirective {
         this.nodeAccessor = inject(NodeAccessorService);
         this.model.dragHandlesCount.update((count) => count + 1);
         inject(DestroyRef).onDestroy(() => {
-            this.model.dragHandlesCount.update(count => count - 1);
+            this.model.dragHandlesCount.update((count) => count - 1);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -3277,7 +3283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     standalone: true,
                     selector: '[dragHandle]',
                     host: {
-                        'class': 'vflow-drag-handle'
+                        class: 'vflow-drag-handle',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -3371,26 +3377,18 @@ class MiniMapComponent {
                     return { x: this.minimapOffset, y: this.minimapOffset };
                 case 'top-right':
                     return {
-                        x: this.flowSettingsService.computedFlowWidth() -
-                            this.minimapWidth() -
-                            this.minimapOffset,
+                        x: this.flowSettingsService.computedFlowWidth() - this.minimapWidth() - this.minimapOffset,
                         y: this.minimapOffset,
                     };
                 case 'bottom-left':
                     return {
                         x: this.minimapOffset,
-                        y: this.flowSettingsService.computedFlowHeight() -
-                            this.minimapHeight() -
-                            this.minimapOffset,
+                        y: this.flowSettingsService.computedFlowHeight() - this.minimapHeight() - this.minimapOffset,
                     };
                 case 'bottom-right':
                     return {
-                        x: this.flowSettingsService.computedFlowWidth() -
-                            this.minimapWidth() -
-                            this.minimapOffset,
-                        y: this.flowSettingsService.computedFlowHeight() -
-                            this.minimapHeight() -
-                            this.minimapOffset,
+                        x: this.flowSettingsService.computedFlowWidth() - this.minimapWidth() - this.minimapOffset,
+                        y: this.flowSettingsService.computedFlowHeight() - this.minimapHeight() - this.minimapOffset,
                     };
             }
         });
@@ -3427,11 +3425,11 @@ class MiniMapComponent {
         return node;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MiniMapComponent, isStandalone: true, selector: "mini-map", inputs: { maskColor: { classPropertyName: "maskColor", publicName: "maskColor", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "minimap", first: true, predicate: ["minimap"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor()\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (\n            model.node.type === \"default\" ||\n            model.node.type === \"html-template\" ||\n            model.isComponentType\n          ) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n            >\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\"\n              >\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (\n            model.node.type === \"default-group\" ||\n            model.node.type === \"template-group\"\n          ) {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\"\n            />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"], dependencies: [{ kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MiniMapComponent, isStandalone: true, selector: "mini-map", inputs: { maskColor: { classPropertyName: "maskColor", publicName: "maskColor", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "minimap", first: true, predicate: ["minimap"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #minimap>\n  <svg:rect\n    fill=\"none\"\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\" />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\">\n    <svg:rect [attr.width]=\"minimapWidth()\" [attr.height]=\"minimapHeight()\" [attr.fill]=\"maskColor()\" />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\" />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (model.node.type === 'default' || model.node.type === 'html-template' || model.isComponentType) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\">\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\">\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (model.node.type === 'default-group' || model.node.type === 'template-group') {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\" />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"], dependencies: [{ kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mini-map', imports: [DefaultNodeComponent], template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor()\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (\n            model.node.type === \"default\" ||\n            model.node.type === \"html-template\" ||\n            model.isComponentType\n          ) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n            >\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\"\n              >\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (\n            model.node.type === \"default-group\" ||\n            model.node.type === \"template-group\"\n          ) {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\"\n            />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"] }]
+            args: [{ standalone: true, selector: 'mini-map', imports: [DefaultNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #minimap>\n  <svg:rect\n    fill=\"none\"\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\" />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\">\n    <svg:rect [attr.width]=\"minimapWidth()\" [attr.height]=\"minimapHeight()\" [attr.fill]=\"maskColor()\" />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\" />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (model.node.type === 'default' || model.node.type === 'html-template' || model.isComponentType) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\">\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\">\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (model.node.type === 'default-group' || model.node.type === 'template-group') {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\" />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"] }]
         }] });
 
 class ToolbarModel {
@@ -3445,22 +3443,22 @@ class ToolbarModel {
                 case 'top':
                     return {
                         x: this.node.size().width / 2 - this.size().width / 2,
-                        y: -this.size().height - this.offset()
+                        y: -this.size().height - this.offset(),
                     };
                 case 'bottom':
                     return {
                         x: this.node.size().width / 2 - this.size().width / 2,
-                        y: this.node.size().height + this.offset()
+                        y: this.node.size().height + this.offset(),
                     };
                 case 'left':
                     return {
                         x: -this.size().width - this.offset(),
-                        y: this.node.size().height / 2 - this.size().height / 2
+                        y: this.node.size().height / 2 - this.size().height / 2,
                     };
                 case 'right':
                     return {
                         x: this.node.size().width + this.offset(),
-                        y: this.node.size().height / 2 - this.size().height / 2
+                        y: this.node.size().height / 2 - this.size().height / 2,
                     };
             }
         });
@@ -3522,7 +3520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Directive,
             args: [{
                     selector: '[nodeToolbarWrapper]',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -3539,7 +3537,7 @@ const Vflow = [
     EdgeLabelHtmlTemplateDirective,
     EdgeTemplateDirective,
     ConnectionTemplateDirective,
-    HandleTemplateDirective
+    HandleTemplateDirective,
 ];
 
 const mockModel = () => new NodeModel({ id: 'mock', type: 'default', point: { x: 0, y: 0 } });
@@ -3548,8 +3546,8 @@ function provideCustomNodeMocks() {
         {
             provide: ComponentEventBusService,
             useValue: {
-                pushEvent: () => { }
-            }
+                pushEvent: () => { },
+            },
         },
         {
             provide: HandleService,
@@ -3557,7 +3555,7 @@ function provideCustomNodeMocks() {
                 node: signal(mockModel()),
                 createHandle: () => { },
                 destroyHandle: () => { },
-            })
+            }),
         },
         {
             provide: RootPointerDirective,
@@ -3568,32 +3566,32 @@ function provideCustomNodeMocks() {
                     movementX: 0,
                     movementY: 0,
                     target: null,
-                    originalEvent: null
+                    originalEvent: null,
                 }),
-                documentPointerEnd$: of(null)
-            }
+                documentPointerEnd$: of(null),
+            },
         },
         {
             provide: SpacePointContextDirective,
             useValue: {
-                documentPointToFlowPoint: (point) => point
-            }
+                documentPointToFlowPoint: (point) => point,
+            },
         },
         {
             provide: NodeAccessorService,
             useFactory: () => ({
-                model: signal(mockModel())
-            })
+                model: signal(mockModel()),
+            }),
         },
         {
             provide: SelectionService,
             useValue: {
                 select: () => { },
-            }
+            },
         },
         FlowSettingsService,
         FlowEntitiesService,
-        ViewportService
+        ViewportService,
     ];
 }