@foblex/flow 17.0.9 → 17.1.1

package/fesm2022/foblex-flow.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Directive, ElementRef, Input, HostBinding, EventEmitter, DestroyRef, Output, booleanAttribute, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, ContentChildren, NgZone, ContentChild, NgModule } from '@angular/core';
-import { RectExtensions, RoundedRect, TransformModelExtensions, PointExtensions, Point, SizeExtensions, LineExtensions, GetIntersections, setRectToElement, adjustRectToMinSize, findClosestAlignment, setRectToViewBox } from '@foblex/2d';
+import { InjectionToken, inject, Injectable, Directive, ElementRef, Input, HostBinding, EventEmitter, DestroyRef, booleanAttribute, Output, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, numberAttribute, ContentChildren, NgZone, ContentChild, Renderer2, NgModule } from '@angular/core';
+import { RectExtensions, RoundedRect, TransformModelExtensions, PointExtensions, Point, LineExtensions, GetIntersections, SizeExtensions, findClosestAlignment, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
-import * as i2 from '@foblex/mediator';
+import * as i2$1 from '@foblex/mediator';
 import { FExecutionRegister, FMediator, FValidatorRegister } from '@foblex/mediator';
 import * as i1 from '@foblex/platform';
 import { BrowserService, EOperationSystem } from '@foblex/platform';
-import { normalizeDomElementId, castToEnum, flatMap, isClosestElementHasClass, getDataAttrValueFromClosestElementWithClass, deepCloneNode, castToBoolean } from '@foblex/utils';
-import * as i2$1 from '@angular/common';
+import { normalizeDomElementId, castToEnum, flatMap, isClosestElementHasClass, getDataAttrValueFromClosestElementWithClass, deepCloneNode } from '@foblex/utils';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { DragAndDropBase, EventExtensions } from '@foblex/drag-toolkit';
+import { DragAndDropBase } from '@foblex/drag-toolkit';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
@@ -217,6 +217,7 @@ class FComponentsStore {
     get flowHost() {
         return this.fFlow?.hostElement;
     }
+    fComponents = {};
     fFlow;
     fCanvas;
     fBackground;
@@ -229,6 +230,7 @@ class FComponentsStore {
     fInputs = [];
     fOutlets = [];
     fDraggable;
+    fLineAlignment;
     addComponent(collection, component) {
         collection.push(component);
         this.countChanged();
@@ -918,171 +920,6 @@ function createSVGElement$1(tag, fBrowser) {
     return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
 }
 
-class FindClosestInputRequest {
-    position;
-    canBeConnectedInputs;
-    constructor(position, canBeConnectedInputs) {
-        this.position = position;
-        this.canBeConnectedInputs = canBeConnectedInputs;
-    }
-}
-
-let FindClosestInputExecution = class FindClosestInputExecution {
-    handle(payload) {
-        let result;
-        let minDistance = Infinity;
-        for (const element of payload.canBeConnectedInputs) {
-            const distance = this.distanceToRectangle(payload.position, element);
-            if (distance < minDistance) {
-                minDistance = distance;
-                result = element;
-            }
-        }
-        return result ? {
-            ...result,
-            distance: minDistance,
-        } : undefined;
-    }
-    distanceToRectangle(point, inputWithRect) {
-        const closestX = this.clamp(point.x, inputWithRect.fRect.x, inputWithRect.fRect.x + inputWithRect.fRect.width);
-        const closestY = this.clamp(point.y, inputWithRect.fRect.y, inputWithRect.fRect.y + inputWithRect.fRect.height);
-        const dx = point.x - closestX;
-        const dy = point.y - closestY;
-        return Math.sqrt(dx * dx + dy * dy);
-    }
-    clamp(value, min, max) {
-        return Math.max(min, Math.min(max, value));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindClosestInputExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindClosestInputExecution });
-};
-FindClosestInputExecution = __decorate([
-    FExecutionRegister(FindClosestInputRequest)
-], FindClosestInputExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindClosestInputExecution, decorators: [{
-            type: Injectable
-        }] });
-
-class GetAllCanBeConnectedInputPositionsRequest {
-    fOutputId;
-    constructor(fOutputId) {
-        this.fOutputId = fOutputId;
-    }
-}
-
-class GetConnectorWithRectRequest {
-    connector;
-    constructor(connector) {
-        this.connector = connector;
-    }
-}
-
-class GetNormalizedElementRectRequest {
-    element;
-    isRoundedRect;
-    constructor(element, isRoundedRect = true) {
-        this.element = element;
-        this.isRoundedRect = isRoundedRect;
-    }
-}
-
-let GetNormalizedElementRectExecution = class GetNormalizedElementRectExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    _fMediator = inject(FMediator);
-    get _transform() {
-        return this._fComponentsStore.fCanvas.transform;
-    }
-    handle(request) {
-        const systemRect = this._getElementRoundedRect(request);
-        const position = this._normalizePosition(systemRect);
-        const size = this._normalizeSize(systemRect);
-        return new RoundedRect(position.x, position.y, size.width, size.height, systemRect.radius1, systemRect.radius2, systemRect.radius3, systemRect.radius4);
-    }
-    _getElementRoundedRect(request) {
-        return request.isRoundedRect ? this._fMediator.send(new GetElementRoundedRectRequest(request.element)) : RoundedRect.fromRect(RectExtensions.fromElement(request.element));
-    }
-    _normalizePosition(rect) {
-        return Point.fromPoint(rect).elementTransform(this._fComponentsStore.flowHost).sub(this._transform.scaledPosition).sub(this._transform.position).div(this._transform.scale);
-    }
-    _normalizeSize(rect) {
-        return SizeExtensions.initialize(rect.width / this._transform.scale, rect.height / this._transform.scale);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedElementRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedElementRectExecution });
-};
-GetNormalizedElementRectExecution = __decorate([
-    FExecutionRegister(GetNormalizedElementRectRequest)
-], GetNormalizedElementRectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedElementRectExecution, decorators: [{
-            type: Injectable
-        }] });
-
-let GetConnectorWithRectExecution = class GetConnectorWithRectExecution {
-    _fMediator = inject(FMediator);
-    handle(request) {
-        return {
-            fConnector: request.connector,
-            fRect: this._fMediator.send(new GetNormalizedElementRectRequest(request.connector.hostElement, true))
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorWithRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorWithRectExecution });
-};
-GetConnectorWithRectExecution = __decorate([
-    FExecutionRegister(GetConnectorWithRectRequest)
-], GetConnectorWithRectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorWithRectExecution, decorators: [{
-            type: Injectable
-        }] });
-
-let GetAllCanBeConnectedInputPositionsExecution = class GetAllCanBeConnectedInputPositionsExecution {
-    fComponentsStore;
-    fMediator;
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
-    }
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
-    }
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
-    handle(payload) {
-        return this.getCanBeConnectedInputs(this.getOutput(payload.fOutputId)).map((x) => {
-            return this.fMediator.send(new GetConnectorWithRectRequest(x));
-        });
-    }
-    getOutput(fId) {
-        return this.findOutputById(fId) || this.findOutletById(fId);
-    }
-    findOutputById(fId) {
-        return this.fComponentsStore.fOutputs.find((x) => x.fId === fId);
-    }
-    findOutletById(fId) {
-        return this.fComponentsStore.fOutlets.find((x) => x.fId === fId);
-    }
-    getCanBeConnectedInputs(output) {
-        return output.isSelfConnectable ?
-            this.fInputs.filter((x) => x.canBeConnected) :
-            this.filterSelfConnectable(this.fInputs.filter((x) => x.canBeConnected), output);
-    }
-    filterSelfConnectable(inputs, output) {
-        return inputs.filter((x) => this.getNodeOfConnector(output)?.hostElement !== this.getNodeOfConnector(x)?.hostElement);
-    }
-    getNodeOfConnector(connector) {
-        return this.fNodes.find((x) => x.isContains(connector.hostElement));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputPositionsExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputPositionsExecution });
-};
-GetAllCanBeConnectedInputPositionsExecution = __decorate([
-    FExecutionRegister(GetAllCanBeConnectedInputPositionsRequest)
-], GetAllCanBeConnectedInputPositionsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputPositionsExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
-
 class CalculateConnectionLineByBehaviorRequest {
     outputRect;
     inputRect;
@@ -1169,66 +1006,25 @@ var EFConnectableSide;
     EFConnectableSide["AUTO"] = "auto";
 })(EFConnectableSide || (EFConnectableSide = {}));
 
-class CalculateConnectorConnectableSideHandler {
-    handle(request) {
-        let result;
-        if (request.fConnector.userFConnectableSide === EFConnectableSide.AUTO) {
-            result = this.getSideByDelta(request.fConnector.hostElement, request.fNodeHost);
-        }
-        else {
-            result = request.fConnector.userFConnectableSide;
-        }
-        return result;
-    }
-    getSideByDelta(fConnectorHost, fNodeHost) {
-        let result;
-        const childRect = RectExtensions.fromElement(fConnectorHost);
-        const parentRect = fNodeHost.getBoundingClientRect();
-        const deltaLeft = childRect.gravityCenter.x - parentRect.left;
-        const deltaRight = parentRect.right - childRect.gravityCenter.x;
-        const deltaTop = childRect.gravityCenter.y - parentRect.top;
-        const deltaBottom = parentRect.bottom - childRect.gravityCenter.y;
-        const minDelta = Math.min(deltaLeft, deltaRight, deltaTop, deltaBottom);
-        if (minDelta === deltaLeft) {
-            result = EFConnectableSide.LEFT;
-        }
-        else if (minDelta === deltaRight) {
-            result = EFConnectableSide.RIGHT;
-        }
-        else if (minDelta === deltaTop) {
-            result = EFConnectableSide.TOP;
-        }
-        else {
-            result = EFConnectableSide.BOTTOM;
-        }
-        return result;
-    }
-}
-
-class CalculateConnectorConnectableSideRequest {
-    fConnector;
-    fNodeHost;
-    constructor(fConnector, fNodeHost) {
-        this.fConnector = fConnector;
-        this.fNodeHost = fNodeHost;
-    }
-}
-
 class FConnectorBase {
     _isConnected = false;
     get isConnected() {
         return this._isConnected;
     }
-    toConnector;
+    toConnector = [];
     isSelfConnectable = true;
     fConnectableSide = EFConnectableSide.AUTO;
     userFConnectableSide = EFConnectableSide.AUTO;
     isContains(element) {
         return this.hostElement.contains(element);
     }
-    setConnected(isConnected, toConnector) {
-        this._isConnected = isConnected;
-        this.toConnector = toConnector;
+    setConnected(toConnector) {
+        this._isConnected = true;
+        this.toConnector.push(toConnector);
+    }
+    resetConnected() {
+        this._isConnected = false;
+        this.toConnector = [];
     }
 }
 
@@ -1490,7 +1286,7 @@ class FGroupDirective extends FNodeBase {
         this._fMediator.send(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FGroupDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: ["fGroupId", "fId"], fParentId: ["fGroupParentId", "fParentId"], position: ["fGroupPosition", "position"], size: ["fGroupSize", "size"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled"], fIncludePadding: "fIncludePadding", fConnectOnNode: "fConnectOnNode" }, outputs: { positionChange: "fGroupPositionChange", sizeChange: "fGroupSizeChange" }, host: { properties: { "attr.data-f-group-id": "fId", "class.f-group-dragging-disabled": "fDraggingDisabled", "class.f-group-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-group f-component" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: ["fGroupId", "fId"], fParentId: ["fGroupParentId", "fParentId"], position: ["fGroupPosition", "position"], size: ["fGroupSize", "size"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute] }, outputs: { positionChange: "fGroupPositionChange", sizeChange: "fGroupSizeChange" }, host: { properties: { "attr.data-f-group-id": "fId", "class.f-group-dragging-disabled": "fDraggingDisabled", "class.f-group-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-group f-component" }, providers: [
             { provide: F_NODE, useExisting: FGroupDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
@@ -1529,14 +1325,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 args: ['fGroupSizeChange']
             }], fDraggingDisabled: [{
                 type: Input,
-                args: ['fGroupDraggingDisabled']
+                args: [{ alias: 'fGroupDraggingDisabled', transform: booleanAttribute }]
             }], fSelectionDisabled: [{
                 type: Input,
-                args: ['fGroupSelectionDisabled']
+                args: [{ alias: 'fGroupSelectionDisabled', transform: booleanAttribute }]
             }], fIncludePadding: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], fConnectOnNode: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 let uniqueId$a = 0;
@@ -1564,7 +1362,7 @@ class FNodeDirective extends FNodeBase {
     fDraggingDisabled = false;
     fSelectionDisabled = false;
     fIncludePadding = true;
-    //TODO: Add ability to connect to first connectable input if node is under pointer
+    //Add ability to connect to first connectable input if node is at pointer position
     fConnectOnNode = true;
     _destroyRef = inject(DestroyRef);
     _fMediator = inject(FMediator);
@@ -1606,7 +1404,7 @@ class FNodeDirective extends FNodeBase {
         this._fMediator.send(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], fParentId: ["fNodeParentId", "fParentId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled"], fIncludePadding: "fIncludePadding", fConnectOnNode: "fConnectOnNode" }, outputs: { positionChange: "fNodePositionChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], fParentId: ["fNodeParentId", "fParentId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute] }, outputs: { positionChange: "fNodePositionChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
             { provide: F_NODE, useExisting: FNodeDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
@@ -1645,14 +1443,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 args: ['fNodeSizeChange']
             }], fDraggingDisabled: [{
                 type: Input,
-                args: ['fNodeDraggingDisabled']
+                args: [{ alias: 'fNodeDraggingDisabled', transform: booleanAttribute }]
             }], fSelectionDisabled: [{
                 type: Input,
-                args: ['fNodeSelectionDisabled']
+                args: [{ alias: 'fNodeSelectionDisabled', transform: booleanAttribute }]
             }], fIncludePadding: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], fConnectOnNode: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 function isNode(element) {
@@ -1668,39 +1468,43 @@ const F_NODE_PROVIDERS = [
 
 let uniqueId$9 = 0;
 class FNodeInputDirective extends FNodeInputBase {
-    fNode;
+    _elementReference = inject(ElementRef);
+    _fMediator = inject(FMediator);
+    _fNode = inject(F_NODE);
     fId = `f-node-input-${uniqueId$9++}`;
     multiple = true;
     disabled = false;
     userFConnectableSide = EFConnectableSide.AUTO;
+    get fNodeId() {
+        return this._fNode.fId;
+    }
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    _elementReference = inject(ElementRef);
-    _fMediator = inject(FMediator);
-    constructor(fNode) {
-        super();
-        this.fNode = fNode;
-    }
     ngOnInit() {
         this._fMediator.send(new AddInputToStoreRequest(this));
-        this.fNode.addConnector(this);
+        this._fNode.addConnector(this);
     }
     ngOnChanges(changes) {
         if (changes['userFConnectableSide']) {
-            this.fNode.refresh();
+            this._fNode.refresh();
         }
     }
-    setConnected(isConnected, toConnector) {
-        super.setConnected(isConnected, toConnector);
-        this.hostElement.classList.toggle('f-node-input-connected', isConnected);
-        this.hostElement.classList.toggle('f-node-input-not-connectable', !this.canBeConnected);
+    setConnected(toConnector) {
+        super.setConnected(toConnector);
+        this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.INPUT_CONNECTED, true);
+        this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.INPUT_NOT_CONNECTABLE, !this.canBeConnected);
+    }
+    resetConnected() {
+        super.resetConnected();
+        this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.INPUT_CONNECTED, false);
+        this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.INPUT_NOT_CONNECTABLE, !this.canBeConnected);
     }
     ngOnDestroy() {
-        this.fNode.removeConnector(this);
+        this._fNode.removeConnector(this);
         this._fMediator.send(new RemoveInputFromStoreRequest(this));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeInputDirective, deps: [{ token: F_NODE }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { fId: ["fInputId", "fId"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled", booleanAttribute], userFConnectableSide: ["fInputConnectableSide", "userFConnectableSide", (value) => castToEnum(value, 'fInputConnectableSide', EFConnectableSide)] }, host: { properties: { "attr.data-f-input-id": "fId", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeInputDirective, decorators: [{
@@ -1716,10 +1520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     },
                     providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }],
                 }]
-        }], ctorParameters: () => [{ type: FNodeBase, decorators: [{
-                    type: Inject,
-                    args: [F_NODE]
-                }] }], propDecorators: { fId: [{
+        }], propDecorators: { fId: [{
                 type: Input,
                 args: ['fInputId']
             }], multiple: [{
@@ -1758,30 +1559,30 @@ function isNodeOutlet(element) {
 
 let uniqueId$8 = 0;
 class FNodeOutletDirective extends FNodeOutletBase {
-    fNode;
+    _elementReference = inject(ElementRef);
+    _fMediator = inject(FMediator);
+    /// Inject FNodeBase to check if the outlet inside the node
+    _fNode = inject(F_NODE);
     fId = `f-node-outlet-${uniqueId$8++}`;
     disabled = false;
     fConnectableSide = EFConnectableSide.AUTO;
     userFConnectableSide = EFConnectableSide.AUTO;
     isConnectionFromOutlet = false;
+    canBeConnectedInputs = [];
+    get fNodeId() {
+        return this._fNode.fId;
+    }
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    _elementReference = inject(ElementRef);
-    _fMediator = inject(FMediator);
-    /// Inject FNodeBase to check if the outlet inside the node
-    constructor(fNode) {
-        super();
-        this.fNode = fNode;
-    }
     ngOnInit() {
         this._fMediator.send(new AddOutletToStoreRequest(this));
     }
     ngOnDestroy() {
         this._fMediator.send(new RemoveOutletFromStoreRequest(this));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: F_NODE }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { fId: ["fOutletId", "fId"], disabled: ["fOutletDisabled", "disabled", booleanAttribute], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.data-f-outlet-id": "fId", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }], exportAs: ["fNodeOutlet"], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeOutletDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { fId: ["fOutletId", "fId"], disabled: ["fOutletDisabled", "disabled", booleanAttribute], isConnectionFromOutlet: "isConnectionFromOutlet", canBeConnectedInputs: ["fCanBeConnectedInputs", "canBeConnectedInputs"] }, host: { properties: { "attr.data-f-outlet-id": "fId", "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: "18.2.4", ngImport: i0, type: FNodeOutletDirective, decorators: [{
             type: Directive,
@@ -1795,10 +1596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     },
                     providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }],
                 }]
-        }], ctorParameters: () => [{ type: FNodeBase, decorators: [{
-                    type: Inject,
-                    args: [F_NODE]
-                }] }], propDecorators: { fId: [{
+        }], propDecorators: { fId: [{
                 type: Input,
                 args: ['fOutletId']
             }], disabled: [{
@@ -1806,6 +1604,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 args: [{ alias: 'fOutletDisabled', transform: booleanAttribute }]
             }], isConnectionFromOutlet: [{
                 type: Input
+            }], canBeConnectedInputs: [{
+                type: Input,
+                args: [{ alias: 'fCanBeConnectedInputs' }]
             }] } });
 
 const F_NODE_OUTPUT = new InjectionToken('F_NODE_OUTPUT');
@@ -1826,41 +1627,46 @@ function isNodeOutput(element) {
 
 let uniqueId$7 = 0;
 class FNodeOutputDirective extends FNodeOutputBase {
-    fNode;
+    _elementReference = inject(ElementRef);
+    _fMediator = inject(FMediator);
+    _fNode = inject(F_NODE);
     fId = `f-node-output-${uniqueId$7++}`;
     multiple = false;
     disabled = false;
     userFConnectableSide = EFConnectableSide.AUTO;
     isSelfConnectable = true;
+    canBeConnectedInputs = [];
+    get fNodeId() {
+        return this._fNode.fId;
+    }
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    _elementReference = inject(ElementRef);
-    _fMediator = inject(FMediator);
-    constructor(fNode) {
-        super();
-        this.fNode = fNode;
-    }
     ngOnInit() {
         this._fMediator.send(new AddOutputToStoreRequest(this));
-        this.fNode.addConnector(this);
+        this._fNode.addConnector(this);
     }
     ngOnChanges(changes) {
         if (changes['userFConnectableSide']) {
-            this.fNode.refresh();
+            this._fNode.refresh();
         }
     }
-    setConnected(isConnected, toConnector) {
-        super.setConnected(isConnected, toConnector);
-        this.hostElement.classList.toggle('f-node-output-connected', isConnected);
-        this.hostElement.classList.toggle('f-node-output-not-connectable', !this.canBeConnected);
+    setConnected(toConnector) {
+        super.setConnected(toConnector);
+        this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.OUTPUT_CONNECTED, true);
+        this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.OUTPUT_NOT_CONNECTABLE, !this.canBeConnected);
+    }
+    resetConnected() {
+        super.resetConnected();
+        this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.OUTPUT_CONNECTED, false);
+        this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.OUTPUT_NOT_CONNECTABLE, !this.canBeConnected);
     }
     ngOnDestroy() {
-        this.fNode.removeConnector(this);
+        this._fNode.removeConnector(this);
         this._fMediator.send(new RemoveOutputFromStoreRequest(this));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: F_NODE }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { fId: ["fOutputId", "fId"], multiple: ["fOutputMultiple", "multiple"], disabled: ["fOutputDisabled", "disabled", booleanAttribute], userFConnectableSide: ["fOutputConnectableSide", "userFConnectableSide", (value) => castToEnum(value, 'fOutputConnectableSide', EFConnectableSide)], isSelfConnectable: "isSelfConnectable" }, host: { properties: { "attr.data-f-output-id": "fId", "class.f-node-output-multiple": "multiple", "class.f-node-output-disabled": "disabled", "class.f-node-output-self-connectable": "isSelfConnectable" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeOutputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { fId: ["fOutputId", "fId"], multiple: ["fOutputMultiple", "multiple"], disabled: ["fOutputDisabled", "disabled", booleanAttribute], userFConnectableSide: ["fOutputConnectableSide", "userFConnectableSide", (value) => castToEnum(value, 'fOutputConnectableSide', EFConnectableSide)], isSelfConnectable: "isSelfConnectable", canBeConnectedInputs: ["fCanBeConnectedInputs", "canBeConnectedInputs"] }, host: { properties: { "attr.data-f-output-id": "fId", "class.f-node-output-multiple": "multiple", "class.f-node-output-disabled": "disabled", "class.f-node-output-self-connectable": "isSelfConnectable" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeOutputDirective, decorators: [{
             type: Directive,
@@ -1876,10 +1682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     },
                     providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }],
                 }]
-        }], ctorParameters: () => [{ type: FNodeBase, decorators: [{
-                    type: Inject,
-                    args: [F_NODE]
-                }] }], propDecorators: { fId: [{
+        }], propDecorators: { fId: [{
                 type: Input,
                 args: ['fOutputId']
             }], multiple: [{
@@ -1896,6 +1699,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     }]
             }], isSelfConnectable: [{
                 type: Input
+            }], canBeConnectedInputs: [{
+                type: Input,
+                args: [{ alias: 'fCanBeConnectedInputs' }]
             }] } });
 
 const F_CONNECTORS_PROVIDERS = [
@@ -2606,7 +2412,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
         this._fMediator.send(new RemoveConnectionForCreateFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: "fRadius", fOffset: "fOffset", fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
             type: Component,
@@ -2618,9 +2424,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], fEndColor: [{
                 type: Input
             }], fRadius: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], fOffset: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], fBehavior: [{
                 type: Input,
                 args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
@@ -2692,7 +2500,7 @@ class FConnectionComponent extends FConnectionBase {
         this._fMediator.send(new RemoveConnectionFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FConnectionComponent, selector: "f-connection", inputs: { fId: ["fConnectionId", "fId"], fText: "fText", fTextStartOffset: "fTextStartOffset", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: "fRadius", fOffset: "fOffset", fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fSelectionDisabled", "fSelectionDisabled", booleanAttribute] }, host: { properties: { "attr.id": "fId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FConnectionComponent, selector: "f-connection", inputs: { fId: ["fConnectionId", "fId"], fText: "fText", fTextStartOffset: "fTextStartOffset", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fSelectionDisabled", "fSelectionDisabled", booleanAttribute] }, host: { properties: { "attr.id": "fId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
@@ -2718,9 +2526,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], fInputId: [{
                 type: Input
             }], fRadius: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], fOffset: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], fBehavior: [{
                 type: Input,
                 args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
@@ -2873,7 +2683,7 @@ class FSnapConnectionComponent extends FConnectionBase {
         this._fMediator.send(new RemoveSnapConnectionFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSnapConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fSnapThreshold: "fSnapThreshold", fRadius: "fRadius", fOffset: "fOffset", fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fSnapThreshold: ["fSnapThreshold", "fSnapThreshold", numberAttribute], fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSnapConnectionComponent, decorators: [{
             type: Component,
@@ -2885,11 +2695,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], fEndColor: [{
                 type: Input
             }], fSnapThreshold: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], fRadius: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], fOffset: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], fBehavior: [{
                 type: Input,
                 args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
@@ -3001,6 +2814,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
 class RedrawConnectionsRequest {
 }
 
+class GetNormalizedElementRectRequest {
+    element;
+    isRoundedRect;
+    constructor(element, isRoundedRect = true) {
+        this.element = element;
+        this.isRoundedRect = isRoundedRect;
+    }
+}
+
+let GetNormalizedElementRectExecution = class GetNormalizedElementRectExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    _fMediator = inject(FMediator);
+    get _transform() {
+        return this._fComponentsStore.fCanvas.transform;
+    }
+    handle(request) {
+        const systemRect = this._getElementRoundedRect(request);
+        const position = this._normalizePosition(systemRect);
+        const size = this._normalizeSize(systemRect);
+        return new RoundedRect(position.x, position.y, size.width, size.height, systemRect.radius1, systemRect.radius2, systemRect.radius3, systemRect.radius4);
+    }
+    _getElementRoundedRect(request) {
+        return request.isRoundedRect ? this._fMediator.send(new GetElementRoundedRectRequest(request.element)) : RoundedRect.fromRect(RectExtensions.fromElement(request.element));
+    }
+    _normalizePosition(rect) {
+        return Point.fromPoint(rect).elementTransform(this._fComponentsStore.flowHost).sub(this._transform.scaledPosition).sub(this._transform.position).div(this._transform.scale);
+    }
+    _normalizeSize(rect) {
+        return SizeExtensions.initialize(rect.width / this._transform.scale, rect.height / this._transform.scale);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedElementRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedElementRectExecution });
+};
+GetNormalizedElementRectExecution = __decorate([
+    FExecutionRegister(GetNormalizedElementRectRequest)
+], GetNormalizedElementRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedElementRectExecution, decorators: [{
+            type: Injectable
+        }] });
+
 let RedrawConnectionsExecution = class RedrawConnectionsExecution {
     fComponentsStore;
     fMediator;
@@ -3009,7 +2862,7 @@ let RedrawConnectionsExecution = class RedrawConnectionsExecution {
         this.fMediator = fMediator;
     }
     handle(request) {
-        this.resetConnectors();
+        this._resetConnectors();
         if (this.fComponentsStore.fTempConnection) {
             this.setMarkers(this.fComponentsStore.fTempConnection);
         }
@@ -3020,17 +2873,17 @@ let RedrawConnectionsExecution = class RedrawConnectionsExecution {
             const output = this.fComponentsStore.fOutputs.find((x) => x.fId === connection.fOutputId);
             const input = this.fComponentsStore.fInputs.find((x) => x.fId === connection.fInputId);
             if (output && input) {
-                this.setupConnection(output, input, connection);
+                this._setupConnection(output, input, connection);
             }
         });
     }
-    resetConnectors() {
-        this.fComponentsStore.fOutputs.forEach((output) => output.setConnected(false, undefined));
-        this.fComponentsStore.fInputs.forEach((input) => input.setConnected(false, undefined));
+    _resetConnectors() {
+        this.fComponentsStore.fOutputs.forEach((x) => x.resetConnected());
+        this.fComponentsStore.fInputs.forEach((x) => x.resetConnected());
     }
-    setupConnection(output, input, connection) {
-        output.setConnected(true, input);
-        input.setConnected(true, output);
+    _setupConnection(output, input, connection) {
+        output.setConnected(input);
+        input.setConnected(output);
         const line = this.getLine(output, input, connection);
         this.setMarkers(connection);
         connection.setLine(line.point1, output.fConnectableSide, line.point2, input.fConnectableSide);
@@ -3043,7 +2896,7 @@ let RedrawConnectionsExecution = class RedrawConnectionsExecution {
     setMarkers(connection) {
         this.fMediator.send(new CreateConnectionMarkersRequest(connection));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RedrawConnectionsExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RedrawConnectionsExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RedrawConnectionsExecution });
 };
 RedrawConnectionsExecution = __decorate([
@@ -3051,7 +2904,7 @@ RedrawConnectionsExecution = __decorate([
 ], RedrawConnectionsExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RedrawConnectionsExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }] });
 
 class RemoveConnectionForCreateFromStoreRequest {
 }
@@ -3147,10 +3000,7 @@ const F_CONNECTION_FEATURES = [
     AddConnectionToStoreExecution,
     AddSnapConnectionToStoreExecution,
     CreateConnectionMarkersExecution,
-    FindClosestInputExecution,
-    GetAllCanBeConnectedInputPositionsExecution,
     CalculateConnectionLineByBehaviorExecution,
-    GetConnectorWithRectExecution,
     RedrawConnectionsExecution,
     RemoveConnectionForCreateFromStoreExecution,
     RemoveConnectionFromStoreExecution,
@@ -3224,104 +3074,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Injectable
         }] });
 
-class RemoveInputFromStoreRequest {
-    fComponent;
-    constructor(fComponent) {
-        this.fComponent = fComponent;
-    }
-}
-
-let RemoveInputFromStoreExecution = class RemoveInputFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fInputs, request.fComponent);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution });
-};
-RemoveInputFromStoreExecution = __decorate([
-    FExecutionRegister(RemoveInputFromStoreRequest)
-], RemoveInputFromStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution, decorators: [{
-            type: Injectable
-        }] });
-
-class RemoveOutletFromStoreRequest {
-    fComponent;
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+class CalculateClosestInputRequest {
+    position;
+    canBeConnectedInputs;
+    constructor(position, canBeConnectedInputs) {
+        this.position = position;
+        this.canBeConnectedInputs = canBeConnectedInputs;
     }
 }
 
-let RemoveOutletFromStoreExecution = class RemoveOutletFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutlets, request.fComponent);
+let CalculateClosestInputExecution = class CalculateClosestInputExecution {
+    handle(payload) {
+        let result;
+        let minDistance = Infinity;
+        for (const element of payload.canBeConnectedInputs) {
+            const distance = this._distanceToRectangle(payload.position, element);
+            if (distance < minDistance) {
+                minDistance = distance;
+                result = element;
+            }
+        }
+        return result ? {
+            ...result,
+            distance: minDistance,
+        } : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution });
-};
-RemoveOutletFromStoreExecution = __decorate([
-    FExecutionRegister(RemoveOutletFromStoreRequest)
-], RemoveOutletFromStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution, decorators: [{
-            type: Injectable
-        }] });
-
-class RemoveOutputFromStoreRequest {
-    fComponent;
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+    _distanceToRectangle(point, inputWithRect) {
+        const closestX = this._clamp(point.x, inputWithRect.fRect.x, inputWithRect.fRect.x + inputWithRect.fRect.width);
+        const closestY = this._clamp(point.y, inputWithRect.fRect.y, inputWithRect.fRect.y + inputWithRect.fRect.height);
+        const dx = point.x - closestX;
+        const dy = point.y - closestY;
+        return Math.sqrt(dx * dx + dy * dy);
     }
-}
-
-let RemoveOutputFromStoreExecution = class RemoveOutputFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutputs, request.fComponent);
+    _clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateClosestInputExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateClosestInputExecution });
 };
-RemoveOutputFromStoreExecution = __decorate([
-    FExecutionRegister(RemoveOutputFromStoreRequest)
-], RemoveOutputFromStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution, decorators: [{
+CalculateClosestInputExecution = __decorate([
+    FExecutionRegister(CalculateClosestInputRequest)
+], CalculateClosestInputExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateClosestInputExecution, decorators: [{
             type: Injectable
         }] });
 
-const F_CONNECTORS_FEATURES = [
-    AddInputToStoreExecution,
-    AddOutletToStoreExecution,
-    AddOutputToStoreExecution,
-    RemoveInputFromStoreExecution,
-    RemoveOutletFromStoreExecution,
-    RemoveOutputFromStoreExecution
-];
-
-class AddDndToStoreRequest {
-    fComponent;
-    constructor(fComponent) {
-        this.fComponent = fComponent;
-    }
-}
-
-let AddDndToStoreExecution = class AddDndToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(request) {
-        this._fComponentsStore.fDraggable = request.fComponent;
+class FindInputAtPositionRequest {
+    pointerPosition;
+    toConnectorRect;
+    canBeConnectedInputs;
+    constructor(pointerPosition, toConnectorRect, canBeConnectedInputs) {
+        this.pointerPosition = pointerPosition;
+        this.toConnectorRect = toConnectorRect;
+        this.canBeConnectedInputs = canBeConnectedInputs;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution });
-};
-AddDndToStoreExecution = __decorate([
-    FExecutionRegister(AddDndToStoreRequest)
-], AddDndToStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution, decorators: [{
-            type: Injectable
-        }] });
-
-class EmitSelectionChangeEventRequest {
 }
 
 class CanvasMoveFinalizeRequest {
@@ -3331,31 +3137,12 @@ class CanvasMoveFinalizeRequest {
     }
 }
 
-class CanvasDragHandler {
-    fComponentsStore;
-    onPointerDownPosition = PointExtensions.initialize();
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    prepareDragSequence() {
-        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
-    }
-    onPointerMove(difference) {
-        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
-        this.fComponentsStore.fCanvas.redraw();
-    }
-    onPointerUp() {
-        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
-    }
-}
-
 class FDraggableDataContext {
     selectedItems = [];
     isSelectedChanged = false;
     onPointerDownScale = 1;
     onPointerDownPosition = new Point(0, 0);
     draggableItems = [];
-    fLineAlignment;
     reset() {
         this.draggableItems = [];
         this.onPointerDownScale = 1;
@@ -3364,6 +3151,9 @@ class FDraggableDataContext {
     markSelectionAsChanged() {
         this.isSelectedChanged = true;
     }
+    isEmpty() {
+        return !this.draggableItems.length;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDataContext });
 }
@@ -3371,21 +3161,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Injectable
         }] });
 
-let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
-    fDraggableDataContext;
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
+class CanvasDragHandler {
+    _fComponentsStore;
+    onPointerDownPosition = PointExtensions.initialize();
+    constructor(_fComponentsStore) {
+        this._fComponentsStore = _fComponentsStore;
+    }
+    prepareDragSequence() {
+        this.onPointerDownPosition = this._fComponentsStore.fCanvas.transform.position;
+    }
+    onPointerMove(difference) {
+        this._fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
+        this._fComponentsStore.fCanvas.redraw();
     }
+    onPointerUp() {
+        this._fComponentsStore.fCanvas.emitCanvasChangeEvent();
+    }
+}
+
+let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
+    _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
         if (!this._isValid()) {
             return;
         }
-        this.fDraggableDataContext.draggableItems.forEach((x) => x.onPointerUp?.());
+        this._fDraggableDataContext.draggableItems.forEach((x) => x.onPointerUp?.());
     }
     _isValid() {
-        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof CanvasDragHandler);
+        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof CanvasDragHandler);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMoveFinalizeExecution });
 };
 CanvasMoveFinalizeExecution = __decorate([
@@ -3393,11 +3198,7 @@ CanvasMoveFinalizeExecution = __decorate([
 ], CanvasMoveFinalizeExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMoveFinalizeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
-
-const CANVAS_MOVE_FINALIZE_PROVIDERS = [
-    CanvasMoveFinalizeExecution,
-];
+        }] });
 
 class CanvasMovePreparationRequest {
     event;
@@ -3407,79 +3208,53 @@ class CanvasMovePreparationRequest {
 }
 
 let CanvasMovePreparationExecution = class CanvasMovePreparationExecution {
-    fComponentsStore;
-    fDraggableDataContext;
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(fComponentsStore, fDraggableDataContext) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
+    _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    get _fHost() {
+        return this._fComponentsStore.fFlow.hostElement;
     }
     handle(request) {
-        this.fDraggableDataContext.onPointerDownScale = 1;
-        this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
-            .elementTransform(this.flowHost);
-        this.fDraggableDataContext.draggableItems = [
-            new CanvasDragHandler(this.fComponentsStore)
+        if (!this._isValid(request)) {
+            return;
+        }
+        this._fDraggableDataContext.onPointerDownScale = 1;
+        this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
+            .elementTransform(this._fHost);
+        this._fDraggableDataContext.draggableItems = [
+            new CanvasDragHandler(this._fComponentsStore)
         ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationExecution });
-};
-CanvasMovePreparationExecution = __decorate([
-    FExecutionRegister(CanvasMovePreparationRequest)
-], CanvasMovePreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
-
-let CanvasMovePreparationValidator = class CanvasMovePreparationValidator {
-    fComponentsStore;
-    fDraggableDataContext;
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(fComponentsStore, fDraggableDataContext) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        return !this.fDraggableDataContext.draggableItems.length &&
-            (this.isBackgroundElement(request.event.targetElement) || this.isDragOnHost(request.event.targetElement));
+    _isValid(request) {
+        return this._fDraggableDataContext.isEmpty() &&
+            (this._isBackgroundElement(request.event.targetElement) || this._isDragOnHost(request.event.targetElement));
     }
-    isBackgroundElement(targetElement) {
-        return this.fComponentsStore.fBackground?.hostElement.contains(targetElement);
+    _isBackgroundElement(targetElement) {
+        return this._fComponentsStore.fBackground?.hostElement.contains(targetElement);
     }
-    isDragOnHost(targetElement) {
-        return this.flowHost.contains(targetElement) && !this.getNode(targetElement);
+    _isDragOnHost(targetElement) {
+        return this._fHost.contains(targetElement) && !this._getNode(targetElement);
     }
-    getNode(targetElement) {
-        let result = this.fComponentsStore.fNodes
-            .find(n => n.isContains(targetElement));
+    _getNode(targetElement) {
+        let result = this._fComponentsStore.fNodes
+            .find(x => x.isContains(targetElement));
         if (result && result.fDraggingDisabled) {
             result = undefined;
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationValidator });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationExecution });
 };
-CanvasMovePreparationValidator = __decorate([
-    FValidatorRegister(CanvasMovePreparationRequest)
-], CanvasMovePreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationValidator, decorators: [{
+CanvasMovePreparationExecution = __decorate([
+    FExecutionRegister(CanvasMovePreparationRequest)
+], CanvasMovePreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
-
-const CANVAS_MOVE_PREPARATION_PROVIDERS = [
-    CanvasMovePreparationExecution,
-    CanvasMovePreparationValidator,
-];
+        }] });
 
 const CANVAS_PROVIDERS = [
-    ...CANVAS_MOVE_FINALIZE_PROVIDERS,
-    ...CANVAS_MOVE_PREPARATION_PROVIDERS,
+    CanvasMoveFinalizeExecution,
+    CanvasMovePreparationExecution,
 ];
 
 class CreateConnectionFinalizeRequest {
@@ -3597,207 +3372,96 @@ class FCreateConnectionEvent {
 }
 
 class CreateConnectionDragHandler {
-    fMediator;
-    fComponentsStore;
-    fOutput;
-    onPointerDownPosition;
-    toConnectorRect = new RoundedRect();
-    get fConnection() {
-        return this.fComponentsStore.fTempConnection;
-    }
-    get fSnapConnection() {
-        return this.fComponentsStore.fSnapConnection;
-    }
-    fOutputWithRect;
-    canBeConnectedInputs = [];
-    constructor(fMediator, fComponentsStore, fOutput, onPointerDownPosition) {
-        this.fMediator = fMediator;
-        this.fComponentsStore = fComponentsStore;
-        this.fOutput = fOutput;
-        this.onPointerDownPosition = onPointerDownPosition;
+    _fMediator;
+    _fComponentsStore;
+    _fOutput;
+    _toConnectorRect = new RoundedRect();
+    get _fConnection() {
+        return this._fComponentsStore.fTempConnection;
+    }
+    get _fSnapConnection() {
+        return this._fComponentsStore.fSnapConnection;
+    }
+    _fOutputWithRect;
+    _canBeConnectedInputs = [];
+    constructor(_fMediator, _fComponentsStore, _fOutput, _onPointerDownPosition) {
+        this._fMediator = _fMediator;
+        this._fComponentsStore = _fComponentsStore;
+        this._fOutput = _fOutput;
+        this._toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(_onPointerDownPosition.x, _onPointerDownPosition.y));
     }
     prepareDragSequence() {
+        this._getAndMarkCanBeConnectedInputs();
         this._initializeSnapConnection();
         this._initializeConnectionForCreate();
-        this.canBeConnectedInputs = this.fMediator.send(new GetAllCanBeConnectedInputPositionsRequest(this.fOutput.fId));
-        this.fOutputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.fOutput));
-        this.toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this.onPointerDownPosition.x, this.onPointerDownPosition.y));
-        this.fConnection.show();
+        this._fOutputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fOutput));
+        this._fConnection.show();
         this.onPointerMove(PointExtensions.initialize());
     }
+    _getAndMarkCanBeConnectedInputs() {
+        this._canBeConnectedInputs = this._fMediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutput));
+        this._fMediator.execute(new MarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+    }
     _initializeSnapConnection() {
-        if (!this.fSnapConnection) {
+        if (!this._fSnapConnection) {
             return;
         }
-        this.fSnapConnection.fOutputId = this.fOutput.fId;
-        this.fSnapConnection.initialize();
+        this._fSnapConnection.fOutputId = this._fOutput.fId;
+        this._fSnapConnection.initialize();
     }
     _initializeConnectionForCreate() {
-        this.fConnection.fOutputId = this.fOutput.fId;
-        this.fConnection.initialize();
+        this._fConnection.fOutputId = this._fOutput.fId;
+        this._fConnection.initialize();
     }
     onPointerMove(difference) {
         const fClosestInput = this._findClosestInput(difference);
-        this._drawConnectionForCreate(this.toConnectorRect.addPoint(difference), fClosestInput?.fConnector.fConnectableSide || EFConnectableSide.TOP);
-        if (this.fSnapConnection) {
+        this._drawConnectionForCreate(this._toConnectorRect.addPoint(difference), fClosestInput?.fConnector.fConnectableSide || EFConnectableSide.TOP);
+        if (this._fSnapConnection) {
             this._drawSnapConnection(this._getClosestInputForSnapConnection(fClosestInput));
         }
     }
-    _drawConnectionForCreate(fInputRect, fSide) {
-        const line = this.fMediator.send(new CalculateConnectionLineByBehaviorRequest(this.fOutputWithRect.fRect, fInputRect, this.fConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, fSide));
-        this.fConnection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, fSide);
-        this.fConnection.redraw();
+    _drawConnectionForCreate(toConnectorRect, fSide) {
+        const line = this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, toConnectorRect, this._fConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fSide));
+        this._fConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fSide);
+        this._fConnection.redraw();
     }
     _drawSnapConnection(fClosestInput) {
         if (fClosestInput) {
-            const line = this.fMediator.send(new CalculateConnectionLineByBehaviorRequest(this.fOutputWithRect.fRect, fClosestInput.fRect, this.fSnapConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
-            this.fSnapConnection.show();
-            this.fSnapConnection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, fClosestInput.fConnector.fConnectableSide);
-            this.fSnapConnection.redraw();
+            const line = this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, fClosestInput.fRect, this._fSnapConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
+            this._fSnapConnection.show();
+            this._fSnapConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fClosestInput.fConnector.fConnectableSide);
+            this._fSnapConnection.redraw();
         }
         else {
-            this.fSnapConnection?.hide();
-        }
-    }
-    getClosetInput(difference) {
-        if (!this.fSnapConnection) {
-            return undefined;
+            this._fSnapConnection?.hide();
         }
-        return this._getClosestInputForSnapConnection(this._findClosestInput(difference));
     }
     _findClosestInput(difference) {
-        return this.fMediator.send(new FindClosestInputRequest(Point.fromPoint(this.toConnectorRect).add(difference), this.canBeConnectedInputs));
+        return this._fMediator.execute(new CalculateClosestInputRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
     }
     _getClosestInputForSnapConnection(fClosestInput) {
-        return fClosestInput && fClosestInput.distance < this.fSnapConnection.fSnapThreshold ? fClosestInput : undefined;
+        return fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold ? fClosestInput : undefined;
     }
     onPointerUp() {
-        this.fConnection.redraw();
-        this.fConnection.hide();
-        this.fSnapConnection?.hide();
+        this._fConnection.redraw();
+        this._fConnection.hide();
+        this._fSnapConnection?.hide();
+        this._fMediator.execute(new UnmarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
-}
-
-class GetInputUnderPointerRequest {
-    event;
-    dragHandler;
-    constructor(event, dragHandler) {
-        this.event = event;
-        this.dragHandler = dragHandler;
+    getData() {
+        return {
+            toConnectorRect: this._toConnectorRect,
+            fOutputId: this._fOutput.fId,
+            canBeConnectedInputs: this._canBeConnectedInputs
+        };
     }
 }
 
-let GetInputUnderPointerExecution = class GetInputUnderPointerExecution {
-    fComponentsStore;
-    fDraggableDataContext;
-    fBrowser;
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
-    }
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, fBrowser) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fBrowser = fBrowser;
-    }
-    handle(payload) {
-        const output = (this.getOutput(payload.dragHandler) || this.getOutlet(payload.dragHandler));
-        const inputsUnderPointer = this.getInputsUnderPointer(payload.event.getPosition(), payload.dragHandler);
-        const connectors = output.isSelfConnectable ?
-            inputsUnderPointer :
-            this.filterSelfConnectable(inputsUnderPointer, output);
-        return connectors.length > 0 ? connectors[0] : undefined;
-    }
-    getOutput(dragHandler) {
-        return this.fComponentsStore.fOutputs.find((x) => x.fId === dragHandler.fConnection.fOutputId);
-    }
-    getOutlet(dragHandler) {
-        return this.fComponentsStore.fOutlets.find((x) => x.fId === dragHandler.fConnection.fOutputId);
-    }
-    getInputsUnderPointer(position, dragHandler) {
-        const result = this.getInputsInPosition(position);
-        const closestInput = dragHandler.getClosetInput(this.getDifference(position));
-        if (closestInput) {
-            result.push(closestInput.fConnector);
-        }
-        const input = this.getFirstConnectableInputOfNodeInPosition(position);
-        if (input) {
-            result.push(input);
-        }
-        return result;
-    }
-    getDifference(position) {
-        return Point.fromPoint(position).elementTransform(this.fComponentsStore.flowHost)
-            .div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
-    }
-    getInputsInPosition(position) {
-        return this.getElementsFromPoint(position).map((element) => this.fInputs.find(x => x.isContains(element) && x.canBeConnected)).filter((x) => !!x);
-    }
-    getElementsFromPoint(position) {
-        return this.fBrowser.document.elementsFromPoint(position.x, position.y);
-    }
-    getFirstConnectableInputOfNodeInPosition(position) {
-        return this.getNodesInPosition(position).map((x) => {
-            return this.fInputs.find((i) => x.isContains(i.hostElement) && i.canBeConnected);
-        }).find((x) => !!x);
-    }
-    getNodesInPosition(position) {
-        return this.getElementsFromPoint(position).map((element) => {
-            return this.fNodes.find((x) => x.isContains(element) && x.fConnectOnNode);
-        }).filter((x) => !!x);
-    }
-    filterSelfConnectable(inputs, connector) {
-        return inputs.filter((x) => {
-            const targetNode = this.fNodes.find((k) => k.isContains(x.hostElement));
-            const sourceNode = this.fNodes.find((k) => k.isContains(connector.hostElement));
-            return sourceNode?.hostElement !== targetNode?.hostElement;
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetInputUnderPointerExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetInputUnderPointerExecution });
-};
-GetInputUnderPointerExecution = __decorate([
-    FExecutionRegister(GetInputUnderPointerRequest)
-], GetInputUnderPointerExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetInputUnderPointerExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i1.BrowserService }] });
-
-let GetInputUnderPointerValidator = class GetInputUnderPointerValidator {
-    fComponentsStore;
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(request) {
-        let output = this.getOutput(request.dragHandler) || this.getOutlet(request.dragHandler);
-        if (!output) {
-            throw OutputNotFound(request.dragHandler.fConnection.fOutputId);
-        }
-        return true;
-    }
-    getOutput(dragHandler) {
-        return this.fComponentsStore.fOutputs.find((x) => x.fId === dragHandler.fConnection.fOutputId);
-    }
-    getOutlet(dragHandler) {
-        return this.fComponentsStore.fOutlets.find((x) => x.fId === dragHandler.fConnection.fOutputId);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetInputUnderPointerValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetInputUnderPointerValidator });
-};
-GetInputUnderPointerValidator = __decorate([
-    FValidatorRegister(GetInputUnderPointerRequest)
-], GetInputUnderPointerValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetInputUnderPointerValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
 let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution {
     fComponentsStore;
     fDraggableDataContext;
     fMediator;
-    get dragHandler() {
+    get _fDragHandler() {
         return this.fDraggableDataContext.draggableItems[0];
     }
     constructor(fComponentsStore, fDraggableDataContext, fMediator) {
@@ -3810,30 +3474,33 @@ let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution
             return;
         }
         this.emitEvent(request.event);
-        this.dragHandler.onPointerUp();
+        this._fDragHandler.onPointerUp();
     }
     _isValid() {
         return this.fDraggableDataContext.draggableItems.some((x) => x instanceof CreateConnectionDragHandler);
     }
     getTargetOutput(output) {
         if (!output) {
-            throw OutputNotFound(this.dragHandler.fConnection.fOutputId);
+            throw OutputNotFound(this._getDragHandlerData().fOutputId);
         }
         return isNodeOutlet(output.hostElement) ? this.fMediator.send(new GetCanBeConnectedOutputByOutletRequest(output)) : output;
     }
     getOutput() {
-        return this.fComponentsStore.fOutputs.find((x) => x.fId === this.dragHandler.fConnection.fOutputId);
+        return this.fComponentsStore.fOutputs.find((x) => x.fId === this._getDragHandlerData().fOutputId);
     }
     getOutlet() {
-        return this.fComponentsStore.fOutlets.find((x) => x.fId === this.dragHandler.fConnection.fOutputId);
+        return this.fComponentsStore.fOutlets.find((x) => x.fId === this._getDragHandlerData().fOutputId);
     }
     emitEvent(event) {
-        this.fComponentsStore.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(this.getTargetOutput(this.getOutput() || this.getOutlet()).fId, this.getInputUnderPointer(event)?.fId, event.getPosition()));
+        this.fComponentsStore.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(this.getTargetOutput(this.getOutput() || this.getOutlet()).fId, this._getInputUnderPointer(event)?.fId, event.getPosition()));
     }
-    getInputUnderPointer(event) {
-        return this.fMediator.send(new GetInputUnderPointerRequest(event, this.dragHandler));
+    _getInputUnderPointer(event) {
+        return this.fMediator.send(new FindInputAtPositionRequest(event.getPosition(), this._getDragHandlerData().toConnectorRect, this._getDragHandlerData().canBeConnectedInputs));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    _getDragHandlerData() {
+        return this._fDragHandler.getData();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFinalizeExecution });
 };
 CreateConnectionFinalizeExecution = __decorate([
@@ -3841,14 +3508,14 @@ CreateConnectionFinalizeExecution = __decorate([
 ], CreateConnectionFinalizeExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFinalizeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2$1.FMediator }] });
 
 class CreateConnectionDragHandlerRequest {
     onPointerDownPosition;
-    connector;
-    constructor(onPointerDownPosition, connector) {
+    fOutput;
+    constructor(onPointerDownPosition, fOutput) {
         this.onPointerDownPosition = onPointerDownPosition;
-        this.connector = connector;
+        this.fOutput = fOutput;
     }
 }
 
@@ -3875,10 +3542,10 @@ let CreateConnectionDragHandlerExecution = class CreateConnectionDragHandlerExec
         const positionRelativeToCanvasComponent = Point.fromPoint(positionRelativeToFlowComponent).mult(this.transform.scale)
             .sub(this.transform.position).sub(this.transform.scaledPosition).div(this.transform.scale);
         this.fDraggableDataContext.draggableItems = [
-            new CreateConnectionDragHandler(this.fMediator, this.fComponentsStore, request.connector, positionRelativeToCanvasComponent)
+            new CreateConnectionDragHandler(this.fMediator, this.fComponentsStore, request.fOutput, positionRelativeToCanvasComponent)
         ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionDragHandlerExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionDragHandlerExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionDragHandlerExecution });
 };
 CreateConnectionDragHandlerExecution = __decorate([
@@ -3886,7 +3553,7 @@ CreateConnectionDragHandlerExecution = __decorate([
 ], CreateConnectionDragHandlerExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionDragHandlerExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2$1.FMediator }] });
 
 class CreateConnectionFromOutletPreparationRequest {
     event;
@@ -3927,10 +3594,10 @@ let CreateConnectionFromOutletPreparationExecution = class CreateConnectionFromO
             }
         }
     }
-    createDragHandler(position, output) {
-        this.fMediator.send(new CreateConnectionDragHandlerRequest(position, output));
+    createDragHandler(position, fOutput) {
+        this.fMediator.send(new CreateConnectionDragHandlerRequest(position, fOutput));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution });
 };
 CreateConnectionFromOutletPreparationExecution = __decorate([
@@ -3938,7 +3605,7 @@ CreateConnectionFromOutletPreparationExecution = __decorate([
 ], CreateConnectionFromOutletPreparationExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }] });
 
 class CreateConnectionFromOutputPreparationRequest {
     event;
@@ -3956,20 +3623,20 @@ let CreateConnectionFromOutputPreparationExecution = class CreateConnectionFromO
     }
     handle(request) {
         const { event } = request;
-        const output = this.fComponentsStore.fOutputs.find((x) => {
+        const fOutput = this.fComponentsStore.fOutputs.find((x) => {
             return x.hostElement.contains(event.targetElement);
         });
-        if (!output) {
+        if (!fOutput) {
             throw new Error('Output not found');
         }
-        if (output.canBeConnected) {
-            this.createDragHandler(event.getPosition(), output);
+        if (fOutput.canBeConnected) {
+            this.createDragHandler(event.getPosition(), fOutput);
         }
     }
-    createDragHandler(position, output) {
-        this.fMediator.send(new CreateConnectionDragHandlerRequest(position, output));
+    createDragHandler(position, fOutput) {
+        this.fMediator.send(new CreateConnectionDragHandlerRequest(position, fOutput));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution });
 };
 CreateConnectionFromOutputPreparationExecution = __decorate([
@@ -3977,7 +3644,7 @@ CreateConnectionFromOutputPreparationExecution = __decorate([
 ], CreateConnectionFromOutputPreparationExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }] });
 
 let CreateConnectionFromOutputPreparationValidator = class CreateConnectionFromOutputPreparationValidator {
     fComponentsStore;
@@ -4025,7 +3692,7 @@ let CreateConnectionPreparationExecution = class CreateConnectionPreparationExec
         if (isNodeOutlet(request.event.targetElement)) {
             this._fMediator.send(new CreateConnectionFromOutletPreparationRequest(request.event));
         }
-        else if (this.isNodeOutput(request.event.targetElement, this._getNode(request.event))) {
+        else if (this._isNodeOutput(request.event.targetElement, this._getNode(request.event))) {
             this._fMediator.send(new CreateConnectionFromOutputPreparationRequest(request.event));
         }
     }
@@ -4039,10 +3706,10 @@ let CreateConnectionPreparationExecution = class CreateConnectionPreparationExec
     _isValidConditions() {
         return !this._fDraggableDataContext.draggableItems.length && !!this._fComponentsStore.fTempConnection;
     }
-    isNodeOutput(targetElement, node) {
-        return isNodeOutput(targetElement) && !this.getOutlets(node).length;
+    _isNodeOutput(targetElement, node) {
+        return isNodeOutput(targetElement) && !this._getOutlets(node).length;
     }
-    getOutlets(node) {
+    _getOutlets(node) {
         return this._fComponentsStore.fOutlets.filter((x) => node.isContains(x.hostElement));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -4063,79 +3730,102 @@ class ReassignConnectionFinalizeRequest {
 }
 
 class ReassignConnectionDragHandler {
-    fMediator;
-    fComponentsStore;
-    fConnection;
-    toConnectorRect = new RoundedRect();
-    get fSnapConnection() {
-        return this.fComponentsStore.fSnapConnection;
+    _fMediator;
+    _fComponentsStore;
+    _fConnection;
+    _toConnectorRect = new RoundedRect();
+    get _fSnapConnection() {
+        return this._fComponentsStore.fSnapConnection;
+    }
+    _fOutputWithRect;
+    _fInputWithRect;
+    _canBeConnectedInputs = [];
+    get _fOutput() {
+        const result = this._fComponentsStore.fOutputs.find((x) => x.fId === this._fConnection.fOutputId);
+        if (!result) {
+            throw new Error('Connection output not found');
+        }
+        return result;
     }
-    fOutputWithRect;
-    fInputWithRect;
-    canBeConnectedInputs = [];
-    constructor(fMediator, fComponentsStore, fConnection) {
-        this.fMediator = fMediator;
-        this.fComponentsStore = fComponentsStore;
-        this.fConnection = fConnection;
+    get _fInput() {
+        const result = this._fComponentsStore.fInputs.find((x) => x.fId === this._fConnection.fInputId);
+        if (!result) {
+            throw new Error('Connection input not found');
+        }
+        return result;
+    }
+    constructor(_fMediator, _fComponentsStore, _fConnection) {
+        this._fMediator = _fMediator;
+        this._fComponentsStore = _fComponentsStore;
+        this._fConnection = _fConnection;
+        this._toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this._fConnection.line.point2.x, this._fConnection.line.point2.y));
     }
     prepareDragSequence() {
+        this._getAndMarkCanBeConnectedInputs();
         this._initializeSnapConnection();
-        this.canBeConnectedInputs = this.fMediator.send(new GetAllCanBeConnectedInputPositionsRequest(this.fConnection.fOutputId));
-        this.fOutputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getOutput()));
-        this.fInputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getInput()));
-        this.toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this.fConnection.line.point2.x, this.fConnection.line.point2.y));
+        this._fOutputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fOutput));
+        this._fInputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fInput));
+    }
+    _getAndMarkCanBeConnectedInputs() {
+        this._canBeConnectedInputs = this._fMediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutput));
+        this._fMediator.execute(new MarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
     _initializeSnapConnection() {
-        if (!this.fSnapConnection) {
+        if (!this._fSnapConnection) {
             return;
         }
-        this.fSnapConnection.fOutputId = this.fConnection.fOutputId;
-        this.fSnapConnection.initialize();
-    }
-    getOutput() {
-        return this.fComponentsStore.fOutputs.find((x) => x.fId === this.fConnection.fOutputId);
-    }
-    getInput() {
-        return this.fComponentsStore.fInputs.find((x) => x.fId === this.fConnection.fInputId);
+        this._fSnapConnection.fOutputId = this._fConnection.fOutputId;
+        this._fSnapConnection.initialize();
     }
     onPointerMove(difference) {
         const fClosestInput = this._findClosestInput(difference);
-        this._drawConnection(this.toConnectorRect.addPoint(difference), fClosestInput?.fConnector.fConnectableSide || this.fInputWithRect.fConnector.fConnectableSide);
-        if (this.fSnapConnection) {
+        this._drawConnection(this._toConnectorRect.addPoint(difference), fClosestInput?.fConnector.fConnectableSide || this._fInputWithRect.fConnector.fConnectableSide);
+        if (this._fSnapConnection) {
             this._drawSnapConnection(this._getClosestInputForSnapConnection(fClosestInput));
         }
     }
-    _drawConnection(fInputRect, fSide) {
-        const line = this.fMediator.send(new CalculateConnectionLineByBehaviorRequest(this.fOutputWithRect.fRect, fInputRect, this.fConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, fSide));
-        this.fConnection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, fSide);
-        this.fConnection.redraw();
+    _drawConnection(difference, fSide) {
+        const line = this._getLineToPointer(difference, fSide);
+        this._fConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fSide);
+        this._fConnection.redraw();
+    }
+    _getLineToPointer(difference, fSide) {
+        return this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, RoundedRect.fromRect(RectExtensions.initialize(difference.x, difference.y)), this._fConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fSide));
     }
     _drawSnapConnection(fClosestInput) {
         if (fClosestInput) {
-            const line = this.fMediator.send(new CalculateConnectionLineByBehaviorRequest(this.fOutputWithRect.fRect, fClosestInput.fRect, this.fSnapConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
-            this.fSnapConnection.show();
-            this.fSnapConnection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, fClosestInput.fConnector.fConnectableSide);
-            this.fSnapConnection.redraw();
+            const line = this._getLineToClosestInput(fClosestInput);
+            this._fSnapConnection.show();
+            this._fSnapConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fClosestInput.fConnector.fConnectableSide);
+            this._fSnapConnection.redraw();
         }
         else {
-            this.fSnapConnection?.hide();
+            this._fSnapConnection?.hide();
         }
     }
-    getClosetInput(difference) {
-        if (!this.fSnapConnection) {
-            return undefined;
-        }
-        return this._getClosestInputForSnapConnection(this._findClosestInput(difference));
+    _getLineToClosestInput(fClosestInput) {
+        return this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, fClosestInput.fRect, this._fSnapConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
     }
     _findClosestInput(difference) {
-        return this.fMediator.send(new FindClosestInputRequest(Point.fromPoint(this.toConnectorRect).add(difference), this.canBeConnectedInputs));
+        return this._fMediator.execute(new CalculateClosestInputRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
     }
     _getClosestInputForSnapConnection(fClosestInput) {
-        return fClosestInput && fClosestInput.distance < this.fSnapConnection.fSnapThreshold ? fClosestInput : undefined;
+        return fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold ? fClosestInput : undefined;
     }
     onPointerUp() {
-        this._drawConnection(this.fInputWithRect.fRect, this.fInputWithRect.fConnector.fConnectableSide);
-        this.fSnapConnection?.hide();
+        this._drawConnection(this._fInputWithRect.fRect, this._fInputWithRect.fConnector.fConnectableSide);
+        this._fSnapConnection?.hide();
+        this._fMediator.execute(new UnmarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+    }
+    getData() {
+        return {
+            toConnectorRect: this._toConnectorRect,
+            fOutputId: this._fConnection.fOutputId,
+            canBeConnectedInputs: this._canBeConnectedInputs
+        };
+    }
+    getConnection() {
+        return this._fConnection;
     }
 }
 
@@ -4155,44 +3845,49 @@ class FReassignConnectionEvent {
 }
 
 let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecution {
-    fComponentsStore;
-    fDraggableDataContext;
-    fMediator;
-    get fDraggable() {
-        return this.fComponentsStore.fDraggable;
-    }
-    get dragHandler() {
-        return this.fDraggableDataContext.draggableItems[0];
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    get _fDraggable() {
+        return this._fComponentsStore.fDraggable;
     }
-    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fMediator = fMediator;
+    get _fDragHandler() {
+        return this._fDraggableDataContext.draggableItems[0];
     }
     handle(request) {
-        if (!this._isValid()) {
+        if (!this._isDroppedConnectionReassignEvent()) {
             return;
         }
-        this.emitEvent(request.event);
-        this.dragHandler.onPointerUp();
+        this._applyReassignEvent(request.event);
+        this._fDragHandler.onPointerUp();
     }
-    _isValid() {
-        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof ReassignConnectionDragHandler);
+    _isDroppedConnectionReassignEvent() {
+        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof ReassignConnectionDragHandler);
     }
-    emitEvent(event) {
-        const input = this.getInputUnderPointer(event);
-        if (!!input && !this.isReassignToDifferentInput(input)) {
+    _applyReassignEvent(event) {
+        const fInput = this._getInputUnderPointer(event);
+        if (!!fInput && !this._isReassignToDifferentInput(fInput)) {
             return;
         }
-        this.fDraggable.fReassignConnection.emit(new FReassignConnectionEvent(this.dragHandler.fConnection.fId, this.dragHandler.fConnection.fOutputId, this.dragHandler.fConnection.fInputId, input?.fId, event.getPosition()));
+        this._emitReassignConnectionEvent(event, fInput);
+    }
+    _getInputUnderPointer(event) {
+        return this._fMediator.send(new FindInputAtPositionRequest(event.getPosition(), this._getDragHandlerData().toConnectorRect, this._getDragHandlerData().canBeConnectedInputs));
+    }
+    _isReassignToDifferentInput(fInput) {
+        return this._fDragHandler.getConnection().fInputId !== fInput.fId;
+    }
+    _emitReassignConnectionEvent(event, fInput) {
+        this._fDraggable.fReassignConnection.emit(this._getEventData(event, fInput));
     }
-    getInputUnderPointer(event) {
-        return this.fMediator.send(new GetInputUnderPointerRequest(event, this.dragHandler));
+    _getEventData(event, fInput) {
+        const fConnection = this._fDragHandler.getConnection();
+        return new FReassignConnectionEvent(fConnection.fId, fConnection.fOutputId, fConnection.fInputId, fInput?.fId, event.getPosition());
     }
-    isReassignToDifferentInput(inputsUnderPointer) {
-        return this.dragHandler.fConnection.fInputId !== inputsUnderPointer.fId;
+    _getDragHandlerData() {
+        return this._fDragHandler.getData();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionFinalizeExecution });
 };
 ReassignConnectionFinalizeExecution = __decorate([
@@ -4200,7 +3895,7 @@ ReassignConnectionFinalizeExecution = __decorate([
 ], ReassignConnectionFinalizeExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionFinalizeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }] });
+        }] });
 
 class ReassignConnectionPreparationRequest {
     event;
@@ -4271,8 +3966,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }] });
 
 const CONNECTIONS_PROVIDERS = [
-    GetInputUnderPointerExecution,
-    GetInputUnderPointerValidator,
     CreateConnectionFinalizeExecution,
     CreateConnectionDragHandlerExecution,
     CreateConnectionFromOutletPreparationExecution,
@@ -4305,93 +3998,52 @@ let GetNormalizedParentNodeRectExecution = class GetNormalizedParentNodeRectExec
         if (parentNode) {
             result = this.getParentRect(parentNode);
         }
-        return result;
-    }
-    getNode(fId) {
-        return this.fComponentsStore.fNodes.find((x) => x.fId === fId);
-    }
-    getParentRect(node) {
-        const rect = this._getNodeRect(node);
-        const padding = this.getNodePadding(node, rect);
-        return RectExtensions.initialize(rect.x + padding[0], rect.y + padding[1], rect.width - padding[0] - padding[2], rect.height - padding[1] - padding[3]);
-    }
-    _getNodeRect(fNode) {
-        return this.fMediator.send(new GetNormalizedElementRectRequest(fNode.hostElement, false));
-    }
-    getNodePadding(node, rect) {
-        return this.fMediator.send(new GetNodePaddingRequest(node, rect));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedParentNodeRectExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedParentNodeRectExecution });
-};
-GetNormalizedParentNodeRectExecution = __decorate([
-    FExecutionRegister(GetNormalizedParentNodeRectRequest)
-], GetNormalizedParentNodeRectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedParentNodeRectExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
-
-class IsArrayHasParentNodeRequest {
-    fNode;
-    fNodes;
-    constructor(fNode, fNodes) {
-        this.fNode = fNode;
-        this.fNodes = fNodes;
-    }
-}
-
-class GetParentNodesRequest {
-    fNode;
-    constructor(fNode) {
-        this.fNode = fNode;
-    }
-}
-
-let GetParentNodesExecution = class GetParentNodesExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(request) {
-        return this._getParentNodes(request.fNode, new Set(), []);
-    }
-    _getParentNodes(fNode, visited, result) {
-        if (visited.has(fNode.fId)) {
-            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fNode.fId);
-        }
-        visited.add(fNode.fId);
-        const parent = this._fComponentsStore.fNodes.find((x) => x.fId === fNode.fParentId);
-        if (!parent) {
-            return result;
-        }
-        result.push(parent);
-        return this._getParentNodes(parent, visited, result);
+        return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetParentNodesExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetParentNodesExecution });
+    getNode(fId) {
+        return this.fComponentsStore.fNodes.find((x) => x.fId === fId);
+    }
+    getParentRect(node) {
+        const rect = this._getNodeRect(node);
+        const padding = this.getNodePadding(node, rect);
+        return RectExtensions.initialize(rect.x + padding[0], rect.y + padding[1], rect.width - padding[0] - padding[2], rect.height - padding[1] - padding[3]);
+    }
+    _getNodeRect(fNode) {
+        return this.fMediator.send(new GetNormalizedElementRectRequest(fNode.hostElement, false));
+    }
+    getNodePadding(node, rect) {
+        return this.fMediator.send(new GetNodePaddingRequest(node, rect));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedParentNodeRectExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedParentNodeRectExecution });
 };
-GetParentNodesExecution = __decorate([
-    FExecutionRegister(GetParentNodesRequest)
-], GetParentNodesExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetParentNodesExecution, decorators: [{
+GetNormalizedParentNodeRectExecution = __decorate([
+    FExecutionRegister(GetNormalizedParentNodeRectRequest)
+], GetNormalizedParentNodeRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedParentNodeRectExecution, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }] });
 
-let IsArrayHasParentNodeExecution = class IsArrayHasParentNodeExecution {
-    fMediator;
-    constructor(fMediator) {
-        this.fMediator = fMediator;
+class IsArrayHasParentNodeRequest {
+    fParentNodes;
+    fDraggedNodes;
+    constructor(fParentNodes, fDraggedNodes) {
+        this.fParentNodes = fParentNodes;
+        this.fDraggedNodes = fDraggedNodes;
     }
+}
+
+let IsArrayHasParentNodeExecution = class IsArrayHasParentNodeExecution {
     handle(request) {
-        return this.isParentNodeInArray(this.getParentNodeIds(request.fNode), request.fNodes);
-    }
-    getParentNodeIds(fNode) {
-        return this.getParentNodes(fNode).map((x) => x.fId);
+        return this._isParentNodeInArray(this._getParentNodeIds(request.fParentNodes), request.fDraggedNodes);
     }
-    getParentNodes(fNode) {
-        return this.fMediator.send(new GetParentNodesRequest(fNode));
+    _getParentNodeIds(fParentNodes) {
+        return fParentNodes.map((x) => x.fId);
     }
-    isParentNodeInArray(parentNodeIds, fNodes) {
-        return fNodes.some((x) => parentNodeIds.includes(x.fId));
+    _isParentNodeInArray(parentNodeIds, fDraggedNodes) {
+        return fDraggedNodes.some((x) => parentNodeIds.includes(x.fId));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsArrayHasParentNodeExecution, deps: [{ token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsArrayHasParentNodeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsArrayHasParentNodeExecution });
 };
 IsArrayHasParentNodeExecution = __decorate([
@@ -4399,7 +4051,7 @@ IsArrayHasParentNodeExecution = __decorate([
 ], IsArrayHasParentNodeExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsArrayHasParentNodeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2.FMediator }] });
+        }] });
 
 class FNodeIntersectedWithConnections {
     fNodeId;
@@ -4421,27 +4073,30 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
-        const fNode = request.fNode;
-        const fOutputConnectors = this._getNodeOutputConnectors(fNode);
-        const fInputConnectors = this._getNodeInputConnectors(fNode);
-        const canBeConnectedOutputs = fOutputConnectors.filter((x) => x.canBeConnected);
-        const canBeConnectedInputs = fInputConnectors.filter((x) => x.canBeConnected);
-        if (canBeConnectedOutputs.length && canBeConnectedInputs.length) {
-            const fOutputConnections = this._getOutputConnectionsId(canBeConnectedOutputs);
-            const fInputConnections = this._getInputConnectionsId(canBeConnectedInputs);
-            const fConnectionsUnderNode = this._calculateConnectionsUnderNode(fNode).filter((x) => {
-                return !fOutputConnections.includes(x.fId) && !fInputConnections.includes(x.fId);
-            });
-            if (fConnectionsUnderNode.length) {
-                this._fComponentsStore.fDraggable?.fNodeIntersectedWithConnections.emit(new FNodeIntersectedWithConnections(fNode.fId, fConnectionsUnderNode.map((x) => x.fId)));
-            }
+        const fOutputConnectors = this._getOutputConnectors(request.fNode);
+        const fInputConnectors = this._getInputConnectors(request.fNode);
+        if (!fOutputConnectors.length || !fInputConnectors.length) {
+            return;
+        }
+        const fOutputConnections = this._getOutputConnectionsId(fOutputConnectors);
+        const fInputConnections = this._getInputConnectionsId(fInputConnectors);
+        const fConnectionsUnderNode = this._calculateConnectionsUnderNode(request.fNode).filter((x) => {
+            return !fOutputConnections.includes(x.fId) && !fInputConnections.includes(x.fId);
+        });
+        if (!fConnectionsUnderNode.length) {
+            return;
         }
+        this._emitNodeIntersectedWithConnections(request.fNode, fConnectionsUnderNode);
     }
-    _getNodeOutputConnectors(fNode) {
-        return this._fComponentsStore.fOutputs.filter((x) => fNode.isContains(x.hostElement));
+    _getOutputConnectors(fNode) {
+        return this._fComponentsStore.fOutputs.filter((x) => {
+            return fNode.isContains(x.hostElement) && x.canBeConnected;
+        });
     }
-    _getNodeInputConnectors(fNode) {
-        return this._fComponentsStore.fInputs.filter((x) => fNode.isContains(x.hostElement));
+    _getInputConnectors(fNode) {
+        return this._fComponentsStore.fInputs.filter((x) => {
+            return fNode.isContains(x.hostElement) && x.canBeConnected;
+        });
     }
     _getOutputConnectionsId(connectors) {
         const connectorsId = this._getConnectorsId(connectors);
@@ -4465,6 +4120,9 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
     _isConnectionHasIntersectionsWithNode(fConnection, fNodeRect) {
         return GetIntersections.getRoundedRectIntersectionsWithSVGPath(fConnection.fPath.hostElement, fNodeRect).length > 0;
     }
+    _emitNodeIntersectedWithConnections(fNode, fConnections) {
+        this._fComponentsStore.fDraggable?.fNodeIntersectedWithConnections.emit(new FNodeIntersectedWithConnections(fNode.fId, fConnections.map((x) => x.fId)));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsConnectionUnderNodeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsConnectionUnderNodeExecution });
 };
@@ -4499,6 +4157,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Injectable
         }] });
 
+class CalculateCommonNodeMoveRestrictionsRequest {
+    restrictions;
+    constructor(restrictions) {
+        this.restrictions = restrictions;
+    }
+}
+
+let CalculateCommonNodeMoveRestrictionsExecution = class CalculateCommonNodeMoveRestrictionsExecution {
+    handle(request) {
+        return this._calculateCommonRestrictions(request.restrictions);
+    }
+    _calculateCommonRestrictions(restrictions) {
+        return restrictions.reduce((result, x) => this._clampRestrictions(result, x), restrictions[0]);
+    }
+    _clampRestrictions(common, x) {
+        common.min = this._clampMinRestrictions(common.min, x.min);
+        common.max = this._clampMaxRestrictions(common.max, x.max);
+        return common;
+    }
+    _clampMinRestrictions(common, node) {
+        return {
+            x: Math.max(common.x, node.x),
+            y: Math.max(common.y, node.y),
+        };
+    }
+    _clampMaxRestrictions(common, node) {
+        return {
+            x: Math.min(common.x, node.x),
+            y: Math.min(common.y, node.y),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateCommonNodeMoveRestrictionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateCommonNodeMoveRestrictionsExecution });
+};
+CalculateCommonNodeMoveRestrictionsExecution = __decorate([
+    FExecutionRegister(CalculateCommonNodeMoveRestrictionsRequest)
+], CalculateCommonNodeMoveRestrictionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateCommonNodeMoveRestrictionsExecution, decorators: [{
+            type: Injectable
+        }] });
+
 class PutInputConnectionHandlersToArrayRequest {
     nodeDragHandler;
     outputIds;
@@ -4522,8 +4221,8 @@ class ConnectionBaseDragHandler {
         this.connection = connection;
     }
     prepareDragSequence() {
-        this.fOutputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getOutput()));
-        this.fInputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getInput()));
+        this.fOutputWithRect = this.fMediator.send(new GetConnectorAndRectRequest(this.getOutput()));
+        this.fInputWithRect = this.fMediator.send(new GetConnectorAndRectRequest(this.getInput()));
     }
     getOutput() {
         const result = this.fComponentsStore.fOutputs.find((x) => x.fId === this.connection.fOutputId);
@@ -4552,12 +4251,12 @@ class ConnectionBaseDragHandler {
         this.connection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, this.fInputWithRect.fConnector.fConnectableSide);
         this.connection.redraw();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ConnectionBaseDragHandler, deps: [{ token: i2.FMediator }, { token: FComponentsStore }, { token: FConnectionBase }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ConnectionBaseDragHandler, deps: [{ token: i2$1.FMediator }, { token: FComponentsStore }, { token: FConnectionBase }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: ConnectionBaseDragHandler, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ConnectionBaseDragHandler, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i2.FMediator }, { type: FComponentsStore }, { type: FConnectionBase }] });
+        }], ctorParameters: () => [{ type: i2$1.FMediator }, { type: FComponentsStore }, { type: FConnectionBase }] });
 
 class ConnectionDragHandler extends ConnectionBaseDragHandler {
     sourceRestrictions;
@@ -4565,11 +4264,11 @@ class ConnectionDragHandler extends ConnectionBaseDragHandler {
     constructor(fMediator, fComponentsStore, connection) {
         super(fMediator, fComponentsStore, connection);
     }
-    setOutputRestrictions(min, max) {
-        this.sourceRestrictions = { min, max };
+    setOutputRestrictions(restrictions) {
+        this.sourceRestrictions = restrictions;
     }
-    setInputRestrictions(min, max) {
-        this.targetRestrictions = { min, max };
+    setInputRestrictions(restrictions) {
+        this.targetRestrictions = restrictions;
     }
     onPointerMove(difference) {
         this.redrawConnection(this.getNewLineValue(difference));
@@ -4580,30 +4279,24 @@ class ConnectionDragHandler extends ConnectionBaseDragHandler {
 }
 
 class ConnectionTargetDragHandler extends ConnectionBaseDragHandler {
-    minDistance;
-    maxDistance;
-    constructor(fMediator, fComponentsStore, connection, minDistance, maxDistance) {
+    restrictions;
+    constructor(fMediator, fComponentsStore, connection, restrictions) {
         super(fMediator, fComponentsStore, connection);
-        this.minDistance = minDistance;
-        this.maxDistance = maxDistance;
+        this.restrictions = restrictions;
     }
     onPointerMove(difference) {
         this.redrawConnection(this.getNewLineValue(difference));
     }
     getNewLineValue(difference) {
-        return this.fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this.fOutputWithRect.fRect, RoundedRect.fromRoundedRect(this.fInputWithRect.fRect).addPoint(this.getRestrictedDifference({ ...difference }, { min: this.minDistance, max: this.maxDistance })), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
+        return this.fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this.fOutputWithRect.fRect, RoundedRect.fromRoundedRect(this.fInputWithRect.fRect).addPoint(this.getRestrictedDifference({ ...difference }, this.restrictions)), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
     }
 }
 
 let PutInputConnectionHandlersToArrayExecution = class PutInputConnectionHandlersToArrayExecution {
-    fComponentsStore;
-    fMediator;
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
-    }
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    get _fConnections() {
+        return this._fComponentsStore.fConnections;
     }
     handle(request) {
         this.getInputConnections(request.nodeDragHandler.fNode).forEach((connection) => {
@@ -4618,10 +4311,10 @@ let PutInputConnectionHandlersToArrayExecution = class PutInputConnectionHandler
     }
     getInputConnections(node) {
         const inputIds = new Set(this.getInputsForNode(node).map((x) => x.fId));
-        return this.fConnections.filter((x) => inputIds.has(x.fInputId));
+        return this._fConnections.filter((x) => inputIds.has(x.fInputId));
     }
     getInputsForNode(node) {
-        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+        return this._fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
     }
     getExistingConnectionHandlerIndex(result, connection) {
         return result.findIndex((x) => x instanceof ConnectionDragHandler && x.connection.fId === connection.fId);
@@ -4637,17 +4330,17 @@ let PutInputConnectionHandlersToArrayExecution = class PutInputConnectionHandler
         return result;
     }
     getNewConnectionHandler(connection, nodeDragHandler) {
-        const handler = new ConnectionDragHandler(this.fMediator, this.fComponentsStore, connection);
-        handler.setInputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        const handler = new ConnectionDragHandler(this._fMediator, this._fComponentsStore, connection);
+        handler.setInputRestrictions(nodeDragHandler.restrictions);
         return handler;
     }
     updateExistingConnectionHandler(result, index, nodeDragHandler) {
-        result[index].setInputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        result[index].setInputRestrictions(nodeDragHandler.restrictions);
     }
     getNewSourceConnectionHandler(connection, nodeDragHandler) {
-        return new ConnectionTargetDragHandler(this.fMediator, this.fComponentsStore, connection, nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        return new ConnectionTargetDragHandler(this._fMediator, this._fComponentsStore, connection, nodeDragHandler.restrictions);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PutInputConnectionHandlersToArrayExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PutInputConnectionHandlersToArrayExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PutInputConnectionHandlersToArrayExecution });
 };
 PutInputConnectionHandlersToArrayExecution = __decorate([
@@ -4655,7 +4348,7 @@ PutInputConnectionHandlersToArrayExecution = __decorate([
 ], PutInputConnectionHandlersToArrayExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PutInputConnectionHandlersToArrayExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
+        }] });
 
 class PutOutputConnectionHandlersToArrayRequest {
     nodeDragHandler;
@@ -4669,18 +4362,16 @@ class PutOutputConnectionHandlersToArrayRequest {
 }
 
 class ConnectionSourceDragHandler extends ConnectionBaseDragHandler {
-    minDistance;
-    maxDistance;
-    constructor(fMediator, fComponentsStore, connection, minDistance, maxDistance) {
+    restrictions;
+    constructor(fMediator, fComponentsStore, connection, restrictions) {
         super(fMediator, fComponentsStore, connection);
-        this.minDistance = minDistance;
-        this.maxDistance = maxDistance;
+        this.restrictions = restrictions;
     }
     onPointerMove(difference) {
         this.redrawConnection(this.getNewLineValue(difference));
     }
     getNewLineValue(difference) {
-        return this.fMediator.execute(new CalculateConnectionLineByBehaviorRequest(RoundedRect.fromRoundedRect(this.fOutputWithRect.fRect).addPoint(this.getRestrictedDifference({ ...difference }, { min: this.minDistance, max: this.maxDistance })), this.fInputWithRect.fRect, this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
+        return this.fMediator.execute(new CalculateConnectionLineByBehaviorRequest(RoundedRect.fromRoundedRect(this.fOutputWithRect.fRect).addPoint(this.getRestrictedDifference({ ...difference }, this.restrictions)), this.fInputWithRect.fRect, this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
     }
 }
 
@@ -4727,16 +4418,16 @@ let PutOutputConnectionHandlersToArrayExecution = class PutOutputConnectionHandl
     }
     getNewConnectionHandler(connection, nodeDragHandler) {
         const handler = new ConnectionDragHandler(this.fMediator, this.fComponentsStore, connection);
-        handler.setOutputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        handler.setOutputRestrictions(nodeDragHandler.restrictions);
         return handler;
     }
     updateExistingConnectionHandler(result, index, nodeDragHandler) {
-        result[index].setOutputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        result[index].setOutputRestrictions(nodeDragHandler.restrictions);
     }
     getNewSourceConnectionHandler(connection, nodeDragHandler) {
-        return new ConnectionSourceDragHandler(this.fMediator, this.fComponentsStore, connection, nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        return new ConnectionSourceDragHandler(this.fMediator, this.fComponentsStore, connection, nodeDragHandler.restrictions);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PutOutputConnectionHandlersToArrayExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PutOutputConnectionHandlersToArrayExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PutOutputConnectionHandlersToArrayExecution });
 };
 PutOutputConnectionHandlersToArrayExecution = __decorate([
@@ -4744,9 +4435,9 @@ PutOutputConnectionHandlersToArrayExecution = __decorate([
 ], PutOutputConnectionHandlersToArrayExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PutOutputConnectionHandlersToArrayExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }] });
 
-class GetNodeMoveRestrictionsRequest {
+class CalculateNodeMoveRestrictionsRequest {
     fNode;
     hasParentNodeInSelected;
     constructor(fNode, hasParentNodeInSelected) {
@@ -4755,32 +4446,32 @@ class GetNodeMoveRestrictionsRequest {
     }
 }
 
-let GetNodeMoveRestrictionsExecution = class GetNodeMoveRestrictionsExecution {
+let CalculateNodeMoveRestrictionsExecution = class CalculateNodeMoveRestrictionsExecution {
     _fMediator = inject(FMediator);
     handle(request) {
-        if (request.fNode.fParentId && !request.hasParentNodeInSelected) {
-            const fParentNodeRect = this.getParentNodeRect(request.fNode);
-            const fCurrentNodeRect = this._getNodeRect(request.fNode);
-            return {
-                min: PointExtensions.initialize(fParentNodeRect.x - fCurrentNodeRect.x, fParentNodeRect.y - fCurrentNodeRect.y),
-                max: PointExtensions.initialize((fParentNodeRect.x + fParentNodeRect.width) - (fCurrentNodeRect.x + fCurrentNodeRect.width), (fParentNodeRect.y + fParentNodeRect.height) - (fCurrentNodeRect.y + fCurrentNodeRect.height))
-            };
+        if (!request.fNode.fParentId || request.hasParentNodeInSelected) {
+            return { ...DEFAULT_RESTRICTIONS };
         }
-        return { ...DEFAULT_RESTRICTIONS };
+        const fParentNodeRect = this._getParentNodeRect(request.fNode);
+        const fCurrentNodeRect = this._getNodeRect(request.fNode);
+        return {
+            min: PointExtensions.initialize(fParentNodeRect.x - fCurrentNodeRect.x, fParentNodeRect.y - fCurrentNodeRect.y),
+            max: PointExtensions.initialize((fParentNodeRect.x + fParentNodeRect.width) - (fCurrentNodeRect.x + fCurrentNodeRect.width), (fParentNodeRect.y + fParentNodeRect.height) - (fCurrentNodeRect.y + fCurrentNodeRect.height))
+        };
     }
     _getNodeRect(fNode) {
-        return this._fMediator.send(new GetNormalizedElementRectRequest(fNode.hostElement, false));
+        return this._fMediator.execute(new GetNormalizedElementRectRequest(fNode.hostElement, false));
     }
-    getParentNodeRect(fNode) {
-        return this._fMediator.send(new GetNormalizedParentNodeRectRequest(fNode));
+    _getParentNodeRect(fNode) {
+        return this._fMediator.execute(new GetNormalizedParentNodeRectRequest(fNode));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNodeMoveRestrictionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNodeMoveRestrictionsExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateNodeMoveRestrictionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateNodeMoveRestrictionsExecution });
 };
-GetNodeMoveRestrictionsExecution = __decorate([
-    FExecutionRegister(GetNodeMoveRestrictionsRequest)
-], GetNodeMoveRestrictionsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNodeMoveRestrictionsExecution, decorators: [{
+CalculateNodeMoveRestrictionsExecution = __decorate([
+    FExecutionRegister(CalculateNodeMoveRestrictionsRequest)
+], CalculateNodeMoveRestrictionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateNodeMoveRestrictionsExecution, decorators: [{
             type: Injectable
         }] });
 const DEFAULT_RESTRICTIONS = {
@@ -4796,32 +4487,27 @@ class CreateMoveNodesDragModelFromSelectionRequest {
 }
 
 class NodeDragHandler {
-    fDraggableDataContext;
-    fComponentsStore;
+    _fComponentsStore;
     fNode;
-    minDistance;
-    maxDistance;
+    restrictions;
     _onPointerDownPosition = PointExtensions.initialize();
-    constructor(fDraggableDataContext, fComponentsStore, fNode, minDistance, maxDistance) {
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fComponentsStore = fComponentsStore;
+    constructor(_fComponentsStore, fNode, restrictions) {
+        this._fComponentsStore = _fComponentsStore;
         this.fNode = fNode;
-        this.minDistance = minDistance;
-        this.maxDistance = maxDistance;
+        this.restrictions = restrictions;
         this._onPointerDownPosition = { ...fNode.position };
     }
     onPointerMove(difference) {
-        const restrictedDifference = this._getDifference(difference, { min: this.minDistance, max: this.maxDistance });
+        const restrictedDifference = this._getDifference(difference);
         this._redraw(this._getPosition(restrictedDifference));
-        this.fDraggableDataContext.fLineAlignment?.handle(restrictedDifference);
     }
     _getPosition(difference) {
         return Point.fromPoint(this._onPointerDownPosition).add(difference);
     }
-    _getDifference(difference, restrictions) {
+    _getDifference(difference) {
         return {
-            x: Math.min(Math.max(difference.x, restrictions.min.x), restrictions.max.x),
-            y: Math.min(Math.max(difference.y, restrictions.min.y), restrictions.max.y)
+            x: Math.min(Math.max(difference.x, this.restrictions.min.x), this.restrictions.max.x),
+            y: Math.min(Math.max(difference.y, this.restrictions.min.y), this.restrictions.max.y)
         };
     }
     _redraw(position) {
@@ -4832,13 +4518,12 @@ class NodeDragHandler {
         this.fNode.positionChange.emit(this.fNode.position);
     }
     getDifferenceWithCellSize(difference) {
-        const restrictedDifference = this._getDifference(difference, { min: this.minDistance, max: this.maxDistance });
-        const position = this._getPosition(restrictedDifference);
+        const position = this._getPosition(this._getDifference(difference));
         return Point.fromPoint(this._applyCellSize(position)).sub(this._onPointerDownPosition);
     }
     _applyCellSize(position) {
-        const hCellSize = this.fComponentsStore.fDraggable.hCellSize;
-        const vCellSize = this.fComponentsStore.fDraggable.vCellSize;
+        const hCellSize = this._fComponentsStore.fDraggable.hCellSize;
+        const vCellSize = this._fComponentsStore.fDraggable.vCellSize;
         return {
             x: Math.round(position.x / hCellSize) * hCellSize,
             y: Math.round(position.y / vCellSize) * vCellSize
@@ -4866,10 +4551,10 @@ let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragMo
     _fComponentsStore = inject(FComponentsStore);
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
-        const itemsToDrag = this._getNodesWithRestrictions(this._getSelectedNodes(request.nodeWithDisabledSelection));
-        return this.getDragHandlersWithConnections(this.getDragHandlersFromNodes(itemsToDrag), this.getAllOutputIds(itemsToDrag), this.getAllInputIds(itemsToDrag));
+        const fItemsToDrag = this._getNodesWithRestrictions(this._getDraggedNodes(request.nodeWithDisabledSelection));
+        return this.getDragHandlersWithConnections(this.getDragHandlersFromNodes(fItemsToDrag), this.getAllOutputIds(fItemsToDrag), this.getAllInputIds(fItemsToDrag));
     }
-    _getSelectedNodes(nodeWithDisabledSelection) {
+    _getDraggedNodes(nodeWithDisabledSelection) {
         const result = this._getNodesFromSelection();
         if (nodeWithDisabledSelection) {
             result.push(nodeWithDisabledSelection);
@@ -4882,68 +4567,302 @@ let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragMo
             .filter((x) => !!x);
     }
     _findNode(hostElement) {
-        return this._fComponentsStore.fNodes.find(n => n.isContains(hostElement));
+        return this._fComponentsStore.fNodes
+            .find(n => n.isContains(hostElement));
     }
-    _getNodesWithRestrictions(nodesToDrag) {
+    _getNodesWithRestrictions(fDraggedNodes) {
         const result = [];
-        nodesToDrag.forEach((x) => {
-            const hasParentNodeInSelected = this._fMediator.send(new IsArrayHasParentNodeRequest(x, nodesToDrag));
-            const restrictions = this._fMediator.send(new GetNodeMoveRestrictionsRequest(x, hasParentNodeInSelected));
-            const parentNodes = this._fMediator.send(new GetParentNodesRequest(x));
-            result.push({ node: x, parentNodes, ...restrictions }, ...this.getChildrenItemsToDrag(x, restrictions));
+        fDraggedNodes.forEach((x) => {
+            const fParentNodes = this._fMediator.execute(new GetParentNodesRequest(x));
+            const restrictions = this._getNodeMoveRestrictions(x, fParentNodes, fDraggedNodes);
+            result.push({ fDraggedNode: x, fParentNodes, ...restrictions }, ...this._getChildrenItemsToDrag(x, restrictions));
+        });
+        this._applyCommonRestrictions(result);
+        return result;
+    }
+    _getNodeMoveRestrictions(fNode, fParentNodes, fDraggedNodes) {
+        return this._fMediator.execute(new CalculateNodeMoveRestrictionsRequest(fNode, this._isParentNodeInArray(fParentNodes, fDraggedNodes)));
+    }
+    _isParentNodeInArray(fParentNodes, fDraggedNodes) {
+        return this._fMediator.execute(new IsArrayHasParentNodeRequest(fParentNodes, fDraggedNodes));
+    }
+    _getChildrenItemsToDrag(node, restrictions) {
+        return this._getChildrenNodes(node.fId).map((x) => ({ fDraggedNode: x, ...restrictions }));
+    }
+    _getChildrenNodes(fId) {
+        return this._fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId));
+    }
+    _applyCommonRestrictions(restrictions) {
+        const commonRestrictions = this._fMediator.execute(new CalculateCommonNodeMoveRestrictionsRequest(restrictions));
+        restrictions.forEach((x) => {
+            x.min = commonRestrictions.min;
+            x.max = commonRestrictions.max;
+        });
+    }
+    getAllOutputIds(items) {
+        return flatMap(items, (item) => this.getOutputsForNode(item.fDraggedNode).map((x) => x.fId));
+    }
+    getOutputsForNode(node) {
+        return this._fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
+    }
+    getAllInputIds(items) {
+        return flatMap(items, (item) => this.getInputsForNode(item.fDraggedNode).map((x) => x.fId));
+    }
+    getInputsForNode(node) {
+        return this._fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    }
+    getDragHandlersFromNodes(items) {
+        let result = [];
+        items.forEach((node) => {
+            result.push(new NodeDragHandler(this._fComponentsStore, node.fDraggedNode, { min: node.min, max: node.max }), ...(node.fParentNodes || []).map(() => new NodeResizeByChildDragHandler(this._fDraggableDataContext)));
+        });
+        return result;
+    }
+    getDragHandlersWithConnections(handlers, outputIds, inputIds) {
+        let result = handlers;
+        handlers.filter((x) => x instanceof NodeDragHandler).forEach((x) => {
+            this._fMediator.execute(new PutOutputConnectionHandlersToArrayRequest(x, inputIds, result));
+            this._fMediator.execute(new PutInputConnectionHandlersToArrayRequest(x, outputIds, result));
         });
         return result;
     }
-    getChildrenItemsToDrag(node, restrictions) {
-        return this.getChildrenNodes(node.fId).map((x) => ({ node: x, ...restrictions }));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution });
+};
+CreateMoveNodesDragModelFromSelectionExecution = __decorate([
+    FExecutionRegister(CreateMoveNodesDragModelFromSelectionRequest)
+], CreateMoveNodesDragModelFromSelectionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, decorators: [{
+            type: Injectable
+        }] });
+
+const CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS = [
+    CalculateCommonNodeMoveRestrictionsExecution,
+    CalculateNodeMoveRestrictionsExecution,
+    PutInputConnectionHandlersToArrayExecution,
+    PutOutputConnectionHandlersToArrayExecution,
+    CreateMoveNodesDragModelFromSelectionExecution,
+];
+
+class LineAlignmentPreparationRequest {
+}
+
+class LineAlignmentDragHandler {
+    _fComponentsStore;
+    _lineService;
+    _size;
+    _draggedNodeRect;
+    _rects;
+    _restrictions;
+    _debounceTimer = null;
+    _transform;
+    constructor(_fComponentsStore, _lineService, _size, _draggedNodeRect, _rects, _restrictions) {
+        this._fComponentsStore = _fComponentsStore;
+        this._lineService = _lineService;
+        this._size = _size;
+        this._draggedNodeRect = _draggedNodeRect;
+        this._rects = _rects;
+        this._restrictions = _restrictions;
+        this._transform = this._fComponentsStore.fCanvas?.transform;
+    }
+    onPointerMove(difference) {
+        const restrictedDifference = this._getDifference(difference);
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer);
+        }
+        this._debounceTimer = setTimeout(() => this._drawIntersectingLines(restrictedDifference), 15);
+    }
+    _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();
+        }
+    }
+    _getDifference(difference) {
+        return {
+            x: Math.min(Math.max(difference.x, this._restrictions.min.x), this._restrictions.max.x),
+            y: Math.min(Math.max(difference.y, this._restrictions.min.y), this._restrictions.max.y)
+        };
+    }
+    findNearestCoordinate(difference) {
+        const rect = RectExtensions.addPoint(this._draggedNodeRect, difference);
+        return findClosestAlignment(this._rects, rect, this._fComponentsStore.fLineAlignment.fAlignThreshold);
+    }
+    onPointerUp() {
+        this._lineService.hideVerticalLine();
+        this._lineService.hideHorizontalLine();
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer);
+            this._debounceTimer = null;
+        }
+    }
+}
+
+class LineElement {
+    hostElement;
+    element;
+    constructor(fBrowser, hostElement) {
+        this.hostElement = hostElement;
+        this.element = fBrowser.document.createElement('div');
+        this.hostElement.appendChild(this.element);
+        this.element.classList.add('f-line');
+    }
+    hide() {
+        this.element.style.display = 'none';
+    }
+    show() {
+        this.element.style.display = 'block';
+    }
+    draw(object) {
+        this.element.style.position = 'absolute';
+        Object.keys(object).forEach((key) => {
+            // @ts-ignore
+            this.element.style[key] = object[key] + 'px';
+        });
+    }
+}
+
+class LineService {
+    hostElement;
+    fHorizontalLine;
+    fVerticalLine;
+    constructor(fBrowser, hostElement) {
+        this.hostElement = hostElement;
+        this.fHorizontalLine = new LineElement(fBrowser, this.hostElement);
+        this.fVerticalLine = new LineElement(fBrowser, this.hostElement);
+        this.fHorizontalLine.hide();
+        this.fVerticalLine.hide();
+    }
+    drawVerticalLine(x, size, transform) {
+        this.fVerticalLine.show();
+        this.fVerticalLine.draw({
+            left: x * transform.scale + transform.position.x + transform.scaledPosition.x,
+            top: 0,
+            width: 1,
+            height: size.height
+        });
+    }
+    drawHorizontalLine(y, size, transform) {
+        this.fHorizontalLine.show();
+        this.fHorizontalLine.draw({
+            left: 0,
+            top: y * transform.scale + transform.position.y + transform.scaledPosition.y,
+            width: size.width,
+            height: 1
+        });
+    }
+    hideVerticalLine() {
+        this.fVerticalLine.hide();
+    }
+    hideHorizontalLine() {
+        this.fHorizontalLine.hide();
+    }
+}
+
+const F_LINE_ALIGNMENT = new InjectionToken('F_LINE_ALIGNMENT');
+class FLineAlignmentBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FLineAlignmentBase, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FLineAlignmentBase, decorators: [{
+            type: Directive
+        }] });
+
+class FLineAlignmentComponent extends FLineAlignmentBase {
+    fAlignThreshold = 10;
+    _fMediator = inject(FMediator);
+    _elementReference = inject(ElementRef);
+    get hostElement() {
+        return this._elementReference.nativeElement;
+    }
+    ngOnInit() {
+        this._fMediator.execute(new AddLineAlignmentToStoreRequest(this));
+    }
+    ngOnDestroy() {
+        this._fMediator.execute(new RemoveLineAlignmentFromStoreRequest());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FLineAlignmentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FLineAlignmentComponent, selector: "f-line-alignment", inputs: { fAlignThreshold: "fAlignThreshold" }, 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: "18.2.4", 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"] }]
+        }], propDecorators: { fAlignThreshold: [{
+                type: Input
+            }] } });
+
+const F_LINE_ALIGNMENT_PROVIDERS = [
+    FLineAlignmentComponent
+];
+
+let LineAlignmentPreparationExecution = class LineAlignmentPreparationExecution {
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    _fBrowser = inject(BrowserService);
+    _lineService;
+    handle(request) {
+        this._addLineAlignmentDragHandler(this._getDraggedNodes());
     }
-    getChildrenNodes(fId) {
-        return this._fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId));
+    _getDraggedNodes() {
+        return this._fDraggableDataContext.draggableItems
+            .filter((x) => x instanceof NodeDragHandler)
+            .map((x) => x.fNode);
     }
-    getAllOutputIds(items) {
-        return flatMap(items, (item) => this.getOutputsForNode(item.node).map((x) => x.fId));
+    _addLineAlignmentDragHandler(fNodes) {
+        this._fDraggableDataContext.draggableItems.push(new LineAlignmentDragHandler(this._fComponentsStore, this._lineService || this._createLineService(), this._getFlowHostSize(), this._getDraggedNodesBoundingRect(fNodes), this._getStaticNodeRects(fNodes), this._getCommonRestrictions()));
     }
-    getOutputsForNode(node) {
-        return this._fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
+    _getFlowHostSize() {
+        return this._fMediator.send(new GetFlowHostElementRequest())
+            .getBoundingClientRect();
     }
-    getAllInputIds(items) {
-        return flatMap(items, (item) => this.getInputsForNode(item.node).map((x) => x.fId));
+    _createLineService() {
+        this._lineService = new LineService(this._fBrowser, this._fComponentsStore.fLineAlignment.hostElement);
+        return this._lineService;
     }
-    getInputsForNode(node) {
-        return this._fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    _getDraggedNodesBoundingRect(fNodes) {
+        return RectExtensions.union(fNodes.map((x) => {
+            return this._fMediator.execute(new GetNormalizedElementRectRequest(x.hostElement, false));
+        })) || RectExtensions.initialize();
     }
-    getDragHandlersFromNodes(items) {
-        let result = [];
-        items.forEach((node) => {
-            result.push(new NodeDragHandler(this._fDraggableDataContext, this._fComponentsStore, node.node, node.min, node.max), ...(node.parentNodes || []).map(() => new NodeResizeByChildDragHandler(this._fDraggableDataContext)));
+    _getStaticNodeRects(fNodes) {
+        return this._getStaticNodes(fNodes).map((x) => {
+            return this._fMediator.execute(new GetNormalizedElementRectRequest(x.hostElement, false));
         });
-        return result;
     }
-    getDragHandlersWithConnections(handlers, outputIds, inputIds) {
-        let result = handlers;
-        handlers.filter((x) => x instanceof NodeDragHandler).forEach((dragHandler) => {
-            this._fMediator.send(new PutOutputConnectionHandlersToArrayRequest(dragHandler, inputIds, result));
-            this._fMediator.send(new PutInputConnectionHandlersToArrayRequest(dragHandler, outputIds, result));
-        });
-        return result;
+    _getStaticNodes(fNodes) {
+        return this._fComponentsStore.fNodes
+            .filter((x) => !fNodes.includes(x));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution });
+    _getCommonRestrictions() {
+        return this._fDraggableDataContext.draggableItems
+            .filter((x) => x instanceof NodeDragHandler)[0].restrictions;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: LineAlignmentPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: LineAlignmentPreparationExecution });
 };
-CreateMoveNodesDragModelFromSelectionExecution = __decorate([
-    FExecutionRegister(CreateMoveNodesDragModelFromSelectionRequest)
-], CreateMoveNodesDragModelFromSelectionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, decorators: [{
+LineAlignmentPreparationExecution = __decorate([
+    FExecutionRegister(LineAlignmentPreparationRequest)
+], LineAlignmentPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: LineAlignmentPreparationExecution, decorators: [{
             type: Injectable
         }] });
 
-const CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS = [
-    GetNodeMoveRestrictionsExecution,
-    PutInputConnectionHandlersToArrayExecution,
-    PutOutputConnectionHandlersToArrayExecution,
-    CreateMoveNodesDragModelFromSelectionExecution,
-];
-
 class NodeDragToParentFinalizeRequest {
     event;
     constructor(event) {
@@ -5134,7 +5053,7 @@ let NodeDragToParentPreparationExecution = class NodeDragToParentPreparationExec
     _getNotDraggedNodes(draggedNodes) {
         return this.fNodes.filter((x) => !draggedNodes.includes(x));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeDragToParentPreparationExecution, deps: [{ token: i2.FMediator }, { token: FDraggableDataContext }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeDragToParentPreparationExecution, deps: [{ token: i2$1.FMediator }, { token: FDraggableDataContext }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeDragToParentPreparationExecution });
 };
 NodeDragToParentPreparationExecution = __decorate([
@@ -5142,7 +5061,7 @@ NodeDragToParentPreparationExecution = __decorate([
 ], NodeDragToParentPreparationExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeDragToParentPreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2.FMediator }, { type: FDraggableDataContext }, { type: FComponentsStore }] });
+        }], ctorParameters: () => [{ type: i2$1.FMediator }, { type: FDraggableDataContext }, { type: FComponentsStore }] });
 
 let NodeDragToParentPreparationValidator = class NodeDragToParentPreparationValidator {
     fDraggableDataContext;
@@ -5184,27 +5103,38 @@ let NodeMovePreparationExecution = class NodeMovePreparationExecution {
     get _fHost() {
         return this._fComponentsStore.fFlow.hostElement;
     }
+    _fNode;
     handle(request) {
-        const itemsToDrag = this._calculateDraggableItems(this._getNode(request.event.targetElement));
-        this._initializeLineAlignment(itemsToDrag);
+        if (!this._isValid(request)) {
+            return;
+        }
         this._fDraggableDataContext.onPointerDownScale = this._transform.scale;
         this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
             .elementTransform(this._fHost).div(this._transform.scale);
-        this._fDraggableDataContext.draggableItems = itemsToDrag;
-    }
-    _getNode(targetElement) {
-        const result = this._fComponentsStore.fNodes.find(n => n.isContains(targetElement));
-        if (!result) {
-            throw new Error('Node not found');
+        this._fDraggableDataContext.draggableItems = this._calculateDraggedItems(this._fNode);
+        if (this._fComponentsStore.fLineAlignment) {
+            this._fMediator.execute(new LineAlignmentPreparationRequest());
         }
-        return result;
+    }
+    _isValid(request) {
+        return this._fDraggableDataContext.isEmpty()
+            && this._isDragHandleElement(request.event.targetElement)
+            && !!this._getNode(request.event.targetElement);
+    }
+    _isDragHandleElement(element) {
+        return isClosestElementHasClass(element, '.f-drag-handle');
+    }
+    _getNode(element) {
+        this._fNode = this._fComponentsStore.fNodes
+            .find(x => x.isContains(element) && !x.fDraggingDisabled);
+        return this._fNode;
     }
     //We drag nodes from selection model
-    _calculateDraggableItems(fNode) {
+    _calculateDraggedItems(fNode) {
         let result = [];
         if (!fNode.fSelectionDisabled) {
             // Need to select node before drag
-            this._fMediator.send(new SelectAndUpdateNodeLayerRequest(fNode));
+            this._fMediator.execute(new SelectAndUpdateNodeLayerRequest(fNode));
             result = this._dragModelFromSelection();
         }
         else {
@@ -5214,14 +5144,7 @@ let NodeMovePreparationExecution = class NodeMovePreparationExecution {
         return result;
     }
     _dragModelFromSelection(nodeWithDisabledSelection) {
-        return this._fMediator.send(new CreateMoveNodesDragModelFromSelectionRequest(nodeWithDisabledSelection));
-    }
-    _initializeLineAlignment(itemsToDrag) {
-        this._fDraggableDataContext.fLineAlignment?.initialize(this._fComponentsStore.fNodes, this._filterNodesFromDraggableItems(itemsToDrag));
-    }
-    _filterNodesFromDraggableItems(items) {
-        return items.filter((x) => x instanceof NodeDragHandler)
-            .map(x => x.fNode);
+        return this._fMediator.execute(new CreateMoveNodesDragModelFromSelectionRequest(nodeWithDisabledSelection));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeMovePreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeMovePreparationExecution });
@@ -5233,39 +5156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Injectable
         }] });
 
-let NodeMovePreparationValidator = class NodeMovePreparationValidator {
-    _fComponentsStore = inject(FComponentsStore);
-    _fDraggableDataContext = inject(FDraggableDataContext);
-    handle(request) {
-        return this._isDragHandlesEmpty()
-            && this._isDragHandleElement(request.event.targetElement)
-            && this._isNodeCanBeDragged(this._getNode(request.event.targetElement));
-    }
-    _isDragHandlesEmpty() {
-        return !this._fDraggableDataContext.draggableItems.length;
-    }
-    _isDragHandleElement(element) {
-        return isClosestElementHasClass(element, '.f-drag-handle');
-    }
-    _isNodeCanBeDragged(fNode) {
-        return !!fNode && !fNode.fDraggingDisabled;
-    }
-    _getNode(element) {
-        return this._fComponentsStore.fNodes.find(x => x.isContains(element));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeMovePreparationValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeMovePreparationValidator });
-};
-NodeMovePreparationValidator = __decorate([
-    FValidatorRegister(NodeMovePreparationRequest)
-], NodeMovePreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeMovePreparationValidator, decorators: [{
-            type: Injectable
-        }] });
-
 const NODE_MOVE_PREPARATION_PROVIDERS = [
     NodeMovePreparationExecution,
-    NodeMovePreparationValidator,
 ];
 
 class NodeMoveFinalizeRequest {
@@ -5291,7 +5183,6 @@ let NodeMoveFinalizeExecution = class NodeMoveFinalizeExecution {
             .find((x) => x instanceof NodeDragHandler);
         const differenceWithCellSize = firstNodeOrGroup.getDifferenceWithCellSize(difference);
         this._finalizeMove(differenceWithCellSize);
-        this._fDraggableDataContext.fLineAlignment?.complete();
         this._applyConnectionUnderDroppedNode();
     }
     _isValid() {
@@ -5316,7 +5207,9 @@ let NodeMoveFinalizeExecution = class NodeMoveFinalizeExecution {
         return this._applyLineAlignmentDifference(difference, this._getLineAlignmentDifference(difference));
     }
     _getLineAlignmentDifference(difference) {
-        return this._fDraggableDataContext.fLineAlignment?.findNearestCoordinate(difference);
+        return this._fDraggableDataContext.draggableItems
+            .find((x) => x instanceof LineAlignmentDragHandler)
+            ?.findNearestCoordinate(difference);
     }
     _applyLineAlignmentDifference(difference, intersection) {
         if (intersection) {
@@ -5344,6 +5237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
 
 const NODE_PROVIDERS = [
     ...CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS,
+    LineAlignmentPreparationExecution,
     NodeMoveFinalizeExecution,
     ...NODE_MOVE_PREPARATION_PROVIDERS,
     ...NODE_DRAG_TO_PARENT_PREPARATION_PROVIDERS,
@@ -5556,7 +5450,7 @@ let GetNormalizedChildrenNodesRectExecution = class GetNormalizedChildrenNodesRe
     concatRectWithParentPadding(rect, padding) {
         return RectExtensions.initialize(rect.x - padding[0], rect.y - padding[1], rect.width + padding[0] + padding[2], rect.height + +padding[1] + padding[3]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, deps: [{ token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, deps: [{ token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution });
 };
 GetNormalizedChildrenNodesRectExecution = __decorate([
@@ -5564,7 +5458,7 @@ GetNormalizedChildrenNodesRectExecution = __decorate([
 ], GetNormalizedChildrenNodesRectExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: i2$1.FMediator }] });
 
 class GetNodeResizeRestrictionsRequest {
     fNode;
@@ -5593,7 +5487,7 @@ let GetNodeResizeRestrictionsExecution = class GetNodeResizeRestrictionsExecutio
     getNodePaddings(node, rect) {
         return this.fMediator.send(new GetNodePaddingRequest(node, rect));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNodeResizeRestrictionsExecution, deps: [{ token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNodeResizeRestrictionsExecution, deps: [{ token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNodeResizeRestrictionsExecution });
 };
 GetNodeResizeRestrictionsExecution = __decorate([
@@ -5601,7 +5495,7 @@ GetNodeResizeRestrictionsExecution = __decorate([
 ], GetNodeResizeRestrictionsExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNodeResizeRestrictionsExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: i2$1.FMediator }] });
 
 class NodeResizeFinalizeRequest {
     event;
@@ -5727,7 +5621,7 @@ let NodeResizePreparationExecution = class NodeResizePreparationExecution {
         return this.fComponentsStore
             .fNodes.find(n => n.isContains(targetElement));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeResizePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeResizePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeResizePreparationExecution });
 };
 NodeResizePreparationExecution = __decorate([
@@ -5735,7 +5629,7 @@ NodeResizePreparationExecution = __decorate([
 ], NodeResizePreparationExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NodeResizePreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2$1.FMediator }] });
 
 let NodeResizePreparationValidator = class NodeResizePreparationValidator {
     fComponentsStore;
@@ -5879,7 +5773,7 @@ let SingleSelectExecution = class SingleSelectExecution {
         });
         this.fDraggableDataContext.selectedItems = [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SingleSelectExecution, deps: [{ token: i1.PlatformService }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SingleSelectExecution, deps: [{ token: i1.PlatformService }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SingleSelectExecution });
 };
 SingleSelectExecution = __decorate([
@@ -5887,7 +5781,7 @@ SingleSelectExecution = __decorate([
 ], SingleSelectExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SingleSelectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.PlatformService }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: i1.PlatformService }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2$1.FMediator }] });
 
 const SINGLE_SELECT_PROVIDERS = [
     SingleSelectExecution,
@@ -6002,7 +5896,7 @@ let ExternalItemFinalizeExecution = class ExternalItemFinalizeExecution {
     getRectInCanvas() {
         return this.fMediator.send(new GetNormalizedElementRectRequest(this.dragHandler.placeholder, false));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2$1.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemFinalizeExecution });
 };
 ExternalItemFinalizeExecution = __decorate([
@@ -6010,7 +5904,7 @@ ExternalItemFinalizeExecution = __decorate([
 ], ExternalItemFinalizeExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemFinalizeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }, { type: i1.BrowserService }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2$1.FMediator }, { type: i1.BrowserService }] });
 
 const EXTERNAL_ITEM_FINALIZE_PROVIDERS = [
     ExternalItemFinalizeExecution,
@@ -6479,7 +6373,7 @@ let MinimapDragPreparationExecution = class MinimapDragPreparationExecution {
     getFlowRect() {
         return RectExtensions.fromElement(this.flowHost);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MinimapDragPreparationExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MinimapDragPreparationExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MinimapDragPreparationExecution });
 };
 MinimapDragPreparationExecution = __decorate([
@@ -6487,7 +6381,7 @@ MinimapDragPreparationExecution = __decorate([
 ], MinimapDragPreparationExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MinimapDragPreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }, { type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }, { type: FDraggableDataContext }] });
 
 let MinimapDragPreparationValidator = class MinimapDragPreparationValidator {
     fComponentsStore;
@@ -6864,7 +6758,7 @@ let SelectionAreaPreparationExecution = class SelectionAreaPreparationExecution
         this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
             .elementTransform(this.flowHost);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution });
 };
 SelectionAreaPreparationExecution = __decorate([
@@ -6872,7 +6766,7 @@ SelectionAreaPreparationExecution = __decorate([
 ], SelectionAreaPreparationExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2$1.FMediator }] });
 
 let SelectionAreaPreparationValidator = class SelectionAreaPreparationValidator {
     fDraggableDataContext;
@@ -6942,38 +6836,360 @@ class FSelectionAreaComponent extends FSelectionAreaBase {
     onPointerDown(event) {
         this._fMediator.send(new SelectionAreaPreparationRequest(event, this));
     }
-    onPointerUp(event) {
-        this._fMediator.send(new SelectionAreaFinalizeRequest(event));
+    onPointerUp(event) {
+        this._fMediator.send(new SelectionAreaFinalizeRequest(event));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
+            { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "f-selection-area", template: ``, host: {
+                        'class': 'f-selection-area f-component'
+                    }, providers: [
+                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
+                    ], styles: [":host{position:absolute}\n"] }]
+        }] });
+
+const F_SELECTION_AREA_PROVIDERS = [
+    FSelectionAreaComponent
+];
+
+const F_DRAGGABLE_PROVIDERS = [
+    ...CANVAS_PROVIDERS,
+    ...CONNECTIONS_PROVIDERS,
+    ...DRAG_AND_DROP_COMMON_PROVIDERS,
+    ...SINGLE_SELECT_PROVIDERS,
+    ...F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS,
+    ...NODE_PROVIDERS,
+    ...NODE_RESIZE_PROVIDERS,
+    ...F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS,
+    ...F_MINIMAP_DRAG_AND_DROP_PROVIDERS
+];
+
+let FindInputAtPositionExecution = class FindInputAtPositionExecution {
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    _fBrowser = inject(BrowserService);
+    get _fNodes() {
+        return this._fComponentsStore.fNodes;
+    }
+    get _fSnapConnection() {
+        return this._fComponentsStore.fSnapConnection;
+    }
+    handle(payload) {
+        const fInputs = this._findInputsAtPosition(payload);
+        return fInputs.length > 0 ? fInputs[0] : undefined;
+    }
+    _findInputsAtPosition(request) {
+        const result = [];
+        result.push(...this._getConnectableInputsAtPosition(request));
+        const fClosestInput = this._calculateClosetInput(request);
+        if (fClosestInput) {
+            result.unshift(fClosestInput.fConnector);
+        }
+        const fInput = this._getFirstConnectableInputOfNodeAtPosition(request);
+        if (fInput) {
+            result.push(fInput);
+        }
+        return result;
+    }
+    _getConnectableInputsAtPosition(request) {
+        return request.canBeConnectedInputs.filter((x) => {
+            return RectExtensions.isIncludePoint(x.fRect, this._calculateDifference(request.pointerPosition));
+        }).map((x) => x.fConnector);
+    }
+    _calculateDifference(position) {
+        return Point.fromPoint(position)
+            .elementTransform(this._fComponentsStore.flowHost)
+            .div(this._fDraggableDataContext.onPointerDownScale)
+            .sub(this._fDraggableDataContext.onPointerDownPosition);
+    }
+    //if the closest input is valid, return it
+    _calculateClosetInput(request) {
+        if (!this._fSnapConnection) {
+            return undefined;
+        }
+        const position = Point.fromPoint(request.toConnectorRect).add(this._calculateDifference(request.pointerPosition));
+        const fClosestInput = this._fMediator.send(new CalculateClosestInputRequest(position, request.canBeConnectedInputs));
+        return this._isValidClosestInput(fClosestInput) ? fClosestInput : undefined;
+    }
+    _isValidClosestInput(fClosestInput) {
+        return !!fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold;
+    }
+    //if node placed in position and fConnectOnNode is true, return the first connectable input of the node
+    _getFirstConnectableInputOfNodeAtPosition(request) {
+        return this._getElementsFromPoint(request.pointerPosition)
+            .map((x) => this._findConnectableNode(x))
+            .filter((x) => !!x)
+            .map((x) => this._findFirstConnectableInputOfNode(request.canBeConnectedInputs, x))
+            .find((x) => !!x);
+    }
+    _getElementsFromPoint(position) {
+        return this._fBrowser.document.elementsFromPoint(position.x, position.y);
+    }
+    _findConnectableNode(element) {
+        return this._fNodes.find((x) => x.isContains(element) && x.fConnectOnNode);
+    }
+    _findFirstConnectableInputOfNode(connectableInputs, fNode) {
+        return connectableInputs.find((x) => x.fConnector.fNodeId === fNode.fId)?.fConnector;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindInputAtPositionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindInputAtPositionExecution });
+};
+FindInputAtPositionExecution = __decorate([
+    FExecutionRegister(FindInputAtPositionRequest)
+], FindInputAtPositionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindInputAtPositionExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class GetAllCanBeConnectedInputsAndRectsRequest {
+    fOutput;
+    constructor(fOutput) {
+        this.fOutput = fOutput;
+    }
+}
+
+class GetConnectorAndRectRequest {
+    fConnector;
+    constructor(fConnector) {
+        this.fConnector = fConnector;
+    }
+}
+
+let GetConnectorAndRectExecution = class GetConnectorAndRectExecution {
+    _fMediator = inject(FMediator);
+    handle(request) {
+        return {
+            fConnector: request.fConnector,
+            fRect: this._getConnectorRect(request.fConnector)
+        };
+    }
+    _getConnectorRect(fConnector) {
+        return this._fMediator.send(new GetNormalizedElementRectRequest(fConnector.hostElement, true));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorAndRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorAndRectExecution });
+};
+GetConnectorAndRectExecution = __decorate([
+    FExecutionRegister(GetConnectorAndRectRequest)
+], GetConnectorAndRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorAndRectExecution, decorators: [{
+            type: Injectable
+        }] });
+
+let GetAllCanBeConnectedInputsAndRectsExecution = class GetAllCanBeConnectedInputsAndRectsExecution {
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    get _fInputs() {
+        return this._fComponentsStore.fInputs;
+    }
+    handle(payload) {
+        return this._getCanBeConnectedInputs(payload.fOutput).map((x) => {
+            return this._fMediator.execute(new GetConnectorAndRectRequest(x));
+        });
+    }
+    _getCanBeConnectedInputs(fOutput) {
+        let fInputs = [];
+        if (fOutput.canBeConnectedInputs?.length) {
+            fInputs = this._fInputs.filter((x) => fOutput.canBeConnectedInputs.includes(x.fId));
+        }
+        else {
+            fInputs = this._fInputs.filter((x) => x.canBeConnected);
+            if (!fOutput.isSelfConnectable) {
+                fInputs = this._filterSelfConnectable(fInputs, fOutput);
+            }
+        }
+        return fInputs;
+    }
+    _filterSelfConnectable(fInputs, fOutput) {
+        return fInputs.filter((x) => fOutput.fNodeId !== x.fNodeId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution });
+};
+GetAllCanBeConnectedInputsAndRectsExecution = __decorate([
+    FExecutionRegister(GetAllCanBeConnectedInputsAndRectsRequest)
+], GetAllCanBeConnectedInputsAndRectsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class MarkAllCanBeConnectedInputsRequest {
+    fInputs;
+    constructor(fInputs) {
+        this.fInputs = fInputs;
+    }
+}
+
+const F_CSS_CLASS = {
+    DRAG_AND_DROP: {
+        DRAGGING: 'f-dragging',
+        CONNECTIONS_DRAGGING: 'f-connections-dragging',
+    },
+    CONNECTOR: {
+        OUTPUT_CONNECTED: 'f-node-output-connected',
+        OUTPUT_NOT_CONNECTABLE: 'f-node-output-not-connectable',
+        INPUT_CONNECTED: 'f-node-input-connected',
+        INPUT_NOT_CONNECTABLE: 'f-node-input-not-connectable',
+        INPUT_CAN_BE_CONNECTED_TO: 'f-node-input-can-be-connected-to',
+    }
+};
+
+let MarkAllCanBeConnectedInputsExecution = class MarkAllCanBeConnectedInputsExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(payload) {
+        this._fComponentsStore.flowHost.classList.add(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
+        payload.fInputs.forEach((fInput) => this._markCanBeConnectedTo(fInput));
+    }
+    _markCanBeConnectedTo(fInput) {
+        fInput.hostElement.classList.add(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution });
+};
+MarkAllCanBeConnectedInputsExecution = __decorate([
+    FExecutionRegister(MarkAllCanBeConnectedInputsRequest)
+], MarkAllCanBeConnectedInputsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class RemoveInputFromStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
+    }
+}
+
+let RemoveInputFromStoreExecution = class RemoveInputFromStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.removeComponent(this._fComponentsStore.fInputs, request.fComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution });
+};
+RemoveInputFromStoreExecution = __decorate([
+    FExecutionRegister(RemoveInputFromStoreRequest)
+], RemoveInputFromStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class RemoveOutletFromStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
+    }
+}
+
+let RemoveOutletFromStoreExecution = class RemoveOutletFromStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutlets, request.fComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution });
+};
+RemoveOutletFromStoreExecution = __decorate([
+    FExecutionRegister(RemoveOutletFromStoreRequest)
+], RemoveOutletFromStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class RemoveOutputFromStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
+    }
+}
+
+let RemoveOutputFromStoreExecution = class RemoveOutputFromStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutputs, request.fComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution });
+};
+RemoveOutputFromStoreExecution = __decorate([
+    FExecutionRegister(RemoveOutputFromStoreRequest)
+], RemoveOutputFromStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class UnmarkAllCanBeConnectedInputsRequest {
+    fInputs;
+    constructor(fInputs) {
+        this.fInputs = fInputs;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
-            { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
-        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "f-selection-area", template: ``, host: {
-                        'class': 'f-selection-area f-component'
-                    }, providers: [
-                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
-                    ], styles: [":host{position:absolute}\n"] }]
+
+let UnmarkAllCanBeConnectedInputsExecution = class UnmarkAllCanBeConnectedInputsExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(payload) {
+        this._fComponentsStore.flowHost.classList.remove(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
+        payload.fInputs.forEach((fInput) => this._unmarkCanBeConnectedTo(fInput));
+    }
+    _unmarkCanBeConnectedTo(fInput) {
+        fInput.hostElement.classList.remove(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution });
+};
+UnmarkAllCanBeConnectedInputsExecution = __decorate([
+    FExecutionRegister(UnmarkAllCanBeConnectedInputsRequest)
+], UnmarkAllCanBeConnectedInputsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, decorators: [{
+            type: Injectable
         }] });
 
-const F_SELECTION_AREA_PROVIDERS = [
-    FSelectionAreaComponent
+const F_CONNECTORS_FEATURES = [
+    AddInputToStoreExecution,
+    AddOutletToStoreExecution,
+    AddOutputToStoreExecution,
+    CalculateClosestInputExecution,
+    FindInputAtPositionExecution,
+    GetAllCanBeConnectedInputsAndRectsExecution,
+    GetConnectorAndRectExecution,
+    MarkAllCanBeConnectedInputsExecution,
+    RemoveInputFromStoreExecution,
+    RemoveOutletFromStoreExecution,
+    RemoveOutputFromStoreExecution,
+    UnmarkAllCanBeConnectedInputsExecution
 ];
 
-const F_DRAGGABLE_PROVIDERS = [
-    ...CANVAS_PROVIDERS,
-    ...CONNECTIONS_PROVIDERS,
-    ...DRAG_AND_DROP_COMMON_PROVIDERS,
-    ...SINGLE_SELECT_PROVIDERS,
-    ...F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS,
-    ...NODE_PROVIDERS,
-    ...NODE_RESIZE_PROVIDERS,
-    ...F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS,
-    ...F_MINIMAP_DRAG_AND_DROP_PROVIDERS
-];
+class AddDndToStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
+    }
+}
+
+let AddDndToStoreExecution = class AddDndToStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.fDraggable = request.fComponent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution });
+};
+AddDndToStoreExecution = __decorate([
+    FExecutionRegister(AddDndToStoreRequest)
+], AddDndToStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class EmitSelectionChangeEventRequest {
+}
 
 class ClearSelectionRequest {
 }
@@ -7095,34 +7311,30 @@ class SelectRequest {
 }
 
 let SelectExecution = class SelectExecution {
-    fDataContext;
-    fDraggableDataContext;
-    constructor(fDataContext, fDraggableDataContext) {
-        this.fDataContext = fDataContext;
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    _fComponentsStore = inject(FComponentsStore);
     handle(request) {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
+        this._fDraggableDataContext.selectedItems.forEach((x) => {
             x.deselect();
         });
-        this.fDraggableDataContext.selectedItems = [];
+        this._fDraggableDataContext.selectedItems = [];
         request.nodes.forEach((key) => {
-            const node = this.fDataContext.fNodes.find((x) => x.fId === key);
+            const node = this._fComponentsStore.fNodes.find((x) => x.fId === key);
             if (node) {
                 node.select();
-                this.fDraggableDataContext.selectedItems.push(node);
+                this._fDraggableDataContext.selectedItems.push(node);
             }
         });
         request.connections.forEach((key) => {
-            const connection = this.fDataContext.fConnections.find((x) => x.fId === key);
+            const connection = this._fComponentsStore.fConnections.find((x) => x.fId === key);
             if (connection) {
                 connection.select();
-                this.fDraggableDataContext.selectedItems.push(connection);
+                this._fDraggableDataContext.selectedItems.push(connection);
             }
         });
-        this.fDraggableDataContext.isSelectedChanged = true;
+        this._fDraggableDataContext.isSelectedChanged = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectExecution });
 };
 SelectExecution = __decorate([
@@ -7130,34 +7342,30 @@ SelectExecution = __decorate([
 ], SelectExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
+        }] });
 
 class SelectAllRequest {
 }
 
 let SelectAllExecution = class SelectAllExecution {
-    fDataContext;
-    fDraggableDataContext;
-    constructor(fDataContext, fDraggableDataContext) {
-        this.fDataContext = fDataContext;
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    _fComponentsStore = inject(FComponentsStore);
     handle(request) {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
+        this._fDraggableDataContext.selectedItems.forEach((x) => {
             x.deselect();
         });
-        this.fDraggableDataContext.selectedItems = [];
-        this.fDataContext.fNodes.forEach((x) => {
+        this._fDraggableDataContext.selectedItems = [];
+        this._fComponentsStore.fNodes.forEach((x) => {
             x.select();
-            this.fDraggableDataContext.selectedItems.push(x);
+            this._fDraggableDataContext.selectedItems.push(x);
         });
-        this.fDataContext.fConnections.forEach((x) => {
+        this._fComponentsStore.fConnections.forEach((x) => {
             x.select();
-            this.fDraggableDataContext.selectedItems.push(x);
+            this._fDraggableDataContext.selectedItems.push(x);
         });
-        this.fDraggableDataContext.isSelectedChanged = true;
+        this._fDraggableDataContext.isSelectedChanged = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectAllExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectAllExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectAllExecution });
 };
 SelectAllExecution = __decorate([
@@ -7165,7 +7373,7 @@ SelectAllExecution = __decorate([
 ], SelectAllExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectAllExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
+        }] });
 
 class SelectAndUpdateNodeLayerRequest {
     fNode;
@@ -7333,7 +7541,7 @@ let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExec
     getChildrenNodesAndGroups(fId) {
         return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId)).map((x) => x.hostElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateItemAndChildrenLayersExecution });
 };
 UpdateItemAndChildrenLayersExecution = __decorate([
@@ -7341,7 +7549,7 @@ UpdateItemAndChildrenLayersExecution = __decorate([
 ], UpdateItemAndChildrenLayersExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }] });
 
 let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution {
     fDraggableDataContext;
@@ -7361,7 +7569,7 @@ let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution
             this.fDraggableDataContext.isSelectedChanged = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectAndUpdateNodeLayerExecution });
 };
 SelectAndUpdateNodeLayerExecution = __decorate([
@@ -7369,7 +7577,7 @@ SelectAndUpdateNodeLayerExecution = __decorate([
 ], SelectAndUpdateNodeLayerExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FDraggableDataContext }, { type: i2$1.FMediator }] });
 
 const F_SELECTION_FEATURES = [
     ClearSelectionExecution,
@@ -7421,7 +7629,7 @@ let EndDragSequenceExecution = class EndDragSequenceExecution {
     }
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
-        this._hostElement.classList.remove('f-dragging');
+        this._hostElement.classList.remove(F_CSS_CLASS.DRAG_AND_DROP.DRAGGING);
         this._fDraggableDataContext.reset();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: EndDragSequenceExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -7506,7 +7714,7 @@ let StartDragSequenceExecution = class StartDragSequenceExecution {
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
         if (this._fDraggableDataContext.draggableItems.length > 0) {
-            this._hostElement.classList.add('f-dragging');
+            this._hostElement.classList.add(F_CSS_CLASS.DRAG_AND_DROP.DRAGGING);
             this._fMediator.send(new EmitSelectionChangeEventRequest());
         }
     }
@@ -7638,23 +7846,21 @@ class GetFlowStateConnectionsRequest {
 }
 
 let GetFlowStateConnectionsExecution = class GetFlowStateConnectionsExecution {
-    fComponentsStore;
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
+    _fComponentsStore = inject(FComponentsStore);
     handle(request) {
-        return this.fComponentsStore.fConnections.map((x) => {
-            return {
-                id: x.fId,
-                fOutputId: x.fOutputId,
-                fInputId: x.fInputId,
-                fType: x.fType,
-                fBehavior: x.fBehavior,
-                isSelected: x.isSelected()
-            };
-        });
+        return this._fComponentsStore.fConnections.map(this._mapToConnectionState);
+    }
+    _mapToConnectionState(x) {
+        return {
+            id: x.fId,
+            fOutputId: x.fOutputId,
+            fInputId: x.fInputId,
+            fType: x.fType,
+            fBehavior: x.fBehavior,
+            isSelected: x.isSelected()
+        };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFlowStateConnectionsExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFlowStateConnectionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFlowStateConnectionsExecution });
 };
 GetFlowStateConnectionsExecution = __decorate([
@@ -7662,7 +7868,7 @@ GetFlowStateConnectionsExecution = __decorate([
 ], GetFlowStateConnectionsExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFlowStateConnectionsExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
+        }] });
 
 class GetFlowStateNodesRequest {
     type;
@@ -7683,13 +7889,13 @@ let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
                 parent: x.fParentId,
                 position: x.position,
                 size: x.size,
-                fOutputs: this.getOutputs(x.hostElement),
-                fInputs: this.getInputs(x.hostElement),
+                fOutputs: this._getOutputs(x.hostElement),
+                fInputs: this._getInputs(x.hostElement),
                 isSelected: x.isSelected()
             };
         });
     }
-    getOutputs(hostElement) {
+    _getOutputs(hostElement) {
         return this.fComponentsStore.fOutputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
             return {
                 id: x.fId,
@@ -7697,7 +7903,7 @@ let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
             };
         });
     }
-    getInputs(hostElement) {
+    _getInputs(hostElement) {
         return this.fComponentsStore.fInputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
             return {
                 id: x.fId,
@@ -7719,25 +7925,21 @@ class GetFlowStateRequest {
 }
 
 let GetFlowStateExecution = class GetFlowStateExecution {
-    fComponentsStore;
-    fMediator;
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
     handle(payload) {
         return {
-            position: this.getCanvasPosition(this.fComponentsStore.fCanvas.transform),
-            scale: this.fComponentsStore.fCanvas.transform.scale,
-            nodes: this.fMediator.send(new GetFlowStateNodesRequest(FNodeDirective)),
-            groups: this.fMediator.send(new GetFlowStateNodesRequest(FGroupDirective)),
-            connections: this.fMediator.send(new GetFlowStateConnectionsRequest())
+            position: this._getCanvasPosition(this._fComponentsStore.fCanvas.transform),
+            scale: this._fComponentsStore.fCanvas.transform.scale,
+            nodes: this._fMediator.send(new GetFlowStateNodesRequest(FNodeDirective)),
+            groups: this._fMediator.send(new GetFlowStateNodesRequest(FGroupDirective)),
+            connections: this._fMediator.send(new GetFlowStateConnectionsRequest())
         };
     }
-    getCanvasPosition(transform) {
+    _getCanvasPosition(transform) {
         return PointExtensions.sum(transform.position, transform.scaledPosition);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFlowStateExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFlowStateExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFlowStateExecution });
 };
 GetFlowStateExecution = __decorate([
@@ -7745,7 +7947,7 @@ GetFlowStateExecution = __decorate([
 ], GetFlowStateExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFlowStateExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
+        }] });
 
 const GET_FLOW_STATE_PROVIDERS = [
     GetFlowStateExecution,
@@ -7789,7 +7991,7 @@ class AddLineAlignmentToStoreRequest {
 let AddLineAlignmentToStoreExecution = class AddLineAlignmentToStoreExecution {
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
-        //this._fComponentsStore.fFlow = request.fComponent;
+        this._fComponentsStore.fLineAlignment = request.fComponent;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddLineAlignmentToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddLineAlignmentToStoreExecution });
@@ -7807,7 +8009,7 @@ class RemoveLineAlignmentFromStoreRequest {
 let RemoveLineAlignmentFromStoreExecution = class RemoveLineAlignmentFromStoreExecution {
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fFlow = undefined;
+        this._fComponentsStore.fLineAlignment = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveLineAlignmentFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveLineAlignmentFromStoreExecution });
@@ -7873,15 +8075,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }] });
 
 class CalculateNodesBoundingBoxNormalizedPositionRequest {
+    fNodes;
+    constructor(fNodes) {
+        this.fNodes = fNodes;
+    }
 }
 
 let CalculateNodesBoundingBoxNormalizedPositionExecution = class CalculateNodesBoundingBoxNormalizedPositionExecution {
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
-        return RectExtensions.union(this._getNodesRects());
+        return RectExtensions.union(this._getNodesRects(request.fNodes || this._fComponentsStore.fNodes));
     }
-    _getNodesRects() {
-        return this._fComponentsStore.fNodes.map((x) => {
+    _getNodesRects(fNodes) {
+        return fNodes.map((x) => {
             return this._getElementRect(x, RectExtensions.fromElement(x.hostElement));
         });
     }
@@ -7952,6 +8158,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Injectable
         }] });
 
+class GetParentNodesRequest {
+    fNode;
+    constructor(fNode) {
+        this.fNode = fNode;
+    }
+}
+
+let GetParentNodesExecution = class GetParentNodesExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        return this._getParentNodes(request.fNode, new Set(), []);
+    }
+    _getParentNodes(fNode, visited, result) {
+        if (visited.has(fNode.fId)) {
+            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fNode.fId);
+        }
+        visited.add(fNode.fId);
+        const parent = this._fComponentsStore.fNodes.find((x) => x.fId === fNode.fParentId);
+        if (!parent) {
+            return result;
+        }
+        result.push(parent);
+        return this._getParentNodes(parent, visited, result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetParentNodesExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetParentNodesExecution });
+};
+GetParentNodesExecution = __decorate([
+    FExecutionRegister(GetParentNodesRequest)
+], GetParentNodesExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetParentNodesExecution, decorators: [{
+            type: Injectable
+        }] });
+
 class UpdateNodeWhenStateOrSizeChangedRequest {
     fComponent;
     destroyRef;
@@ -7970,52 +8210,214 @@ let UpdateNodeWhenStateOrSizeChangedExecution = class UpdateNodeWhenStateOrSizeC
             this._fMediator.send(new NotifyDataChangedRequest());
         });
     }
-    _calculateConnectorsConnectableSide(fConnectors, hostElement) {
-        fConnectors.forEach((fConnector) => {
-            fConnector.fConnectableSide = new CalculateConnectorConnectableSideHandler().handle(new CalculateConnectorConnectableSideRequest(fConnector, hostElement));
-        });
+    _calculateConnectorsConnectableSide(fConnectors, fNodeHost) {
+        fConnectors.forEach((x) => {
+            x.fConnectableSide = this._calculateConnectorConnectableSide(x, fNodeHost);
+        });
+    }
+    _calculateConnectorConnectableSide(fConnector, fNodeHost) {
+        let result;
+        if (fConnector.userFConnectableSide === EFConnectableSide.AUTO) {
+            result = this._getSideByDelta(fConnector.hostElement, fNodeHost);
+        }
+        else {
+            result = fConnector.userFConnectableSide;
+        }
+        return result;
+    }
+    _getSideByDelta(fConnectorHost, fNodeHost) {
+        let result;
+        const childRect = RectExtensions.fromElement(fConnectorHost);
+        const parentRect = fNodeHost.getBoundingClientRect();
+        const deltaLeft = childRect.gravityCenter.x - parentRect.left;
+        const deltaRight = parentRect.right - childRect.gravityCenter.x;
+        const deltaTop = childRect.gravityCenter.y - parentRect.top;
+        const deltaBottom = parentRect.bottom - childRect.gravityCenter.y;
+        const minDelta = Math.min(deltaLeft, deltaRight, deltaTop, deltaBottom);
+        if (minDelta === deltaLeft) {
+            result = EFConnectableSide.LEFT;
+        }
+        else if (minDelta === deltaRight) {
+            result = EFConnectableSide.RIGHT;
+        }
+        else if (minDelta === deltaTop) {
+            result = EFConnectableSide.TOP;
+        }
+        else {
+            result = EFConnectableSide.BOTTOM;
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateNodeWhenStateOrSizeChangedExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateNodeWhenStateOrSizeChangedExecution });
+};
+UpdateNodeWhenStateOrSizeChangedExecution = __decorate([
+    FExecutionRegister(UpdateNodeWhenStateOrSizeChangedRequest)
+], UpdateNodeWhenStateOrSizeChangedExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateNodeWhenStateOrSizeChangedExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class RemoveNodeFromStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
+    }
+}
+
+let RemoveNodeFromStoreExecution = class RemoveNodeFromStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.removeComponent(this._fComponentsStore.fNodes, request.fComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveNodeFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveNodeFromStoreExecution });
+};
+RemoveNodeFromStoreExecution = __decorate([
+    FExecutionRegister(RemoveNodeFromStoreRequest)
+], RemoveNodeFromStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveNodeFromStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+const F_NODE_FEATURES = [
+    AddNodeToStoreExecution,
+    CalculateNodesBoundingBoxExecution,
+    CalculateNodesBoundingBoxNormalizedPositionExecution,
+    GetNodePaddingExecution,
+    GetNodesExecution,
+    GetParentNodesExecution,
+    UpdateNodeWhenStateOrSizeChangedExecution,
+    RemoveNodeFromStoreExecution
+];
+
+class AddZoomToStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
+    }
+}
+
+const F_ZOOM_TAG = 'F_ZOOM';
+
+let AddZoomToStoreExecution = class AddZoomToStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.fComponents = {
+            [F_ZOOM_TAG]: request.fComponent
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddZoomToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddZoomToStoreExecution });
+};
+AddZoomToStoreExecution = __decorate([
+    FExecutionRegister(AddZoomToStoreRequest)
+], AddZoomToStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddZoomToStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class RemoveZoomFromStoreRequest {
+}
+
+let RemoveZoomFromStoreExecution = class RemoveZoomFromStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.fComponents = {
+            [F_ZOOM_TAG]: undefined
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveZoomFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveZoomFromStoreExecution });
+};
+RemoveZoomFromStoreExecution = __decorate([
+    FExecutionRegister(RemoveZoomFromStoreRequest)
+], RemoveZoomFromStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveZoomFromStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class ResetZoomRequest {
+}
+
+let ResetZoomExecution = class ResetZoomExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    get _fCanvas() {
+        return this._fComponentsStore.fCanvas;
+    }
+    handle(request) {
+        this._fCanvas.resetScale();
+        this._fCanvas.redraw();
+        this._fCanvas.emitCanvasChangeEvent();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateNodeWhenStateOrSizeChangedExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateNodeWhenStateOrSizeChangedExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ResetZoomExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ResetZoomExecution });
 };
-UpdateNodeWhenStateOrSizeChangedExecution = __decorate([
-    FExecutionRegister(UpdateNodeWhenStateOrSizeChangedRequest)
-], UpdateNodeWhenStateOrSizeChangedExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateNodeWhenStateOrSizeChangedExecution, decorators: [{
+ResetZoomExecution = __decorate([
+    FExecutionRegister(ResetZoomRequest)
+], ResetZoomExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ResetZoomExecution, decorators: [{
             type: Injectable
         }] });
 
-class RemoveNodeFromStoreRequest {
-    fComponent;
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+class SetZoomRequest {
+    position;
+    step;
+    direction;
+    animate;
+    constructor(position, step, direction, animate = false) {
+        this.position = position;
+        this.step = step;
+        this.direction = direction;
+        this.animate = animate;
     }
 }
 
-let RemoveNodeFromStoreExecution = class RemoveNodeFromStoreExecution {
+let SetZoomExecution = class SetZoomExecution {
+    _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
+    get _fHost() {
+        return this._fComponentsStore.fFlow?.hostElement;
+    }
+    get _fCanvas() {
+        return this._fComponentsStore.fCanvas;
+    }
+    get _fZoomComponent() {
+        return this._fComponentsStore.fComponents[F_ZOOM_TAG];
+    }
+    get _isDragStarted() {
+        return this._fMediator.execute(new IsDragStartedRequest());
+    }
     handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fNodes, request.fComponent);
+        if (this._isDragStarted || !this._fZoomComponent) {
+            return;
+        }
+        const result = this._fCanvas.transform.scale + request.step * request.direction;
+        this._fCanvas.setScale(this._clamp(result), this._castPositionToFlow(request.position));
+        request.animate ? this._fCanvas.redrawWithAnimation() : this._fCanvas.redraw();
+        this._fCanvas.emitCanvasChangeEvent();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveNodeFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveNodeFromStoreExecution });
+    _clamp(value) {
+        return Math.max(this._fZoomComponent.minimum, Math.min(value, this._fZoomComponent.maximum));
+    }
+    _castPositionToFlow(position) {
+        return Point.fromPoint(position).elementTransform(this._fHost);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SetZoomExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SetZoomExecution });
 };
-RemoveNodeFromStoreExecution = __decorate([
-    FExecutionRegister(RemoveNodeFromStoreRequest)
-], RemoveNodeFromStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveNodeFromStoreExecution, decorators: [{
+SetZoomExecution = __decorate([
+    FExecutionRegister(SetZoomRequest)
+], SetZoomExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SetZoomExecution, decorators: [{
             type: Injectable
         }] });
 
-const F_NODE_FEATURES = [
-    AddNodeToStoreExecution,
-    CalculateNodesBoundingBoxExecution,
-    CalculateNodesBoundingBoxNormalizedPositionExecution,
-    GetNodePaddingExecution,
-    GetNodesExecution,
-    GetParentNodesExecution,
-    UpdateNodeWhenStateOrSizeChangedExecution,
-    RemoveNodeFromStoreExecution
+const F_ZOOM_FEATURES = [
+    AddZoomToStoreExecution,
+    RemoveZoomFromStoreExecution,
+    ResetZoomExecution,
+    SetZoomExecution
 ];
 
 class GetNormalizedPointRequest {
@@ -8089,7 +8491,7 @@ let SortNodeLayersExecution = class SortNodeLayersExecution {
         });
         this.fNodesContainer.appendChild(fragment);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortNodeLayersExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortNodeLayersExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortNodeLayersExecution });
 };
 SortNodeLayersExecution = __decorate([
@@ -8097,7 +8499,7 @@ SortNodeLayersExecution = __decorate([
 ], SortNodeLayersExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortNodeLayersExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }, { type: i1.BrowserService }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }, { type: i1.BrowserService }] });
 
 class SortItemsByParentRequest {
     fItemsContainer;
@@ -8148,7 +8550,7 @@ let SortItemsByParentExecution = class SortItemsByParentExecution {
         });
         this.fItemsContainer.insertBefore(fragment, nextSibling);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemsByParentExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemsByParentExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemsByParentExecution });
 };
 SortItemsByParentExecution = __decorate([
@@ -8156,7 +8558,7 @@ SortItemsByParentExecution = __decorate([
 ], SortItemsByParentExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemsByParentExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }, { type: i1.BrowserService }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }, { type: i1.BrowserService }] });
 
 class SortItemLayersRequest {
 }
@@ -8176,7 +8578,7 @@ let SortItemLayersExecution = class SortItemLayersExecution {
         this.fMediator.send(new SortNodeLayersRequest());
         this.fMediator.send(new SortItemsByParentRequest(this.fComponentsStore.fCanvas.fNodesContainer.nativeElement));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemLayersExecution, deps: [{ token: i2.FMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemLayersExecution, deps: [{ token: i2$1.FMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemLayersExecution });
 };
 SortItemLayersExecution = __decorate([
@@ -8184,17 +8586,55 @@ SortItemLayersExecution = __decorate([
 ], SortItemLayersExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemLayersExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2.FMediator }, { type: FComponentsStore }] });
+        }], ctorParameters: () => [{ type: i2$1.FMediator }, { type: FComponentsStore }] });
 
 function createSVGElement(tag, fBrowser) {
     return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
 }
 
+var EFTriggerEvent;
+(function (EFTriggerEvent) {
+    EFTriggerEvent["WHEEL"] = "wheel";
+    EFTriggerEvent["DOUBLE_CLICK"] = "dblclick";
+    EFTriggerEvent["MOUSE_DOWN"] = "mousedown";
+    EFTriggerEvent["MOUSE_UP"] = "mouseup";
+    EFTriggerEvent["MOUSE_MOVE"] = "mousemove";
+    EFTriggerEvent["KEY_DOWN"] = "keydown";
+    EFTriggerEvent["KEY_UP"] = "keyup";
+})(EFTriggerEvent || (EFTriggerEvent = {}));
+
 function isMobile() {
     // @ts-ignore
     return /android|iPad|iPhone|iPod/i.test(navigator.userAgent || navigator.vendor || window['opera']);
 }
 
+function Deprecated(newMethodName, removalVersion = '18.0.0') {
+    return function (target, propertyKey, descriptor) {
+        const originalMethod = descriptor.value;
+        descriptor.value = function (...args) {
+            console.warn(`Method "${String(propertyKey)}" is deprecated. Use "${newMethodName}" instead. This method will be removed in version ${removalVersion}.`);
+            return originalMethod.apply(this, args);
+        };
+        return descriptor;
+    };
+}
+
+function LogExecutionTime(label) {
+    return function (target, propertyKey, descriptor) {
+        const originalMethod = descriptor.value;
+        descriptor.value = function (...args) {
+            console.time(label || String(propertyKey));
+            const result = originalMethod.apply(this, args);
+            if (result instanceof Promise) {
+                return result.finally(() => console.timeEnd(label || String(propertyKey)));
+            }
+            console.timeEnd(label || String(propertyKey));
+            return result;
+        };
+        return descriptor;
+    };
+}
+
 const COMMON_PROVIDERS = [
     ...F_CANVAS_FEATURES,
     ...F_CONNECTION_FEATURES,
@@ -8206,6 +8646,7 @@ const COMMON_PROVIDERS = [
     ...F_NODE_FEATURES,
     GetElementRoundedRectExecution,
     ...F_SELECTION_FEATURES,
+    ...F_ZOOM_FEATURES,
     GetDeepChildrenNodesAndGroupsExecution,
     GetNormalizedElementRectExecution,
     GetNormalizedPointExecution,
@@ -8528,10 +8969,25 @@ class FCanvasComponent extends FCanvasBase {
     resetScaleAndCenter(animated = true) {
         this._fMediator.send(new ResetScaleAndCenterRequest(animated));
     }
+    getScale() {
+        return this.transform.scale || 1;
+    }
+    /**
+     *  @deprecated Method "setZoom" is deprecated. Use "setScale" instead. This method will be removed in version 18.0.0.`,
+     */
     setZoom(scale, toPosition = PointExtensions.initialize()) {
+        this.setScale(scale, toPosition);
+    }
+    setScale(scale, toPosition = PointExtensions.initialize()) {
         this._fMediator.send(new UpdateScaleRequest(scale, toPosition));
     }
+    /**
+     *  @deprecated Method "resetZoom" is deprecated. Use "resetScale" instead. This method will be removed in version 18.0.0.`,
+     */
     resetZoom() {
+        this.resetScale();
+    }
+    resetScale() {
         this._fMediator.send(new ResetScaleRequest());
     }
     ngOnDestroy() {
@@ -8542,6 +8998,12 @@ class FCanvasComponent extends FCanvasBase {
             { provide: F_CANVAS, useExisting: FCanvasComponent }
         ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, static: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+__decorate([
+    Deprecated('setScale')
+], FCanvasComponent.prototype, "setZoom", null);
+__decorate([
+    Deprecated('resetScale')
+], FCanvasComponent.prototype, "resetZoom", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-canvas', exportAs: 'fComponent', host: {
@@ -8564,177 +9026,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], fConnectionsContainer: [{
                 type: ViewChild,
                 args: ['fConnectionsContainer', { static: true }]
-            }] } });
+            }], setZoom: [], resetZoom: [] } });
 
 const F_CANVAS_PROVIDERS = [
     FCanvasComponent,
 ];
 
-class LineElement {
-    hostElement;
-    element;
-    constructor(fBrowser, hostElement) {
-        this.hostElement = hostElement;
-        this.element = fBrowser.document.createElement('div');
-        this.hostElement.appendChild(this.element);
-        this.element.classList.add('f-line');
-    }
-    hide() {
-        this.element.style.display = 'none';
-    }
-    show() {
-        this.element.style.display = 'block';
-    }
-    draw(object) {
-        this.element.style.position = 'absolute';
-        Object.keys(object).forEach((key) => {
-            // @ts-ignore
-            this.element.style[key] = object[key] + 'px';
-        });
-    }
-}
-
-class LineService {
-    hostElement;
-    fHorizontalLine;
-    fVerticalLine;
-    constructor(fBrowser, hostElement) {
-        this.hostElement = hostElement;
-        this.fHorizontalLine = new LineElement(fBrowser, this.hostElement);
-        this.fVerticalLine = new LineElement(fBrowser, this.hostElement);
-        this.fHorizontalLine.hide();
-        this.fVerticalLine.hide();
-    }
-    drawVerticalLine(x, size, transform) {
-        this.fVerticalLine.show();
-        this.fVerticalLine.draw({
-            left: x * transform.scale + transform.position.x + transform.scaledPosition.x,
-            top: 0,
-            width: 1,
-            height: size.height
-        });
-    }
-    drawHorizontalLine(y, size, transform) {
-        this.fHorizontalLine.show();
-        this.fHorizontalLine.draw({
-            left: 0,
-            top: y * transform.scale + transform.position.y + transform.scaledPosition.y,
-            width: size.width,
-            height: 1
-        });
-    }
-    hideVerticalLine() {
-        this.fVerticalLine.hide();
-    }
-    hideHorizontalLine() {
-        this.fHorizontalLine.hide();
-    }
-}
-
-const F_LINE_ALIGNMENT = new InjectionToken('F_LINE_ALIGNMENT');
-class FLineAlignmentBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FLineAlignmentBase, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FLineAlignmentBase, decorators: [{
-            type: Directive
-        }] });
-
-class FLineAlignmentComponent extends FLineAlignmentBase {
-    elementReference;
-    fDraggableDataContext;
-    DEBOUNCE_TIME = 10;
-    fAlignThreshold = 10;
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    lineService;
-    size = SizeExtensions.initialize();
-    draggedNodeRect = RectExtensions.initialize();
-    rects = [];
-    _fMediator = inject(FMediator);
-    _fCanvas;
-    _debounceTimer = null;
-    get _transform() {
-        return this._fCanvas.transform;
-    }
-    constructor(elementReference, fDraggableDataContext, fBrowser) {
-        super();
-        this.elementReference = elementReference;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.lineService = new LineService(fBrowser, this.hostElement);
-    }
-    ngAfterViewInit() {
-        this._fCanvas = this._fMediator.send(new GetCanvasRequest());
-        this.fDraggableDataContext.fLineAlignment = this;
-    }
-    initialize(allNodes, currentNodes) {
-        this.size = this._fMediator.send(new GetFlowHostElementRequest()).getBoundingClientRect();
-        this.rects = [];
-        const draggedNodeRects = currentNodes.map((x) => {
-            return this._fMediator.execute(new GetNormalizedElementRectRequest(x.hostElement, false));
-        });
-        this.draggedNodeRect = RectExtensions.union(draggedNodeRects) || RectExtensions.initialize();
-        const allNodesExcludeCurrents = allNodes.filter((x) => {
-            return !currentNodes.includes(x);
-        });
-        this.rects = allNodesExcludeCurrents.map((x) => {
-            return this._fMediator.execute(new GetNormalizedElementRectRequest(x.hostElement, false));
-        });
-    }
-    handle(difference) {
-        if (this._debounceTimer) {
-            clearTimeout(this._debounceTimer);
-        }
-        this._debounceTimer = setTimeout(() => this.drawIntersectingLines(difference), this.DEBOUNCE_TIME);
-    }
-    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();
-        }
-    }
-    findNearestCoordinate(difference) {
-        const rect = RectExtensions.addPoint(this.draggedNodeRect, difference);
-        return findClosestAlignment(this.rects, rect, this.fAlignThreshold);
-    }
-    complete() {
-        this.lineService.hideVerticalLine();
-        this.lineService.hideHorizontalLine();
-        if (this._debounceTimer) {
-            clearTimeout(this._debounceTimer);
-            this._debounceTimer = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FLineAlignmentComponent, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FLineAlignmentComponent, selector: "f-line-alignment", inputs: { fAlignThreshold: "fAlignThreshold" }, 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: "18.2.4", 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: FDraggableDataContext }, { type: i1.BrowserService }], propDecorators: { fAlignThreshold: [{
-                type: Input
-            }] } });
-
-const F_LINE_ALIGNMENT_PROVIDERS = [
-    FLineAlignmentComponent
-];
-
 class FMinimapData {
     element;
     scale;
@@ -8992,124 +9289,156 @@ const F_FLOW_PROVIDERS = [
     FFlowComponent
 ];
 
+var EFZoomAction;
+(function (EFZoomAction) {
+    EFZoomAction["WHEEL"] = "wheel";
+    EFZoomAction["DOUBLE_CLICK"] = "dbl-click";
+})(EFZoomAction || (EFZoomAction = {}));
+
+var EFZoomDirection;
+(function (EFZoomDirection) {
+    EFZoomDirection[EFZoomDirection["ZOOM_IN"] = 1] = "ZOOM_IN";
+    EFZoomDirection[EFZoomDirection["ZOOM_OUT"] = -1] = "ZOOM_OUT";
+})(EFZoomDirection || (EFZoomDirection = {}));
+
 const F_ZOOM = new InjectionToken('F_ZOOM');
 class FZoomBase {
-    isEnabled = false;
-    _listeners = EventExtensions.emptyListener();
+}
+
+class FZoomDirective extends FZoomBase {
     _fMediator = inject(FMediator);
-    get _fFlowHostElement() {
-        return this._fMediator.send(new GetFlowHostElementRequest());
+    _rendered = inject(Renderer2);
+    _triggersListener = [];
+    _isEnabled = false;
+    set fZoom(isEnabled) {
+        if (isEnabled !== this._isEnabled) {
+            this._isEnabled = isEnabled;
+            this._listenTriggers();
+        }
+    }
+    fZoomTriggers = [
+        { event: EFTriggerEvent.WHEEL, action: EFZoomAction.WHEEL },
+        { event: EFTriggerEvent.DOUBLE_CLICK, action: EFZoomAction.DOUBLE_CLICK }
+    ];
+    minimum = 0.1;
+    maximum = 4;
+    step = 0.1;
+    dblClickStep = 0.5;
+    get _fHost() {
+        return this._fMediator.execute(new GetFlowHostElementRequest());
     }
     get _fCanvas() {
-        return this._fMediator.send(new GetCanvasRequest());
+        return this._fMediator.execute(new GetCanvasRequest());
     }
-    get _isDragStarted() {
-        return this._fMediator.send(new IsDragStartedRequest());
+    ngOnInit() {
+        this._fMediator.execute(new AddZoomToStoreRequest(this));
     }
-    toggleZoom() {
-        if (this.isEnabled) {
-            this._subscribe();
-        }
-        else {
-            this.dispose();
+    ngAfterViewInit() {
+        this._listenTriggers();
+    }
+    ngOnChanges(changes) {
+        if (changes['fZoomTriggers']) {
+            this._listenTriggers();
         }
     }
-    _subscribe() {
-        this._listeners();
-        if (!this._fFlowHostElement) {
+    _listenTriggers() {
+        if (!this._fHost) {
             return;
         }
-        this._fFlowHostElement.addEventListener('wheel', this._onWheel);
-        this._fFlowHostElement.addEventListener('dblclick', this._onDoubleClick);
-        this._listeners = () => {
-            this._fFlowHostElement.removeEventListener('wheel', this._onWheel);
-            this._fFlowHostElement.removeEventListener('dblclick', this._onDoubleClick);
-        };
+        this._disposeListeners();
+        this._validateTriggers();
+        this.fZoomTriggers.forEach((x) => {
+            this._triggersListener.push(this._rendered.listen(this._fHost, x.event, this._getAction(x)));
+        });
     }
-    getScale() {
-        return this._fCanvas.transform.scale || 1;
+    _validateTriggers() {
+        const SUPPORTED_EVENTS = Object.values(EFTriggerEvent);
+        const SUPPORTED_ACTIONS = Object.values(EFZoomAction);
+        this.fZoomTriggers.forEach((trigger) => {
+            if (!SUPPORTED_EVENTS.includes(trigger.event)) {
+                throw new Error(`Unsupported event: ${trigger.event}`);
+            }
+            if (!SUPPORTED_ACTIONS.includes(trigger.action)) {
+                throw new Error(`Unsupported action: ${trigger.action}`);
+            }
+        });
+    }
+    _getAction(trigger) {
+        switch (trigger.action) {
+            case EFZoomAction.WHEEL:
+                return (event) => this._onWheel(event, trigger);
+            case EFZoomAction.DOUBLE_CLICK:
+                return (event) => this._onDoubleClick(event, trigger);
+            default:
+                throw new Error(`Unknown action: ${trigger.action}`);
+        }
     }
-    _onWheel = (event) => {
+    _onWheel = (event, trigger) => {
+        if (trigger.validator && !trigger.validator(event)) {
+            return;
+        }
         event.preventDefault();
         const targetElement = event.target;
-        if (this._isDragStarted || targetElement?.closest('[fLockedContext]')) {
+        if (targetElement?.closest('[fLockedContext]')) {
             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._fFlowHostElement);
-        this._fCanvas.setZoom(result, pointerPositionInFlow);
-        this._fCanvas.redraw();
-        this._fCanvas.emitCanvasChangeEvent();
+        this.setZoom(PointExtensions.initialize(event.clientX, event.clientY), this.step, this._calculateDirection(event.deltaY), false);
     };
-    _onDoubleClick = (event) => {
+    _calculateDirection(deltaY) {
+        return deltaY > 0 ? EFZoomDirection.ZOOM_OUT : EFZoomDirection.ZOOM_IN;
+    }
+    _onDoubleClick = (event, trigger) => {
+        if (trigger.validator && !trigger.validator(event)) {
+            return;
+        }
         event.preventDefault();
         const targetElement = event.target;
-        if (this._isDragStarted || isNode(targetElement) || targetElement?.closest('[fLockedContext]')) {
+        if (isNode(targetElement) || targetElement?.closest('[fLockedContext]')) {
             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._fFlowHostElement);
-        this._fCanvas.setZoom(result, pointerPositionInFlow);
-        this._fCanvas.redrawWithAnimation();
-        this._fCanvas.emitCanvasChangeEvent();
+        this.setZoom(PointExtensions.initialize(event.clientX, event.clientY), this.dblClickStep, EFZoomDirection.ZOOM_IN, true);
     };
-    _onZoomToCenter(deltaY, position) {
-        const preventDefault = () => {
-        };
-        const rect = RectExtensions.fromElement(this._fFlowHostElement);
-        this._onWheel({
-            deltaY, preventDefault, clientX: position?.x || rect.gravityCenter.x, clientY: position?.y || rect.gravityCenter.y
-        });
+    _getToCenterPosition(position, rect) {
+        return PointExtensions.initialize(position?.x || rect.gravityCenter.x, position?.y || rect.gravityCenter.y);
     }
     zoomIn(position) {
-        this._onZoomToCenter(-1, position);
+        this._onZoomToCenter(EFZoomDirection.ZOOM_IN, position);
     }
     zoomOut(position) {
-        this._onZoomToCenter(1, position);
+        this._onZoomToCenter(EFZoomDirection.ZOOM_OUT, position);
     }
-    reset() {
-        this._fCanvas.resetZoom();
-        this._fCanvas.redraw();
-        this._fCanvas.emitCanvasChangeEvent();
+    _onZoomToCenter(direction, position) {
+        this.setZoom(this._getToCenterPosition(position, RectExtensions.fromElement(this._fHost)), this.step, direction, false);
     }
-    dispose() {
-        this._listeners();
-        this._listeners = EventExtensions.emptyListener();
+    setZoom(position, step, direction, animated) {
+        this._fMediator.execute(new SetZoomRequest(position, step, direction, animated));
     }
-}
-
-class FZoomDirective extends FZoomBase {
-    get fFlowZoom() {
-        return this.isEnabled;
+    /**
+     *  @deprecated Method "getScale" is deprecated. Use "getZoomValue" instead. This method will be removed in version 18.0.0.`,
+     */
+    getScale() {
+        return this.getZoomValue();
     }
-    set fFlowZoom(isEnabled) {
-        const value = castToBoolean(isEnabled);
-        if (value !== this.isEnabled) {
-            this.isEnabled = value;
-            this.toggleZoom();
-        }
+    getZoomValue() {
+        return this._fCanvas.transform.scale || 1;
     }
-    minimum = 0.1;
-    maximum = 4;
-    step = 0.1;
-    dblClickStep = 0.5;
-    ngAfterViewInit() {
-        super.toggleZoom();
+    reset() {
+        this._fMediator.execute(new ResetZoomRequest());
+    }
+    _disposeListeners() {
+        this._triggersListener.forEach((listener) => listener());
+        this._triggersListener = [];
     }
     ngOnDestroy() {
-        super.dispose();
+        this._disposeListeners();
+        this._fMediator.execute(new RemoveZoomFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FZoomDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", 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 ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FZoomDirective, selector: "f-canvas[fZoom]", inputs: { fZoom: ["fZoom", "fZoom", booleanAttribute], fZoomTriggers: "fZoomTriggers", minimum: ["fZoomMinimum", "minimum", numberAttribute], maximum: ["fZoomMaximum", "maximum", numberAttribute], step: ["fZoomStep", "step", numberAttribute], dblClickStep: ["fZoomDblClickStep", "dblClickStep", numberAttribute] }, host: { classAttribute: "f-zoom f-component" }, providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
+__decorate([
+    Deprecated('getZoomValue')
+], FZoomDirective.prototype, "getScale", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FZoomDirective, decorators: [{
             type: Directive,
             args: [{
@@ -9120,22 +9449,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     },
                     providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }],
                 }]
-        }], propDecorators: { fFlowZoom: [{
+        }], propDecorators: { fZoom: [{
                 type: Input,
-                args: ['fZoom']
+                args: [{ alias: 'fZoom', transform: booleanAttribute }]
+            }], fZoomTriggers: [{
+                type: Input
             }], minimum: [{
                 type: Input,
-                args: ['fZoomMinimum']
+                args: [{ alias: 'fZoomMinimum', transform: numberAttribute }]
             }], maximum: [{
                 type: Input,
-                args: ['fZoomMaximum']
+                args: [{ alias: 'fZoomMaximum', transform: numberAttribute }]
             }], step: [{
                 type: Input,
-                args: ['fZoomStep']
+                args: [{ alias: 'fZoomStep', transform: numberAttribute }]
             }], dblClickStep: [{
                 type: Input,
-                args: ['fZoomDblClickStep']
-            }] } });
+                args: [{ alias: 'fZoomDblClickStep', transform: numberAttribute }]
+            }], getScale: [] } });
 
 const F_ZOOM_PROVIDERS = [
     FZoomDirective
@@ -9187,5 +9518,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStoreExecution, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStoreExecution, AddNodeToStoreRequest, AddOutletToStoreExecution, AddOutletToStoreRequest, AddOutputToStoreExecution, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, CANVAS_MOVE_FINALIZE_PROVIDERS, CANVAS_MOVE_PREPARATION_PROVIDERS, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CanvasMovePreparationValidator, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, ConnectionBaseDragHandler, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionDragHandlerExecution, CreateConnectionDragHandlerRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionFromOutputPreparationValidator, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EXTERNAL_ITEM_FINALIZE_PROVIDERS, EXTERNAL_ITEM_PREPARATION_PROVIDERS, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, ExternalItemDragHandler, ExternalItemFinalizeExecution, ExternalItemFinalizeRequest, ExternalItemPreparationExecution, ExternalItemPreparationRequest, ExternalItemPreparationValidator, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSnapConnectionComponent, FStraightPathBuilder, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_DRAG_AND_DROP_PLUGIN, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_RESIZE_HANDLE, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_PROVIDERS, FindClosestInputExecution, FindClosestInputRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputPositionsExecution, GetAllCanBeConnectedInputPositionsRequest, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeConnectedOutputByOutletValidator, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorWithRectExecution, GetConnectorWithRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetInputUnderPointerExecution, GetInputUnderPointerRequest, GetInputUnderPointerValidator, GetNodeMoveRestrictionsExecution, GetNodeMoveRestrictionsRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragFinalizeValidator, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDragPreparationValidator, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DRAG_TO_PARENT_FINALIZE_PROVIDERS, NODE_DRAG_TO_PARENT_PREPARATION_PROVIDERS, NODE_MOVE_PREPARATION_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_FINALIZE_PROVIDERS, NODE_RESIZE_PREPARATION_PROVIDERS, NODE_RESIZE_PROVIDERS, NodeDragHandler, NodeDragToParentDragHandler, NodeDragToParentFinalizeExecution, NodeDragToParentFinalizeRequest, NodeDragToParentPreparationExecution, NodeDragToParentPreparationRequest, NodeDragToParentPreparationValidator, NodeMoveFinalizeExecution, NodeMoveFinalizeRequest, NodeMovePreparationExecution, NodeMovePreparationRequest, NodeMovePreparationValidator, NodeResizeByChildDragHandler, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizePreparationExecution, NodeResizePreparationRequest, NodeResizePreparationValidator, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, RedrawCanvasWithAnimationExecution, RedrawCanvasWithAnimationRequest, RedrawConnectionsExecution, RedrawConnectionsRequest, RemoveBackgroundFromStoreExecution, RemoveBackgroundFromStoreRequest, RemoveCanvasFromStoreExecution, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStoreExecution, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStoreExecution, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStoreExecution, RemoveConnectionMarkerFromStoreRequest, RemoveDndFromStoreExecution, RemoveDndFromStoreRequest, RemoveFlowFromStoreExecution, RemoveFlowFromStoreRequest, RemoveInputFromStoreExecution, RemoveInputFromStoreRequest, RemoveLineAlignmentFromStoreExecution, RemoveLineAlignmentFromStoreRequest, RemoveNodeFromStoreExecution, RemoveNodeFromStoreRequest, RemoveOutletFromStoreExecution, RemoveOutletFromStoreRequest, RemoveOutputFromStoreExecution, RemoveOutputFromStoreRequest, RemoveSnapConnectionFromStoreExecution, RemoveSnapConnectionFromStoreRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, SELECTION_AREA_FINALIZE_PROVIDERS, SELECTION_AREA_PREPARATION_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaFinalizeValidator, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SelectionAreaPreparationValidator, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SingleSelectExecution, SingleSelectRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, StartDragSequenceExecution, StartDragSequenceRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, transitionEnd };
+export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStoreExecution, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStoreExecution, AddNodeToStoreRequest, AddOutletToStoreExecution, AddOutletToStoreRequest, AddOutputToStoreExecution, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateClosestInputExecution, CalculateClosestInputRequest, CalculateCommonNodeMoveRestrictionsExecution, CalculateCommonNodeMoveRestrictionsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateNodeMoveRestrictionsExecution, CalculateNodeMoveRestrictionsRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, ConnectionBaseDragHandler, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionDragHandlerExecution, CreateConnectionDragHandlerRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionFromOutputPreparationValidator, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFTriggerEvent, EFZoomAction, EFZoomDirection, EXTERNAL_ITEM_FINALIZE_PROVIDERS, EXTERNAL_ITEM_PREPARATION_PROVIDERS, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, ExternalItemDragHandler, ExternalItemFinalizeExecution, ExternalItemFinalizeRequest, ExternalItemPreparationExecution, ExternalItemPreparationRequest, ExternalItemPreparationValidator, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSnapConnectionComponent, FStraightPathBuilder, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CSS_CLASS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_DRAG_AND_DROP_PLUGIN, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_RESIZE_HANDLE, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, F_ZOOM_TAG, FindInputAtPositionExecution, FindInputAtPositionRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeConnectedOutputByOutletValidator, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineAlignmentDragHandler, LineAlignmentPreparationExecution, LineAlignmentPreparationRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MarkAllCanBeConnectedInputsExecution, MarkAllCanBeConnectedInputsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragFinalizeValidator, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDragPreparationValidator, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DRAG_TO_PARENT_FINALIZE_PROVIDERS, NODE_DRAG_TO_PARENT_PREPARATION_PROVIDERS, NODE_MOVE_PREPARATION_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_FINALIZE_PROVIDERS, NODE_RESIZE_PREPARATION_PROVIDERS, NODE_RESIZE_PROVIDERS, NodeDragHandler, NodeDragToParentDragHandler, NodeDragToParentFinalizeExecution, NodeDragToParentFinalizeRequest, NodeDragToParentPreparationExecution, NodeDragToParentPreparationRequest, NodeDragToParentPreparationValidator, NodeMoveFinalizeExecution, NodeMoveFinalizeRequest, NodeMovePreparationExecution, NodeMovePreparationRequest, NodeResizeByChildDragHandler, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizePreparationExecution, NodeResizePreparationRequest, NodeResizePreparationValidator, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, RedrawCanvasWithAnimationExecution, RedrawCanvasWithAnimationRequest, RedrawConnectionsExecution, RedrawConnectionsRequest, RemoveBackgroundFromStoreExecution, RemoveBackgroundFromStoreRequest, RemoveCanvasFromStoreExecution, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStoreExecution, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStoreExecution, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStoreExecution, RemoveConnectionMarkerFromStoreRequest, RemoveDndFromStoreExecution, RemoveDndFromStoreRequest, RemoveFlowFromStoreExecution, RemoveFlowFromStoreRequest, RemoveInputFromStoreExecution, RemoveInputFromStoreRequest, RemoveLineAlignmentFromStoreExecution, RemoveLineAlignmentFromStoreRequest, RemoveNodeFromStoreExecution, RemoveNodeFromStoreRequest, RemoveOutletFromStoreExecution, RemoveOutletFromStoreRequest, RemoveOutputFromStoreExecution, RemoveOutputFromStoreRequest, RemoveSnapConnectionFromStoreExecution, RemoveSnapConnectionFromStoreRequest, RemoveZoomFromStoreExecution, RemoveZoomFromStoreRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, ResetZoomExecution, ResetZoomRequest, SELECTION_AREA_FINALIZE_PROVIDERS, SELECTION_AREA_PREPARATION_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaFinalizeValidator, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SelectionAreaPreparationValidator, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SingleSelectExecution, SingleSelectRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, StartDragSequenceExecution, StartDragSequenceRequest, UnmarkAllCanBeConnectedInputsExecution, UnmarkAllCanBeConnectedInputsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, transitionEnd };
 //# sourceMappingURL=foblex-flow.mjs.map