@foblex/flow 17.1.0 → 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, findClosestAlignment, setRectToElement, adjustRectToMinSize, 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;
@@ -919,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;
@@ -1170,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 = [];
     }
 }
 
@@ -1491,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 });
 }
@@ -1530,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;
@@ -1565,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);
@@ -1607,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 });
 }
@@ -1646,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) {
@@ -1669,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: [{
@@ -1717,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: [{
@@ -1759,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,
@@ -1796,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: [{
@@ -1807,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');
@@ -1827,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,
@@ -1877,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: [{
@@ -1897,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 = [
@@ -2607,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,
@@ -2619,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) }]
@@ -2693,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,
@@ -2719,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) }]
@@ -2874,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,
@@ -2886,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) }]
@@ -3002,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;
@@ -3010,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);
         }
@@ -3021,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);
@@ -3044,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([
@@ -3052,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 {
 }
@@ -3148,10 +3000,7 @@ const F_CONNECTION_FEATURES = [
     AddConnectionToStoreExecution,
     AddSnapConnectionToStoreExecution,
     CreateConnectionMarkersExecution,
-    FindClosestInputExecution,
-    GetAllCanBeConnectedInputPositionsExecution,
     CalculateConnectionLineByBehaviorExecution,
-    GetConnectorWithRectExecution,
     RedrawConnectionsExecution,
     RemoveConnectionForCreateFromStoreExecution,
     RemoveConnectionFromStoreExecution,
@@ -3225,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 {
@@ -3332,24 +3137,6 @@ 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;
@@ -3374,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([
@@ -3396,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;
@@ -3410,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 {
@@ -3600,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.execute(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.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();
+            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();
+            this._fSnapConnection?.hide();
         }
     }
-    getClosetInput(difference) {
-        if (!this.fSnapConnection) {
-            return undefined;
-        }
-        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) {
@@ -3813,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 FindInputAtPositionRequest(event.getPosition(), this._getDragHandlerData().toConnectorRect, this._getDragHandlerData().canBeConnectedInputs));
     }
-    getInputUnderPointer(event) {
-        return this.fMediator.send(new GetInputUnderPointerRequest(event, this.dragHandler));
+    _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.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    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([
@@ -3844,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;
     }
 }
 
@@ -3878,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([
@@ -3889,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;
@@ -3930,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([
@@ -3941,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;
@@ -3959,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([
@@ -3980,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;
@@ -4028,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));
         }
     }
@@ -4042,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 });
@@ -4066,85 +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._getLineToPointer(fInputRect, 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(fInputRect, fSide) {
-        return this.fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this.fOutputWithRect.fRect, fInputRect, this.fConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, fSide));
+    _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._getLineToClosestInput(fClosestInput);
-            this.fSnapConnection.show();
-            this.fSnapConnection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, fClosestInput.fConnector.fConnectableSide);
-            this.fSnapConnection.redraw();
+            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();
         }
     }
     _getLineToClosestInput(fClosestInput) {
-        return this.fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this.fOutputWithRect.fRect, fClosestInput.fRect, this.fSnapConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
-    }
-    getClosetInput(difference) {
-        if (!this.fSnapConnection) {
-            return undefined;
-        }
-        return this._getClosestInputForSnapConnection(this._findClosestInput(difference));
+        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;
     }
 }
 
@@ -4191,16 +3872,20 @@ let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecut
         this._emitReassignConnectionEvent(event, fInput);
     }
     _getInputUnderPointer(event) {
-        return this._fMediator.send(new GetInputUnderPointerRequest(event, this._fDragHandler));
+        return this._fMediator.send(new FindInputAtPositionRequest(event.getPosition(), this._getDragHandlerData().toConnectorRect, this._getDragHandlerData().canBeConnectedInputs));
     }
     _isReassignToDifferentInput(fInput) {
-        return this._fDragHandler.fConnection.fInputId !== fInput.fId;
+        return this._fDragHandler.getConnection().fInputId !== fInput.fId;
     }
     _emitReassignConnectionEvent(event, fInput) {
         this._fDraggable.fReassignConnection.emit(this._getEventData(event, fInput));
     }
     _getEventData(event, fInput) {
-        return new FReassignConnectionEvent(this._fDragHandler.fConnection.fId, this._fDragHandler.fConnection.fOutputId, this._fDragHandler.fConnection.fInputId, fInput?.fId, event.getPosition());
+        const fConnection = this._fDragHandler.getConnection();
+        return new FReassignConnectionEvent(fConnection.fId, fConnection.fOutputId, fConnection.fInputId, fInput?.fId, event.getPosition());
+    }
+    _getDragHandlerData() {
+        return this._fDragHandler.getData();
     }
     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 });
@@ -4281,8 +3966,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }] });
 
 const CONNECTIONS_PROVIDERS = [
-    GetInputUnderPointerExecution,
-    GetInputUnderPointerValidator,
     CreateConnectionFinalizeExecution,
     CreateConnectionDragHandlerExecution,
     CreateConnectionFromOutletPreparationExecution,
@@ -4331,7 +4014,7 @@ let GetNormalizedParentNodeRectExecution = class GetNormalizedParentNodeRectExec
     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 ɵ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 });
 };
 GetNormalizedParentNodeRectExecution = __decorate([
@@ -4339,7 +4022,7 @@ GetNormalizedParentNodeRectExecution = __decorate([
 ], GetNormalizedParentNodeRectExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedParentNodeRectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }] });
 
 class IsArrayHasParentNodeRequest {
     fParentNodes;
@@ -4538,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);
@@ -4568,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;
@@ -4744,7 +4427,7 @@ let PutOutputConnectionHandlersToArrayExecution = class PutOutputConnectionHandl
     getNewSourceConnectionHandler(connection, nodeDragHandler) {
         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([
@@ -4752,7 +4435,7 @@ 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 CalculateNodeMoveRestrictionsRequest {
     fNode;
@@ -5370,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([
@@ -5378,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;
@@ -5767,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([
@@ -5775,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;
@@ -5804,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([
@@ -5812,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;
@@ -5938,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([
@@ -5946,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;
@@ -6090,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([
@@ -6098,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,
@@ -6213,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([
@@ -6221,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,
@@ -6690,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([
@@ -6698,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;
@@ -7075,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([
@@ -7083,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;
@@ -7153,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 {
 }
@@ -7306,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([
@@ -7341,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([
@@ -7376,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;
@@ -7544,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([
@@ -7552,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;
@@ -7572,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([
@@ -7580,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,
@@ -7632,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 });
@@ -7717,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());
         }
     }
@@ -8213,11 +8210,44 @@ 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 });
 };
@@ -8261,6 +8291,135 @@ const F_NODE_FEATURES = [
     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: ResetZoomExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ResetZoomExecution });
+};
+ResetZoomExecution = __decorate([
+    FExecutionRegister(ResetZoomRequest)
+], ResetZoomExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ResetZoomExecution, decorators: [{
+            type: Injectable
+        }] });
+
+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 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) {
+        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();
+    }
+    _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 });
+};
+SetZoomExecution = __decorate([
+    FExecutionRegister(SetZoomRequest)
+], SetZoomExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SetZoomExecution, decorators: [{
+            type: Injectable
+        }] });
+
+const F_ZOOM_FEATURES = [
+    AddZoomToStoreExecution,
+    RemoveZoomFromStoreExecution,
+    ResetZoomExecution,
+    SetZoomExecution
+];
+
 class GetNormalizedPointRequest {
     position;
     constructor(position) {
@@ -8332,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([
@@ -8340,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;
@@ -8391,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([
@@ -8399,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 {
 }
@@ -8419,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([
@@ -8427,17 +8586,39 @@ 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;
@@ -8465,6 +8646,7 @@ const COMMON_PROVIDERS = [
     ...F_NODE_FEATURES,
     GetElementRoundedRectExecution,
     ...F_SELECTION_FEATURES,
+    ...F_ZOOM_FEATURES,
     GetDeepChildrenNodesAndGroupsExecution,
     GetNormalizedElementRectExecution,
     GetNormalizedPointExecution,
@@ -8787,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() {
@@ -8801,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: {
@@ -8823,7 +9026,7 @@ 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,
@@ -9086,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: [{
@@ -9214,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
@@ -9281,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, CalculateCommonNodeMoveRestrictionsExecution, CalculateCommonNodeMoveRestrictionsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateNodeMoveRestrictionsExecution, CalculateNodeMoveRestrictionsRequest, 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, 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, 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, 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