@foblex/flow 1.5.0 → 1.5.2

package/fesm2022/foblex-flow.mjs

@@ -1,96 +1,10 @@
-import { PointExtensions, TransformModelExtensions, DomElementExtensions, RectExtensions, BooleanExtensions, sanitizeElementId, Point, GuidExtensions, VectorExtensions, EventExtensions, SizeExtensions, MouseEventExtensions, IMouseEvent, ITouchDownEvent, ITouchMoveEvent, ITouchUpEvent } from '@foblex/core';
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, ChangeDetectionStrategy, Input, Directive, Injectable, ContentChild, Inject, ViewChild, ContentChildren, Optional, SkipSelf, EventEmitter, Output, NgModule } from '@angular/core';
+import { TransformModelExtensions, DomElementExtensions, PointExtensions, RectExtensions, BooleanExtensions, sanitizeElementId, Point, GuidExtensions, VectorExtensions, EventExtensions, mixinChangePosition, mixinFitToParent, mixinOneToOneCentering, mixinChangeZoom, SizeExtensions, MouseEventExtensions, IMouseEvent, ITouchDownEvent, ITouchMoveEvent, ITouchUpEvent } from '@foblex/core';
 import { Subject, Observable, Subscription, startWith, debounceTime } from 'rxjs';
+import { __decorate } from 'tslib';
 import { DOCUMENT, CommonModule } from '@angular/common';
 
-function mixinChangeZoom(base) {
-    return class extends base {
-        setZoom(scaleValue, toPosition) {
-            if (scaleValue !== this.transform.scale) {
-                const summaryPosition = PointExtensions.sum(this.transform.scaledPosition, this.transform.position);
-                const newX = toPosition.x - (toPosition.x - summaryPosition.x) * scaleValue / this.transform.scale;
-                const newY = toPosition.y - (toPosition.y - summaryPosition.y) * scaleValue / this.transform.scale;
-                this.transform.scale = scaleValue;
-                this.transform.scaledPosition = PointExtensions.sub(PointExtensions.initialize(newX, newY), this.transform.position);
-            }
-        }
-        setScalePosition(value) {
-            this.transform.scaledPosition = value;
-        }
-        resetZoom() {
-            this.transform.scale = 1;
-            this.transform.scaledPosition = PointExtensions.initialize();
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinFitToParent(base) {
-    return class extends base {
-        fitToParent(rect, parentRect, points) {
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.transform.position = this.getZeroPositionWithoutScale(points);
-            const itemsContainerWidth = rect.width / this.transform.scale;
-            const itemsContainerHeight = rect.height / this.transform.scale;
-            if ((itemsContainerWidth > parentRect.width || itemsContainerHeight > parentRect.height) ||
-                itemsContainerWidth < parentRect.width && itemsContainerHeight < parentRect.height) {
-                this.transform.scale = Math.min(parentRect.width / itemsContainerWidth, parentRect.height / itemsContainerHeight);
-            }
-            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
-            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
-            this.transform.position = PointExtensions.initialize(newX, newY);
-        }
-        getZeroPositionWithoutScale(points) {
-            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
-            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
-            return PointExtensions.initialize(xPoint, yPoint);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinOneToOneCentering(base) {
-    return class extends base {
-        oneToOneCentering(rect, parentRect, points) {
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.transform.position = this.getZeroPositionWithoutScale(points);
-            const itemsContainerWidth = rect.width / this.transform.scale;
-            const itemsContainerHeight = rect.height / this.transform.scale;
-            this.transform.scale = 1;
-            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
-            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
-            this.transform.position = PointExtensions.initialize(newX, newY);
-        }
-        getZeroPositionWithoutScale(points) {
-            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
-            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
-            return PointExtensions.initialize(xPoint, yPoint);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinChangePosition(base) {
-    return class extends base {
-        getPosition() {
-            return this.transform.position;
-        }
-        setPosition(position) {
-            this.transform.position = PointExtensions.copy(position);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
 let uniqueId$9 = 0;
@@ -504,7 +418,7 @@ class FNodeInputDirective extends FNodeInputBase {
         this.fComponentsStore.removeInput(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fInputId", "id"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled"], _fConnectableSide: ["fInputConnectableSide", "_fConnectableSide"] }, host: { properties: { "attr.id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled", "class.f-node-input-not-connectable": "!canBeConnected" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fInputId", "id"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled"], _fConnectableSide: ["fInputConnectableSide", "_fConnectableSide"] }, host: { properties: { "attr.data-f-input-id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled", "class.f-node-input-not-connectable": "!canBeConnected" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeInputDirective, decorators: [{
             type: Directive,
@@ -512,7 +426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     selector: "[fNodeInput]",
                     exportAs: 'fNodeInput',
                     host: {
-                        '[attr.id]': 'id',
+                        '[attr.data-f-input-id]': 'id',
                         class: "f-component f-node-input",
                         '[class.f-node-input-multiple]': 'multiple',
                         '[class.f-node-input-disabled]': 'disabled',
@@ -597,7 +511,7 @@ class FNodeOutletDirective extends FNodeOutletBase {
         this.fComponentsStore.removeOutlet(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fOutletId", "id"], disabled: ["fOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.id": "id", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }], exportAs: ["fNodeOutlet"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fOutletId", "id"], disabled: ["fOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.data-f-outlet-id": "id", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }], exportAs: ["fNodeOutlet"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeOutletDirective, decorators: [{
             type: Directive,
@@ -605,7 +519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     selector: "[fNodeOutlet]",
                     exportAs: 'fNodeOutlet',
                     host: {
-                        '[attr.id]': 'id',
+                        '[attr.data-f-outlet-id]': 'id',
                         class: "f-component f-node-outlet",
                         '[class.f-node-outlet-disabled]': 'disabled'
                     },
@@ -685,7 +599,7 @@ class FNodeOutputDirective extends FNodeOutputBase {
         this.fComponentsStore.removeOutput(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fOutputId", "id"], disabled: ["fOutputDisabled", "disabled"], _fConnectableSide: ["fOutputConnectableSide", "_fConnectableSide"] }, host: { properties: { "attr.id": "id", "class.f-node-output-disabled": "disabled" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fOutputId", "id"], disabled: ["fOutputDisabled", "disabled"], _fConnectableSide: ["fOutputConnectableSide", "_fConnectableSide"] }, host: { properties: { "attr.data-f-output-id": "id", "class.f-node-output-disabled": "disabled" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeOutputDirective, decorators: [{
             type: Directive,
@@ -693,7 +607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     selector: "[fNodeOutput]",
                     exportAs: 'fNodeOutput',
                     host: {
-                        '[attr.id]': 'id',
+                        '[attr.data-f-output-id]': 'id',
                         class: "f-component f-node-output",
                         '[class.f-node-output-disabled]': 'disabled',
                     },
@@ -1164,6 +1078,7 @@ class FMarkerDirective extends FMarkerBase {
         this.refX = 0;
         this.refY = 0;
         this.type = EFMarkerType.START;
+        this.hostElement.style.display = 'none';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FMarkerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FMarkerDirective, isStandalone: true, selector: "svg[fMarker]", inputs: { hostElement: "hostElement", width: "width", height: "height", refX: "refX", refY: "refY", type: "type" }, host: { classAttribute: "f-component f-marker" }, providers: [{ provide: F_MARKER, useExisting: FMarkerDirective }], usesInheritance: true, ngImport: i0 }); }
@@ -1221,7 +1136,7 @@ class FConnectionPathComponent {
         this.hostElement.setAttribute('marker-end', `url(#${this.getMarkerId(EFMarkerType.END)})`);
     }
     getMarkerId(type) {
-        return sanitizeElementId(`${getFlowUid()}-${type}-${this.base.id}`);
+        return sanitizeElementId(`${getFlowUid()}-${type}-${this.base.fConnectionId}`);
     }
     isSelected() {
         return this.hostElement.getAttribute('marker-start') === `url(#${this.getMarkerId(EFMarkerType.SELECTED_START)})`;
@@ -1360,7 +1275,7 @@ class FConnectionBase extends MIXIN_BASE$1 {
         this.fDefs.nativeElement.innerHTML = '';
         this.fMarkers.forEach((marker) => {
             const markerElement = DomElementExtensions.createSvgElement('marker');
-            markerElement.setAttribute('id', getFlowUid() + '-' + marker.type + '-' + this.id);
+            markerElement.setAttribute('id', getFlowUid() + '-' + marker.type + '-' + this.fConnectionId);
             markerElement.setAttribute('markerHeight', `${marker.height}`);
             markerElement.setAttribute('markerWidth', `${marker.width}`);
             markerElement.setAttribute('orient', 'auto');
@@ -1369,7 +1284,9 @@ class FConnectionBase extends MIXIN_BASE$1 {
             markerElement.setAttribute('markerUnits', 'strokeWidth');
             marker.hostElement.setAttribute('height', `${marker.height}`);
             marker.hostElement.setAttribute('width', `${marker.width}`);
-            markerElement.append(marker.hostElement.cloneNode(true));
+            const clone = marker.hostElement.cloneNode(true);
+            clone.style.display = 'unset';
+            markerElement.append(clone);
             this.fDefs.nativeElement.append(markerElement);
         });
         this.fMarkers.forEach((marker) => {
@@ -1432,7 +1349,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     constructor(elementReference, fComponentsStore) {
         super(elementReference);
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-connection-for-create-${uniqueId$4++}`;
+        this.fConnectionId = `f-connection-for-create-${uniqueId$4++}`;
         this.fText = '';
         this.fStartColor = 'black';
         this.fEndColor = 'black';
@@ -1515,7 +1432,7 @@ class FConnectionComponent extends FConnectionBase {
     constructor(elementReference, fComponentsStore) {
         super(elementReference);
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-connection-${uniqueId$3++}`;
+        this.fConnectionId = `f-connection-${uniqueId$3++}`;
         this.fText = '';
         this.fStartColor = 'black';
         this.fEndColor = 'black';
@@ -1530,16 +1447,16 @@ class FConnectionComponent extends FConnectionBase {
         this.fComponentsStore.removeConnection(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: FConnectionComponent, selector: "f-connection", inputs: { id: "id", fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fBehavior: ["fBehavior", "fBehavior", castToConnectionBehavior], fType: ["fType", "fType", castToConnectionType], disabled: "disabled" }, host: { properties: { "attr.id": "id", "class.f-connection-disabled": "disabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: FConnectionComponent, selector: "f-connection", inputs: { fConnectionId: "fConnectionId", fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fBehavior: ["fBehavior", "fBehavior", castToConnectionBehavior], fType: ["fType", "fType", castToConnectionType], disabled: "disabled" }, host: { properties: { "attr.id": "fConnectionId", "class.f-connection-disabled": "disabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection", exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'id',
+                        '[attr.id]': 'fConnectionId',
                         class: "f-component f-connection",
                         '[class.f-connection-disabled]': 'disabled',
                     }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { fConnectionId: [{
                 type: Input
             }], fText: [{
                 type: Input
@@ -1778,7 +1695,7 @@ class FNodeDirective extends FNodeBase {
         this.subscriptions$.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeDirective, selector: "[fNode]", inputs: { fNodeId: "fNodeId", position: ["fNodePosition", "position"], disabled: "disabled" }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.id": "fNodeId", "class.f-node-disabled": "disabled" }, classAttribute: "f-node f-component" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeDirective, selector: "[fNode]", inputs: { fNodeId: "fNodeId", position: ["fNodePosition", "position"], disabled: "disabled" }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.data-f-node-id": "fNodeId", "class.f-node-disabled": "disabled" }, classAttribute: "f-node f-component" }, providers: [
             { provide: F_NODE, useExisting: FNodeDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
 }
@@ -1788,7 +1705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     selector: "[fNode]",
                     exportAs: "fComponent",
                     host: {
-                        '[attr.id]': 'fNodeId',
+                        '[attr.data-f-node-id]': 'fNodeId',
                         class: "f-node f-component",
                         '[class.f-node-disabled]': 'disabled'
                     },
@@ -1978,7 +1895,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             type: Directive
         }], ctorParameters: () => [] });
 
-class GetConnectionVectorHandler {
+class GetConnectionVectorRequest {
+    constructor(outputRect, inputRect, behavior, outputSide, inputSide) {
+        this.outputRect = outputRect;
+        this.inputRect = inputRect;
+        this.behavior = behavior;
+        this.outputSide = outputSide;
+        this.inputSide = inputSide;
+    }
+}
+
+class FFlowMediator {
+    constructor(injector) {
+        this.injector = injector;
+    }
+    static { this.handlers = new Map(); }
+    static register(type, handler) {
+        this.handlers.set(type.name, handler);
+    }
+    send(request) {
+        const handler = FFlowMediator.handlers.get(request.constructor.name);
+        if (!handler) {
+            throw new Error('Handler not registered for request type.');
+        }
+        return this.injector.get(handler).handle(request);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FFlowMediator, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FFlowMediator }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FFlowMediator, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+
+function FHandlerRegister(requestType) {
+    return function (constructor) {
+        FFlowMediator.register(requestType, constructor);
+    };
+}
+
+let GetConnectionVectorHandler = class GetConnectionVectorHandler {
     constructor() {
         this.behaviorHandlers = {
             [EFConnectionBehavior.FLOATING.toString()]: this.floatingBehavior,
@@ -2014,7 +1969,10 @@ class GetConnectionVectorHandler {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetConnectionVectorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetConnectionVectorHandler }); }
-}
+};
+GetConnectionVectorHandler = __decorate([
+    FHandlerRegister(GetConnectionVectorRequest)
+], GetConnectionVectorHandler);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetConnectionVectorHandler, decorators: [{
             type: Injectable
         }] });
@@ -2045,13 +2003,9 @@ const positionFixedOutbound = {
     },
 };
 
-class GetConnectionVectorRequest {
-    constructor(outputRect, inputRect, behavior, outputSide, inputSide) {
-        this.outputRect = outputRect;
-        this.inputRect = inputRect;
-        this.behavior = behavior;
-        this.outputSide = outputSide;
-        this.inputSide = inputSide;
+class GetOutputRectInFlowRequest {
+    constructor(fOutputId) {
+        this.fOutputId = fOutputId;
     }
 }
 
@@ -2065,6 +2019,109 @@ function requiredOutput() {
     return new Error(`The node must contain at least one fOutput if there is an fOutlet`);
 }
 
+class GetOutputRectInFlowResponse {
+    constructor(rect, fConnectableSide) {
+        this.rect = rect;
+        this.fConnectableSide = fConnectableSide;
+    }
+}
+
+class GetElementRectInFlowHandler {
+    get transform() {
+        return this.fComponentsStore.transform;
+    }
+    get flowHost() {
+        return this.fComponentsStore.flowHost;
+    }
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(element) {
+        const systemRect = RectExtensions.fromElement(element);
+        const position = Point.fromPoint(systemRect).elementTransform(this.flowHost).sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
+        const size = SizeExtensions.initialize(systemRect.width / this.transform.scale, systemRect.height / this.transform.scale);
+        const result = RectExtensions.initialize(position.x, position.y, size.width, size.height);
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetElementRectInFlowHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetElementRectInFlowHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetElementRectInFlowHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
+
+let GetOutputRectInFlowHandler = class GetOutputRectInFlowHandler {
+    constructor(fComponentsStore, getElementRectInFlowHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+    }
+    handle(request) {
+        const output = this.fComponentsStore.fOutputs.find((x) => x.id === request.fOutputId);
+        if (!output) {
+            throw OutputNotFound(request.fOutputId);
+        }
+        const result = this.getElementRectInFlowHandler.handle(output.hostElement);
+        return new GetOutputRectInFlowResponse(result, output.fConnectableSide);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutputRectInFlowHandler, deps: [{ token: FComponentsStore }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutputRectInFlowHandler }); }
+};
+GetOutputRectInFlowHandler = __decorate([
+    FHandlerRegister(GetOutputRectInFlowRequest)
+], GetOutputRectInFlowHandler);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutputRectInFlowHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }] });
+
+class RedrawConnectionsRequest {
+    constructor() {
+    }
+}
+
+let RedrawConnectionsHandler = class RedrawConnectionsHandler {
+    constructor(fComponentsStore, getElementRectInFlowHandler, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+        this.fMediator = fMediator;
+    }
+    handle(request) {
+        this.resetConnectors();
+        this.fComponentsStore.fTempConnection?.setMarkers();
+        this.fComponentsStore.fConnections.forEach((connection) => {
+            const output = this.fComponentsStore.fOutputs.find((x) => x.id === connection.fOutputId);
+            const input = this.fComponentsStore.fInputs.find((x) => x.id === connection.fInputId);
+            if (output && input) {
+                this.setupConnection(output, input, connection);
+            }
+        });
+    }
+    resetConnectors() {
+        this.fComponentsStore.fOutputs.forEach((output) => output.setConnected(false));
+        this.fComponentsStore.fInputs.forEach((input) => input.setConnected(false));
+    }
+    setupConnection(output, input, connection) {
+        output.setConnected(true);
+        input.setConnected(true);
+        const vector = this.getVector(output, input, connection);
+        connection.setVector(vector.point1, output.fConnectableSide, vector.point2, input.fConnectableSide);
+        connection.setMarkers();
+        connection.initialize();
+    }
+    getVector(output, input, connection) {
+        const outputRect = this.getElementRectInFlowHandler.handle(output.hostElement);
+        const inputRect = this.getElementRectInFlowHandler.handle(input.hostElement);
+        return this.fMediator.send(new GetConnectionVectorRequest(outputRect, inputRect, connection.fBehavior, output.fConnectableSide, input.fConnectableSide));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RedrawConnectionsHandler, deps: [{ token: FComponentsStore }, { token: GetElementRectInFlowHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RedrawConnectionsHandler }); }
+};
+RedrawConnectionsHandler = __decorate([
+    FHandlerRegister(RedrawConnectionsRequest)
+], RedrawConnectionsHandler);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RedrawConnectionsHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }, { type: FFlowMediator }] });
+
 class GetAllNodesRectHandler {
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
@@ -2102,30 +2159,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class GetElementRectInFlowHandler {
-    get transform() {
-        return this.fComponentsStore.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.flowHost;
-    }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(element) {
-        const systemRect = RectExtensions.fromElement(element);
-        const position = Point.fromPoint(systemRect).elementTransform(this.flowHost).sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
-        const size = SizeExtensions.initialize(systemRect.width / this.transform.scale, systemRect.height / this.transform.scale);
-        const result = RectExtensions.initialize(position.x, position.y, size.width, size.height);
-        return result;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetElementRectInFlowHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetElementRectInFlowHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetElementRectInFlowHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
 class GetIncomingConnectionsHandler {
     get fConnections() {
         return this.fComponentsStore.fConnections;
@@ -2186,26 +2219,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }] });
 
-class GetOutputRectInFlowHandler {
-    constructor(fComponentsStore, getElementRectInFlowHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-    }
-    handle(outputId) {
-        const output = this.fComponentsStore.fOutputs.find((x) => x.id === outputId);
-        if (!output) {
-            throw OutputNotFound(outputId);
-        }
-        const result = this.getElementRectInFlowHandler.handle(output.hostElement);
-        return { rect: result, fConnectableSide: output.fConnectableSide };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutputRectInFlowHandler, deps: [{ token: FComponentsStore }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutputRectInFlowHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutputRectInFlowHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }] });
-
 class UpdateNodeLayerHandler {
     get fNodesContainer() {
         return this.fComponentsStore.fCanvas?.fNodesContainer?.nativeElement;
@@ -2307,11 +2320,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 const COMMON_PROVIDERS = [
-    GetAllNodesRectHandler,
     GetConnectionVectorHandler,
+    GetOutputRectInFlowHandler,
+    RedrawConnectionsHandler,
+    GetAllNodesRectHandler,
     GetConnectionHandler,
     GetElementRectInFlowHandler,
-    GetOutputRectInFlowHandler,
     GetInputRectInFlowHandler,
     GetIncomingConnectionsHandler,
     GetOutgoingConnectionsHandler,
@@ -2493,942 +2507,644 @@ const CANVAS_PROVIDERS = [
     CanvasPrepareDragSequence
 ];
 
-const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
-class FExternalItemBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FExternalItemBase, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemBase, decorators: [{
-            type: Directive
-        }] });
-
-function isExternalItem(element) {
-    return !!element.closest('[fExternalItem]');
-}
-function getExternalItem(element) {
-    return element.closest('[fExternalItem]');
-}
-
-class FExternalItemService {
-    constructor() {
-        this.items = [];
+class FindFirstCanBeConnectedOutputByOutletHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
     }
-    registerItem(item) {
-        this.items.push(item);
+    get fOutputs() {
+        return this.fComponentsStore.fOutputs;
     }
-    getItem(element) {
-        return this.items.find(item => item.hostElement === element);
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
-    removeItem(item) {
-        const index = this.items.indexOf(item);
-        if (index !== -1) {
-            this.items.splice(index, 1);
+    handle(outlet) {
+        let result;
+        const node = this.fNodes.find((x) => x.isContains(outlet.hostElement));
+        if (!node) {
+            throw new Error('Node not found');
+        }
+        const outputsOfNode = this.fOutputs.filter((x) => {
+            return node.isContains(x.hostElement) && x.canBeConnected;
+        });
+        if (outputsOfNode.length > 0) {
+            result = outputsOfNode[0];
         }
+        return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-let uniqueId$1 = 0;
-class FExternalItemDirective extends FExternalItemBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
+class CreateConnectionDragHandler {
+    constructor(fMediator, connection, mouseDownPoint) {
+        this.fMediator = fMediator;
+        this.connection = connection;
+        this.mouseDownPoint = mouseDownPoint;
+        this.type = EFDraggableType.CREATE_CONNECTION;
+        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
+        this.onPointerDownToConnectorRect = RectExtensions.initialize();
+        this.outputSide = EFConnectableSide.BOTTOM;
     }
-    constructor(elementReference, fExternalItemService) {
-        super();
-        this.elementReference = elementReference;
-        this.fExternalItemService = fExternalItemService;
-        this.id = `f-external-item-${uniqueId$1++}`;
+    initialize() {
+        const outputRect = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
+        this.outputSide = outputRect.fConnectableSide;
+        this.onPointerDownFromConnectorRect = outputRect.rect;
+        this.onPointerDownToConnectorRect = RectExtensions.initialize(this.mouseDownPoint.x, this.mouseDownPoint.y, 0, 0);
+        this.connection.show();
+        this.move(new Point(0, 0));
     }
-    ngOnInit() {
-        this.fExternalItemService.registerItem(this);
+    move(difference) {
+        const toPoint = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
+        const vector = this.fMediator.send(new GetConnectionVectorRequest(this.onPointerDownFromConnectorRect, toPoint, this.connection.fBehavior, this.outputSide, EFConnectableSide.TOP));
+        this.connection.setVector(vector.point1, this.outputSide, vector.point2, EFConnectableSide.TOP);
+        this.connection.redraw();
     }
-    ngOnDestroy() {
-        this.fExternalItemService.removeItem(this);
+    complete() {
+        this.connection.redraw();
+        this.connection.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemDirective, deps: [{ token: i0.ElementRef }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { id: "id", data: "data" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-external-item" }, providers: [
-            { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
-        ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[fExternalItem]",
-                    host: {
-                        '[attr.id]': 'id',
-                        class: "f-component f-external-item",
-                    },
-                    providers: [
-                        { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
-                    ],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FExternalItemService }], propDecorators: { id: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }] } });
 
-class LineElement {
-    constructor(hostElement) {
-        this.hostElement = hostElement;
-        this.element = DomElementExtensions.createHtmlElement('div');
-        this.hostElement.appendChild(this.element);
-        this.element.classList.add('f-line');
+class FCreateConnectionEvent {
+    constructor(fOutputId, fInputId) {
+        this.fOutputId = fOutputId;
+        this.fInputId = fInputId;
     }
-    hide() {
-        this.element.style.display = 'none';
+}
+
+class FirstNotConnectedInputOfNodeUnderPointerHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
     }
-    show() {
-        this.element.style.display = 'block';
+    get fInputs() {
+        return this.fComponentsStore.fInputs;
     }
-    draw(object) {
-        this.element.style.position = 'absolute';
-        Object.keys(object).forEach((key) => {
-            // @ts-ignore
-            this.element.style[key] = object[key] + 'px';
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(event) {
+        const position = event.getPosition();
+        const elementsFromPoint = document.elementsFromPoint(position.x, position.y);
+        const nodes = elementsFromPoint.map((element) => {
+            return this.fNodes.find((x) => x.isContains(element));
+        }).filter((x) => !!x);
+        const inputs = nodes.map((x) => {
+            return this.fInputs.filter((i) => x.isContains(i.hostElement)).find((i) => {
+                return !i.isConnected && i.canBeConnected;
+            });
         });
+        const result = inputs.find((x) => !!x);
+        return result;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class LineService {
-    constructor(hostElement) {
-        this.hostElement = hostElement;
-        this.fHorizontalLine = new LineElement(this.hostElement);
-        this.fVerticalLine = new LineElement(this.hostElement);
+class InputsUnderPointerHandler {
+    get fInputs() {
+        return this.fComponentsStore.fInputs;
     }
-    drawVerticalLine(x, size, transform) {
-        this.fVerticalLine.show();
-        this.fVerticalLine.draw({
-            left: x * transform.scale + transform.position.x + transform.scaledPosition.x,
-            top: 0,
-            width: 1,
-            height: size.height
-        });
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
-    drawHorizontalLine(y, size, transform) {
-        this.fHorizontalLine.show();
-        this.fHorizontalLine.draw({
-            left: 0,
-            top: y * transform.scale + transform.position.y + transform.scaledPosition.y,
-            width: size.width,
-            height: 1
-        });
+    handle(event) {
+        const position = event.getPosition();
+        const elementsFromPoint = document.elementsFromPoint(position.x, position.y);
+        return elementsFromPoint.filter((x) => isNodeInput(x)).map((element) => {
+            return this.fInputs.find((x) => x.isContains(element));
+        }).filter((x) => !!x);
     }
-    hideVerticalLine() {
-        this.fVerticalLine.hide();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputsUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputsUnderPointerHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputsUnderPointerHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
+
+class FindInputsUnderPointerRequest {
+    constructor(event, dragHandler) {
+        this.event = event;
+        this.dragHandler = dragHandler;
     }
-    hideHorizontalLine() {
-        this.fHorizontalLine.hide();
+}
+
+class FindInputsUnderPointerHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    constructor(fComponentsStore, inputsUnderPointerHandler, firstNotConnectedInputOfNodeUnderPointerHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.inputsUnderPointerHandler = inputsUnderPointerHandler;
+        this.firstNotConnectedInputOfNodeUnderPointerHandler = firstNotConnectedInputOfNodeUnderPointerHandler;
+    }
+    handle(payload) {
+        const inputsUnderPointer = this.getInputsUnderPointer(payload);
+        const output = this.fComponentsStore.fOutputs.find((x) => x.id === payload.dragHandler.connection.fOutputId);
+        if (!output) {
+            throw OutputNotFound(payload.dragHandler.connection.fOutputId);
+        }
+        return inputsUnderPointer.filter((x) => {
+            const targetNode = this.fNodes.find((y) => y.isContains(x.hostElement));
+            const sourceNode = this.fNodes.find((y) => y.isContains(output.hostElement));
+            return sourceNode?.hostElement !== targetNode?.hostElement;
+        });
+    }
+    getInputsUnderPointer(payload) {
+        let inputs = this.inputsUnderPointerHandler.handle(payload.event);
+        const input = this.firstNotConnectedInputOfNodeUnderPointerHandler.handle(payload.event);
+        if (input) {
+            inputs.push(input);
+        }
+        inputs = inputs.filter((x) => x.canBeConnected);
+        return inputs;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindInputsUnderPointerHandler, deps: [{ token: FComponentsStore }, { token: InputsUnderPointerHandler }, { token: FirstNotConnectedInputOfNodeUnderPointerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindInputsUnderPointerHandler }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindInputsUnderPointerHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: InputsUnderPointerHandler }, { type: FirstNotConnectedInputOfNodeUnderPointerHandler }] });
 
-const ALIGN_THRESHOLD = 10;
-/**
- * A class to find the nearest coordinate.
- */
-class NearestCoordinateFinder {
-    /**
-     * Constructor to initialize the NearestCoordinateFinder.
-     * @param elements - The array of IRect elements.
-     * @param target - The target IRect element.
-     */
-    constructor(elements, target) {
-        this.elements = elements;
-        this.target = target;
+class CreateConnectionOnPointerUp {
+    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler, findFirstCanBeConnectedOutputByOutletHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
+        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
     }
-    /**
-     * Finds the nearest coordinate on a specified axis.
-     * @returns The nearest coordinate and its distance.
-     */
-    findNearestCoordinateByX() {
-        let nearest;
-        let minDistance;
-        for (const element of this.elements) {
-            const distanceLeftLeft = this.target.x - element.x;
-            const distanceLeftRight = this.target.x - (element.x + element.width);
-            const distanceCenterCenter = this.target.gravityCenter.x - element.gravityCenter.x;
-            const distanceRightLeft = (this.target.x + this.target.width) - element.x;
-            const distanceRightRight = (this.target.x + this.target.width) - (element.x + element.width);
-            if (Math.abs(distanceLeftLeft) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceLeftRight) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceRightLeft) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceRightRight) <= ALIGN_THRESHOLD) {
-                if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
-                    minDistance = distanceCenterCenter;
-                    nearest = element.gravityCenter.x;
-                }
-                if (Math.abs(distanceLeftLeft) < Math.abs(minDistance)) {
-                    minDistance = distanceLeftLeft;
-                    nearest = element.x;
-                }
-                if (Math.abs(distanceRightRight) < Math.abs(minDistance)) {
-                    minDistance = distanceRightRight;
-                    nearest = element.x + element.width;
+    handle(event) {
+        const isCreateConnection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.CREATE_CONNECTION);
+        if (isCreateConnection) {
+            const handler = this.fDraggableDataContext.draggableItems[0];
+            const inputsUnderPointer = this.findInputsUnderPointerHandler.handle(new FindInputsUnderPointerRequest(event, handler));
+            if (inputsUnderPointer.length > 0) {
+                let output = this.fComponentsStore.fOutputs.find((x) => x.id === handler.connection.fOutputId);
+                if (!output) {
+                    output = this.fComponentsStore.fOutlets.find((x) => x.id === handler.connection.fOutputId);
                 }
-                if (Math.abs(distanceLeftRight) < Math.abs(minDistance)) {
-                    minDistance = distanceLeftRight;
-                    nearest = element.x + element.width;
+                if (!output) {
+                    throw OutputNotFound(handler.connection.fOutputId);
                 }
-                if (Math.abs(distanceRightLeft) < Math.abs(minDistance)) {
-                    minDistance = distanceRightLeft;
-                    nearest = element.x;
-                }
-            }
-        }
-        return { value: nearest, distance: minDistance };
-    }
-    /**
-     * Finds the nearest coordinate on a specified axis.
-     * @returns The nearest coordinate and its distance.
-     */
-    findNearestCoordinateByY() {
-        let nearest;
-        let minDistance;
-        for (const element of this.elements) {
-            const distanceTopTop = this.target.y - element.y;
-            const distanceTopBottom = this.target.y - (element.y + element.height);
-            const distanceCenterCenter = this.target.gravityCenter.y - element.gravityCenter.y;
-            const distanceBottomTop = (this.target.y + this.target.height) - element.y;
-            const distanceBottomBottom = (this.target.y + this.target.height) - (element.y + element.height);
-            if (Math.abs(distanceTopTop) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceTopBottom) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceBottomTop) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceBottomBottom) <= ALIGN_THRESHOLD) {
-                if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
-                    minDistance = distanceCenterCenter;
-                    nearest = element.gravityCenter.y;
-                }
-                if (Math.abs(distanceTopTop) < Math.abs(minDistance)) {
-                    minDistance = distanceTopTop;
-                    nearest = element.y;
-                }
-                if (Math.abs(distanceBottomBottom) < Math.abs(minDistance)) {
-                    minDistance = distanceBottomBottom;
-                    nearest = element.y + element.height;
-                }
-                if (Math.abs(distanceTopBottom) < Math.abs(minDistance)) {
-                    minDistance = distanceTopBottom;
-                    nearest = element.y + element.height;
-                }
-                if (Math.abs(distanceBottomTop) < Math.abs(minDistance)) {
-                    minDistance = distanceBottomTop;
-                    nearest = element.y;
+                const isOutlet = isNodeOutlet(output.hostElement);
+                if (isOutlet) {
+                    output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(output);
+                    if (!output) {
+                        throw requiredOutput();
+                    }
                 }
+                this.fComponentsStore.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(output.id, inputsUnderPointer[0]?.id));
             }
+            handler.complete();
         }
-        return { value: nearest, distance: minDistance };
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FindInputsUnderPointerHandler }, { token: FindFirstCanBeConnectedOutputByOutletHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionOnPointerUp }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionOnPointerUp, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }] });
 
-const F_LINE_ALIGNMENT = new InjectionToken('F_LINE_ALIGNMENT');
-class FLineAlignmentBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FLineAlignmentBase, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FLineAlignmentBase, decorators: [{
-            type: Directive
-        }] });
-
-class FLineAlignmentComponent extends FLineAlignmentBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
+class CreateConnectionPrepareDragSequence {
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(elementReference, fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
-        super();
-        this.elementReference = elementReference;
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, fMediator, findFirstCanBeConnectedOutputByOutletHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-        this.size = SizeExtensions.initialize();
-        this.draggedNodeRect = RectExtensions.initialize();
-        this.rects = [];
-        this.lineService = new LineService(this.hostElement);
-    }
-    ngOnInit() {
-        this.fDraggableDataContext.fLineAlignment = this;
-    }
-    initialize(allNodes, currentNodes) {
-        this.size = this.flowHost.getBoundingClientRect();
-        this.rects = [];
-        const draggedNodeRects = currentNodes.map((x) => {
-            return this.getElementRectInFlowHandler.handle(x.hostElement);
-        });
-        this.draggedNodeRect = RectExtensions.union(draggedNodeRects);
-        const allNodesExcludeCurrents = allNodes.filter((x) => {
-            return !currentNodes.includes(x);
-        });
-        this.rects = allNodesExcludeCurrents.map((x) => {
-            return this.getElementRectInFlowHandler.handle(x.hostElement);
-        });
-    }
-    handle(difference) {
-        this.drawIntersectingLines(difference);
+        this.fMediator = fMediator;
+        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
     }
-    drawIntersectingLines(difference) {
-        const intersect = this.findNearestCoordinate(difference);
-        if (intersect.xResult.value !== undefined) {
-            this.lineService.drawVerticalLine(intersect.xResult.value, this.size, this.transform);
-        }
-        else {
-            this.lineService.hideVerticalLine();
+    handle(event) {
+        const node = this.fComponentsStore.findNode(event.targetElement);
+        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
+        if (!node || this.fDraggableDataContext.draggableItems.length || !this.fComponentsStore.fTempConnection) {
+            return;
         }
-        if (intersect.yResult.value !== undefined) {
-            this.lineService.drawHorizontalLine(intersect.yResult.value, this.size, this.transform);
+        if (isNodeOutlet(event.targetElement)) {
+            const outlet = this.fComponentsStore.fOutlets.find((x) => {
+                return x.hostElement.contains(event.targetElement);
+            });
+            if (!outlet) {
+                throw new Error('Outlet not found');
+            }
+            const nodeOutputs = this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
+            outlet.setOutputs(nodeOutputs);
+            if (outlet.canBeConnected) {
+                const outletCenter = this.getElementRectInFlowHandler.handle(outlet.hostElement).gravityCenter;
+                if (outlet.isConnectionFromOutlet) {
+                    this.createConnectionHandler(pointerPositionInFlow, outlet, outletCenter);
+                }
+                else {
+                    const output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(outlet);
+                    if (!output) {
+                        throw new Error('Output not found');
+                    }
+                    this.createConnectionHandler(pointerPositionInFlow, output, outletCenter);
+                }
+            }
         }
-        else {
-            this.lineService.hideHorizontalLine();
+        else if (this.isNodeOutput(event.targetElement, node)) {
+            const output = this.fComponentsStore.fOutputs.find((x) => {
+                return x.hostElement.contains(event.targetElement);
+            });
+            if (!output) {
+                throw new Error('Output not found');
+            }
+            if (output.canBeConnected) {
+                const outputCenter = this.getElementRectInFlowHandler.handle(output.hostElement).gravityCenter;
+                this.createConnectionHandler(pointerPositionInFlow, output, outputCenter);
+            }
         }
     }
-    findNearestCoordinate(difference) {
-        const rect = RectExtensions.addPoint(this.draggedNodeRect, difference);
-        const finder = new NearestCoordinateFinder(this.rects, rect);
-        const xResult = finder.findNearestCoordinateByX();
-        const yResult = finder.findNearestCoordinateByY();
-        const result = { xResult, yResult };
-        return result;
+    createConnectionHandler(pointerPositionInCanvas, output, outputCenter) {
+        this.fComponentsStore.fTempConnection.fOutputId = output.id;
+        this.fComponentsStore.fTempConnection.initialize();
+        this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
+        this.fDraggableDataContext.onPointerDownPosition = pointerPositionInCanvas.div(this.transform.scale);
+        this.fDraggableDataContext.draggableItems = [
+            new CreateConnectionDragHandler(this.fMediator, this.fComponentsStore.fTempConnection, outputCenter)
+        ];
     }
-    complete() {
-        this.lineService.hideVerticalLine();
-        this.lineService.hideHorizontalLine();
+    isNodeOutput(targetElement, node) {
+        const outlets = this.fComponentsStore.fOutlets.filter((x) => node.isContains(x.hostElement));
+        return isNodeOutput(targetElement) && !outlets.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FLineAlignmentComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FLineAlignmentComponent, selector: "f-line-alignment", host: { classAttribute: "f-line-alignment f-component" }, providers: [
-            { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
-        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "", isInline: true, styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FLineAlignmentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "f-line-alignment", template: "", exportAs: "fComponent", host: {
-                        'class': 'f-line-alignment f-component'
-                    }, providers: [
-                        { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
-                    ], styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
-
-const F_SELECTION_AREA = new InjectionToken('F_SELECTION_AREA');
-class FSelectionAreaBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FSelectionAreaBase, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: FFlowMediator }, { token: FindFirstCanBeConnectedOutputByOutletHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FSelectionAreaBase, decorators: [{
-            type: Directive
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionPrepareDragSequence, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: FFlowMediator }, { type: FindFirstCanBeConnectedOutputByOutletHandler }] });
 
-class FSelectionAreaComponent extends FSelectionAreaBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference, fDraggableDataContext) {
-        super();
-        this.elementReference = elementReference;
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    ngOnInit() {
-        this.fDraggableDataContext.fSelectionArea = this;
-        this.hostElement.style.display = 'none';
+class ReassignConnectionDragHandler {
+    constructor(getInputRectInFlowHandler, fMediator, connection) {
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.fMediator = fMediator;
+        this.connection = connection;
+        this.type = EFDraggableType.REASSIGN_CONNECTION;
+        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
+        this.onPointerDownToConnectorRect = RectExtensions.initialize();
+        this.outputSide = EFConnectableSide.BOTTOM;
+        this.inputSide = EFConnectableSide.TOP;
     }
-    hide() {
-        this.hostElement.style.display = 'none';
+    initialize() {
+        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
+        this.inputSide = this.getInputRectInFlowHandler.handle(this.connection.fInputId).fConnectableSide;
+        this.outputSide = fromConnector.fConnectableSide;
+        this.onPointerDownFromConnectorRect = fromConnector.rect;
+        this.onPointerDownToConnectorRect = RectExtensions.initialize(this.connection.vector.point2.x, this.connection.vector.point2.y, 0, 0);
     }
-    show() {
-        this.hostElement.style.display = 'block';
+    move(difference) {
+        const toRect = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
+        const vector = this.fMediator.send(new GetConnectionVectorRequest(this.onPointerDownFromConnectorRect, toRect, this.connection.fBehavior, this.outputSide, this.inputSide));
+        this.connection.setVector(vector.point1, this.outputSide, vector.point2, this.inputSide);
+        this.connection.redraw();
     }
-    draw(object) {
-        const style = this.hostElement.style;
-        style.left = object.left + 'px';
-        style.top = object.top + 'px';
-        style.width = object.width + 'px';
-        style.height = object.height + 'px';
+    complete() {
+        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
+        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.fInputId);
+        const vector = this.fMediator.send(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.fBehavior, fromConnector.fConnectableSide, toConnector.fConnectableSide));
+        this.connection.setVector(vector.point1, fromConnector.fConnectableSide, vector.point2, toConnector.fConnectableSide);
+        this.connection.redraw();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
-            { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
-        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "f-selection-area", template: ``, host: {
-                        'class': 'f-selection-area f-component'
-                    }, providers: [
-                        { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
-                    ], styles: [":host{position:absolute}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }] });
 
-class FindFirstCanBeConnectedOutputByOutletHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
+class FReassignConnectionEvent {
+    constructor(connectionId, fOutputId, oldFInputId, newFInputId) {
+        this.connectionId = connectionId;
+        this.fOutputId = fOutputId;
+        this.oldFInputId = oldFInputId;
+        this.newFInputId = newFInputId;
     }
-    get fOutputs() {
-        return this.fComponentsStore.fOutputs;
+}
+
+class ReassignConnectionOnPointerUp {
+    get fDraggable() {
+        return this.fComponentsStore.fDraggable;
     }
-    constructor(fComponentsStore) {
+    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler) {
         this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
     }
-    handle(outlet) {
-        let result;
-        const node = this.fNodes.find((x) => x.isContains(outlet.hostElement));
-        if (!node) {
-            throw new Error('Node not found');
-        }
-        const outputsOfNode = this.fOutputs.filter((x) => {
-            return node.isContains(x.hostElement) && x.canBeConnected;
-        });
-        if (outputsOfNode.length > 0) {
-            result = outputsOfNode[0];
+    handle(event) {
+        const isReassignConnection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.REASSIGN_CONNECTION);
+        if (isReassignConnection) {
+            const handler = this.fDraggableDataContext.draggableItems[0];
+            const inputsUnderPointer = this.findInputsUnderPointerHandler.handle(new FindInputsUnderPointerRequest(event, handler));
+            if (inputsUnderPointer.length > 0) {
+                if (handler.connection.fInputId !== inputsUnderPointer[0]?.id) {
+                    this.fDraggable.fReassignConnection.emit(new FReassignConnectionEvent(handler.connection.fConnectionId, handler.connection.fOutputId, handler.connection.fInputId, inputsUnderPointer[0]?.id));
+                }
+            }
+            handler.complete();
         }
-        return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FindInputsUnderPointerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }] });
 
-class CreateConnectionDragHandler {
-    constructor(getOutputRectInFlowHandler, getConnectionVectorHandler, connection, mouseDownPoint) {
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.connection = connection;
-        this.mouseDownPoint = mouseDownPoint;
-        this.type = EFDraggableType.CREATE_CONNECTION;
-        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
-        this.onPointerDownToConnectorRect = RectExtensions.initialize();
-        this.outputSide = EFConnectableSide.BOTTOM;
+class ReassignConnectionPrepareDragSequence {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    initialize() {
-        const outputRect = this.getOutputRectInFlowHandler.handle(this.connection.fOutputId);
-        this.outputSide = outputRect.fConnectableSide;
-        this.onPointerDownFromConnectorRect = outputRect.rect;
-        this.onPointerDownToConnectorRect = RectExtensions.initialize(this.mouseDownPoint.x, this.mouseDownPoint.y, 0, 0);
-        this.connection.show();
-        this.move(new Point(0, 0));
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    move(difference) {
-        const toPoint = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(this.onPointerDownFromConnectorRect, toPoint, this.connection.fBehavior, this.outputSide, EFConnectableSide.TOP));
-        this.connection.setVector(vector.point1, this.outputSide, vector.point2, EFConnectableSide.TOP);
-        this.connection.redraw();
+    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, getInputRectInFlowHandler, fMediator, updateConnectionLayerHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.getConnectionHandler = getConnectionHandler;
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.fMediator = fMediator;
+        this.updateConnectionLayerHandler = updateConnectionLayerHandler;
     }
-    complete() {
-        this.connection.redraw();
-        this.connection.hide();
+    handle(event) {
+        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
+        const position = event.getPosition();
+        const allElements = document.elementsFromPoint(position.x, position.y);
+        const dragHandlesOfConnections = allElements.filter((x) => {
+            return !!this.getConnectionHandler.handle(x) && x.classList.contains(F_CONNECTION_DRAG_HANDLE_CLASS);
+        });
+        let connectionToReassign;
+        if (dragHandlesOfConnections.length) {
+            const connections = dragHandlesOfConnections.map((x) => this.getConnectionHandler.handle(x)).filter((x) => !x?.disabled);
+            if (connections.length) {
+                connectionToReassign = this.getConnectionHandler.handle(dragHandlesOfConnections[0]);
+            }
+        }
+        if (connectionToReassign && !this.fDraggableDataContext.draggableItems.length) {
+            this.updateConnectionLayerHandler.handle(connectionToReassign);
+            this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
+            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(this.transform.scale);
+            this.fDraggableDataContext.draggableItems = [
+                new ReassignConnectionDragHandler(this.getInputRectInFlowHandler, this.fMediator, connectionToReassign)
+            ];
+        }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: GetInputRectInFlowHandler }, { token: FFlowMediator }, { token: UpdateConnectionLayerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: FFlowMediator }, { type: UpdateConnectionLayerHandler }] });
+
+const CONNECTIONS_PROVIDERS = [
+    FindFirstCanBeConnectedOutputByOutletHandler,
+    CreateConnectionOnPointerUp,
+    CreateConnectionPrepareDragSequence,
+    FirstNotConnectedInputOfNodeUnderPointerHandler,
+    InputsUnderPointerHandler,
+    FindInputsUnderPointerHandler,
+    ReassignConnectionOnPointerUp,
+    ReassignConnectionPrepareDragSequence
+];
 
-class CreateConnectionEvent {
-    constructor(outputId, inputId) {
-        this.outputId = outputId;
-        this.inputId = inputId;
+class FCreateNodeEvent {
+    constructor(rect, data) {
+        this.rect = rect;
+        this.data = data;
     }
 }
 
-class FirstNotConnectedInputOfNodeUnderPointerHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
+class ExternalItemDragHandler {
+    constructor(externalItem) {
+        this.externalItem = externalItem;
+        this.type = EFDraggableType.PALETTE_ITEM;
+        this.onPointerDownRect = RectExtensions.initialize();
+        this.difference = PointExtensions.initialize();
     }
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
+    getStyle(position) {
+        return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
     }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
+    initialize() {
+        this.onPointerDownRect = this.getExternalItemRect();
+        this.placeholder = DomElementExtensions.deepCloneNode(this.externalItem.hostElement);
+        document.body.appendChild(this.placeholder);
     }
-    handle(event) {
-        const position = event.getPosition();
-        const elementsFromPoint = document.elementsFromPoint(position.x, position.y);
-        const nodes = elementsFromPoint.map((element) => {
-            return this.fNodes.find((x) => x.isContains(element));
-        }).filter((x) => !!x);
-        const inputs = nodes.map((x) => {
-            return this.fInputs.filter((i) => x.isContains(i.hostElement)).find((i) => {
-                return !i.isConnected && i.canBeConnected;
-            });
-        });
-        const result = inputs.find((x) => !!x);
-        return result;
+    getExternalItemRect() {
+        const rect = this.externalItem.hostElement.getBoundingClientRect();
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        const offsetTop = rect.top + scrollTop;
+        const offsetLeft = rect.left + scrollLeft;
+        return RectExtensions.initialize(offsetLeft, offsetTop, rect.width, rect.height);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
-class InputsUnderPointerHandler {
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
+    move(difference) {
+        this.difference = difference;
+        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
+        this.placeholder.setAttribute('style', this.getStyle(position));
     }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
+    getPlaceholderRect() {
+        return RectExtensions.fromElement(this.placeholder);
     }
-    handle(event) {
-        const position = event.getPosition();
-        const elementsFromPoint = document.elementsFromPoint(position.x, position.y);
-        return elementsFromPoint.filter((x) => isNodeInput(x)).map((element) => {
-            return this.fInputs.find((x) => x.isContains(element));
-        }).filter((x) => !!x);
+    complete() {
+        document.body.removeChild(this.placeholder);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputsUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputsUnderPointerHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputsUnderPointerHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class FindInputsUnderPointerRequest {
-    constructor(event, dragHandler) {
-        this.event = event;
-        this.dragHandler = dragHandler;
-    }
+const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
+class FExternalItemBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FExternalItemBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemBase, decorators: [{
+            type: Directive
+        }] });
+
+function isExternalItem(element) {
+    return !!element.closest('[fExternalItem]');
+}
+function getExternalItem(element) {
+    return element.closest('[fExternalItem]');
 }
 
-class FindInputsUnderPointerHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
+class FExternalItemService {
+    constructor() {
+        this.items = [];
     }
-    constructor(fComponentsStore, inputsUnderPointerHandler, firstNotConnectedInputOfNodeUnderPointerHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.inputsUnderPointerHandler = inputsUnderPointerHandler;
-        this.firstNotConnectedInputOfNodeUnderPointerHandler = firstNotConnectedInputOfNodeUnderPointerHandler;
+    registerItem(item) {
+        this.items.push(item);
     }
-    handle(payload) {
-        const inputsUnderPointer = this.getInputsUnderPointer(payload);
-        const output = this.fComponentsStore.fOutputs.find((x) => x.id === payload.dragHandler.connection.fOutputId);
-        if (!output) {
-            throw OutputNotFound(payload.dragHandler.connection.fOutputId);
-        }
-        return inputsUnderPointer.filter((x) => {
-            const targetNode = this.fNodes.find((y) => y.isContains(x.hostElement));
-            const sourceNode = this.fNodes.find((y) => y.isContains(output.hostElement));
-            return sourceNode?.hostElement !== targetNode?.hostElement;
-        });
+    getItem(element) {
+        return this.items.find(item => item.hostElement === element);
     }
-    getInputsUnderPointer(payload) {
-        let inputs = this.inputsUnderPointerHandler.handle(payload.event);
-        const input = this.firstNotConnectedInputOfNodeUnderPointerHandler.handle(payload.event);
-        if (input) {
-            inputs.push(input);
+    removeItem(item) {
+        const index = this.items.indexOf(item);
+        if (index !== -1) {
+            this.items.splice(index, 1);
         }
-        inputs = inputs.filter((x) => x.canBeConnected);
-        return inputs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindInputsUnderPointerHandler, deps: [{ token: FComponentsStore }, { token: InputsUnderPointerHandler }, { token: FirstNotConnectedInputOfNodeUnderPointerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindInputsUnderPointerHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindInputsUnderPointerHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: InputsUnderPointerHandler }, { type: FirstNotConnectedInputOfNodeUnderPointerHandler }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
-class CreateConnectionOnPointerUp {
-    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler, findFirstCanBeConnectedOutputByOutletHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
-        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
+let uniqueId$1 = 0;
+class FExternalItemDirective extends FExternalItemBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
     }
-    handle(event) {
-        const isCreateConnection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.CREATE_CONNECTION);
-        if (isCreateConnection) {
-            const handler = this.fDraggableDataContext.draggableItems[0];
-            const inputsUnderPointer = this.findInputsUnderPointerHandler.handle(new FindInputsUnderPointerRequest(event, handler));
-            if (inputsUnderPointer.length > 0) {
-                let output = this.fComponentsStore.fOutputs.find((x) => x.id === handler.connection.fOutputId);
-                if (!output) {
-                    output = this.fComponentsStore.fOutlets.find((x) => x.id === handler.connection.fOutputId);
-                }
-                if (!output) {
-                    throw OutputNotFound(handler.connection.fOutputId);
-                }
-                const isOutlet = isNodeOutlet(output.hostElement);
-                if (isOutlet) {
-                    output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(output);
-                    if (!output) {
-                        throw requiredOutput();
-                    }
-                }
-                this.fComponentsStore.fDraggable?.fCreateConnection.emit(new CreateConnectionEvent(output.id, inputsUnderPointer[0]?.id));
-            }
-            handler.complete();
-        }
+    constructor(elementReference, fExternalItemService) {
+        super();
+        this.elementReference = elementReference;
+        this.fExternalItemService = fExternalItemService;
+        this.id = `f-external-item-${uniqueId$1++}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FindInputsUnderPointerHandler }, { token: FindFirstCanBeConnectedOutputByOutletHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionOnPointerUp }); }
+    ngOnInit() {
+        this.fExternalItemService.registerItem(this);
+    }
+    ngOnDestroy() {
+        this.fExternalItemService.removeItem(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemDirective, deps: [{ token: i0.ElementRef }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { id: "id", data: "data" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-external-item" }, providers: [
+            { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
+        ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionOnPointerUp, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fExternalItem]",
+                    host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-external-item",
+                    },
+                    providers: [
+                        { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FExternalItemService }], propDecorators: { id: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
 
-class CreateConnectionPrepareDragSequence {
+class ExternalItemPrepareDragSequence {
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, getConnectionVectorHandler, findFirstCanBeConnectedOutputByOutletHandler, getOutputRectInFlowHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, fExternalItemService) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
+        this.fExternalItemService = fExternalItemService;
     }
     handle(event) {
-        const node = this.fComponentsStore.findNode(event.targetElement);
-        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
-        if (!node || this.fDraggableDataContext.draggableItems.length || !this.fComponentsStore.fTempConnection) {
-            return;
-        }
-        if (isNodeOutlet(event.targetElement)) {
-            const outlet = this.fComponentsStore.fOutlets.find((x) => {
-                return x.hostElement.contains(event.targetElement);
-            });
-            if (!outlet) {
-                throw new Error('Outlet not found');
-            }
-            const nodeOutputs = this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
-            outlet.setOutputs(nodeOutputs);
-            if (outlet.canBeConnected) {
-                const outletCenter = this.getElementRectInFlowHandler.handle(outlet.hostElement).gravityCenter;
-                if (outlet.isConnectionFromOutlet) {
-                    this.createConnectionHandler(pointerPositionInFlow, outlet, outletCenter);
-                }
-                else {
-                    const output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(outlet);
-                    if (!output) {
-                        throw new Error('Output not found');
-                    }
-                    this.createConnectionHandler(pointerPositionInFlow, output, outletCenter);
-                }
-            }
-        }
-        else if (this.isNodeOutput(event.targetElement, node)) {
-            const output = this.fComponentsStore.fOutputs.find((x) => {
-                return x.hostElement.contains(event.targetElement);
-            });
-            if (!output) {
-                throw new Error('Output not found');
-            }
-            if (output.canBeConnected) {
-                const outputCenter = this.getElementRectInFlowHandler.handle(output.hostElement).gravityCenter;
-                this.createConnectionHandler(pointerPositionInFlow, output, outputCenter);
+        if (isExternalItem(event.targetElement)) {
+            const item = this.fExternalItemService.getItem(getExternalItem(event.targetElement));
+            if (!item) {
+                throw new Error('External item not found');
             }
+            const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
+            this.fDraggableDataContext.onPointerDownScale = 1;
+            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(1);
+            this.fDraggableDataContext.draggableItems = [
+                new ExternalItemDragHandler(item)
+            ];
         }
     }
-    createConnectionHandler(pointerPositionInCanvas, output, outputCenter) {
-        this.fComponentsStore.fTempConnection.fOutputId = output.id;
-        this.fComponentsStore.fTempConnection.initialize();
-        this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
-        this.fDraggableDataContext.onPointerDownPosition = pointerPositionInCanvas.div(this.transform.scale);
-        this.fDraggableDataContext.draggableItems = [
-            new CreateConnectionDragHandler(this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, this.fComponentsStore.fTempConnection, outputCenter)
-        ];
-    }
-    isNodeOutput(targetElement, node) {
-        const outlets = this.fComponentsStore.fOutlets.filter((x) => node.isContains(x.hostElement));
-        return isNodeOutput(targetElement) && !outlets.length;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: GetConnectionVectorHandler }, { token: FindFirstCanBeConnectedOutputByOutletHandler }, { token: GetOutputRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionPrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetConnectionVectorHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }, { type: GetOutputRectInFlowHandler }] });
-
-class ReassignConnectionDragHandler {
-    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.connection = connection;
-        this.type = EFDraggableType.REASSIGN_CONNECTION;
-        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
-        this.onPointerDownToConnectorRect = RectExtensions.initialize();
-        this.outputSide = EFConnectableSide.BOTTOM;
-        this.inputSide = EFConnectableSide.TOP;
-    }
-    initialize() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.fOutputId);
-        this.inputSide = this.getInputRectInFlowHandler.handle(this.connection.fInputId).fConnectableSide;
-        this.outputSide = fromConnector.fConnectableSide;
-        this.onPointerDownFromConnectorRect = fromConnector.rect;
-        this.onPointerDownToConnectorRect = RectExtensions.initialize(this.connection.vector.point2.x, this.connection.vector.point2.y, 0, 0);
-    }
-    move(difference) {
-        const toRect = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(this.onPointerDownFromConnectorRect, toRect, this.connection.fBehavior, this.outputSide, this.inputSide));
-        this.connection.setVector(vector.point1, this.outputSide, vector.point2, this.inputSide);
-        this.connection.redraw();
-    }
-    complete() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.fOutputId);
-        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.fInputId);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.fBehavior, fromConnector.fConnectableSide, toConnector.fConnectableSide));
-        this.connection.setVector(vector.point1, fromConnector.fConnectableSide, vector.point2, toConnector.fConnectableSide);
-        this.connection.redraw();
-    }
-}
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
 
-class ReassignConnectionEvent {
-    constructor(connectionId, outputId, oldInputId, newInputId) {
-        this.connectionId = connectionId;
-        this.outputId = outputId;
-        this.oldInputId = oldInputId;
-        this.newInputId = newInputId;
+class ExternalItemOnPointerUp {
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-}
-
-class ReassignConnectionOnPointerUp {
-    get fDraggable() {
-        return this.fComponentsStore.fDraggable;
+    get fCreateNode() {
+        return this.fComponentsStore.fDraggable.fCreateNode;
     }
-    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
     }
     handle(event) {
-        const isReassignConnection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.REASSIGN_CONNECTION);
-        if (isReassignConnection) {
-            const handler = this.fDraggableDataContext.draggableItems[0];
-            const inputsUnderPointer = this.findInputsUnderPointerHandler.handle(new FindInputsUnderPointerRequest(event, handler));
-            if (inputsUnderPointer.length > 0) {
-                if (handler.connection.fInputId !== inputsUnderPointer[0]?.id) {
-                    this.fDraggable.fReassignConnection.emit(new ReassignConnectionEvent(handler.connection.id, handler.connection.fOutputId, handler.connection.fInputId, inputsUnderPointer[0]?.id));
-                }
+        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
+        let difference = pointerPositionInFlow.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
+        const isDragPaletteItem = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.PALETTE_ITEM);
+        if (isDragPaletteItem) {
+            const dragHandler = this.fDraggableDataContext.draggableItems[0];
+            dragHandler.move(difference);
+            const isPointerInCanvasRect = document.elementsFromPoint(event.getPosition().x, event.getPosition().y).some((x) => x === this.flowHost);
+            if (isPointerInCanvasRect) {
+                const rectInCanvas = this.getElementRectInFlowHandler.handle(dragHandler.placeholder);
+                this.fCreateNode.emit(new FCreateNodeEvent(rectInCanvas, dragHandler.externalItem.data));
             }
-            handler.complete();
+            dragHandler.complete();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FindInputsUnderPointerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
-class ReassignConnectionPrepareDragSequence {
+const EXTERNAL_ITEM_PROVIDERS = [
+    ExternalItemOnPointerUp,
+    ExternalItemPrepareDragSequence
+];
+
+class IsConnectionUnderNodeHandler {
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, updateConnectionLayerHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.getConnectionHandler = getConnectionHandler;
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.updateConnectionLayerHandler = updateConnectionLayerHandler;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
+        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
     }
-    handle(event) {
-        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
-        const position = event.getPosition();
-        const allElements = document.elementsFromPoint(position.x, position.y);
-        const dragHandlesOfConnections = allElements.filter((x) => {
-            return !!this.getConnectionHandler.handle(x) && x.classList.contains(F_CONNECTION_DRAG_HANDLE_CLASS);
+    handle() {
+        const isValid = this.isValidRequest();
+        if (!isValid) {
+            return;
+        }
+        const fNode = this.fDraggableDataContext.draggableItems[0].fNode;
+        const outputsOfNode = this.getOutputsForNode(fNode);
+        const inputsOfNode = this.getInputsForNode(fNode);
+        const isCantBeConnectedByOutput = outputsOfNode.some((x) => !x.canBeConnected);
+        const isCantBeConnectedByInput = this.fComponentsStore.fConnections.some((x) => {
+            return inputsOfNode.find((input) => input.id === x.fInputId);
         });
-        let connectionToReassign;
-        if (dragHandlesOfConnections.length) {
-            const connections = dragHandlesOfConnections.map((x) => this.getConnectionHandler.handle(x)).filter((x) => !x?.disabled);
-            if (connections.length) {
-                connectionToReassign = this.getConnectionHandler.handle(dragHandlesOfConnections[0]);
-            }
-        }
-        if (connectionToReassign && !this.fDraggableDataContext.draggableItems.length) {
-            this.updateConnectionLayerHandler.handle(connectionToReassign);
-            this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
-            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(this.transform.scale);
-            this.fDraggableDataContext.draggableItems = [
-                new ReassignConnectionDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, connectionToReassign)
-            ];
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetConnectionVectorHandler }, { token: UpdateConnectionLayerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetConnectionVectorHandler }, { type: UpdateConnectionLayerHandler }] });
-
-const CONNECTIONS_PROVIDERS = [
-    FindFirstCanBeConnectedOutputByOutletHandler,
-    CreateConnectionOnPointerUp,
-    CreateConnectionPrepareDragSequence,
-    FirstNotConnectedInputOfNodeUnderPointerHandler,
-    InputsUnderPointerHandler,
-    FindInputsUnderPointerHandler,
-    ReassignConnectionOnPointerUp,
-    ReassignConnectionPrepareDragSequence
-];
-
-class CreateNodeEvent {
-    constructor(rect, data) {
-        this.rect = rect;
-        this.data = data;
-    }
-}
-
-class ExternalItemDragHandler {
-    constructor(externalItem) {
-        this.externalItem = externalItem;
-        this.type = EFDraggableType.PALETTE_ITEM;
-        this.onPointerDownRect = RectExtensions.initialize();
-        this.difference = PointExtensions.initialize();
-    }
-    getStyle(position) {
-        return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
-    }
-    initialize() {
-        this.onPointerDownRect = this.getExternalItemRect();
-        this.placeholder = DomElementExtensions.deepCloneNode(this.externalItem.hostElement);
-        document.body.appendChild(this.placeholder);
-    }
-    getExternalItemRect() {
-        const rect = this.externalItem.hostElement.getBoundingClientRect();
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-        const offsetTop = rect.top + scrollTop;
-        const offsetLeft = rect.left + scrollLeft;
-        return RectExtensions.initialize(offsetLeft, offsetTop, rect.width, rect.height);
-    }
-    move(difference) {
-        this.difference = difference;
-        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
-        this.placeholder.setAttribute('style', this.getStyle(position));
-    }
-    getPlaceholderRect() {
-        return RectExtensions.fromElement(this.placeholder);
-    }
-    complete() {
-        document.body.removeChild(this.placeholder);
-    }
-}
-
-class ExternalItemPrepareDragSequence {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, fExternalItemService) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fExternalItemService = fExternalItemService;
-    }
-    handle(event) {
-        if (isExternalItem(event.targetElement)) {
-            const item = this.fExternalItemService.getItem(getExternalItem(event.targetElement));
-            if (!item) {
-                throw new Error('External item not found');
-            }
-            const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
-            this.fDraggableDataContext.onPointerDownScale = 1;
-            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(1);
-            this.fDraggableDataContext.draggableItems = [
-                new ExternalItemDragHandler(item)
-            ];
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemPrepareDragSequence }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemPrepareDragSequence, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
-
-class ExternalItemOnPointerUp {
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    get fCreateNode() {
-        return this.fComponentsStore.fDraggable.fCreateNode;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-    }
-    handle(event) {
-        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
-        let difference = pointerPositionInFlow.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
-        const isDragPaletteItem = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.PALETTE_ITEM);
-        if (isDragPaletteItem) {
-            const dragHandler = this.fDraggableDataContext.draggableItems[0];
-            dragHandler.move(difference);
-            const isPointerInCanvasRect = document.elementsFromPoint(event.getPosition().x, event.getPosition().y).some((x) => x === this.flowHost);
-            if (isPointerInCanvasRect) {
-                const rectInCanvas = this.getElementRectInFlowHandler.handle(dragHandler.placeholder);
-                this.fCreateNode.emit(new CreateNodeEvent(rectInCanvas, dragHandler.externalItem.data));
-            }
-            dragHandler.complete();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemOnPointerUp }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemOnPointerUp, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
-
-const EXTERNAL_ITEM_PROVIDERS = [
-    ExternalItemOnPointerUp,
-    ExternalItemPrepareDragSequence
-];
-
-class IsConnectionUnderNodeHandler {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
-        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
-    }
-    handle() {
-        const isValid = this.isValidRequest();
-        if (!isValid) {
-            return;
-        }
-        const fNode = this.fDraggableDataContext.draggableItems[0].fNode;
-        const outputsOfNode = this.getOutputsForNode(fNode);
-        const inputsOfNode = this.getInputsForNode(fNode);
-        const isCantBeConnectedByOutput = outputsOfNode.some((x) => !x.canBeConnected);
-        const isCantBeConnectedByInput = this.fComponentsStore.fConnections.some((x) => {
-            return inputsOfNode.find((input) => input.id === x.fInputId);
-        });
-        if (!isCantBeConnectedByInput && outputsOfNode.length && !isCantBeConnectedByOutput && inputsOfNode.length) {
-            const output = outputsOfNode[0];
-            const input = inputsOfNode[0];
-            const outgoingConnections = this.getOutgoingConnectionsHandler.handle([output]);
-            const incomingConnections = this.getIncomingConnectionsHandler.handle([input]);
-            if (outgoingConnections.length === 0 && incomingConnections.length === 0) {
-                const connections = this.findConnectionsUnderNode(fNode);
-                if (connections.length) {
-                }
+        if (!isCantBeConnectedByInput && outputsOfNode.length && !isCantBeConnectedByOutput && inputsOfNode.length) {
+            const output = outputsOfNode[0];
+            const input = inputsOfNode[0];
+            const outgoingConnections = this.getOutgoingConnectionsHandler.handle([output]);
+            const incomingConnections = this.getIncomingConnectionsHandler.handle([input]);
+            if (outgoingConnections.length === 0 && incomingConnections.length === 0) {
+                const connections = this.findConnectionsUnderNode(fNode);
+                if (connections.length) {
+                }
             }
         }
     }
@@ -3458,10 +3174,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }] });
 
 class ConnectionDragHandler {
-    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
+    constructor(getInputRectInFlowHandler, fMediator, connection) {
         this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.fMediator = fMediator;
         this.connection = connection;
         this.type = EFDraggableType.CONNECTION;
         this.onPointerDownVector = VectorExtensions.initialize();
@@ -3469,11 +3184,11 @@ class ConnectionDragHandler {
         this.toConnectorSide = EFConnectableSide.TOP;
     }
     initialize() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.fOutputId);
+        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
         this.fromConnectorSide = fromConnector.fConnectableSide;
         const toConnector = this.getInputRectInFlowHandler.handle(this.connection.fInputId);
         this.toConnectorSide = toConnector.fConnectableSide;
-        this.onPointerDownVector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.fBehavior, fromConnector.fConnectableSide, toConnector.fConnectableSide));
+        this.onPointerDownVector = this.fMediator.send(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.fBehavior, fromConnector.fConnectableSide, toConnector.fConnectableSide));
     }
     move(difference) {
         const fromPoint = Point.fromPoint(this.onPointerDownVector.point1).add(difference);
@@ -3484,10 +3199,9 @@ class ConnectionDragHandler {
 }
 
 class ConnectionSourceDragHandler {
-    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
+    constructor(getInputRectInFlowHandler, fMediator, connection) {
         this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.fMediator = fMediator;
         this.connection = connection;
         this.type = EFDraggableType.CONNECTION;
         this.fromConnectorRect = RectExtensions.initialize();
@@ -3496,7 +3210,7 @@ class ConnectionSourceDragHandler {
         this.toConnectorSide = EFConnectableSide.TOP;
     }
     initialize() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.fOutputId);
+        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
         this.fromConnectorRect = fromConnector.rect;
         this.fromConnectorSide = fromConnector.fConnectableSide;
         const toConnector = this.getInputRectInFlowHandler.handle(this.connection.fInputId);
@@ -3505,17 +3219,16 @@ class ConnectionSourceDragHandler {
     }
     move(difference) {
         const fromConnectorRect = RectExtensions.addPoint(this.fromConnectorRect, difference);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(fromConnectorRect, this.toConnectorRect, this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
+        const vector = this.fMediator.send(new GetConnectionVectorRequest(fromConnectorRect, this.toConnectorRect, this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
         this.connection.setVector(vector.point1, this.fromConnectorSide, vector.point2, this.toConnectorSide);
         this.connection.redraw();
     }
 }
 
 class ConnectionTargetDragHandler {
-    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
+    constructor(getInputRectInFlowHandler, fMediator, connection) {
         this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.fMediator = fMediator;
         this.connection = connection;
         this.type = EFDraggableType.CONNECTION;
         this.fromConnectorRect = RectExtensions.initialize();
@@ -3524,7 +3237,7 @@ class ConnectionTargetDragHandler {
         this.toConnectorSide = EFConnectableSide.TOP;
     }
     initialize() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.fOutputId);
+        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
         this.fromConnectorRect = fromConnector.rect;
         this.fromConnectorSide = fromConnector.fConnectableSide;
         const toConnector = this.getInputRectInFlowHandler.handle(this.connection.fInputId);
@@ -3533,7 +3246,7 @@ class ConnectionTargetDragHandler {
     }
     move(difference) {
         const toConnectorRect = RectExtensions.addPoint(this.toConnectorRect, difference);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(this.fromConnectorRect, toConnectorRect, this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
+        const vector = this.fMediator.send(new GetConnectionVectorRequest(this.fromConnectorRect, toConnectorRect, this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
         this.connection.setVector(vector.point1, this.fromConnectorSide, vector.point2, this.toConnectorSide);
         this.connection.redraw();
     }
@@ -3602,15 +3315,14 @@ class NodePrepareDragSequence {
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext, updateNodeLayerHandler, getInputRectInFlowHandler, getOutputRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, getConnectionVectorHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, updateNodeLayerHandler, getInputRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.updateNodeLayerHandler = updateNodeLayerHandler;
         this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
         this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
         this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.fMediator = fMediator;
     }
     handle(event) {
         const node = this.fComponentsStore.findNode(event.targetElement);
@@ -3651,22 +3363,22 @@ class NodePrepareDragSequence {
             const outputConnections = this.getOutgoingConnectionsHandler.handle(this.getOutputsForNode(nodeHandler.fNode));
             outputConnections.forEach((c) => {
                 if (allInputIds.includes(c.fInputId)) {
-                    itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
+                    itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
                 }
                 else {
-                    itemsToDrag.push(new ConnectionSourceDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
+                    itemsToDrag.push(new ConnectionSourceDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
                 }
             });
             const inputConnections = this.getIncomingConnectionsHandler.handle(this.getInputsForNode(nodeHandler.fNode));
             inputConnections.forEach((c) => {
                 if (allOutputIds.includes(c.fOutputId)) {
-                    const index = itemsToDrag.findIndex((x) => x.type === EFDraggableType.CONNECTION && x.connection.id === c.id);
+                    const index = itemsToDrag.findIndex((x) => x.type === EFDraggableType.CONNECTION && x.connection.fConnectionId === c.fConnectionId);
                     if (index !== -1) {
-                        itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
+                        itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
                     }
                 }
                 else {
-                    itemsToDrag.push(new ConnectionTargetDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
+                    itemsToDrag.push(new ConnectionTargetDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
                 }
             });
         });
@@ -3678,12 +3390,12 @@ class NodePrepareDragSequence {
     getOutputsForNode(node) {
         return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NodePrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: UpdateNodeLayerHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NodePrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: UpdateNodeLayerHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NodePrepareDragSequence }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NodePrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: UpdateNodeLayerHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: GetConnectionVectorHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: UpdateNodeLayerHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: FFlowMediator }] });
 
 const NODE_PROVIDERS = [
     NodeOnPointerUp,
@@ -3915,7 +3627,7 @@ const SINGLE_SELECT_PROVIDERS = [
     SingleSelectOnPointerDown
 ];
 
-class SelectionChangeEvent {
+class FSelectionChangeEvent {
     constructor(nodes, connections) {
         this.nodes = nodes;
         this.connections = connections;
@@ -4068,176 +3780,429 @@ function isFakeTouchstartFromScreenReader(event) {
         (touch.radiusY == null || touch.radiusY === 1));
 }
 
-const F_DRAGGABLE = new InjectionToken('F_DRAGGABLE');
-class FDraggableBase extends IDragAndDropBase {
-    constructor(ngZone) {
-        super(ngZone);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FDraggableBase, usesInheritance: true, ngImport: i0 }); }
+const F_DRAGGABLE = new InjectionToken('F_DRAGGABLE');
+class FDraggableBase extends IDragAndDropBase {
+    constructor(ngZone) {
+        super(ngZone);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FDraggableBase, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+class FDraggableDirective extends FDraggableBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, fDraggableDataContext, ngZone, injector, fComponentsStore, document) {
+        super(ngZone);
+        this.elementReference = elementReference;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.injector = injector;
+        this.fComponentsStore = fComponentsStore;
+        this.subscriptions$ = new Subscription();
+        this.disabled = false;
+        this.fSelectionChange = new EventEmitter();
+        // @Output()
+        // public override fConnectionIntersectNode: EventEmitter<ConnectionIntersectNodeEvent> = new EventEmitter<ConnectionIntersectNodeEvent>();
+        this.fCreateNode = new EventEmitter();
+        this.fReassignConnection = new EventEmitter();
+        this.fCreateConnection = new EventEmitter();
+        this.selectedItemsOnPointerDown = 0;
+        this.document = document;
+    }
+    ngOnInit() {
+        this.fComponentsStore.fDraggable = this;
+    }
+    ngAfterViewInit() {
+        super.subscribe(this.document);
+    }
+    onPointerDown(event) {
+        this.fDraggableDataContext.reset();
+        let result = event.isMouseLeftButton();
+        this.selectedItemsOnPointerDown = this.fDraggableDataContext.selectedItems.length;
+        this.injector.get(SingleSelectOnPointerDown).handle(event);
+        this.injector.get(ReassignConnectionPrepareDragSequence).handle(event);
+        this.injector.get(CreateConnectionPrepareDragSequence).handle(event);
+        this.emitSelectionChangeEvent();
+        return result;
+    }
+    prepareDragSequence(event) {
+        this.injector.get(SelectionAreaPrepareDragSequence).handle(event);
+        this.injector.get(NodePrepareDragSequence).handle(event);
+        this.injector.get(CanvasPrepareDragSequence).handle(event);
+        this.injector.get(ExternalItemPrepareDragSequence).handle(event);
+        this.fDraggableDataContext.draggableItems.forEach((item) => {
+            item.initialize?.();
+        });
+        if (this.fDraggableDataContext.draggableItems.length > 0) {
+            this.hostElement.classList.add('f-dragging');
+        }
+    }
+    onPointerMove(event) {
+        const pointerPositionInCanvas = Point.fromPoint(event.getPosition()).elementTransform(this.hostElement);
+        const difference = pointerPositionInCanvas.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
+        this.fDraggableDataContext.draggableItems.forEach((item) => {
+            item.move(difference);
+        });
+    }
+    onPointerUp(event) {
+        this.injector.get(ReassignConnectionOnPointerUp).handle(event);
+        this.injector.get(CreateConnectionOnPointerUp).handle(event);
+        this.injector.get(SelectionAreaOnPointerUp).handle(event);
+        this.injector.get(NodeOnPointerUp).handle(event);
+        this.injector.get(CanvasOnPointerUp).handle(event);
+        this.injector.get(ExternalItemOnPointerUp).handle(event);
+        this.hostElement.classList.remove('f-dragging');
+        this.emitSelectionChangeEvent();
+        this.fDraggableDataContext.reset();
+    }
+    emitSelectionChangeEvent() {
+        if (!this.fDraggableDataContext.isSelectedChanged
+            && this.selectedItemsOnPointerDown === this.fDraggableDataContext.selectedItems.length) {
+            return;
+        }
+        let selectedNodes = [];
+        let selectedConnections = [];
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            if (x.hostElement.classList.contains('f-node')) {
+                selectedNodes.push(x.hostElement.id);
+            }
+            else {
+                selectedConnections.push(x.hostElement.id);
+            }
+        });
+        this.fSelectionChange.emit(new FSelectionChangeEvent(selectedNodes, selectedConnections));
+    }
+    ngOnDestroy() {
+        super.unsubscribe();
+        this.subscriptions$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDirective, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }, { token: i0.NgZone }, { token: i0.Injector }, { token: FComponentsStore }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: ["fDraggableDisabled", "disabled"] }, outputs: { fSelectionChange: "fSelectionChange", fCreateNode: "fCreateNode", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection" }, providers: [
+            { provide: F_DRAGGABLE, useExisting: FDraggableDirective }
+        ], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "f-flow[fDraggable]",
+                    exportAs: 'fDraggable',
+                    providers: [
+                        { provide: F_DRAGGABLE, useExisting: FDraggableDirective }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }, { type: i0.NgZone }, { type: i0.Injector }, { type: FComponentsStore }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { disabled: [{
+                type: Input,
+                args: ['fDraggableDisabled']
+            }], fSelectionChange: [{
+                type: Output
+            }], fCreateNode: [{
+                type: Output
+            }], fReassignConnection: [{
+                type: Output
+            }], fCreateConnection: [{
+                type: Output
+            }] } });
+
+class LineElement {
+    constructor(hostElement) {
+        this.hostElement = hostElement;
+        this.element = DomElementExtensions.createHtmlElement('div');
+        this.hostElement.appendChild(this.element);
+        this.element.classList.add('f-line');
+    }
+    hide() {
+        this.element.style.display = 'none';
+    }
+    show() {
+        this.element.style.display = 'block';
+    }
+    draw(object) {
+        this.element.style.position = 'absolute';
+        Object.keys(object).forEach((key) => {
+            // @ts-ignore
+            this.element.style[key] = object[key] + 'px';
+        });
+    }
+}
+
+class LineService {
+    constructor(hostElement) {
+        this.hostElement = hostElement;
+        this.fHorizontalLine = new LineElement(this.hostElement);
+        this.fVerticalLine = new LineElement(this.hostElement);
+    }
+    drawVerticalLine(x, size, transform) {
+        this.fVerticalLine.show();
+        this.fVerticalLine.draw({
+            left: x * transform.scale + transform.position.x + transform.scaledPosition.x,
+            top: 0,
+            width: 1,
+            height: size.height
+        });
+    }
+    drawHorizontalLine(y, size, transform) {
+        this.fHorizontalLine.show();
+        this.fHorizontalLine.draw({
+            left: 0,
+            top: y * transform.scale + transform.position.y + transform.scaledPosition.y,
+            width: size.width,
+            height: 1
+        });
+    }
+    hideVerticalLine() {
+        this.fVerticalLine.hide();
+    }
+    hideHorizontalLine() {
+        this.fHorizontalLine.hide();
+    }
+}
+
+const ALIGN_THRESHOLD = 10;
+/**
+ * A class to find the nearest coordinate.
+ */
+class NearestCoordinateFinder {
+    /**
+     * Constructor to initialize the NearestCoordinateFinder.
+     * @param elements - The array of IRect elements.
+     * @param target - The target IRect element.
+     */
+    constructor(elements, target) {
+        this.elements = elements;
+        this.target = target;
+    }
+    /**
+     * Finds the nearest coordinate on a specified axis.
+     * @returns The nearest coordinate and its distance.
+     */
+    findNearestCoordinateByX() {
+        let nearest;
+        let minDistance;
+        for (const element of this.elements) {
+            const distanceLeftLeft = this.target.x - element.x;
+            const distanceLeftRight = this.target.x - (element.x + element.width);
+            const distanceCenterCenter = this.target.gravityCenter.x - element.gravityCenter.x;
+            const distanceRightLeft = (this.target.x + this.target.width) - element.x;
+            const distanceRightRight = (this.target.x + this.target.width) - (element.x + element.width);
+            if (Math.abs(distanceLeftLeft) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceLeftRight) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceRightLeft) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceRightRight) <= ALIGN_THRESHOLD) {
+                if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
+                    minDistance = distanceCenterCenter;
+                    nearest = element.gravityCenter.x;
+                }
+                if (Math.abs(distanceLeftLeft) < Math.abs(minDistance)) {
+                    minDistance = distanceLeftLeft;
+                    nearest = element.x;
+                }
+                if (Math.abs(distanceRightRight) < Math.abs(minDistance)) {
+                    minDistance = distanceRightRight;
+                    nearest = element.x + element.width;
+                }
+                if (Math.abs(distanceLeftRight) < Math.abs(minDistance)) {
+                    minDistance = distanceLeftRight;
+                    nearest = element.x + element.width;
+                }
+                if (Math.abs(distanceRightLeft) < Math.abs(minDistance)) {
+                    minDistance = distanceRightLeft;
+                    nearest = element.x;
+                }
+            }
+        }
+        return { value: nearest, distance: minDistance };
+    }
+    /**
+     * Finds the nearest coordinate on a specified axis.
+     * @returns The nearest coordinate and its distance.
+     */
+    findNearestCoordinateByY() {
+        let nearest;
+        let minDistance;
+        for (const element of this.elements) {
+            const distanceTopTop = this.target.y - element.y;
+            const distanceTopBottom = this.target.y - (element.y + element.height);
+            const distanceCenterCenter = this.target.gravityCenter.y - element.gravityCenter.y;
+            const distanceBottomTop = (this.target.y + this.target.height) - element.y;
+            const distanceBottomBottom = (this.target.y + this.target.height) - (element.y + element.height);
+            if (Math.abs(distanceTopTop) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceTopBottom) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceBottomTop) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceBottomBottom) <= ALIGN_THRESHOLD) {
+                if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
+                    minDistance = distanceCenterCenter;
+                    nearest = element.gravityCenter.y;
+                }
+                if (Math.abs(distanceTopTop) < Math.abs(minDistance)) {
+                    minDistance = distanceTopTop;
+                    nearest = element.y;
+                }
+                if (Math.abs(distanceBottomBottom) < Math.abs(minDistance)) {
+                    minDistance = distanceBottomBottom;
+                    nearest = element.y + element.height;
+                }
+                if (Math.abs(distanceTopBottom) < Math.abs(minDistance)) {
+                    minDistance = distanceTopBottom;
+                    nearest = element.y + element.height;
+                }
+                if (Math.abs(distanceBottomTop) < Math.abs(minDistance)) {
+                    minDistance = distanceBottomTop;
+                    nearest = element.y;
+                }
+            }
+        }
+        return { value: nearest, distance: minDistance };
+    }
+}
+
+const F_LINE_ALIGNMENT = new InjectionToken('F_LINE_ALIGNMENT');
+class FLineAlignmentBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FLineAlignmentBase, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FLineAlignmentBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.NgZone }] });
+        }] });
 
-class FDraggableDirective extends FDraggableBase {
+class FLineAlignmentComponent extends FLineAlignmentBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, fDraggableDataContext, ngZone, injector, fComponentsStore, document) {
-        super(ngZone);
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
+    }
+    constructor(elementReference, fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
+        super();
         this.elementReference = elementReference;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.injector = injector;
         this.fComponentsStore = fComponentsStore;
-        this.subscriptions$ = new Subscription();
-        this.disabled = false;
-        this.fSelectionChange = new EventEmitter();
-        // @Output()
-        // public override fConnectionIntersectNode: EventEmitter<ConnectionIntersectNodeEvent> = new EventEmitter<ConnectionIntersectNodeEvent>();
-        this.fCreateNode = new EventEmitter();
-        this.fReassignConnection = new EventEmitter();
-        this.fCreateConnection = new EventEmitter();
-        this.selectedItemsOnPointerDown = 0;
-        this.document = document;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+        this.size = SizeExtensions.initialize();
+        this.draggedNodeRect = RectExtensions.initialize();
+        this.rects = [];
+        this.lineService = new LineService(this.hostElement);
     }
     ngOnInit() {
-        this.fComponentsStore.fDraggable = this;
-    }
-    ngAfterViewInit() {
-        super.subscribe(this.document);
-    }
-    onPointerDown(event) {
-        this.fDraggableDataContext.reset();
-        let result = event.isMouseLeftButton();
-        this.selectedItemsOnPointerDown = this.fDraggableDataContext.selectedItems.length;
-        this.injector.get(SingleSelectOnPointerDown).handle(event);
-        this.injector.get(ReassignConnectionPrepareDragSequence).handle(event);
-        this.injector.get(CreateConnectionPrepareDragSequence).handle(event);
-        this.emitSelectionChangeEvent();
-        return result;
+        this.fDraggableDataContext.fLineAlignment = this;
     }
-    prepareDragSequence(event) {
-        this.injector.get(SelectionAreaPrepareDragSequence).handle(event);
-        this.injector.get(NodePrepareDragSequence).handle(event);
-        this.injector.get(CanvasPrepareDragSequence).handle(event);
-        this.injector.get(ExternalItemPrepareDragSequence).handle(event);
-        this.fDraggableDataContext.draggableItems.forEach((item) => {
-            item.initialize?.();
+    initialize(allNodes, currentNodes) {
+        this.size = this.flowHost.getBoundingClientRect();
+        this.rects = [];
+        const draggedNodeRects = currentNodes.map((x) => {
+            return this.getElementRectInFlowHandler.handle(x.hostElement);
         });
-        if (this.fDraggableDataContext.draggableItems.length > 0) {
-            this.hostElement.classList.add('f-dragging');
-        }
-    }
-    onPointerMove(event) {
-        const pointerPositionInCanvas = Point.fromPoint(event.getPosition()).elementTransform(this.hostElement);
-        const difference = pointerPositionInCanvas.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
-        this.fDraggableDataContext.draggableItems.forEach((item) => {
-            item.move(difference);
+        this.draggedNodeRect = RectExtensions.union(draggedNodeRects);
+        const allNodesExcludeCurrents = allNodes.filter((x) => {
+            return !currentNodes.includes(x);
+        });
+        this.rects = allNodesExcludeCurrents.map((x) => {
+            return this.getElementRectInFlowHandler.handle(x.hostElement);
         });
     }
-    onPointerUp(event) {
-        this.injector.get(ReassignConnectionOnPointerUp).handle(event);
-        this.injector.get(CreateConnectionOnPointerUp).handle(event);
-        this.injector.get(SelectionAreaOnPointerUp).handle(event);
-        this.injector.get(NodeOnPointerUp).handle(event);
-        this.injector.get(CanvasOnPointerUp).handle(event);
-        this.injector.get(ExternalItemOnPointerUp).handle(event);
-        this.hostElement.classList.remove('f-dragging');
-        this.emitSelectionChangeEvent();
-        this.fDraggableDataContext.reset();
+    handle(difference) {
+        this.drawIntersectingLines(difference);
     }
-    emitSelectionChangeEvent() {
-        if (!this.fDraggableDataContext.isSelectedChanged
-            && this.selectedItemsOnPointerDown === this.fDraggableDataContext.selectedItems.length) {
-            return;
+    drawIntersectingLines(difference) {
+        const intersect = this.findNearestCoordinate(difference);
+        if (intersect.xResult.value !== undefined) {
+            this.lineService.drawVerticalLine(intersect.xResult.value, this.size, this.transform);
+        }
+        else {
+            this.lineService.hideVerticalLine();
+        }
+        if (intersect.yResult.value !== undefined) {
+            this.lineService.drawHorizontalLine(intersect.yResult.value, this.size, this.transform);
+        }
+        else {
+            this.lineService.hideHorizontalLine();
         }
-        let selectedNodes = [];
-        let selectedConnections = [];
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            if (x.hostElement.classList.contains('f-node')) {
-                selectedNodes.push(x.hostElement.id);
-            }
-            else {
-                selectedConnections.push(x.hostElement.id);
-            }
-        });
-        this.fSelectionChange.emit(new SelectionChangeEvent(selectedNodes, selectedConnections));
     }
-    ngOnDestroy() {
-        super.unsubscribe();
-        this.subscriptions$.unsubscribe();
+    findNearestCoordinate(difference) {
+        const rect = RectExtensions.addPoint(this.draggedNodeRect, difference);
+        const finder = new NearestCoordinateFinder(this.rects, rect);
+        const xResult = finder.findNearestCoordinateByX();
+        const yResult = finder.findNearestCoordinateByY();
+        const result = { xResult, yResult };
+        return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDirective, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }, { token: i0.NgZone }, { token: i0.Injector }, { token: FComponentsStore }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: ["fDraggableDisabled", "disabled"] }, outputs: { fSelectionChange: "fSelectionChange", fCreateNode: "fCreateNode", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection" }, providers: [
-            { provide: F_DRAGGABLE, useExisting: FDraggableDirective }
-        ], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 }); }
+    complete() {
+        this.lineService.hideVerticalLine();
+        this.lineService.hideHorizontalLine();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FLineAlignmentComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FLineAlignmentComponent, selector: "f-line-alignment", host: { classAttribute: "f-line-alignment f-component" }, providers: [
+            { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
+        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "", isInline: true, styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "f-flow[fDraggable]",
-                    exportAs: 'fDraggable',
-                    providers: [
-                        { provide: F_DRAGGABLE, useExisting: FDraggableDirective }
-                    ]
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }, { type: i0.NgZone }, { type: i0.Injector }, { type: FComponentsStore }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { disabled: [{
-                type: Input,
-                args: ['fDraggableDisabled']
-            }], fSelectionChange: [{
-                type: Output
-            }], fCreateNode: [{
-                type: Output
-            }], fReassignConnection: [{
-                type: Output
-            }], fCreateConnection: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FLineAlignmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "f-line-alignment", template: "", exportAs: "fComponent", host: {
+                        'class': 'f-line-alignment f-component'
+                    }, providers: [
+                        { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
+                    ], styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
-class RedrawConnectionsHandler {
-    constructor(fComponentsStore, getElementRectInFlowHandler, getConnectionVectorHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
+const F_SELECTION_AREA = new InjectionToken('F_SELECTION_AREA');
+class FSelectionAreaBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FSelectionAreaBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FSelectionAreaBase, decorators: [{
+            type: Directive
+        }] });
+
+class FSelectionAreaComponent extends FSelectionAreaBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
     }
-    handle() {
-        this.resetConnectors();
-        this.fComponentsStore.fTempConnection?.setMarkers();
-        this.fComponentsStore.fConnections.forEach((connection) => {
-            const output = this.fComponentsStore.fOutputs.find((x) => x.id === connection.fOutputId);
-            const input = this.fComponentsStore.fInputs.find((x) => x.id === connection.fInputId);
-            if (output && input) {
-                this.setupConnection(output, input, connection);
-            }
-        });
+    constructor(elementReference, fDraggableDataContext) {
+        super();
+        this.elementReference = elementReference;
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-    resetConnectors() {
-        this.fComponentsStore.fOutputs.forEach((output) => output.setConnected(false));
-        this.fComponentsStore.fInputs.forEach((input) => input.setConnected(false));
+    ngOnInit() {
+        this.fDraggableDataContext.fSelectionArea = this;
+        this.hostElement.style.display = 'none';
     }
-    setupConnection(output, input, connection) {
-        output.setConnected(true);
-        input.setConnected(true);
-        const vector = this.getVector(output, input, connection);
-        connection.setVector(vector.point1, output.fConnectableSide, vector.point2, input.fConnectableSide);
-        connection.setMarkers();
-        connection.initialize();
+    hide() {
+        this.hostElement.style.display = 'none';
     }
-    getVector(output, input, connection) {
-        const outputRect = this.getElementRectInFlowHandler.handle(output.hostElement);
-        const inputRect = this.getElementRectInFlowHandler.handle(input.hostElement);
-        return this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(outputRect, inputRect, connection.fBehavior, output.fConnectableSide, input.fConnectableSide));
+    show() {
+        this.hostElement.style.display = 'block';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RedrawConnectionsHandler, deps: [{ token: FComponentsStore }, { token: GetElementRectInFlowHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RedrawConnectionsHandler }); }
+    draw(object) {
+        const style = this.hostElement.style;
+        style.left = object.left + 'px';
+        style.top = object.top + 'px';
+        style.width = object.width + 'px';
+        style.height = object.height + 'px';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
+            { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RedrawConnectionsHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }, { type: GetConnectionVectorHandler }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "f-selection-area", template: ``, host: {
+                        'class': 'f-selection-area f-component'
+                    }, providers: [
+                        { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
+                    ], styles: [":host{position:absolute}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }] });
 
 const F_FLOW = new InjectionToken('F_FLOW');
 class FFlowBase {
@@ -4248,12 +4213,12 @@ class FFlowComponent extends FFlowBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, redrawConnectionsHandler, getAllNodesRectHandler, fComponentsStore) {
+    constructor(elementReference, getAllNodesRectHandler, fComponentsStore, fMediator) {
         super();
         this.elementReference = elementReference;
-        this.redrawConnectionsHandler = redrawConnectionsHandler;
         this.getAllNodesRectHandler = getAllNodesRectHandler;
         this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
         this.subscription$ = new Subscription();
         this.fFlowId = `f-flow-${uniqueId++}`;
         this.fLoaded = new EventEmitter();
@@ -4268,7 +4233,7 @@ class FFlowComponent extends FFlowBase {
     }
     subscribeOnElementsChanges() {
         return this.fComponentsStore.changes.pipe(startWith(null), debounceTime(20)).subscribe(() => {
-            this.redrawConnectionsHandler.handle();
+            this.fMediator.send(new RedrawConnectionsRequest());
             if (!this.isLoaded) {
                 this.isLoaded = true;
                 this.fLoaded.emit();
@@ -4281,8 +4246,9 @@ class FFlowComponent extends FFlowBase {
     ngOnDestroy() {
         this.subscription$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FFlowComponent, deps: [{ token: i0.ElementRef }, { token: RedrawConnectionsHandler }, { token: GetAllNodesRectHandler }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FFlowComponent, deps: [{ token: i0.ElementRef }, { token: GetAllNodesRectHandler }, { token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FFlowComponent, selector: "f-flow", inputs: { fFlowId: "fFlowId" }, outputs: { fLoaded: "fLoaded" }, host: { properties: { "attr.id": "fFlowId" }, classAttribute: "f-component f-flow" }, providers: [
+            FFlowMediator,
             FComponentsStore,
             FDraggableDataContext,
             ...SINGLE_SELECT_PROVIDERS,
@@ -4292,7 +4258,6 @@ class FFlowComponent extends FFlowBase {
             ...EXTERNAL_ITEM_PROVIDERS,
             ...CONNECTIONS_PROVIDERS,
             ...COMMON_PROVIDERS,
-            RedrawConnectionsHandler,
             { provide: F_FLOW, useExisting: FFlowComponent },
         ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <ng-content select=\"[fDefinitions]\"></ng-content>\n\n    <ng-content select=\"f-background\"></ng-content>\n\n    <ng-content select=\"f-line-alignment\"></ng-content>\n\n    <ng-content select=\"f-canvas\"></ng-content>\n\n    <ng-content select=\"f-selection-area\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4302,6 +4267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         '[attr.id]': 'fFlowId',
                         class: "f-component f-flow",
                     }, providers: [
+                        FFlowMediator,
                         FComponentsStore,
                         FDraggableDataContext,
                         ...SINGLE_SELECT_PROVIDERS,
@@ -4311,10 +4277,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         ...EXTERNAL_ITEM_PROVIDERS,
                         ...CONNECTIONS_PROVIDERS,
                         ...COMMON_PROVIDERS,
-                        RedrawConnectionsHandler,
                         { provide: F_FLOW, useExisting: FFlowComponent },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <ng-content select=\"[fDefinitions]\"></ng-content>\n\n    <ng-content select=\"f-background\"></ng-content>\n\n    <ng-content select=\"f-line-alignment\"></ng-content>\n\n    <ng-content select=\"f-canvas\"></ng-content>\n\n    <ng-content select=\"f-selection-area\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: RedrawConnectionsHandler }, { type: GetAllNodesRectHandler }, { type: FComponentsStore }], propDecorators: { fFlowId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: GetAllNodesRectHandler }, { type: FComponentsStore }, { type: FFlowMediator }], propDecorators: { fFlowId: [{
                 type: Input
             }], fLoaded: [{
                 type: Output
@@ -4413,5 +4378,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CanvasDragHandler, CanvasOnPointerUp, CanvasPrepareDragSequence, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionEvent, CreateConnectionOnPointerUp, CreateConnectionPrepareDragSequence, CreateNodeEvent, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFDraggableType, EFMarkerType, EXTERNAL_ITEM_PROVIDERS, ExternalItemDragHandler, ExternalItemOnPointerUp, ExternalItemPrepareDragSequence, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCellPatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FLOW, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FPathBuilderBase, FPathBuilderSelector, FResizeObserver, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FStraightPathBuilder, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_PATTERN, F_CANVAS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_IDENTIFIERS, F_DRAGGABLE, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_FLOW, F_LINE_ALIGNMENT, F_MARKER, F_NODE, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_SELECTED_CLASS, F_SELECTION_AREA, F_ZOOM, FindFirstCanBeConnectedOutputByOutletHandler, FindInputsUnderPointerHandler, FindInputsUnderPointerRequest, FirstNotConnectedInputOfNodeUnderPointerHandler, GetAllNodesRectHandler, GetCanBeSelectedItemsHandler, GetConnectionHandler, GetConnectionVectorHandler, GetConnectionVectorRequest, GetElementRectInFlowHandler, GetIncomingConnectionsHandler, GetInputRectInFlowHandler, GetOutgoingConnectionsHandler, GetOutputRectInFlowHandler, IDragAndDropBase, InputNotFound, InputsUnderPointerHandler, IsConnectionUnderNodeHandler, LineElement, LineService, MOUSE_EVENT_IGNORE_TIME, NODE_PROVIDERS, NearestCoordinateFinder, NodeDragHandler, NodeOnPointerUp, NodePrepareDragSequence, OutputNotFound, ReassignConnectionDragHandler, ReassignConnectionEvent, ReassignConnectionOnPointerUp, ReassignConnectionPrepareDragSequence, RedrawConnectionsHandler, SELECTION_AREA_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllHandler, SelectionAreaDragHandle, SelectionAreaOnPointerUp, SelectionAreaPrepareDragSequence, SelectionChangeEvent, SingleSelectOnPointerDown, UpdateConnectionLayerHandler, UpdateNodeLayerHandler, castToConnectionBehavior, castToConnectionType, getExternalItem, getFlowUid, isExternalItem, isNode, isNodeDragHandle, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility, mixinChangePosition, mixinChangeZoom, mixinFitToParent, mixinOneToOneCentering, requiredOutput };
+export { CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CanvasDragHandler, CanvasOnPointerUp, CanvasPrepareDragSequence, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionOnPointerUp, CreateConnectionPrepareDragSequence, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFDraggableType, EFMarkerType, EXTERNAL_ITEM_PROVIDERS, ExternalItemDragHandler, ExternalItemOnPointerUp, ExternalItemPrepareDragSequence, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCellPatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowMediator, FFlowModule, FHandlerRegister, FLOW, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FPathBuilderBase, FPathBuilderSelector, FReassignConnectionEvent, FResizeObserver, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FStraightPathBuilder, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_PATTERN, F_CANVAS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_IDENTIFIERS, F_DRAGGABLE, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_FLOW, F_LINE_ALIGNMENT, F_MARKER, F_NODE, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_SELECTED_CLASS, F_SELECTION_AREA, F_ZOOM, FindFirstCanBeConnectedOutputByOutletHandler, FindInputsUnderPointerHandler, FindInputsUnderPointerRequest, FirstNotConnectedInputOfNodeUnderPointerHandler, GetAllNodesRectHandler, GetCanBeSelectedItemsHandler, GetConnectionHandler, GetConnectionVectorHandler, GetConnectionVectorRequest, GetElementRectInFlowHandler, GetIncomingConnectionsHandler, GetInputRectInFlowHandler, GetOutgoingConnectionsHandler, GetOutputRectInFlowHandler, GetOutputRectInFlowRequest, GetOutputRectInFlowResponse, IDragAndDropBase, InputNotFound, InputsUnderPointerHandler, IsConnectionUnderNodeHandler, LineElement, LineService, MOUSE_EVENT_IGNORE_TIME, NODE_PROVIDERS, NearestCoordinateFinder, NodeDragHandler, NodeOnPointerUp, NodePrepareDragSequence, OutputNotFound, ReassignConnectionDragHandler, ReassignConnectionOnPointerUp, ReassignConnectionPrepareDragSequence, RedrawConnectionsHandler, RedrawConnectionsRequest, SELECTION_AREA_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllHandler, SelectionAreaDragHandle, SelectionAreaOnPointerUp, SelectionAreaPrepareDragSequence, SingleSelectOnPointerDown, UpdateConnectionLayerHandler, UpdateNodeLayerHandler, castToConnectionBehavior, castToConnectionType, getExternalItem, getFlowUid, isExternalItem, isNode, isNodeDragHandle, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility, requiredOutput };
 //# sourceMappingURL=foblex-flow.mjs.map