ngx-vflow 0.14.1 → 0.16.0

package/fesm2022/ngx-vflow.mjs

@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
 import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Component, Injector, ChangeDetectionStrategy, HostListener, ViewChild, NgZone, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { switchMap, merge, fromEvent, tap, Subject, observeOn, animationFrameScheduler, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, share, Observable, startWith } from 'rxjs';
+import { switchMap, merge, fromEvent, tap, Subject, observeOn, animationFrameScheduler, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, share, Observable, startWith, of } from 'rxjs';
 import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { __decorate } from 'tslib';
@@ -406,30 +406,37 @@ class MapContextDirective {
             this.viewportService.readableViewport.set(mapTransformToViewportState(transform));
             this.zoomableSelection.attr('transform', transform.toString());
         };
+        this.handleZoomStart = ({ transform }) => {
+            this.viewportForSelection = {
+                start: mapTransformToViewportState(transform)
+            };
+        };
+        this.handleZoomEnd = ({ transform, sourceEvent }) => {
+            this.viewportForSelection = {
+                ...this.viewportForSelection,
+                end: mapTransformToViewportState(transform),
+                target: evTarget(sourceEvent)
+            };
+            this.selectionService.setViewport(this.viewportForSelection);
+        };
+        this.filterCondition = (event) => {
+            if (event.type === 'mousedown' || event.type === 'touchstart') {
+                return event.target.closest('.vflow-node') === null;
+            }
+            return true;
+        };
     }
     ngOnInit() {
         this.zoomBehavior = zoom()
             .scaleExtent([this.flowSettingsService.minZoom(), this.flowSettingsService.maxZoom()])
-            .on('start', (event) => this.onD3zoomStart(event))
-            .on('zoom', (event) => this.handleZoom(event))
-            .on('end', (event) => this.onD3zoomEnd(event));
+            .filter(this.filterCondition)
+            .on('start', this.handleZoomStart)
+            .on('zoom', this.handleZoom)
+            .on('end', this.handleZoomEnd);
         this.rootSvgSelection
             .call(this.zoomBehavior)
             .on('dblclick.zoom', null);
     }
-    onD3zoomStart({ transform }) {
-        this.viewportForSelection = {
-            start: mapTransformToViewportState(transform)
-        };
-    }
-    onD3zoomEnd({ transform, sourceEvent }) {
-        this.viewportForSelection = {
-            ...this.viewportForSelection,
-            end: mapTransformToViewportState(transform),
-            target: evTarget(sourceEvent)
-        };
-        this.selectionService.setViewport(this.viewportForSelection);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MapContextDirective, selector: "g[mapContext]", ngImport: i0 }); }
 }
@@ -458,8 +465,8 @@ class DraggableService {
      * @param model model with data for this element
      */
     enable(element, model) {
-        const d3Element = select(element);
-        d3Element.call(this.getDragBehavior(model));
+        select(element)
+            .call(this.getDragBehavior(model));
     }
     /**
      * Disable draggable behavior for element.
@@ -468,8 +475,8 @@ class DraggableService {
      * @param model model with data for this element
      */
     disable(element) {
-        const d3Element = select(element);
-        d3Element.call(this.getIgnoreDragBehavior());
+        select(element)
+            .call(drag().on('drag', null));
     }
     /**
      * TODO: not shure if this work, need to check
@@ -488,7 +495,15 @@ class DraggableService {
     getDragBehavior(model) {
         let dragNodes = [];
         let initialPositions = [];
+        const filterCondition = (event) => {
+            // if there is at least one drag handle, we should check if we are dragging it
+            if (model.dragHandlesCount()) {
+                return !!event.target.closest('.vflow-drag-handle');
+            }
+            return true;
+        };
         return drag()
+            .filter(filterCondition)
             .on('start', (event) => {
             dragNodes = this.getDragNodes(model);
             initialPositions = dragNodes.map(node => ({
@@ -506,16 +521,6 @@ class DraggableService {
             });
         });
     }
-    /**
-     * Specify ignoring drag behavior. It's responsible for not moving the map when user tries to drag node
-     * with disabled drag behavior
-     */
-    getIgnoreDragBehavior() {
-        return drag()
-            .on('drag', (event) => {
-            event.sourceEvent.stopPropagation();
-        });
-    }
     getDragNodes(model) {
         return model.selected()
             ? this.entitiesService
@@ -825,7 +830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class CustomNodeBaseComponent {
     constructor() {
-        this.eventBus = inject(ComponentEventBusService, { optional: true });
+        this.eventBus = inject(ComponentEventBusService);
         this.destroyRef = inject(DestroyRef);
         /**
          * Signal with selected state of node
@@ -837,11 +842,9 @@ class CustomNodeBaseComponent {
         this.selected.set(value);
     }
     ngOnInit() {
-        if (this.eventBus) {
-            this.trackEvents()
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe();
-        }
+        this.trackEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe();
     }
     trackEvents() {
         const props = Object.getOwnPropertyNames(this);
@@ -980,6 +983,7 @@ class NodeModel {
         this.handles = signal([]);
         this.handles$ = toObservable(this.handles);
         this.draggable = signal(true);
+        this.dragHandlesCount = signal(0);
         // disabled for configuration for now
         this.magnetRadius = 20;
         // TODO: not sure if we need to statically store it
@@ -1209,6 +1213,176 @@ function getPointOnBezier(sourcePoint, targetPoint, sourceControl, targetControl
     return getPointOnLineByRatio(getPointOnLineByRatio(fromSourceToFirstControl, fromFirstControlToSecond, ratio), getPointOnLineByRatio(fromFirstControlToSecond, fromSecondControlToTarget, ratio), ratio);
 }
 
+const handleDirections = {
+    left: { x: -1, y: 0 },
+    right: { x: 1, y: 0 },
+    top: { x: 0, y: -1 },
+    bottom: { x: 0, y: 1 },
+};
+function getEdgeCenter(source, target) {
+    const xOffset = Math.abs(target.x - source.x) / 2;
+    const centerX = target.x < source.x ? target.x + xOffset : target.x - xOffset;
+    const yOffset = Math.abs(target.y - source.y) / 2;
+    const centerY = target.y < source.y ? target.y + yOffset : target.y - yOffset;
+    return [centerX, centerY, xOffset, yOffset];
+}
+const getDirection = ({ source, sourcePosition = 'bottom', target, }) => {
+    if (sourcePosition === 'left' || sourcePosition === 'right') {
+        return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
+    }
+    return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
+};
+const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
+// ith this function we try to mimic a orthogonal edge routing behaviour
+// It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges
+function getPoints({ source, sourcePosition = 'bottom', target, targetPosition = 'top', offset, }) {
+    const sourceDir = handleDirections[sourcePosition];
+    const targetDir = handleDirections[targetPosition];
+    const sourceGapped = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };
+    const targetGapped = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset };
+    const dir = getDirection({
+        source: sourceGapped,
+        sourcePosition,
+        target: targetGapped,
+    });
+    const dirAccessor = dir.x !== 0 ? 'x' : 'y';
+    const currDir = dir[dirAccessor];
+    let points = [];
+    let centerX, centerY;
+    const sourceGapOffset = { x: 0, y: 0 };
+    const targetGapOffset = { x: 0, y: 0 };
+    const [defaultCenterX, defaultCenterY] = getEdgeCenter(source, target);
+    // opposite handle positions, default case
+    if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
+        centerX = defaultCenterX;
+        centerY = defaultCenterY;
+        //    --->
+        //    |
+        // >---
+        const verticalSplit = [
+            { x: centerX, y: sourceGapped.y },
+            { x: centerX, y: targetGapped.y },
+        ];
+        //    |
+        //  ---
+        //  |
+        const horizontalSplit = [
+            { x: sourceGapped.x, y: centerY },
+            { x: targetGapped.x, y: centerY },
+        ];
+        if (sourceDir[dirAccessor] === currDir) {
+            points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
+        }
+        else {
+            points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
+        }
+    }
+    else {
+        // sourceTarget means we take x from source and y from target, targetSource is the opposite
+        const sourceTarget = [{ x: sourceGapped.x, y: targetGapped.y }];
+        const targetSource = [{ x: targetGapped.x, y: sourceGapped.y }];
+        // this handles edges with same handle positions
+        if (dirAccessor === 'x') {
+            points = sourceDir.x === currDir ? targetSource : sourceTarget;
+        }
+        else {
+            points = sourceDir.y === currDir ? sourceTarget : targetSource;
+        }
+        if (sourcePosition === targetPosition) {
+            const diff = Math.abs(source[dirAccessor] - target[dirAccessor]);
+            // if an edge goes from right to right for example (sourcePosition === targetPosition) and the distance between source.x and target.x is less than the offset, the added point and the gapped source/target will overlap. This leads to a weird edge path. To avoid this we add a gapOffset to the source/target
+            if (diff <= offset) {
+                const gapOffset = Math.min(offset - 1, offset - diff);
+                if (sourceDir[dirAccessor] === currDir) {
+                    sourceGapOffset[dirAccessor] = (sourceGapped[dirAccessor] > source[dirAccessor] ? -1 : 1) * gapOffset;
+                }
+                else {
+                    targetGapOffset[dirAccessor] = (targetGapped[dirAccessor] > target[dirAccessor] ? -1 : 1) * gapOffset;
+                }
+            }
+        }
+        // these are conditions for handling mixed handle positions like Right -> Bottom for example
+        if (sourcePosition !== targetPosition) {
+            const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x';
+            const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite];
+            const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
+            const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
+            const flipSourceTarget = (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
+                (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)));
+            if (flipSourceTarget) {
+                points = dirAccessor === 'x' ? sourceTarget : targetSource;
+            }
+        }
+        const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };
+        const targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
+        const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x));
+        const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y));
+        // we want to place the label on the longest segment of the edge
+        if (maxXDistance >= maxYDistance) {
+            centerX = (sourceGapPoint.x + targetGapPoint.x) / 2;
+            centerY = points[0].y;
+        }
+        else {
+            centerX = points[0].x;
+            centerY = (sourceGapPoint.y + targetGapPoint.y) / 2;
+        }
+    }
+    const pathPoints = [
+        source,
+        { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y },
+        ...points,
+        { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y },
+        target,
+    ];
+    return [pathPoints, centerX, centerY];
+}
+function getBend(a, b, c, size) {
+    const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size);
+    const { x, y } = b;
+    // no bend
+    if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
+        return `L${x} ${y}`;
+    }
+    // first segment is horizontal
+    if (a.y === y) {
+        const xDir = a.x < c.x ? -1 : 1;
+        const yDir = a.y < c.y ? 1 : -1;
+        return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;
+    }
+    const xDir = a.x < c.x ? 1 : -1;
+    const yDir = a.y < c.y ? -1 : 1;
+    return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
+}
+function smoothStepPath(source, target, sourcePosition, targetPosition, borderRadius = 5) {
+    const [points, labelX, labelY] = getPoints({
+        source,
+        sourcePosition,
+        target,
+        targetPosition,
+        offset: 20
+    });
+    const path = points.reduce((res, p, i) => {
+        let segment = '';
+        if (i > 0 && i < points.length - 1) {
+            segment = getBend(points[i - 1], p, points[i + 1], borderRadius);
+        }
+        else {
+            segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`;
+        }
+        res += segment;
+        return res;
+    }, '');
+    return {
+        path,
+        points: {
+            // TODO start and end points temporary unavailable for this path
+            start: { x: labelX, y: labelY },
+            center: { x: labelX, y: labelY },
+            end: { x: labelX, y: labelY },
+        }
+    };
+}
+
 class EdgeModel {
     constructor(edge) {
         this.edge = edge;
@@ -1278,6 +1452,10 @@ class EdgeModel {
                     return straightPath(source.pointAbsolute(), target.pointAbsolute(), this.usingPoints);
                 case 'bezier':
                     return bezierPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, this.usingPoints);
+                case 'smooth-step':
+                    return smoothStepPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position);
+                case 'step':
+                    return smoothStepPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, 0);
             }
         });
         this.edgeLabels = {};
@@ -1554,6 +1732,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['onEdgesChange.select.many']
             }] } });
 
+function isGroupNode(node) {
+    return node.node.type === 'default-group' || node.node.type === 'template-group';
+}
+
 class NodeRenderingService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
@@ -1561,6 +1743,12 @@ class NodeRenderingService {
             return this.flowEntitiesService.nodes()
                 .sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
         });
+        this.groups = computed(() => {
+            return this.nodes().filter(n => isGroupNode(n));
+        });
+        this.nonGroups = computed(() => {
+            return this.nodes().filter(n => !isGroupNode(n));
+        });
         this.maxOrder = computed(() => {
             return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
         });
@@ -1689,6 +1877,36 @@ function Microtask(target, key, descriptor) {
     return descriptor;
 }
 
+class OverlaysService {
+    constructor() {
+        this.toolbars = signal([]);
+        this.nodeToolbars = computed(() => {
+            const map = new Map();
+            this.toolbars().forEach((toolbar) => {
+                map.set(toolbar.node, toolbar);
+            });
+            return map;
+        });
+    }
+    addToolbar(toolbar) {
+        this.toolbars.update((toolbars) => [...toolbars, toolbar]);
+    }
+    removeToolbar(toolbar) {
+        this.toolbars.update((toolbars) => toolbars.filter(t => t !== toolbar));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverlaysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverlaysService }); }
+}
+__decorate([
+    Microtask
+], OverlaysService.prototype, "addToolbar", null);
+__decorate([
+    Microtask
+], OverlaysService.prototype, "removeToolbar", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverlaysService, decorators: [{
+            type: Injectable
+        }], propDecorators: { addToolbar: [], removeToolbar: [] } });
+
 class HandleService {
     constructor() {
         this.node = signal(null);
@@ -1866,20 +2084,22 @@ class HandleComponent {
         this.injector = inject(Injector);
         this.handleService = inject(HandleService);
         this.element = inject(ElementRef).nativeElement;
+        this.destroyRef = inject(DestroyRef);
     }
     ngOnInit() {
-        this.model = new HandleModel({
-            position: this.position,
-            type: this.type,
-            id: this.id,
-            parentReference: this.element.parentElement,
-            template: this.template
-        }, this.handleService.node());
-        this.handleService.createHandle(this.model);
-        requestAnimationFrame(() => this.model.updateParent());
-    }
-    ngOnDestroy() {
-        this.handleService.destroyHandle(this.model);
+        const node = this.handleService.node();
+        if (node) {
+            this.model = new HandleModel({
+                position: this.position,
+                type: this.type,
+                id: this.id,
+                parentReference: this.element.parentElement,
+                template: this.template
+            }, node);
+            this.handleService.createHandle(this.model);
+            requestAnimationFrame(() => this.model.updateParent());
+            this.destroyRef.onDestroy(() => this.handleService.destroyHandle(this.model));
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id", template: "template" }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2225,11 +2445,13 @@ class NodeComponent {
         this.hostRef = inject(ElementRef);
         this.connectionController = inject(ConnectionControllerDirective);
         this.nodeAccessor = inject(NodeAccessorService);
+        this.overlaysService = inject(OverlaysService);
         this.zone = inject(NgZone);
         this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
             this.flowStatusService.status().state === 'connection-validation');
         this.styleWidth = computed(() => `${this.nodeModel.size().width}px`);
         this.styleHeight = computed(() => `${this.nodeModel.size().height}px`);
+        this.toolbar = computed(() => this.overlaysService.nodeToolbars().get(this.nodeModel));
     }
     ngOnInit() {
         this.nodeAccessor.model.set(this.nodeModel);
@@ -2287,7 +2509,7 @@ class NodeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeTemplate: "nodeTemplate", groupNodeTemplate: "groupNodeTemplate" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\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]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </default-node>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\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\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\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<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\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<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\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  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\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</ng-container>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeTemplate: "nodeTemplate", groupNodeTemplate: "groupNodeTemplate" }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\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]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </default-node>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\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\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\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<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\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<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\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  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\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</ng-container>\n\n<!-- Toolbar -->\n<svg:foreignObject\n  *ngIf=\"toolbar() as toolbar\"\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", 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     InjectionContext
@@ -2297,7 +2519,9 @@ __decorate([
 ], NodeComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\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]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </default-node>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\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\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\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<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\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<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\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  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\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</ng-container>\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"] }]
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], host: {
+                        'class': 'vflow-node',
+                    }, template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\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]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </default-node>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\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\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\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<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\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<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\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  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\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</ng-container>\n\n<!-- Toolbar -->\n<svg:foreignObject\n  *ngIf=\"toolbar() as toolbar\"\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", 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: { nodeModel: [{
                 type: Input
             }], nodeTemplate: [{
@@ -2430,6 +2654,8 @@ class ConnectionComponent {
                 switch (this.model.curve) {
                     case 'straight': return straightPath(sourcePoint, targetPoint).path;
                     case 'bezier': return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'smooth-step': return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'step': return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition, 0).path;
                 }
             }
             if (status.state === 'connection-validation') {
@@ -2447,6 +2673,8 @@ class ConnectionComponent {
                 switch (this.model.curve) {
                     case 'straight': return straightPath(sourcePoint, targetPoint).path;
                     case 'bezier': return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'smooth-step': return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'step': return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition, 0).path;
                 }
             }
             return null;
@@ -2552,12 +2780,15 @@ const defaultBg = '#fff';
 const defaultGap = 20;
 const defaultDotSize = 2;
 const defaultDotColor = 'rgb(177, 177, 183)';
+const defaultImageScale = 0.1;
+const defaultRepeated = true;
 class BackgroundComponent {
     constructor() {
         this.viewportService = inject(ViewportService);
         this.rootSvg = inject(RootSvgReferenceDirective).element;
         this.settingsService = inject(FlowSettingsService);
         this.backgroundSignal = this.settingsService.background;
+        // DOTS PATTERN
         this.scaledGap = computed(() => {
             const background = this.backgroundSignal();
             if (background.type === 'dots') {
@@ -2568,7 +2799,13 @@ class BackgroundComponent {
         });
         this.x = computed(() => this.viewportService.readableViewport().x % this.scaledGap());
         this.y = computed(() => this.viewportService.readableViewport().y % this.scaledGap());
-        this.patternColor = computed(() => this.backgroundSignal().color ?? defaultDotColor);
+        this.patternColor = computed(() => {
+            const bg = this.backgroundSignal();
+            if (bg.type === 'dots') {
+                return bg.color ?? defaultDotColor;
+            }
+            return defaultDotColor;
+        });
         this.patternSize = computed(() => {
             const background = this.backgroundSignal();
             if (background.type === 'dots') {
@@ -2576,6 +2813,56 @@ class BackgroundComponent {
             }
             return 0;
         });
+        // IMAGE PATTERN
+        this.bgImageSrc = computed(() => {
+            const background = this.backgroundSignal();
+            return background.type === 'image' ? background.src : '';
+        });
+        this.imageSize = toSignal(toObservable(this.backgroundSignal).pipe(switchMap(() => createImage(this.bgImageSrc())), map((image) => ({ width: image.naturalWidth, height: image.naturalHeight }))), { initialValue: { width: 0, height: 0 } });
+        this.scaledImageWidth = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                const zoom = background.fixed ? 1 : this.viewportService.readableViewport().zoom;
+                return this.imageSize().width * zoom * (background.scale ?? defaultImageScale);
+            }
+            return 0;
+        });
+        this.scaledImageHeight = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                const zoom = background.fixed ? 1 : this.viewportService.readableViewport().zoom;
+                return this.imageSize().height * zoom * (background.scale ?? defaultImageScale);
+            }
+            return 0;
+        });
+        this.imageX = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                if (!background.repeat) {
+                    return background.fixed ? 0 : this.viewportService.readableViewport().x;
+                }
+                return background.fixed
+                    ? 0
+                    : this.viewportService.readableViewport().x % this.scaledImageWidth();
+            }
+            return 0;
+        });
+        this.imageY = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                if (!background.repeat) {
+                    return background.fixed ? 0 : this.viewportService.readableViewport().y;
+                }
+                return background.fixed
+                    ? 0
+                    : this.viewportService.readableViewport().y % this.scaledImageHeight();
+            }
+            return 0;
+        });
+        this.repeated = computed(() => {
+            const background = this.backgroundSignal();
+            return background.type === 'image' && (background.repeat ?? defaultRepeated);
+        });
         // Without ID there will be pattern collision for several flows on the page
         // Later pattern ID may be exposed to API
         this.patternId = id();
@@ -2591,12 +2878,19 @@ class BackgroundComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", ngImport: i0, template: "<ng-container *ngIf=\"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</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", ngImport: i0, template: "<ng-container *ngIf=\"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</ng-container>\n\n<ng-container *ngIf=\"backgroundSignal().type === 'image'\">\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <ng-container *ngIf=\"!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  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"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</ng-container>\n" }]
+            args: [{ selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"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</ng-container>\n\n<ng-container *ngIf=\"backgroundSignal().type === 'image'\">\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <ng-container *ngIf=\"!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  </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; } });
+function createImage(url) {
+    const image = new Image();
+    image.src = url;
+    return new Promise(resolve => {
+        image.onload = () => resolve(image);
+    });
+}
 
 // TODO: too general purpose nane
 class RootSvgContextDirective {
@@ -2706,9 +3000,12 @@ class VflowComponent {
         this.keyboardService = inject(KeyboardService);
         this.injector = inject(Injector);
         this.optimization = {
-            computeLayersOnInit: true
+            computeLayersOnInit: true,
+            detachedGroupsLayer: false
         };
         this.nodeModels = computed(() => this.nodeRenderingService.nodes());
+        this.groups = computed(() => this.nodeRenderingService.groups());
+        this.nonGroups = computed(() => this.nodeRenderingService.nonGroups());
         this.edgeModels = computed(() => this.flowEntitiesService.validEdges());
         // #endregion
         // #region OUTPUTS
@@ -2910,8 +3207,9 @@ class VflowComponent {
             SelectionService,
             FlowSettingsService,
             ComponentEventBusService,
-            KeyboardService
-        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: 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\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n      [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            KeyboardService,
+            OverlaysService
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: 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\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <ng-container *ngIf=\"optimization.detachedGroupsLayer\">\n      <!-- Groups -->\n      <svg:g\n        *ngFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\n      />\n\n      <!-- Edges  -->\n      <svg:g\n        *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n      />\n\n      <!-- Nodes -->\n      <svg:g\n        *ngFor=\"let model of nonGroups(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"!optimization.detachedGroupsLayer\">\n      <!-- Edges  -->\n      <svg:g\n        *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n      />\n\n      <!-- Nodes -->\n      <svg:g\n        *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\n      />\n    </ng-container>\n\n  </svg:g>\n\n  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\n</svg:svg>\n\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -2926,11 +3224,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SelectionService,
                         FlowSettingsService,
                         ComponentEventBusService,
-                        KeyboardService
+                        KeyboardService,
+                        OverlaysService
                     ], hostDirectives: [
                         connectionControllerHostDirective,
                         changesControllerHostDirective
-                    ], 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\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n      [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\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\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\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <ng-container *ngIf=\"optimization.detachedGroupsLayer\">\n      <!-- Groups -->\n      <svg:g\n        *ngFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\n      />\n\n      <!-- Edges  -->\n      <svg:g\n        *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n      />\n\n      <!-- Nodes -->\n      <svg:g\n        *ngFor=\"let model of nonGroups(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"!optimization.detachedGroupsLayer\">\n      <!-- Edges  -->\n      <svg:g\n        *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n      />\n\n      <!-- Nodes -->\n      <svg:g\n        *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\n      />\n    </ng-container>\n\n  </svg:g>\n\n  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\n</svg:svg>\n\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: [{
@@ -3043,7 +3342,13 @@ class MiniMapComponent {
             }
             return 0.2;
         });
-        this.viewportColor = computed(() => this.flowSettingsService.background().color ?? '#fff');
+        this.viewportColor = computed(() => {
+            const bg = this.flowSettingsService.background();
+            if (bg.type === 'dots' || bg.type === 'solid') {
+                return bg.color ?? '#fff';
+            }
+            return '#fff';
+        });
         this.hovered = signal(false);
         this.minimapPoint = computed(() => {
             switch (this.minimapPosition()) {
@@ -3131,6 +3436,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['minimap', { static: true }]
             }] } });
 
+class ToolbarModel {
+    constructor(node) {
+        this.node = node;
+        this.position = signal('top');
+        this.template = signal(null);
+        this.offset = signal(10);
+        this.point = computed(() => {
+            switch (this.position()) {
+                case 'top':
+                    return {
+                        x: this.node.size().width / 2 - this.size().width / 2,
+                        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()
+                    };
+                case 'left':
+                    return {
+                        x: -this.size().width - this.offset(),
+                        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
+                    };
+            }
+        });
+        this.transform = computed(() => `translate(${this.point().x}, ${this.point().y})`);
+        this.size = signal({ width: 0, height: 0 });
+    }
+}
+
+class NodeToolbarComponent {
+    constructor() {
+        this.overlaysService = inject(OverlaysService);
+        this.nodeService = inject(NodeAccessorService);
+        this.model = new ToolbarModel(this.nodeService.model());
+    }
+    set position(value) {
+        this.model.position.set(value);
+    }
+    ngOnInit() {
+        this.model.template.set(this.toolbarContentTemplate);
+        this.overlaysService.addToolbar(this.model);
+    }
+    ngOnDestroy() {
+        this.overlaysService.removeToolbar(this.model);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeToolbarComponent, selector: "node-toolbar", inputs: { position: "position" }, viewQueries: [{ propertyName: "toolbarContentTemplate", first: true, predicate: ["toolbar"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template #toolbar>
+      <div class="wrapper" nodeToolbarWrapper [model]="model">
+        <ng-content />
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [".wrapper{width:max-content}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NodeToolbarWrapperDirective; }), selector: "[nodeToolbarWrapper]", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'node-toolbar', template: `
+    <ng-template #toolbar>
+      <div class="wrapper" nodeToolbarWrapper [model]="model">
+        <ng-content />
+      </div>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".wrapper{width:max-content}\n"] }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], toolbarContentTemplate: [{
+                type: ViewChild,
+                args: ['toolbar', { static: true }]
+            }] } });
+class NodeToolbarWrapperDirective {
+    constructor() {
+        this.element = inject(ElementRef);
+    }
+    ngOnInit() {
+        this.model.size.set({
+            width: this.element.nativeElement.clientWidth,
+            height: this.element.nativeElement.clientHeight
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToolbarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NodeToolbarWrapperDirective, selector: "[nodeToolbarWrapper]", inputs: { model: "model" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToolbarWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[nodeToolbarWrapper]' }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class DragHandleDirective {
+    get model() {
+        return this.nodeAccessor.model();
+    }
+    constructor() {
+        this.nodeAccessor = inject(NodeAccessorService);
+        this.model.dragHandlesCount.update((count) => count + 1);
+        inject(DestroyRef).onDestroy(() => {
+            this.model.dragHandlesCount.update(count => count - 1);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragHandleDirective, selector: "[dragHandle]", host: { classAttribute: "vflow-drag-handle" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dragHandle]',
+                    host: {
+                        'class': 'vflow-drag-handle'
+                    }
+                }]
+        }], ctorParameters: function () { return []; } });
+
 const components = [
     VflowComponent,
     NodeComponent,
@@ -3142,7 +3566,8 @@ const components = [
     DefsComponent,
     BackgroundComponent,
     ResizableComponent,
-    MiniMapComponent
+    MiniMapComponent,
+    NodeToolbarComponent
 ];
 const directives = [
     SpacePointContextDirective,
@@ -3151,9 +3576,11 @@ const directives = [
     RootSvgContextDirective,
     HandleSizeControllerDirective,
     SelectableDirective,
+    DragHandleDirective,
     PointerDirective,
     RootPointerDirective,
     FlowSizeControllerDirective,
+    NodeToolbarWrapperDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -3175,15 +3602,18 @@ class VflowModule {
             DefsComponent,
             BackgroundComponent,
             ResizableComponent,
-            MiniMapComponent, SpacePointContextDirective,
+            MiniMapComponent,
+            NodeToolbarComponent, SpacePointContextDirective,
             MapContextDirective,
             RootSvgReferenceDirective,
             RootSvgContextDirective,
             HandleSizeControllerDirective,
             SelectableDirective,
+            DragHandleDirective,
             PointerDirective,
             RootPointerDirective,
-            FlowSizeControllerDirective, NodeHtmlTemplateDirective,
+            FlowSizeControllerDirective,
+            NodeToolbarWrapperDirective, NodeHtmlTemplateDirective,
             GroupNodeTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
@@ -3192,7 +3622,9 @@ class VflowModule {
             HandleComponent,
             ResizableComponent,
             SelectableDirective,
-            MiniMapComponent, NodeHtmlTemplateDirective,
+            MiniMapComponent,
+            NodeToolbarComponent,
+            DragHandleDirective, NodeHtmlTemplateDirective,
             GroupNodeTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
@@ -3210,17 +3642,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ResizableComponent,
                         SelectableDirective,
                         MiniMapComponent,
+                        NodeToolbarComponent,
+                        DragHandleDirective,
                         ...templateDirectives
                     ],
                     declarations: [...components, ...directives, ...templateDirectives],
                 }]
         }] });
 
+const mockModel = () => new NodeModel({ id: 'mock', type: 'default', point: { x: 0, y: 0 } });
+function provideCustomNodeMocks() {
+    return [
+        {
+            provide: ComponentEventBusService,
+            useValue: {
+                pushEvent: () => { }
+            }
+        },
+        {
+            provide: HandleService,
+            useFactory: () => ({
+                node: signal(mockModel()),
+                createHandle: () => { },
+                destroyHandle: () => { },
+            })
+        },
+        {
+            provide: RootPointerDirective,
+            useValue: {
+                pointerMovement$: of({
+                    x: 0,
+                    y: 0,
+                    movementX: 0,
+                    movementY: 0,
+                    target: null,
+                    originalEvent: null
+                }),
+                documentPointerEnd$: of(null)
+            }
+        },
+        {
+            provide: SpacePointContextDirective,
+            useValue: {
+                documentPointToFlowPoint: (point) => point
+            }
+        },
+        {
+            provide: NodeAccessorService,
+            useFactory: () => ({
+                model: signal(mockModel())
+            })
+        },
+        {
+            provide: SelectionService,
+            useValue: {
+                select: () => { },
+            }
+        },
+        FlowSettingsService,
+        FlowEntitiesService,
+        ViewportService
+    ];
+}
+
 // Modules
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, ResizableComponent, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, DragHandleDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
 //# sourceMappingURL=ngx-vflow.mjs.map