ngx-vflow 1.0.6 → 1.0.7

package/esm2022/lib/vflow/vflow.mjs

@@ -6,6 +6,7 @@ import { MiniMapComponent } from './public-components/minimap/minimap.component'
 import { NodeToolbarComponent } from './public-components/node-toolbar/node-toolbar.component';
 import { ResizableComponent } from './public-components/resizable/resizable.component';
 import { HandleComponent } from './public-components/handle/handle.component';
+import { ConnectionControllerDirective } from './directives/connection-controller.directive';
 export const Vflow = [
     VflowComponent,
     HandleComponent,
@@ -14,6 +15,7 @@ export const Vflow = [
     MiniMapComponent,
     NodeToolbarComponent,
     DragHandleDirective,
+    ConnectionControllerDirective,
     NodeHtmlTemplateDirective,
     GroupNodeTemplateDirective,
     EdgeLabelHtmlTemplateDirective,
@@ -21,4 +23,4 @@ export const Vflow = [
     ConnectionTemplateDirective,
     HandleTemplateDirective,
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmZsb3cuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvdmZsb3cudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ3hFLE9BQU8sRUFDTCwyQkFBMkIsRUFDM0IsOEJBQThCLEVBQzlCLHFCQUFxQixFQUNyQiwwQkFBMEIsRUFDMUIsdUJBQXVCLEVBQ3ZCLHlCQUF5QixHQUMxQixNQUFNLGlDQUFpQyxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ2pGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHlEQUF5RCxDQUFDO0FBQy9GLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLG1EQUFtRCxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUU5RSxNQUFNLENBQUMsTUFBTSxLQUFLLEdBQUc7SUFDbkIsY0FBYztJQUNkLGVBQWU7SUFDZixrQkFBa0I7SUFDbEIsbUJBQW1CO0lBQ25CLGdCQUFnQjtJQUNoQixvQkFBb0I7SUFDcEIsbUJBQW1CO0lBRW5CLHlCQUF5QjtJQUN6QiwwQkFBMEI7SUFDMUIsOEJBQThCO0lBQzlCLHFCQUFxQjtJQUNyQiwyQkFBMkI7SUFDM0IsdUJBQXVCO0NBQ2YsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFZmbG93Q29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL3ZmbG93L3ZmbG93LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEcmFnSGFuZGxlRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL2RyYWctaGFuZGxlLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBTZWxlY3RhYmxlRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL3NlbGVjdGFibGUuZGlyZWN0aXZlJztcbmltcG9ydCB7XG4gIENvbm5lY3Rpb25UZW1wbGF0ZURpcmVjdGl2ZSxcbiAgRWRnZUxhYmVsSHRtbFRlbXBsYXRlRGlyZWN0aXZlLFxuICBFZGdlVGVtcGxhdGVEaXJlY3RpdmUsXG4gIEdyb3VwTm9kZVRlbXBsYXRlRGlyZWN0aXZlLFxuICBIYW5kbGVUZW1wbGF0ZURpcmVjdGl2ZSxcbiAgTm9kZUh0bWxUZW1wbGF0ZURpcmVjdGl2ZSxcbn0gZnJvbSAnLi9kaXJlY3RpdmVzL3RlbXBsYXRlLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBNaW5pTWFwQ29tcG9uZW50IH0gZnJvbSAnLi9wdWJsaWMtY29tcG9uZW50cy9taW5pbWFwL21pbmltYXAuY29tcG9uZW50JztcbmltcG9ydCB7IE5vZGVUb29sYmFyQ29tcG9uZW50IH0gZnJvbSAnLi9wdWJsaWMtY29tcG9uZW50cy9ub2RlLXRvb2xiYXIvbm9kZS10b29sYmFyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBSZXNpemFibGVDb21wb25lbnQgfSBmcm9tICcuL3B1YmxpYy1jb21wb25lbnRzL3Jlc2l6YWJsZS9yZXNpemFibGUuY29tcG9uZW50JztcbmltcG9ydCB7IEhhbmRsZUNvbXBvbmVudCB9IGZyb20gJy4vcHVibGljLWNvbXBvbmVudHMvaGFuZGxlL2hhbmRsZS5jb21wb25lbnQnO1xuXG5leHBvcnQgY29uc3QgVmZsb3cgPSBbXG4gIFZmbG93Q29tcG9uZW50LFxuICBIYW5kbGVDb21wb25lbnQsXG4gIFJlc2l6YWJsZUNvbXBvbmVudCxcbiAgU2VsZWN0YWJsZURpcmVjdGl2ZSxcbiAgTWluaU1hcENvbXBvbmVudCxcbiAgTm9kZVRvb2xiYXJDb21wb25lbnQsXG4gIERyYWdIYW5kbGVEaXJlY3RpdmUsXG5cbiAgTm9kZUh0bWxUZW1wbGF0ZURpcmVjdGl2ZSxcbiAgR3JvdXBOb2RlVGVtcGxhdGVEaXJlY3RpdmUsXG4gIEVkZ2VMYWJlbEh0bWxUZW1wbGF0ZURpcmVjdGl2ZSxcbiAgRWRnZVRlbXBsYXRlRGlyZWN0aXZlLFxuICBDb25uZWN0aW9uVGVtcGxhdGVEaXJlY3RpdmUsXG4gIEhhbmRsZVRlbXBsYXRlRGlyZWN0aXZlLFxuXSBhcyBjb25zdDtcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmZsb3cuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvdmZsb3cudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ3hFLE9BQU8sRUFDTCwyQkFBMkIsRUFDM0IsOEJBQThCLEVBQzlCLHFCQUFxQixFQUNyQiwwQkFBMEIsRUFDMUIsdUJBQXVCLEVBQ3ZCLHlCQUF5QixHQUMxQixNQUFNLGlDQUFpQyxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ2pGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHlEQUF5RCxDQUFDO0FBQy9GLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLG1EQUFtRCxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUM5RSxPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUU3RixNQUFNLENBQUMsTUFBTSxLQUFLLEdBQUc7SUFDbkIsY0FBYztJQUNkLGVBQWU7SUFDZixrQkFBa0I7SUFDbEIsbUJBQW1CO0lBQ25CLGdCQUFnQjtJQUNoQixvQkFBb0I7SUFDcEIsbUJBQW1CO0lBQ25CLDZCQUE2QjtJQUU3Qix5QkFBeUI7SUFDekIsMEJBQTBCO0lBQzFCLDhCQUE4QjtJQUM5QixxQkFBcUI7SUFDckIsMkJBQTJCO0lBQzNCLHVCQUF1QjtDQUNmLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBWZmxvd0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy92Zmxvdy92Zmxvdy5jb21wb25lbnQnO1xuaW1wb3J0IHsgRHJhZ0hhbmRsZURpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9kcmFnLWhhbmRsZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgU2VsZWN0YWJsZURpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9zZWxlY3RhYmxlLmRpcmVjdGl2ZSc7XG5pbXBvcnQge1xuICBDb25uZWN0aW9uVGVtcGxhdGVEaXJlY3RpdmUsXG4gIEVkZ2VMYWJlbEh0bWxUZW1wbGF0ZURpcmVjdGl2ZSxcbiAgRWRnZVRlbXBsYXRlRGlyZWN0aXZlLFxuICBHcm91cE5vZGVUZW1wbGF0ZURpcmVjdGl2ZSxcbiAgSGFuZGxlVGVtcGxhdGVEaXJlY3RpdmUsXG4gIE5vZGVIdG1sVGVtcGxhdGVEaXJlY3RpdmUsXG59IGZyb20gJy4vZGlyZWN0aXZlcy90ZW1wbGF0ZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgTWluaU1hcENvbXBvbmVudCB9IGZyb20gJy4vcHVibGljLWNvbXBvbmVudHMvbWluaW1hcC9taW5pbWFwLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOb2RlVG9vbGJhckNvbXBvbmVudCB9IGZyb20gJy4vcHVibGljLWNvbXBvbmVudHMvbm9kZS10b29sYmFyL25vZGUtdG9vbGJhci5jb21wb25lbnQnO1xuaW1wb3J0IHsgUmVzaXphYmxlQ29tcG9uZW50IH0gZnJvbSAnLi9wdWJsaWMtY29tcG9uZW50cy9yZXNpemFibGUvcmVzaXphYmxlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBIYW5kbGVDb21wb25lbnQgfSBmcm9tICcuL3B1YmxpYy1jb21wb25lbnRzL2hhbmRsZS9oYW5kbGUuY29tcG9uZW50JztcbmltcG9ydCB7IENvbm5lY3Rpb25Db250cm9sbGVyRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL2Nvbm5lY3Rpb24tY29udHJvbGxlci5kaXJlY3RpdmUnO1xuXG5leHBvcnQgY29uc3QgVmZsb3cgPSBbXG4gIFZmbG93Q29tcG9uZW50LFxuICBIYW5kbGVDb21wb25lbnQsXG4gIFJlc2l6YWJsZUNvbXBvbmVudCxcbiAgU2VsZWN0YWJsZURpcmVjdGl2ZSxcbiAgTWluaU1hcENvbXBvbmVudCxcbiAgTm9kZVRvb2xiYXJDb21wb25lbnQsXG4gIERyYWdIYW5kbGVEaXJlY3RpdmUsXG4gIENvbm5lY3Rpb25Db250cm9sbGVyRGlyZWN0aXZlLFxuXG4gIE5vZGVIdG1sVGVtcGxhdGVEaXJlY3RpdmUsXG4gIEdyb3VwTm9kZVRlbXBsYXRlRGlyZWN0aXZlLFxuICBFZGdlTGFiZWxIdG1sVGVtcGxhdGVEaXJlY3RpdmUsXG4gIEVkZ2VUZW1wbGF0ZURpcmVjdGl2ZSxcbiAgQ29ubmVjdGlvblRlbXBsYXRlRGlyZWN0aXZlLFxuICBIYW5kbGVUZW1wbGF0ZURpcmVjdGl2ZSxcbl0gYXMgY29uc3Q7XG4iXX0=

package/fesm2022/ngx-vflow.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, output, DestroyRef, EventEmitter, OutputEmitterRef, input, viewChild, Component, ChangeDetectionStrategy, Injector, runInInjectionContext, HostListener, NgZone, contentChild, Input, forwardRef } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, viewChild, Component, ChangeDetectionStrategy, Injector, runInInjectionContext, output, HostListener, NgZone, contentChild, Input, forwardRef } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
 import { switchMap, merge, fromEvent, tap, Subject, Observable, observeOn, animationFrameScheduler, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, share, startWith, of } from 'rxjs';
@@ -666,173 +666,6 @@ class FlowStatusService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, decorators: [{
             type: Injectable
         }] });
-/**
- * Batch status changes together to call them one after another
- *
- * @param changes list of set[FlowStatus.state]Status() calls
- */
-function batchStatusChanges(...changes) {
-    if (changes.length) {
-        const [firstChange, ...restChanges] = changes;
-        // first change is sync
-        firstChange();
-        // without timer, subscribed effects/comuted signals only get latest value
-        restChanges.forEach((change) => setTimeout(() => change()));
-    }
-}
-
-/**
- * This function contains a hack-y behavior.
- * If the handles are of the same type (source-source or target-target),
- * it returns nodes where source === target and
- * handles where sourceHandle === targetHandle
- *
- * This leads to that notSelfValidator returns false for these cases,
- * exactly what we need for strict connection type
- */
-function adjustDirection(connection) {
-    const result = {};
-    if (connection.sourceHandle.rawHandle.type === 'source') {
-        result.source = connection.source;
-        result.sourceHandle = connection.sourceHandle;
-    }
-    else {
-        result.source = connection.target;
-        result.sourceHandle = connection.targetHandle;
-    }
-    if (connection.targetHandle.rawHandle.type === 'target') {
-        result.target = connection.target;
-        result.targetHandle = connection.targetHandle;
-    }
-    else {
-        result.target = connection.source;
-        result.targetHandle = connection.sourceHandle;
-    }
-    return result;
-}
-
-class ConnectionControllerDirective {
-    constructor() {
-        /**
-         * This event fires when user tries to create new Edge.
-         *
-         * `Connection` is an entity that contains data about source and target nodes.
-         *
-         * Also it's important to note, that this event only fires when connection is valid by validator function in `ConnectionSettings`,
-         * by default without passing the validator every connection concidered valid.
-         *
-         * @todo add connect event and deprecate onConnect
-         */
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-        this.onConnect = output();
-        this.statusService = inject(FlowStatusService);
-        this.flowEntitiesService = inject(FlowEntitiesService);
-        this.connectEffect = effect(() => {
-            const status = this.statusService.status();
-            if (status.state === 'connection-end') {
-                let source = status.payload.source;
-                let target = status.payload.target;
-                let sourceHandle = status.payload.sourceHandle;
-                let targetHandle = status.payload.targetHandle;
-                if (this.isStrictMode()) {
-                    const adjusted = adjustDirection({
-                        source: status.payload.source,
-                        sourceHandle: status.payload.sourceHandle,
-                        target: status.payload.target,
-                        targetHandle: status.payload.targetHandle,
-                    });
-                    source = adjusted.source;
-                    target = adjusted.target;
-                    sourceHandle = adjusted.sourceHandle;
-                    targetHandle = adjusted.targetHandle;
-                }
-                const sourceId = source.node.id;
-                const targetId = target.node.id;
-                const sourceHandleId = sourceHandle.rawHandle.id;
-                const targetHandleId = targetHandle.rawHandle.id;
-                const connectionModel = this.flowEntitiesService.connection();
-                const connection = {
-                    source: sourceId,
-                    target: targetId,
-                    sourceHandle: sourceHandleId,
-                    targetHandle: targetHandleId,
-                };
-                if (connectionModel.validator(connection)) {
-                    this.onConnect.emit(connection);
-                }
-            }
-        }, { allowSignalWrites: true });
-        this.isStrictMode = computed(() => this.flowEntitiesService.connection().mode === 'strict');
-    }
-    startConnection(handle) {
-        this.statusService.setConnectionStartStatus(handle.parentNode, handle);
-    }
-    validateConnection(handle) {
-        const status = this.statusService.status();
-        if (status.state === 'connection-start') {
-            let source = status.payload.source;
-            let target = handle.parentNode;
-            let sourceHandle = status.payload.sourceHandle;
-            let targetHandle = handle;
-            if (this.isStrictMode()) {
-                // swap direction (if needed) according to actual source and target of strict mode
-                const adjusted = adjustDirection({
-                    source: status.payload.source,
-                    sourceHandle: status.payload.sourceHandle,
-                    target: handle.parentNode,
-                    targetHandle: handle,
-                });
-                source = adjusted.source;
-                target = adjusted.target;
-                sourceHandle = adjusted.sourceHandle;
-                targetHandle = adjusted.targetHandle;
-            }
-            const valid = this.flowEntitiesService.connection().validator({
-                source: source.node.id,
-                target: target.node.id,
-                sourceHandle: sourceHandle.rawHandle.id,
-                targetHandle: targetHandle.rawHandle.id,
-            });
-            // TODO: check how react flow handles highlight of handle
-            // if direction changes
-            handle.state.set(valid ? 'valid' : 'invalid');
-            // status is about how we draw connection, so we don't need
-            // swapped diretion here
-            this.statusService.setConnectionValidationStatus(valid, status.payload.source, handle.parentNode, status.payload.sourceHandle, handle);
-        }
-    }
-    resetValidateConnection(targetHandle) {
-        targetHandle.state.set('idle');
-        // drop back to start status
-        const status = this.statusService.status();
-        if (status.state === 'connection-validation') {
-            this.statusService.setConnectionStartStatus(status.payload.source, status.payload.sourceHandle);
-        }
-    }
-    endConnection() {
-        const status = this.statusService.status();
-        if (status.state === 'connection-validation') {
-            const source = status.payload.source;
-            const sourceHandle = status.payload.sourceHandle;
-            const target = status.payload.target;
-            const targetHandle = status.payload.targetHandle;
-            batchStatusChanges(
-            // call to create connection
-            () => this.statusService.setConnectionEndStatus(source, target, sourceHandle, targetHandle), 
-            // when connection created, we need go back to idle status
-            () => this.statusService.setIdleStatus());
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerDirective, isStandalone: true, selector: "[connectionController]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[connectionController]',
-                    standalone: true,
-                }]
-        }] });
 
 class ComponentEventBusService {
     constructor() {
@@ -2032,6 +1865,147 @@ const implementsWithInjector = (instance) => {
     return 'injector' in instance && 'get' in instance.injector;
 };
 
+/**
+ * This function contains a hack-y behavior.
+ * If the handles are of the same type (source-source or target-target),
+ * it returns nodes where source === target and
+ * handles where sourceHandle === targetHandle
+ *
+ * This leads to that notSelfValidator returns false for these cases,
+ * exactly what we need for strict connection type
+ */
+function adjustDirection(connection) {
+    const result = {};
+    if (connection.sourceHandle.rawHandle.type === 'source') {
+        result.source = connection.source;
+        result.sourceHandle = connection.sourceHandle;
+    }
+    else {
+        result.source = connection.target;
+        result.sourceHandle = connection.targetHandle;
+    }
+    if (connection.targetHandle.rawHandle.type === 'target') {
+        result.target = connection.target;
+        result.targetHandle = connection.targetHandle;
+    }
+    else {
+        result.target = connection.source;
+        result.targetHandle = connection.sourceHandle;
+    }
+    return result;
+}
+
+class ConnectionControllerDirective {
+    constructor() {
+        this.statusService = inject(FlowStatusService);
+        this.flowEntitiesService = inject(FlowEntitiesService);
+        /**
+         * This event fires when user tries to create new Edge.
+         *
+         * `Connection` is an entity that contains data about source and target nodes.
+         *
+         * Also it's important to note, that this event only fires when connection is valid by validator function in `ConnectionSettings`,
+         * by default without passing the validator every connection concidered valid.
+         *
+         * @todo add connect event and deprecate onConnect
+         */
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onConnect = outputFromObservable(toObservable(this.statusService.status).pipe(filter((status) => status.state === 'connection-end'), map((status) => {
+            let source = status.payload.source;
+            let target = status.payload.target;
+            let sourceHandle = status.payload.sourceHandle;
+            let targetHandle = status.payload.targetHandle;
+            if (this.isStrictMode()) {
+                const adjusted = adjustDirection({
+                    source: status.payload.source,
+                    sourceHandle: status.payload.sourceHandle,
+                    target: status.payload.target,
+                    targetHandle: status.payload.targetHandle,
+                });
+                source = adjusted.source;
+                target = adjusted.target;
+                sourceHandle = adjusted.sourceHandle;
+                targetHandle = adjusted.targetHandle;
+            }
+            const sourceId = source.node.id;
+            const targetId = target.node.id;
+            const sourceHandleId = sourceHandle.rawHandle.id;
+            const targetHandleId = targetHandle.rawHandle.id;
+            return {
+                source: sourceId,
+                target: targetId,
+                sourceHandle: sourceHandleId,
+                targetHandle: targetHandleId,
+            };
+        }), tap(() => this.statusService.setIdleStatus()), filter((connection) => this.flowEntitiesService.connection().validator(connection))));
+        this.isStrictMode = computed(() => this.flowEntitiesService.connection().mode === 'strict');
+    }
+    startConnection(handle) {
+        this.statusService.setConnectionStartStatus(handle.parentNode, handle);
+    }
+    validateConnection(handle) {
+        const status = this.statusService.status();
+        if (status.state === 'connection-start') {
+            let source = status.payload.source;
+            let target = handle.parentNode;
+            let sourceHandle = status.payload.sourceHandle;
+            let targetHandle = handle;
+            if (this.isStrictMode()) {
+                // swap direction (if needed) according to actual source and target of strict mode
+                const adjusted = adjustDirection({
+                    source: status.payload.source,
+                    sourceHandle: status.payload.sourceHandle,
+                    target: handle.parentNode,
+                    targetHandle: handle,
+                });
+                source = adjusted.source;
+                target = adjusted.target;
+                sourceHandle = adjusted.sourceHandle;
+                targetHandle = adjusted.targetHandle;
+            }
+            const valid = this.flowEntitiesService.connection().validator({
+                source: source.node.id,
+                target: target.node.id,
+                sourceHandle: sourceHandle.rawHandle.id,
+                targetHandle: targetHandle.rawHandle.id,
+            });
+            // TODO: check how react flow handles highlight of handle
+            // if direction changes
+            handle.state.set(valid ? 'valid' : 'invalid');
+            // status is about how we draw connection, so we don't need
+            // swapped diretion here
+            this.statusService.setConnectionValidationStatus(valid, status.payload.source, handle.parentNode, status.payload.sourceHandle, handle);
+        }
+    }
+    resetValidateConnection(targetHandle) {
+        targetHandle.state.set('idle');
+        // drop back to start status
+        const status = this.statusService.status();
+        if (status.state === 'connection-validation') {
+            this.statusService.setConnectionStartStatus(status.payload.source, status.payload.sourceHandle);
+        }
+    }
+    endConnection() {
+        const status = this.statusService.status();
+        if (status.state === 'connection-validation') {
+            const source = status.payload.source;
+            const sourceHandle = status.payload.sourceHandle;
+            const target = status.payload.target;
+            const targetHandle = status.payload.targetHandle;
+            this.statusService.setConnectionEndStatus(source, target, sourceHandle, targetHandle);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerDirective, isStandalone: true, selector: "[onConnect]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[onConnect]',
+                    standalone: true,
+                }]
+        }] });
+
 class HandleSizeControllerDirective {
     constructor() {
         this.handleModel = input.required({
@@ -2517,10 +2491,11 @@ class NodeComponent {
         this.flowSettingsService = inject(FlowSettingsService);
         this.selectionService = inject(SelectionService);
         this.hostRef = inject(ElementRef);
-        this.connectionController = inject(ConnectionControllerDirective);
         this.nodeAccessor = inject(NodeAccessorService);
         this.overlaysService = inject(OverlaysService);
         this.zone = inject(NgZone);
+        // TODO remove dependency from this directive
+        this.connectionController = inject(ConnectionControllerDirective, { optional: true });
         this.nodeModel = input.required();
         this.nodeTemplate = input();
         this.groupNodeTemplate = input();
@@ -2569,16 +2544,16 @@ class NodeComponent {
     startConnection(event, handle) {
         // ignore drag by stopping propagation
         event.stopPropagation();
-        this.connectionController.startConnection(handle);
+        this.connectionController?.startConnection(handle);
     }
     validateConnection(handle) {
-        this.connectionController.validateConnection(handle);
+        this.connectionController?.validateConnection(handle);
     }
     resetValidateConnection(targetHandle) {
-        this.connectionController.resetValidateConnection(targetHandle);
+        this.connectionController?.resetValidateConnection(targetHandle);
     }
     endConnection() {
-        this.connectionController.endConnection();
+        this.connectionController?.endConnection();
     }
     pullNode() {
         this.nodeRenderingService.pullNode(this.nodeModel());
@@ -2932,10 +2907,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['document:touchend']
             }] } });
 
-const connectionControllerHostDirective = {
-    directive: ConnectionControllerDirective,
-    outputs: ['onConnect'],
-};
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
     outputs: [
@@ -3208,7 +3179,7 @@ class VflowComponent {
             ComponentEventBusService,
             KeyboardService,
             OverlaysService,
-        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\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: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\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: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -3225,7 +3196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ComponentEventBusService,
                         KeyboardService,
                         OverlaysService,
-                    ], hostDirectives: [connectionControllerHostDirective, changesControllerHostDirective], imports: [
+                    ], hostDirectives: [changesControllerHostDirective], imports: [
                         RootSvgReferenceDirective,
                         RootSvgContextDirective,
                         RootPointerDirective,
@@ -3532,6 +3503,7 @@ const Vflow = [
     MiniMapComponent,
     NodeToolbarComponent,
     DragHandleDirective,
+    ConnectionControllerDirective,
     NodeHtmlTemplateDirective,
     GroupNodeTemplateDirective,
     EdgeLabelHtmlTemplateDirective,