ngx-vflow 0.4.0 → 0.6.0

package/fesm2022/ngx-vflow.mjs

@@ -1,11 +1,11 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, Directive, computed, effect, Input, TemplateRef, EventEmitter, Output, untracked, runInInjectionContext, Injector, NgZone, Component, ChangeDetectionStrategy, ViewChild, HostListener, ContentChild, NgModule } from '@angular/core';
+import { signal, Injectable, inject, ElementRef, Directive, computed, effect, untracked, Input, TemplateRef, EventEmitter, Output, DestroyRef, runInInjectionContext, HostListener, Injector, NgZone, Component, ChangeDetectionStrategy, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { Subject, tap, switchMap, merge, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, Observable, Subscription, startWith, fromEvent } from 'rxjs';
-import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { Subject, tap, merge, BehaviorSubject, observeOn, animationFrameScheduler, switchMap, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, Observable, fromEvent, share, Subscription, startWith } from 'rxjs';
+import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { path } from 'd3-path';
 import { __decorate } from 'tslib';
@@ -131,7 +131,7 @@ class SelectionService {
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.viewport$ = new Subject();
         this.resetSelection = this.viewport$.pipe(tap(({ start, end, target }) => {
-            if (start && end) {
+            if (start && end && target) {
                 const delta = SelectionService.delta;
                 const diffX = Math.abs(end.x - start.x);
                 const diffY = Math.abs(end.y - start.y);
@@ -176,8 +176,7 @@ class MapContextDirective {
         this.zoomableSelection = select(this.host);
         this.viewportForSelection = {};
         // under the hood this effect triggers handleZoom, so error throws without this flag
-        // TODO: hack with timer fixes wrong node scaling (handle positions not matched with content size)
-        this.manualViewportChangeEffect = effect(() => setTimeout(() => {
+        this.manualViewportChangeEffect = effect(() => {
             const viewport = this.viewportService.writableViewport();
             const state = viewport.state;
             if (viewport.changeType === 'initial') {
@@ -190,7 +189,9 @@ class MapContextDirective {
             }
             // If only pan provided
             if ((isDefined(state.x) && isDefined(state.y)) && !isDefined(state.zoom)) {
-                this.rootSvgSelection.call(this.zoomBehavior.translateTo, state.x, state.y);
+                // remain same zoom value
+                const zoom = untracked(this.viewportService.readableViewport).zoom;
+                this.rootSvgSelection.call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(zoom));
                 return;
             }
             // If whole viewort state provided
@@ -198,7 +199,7 @@ class MapContextDirective {
                 this.rootSvgSelection.call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(state.zoom));
                 return;
             }
-        }), { allowSignalWrites: true });
+        }, { allowSignalWrites: true });
         this.handleZoom = ({ transform }) => {
             // update public signal for user to read
             this.viewportService.readableViewport.set(mapTransformToViewportState(transform));
@@ -287,7 +288,7 @@ class DraggableService {
             deltaY = model.point().y - event.y;
         })
             .on('drag', (event) => {
-            model.point.set({
+            model.setPoint({
                 x: round(event.x + deltaX),
                 y: round(event.y + deltaY)
             });
@@ -479,12 +480,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+class ComponentEventBusService {
+    constructor() {
+        this._event$ = new Subject();
+        this.event$ = this._event$.asObservable();
+    }
+    pushEvent(event) {
+        this._event$.next(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentEventBusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentEventBusService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentEventBusService, decorators: [{
+            type: Injectable
+        }] });
+
+class CustomNodeComponent {
+    constructor() {
+        this.eventBus = inject(ComponentEventBusService);
+        this.destroyRef = inject(DestroyRef);
+        /**
+         * Signal with selected state of node
+         */
+        this.selected = signal(false);
+    }
+    set _selected(value) {
+        this.selected.set(value);
+    }
+    ngOnInit() {
+        this.trackEvents();
+    }
+    trackEvents() {
+        const props = Object.getOwnPropertyNames(this);
+        const emitters = new Map();
+        for (const prop of props) {
+            const field = this[prop];
+            if (field instanceof EventEmitter) {
+                emitters.set(field, prop);
+            }
+        }
+        merge(...Array.from(emitters.keys()).map(emitter => emitter.pipe(tap((event) => {
+            this.eventBus.pushEvent({
+                nodeId: this.node.id,
+                eventName: emitters.get(emitter),
+                eventPayload: event
+            });
+        }))))
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    ;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomNodeComponent, inputs: { node: "node", _selected: "_selected" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { node: [{
+                type: Input
+            }], _selected: [{
+                type: Input
+            }] } });
+
 class NodeModel {
+    static { this.defaultTypeSize = {
+        width: 100,
+        height: 50
+    }; }
     constructor(node) {
         this.node = node;
         this.flowSettingsService = inject(FlowSettingsService);
-        this.point = signal({ x: 0, y: 0 });
-        this.point$ = toObservable(this.point);
+        this.internalPoint$ = new BehaviorSubject({ x: 0, y: 0 });
+        this.throttledPoint$ = this.internalPoint$.pipe(observeOn(animationFrameScheduler));
+        this.point = toSignal(this.throttledPoint$, {
+            initialValue: this.internalPoint$.getValue()
+        });
+        this.point$ = this.throttledPoint$;
         this.size = signal({ width: 0, height: 0 });
         this.renderOrder = signal(0);
         this.selected = signal(false);
@@ -498,10 +568,20 @@ class NodeModel {
         this.draggable = true;
         // disabled for configuration for now
         this.magnetRadius = 20;
-        this.point.set(node.point);
+        this.isComponentType = CustomNodeComponent.isPrototypeOf(this.node.type);
+        this.componentTypeInputs = computed(() => {
+            return {
+                node: this.node,
+                _selected: this.selected()
+            };
+        });
+        this.setPoint(node.point);
         if (isDefined(node.draggable))
             this.draggable = node.draggable;
     }
+    setPoint(point) {
+        this.internalPoint$.next(point);
+    }
 }
 
 class EdgeLabelModel {
@@ -812,20 +892,50 @@ class ChangesControllerDirective {
         /**
          * Watch nodes change
          */
-        this.onNodesChange = new EventEmitter();
+        this.onNodesChange = this.nodesChangeService.changes$;
+        this.onNodesChangePosition = this.nodeChangesOfType('position');
+        this.onNodesChangePositionSignle = this.singleChange(this.nodeChangesOfType('position'));
+        this.onNodesChangePositionMany = this.manyChanges(this.nodeChangesOfType('position'));
+        this.onNodesChangeAdd = this.nodeChangesOfType('add');
+        this.onNodesChangeAddSingle = this.singleChange(this.nodeChangesOfType('add'));
+        this.onNodesChangeAddMany = this.manyChanges(this.nodeChangesOfType('add'));
+        this.onNodesChangeRemove = this.nodeChangesOfType('remove');
+        this.onNodesChangeRemoveSingle = this.singleChange(this.nodeChangesOfType('remove'));
+        this.onNodesChangeRemoveMany = this.manyChanges(this.nodeChangesOfType('remove'));
+        this.onNodesChangeSelect = this.nodeChangesOfType('select');
+        this.onNodesChangeSelectSingle = this.singleChange(this.nodeChangesOfType('select'));
+        this.onNodesChangeSelectMany = this.manyChanges(this.nodeChangesOfType('select'));
         /**
-         * Watch nodes change
+         * Watch edges change
          */
-        this.onEdgesChange = new EventEmitter();
-        this.nodesChangeProxySubscription = this.nodesChangeService.changes$
-            .pipe(tap((changes) => this.onNodesChange.emit(changes)), takeUntilDestroyed())
-            .subscribe();
-        this.edgesChangeProxySubscription = this.edgesChangeService.changes$
-            .pipe(tap((changes) => this.onEdgesChange.emit(changes)), takeUntilDestroyed())
-            .subscribe();
+        this.onEdgesChange = this.edgesChangeService.changes$;
+        this.onNodesChangeDetached = this.edgeChangesOfType('detached');
+        this.onNodesChangeDetachedSingle = this.singleChange(this.edgeChangesOfType('detached'));
+        this.onNodesChangeDetachedMany = this.manyChanges(this.edgeChangesOfType('detached'));
+        this.onEdgesChangeAdd = this.edgeChangesOfType('add');
+        this.onEdgeChangeAddSingle = this.singleChange(this.edgeChangesOfType('add'));
+        this.onEdgeChangeAddMany = this.manyChanges(this.edgeChangesOfType('add'));
+        this.onEdgeChangeRemove = this.edgeChangesOfType('remove');
+        this.onEdgeChangeRemoveSingle = this.singleChange(this.edgeChangesOfType('remove'));
+        this.onEdgeChangeRemoveMany = this.manyChanges(this.edgeChangesOfType('remove'));
+        this.onEdgeChangeSelect = this.edgeChangesOfType('select');
+        this.onEdgeChangeSelectSingle = this.singleChange(this.edgeChangesOfType('select'));
+        this.onEdgeChangeSelectMany = this.manyChanges(this.edgeChangesOfType('select'));
+    }
+    nodeChangesOfType(type) {
+        return this.nodesChangeService.changes$.pipe(map(changes => changes.filter((c) => c.type === type)), filter(changes => !!changes.length));
+    }
+    edgeChangesOfType(type) {
+        return this.edgesChangeService.changes$.pipe(map(changes => changes.filter((c) => c.type === type)), filter(changes => !!changes.length));
+    }
+    singleChange(changes$) {
+        return changes$.pipe(filter(changes => changes.length === 1), map(([first]) => first));
+    }
+    manyChanges(changes$) {
+        return changes$.pipe(filter(changes => changes.length > 1));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChangesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { onNodesChange: "onNodesChange", onEdgesChange: "onEdgesChange" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { onNodesChange: "onNodesChange", onNodesChangePosition: "onNodesChange.position", onNodesChangePositionSignle: "onNodesChange.position.single", onNodesChangePositionMany: "onNodesChange.position.many", onNodesChangeAdd: "onNodesChange.add", onNodesChangeAddSingle: "onNodesChange.add.single", onNodesChangeAddMany: "onNodesChange.add.many", onNodesChangeRemove: "onNodesChange.remove", onNodesChangeRemoveSingle: "onNodesChange.remove.single", onNodesChangeRemoveMany: "onNodesChange.remove.many", onNodesChangeSelect: "onNodesChange.select", onNodesChangeSelectSingle: "onNodesChange.select.single", onNodesChangeSelectMany: "onNodesChange.select.many", onEdgesChange: "onEdgesChange", onNodesChangeDetached: "onEdgesChange.detached", onNodesChangeDetachedSingle: "onEdgesChange.detached.single", onNodesChangeDetachedMany: "onEdgesChange.detached.many", onEdgesChangeAdd: "onEdgesChange.add", onEdgeChangeAddSingle: "onEdgesChange.add.single", onEdgeChangeAddMany: "onEdgesChange.add.many", onEdgeChangeRemove: "onEdgesChange.remove", onEdgeChangeRemoveSingle: "onEdgesChange.remove.single", onEdgeChangeRemoveMany: "onEdgesChange.remove.many", onEdgeChangeSelect: "onEdgesChange.select", onEdgeChangeSelectSingle: "onEdgesChange.select.single", onEdgeChangeSelectMany: "onEdgesChange.select.many" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChangesControllerDirective, decorators: [{
             type: Directive,
@@ -835,8 +945,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], propDecorators: { onNodesChange: [{
                 type: Output
+            }], onNodesChangePosition: [{
+                type: Output,
+                args: ['onNodesChange.position']
+            }], onNodesChangePositionSignle: [{
+                type: Output,
+                args: ['onNodesChange.position.single']
+            }], onNodesChangePositionMany: [{
+                type: Output,
+                args: ['onNodesChange.position.many']
+            }], onNodesChangeAdd: [{
+                type: Output,
+                args: ['onNodesChange.add']
+            }], onNodesChangeAddSingle: [{
+                type: Output,
+                args: ['onNodesChange.add.single']
+            }], onNodesChangeAddMany: [{
+                type: Output,
+                args: ['onNodesChange.add.many']
+            }], onNodesChangeRemove: [{
+                type: Output,
+                args: ['onNodesChange.remove']
+            }], onNodesChangeRemoveSingle: [{
+                type: Output,
+                args: ['onNodesChange.remove.single']
+            }], onNodesChangeRemoveMany: [{
+                type: Output,
+                args: ['onNodesChange.remove.many']
+            }], onNodesChangeSelect: [{
+                type: Output,
+                args: ['onNodesChange.select']
+            }], onNodesChangeSelectSingle: [{
+                type: Output,
+                args: ['onNodesChange.select.single']
+            }], onNodesChangeSelectMany: [{
+                type: Output,
+                args: ['onNodesChange.select.many']
             }], onEdgesChange: [{
                 type: Output
+            }], onNodesChangeDetached: [{
+                type: Output,
+                args: ['onEdgesChange.detached']
+            }], onNodesChangeDetachedSingle: [{
+                type: Output,
+                args: ['onEdgesChange.detached.single']
+            }], onNodesChangeDetachedMany: [{
+                type: Output,
+                args: ['onEdgesChange.detached.many']
+            }], onEdgesChangeAdd: [{
+                type: Output,
+                args: ['onEdgesChange.add']
+            }], onEdgeChangeAddSingle: [{
+                type: Output,
+                args: ['onEdgesChange.add.single']
+            }], onEdgeChangeAddMany: [{
+                type: Output,
+                args: ['onEdgesChange.add.many']
+            }], onEdgeChangeRemove: [{
+                type: Output,
+                args: ['onEdgesChange.remove']
+            }], onEdgeChangeRemoveSingle: [{
+                type: Output,
+                args: ['onEdgesChange.remove.single']
+            }], onEdgeChangeRemoveMany: [{
+                type: Output,
+                args: ['onEdgesChange.remove.many']
+            }], onEdgeChangeSelect: [{
+                type: Output,
+                args: ['onEdgesChange.select']
+            }], onEdgeChangeSelectSingle: [{
+                type: Output,
+                args: ['onEdgesChange.select.single']
+            }], onEdgeChangeSelectMany: [{
+                type: Output,
+                args: ['onEdgesChange.select.many']
             }] } });
 
 class NodeRenderingService {
@@ -1030,6 +1212,124 @@ function getChildStrokeWidth(element) {
     return 0;
 }
 
+class RootPointerDirective {
+    constructor() {
+        this.host = inject(ElementRef).nativeElement;
+        this.initialTouch$ = new Subject();
+        // TODO: do not emit if mouse not down
+        this.mouseMovement$ = fromEvent(this.host, 'mousemove').pipe(map(event => ({
+            x: event.clientX,
+            y: event.clientY,
+            originalEvent: event
+        })), observeOn(animationFrameScheduler), share());
+        this.touchMovement$ = merge(this.initialTouch$, fromEvent(this.host, 'touchmove')).pipe(tap((event) => event.preventDefault()), map((originalEvent) => {
+            const x = originalEvent.touches[0]?.clientX ?? 0;
+            const y = originalEvent.touches[0]?.clientY ?? 0;
+            const target = document.elementFromPoint(x, y);
+            return { x, y, target, originalEvent };
+        }), observeOn(animationFrameScheduler), share());
+        this.touchEnd$ = fromEvent(this.host, 'touchend').pipe(map((originalEvent) => {
+            const x = originalEvent.changedTouches[0]?.clientX ?? 0;
+            const y = originalEvent.changedTouches[0]?.clientY ?? 0;
+            const target = document.elementFromPoint(x, y);
+            return { x, y, target, originalEvent };
+        }), share());
+        this.pointerMovement$ = merge(this.mouseMovement$, this.touchMovement$);
+    }
+    /**
+     * We should know when user started a touch in order to not
+     * show old touch position when connection creation is started
+     */
+    setInitialTouch(event) {
+        this.initialTouch$.next(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootPointerDirective, selector: "svg[rootPointer]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'svg[rootPointer]' }]
+        }] });
+
+class PointerDirective {
+    constructor() {
+        this.hostElement = inject(ElementRef).nativeElement;
+        this.pointerMovementDirective = inject(RootPointerDirective);
+        this.pointerOver = new EventEmitter();
+        this.pointerOut = new EventEmitter();
+        this.pointerStart = new EventEmitter();
+        this.pointerEnd = new EventEmitter();
+        this.wasPointerOver = false;
+        // TODO check if i could avoid global touch end
+        this.touchEnd = this.pointerMovementDirective.touchEnd$
+            .pipe(filter(({ target }) => target === this.hostElement), tap(({ originalEvent }) => this.pointerEnd.emit(originalEvent)), takeUntilDestroyed())
+            .subscribe();
+        this.touchOverOut = this.pointerMovementDirective.touchMovement$
+            .pipe(tap(({ target, originalEvent }) => {
+            this.handleTouchOverAndOut(target, originalEvent);
+        }), takeUntilDestroyed())
+            .subscribe();
+    }
+    onPointerStart(event) {
+        this.pointerStart.emit(event);
+        if (event instanceof TouchEvent) {
+            this.pointerMovementDirective.setInitialTouch(event);
+        }
+    }
+    onPointerEnd(event) {
+        this.pointerEnd.emit(event);
+    }
+    onMouseOver(event) {
+        this.pointerOver.emit(event);
+    }
+    onMouseOut(event) {
+        this.pointerOut.emit(event);
+    }
+    // TODO: dirty imperative implementation
+    handleTouchOverAndOut(target, event) {
+        if (target === this.hostElement) {
+            this.pointerOver.emit(event);
+            this.wasPointerOver = true;
+        }
+        else {
+            // should not emit before pointerOver
+            if (this.wasPointerOver) {
+                this.pointerOut.emit(event);
+            }
+            this.wasPointerOver = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: { pointerOver: "pointerOver", pointerOut: "pointerOut", pointerStart: "pointerStart", pointerEnd: "pointerEnd" }, host: { listeners: { "mousedown": "onPointerStart($event)", "touchstart": "onPointerStart($event)", "mouseup": "onPointerEnd($event)", "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PointerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[pointerStart], [pointerEnd], [pointerOver], [pointerOut]' }]
+        }], propDecorators: { pointerOver: [{
+                type: Output
+            }], pointerOut: [{
+                type: Output
+            }], pointerStart: [{
+                type: Output
+            }], pointerEnd: [{
+                type: Output
+            }], onPointerStart: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onPointerEnd: [{
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover', ['$event']]
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout', ['$event']]
+            }] } });
+
 class NodeComponent {
     constructor() {
         this.injector = inject(Injector);
@@ -1044,6 +1344,8 @@ class NodeComponent {
         this.hostRef = inject(ElementRef);
         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.subscription = new Subscription();
     }
     ngOnInit() {
@@ -1058,10 +1360,12 @@ class NodeComponent {
     ngAfterViewInit() {
         this.setInitialHandles();
         if (this.nodeModel.node.type === 'default') {
-            const { width, height } = this.nodeContentRef.nativeElement.getBBox();
-            this.nodeModel.size.set({ width, height });
+            this.nodeModel.size.set({
+                width: this.nodeModel.node.width ?? NodeModel.defaultTypeSize.width,
+                height: this.nodeModel.node.height ?? NodeModel.defaultTypeSize.height
+            });
         }
-        if (this.nodeModel.node.type === 'html-template') {
+        if (this.nodeModel.node.type === 'html-template' || this.nodeModel.isComponentType) {
             const sub = resizable([this.htmlWrapperRef.nativeElement], this.zone)
                 .pipe(startWith(null), tap(() => {
                 const width = this.htmlWrapperRef.nativeElement.clientWidth;
@@ -1149,7 +1453,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", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [innerHTML]=\"nodeModel.node.text ?? ''\"\n  ></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\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    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (mouseup)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }], 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", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<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  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n    [innerHTML]=\"nodeModel.node.text ?? ''\"\n  ></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\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)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (pointerOver)=\"validateTargetHandle(handle)\"\n    (pointerOut)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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([
     Microtask
@@ -1159,7 +1463,7 @@ __decorate([
 ], NodeComponent.prototype, "setInitialHandles", 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], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [innerHTML]=\"nodeModel.node.text ?? ''\"\n  ></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\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    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (mouseup)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<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  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n    [innerHTML]=\"nodeModel.node.text ?? ''\"\n  ></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\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)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (pointerOver)=\"validateTargetHandle(handle)\"\n    (pointerOut)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
         }], propDecorators: { nodeModel: [{
                 type: Input
             }], nodeHtmlTemplate: [{
@@ -1277,19 +1581,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class SpacePointContextDirective {
     constructor() {
+        this.pointerMovementDirective = inject(RootPointerDirective);
+        this.rootSvg = inject(RootSvgReferenceDirective).element;
+        this.host = inject(ElementRef).nativeElement;
         /**
          * Signal with current mouse position in svg space
          */
         this.svgCurrentSpacePoint = computed(() => {
-            const movement = this.mouseMovement();
+            const movement = this.pointerMovement();
+            if (!movement) {
+                return { x: 0, y: 0 };
+            }
             const point = this.rootSvg.createSVGPoint();
             point.x = movement.x;
             point.y = movement.y;
             return point.matrixTransform(this.host.getScreenCTM().inverse());
         });
-        this.rootSvg = inject(RootSvgReferenceDirective).element;
-        this.host = inject(ElementRef).nativeElement;
-        this.mouseMovement = toSignal(fromEvent(this.rootSvg, 'mousemove').pipe(map(event => ({ x: event.clientX, y: event.clientY }))), { initialValue: { x: 0, y: 0 } });
+        this.pointerMovement = toSignal(this.pointerMovementDirective.pointerMovement$);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpacePointContextDirective, selector: "g[spacePointContext]", ngImport: i0 }); }
@@ -1440,7 +1748,7 @@ class RootSvgContextDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootSvgContextDirective, selector: "svg[rootSvgContext]", host: { listeners: { "document:mouseup": "resetConnection()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootSvgContextDirective, selector: "svg[rootSvgContext]", host: { listeners: { "document:mouseup": "resetConnection()", "document:touchend": "resetConnection()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgContextDirective, decorators: [{
             type: Directive,
@@ -1448,6 +1756,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], propDecorators: { resetConnection: [{
                 type: HostListener,
                 args: ['document:mouseup']
+            }, {
+                type: HostListener,
+                args: ['document:touchend']
             }] } });
 
 const connectionControllerHostDirective = {
@@ -1456,7 +1767,34 @@ const connectionControllerHostDirective = {
 };
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
-    outputs: ['onNodesChange', 'onEdgesChange']
+    outputs: [
+        'onNodesChange',
+        'onNodesChange.position',
+        'onNodesChange.position.single',
+        'onNodesChange.position.many',
+        'onNodesChange.add',
+        'onNodesChange.add.single',
+        'onNodesChange.add.many',
+        'onNodesChange.remove',
+        'onNodesChange.remove.single',
+        'onNodesChange.remove.many',
+        'onNodesChange.select',
+        'onNodesChange.select.single',
+        'onNodesChange.select.many',
+        'onEdgesChange',
+        'onEdgesChange.detached',
+        'onEdgesChange.detached.single',
+        'onEdgesChange.detached.many',
+        'onEdgesChange.add',
+        'onEdgesChange.add.single',
+        'onEdgesChange.add.many',
+        'onEdgesChange.remove',
+        'onEdgesChange.remove.single',
+        'onEdgesChange.remove.many',
+        'onEdgesChange.select',
+        'onEdgesChange.select.single',
+        'onEdgesChange.select.many',
+    ]
 };
 class VflowComponent {
     constructor() {
@@ -1467,6 +1805,7 @@ class VflowComponent {
         this.edgesChangeService = inject(EdgeChangesService);
         this.nodeRenderingService = inject(NodeRenderingService);
         this.flowSettingsService = inject(FlowSettingsService);
+        this.componentEventBusService = inject(ComponentEventBusService);
         this.injector = inject(Injector);
         /**
          * Minimum zoom value
@@ -1483,6 +1822,14 @@ class VflowComponent {
         this.nodeModels = computed(() => this.nodeRenderingService.nodes());
         this.edgeModels = computed(() => this.flowEntitiesService.validEdges());
         // #endregion
+        // #region OUTPUTS
+        /**
+         * Event that accumulates all custom node events
+         *
+         * @experimental
+         */
+        this.onComponentNodeEvent = this.componentEventBusService.event$; // TODO: research how to remove as any
+        // #endregion
         // #region SIGNAL_API
         /**
          * Signal for reading viewport change
@@ -1508,7 +1855,7 @@ class VflowComponent {
          */
         this.nodesChange$ = this.nodesChangeService.changes$;
         /**
-         * Observable with nodes change
+         * Observable with edges change
          */
         this.edgesChange$ = this.edgesChangeService.changes$;
         // #endregion
@@ -1619,7 +1966,7 @@ class VflowComponent {
         return edge;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: VflowComponent, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", handlePositions: "handlePositions", background: "background", entitiesSelectable: "entitiesSelectable", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], nodes: "nodes", edges: "edges" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: VflowComponent, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", handlePositions: "handlePositions", background: "background", entitiesSelectable: "entitiesSelectable", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], nodes: "nodes", edges: "edges" }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -1628,8 +1975,9 @@ class VflowComponent {
             EdgeChangesService,
             NodeRenderingService,
             SelectionService,
-            FlowSettingsService
-        ], queries: [{ propertyName: "nodeHtmlDirective", first: true, predicate: NodeHtmlTemplateDirective, 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 }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onEdgesChange", "onEdgesChange"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\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      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeHtmlTemplate"] }, { 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: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]", inputs: ["minZoom", "maxZoom"] }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            FlowSettingsService,
+            ComponentEventBusService
+        ], queries: [{ propertyName: "nodeHtmlDirective", first: true, predicate: NodeHtmlTemplateDirective, 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 }], 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.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  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\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      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeHtmlTemplate"] }, { 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: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]", inputs: ["minZoom", "maxZoom"] }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -1642,11 +1990,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         EdgeChangesService,
                         NodeRenderingService,
                         SelectionService,
-                        FlowSettingsService
+                        FlowSettingsService,
+                        ComponentEventBusService
                     ], hostDirectives: [
                         connectionControllerHostDirective,
                         changesControllerHostDirective
-                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\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      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
+                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\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      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -1667,6 +2016,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [{ required: true }]
             }], edges: [{
                 type: Input
+            }], onComponentNodeEvent: [{
+                type: Output
             }], nodeHtmlDirective: [{
                 type: ContentChild,
                 args: [NodeHtmlTemplateDirective]
@@ -1773,7 +2124,9 @@ const directives = [
     RootSvgReferenceDirective,
     RootSvgContextDirective,
     HandleSizeControllerDirective,
-    SelectableDirective
+    SelectableDirective,
+    PointerDirective,
+    RootPointerDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -1795,7 +2148,9 @@ class VflowModule {
             RootSvgReferenceDirective,
             RootSvgContextDirective,
             HandleSizeControllerDirective,
-            SelectableDirective, NodeHtmlTemplateDirective,
+            SelectableDirective,
+            PointerDirective,
+            RootPointerDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
@@ -1828,5 +2183,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, SelectableDirective, VflowComponent, VflowModule };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomNodeComponent, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, SelectableDirective, VflowComponent, VflowModule };
 //# sourceMappingURL=ngx-vflow.mjs.map