ngx-vflow 0.1.14 → 0.2.0

package/fesm2022/ngx-vflow.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, Directive, effect, Input, TemplateRef, computed, EventEmitter, Output, untracked, Component, ChangeDetectionStrategy, ViewChild, HostListener, Injector, runInInjectionContext, ContentChild, NgModule } from '@angular/core';
+import { signal, Injectable, inject, ElementRef, Directive, effect, Input, TemplateRef, computed, EventEmitter, Output, untracked, Injector, runInInjectionContext, Component, ChangeDetectionStrategy, ViewChild, HostListener, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
 import { drag } from 'd3-drag';
@@ -246,6 +246,8 @@ class FlowModel {
     constructor() {
         /**
          * Global setting with handle positions. Nodes derive this value
+         *
+         * @deprecated
          */
         this.handlePositions = signal({ source: 'right', target: 'left' });
         /**
@@ -264,14 +266,14 @@ class FlowStatusService {
     setIdleStatus() {
         this.status.set({ state: 'idle', payload: null });
     }
-    setConnectionStartStatus(sourceNode) {
-        this.status.set({ state: 'connection-start', payload: { sourceNode } });
+    setConnectionStartStatus(sourceNode, sourceHandle) {
+        this.status.set({ state: 'connection-start', payload: { sourceNode, sourceHandle } });
     }
-    setConnectionValidationStatus(sourceNode, targetNode, valid) {
-        this.status.set({ state: 'connection-validation', payload: { sourceNode, targetNode, valid } });
+    setConnectionValidationStatus(valid, sourceNode, targetNode, sourceHandle, targetHandle) {
+        this.status.set({ state: 'connection-validation', payload: { sourceNode, targetNode, sourceHandle, targetHandle, valid } });
     }
-    setConnectionEndStatus(sourceNode, targetNode) {
-        this.status.set({ state: 'connection-end', payload: { sourceNode, targetNode } });
+    setConnectionEndStatus(sourceNode, targetNode, sourceHandle, targetHandle) {
+        this.status.set({ state: 'connection-end', payload: { sourceNode, targetNode, sourceHandle, targetHandle } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowStatusService }); }
@@ -375,9 +377,11 @@ class ConnectionControllerDirective {
                 const targetModel = status.payload.targetNode;
                 const source = sourceModel.node.id;
                 const target = targetModel.node.id;
+                const sourceHandle = status.payload.sourceHandle.rawHandle.id;
+                const targetHandle = status.payload.targetHandle.rawHandle.id;
                 const connection = this.flowEntitiesService.connection();
-                if (connection.validator({ source, target })) {
-                    this.onConnect.emit({ source, target });
+                if (connection.validator({ source, target, sourceHandle, targetHandle })) {
+                    this.onConnect.emit({ source, target, sourceHandle, targetHandle });
                 }
             }
         }, { allowSignalWrites: true });
@@ -395,76 +399,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class NodeModel {
-    constructor(node) {
-        this.node = node;
-        this.point = signal({ x: 0, y: 0 });
-        this.point$ = toObservable(this.point);
-        this.size = signal({ width: 0, height: 0 });
-        this.pointTransform = computed(() => `translate(${this.point().x}, ${this.point().y})`);
-        this.sourceOffset = computed(() => {
-            const { width, height } = this.size();
-            switch (this.sourcePosition()) {
-                case 'left': return { x: 0, y: height / 2 };
-                case 'right': return { x: width, y: height / 2 };
-                case 'top': return { x: width / 2, y: 0 };
-                case 'bottom': return { x: width / 2, y: height };
-            }
+class HandleModel {
+    constructor(rawHandle, parentNode) {
+        this.rawHandle = rawHandle;
+        this.parentNode = parentNode;
+        this.strokeWidth = 2;
+        this.size = signal({
+            width: 10 + (2 * this.strokeWidth),
+            height: 10 + (2 * this.strokeWidth)
         });
-        this.targetOffset = computed(() => {
-            const { width, height } = this.size();
-            switch (this.targetPosition()) {
-                case 'left': return { x: 0, y: (height / 2) };
-                case 'right': return { x: width, y: height / 2 };
-                case 'top': return { x: width / 2, y: 0 };
-                case 'bottom': return { x: width / 2, y: height };
+        this.offset = computed(() => {
+            switch (this.rawHandle.position) {
+                case 'left': return {
+                    x: 0,
+                    y: this.rawHandle.parentPosition().y + (this.rawHandle.parentSize().height / 2)
+                };
+                case 'right': return {
+                    x: this.parentNode.size().width,
+                    y: this.rawHandle.parentPosition().y + (this.rawHandle.parentSize().height / 2)
+                };
+                case 'top': return {
+                    x: this.rawHandle.parentPosition().x + (this.rawHandle.parentSize().width / 2),
+                    y: 0
+                };
+                case 'bottom': return {
+                    x: this.rawHandle.parentPosition().x + this.rawHandle.parentSize().width / 2,
+                    y: this.parentNode.size().height
+                };
             }
         });
-        this.sourcePointAbsolute = computed(() => {
-            return {
-                x: this.point().x + this.sourceOffset().x + this.sourceHandleOffset().x,
-                y: this.point().y + this.sourceOffset().y + this.sourceHandleOffset().y
-            };
+        this.sizeOffset = computed(() => {
+            switch (this.rawHandle.position) {
+                case 'left': return { x: -(this.size().width / 2), y: 0 };
+                case 'right': return { x: this.size().width / 2, y: 0 };
+                case 'top': return { x: 0, y: -(this.size().height / 2) };
+                case 'bottom': return { x: 0, y: this.size().height / 2 };
+            }
         });
-        this.targetPointAbsolute = computed(() => {
+        this.pointAbsolute = computed(() => {
             return {
-                x: this.point().x + this.targetOffset().x + this.targetHandleOffset().x,
-                y: this.point().y + this.targetOffset().y + this.targetHandleOffset().y
+                x: this.parentNode.point().x + this.offset().x + this.sizeOffset().x,
+                y: this.parentNode.point().y + this.offset().y + this.sizeOffset().y,
             };
         });
+    }
+}
+
+class NodeModel {
+    constructor(node) {
+        this.node = node;
+        this.point = signal({ x: 0, y: 0 });
+        this.point$ = toObservable(this.point);
+        this.size = signal({ width: 0, height: 0 });
+        this.pointTransform = computed(() => `translate(${this.point().x}, ${this.point().y})`);
         // Now source and handle positions derived from parent flow
         this.sourcePosition = computed(() => this.flow.handlePositions().source);
         this.targetPosition = computed(() => this.flow.handlePositions().target);
-        this.sourceHandleSize = signal({ width: 0, height: 0 });
-        this.targetHandleSize = signal({ width: 0, height: 0 });
-        this.sourceHandleOffset = computed(() => {
-            switch (this.sourcePosition()) {
-                case 'left': return { x: -(this.sourceHandleSize().width / 2), y: 0 };
-                case 'right': return { x: this.sourceHandleSize().width / 2, y: 0 };
-                case 'top': return { x: 0, y: -(this.sourceHandleSize().height / 2) };
-                case 'bottom': return { x: 0, y: this.sourceHandleSize().height / 2 };
-            }
-        });
-        this.targetHandleOffset = computed(() => {
-            switch (this.targetPosition()) {
-                case 'left': return { x: -(this.targetHandleSize().width / 2), y: 0 };
-                case 'right': return { x: this.targetHandleSize().width / 2, y: 0 };
-                case 'top': return { x: 0, y: -(this.targetHandleSize().height / 2) };
-                case 'bottom': return { x: 0, y: this.targetHandleSize().height / 2 };
+        this.handles = computed(() => {
+            if (this.node.type === 'html-template') {
+                return this.rawHandles().map((handle => new HandleModel(handle, this)));
             }
+            return [
+                new HandleModel({
+                    position: this.sourcePosition(),
+                    type: 'source',
+                    parentPosition: signal({ x: 0, y: 0 }),
+                    parentSize: signal(this.size())
+                }, this),
+                new HandleModel({
+                    position: this.targetPosition(),
+                    type: 'target',
+                    parentPosition: signal({ x: 0, y: 0 }),
+                    parentSize: signal(this.size())
+                }, this),
+            ];
         });
-        this.sourceOffsetAligned = computed(() => {
-            return {
-                x: this.sourceOffset().x - (this.sourceHandleSize().width / 2),
-                y: this.sourceOffset().y - (this.sourceHandleSize().height / 2),
-            };
-        });
-        this.targetOffsetAligned = computed(() => {
-            return {
-                x: this.targetOffset().x - (this.targetHandleSize().width / 2),
-                y: this.targetOffset().y - (this.targetHandleSize().height / 2),
-            };
-        });
+        this.rawHandles = signal([]);
         this.draggable = true;
         // disabled for configuration for now
         this.magnetRadius = 20;
@@ -596,13 +606,40 @@ class EdgeModel {
     constructor(edge) {
         this.edge = edge;
         this.path = computed(() => {
-            const source = this.source.sourcePointAbsolute();
-            const target = this.target.targetPointAbsolute();
+            let source;
+            if (this.edge.sourceHandle) {
+                source = this.source.handles()
+                    .find(handle => handle.rawHandle.id === this.edge.sourceHandle);
+            }
+            else {
+                source = this.source.handles()
+                    .find(handle => handle.rawHandle.type === 'source');
+            }
+            let target;
+            if (this.edge.targetHandle) {
+                target = this.target.handles()
+                    .find(handle => handle.rawHandle.id === this.edge.targetHandle);
+            }
+            else {
+                target = this.target.handles()
+                    .find(handle => handle.rawHandle.type === 'target');
+            }
+            // TODO: don't like this
+            if (!source || !target) {
+                return {
+                    path: '',
+                    points: {
+                        start: { x: 0, y: 0 },
+                        center: { x: 0, y: 0 },
+                        end: { x: 0, y: 0 }
+                    }
+                };
+            }
             switch (this.curve) {
                 case 'straight':
-                    return straightPath(source, target, this.usingPoints);
+                    return straightPath(source.pointAbsolute(), target.pointAbsolute(), this.usingPoints);
                 case 'bezier':
-                    return bezierPath(source, target, this.source.sourcePosition(), this.target.targetPosition(), this.usingPoints);
+                    return bezierPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, this.usingPoints);
             }
         });
         this.edgeLabels = {};
@@ -741,21 +778,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class HandleService {
+    constructor() {
+        this.handles = signal([]);
+    }
+    createHandle(newHandle) {
+        this.handles.update(handles => [...handles, newHandle]);
+    }
+    destroyHandle(handleToDestoy) {
+        this.handles.update(handles => handles.filter(handle => handle !== handleToDestoy));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, decorators: [{
+            type: Injectable
+        }] });
+
 class NodeComponent {
     constructor() {
+        this.handleService = inject(HandleService);
+        this.injector = inject(Injector);
         this.draggableService = inject(DraggableService);
         this.flowStatusService = inject(FlowStatusService);
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.hostRef = inject(ElementRef);
         this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
             this.flowStatusService.status().state === 'connection-validation');
-        this.defaultHandleStrokeWidth = 2;
         this.sourceHanldeState = signal('idle');
         this.targetHandleState = signal('idle');
-        this.sourceHanldeStateReadonly = this.sourceHanldeState.asReadonly();
-        this.targetHanldeStateReadonly = this.targetHandleState.asReadonly();
     }
     ngOnInit() {
+        runInInjectionContext(this.injector, () => {
+            effect(() => this.nodeModel.rawHandles.set(this.handleService.handles()), { allowSignalWrites: true });
+        });
         this.draggableService.toggleDraggable(this.hostRef.nativeElement, this.nodeModel);
     }
     ngAfterViewInit() {
@@ -770,26 +826,26 @@ class NodeComponent {
                 const height = this.htmlWrapperRef.nativeElement.clientHeight;
                 this.nodeModel.size.set({ width, height });
             }
-            this.setSourceHandleSize();
-            this.setTargetHandleSize();
         });
     }
     ngOnDestroy() {
         this.draggableService.destroy(this.hostRef.nativeElement);
     }
-    startConnection(event) {
+    startConnection(event, handle) {
         // ignore drag by stopping propagation
         event.stopPropagation();
-        this.flowStatusService.setConnectionStartStatus(this.nodeModel);
+        this.flowStatusService.setConnectionStartStatus(this.nodeModel, handle);
     }
     endConnection() {
         const status = this.flowStatusService.status();
         if (status.state === 'connection-validation') {
             const sourceNode = status.payload.sourceNode;
             const targetNode = this.nodeModel;
+            const sourceHandle = status.payload.sourceHandle;
+            const targetHandle = status.payload.targetHandle;
             batchStatusChanges(
             // call to create connection
-            () => this.flowStatusService.setConnectionEndStatus(sourceNode, targetNode), 
+            () => this.flowStatusService.setConnectionEndStatus(sourceNode, targetNode, sourceHandle, targetHandle), 
             // when connection created, we need go back to idle status
             () => this.flowStatusService.setIdleStatus());
         }
@@ -797,16 +853,22 @@ class NodeComponent {
     /**
      * TODO srp
      */
-    validateTargetHandle() {
+    validateTargetHandle(targetHandle) {
         const status = this.flowStatusService.status();
         if (status.state === 'connection-start') {
             const sourceNode = status.payload.sourceNode;
-            const targetNode = this.nodeModel;
+            const sourceHandle = status.payload.sourceHandle;
             const source = sourceNode.node.id;
+            const targetNode = this.nodeModel;
             const target = targetNode.node.id;
-            const valid = this.flowEntitiesService.connection().validator({ source, target });
+            const valid = this.flowEntitiesService.connection().validator({
+                source,
+                target,
+                sourceHandle: sourceHandle.rawHandle.id,
+                targetHandle: targetHandle.rawHandle.id
+            });
             this.targetHandleState.set(valid ? 'valid' : 'invalid');
-            this.flowStatusService.setConnectionValidationStatus(sourceNode, targetNode, valid);
+            this.flowStatusService.setConnectionValidationStatus(valid, sourceNode, targetNode, sourceHandle, targetHandle);
         }
     }
     /**
@@ -817,68 +879,25 @@ class NodeComponent {
         // drop back to start status
         const status = this.flowStatusService.status();
         if (status.state === 'connection-validation') {
-            this.flowStatusService.setConnectionStartStatus(status.payload.sourceNode);
-        }
-    }
-    getHandleContext(type) {
-        if (type === 'source') {
-            return {
-                $implicit: {
-                    point: this.nodeModel.sourceOffset,
-                    alignedPoint: this.nodeModel.sourceOffsetAligned,
-                    state: this.sourceHanldeStateReadonly
-                }
-            };
+            this.flowStatusService.setConnectionStartStatus(status.payload.sourceNode, status.payload.sourceHandle);
         }
-        return {
-            $implicit: {
-                point: this.nodeModel.targetOffset,
-                alignedPoint: this.nodeModel.targetOffsetAligned,
-                state: this.targetHanldeStateReadonly
-            }
-        };
-    }
-    setSourceHandleSize() {
-        // if handle template provided, we don't know its stroke so it's 0
-        const strokeWidth = this.handleTemplate ? 0 : (2 * this.defaultHandleStrokeWidth);
-        const sourceBox = this.sourceHandleRef.nativeElement.getBBox({ stroke: true });
-        this.nodeModel.sourceHandleSize.set({
-            width: sourceBox.width + strokeWidth,
-            height: sourceBox.height + strokeWidth
-        });
-    }
-    setTargetHandleSize() {
-        const strokeWidth = this.handleTemplate ? 0 : (2 * this.defaultHandleStrokeWidth);
-        const targetBox = this.targetHandleRef.nativeElement.getBBox({ stroke: true });
-        this.nodeModel.targetHandleSize.set({
-            width: targetBox.width + strokeWidth,
-            height: targetBox.height + strokeWidth
-        });
     }
     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", handleTemplate: "handleTemplate" }, viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }, { propertyName: "sourceHandleRef", first: true, predicate: ["sourceHandle"], descendants: true }, { propertyName: "targetHandleRef", first: true, predicate: ["targetHandle"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"nodeHtmlTemplate; context: { $implicit: { node: nodeModel.node }  }\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngIf=\"handleTemplate\">\n  <svg:g #sourceHandle (mousedown)=\"startConnection($event)\">\n    <ng-container *ngTemplateOutlet=\"handleTemplate; context: getHandleContext('source')\" />\n  </svg:g>\n\n  <svg:g #targetHandle>\n    <ng-container *ngTemplateOutlet=\"handleTemplate; context: getHandleContext('target')\" />\n  </svg:g>\n</ng-container>\n\n<ng-container *ngIf=\"!handleTemplate\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"nodeModel.sourceOffset().x\"\n    [attr.cy]=\"nodeModel.sourceOffset().y\"\n    [attr.stroke-width]=\"defaultHandleStrokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"startConnection($event)\"\n  />\n\n  <svg:circle\n    #targetHandle\n    [attr.cx]=\"nodeModel.targetOffset().x\"\n    [attr.cy]=\"nodeModel.targetOffset().y\"\n    [attr.stroke-width]=\"defaultHandleStrokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mouseup)=\"endConnection()\"\n  />\n</ng-container>\n\n<svg:circle\n  *ngIf=\"showMagnet()\"\n  class=\"magnet\"\n  [attr.r]=\"nodeModel.magnetRadius\"\n  [attr.cx]=\"nodeModel.targetOffset().x\"\n  [attr.cy]=\"nodeModel.targetOffset().y\"\n  (mouseup)=\"endConnection(); resetValidateTargetHandle()\"\n  (mouseover)=\"validateTargetHandle()\"\n  (mouseout)=\"resetValidateTargetHandle()\"\n/>\n\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\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()\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle()\"\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:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"nodeHtmlTemplate; context: { $implicit: { node: nodeModel.node }  }\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngIf=\"handleTemplate\">\n  <svg:g #sourceHandle (mousedown)=\"startConnection($event)\">\n    <ng-container *ngTemplateOutlet=\"handleTemplate; context: getHandleContext('source')\" />\n  </svg:g>\n\n  <svg:g #targetHandle>\n    <ng-container *ngTemplateOutlet=\"handleTemplate; context: getHandleContext('target')\" />\n  </svg:g>\n</ng-container>\n\n<ng-container *ngIf=\"!handleTemplate\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"nodeModel.sourceOffset().x\"\n    [attr.cy]=\"nodeModel.sourceOffset().y\"\n    [attr.stroke-width]=\"defaultHandleStrokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"startConnection($event)\"\n  />\n\n  <svg:circle\n    #targetHandle\n    [attr.cx]=\"nodeModel.targetOffset().x\"\n    [attr.cy]=\"nodeModel.targetOffset().y\"\n    [attr.stroke-width]=\"defaultHandleStrokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mouseup)=\"endConnection()\"\n  />\n</ng-container>\n\n<svg:circle\n  *ngIf=\"showMagnet()\"\n  class=\"magnet\"\n  [attr.r]=\"nodeModel.magnetRadius\"\n  [attr.cx]=\"nodeModel.targetOffset().x\"\n  [attr.cy]=\"nodeModel.targetOffset().y\"\n  (mouseup)=\"endConnection(); resetValidateTargetHandle()\"\n  (mouseover)=\"validateTargetHandle()\"\n  (mouseout)=\"resetValidateTargetHandle()\"\n/>\n\n\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{max-width:100px;max-height:100px;width:100px;height:50px;border:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\n"] }]
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  #nodeContent\n  width=\"100\"\n  height=\"50\"\n>\n  <div class=\"default-node\" [innerHTML]=\"nodeModel.node.text ?? ''\"></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    #sourceHandle\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    stroke=\"white\"\n    fill=\"black\"\n    (mousedown)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (mouseup)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\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()\"\n    (mouseover)=\"validateTargetHandle(handle)\"\n    (mouseout)=\"resetValidateTargetHandle()\"\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:2px solid black;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}\n"] }]
         }], propDecorators: { nodeModel: [{
                 type: Input
             }], nodeHtmlTemplate: [{
                 type: Input
-            }], handleTemplate: [{
-                type: Input
             }], nodeContentRef: [{
                 type: ViewChild,
                 args: ['nodeContent']
             }], htmlWrapperRef: [{
                 type: ViewChild,
                 args: ['htmlWrapper']
-            }], sourceHandleRef: [{
-                type: ViewChild,
-                args: ['sourceHandle']
-            }], targetHandleRef: [{
-                type: ViewChild,
-                args: ['targetHandle']
             }] } });
 
 class EdgeLabelComponent {
@@ -1004,23 +1023,31 @@ class ConnectionComponent {
         this.path = computed(() => {
             const status = this.flowStatusService.status();
             if (status.state === 'connection-start') {
-                const sourceNode = status.payload.sourceNode;
-                const sourcePoint = sourceNode.sourcePointAbsolute();
+                const sourceHandle = status.payload.sourceHandle;
+                const sourcePoint = sourceHandle.pointAbsolute();
+                const sourcePosition = sourceHandle.rawHandle.position;
                 const targetPoint = this.spacePointContext.svgCurrentSpacePoint();
+                const targetPosition = getOppositePostion(sourceHandle.rawHandle.position);
                 switch (this.model.curve) {
                     case 'straight': return straightPath(sourcePoint, targetPoint).path;
-                    case 'bezier': return bezierPath(sourcePoint, targetPoint, sourceNode.sourcePosition(), sourceNode.targetPosition()).path;
+                    case 'bezier': return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
                 }
             }
             if (status.state === 'connection-validation') {
-                const sourcePoint = status.payload.sourceNode.sourcePointAbsolute();
+                const sourceHandle = status.payload.sourceHandle;
+                const sourcePoint = sourceHandle.pointAbsolute();
+                const sourcePosition = sourceHandle.rawHandle.position;
+                const targetHandle = status.payload.targetHandle;
                 // ignore magnet if validation failed
                 const targetPoint = status.payload.valid
-                    ? status.payload.targetNode.targetPointAbsolute()
+                    ? targetHandle.pointAbsolute()
                     : this.spacePointContext.svgCurrentSpacePoint();
+                const targetPosition = status.payload.valid
+                    ? targetHandle.rawHandle.position
+                    : getOppositePostion(sourceHandle.rawHandle.position);
                 switch (this.model.curve) {
                     case 'straight': return straightPath(sourcePoint, targetPoint).path;
-                    case 'bezier': return bezierPath(sourcePoint, targetPoint, status.payload.sourceNode.sourcePosition(), status.payload.sourceNode.targetPosition()).path;
+                    case 'bezier': return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
                 }
             }
             return null;
@@ -1088,6 +1115,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], template: [{
                 type: Input
             }] } });
+function getOppositePostion(position) {
+    switch (position) {
+        case 'top':
+            return 'bottom';
+        case 'bottom':
+            return 'top';
+        case 'left':
+            return 'right';
+        case 'right':
+            return 'left';
+    }
+}
 
 class DefsComponent {
     constructor() {
@@ -1208,7 +1247,7 @@ class VflowComponent {
      * For example, if you want to archieve right to left direction
      * then you need to pass these positions { source: 'left', target: 'right' }
      *
-     * ! Be carefult using this field, it may depricate in future releases !
+     * @deprecated
      */
     set handlePositions(handlePositions) {
         this.flowModel.handlePositions.set(handlePositions);
@@ -1292,7 +1331,7 @@ class VflowComponent {
             FlowEntitiesService,
             NodesChangeService,
             EdgeChangesService
-        ], 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 }, { propertyName: "handleTemplateDirective", first: true, predicate: HandleTemplateDirective, 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]=\"flowModel.flowWidth()\"\n  [attr.height]=\"flowModel.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      [handleTemplate]=\"handleTemplateDirective?.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", "handleTemplate"] }, { 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", "onEdgesChange", "onEdgesChange"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowModel.flowWidth()\"\n  [attr.height]=\"flowModel.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -1306,7 +1345,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]=\"flowModel.flowWidth()\"\n  [attr.height]=\"flowModel.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      [handleTemplate]=\"handleTemplateDirective?.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  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowModel.flowWidth()\"\n  [attr.height]=\"flowModel.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: [{
@@ -1337,9 +1376,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], connectionTemplateDirective: [{
                 type: ContentChild,
                 args: [ConnectionTemplateDirective]
-            }], handleTemplateDirective: [{
-                type: ContentChild,
-                args: [HandleTemplateDirective]
             }], mapContext: [{
                 type: ViewChild,
                 args: [MapContextDirective]
@@ -1348,12 +1384,59 @@ function bindFlowToNodes(flow, nodes) {
     nodes.forEach(n => n.bindFlow(flow));
 }
 
+class HandleComponent {
+    constructor() {
+        this.handleService = inject(HandleService);
+        this.element = inject(ElementRef).nativeElement;
+    }
+    ngOnInit() {
+        queueMicrotask(() => {
+            const rect = this.parentRect();
+            this.handleService.createHandle({
+                position: this.position,
+                type: this.type,
+                id: this.id,
+                parentPosition: signal({ x: rect.x, y: rect.y }),
+                parentSize: signal({ width: rect.width, height: rect.height })
+            });
+        });
+    }
+    parentRect() {
+        // we assume there is only one foreignObject that wraps node
+        const fo = this.element.closest('foreignObject');
+        const parent = this.element.parentElement;
+        const foRect = fo.getBoundingClientRect();
+        const parentRect = parent.getBoundingClientRect();
+        return {
+            x: parentRect.left - foRect.left,
+            y: parentRect.top - foRect.top,
+            width: parentRect.width,
+            height: parentRect.height
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id" }, ngImport: i0, template: "" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'handle', template: "" }]
+        }], propDecorators: { position: [{
+                type: Input,
+                args: [{ required: true }]
+            }], type: [{
+                type: Input,
+                args: [{ required: true }]
+            }], id: [{
+                type: Input
+            }] } });
+
 const components = [
     VflowComponent,
     NodeComponent,
     EdgeComponent,
     EdgeLabelComponent,
     ConnectionComponent,
+    HandleComponent,
     DefsComponent
 ];
 const directives = [
@@ -1376,6 +1459,7 @@ class VflowModule {
             EdgeComponent,
             EdgeLabelComponent,
             ConnectionComponent,
+            HandleComponent,
             DefsComponent, SpacePointContextDirective,
             MapContextDirective,
             RootSvgReferenceDirective,
@@ -1383,7 +1467,8 @@ class VflowModule {
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
-            HandleTemplateDirective], imports: [CommonModule], exports: [VflowComponent, NodeHtmlTemplateDirective,
+            HandleTemplateDirective], imports: [CommonModule], exports: [VflowComponent,
+            HandleComponent, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
@@ -1396,6 +1481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     imports: [CommonModule],
                     exports: [
                         VflowComponent,
+                        HandleComponent,
                         ...templateDirectives
                     ],
                     declarations: [...components, ...directives, ...templateDirectives],
@@ -1408,5 +1494,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleTemplateDirective, NodeHtmlTemplateDirective, VflowComponent, VflowModule };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, VflowComponent, VflowModule };
 //# sourceMappingURL=ngx-vflow.mjs.map