ngx-vflow 1.6.1 → 1.7.0

package/fesm2022/ngx-vflow.mjs

@@ -120,7 +120,7 @@ class FlowEntitiesService {
         this.minimap = signal(null);
     }
     getNode(id) {
-        return this.nodes().find(({ node }) => node.id === id);
+        return this.nodes().find(({ rawNode }) => rawNode.id === id);
     }
     getDetachedEdges() {
         return this.edges().filter((e) => e.detached());
@@ -217,7 +217,7 @@ class ViewportService {
                 this.entitiesService.nodes()
             : // Otherwise fit to specific nodes
                 nodeIds
-                    .map((nodeId) => this.entitiesService.nodes().find(({ node }) => node.id === nodeId))
+                    .map((nodeId) => this.entitiesService.nodes().find(({ rawNode }) => rawNode.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 }); }
@@ -459,6 +459,10 @@ const evTarget = (anyEvent) => {
 
 const round = (num) => Math.round(num * 100) / 100;
 
+function align(num, constant) {
+    return Math.ceil(num / constant) * constant;
+}
+
 class DraggableService {
     constructor() {
         this.entitiesService = inject(FlowEntitiesService);
@@ -568,9 +572,6 @@ class DraggableService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService, decorators: [{
             type: Injectable
         }] });
-function align(num, constant) {
-    return Math.ceil(num / constant) * constant;
-}
 
 class EdgeTemplateDirective {
     constructor() {
@@ -640,6 +641,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ng-template[nodeHtml]',
                 }]
         }] });
+class NodeSvgTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeSvgTemplateDirective, isStandalone: true, selector: "ng-template[nodeSvg]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[nodeSvg]',
+                }]
+        }] });
 class GroupNodeTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
@@ -674,7 +692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 function addNodesToEdges(nodes, edges) {
     const nodesById = nodes.reduce((acc, n) => {
-        acc[n.node.id] = n;
+        acc[n.rawNode.id] = n;
         return acc;
     }, {});
     edges.forEach((e) => {
@@ -775,7 +793,7 @@ class CustomNodeBaseComponent {
         }
         return merge(...Array.from(emittersOrRefs.keys()).map((emitter) => emitter.pipe(tap((event) => {
             this.eventBus.pushEvent({
-                nodeId: this.nodeService.model()?.node.id ?? '',
+                nodeId: this.nodeService.model()?.rawNode.id ?? '',
                 eventName: emittersOrRefs.get(emitter),
                 eventPayload: event,
             });
@@ -859,6 +877,12 @@ function isTemplateStaticNode(node) {
 function isTemplateDynamicNode(node) {
     return node.type === 'html-template';
 }
+function isSvgTemplateStaticNode(node) {
+    return node.type === 'svg-template';
+}
+function isSvgTemplateDynamicNode(node) {
+    return node.type === 'html-template';
+}
 function isDefaultStaticNode(node) {
     return node.type === 'default';
 }
@@ -882,18 +906,40 @@ function isTemplateDynamicGroupNode(node) {
 // the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
 const MAGIC_NUMBER_TO_FIX_GLITCH_IN_CHROME = 2;
 
+function toUnifiedNode(node) {
+    if (isDynamicNode(node)) {
+        return node;
+    }
+    return {
+        ...toSignalProperties(node),
+        // non-signal props below
+        id: node.id,
+        // TODO this actually of incorrect type for component nodes
+        type: node.type,
+    };
+}
+function toSignalProperties(obj) {
+    const newObj = {};
+    for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            newObj[key] = signal(obj[key]);
+        }
+    }
+    return newObj;
+}
+
 class NodeModel {
     static { this.defaultWidth = 100; }
     static { this.defaultHeight = 50; }
     static { this.defaultColor = '#1b262c'; }
-    constructor(node) {
-        this.node = node;
+    constructor(rawNode) {
+        this.rawNode = rawNode;
         this.entitiesService = inject(FlowEntitiesService);
-        this.point = this.createInternalPointSignal();
+        this.point = signal({ x: 0, y: 0 });
         this.point$ = toObservable(this.point);
-        this.width = this.createWidthSignal(NodeModel.defaultWidth);
+        this.width = signal(NodeModel.defaultWidth);
         this.width$ = toObservable(this.width);
-        this.height = this.createHeightSignal(NodeModel.defaultHeight);
+        this.height = signal(NodeModel.defaultHeight);
         this.height$ = toObservable(this.height);
         /**
          * @deprecated use width or height signals
@@ -929,15 +975,15 @@ class NodeModel {
         // disabled for configuration for now
         this.magnetRadius = 20;
         // TODO: not sure if we need to statically store it
-        this.isComponentType = isComponentStaticNode(this.node) || isComponentDynamicNode(this.node);
+        this.isComponentType = isComponentStaticNode(this.rawNode) || isComponentDynamicNode(this.rawNode);
         // Default node specific thing
-        this.text = this.createTextSignal();
+        this.text = signal('');
         // Component node specific thing
         this.componentTypeInputs = {
-            node: this.node,
+            node: this.rawNode,
         };
-        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.rawNode.id === this.parentId()) ?? null);
+        this.children = computed(() => this.entitiesService.nodes().filter((n) => n.parentId() === this.rawNode.id));
         this.color = signal(NodeModel.defaultColor);
         this.resizable = signal(false);
         this.resizing = signal(false);
@@ -946,50 +992,53 @@ class NodeModel {
             $implicit: {},
         };
         this.parentId = signal(null);
-        if (isDefined(node.draggable)) {
-            if (isDynamicNode(node)) {
-                this.draggable = node.draggable;
-            }
-            else {
-                this.draggable.set(node.draggable);
-            }
+        const internalNode = toUnifiedNode(rawNode);
+        if (internalNode.point) {
+            this.point = internalNode.point;
         }
-        if (isDefined(node.parentId)) {
-            if (isDynamicNode(node)) {
-                this.parentId = node.parentId;
-            }
-            else {
-                this.parentId.set(node.parentId);
-            }
+        if (internalNode.width) {
+            this.width = internalNode.width;
         }
-        if (node.type === 'default-group' && node.color) {
-            if (isDynamicNode(node)) {
-                this.color = node.color;
-            }
-            else {
-                this.color.set(node.color);
-            }
+        if (internalNode.height) {
+            this.height = internalNode.height;
         }
-        if (node.type === 'default-group' && node.resizable) {
-            if (isDynamicNode(node)) {
-                this.resizable = node.resizable;
-            }
-            else {
-                this.resizable.set(node.resizable);
-            }
+        if (internalNode.draggable) {
+            this.draggable = internalNode.draggable;
         }
-        if (node.type === 'html-template') {
+        if (internalNode.parentId) {
+            this.parentId = internalNode.parentId;
+        }
+        if (internalNode.type === 'default-group' && internalNode.color) {
+            this.color = internalNode.color;
+        }
+        if (internalNode.type === 'default-group' && internalNode.resizable) {
+            this.resizable = internalNode.resizable;
+        }
+        if (internalNode.type === 'default' && internalNode.text) {
+            this.text = internalNode.text;
+        }
+        if (internalNode.type === 'html-template') {
+            this.context = {
+                $implicit: {
+                    node: rawNode,
+                    selected: this.selected,
+                },
+            };
+        }
+        if (internalNode.type === 'svg-template') {
             this.context = {
                 $implicit: {
-                    node: node,
+                    node: rawNode,
                     selected: this.selected,
+                    width: this.width,
+                    height: this.height,
                 },
             };
         }
-        else if (node.type === 'template-group') {
+        if (internalNode.type === 'template-group') {
             this.context = {
                 $implicit: {
-                    node: node,
+                    node: rawNode,
                     selected: this.selected.asReadonly(),
                     width: this.width,
                     height: this.height,
@@ -1000,31 +1049,6 @@ class NodeModel {
     setPoint(point) {
         this.point.set(point);
     }
-    createTextSignal() {
-        const node = this.node;
-        if (node.type === 'default') {
-            if (isDynamicNode(node)) {
-                return node.text ?? signal('');
-            }
-            else {
-                return signal(node.text ?? '');
-            }
-        }
-        return signal('');
-    }
-    createInternalPointSignal() {
-        return isDynamicNode(this.node) ? this.node.point : signal({ x: this.node.point.x, y: this.node.point.y });
-    }
-    createWidthSignal(defaultValue) {
-        return isDynamicNode(this.node)
-            ? (this.node.width ?? signal(defaultValue))
-            : signal(this.node.width ?? defaultValue);
-    }
-    createHeightSignal(defaultValue) {
-        return isDynamicNode(this.node)
-            ? (this.node.height ?? signal(defaultValue))
-            : signal(this.node.height ?? defaultValue);
-    }
 }
 
 class EdgeLabelModel {
@@ -1410,13 +1434,13 @@ class EdgeModel {
     }
 }
 
-class ReferenceKeeper {
+class ReferenceIdentityChecker {
     /**
      * Create new models for new node references and keep old models for old node references
      */
     static nodes(newNodes, oldNodeModels) {
         const oldNodesMap = new Map();
-        oldNodeModels.forEach((model) => oldNodesMap.set(model.node, model));
+        oldNodeModels.forEach((model) => oldNodesMap.set(model.rawNode, model));
         return newNodes.map((newNode) => {
             if (oldNodesMap.has(newNode))
                 return oldNodesMap.get(newNode);
@@ -1453,12 +1477,12 @@ class NodesChangeService {
             return this.entitiesService
                 .nodes()
                 .filter((node) => node === changedNode || node.selected())
-                .map((node) => ({ type: 'position', id: node.node.id, point: node.point() }));
+                .map((node) => ({ type: 'position', id: node.rawNode.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.rawNode.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.rawNode.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.rawNode.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.rawNode.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
@@ -1669,7 +1693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 function isGroupNode(node) {
-    return node.node.type === 'default-group' || node.node.type === 'template-group';
+    return node.rawNode.type === 'default-group' || node.rawNode.type === 'template-group';
 }
 
 class NodeRenderingService {
@@ -1816,10 +1840,11 @@ function Microtask(target, key, descriptor) {
 class OverlaysService {
     constructor() {
         this.toolbars = signal([]);
-        this.nodeToolbars = computed(() => {
+        this.nodeToolbarsMap = computed(() => {
             const map = new Map();
             this.toolbars().forEach((toolbar) => {
-                map.set(toolbar.node, toolbar);
+                const existing = map.get(toolbar.node) ?? [];
+                map.set(toolbar.node, [...existing, toolbar]);
             });
             return map;
         });
@@ -2002,8 +2027,8 @@ class ConnectionControllerDirective {
                 targetHandle = adjusted.targetHandle;
             }
             const valid = this.flowEntitiesService.connection().validator({
-                source: source.node.id,
-                target: target.node.id,
+                source: source.rawNode.id,
+                target: target.rawNode.id,
                 sourceHandle: sourceHandle.rawHandle.id,
                 targetHandle: targetHandle.rawHandle.id,
             });
@@ -2068,8 +2093,8 @@ function statusToConnection(status, isStrictMode) {
         sourceHandle = adjusted.sourceHandle;
         targetHandle = adjusted.targetHandle;
     }
-    const sourceId = source.node.id;
-    const targetId = target.node.id;
+    const sourceId = source.rawNode.id;
+    const targetId = target.rawNode.id;
     const sourceHandleId = sourceHandle.rawHandle.id;
     const targetHandleId = targetHandle.rawHandle.id;
     return {
@@ -2319,6 +2344,7 @@ class ResizableComponent {
         this.rootPointer = inject(RootPointerDirective);
         this.viewportService = inject(ViewportService);
         this.spacePointContext = inject(SpacePointContextDirective);
+        this.settingsService = inject(FlowSettingsService);
         this.hostRef = inject(ElementRef);
         this.resizable = input();
         this.resizerColor = input('#2e414c');
@@ -2363,7 +2389,7 @@ class ResizableComponent {
         if (!this.resizeSide)
             return;
         const offset = calcOffset(event.movementX, event.movementY, this.zoom());
-        const resized = applyResize(this.resizeSide, this.model, offset, this.getDistanceToEdge(event));
+        const resized = this.applyResize(this.resizeSide, this.model, offset, this.getDistanceToEdge(event));
         const { x, y, width, height } = constrainRect(resized, this.model, this.resizeSide, this.minWidth, this.minHeight);
         this.model.setPoint({ x, y });
         this.model.width.set(width);
@@ -2383,6 +2409,104 @@ class ResizableComponent {
             bottom: flowPoint.y - (y + this.model.height()),
         };
     }
+    applyResize(side, model, offset, distanceToEdge) {
+        const { x, y } = model.point();
+        const width = model.width();
+        const height = model.height();
+        const [snapX, snapY] = this.settingsService.snapGrid();
+        switch (side) {
+            case 'left': {
+                const movementX = offset.x + distanceToEdge.left;
+                const newX = align(x + movementX, snapX);
+                const deltaX = newX - x;
+                return {
+                    x: newX,
+                    y,
+                    width: width - deltaX,
+                    height,
+                };
+            }
+            case 'right': {
+                const movementX = offset.x + distanceToEdge.right;
+                const newWidth = align(width + movementX, snapX);
+                return {
+                    x,
+                    y,
+                    width: newWidth,
+                    height,
+                };
+            }
+            case 'top': {
+                const movementY = offset.y + distanceToEdge.top;
+                const newY = align(y + movementY, snapY);
+                const deltaY = newY - y;
+                return {
+                    x,
+                    y: newY,
+                    width,
+                    height: height - deltaY,
+                };
+            }
+            case 'bottom': {
+                const movementY = offset.y + distanceToEdge.bottom;
+                const newHeight = align(height + movementY, snapY);
+                return {
+                    x,
+                    y,
+                    width,
+                    height: newHeight,
+                };
+            }
+            case 'top-left': {
+                const movementX = offset.x + distanceToEdge.left;
+                const movementY = offset.y + distanceToEdge.top;
+                const newX = align(x + movementX, snapX);
+                const newY = align(y + movementY, snapY);
+                const deltaX = newX - x;
+                const deltaY = newY - y;
+                return {
+                    x: newX,
+                    y: newY,
+                    width: width - deltaX,
+                    height: height - deltaY,
+                };
+            }
+            case 'top-right': {
+                const movementX = offset.x + distanceToEdge.right;
+                const movementY = offset.y + distanceToEdge.top;
+                const newY = align(y + movementY, snapY);
+                const deltaY = newY - y;
+                return {
+                    x,
+                    y: newY,
+                    width: align(width + movementX, snapX),
+                    height: height - deltaY,
+                };
+            }
+            case 'bottom-left': {
+                const movementX = offset.x + distanceToEdge.left;
+                const movementY = offset.y + distanceToEdge.bottom;
+                const newX = align(x + movementX, snapX);
+                const deltaX = newX - x;
+                return {
+                    x: newX,
+                    y,
+                    width: width - deltaX,
+                    height: align(height + movementY, snapY),
+                };
+            }
+            case 'bottom-right': {
+                const movementX = offset.x + distanceToEdge.right;
+                const movementY = offset.y + distanceToEdge.bottom;
+                return {
+                    x,
+                    y,
+                    width: align(width + movementX, snapX),
+                    height: align(height + movementY, snapY),
+                };
+            }
+        }
+    }
     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      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 }); }
 }
@@ -2395,50 +2519,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], ctorParameters: () => [], propDecorators: { ngAfterViewInit: [] } });
 function calcOffset(movementX, movementY, zoom) {
     return {
-        offsetX: round(movementX / zoom),
-        offsetY: round(movementY / zoom),
+        x: round(movementX / zoom),
+        y: round(movementY / zoom),
     };
 }
-function applyResize(side, model, offset, distanceToEdge) {
-    const { offsetX, offsetY } = offset;
-    const { x, y } = model.point();
-    const width = model.width();
-    const height = model.height();
-    // Handle each case of resizing (top, bottom, left, right, corners)
-    switch (side) {
-        case 'left':
-            return { x: x + offsetX + distanceToEdge.left, y, width: width - offsetX - distanceToEdge.left, height };
-        case 'right':
-            return { x, y, width: width + offsetX + distanceToEdge.right, height };
-        case 'top':
-            return { x, y: y + offsetY + distanceToEdge.top, width, height: height - offsetY - distanceToEdge.top };
-        case 'bottom':
-            return { x, y, width, height: height + offsetY + distanceToEdge.bottom };
-        case 'top-left':
-            return {
-                x: x + offsetX + distanceToEdge.left,
-                y: y + offsetY + distanceToEdge.top,
-                width: width - offsetX - distanceToEdge.left,
-                height: height - offsetY - distanceToEdge.top,
-            };
-        case 'top-right':
-            return {
-                x,
-                y: y + offsetY + distanceToEdge.top,
-                width: width + offsetX + distanceToEdge.right,
-                height: height - offsetY - distanceToEdge.top,
-            };
-        case 'bottom-left':
-            return {
-                x: x + offsetX + distanceToEdge.left,
-                y,
-                width: width - offsetX - distanceToEdge.left,
-                height: height + offsetY + distanceToEdge.bottom,
-            };
-        case 'bottom-right':
-            return { x, y, width: width + offsetX + distanceToEdge.right, height: height + offsetY + distanceToEdge.bottom };
-    }
-}
 function constrainRect(rect, model, side, minWidth, minHeight) {
     let { x, y, width, height } = rect;
     // 1. Prevent negative dimensions
@@ -2568,7 +2652,7 @@ class HandleModel {
             $implicit: {
                 point: this.hostOffset,
                 state: this.state,
-                node: this.parentNode.node,
+                node: this.parentNode.rawNode,
             },
         };
     }
@@ -2661,6 +2745,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * Only suitable for HTML nodes
+ */
 class NodeResizeControllerDirective {
     constructor() {
         this.nodeAccessor = inject(NodeAccessorService);
@@ -2706,12 +2793,13 @@ class NodeComponent {
         this.connectionController = inject(ConnectionControllerDirective, { optional: true });
         this.model = input.required();
         this.nodeTemplate = input();
+        this.nodeSvgTemplate = input();
         this.groupNodeTemplate = input();
         this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
             this.flowStatusService.status().state === 'connection-validation' ||
             this.flowStatusService.status().state === 'reconnection-start' ||
             this.flowStatusService.status().state === 'reconnection-validation');
-        this.toolbar = computed(() => this.overlaysService.nodeToolbars().get(this.model()));
+        this.toolbars = computed(() => this.overlaysService.nodeToolbarsMap().get(this.model()));
     }
     ngOnInit() {
         this.nodeAccessor.model.set(this.model());
@@ -2753,7 +2841,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: { model: { classPropertyName: "model", publicName: "model", 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], ngImport: i0, template: "<!-- Default node -->\n@if (model().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().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 (model().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().node.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\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    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().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]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().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"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }], 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: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeSvgTemplate: { classPropertyName: "nodeSvgTemplate", publicName: "nodeSvgTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], ngImport: i0, template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\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    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().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]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track 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"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
@@ -2769,7 +2857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         HandleSizeControllerDirective,
                         NodeHandlesControllerDirective,
                         NodeResizeControllerDirective,
-                    ], template: "<!-- Default node -->\n@if (model().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().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 (model().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().node.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\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    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().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]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().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"] }]
+                    ], template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\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    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().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]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track 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"] }]
         }] });
 
 class ConnectionComponent {
@@ -3161,6 +3249,7 @@ class VflowComponent {
         // #endregion
         // #region TEMPLATES
         this.nodeTemplateDirective = contentChild(NodeHtmlTemplateDirective);
+        this.nodeSvgTemplateDirective = contentChild(NodeSvgTemplateDirective);
         this.groupNodeTemplateDirective = contentChild(GroupNodeTemplateDirective);
         this.edgeTemplateDirective = contentChild(EdgeTemplateDirective);
         this.edgeLabelHtmlDirective = contentChild(EdgeLabelHtmlTemplateDirective);
@@ -3279,7 +3368,7 @@ class VflowComponent {
      * Nodes to render
      */
     set nodes(newNodes) {
-        const newModels = runInInjectionContext(this.injector, () => ReferenceKeeper.nodes(newNodes, this.flowEntitiesService.nodes()));
+        const newModels = runInInjectionContext(this.injector, () => ReferenceIdentityChecker.nodes(newNodes, this.flowEntitiesService.nodes()));
         // quick and dirty binding nodes to edges
         addNodesToEdges(newModels, this.flowEntitiesService.edges());
         this.flowEntitiesService.nodes.set(newModels);
@@ -3288,7 +3377,7 @@ class VflowComponent {
      * Edges to render
      */
     set edges(newEdges) {
-        const newModels = runInInjectionContext(this.injector, () => ReferenceKeeper.edges(newEdges, this.flowEntitiesService.edges()));
+        const newModels = runInInjectionContext(this.injector, () => ReferenceIdentityChecker.edges(newEdges, this.flowEntitiesService.edges()));
         // quick and dirty binding nodes to edges
         addNodesToEdges(this.nodeModels(), newModels);
         this.flowEntitiesService.edges.set(newModels);
@@ -3342,7 +3431,7 @@ class VflowComponent {
      * @param id node id
      */
     getNode(id) {
-        return this.flowEntitiesService.getNode(id)?.node;
+        return this.flowEntitiesService.getNode(id)?.rawNode;
     }
     /**
      * Sync method to get detached edges
@@ -3357,7 +3446,7 @@ class VflowComponent {
         return this.spacePointContext().documentPointToFlowPoint(point);
     }
     // #endregion
-    trackNodes(idx, { node }) {
+    trackNodes(idx, { rawNode: node }) {
         return node;
     }
     trackEdges(idx, { edge }) {
@@ -3365,7 +3454,7 @@ class VflowComponent {
     }
     setInitialNodesOrder() {
         this.nodeModels().forEach((model) => {
-            switch (model.node.type) {
+            switch (model.rawNode.type) {
                 case 'default-group':
                 case 'template-group': {
                     this.nodeRenderingService.pullNode(model);
@@ -3388,7 +3477,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: 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          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [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          [model]=\"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: ["model", "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: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["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          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!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          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", 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: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -3419,7 +3508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NodeComponent,
                         EdgeComponent,
                         NgTemplateOutlet,
-                    ], 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          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [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          [model]=\"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"] }]
+                    ], 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          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!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          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", 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: [{
@@ -3609,15 +3698,15 @@ class MiniMapComponent {
         model.template.set(this.minimap());
         this.entitiesService.minimap.set(model);
     }
-    trackNodes(idx, { node }) {
-        return node;
+    trackNodes(idx, { rawNode }) {
+        return rawNode;
     }
     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    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 }); }
+    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.rawNode.type === 'default' || model.rawNode.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.rawNode.type === 'default-group' || model.rawNode.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], 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"] }]
+            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.rawNode.type === 'default' || model.rawNode.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.rawNode.type === 'default-group' || model.rawNode.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 {
@@ -3747,6 +3836,7 @@ const Vflow = [
     DragHandleDirective,
     ConnectionControllerDirective,
     NodeHtmlTemplateDirective,
+    NodeSvgTemplateDirective,
     GroupNodeTemplateDirective,
     EdgeLabelHtmlTemplateDirective,
     EdgeTemplateDirective,
@@ -3866,6 +3956,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ng-template[nodeHtml]',
                 }]
         }] });
+class NodeSvgTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeSvgTemplateMockDirective, isStandalone: true, selector: "ng-template[nodeSvg]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[nodeSvg]',
+                }]
+        }] });
 class GroupNodeTemplateMockDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
@@ -4325,5 +4429,5 @@ const VflowMocks = [
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionControllerMockDirective, ConnectionTemplateDirective, ConnectionTemplateMockDirective, CustomDynamicNodeComponent, CustomNodeComponent, CustomTemplateEdgeComponent, DragHandleDirective, DragHandleMockDirective, EdgeLabelHtmlTemplateDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateDirective, EdgeTemplateMockDirective, GroupNodeTemplateDirective, GroupNodeTemplateMockDirective, HandleComponent, HandleMockComponent, HandleTemplateDirective, HandleTemplateMockDirective, MiniMapComponent, MiniMapMockComponent, NodeHtmlTemplateDirective, NodeHtmlTemplateMockDirective, NodeToolbarComponent, NodeToolbarMockComponent, NodeToolbarWrapperDirective, ResizableComponent, ResizableMockComponent, SelectableDirective, SelectableMockDirective, Vflow, VflowComponent, VflowMockComponent, VflowMocks, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionControllerMockDirective, ConnectionTemplateDirective, ConnectionTemplateMockDirective, CustomDynamicNodeComponent, CustomNodeComponent, CustomTemplateEdgeComponent, DragHandleDirective, DragHandleMockDirective, EdgeLabelHtmlTemplateDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateDirective, EdgeTemplateMockDirective, GroupNodeTemplateDirective, GroupNodeTemplateMockDirective, HandleComponent, HandleMockComponent, HandleTemplateDirective, HandleTemplateMockDirective, MiniMapComponent, MiniMapMockComponent, NodeHtmlTemplateDirective, NodeHtmlTemplateMockDirective, NodeSvgTemplateDirective, NodeSvgTemplateMockDirective, NodeToolbarComponent, NodeToolbarMockComponent, NodeToolbarWrapperDirective, ResizableComponent, ResizableMockComponent, SelectableDirective, SelectableMockDirective, Vflow, VflowComponent, VflowMockComponent, VflowMocks, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isSvgTemplateDynamicNode, isSvgTemplateStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
 //# sourceMappingURL=ngx-vflow.mjs.map