@foblex/flow 1.5.3 → 1.5.5

package/fesm2022/foblex-flow.mjs

@@ -1,6 +1,6 @@
 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 { TransformModelExtensions, DomElementExtensions, PointExtensions, RectExtensions, BooleanExtensions, sanitizeElementId, Point, GuidExtensions, VectorExtensions, EventExtensions, mixinChangePosition, mixinFitToParent, mixinOneToOneCentering, mixinChangeZoom, MouseEventExtensions, IMouseEvent, ITouchDownEvent, ITouchMoveEvent, ITouchUpEvent, SizeExtensions } from '@foblex/core';
 import { Subject, Observable, Subscription, startWith, debounceTime } from 'rxjs';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
@@ -1380,7 +1380,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
         this.fComponentsStore.fTempConnection = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fBehavior: ["fBehavior", "fBehavior", castToConnectionBehavior], fType: ["fType", "fType", castToConnectionType], disabled: "disabled" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }, { propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, 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 }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\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\" *ngIf=\"fConnectionCenters.length\">\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fBehavior: ["fBehavior", "fBehavior", castToConnectionBehavior], fType: ["fType", "fType", castToConnectionType], disabled: "disabled" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }, { propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, 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 }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\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\" *ngIf=\"fConnectionCenters.length\">\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: FConnectionForCreateComponent, decorators: [{
             type: Component,
@@ -1422,7 +1422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 args: [CONNECTION_TEXT, { static: true }]
             }], fConnectionCenter: [{
                 type: ViewChild,
-                args: ['fConnectionCenter', { static: true }]
+                args: ['fConnectionCenter', { static: false }]
             }], fConnectionCenters: [{
                 type: ContentChildren,
                 args: [FConnectionCenterDirective, { descendants: true }]
@@ -1463,7 +1463,7 @@ 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: { 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 }, { propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, 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\" *ngIf=\"fConnectionCenters.length\">\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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 }, { propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, 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 }], 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\" *ngIf=\"fConnectionCenters.length\">\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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,
@@ -1517,7 +1517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 args: [CONNECTION_TEXT, { static: true }]
             }], fConnectionCenter: [{
                 type: ViewChild,
-                args: ['fConnectionCenter', { static: true }]
+                args: ['fConnectionCenter', { static: false }]
             }], fConnectionCenters: [{
                 type: ContentChildren,
                 args: [FConnectionCenterDirective, { descendants: true }]
@@ -1902,14 +1902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             type: Directive
         }], ctorParameters: () => [] });
 
-class GetConnectionVectorRequest {
-    constructor(outputRect, inputRect, behavior, outputSide, inputSide) {
-        this.outputRect = outputRect;
-        this.inputRect = inputRect;
-        this.behavior = behavior;
-        this.outputSide = outputSide;
-        this.inputSide = inputSide;
-    }
+class ClearSelectionRequest {
 }
 
 class FFlowMediator {
@@ -1940,1981 +1933,2031 @@ function FHandlerRegister(requestType) {
     };
 }
 
-let GetConnectionVectorHandler = class GetConnectionVectorHandler {
-    constructor() {
-        this.behaviorHandlers = {
-            [EFConnectionBehavior.FLOATING.toString()]: this.floatingBehavior,
-            // [EFConnectionBehavior.FIXED.toString()]: this.fixedBehavior,
-            [EFConnectionBehavior.FIXED.toString()]: this.fixedOutboundBehaviour,
-        };
+var EFDraggableType;
+(function (EFDraggableType) {
+    EFDraggableType["NODE"] = "node";
+    EFDraggableType["REASSIGN_CONNECTION"] = "reassign-connection";
+    EFDraggableType["CREATE_CONNECTION"] = "create-connection";
+    EFDraggableType["CONNECTION"] = "connection";
+    EFDraggableType["CANVAS"] = "canvas";
+    EFDraggableType["PALETTE_ITEM"] = "palette-item";
+    EFDraggableType["SELECTION"] = "selection";
+})(EFDraggableType || (EFDraggableType = {}));
+
+class CanvasDragHandler {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+        this.type = EFDraggableType.CANVAS;
+        this.onPointerDownPosition = PointExtensions.initialize();
     }
-    handle(payload) {
-        const result = this.behaviorHandlers[payload.behavior](payload);
-        return result;
+    initialize() {
+        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
     }
-    floatingBehavior(payload) {
-        const fromResult = RectExtensions.intersectionWithVector(payload.outputRect, payload.outputRect.gravityCenter, payload.inputRect.gravityCenter);
-        const toResult = RectExtensions.intersectionWithVector(payload.inputRect, payload.outputRect.gravityCenter, payload.inputRect.gravityCenter);
-        return {
-            point1: fromResult ? fromResult[1] : payload.outputRect.gravityCenter,
-            point2: toResult ? toResult[0] : payload.inputRect.gravityCenter,
-        };
+    move(difference) {
+        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
+        this.fComponentsStore.fCanvas.redraw();
     }
-    fixedBehavior(payload) {
-        return {
-            point1: payload.outputRect.gravityCenter,
-            point2: payload.inputRect.gravityCenter,
-        };
+    complete() {
+        this.fComponentsStore.fCanvas.completeDrag();
     }
-    fixedOutboundBehaviour(payload) {
-        const point1 = positionFixedOutbound[payload.outputSide === EFConnectableSide.AUTO ? EFConnectableSide.BOTTOM : payload.outputSide](payload.outputRect);
-        const point2 = positionFixedOutbound[payload.inputSide === EFConnectableSide.AUTO ? EFConnectableSide.TOP : payload.inputSide](payload.inputRect);
-        return {
-            point1: point1,
-            point2: point2,
-        };
+}
+
+class FDraggableDataContext {
+    constructor() {
+        this.selectedItems = [];
+        this.isSelectedChanged = false;
+        this.onPointerDownScale = 1;
+        this.onPointerDownPosition = new Point(0, 0);
+        this.draggableItems = [];
     }
-    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: [{
+    reset() {
+        this.draggableItems = [];
+        this.onPointerDownScale = 1;
+        this.onPointerDownPosition = new Point(0, 0);
+        this.isSelectedChanged = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDataContext }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDataContext, decorators: [{
             type: Injectable
         }] });
-const positionFixedOutbound = {
-    [EFConnectableSide.TOP]: (rect) => {
-        const result = new Point();
-        result.y = rect.y;
-        result.x = rect.x + rect.width / 2;
-        return result;
-    },
-    [EFConnectableSide.BOTTOM]: (rect) => {
-        const result = new Point();
-        result.y = rect.y + rect.height;
-        result.x = rect.x + rect.width / 2;
-        return result;
-    },
-    [EFConnectableSide.LEFT]: (rect) => {
-        const result = new Point();
-        result.x = rect.x;
-        result.y = rect.y + rect.height / 2;
-        return result;
-    },
-    [EFConnectableSide.RIGHT]: (rect) => {
-        const result = new Point();
-        result.x = rect.x + rect.width;
-        result.y = rect.y + rect.height / 2;
-        return result;
-    },
-};
 
-class GetOutputRectInFlowRequest {
-    constructor(fOutputId) {
-        this.fOutputId = fOutputId;
+class CanvasOnPointerUp {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-}
-
-function OutputNotFound(outputId) {
-    return new Error(`Output with id ${outputId} not found`);
-}
-function InputNotFound(inputId) {
-    return new Error(`Input with id ${inputId} not found`);
-}
-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;
+    handle(event) {
+        const isDragCanvas = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.CANVAS);
+        if (isDragCanvas) {
+            this.fDraggableDataContext.draggableItems.forEach((x) => {
+                x.complete?.();
+            });
+        }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasOnPointerUp }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasOnPointerUp, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-class GetElementRectInFlowHandler {
-    get transform() {
-        return this.fComponentsStore.transform;
-    }
+class CanvasPrepareDragSequence {
     get flowHost() {
-        return this.fComponentsStore.flowHost;
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore) {
+    constructor(fComponentsStore, fDraggableDataContext) {
         this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-    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;
+    handle(event) {
+        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
+        const isBackgroundElement = this.fComponentsStore.fBackground?.isBackgroundElement(event.targetElement);
+        const isFlowHost = this.flowHost.contains(event.targetElement);
+        let node = this.fComponentsStore.findNode(event.targetElement);
+        if (node && node.disabled) {
+            node = undefined;
+        }
+        if ((isBackgroundElement || (isFlowHost && !node)) && !this.fDraggableDataContext.draggableItems.length) {
+            this.fDraggableDataContext.onPointerDownScale = 1;
+            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(1);
+            this.fDraggableDataContext.draggableItems = [
+                new CanvasDragHandler(this.fComponentsStore)
+            ];
+        }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetElementRectInFlowHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
-let GetOutputRectInFlowHandler = class GetOutputRectInFlowHandler {
-    constructor(fComponentsStore, getElementRectInFlowHandler) {
+const CANVAS_PROVIDERS = [
+    CanvasOnPointerUp,
+    CanvasPrepareDragSequence
+];
+
+class FindFirstCanBeConnectedOutputByOutletHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    get fOutputs() {
+        return this.fComponentsStore.fOutputs;
+    }
+    constructor(fComponentsStore) {
         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);
+    handle(outlet) {
+        let result;
+        const node = this.fNodes.find((x) => x.isContains(outlet.hostElement));
+        if (!node) {
+            throw new Error('Node not found');
         }
-        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() {
+        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: 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: FindFirstCanBeConnectedOutputByOutletHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-let RedrawConnectionsHandler = class RedrawConnectionsHandler {
-    constructor(fComponentsStore, getElementRectInFlowHandler, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+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;
     }
-    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);
-            }
-        });
+    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));
     }
-    resetConnectors() {
-        this.fComponentsStore.fOutputs.forEach((output) => output.setConnected(false));
-        this.fComponentsStore.fInputs.forEach((input) => input.setConnected(false));
+    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();
     }
-    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();
+    complete() {
+        this.connection.redraw();
+        this.connection.hide();
     }
-    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));
+}
+
+class FCreateConnectionEvent {
+    constructor(fOutputId, fInputId) {
+        this.fOutputId = fOutputId;
+        this.fInputId = fInputId;
     }
-    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 {
+class FirstNotConnectedInputOfNodeUnderPointerHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    get fInputs() {
+        return this.fComponentsStore.fInputs;
+    }
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
     }
-    handle() {
-        const fNodes = this.fComponentsStore.fNodes;
-        const rects = fNodes.map((x) => {
-            return RectExtensions.fromElement(x.hostElement);
+    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 = RectExtensions.union(rects);
+        const result = inputs.find((x) => !!x);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetAllNodesRectHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetAllNodesRectHandler }); }
+    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: GetAllNodesRectHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class GetConnectionHandler {
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
+class InputsUnderPointerHandler {
+    get fInputs() {
+        return this.fComponentsStore.fInputs;
     }
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
     }
-    handle(element) {
-        const result = this.fConnections.find(c => c.isContains(element));
-        return result;
+    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);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetConnectionHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetConnectionHandler }); }
+    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: GetConnectionHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputsUnderPointerHandler, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class GetIncomingConnectionsHandler {
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
-    }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(inputs) {
-        const inputsIds = inputs.map((x) => x.id);
-        return this.fConnections.filter((x) => {
-            return inputsIds.includes(x.fInputId);
-        });
+class FindInputsUnderPointerRequest {
+    constructor(event, dragHandler) {
+        this.event = event;
+        this.dragHandler = dragHandler;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetIncomingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetIncomingConnectionsHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetIncomingConnectionsHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class GetOutgoingConnectionsHandler {
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
+class FindInputsUnderPointerHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
     }
-    constructor(fComponentsStore) {
+    constructor(fComponentsStore, inputsUnderPointerHandler, firstNotConnectedInputOfNodeUnderPointerHandler) {
         this.fComponentsStore = fComponentsStore;
+        this.inputsUnderPointerHandler = inputsUnderPointerHandler;
+        this.firstNotConnectedInputOfNodeUnderPointerHandler = firstNotConnectedInputOfNodeUnderPointerHandler;
     }
-    handle(outputs) {
-        const outputsIds = outputs.map((x) => x.id);
-        return this.fConnections.filter((x) => {
-            return outputsIds.includes(x.fOutputId);
+    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;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutgoingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutgoingConnectionsHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutgoingConnectionsHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
-class GetInputRectInFlowHandler {
-    constructor(fComponentsStore, getElementRectInFlowHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-    }
-    handle(inputId) {
-        const input = this.fComponentsStore.fInputs.find((x) => x.id === inputId);
-        if (!input) {
-            throw InputNotFound(inputId);
+    getInputsUnderPointer(payload) {
+        let inputs = this.inputsUnderPointerHandler.handle(payload.event);
+        const input = this.firstNotConnectedInputOfNodeUnderPointerHandler.handle(payload.event);
+        if (input) {
+            inputs.push(input);
         }
-        const result = this.getElementRectInFlowHandler.handle(input.hostElement);
-        return { rect: result, fConnectableSide: input.fConnectableSide };
+        inputs = inputs.filter((x) => x.canBeConnected);
+        return inputs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetInputRectInFlowHandler, 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: GetInputRectInFlowHandler }); }
+    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: GetInputRectInFlowHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindInputsUnderPointerHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: InputsUnderPointerHandler }, { type: FirstNotConnectedInputOfNodeUnderPointerHandler }] });
 
-class UpdateNodeLayerHandler {
-    get fNodesContainer() {
-        return this.fComponentsStore.fCanvas?.fNodesContainer?.nativeElement;
-    }
-    constructor(fComponentsStore) {
+class CreateConnectionOnPointerUp {
+    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler, findFirstCanBeConnectedOutputByOutletHandler) {
         this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
+        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
     }
-    handle(node) {
-        const elements = Array.from(this.fNodesContainer.children);
-        const elementsCount = elements.length;
-        const targetIndex = elements.findIndex((x) => x === node.hostElement);
-        if (targetIndex !== elementsCount - 1) {
-            const afterElements = elements.splice(targetIndex + 1);
-            afterElements.forEach((x) => {
-                this.fNodesContainer.removeChild(x);
-                this.fNodesContainer.insertBefore(x, node.hostElement);
-            });
+    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 FCreateConnectionEvent(output.id, inputsUnderPointer[0]?.id));
+            }
+            handler.complete();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateNodeLayerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateNodeLayerHandler }); }
+    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: UpdateNodeLayerHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CreateConnectionOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }] });
 
-class FDraggableDataContext {
-    constructor() {
-        this.selectedItems = [];
-        this.isSelectedChanged = false;
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
-        this.draggableItems = [];
+class CreateConnectionPrepareDragSequence {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    reset() {
-        this.draggableItems = [];
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
-        this.isSelectedChanged = false;
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDataContext }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableDataContext, decorators: [{
-            type: Injectable
-        }] });
-
-class SelectAllHandler {
-    constructor(fDataContext, fDraggableDataContext) {
-        this.fDataContext = fDataContext;
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, fMediator, findFirstCanBeConnectedOutputByOutletHandler) {
+        this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+        this.fMediator = fMediator;
+        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
     }
-    handle() {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            x.deselect();
-        });
-        this.fDraggableDataContext.selectedItems = [];
-        this.fDataContext.fNodes.forEach((x) => {
-            x.select();
-            this.fDraggableDataContext.selectedItems.push(x);
-        });
-        this.fDataContext.fConnections.forEach((x) => {
-            x.select();
-            this.fDraggableDataContext.selectedItems.push(x);
-        });
-        this.fDraggableDataContext.isSelectedChanged = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectAllHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectAllHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectAllHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
-
-class UpdateConnectionLayerHandler {
-    get fConnectionsContainer() {
-        return this.fComponentsStore.fCanvas?.fConnectionsContainer?.nativeElement;
-    }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(connection) {
-        const elements = Array.from(this.fConnectionsContainer.children);
-        const elementsCount = elements.length;
-        const targetIndex = elements.findIndex((x) => x === connection.hostElement);
-        if (targetIndex !== elementsCount - 1) {
-            const afterElements = elements.splice(targetIndex + 1);
-            afterElements.forEach((x) => {
-                this.fConnectionsContainer.removeChild(x);
-                this.fConnectionsContainer.insertBefore(x, connection.hostElement);
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateConnectionLayerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateConnectionLayerHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateConnectionLayerHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
-const COMMON_PROVIDERS = [
-    GetConnectionVectorHandler,
-    GetOutputRectInFlowHandler,
-    RedrawConnectionsHandler,
-    GetAllNodesRectHandler,
-    GetConnectionHandler,
-    GetElementRectInFlowHandler,
-    GetInputRectInFlowHandler,
-    GetIncomingConnectionsHandler,
-    GetOutgoingConnectionsHandler,
-    SelectAllHandler,
-    UpdateConnectionLayerHandler,
-    UpdateNodeLayerHandler,
-];
-
-class FCanvasComponent extends FCanvasBase {
-    set position(value) {
-        if (!value) {
+    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;
         }
-        const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
-        if (!PointExtensions.isEqual(position, value)) {
-            this.transform.position = value;
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.redraw();
+        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);
+                }
+            }
         }
-    }
-    set scale(value) {
-        if (!value) {
-            return;
+        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);
+            }
         }
-        this.transform.scale = value;
-        this.redraw();
-    }
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
-    }
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(getAllNodesRectHandler, selectAllHandler, elementReference, fComponentsStore) {
-        super();
-        this.getAllNodesRectHandler = getAllNodesRectHandler;
-        this.selectAllHandler = selectAllHandler;
-        this.elementReference = elementReference;
-        this.fComponentsStore = fComponentsStore;
-        this.fCanvasChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.fComponentsStore.fCanvas = this;
-    }
-    redraw() {
-        this.fComponentsStore.fBackground?.setTransform(this.transform);
-        this.hostElement.setAttribute("style", `transform: ${TransformModelExtensions.toString(this.transform)}`);
-    }
-    redrawWithAnimation() {
-        this.fComponentsStore.fBackground?.setTransform(this.transform);
-        this.hostElement.setAttribute("style", `transition: transform 0.15s ease-in-out; transform: ${TransformModelExtensions.toString(this.transform)}`);
-        setTimeout(() => {
-            this.redraw();
-        }, 150);
-    }
-    fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
-        const fNodesRect = this.getAllNodesRectHandler.handle();
-        const rect = RectExtensions.addPointToSize(fNodesRect, Point.fromPoint(toCenter).mult(2));
-        this.fitToParent(rect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fNodes.map((x) => {
-            return Point.fromPoint(x.position).sub(toCenter);
-        }));
-        animated ? this.redrawWithAnimation() : this.redraw();
-        this.completeDrag();
     }
-    oneToOne() {
-        const fNodesRect = this.getAllNodesRectHandler.handle();
-        this.oneToOneCentering(fNodesRect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fNodes.map((x) => {
-            return Point.fromPoint(x.position).sub(new Point(0, 0));
-        }));
-        this.redrawWithAnimation();
-        this.completeDrag();
+    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)
+        ];
     }
-    selectAll() {
-        this.selectAllHandler.handle();
+    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: FCanvasComponent, deps: [{ token: GetAllNodesRectHandler }, { token: SelectAllHandler }, { token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], viewQueries: [{ propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div #fConnectionsContainer>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"[fNode]\"></ng-content>\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: FCanvasComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'f-canvas', exportAs: 'fComponent', host: {
-                        'class': 'f-component f-canvas',
-                    }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <div #fConnectionsContainer>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"[fNode]\"></ng-content>\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: GetAllNodesRectHandler }, { type: SelectAllHandler }, { type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { fCanvasChange: [{
-                type: Output
-            }], position: [{
-                type: Input
-            }], scale: [{
-                type: Input
-            }], fNodesContainer: [{
-                type: ViewChild,
-                args: ['fNodesContainer', { static: true }]
-            }], fConnectionsContainer: [{
-                type: ViewChild,
-                args: ['fConnectionsContainer', { static: true }]
-            }] } });
-
-var EFDraggableType;
-(function (EFDraggableType) {
-    EFDraggableType["NODE"] = "node";
-    EFDraggableType["REASSIGN_CONNECTION"] = "reassign-connection";
-    EFDraggableType["CREATE_CONNECTION"] = "create-connection";
-    EFDraggableType["CONNECTION"] = "connection";
-    EFDraggableType["CANVAS"] = "canvas";
-    EFDraggableType["PALETTE_ITEM"] = "palette-item";
-    EFDraggableType["SELECTION"] = "selection";
-})(EFDraggableType || (EFDraggableType = {}));
+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 CanvasDragHandler {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-        this.type = EFDraggableType.CANVAS;
-        this.onPointerDownPosition = PointExtensions.initialize();
+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;
     }
     initialize() {
-        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
+        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);
     }
     move(difference) {
-        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
-        this.fComponentsStore.fCanvas.redraw();
+        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();
     }
     complete() {
-        this.fComponentsStore.fCanvas.completeDrag();
+        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();
     }
 }
 
-class CanvasOnPointerUp {
-    constructor(fDraggableDataContext) {
+class FReassignConnectionEvent {
+    constructor(connectionId, fOutputId, oldFInputId, newFInputId) {
+        this.connectionId = connectionId;
+        this.fOutputId = fOutputId;
+        this.oldFInputId = oldFInputId;
+        this.newFInputId = newFInputId;
+    }
+}
+
+class ReassignConnectionOnPointerUp {
+    get fDraggable() {
+        return this.fComponentsStore.fDraggable;
+    }
+    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler) {
+        this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
+        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
     }
     handle(event) {
-        const isDragCanvas = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.CANVAS);
-        if (isDragCanvas) {
-            this.fDraggableDataContext.draggableItems.forEach((x) => {
-                x.complete?.();
-            });
+        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();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasOnPointerUp }); }
+    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: CanvasOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }] });
 
-class CanvasPrepareDragSequence {
+class ReassignConnectionPrepareDragSequence {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext) {
+    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;
     }
     handle(event) {
         const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
-        const isBackgroundElement = this.fComponentsStore.fBackground?.isBackgroundElement(event.targetElement);
-        const isFlowHost = this.flowHost.contains(event.targetElement);
-        let node = this.fComponentsStore.findNode(event.targetElement);
-        if (node && node.disabled) {
-            node = undefined;
+        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 ((isBackgroundElement || (isFlowHost && !node)) && !this.fDraggableDataContext.draggableItems.length) {
-            this.fDraggableDataContext.onPointerDownScale = 1;
-            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(1);
+        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 CanvasDragHandler(this.fComponentsStore)
+                new ReassignConnectionDragHandler(this.getInputRectInFlowHandler, this.fMediator, connectionToReassign)
             ];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CanvasPrepareDragSequence }); }
+    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: CanvasPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: FFlowMediator }, { type: UpdateConnectionLayerHandler }] });
 
-const CANVAS_PROVIDERS = [
-    CanvasOnPointerUp,
-    CanvasPrepareDragSequence
+const CONNECTIONS_PROVIDERS = [
+    FindFirstCanBeConnectedOutputByOutletHandler,
+    CreateConnectionOnPointerUp,
+    CreateConnectionPrepareDragSequence,
+    FirstNotConnectedInputOfNodeUnderPointerHandler,
+    InputsUnderPointerHandler,
+    FindInputsUnderPointerHandler,
+    ReassignConnectionOnPointerUp,
+    ReassignConnectionPrepareDragSequence
 ];
 
-class FindFirstCanBeConnectedOutputByOutletHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
-    }
-    get fOutputs() {
-        return this.fComponentsStore.fOutputs;
-    }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    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;
+class FCreateNodeEvent {
+    constructor(rect, data) {
+        this.rect = rect;
+        this.data = data;
     }
-    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: FindFirstCanBeConnectedOutputByOutletHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-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;
+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() {
-        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));
+        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) {
-        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();
+        this.difference = difference;
+        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
+        this.placeholder.setAttribute('style', this.getStyle(position));
     }
     complete() {
-        this.connection.redraw();
-        this.connection.hide();
+        document.body.removeChild(this.placeholder);
     }
 }
 
-class FCreateConnectionEvent {
-    constructor(fOutputId, fInputId) {
-        this.fOutputId = fOutputId;
-        this.fInputId = fInputId;
-    }
+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
+        }] });
 
-class FirstNotConnectedInputOfNodeUnderPointerHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
+function isExternalItem(element) {
+    return !!element.closest('[fExternalItem]');
+}
+function getExternalItem(element) {
+    return element.closest('[fExternalItem]');
+}
+
+class FExternalItemService {
+    constructor() {
+        this.items = [];
     }
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
+    registerItem(item) {
+        this.items.push(item);
     }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
+    getItem(element) {
+        return this.items.find(item => item.hostElement === element);
     }
-    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;
+    removeItem(item) {
+        const index = this.items.indexOf(item);
+        if (index !== -1) {
+            this.items.splice(index, 1);
+        }
     }
-    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 }); }
+    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: FirstNotConnectedInputOfNodeUnderPointerHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FExternalItemService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
-class InputsUnderPointerHandler {
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
+let uniqueId$1 = 0;
+class FExternalItemDirective extends FExternalItemBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
     }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
+    constructor(elementReference, fExternalItemService) {
+        super();
+        this.elementReference = elementReference;
+        this.fExternalItemService = fExternalItemService;
+        this.id = `f-external-item-${uniqueId$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);
+    ngOnInit() {
+        this.fExternalItemService.registerItem(this);
     }
-    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;
+    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: 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 FindInputsUnderPointerHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
+class ExternalItemPrepareDragSequence {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    constructor(fComponentsStore, inputsUnderPointerHandler, firstNotConnectedInputOfNodeUnderPointerHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.inputsUnderPointerHandler = inputsUnderPointerHandler;
-        this.firstNotConnectedInputOfNodeUnderPointerHandler = firstNotConnectedInputOfNodeUnderPointerHandler;
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    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;
-        });
+    constructor(fComponentsStore, fDraggableDataContext, fExternalItemService) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fExternalItemService = fExternalItemService;
     }
-    getInputsUnderPointer(payload) {
-        let inputs = this.inputsUnderPointerHandler.handle(payload.event);
-        const input = this.firstNotConnectedInputOfNodeUnderPointerHandler.handle(payload.event);
-        if (input) {
-            inputs.push(input);
+    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)
+            ];
         }
-        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: 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: FindInputsUnderPointerHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: InputsUnderPointerHandler }, { type: FirstNotConnectedInputOfNodeUnderPointerHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
 
-class CreateConnectionOnPointerUp {
-    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler, findFirstCanBeConnectedOutputByOutletHandler) {
+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.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
-        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
     }
     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 FCreateConnectionEvent(output.id, 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: 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 }); }
+    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: CreateConnectionOnPointerUp, 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 }, { type: FindFirstCanBeConnectedOutputByOutletHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
-class CreateConnectionPrepareDragSequence {
+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, fMediator, findFirstCanBeConnectedOutputByOutletHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-        this.fMediator = fMediator;
-        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
+        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
+        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
     }
-    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) {
+    handle() {
+        const isValid = this.isValidRequest();
+        if (!isValid) {
             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);
+        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) {
                 }
             }
         }
-        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);
-            }
-        }
     }
-    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)
-        ];
+    isValidRequest() {
+        const result = this.fDraggableDataContext.draggableItems.length === 1 &&
+            this.fDraggableDataContext.draggableItems[0].type === EFDraggableType.NODE;
+        return result;
     }
-    isNodeOutput(targetElement, node) {
-        const outlets = this.fComponentsStore.fOutlets.filter((x) => node.isContains(x.hostElement));
-        return isNodeOutput(targetElement) && !outlets.length;
+    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: 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 }); }
+    getInputsForNode(node) {
+        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    }
+    findConnectionsUnderNode(node) {
+        const nodeRect = this.getElementRectInFlowHandler.handle(node.hostElement);
+        return this.fComponentsStore.fConnections.filter((x) => {
+            const intersection = RectExtensions.intersectionWithVector(nodeRect, x.vector.point1, x.vector.point2);
+            return (intersection || []).length > 0;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IsConnectionUnderNodeHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IsConnectionUnderNodeHandler }); }
 }
-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: IsConnectionUnderNodeHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: FFlowMediator }, { type: FindFirstCanBeConnectedOutputByOutletHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }] });
 
-class ReassignConnectionDragHandler {
+class ConnectionDragHandler {
     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;
+        this.type = EFDraggableType.CONNECTION;
+        this.onPointerDownVector = VectorExtensions.initialize();
+        this.fromConnectorSide = EFConnectableSide.BOTTOM;
+        this.toConnectorSide = EFConnectableSide.TOP;
     }
     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);
+        this.fromConnectorSide = fromConnector.fConnectableSide;
+        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.fInputId);
+        this.toConnectorSide = toConnector.fConnectableSide;
+        this.onPointerDownVector = this.fMediator.send(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.fBehavior, fromConnector.fConnectableSide, toConnector.fConnectableSide));
     }
     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);
+        const fromPoint = Point.fromPoint(this.onPointerDownVector.point1).add(difference);
+        const toPoint = Point.fromPoint(this.onPointerDownVector.point2).add(difference);
+        this.connection.setVector(fromPoint, this.fromConnectorSide, toPoint, this.toConnectorSide);
         this.connection.redraw();
     }
-    complete() {
+}
+
+class ConnectionSourceDragHandler {
+    constructor(getInputRectInFlowHandler, fMediator, connection) {
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.fMediator = fMediator;
+        this.connection = connection;
+        this.type = EFDraggableType.CONNECTION;
+        this.fromConnectorRect = RectExtensions.initialize();
+        this.fromConnectorSide = EFConnectableSide.BOTTOM;
+        this.toConnectorRect = RectExtensions.initialize();
+        this.toConnectorSide = EFConnectableSide.TOP;
+    }
+    initialize() {
         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);
-        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.toConnectorRect = toConnector.rect;
+        this.toConnectorSide = toConnector.fConnectableSide;
+    }
+    move(difference) {
+        const fromConnectorRect = RectExtensions.addPoint(this.fromConnectorRect, difference);
+        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 FReassignConnectionEvent {
-    constructor(connectionId, fOutputId, oldFInputId, newFInputId) {
-        this.connectionId = connectionId;
-        this.fOutputId = fOutputId;
-        this.oldFInputId = oldFInputId;
-        this.newFInputId = newFInputId;
+class ConnectionTargetDragHandler {
+    constructor(getInputRectInFlowHandler, fMediator, connection) {
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.fMediator = fMediator;
+        this.connection = connection;
+        this.type = EFDraggableType.CONNECTION;
+        this.fromConnectorRect = RectExtensions.initialize();
+        this.fromConnectorSide = EFConnectableSide.BOTTOM;
+        this.toConnectorRect = RectExtensions.initialize();
+        this.toConnectorSide = EFConnectableSide.TOP;
+    }
+    initialize() {
+        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);
+        this.toConnectorRect = toConnector.rect;
+        this.toConnectorSide = toConnector.fConnectableSide;
+    }
+    move(difference) {
+        const toConnectorRect = RectExtensions.addPoint(this.toConnectorRect, difference);
+        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();
     }
 }
 
-class ReassignConnectionOnPointerUp {
-    get fDraggable() {
-        return this.fComponentsStore.fDraggable;
+class NodeDragHandler {
+    constructor(fDraggableDataContext, fNode) {
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fNode = fNode;
+        this.type = EFDraggableType.NODE;
+        this.onPointerDownPosition = PointExtensions.initialize();
+        this.onPointerDownPosition = this.fNode.position;
     }
-    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler) {
+    move(difference) {
+        const position = Point.fromPoint(this.onPointerDownPosition).add(difference);
+        this.fNode.updatePosition(position);
+        this.fNode.redraw();
+        this.fDraggableDataContext.fLineAlignment?.handle(difference);
+    }
+    complete() {
+        this.fNode.completeDrag();
+    }
+}
+
+class NodeOnPointerUp {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
+    }
+    constructor(fComponentsStore, fDraggableDataContext, isConnectionUnderNodeHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
+        this.isConnectionUnderNodeHandler = isConnectionUnderNodeHandler;
     }
     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));
-                }
+        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
+        let difference = pointerPositionInFlow.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
+        const isDragNodes = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.NODE);
+        if (isDragNodes) {
+            const nearestIntersection = this.fDraggableDataContext.fLineAlignment?.findNearestCoordinate(difference);
+            if (nearestIntersection) {
+                difference.x = nearestIntersection.xResult.value ? (difference.x - nearestIntersection.xResult.distance) : difference.x;
+                difference.y = nearestIntersection.yResult.value ? (difference.y - nearestIntersection.yResult.distance) : difference.y;
             }
-            handler.complete();
+            this.fDraggableDataContext.draggableItems.forEach((x) => {
+                x.move(difference);
+                x.complete?.();
+            });
+            this.isConnectionUnderNodeHandler.handle();
+            this.fDraggableDataContext.fLineAlignment?.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: NodeOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: IsConnectionUnderNodeHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NodeOnPointerUp }); }
 }
-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: NodeOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: IsConnectionUnderNodeHandler }] });
 
-class ReassignConnectionPrepareDragSequence {
+class NodePrepareDragSequence {
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, getInputRectInFlowHandler, fMediator, updateConnectionLayerHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, updateNodeLayerHandler, getInputRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.getConnectionHandler = getConnectionHandler;
+        this.updateNodeLayerHandler = updateNodeLayerHandler;
         this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
+        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
         this.fMediator = fMediator;
-        this.updateConnectionLayerHandler = updateConnectionLayerHandler;
     }
     handle(event) {
+        const node = this.fComponentsStore.findNode(event.targetElement);
         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 (node && !node.disabled && !this.fDraggableDataContext.draggableItems.length) {
+            if (isNodeDragHandle(event.targetElement)) {
+                if (!this.fDraggableDataContext.selectedItems.includes(node)) {
+                    this.fDraggableDataContext.selectedItems.push(node);
+                    node.select();
+                    this.fDraggableDataContext.isSelectedChanged = true;
+                }
+                this.updateNodeLayerHandler.handle(node);
+                const itemsToDrag = this.calculateDraggableConnectionsAndNodes();
+                const draggedNodes = itemsToDrag.filter((x) => {
+                    return x.type === EFDraggableType.NODE;
+                }).map((x) => x.fNode);
+                this.fDraggableDataContext.fLineAlignment?.initialize(this.fComponentsStore.fNodes, draggedNodes);
+                this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
+                this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(this.transform.scale);
+                this.fDraggableDataContext.draggableItems = itemsToDrag;
             }
         }
-        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 }); }
+    calculateDraggableConnectionsAndNodes() {
+        let itemsToDrag = [];
+        const selectedNodes = this.fDraggableDataContext.selectedItems.map((x) => {
+            return this.fComponentsStore.findNode(x.hostElement);
+        }).filter((x) => !!x);
+        const nodeDragHandlers = selectedNodes.map((x) => new NodeDragHandler(this.fDraggableDataContext, x));
+        itemsToDrag = nodeDragHandlers;
+        const allOutputIds = selectedNodes.reduce((result, x) => {
+            return result.concat(this.getOutputsForNode(x));
+        }, []).map((x) => x.id);
+        const allInputIds = selectedNodes.reduce((result, x) => {
+            return result.concat(this.getInputsForNode(x));
+        }, []).map((x) => x.id);
+        nodeDragHandlers.forEach((nodeHandler) => {
+            const outputConnections = this.getOutgoingConnectionsHandler.handle(this.getOutputsForNode(nodeHandler.fNode));
+            outputConnections.forEach((c) => {
+                if (allInputIds.includes(c.fInputId)) {
+                    itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
+                }
+                else {
+                    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.fConnectionId === c.fConnectionId);
+                    if (index !== -1) {
+                        itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
+                    }
+                }
+                else {
+                    itemsToDrag.push(new ConnectionTargetDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
+                }
+            });
+        });
+        return itemsToDrag;
+    }
+    getInputsForNode(node) {
+        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    }
+    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: 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: ReassignConnectionPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NodePrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: FFlowMediator }, { type: UpdateConnectionLayerHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: UpdateNodeLayerHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: FFlowMediator }] });
 
-const CONNECTIONS_PROVIDERS = [
-    FindFirstCanBeConnectedOutputByOutletHandler,
-    CreateConnectionOnPointerUp,
-    CreateConnectionPrepareDragSequence,
-    FirstNotConnectedInputOfNodeUnderPointerHandler,
-    InputsUnderPointerHandler,
-    FindInputsUnderPointerHandler,
-    ReassignConnectionOnPointerUp,
-    ReassignConnectionPrepareDragSequence
+const NODE_PROVIDERS = [
+    NodeOnPointerUp,
+    NodePrepareDragSequence,
+    IsConnectionUnderNodeHandler
 ];
 
-class FCreateNodeEvent {
-    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();
+class GetCanBeSelectedItemsHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
     }
-    getStyle(position) {
-        return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
+    get fConnections() {
+        return this.fComponentsStore.fConnections;
     }
-    initialize() {
-        this.onPointerDownRect = this.getExternalItemRect();
-        this.placeholder = DomElementExtensions.deepCloneNode(this.externalItem.hostElement);
-        document.body.appendChild(this.placeholder);
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    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);
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
     }
-    move(difference) {
-        this.difference = difference;
-        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
-        this.placeholder.setAttribute('style', this.getStyle(position));
+    handle() {
+        const nodeRects = this.getNodesWithRects();
+        const lineRects = this.getConnectionsWithRects();
+        const result = [...nodeRects, ...lineRects].filter((x) => {
+            return !this.fDraggableDataContext.selectedItems.includes(x.element);
+        });
+        return result;
     }
-    getPlaceholderRect() {
-        return RectExtensions.fromElement(this.placeholder);
+    getNodesWithRects() {
+        return this.fNodes.map((x) => {
+            const rect = this.getElementRectInFlowHandler.handle(x.hostElement);
+            return {
+                element: x,
+                rect: RectExtensions.mult(rect, this.transform.scale)
+            };
+        });
     }
-    complete() {
-        document.body.removeChild(this.placeholder);
+    getConnectionsWithRects() {
+        return this.fConnections.map((x) => {
+            const rect = this.getElementRectInFlowHandler.handle(x.boundingElement);
+            return {
+                element: x,
+                rect: RectExtensions.mult(rect, this.transform.scale)
+            };
+        });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetCanBeSelectedItemsHandler, 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: GetCanBeSelectedItemsHandler }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetCanBeSelectedItemsHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
-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 = [];
-    }
-    registerItem(item) {
-        this.items.push(item);
-    }
-    getItem(element) {
-        return this.items.find(item => item.hostElement === element);
-    }
-    removeItem(item) {
-        const index = this.items.indexOf(item);
-        if (index !== -1) {
-            this.items.splice(index, 1);
-        }
+class SelectionAreaDragHandle {
+    get canvasPosition() {
+        return Point.fromPoint(this.fComponentsStore.fCanvas.transform.position).add(this.fComponentsStore.fCanvas.transform.scaledPosition);
     }
-    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: FExternalItemService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-let uniqueId$1 = 0;
-class FExternalItemDirective extends FExternalItemBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
+    constructor(fComponentsStore, fDraggableDataContext, injector) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.injector = injector;
+        this.type = EFDraggableType.SELECTION;
+        this.canBeSelected = [];
+        this.selectedByMove = [];
     }
-    constructor(elementReference, fExternalItemService) {
-        super();
-        this.elementReference = elementReference;
-        this.fExternalItemService = fExternalItemService;
-        this.id = `f-external-item-${uniqueId$1++}`;
+    initialize() {
+        this.canBeSelected = this.injector.get(GetCanBeSelectedItemsHandler).handle();
+        this.fDraggableDataContext.fSelectionArea?.show();
+        this.fDraggableDataContext.fSelectionArea?.draw({
+            left: this.fDraggableDataContext.onPointerDownPosition.x,
+            top: this.fDraggableDataContext.onPointerDownPosition.y,
+            width: 0,
+            height: 0
+        });
     }
-    ngOnInit() {
-        this.fExternalItemService.registerItem(this);
+    move(difference) {
+        const currentPoint = Point.fromPoint(difference).add(this.fDraggableDataContext.onPointerDownPosition);
+        const x = Math.min(this.fDraggableDataContext.onPointerDownPosition.x, currentPoint.x);
+        const y = Math.min(this.fDraggableDataContext.onPointerDownPosition.y, currentPoint.y);
+        const width = Math.abs(difference.x);
+        const height = Math.abs(difference.y);
+        this.fDraggableDataContext.fSelectionArea?.draw({ left: x, top: y, width, height });
+        this.selectedByMove = [];
+        this.canBeSelected.forEach((item) => {
+            item.element.deselect();
+            const itemRect = RectExtensions.addPoint(item.rect, this.canvasPosition);
+            const isIntersect = RectExtensions.intersectionWithRect(itemRect, RectExtensions.initialize(x, y, width, height));
+            if (isIntersect) {
+                item.element.select();
+                this.selectedByMove.push(item.element);
+            }
+        });
     }
-    ngOnDestroy() {
-        this.fExternalItemService.removeItem(this);
+    complete() {
+        this.fDraggableDataContext.fSelectionArea?.hide();
+        this.fDraggableDataContext.selectedItems.push(...this.selectedByMove);
+        if (this.selectedByMove.length > 0) {
+            this.fDraggableDataContext.isSelectedChanged = true;
+        }
     }
-    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 ExternalItemPrepareDragSequence {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+class SelectionAreaPrepareDragSequence {
+    get fFlow() {
+        return this.fComponentsStore.fFlow;
     }
-    constructor(fComponentsStore, fDraggableDataContext, fExternalItemService) {
+    constructor(fComponentsStore, fDraggableDataContext, injector) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.fExternalItemService = fExternalItemService;
+        this.injector = injector;
     }
     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);
+        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.fFlow.hostElement);
+        if (MouseEventExtensions.isShiftPressed(event.originalEvent) && this.fDraggableDataContext.fSelectionArea) {
             this.fDraggableDataContext.draggableItems = [
-                new ExternalItemDragHandler(item)
+                new SelectionAreaDragHandle(this.fComponentsStore, this.fDraggableDataContext, this.injector)
             ];
+            this.fDraggableDataContext.onPointerDownScale = 1;
+            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(1);
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i0.Injector }] });
 
-class ExternalItemOnPointerUp {
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    get fCreateNode() {
-        return this.fComponentsStore.fDraggable.fCreateNode;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
-        this.fComponentsStore = fComponentsStore;
+class SelectionAreaOnPointerUp {
+    constructor(fDraggableDataContext) {
         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 FCreateNodeEvent(rectInCanvas, dragHandler.externalItem.data));
-            }
-            dragHandler.complete();
+        const isSelection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.SELECTION);
+        if (isSelection) {
+            this.fDraggableDataContext.draggableItems.forEach((x) => {
+                x.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExternalItemOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-const EXTERNAL_ITEM_PROVIDERS = [
-    ExternalItemOnPointerUp,
-    ExternalItemPrepareDragSequence
+const SELECTION_AREA_PROVIDERS = [
+    GetCanBeSelectedItemsHandler,
+    SelectionAreaPrepareDragSequence,
+    SelectionAreaOnPointerUp,
 ];
 
-class IsConnectionUnderNodeHandler {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler) {
+class SingleSelectOnPointerDown {
+    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, updateConnectionLayerHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
-        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
+        this.getConnectionHandler = getConnectionHandler;
+        this.updateConnectionLayerHandler = updateConnectionLayerHandler;
     }
-    handle() {
-        const isValid = this.isValidRequest();
-        if (!isValid) {
+    handle(event) {
+        if (!this.fComponentsStore.fFlow?.hostElement.contains(event.targetElement)) {
             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) {
+        const node = this.fComponentsStore.findNode(event.targetElement);
+        const connection = this.getConnectionHandler.handle(event.targetElement);
+        this.deselectAll(node, event);
+        let element;
+        if (this.fDraggableDataContext.selectedItems.length) {
+            element = this.fDraggableDataContext.selectedItems[0];
+        }
+        this.resetSelectionIfNotMultiselect(event);
+        if (node) {
+            if (!this.fDraggableDataContext.selectedItems.includes(node)) {
+                this.fDraggableDataContext.selectedItems.push(node);
+                if (element?.hostElement.dataset['fNodeId'] !== node.hostElement.dataset['fNodeId']) {
+                    this.fDraggableDataContext.isSelectedChanged = true;
                 }
             }
+            else {
+                this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(node), 1);
+            }
         }
+        else if (connection) {
+            this.updateConnectionLayerHandler.handle(connection);
+            if (!this.fDraggableDataContext.selectedItems.includes(connection)) {
+                this.fDraggableDataContext.selectedItems.push(connection);
+                if (element?.hostElement.id !== connection.hostElement.id) {
+                    this.fDraggableDataContext.isSelectedChanged = true;
+                }
+            }
+            else {
+                this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(connection), 1);
+            }
+        }
+        this.selectIfNotSelected();
     }
-    isValidRequest() {
-        const result = this.fDraggableDataContext.draggableItems.length === 1 &&
-            this.fDraggableDataContext.draggableItems[0].type === EFDraggableType.NODE;
-        return result;
-    }
-    getOutputsForNode(node) {
-        return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
+    deselectAll(node, event) {
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            if (x !== node || (!isNodeOutlet(event.targetElement) && !isNodeOutput(event.targetElement))) {
+                x.deselect();
+            }
+        });
     }
-    getInputsForNode(node) {
-        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    resetSelectionIfNotMultiselect(event) {
+        const isMultiselect = MouseEventExtensions.isCommandButton(event.originalEvent) ||
+            MouseEventExtensions.isShiftPressed(event.originalEvent);
+        if (!isMultiselect) {
+            this.fDraggableDataContext.selectedItems = [];
+        }
     }
-    findConnectionsUnderNode(node) {
-        const nodeRect = this.getElementRectInFlowHandler.handle(node.hostElement);
-        return this.fComponentsStore.fConnections.filter((x) => {
-            const intersection = RectExtensions.intersectionWithVector(nodeRect, x.vector.point1, x.vector.point2);
-            return (intersection || []).length > 0;
+    selectIfNotSelected() {
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            if (!x.isSelected()) {
+                x.select();
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IsConnectionUnderNodeHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IsConnectionUnderNodeHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: UpdateConnectionLayerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SingleSelectOnPointerDown }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IsConnectionUnderNodeHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SingleSelectOnPointerDown, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: UpdateConnectionLayerHandler }] });
 
-class ConnectionDragHandler {
-    constructor(getInputRectInFlowHandler, fMediator, connection) {
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.fMediator = fMediator;
-        this.connection = connection;
-        this.type = EFDraggableType.CONNECTION;
-        this.onPointerDownVector = VectorExtensions.initialize();
-        this.fromConnectorSide = EFConnectableSide.BOTTOM;
-        this.toConnectorSide = EFConnectableSide.TOP;
+const SINGLE_SELECT_PROVIDERS = [
+    SingleSelectOnPointerDown
+];
+
+const F_DRAGGABLE = new InjectionToken('F_DRAGGABLE');
+const MOUSE_EVENT_IGNORE_TIME = 800;
+class FDraggableBase {
+    isSyntheticEvent(event) {
+        const isSyntheticEvent = !!this.lastTouchEventTime &&
+            (this.lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now());
+        return isSyntheticEvent;
     }
-    initialize() {
-        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.fMediator.send(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.fBehavior, fromConnector.fConnectableSide, toConnector.fConnectableSide));
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.mouseListeners = EventExtensions.emptyListener();
+        this.touchListeners = EventExtensions.emptyListener();
+        this.startListeners = EventExtensions.emptyListener();
+        this.lastTouchEventTime = 0;
+        this.isDragStarted = false;
+        this.dragStartThreshold = 5;
+        this.dragStartDelay = 0;
+        this.dragStartTime = 0;
+        this.dragStartPosition = PointExtensions.initialize();
+        this.moveHandler = this.checkDragSequenceToStart;
+        this.onMouseDown = (event) => {
+            const isSyntheticEvent = this.isSyntheticEvent(event);
+            const isFakeEvent = isFakeMousedownFromScreenReader(event);
+            const mouseEvent = new IMouseEvent(event);
+            if (isSyntheticEvent || isFakeEvent || this.disabled) {
+                return;
+            }
+            let result = this.onPointerDown(mouseEvent);
+            if (result) {
+                this.dragStartTime = Date.now();
+                this.dragStartPosition = mouseEvent.getPosition();
+                this.ngZone.runOutsideAngular(() => {
+                    this.document?.addEventListener('mousemove', this.onMouseMove);
+                    this.document?.addEventListener('mouseup', this.onMouseUp);
+                });
+                this.mouseListeners = () => {
+                    this.document?.removeEventListener('mousemove', this.onMouseMove);
+                    this.document?.removeEventListener('mouseup', this.onMouseUp);
+                };
+            }
+        };
+        this.onTouchDown = (event) => {
+            const isFakeEvent = isFakeTouchstartFromScreenReader(event);
+            const touchEvent = new ITouchDownEvent(event);
+            if (isFakeEvent || this.disabled) {
+                return;
+            }
+            let result = this.onPointerDown(new ITouchDownEvent(event));
+            if (result) {
+                this.dragStartTime = Date.now();
+                this.dragStartPosition = touchEvent.getPosition();
+                this.ngZone.runOutsideAngular(() => {
+                    this.document?.addEventListener('touchmove', this.onTouchMove);
+                    this.document?.addEventListener('touchend', this.onTouchUp);
+                });
+                this.touchListeners = () => {
+                    this.document?.removeEventListener('touchmove', this.onTouchMove);
+                    this.document?.removeEventListener('touchend', this.onTouchUp);
+                };
+            }
+        };
+        this.onMouseMove = (event) => {
+            this.moveHandler(new IMouseEvent(event));
+        };
+        this.onTouchMove = (event) => {
+            this.moveHandler(new ITouchMoveEvent(event));
+        };
+        this.onMouseUp = (event) => {
+            if (this.isDragStarted) {
+                this.onPointerUp(new IMouseEvent(event));
+            }
+            this.endDragSequence();
+        };
+        this.onTouchUp = (event) => {
+            if (this.isDragStarted) {
+                this.onPointerUp(new ITouchUpEvent(event));
+            }
+            this.endDragSequence();
+        };
     }
-    move(difference) {
-        const fromPoint = Point.fromPoint(this.onPointerDownVector.point1).add(difference);
-        const toPoint = Point.fromPoint(this.onPointerDownVector.point2).add(difference);
-        this.connection.setVector(fromPoint, this.fromConnectorSide, toPoint, this.toConnectorSide);
-        this.connection.redraw();
+    checkDragSequenceToStart(event) {
+        const pointerPosition = event.getPosition();
+        if (!this.isDragStarted) {
+            const distanceX = Math.abs(pointerPosition.x - this.dragStartPosition.x);
+            const distanceY = Math.abs(pointerPosition.y - this.dragStartPosition.y);
+            const isOverThreshold = distanceX + distanceY >= this.dragStartThreshold;
+            if (isOverThreshold) {
+                const isDelayElapsed = Date.now() >= this.dragStartTime + this.dragStartDelay;
+                if (!isDelayElapsed) {
+                    this.endDragSequence();
+                    return;
+                }
+                event.preventDefault();
+                this.prepareDragSequence(event);
+                this.isDragStarted = true;
+                this.moveHandler = this.onPointerMove;
+                if (isTouchEvent(event.originalEvent)) {
+                    this.lastTouchEventTime = Date.now();
+                }
+            }
+        }
     }
+    endDragSequence() {
+        this.isDragStarted = false;
+        this.moveHandler = this.checkDragSequenceToStart;
+        this.mouseListeners();
+        this.mouseListeners = EventExtensions.emptyListener();
+        this.touchListeners();
+        this.touchListeners = EventExtensions.emptyListener();
+        this.finalizeDragSequence();
+    }
+    subscribe(document) {
+        if (this.document) {
+            this.unsubscribe();
+        }
+        this.document = document;
+        this.ngZone.runOutsideAngular(() => {
+            document.addEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
+            document.addEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
+        });
+        this.startListeners = () => {
+            document.removeEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
+            document.removeEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
+        };
+    }
+    unsubscribe() {
+        this.startListeners();
+        this.startListeners = EventExtensions.emptyListener();
+        this.touchListeners();
+        this.touchListeners = EventExtensions.emptyListener();
+        this.mouseListeners();
+        this.mouseListeners = EventExtensions.emptyListener();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FDraggableBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }] });
+function isTouchEvent(event) {
+    return event.type[0] === 't';
+}
+function isFakeMousedownFromScreenReader(event) {
+    return event.buttons === 0 || (event.offsetX === 0 && event.offsetY === 0);
+}
+function isFakeTouchstartFromScreenReader(event) {
+    const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0]);
+    return (!!touch &&
+        touch.identifier === -1 &&
+        (touch.radiusX == null || touch.radiusX === 1) &&
+        (touch.radiusY == null || touch.radiusY === 1));
 }
 
-class ConnectionSourceDragHandler {
-    constructor(getInputRectInFlowHandler, fMediator, connection) {
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+class FDraggableDirective extends FDraggableBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, fDraggableDataContext, ngZone, injector, fComponentsStore, fMediator, doc) {
+        super(ngZone);
+        this.elementReference = elementReference;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.injector = injector;
+        this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
-        this.connection = connection;
-        this.type = EFDraggableType.CONNECTION;
-        this.fromConnectorRect = RectExtensions.initialize();
-        this.fromConnectorSide = EFConnectableSide.BOTTOM;
-        this.toConnectorRect = RectExtensions.initialize();
-        this.toConnectorSide = EFConnectableSide.TOP;
+        this.doc = doc;
+        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();
     }
-    initialize() {
-        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);
-        this.toConnectorRect = toConnector.rect;
-        this.toConnectorSide = toConnector.fConnectableSide;
+    ngOnInit() {
+        this.fComponentsStore.fDraggable = this;
     }
-    move(difference) {
-        const fromConnectorRect = RectExtensions.addPoint(this.fromConnectorRect, difference);
-        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();
+    ngAfterViewInit() {
+        super.subscribe(this.doc);
+    }
+    onPointerDown(event) {
+        this.fDraggableDataContext.reset();
+        let result = event.isMouseLeftButton();
+        this.injector.get(SingleSelectOnPointerDown).handle(event);
+        this.injector.get(ReassignConnectionPrepareDragSequence).handle(event);
+        this.injector.get(CreateConnectionPrepareDragSequence).handle(event);
+        if (!result) {
+            this.finalizeDragSequence();
+        }
+        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.fDraggableDataContext.reset();
     }
-}
-
-class ConnectionTargetDragHandler {
-    constructor(getInputRectInFlowHandler, fMediator, connection) {
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.fMediator = fMediator;
-        this.connection = connection;
-        this.type = EFDraggableType.CONNECTION;
-        this.fromConnectorRect = RectExtensions.initialize();
-        this.fromConnectorSide = EFConnectableSide.BOTTOM;
-        this.toConnectorRect = RectExtensions.initialize();
-        this.toConnectorSide = EFConnectableSide.TOP;
+    finalizeDragSequence() {
+        this.emitSelectionChangeEvent();
     }
-    initialize() {
-        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);
-        this.toConnectorRect = toConnector.rect;
-        this.toConnectorSide = toConnector.fConnectableSide;
+    emitSelectionChangeEvent() {
+        if (!this.fDraggableDataContext.isSelectedChanged) {
+            return;
+        }
+        const result = this.fMediator.send(new GetSelectionRequest());
+        this.fSelectionChange.emit(result);
     }
-    move(difference) {
-        const toConnectorRect = RectExtensions.addPoint(this.toConnectorRect, difference);
-        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();
+    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: FFlowMediator }, { 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: FFlowMediator }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { disabled: [{
+                type: Input,
+                args: ['fDraggableDisabled']
+            }], fSelectionChange: [{
+                type: Output
+            }], fCreateNode: [{
+                type: Output
+            }], fReassignConnection: [{
+                type: Output
+            }], fCreateConnection: [{
+                type: Output
+            }] } });
 
-class NodeDragHandler {
-    constructor(fDraggableDataContext, fNode) {
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fNode = fNode;
-        this.type = EFDraggableType.NODE;
-        this.onPointerDownPosition = PointExtensions.initialize();
-        this.onPointerDownPosition = this.fNode.position;
-    }
-    move(difference) {
-        const position = Point.fromPoint(this.onPointerDownPosition).add(difference);
-        this.fNode.updatePosition(position);
-        this.fNode.redraw();
-        this.fDraggableDataContext.fLineAlignment?.handle(difference);
-    }
-    complete() {
-        this.fNode.completeDrag();
+class FSelectionChangeEvent {
+    constructor(nodes, connections) {
+        this.nodes = nodes;
+        this.connections = connections;
     }
 }
 
-class NodeOnPointerUp {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, isConnectionUnderNodeHandler) {
-        this.fComponentsStore = fComponentsStore;
+let ClearSelectionHandler = class ClearSelectionHandler {
+    constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
-        this.isConnectionUnderNodeHandler = isConnectionUnderNodeHandler;
     }
-    handle(event) {
-        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
-        let difference = pointerPositionInFlow.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
-        const isDragNodes = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.NODE);
-        if (isDragNodes) {
-            const nearestIntersection = this.fDraggableDataContext.fLineAlignment?.findNearestCoordinate(difference);
-            if (nearestIntersection) {
-                difference.x = nearestIntersection.xResult.value ? (difference.x - nearestIntersection.xResult.distance) : difference.x;
-                difference.y = nearestIntersection.yResult.value ? (difference.y - nearestIntersection.yResult.distance) : difference.y;
-            }
-            this.fDraggableDataContext.draggableItems.forEach((x) => {
-                x.move(difference);
-                x.complete?.();
-            });
-            this.isConnectionUnderNodeHandler.handle();
-            this.fDraggableDataContext.fLineAlignment?.complete();
-        }
+    handle(request) {
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            x.deselect();
+        });
+        this.fDraggableDataContext.selectedItems = [];
+        this.fDraggableDataContext.isSelectedChanged = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NodeOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: IsConnectionUnderNodeHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NodeOnPointerUp }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NodeOnPointerUp, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ClearSelectionHandler, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ClearSelectionHandler }); }
+};
+ClearSelectionHandler = __decorate([
+    FHandlerRegister(ClearSelectionRequest)
+], ClearSelectionHandler);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ClearSelectionHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: IsConnectionUnderNodeHandler }] });
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-class NodePrepareDragSequence {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
+class GetConnectionVectorRequest {
+    constructor(outputRect, inputRect, behavior, outputSide, inputSide) {
+        this.outputRect = outputRect;
+        this.inputRect = inputRect;
+        this.behavior = behavior;
+        this.outputSide = outputSide;
+        this.inputSide = inputSide;
     }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+}
+
+let GetConnectionVectorHandler = class GetConnectionVectorHandler {
+    constructor() {
+        this.behaviorHandlers = {
+            [EFConnectionBehavior.FLOATING.toString()]: this.floatingBehavior,
+            // [EFConnectionBehavior.FIXED.toString()]: this.fixedBehavior,
+            [EFConnectionBehavior.FIXED.toString()]: this.fixedOutboundBehaviour,
+        };
     }
-    constructor(fComponentsStore, fDraggableDataContext, updateNodeLayerHandler, getInputRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.updateNodeLayerHandler = updateNodeLayerHandler;
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
-        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
-        this.fMediator = fMediator;
+    handle(payload) {
+        const result = this.behaviorHandlers[payload.behavior](payload);
+        return result;
     }
-    handle(event) {
-        const node = this.fComponentsStore.findNode(event.targetElement);
-        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
-        if (node && !node.disabled && !this.fDraggableDataContext.draggableItems.length) {
-            if (isNodeDragHandle(event.targetElement)) {
-                if (!this.fDraggableDataContext.selectedItems.includes(node)) {
-                    this.fDraggableDataContext.selectedItems.push(node);
-                    node.select();
-                    this.fDraggableDataContext.isSelectedChanged = true;
-                }
-                this.updateNodeLayerHandler.handle(node);
-                const itemsToDrag = this.calculateDraggableConnectionsAndNodes();
-                const draggedNodes = itemsToDrag.filter((x) => {
-                    return x.type === EFDraggableType.NODE;
-                }).map((x) => x.fNode);
-                this.fDraggableDataContext.fLineAlignment?.initialize(this.fComponentsStore.fNodes, draggedNodes);
-                this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
-                this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(this.transform.scale);
-                this.fDraggableDataContext.draggableItems = itemsToDrag;
-            }
-        }
+    floatingBehavior(payload) {
+        const fromResult = RectExtensions.intersectionWithVector(payload.outputRect, payload.outputRect.gravityCenter, payload.inputRect.gravityCenter);
+        const toResult = RectExtensions.intersectionWithVector(payload.inputRect, payload.outputRect.gravityCenter, payload.inputRect.gravityCenter);
+        return {
+            point1: fromResult ? fromResult[1] : payload.outputRect.gravityCenter,
+            point2: toResult ? toResult[0] : payload.inputRect.gravityCenter,
+        };
     }
-    calculateDraggableConnectionsAndNodes() {
-        let itemsToDrag = [];
-        const selectedNodes = this.fDraggableDataContext.selectedItems.map((x) => {
-            return this.fComponentsStore.findNode(x.hostElement);
-        }).filter((x) => !!x);
-        const nodeDragHandlers = selectedNodes.map((x) => new NodeDragHandler(this.fDraggableDataContext, x));
-        itemsToDrag = nodeDragHandlers;
-        const allOutputIds = selectedNodes.reduce((result, x) => {
-            return result.concat(this.getOutputsForNode(x));
-        }, []).map((x) => x.id);
-        const allInputIds = selectedNodes.reduce((result, x) => {
-            return result.concat(this.getInputsForNode(x));
-        }, []).map((x) => x.id);
-        nodeDragHandlers.forEach((nodeHandler) => {
-            const outputConnections = this.getOutgoingConnectionsHandler.handle(this.getOutputsForNode(nodeHandler.fNode));
-            outputConnections.forEach((c) => {
-                if (allInputIds.includes(c.fInputId)) {
-                    itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
-                }
-                else {
-                    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.fConnectionId === c.fConnectionId);
-                    if (index !== -1) {
-                        itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
-                    }
-                }
-                else {
-                    itemsToDrag.push(new ConnectionTargetDragHandler(this.getInputRectInFlowHandler, this.fMediator, c));
-                }
-            });
-        });
-        return itemsToDrag;
+    fixedBehavior(payload) {
+        return {
+            point1: payload.outputRect.gravityCenter,
+            point2: payload.inputRect.gravityCenter,
+        };
     }
-    getInputsForNode(node) {
-        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    fixedOutboundBehaviour(payload) {
+        const point1 = positionFixedOutbound[payload.outputSide === EFConnectableSide.AUTO ? EFConnectableSide.BOTTOM : payload.outputSide](payload.outputRect);
+        const point2 = positionFixedOutbound[payload.inputSide === EFConnectableSide.AUTO ? EFConnectableSide.TOP : payload.inputSide](payload.inputRect);
+        return {
+            point1: point1,
+            point2: point2,
+        };
     }
-    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: 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
+        }] });
+const positionFixedOutbound = {
+    [EFConnectableSide.TOP]: (rect) => {
+        const result = new Point();
+        result.y = rect.y;
+        result.x = rect.x + rect.width / 2;
+        return result;
+    },
+    [EFConnectableSide.BOTTOM]: (rect) => {
+        const result = new Point();
+        result.y = rect.y + rect.height;
+        result.x = rect.x + rect.width / 2;
+        return result;
+    },
+    [EFConnectableSide.LEFT]: (rect) => {
+        const result = new Point();
+        result.x = rect.x;
+        result.y = rect.y + rect.height / 2;
+        return result;
+    },
+    [EFConnectableSide.RIGHT]: (rect) => {
+        const result = new Point();
+        result.x = rect.x + rect.width;
+        result.y = rect.y + rect.height / 2;
+        return result;
+    },
+};
+
+class GetOutputRectInFlowRequest {
+    constructor(fOutputId) {
+        this.fOutputId = fOutputId;
     }
-    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: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: FFlowMediator }] });
 
-const NODE_PROVIDERS = [
-    NodeOnPointerUp,
-    NodePrepareDragSequence,
-    IsConnectionUnderNodeHandler
-];
+function OutputNotFound(outputId) {
+    return new Error(`Output with id ${outputId} not found`);
+}
+function InputNotFound(inputId) {
+    return new Error(`Input with id ${inputId} not found`);
+}
+function requiredOutput() {
+    return new Error(`The node must contain at least one fOutput if there is an fOutlet`);
+}
 
-class GetCanBeSelectedItemsHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
-    }
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
+class GetOutputRectInFlowResponse {
+    constructor(rect, fConnectableSide) {
+        this.rect = rect;
+        this.fConnectableSide = fConnectableSide;
     }
+}
+
+class GetElementRectInFlowHandler {
     get transform() {
-        return this.fComponentsStore.fCanvas.transform;
+        return this.fComponentsStore.transform;
     }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
+    get flowHost() {
+        return this.fComponentsStore.flowHost;
+    }
+    constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
     }
-    handle() {
-        const nodeRects = this.getNodesWithRects();
-        const lineRects = this.getConnectionsWithRects();
-        const result = [...nodeRects, ...lineRects].filter((x) => {
-            return !this.fDraggableDataContext.selectedItems.includes(x.element);
-        });
+    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;
     }
-    getNodesWithRects() {
-        return this.fNodes.map((x) => {
-            const rect = this.getElementRectInFlowHandler.handle(x.hostElement);
-            return {
-                element: x,
-                rect: RectExtensions.mult(rect, this.transform.scale)
-            };
-        });
-    }
-    getConnectionsWithRects() {
-        return this.fConnections.map((x) => {
-            const rect = this.getElementRectInFlowHandler.handle(x.boundingElement);
-            return {
-                element: x,
-                rect: RectExtensions.mult(rect, this.transform.scale)
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetCanBeSelectedItemsHandler, 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: GetCanBeSelectedItemsHandler }); }
+    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: GetCanBeSelectedItemsHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetElementRectInFlowHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class SelectionAreaDragHandle {
-    get canvasPosition() {
-        return Point.fromPoint(this.fComponentsStore.fCanvas.transform.position).add(this.fComponentsStore.fCanvas.transform.scaledPosition);
-    }
-    constructor(fComponentsStore, fDraggableDataContext, injector) {
+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 GetSelectionRequest {
+}
+
+let GetSelectionHandler = class GetSelectionHandler {
+    constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
-        this.injector = injector;
-        this.type = EFDraggableType.SELECTION;
-        this.canBeSelected = [];
-        this.selectedByMove = [];
     }
-    initialize() {
-        this.canBeSelected = this.injector.get(GetCanBeSelectedItemsHandler).handle();
-        this.fDraggableDataContext.fSelectionArea?.show();
-        this.fDraggableDataContext.fSelectionArea?.draw({
-            left: this.fDraggableDataContext.onPointerDownPosition.x,
-            top: this.fDraggableDataContext.onPointerDownPosition.y,
-            width: 0,
-            height: 0
+    handle() {
+        let selectedNodes = [];
+        let selectedConnections = [];
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            if (x.hostElement.classList.contains('f-node')) {
+                selectedNodes.push(x.hostElement.dataset['fNodeId']);
+            }
+            else {
+                selectedConnections.push(x.hostElement.id);
+            }
         });
+        return new FSelectionChangeEvent(selectedNodes, selectedConnections);
     }
-    move(difference) {
-        const currentPoint = Point.fromPoint(difference).add(this.fDraggableDataContext.onPointerDownPosition);
-        const x = Math.min(this.fDraggableDataContext.onPointerDownPosition.x, currentPoint.x);
-        const y = Math.min(this.fDraggableDataContext.onPointerDownPosition.y, currentPoint.y);
-        const width = Math.abs(difference.x);
-        const height = Math.abs(difference.y);
-        this.fDraggableDataContext.fSelectionArea?.draw({ left: x, top: y, width, height });
-        this.selectedByMove = [];
-        this.canBeSelected.forEach((item) => {
-            item.element.deselect();
-            const itemRect = RectExtensions.addPoint(item.rect, this.canvasPosition);
-            const isIntersect = RectExtensions.intersectionWithRect(itemRect, RectExtensions.initialize(x, y, width, height));
-            if (isIntersect) {
-                item.element.select();
-                this.selectedByMove.push(item.element);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetSelectionHandler, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetSelectionHandler }); }
+};
+GetSelectionHandler = __decorate([
+    FHandlerRegister(GetSelectionRequest)
+], GetSelectionHandler);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetSelectionHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
+
+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);
             }
         });
     }
-    complete() {
-        this.fDraggableDataContext.fSelectionArea?.hide();
-        this.fDraggableDataContext.selectedItems.push(...this.selectedByMove);
-        if (this.selectedByMove.length > 0) {
-            this.fDraggableDataContext.isSelectedChanged = true;
-        }
+    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 SelectAllRequest {
 }
 
-class SelectionAreaPrepareDragSequence {
-    get fFlow() {
-        return this.fComponentsStore.fFlow;
+let SelectAllHandler = class SelectAllHandler {
+    constructor(fDataContext, fDraggableDataContext) {
+        this.fDataContext = fDataContext;
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-    constructor(fComponentsStore, fDraggableDataContext, injector) {
+    handle(request) {
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            x.deselect();
+        });
+        this.fDraggableDataContext.selectedItems = [];
+        this.fDataContext.fNodes.forEach((x) => {
+            x.select();
+            this.fDraggableDataContext.selectedItems.push(x);
+        });
+        this.fDataContext.fConnections.forEach((x) => {
+            x.select();
+            this.fDraggableDataContext.selectedItems.push(x);
+        });
+        this.fDraggableDataContext.isSelectedChanged = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectAllHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectAllHandler }); }
+};
+SelectAllHandler = __decorate([
+    FHandlerRegister(SelectAllRequest)
+], SelectAllHandler);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectAllHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
+
+class GetAllNodesRectHandler {
+    constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.injector = injector;
     }
-    handle(event) {
-        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.fFlow.hostElement);
-        if (MouseEventExtensions.isShiftPressed(event.originalEvent) && this.fDraggableDataContext.fSelectionArea) {
-            this.fDraggableDataContext.draggableItems = [
-                new SelectionAreaDragHandle(this.fComponentsStore, this.fDraggableDataContext, this.injector)
-            ];
-            this.fDraggableDataContext.onPointerDownScale = 1;
-            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(1);
-        }
+    handle() {
+        const fNodes = this.fComponentsStore.fNodes;
+        const rects = fNodes.map((x) => {
+            return RectExtensions.fromElement(x.hostElement);
+        });
+        const result = RectExtensions.union(rects);
+        return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaPrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetAllNodesRectHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetAllNodesRectHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetAllNodesRectHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class SelectionAreaOnPointerUp {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
+class GetConnectionHandler {
+    get fConnections() {
+        return this.fComponentsStore.fConnections;
     }
-    handle(event) {
-        const isSelection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.SELECTION);
-        if (isSelection) {
-            this.fDraggableDataContext.draggableItems.forEach((x) => {
-                x.complete?.();
-            });
-        }
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaOnPointerUp }); }
+    handle(element) {
+        const result = this.fConnections.find(c => c.isContains(element));
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetConnectionHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetConnectionHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SelectionAreaOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetConnectionHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
-
-const SELECTION_AREA_PROVIDERS = [
-    GetCanBeSelectedItemsHandler,
-    SelectionAreaPrepareDragSequence,
-    SelectionAreaOnPointerUp,
-];
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class SingleSelectOnPointerDown {
-    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, updateConnectionLayerHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.getConnectionHandler = getConnectionHandler;
-        this.updateConnectionLayerHandler = updateConnectionLayerHandler;
+class GetIncomingConnectionsHandler {
+    get fConnections() {
+        return this.fComponentsStore.fConnections;
     }
-    handle(event) {
-        if (!this.fComponentsStore.fFlow?.hostElement.contains(event.targetElement)) {
-            return;
-        }
-        const node = this.fComponentsStore.findNode(event.targetElement);
-        const connection = this.getConnectionHandler.handle(event.targetElement);
-        this.deselectAll(node, event);
-        let element;
-        if (this.fDraggableDataContext.selectedItems.length) {
-            element = this.fDraggableDataContext.selectedItems[0];
-        }
-        this.resetSelectionIfNotMultiselect(event);
-        if (node) {
-            if (!this.fDraggableDataContext.selectedItems.includes(node)) {
-                this.fDraggableDataContext.selectedItems.push(node);
-                if (element?.hostElement.id !== node.hostElement.id) {
-                    this.fDraggableDataContext.isSelectedChanged = true;
-                }
-            }
-            else {
-                this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(node), 1);
-            }
-        }
-        else if (connection) {
-            this.updateConnectionLayerHandler.handle(connection);
-            if (!this.fDraggableDataContext.selectedItems.includes(connection)) {
-                this.fDraggableDataContext.selectedItems.push(connection);
-                if (element?.hostElement.id !== connection.hostElement.id) {
-                    this.fDraggableDataContext.isSelectedChanged = true;
-                }
-            }
-            else {
-                this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(connection), 1);
-            }
-        }
-        this.selectIfNotSelected();
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
-    deselectAll(node, event) {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            if (x !== node || (!isNodeOutlet(event.targetElement) && !isNodeOutput(event.targetElement))) {
-                x.deselect();
-            }
+    handle(inputs) {
+        const inputsIds = inputs.map((x) => x.id);
+        return this.fConnections.filter((x) => {
+            return inputsIds.includes(x.fInputId);
         });
     }
-    resetSelectionIfNotMultiselect(event) {
-        const isMultiselect = MouseEventExtensions.isCommandButton(event.originalEvent) ||
-            MouseEventExtensions.isShiftPressed(event.originalEvent);
-        if (!isMultiselect) {
-            this.fDraggableDataContext.selectedItems = [];
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetIncomingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetIncomingConnectionsHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetIncomingConnectionsHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
+
+class GetOutgoingConnectionsHandler {
+    get fConnections() {
+        return this.fComponentsStore.fConnections;
     }
-    selectIfNotSelected() {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            if (!x.isSelected()) {
-                x.select();
-            }
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(outputs) {
+        const outputsIds = outputs.map((x) => x.id);
+        return this.fConnections.filter((x) => {
+            return outputsIds.includes(x.fOutputId);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: UpdateConnectionLayerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SingleSelectOnPointerDown }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutgoingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutgoingConnectionsHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SingleSelectOnPointerDown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetOutgoingConnectionsHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: UpdateConnectionLayerHandler }] });
-
-const SINGLE_SELECT_PROVIDERS = [
-    SingleSelectOnPointerDown
-];
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class FSelectionChangeEvent {
-    constructor(nodes, connections) {
-        this.nodes = nodes;
-        this.connections = connections;
+class GetInputRectInFlowHandler {
+    constructor(fComponentsStore, getElementRectInFlowHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+    }
+    handle(inputId) {
+        const input = this.fComponentsStore.fInputs.find((x) => x.id === inputId);
+        if (!input) {
+            throw InputNotFound(inputId);
+        }
+        const result = this.getElementRectInFlowHandler.handle(input.hostElement);
+        return { rect: result, fConnectableSide: input.fConnectableSide };
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetInputRectInFlowHandler, 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: GetInputRectInFlowHandler }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: GetInputRectInFlowHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }] });
 
-const MOUSE_EVENT_IGNORE_TIME = 800;
-class IDragAndDropBase {
-    isSyntheticEvent(event) {
-        const isSyntheticEvent = !!this.lastTouchEventTime &&
-            (this.lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now());
-        return isSyntheticEvent;
-    }
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.mouseListeners = EventExtensions.emptyListener();
-        this.touchListeners = EventExtensions.emptyListener();
-        this.startListeners = EventExtensions.emptyListener();
-        this.lastTouchEventTime = 0;
-        this.isDragStarted = false;
-        this.dragStartThreshold = 5;
-        this.dragStartDelay = 0;
-        this.dragStartTime = 0;
-        this.dragStartPosition = PointExtensions.initialize();
-        this.moveHandler = this.checkDragSequenceToStart;
-        this.onMouseDown = (event) => {
-            const isSyntheticEvent = this.isSyntheticEvent(event);
-            const isFakeEvent = isFakeMousedownFromScreenReader(event);
-            const mouseEvent = new IMouseEvent(event);
-            if (isSyntheticEvent || isFakeEvent || this.disabled) {
-                return;
-            }
-            let result = this.onPointerDown(mouseEvent);
-            if (result) {
-                this.dragStartTime = Date.now();
-                this.dragStartPosition = mouseEvent.getPosition();
-                this.ngZone.runOutsideAngular(() => {
-                    this.element.addEventListener('mousemove', this.onMouseMove);
-                    this.element.addEventListener('mouseup', this.onMouseUp);
-                });
-                this.mouseListeners = () => {
-                    this.element.removeEventListener('mousemove', this.onMouseMove);
-                    this.element.removeEventListener('mouseup', this.onMouseUp);
-                };
-            }
-        };
-        this.onTouchDown = (event) => {
-            const isFakeEvent = isFakeTouchstartFromScreenReader(event);
-            const touchEvent = new ITouchDownEvent(event);
-            if (isFakeEvent || this.disabled) {
-                return;
-            }
-            let result = this.onPointerDown(new ITouchDownEvent(event));
-            if (result) {
-                this.dragStartTime = Date.now();
-                this.dragStartPosition = touchEvent.getPosition();
-                this.ngZone.runOutsideAngular(() => {
-                    this.element.addEventListener('touchmove', this.onTouchMove);
-                    this.element.addEventListener('touchend', this.onTouchUp);
-                });
-                this.touchListeners = () => {
-                    this.element.removeEventListener('touchmove', this.onTouchMove);
-                    this.element.removeEventListener('touchend', this.onTouchUp);
-                };
-            }
-        };
-        this.onMouseMove = (event) => {
-            this.moveHandler(new IMouseEvent(event));
-        };
-        this.onTouchMove = (event) => {
-            this.moveHandler(new ITouchMoveEvent(event));
-        };
-        this.onMouseUp = (event) => {
-            if (this.isDragStarted) {
-                this.onPointerUp(new IMouseEvent(event));
-            }
-            this.endDragSequence();
-        };
-        this.onTouchUp = (event) => {
-            if (this.isDragStarted) {
-                this.onPointerUp(new ITouchUpEvent(event));
-            }
-            this.endDragSequence();
-        };
-    }
-    checkDragSequenceToStart(event) {
-        const pointerPosition = event.getPosition();
-        if (!this.isDragStarted) {
-            const distanceX = Math.abs(pointerPosition.x - this.dragStartPosition.x);
-            const distanceY = Math.abs(pointerPosition.y - this.dragStartPosition.y);
-            const isOverThreshold = distanceX + distanceY >= this.dragStartThreshold;
-            if (isOverThreshold) {
-                const isDelayElapsed = Date.now() >= this.dragStartTime + this.dragStartDelay;
-                if (!isDelayElapsed) {
-                    this.endDragSequence();
-                    return;
-                }
-                event.preventDefault();
-                this.prepareDragSequence(event);
-                this.isDragStarted = true;
-                this.moveHandler = this.onPointerMove;
-                if (isTouchEvent(event.originalEvent)) {
-                    this.lastTouchEventTime = Date.now();
-                }
-            }
-        }
+class UpdateNodeLayerHandler {
+    get fNodesContainer() {
+        return this.fComponentsStore.fCanvas?.fNodesContainer?.nativeElement;
     }
-    endDragSequence() {
-        this.isDragStarted = false;
-        this.moveHandler = this.checkDragSequenceToStart;
-        this.mouseListeners();
-        this.mouseListeners = EventExtensions.emptyListener();
-        this.touchListeners();
-        this.touchListeners = EventExtensions.emptyListener();
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
-    subscribe(elementToSubscribe) {
-        if (this.element) {
-            this.unsubscribe();
+    handle(node) {
+        const elements = Array.from(this.fNodesContainer.children);
+        const elementsCount = elements.length;
+        const targetIndex = elements.findIndex((x) => x === node.hostElement);
+        if (targetIndex !== elementsCount - 1) {
+            const afterElements = elements.splice(targetIndex + 1);
+            afterElements.forEach((x) => {
+                this.fNodesContainer.removeChild(x);
+                this.fNodesContainer.insertBefore(x, node.hostElement);
+            });
         }
-        this.element = elementToSubscribe;
-        this.ngZone.runOutsideAngular(() => {
-            this.element.addEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
-            this.element.addEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
-        });
-        this.startListeners = () => {
-            this.element.removeEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
-            this.element.removeEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
-        };
-    }
-    unsubscribe() {
-        this.startListeners();
-        this.startListeners = EventExtensions.emptyListener();
-        this.touchListeners();
-        this.touchListeners = EventExtensions.emptyListener();
-        this.mouseListeners();
-        this.mouseListeners = EventExtensions.emptyListener();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateNodeLayerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateNodeLayerHandler }); }
 }
-function isTouchEvent(event) {
-    return event.type[0] === 't';
-}
-function isFakeMousedownFromScreenReader(event) {
-    return event.buttons === 0 || (event.offsetX === 0 && event.offsetY === 0);
-}
-function isFakeTouchstartFromScreenReader(event) {
-    const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0]);
-    return (!!touch &&
-        touch.identifier === -1 &&
-        (touch.radiusX == null || touch.radiusX === 1) &&
-        (touch.radiusY == null || touch.radiusY === 1));
-}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateNodeLayerHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-const F_DRAGGABLE = new InjectionToken('F_DRAGGABLE');
-class FDraggableBase extends IDragAndDropBase {
-    constructor(ngZone) {
-        super(ngZone);
+class UpdateConnectionLayerHandler {
+    get fConnectionsContainer() {
+        return this.fComponentsStore.fCanvas?.fConnectionsContainer?.nativeElement;
+    }
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(connection) {
+        const elements = Array.from(this.fConnectionsContainer.children);
+        const elementsCount = elements.length;
+        const targetIndex = elements.findIndex((x) => x === connection.hostElement);
+        if (targetIndex !== elementsCount - 1) {
+            const afterElements = elements.splice(targetIndex + 1);
+            afterElements.forEach((x) => {
+                this.fConnectionsContainer.removeChild(x);
+                this.fConnectionsContainer.insertBefore(x, connection.hostElement);
+            });
+        }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateConnectionLayerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateConnectionLayerHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FDraggableBase, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i0.NgZone }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UpdateConnectionLayerHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class FDraggableDirective extends FDraggableBase {
+const COMMON_PROVIDERS = [
+    ClearSelectionHandler,
+    GetConnectionVectorHandler,
+    GetOutputRectInFlowHandler,
+    GetSelectionHandler,
+    RedrawConnectionsHandler,
+    SelectAllHandler,
+    GetAllNodesRectHandler,
+    GetConnectionHandler,
+    GetElementRectInFlowHandler,
+    GetInputRectInFlowHandler,
+    GetIncomingConnectionsHandler,
+    GetOutgoingConnectionsHandler,
+    UpdateConnectionLayerHandler,
+    UpdateNodeLayerHandler,
+];
+
+class FCanvasComponent extends FCanvasBase {
+    set position(value) {
+        if (!value) {
+            return;
+        }
+        const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
+        if (!PointExtensions.isEqual(position, value)) {
+            this.transform.position = value;
+            this.transform.scaledPosition = PointExtensions.initialize();
+            this.redraw();
+        }
+    }
+    set scale(value) {
+        if (!value) {
+            return;
+        }
+        this.transform.scale = value;
+        this.redraw();
+    }
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, fDraggableDataContext, ngZone, injector, fComponentsStore, document) {
-        super(ngZone);
+    constructor(getAllNodesRectHandler, elementReference, fComponentsStore) {
+        super();
+        this.getAllNodesRectHandler = getAllNodesRectHandler;
         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.fCanvasChange = new EventEmitter();
     }
     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');
-        }
+        this.fComponentsStore.fCanvas = this;
     }
-    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);
-        });
+    redraw() {
+        this.fComponentsStore.fBackground?.setTransform(this.transform);
+        this.hostElement.setAttribute("style", `transform: ${TransformModelExtensions.toString(this.transform)}`);
     }
-    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();
+    redrawWithAnimation() {
+        this.fComponentsStore.fBackground?.setTransform(this.transform);
+        this.hostElement.setAttribute("style", `transition: transform 0.15s ease-in-out; transform: ${TransformModelExtensions.toString(this.transform)}`);
+        setTimeout(() => {
+            this.redraw();
+        }, 150);
     }
-    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));
+    fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
+        const fNodesRect = this.getAllNodesRectHandler.handle();
+        const rect = RectExtensions.addPointToSize(fNodesRect, Point.fromPoint(toCenter).mult(2));
+        this.fitToParent(rect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fNodes.map((x) => {
+            return Point.fromPoint(x.position).sub(toCenter);
+        }));
+        animated ? this.redrawWithAnimation() : this.redraw();
+        this.completeDrag();
     }
-    ngOnDestroy() {
-        super.unsubscribe();
-        this.subscriptions$.unsubscribe();
+    oneToOne() {
+        const fNodesRect = this.getAllNodesRectHandler.handle();
+        this.oneToOneCentering(fNodesRect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fNodes.map((x) => {
+            return Point.fromPoint(x.position).sub(new Point(0, 0));
+        }));
+        this.redrawWithAnimation();
+        this.completeDrag();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FCanvasComponent, deps: [{ token: GetAllNodesRectHandler }, { token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], viewQueries: [{ propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div #fConnectionsContainer>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"[fNode]\"></ng-content>\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-canvas', exportAs: 'fComponent', host: {
+                        'class': 'f-component f-canvas',
+                    }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <div #fConnectionsContainer>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"[fNode]\"></ng-content>\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: GetAllNodesRectHandler }, { type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { fCanvasChange: [{
                 type: Output
+            }], position: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }], fNodesContainer: [{
+                type: ViewChild,
+                args: ['fNodesContainer', { static: true }]
+            }], fConnectionsContainer: [{
+                type: ViewChild,
+                args: ['fConnectionsContainer', { static: true }]
             }] } });
 
 class LineElement {
@@ -4250,6 +4293,15 @@ class FFlowComponent extends FFlowBase {
     getNodesRect() {
         return this.getAllNodesRectHandler.handle();
     }
+    getSelection() {
+        return this.fMediator.send(new GetSelectionRequest());
+    }
+    selectAll() {
+        this.fMediator.send(new SelectAllRequest());
+    }
+    clearSelection() {
+        this.fMediator.send(new ClearSelectionRequest());
+    }
     ngOnDestroy() {
         this.subscription$.unsubscribe();
     }
@@ -4385,5 +4437,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, 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 };
+export { CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CanvasDragHandler, CanvasOnPointerUp, CanvasPrepareDragSequence, ClearSelectionHandler, ClearSelectionRequest, 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, GetSelectionHandler, GetSelectionRequest, 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, SelectAllRequest, SelectionAreaDragHandle, SelectionAreaOnPointerUp, SelectionAreaPrepareDragSequence, SingleSelectOnPointerDown, UpdateConnectionLayerHandler, UpdateNodeLayerHandler, castToConnectionBehavior, castToConnectionType, getExternalItem, getFlowUid, isExternalItem, isNode, isNodeDragHandle, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility, requiredOutput };
 //# sourceMappingURL=foblex-flow.mjs.map