ngx-vflow 0.14.1 → 0.15.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
@@ -1689,6 +1693,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 +1900,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 +2261,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 +2325,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 +2335,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: [{
@@ -2910,8 +2950,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    <!-- 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\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 +2967,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    <!-- 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\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: [{
@@ -3131,6 +3173,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 +3303,8 @@ const components = [
     DefsComponent,
     BackgroundComponent,
     ResizableComponent,
-    MiniMapComponent
+    MiniMapComponent,
+    NodeToolbarComponent
 ];
 const directives = [
     SpacePointContextDirective,
@@ -3151,9 +3313,11 @@ const directives = [
     RootSvgContextDirective,
     HandleSizeControllerDirective,
     SelectableDirective,
+    DragHandleDirective,
     PointerDirective,
     RootPointerDirective,
     FlowSizeControllerDirective,
+    NodeToolbarWrapperDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -3175,15 +3339,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 +3359,9 @@ class VflowModule {
             HandleComponent,
             ResizableComponent,
             SelectableDirective,
-            MiniMapComponent, NodeHtmlTemplateDirective,
+            MiniMapComponent,
+            NodeToolbarComponent,
+            DragHandleDirective, NodeHtmlTemplateDirective,
             GroupNodeTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
@@ -3210,17 +3379,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