ngx-vflow 0.4.0 → 0.5.0

package/fesm2022/ngx-vflow.mjs

@@ -1,10 +1,10 @@
 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, Input, TemplateRef, EventEmitter, Output, untracked, 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 { Subject, tap, switchMap, merge, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, Observable, fromEvent, animationFrameScheduler, share, Subscription, startWith } from 'rxjs';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { path } from 'd3-path';
@@ -812,20 +812,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 +865,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 +1132,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);
@@ -1149,7 +1369,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  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    (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\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"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Microtask
@@ -1159,7 +1379,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  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    (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\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"] }]
         }], propDecorators: { nodeModel: [{
                 type: Input
             }], nodeHtmlTemplate: [{
@@ -1277,19 +1497,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 +1664,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 +1672,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 +1683,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() {
@@ -1508,7 +1762,7 @@ class VflowComponent {
          */
         this.nodesChange$ = this.nodesChangeService.changes$;
         /**
-         * Observable with nodes change
+         * Observable with edges change
          */
         this.edgesChange$ = this.edgesChangeService.changes$;
         // #endregion
@@ -1629,7 +1883,7 @@ class VflowComponent {
             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 }); }
+        ], 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,
@@ -1646,7 +1900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], 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: [{
@@ -1773,7 +2027,9 @@ const directives = [
     RootSvgReferenceDirective,
     RootSvgContextDirective,
     HandleSizeControllerDirective,
-    SelectableDirective
+    SelectableDirective,
+    PointerDirective,
+    RootPointerDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -1795,7 +2051,9 @@ class VflowModule {
             RootSvgReferenceDirective,
             RootSvgContextDirective,
             HandleSizeControllerDirective,
-            SelectableDirective, NodeHtmlTemplateDirective,
+            SelectableDirective,
+            PointerDirective,
+            RootPointerDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,