@foblex/flow 1.2.5 → 1.2.7

package/fesm2022/foblex-flow.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Input, Directive, Injectable, ContentChild, Inject, ViewChild, ContentChildren, Optional, SkipSelf, EventEmitter, Output, HostBinding, NgModule } from '@angular/core';
-import { TransformModelExtensions, DomElementExtensions, RectExtensions, sanitizeElementId, PointExtensions, Point, GuidExtensions, VectorExtensions, SizeExtensions, BooleanExtensions, EventExtensions, MouseEventExtensions, IDragAndDropBase } from '@foblex/core';
-import { Subject, Observable, Subscription, startWith, debounceTime } from 'rxjs';
+import { InjectionToken, Component, ChangeDetectionStrategy, Input, Directive, Injectable, ContentChild, Inject, ViewChild, ContentChildren, EventEmitter, Output, Optional, SkipSelf, HostBinding, NgModule } from '@angular/core';
+import { TransformModelExtensions, DomElementExtensions, RectExtensions, sanitizeElementId, PointExtensions, Point, GuidExtensions, VectorExtensions, SizeExtensions, MouseEventExtensions, IDragAndDropBase, BooleanExtensions, EventExtensions } from '@foblex/core';
+import { Subject, Subscription, Observable, startWith, debounceTime } from 'rxjs';
 import { DOCUMENT, CommonModule } from '@angular/common';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
@@ -1375,2461 +1375,2492 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-const COMMON_PROVIDERS = [
-    GetAllNodesRectHandler,
-    GetConnectionVectorHandler,
-    GetConnectionHandler,
-    GetElementRectInFlowHandler,
-    GetOutputRectInFlowHandler,
-    GetInputRectInFlowHandler,
-    GetIncomingConnectionsHandler,
-    GetOutgoingConnectionsHandler,
-    UpdateNodeLayerHandler,
-];
+var EDraggableType;
+(function (EDraggableType) {
+    EDraggableType["NODE"] = "node";
+    EDraggableType["REASSIGN_CONNECTION"] = "reassign-connection";
+    EDraggableType["CREATE_CONNECTION"] = "create-connection";
+    EDraggableType["CONNECTION"] = "connection";
+    EDraggableType["CANVAS"] = "canvas";
+    EDraggableType["PALETTE_ITEM"] = "palette-item";
+    EDraggableType["SELECTION"] = "selection";
+})(EDraggableType || (EDraggableType = {}));
 
-class FConnectorBase {
-    constructor() {
-        this.stateChanges = new Subject();
-        this.side = EConnectorSide.BOTTOM;
+class CanvasDragHandler {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+        this.type = EDraggableType.CANVAS;
+        this.onPointerDownPosition = PointExtensions.initialize();
     }
-    isContains(element) {
-        return this.hostElement.contains(element);
+    initialize() {
+        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
     }
-    setConnected(isConnected) {
-        this.isConnected = isConnected;
+    move(difference) {
+        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
+        this.fComponentsStore.fCanvas.redraw();
+    }
+    complete() {
+        this.fComponentsStore.fCanvas.completeDrag();
     }
 }
 
-const F_NODE_INPUT = new InjectionToken('F_NODE_INPUT');
-class FNodeInputBase extends FConnectorBase {
+class FDraggableDataContext {
     constructor() {
-        super(...arguments);
-        this.isConnected = false;
+        this.selectedItems = [];
+        this.onPointerDownScale = 1;
+        this.onPointerDownPosition = new Point(0, 0);
+        this.draggableItems = [];
     }
-    get canBeConnected() {
-        return !this.disabled && (this.multiple ? true : !this.isConnected);
+    reset() {
+        this.draggableItems = [];
+        this.onPointerDownScale = 1;
+        this.onPointerDownPosition = new Point(0, 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeInputBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputBase, decorators: [{
-            type: Directive
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext, decorators: [{
+            type: Injectable
         }] });
 
-function isNodeInput(element) {
-    return !!element.closest('[fNodeInput]');
+class CanvasOnPointerUp {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(event) {
+        const isDragCanvas = this.fDraggableDataContext.draggableItems.some((x) => x.type === EDraggableType.CANVAS);
+        if (isDragCanvas) {
+            this.fDraggableDataContext.draggableItems.forEach((x) => {
+                x.complete?.();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasOnPointerUp }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasOnPointerUp, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-const F_NODE = new InjectionToken('F_NODE');
-class FNodeBase {
-    constructor() {
-        this.stateChanges = new Subject();
-        this._position = PointExtensions.initialize();
-    }
-    isContains(element) {
-        return this.hostElement.contains(element);
+class CanvasPrepareDragSequence {
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    redraw() {
-        this.hostElement.setAttribute('style', 'transform: translate(' + this.position.x + 'px,' + this.position.y + 'px)');
+    constructor(fComponentsStore, fDraggableDataContext) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-    deselect() {
-        this.hostElement.classList.remove(F_SELECTED_CLASS);
+    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)
+            ];
+        }
     }
-    select() {
-        this.hostElement.classList.add(F_SELECTED_CLASS);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasPrepareDragSequence }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasPrepareDragSequence, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
+
+const CANVAS_PROVIDERS = [
+    CanvasOnPointerUp,
+    CanvasPrepareDragSequence
+];
+
+const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
+class FExternalItemBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FExternalItemBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", 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 = [];
     }
-    isSelected() {
-        return this.hostElement.classList.contains(F_SELECTED_CLASS);
+    registerItem(item) {
+        this.items.push(item);
     }
-    updatePosition(position) {
-        this._position = position;
+    getItem(element) {
+        return this.items.find(item => item.hostElement === element);
     }
-    completeDrag() {
-        this.positionChange.emit(this.position);
+    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.0.9", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 let uniqueId$5 = 0;
-class FNodeInputDirective extends FNodeInputBase {
-    get disabled() {
-        return this.isDisabled;
-    }
-    set disabled(isDisabled) {
-        const value = BooleanExtensions.castToBoolean(isDisabled);
-        if (value !== this.isDisabled) {
-            this.isDisabled = value;
-            this.stateChanges.next();
-        }
-    }
+class FExternalItemDirective extends FExternalItemBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, fNode, fComponentsStore) {
+    constructor(elementReference, fExternalItemService) {
         super();
         this.elementReference = elementReference;
-        this.fNode = fNode;
-        this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-input-${uniqueId$5++}`;
-        this.multiple = true;
-        this.isDisabled = false;
-        this.isConnected = false;
+        this.fExternalItemService = fExternalItemService;
+        this.id = `f-external-item-${uniqueId$5++}`;
     }
     ngOnInit() {
-        if (!this.fNode) {
-            throw new Error('fNodeInput must be inside f-node');
-        }
-        this.fComponentsStore.addInput(this);
-        this.fNode.addConnector(this);
-    }
-    setConnected(isConnected) {
-        this.isConnected = isConnected;
-        this.hostElement.classList.toggle('f-node-input-connected', isConnected);
+        this.fExternalItemService.registerItem(this);
     }
     ngOnDestroy() {
-        this.fNode.removeConnector(this);
-        this.fComponentsStore.removeInput(this);
+        this.fExternalItemService.removeItem(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fNodeInputId", "id"], multiple: ["fNodeInputMultiple", "multiple"], disabled: ["fNodeInputDisabled", "disabled"] }, host: { properties: { "attr.id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled", "class.f-node-input-not-connectable": "!canBeConnected" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", 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.0.9", ngImport: i0, type: FNodeInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[fNodeInput]",
-                    exportAs: 'fNodeInput',
+                    selector: "[fExternalItem]",
                     host: {
                         '[attr.id]': 'id',
-                        class: "f-component f-node-input",
-                        '[class.f-node-input-multiple]': 'multiple',
-                        '[class.f-node-input-disabled]': 'disabled',
-                        '[class.f-node-input-not-connectable]': '!canBeConnected',
+                        class: "f-component f-external-item",
                     },
-                    providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }],
+                    providers: [
+                        { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
+                    ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
-                    type: Inject,
-                    args: [F_NODE]
-                }] }, { type: FComponentsStore }], propDecorators: { id: [{
-                type: Input,
-                args: ['fNodeInputId']
-            }], multiple: [{
-                type: Input,
-                args: ['fNodeInputMultiple']
-            }], disabled: [{
-                type: Input,
-                args: ['fNodeInputDisabled']
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FExternalItemService }], propDecorators: { id: [{
+                type: Input
+            }], data: [{
+                type: Input
             }] } });
 
-const F_NODE_OUTLET = new InjectionToken('F_NODE_OUTLET');
-class FNodeOutletBase extends FConnectorBase {
-    constructor() {
-        super(...arguments);
-        this.isConnected = false;
-        this.outputs = [];
+class LineElement {
+    constructor(hostElement) {
+        this.hostElement = hostElement;
+        this.element = DomElementExtensions.createHtmlElement('div');
+        this.hostElement.appendChild(this.element);
+        this.element.classList.add('f-line');
     }
-    get canBeConnected() {
-        return !this.disabled;
+    hide() {
+        this.element.style.display = 'none';
     }
-    setOutputs(outputs) {
-        this.outputs = outputs;
+    show() {
+        this.element.style.display = 'block';
+    }
+    draw(object) {
+        this.element.style.position = 'absolute';
+        Object.keys(object).forEach((key) => {
+            // @ts-ignore
+            this.element.style[key] = object[key] + 'px';
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutletBase, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletBase, decorators: [{
-            type: Directive
-        }] });
-
-function isNodeOutlet(element) {
-    return !!element.closest('[fNodeOutlet]');
 }
 
-let uniqueId$4 = 0;
-class FNodeOutletDirective extends FNodeOutletBase {
-    get disabled() {
-        return this.isDisabled;
-    }
-    set disabled(isDisabled) {
-        const value = BooleanExtensions.castToBoolean(isDisabled);
-        if (value !== this.isDisabled) {
-            this.isDisabled = value;
-            this.stateChanges.next();
-        }
+class LineService {
+    constructor(hostElement) {
+        this.hostElement = hostElement;
+        this.fHorizontalLine = new LineElement(this.hostElement);
+        this.fVerticalLine = new LineElement(this.hostElement);
     }
-    get hostElement() {
-        return this.elementReference.nativeElement;
+    drawVerticalLine(x, size, transform) {
+        this.fVerticalLine.show();
+        this.fVerticalLine.draw({
+            left: x * transform.scale + transform.position.x + transform.scaledPosition.x,
+            top: 0,
+            width: 1,
+            height: size.height
+        });
     }
-    constructor(elementReference, fNode, fComponentsStore) {
-        super();
-        this.elementReference = elementReference;
-        this.fNode = fNode;
-        this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-outlet-${uniqueId$4++}`;
-        this.isDisabled = false;
-        this.isConnectionFromOutlet = false;
+    drawHorizontalLine(y, size, transform) {
+        this.fHorizontalLine.show();
+        this.fHorizontalLine.draw({
+            left: 0,
+            top: y * transform.scale + transform.position.y + transform.scaledPosition.y,
+            width: size.width,
+            height: 1
+        });
     }
-    ngOnInit() {
-        if (!this.fNode) {
-            throw new Error('fNodeOutlet must be inside f-node');
-        }
-        this.fComponentsStore.addOutlet(this);
+    hideVerticalLine() {
+        this.fVerticalLine.hide();
     }
-    ngOnDestroy() {
-        this.fComponentsStore.removeOutlet(this);
+    hideHorizontalLine() {
+        this.fHorizontalLine.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fNodeOutletId", "id"], disabled: ["fNodeOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.id": "id", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }], exportAs: ["fNodeOutlet"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[fNodeOutlet]",
-                    exportAs: 'fNodeOutlet',
-                    host: {
-                        '[attr.id]': 'id',
-                        class: "f-component f-node-outlet",
-                        '[class.f-node-outlet-disabled]': 'disabled'
-                    },
-                    providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
-                    type: Inject,
-                    args: [F_NODE]
-                }] }, { type: FComponentsStore }], propDecorators: { id: [{
-                type: Input,
-                args: ['fNodeOutletId']
-            }], disabled: [{
-                type: Input,
-                args: ['fNodeOutletDisabled']
-            }], isConnectionFromOutlet: [{
-                type: Input
-            }] } });
 
-const F_NODE_OUTPUT = new InjectionToken('F_NODE_OUTPUT');
-class FNodeOutputBase extends FConnectorBase {
-    constructor() {
-        super(...arguments);
-        this.isConnected = false;
+const ALIGN_THRESHOLD = 10;
+/**
+ * A class to find the nearest coordinate.
+ */
+class NearestCoordinateFinder {
+    /**
+     * Constructor to initialize the NearestCoordinateFinder.
+     * @param elements - The array of IRect elements.
+     * @param target - The target IRect element.
+     */
+    constructor(elements, target) {
+        this.elements = elements;
+        this.target = target;
     }
-    get canBeConnected() {
-        return !this.disabled && !this.isConnected;
+    /**
+     * Finds the nearest coordinate on a specified axis.
+     * @returns The nearest coordinate and its distance.
+     */
+    findNearestCoordinateByX() {
+        let nearest;
+        let minDistance;
+        for (const element of this.elements) {
+            const distanceLeftLeft = this.target.x - element.x;
+            const distanceLeftRight = this.target.x - (element.x + element.width);
+            const distanceCenterCenter = this.target.gravityCenter.x - element.gravityCenter.x;
+            const distanceRightLeft = (this.target.x + this.target.width) - element.x;
+            const distanceRightRight = (this.target.x + this.target.width) - (element.x + element.width);
+            if (Math.abs(distanceLeftLeft) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceLeftRight) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceRightLeft) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceRightRight) <= ALIGN_THRESHOLD) {
+                if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
+                    minDistance = distanceCenterCenter;
+                    nearest = element.gravityCenter.x;
+                }
+                if (Math.abs(distanceLeftLeft) < Math.abs(minDistance)) {
+                    minDistance = distanceLeftLeft;
+                    nearest = element.x;
+                }
+                if (Math.abs(distanceRightRight) < Math.abs(minDistance)) {
+                    minDistance = distanceRightRight;
+                    nearest = element.x + element.width;
+                }
+                if (Math.abs(distanceLeftRight) < Math.abs(minDistance)) {
+                    minDistance = distanceLeftRight;
+                    nearest = element.x + element.width;
+                }
+                if (Math.abs(distanceRightLeft) < Math.abs(minDistance)) {
+                    minDistance = distanceRightLeft;
+                    nearest = element.x;
+                }
+            }
+        }
+        return { value: nearest, distance: minDistance };
+    }
+    /**
+     * Finds the nearest coordinate on a specified axis.
+     * @returns The nearest coordinate and its distance.
+     */
+    findNearestCoordinateByY() {
+        let nearest;
+        let minDistance;
+        for (const element of this.elements) {
+            const distanceTopTop = this.target.y - element.y;
+            const distanceTopBottom = this.target.y - (element.y + element.height);
+            const distanceCenterCenter = this.target.gravityCenter.y - element.gravityCenter.y;
+            const distanceBottomTop = (this.target.y + this.target.height) - element.y;
+            const distanceBottomBottom = (this.target.y + this.target.height) - (element.y + element.height);
+            if (Math.abs(distanceTopTop) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceTopBottom) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceBottomTop) <= ALIGN_THRESHOLD ||
+                Math.abs(distanceBottomBottom) <= ALIGN_THRESHOLD) {
+                if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
+                    minDistance = distanceCenterCenter;
+                    nearest = element.gravityCenter.y;
+                }
+                if (Math.abs(distanceTopTop) < Math.abs(minDistance)) {
+                    minDistance = distanceTopTop;
+                    nearest = element.y;
+                }
+                if (Math.abs(distanceBottomBottom) < Math.abs(minDistance)) {
+                    minDistance = distanceBottomBottom;
+                    nearest = element.y + element.height;
+                }
+                if (Math.abs(distanceTopBottom) < Math.abs(minDistance)) {
+                    minDistance = distanceTopBottom;
+                    nearest = element.y + element.height;
+                }
+                if (Math.abs(distanceBottomTop) < Math.abs(minDistance)) {
+                    minDistance = distanceBottomTop;
+                    nearest = element.y;
+                }
+            }
+        }
+        return { value: nearest, distance: minDistance };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutputBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputBase, decorators: [{
-            type: Directive
-        }] });
 
-function isNodeOutput(element) {
-    return !!element.closest('[fNodeOutput]');
+const F_LINE_ALIGNMENT = new InjectionToken('F_LINE_ALIGNMENT');
+class FLineAlignmentBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FLineAlignmentBase, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentBase, decorators: [{
+            type: Directive
+        }] });
 
-let uniqueId$3 = 0;
-class FNodeOutputDirective extends FNodeOutputBase {
-    get disabled() {
-        return this.isDisabled;
-    }
-    set disabled(isDisabled) {
-        const value = BooleanExtensions.castToBoolean(isDisabled);
-        if (value !== this.isDisabled) {
-            this.isDisabled = value;
-            this.stateChanges.next();
-        }
-    }
+class FLineAlignmentComponent extends FLineAlignmentBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, fNode, fComponentsStore) {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
+    }
+    constructor(elementReference, fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
         super();
         this.elementReference = elementReference;
-        this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-output-${uniqueId$3++}`;
-        this.isDisabled = false;
-        this.isConnected = false;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+        this.size = SizeExtensions.initialize();
+        this.draggedNodeRect = RectExtensions.initialize();
+        this.rects = [];
+        this.lineService = new LineService(this.hostElement);
     }
     ngOnInit() {
-        if (!this.fNode) {
-            throw new Error('fNodeOutput must be inside f-node');
-        }
-        this.fComponentsStore.addOutput(this);
-        this.fNode.addConnector(this);
+        this.fDraggableDataContext.fLineAlignment = this;
     }
-    setConnected(isConnected) {
-        this.isConnected = isConnected;
-        this.hostElement.classList.toggle('f-node-output-connected', isConnected);
-    }
-    ngOnDestroy() {
-        this.fNode.removeConnector(this);
-        this.fComponentsStore.removeOutput(this);
+    initialize(allNodes, currentNodes) {
+        this.size = this.flowHost.getBoundingClientRect();
+        this.rects = [];
+        const draggedNodeRects = currentNodes.map((x) => {
+            return this.getElementRectInFlowHandler.handle(x.hostElement);
+        });
+        this.draggedNodeRect = RectExtensions.union(draggedNodeRects);
+        const allNodesExcludeCurrents = allNodes.filter((x) => {
+            return !currentNodes.includes(x);
+        });
+        this.rects = allNodesExcludeCurrents.map((x) => {
+            return this.getElementRectInFlowHandler.handle(x.hostElement);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fNodeOutputId", "id"], disabled: ["fNodeOutputDisabled", "disabled"] }, host: { properties: { "attr.id": "id", "class.f-node-output-disabled": "disabled" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[fNodeOutput]",
-                    exportAs: 'fNodeOutput',
-                    host: {
-                        '[attr.id]': 'id',
-                        class: "f-component f-node-output",
-                        '[class.f-node-output-disabled]': 'disabled',
-                    },
-                    providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
-                    type: Inject,
-                    args: [F_NODE]
-                }] }, { type: FComponentsStore }], propDecorators: { id: [{
-                type: Input,
-                args: ['fNodeOutputId']
-            }], disabled: [{
-                type: Input,
-                args: ['fNodeOutputDisabled']
-            }] } });
-
-const F_DRAG_HANDLE = new InjectionToken('F_DRAG_HANDLE');
-class FDragHandleDirective {
-    get disabled() {
-        return this.isDisabled;
+    handle(difference) {
+        this.drawIntersectingLines(difference);
     }
-    set disabled(isDisabled) {
-        const value = BooleanExtensions.castToBoolean(isDisabled);
-        if (value !== this.isDisabled) {
-            this.isDisabled = value;
-            this.stateChanges.next();
+    drawIntersectingLines(difference) {
+        const intersect = this.findNearestCoordinate(difference);
+        if (intersect.xResult.value !== undefined) {
+            this.lineService.drawVerticalLine(intersect.xResult.value, this.size, this.transform);
+        }
+        else {
+            this.lineService.hideVerticalLine();
+        }
+        if (intersect.yResult.value !== undefined) {
+            this.lineService.drawHorizontalLine(intersect.yResult.value, this.size, this.transform);
+        }
+        else {
+            this.lineService.hideHorizontalLine();
         }
     }
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference, _parentNode) {
-        this.elementReference = elementReference;
-        this.stateChanges = new Subject();
-        this.isDisabled = false;
-        this._parentNode = _parentNode;
-    }
-    ngOnDestroy() {
-        this.stateChanges.complete();
+    findNearestCoordinate(difference) {
+        const rect = RectExtensions.addPoint(this.draggedNodeRect, difference);
+        const finder = new NearestCoordinateFinder(this.rects, rect);
+        const xResult = finder.findNearestCoordinateByX();
+        const yResult = finder.findNearestCoordinateByY();
+        const result = { xResult, yResult };
+        return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDragHandleDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FDragHandleDirective, isStandalone: true, selector: "[fDragHandle]", inputs: { disabled: ["fDragHandleDisabled", "disabled"] }, host: { properties: { "class.f-drag-handle-disabled": "disabled" }, classAttribute: "f-drag-handle f-component" }, providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDragHandleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[fDragHandle]",
-                    standalone: true,
-                    host: {
-                        class: "f-drag-handle f-component",
-                        '[class.f-drag-handle-disabled]': 'disabled'
-                    },
-                    providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [F_NODE]
-                }, {
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }], propDecorators: { disabled: [{
-                type: Input,
-                args: ['fDragHandleDisabled']
-            }] } });
-
-function isNodeDragHandle(element) {
-    const dragHandle = getClosestDragHandle(element);
-    return !!dragHandle && !isElementOrParentExcluded(element);
-}
-function isElementOrParentExcluded(element) {
-    const isContains = isElementContainsClass(element);
-    const parentElement = element.parentElement;
-    const dragHandle = getClosestDragHandle(parentElement);
-    if (!isContains && !!dragHandle) {
-        return isElementOrParentExcluded(parentElement);
+    complete() {
+        this.lineService.hideVerticalLine();
+        this.lineService.hideHorizontalLine();
     }
-    return isContains;
-}
-function getClosestDragHandle(element) {
-    return element.closest('.f-drag-handle');
-}
-function isElementContainsClass(element) {
-    return element.classList.contains('f-drag-handle-disabled');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FLineAlignmentComponent, selector: "f-line-alignment", host: { classAttribute: "f-line-alignment f-component" }, providers: [
+            { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
+        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "", isInline: true, styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "f-line-alignment", template: "", exportAs: "fComponent", host: {
+                        'class': 'f-line-alignment f-component'
+                    }, providers: [
+                        { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
+                    ], styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
-class FResizeObserver extends Observable {
-    constructor(element) {
-        super(subscriber => {
-            const observer = new ResizeObserver(entries => {
-                subscriber.next(entries);
-            });
-            observer.observe(element);
-            return function unsubscribe() {
-                observer.unobserve(element);
-                observer.disconnect();
-            };
-        });
-    }
+const F_SELECTION_AREA = new InjectionToken('F_SELECTION_AREA');
+class FSelectionAreaBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FSelectionAreaBase, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaBase, decorators: [{
+            type: Directive
+        }] });
 
-let uniqueId$2 = 0;
-class FNodeComponent extends FNodeBase {
-    set position(value) {
-        this._position = PointExtensions.castToPoint(value);
-        this.refresh();
-    }
-    get position() {
-        return this._position;
-    }
+class FSelectionAreaComponent extends FSelectionAreaBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, fComponentsStore) {
+    constructor(elementReference, fDraggableDataContext) {
         super();
         this.elementReference = elementReference;
-        this.fComponentsStore = fComponentsStore;
-        this.subscriptions$ = new Subscription();
-        this.id = `f-node-${uniqueId$2++}`;
-        this.positionChange = new EventEmitter();
-        this.disabled = false;
-        this.connectors = [];
+        this.fDraggableDataContext = fDraggableDataContext;
     }
     ngOnInit() {
-        super.redraw();
-        this.fComponentsStore.addNode(this);
-    }
-    ngAfterViewInit() {
-        this.subscriptions$.add(this.subscribeOnResizeChanges());
-    }
-    subscribeOnResizeChanges() {
-        return new FResizeObserver(this.hostElement).pipe(startWith(null)).subscribe(() => {
-            this.connectors.forEach((connector) => {
-                connector.side = new GetConnectorSideInNodeHandler().handle(connector.hostElement, this.hostElement);
-            });
-            this.fComponentsStore.changes.next();
-        });
-    }
-    addConnector(connector) {
-        this.connectors.push(connector);
+        this.fDraggableDataContext.fSelectionArea = this;
+        this.hostElement.style.display = 'none';
     }
-    removeConnector(connector) {
-        const index = this.connectors.indexOf(connector);
-        if (index !== -1) {
-            this.connectors.splice(index, 1);
-        }
+    hide() {
+        this.hostElement.style.display = 'none';
     }
-    refresh() {
-        this.stateChanges.next();
+    show() {
+        this.hostElement.style.display = 'block';
     }
-    ngOnDestroy() {
-        this.fComponentsStore.removeNode(this);
-        this.stateChanges.complete();
-        this.subscriptions$.unsubscribe();
+    draw(object) {
+        const style = this.hostElement.style;
+        style.left = object.left + 'px';
+        style.top = object.top + 'px';
+        style.width = object.width + 'px';
+        style.height = object.height + 'px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FNodeComponent, selector: "f-node", inputs: { id: "id", position: ["fNodePosition", "position"], disabled: "disabled" }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.id": "id", "class.f-node-disabled": "disabled" }, classAttribute: "f-node f-component" }, providers: [
-            { provide: F_NODE, useExisting: FNodeComponent }
-        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:absolute!important;left:0;top:0;pointer-events:all;transform-origin:0 0;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
+            { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: "f-node", exportAs: "fComponent", changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'id',
-                        class: "f-node f-component",
-                        '[class.f-node-disabled]': 'disabled',
+            args: [{ selector: "f-selection-area", template: ``, host: {
+                        'class': 'f-selection-area f-component'
                     }, providers: [
-                        { provide: F_NODE, useExisting: FNodeComponent }
-                    ], template: "<ng-content></ng-content>\n", styles: [":host{position:absolute!important;left:0;top:0;pointer-events:all;transform-origin:0 0;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { id: [{
-                type: Input
-            }], position: [{
-                type: Input,
-                args: ['fNodePosition']
-            }], positionChange: [{
-                type: Output,
-                args: ['fNodePositionChange']
-            }], disabled: [{
-                type: Input
-            }] } });
-
-function isNode(element) {
-    return !!element.closest('f-node');
-}
+                        { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
+                    ], styles: [":host{position:absolute}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }] });
 
-const F_ZOOM = new InjectionToken('F_ZOOM');
-class FZoomBase {
-    get flowHost() {
-        return this.fComponentsStore.flowHost;
+class FindFirstCanBeConnectedOutputByOutletHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
     }
-    get fCanvas() {
-        return this.fComponentsStore.fCanvas;
+    get fOutputs() {
+        return this.fComponentsStore.fOutputs;
     }
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.isEnabled = false;
-        this.listeners = EventExtensions.emptyListener();
     }
-    toggleZoom() {
-        if (this.isEnabled) {
-            this.subscribe();
+    handle(outlet) {
+        let result;
+        const node = this.fNodes.find((x) => x.isContains(outlet.hostElement));
+        if (!node) {
+            throw new Error('Node not found');
         }
-        else {
-            this.unsubscribe();
+        const outputsOfNode = this.fOutputs.filter((x) => {
+            return node.isContains(x.hostElement) && x.canBeConnected;
+        });
+        if (outputsOfNode.length > 0) {
+            result = outputsOfNode[0];
         }
+        return result;
     }
-    subscribe() {
-        this.listeners();
-        if (!this.flowHost) {
-            return;
-        }
-        this.flowHost.addEventListener('wheel', this.onWheel.bind(this));
-        this.flowHost.addEventListener('dblclick', this.onDoubleClick.bind(this));
-        this.listeners = () => {
-            this.flowHost.removeEventListener('wheel', this.onWheel.bind(this));
-            this.flowHost.removeEventListener('dblclick', this.onDoubleClick.bind(this));
-        };
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
+
+class CreateConnectionDragHandler {
+    constructor(getOutputRectInFlowHandler, getConnectionVectorHandler, connection, mouseDownPoint) {
+        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
+        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.connection = connection;
+        this.mouseDownPoint = mouseDownPoint;
+        this.type = EDraggableType.CREATE_CONNECTION;
+        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
+        this.onPointerDownToConnectorRect = RectExtensions.initialize();
+        this.outputSide = EConnectorSide.BOTTOM;
     }
-    getScale() {
-        return this.fCanvas.transform.scale || 1;
+    initialize() {
+        const outputRect = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
+        this.outputSide = outputRect.side;
+        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));
     }
-    onWheel(event) {
-        event.preventDefault();
-        if (this.fComponentsStore.fDraggable?.isDragStarted) {
-            return;
-        }
-        let result = this.getScale();
-        const direction = event.deltaY > 0 ? -1 : 1;
-        const step = this.step;
-        result = result + step * direction;
-        result = Math.max(this.minimum, Math.min(result, this.maximum));
-        const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
-        this.fCanvas.setZoom(result, pointerPositionInFlow);
-        this.fCanvas.redraw();
-        this.fCanvas.completeDrag();
+    move(difference) {
+        const toPoint = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
+        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(this.onPointerDownFromConnectorRect, toPoint, this.connection.behavior, this.outputSide, EConnectorSide.TOP));
+        this.connection.setVector(vector.point1, this.outputSide, vector.point2, EConnectorSide.TOP);
+        this.connection.redraw();
     }
-    onDoubleClick(event) {
-        event.preventDefault();
-        if (this.fComponentsStore.fDraggable?.isDragStarted || isNode(event.target)) {
-            return;
-        }
-        let result = this.getScale();
-        const direction = 1;
-        const step = this.dblClickStep;
-        result = result + step * direction;
-        result = Math.max(this.minimum, Math.min(result, this.maximum));
-        const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
-        this.fCanvas.setZoom(result, pointerPositionInFlow);
-        this.fCanvas.redrawWithAnimation();
-        this.fCanvas.completeDrag();
+    complete() {
+        this.connection.redraw();
+        this.connection.hide();
     }
-    onZoomToCenter(deltaY, position) {
-        const preventDefault = () => {
-        };
-        const rect = RectExtensions.fromElement(this.flowHost);
-        this.onWheel({
-            deltaY, preventDefault, clientX: position?.x || rect.gravityCenter.x, clientY: position?.y || rect.gravityCenter.y
-        });
+}
+
+class CreateConnectionEvent {
+    constructor(outputId, inputId) {
+        this.outputId = outputId;
+        this.inputId = inputId;
     }
-    zoomIn(position) {
-        this.onZoomToCenter(-1, position);
+}
+
+class FirstNotConnectedInputOfNodeUnderPointerHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
     }
-    zoomOut(position) {
-        this.onZoomToCenter(1, position);
+    get fInputs() {
+        return this.fComponentsStore.fInputs;
     }
-    reset() {
-        this.fCanvas.resetZoom();
-        this.fCanvas.redraw();
-        this.fCanvas.completeDrag();
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
-    unsubscribe() {
-        this.listeners();
-        this.listeners = EventExtensions.emptyListener();
+    handle(event) {
+        const position = event.getPosition();
+        const elementsFromPoint = document.elementsFromPoint(position.x, position.y);
+        const nodes = elementsFromPoint.map((element) => {
+            return this.fNodes.find((x) => x.isContains(element));
+        }).filter((x) => !!x);
+        const inputs = nodes.map((x) => {
+            return this.fInputs.filter((i) => x.isContains(i.hostElement)).find((i) => {
+                return !i.isConnected && i.canBeConnected;
+            });
+        });
+        const result = inputs.find((x) => !!x);
+        return result;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class FZoomDirective extends FZoomBase {
-    get fFlowZoom() {
-        return this.isEnabled;
-    }
-    set fFlowZoom(isEnabled) {
-        const value = BooleanExtensions.castToBoolean(isEnabled);
-        if (value !== this.isEnabled) {
-            this.isEnabled = value;
-            this.toggleZoom();
-        }
+class InputsUnderPointerHandler {
+    get fInputs() {
+        return this.fComponentsStore.fInputs;
     }
     constructor(fComponentsStore) {
-        super(fComponentsStore);
-        this.minimum = 0.1;
-        this.maximum = 4;
-        this.step = 0.1;
-        this.dblClickStep = 0.5;
-    }
-    ngAfterViewInit() {
-        super.toggleZoom();
+        this.fComponentsStore = fComponentsStore;
     }
-    ngOnDestroy() {
-        super.unsubscribe();
+    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.0.9", ngImport: i0, type: FZoomDirective, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FZoomDirective, selector: "f-canvas[fZoom]", inputs: { fFlowZoom: ["fZoom", "fFlowZoom"], minimum: ["fZoomMinimum", "minimum"], maximum: ["fZoomMaximum", "maximum"], step: ["fZoomStep", "step"], dblClickStep: ["fZoomDblClickStep", "dblClickStep"] }, host: { classAttribute: "f-zoom f-component" }, providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InputsUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InputsUnderPointerHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FZoomDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "f-canvas[fZoom]",
-                    exportAs: 'fComponent',
-                    host: {
-                        'class': 'f-zoom f-component'
-                    },
-                    providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }],
-                }]
-        }], ctorParameters: () => [{ type: FComponentsStore }], propDecorators: { fFlowZoom: [{
-                type: Input,
-                args: ['fZoom']
-            }], minimum: [{
-                type: Input,
-                args: ['fZoomMinimum']
-            }], maximum: [{
-                type: Input,
-                args: ['fZoomMaximum']
-            }], step: [{
-                type: Input,
-                args: ['fZoomStep']
-            }], dblClickStep: [{
-                type: Input,
-                args: ['fZoomDblClickStep']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InputsUnderPointerHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-function mixinChangeZoom(base) {
-    return class extends base {
-        setZoom(scaleValue, toPosition) {
-            if (scaleValue !== this.transform.scale) {
-                const summaryPosition = PointExtensions.sum(this.transform.scaledPosition, this.transform.position);
-                const newX = toPosition.x - (toPosition.x - summaryPosition.x) * scaleValue / this.transform.scale;
-                const newY = toPosition.y - (toPosition.y - summaryPosition.y) * scaleValue / this.transform.scale;
-                this.transform.scale = scaleValue;
-                this.transform.scaledPosition = PointExtensions.sub(PointExtensions.initialize(newX, newY), this.transform.position);
-            }
-        }
-        setScalePosition(value) {
-            this.transform.scaledPosition = value;
-        }
-        resetZoom() {
-            this.transform.scale = 1;
-            this.transform.scaledPosition = PointExtensions.initialize();
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
+class FindInputsUnderPointerRequest {
+    constructor(event, dragHandler) {
+        this.event = event;
+        this.dragHandler = dragHandler;
+    }
 }
 
-function mixinFitToParent(base) {
-    return class extends base {
-        fitToParent(rect, parentRect, points) {
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.transform.position = this.getZeroPositionWithoutScale(points);
-            const itemsContainerWidth = rect.width / this.transform.scale;
-            const itemsContainerHeight = rect.height / this.transform.scale;
-            if ((itemsContainerWidth > parentRect.width || itemsContainerHeight > parentRect.height) ||
-                itemsContainerWidth < parentRect.width && itemsContainerHeight < parentRect.height) {
-                this.transform.scale = Math.min(parentRect.width / itemsContainerWidth, parentRect.height / itemsContainerHeight);
-            }
-            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
-            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
-            this.transform.position = PointExtensions.initialize(newX, newY);
-        }
-        getZeroPositionWithoutScale(points) {
-            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
-            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
-            return PointExtensions.initialize(xPoint, yPoint);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinOneToOneCentering(base) {
-    return class extends base {
-        oneToOneCentering(rect, parentRect, points) {
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.transform.position = this.getZeroPositionWithoutScale(points);
-            const itemsContainerWidth = rect.width / this.transform.scale;
-            const itemsContainerHeight = rect.height / this.transform.scale;
-            this.transform.scale = 1;
-            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
-            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
-            this.transform.position = PointExtensions.initialize(newX, newY);
-        }
-        getZeroPositionWithoutScale(points) {
-            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
-            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
-            return PointExtensions.initialize(xPoint, yPoint);
+class FindInputsUnderPointerHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    constructor(fComponentsStore, inputsUnderPointerHandler, firstNotConnectedInputOfNodeUnderPointerHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.inputsUnderPointerHandler = inputsUnderPointerHandler;
+        this.firstNotConnectedInputOfNodeUnderPointerHandler = firstNotConnectedInputOfNodeUnderPointerHandler;
+    }
+    handle(payload) {
+        const inputsUnderPointer = this.getInputsUnderPointer(payload);
+        const output = this.fComponentsStore.fOutputs.find((x) => x.id === payload.dragHandler.connection.outputId);
+        if (!output) {
+            throw OutputNotFound(payload.dragHandler.connection.outputId);
         }
-        constructor(...args) {
-            super(...args);
+        return inputsUnderPointer.filter((x) => {
+            const targetNode = this.fNodes.find((y) => y.isContains(x.hostElement));
+            const sourceNode = this.fNodes.find((y) => y.isContains(output.hostElement));
+            return sourceNode?.hostElement !== targetNode?.hostElement;
+        });
+    }
+    getInputsUnderPointer(payload) {
+        let inputs = this.inputsUnderPointerHandler.handle(payload.event);
+        const input = this.firstNotConnectedInputOfNodeUnderPointerHandler.handle(payload.event);
+        if (input) {
+            inputs.push(input);
         }
-    };
+        inputs = inputs.filter((x) => x.canBeConnected);
+        return inputs;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: FindInputsUnderPointerHandler }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindInputsUnderPointerHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: InputsUnderPointerHandler }, { type: FirstNotConnectedInputOfNodeUnderPointerHandler }] });
 
-function mixinChangePosition(base) {
-    return class extends base {
-        getPosition() {
-            return this.transform.position;
-        }
-        setPosition(position) {
-            this.transform.position = PointExtensions.copy(position);
-        }
-        constructor(...args) {
-            super(...args);
+class CreateConnectionOnPointerUp {
+    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler, findFirstCanBeConnectedOutputByOutletHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
+        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
+    }
+    handle(event) {
+        const isCreateConnection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EDraggableType.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.outputId);
+                if (!output) {
+                    output = this.fComponentsStore.fOutlets.find((x) => x.id === handler.connection.outputId);
+                }
+                if (!output) {
+                    throw OutputNotFound(handler.connection.outputId);
+                }
+                const isOutlet = isNodeOutlet(output.hostElement);
+                if (isOutlet) {
+                    output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(output);
+                    if (!output) {
+                        throw requiredOutput();
+                    }
+                }
+                this.fComponentsStore.fDraggable?.fCreateConnection.emit(new CreateConnectionEvent(output.id, inputsUnderPointer[0]?.id));
+            }
+            handler.complete();
         }
-    };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: CreateConnectionOnPointerUp }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionOnPointerUp, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }] });
 
-const F_CANVAS = new InjectionToken('F_CANVAS');
-const MIXIN_BASE = mixinChangePosition(mixinFitToParent(mixinOneToOneCentering(mixinChangeZoom(class {
-    constructor(transform) {
-        this.transform = transform;
+class CreateConnectionPrepareDragSequence {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-}))));
-class FCanvasBase extends MIXIN_BASE {
-    constructor() {
-        super(TransformModelExtensions.default());
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    completeDrag() {
-        const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
-        this.fCanvasChange.emit(new FCanvasChangeEvent(position, this.transform.scale));
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, getConnectionVectorHandler, findFirstCanBeConnectedOutputByOutletHandler, getOutputRectInFlowHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
+        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FCanvasBase, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasBase, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [] });
-
-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;
+    createConnectionHandler(pointerPositionInCanvas, output, outputCenter) {
+        this.fComponentsStore.fTempConnection.outputId = output.id;
+        this.fComponentsStore.fTempConnection.initialize();
+        this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
+        this.fDraggableDataContext.onPointerDownPosition = pointerPositionInCanvas.div(this.transform.scale);
+        this.fDraggableDataContext.draggableItems = [
+            new CreateConnectionDragHandler(this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, this.fComponentsStore.fTempConnection, outputCenter)
+        ];
     }
-    constructor(getAllNodesRectHandler, elementReference, fComponentsStore) {
-        super();
-        this.getAllNodesRectHandler = getAllNodesRectHandler;
-        this.elementReference = elementReference;
-        this.fComponentsStore = fComponentsStore;
-        this.fCanvasChange = new EventEmitter();
+    isNodeOutput(targetElement, node) {
+        const outlets = this.fComponentsStore.fOutlets.filter((x) => node.isContains(x.hostElement));
+        return isNodeOutput(targetElement) && !outlets.length;
     }
-    ngOnInit() {
-        this.fComponentsStore.fCanvas = this;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: GetConnectionVectorHandler }, { token: FindFirstCanBeConnectedOutputByOutletHandler }, { token: GetOutputRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionPrepareDragSequence }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionPrepareDragSequence, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetConnectionVectorHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }, { type: GetOutputRectInFlowHandler }] });
+
+class ReassignConnectionDragHandler {
+    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
+        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.connection = connection;
+        this.type = EDraggableType.REASSIGN_CONNECTION;
+        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
+        this.onPointerDownToConnectorRect = RectExtensions.initialize();
+        this.outputSide = EConnectorSide.BOTTOM;
+        this.inputSide = EConnectorSide.TOP;
     }
-    redraw() {
-        this.fComponentsStore.fBackground?.setTransform(this.transform);
-        this.hostElement.setAttribute("style", `transform: ${TransformModelExtensions.toString(this.transform)}`);
+    initialize() {
+        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
+        this.inputSide = this.getInputRectInFlowHandler.handle(this.connection.inputId).side;
+        this.outputSide = fromConnector.side;
+        this.onPointerDownFromConnectorRect = fromConnector.rect;
+        this.onPointerDownToConnectorRect = RectExtensions.initialize(this.connection.vector.point2.x, this.connection.vector.point2.y, 0, 0);
     }
-    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();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", 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 }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div>\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=\"f-node\"></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.0.9", 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>\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=\"f-node\"></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 }]
-            }] } });
-
-const F_FLOW = new InjectionToken('F_FLOW');
-
-var EDraggableType;
-(function (EDraggableType) {
-    EDraggableType["NODE"] = "node";
-    EDraggableType["REASSIGN_CONNECTION"] = "reassign-connection";
-    EDraggableType["CREATE_CONNECTION"] = "create-connection";
-    EDraggableType["CONNECTION"] = "connection";
-    EDraggableType["CANVAS"] = "canvas";
-    EDraggableType["PALETTE_ITEM"] = "palette-item";
-    EDraggableType["SELECTION"] = "selection";
-})(EDraggableType || (EDraggableType = {}));
-
-class CanvasDragHandler {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-        this.type = EDraggableType.CANVAS;
-        this.onPointerDownPosition = PointExtensions.initialize();
-    }
-    initialize() {
-        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
-    }
-    move(difference) {
-        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
-        this.fComponentsStore.fCanvas.redraw();
+    move(difference) {
+        const toRect = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
+        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(this.onPointerDownFromConnectorRect, toRect, this.connection.behavior, 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.getOutputRectInFlowHandler.handle(this.connection.outputId);
+        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.inputId);
+        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.behavior, fromConnector.side, toConnector.side));
+        this.connection.setVector(vector.point1, fromConnector.side, vector.point2, toConnector.side);
+        this.connection.redraw();
     }
 }
 
-class FDraggableDataContext {
-    constructor() {
-        this.selectedItems = [];
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
-        this.draggableItems = [];
-    }
-    reset() {
-        this.draggableItems = [];
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
+class ReassignConnectionEvent {
+    constructor(connectionId, outputId, oldInputId, newInputId) {
+        this.connectionId = connectionId;
+        this.outputId = outputId;
+        this.oldInputId = oldInputId;
+        this.newInputId = newInputId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext, decorators: [{
-            type: Injectable
-        }] });
 
-class CanvasOnPointerUp {
-    constructor(fDraggableDataContext) {
+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 === EDraggableType.CANVAS);
-        if (isDragCanvas) {
-            this.fDraggableDataContext.draggableItems.forEach((x) => {
-                x.complete?.();
-            });
+        const isReassignConnection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EDraggableType.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.inputId !== inputsUnderPointer[0]?.id) {
+                    this.fDraggable.fReassignConnection.emit(new ReassignConnectionEvent(handler.connection.id, handler.connection.outputId, handler.connection.inputId, inputsUnderPointer[0]?.id));
+                }
+            }
+            handler.complete();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: ReassignConnectionOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", 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, getOutputRectInFlowHandler, getConnectionVectorHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
+        this.getConnectionHandler = getConnectionHandler;
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
+        this.getConnectionVectorHandler = getConnectionVectorHandler;
     }
     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.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.getOutputRectInFlowHandler, this.getConnectionVectorHandler, connectionToReassign)
             ];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasPrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetConnectionVectorHandler }] });
 
-const CANVAS_PROVIDERS = [
-    CanvasOnPointerUp,
-    CanvasPrepareDragSequence
+const CONNECTIONS_PROVIDERS = [
+    FindFirstCanBeConnectedOutputByOutletHandler,
+    CreateConnectionOnPointerUp,
+    CreateConnectionPrepareDragSequence,
+    FirstNotConnectedInputOfNodeUnderPointerHandler,
+    InputsUnderPointerHandler,
+    FindInputsUnderPointerHandler,
+    ReassignConnectionOnPointerUp,
+    ReassignConnectionPrepareDragSequence
 ];
 
-const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
-class FExternalItemBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FExternalItemBase, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemBase, decorators: [{
-            type: Directive
-        }] });
-
-function isExternalItem(element) {
-    return !!element.closest('[fExternalItem]');
-}
-function getExternalItem(element) {
-    return element.closest('[fExternalItem]');
+class CreateNodeEvent {
+    constructor(rect, data) {
+        this.rect = rect;
+        this.data = data;
+    }
 }
 
-class FExternalItemService {
-    constructor() {
-        this.items = [];
+class ExternalItemDragHandler {
+    constructor(externalItem) {
+        this.externalItem = externalItem;
+        this.type = EDraggableType.PALETTE_ITEM;
+        this.onPointerDownRect = RectExtensions.initialize();
+        this.difference = PointExtensions.initialize();
     }
-    registerItem(item) {
-        this.items.push(item);
+    getStyle(position) {
+        return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
     }
-    getItem(element) {
-        return this.items.find(item => item.hostElement === element);
+    initialize() {
+        this.onPointerDownRect = this.getExternalItemRect();
+        this.placeholder = DomElementExtensions.deepCloneNode(this.externalItem.hostElement);
+        document.body.appendChild(this.placeholder);
     }
-    removeItem(item) {
-        const index = this.items.indexOf(item);
-        if (index !== -1) {
-            this.items.splice(index, 1);
-        }
+    getExternalItemRect() {
+        const rect = this.externalItem.hostElement.getBoundingClientRect();
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        const offsetTop = rect.top + scrollTop;
+        const offsetLeft = rect.left + scrollLeft;
+        return RectExtensions.initialize(offsetLeft, offsetTop, rect.width, rect.height);
+    }
+    move(difference) {
+        this.difference = difference;
+        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
+        this.placeholder.setAttribute('style', this.getStyle(position));
+    }
+    getPlaceholderRect() {
+        return RectExtensions.fromElement(this.placeholder);
+    }
+    complete() {
+        document.body.removeChild(this.placeholder);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
 
-let uniqueId$1 = 0;
-class FExternalItemDirective extends FExternalItemBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
+class ExternalItemPrepareDragSequence {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    constructor(elementReference, fExternalItemService) {
-        super();
-        this.elementReference = elementReference;
-        this.fExternalItemService = fExternalItemService;
-        this.id = `f-external-item-${uniqueId$1++}`;
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    ngOnInit() {
-        this.fExternalItemService.registerItem(this);
+    constructor(fComponentsStore, fDraggableDataContext, fExternalItemService) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fExternalItemService = fExternalItemService;
     }
-    ngOnDestroy() {
-        this.fExternalItemService.removeItem(this);
+    handle(event) {
+        if (isExternalItem(event.targetElement)) {
+            const item = this.fExternalItemService.getItem(getExternalItem(event.targetElement));
+            if (!item) {
+                throw new Error('External item not found');
+            }
+            const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
+            this.fDraggableDataContext.onPointerDownScale = 1;
+            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(1);
+            this.fDraggableDataContext.draggableItems = [
+                new ExternalItemDragHandler(item)
+            ];
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: ExternalItemPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", 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
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemPrepareDragSequence, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
 
-class LineElement {
-    constructor(hostElement) {
-        this.hostElement = hostElement;
-        this.element = DomElementExtensions.createHtmlElement('div');
-        this.hostElement.appendChild(this.element);
-        this.element.classList.add('f-line');
+class ExternalItemOnPointerUp {
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    hide() {
-        this.element.style.display = 'none';
+    get fCreateNode() {
+        return this.fComponentsStore.fDraggable.fCreateNode;
     }
-    show() {
-        this.element.style.display = 'block';
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
     }
-    draw(object) {
-        this.element.style.position = 'absolute';
-        Object.keys(object).forEach((key) => {
-            // @ts-ignore
-            this.element.style[key] = object[key] + 'px';
-        });
+    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 === EDraggableType.PALETTE_ITEM);
+        if (isDragPaletteItem) {
+            const dragHandler = this.fDraggableDataContext.draggableItems[0];
+            dragHandler.move(difference);
+            const isPointerInCanvasRect = document.elementsFromPoint(event.getPosition().x, event.getPosition().y).some((x) => x === this.flowHost);
+            if (isPointerInCanvasRect) {
+                const rectInCanvas = this.getElementRectInFlowHandler.handle(dragHandler.placeholder);
+                this.fCreateNode.emit(new CreateNodeEvent(rectInCanvas, dragHandler.externalItem.data));
+            }
+            dragHandler.complete();
+        }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: ExternalItemOnPointerUp }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemOnPointerUp, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
-class LineService {
-    constructor(hostElement) {
-        this.hostElement = hostElement;
-        this.fHorizontalLine = new LineElement(this.hostElement);
-        this.fVerticalLine = new LineElement(this.hostElement);
-    }
-    drawVerticalLine(x, size, transform) {
-        this.fVerticalLine.show();
-        this.fVerticalLine.draw({
-            left: x * transform.scale + transform.position.x + transform.scaledPosition.x,
-            top: 0,
-            width: 1,
-            height: size.height
-        });
-    }
-    drawHorizontalLine(y, size, transform) {
-        this.fHorizontalLine.show();
-        this.fHorizontalLine.draw({
-            left: 0,
-            top: y * transform.scale + transform.position.y + transform.scaledPosition.y,
-            width: size.width,
-            height: 1
-        });
+const EXTERNAL_ITEM_PROVIDERS = [
+    ExternalItemOnPointerUp,
+    ExternalItemPrepareDragSequence
+];
+
+class ConnectionDragHandler {
+    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
+        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.connection = connection;
+        this.type = EDraggableType.CONNECTION;
+        this.onPointerDownVector = VectorExtensions.initialize();
+        this.fromConnectorSide = EConnectorSide.BOTTOM;
+        this.toConnectorSide = EConnectorSide.TOP;
     }
-    hideVerticalLine() {
-        this.fVerticalLine.hide();
+    initialize() {
+        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
+        this.fromConnectorSide = fromConnector.side;
+        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.inputId);
+        this.toConnectorSide = toConnector.side;
+        this.onPointerDownVector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.behavior, fromConnector.side, toConnector.side));
     }
-    hideHorizontalLine() {
-        this.fHorizontalLine.hide();
+    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();
     }
 }
 
-const ALIGN_THRESHOLD = 10;
-/**
- * A class to find the nearest coordinate.
- */
-class NearestCoordinateFinder {
-    /**
-     * Constructor to initialize the NearestCoordinateFinder.
-     * @param elements - The array of IRect elements.
-     * @param target - The target IRect element.
-     */
-    constructor(elements, target) {
-        this.elements = elements;
-        this.target = target;
+class ConnectionSourceDragHandler {
+    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
+        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.connection = connection;
+        this.type = EDraggableType.CONNECTION;
+        this.fromConnectorRect = RectExtensions.initialize();
+        this.fromConnectorSide = EConnectorSide.BOTTOM;
+        this.toConnectorRect = RectExtensions.initialize();
+        this.toConnectorSide = EConnectorSide.TOP;
     }
-    /**
-     * Finds the nearest coordinate on a specified axis.
-     * @returns The nearest coordinate and its distance.
-     */
-    findNearestCoordinateByX() {
-        let nearest;
-        let minDistance;
-        for (const element of this.elements) {
-            const distanceLeftLeft = this.target.x - element.x;
-            const distanceLeftRight = this.target.x - (element.x + element.width);
-            const distanceCenterCenter = this.target.gravityCenter.x - element.gravityCenter.x;
-            const distanceRightLeft = (this.target.x + this.target.width) - element.x;
-            const distanceRightRight = (this.target.x + this.target.width) - (element.x + element.width);
-            if (Math.abs(distanceLeftLeft) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceLeftRight) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceRightLeft) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceRightRight) <= ALIGN_THRESHOLD) {
-                if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
-                    minDistance = distanceCenterCenter;
-                    nearest = element.gravityCenter.x;
-                }
-                if (Math.abs(distanceLeftLeft) < Math.abs(minDistance)) {
-                    minDistance = distanceLeftLeft;
-                    nearest = element.x;
-                }
-                if (Math.abs(distanceRightRight) < Math.abs(minDistance)) {
-                    minDistance = distanceRightRight;
-                    nearest = element.x + element.width;
-                }
-                if (Math.abs(distanceLeftRight) < Math.abs(minDistance)) {
-                    minDistance = distanceLeftRight;
-                    nearest = element.x + element.width;
-                }
-                if (Math.abs(distanceRightLeft) < Math.abs(minDistance)) {
-                    minDistance = distanceRightLeft;
-                    nearest = element.x;
-                }
-            }
-        }
-        return { value: nearest, distance: minDistance };
+    initialize() {
+        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
+        this.fromConnectorRect = fromConnector.rect;
+        this.fromConnectorSide = fromConnector.side;
+        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.inputId);
+        this.toConnectorRect = toConnector.rect;
+        this.toConnectorSide = toConnector.side;
     }
-    /**
-     * Finds the nearest coordinate on a specified axis.
-     * @returns The nearest coordinate and its distance.
-     */
-    findNearestCoordinateByY() {
-        let nearest;
-        let minDistance;
-        for (const element of this.elements) {
-            const distanceTopTop = this.target.y - element.y;
-            const distanceTopBottom = this.target.y - (element.y + element.height);
-            const distanceCenterCenter = this.target.gravityCenter.y - element.gravityCenter.y;
-            const distanceBottomTop = (this.target.y + this.target.height) - element.y;
-            const distanceBottomBottom = (this.target.y + this.target.height) - (element.y + element.height);
-            if (Math.abs(distanceTopTop) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceTopBottom) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceBottomTop) <= ALIGN_THRESHOLD ||
-                Math.abs(distanceBottomBottom) <= ALIGN_THRESHOLD) {
-                if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
-                    minDistance = distanceCenterCenter;
-                    nearest = element.gravityCenter.y;
-                }
-                if (Math.abs(distanceTopTop) < Math.abs(minDistance)) {
-                    minDistance = distanceTopTop;
-                    nearest = element.y;
-                }
-                if (Math.abs(distanceBottomBottom) < Math.abs(minDistance)) {
-                    minDistance = distanceBottomBottom;
-                    nearest = element.y + element.height;
-                }
-                if (Math.abs(distanceTopBottom) < Math.abs(minDistance)) {
-                    minDistance = distanceTopBottom;
-                    nearest = element.y + element.height;
-                }
-                if (Math.abs(distanceBottomTop) < Math.abs(minDistance)) {
-                    minDistance = distanceBottomTop;
-                    nearest = element.y;
-                }
-            }
-        }
-        return { value: nearest, distance: minDistance };
+    move(difference) {
+        const fromConnectorRect = RectExtensions.addPoint(this.fromConnectorRect, difference);
+        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(fromConnectorRect, this.toConnectorRect, this.connection.behavior, this.fromConnectorSide, this.toConnectorSide));
+        this.connection.setVector(vector.point1, this.fromConnectorSide, vector.point2, this.toConnectorSide);
+        this.connection.redraw();
     }
 }
 
-const F_LINE_ALIGNMENT = new InjectionToken('F_LINE_ALIGNMENT');
-class FLineAlignmentBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FLineAlignmentBase, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentBase, decorators: [{
-            type: Directive
-        }] });
-
-class FLineAlignmentComponent extends FLineAlignmentBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(elementReference, fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
-        super();
-        this.elementReference = elementReference;
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-        this.size = SizeExtensions.initialize();
-        this.draggedNodeRect = RectExtensions.initialize();
-        this.rects = [];
-        this.lineService = new LineService(this.hostElement);
-    }
-    ngOnInit() {
-        this.fDraggableDataContext.fLineAlignment = this;
-    }
-    initialize(allNodes, currentNodes) {
-        this.size = this.flowHost.getBoundingClientRect();
-        this.rects = [];
-        const draggedNodeRects = currentNodes.map((x) => {
-            return this.getElementRectInFlowHandler.handle(x.hostElement);
-        });
-        this.draggedNodeRect = RectExtensions.union(draggedNodeRects);
-        const allNodesExcludeCurrents = allNodes.filter((x) => {
-            return !currentNodes.includes(x);
-        });
-        this.rects = allNodesExcludeCurrents.map((x) => {
-            return this.getElementRectInFlowHandler.handle(x.hostElement);
-        });
-    }
-    handle(difference) {
-        this.drawIntersectingLines(difference);
-    }
-    drawIntersectingLines(difference) {
-        const intersect = this.findNearestCoordinate(difference);
-        if (intersect.xResult.value !== undefined) {
-            this.lineService.drawVerticalLine(intersect.xResult.value, this.size, this.transform);
-        }
-        else {
-            this.lineService.hideVerticalLine();
-        }
-        if (intersect.yResult.value !== undefined) {
-            this.lineService.drawHorizontalLine(intersect.yResult.value, this.size, this.transform);
-        }
-        else {
-            this.lineService.hideHorizontalLine();
-        }
+class ConnectionTargetDragHandler {
+    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
+        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.connection = connection;
+        this.type = EDraggableType.CONNECTION;
+        this.fromConnectorRect = RectExtensions.initialize();
+        this.fromConnectorSide = EConnectorSide.BOTTOM;
+        this.toConnectorRect = RectExtensions.initialize();
+        this.toConnectorSide = EConnectorSide.TOP;
     }
-    findNearestCoordinate(difference) {
-        const rect = RectExtensions.addPoint(this.draggedNodeRect, difference);
-        const finder = new NearestCoordinateFinder(this.rects, rect);
-        const xResult = finder.findNearestCoordinateByX();
-        const yResult = finder.findNearestCoordinateByY();
-        const result = { xResult, yResult };
-        return result;
+    initialize() {
+        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
+        this.fromConnectorRect = fromConnector.rect;
+        this.fromConnectorSide = fromConnector.side;
+        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.inputId);
+        this.toConnectorRect = toConnector.rect;
+        this.toConnectorSide = toConnector.side;
     }
-    complete() {
-        this.lineService.hideVerticalLine();
-        this.lineService.hideHorizontalLine();
+    move(difference) {
+        const toConnectorRect = RectExtensions.addPoint(this.toConnectorRect, difference);
+        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(this.fromConnectorRect, toConnectorRect, this.connection.behavior, this.fromConnectorSide, this.toConnectorSide));
+        this.connection.setVector(vector.point1, this.fromConnectorSide, vector.point2, this.toConnectorSide);
+        this.connection.redraw();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FLineAlignmentComponent, selector: "f-line-alignment", host: { classAttribute: "f-line-alignment f-component" }, providers: [
-            { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
-        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "", isInline: true, styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "f-line-alignment", template: "", exportAs: "fComponent", host: {
-                        'class': 'f-line-alignment f-component'
-                    }, providers: [
-                        { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
-                    ], styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
-
-const F_SELECTION_AREA = new InjectionToken('F_SELECTION_AREA');
-class FSelectionAreaBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FSelectionAreaBase, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaBase, decorators: [{
-            type: Directive
-        }] });
 
-class FSelectionAreaComponent extends FSelectionAreaBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference, fDraggableDataContext) {
-        super();
-        this.elementReference = elementReference;
+class NodeDragHandler {
+    constructor(fDraggableDataContext, fNode) {
         this.fDraggableDataContext = fDraggableDataContext;
+        this.fNode = fNode;
+        this.type = EDraggableType.NODE;
+        this.onPointerDownPosition = PointExtensions.initialize();
+        this.onPointerDownPosition = this.fNode.position;
     }
-    ngOnInit() {
-        this.fDraggableDataContext.fSelectionArea = this;
-        this.hostElement.style.display = 'none';
-    }
-    hide() {
-        this.hostElement.style.display = 'none';
-    }
-    show() {
-        this.hostElement.style.display = 'block';
+    move(difference) {
+        const position = Point.fromPoint(this.onPointerDownPosition).add(difference);
+        this.fNode.updatePosition(position);
+        this.fNode.redraw();
+        this.fDraggableDataContext.fLineAlignment?.handle(difference);
     }
-    draw(object) {
-        const style = this.hostElement.style;
-        style.left = object.left + 'px';
-        style.top = object.top + 'px';
-        style.width = object.width + 'px';
-        style.height = object.height + 'px';
+    complete() {
+        this.fNode.completeDrag();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
-            { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
-        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "f-selection-area", template: ``, host: {
-                        'class': 'f-selection-area f-component'
-                    }, providers: [
-                        { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
-                    ], styles: [":host{position:absolute}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }] });
 
-class FindFirstCanBeConnectedOutputByOutletHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
+class IsConnectionUnderNodeHandler {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    get fOutputs() {
-        return this.fComponentsStore.fOutputs;
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore) {
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler) {
         this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
+        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
     }
-    handle(outlet) {
-        let result;
-        const node = this.fNodes.find((x) => x.isContains(outlet.hostElement));
-        if (!node) {
-            throw new Error('Node not found');
+    handle() {
+        const isValid = this.isValidRequest();
+        if (!isValid) {
+            return;
         }
-        const outputsOfNode = this.fOutputs.filter((x) => {
-            return node.isContains(x.hostElement) && x.canBeConnected;
+        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.inputId);
         });
-        if (outputsOfNode.length > 0) {
-            result = outputsOfNode[0];
+        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) {
+                }
+            }
         }
-        return result;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
-class CreateConnectionDragHandler {
-    constructor(getOutputRectInFlowHandler, getConnectionVectorHandler, connection, mouseDownPoint) {
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.connection = connection;
-        this.mouseDownPoint = mouseDownPoint;
-        this.type = EDraggableType.CREATE_CONNECTION;
-        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
-        this.onPointerDownToConnectorRect = RectExtensions.initialize();
-        this.outputSide = EConnectorSide.BOTTOM;
     }
-    initialize() {
-        const outputRect = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
-        this.outputSide = outputRect.side;
-        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));
+    isValidRequest() {
+        const result = this.fDraggableDataContext.draggableItems.length === 1 &&
+            this.fDraggableDataContext.draggableItems[0].type === EDraggableType.NODE;
+        return result;
     }
-    move(difference) {
-        const toPoint = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(this.onPointerDownFromConnectorRect, toPoint, this.connection.behavior, this.outputSide, EConnectorSide.TOP));
-        this.connection.setVector(vector.point1, this.outputSide, vector.point2, EConnectorSide.TOP);
-        this.connection.redraw();
+    getOutputsForNode(node) {
+        return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
     }
-    complete() {
-        this.connection.redraw();
-        this.connection.hide();
+    getInputsForNode(node) {
+        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
     }
-}
-
-class CreateConnectionEvent {
-    constructor(outputId, inputId) {
-        this.outputId = outputId;
-        this.inputId = inputId;
+    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.0.9", 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.0.9", ngImport: i0, type: IsConnectionUnderNodeHandler }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: IsConnectionUnderNodeHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }] });
 
-class FirstNotConnectedInputOfNodeUnderPointerHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
+class NodeOnPointerUp {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore) {
+    constructor(fComponentsStore, fDraggableDataContext, isConnectionUnderNodeHandler) {
         this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.isConnectionUnderNodeHandler = isConnectionUnderNodeHandler;
     }
     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 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 === EDraggableType.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?.();
             });
-        });
-        const result = inputs.find((x) => !!x);
-        return result;
+            this.isConnectionUnderNodeHandler.handle();
+            this.fDraggableDataContext.fLineAlignment?.complete();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: NodeOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodeOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: IsConnectionUnderNodeHandler }] });
 
-class InputsUnderPointerHandler {
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
+class NodePrepareDragSequence {
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    constructor(fComponentsStore) {
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
+    }
+    constructor(fComponentsStore, fDraggableDataContext, updateNodeLayerHandler, getInputRectInFlowHandler, getOutputRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, getConnectionVectorHandler) {
         this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.updateNodeLayerHandler = updateNodeLayerHandler;
+        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
+        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
+        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
+        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
+        this.getConnectionVectorHandler = getConnectionVectorHandler;
     }
     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));
+        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.updateNodeLayerHandler.handle(node);
+                const itemsToDrag = this.calculateDraggableConnectionsAndNodes();
+                const draggedNodes = itemsToDrag.filter((x) => {
+                    return x.type === EDraggableType.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;
+            }
+        }
+    }
+    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.inputId)) {
+                    itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
+                }
+                else {
+                    itemsToDrag.push(new ConnectionSourceDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
+                }
+            });
+            const inputConnections = this.getIncomingConnectionsHandler.handle(this.getInputsForNode(nodeHandler.fNode));
+            inputConnections.forEach((c) => {
+                if (allOutputIds.includes(c.outputId)) {
+                    const index = itemsToDrag.findIndex((x) => x.type === EDraggableType.CONNECTION && x.connection.id === c.id);
+                    if (index !== -1) {
+                        itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
+                    }
+                }
+                else {
+                    itemsToDrag.push(new ConnectionTargetDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
+                }
+            });
+        });
+        return itemsToDrag;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InputsUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InputsUnderPointerHandler }); }
+    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.0.9", ngImport: i0, type: NodePrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: UpdateNodeLayerHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodePrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InputsUnderPointerHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodePrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: UpdateNodeLayerHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: GetConnectionVectorHandler }] });
 
-class FindInputsUnderPointerRequest {
-    constructor(event, dragHandler) {
-        this.event = event;
-        this.dragHandler = dragHandler;
-    }
-}
+const NODE_PROVIDERS = [
+    NodeOnPointerUp,
+    NodePrepareDragSequence,
+    IsConnectionUnderNodeHandler
+];
 
-class FindInputsUnderPointerHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
-    }
-    constructor(fComponentsStore, inputsUnderPointerHandler, firstNotConnectedInputOfNodeUnderPointerHandler) {
+class SingleSelectOnPointerDown {
+    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler) {
         this.fComponentsStore = fComponentsStore;
-        this.inputsUnderPointerHandler = inputsUnderPointerHandler;
-        this.firstNotConnectedInputOfNodeUnderPointerHandler = firstNotConnectedInputOfNodeUnderPointerHandler;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.getConnectionHandler = getConnectionHandler;
     }
-    handle(payload) {
-        const inputsUnderPointer = this.getInputsUnderPointer(payload);
-        const output = this.fComponentsStore.fOutputs.find((x) => x.id === payload.dragHandler.connection.outputId);
-        if (!output) {
-            throw OutputNotFound(payload.dragHandler.connection.outputId);
+    handle(event) {
+        const node = this.fComponentsStore.findNode(event.targetElement);
+        const connection = this.getConnectionHandler.handle(event.targetElement);
+        this.deselectAll(node, event);
+        this.resetSelectionIfNotMultiselect(event);
+        if (node) {
+            if (!this.fDraggableDataContext.selectedItems.includes(node)) {
+                this.fDraggableDataContext.selectedItems.push(node);
+            }
+            else {
+                this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(node), 1);
+            }
         }
-        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;
+        else if (connection) {
+            if (!this.fDraggableDataContext.selectedItems.includes(connection)) {
+                this.fDraggableDataContext.selectedItems.push(connection);
+            }
+            else {
+                this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(connection), 1);
+            }
+        }
+        this.selectIfNotSelected();
+    }
+    deselectAll(node, event) {
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            if (x !== node || (!isNodeOutlet(event.targetElement) && !isNodeOutput(event.targetElement))) {
+                x.deselect();
+            }
         });
     }
-    getInputsUnderPointer(payload) {
-        let inputs = this.inputsUnderPointerHandler.handle(payload.event);
-        const input = this.firstNotConnectedInputOfNodeUnderPointerHandler.handle(payload.event);
-        if (input) {
-            inputs.push(input);
+    resetSelectionIfNotMultiselect(event) {
+        const isMultiselect = MouseEventExtensions.isCommandButton(event.originalEvent) ||
+            MouseEventExtensions.isShiftPressed(event.originalEvent);
+        if (!isMultiselect) {
+            this.fDraggableDataContext.selectedItems = [];
         }
-        inputs = inputs.filter((x) => x.canBeConnected);
-        return inputs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: FindInputsUnderPointerHandler }); }
+    selectIfNotSelected() {
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            if (!x.isSelected()) {
+                x.select();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindInputsUnderPointerHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: InputsUnderPointerHandler }, { type: FirstNotConnectedInputOfNodeUnderPointerHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }] });
 
-class CreateConnectionOnPointerUp {
-    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler, findFirstCanBeConnectedOutputByOutletHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
-        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
-    }
-    handle(event) {
-        const isCreateConnection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EDraggableType.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.outputId);
-                if (!output) {
-                    output = this.fComponentsStore.fOutlets.find((x) => x.id === handler.connection.outputId);
-                }
-                if (!output) {
-                    throw OutputNotFound(handler.connection.outputId);
-                }
-                const isOutlet = isNodeOutlet(output.hostElement);
-                if (isOutlet) {
-                    output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(output);
-                    if (!output) {
-                        throw requiredOutput();
-                    }
-                }
-                this.fComponentsStore.fDraggable?.fCreateConnection.emit(new CreateConnectionEvent(output.id, inputsUnderPointer[0]?.id));
-            }
-            handler.complete();
-        }
+const SINGLE_SELECT_PROVIDERS = [
+    SingleSelectOnPointerDown
+];
+
+class SelectionChangeEvent {
+    constructor(nodes, connections) {
+        this.nodes = nodes;
+        this.connections = connections;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: CreateConnectionOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionOnPointerUp, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }] });
 
-class CreateConnectionPrepareDragSequence {
+class GetCanBeSelectedItemsHandler {
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    get fConnections() {
+        return this.fComponentsStore.fConnections;
+    }
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, getConnectionVectorHandler, findFirstCanBeConnectedOutputByOutletHandler, getOutputRectInFlowHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.findFirstCanBeConnectedOutputByOutletHandler = findFirstCanBeConnectedOutputByOutletHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
     }
-    handle(event) {
-        const node = this.fComponentsStore.findNode(event.targetElement);
-        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
-        if (!node || this.fDraggableDataContext.draggableItems.length || !this.fComponentsStore.fTempConnection) {
-            return;
-        }
-        if (isNodeOutlet(event.targetElement)) {
-            const outlet = this.fComponentsStore.fOutlets.find((x) => {
-                return x.hostElement.contains(event.targetElement);
-            });
-            if (!outlet) {
-                throw new Error('Outlet not found');
-            }
-            const nodeOutputs = this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
-            outlet.setOutputs(nodeOutputs);
-            if (outlet.canBeConnected) {
-                const outletCenter = this.getElementRectInFlowHandler.handle(outlet.hostElement).gravityCenter;
-                if (outlet.isConnectionFromOutlet) {
-                    this.createConnectionHandler(pointerPositionInFlow, outlet, outletCenter);
-                }
-                else {
-                    const output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(outlet);
-                    if (!output) {
-                        throw new Error('Output not found');
-                    }
-                    this.createConnectionHandler(pointerPositionInFlow, output, outletCenter);
-                }
-            }
-        }
-        else if (this.isNodeOutput(event.targetElement, node)) {
-            const output = this.fComponentsStore.fOutputs.find((x) => {
-                return x.hostElement.contains(event.targetElement);
-            });
-            if (!output) {
-                throw new Error('Output not found');
-            }
-            if (output.canBeConnected) {
-                const outputCenter = this.getElementRectInFlowHandler.handle(output.hostElement).gravityCenter;
-                this.createConnectionHandler(pointerPositionInFlow, output, outputCenter);
-            }
-        }
+    handle() {
+        const nodeRects = this.getNodesWithRects();
+        const lineRects = this.getConnectionsWithRects();
+        const result = [...nodeRects, ...lineRects].filter((x) => {
+            return !this.fDraggableDataContext.selectedItems.includes(x.element);
+        });
+        return result;
     }
-    createConnectionHandler(pointerPositionInCanvas, output, outputCenter) {
-        this.fComponentsStore.fTempConnection.outputId = output.id;
-        this.fComponentsStore.fTempConnection.initialize();
-        this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
-        this.fDraggableDataContext.onPointerDownPosition = pointerPositionInCanvas.div(this.transform.scale);
-        this.fDraggableDataContext.draggableItems = [
-            new CreateConnectionDragHandler(this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, this.fComponentsStore.fTempConnection, outputCenter)
-        ];
+    getNodesWithRects() {
+        return this.fNodes.map((x) => {
+            const rect = this.getElementRectInFlowHandler.handle(x.hostElement);
+            return {
+                element: x,
+                rect: RectExtensions.mult(rect, this.transform.scale)
+            };
+        });
     }
-    isNodeOutput(targetElement, node) {
-        const outlets = this.fComponentsStore.fOutlets.filter((x) => node.isContains(x.hostElement));
-        return isNodeOutput(targetElement) && !outlets.length;
+    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.0.9", ngImport: i0, type: CreateConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: GetConnectionVectorHandler }, { token: FindFirstCanBeConnectedOutputByOutletHandler }, { token: GetOutputRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionPrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: GetCanBeSelectedItemsHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetCanBeSelectedItemsHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetConnectionVectorHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }, { type: GetOutputRectInFlowHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
-class ReassignConnectionDragHandler {
-    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.connection = connection;
-        this.type = EDraggableType.REASSIGN_CONNECTION;
-        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
-        this.onPointerDownToConnectorRect = RectExtensions.initialize();
-        this.outputSide = EConnectorSide.BOTTOM;
-        this.inputSide = EConnectorSide.TOP;
+class SelectionAreaDragHandle {
+    get canvasPosition() {
+        return Point.fromPoint(this.fComponentsStore.fCanvas.transform.position).add(this.fComponentsStore.fCanvas.transform.scaledPosition);
+    }
+    constructor(fComponentsStore, fDraggableDataContext, injector) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.injector = injector;
+        this.type = EDraggableType.SELECTION;
+        this.canBeSelected = [];
+        this.selectedByMove = [];
     }
     initialize() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
-        this.inputSide = this.getInputRectInFlowHandler.handle(this.connection.inputId).side;
-        this.outputSide = fromConnector.side;
-        this.onPointerDownFromConnectorRect = fromConnector.rect;
-        this.onPointerDownToConnectorRect = RectExtensions.initialize(this.connection.vector.point2.x, this.connection.vector.point2.y, 0, 0);
+        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
+        });
     }
     move(difference) {
-        const toRect = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(this.onPointerDownFromConnectorRect, toRect, this.connection.behavior, this.outputSide, this.inputSide));
-        this.connection.setVector(vector.point1, this.outputSide, vector.point2, this.inputSide);
-        this.connection.redraw();
+        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);
+            }
+        });
     }
     complete() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
-        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.inputId);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.behavior, fromConnector.side, toConnector.side));
-        this.connection.setVector(vector.point1, fromConnector.side, vector.point2, toConnector.side);
-        this.connection.redraw();
+        this.fDraggableDataContext.fSelectionArea?.hide();
+        this.fDraggableDataContext.selectedItems.push(...this.selectedByMove);
     }
 }
 
-class ReassignConnectionEvent {
-    constructor(connectionId, outputId, oldInputId, newInputId) {
-        this.connectionId = connectionId;
-        this.outputId = outputId;
-        this.oldInputId = oldInputId;
-        this.newInputId = newInputId;
+class SelectionAreaPrepareDragSequence {
+    get fFlow() {
+        return this.fComponentsStore.fFlow;
+    }
+    constructor(fComponentsStore, fDraggableDataContext, injector) {
+        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);
+        }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: SelectionAreaPrepareDragSequence }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaPrepareDragSequence, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i0.Injector }] });
 
-class ReassignConnectionOnPointerUp {
-    get fDraggable() {
-        return this.fComponentsStore.fDraggable;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler) {
-        this.fComponentsStore = fComponentsStore;
+class SelectionAreaOnPointerUp {
+    constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
-        this.findInputsUnderPointerHandler = findInputsUnderPointerHandler;
     }
     handle(event) {
-        const isReassignConnection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EDraggableType.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.inputId !== inputsUnderPointer[0]?.id) {
-                    this.fDraggable.fReassignConnection.emit(new ReassignConnectionEvent(handler.connection.id, handler.connection.outputId, handler.connection.inputId, inputsUnderPointer[0]?.id));
-                }
-            }
-            handler.complete();
+        const isSelection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EDraggableType.SELECTION);
+        if (isSelection) {
+            this.fDraggableDataContext.draggableItems.forEach((x) => {
+                x.complete?.();
+            });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: ReassignConnectionOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }] });
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-class ReassignConnectionPrepareDragSequence {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
+const SELECTION_AREA_PROVIDERS = [
+    GetCanBeSelectedItemsHandler,
+    SelectionAreaPrepareDragSequence,
+    SelectionAreaOnPointerUp,
+];
+
+const F_DRAGGABLE = new InjectionToken('F_DRAGGABLE');
+class FDraggableBase extends IDragAndDropBase {
+    constructor(ngZone) {
+        super(ngZone);
     }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FDraggableBase, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+class FDraggableDirective extends FDraggableBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler) {
-        this.fComponentsStore = fComponentsStore;
+    constructor(elementReference, fDraggableDataContext, ngZone, injector, fComponentsStore, document) {
+        super(ngZone);
+        this.elementReference = elementReference;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.getConnectionHandler = getConnectionHandler;
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        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.document = document;
     }
-    handle(event) {
-        const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
-        const position = event.getPosition();
-        const allElements = document.elementsFromPoint(position.x, position.y);
-        const dragHandlesOfConnections = allElements.filter((x) => {
-            return !!this.getConnectionHandler.handle(x) && x.classList.contains(F_CONNECTION_DRAG_HANDLE_CLASS);
+    ngOnInit() {
+        this.fComponentsStore.fDraggable = this;
+    }
+    ngAfterViewInit() {
+        super.subscribe(this.document);
+    }
+    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);
+        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?.();
         });
-        let connectionToReassign;
-        if (dragHandlesOfConnections.length) {
-            const connections = dragHandlesOfConnections.map((x) => this.getConnectionHandler.handle(x)).filter((x) => !x?.disabled);
-            if (connections.length) {
-                connectionToReassign = this.getConnectionHandler.handle(dragHandlesOfConnections[0]);
-            }
-        }
-        if (connectionToReassign && !this.fDraggableDataContext.draggableItems.length) {
-            this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
-            this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(this.transform.scale);
-            this.fDraggableDataContext.draggableItems = [
-                new ReassignConnectionDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, connectionToReassign)
-            ];
+        this.emitSelectionChangeEvent();
+        if (this.fDraggableDataContext.draggableItems.length > 0) {
+            this.hostElement.classList.add('f-dragging');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence }); }
+    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();
+    }
+    emitSelectionChangeEvent() {
+        let selectedNodes = [];
+        let selectedConnections = [];
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            if (x.hostElement.classList.contains('f-node')) {
+                selectedNodes.push(x.hostElement.id);
+            }
+            else {
+                selectedConnections.push(x.hostElement.id);
+            }
+        });
+        this.fSelectionChange.emit(new SelectionChangeEvent(selectedNodes, selectedConnections));
+    }
+    ngOnDestroy() {
+        super.unsubscribe();
+        this.subscriptions$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", 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.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "f-flow[fDraggable]",
+                    exportAs: 'fDraggable',
+                    providers: [
+                        { provide: F_DRAGGABLE, useExisting: FDraggableDirective }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }, { type: i0.NgZone }, { type: i0.Injector }, { type: FComponentsStore }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { disabled: [{
+                type: Input,
+                args: ['fDraggableDisabled']
+            }], fSelectionChange: [{
+                type: Output
+            }], fCreateNode: [{
+                type: Output
+            }], fReassignConnection: [{
+                type: Output
+            }], fCreateConnection: [{
+                type: Output
+            }] } });
+
+class SelectAllHandler {
+    constructor(fDataContext, fDraggableDataContext) {
+        this.fDataContext = fDataContext;
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    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);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectAllHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectAllHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectAllHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetConnectionVectorHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
-const CONNECTIONS_PROVIDERS = [
-    FindFirstCanBeConnectedOutputByOutletHandler,
-    CreateConnectionOnPointerUp,
-    CreateConnectionPrepareDragSequence,
-    FirstNotConnectedInputOfNodeUnderPointerHandler,
-    InputsUnderPointerHandler,
-    FindInputsUnderPointerHandler,
-    ReassignConnectionOnPointerUp,
-    ReassignConnectionPrepareDragSequence
+const COMMON_PROVIDERS = [
+    GetAllNodesRectHandler,
+    GetConnectionVectorHandler,
+    GetConnectionHandler,
+    GetElementRectInFlowHandler,
+    GetOutputRectInFlowHandler,
+    GetInputRectInFlowHandler,
+    GetIncomingConnectionsHandler,
+    GetOutgoingConnectionsHandler,
+    SelectAllHandler,
+    UpdateNodeLayerHandler,
 ];
 
-class CreateNodeEvent {
-    constructor(rect, data) {
-        this.rect = rect;
-        this.data = data;
+class FConnectorBase {
+    constructor() {
+        this.stateChanges = new Subject();
+        this.side = EConnectorSide.BOTTOM;
+    }
+    isContains(element) {
+        return this.hostElement.contains(element);
+    }
+    setConnected(isConnected) {
+        this.isConnected = isConnected;
     }
 }
 
-class ExternalItemDragHandler {
-    constructor(externalItem) {
-        this.externalItem = externalItem;
-        this.type = EDraggableType.PALETTE_ITEM;
-        this.onPointerDownRect = RectExtensions.initialize();
-        this.difference = PointExtensions.initialize();
+const F_NODE_INPUT = new InjectionToken('F_NODE_INPUT');
+class FNodeInputBase extends FConnectorBase {
+    constructor() {
+        super(...arguments);
+        this.isConnected = false;
+    }
+    get canBeConnected() {
+        return !this.disabled && (this.multiple ? true : !this.isConnected);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeInputBase, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputBase, decorators: [{
+            type: Directive
+        }] });
+
+function isNodeInput(element) {
+    return !!element.closest('[fNodeInput]');
+}
+
+const F_NODE = new InjectionToken('F_NODE');
+class FNodeBase {
+    constructor() {
+        this.stateChanges = new Subject();
+        this._position = PointExtensions.initialize();
     }
-    getStyle(position) {
-        return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
+    isContains(element) {
+        return this.hostElement.contains(element);
     }
-    initialize() {
-        this.onPointerDownRect = this.getExternalItemRect();
-        this.placeholder = DomElementExtensions.deepCloneNode(this.externalItem.hostElement);
-        document.body.appendChild(this.placeholder);
+    redraw() {
+        this.hostElement.setAttribute('style', 'transform: translate(' + this.position.x + 'px,' + this.position.y + 'px)');
     }
-    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);
+    deselect() {
+        this.hostElement.classList.remove(F_SELECTED_CLASS);
     }
-    move(difference) {
-        this.difference = difference;
-        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
-        this.placeholder.setAttribute('style', this.getStyle(position));
+    select() {
+        this.hostElement.classList.add(F_SELECTED_CLASS);
     }
-    getPlaceholderRect() {
-        return RectExtensions.fromElement(this.placeholder);
+    isSelected() {
+        return this.hostElement.classList.contains(F_SELECTED_CLASS);
     }
-    complete() {
-        document.body.removeChild(this.placeholder);
+    updatePosition(position) {
+        this._position = position;
+    }
+    completeDrag() {
+        this.positionChange.emit(this.position);
     }
 }
 
-class ExternalItemPrepareDragSequence {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
+let uniqueId$4 = 0;
+class FNodeInputDirective extends FNodeInputBase {
+    get disabled() {
+        return this.isDisabled;
     }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+    set disabled(isDisabled) {
+        const value = BooleanExtensions.castToBoolean(isDisabled);
+        if (value !== this.isDisabled) {
+            this.isDisabled = value;
+            this.stateChanges.next();
+        }
     }
-    constructor(fComponentsStore, fDraggableDataContext, fExternalItemService) {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, fNode, fComponentsStore) {
+        super();
+        this.elementReference = elementReference;
+        this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fExternalItemService = fExternalItemService;
+        this.id = `f-node-input-${uniqueId$4++}`;
+        this.multiple = true;
+        this.isDisabled = false;
+        this.isConnected = false;
     }
-    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)
-            ];
+    ngOnInit() {
+        if (!this.fNode) {
+            throw new Error('fNodeInput must be inside f-node');
         }
+        this.fComponentsStore.addInput(this);
+        this.fNode.addConnector(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: ExternalItemPrepareDragSequence }); }
+    setConnected(isConnected) {
+        this.isConnected = isConnected;
+        this.hostElement.classList.toggle('f-node-input-connected', isConnected);
+    }
+    ngOnDestroy() {
+        this.fNode.removeConnector(this);
+        this.fComponentsStore.removeInput(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fNodeInputId", "id"], multiple: ["fNodeInputMultiple", "multiple"], disabled: ["fNodeInputDisabled", "disabled"] }, host: { properties: { "attr.id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled", "class.f-node-input-not-connectable": "!canBeConnected" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemPrepareDragSequence, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fNodeInput]",
+                    exportAs: 'fNodeInput',
+                    host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-node-input",
+                        '[class.f-node-input-multiple]': 'multiple',
+                        '[class.f-node-input-disabled]': 'disabled',
+                        '[class.f-node-input-not-connectable]': '!canBeConnected',
+                    },
+                    providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
+                    type: Inject,
+                    args: [F_NODE]
+                }] }, { type: FComponentsStore }], propDecorators: { id: [{
+                type: Input,
+                args: ['fNodeInputId']
+            }], multiple: [{
+                type: Input,
+                args: ['fNodeInputMultiple']
+            }], disabled: [{
+                type: Input,
+                args: ['fNodeInputDisabled']
+            }] } });
 
-class ExternalItemOnPointerUp {
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    get fCreateNode() {
-        return this.fComponentsStore.fDraggable.fCreateNode;
+const F_NODE_OUTLET = new InjectionToken('F_NODE_OUTLET');
+class FNodeOutletBase extends FConnectorBase {
+    constructor() {
+        super(...arguments);
+        this.isConnected = false;
+        this.outputs = [];
     }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+    get canBeConnected() {
+        return !this.disabled;
     }
-    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 === EDraggableType.PALETTE_ITEM);
-        if (isDragPaletteItem) {
-            const dragHandler = this.fDraggableDataContext.draggableItems[0];
-            dragHandler.move(difference);
-            const isPointerInCanvasRect = document.elementsFromPoint(event.getPosition().x, event.getPosition().y).some((x) => x === this.flowHost);
-            if (isPointerInCanvasRect) {
-                const rectInCanvas = this.getElementRectInFlowHandler.handle(dragHandler.placeholder);
-                this.fCreateNode.emit(new CreateNodeEvent(rectInCanvas, dragHandler.externalItem.data));
-            }
-            dragHandler.complete();
-        }
+    setOutputs(outputs) {
+        this.outputs = outputs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: ExternalItemOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutletBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemOnPointerUp, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletBase, decorators: [{
+            type: Directive
+        }] });
 
-const EXTERNAL_ITEM_PROVIDERS = [
-    ExternalItemOnPointerUp,
-    ExternalItemPrepareDragSequence
-];
+function isNodeOutlet(element) {
+    return !!element.closest('[fNodeOutlet]');
+}
 
-class ConnectionDragHandler {
-    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.connection = connection;
-        this.type = EDraggableType.CONNECTION;
-        this.onPointerDownVector = VectorExtensions.initialize();
-        this.fromConnectorSide = EConnectorSide.BOTTOM;
-        this.toConnectorSide = EConnectorSide.TOP;
+let uniqueId$3 = 0;
+class FNodeOutletDirective extends FNodeOutletBase {
+    get disabled() {
+        return this.isDisabled;
     }
-    initialize() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
-        this.fromConnectorSide = fromConnector.side;
-        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.inputId);
-        this.toConnectorSide = toConnector.side;
-        this.onPointerDownVector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(fromConnector.rect, toConnector.rect, this.connection.behavior, fromConnector.side, toConnector.side));
+    set disabled(isDisabled) {
+        const value = BooleanExtensions.castToBoolean(isDisabled);
+        if (value !== this.isDisabled) {
+            this.isDisabled = value;
+            this.stateChanges.next();
+        }
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, fNode, fComponentsStore) {
+        super();
+        this.elementReference = elementReference;
+        this.fNode = fNode;
+        this.fComponentsStore = fComponentsStore;
+        this.id = `f-node-outlet-${uniqueId$3++}`;
+        this.isDisabled = false;
+        this.isConnectionFromOutlet = false;
+    }
+    ngOnInit() {
+        if (!this.fNode) {
+            throw new Error('fNodeOutlet must be inside f-node');
+        }
+        this.fComponentsStore.addOutlet(this);
+    }
+    ngOnDestroy() {
+        this.fComponentsStore.removeOutlet(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fNodeOutletId", "id"], disabled: ["fNodeOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.id": "id", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }], exportAs: ["fNodeOutlet"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fNodeOutlet]",
+                    exportAs: 'fNodeOutlet',
+                    host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-node-outlet",
+                        '[class.f-node-outlet-disabled]': 'disabled'
+                    },
+                    providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
+                    type: Inject,
+                    args: [F_NODE]
+                }] }, { type: FComponentsStore }], propDecorators: { id: [{
+                type: Input,
+                args: ['fNodeOutletId']
+            }], disabled: [{
+                type: Input,
+                args: ['fNodeOutletDisabled']
+            }], isConnectionFromOutlet: [{
+                type: Input
+            }] } });
+
+const F_NODE_OUTPUT = new InjectionToken('F_NODE_OUTPUT');
+class FNodeOutputBase extends FConnectorBase {
+    constructor() {
+        super(...arguments);
+        this.isConnected = false;
     }
-    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();
+    get canBeConnected() {
+        return !this.disabled && !this.isConnected;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutputBase, usesInheritance: true, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputBase, decorators: [{
+            type: Directive
+        }] });
 
-class ConnectionSourceDragHandler {
-    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.connection = connection;
-        this.type = EDraggableType.CONNECTION;
-        this.fromConnectorRect = RectExtensions.initialize();
-        this.fromConnectorSide = EConnectorSide.BOTTOM;
-        this.toConnectorRect = RectExtensions.initialize();
-        this.toConnectorSide = EConnectorSide.TOP;
-    }
-    initialize() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
-        this.fromConnectorRect = fromConnector.rect;
-        this.fromConnectorSide = fromConnector.side;
-        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.inputId);
-        this.toConnectorRect = toConnector.rect;
-        this.toConnectorSide = toConnector.side;
-    }
-    move(difference) {
-        const fromConnectorRect = RectExtensions.addPoint(this.fromConnectorRect, difference);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(fromConnectorRect, this.toConnectorRect, this.connection.behavior, this.fromConnectorSide, this.toConnectorSide));
-        this.connection.setVector(vector.point1, this.fromConnectorSide, vector.point2, this.toConnectorSide);
-        this.connection.redraw();
-    }
+function isNodeOutput(element) {
+    return !!element.closest('[fNodeOutput]');
 }
 
-class ConnectionTargetDragHandler {
-    constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
-        this.connection = connection;
-        this.type = EDraggableType.CONNECTION;
-        this.fromConnectorRect = RectExtensions.initialize();
-        this.fromConnectorSide = EConnectorSide.BOTTOM;
-        this.toConnectorRect = RectExtensions.initialize();
-        this.toConnectorSide = EConnectorSide.TOP;
+let uniqueId$2 = 0;
+class FNodeOutputDirective extends FNodeOutputBase {
+    get disabled() {
+        return this.isDisabled;
     }
-    initialize() {
-        const fromConnector = this.getOutputRectInFlowHandler.handle(this.connection.outputId);
-        this.fromConnectorRect = fromConnector.rect;
-        this.fromConnectorSide = fromConnector.side;
-        const toConnector = this.getInputRectInFlowHandler.handle(this.connection.inputId);
-        this.toConnectorRect = toConnector.rect;
-        this.toConnectorSide = toConnector.side;
+    set disabled(isDisabled) {
+        const value = BooleanExtensions.castToBoolean(isDisabled);
+        if (value !== this.isDisabled) {
+            this.isDisabled = value;
+            this.stateChanges.next();
+        }
     }
-    move(difference) {
-        const toConnectorRect = RectExtensions.addPoint(this.toConnectorRect, difference);
-        const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(this.fromConnectorRect, toConnectorRect, this.connection.behavior, this.fromConnectorSide, this.toConnectorSide));
-        this.connection.setVector(vector.point1, this.fromConnectorSide, vector.point2, this.toConnectorSide);
-        this.connection.redraw();
+    get hostElement() {
+        return this.elementReference.nativeElement;
     }
-}
-
-class NodeDragHandler {
-    constructor(fDraggableDataContext, fNode) {
-        this.fDraggableDataContext = fDraggableDataContext;
+    constructor(elementReference, fNode, fComponentsStore) {
+        super();
+        this.elementReference = elementReference;
         this.fNode = fNode;
-        this.type = EDraggableType.NODE;
-        this.onPointerDownPosition = PointExtensions.initialize();
-        this.onPointerDownPosition = this.fNode.position;
+        this.fComponentsStore = fComponentsStore;
+        this.id = `f-node-output-${uniqueId$2++}`;
+        this.isDisabled = false;
+        this.isConnected = false;
     }
-    move(difference) {
-        const position = Point.fromPoint(this.onPointerDownPosition).add(difference);
-        this.fNode.updatePosition(position);
-        this.fNode.redraw();
-        this.fDraggableDataContext.fLineAlignment?.handle(difference);
+    ngOnInit() {
+        if (!this.fNode) {
+            throw new Error('fNodeOutput must be inside f-node');
+        }
+        this.fComponentsStore.addOutput(this);
+        this.fNode.addConnector(this);
     }
-    complete() {
-        this.fNode.completeDrag();
+    setConnected(isConnected) {
+        this.isConnected = isConnected;
+        this.hostElement.classList.toggle('f-node-output-connected', isConnected);
+    }
+    ngOnDestroy() {
+        this.fNode.removeConnector(this);
+        this.fComponentsStore.removeOutput(this);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fNodeOutputId", "id"], disabled: ["fNodeOutputDisabled", "disabled"] }, host: { properties: { "attr.id": "id", "class.f-node-output-disabled": "disabled" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fNodeOutput]",
+                    exportAs: 'fNodeOutput',
+                    host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-node-output",
+                        '[class.f-node-output-disabled]': 'disabled',
+                    },
+                    providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
+                    type: Inject,
+                    args: [F_NODE]
+                }] }, { type: FComponentsStore }], propDecorators: { id: [{
+                type: Input,
+                args: ['fNodeOutputId']
+            }], disabled: [{
+                type: Input,
+                args: ['fNodeOutputDisabled']
+            }] } });
 
-class IsConnectionUnderNodeHandler {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
-        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
-        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
+const F_DRAG_HANDLE = new InjectionToken('F_DRAG_HANDLE');
+class FDragHandleDirective {
+    get disabled() {
+        return this.isDisabled;
     }
-    handle() {
-        const isValid = this.isValidRequest();
-        if (!isValid) {
-            return;
-        }
-        const fNode = this.fDraggableDataContext.draggableItems[0].fNode;
-        const outputsOfNode = this.getOutputsForNode(fNode);
-        const inputsOfNode = this.getInputsForNode(fNode);
-        const isCantBeConnectedByOutput = outputsOfNode.some((x) => !x.canBeConnected);
-        const isCantBeConnectedByInput = this.fComponentsStore.fConnections.some((x) => {
-            return inputsOfNode.find((input) => input.id === x.inputId);
-        });
-        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) {
-                }
-            }
+    set disabled(isDisabled) {
+        const value = BooleanExtensions.castToBoolean(isDisabled);
+        if (value !== this.isDisabled) {
+            this.isDisabled = value;
+            this.stateChanges.next();
         }
     }
-    isValidRequest() {
-        const result = this.fDraggableDataContext.draggableItems.length === 1 &&
-            this.fDraggableDataContext.draggableItems[0].type === EDraggableType.NODE;
-        return result;
+    get hostElement() {
+        return this.elementReference.nativeElement;
     }
-    getOutputsForNode(node) {
-        return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
+    constructor(elementReference, _parentNode) {
+        this.elementReference = elementReference;
+        this.stateChanges = new Subject();
+        this.isDisabled = false;
+        this._parentNode = _parentNode;
     }
-    getInputsForNode(node) {
-        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    ngOnDestroy() {
+        this.stateChanges.complete();
     }
-    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.0.9", ngImport: i0, type: FDragHandleDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FDragHandleDirective, isStandalone: true, selector: "[fDragHandle]", inputs: { disabled: ["fDragHandleDisabled", "disabled"] }, host: { properties: { "class.f-drag-handle-disabled": "disabled" }, classAttribute: "f-drag-handle f-component" }, providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fDragHandle]",
+                    standalone: true,
+                    host: {
+                        class: "f-drag-handle f-component",
+                        '[class.f-drag-handle-disabled]': 'disabled'
+                    },
+                    providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [F_NODE]
+                }, {
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }], propDecorators: { disabled: [{
+                type: Input,
+                args: ['fDragHandleDisabled']
+            }] } });
+
+function isNodeDragHandle(element) {
+    const dragHandle = getClosestDragHandle(element);
+    return !!dragHandle && !isElementOrParentExcluded(element);
+}
+function isElementOrParentExcluded(element) {
+    const isContains = isElementContainsClass(element);
+    const parentElement = element.parentElement;
+    const dragHandle = getClosestDragHandle(parentElement);
+    if (!isContains && !!dragHandle) {
+        return isElementOrParentExcluded(parentElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: IsConnectionUnderNodeHandler }); }
+    return isContains;
+}
+function getClosestDragHandle(element) {
+    return element.closest('.f-drag-handle');
+}
+function isElementContainsClass(element) {
+    return element.classList.contains('f-drag-handle-disabled');
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: IsConnectionUnderNodeHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }] });
 
-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.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 === EDraggableType.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?.();
+class FResizeObserver extends Observable {
+    constructor(element) {
+        super(subscriber => {
+            const observer = new ResizeObserver(entries => {
+                subscriber.next(entries);
             });
-            this.isConnectionUnderNodeHandler.handle();
-            this.fDraggableDataContext.fLineAlignment?.complete();
-        }
+            observer.observe(element);
+            return function unsubscribe() {
+                observer.unobserve(element);
+                observer.disconnect();
+            };
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: NodeOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodeOnPointerUp, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: IsConnectionUnderNodeHandler }] });
 
-class NodePrepareDragSequence {
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
+let uniqueId$1 = 0;
+class FNodeComponent extends FNodeBase {
+    set position(value) {
+        this._position = PointExtensions.castToPoint(value);
+        this.refresh();
     }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+    get position() {
+        return this._position;
     }
-    constructor(fComponentsStore, fDraggableDataContext, updateNodeLayerHandler, getInputRectInFlowHandler, getOutputRectInFlowHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, getConnectionVectorHandler) {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, fComponentsStore) {
+        super();
+        this.elementReference = elementReference;
         this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.updateNodeLayerHandler = updateNodeLayerHandler;
-        this.getInputRectInFlowHandler = getInputRectInFlowHandler;
-        this.getOutputRectInFlowHandler = getOutputRectInFlowHandler;
-        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
-        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
-        this.getConnectionVectorHandler = getConnectionVectorHandler;
+        this.subscriptions$ = new Subscription();
+        this.id = `f-node-${uniqueId$1++}`;
+        this.positionChange = new EventEmitter();
+        this.disabled = false;
+        this.connectors = [];
     }
-    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.updateNodeLayerHandler.handle(node);
-                const itemsToDrag = this.calculateDraggableConnectionsAndNodes();
-                const draggedNodes = itemsToDrag.filter((x) => {
-                    return x.type === EDraggableType.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;
-            }
-        }
+    ngOnInit() {
+        super.redraw();
+        this.fComponentsStore.addNode(this);
     }
-    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.inputId)) {
-                    itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
-                }
-                else {
-                    itemsToDrag.push(new ConnectionSourceDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
-                }
-            });
-            const inputConnections = this.getIncomingConnectionsHandler.handle(this.getInputsForNode(nodeHandler.fNode));
-            inputConnections.forEach((c) => {
-                if (allOutputIds.includes(c.outputId)) {
-                    const index = itemsToDrag.findIndex((x) => x.type === EDraggableType.CONNECTION && x.connection.id === c.id);
-                    if (index !== -1) {
-                        itemsToDrag.push(new ConnectionDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
-                    }
-                }
-                else {
-                    itemsToDrag.push(new ConnectionTargetDragHandler(this.getInputRectInFlowHandler, this.getOutputRectInFlowHandler, this.getConnectionVectorHandler, c));
-                }
+    ngAfterViewInit() {
+        this.subscriptions$.add(this.subscribeOnResizeChanges());
+    }
+    subscribeOnResizeChanges() {
+        return new FResizeObserver(this.hostElement).pipe(startWith(null)).subscribe(() => {
+            this.connectors.forEach((connector) => {
+                connector.side = new GetConnectorSideInNodeHandler().handle(connector.hostElement, this.hostElement);
             });
+            this.fComponentsStore.changes.next();
         });
-        return itemsToDrag;
     }
-    getInputsForNode(node) {
-        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    addConnector(connector) {
+        this.connectors.push(connector);
     }
-    getOutputsForNode(node) {
-        return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
+    removeConnector(connector) {
+        const index = this.connectors.indexOf(connector);
+        if (index !== -1) {
+            this.connectors.splice(index, 1);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodePrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: UpdateNodeLayerHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodePrepareDragSequence }); }
+    refresh() {
+        this.stateChanges.next();
+    }
+    ngOnDestroy() {
+        this.fComponentsStore.removeNode(this);
+        this.stateChanges.complete();
+        this.subscriptions$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FNodeComponent, selector: "f-node", inputs: { id: "id", position: ["fNodePosition", "position"], disabled: "disabled" }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.id": "id", "class.f-node-disabled": "disabled" }, classAttribute: "f-node f-component" }, providers: [
+            { provide: F_NODE, useExisting: FNodeComponent }
+        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:absolute!important;left:0;top:0;pointer-events:all;transform-origin:0 0;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodePrepareDragSequence, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: UpdateNodeLayerHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: GetConnectionVectorHandler }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "f-node", exportAs: "fComponent", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.id]': 'id',
+                        class: "f-node f-component",
+                        '[class.f-node-disabled]': 'disabled',
+                    }, providers: [
+                        { provide: F_NODE, useExisting: FNodeComponent }
+                    ], template: "<ng-content></ng-content>\n", styles: [":host{position:absolute!important;left:0;top:0;pointer-events:all;transform-origin:0 0;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { id: [{
+                type: Input
+            }], position: [{
+                type: Input,
+                args: ['fNodePosition']
+            }], positionChange: [{
+                type: Output,
+                args: ['fNodePositionChange']
+            }], disabled: [{
+                type: Input
+            }] } });
 
-const NODE_PROVIDERS = [
-    NodeOnPointerUp,
-    NodePrepareDragSequence,
-    IsConnectionUnderNodeHandler
-];
+function isNode(element) {
+    return !!element.closest('f-node');
+}
 
-class SingleSelectOnPointerDown {
-    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler) {
+const F_ZOOM = new InjectionToken('F_ZOOM');
+class FZoomBase {
+    get flowHost() {
+        return this.fComponentsStore.flowHost;
+    }
+    get fCanvas() {
+        return this.fComponentsStore.fCanvas;
+    }
+    constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.getConnectionHandler = getConnectionHandler;
+        this.isEnabled = false;
+        this.listeners = EventExtensions.emptyListener();
     }
-    handle(event) {
-        const node = this.fComponentsStore.findNode(event.targetElement);
-        const connection = this.getConnectionHandler.handle(event.targetElement);
-        this.deselectAll(node, event);
-        this.resetSelectionIfNotMultiselect(event);
-        if (node) {
-            if (!this.fDraggableDataContext.selectedItems.includes(node)) {
-                this.fDraggableDataContext.selectedItems.push(node);
-            }
-            else {
-                this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(node), 1);
-            }
+    toggleZoom() {
+        if (this.isEnabled) {
+            this.subscribe();
         }
-        else if (connection) {
-            if (!this.fDraggableDataContext.selectedItems.includes(connection)) {
-                this.fDraggableDataContext.selectedItems.push(connection);
-            }
-            else {
-                this.fDraggableDataContext.selectedItems.splice(this.fDraggableDataContext.selectedItems.indexOf(connection), 1);
-            }
+        else {
+            this.unsubscribe();
         }
-        this.selectIfNotSelected();
-    }
-    deselectAll(node, event) {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            if (x !== node || (!isNodeOutlet(event.targetElement) && !isNodeOutput(event.targetElement))) {
-                x.deselect();
-            }
-        });
     }
-    resetSelectionIfNotMultiselect(event) {
-        const isMultiselect = MouseEventExtensions.isCommandButton(event.originalEvent) ||
-            MouseEventExtensions.isShiftPressed(event.originalEvent);
-        if (!isMultiselect) {
-            this.fDraggableDataContext.selectedItems = [];
+    subscribe() {
+        this.listeners();
+        if (!this.flowHost) {
+            return;
         }
+        this.flowHost.addEventListener('wheel', this.onWheel.bind(this));
+        this.flowHost.addEventListener('dblclick', this.onDoubleClick.bind(this));
+        this.listeners = () => {
+            this.flowHost.removeEventListener('wheel', this.onWheel.bind(this));
+            this.flowHost.removeEventListener('dblclick', this.onDoubleClick.bind(this));
+        };
     }
-    selectIfNotSelected() {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            if (!x.isSelected()) {
-                x.select();
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }] });
-
-const SINGLE_SELECT_PROVIDERS = [
-    SingleSelectOnPointerDown
-];
-
-class SelectionChangeEvent {
-    constructor(nodes, connections) {
-        this.nodes = nodes;
-        this.connections = connections;
+    getScale() {
+        return this.fCanvas.transform.scale || 1;
     }
-}
-
-class GetCanBeSelectedItemsHandler {
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
+    onWheel(event) {
+        event.preventDefault();
+        if (this.fComponentsStore.fDraggable?.isDragStarted) {
+            return;
+        }
+        let result = this.getScale();
+        const direction = event.deltaY > 0 ? -1 : 1;
+        const step = this.step;
+        result = result + step * direction;
+        result = Math.max(this.minimum, Math.min(result, this.maximum));
+        const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
+        this.fCanvas.setZoom(result, pointerPositionInFlow);
+        this.fCanvas.redraw();
+        this.fCanvas.completeDrag();
     }
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
+    onDoubleClick(event) {
+        event.preventDefault();
+        if (this.fComponentsStore.fDraggable?.isDragStarted || isNode(event.target)) {
+            return;
+        }
+        let result = this.getScale();
+        const direction = 1;
+        const step = this.dblClickStep;
+        result = result + step * direction;
+        result = Math.max(this.minimum, Math.min(result, this.maximum));
+        const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
+        this.fCanvas.setZoom(result, pointerPositionInFlow);
+        this.fCanvas.redrawWithAnimation();
+        this.fCanvas.completeDrag();
     }
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
+    onZoomToCenter(deltaY, position) {
+        const preventDefault = () => {
+        };
+        const rect = RectExtensions.fromElement(this.flowHost);
+        this.onWheel({
+            deltaY, preventDefault, clientX: position?.x || rect.gravityCenter.x, clientY: position?.y || rect.gravityCenter.y
+        });
     }
-    constructor(fComponentsStore, fDraggableDataContext, getElementRectInFlowHandler) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.getElementRectInFlowHandler = getElementRectInFlowHandler;
+    zoomIn(position) {
+        this.onZoomToCenter(-1, 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;
+    zoomOut(position) {
+        this.onZoomToCenter(1, position);
     }
-    getNodesWithRects() {
-        return this.fNodes.map((x) => {
-            const rect = this.getElementRectInFlowHandler.handle(x.hostElement);
-            return {
-                element: x,
-                rect: RectExtensions.mult(rect, this.transform.scale)
-            };
-        });
+    reset() {
+        this.fCanvas.resetZoom();
+        this.fCanvas.redraw();
+        this.fCanvas.completeDrag();
     }
-    getConnectionsWithRects() {
-        return this.fConnections.map((x) => {
-            const rect = this.getElementRectInFlowHandler.handle(x.boundingElement);
-            return {
-                element: x,
-                rect: RectExtensions.mult(rect, this.transform.scale)
-            };
-        });
+    unsubscribe() {
+        this.listeners();
+        this.listeners = EventExtensions.emptyListener();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: GetCanBeSelectedItemsHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetCanBeSelectedItemsHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
-class SelectionAreaDragHandle {
-    get canvasPosition() {
-        return Point.fromPoint(this.fComponentsStore.fCanvas.transform.position).add(this.fComponentsStore.fCanvas.transform.scaledPosition);
+class FZoomDirective extends FZoomBase {
+    get fFlowZoom() {
+        return this.isEnabled;
     }
-    constructor(fComponentsStore, fDraggableDataContext, injector) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.injector = injector;
-        this.type = EDraggableType.SELECTION;
-        this.canBeSelected = [];
-        this.selectedByMove = [];
+    set fFlowZoom(isEnabled) {
+        const value = BooleanExtensions.castToBoolean(isEnabled);
+        if (value !== this.isEnabled) {
+            this.isEnabled = value;
+            this.toggleZoom();
+        }
     }
-    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
-        });
+    constructor(fComponentsStore) {
+        super(fComponentsStore);
+        this.minimum = 0.1;
+        this.maximum = 4;
+        this.step = 0.1;
+        this.dblClickStep = 0.5;
     }
-    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);
-            }
-        });
+    ngAfterViewInit() {
+        super.toggleZoom();
     }
-    complete() {
-        this.fDraggableDataContext.fSelectionArea?.hide();
-        this.fDraggableDataContext.selectedItems.push(...this.selectedByMove);
+    ngOnDestroy() {
+        super.unsubscribe();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FZoomDirective, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FZoomDirective, selector: "f-canvas[fZoom]", inputs: { fFlowZoom: ["fZoom", "fFlowZoom"], minimum: ["fZoomMinimum", "minimum"], maximum: ["fZoomMaximum", "maximum"], step: ["fZoomStep", "step"], dblClickStep: ["fZoomDblClickStep", "dblClickStep"] }, host: { classAttribute: "f-zoom f-component" }, providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FZoomDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "f-canvas[fZoom]",
+                    exportAs: 'fComponent',
+                    host: {
+                        'class': 'f-zoom f-component'
+                    },
+                    providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }],
+                }]
+        }], ctorParameters: () => [{ type: FComponentsStore }], propDecorators: { fFlowZoom: [{
+                type: Input,
+                args: ['fZoom']
+            }], minimum: [{
+                type: Input,
+                args: ['fZoomMinimum']
+            }], maximum: [{
+                type: Input,
+                args: ['fZoomMaximum']
+            }], step: [{
+                type: Input,
+                args: ['fZoomStep']
+            }], dblClickStep: [{
+                type: Input,
+                args: ['fZoomDblClickStep']
+            }] } });
+
+function mixinChangeZoom(base) {
+    return class extends base {
+        setZoom(scaleValue, toPosition) {
+            if (scaleValue !== this.transform.scale) {
+                const summaryPosition = PointExtensions.sum(this.transform.scaledPosition, this.transform.position);
+                const newX = toPosition.x - (toPosition.x - summaryPosition.x) * scaleValue / this.transform.scale;
+                const newY = toPosition.y - (toPosition.y - summaryPosition.y) * scaleValue / this.transform.scale;
+                this.transform.scale = scaleValue;
+                this.transform.scaledPosition = PointExtensions.sub(PointExtensions.initialize(newX, newY), this.transform.position);
+            }
+        }
+        setScalePosition(value) {
+            this.transform.scaledPosition = value;
+        }
+        resetZoom() {
+            this.transform.scale = 1;
+            this.transform.scaledPosition = PointExtensions.initialize();
+        }
+        constructor(...args) {
+            super(...args);
+        }
+    };
 }
 
-class SelectionAreaPrepareDragSequence {
-    get fFlow() {
-        return this.fComponentsStore.fFlow;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, injector) {
-        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);
+function mixinFitToParent(base) {
+    return class extends base {
+        fitToParent(rect, parentRect, points) {
+            this.transform.scaledPosition = PointExtensions.initialize();
+            this.transform.position = this.getZeroPositionWithoutScale(points);
+            const itemsContainerWidth = rect.width / this.transform.scale;
+            const itemsContainerHeight = rect.height / this.transform.scale;
+            if ((itemsContainerWidth > parentRect.width || itemsContainerHeight > parentRect.height) ||
+                itemsContainerWidth < parentRect.width && itemsContainerHeight < parentRect.height) {
+                this.transform.scale = Math.min(parentRect.width / itemsContainerWidth, parentRect.height / itemsContainerHeight);
+            }
+            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
+            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
+            this.transform.position = PointExtensions.initialize(newX, newY);
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", ngImport: i0, type: SelectionAreaPrepareDragSequence }); }
+        getZeroPositionWithoutScale(points) {
+            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
+            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
+            return PointExtensions.initialize(xPoint, yPoint);
+        }
+        constructor(...args) {
+            super(...args);
+        }
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaPrepareDragSequence, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i0.Injector }] });
 
-class SelectionAreaOnPointerUp {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(event) {
-        const isSelection = this.fDraggableDataContext.draggableItems.some((x) => x.type === EDraggableType.SELECTION);
-        if (isSelection) {
-            this.fDraggableDataContext.draggableItems.forEach((x) => {
-                x.complete?.();
-            });
+function mixinOneToOneCentering(base) {
+    return class extends base {
+        oneToOneCentering(rect, parentRect, points) {
+            this.transform.scaledPosition = PointExtensions.initialize();
+            this.transform.position = this.getZeroPositionWithoutScale(points);
+            const itemsContainerWidth = rect.width / this.transform.scale;
+            const itemsContainerHeight = rect.height / this.transform.scale;
+            this.transform.scale = 1;
+            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
+            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
+            this.transform.position = PointExtensions.initialize(newX, newY);
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaOnPointerUp }); }
+        getZeroPositionWithoutScale(points) {
+            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
+            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
+            return PointExtensions.initialize(xPoint, yPoint);
+        }
+        constructor(...args) {
+            super(...args);
+        }
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaOnPointerUp, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-const SELECTION_AREA_PROVIDERS = [
-    GetCanBeSelectedItemsHandler,
-    SelectionAreaPrepareDragSequence,
-    SelectionAreaOnPointerUp,
-];
+function mixinChangePosition(base) {
+    return class extends base {
+        getPosition() {
+            return this.transform.position;
+        }
+        setPosition(position) {
+            this.transform.position = PointExtensions.copy(position);
+        }
+        constructor(...args) {
+            super(...args);
+        }
+    };
+}
 
-const F_DRAGGABLE = new InjectionToken('F_DRAGGABLE');
-class FDraggableBase extends IDragAndDropBase {
-    constructor(ngZone) {
-        super(ngZone);
+const F_CANVAS = new InjectionToken('F_CANVAS');
+const MIXIN_BASE = mixinChangePosition(mixinFitToParent(mixinOneToOneCentering(mixinChangeZoom(class {
+    constructor(transform) {
+        this.transform = transform;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FDraggableBase, usesInheritance: true, ngImport: i0 }); }
+}))));
+class FCanvasBase extends MIXIN_BASE {
+    constructor() {
+        super(TransformModelExtensions.default());
+    }
+    completeDrag() {
+        const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
+        this.fCanvasChange.emit(new FCanvasChangeEvent(position, this.transform.scale));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FCanvasBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.NgZone }] });
+        }], ctorParameters: () => [] });
 
-class FDraggableDirective extends FDraggableBase {
+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, selectAllHandler, elementReference, fComponentsStore) {
+        super();
+        this.getAllNodesRectHandler = getAllNodesRectHandler;
+        this.selectAllHandler = selectAllHandler;
         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.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.injector.get(SingleSelectOnPointerDown).handle(event);
-        this.injector.get(ReassignConnectionPrepareDragSequence).handle(event);
-        this.injector.get(CreateConnectionPrepareDragSequence).handle(event);
-        return result;
+        this.fComponentsStore.fCanvas = this;
     }
-    prepareDragSequence(event) {
-        this.injector.get(SelectionAreaPrepareDragSequence).handle(event);
-        this.injector.get(NodePrepareDragSequence).handle(event);
-        this.injector.get(CanvasPrepareDragSequence).handle(event);
-        this.injector.get(ExternalItemPrepareDragSequence).handle(event);
-        this.fDraggableDataContext.draggableItems.forEach((item) => {
-            item.initialize?.();
-        });
-        this.emitSelectionChangeEvent();
-        if (this.fDraggableDataContext.draggableItems.length > 0) {
-            this.hostElement.classList.add('f-dragging');
-        }
+    redraw() {
+        this.fComponentsStore.fBackground?.setTransform(this.transform);
+        this.hostElement.setAttribute("style", `transform: ${TransformModelExtensions.toString(this.transform)}`);
     }
-    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);
-        });
+    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);
     }
-    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();
+    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();
     }
-    emitSelectionChangeEvent() {
-        let selectedNodes = [];
-        let selectedConnections = [];
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            if (x.hostElement.classList.contains('f-node')) {
-                selectedNodes.push(x.hostElement.id);
-            }
-            else {
-                selectedConnections.push(x.hostElement.id);
-            }
-        });
-        this.fSelectionChange.emit(new SelectionChangeEvent(selectedNodes, selectedConnections));
+    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();
     }
-    ngOnDestroy() {
-        super.unsubscribe();
-        this.subscriptions$.unsubscribe();
+    selectAll() {
+        this.selectAllHandler.handle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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.0.9", 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.0.9", 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.0.9", 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 }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div>\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=\"f-node\"></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.0.9", 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.0.9", 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>\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=\"f-node\"></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 }]
             }] } });
 
+const F_FLOW = new InjectionToken('F_FLOW');
+
 const F_PARENT = new InjectionToken('F_PARENT');
 
 let uniqueId = 0;