@foblex/flow 17.5.9 → 17.6.1

package/fesm2022/foblex-flow.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, effect, Directive, input, computed, DestroyRef, EventEmitter, booleanAttribute, Input, Output, ElementRef, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, numberAttribute, ContentChildren, Injector, ViewContainerRef, TemplateRef, NgZone, contentChild, output, viewChild, Renderer2, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, effect, Directive, input, computed, signal, DestroyRef, EventEmitter, booleanAttribute, Input, Output, ElementRef, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, viewChild, contentChildren, numberAttribute, Injector, ViewContainerRef, TemplateRef, NgZone, ContentChildren, contentChild, output, Renderer2, NgModule } from '@angular/core';
 import { RectExtensions, RoundedRect, TransformModelExtensions, PointExtensions, SizeExtensions, Point, LineExtensions, GetIntersections, findClosestAlignment, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
-import * as i2$1 from '@foblex/mediator';
+import * as i1$1 from '@foblex/mediator';
 import { FExecutionRegister, FMediator } from '@foblex/mediator';
 import * as i1 from '@foblex/platform';
 import { BrowserService, PlatformService, EOperationSystem } from '@foblex/platform';
 import { normalizeDomElementId, castToEnum, isClosestElementHasClass, flatMap, getOrCreateRootNodeForViewRef, deepCloneNode, disableDragInteractions, extendStyles, getDataAttrValueFromClosestElementWithClass } from '@foblex/utils';
-import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
@@ -20,8 +19,12 @@ class GetElementRoundedRectRequest {
     }
 }
 
+/**
+ * Execution that retrieves the rectangle of an element with its border-radius.
+ * It calculates the rectangle based on the element's dimensions and its computed style.
+ */
 let GetElementRoundedRectExecution = class GetElementRoundedRectExecution {
-    _fBrowser = inject(BrowserService);
+    _browser = inject(BrowserService);
     handle(request) {
         return this._getRoundedRect(RectExtensions.fromElement(request.element), request.element, this._getComputedStyle(request.element));
     }
@@ -29,10 +32,10 @@ let GetElementRoundedRectExecution = class GetElementRoundedRectExecution {
         return new RoundedRect(rect.x, rect.y, rect.width, rect.height, this._toPixels(styles.borderTopLeftRadius, element, styles.fontSize), this._toPixels(styles.borderTopRightRadius, element, styles.fontSize), this._toPixels(styles.borderBottomRightRadius, element, styles.fontSize), this._toPixels(styles.borderBottomLeftRadius, element, styles.fontSize));
     }
     _getComputedStyle(element) {
-        return this._fBrowser.window.getComputedStyle(element);
+        return this._browser.window.getComputedStyle(element);
     }
     _toPixels(value, element, fontSize) {
-        return this._fBrowser.toPixels(value, element.clientWidth, element.clientHeight, fontSize) || 0;
+        return this._browser.toPixels(value, element.clientWidth, element.clientHeight, fontSize) || 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetElementRoundedRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetElementRoundedRectExecution });
@@ -300,10 +303,13 @@ const F_STORAGE_PROVIDERS = [
     FComponentsStore,
 ];
 
+/**
+ * Execution that adds a background to the FComponentsStore.
+ */
 let AddBackgroundToStoreExecution = class AddBackgroundToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fBackground = request.fBackground;
+        this._store.fBackground = request.fBackground;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddBackgroundToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddBackgroundToStoreExecution });
@@ -324,11 +330,14 @@ class AddPatternToBackgroundRequest {
 }
 
 let uniqueId$c = 0;
+/**
+ * Execution that adds a pattern to the background in the FComponentsStore.
+ */
 let AddPatternToBackgroundExecution = class AddPatternToBackgroundExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     _fBrowser = inject(BrowserService);
     get _fBackground() {
-        return this._fComponentsStore.fBackground;
+        return this._store.fBackground;
     }
     handle(request) {
         const children = request.fPattern?.hostElement.getElementsByTagName('pattern') || [];
@@ -344,7 +353,7 @@ let AddPatternToBackgroundExecution = class AddPatternToBackgroundExecution {
             rect.setAttribute('width', '100%');
             rect.setAttribute('height', '100%');
             this._fBackground.hostElement.firstChild?.appendChild(rect);
-            const transform = this._fComponentsStore.fCanvas?.transform || TransformModelExtensions.default();
+            const transform = this._store.fCanvas?.transform || TransformModelExtensions.default();
             request.fPattern?.setTransform(transform);
         }
     }
@@ -366,10 +375,13 @@ class RemoveBackgroundFromStoreRequest {
     }
 }
 
+/**
+ * Execution that removes the background from the FComponentsStore.
+ */
 let RemoveBackgroundFromStoreExecution = class RemoveBackgroundFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fBackground = undefined;
+        this._store.fBackground = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveBackgroundFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveBackgroundFromStoreExecution });
@@ -389,10 +401,13 @@ class SetBackgroundTransformRequest {
     }
 }
 
+/**
+ * Execution that sets the transform for the background when canvas is transformed.
+ */
 let SetBackgroundTransformExecution = class SetBackgroundTransformExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fBackground?.setTransform(request.fTransform);
+        this._store.fBackground?.setTransform(request.fTransform);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SetBackgroundTransformExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SetBackgroundTransformExecution });
@@ -404,6 +419,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * This file exports all the background-related features for the F-Flow domain.
+ * It includes executions for adding, removing, and setting the background in the FComponentsStore.
+ */
 const F_BACKGROUND_FEATURES = [
     AddBackgroundToStoreExecution,
     AddPatternToBackgroundExecution,
@@ -419,10 +438,13 @@ class AddCanvasToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds a canvas to the FComponentsStore.
+ */
 let AddCanvasToStoreExecution = class AddCanvasToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fCanvas = request.fCanvas;
+        this._store.fCanvas = request.fCanvas;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddCanvasToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddCanvasToStoreExecution });
@@ -444,11 +466,14 @@ class CenterGroupOrNodeRequest {
     }
 }
 
+/**
+ * Execution that centers a group or a node inside the flow.
+ */
 let CenterGroupOrNodeExecution = class CenterGroupOrNodeExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     _fMediator = inject(FMediator);
     get transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     handle(request) {
         const fNode = this.getNode(request.id);
@@ -463,13 +488,13 @@ let CenterGroupOrNodeExecution = class CenterGroupOrNodeExecution {
         this.transform.position = PointExtensions.initialize((fFlowRect.width - fNodeRect.width) / 2 - position.x * this.transform.scale, (fFlowRect.height - fNodeRect.height) / 2 - position.y * this.transform.scale);
     }
     getNode(id) {
-        return this._fComponentsStore.fNodes.find((x) => x.fId === id);
+        return this._store.fNodes.find((x) => x.fId() === id);
     }
     getNodeRect(fNode) {
         return RectExtensions.fromElement(fNode.hostElement);
     }
     getFlowRect() {
-        return RectExtensions.fromElement(this._fComponentsStore.fFlow.hostElement);
+        return RectExtensions.fromElement(this._store.fFlow.hostElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CenterGroupOrNodeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CenterGroupOrNodeExecution });
@@ -491,10 +516,13 @@ class FitToFlowRequest {
     }
 }
 
+/**
+ * Fits all nodes and groups to the flow by scaling and positioning them
+ */
 let FitToFlowExecution = class FitToFlowExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     get transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     _fMediator = inject(FMediator);
     handle(request) {
@@ -502,7 +530,7 @@ let FitToFlowExecution = class FitToFlowExecution {
         if (fNodesRect.width === 0 || fNodesRect.height === 0) {
             return;
         }
-        this.fitToParent(fNodesRect, RectExtensions.fromElement(this._fComponentsStore.fFlow.hostElement), this._fComponentsStore.fNodes.map((x) => x.position), request.toCenter);
+        this.fitToParent(fNodesRect, RectExtensions.fromElement(this._store.fFlow.hostElement), this._store.fNodes.map((x) => x.position), request.toCenter);
         this._fMediator.execute(new RedrawCanvasWithAnimationRequest(request.animated));
     }
     fitToParent(rect, parentRect, points, toCenter) {
@@ -537,10 +565,13 @@ class GetCanvasRequest {
     static fToken = Symbol('GetCanvasRequest');
 }
 
+/**
+ * Execution that retrieves the canvas from the FComponentsStore.
+ */
 let GetCanvasExecution = class GetCanvasExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        const result = this._fComponentsStore.fCanvas;
+        const result = this._store.fCanvas;
         if (!result) {
             throw new Error(`Canvas not found in store`);
         }
@@ -566,8 +597,11 @@ class InputCanvasPositionRequest {
     }
 }
 
+/**
+ * It updates the canvas position and redraws the canvas when the user set a new position using the input.
+ */
 let InputCanvasPositionExecution = class InputCanvasPositionExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         if (!request.position) {
             return;
@@ -576,7 +610,7 @@ let InputCanvasPositionExecution = class InputCanvasPositionExecution {
         if (!PointExtensions.isEqual(position, request.position)) {
             request.transform.position = request.position;
             request.transform.scaledPosition = PointExtensions.initialize();
-            this._fComponentsStore.fCanvas?.redraw();
+            this._store.fCanvas?.redraw();
         }
         return void 0;
     }
@@ -600,14 +634,18 @@ class InputCanvasScaleRequest {
     }
 }
 
+/**
+ * Execution that handles the scaling of the input canvas.
+ * It updates the scale of the canvas transform and redraws the canvas when the user sets a new scale using the input.
+ */
 let InputCanvasScaleExecution = class InputCanvasScaleExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         if (!request.scale && request.scale !== 0) {
             return;
         }
         request.transform.scale = request.scale;
-        this._fComponentsStore.fCanvas?.redraw();
+        this._store.fCanvas?.redraw();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCanvasScaleExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCanvasScaleExecution });
@@ -637,22 +675,27 @@ function transitionEnd(element, callback) {
     element.addEventListener('transitionend', onTransitionEnd);
 }
 
+/**
+ * Execution that redraws the canvas with or without animation based on the request.
+ * If animated, it will redraw with animation and wait for the transition end to notify data change.
+ * If not animated, it will redraw immediately and notify data change.
+ */
 let RedrawCanvasWithAnimationExecution = class RedrawCanvasWithAnimationExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     get _fCanvasElement() {
-        return this._fComponentsStore.fCanvas.hostElement;
+        return this._store.fCanvas.hostElement;
     }
     handle(request) {
         request.animated ? this._redrawWithAnimation() : this._redraw();
-        this._fComponentsStore.fCanvas.emitCanvasChangeEvent();
+        this._store.fCanvas.emitCanvasChangeEvent();
     }
     _redrawWithAnimation() {
-        this._fComponentsStore.fCanvas.redrawWithAnimation();
-        transitionEnd(this._fCanvasElement, () => this._fComponentsStore.dataChanged());
+        this._store.fCanvas.redrawWithAnimation();
+        transitionEnd(this._fCanvasElement, () => this._store.dataChanged());
     }
     _redraw() {
-        this._fComponentsStore.fCanvas.redraw();
-        this._fComponentsStore.dataChanged();
+        this._store.fCanvas.redraw();
+        this._store.dataChanged();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RedrawCanvasWithAnimationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RedrawCanvasWithAnimationExecution });
@@ -668,10 +711,13 @@ class RemoveCanvasFromStoreRequest {
     static fToken = Symbol('RemoveCanvasFromStoreRequest');
 }
 
+/**
+ * Execution that removes the canvas from the FComponentsStore.
+ */
 let RemoveCanvasFromStoreExecution = class RemoveCanvasFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fCanvas = undefined;
+        this._store.fCanvas = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveCanvasFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveCanvasFromStoreExecution });
@@ -687,10 +733,13 @@ class ResetScaleRequest {
     static fToken = Symbol('ResetScaleRequest');
 }
 
+/**
+ * Execution that resets the scale of the canvas in the FComponentsStore.
+ */
 let ResetScaleExecution = class ResetScaleExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     get transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     handle(request) {
         this.transform.scale = 1;
@@ -714,18 +763,21 @@ class ResetScaleAndCenterRequest {
     }
 }
 
+/**
+ * Execution that resets the scale of the canvas and centers the nodes and groups inside the flow.
+ */
 let ResetScaleAndCenterExecution = class ResetScaleAndCenterExecution {
     _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     get _transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     handle(request) {
         const fNodesRect = this._fMediator.execute(new CalculateNodesBoundingBoxRequest()) || RectExtensions.initialize();
         if (fNodesRect.width === 0 || fNodesRect.height === 0) {
             return;
         }
-        this._oneToOneCentering(fNodesRect, RectExtensions.fromElement(this._fComponentsStore.fFlow.hostElement), this._fComponentsStore.fNodes.map((x) => x.position));
+        this._oneToOneCentering(fNodesRect, RectExtensions.fromElement(this._store.fFlow.hostElement), this._store.fNodes.map((x) => x.position));
         this._fMediator.execute(new RedrawCanvasWithAnimationRequest(request.animated));
     }
     _oneToOneCentering(rect, parentRect, points) {
@@ -761,10 +813,14 @@ class UpdateScaleRequest {
     }
 }
 
+/**
+ * Execution that updates the scale of the canvas in the FComponentsStore.
+ * Occurs when the fZoom directive or User call the setScale method.
+ */
 let UpdateScaleExecution = class UpdateScaleExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     get transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     handle(request) {
         if (request.scale !== this.transform.scale) {
@@ -785,6 +841,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * This file exports all the canvas-related executions that can be used in the FCanvas feature.
+ */
 const F_CANVAS_FEATURES = [
     AddCanvasToStoreExecution,
     CenterGroupOrNodeExecution,
@@ -807,10 +866,13 @@ class AddConnectionForCreateToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds a connection for creation to the FComponentsStore.
+ */
 let AddConnectionForCreateToStoreExecution = class AddConnectionForCreateToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fTempConnection = request.fConnection;
+        this._store.fTempConnection = request.fConnection;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddConnectionForCreateToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddConnectionForCreateToStoreExecution });
@@ -830,10 +892,13 @@ class AddConnectionMarkerToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds a connection marker to the FComponentsStore.
+ */
 let AddConnectionMarkerToStoreExecution = class AddConnectionMarkerToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.addComponent(this._fComponentsStore.fMarkers, request.fComponent);
+        this._store.addComponent(this._store.fMarkers, request.fComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddConnectionMarkerToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddConnectionMarkerToStoreExecution });
@@ -853,11 +918,14 @@ class AddConnectionToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds a connection to the FComponentsStore.
+ */
 let AddConnectionToStoreExecution = class AddConnectionToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fConnections.push(request.fConnection);
-        this._fComponentsStore.dataChanged();
+        this._store.fConnections.push(request.fConnection);
+        this._store.dataChanged();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddConnectionToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddConnectionToStoreExecution });
@@ -877,10 +945,13 @@ class AddSnapConnectionToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds a snap connection to the FComponentsStore.
+ */
 let AddSnapConnectionToStoreExecution = class AddSnapConnectionToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fSnapConnection = request.fConnection;
+        this._store.fSnapConnection = request.fConnection;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddSnapConnectionToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddSnapConnectionToStoreExecution });
@@ -900,18 +971,17 @@ class CreateConnectionMarkersRequest {
     }
 }
 
+/**
+ * Execution that creates connection markers for a given connection.
+ */
 let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
-    fBrowser;
-    fComponentsStore;
-    constructor(fBrowser, fComponentsStore) {
-        this.fBrowser = fBrowser;
-        this.fComponentsStore = fComponentsStore;
-    }
+    _browser = inject(BrowserService);
+    _store = inject(FComponentsStore);
     handle(request) {
-        const element = createSVGElement$1('defs', this.fBrowser);
+        const element = createSVGElement$1('defs', this._browser);
         const fConnection = request.fConnection;
         this.getMarkers(fConnection).forEach((marker) => {
-            const markerElement = this.createMarkerElement(marker, fConnection.fId);
+            const markerElement = this.createMarkerElement(marker, fConnection.fId());
             const clone = marker.hostElement.cloneNode(true);
             clone.setAttribute('height', `${marker.height}`);
             clone.setAttribute('width', `${marker.width}`);
@@ -920,18 +990,21 @@ let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
             markerElement.append(clone);
             element.append(markerElement);
         });
-        fConnection.fDefs.nativeElement.innerHTML = element.innerHTML;
+        const defs = fConnection.fDefs();
+        if (defs) {
+            defs.nativeElement.innerHTML = element.innerHTML;
+        }
         this.makeSafariCompatible(fConnection);
     }
     getMarkers(fConnection) {
-        return this.fComponentsStore.fMarkers.filter((x) => fConnection.hostElement.contains(x.hostElement));
+        return this._store.fMarkers.filter((x) => fConnection.hostElement.contains(x.hostElement));
     }
     // Safari does not support markers on path elements if markers are defined after the path element
     makeSafariCompatible(fConnection) {
-        fConnection.fPath.hostElement.replaceWith(fConnection.fPath.hostElement);
+        fConnection.fPath().hostElement.replaceWith(fConnection.fPath().hostElement);
     }
     createMarkerElement(marker, fConnectionId) {
-        const markerElement = createSVGElement$1('marker', this.fBrowser);
+        const markerElement = createSVGElement$1('marker', this._browser);
         markerElement.setAttribute('id', normalizeDomElementId(marker.type + '-' + fConnectionId));
         markerElement.setAttribute('markerHeight', `${marker.height}`);
         markerElement.setAttribute('markerWidth', `${marker.width}`);
@@ -941,7 +1014,7 @@ let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
         markerElement.setAttribute('markerUnits', `${marker.markerUnits}`);
         return markerElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreateConnectionMarkersExecution, deps: [{ token: i1.BrowserService }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreateConnectionMarkersExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreateConnectionMarkersExecution });
 };
 CreateConnectionMarkersExecution = __decorate([
@@ -949,7 +1022,7 @@ CreateConnectionMarkersExecution = __decorate([
 ], CreateConnectionMarkersExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreateConnectionMarkersExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.BrowserService }, { type: FComponentsStore }] });
+        }] });
 function createSVGElement$1(tag, fBrowser) {
     return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
 }
@@ -1147,7 +1220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 const F_SELECTED_CLASS = 'f-selected';
 function mixinChangeSelection(base) {
     return class extends base {
-        fId = '';
+        fId = signal('');
         fSelectionDisabled = false;
         unmarkAsSelected() {
             this.unmarkChildrenAsSelected?.();
@@ -1244,7 +1317,7 @@ class FGroupDirective extends FNodeBase {
     fBrowser;
     _destroyRef = inject(DestroyRef);
     _fMediator = inject(FMediator);
-    fId = `f-group-${uniqueId$b++}`;
+    fId = input(`f-group-${uniqueId$b++}`, { alias: 'fGroupId' });
     fParentId = null;
     set position(value) {
         if (!PointExtensions.isEqual(this._position, value)) {
@@ -1322,7 +1395,7 @@ class FGroupDirective extends FNodeBase {
         this._fMediator.execute(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FGroupDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: ["fGroupId", "fId"], fParentId: ["fGroupParentId", "fParentId"], position: ["fGroupPosition", "position"], rotate: ["fGroupRotate", "rotate"], size: ["fGroupSize", "size"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute], fMinimapClass: "fMinimapClass" }, outputs: { positionChange: "fGroupPositionChange", rotateChange: "fGroupRotateChange", 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: "17.1.0", version: "18.2.13", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: { classPropertyName: "fId", publicName: "fGroupId", isSignal: true, isRequired: false, transformFunction: null }, fParentId: { classPropertyName: "fParentId", publicName: "fGroupParentId", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fGroupPosition", isSignal: false, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "fGroupRotate", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "fGroupSize", isSignal: false, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fGroupDraggingDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fGroupSelectionDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fIncludePadding: { classPropertyName: "fIncludePadding", publicName: "fIncludePadding", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fConnectOnNode: { classPropertyName: "fConnectOnNode", publicName: "fConnectOnNode", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fMinimapClass: { classPropertyName: "fMinimapClass", publicName: "fMinimapClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { positionChange: "fGroupPositionChange", rotateChange: "fGroupRotateChange", 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 });
 }
@@ -1332,7 +1405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: "[fGroup]",
                     exportAs: "fComponent",
                     host: {
-                        '[attr.data-f-group-id]': 'fId',
+                        '[attr.data-f-group-id]': 'fId()',
                         class: "f-group f-component",
                         '[class.f-group-dragging-disabled]': 'fDraggingDisabled',
                         '[class.f-group-selection-disabled]': 'fSelectionDisabled',
@@ -1341,10 +1414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         { provide: F_NODE, useExisting: FGroupDirective }
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BrowserService }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fGroupId']
-            }], fParentId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BrowserService }], propDecorators: { fParentId: [{
                 type: Input,
                 args: ['fGroupParentId']
             }], position: [{
@@ -1387,7 +1457,7 @@ class FNodeDirective extends FNodeBase {
     fBrowser;
     _destroyRef = inject(DestroyRef);
     _fMediator = inject(FMediator);
-    fId = `f-node-${uniqueId$a++}`;
+    fId = input(`f-node-${uniqueId$a++}`, { alias: 'fNodeId' });
     fParentId = null;
     set position(value) {
         if (!PointExtensions.isEqual(this._position, value)) {
@@ -1466,7 +1536,7 @@ class FNodeDirective extends FNodeBase {
         this._fMediator.execute(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], fParentId: ["fNodeParentId", "fParentId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], rotate: ["fNodeRotate", "rotate"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute], fMinimapClass: "fMinimapClass" }, outputs: { positionChange: "fNodePositionChange", rotateChange: "fNodeRotateChange", 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: "17.1.0", version: "18.2.13", type: FNodeDirective, selector: "[fNode]", inputs: { fId: { classPropertyName: "fId", publicName: "fNodeId", isSignal: true, isRequired: false, transformFunction: null }, fParentId: { classPropertyName: "fParentId", publicName: "fNodeParentId", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fNodePosition", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "fNodeSize", isSignal: false, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "fNodeRotate", isSignal: false, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fNodeDraggingDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fNodeSelectionDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fIncludePadding: { classPropertyName: "fIncludePadding", publicName: "fIncludePadding", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fConnectOnNode: { classPropertyName: "fConnectOnNode", publicName: "fConnectOnNode", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fMinimapClass: { classPropertyName: "fMinimapClass", publicName: "fMinimapClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { positionChange: "fNodePositionChange", rotateChange: "fNodeRotateChange", 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 });
 }
@@ -1476,7 +1546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: "[fNode]",
                     exportAs: "fComponent",
                     host: {
-                        '[attr.data-f-node-id]': 'fId',
+                        '[attr.data-f-node-id]': 'fId()',
                         class: "f-node f-component",
                         '[class.f-node-dragging-disabled]': 'fDraggingDisabled',
                         '[class.f-node-selection-disabled]': 'fSelectionDisabled',
@@ -1485,10 +1555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         { provide: F_NODE, useExisting: FNodeDirective }
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BrowserService }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fNodeId']
-            }], fParentId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BrowserService }], propDecorators: { fParentId: [{
                 type: Input,
                 args: ['fNodeParentId']
             }], position: [{
@@ -1547,7 +1614,7 @@ class FNodeInputDirective extends FNodeInputBase {
     disabled = false;
     userFConnectableSide = EFConnectableSide.AUTO;
     get fNodeId() {
-        return this._fNode.fId;
+        return this._fNode.fId();
     }
     get hostElement() {
         return this._elementReference.nativeElement;
@@ -1641,7 +1708,7 @@ class FNodeOutletDirective extends FNodeOutletBase {
     isConnectionFromOutlet = false;
     canBeConnectedInputs = [];
     get fNodeId() {
-        return this._fNode.fId;
+        return this._fNode.fId();
     }
     get hostElement() {
         return this._elementReference.nativeElement;
@@ -1708,7 +1775,7 @@ class FNodeOutputDirective extends FNodeOutputBase {
     isSelfConnectable = true;
     canBeConnectedInputs = [];
     get fNodeId() {
-        return this._fNode.fId;
+        return this._fNode.fId();
     }
     get hostElement() {
         return this._elementReference.nativeElement;
@@ -1812,7 +1879,12 @@ class FBezierPathBuilder {
         const targetAnglePoint = FBezierPathBuilder.getAnglePoint(targetSide, target, source, offset);
         const path = `M ${source.x} ${source.y} C ${sourceAnglePoint.x} ${sourceAnglePoint.y}, ${targetAnglePoint.x} ${targetAnglePoint.y}, ${target.x + 0.0002} ${target.y + 0.0002}`;
         const connectionCenter = new CalculateConnectionCenterHandler().handle(new CalculateConnectionCenterRequest([source, sourceAnglePoint, targetAnglePoint, target]));
-        return { path, connectionCenter, penultimatePoint: targetAnglePoint };
+        return {
+            path,
+            connectionCenter,
+            penultimatePoint: targetAnglePoint,
+            secondPoint: sourceAnglePoint,
+        };
     }
 }
 
@@ -1829,7 +1901,8 @@ class FSegmentPathBuilder {
         const { points, center } = this.getPathPoints(source, sourceSide, target, targetSide, request.offset);
         const path = this.buildPath(points, request.radius);
         const penultimatePoint = points.length > 1 ? points[points.length - 2] : source;
-        return { path, connectionCenter: center, penultimatePoint };
+        const secondPoint = points.length > 1 ? points[1] : target;
+        return { path, connectionCenter: center, penultimatePoint, secondPoint };
     }
     getPathPoints(source, sourceSide, target, targetSide, offset) {
         const sourceDirection = CONNECTOR_SIDE_POINT[sourceSide];
@@ -1959,7 +2032,7 @@ class FStraightPathBuilder {
         const { source, target } = request;
         const path = `M ${source.x} ${source.y} L ${target.x + 0.0002} ${target.y + 0.0002}`;
         const connectionCenter = new CalculateConnectionCenterHandler().handle(new CalculateConnectionCenterRequest([source, target]));
-        return { path, connectionCenter, penultimatePoint: source };
+        return { path, connectionCenter, penultimatePoint: source, secondPoint: target };
     }
 }
 
@@ -1991,7 +2064,7 @@ class FConnectionTextPathDirective {
     base;
     fBrowser;
     get linkToConnection() {
-        return F_CONNECTION_IDENTIFIERS.linkToConnection(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.linkToConnection(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2062,7 +2135,7 @@ class FConnectionTextComponent {
     elementReference;
     base;
     get textId() {
-        return F_CONNECTION_IDENTIFIERS.textId(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.textId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2130,7 +2203,7 @@ const F_CSS_CLASS = {
         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',
+        CONNECTABLE: 'f-connector-connectable',
     },
     CONNECTION: {
         DRAG_HANDLE: 'f-connection-drag-handle',
@@ -2211,7 +2284,7 @@ class FConnectionGradientComponent {
     elementReference;
     base;
     get gradientId() {
-        return F_CONNECTION_IDENTIFIERS.gradientId(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.gradientId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2231,8 +2304,8 @@ class FConnectionGradientComponent {
         this.stop2Element.setAttribute('offset', '100%');
     }
     updateGradient() {
-        this.setFromColor(this.base.fStartColor);
-        this.setToColor(this.base.fEndColor);
+        this.setFromColor(this.base.fStartColor());
+        this.setToColor(this.base.fEndColor());
     }
     setFromColor(color) {
         this.stop1Element.setAttribute('stop-color', color || 'transparent');
@@ -2285,13 +2358,13 @@ class FConnectionPathComponent {
     elementReference;
     base;
     get fPathId() {
-        return this.base.fId;
+        return this.base.fId();
     }
     get linkToGradient() {
-        return F_CONNECTION_IDENTIFIERS.linkToGradient(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.linkToGradient(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get attrConnectionId() {
-        return F_CONNECTION_IDENTIFIERS.connectionId(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.connectionId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2307,12 +2380,12 @@ class FConnectionPathComponent {
         this.hostElement.setAttribute("d", `${path}`);
     }
     select() {
-        this.hostElement.setAttribute('marker-start', `url(#${getMarkerSelectedStartId(this.base.fId)})`);
-        this.hostElement.setAttribute('marker-end', `url(#${getMarkerSelectedEndId(this.base.fId)})`);
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerSelectedStartId(this.base.fId())})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerSelectedEndId(this.base.fId())})`);
     }
     deselect() {
-        this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this.base.fId)})`);
-        this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fId)})`);
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this.base.fId())})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fId())})`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.data-f-path-id": "fPathId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], ngImport: i0, template: '', isInline: true, styles: [":host{fill:none;pointer-events:stroke}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -2334,7 +2407,7 @@ class FConnectionSelectionComponent {
     elementReference;
     base;
     get connectionForSelectionId() {
-        return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2402,14 +2475,16 @@ class FConnectionBase extends MIXIN_BASE {
     cFactory;
     path = '';
     line = LineExtensions.initialize();
+    fReassignableStart = signal(false);
     penultimatePoint = PointExtensions.initialize();
+    secondPoint = PointExtensions.initialize();
     constructor(elementReference, cFactory) {
         super(elementReference.nativeElement);
         this.cFactory = cFactory;
     }
     initialize() {
-        this.fPath.initialize();
-        this.fGradient.initialize();
+        this.fPath().initialize();
+        this.fGradient().initialize();
         this.redraw();
     }
     isContains(element) {
@@ -2420,7 +2495,8 @@ class FConnectionBase extends MIXIN_BASE {
         const pathResult = this.getPathResult(point1, sourceSide, point2, targetSide);
         this.path = pathResult.path;
         this.penultimatePoint = pathResult.penultimatePoint || point1;
-        this.fConnectionCenter?.nativeElement?.setAttribute('style', this.getTransform(pathResult.connectionCenter));
+        this.secondPoint = pathResult.secondPoint || point2;
+        this.fConnectionCenter()?.nativeElement?.setAttribute('style', this.getTransform(pathResult.connectionCenter));
     }
     getPathResult(source, sourceSide, target, targetSide) {
         const radius = this.fRadius > 0 ? this.fRadius : 0;
@@ -2434,17 +2510,18 @@ class FConnectionBase extends MIXIN_BASE {
         return `position: absolute; pointerEvents: all; transform: translate(-50%, -50%); left: ${position.x}px; top: ${position.y}px`;
     }
     markChildrenAsSelected() {
-        this.fPath.select();
+        this.fPath().select();
     }
     unmarkChildrenAsSelected() {
-        this.fPath.deselect();
+        this.fPath().deselect();
     }
     redraw() {
-        this.fPath.setPath(this.path);
-        this.fSelection.setPath(this.path);
-        this.fGradient.redraw(this.line);
-        this.fDragHandle.redraw(this.penultimatePoint, this.line.point2);
-        this.fTextComponent.redraw(this.line);
+        this.fPath().setPath(this.path);
+        this.fSelection().setPath(this.path);
+        this.fGradient().redraw(this.line);
+        this.fDragHandleEnd().redraw(this.penultimatePoint, this.line.point2);
+        this.fDragHandleStart()?.redraw(this.secondPoint, this.line.point1);
+        this.fTextComponent().redraw(this.line);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionBase, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FConnectionBase, usesInheritance: true, ngImport: i0 });
@@ -2480,11 +2557,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 let uniqueId$6 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
-    fId = `f-connection-for-create-${uniqueId$6++}`;
+    fId = signal(`f-connection-for-create-${uniqueId$6++}`);
     fText = '';
     fTextStartOffset = '';
-    fStartColor = 'black';
-    fEndColor = 'black';
+    fStartColor = input('black');
+    fEndColor = input('black');
     fOutputId;
     fInputId;
     fRadius = 8;
@@ -2493,16 +2570,17 @@ class FConnectionForCreateComponent extends FConnectionBase {
     fType = EFConnectionType.STRAIGHT;
     fDraggingDisabled = false;
     fSelectionDisabled = false;
-    fDefs;
-    fPath;
-    fGradient;
-    fDragHandle;
-    fSelection;
-    fTextComponent;
-    fConnectionCenter;
-    fConnectionCenters;
+    fDefs = viewChild.required('defs');
+    fPath = viewChild.required(CONNECTION_PATH);
+    fGradient = viewChild.required(CONNECTION_GRADIENT);
+    fDragHandleStart = viewChild(FConnectionDragHandleStartComponent);
+    fDragHandleEnd = viewChild.required(FConnectionDragHandleEndComponent);
+    fSelection = viewChild.required(FConnectionSelectionComponent);
+    fTextComponent = viewChild.required(CONNECTION_TEXT);
+    fConnectionCenter = viewChild('fConnectionCenter');
+    fConnectionCenters = contentChildren(FConnectionCenterDirective, { descendants: true });
     get boundingElement() {
-        return this.fPath.hostElement;
+        return this.fPath().hostElement;
     }
     _fMediator = inject(FMediator);
     constructor(elementReference, fConnectionFactory) {
@@ -2521,18 +2599,14 @@ class FConnectionForCreateComponent extends FConnectionBase {
         this._fMediator.execute(new RemoveConnectionForCreateFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.13", 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: FConnectionDragHandleEndComponent, 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-end></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: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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: "17.0.0", version: "18.2.13", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: { classPropertyName: "fStartColor", publicName: "fStartColor", isSignal: true, isRequired: false, transformFunction: null }, fEndColor: { classPropertyName: "fEndColor", publicName: "fEndColor", isSignal: true, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null } }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, isSignal: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, isSignal: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, isSignal: true }, { propertyName: "fDragHandleStart", first: true, predicate: FConnectionDragHandleStartComponent, descendants: true, isSignal: true }, { propertyName: "fDragHandleEnd", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, isSignal: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, isSignal: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, isSignal: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, isSignal: 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-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\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: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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.13", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection-for-create", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection f-connection-for-create"
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], 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-end></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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fStartColor: [{
-                type: Input
-            }], fEndColor: [{
-                type: Input
-            }], fRadius: [{
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], 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-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fRadius: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], fOffset: [{
@@ -2543,57 +2617,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
             }], fType: [{
                 type: Input
-            }], fDefs: [{
-                type: ViewChild,
-                args: ['defs', { static: true }]
-            }], fPath: [{
-                type: ViewChild,
-                args: [CONNECTION_PATH, { static: true }]
-            }], fGradient: [{
-                type: ViewChild,
-                args: [CONNECTION_GRADIENT, { static: true }]
-            }], fDragHandle: [{
-                type: ViewChild,
-                args: [FConnectionDragHandleEndComponent, { static: true }]
-            }], fSelection: [{
-                type: ViewChild,
-                args: [FConnectionSelectionComponent, { static: true }]
-            }], fTextComponent: [{
-                type: ViewChild,
-                args: [CONNECTION_TEXT, { static: true }]
-            }], fConnectionCenter: [{
-                type: ViewChild,
-                args: ['fConnectionCenter', { static: false }]
-            }], fConnectionCenters: [{
-                type: ContentChildren,
-                args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
 let uniqueId$5 = 0;
 class FConnectionComponent extends FConnectionBase {
-    fId = `f-connection-${uniqueId$5++}`;
+    fId = input(`f-connection-${uniqueId$5++}`, { alias: 'fConnectionId' });
     fText = '';
     fTextStartOffset = '';
-    fStartColor = 'black';
-    fEndColor = 'black';
+    fStartColor = input('black');
+    fEndColor = input('black');
     fOutputId = '';
     fInputId = '';
     fRadius = 8;
     fOffset = 12;
     fBehavior = EFConnectionBehavior.FIXED;
     fType = EFConnectionType.STRAIGHT;
+    fReassignableStart = input(false);
     fDraggingDisabled = false;
     fSelectionDisabled = false;
-    fDefs;
-    fPath;
-    fGradient;
-    fDragHandle;
-    fSelection;
-    fTextComponent;
-    fConnectionCenter;
-    fConnectionCenters;
+    fDefs = viewChild.required('defs');
+    fPath = viewChild.required(CONNECTION_PATH);
+    fGradient = viewChild.required(CONNECTION_GRADIENT);
+    fDragHandleStart = viewChild(FConnectionDragHandleStartComponent);
+    fDragHandleEnd = viewChild.required(FConnectionDragHandleEndComponent);
+    fSelection = viewChild.required(FConnectionSelectionComponent);
+    fTextComponent = viewChild.required(CONNECTION_TEXT);
+    fConnectionCenter = viewChild('fConnectionCenter');
+    fConnectionCenters = contentChildren(FConnectionCenterDirective, { descendants: true });
     get boundingElement() {
-        return this.fPath.hostElement;
+        return this.fPath().hostElement;
     }
     _fMediator = inject(FMediator);
     constructor(elementReference, fConnectionFactory) {
@@ -2609,27 +2661,20 @@ class FConnectionComponent extends FConnectionBase {
         this._fMediator.execute(new RemoveConnectionFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.13", 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: FConnectionDragHandleEndComponent, 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-end></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: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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: "17.0.0", version: "18.2.13", type: FConnectionComponent, selector: "f-connection", inputs: { fId: { classPropertyName: "fId", publicName: "fConnectionId", isSignal: true, isRequired: false, transformFunction: null }, fText: { classPropertyName: "fText", publicName: "fText", isSignal: false, isRequired: false, transformFunction: null }, fTextStartOffset: { classPropertyName: "fTextStartOffset", publicName: "fTextStartOffset", isSignal: false, isRequired: false, transformFunction: null }, fStartColor: { classPropertyName: "fStartColor", publicName: "fStartColor", isSignal: true, isRequired: false, transformFunction: null }, fEndColor: { classPropertyName: "fEndColor", publicName: "fEndColor", isSignal: true, isRequired: false, transformFunction: null }, fOutputId: { classPropertyName: "fOutputId", publicName: "fOutputId", isSignal: false, isRequired: false, transformFunction: null }, fInputId: { classPropertyName: "fInputId", publicName: "fInputId", isSignal: false, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fReassignableStart: { classPropertyName: "fReassignableStart", publicName: "fReassignableStart", isSignal: true, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fReassignDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fSelectionDisabled", isSignal: false, isRequired: false, transformFunction: 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, isSignal: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, isSignal: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, isSignal: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, isSignal: true }, { propertyName: "fDragHandleStart", first: true, predicate: FConnectionDragHandleStartComponent, descendants: true, isSignal: true }, { propertyName: "fDragHandleEnd", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, isSignal: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, isSignal: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, isSignal: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, isSignal: 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      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\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: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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.13", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection", exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'fId',
+                        '[attr.id]': 'fId()',
                         class: "f-component f-connection",
                         '[class.f-connection-selection-disabled]': 'fSelectionDisabled',
                         '[class.f-connection-reassign-disabled]': 'fDraggingDisabled',
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <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-end></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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fConnectionId']
-            }], fText: [{
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <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      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fText: [{
                 type: Input
             }], fTextStartOffset: [{
                 type: Input
-            }], fStartColor: [{
-                type: Input
-            }], fEndColor: [{
-                type: Input
             }], fOutputId: [{
                 type: Input
             }], fInputId: [{
@@ -2651,30 +2696,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], fSelectionDisabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], fDefs: [{
-                type: ViewChild,
-                args: ['defs', { static: true }]
-            }], fPath: [{
-                type: ViewChild,
-                args: [CONNECTION_PATH, { static: true }]
-            }], fGradient: [{
-                type: ViewChild,
-                args: [CONNECTION_GRADIENT, { static: true }]
-            }], fDragHandle: [{
-                type: ViewChild,
-                args: [FConnectionDragHandleEndComponent, { static: true }]
-            }], fSelection: [{
-                type: ViewChild,
-                args: [FConnectionSelectionComponent, { static: true }]
-            }], fTextComponent: [{
-                type: ViewChild,
-                args: [CONNECTION_TEXT, { static: true }]
-            }], fConnectionCenter: [{
-                type: ViewChild,
-                args: ['fConnectionCenter', { static: false }]
-            }], fConnectionCenters: [{
-                type: ContentChildren,
-                args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
 var EFMarkerType;
@@ -2750,11 +2771,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 let uniqueId$4 = 0;
 class FSnapConnectionComponent extends FConnectionBase {
-    fId = `f-snap-connection-${uniqueId$4++}`;
+    fId = signal(`f-snap-connection-${uniqueId$4++}`);
     fText = '';
     fTextStartOffset = '';
-    fStartColor = 'black';
-    fEndColor = 'black';
+    fStartColor = input('black');
+    fEndColor = input('black');
     fSnapThreshold = 20;
     fOutputId;
     fInputId;
@@ -2764,16 +2785,17 @@ class FSnapConnectionComponent extends FConnectionBase {
     fType = EFConnectionType.STRAIGHT;
     fDraggingDisabled = false;
     fSelectionDisabled = false;
-    fDefs;
-    fPath;
-    fGradient;
-    fDragHandle;
-    fSelection;
-    fTextComponent;
-    fConnectionCenter;
-    fConnectionCenters;
+    fDefs = viewChild.required('defs');
+    fPath = viewChild.required(CONNECTION_PATH);
+    fGradient = viewChild.required(CONNECTION_GRADIENT);
+    fDragHandleStart = viewChild(FConnectionDragHandleStartComponent);
+    fDragHandleEnd = viewChild.required(FConnectionDragHandleEndComponent);
+    fSelection = viewChild.required(FConnectionSelectionComponent);
+    fTextComponent = viewChild.required(CONNECTION_TEXT);
+    fConnectionCenter = viewChild('fConnectionCenter');
+    fConnectionCenters = contentChildren(FConnectionCenterDirective, { descendants: true });
     get boundingElement() {
-        return this.fPath.hostElement;
+        return this.fPath().hostElement;
     }
     _fMediator = inject(FMediator);
     constructor(elementReference, fConnectionFactory) {
@@ -2792,18 +2814,14 @@ class FSnapConnectionComponent extends FConnectionBase {
         this._fMediator.execute(new RemoveSnapConnectionFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.13", 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: FConnectionDragHandleEndComponent, 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-end></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: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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: "17.0.0", version: "18.2.13", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fStartColor: { classPropertyName: "fStartColor", publicName: "fStartColor", isSignal: true, isRequired: false, transformFunction: null }, fEndColor: { classPropertyName: "fEndColor", publicName: "fEndColor", isSignal: true, isRequired: false, transformFunction: null }, fSnapThreshold: { classPropertyName: "fSnapThreshold", publicName: "fSnapThreshold", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null } }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, isSignal: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, isSignal: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, isSignal: true }, { propertyName: "fDragHandleStart", first: true, predicate: FConnectionDragHandleStartComponent, descendants: true, isSignal: true }, { propertyName: "fDragHandleEnd", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, isSignal: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, isSignal: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, isSignal: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, isSignal: 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-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\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: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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.13", ngImport: i0, type: FSnapConnectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-snap-connection", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection f-snap-connection"
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], 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-end></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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fStartColor: [{
-                type: Input
-            }], fEndColor: [{
-                type: Input
-            }], fSnapThreshold: [{
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], 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-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fSnapThreshold: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], fRadius: [{
@@ -2817,30 +2835,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
             }], fType: [{
                 type: Input
-            }], fDefs: [{
-                type: ViewChild,
-                args: ['defs', { static: true }]
-            }], fPath: [{
-                type: ViewChild,
-                args: [CONNECTION_PATH, { static: true }]
-            }], fGradient: [{
-                type: ViewChild,
-                args: [CONNECTION_GRADIENT, { static: true }]
-            }], fDragHandle: [{
-                type: ViewChild,
-                args: [FConnectionDragHandleEndComponent, { static: true }]
-            }], fSelection: [{
-                type: ViewChild,
-                args: [FConnectionSelectionComponent, { static: true }]
-            }], fTextComponent: [{
-                type: ViewChild,
-                args: [CONNECTION_TEXT, { static: true }]
-            }], fConnectionCenter: [{
-                type: ViewChild,
-                args: ['fConnectionCenter', { static: false }]
-            }], fConnectionCenters: [{
-                type: ContentChildren,
-                args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
 const F_CONNECTION_PROVIDERS = [
@@ -2858,6 +2852,11 @@ const F_CONNECTION_PROVIDERS = [
     FSnapConnectionComponent
 ];
 
+/**
+ * Floating behavior calculates the connection line
+ * It constructs a line between the intersections of the connectors rectangles and line from the centers of the connector rectangles
+ * @param payload
+ */
 function floatingBehavior(payload) {
     return _getIntersectionsLine(_fromRoundedRectIntersections(payload), _toRoundedRectIntersections(payload), payload);
 }
@@ -2874,6 +2873,11 @@ function _getIntersectionsLine(from, to, payload) {
     };
 }
 
+/**
+ * Fixed center behavior calculates the connection line
+ * It constructs a line between the gravity centers of the connector rectangles
+ * @param payload
+ */
 function fixedCenterBehavior(payload) {
     return {
         point1: payload.outputRect.gravityCenter,
@@ -2881,6 +2885,11 @@ function fixedCenterBehavior(payload) {
     };
 }
 
+/**
+ * Fixed outbound behavior calculates the connection line
+ * It constructs a line between the specified sides of the output and input rectangles
+ * @param payload
+ */
 function fixedOutboundBehavior(payload) {
     return {
         point1: _getPosition(payload.outputRect, payload.outputSide === EFConnectableSide.AUTO ? EFConnectableSide.BOTTOM : payload.outputSide),
@@ -2902,6 +2911,9 @@ function _getPosition(rect, side) {
     }
 }
 
+/**
+ * Execution that calculates the connection line based on the behavior.
+ */
 let CalculateConnectionLineByBehaviorExecution = class CalculateConnectionLineByBehaviorExecution {
     _handlers = {
         [EFConnectionBehavior.FLOATING.toString()]: floatingBehavior,
@@ -2941,10 +2953,15 @@ class GetNormalizedPointRequest {
     }
 }
 
+/**
+ * Execution that retrieves the normalized point of a position.
+ * It calculates the point based on the position's transformation
+ * and the canvas transformation.
+ */
 let GetNormalizedPointExecution = class GetNormalizedPointExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     get _transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     // BrowserWindow
     // +------------------------------------------+
@@ -2966,7 +2983,7 @@ let GetNormalizedPointExecution = class GetNormalizedPointExecution {
     // Transform from the browser window to the canvas coordinates:
     handle(request) {
         return Point.fromPoint(request.position)
-            .elementTransform(this._fComponentsStore.flowHost)
+            .elementTransform(this._store.flowHost)
             .sub(this._transform.scaledPosition)
             .sub(this._transform.position)
             .div(this._transform.scale);
@@ -2981,11 +2998,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Execution that retrieves the normalized rectangle of a connector.
+ * It calculates the rectangle based on the element's position and size,
+ * adjusting for the canvas transformation and element offsets.
+ */
 let GetNormalizedConnectorRectExecution = class GetNormalizedConnectorRectExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    _fMediator = inject(FMediator);
+    _store = inject(FComponentsStore);
+    _mediator = inject(FMediator);
     get _transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     handle(request) {
         const systemRect = this._getElementRoundedRect(request);
@@ -2996,10 +3018,10 @@ let GetNormalizedConnectorRectExecution = class GetNormalizedConnectorRectExecut
         return RoundedRect.fromCenter(unscaledRect, offsetSize.width, offsetSize.height);
     }
     _getElementRoundedRect(request) {
-        return this._fMediator.execute(new GetElementRoundedRectRequest(request.element));
+        return this._mediator.execute(new GetElementRoundedRectRequest(request.element));
     }
     _normalizePosition(rect) {
-        return this._fMediator.execute(new GetNormalizedPointRequest(rect));
+        return this._mediator.execute(new GetNormalizedPointRequest(rect));
     }
     _unscaleSize(rect) {
         return SizeExtensions.initialize(rect.width / this._transform.scale, rect.height / this._transform.scale);
@@ -3020,38 +3042,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Execution that redraws connections in the FComponentsStore.
+ * It resets connectors, sets markers for temporary and snap connections,
+ * and sets up connections based on the stored outputs and inputs.
+ */
 let RedrawConnectionsExecution = class RedrawConnectionsExecution {
     _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         this._resetConnectors();
-        if (this._fComponentsStore.fTempConnection) {
-            this._setMarkers(this._fComponentsStore.fTempConnection);
+        if (this._store.fTempConnection) {
+            this._setMarkers(this._store.fTempConnection);
         }
-        if (this._fComponentsStore.fSnapConnection) {
-            this._setMarkers(this._fComponentsStore.fSnapConnection);
+        if (this._store.fSnapConnection) {
+            this._setMarkers(this._store.fSnapConnection);
         }
-        this._fComponentsStore.fConnections.forEach((x) => {
+        this._store.fConnections.forEach((x) => {
             this._setupConnection(this._getOutput(x.fOutputId), this._getInput(x.fInputId), x);
         });
     }
     _getOutput(id) {
-        const result = this._fComponentsStore.fOutputs.find((x) => x.fId === id);
+        const result = this._store.fOutputs.find((x) => x.fId === id);
         if (!result) {
             throw new Error(`Output with id ${id} not found`);
         }
         return result;
     }
     _getInput(id) {
-        const result = this._fComponentsStore.fInputs.find((x) => x.fId === id);
+        const result = this._store.fInputs.find((x) => x.fId === id);
         if (!result) {
             throw new Error(`Input with id ${id} not found`);
         }
         return result;
     }
     _resetConnectors() {
-        this._fComponentsStore.fOutputs.forEach((x) => x.resetConnected());
-        this._fComponentsStore.fInputs.forEach((x) => x.resetConnected());
+        this._store.fOutputs.forEach((x) => x.resetConnected());
+        this._store.fInputs.forEach((x) => x.resetConnected());
     }
     _setupConnection(fOutput, fInput, fConnection) {
         fOutput.setConnected(fInput);
@@ -3082,10 +3109,13 @@ class RemoveConnectionForCreateFromStoreRequest {
     static fToken = Symbol('RemoveConnectionForCreateFromStoreRequest');
 }
 
+/**
+ * Execution that removes a connection for creation from the FComponentsStore.
+ */
 let RemoveConnectionForCreateFromStoreExecution = class RemoveConnectionForCreateFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fTempConnection = undefined;
+        this._store.fTempConnection = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveConnectionForCreateFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveConnectionForCreateFromStoreExecution });
@@ -3105,14 +3135,17 @@ class RemoveConnectionFromStoreRequest {
     }
 }
 
+/**
+ * Execution that removes a connection from the FComponentsStore.
+ */
 let RemoveConnectionFromStoreExecution = class RemoveConnectionFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fConnections.splice(this._getIndexOfConnection(request.fConnection), 1);
-        this._fComponentsStore.dataChanged();
+        this._store.fConnections.splice(this._getIndexOfConnection(request.fConnection), 1);
+        this._store.dataChanged();
     }
     _getIndexOfConnection(fConnection) {
-        const result = this._fComponentsStore.fConnections.indexOf(fConnection);
+        const result = this._store.fConnections.indexOf(fConnection);
         if (result === -1) {
             throw new Error(`Connection not found in store`);
         }
@@ -3136,10 +3169,13 @@ class RemoveConnectionMarkerFromStoreRequest {
     }
 }
 
+/**
+ * Execution that removes a connection marker from the FComponentsStore.
+ */
 let RemoveConnectionMarkerFromStoreExecution = class RemoveConnectionMarkerFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fMarkers, request.fComponent);
+        this._store.removeComponent(this._store.fMarkers, request.fComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveConnectionMarkerFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveConnectionMarkerFromStoreExecution });
@@ -3155,10 +3191,13 @@ class RemoveSnapConnectionFromStoreRequest {
     static fToken = Symbol('RemoveSnapConnectionFromStoreRequest');
 }
 
+/**
+ * Execution that removes the snap connection from the FComponentsStore.
+ */
 let RemoveSnapConnectionFromStoreExecution = class RemoveSnapConnectionFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fSnapConnection = undefined;
+        this._store.fSnapConnection = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveSnapConnectionFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveSnapConnectionFromStoreExecution });
@@ -3170,6 +3209,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * This file exports all the connection-related features for the F-Flow domain.
+ */
 const F_CONNECTION_FEATURES = [
     AddConnectionForCreateToStoreExecution,
     AddConnectionMarkerToStoreExecution,
@@ -3192,10 +3234,13 @@ class AddInputToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds an InputConnector to the FComponentsStore.
+ */
 let AddInputToStoreExecution = class AddInputToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.addComponent(this._fComponentsStore.fInputs, request.fComponent);
+        this._store.addComponent(this._store.fInputs, request.fComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddInputToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddInputToStoreExecution });
@@ -3215,6 +3260,9 @@ class AddOutletToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds an OutletConnector to the FComponentsStore.
+ */
 let AddOutletToStoreExecution = class AddOutletToStoreExecution {
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
@@ -3238,6 +3286,9 @@ class AddOutputToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds an OutputConnector to the FComponentsStore.
+ */
 let AddOutputToStoreExecution = class AddOutputToStoreExecution {
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
@@ -3253,21 +3304,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
-class CalculateClosestInputRequest {
+class FindClosestConnectorRequest {
     position;
-    canBeConnectedInputs;
-    static fToken = Symbol('CalculateClosestInputRequest');
-    constructor(position, canBeConnectedInputs) {
+    connectors;
+    static fToken = Symbol('FindClosestConnectorRequest');
+    constructor(position, connectors) {
         this.position = position;
-        this.canBeConnectedInputs = canBeConnectedInputs;
+        this.connectors = connectors;
     }
 }
 
-let CalculateClosestInputExecution = class CalculateClosestInputExecution {
+/**
+ * Execution that finds the closest connector to a given point.
+ * It calculates the distance from the point to each connector's rectangle
+ * and returns the closest one along with its distance.
+ */
+let FindClosestConnectorExecution = class FindClosestConnectorExecution {
     handle(payload) {
         let result;
         let minDistance = Infinity;
-        for (const element of payload.canBeConnectedInputs) {
+        for (const element of payload.connectors) {
             const distance = this._distanceToRectangle(payload.position, element);
             if (distance < minDistance) {
                 minDistance = distance;
@@ -3289,63 +3345,68 @@ let CalculateClosestInputExecution = class CalculateClosestInputExecution {
     _clamp(value, min, max) {
         return Math.max(min, Math.min(max, value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateClosestInputExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateClosestInputExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindClosestConnectorExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindClosestConnectorExecution });
 };
-CalculateClosestInputExecution = __decorate([
-    FExecutionRegister(CalculateClosestInputRequest)
-], CalculateClosestInputExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateClosestInputExecution, decorators: [{
+FindClosestConnectorExecution = __decorate([
+    FExecutionRegister(FindClosestConnectorRequest)
+], FindClosestConnectorExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindClosestConnectorExecution, decorators: [{
             type: Injectable
         }] });
 
-class FindInputAtPositionRequest {
+class FindConnectableConnectorUsingPriorityAndPositionRequest {
     pointerPosition;
-    toConnectorRect;
-    canBeConnectedInputs;
-    static fToken = Symbol('FindInputAtPositionRequest');
-    constructor(pointerPosition, toConnectorRect, canBeConnectedInputs) {
+    connectableConnectors;
+    static fToken = Symbol('FindConnectableConnectorUsingPriorityAndPositionRequest');
+    constructor(pointerPosition, connectableConnectors) {
         this.pointerPosition = pointerPosition;
-        this.toConnectorRect = toConnectorRect;
-        this.canBeConnectedInputs = canBeConnectedInputs;
+        this.connectableConnectors = connectableConnectors;
     }
 }
 
-let FindInputAtPositionExecution = class FindInputAtPositionExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
-    _fBrowser = inject(BrowserService);
+/**
+ * Execution that finds a connectable connector at a given position with priority.
+ * It checks for connectors at the position, the closest connector if snap connection is enabled,
+ * and the first connectable connector of the node at that position.
+ */
+let FindConnectableConnectorUsingPriorityAndPositionExecution = class FindConnectableConnectorUsingPriorityAndPositionExecution {
+    _mediator = inject(FMediator);
+    _store = inject(FComponentsStore);
+    _browser = inject(BrowserService);
     get _transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     get _fHost() {
-        return this._fComponentsStore.fFlow.hostElement;
+        return this._store.fFlow.hostElement;
     }
     get _fNodes() {
-        return this._fComponentsStore.fNodes;
+        return this._store.fNodes;
     }
     get _fSnapConnection() {
-        return this._fComponentsStore.fSnapConnection;
+        return this._store.fSnapConnection;
     }
     handle(payload) {
-        const fInputs = this._findInputsAtPosition(payload);
-        return fInputs.length > 0 ? fInputs[0] : undefined;
+        const connectors = this._findConnectorAtPosition(payload);
+        return connectors.length > 0 ? connectors[0] : undefined;
     }
-    _findInputsAtPosition(request) {
+    _findConnectorAtPosition(request) {
         const result = [];
-        result.push(...this._getConnectableInputsAtPosition(request));
-        const fClosestInput = this._calculateClosetInput(request);
-        if (fClosestInput) {
-            result.unshift(fClosestInput.fConnector);
-        }
-        const fInput = this._getFirstConnectableInputOfNodeAtPosition(request);
+        result.push(...this._filterConnectorsThatLocatedAtPosition(request));
+        // Closest connector is only added if snap connection is enabled and there is a closest connector found
+        // Closest connector has more priority than the first connectable input of the node at position
+        const closestConnector = this._isSnapConnectionEnabledAndHasClosestConnector(request);
+        if (closestConnector) {
+            result.unshift(closestConnector.fConnector);
+        }
+        const fInput = this._getFirstConnectableConnectorOfNodeAtPosition(request);
         if (fInput) {
             result.push(fInput);
         }
         return result;
     }
-    _getConnectableInputsAtPosition(request) {
-        return request.canBeConnectedInputs.filter((x) => {
+    _filterConnectorsThatLocatedAtPosition(request) {
+        return request.connectableConnectors.filter((x) => {
             return RectExtensions.isIncludePoint(x.fRect, this._getPointInFlow(request.pointerPosition));
         }).map((x) => x.fConnector);
     }
@@ -3355,41 +3416,40 @@ let FindInputAtPositionExecution = class FindInputAtPositionExecution {
             .sub(this._transform.scaledPosition).sub(this._transform.position)
             .div(this._transform.scale);
     }
-    //if the closest input is valid, return it
-    _calculateClosetInput(request) {
+    _isSnapConnectionEnabledAndHasClosestConnector(request) {
         if (!this._fSnapConnection) {
             return undefined;
         }
-        const fClosestInput = this._fMediator.execute(new CalculateClosestInputRequest(this._getPointInFlow(request.pointerPosition), request.canBeConnectedInputs));
-        return this._isValidClosestInput(fClosestInput) ? fClosestInput : undefined;
+        const closestConnector = this._mediator.execute(new FindClosestConnectorRequest(this._getPointInFlow(request.pointerPosition), request.connectableConnectors));
+        return this._isValidClosestInput(closestConnector) ? closestConnector : undefined;
     }
-    _isValidClosestInput(fClosestInput) {
-        return !!fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold;
+    _isValidClosestInput(closestConnector) {
+        return !!closestConnector && closestConnector.distance < this._fSnapConnection.fSnapThreshold;
     }
-    //if node placed in position and fConnectOnNode is true, return the first connectable input of the node
-    _getFirstConnectableInputOfNodeAtPosition(request) {
+    //if node placed in position and fConnectOnNode is true, return the first connectable connector of the node
+    _getFirstConnectableConnectorOfNodeAtPosition(request) {
         return this._getElementsFromPoint(request.pointerPosition)
             .map((x) => this._findConnectableNode(x))
             .filter((x) => !!x)
-            .map((x) => this._findFirstConnectableInputOfNode(request.canBeConnectedInputs, x))
+            .map((x) => this._findFirstConnectableConnectorOfNode(request.connectableConnectors, x))
             .find((x) => !!x);
     }
     _getElementsFromPoint(position) {
-        return this._fBrowser.document.elementsFromPoint(position.x, position.y);
+        return this._browser.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;
+    _findFirstConnectableConnectorOfNode(connectableInputs, fNode) {
+        return connectableInputs.find((x) => x.fConnector.fNodeId === fNode.fId())?.fConnector;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindInputAtPositionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindInputAtPositionExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindConnectableConnectorUsingPriorityAndPositionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindConnectableConnectorUsingPriorityAndPositionExecution });
 };
-FindInputAtPositionExecution = __decorate([
-    FExecutionRegister(FindInputAtPositionRequest)
-], FindInputAtPositionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindInputAtPositionExecution, decorators: [{
+FindConnectableConnectorUsingPriorityAndPositionExecution = __decorate([
+    FExecutionRegister(FindConnectableConnectorUsingPriorityAndPositionRequest)
+], FindConnectableConnectorUsingPriorityAndPositionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindConnectableConnectorUsingPriorityAndPositionExecution, decorators: [{
             type: Injectable
         }] });
 
@@ -3409,8 +3469,11 @@ class GetConnectorAndRectRequest {
     }
 }
 
+/**
+ * Execution that retrieves a connector and its rectangle.
+ */
 let GetConnectorAndRectExecution = class GetConnectorAndRectExecution {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     handle(request) {
         return {
             fConnector: request.fConnector,
@@ -3418,7 +3481,7 @@ let GetConnectorAndRectExecution = class GetConnectorAndRectExecution {
         };
     }
     _getConnectorRect(fConnector) {
-        return this._fMediator.execute(new GetNormalizedConnectorRectRequest(fConnector.hostElement));
+        return this._mediator.execute(new GetNormalizedConnectorRectRequest(fConnector.hostElement));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetConnectorAndRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetConnectorAndRectExecution });
@@ -3430,15 +3493,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Execution that retrieves all input connectors that can be connected to a given output or outlet connector,
+ */
 let GetAllCanBeConnectedInputsAndRectsExecution = class GetAllCanBeConnectedInputsAndRectsExecution {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
     get _fInputs() {
         return this._fComponentsStore.fInputs;
     }
     handle(payload) {
         return this._getCanBeConnectedInputs(payload.fOutputOrOutlet).map((x) => {
-            return this._fMediator.execute(new GetConnectorAndRectRequest(x));
+            return this._mediator.execute(new GetConnectorAndRectRequest(x));
         });
     }
     _getCanBeConnectedInputs(fOutputOrOutlet) {
@@ -3467,30 +3533,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
-class MarkAllCanBeConnectedInputsRequest {
-    fInputs;
-    static fToken = Symbol('MarkAllCanBeConnectedInputsRequest');
-    constructor(fInputs) {
-        this.fInputs = fInputs;
+class GetAllCanBeConnectedSourceConnectorsAndRectsRequest {
+    fTargetConnector;
+    static fToken = Symbol('GetAllCanBeConnectedSourceConnectorsAndRectsRequest');
+    constructor(fTargetConnector) {
+        this.fTargetConnector = fTargetConnector;
     }
 }
 
-let MarkAllCanBeConnectedInputsExecution = class MarkAllCanBeConnectedInputsExecution {
+/**
+ * Execution that retrieves all source connectors that can be connected to a given target connector,
+ * along with their rectangles.
+ * Source - Output or Outlet connectors.
+ */
+let GetAllCanBeConnectedSourceConnectorsAndRectsExecution = class GetAllCanBeConnectedSourceConnectorsAndRectsExecution {
+    _mediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
+    get _fSourceConnectors() {
+        return this._fComponentsStore.fOutputs;
+    }
     handle(payload) {
-        this._fComponentsStore.flowHost.classList.add(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
-        payload.fInputs.forEach((fInput) => this._markCanBeConnectedTo(fInput));
+        return this._getCanBeConnectedSourceConnectors(payload.fTargetConnector).map((x) => {
+            return this._mediator.execute(new GetConnectorAndRectRequest(x));
+        });
     }
-    _markCanBeConnectedTo(fInput) {
-        fInput.hostElement.classList.add(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
+    _getCanBeConnectedSourceConnectors(fTargetConnector) {
+        return this._fSourceConnectors.filter((x) => {
+            let result = x.canBeConnected;
+            if (result && x.canBeConnectedInputs?.length) {
+                result = x.canBeConnectedInputs?.includes(fTargetConnector.fId);
+            }
+            return result;
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetAllCanBeConnectedSourceConnectorsAndRectsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetAllCanBeConnectedSourceConnectorsAndRectsExecution });
 };
-MarkAllCanBeConnectedInputsExecution = __decorate([
-    FExecutionRegister(MarkAllCanBeConnectedInputsRequest)
-], MarkAllCanBeConnectedInputsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, decorators: [{
+GetAllCanBeConnectedSourceConnectorsAndRectsExecution = __decorate([
+    FExecutionRegister(GetAllCanBeConnectedSourceConnectorsAndRectsRequest)
+], GetAllCanBeConnectedSourceConnectorsAndRectsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetAllCanBeConnectedSourceConnectorsAndRectsExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class MarkConnectableConnectorsRequest {
+    fConnectors;
+    static fToken = Symbol('MarkConnectableConnectorsRequest');
+    constructor(fConnectors) {
+        this.fConnectors = fConnectors;
+    }
+}
+
+/**
+ * Execution that marks connectors as connectable.
+ */
+let MarkConnectableConnectorsExecution = class MarkConnectableConnectorsExecution {
+    _store = inject(FComponentsStore);
+    handle(payload) {
+        this._store.flowHost.classList.add(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
+        payload.fConnectors.forEach((fConnector) => this._markConnector(fConnector));
+    }
+    _markConnector(fConnector) {
+        fConnector.hostElement.classList.add(F_CSS_CLASS.CONNECTOR.CONNECTABLE);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectorsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectorsExecution });
+};
+MarkConnectableConnectorsExecution = __decorate([
+    FExecutionRegister(MarkConnectableConnectorsRequest)
+], MarkConnectableConnectorsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectorsExecution, decorators: [{
             type: Injectable
         }] });
 
@@ -3502,10 +3614,13 @@ class RemoveInputFromStoreRequest {
     }
 }
 
+/**
+ * Execution that removes an inputConnector from the FComponentsStore.
+ */
 let RemoveInputFromStoreExecution = class RemoveInputFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fInputs, request.fComponent);
+        this._store.removeComponent(this._store.fInputs, request.fComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveInputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveInputFromStoreExecution });
@@ -3525,10 +3640,13 @@ class RemoveOutletFromStoreRequest {
     }
 }
 
+/**
+ * Execution that removes an outlet connector from the FComponentsStore.
+ */
 let RemoveOutletFromStoreExecution = class RemoveOutletFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutlets, request.fComponent);
+        this._store.removeComponent(this._store.fOutlets, request.fComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveOutletFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveOutletFromStoreExecution });
@@ -3548,10 +3666,13 @@ class RemoveOutputFromStoreRequest {
     }
 }
 
+/**
+ * Execution that removes an outlet connector from the FComponentsStore.
+ */
 let RemoveOutputFromStoreExecution = class RemoveOutputFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutputs, request.fComponent);
+        this._store.removeComponent(this._store.fOutputs, request.fComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveOutputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveOutputFromStoreExecution });
@@ -3563,46 +3684,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
-class UnmarkAllCanBeConnectedInputsRequest {
-    fInputs;
-    static fToken = Symbol('UnmarkAllCanBeConnectedInputsRequest');
-    constructor(fInputs) {
-        this.fInputs = fInputs;
+class UnmarkConnectableConnectorsRequest {
+    fConnectors;
+    static fToken = Symbol('UnmarkConnectableConnectorsRequest');
+    constructor(fConnectors) {
+        this.fConnectors = fConnectors;
     }
 }
 
-let UnmarkAllCanBeConnectedInputsExecution = class UnmarkAllCanBeConnectedInputsExecution {
-    _fComponentsStore = inject(FComponentsStore);
+/**
+ * Execution that unmarks connectors as connectable.
+ */
+let UnmarkConnectableConnectorsExecution = class UnmarkConnectableConnectorsExecution {
+    _store = inject(FComponentsStore);
     handle(payload) {
-        this._fComponentsStore.flowHost.classList.remove(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
-        payload.fInputs.forEach((fInput) => this._unmarkCanBeConnectedTo(fInput));
+        this._store.flowHost.classList.remove(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
+        payload.fConnectors.forEach((fConnector) => this._unmarkConnector(fConnector));
     }
-    _unmarkCanBeConnectedTo(fInput) {
-        fInput.hostElement.classList.remove(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
+    _unmarkConnector(fConnector) {
+        fConnector.hostElement.classList.remove(F_CSS_CLASS.CONNECTOR.CONNECTABLE);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectorsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectorsExecution });
 };
-UnmarkAllCanBeConnectedInputsExecution = __decorate([
-    FExecutionRegister(UnmarkAllCanBeConnectedInputsRequest)
-], UnmarkAllCanBeConnectedInputsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, decorators: [{
+UnmarkConnectableConnectorsExecution = __decorate([
+    FExecutionRegister(UnmarkConnectableConnectorsRequest)
+], UnmarkConnectableConnectorsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectorsExecution, decorators: [{
             type: Injectable
         }] });
 
+/*
+  * This file exports all the connector-related executions that can be used in the FFlow domain.
+ */
 const F_CONNECTORS_FEATURES = [
     AddInputToStoreExecution,
     AddOutletToStoreExecution,
     AddOutputToStoreExecution,
-    CalculateClosestInputExecution,
-    FindInputAtPositionExecution,
+    FindClosestConnectorExecution,
+    FindConnectableConnectorUsingPriorityAndPositionExecution,
+    GetAllCanBeConnectedSourceConnectorsAndRectsExecution,
     GetAllCanBeConnectedInputsAndRectsExecution,
     GetConnectorAndRectExecution,
-    MarkAllCanBeConnectedInputsExecution,
+    MarkConnectableConnectorsExecution,
     RemoveInputFromStoreExecution,
     RemoveOutletFromStoreExecution,
     RemoveOutputFromStoreExecution,
-    UnmarkAllCanBeConnectedInputsExecution
+    UnmarkConnectableConnectorsExecution
 ];
 
 class AddDndToStoreRequest {
@@ -3613,10 +3741,13 @@ class AddDndToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds a drag and drop directive to the FComponentsStore.
+ */
 let AddDndToStoreExecution = class AddDndToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fDraggable = request.fComponent;
+        this._store.fDraggable = request.fComponent;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddDndToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddDndToStoreExecution });
@@ -3652,7 +3783,7 @@ let GetNormalizedParentNodeRectExecution = class GetNormalizedParentNodeRectExec
         return result;
     }
     _getNode(fId) {
-        return this._fComponentsStore.fNodes.find((x) => x.fId === fId);
+        return this._fComponentsStore.fNodes.find((x) => x.fId() === fId);
     }
     //   Parent Node
     // +----------------------------------------+
@@ -3712,10 +3843,10 @@ let IsArrayHasParentNodeExecution = class IsArrayHasParentNodeExecution {
         return this._isParentNodeInArray(this._getParentNodeIds(request.fParentNodes), request.fDraggedNodes);
     }
     _getParentNodeIds(fParentNodes) {
-        return fParentNodes.map((x) => x.fId);
+        return fParentNodes.map((x) => x.fId());
     }
     _isParentNodeInArray(parentNodeIds, fDraggedNodes) {
-        return fDraggedNodes.some((x) => parentNodeIds.includes(x.fId));
+        return fDraggedNodes.some((x) => parentNodeIds.includes(x.fId()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsArrayHasParentNodeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsArrayHasParentNodeExecution });
@@ -3756,7 +3887,7 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
         const fOutputConnections = this._getOutputConnectionsId(fOutputConnectors);
         const fInputConnections = this._getInputConnectionsId(fInputConnectors);
         const fConnectionsUnderNode = this._calculateConnectionsUnderNode(request.fNode).filter((x) => {
-            return !fOutputConnections.includes(x.fId) && !fInputConnections.includes(x.fId);
+            return !fOutputConnections.includes(x.fId()) && !fInputConnections.includes(x.fId());
         });
         if (!fConnectionsUnderNode.length) {
             return;
@@ -3777,13 +3908,13 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
         const connectorsId = this._getConnectorsId(connectors);
         return this._fComponentsStore.fConnections
             .filter((x) => connectorsId.includes(x.fOutputId))
-            .map((x) => x.fId);
+            .map((x) => x.fId());
     }
     _getInputConnectionsId(connectors) {
         const connectorsId = this._getConnectorsId(connectors);
         return this._fComponentsStore.fConnections
             .filter((x) => connectorsId.includes(x.fInputId))
-            .map((x) => x.fId);
+            .map((x) => x.fId());
     }
     _getConnectorsId(connectors) {
         return connectors.map((x) => x.fId);
@@ -3793,10 +3924,10 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
         return this._fComponentsStore.fConnections.filter((x) => this._isConnectionHasIntersectionsWithNode(x, fNodeRect));
     }
     _isConnectionHasIntersectionsWithNode(fConnection, fNodeRect) {
-        return GetIntersections.getRoundedRectIntersectionsWithSVGPath(fConnection.fPath.hostElement, fNodeRect).length > 0;
+        return GetIntersections.getRoundedRectIntersectionsWithSVGPath(fConnection.fPath().hostElement, fNodeRect).length > 0;
     }
     _emitNodeIntersectedWithConnections(fNode, fConnections) {
-        this._fComponentsStore.fDraggable?.fNodeIntersectedWithConnections.emit(new FNodeIntersectedWithConnections(fNode.fId, fConnections.map((x) => x.fId)));
+        this._fComponentsStore.fDraggable?.fNodeIntersectedWithConnections.emit(new FNodeIntersectedWithConnections(fNode.fId(), fConnections.map((x) => x.fId())));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsConnectionUnderNodeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsConnectionUnderNodeExecution });
@@ -4083,7 +4214,7 @@ class FCreateConnectionDragHandler {
     }
     _getAndMarkCanBeConnectedInputs() {
         this._canBeConnectedInputs = this._fMediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutputOrOutlet));
-        this._fMediator.execute(new MarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+        this._fMediator.execute(new MarkConnectableConnectorsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
     _initializeSnapConnection() {
         if (!this._fSnapConnection) {
@@ -4120,7 +4251,7 @@ class FCreateConnectionDragHandler {
         }
     }
     _findClosestInput(difference) {
-        return this._fMediator.execute(new CalculateClosestInputRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
+        return this._fMediator.execute(new FindClosestConnectorRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
     }
     _getClosestInputForSnapConnection(fClosestInput) {
         return fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold ? fClosestInput : undefined;
@@ -4129,7 +4260,7 @@ class FCreateConnectionDragHandler {
         this._fConnection.redraw();
         this._fConnection.hide();
         this._fSnapConnection?.hide();
-        this._fMediator.execute(new UnmarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+        this._fMediator.execute(new UnmarkConnectableConnectorsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
 }
 
@@ -4167,7 +4298,7 @@ let FCreateConnectionFinalizeExecution = class FCreateConnectionFinalizeExecutio
         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.execute(new FindInputAtPositionRequest(event.getPosition(), this._fResult.getData().toConnectorRect, this._fResult.getData().canBeConnectedInputs));
+        return this._fMediator.execute(new FindConnectableConnectorUsingPriorityAndPositionRequest(event.getPosition(), this._fResult.getData().canBeConnectedInputs));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCreateConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCreateConnectionFinalizeExecution });
@@ -4383,133 +4514,273 @@ class FReassignConnectionFinalizeRequest {
     }
 }
 
+function isClosestConnectorInsideSnapThreshold(fClosestConnector, snapConnection) {
+    return fClosestConnector && fClosestConnector.distance < snapConnection.fSnapThreshold ? fClosestConnector : undefined;
+}
+function roundedRectFromPoint(point) {
+    return RoundedRect.fromRect(RectExtensions.initialize(point.x, point.y));
+}
+
+class FReassignTargetDragHandler {
+    _mediator;
+    _connection;
+    _sourceConnectorAndRect;
+    _targetConnectorAndRect;
+    _connectableConnectors = [];
+    get _sourceConnector() {
+        return this._sourceConnectorAndRect.fConnector;
+    }
+    get _sourceConnectorRect() {
+        return this._sourceConnectorAndRect.fRect;
+    }
+    get _targetConnector() {
+        return this._targetConnectorAndRect.fConnector;
+    }
+    _connectorRect;
+    _snapConnection;
+    constructor(_mediator, _connection, _sourceConnectorAndRect, _targetConnectorAndRect) {
+        this._mediator = _mediator;
+        this._connection = _connection;
+        this._sourceConnectorAndRect = _sourceConnectorAndRect;
+        this._targetConnectorAndRect = _targetConnectorAndRect;
+        this._connectorRect = roundedRectFromPoint(this._connection.line.point2);
+    }
+    getConnectableConnectors() {
+        return this._connectableConnectors;
+    }
+    markConnectableConnector() {
+        this._connectableConnectors = this._mediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._sourceConnector));
+        this._mediator.execute(new MarkConnectableConnectorsRequest(this._connectableConnectors.map((x) => x.fConnector)));
+    }
+    initializeSnapConnection(snapConnection) {
+        this._snapConnection = snapConnection;
+        if (!snapConnection) {
+            return;
+        }
+        snapConnection.fOutputId = this._connection.fOutputId;
+        snapConnection.initialize();
+    }
+    onPointerMove(difference) {
+        const newPoint = this._connectorRect.addPoint(difference);
+        const fClosestConnector = this._findClosestConnector(newPoint, this._connectableConnectors);
+        this._drawConnection(newPoint, fClosestConnector?.fConnector.fConnectableSide || this._targetConnector.fConnectableSide);
+        if (this._snapConnection) {
+            this._drawSnapConnection(isClosestConnectorInsideSnapThreshold(fClosestConnector, this._snapConnection));
+        }
+    }
+    _findClosestConnector(point, connectors) {
+        return this._mediator.execute(new FindClosestConnectorRequest(point, connectors));
+    }
+    _drawConnection(newPoint, fSide) {
+        const line = this._calculateNewLine(newPoint, fSide);
+        this._connection.setLine(line, this._sourceConnectorAndRect.fConnector.fConnectableSide, fSide);
+        this._connection.redraw();
+    }
+    _calculateNewLine(targetPoint, fSide) {
+        return this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(this._sourceConnectorRect, roundedRectFromPoint(targetPoint), this._connection.fBehavior, this._sourceConnector.fConnectableSide, fSide));
+    }
+    _drawSnapConnection(fClosestConnector) {
+        const snapConnection = this._snapConnection;
+        if (fClosestConnector) {
+            const line = this._getLineToClosestTargetConnector(fClosestConnector, snapConnection);
+            snapConnection.show();
+            snapConnection.setLine(line, this._sourceConnector.fConnectableSide, fClosestConnector.fConnector.fConnectableSide);
+            snapConnection.redraw();
+        }
+        else {
+            snapConnection.hide();
+        }
+    }
+    _getLineToClosestTargetConnector(fClosestInput, snapConnection) {
+        return this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(this._sourceConnectorRect, fClosestInput.fRect, snapConnection.fBehavior, this._sourceConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
+    }
+    onPointerUp() {
+        this._drawConnection(this._connectorRect, this._targetConnectorAndRect.fConnector.fConnectableSide);
+        this._snapConnection?.hide();
+        this._mediator.execute(new UnmarkConnectableConnectorsRequest(this._connectableConnectors.map((x) => x.fConnector)));
+    }
+}
+
+class FReassignSourceDragHandler {
+    _mediator;
+    _connection;
+    _sourceConnectorAndRect;
+    _targetConnectorAndRect;
+    _connectableConnectors = [];
+    get _sourceConnector() {
+        return this._sourceConnectorAndRect.fConnector;
+    }
+    get _targetConnector() {
+        return this._targetConnectorAndRect.fConnector;
+    }
+    _connectorRect;
+    _snapConnection;
+    constructor(_mediator, _connection, _sourceConnectorAndRect, _targetConnectorAndRect) {
+        this._mediator = _mediator;
+        this._connection = _connection;
+        this._sourceConnectorAndRect = _sourceConnectorAndRect;
+        this._targetConnectorAndRect = _targetConnectorAndRect;
+        this._connectorRect = roundedRectFromPoint(this._connection.line.point1);
+    }
+    getConnectableConnectors() {
+        return this._connectableConnectors;
+    }
+    markConnectableConnector() {
+        this._connectableConnectors = this._mediator.execute(new GetAllCanBeConnectedSourceConnectorsAndRectsRequest(this._targetConnector));
+        const isExistCurrentSourceConnector = this._connectableConnectors.some((x) => x.fConnector.fId === this._sourceConnector.fId);
+        if (!isExistCurrentSourceConnector) {
+            this._connectableConnectors.push(this._sourceConnectorAndRect);
+        }
+        this._mediator.execute(new MarkConnectableConnectorsRequest(this._connectableConnectors.map((x) => x.fConnector)));
+    }
+    initializeSnapConnection(snapConnection) {
+        this._snapConnection = snapConnection;
+        if (!snapConnection) {
+            return;
+        }
+        snapConnection.fInputId = this._connection.fInputId;
+        snapConnection.initialize();
+    }
+    onPointerMove(difference) {
+        const newPoint = this._connectorRect.addPoint(difference);
+        const fClosestConnector = this._findClosestConnector(newPoint, this._connectableConnectors);
+        this._drawConnection(newPoint, fClosestConnector?.fConnector.fConnectableSide || this._sourceConnector.fConnectableSide);
+        if (this._snapConnection) {
+            this._drawSnapConnection(isClosestConnectorInsideSnapThreshold(fClosestConnector, this._snapConnection));
+        }
+    }
+    _findClosestConnector(point, connectors) {
+        return this._mediator.execute(new FindClosestConnectorRequest(point, connectors));
+    }
+    _drawConnection(newPoint, fSide) {
+        const line = this._calculateNewLine(newPoint, fSide);
+        this._connection.setLine(line, fSide, this._targetConnectorAndRect.fConnector.fConnectableSide);
+        this._connection.redraw();
+    }
+    _calculateNewLine(sourcePoint, fSide) {
+        return this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(roundedRectFromPoint(sourcePoint), this._targetConnectorAndRect.fRect, this._connection.fBehavior, fSide, this._targetConnectorAndRect.fConnector.fConnectableSide));
+    }
+    _drawSnapConnection(fClosestConnector) {
+        const snapConnection = this._snapConnection;
+        if (fClosestConnector) {
+            const line = this._getLineToClosestSourceConnector(fClosestConnector, snapConnection);
+            snapConnection.show();
+            snapConnection.setLine(line, fClosestConnector.fConnector.fConnectableSide, this._targetConnector.fConnectableSide);
+            snapConnection.redraw();
+        }
+        else {
+            snapConnection.hide();
+        }
+    }
+    _getLineToClosestSourceConnector(fClosestInput, snapConnection) {
+        return this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(fClosestInput.fRect, this._targetConnectorAndRect.fRect, snapConnection.fBehavior, fClosestInput.fConnector.fConnectableSide, this._targetConnector.fConnectableSide));
+    }
+    onPointerUp() {
+        this._drawConnection(this._connectorRect, this._sourceConnectorAndRect.fConnector.fConnectableSide);
+        this._snapConnection?.hide();
+        this._mediator.execute(new UnmarkConnectableConnectorsRequest(this._connectableConnectors.map((x) => x.fConnector)));
+    }
+}
+
 class FReassignConnectionDragHandler {
-    _fConnection;
+    _connection;
+    _isTargetDragHandle;
     fEventType = 'reassign-connection';
     fData;
     _fResult;
     _fMediator;
-    _fComponentsStore;
-    _toConnectorRect = new RoundedRect();
+    _store;
     get _fSnapConnection() {
-        return this._fComponentsStore.fSnapConnection;
+        return this._store.fSnapConnection;
     }
-    _fOutputWithRect;
-    _fInputWithRect;
-    _canBeConnectedInputs = [];
-    get _fOutput() {
-        const result = this._fComponentsStore.fOutputs.find((x) => x.fId === this._fConnection.fOutputId);
+    get _sourceConnector() {
+        const result = this._store.fOutputs.find((x) => x.fId === this._connection.fOutputId);
         if (!result) {
             throw new Error('Connection output not found');
         }
         return result;
     }
-    get _fInput() {
-        const result = this._fComponentsStore.fInputs.find((x) => x.fId === this._fConnection.fInputId);
+    get _targetConnector() {
+        const result = this._store.fInputs.find((x) => x.fId === this._connection.fInputId);
         if (!result) {
             throw new Error('Connection input not found');
         }
         return result;
     }
-    constructor(_injector, _fConnection) {
-        this._fConnection = _fConnection;
+    get _sourceConnectorAndRect() {
+        return this._fMediator.execute(new GetConnectorAndRectRequest(this._sourceConnector));
+    }
+    get _targetConnectorAndRect() {
+        return this._fMediator.execute(new GetConnectorAndRectRequest(this._targetConnector));
+    }
+    _reassignHandler;
+    constructor(_injector, _connection, _isTargetDragHandle) {
+        this._connection = _connection;
+        this._isTargetDragHandle = _isTargetDragHandle;
         this._fResult = _injector.get(FDragHandlerResult);
         this._fMediator = _injector.get(FMediator);
-        this._fComponentsStore = _injector.get(FComponentsStore);
-        this._toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this._fConnection.line.point2.x, this._fConnection.line.point2.y));
+        this._store = _injector.get(FComponentsStore);
         this.fData = {
-            fConnectionId: this._fConnection.fId
+            fConnectionId: this._connection.fId()
         };
+        this._reassignHandler = this._isTargetDragHandle ? this._targetDragHandler() : this._sourceDragHandler();
+    }
+    _sourceDragHandler() {
+        return new FReassignSourceDragHandler(this._fMediator, this._connection, this._sourceConnectorAndRect, this._targetConnectorAndRect);
+    }
+    _targetDragHandler() {
+        return new FReassignTargetDragHandler(this._fMediator, this._connection, this._sourceConnectorAndRect, this._targetConnectorAndRect);
     }
     prepareDragSequence() {
-        this._getAndMarkCanBeConnectedInputs();
-        this._initializeSnapConnection();
-        this._fOutputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fOutput));
-        this._fInputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fInput));
+        this._reassignHandler.markConnectableConnector();
+        this._reassignHandler.initializeSnapConnection(this._fSnapConnection);
         this._fResult.setData({
-            toConnectorRect: this._toConnectorRect,
-            canBeConnectedInputs: this._canBeConnectedInputs,
-            fConnection: this._fConnection
+            isTargetDragHandle: this._isTargetDragHandle,
+            sourceConnectorRect: roundedRectFromPoint(this._connection.line.point1),
+            targetConnectorRect: roundedRectFromPoint(this._connection.line.point2),
+            connectableConnectors: this._reassignHandler.getConnectableConnectors(),
+            fConnection: this._connection
         });
     }
-    _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) {
-            return;
-        }
-        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._drawSnapConnection(this._getClosestInputForSnapConnection(fClosestInput));
-        }
-    }
-    _drawConnection(difference, fSide) {
-        const line = this._getLineToPointer(difference, fSide);
-        this._fConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fSide);
-        this._fConnection.redraw();
-    }
-    _getLineToPointer(difference, fSide) {
-        return this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, RoundedRect.fromRect(RectExtensions.initialize(difference.x, difference.y)), this._fConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fSide));
-    }
-    _drawSnapConnection(fClosestInput) {
-        if (fClosestInput) {
-            const line = this._getLineToClosestInput(fClosestInput);
-            this._fSnapConnection.show();
-            this._fSnapConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide);
-            this._fSnapConnection.redraw();
-        }
-        else {
-            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));
-    }
-    _findClosestInput(difference) {
-        return this._fMediator.execute(new CalculateClosestInputRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
-    }
-    _getClosestInputForSnapConnection(fClosestInput) {
-        return fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold ? fClosestInput : undefined;
+        this._reassignHandler.onPointerMove(difference);
     }
     onPointerUp() {
-        this._drawConnection(this._toConnectorRect, this._fInputWithRect.fConnector.fConnectableSide);
-        this._fSnapConnection?.hide();
-        this._fMediator.execute(new UnmarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+        this._reassignHandler.onPointerUp();
     }
 }
 
 class FReassignConnectionEvent {
-    fConnectionId;
-    fOutputId;
-    oldFInputId;
-    newFInputId;
-    fDropPosition;
-    constructor(fConnectionId, fOutputId, oldFInputId, newFInputId, fDropPosition) {
-        this.fConnectionId = fConnectionId;
-        this.fOutputId = fOutputId;
-        this.oldFInputId = oldFInputId;
-        this.newFInputId = newFInputId;
-        this.fDropPosition = fDropPosition;
+    connectionId;
+    isSourceReassign;
+    isTargetReassign;
+    oldSourceId;
+    newSourceId;
+    oldTargetId;
+    newTargetId;
+    dropPoint;
+    constructor(connectionId, isSourceReassign, isTargetReassign, oldSourceId, newSourceId, oldTargetId, newTargetId, dropPoint) {
+        this.connectionId = connectionId;
+        this.isSourceReassign = isSourceReassign;
+        this.isTargetReassign = isTargetReassign;
+        this.oldSourceId = oldSourceId;
+        this.newSourceId = newSourceId;
+        this.oldTargetId = oldTargetId;
+        this.newTargetId = newTargetId;
+        this.dropPoint = dropPoint;
     }
 }
 
 let FReassignConnectionFinalizeExecution = class FReassignConnectionFinalizeExecution {
-    _fResult = inject(FDragHandlerResult);
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
-    _fDraggableDataContext = inject(FDraggableDataContext);
+    _dragResult = inject(FDragHandlerResult);
+    _mediator = inject(FMediator);
+    _store = inject(FComponentsStore);
+    _draggableContext = inject(FDraggableDataContext);
     get _fDraggable() {
-        return this._fComponentsStore.fDraggable;
+        return this._store.fDraggable;
     }
     get _fDragHandler() {
-        return this._fDraggableDataContext.draggableItems[0];
+        return this._draggableContext.draggableItems[0];
     }
     handle(request) {
         if (!this._isDroppedConnectionReassignEvent()) {
@@ -4519,27 +4790,33 @@ let FReassignConnectionFinalizeExecution = class FReassignConnectionFinalizeExec
         this._fDragHandler.onPointerUp();
     }
     _isDroppedConnectionReassignEvent() {
-        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof FReassignConnectionDragHandler);
+        return this._draggableContext.draggableItems.some((x) => x instanceof FReassignConnectionDragHandler);
     }
     _applyReassignEvent(event) {
-        const fInput = this._getInputUnderPointer(event);
-        if (!!fInput && !this._isReassignToDifferentInput(fInput)) {
+        const fConnector = this._findConnectableConnectorUsingPriorityAndPosition(event);
+        if (!!fConnector && !this._isReassignToDifferentConnector(fConnector)) {
             return;
         }
-        this._emitReassignConnectionEvent(event, fInput);
+        this._emitReassignConnectionEvent(event, fConnector);
     }
-    _getInputUnderPointer(event) {
-        return this._fMediator.execute(new FindInputAtPositionRequest(event.getPosition(), this._fResult.getData().toConnectorRect, this._fResult.getData().canBeConnectedInputs));
+    _findConnectableConnectorUsingPriorityAndPosition(event) {
+        return this._mediator.execute(new FindConnectableConnectorUsingPriorityAndPositionRequest(event.getPosition(), this._dragResult.getData().connectableConnectors));
     }
-    _isReassignToDifferentInput(fInput) {
-        return this._fResult.getData().fConnection.fInputId !== fInput.fId;
+    _isReassignToDifferentConnector(fConnector) {
+        if (!this._dragResult.getData().isTargetDragHandle) {
+            return this._dragResult.getData().fConnection.fInputId !== fConnector.fId;
+        }
+        else {
+            return this._dragResult.getData().fConnection.fOutputId !== fConnector.fId;
+        }
     }
-    _emitReassignConnectionEvent(event, fInput) {
-        this._fDraggable.fReassignConnection.emit(this._getEventData(event, fInput));
+    _emitReassignConnectionEvent(event, fConnector) {
+        this._fDraggable.fReassignConnection.emit(this._getEventData(event, fConnector));
     }
-    _getEventData(event, fInput) {
-        const fConnection = this._fResult.getData().fConnection;
-        return new FReassignConnectionEvent(fConnection.fId, fConnection.fOutputId, fConnection.fInputId, fInput?.fId, event.getPosition());
+    _getEventData(event, fConnector) {
+        const fConnection = this._dragResult.getData().fConnection;
+        const isTargetDragHandle = this._dragResult.getData().isTargetDragHandle;
+        return new FReassignConnectionEvent(fConnection.fId(), !isTargetDragHandle, isTargetDragHandle, fConnection.fOutputId, !isTargetDragHandle ? fConnector?.fId : undefined, fConnection.fInputId, isTargetDragHandle ? fConnector?.fId : undefined, event.getPosition());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FReassignConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FReassignConnectionFinalizeExecution });
@@ -4561,6 +4838,23 @@ class FReassignConnectionPreparationRequest {
     }
 }
 
+function isPointerInsideStartOrEndDragHandles(connection, position) {
+    return isDragHandleEnd(connection, position) || isDragHandleStart(connection, position);
+}
+function isDragHandleEnd(connection, position) {
+    return connection.fDragHandleEnd()?.point
+        && _isPointInsideCircle(position, connection.fDragHandleEnd().point)
+        && !connection.fDraggingDisabled;
+}
+function isDragHandleStart(connection, position) {
+    return !!connection.fDragHandleStart()?.point
+        && _isPointInsideCircle(position, connection.fDragHandleStart().point)
+        && !connection.fDraggingDisabled && connection.fReassignableStart();
+}
+function _isPointInsideCircle(point, circleCenter) {
+    return (point.x - circleCenter.x) ** 2 + (point.y - circleCenter.y) ** 2 <= 8 ** 2;
+}
+
 let FReassignConnectionPreparationExecution = class FReassignConnectionPreparationExecution {
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
@@ -4577,19 +4871,20 @@ let FReassignConnectionPreparationExecution = class FReassignConnectionPreparati
         return this._fComponentsStore.fConnections;
     }
     handle(request) {
-        if (!this._isValid(request) || !this._isValidTrigger(request)) {
+        const position = this._getPointInFlow(request);
+        if (!this._isValid(position) || !this._isValidTrigger(request)) {
             return;
         }
         this._fDraggableDataContext.onPointerDownScale = this._transform.scale;
         this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
             .elementTransform(this._fHost).div(this._transform.scale);
         this._fDraggableDataContext.draggableItems = [
-            new FReassignConnectionDragHandler(this._injector, this._fConnection)
+            new FReassignConnectionDragHandler(this._injector, this._fConnection, isDragHandleEnd(this._fConnection, position))
         ];
         setTimeout(() => this._updateConnectionLayer());
     }
-    _isValid(request) {
-        this._fConnection = this._getConnectionToReassign(this._getPointInFlow(request));
+    _isValid(position) {
+        this._fConnection = this._getConnectionToReassign(position);
         return !!this._fConnection && !this._fDraggableDataContext.draggableItems.length;
     }
     _isValidTrigger(request) {
@@ -4606,12 +4901,7 @@ let FReassignConnectionPreparationExecution = class FReassignConnectionPreparati
         return connections.length ? connections[0] : undefined;
     }
     _getConnectionsFromPoint(position) {
-        return this._fConnections.filter((x) => {
-            return x.fDragHandle?.point && this._isPointInsideCircle(position, x.fDragHandle.point) && !x.fDraggingDisabled;
-        });
-    }
-    _isPointInsideCircle(point, circleCenter) {
-        return (point.x - circleCenter.x) ** 2 + (point.y - circleCenter.y) ** 2 <= 8 ** 2;
+        return this._fConnections.filter((x) => isPointerInsideStartOrEndDragHandles(x, position));
     }
     _updateConnectionLayer() {
         this._fMediator.execute(new UpdateItemAndChildrenLayersRequest(this._fConnection, this._fComponentsStore.fCanvas.fConnectionsContainer().nativeElement));
@@ -4912,7 +5202,7 @@ let PutInputConnectionHandlersToArrayExecution = class PutInputConnectionHandler
         request.fDragHandler.fTargetHandlers.push(fHandler);
     }
     _getExistingConnectionHandler(fHandlers, fConnection) {
-        return fHandlers.find((x) => x.fConnection.fId === fConnection.fId);
+        return fHandlers.find((x) => x.fConnection.fId() === fConnection.fId());
     }
     _createConnectionHandler(outputIds, fConnection) {
         let result;
@@ -4975,7 +5265,7 @@ let PutOutputConnectionHandlersToArrayExecution = class PutOutputConnectionHandl
         request.fDragHandler.fSourceHandlers.push(fHandler);
     }
     _getExistingConnectionHandler(fHandlers, fConnection) {
-        return fHandlers.find((x) => x.fConnection.fId === fConnection.fId);
+        return fHandlers.find((x) => x.fConnection.fId() === fConnection.fId());
     }
     _createConnectionHandler(inputIds, fConnection) {
         let result;
@@ -5144,7 +5434,7 @@ class FSummaryNodeMoveDragHandler {
         this._fComponentStore = _injector.get(FComponentsStore);
         this._fBoundsLimiter = new PointBoundsLimiter(_injector, this.commonRect, limits);
         this.fData = {
-            fNodeIds: this.fHandlers.map((x) => x.fNode.fId)
+            fNodeIds: this.fHandlers.map((x) => x.fNode.fId())
         };
     }
     onPointerMove(difference) {
@@ -5192,7 +5482,7 @@ let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragMo
     _getNodesToDragWithCommonLimits(fDraggedNodes) {
         return fDraggedNodes.reduce((result, x) => {
             result.push(x);
-            return result.concat(this._getChildrenNodes(x.fId));
+            return result.concat(this._getChildrenNodes(x.fId()));
         }, []);
     }
     _getNodesMoveLimits(fNodes, fParentNodes, fDraggedNodes) {
@@ -5217,14 +5507,14 @@ let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragMo
         return flatMap(fNodes, (fNode) => this._getNodeOutputIds(fNode));
     }
     _getNodeOutputIds(fNode) {
-        return this._fComponentsStore.fOutputs.filter((x) => fNode.fId === x.fNodeId)
+        return this._fComponentsStore.fOutputs.filter((x) => fNode.fId() === x.fNodeId)
             .map((x) => x.fId);
     }
     _getAllInputIds(fNodes) {
         return flatMap(fNodes, (fNode) => this._getNodeInputIds(fNode));
     }
     _getNodeInputIds(fNode) {
-        return this._fComponentsStore.fInputs.filter((x) => fNode.fId === x.fNodeId)
+        return this._fComponentsStore.fInputs.filter((x) => fNode.fId() === x.fNodeId)
             .map((x) => x.fId);
     }
     _mapToNodeDragHandlers(items) {
@@ -5597,7 +5887,7 @@ let FNodeMoveFinalizeExecution = class FNodeMoveFinalizeExecution {
             const event = this._getItems()[0].fData.fNodeIds.map((id) => {
                 return {
                     id,
-                    position: this._fComponentsStore.fNodes.find(x => x.fId === id).position,
+                    position: this._fComponentsStore.fNodes.find(x => x.fId() === id).position,
                 };
             });
             this._fComponentsStore.fDraggable?.fMoveNodes.emit(new FMoveNodesEvent(event));
@@ -5679,7 +5969,7 @@ let FNodeDropToGroupFinalizeExecution = class FNodeDropToGroupFinalizeExecution
         }
         const item = this._getDragHandleItem();
         if (item.fNodeWithRect) {
-            this._emitDroppedChildrenEvent(item.fNodeWithRect.node.fId, request.event);
+            this._emitDroppedChildrenEvent(item.fNodeWithRect.node.fId(), request.event);
         }
         item.onPointerUp?.();
     }
@@ -5704,7 +5994,7 @@ let FNodeDropToGroupFinalizeExecution = class FNodeDropToGroupFinalizeExecution
     _getDraggedNodeIds() {
         return this._fDraggableDataContext.draggableItems
             .find((x) => x instanceof FSummaryNodeMoveDragHandler)?.fHandlers
-            .map((x) => x.fNode.fId) || [];
+            .map((x) => x.fNode.fId()) || [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeDropToGroupFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeDropToGroupFinalizeExecution });
@@ -5956,7 +6246,7 @@ let FExternalItemFinalizeExecution = class FExternalItemFinalizeExecution {
     }
     _getDestinationNodeOrGroupId() {
         const dropToGroupHandler = this._getDropToGroupHandler();
-        let result = dropToGroupHandler.fNodeWithRect?.node.fId;
+        let result = dropToGroupHandler.fNodeWithRect?.node.fId();
         dropToGroupHandler.onPointerUp?.();
         return result;
     }
@@ -6527,7 +6817,7 @@ let GetNormalizedChildrenNodesRectExecution = class GetNormalizedChildrenNodesRe
         this.fMediator = fMediator;
     }
     handle(request) {
-        const childNodeRect = RectExtensions.union(this.getChildrenNodes(request.fNode.fId).map((x) => this.normalizeRect(x)));
+        const childNodeRect = RectExtensions.union(this.getChildrenNodes(request.fNode.fId()).map((x) => this.normalizeRect(x)));
         return childNodeRect ?
             this.concatRectWithParentPadding(childNodeRect, request.paddings) : null;
     }
@@ -6540,7 +6830,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.13", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, deps: [{ token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, deps: [{ token: i1$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution });
 };
 GetNormalizedChildrenNodesRectExecution = __decorate([
@@ -6548,7 +6838,7 @@ GetNormalizedChildrenNodesRectExecution = __decorate([
 ], GetNormalizedChildrenNodesRectExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2$1.FMediator }] });
+        }], ctorParameters: () => [{ type: i1$1.FMediator }] });
 
 class GetNodeResizeRestrictionsRequest {
     fNode;
@@ -6609,7 +6899,7 @@ class FNodeResizeDragHandler {
         this._fNode = _fNode;
         this._fResizeHandleType = _fResizeHandleType;
         this.fData = {
-            fNodeId: _fNode.fId,
+            fNodeId: _fNode.fId(),
         };
         this._fMediator = _injector.get(FMediator);
     }
@@ -6815,7 +7105,7 @@ class FNodeRotateDragHandler {
         this._fTargetHandlers = _fTargetHandlers;
         this._startRotation = this._fNode.rotate;
         this.fData = {
-            fNodeId: _fNode.fId,
+            fNodeId: _fNode.fId(),
         };
         this._fComponentsStore = _injector.get(FComponentsStore);
         this._fMediator = _injector.get(FMediator);
@@ -7040,7 +7330,7 @@ let FSingleSelectExecution = class FSingleSelectExecution {
     }
     _getConnection(element) {
         return this._fComponentsStore.fConnections
-            .find(c => c.isContains(element) || c.fConnectionCenter?.nativeElement?.contains(element));
+            .find(c => c.isContains(element) || c.fConnectionCenter()?.nativeElement?.contains(element));
     }
     _updateItemAndChildrenLayers(fItem) {
         if (fItem) {
@@ -7252,6 +7542,11 @@ class EventExtensions {
 }
 
 const MOUSE_EVENT_IGNORE_TIME = 800;
+/**
+ * Base class for implementing drag and drop functionality.
+ * It handles mouse and touch events, manages the drag start sequence,
+ * and provides abstract methods for derived classes to implement specific behaviors.
+ */
 class DragAndDropBase {
     ngZone;
     document;
@@ -7273,6 +7568,12 @@ class DragAndDropBase {
     constructor(ngZone) {
         this.ngZone = ngZone;
     }
+    /**
+     * Handles the mouse down event to initiate the drag sequence.
+     * It checks if the event is synthetic or fake, and if the drag is already started.
+     * If not, it sets up the drag start sequence by adding necessary event listeners.
+     * @param event - The mouse event that triggered the drag.
+     */
     onMouseDown = (event) => {
         const isSyntheticEvent = this.isSyntheticEvent(event);
         const isFakeEvent = isFakeMousedownFromScreenReader(event);
@@ -7301,6 +7602,12 @@ class DragAndDropBase {
             };
         }
     };
+    /**
+     * Handles the touch down event to initiate the drag sequence.
+     * It checks if the event is synthetic or fake, and if the drag is already started.
+     * If not, it sets up the drag start sequence by adding necessary event listeners.
+     * @param event - The touch event that triggered the drag.
+     */
     onTouchDown = (event) => {
         const isFakeEvent = isFakeTouchstartFromScreenReader(event);
         const touchEvent = new ITouchDownEvent(event);
@@ -7328,15 +7635,39 @@ class DragAndDropBase {
             };
         }
     };
+    /**
+     * Handles the select start event.
+     * This method is called when the user starts selecting text or elements.
+     * It prevents the default behavior and calls the onSelect method to handle the selection.
+     * @param event - The event that triggered the select start.
+     */
     onSelectStart = (event) => {
         this.onSelect(event);
     };
+    /**
+     * Handles the mouse move event during the drag sequence.
+     * It checks if the drag sequence should start and calls the move handler accordingly.
+     * @param event - The mouse event that triggered the move.
+     */
     onMouseMove = (event) => {
         this.moveHandler(new IMouseEvent(event));
     };
+    /**
+     * Handles the touch move event during the drag sequence.
+     * It checks if the drag sequence should start and calls the move handler accordingly.
+     * @param event - The touch event that triggered the move.
+     */
     onTouchMove = (event) => {
         this.moveHandler(new ITouchMoveEvent(event));
     };
+    /**
+     * Checks if the drag sequence should start based on the pointer position.
+     * It compares the current pointer position with the initial drag start position
+     * and checks if the distance exceeds the drag start threshold.
+     * If the threshold is exceeded and the delay has passed,
+     * it prepares the drag sequence and sets the move handler to onPointerMove.
+     * @param event - The pointer event that triggered the check.
+     */
     checkDragSequenceToStart(event) {
         const pointerPosition = event.getPosition();
         if (!this.isDragStarted && this.pointerDownElement) {
@@ -7360,12 +7691,25 @@ class DragAndDropBase {
             }
         }
     }
+    /**
+     * Handles the pointer up event at the end of the drag sequence.
+     * It checks if the drag has started and calls the onPointerUp method.
+     * It also ends the drag sequence by resetting the state and removing event listeners.
+     * This method is called when the user releases the mouse button or lifts their finger from the touch screen.
+     * @param event - The pointer event that triggered the up action.
+     */
     onPointerUpEvent = (event) => {
         if (this.isDragStarted) {
             this.onPointerUp(new IPointerUpEvent(event));
         }
         this.endDragSequence();
     };
+    /**
+     * Ends the drag sequence by resetting the state and removing event listeners.
+     * It sets the isDragStarted flag to false, clears the pointerDownElement,
+     * and resets the moveHandler to checkDragSequenceToStart.
+     * It also removes all mouse and touch event listeners that were added during the drag sequence.
+     */
     endDragSequence() {
         this.isDragStarted = false;
         this.pointerDownElement = null;
@@ -7807,7 +8151,7 @@ let MinimapDragPreparationExecution = class MinimapDragPreparationExecution {
     getFlowRect() {
         return RectExtensions.fromElement(this.flowHost);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MinimapDragPreparationExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MinimapDragPreparationExecution, deps: [{ token: FComponentsStore }, { token: i1$1.FMediator }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MinimapDragPreparationExecution });
 };
 MinimapDragPreparationExecution = __decorate([
@@ -7815,7 +8159,7 @@ MinimapDragPreparationExecution = __decorate([
 ], MinimapDragPreparationExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MinimapDragPreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }, { type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i1$1.FMediator }, { type: FDraggableDataContext }] });
 
 const MINIMAP_DRAG_PREPARATION_PROVIDERS = [
     MinimapDragPreparationExecution,
@@ -8251,6 +8595,9 @@ class ClearSelectionRequest {
     static fToken = Symbol('ClearSelectionRequest');
 }
 
+/**
+ * Execution that clears the selection of items in the FDraggableDataContext.
+ */
 let ClearSelectionExecution = class ClearSelectionExecution {
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
@@ -8280,11 +8627,16 @@ class GetNormalizedElementRectRequest {
     }
 }
 
+/**
+ * Execution that retrieves the normalized rectangle of an element.
+ * It calculates the rectangle based on the element's position and size,
+ * adjusting for the canvas transformation and element offsets.
+ */
 let GetNormalizedElementRectExecution = class GetNormalizedElementRectExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    _fMediator = inject(FMediator);
+    _store = inject(FComponentsStore);
+    _mediator = inject(FMediator);
     get _transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     handle(request) {
         const systemRect = this._getElementRoundedRect(request);
@@ -8310,7 +8662,7 @@ let GetNormalizedElementRectExecution = class GetNormalizedElementRectExecution
         return RoundedRect.fromRect(RectExtensions.fromElement(request.element));
     }
     _normalizePosition(rect) {
-        return this._fMediator.execute(new GetNormalizedPointRequest(rect));
+        return this._mediator.execute(new GetNormalizedPointRequest(rect));
     }
     _unscaleSize(rect) {
         return SizeExtensions.initialize(rect.width / this._transform.scale, rect.height / this._transform.scale);
@@ -8331,37 +8683,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Execution that retrieves elements that can be selected in the Flow, along with their bounding rectangles.
+ * It filters out elements that are already selected in the FDraggableDataContext.
+ */
 let GetCanBeSelectedItemsExecution = class GetCanBeSelectedItemsExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
+    _mediator = inject(FMediator);
+    _store = inject(FComponentsStore);
     _fDraggableDataContext = inject(FDraggableDataContext);
     get fNodes() {
-        return this._fComponentsStore.fNodes;
+        return this._store.fNodes;
     }
     get fConnections() {
-        return this._fComponentsStore.fConnections;
+        return this._store.fConnections;
     }
     get transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     handle() {
         return [...this.getNodesWithRects(), ...this.getConnectionsWithRects()].filter((x) => {
             return !this._fDraggableDataContext.selectedItems.includes(x.element);
         });
     }
+    /**
+     * Retrieves nodes with their bounding rectangles that can be selected.
+     * @private
+     */
     getNodesWithRects() {
         return this.fNodes.filter((x) => !x.fSelectionDisabled).map((x) => {
             return {
                 element: x,
-                fRect: RectExtensions.mult(this._fMediator.execute(new GetNormalizedElementRectRequest(x.hostElement)), this.transform.scale)
+                fRect: RectExtensions.mult(this._mediator.execute(new GetNormalizedElementRectRequest(x.hostElement)), this.transform.scale)
             };
         });
     }
+    /**
+     * Retrieves connections with their bounding rectangles that can be selected.
+     * @private
+     */
     getConnectionsWithRects() {
         return this.fConnections.filter((x) => !x.fSelectionDisabled).map((x) => {
             return {
                 element: x,
-                fRect: RectExtensions.mult(this._fMediator.execute(new GetNormalizedElementRectRequest(x.boundingElement)), this.transform.scale)
+                fRect: RectExtensions.mult(this._mediator.execute(new GetNormalizedElementRectRequest(x.boundingElement)), this.transform.scale)
             };
         });
     }
@@ -8379,6 +8743,9 @@ class GetCurrentSelectionRequest {
     static fToken = Symbol('GetCurrentSelectionRequest');
 }
 
+/**
+ * Execution that retrieves the current selection of items in the FDraggableDataContext.
+ */
 let GetCurrentSelectionExecution = class GetCurrentSelectionExecution {
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle() {
@@ -8425,23 +8792,26 @@ class SelectRequest {
     }
 }
 
+/**
+ * Execution that handles the selection of nodes and connections in the FFlow.
+ */
 let SelectExecution = class SelectExecution {
     _fDraggableDataContext = inject(FDraggableDataContext);
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         this._fDraggableDataContext.selectedItems.forEach((x) => {
             x.unmarkAsSelected();
         });
         this._fDraggableDataContext.selectedItems = [];
         request.nodes.forEach((key) => {
-            const node = this._fComponentsStore.fNodes.find((x) => x.fId === key);
+            const node = this._store.fNodes.find((x) => x.fId() === key);
             if (node) {
                 node.markAsSelected();
                 this._fDraggableDataContext.selectedItems.push(node);
             }
         });
         request.connections.forEach((key) => {
-            const connection = this._fComponentsStore.fConnections.find((x) => x.fId === key);
+            const connection = this._store.fConnections.find((x) => x.fId() === key);
             if (connection) {
                 connection.markAsSelected();
                 this._fDraggableDataContext.selectedItems.push(connection);
@@ -8463,19 +8833,23 @@ class SelectAllRequest {
     static fToken = Symbol('SelectAllRequest');
 }
 
+/**
+ * Execution that selects all components in the FComponentsStore.
+ * It marks all nodes and connections as selected and updates the selected items in the FDraggableDataContext.
+ */
 let SelectAllExecution = class SelectAllExecution {
     _fDraggableDataContext = inject(FDraggableDataContext);
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         this._fDraggableDataContext.selectedItems.forEach((x) => {
             x.unmarkAsSelected();
         });
         this._fDraggableDataContext.selectedItems = [];
-        this._fComponentsStore.fNodes.forEach((x) => {
+        this._store.fNodes.forEach((x) => {
             x.markAsSelected();
             this._fDraggableDataContext.selectedItems.push(x);
         });
-        this._fComponentsStore.fConnections.forEach((x) => {
+        this._store.fConnections.forEach((x) => {
             x.markAsSelected();
             this._fDraggableDataContext.selectedItems.push(x);
         });
@@ -8514,6 +8888,10 @@ class MoveFrontElementsBeforeTargetElementRequest {
     }
 }
 
+/**
+ * Execution that moves elements in the FItemsContainer before a target element.
+ * It removes elements that should not be in front and inserts them before the target element.
+ */
 let MoveFrontElementsBeforeTargetElementExecution = class MoveFrontElementsBeforeTargetElementExecution {
     handle(request) {
         const elementsToMove = [];
@@ -8556,8 +8934,12 @@ class GetDeepChildrenNodesAndGroupsRequest {
     }
 }
 
+/**
+ * Execution that retrieves all deep children nodes and groups from the FComponentsStore.
+ * It traverses the node hierarchy to find all descendants of a given node.
+ */
 let GetDeepChildrenNodesAndGroupsExecution = class GetDeepChildrenNodesAndGroupsExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         return this._getChildrenNodes(request.fId);
     }
@@ -8566,9 +8948,9 @@ let GetDeepChildrenNodesAndGroupsExecution = class GetDeepChildrenNodesAndGroups
             throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fId);
         }
         visited.add(fId);
-        const directChildren = this._fComponentsStore.fNodes.filter((x) => x.fParentId === fId);
+        const directChildren = this._store.fNodes.filter((x) => x.fParentId === fId);
         return directChildren.reduce((result, x) => {
-            return result.concat(this._getChildrenNodes(x.fId, visited));
+            return result.concat(this._getChildrenNodes(x.fId(), visited));
         }, directChildren);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -8581,11 +8963,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Execution that updates the layers of an item and its children in the FCanvas.
+ * It handles different item containers (groups, nodes, connections) and updates their layers accordingly.
+ */
 let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
+    _mediator = inject(FMediator);
     get _fCanvas() {
-        return this._fComponentsStore.fCanvas;
+        return this._store.fCanvas;
     }
     get _fGroupsContainer() {
         return this._fCanvas.fGroupsContainer().nativeElement;
@@ -8612,7 +8998,7 @@ let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExec
         }
     }
     _handleGroup(request) {
-        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId);
+        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId());
         const childrenGroups = this._getChildrenGroups(childrenNodesAndGroups);
         this._updateLayers(this._fGroupsContainer, request.item.hostElement, childrenGroups);
         const childrenNodes = this._getChildrenNodes(childrenNodesAndGroups);
@@ -8621,7 +9007,7 @@ let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExec
         }
     }
     _handleNode(request) {
-        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId);
+        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId());
         const childrenNodes = this._getChildrenNodes(childrenNodesAndGroups);
         this._updateLayers(request.itemContainer, request.item.hostElement, childrenNodes);
     }
@@ -8632,7 +9018,7 @@ let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExec
         const allElements = Array.from(itemContainer.children);
         const targetIndex = allElements.findIndex((x) => x === item);
         if (this._isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront)) {
-            this._fMediator.execute(new MoveFrontElementsBeforeTargetElementRequest(itemContainer, allElements, elementsThatShouldBeInFront, targetIndex));
+            this._mediator.execute(new MoveFrontElementsBeforeTargetElementRequest(itemContainer, allElements, elementsThatShouldBeInFront, targetIndex));
         }
     }
     _isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront) {
@@ -8654,7 +9040,7 @@ let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExec
             .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
     }
     _getChildrenNodesAndGroups(fId) {
-        return this._fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId)).map((x) => x.hostElement);
+        return this._mediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId)).map((x) => x.hostElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdateItemAndChildrenLayersExecution });
@@ -8666,25 +9052,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Execution that selects a node and updates its layer along with its children.
+ * It checks if the node is already selected, and if not, it marks it as selected
+ * and updates the layers of the node and its children.
+ */
 let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution {
-    fDraggableDataContext;
-    fMediator;
-    constructor(fDraggableDataContext, fMediator) {
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fMediator = fMediator;
-    }
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    _mediator = inject(FMediator);
     handle(request) {
         this.selectNodeIfNotSelected(request.fNode);
-        this.fMediator.execute(new UpdateItemAndChildrenLayersRequest(request.fNode, request.fNode.hostElement.parentElement));
+        this._mediator.execute(new UpdateItemAndChildrenLayersRequest(request.fNode, request.fNode.hostElement.parentElement));
     }
     selectNodeIfNotSelected(fNode) {
-        if (!this.fDraggableDataContext.selectedItems.includes(fNode) && !fNode.fSelectionDisabled) {
-            this.fDraggableDataContext.selectedItems.push(fNode);
+        if (!this._fDraggableDataContext.selectedItems.includes(fNode) && !fNode.fSelectionDisabled) {
+            this._fDraggableDataContext.selectedItems.push(fNode);
             fNode.markAsSelected();
-            this.fDraggableDataContext.isSelectedChanged = true;
+            this._fDraggableDataContext.isSelectedChanged = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectAndUpdateNodeLayerExecution });
 };
 SelectAndUpdateNodeLayerExecution = __decorate([
@@ -8692,8 +9079,11 @@ SelectAndUpdateNodeLayerExecution = __decorate([
 ], SelectAndUpdateNodeLayerExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }, { type: i2$1.FMediator }] });
+        }] });
 
+/**
+ * This module provides a collection of executions related to selection features in the FFlow domain.
+ */
 const F_SELECTION_FEATURES = [
     ClearSelectionExecution,
     GetCanBeSelectedItemsExecution,
@@ -8703,11 +9093,15 @@ const F_SELECTION_FEATURES = [
     SelectAndUpdateNodeLayerExecution
 ];
 
+/**
+ * Execution that emits a selection change event when the selection changes.
+ * It retrieves the current selection and emits it through the FSelectionChangeEvent.
+ */
 let EmitSelectionChangeEventExecution = class EmitSelectionChangeEventExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
+    _mediator = inject(FMediator);
+    _store = inject(FComponentsStore);
     get _fSelectionChange() {
-        return this._fComponentsStore.fDraggable.fSelectionChange;
+        return this._store.fDraggable.fSelectionChange;
     }
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
@@ -8716,10 +9110,10 @@ let EmitSelectionChangeEventExecution = class EmitSelectionChangeEventExecution
         }
         this._emitSelectionChange(this._getSelection());
         this._fDraggableDataContext.isSelectedChanged = false;
-        this._fMediator.execute(new NotifyTransformChangedRequest());
+        this._mediator.execute(new NotifyTransformChangedRequest());
     }
     _getSelection() {
-        return this._fMediator.execute(new GetCurrentSelectionRequest());
+        return this._mediator.execute(new GetCurrentSelectionRequest());
     }
     _emitSelectionChange(selection) {
         this._fSelectionChange.emit(new FSelectionChangeEvent(selection.fNodeIds, selection.fGroupIds, selection.fConnectionIds));
@@ -8738,10 +9132,13 @@ class EndDragSequenceRequest {
     static fToken = Symbol('EndDragSequenceRequest');
 }
 
+/**
+ * Execution that handles the end of a drag sequence.
+ */
 let EndDragSequenceExecution = class EndDragSequenceExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     get _hostElement() {
-        return this._fComponentsStore.fDraggable.hostElement;
+        return this._store.fDraggable.hostElement;
     }
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
@@ -8750,7 +9147,7 @@ let EndDragSequenceExecution = class EndDragSequenceExecution {
         this._emitDragEnded();
     }
     _emitDragEnded() {
-        this._fComponentsStore.fDraggable?.fDragEnded?.emit();
+        this._store.fDraggable?.fDragEnded?.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EndDragSequenceExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EndDragSequenceExecution });
@@ -8770,10 +9167,15 @@ class OnPointerMoveRequest {
     }
 }
 
+/**
+ * Execution that handles pointer move events during a drag operation.
+ * It calculates the difference between the current pointer position and the position
+ * when the drag started, and updates the draggable items accordingly.
+ */
 let OnPointerMoveExecution = class OnPointerMoveExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     get _hostElement() {
-        return this._fComponentsStore.fDraggable.hostElement;
+        return this._store.fDraggable.hostElement;
     }
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
@@ -8806,6 +9208,9 @@ class InitializeDragSequenceRequest {
     static fToken = Symbol('InitializeDragSequenceRequest');
 }
 
+/**
+ * Execution that initializes the drag sequence by resetting the FDraggableDataContext.
+ */
 let InitializeDragSequenceExecution = class InitializeDragSequenceExecution {
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
@@ -8825,10 +9230,13 @@ class IsDragStartedRequest {
     static fToken = Symbol('IsDragStartedRequest');
 }
 
+/**
+ * Execution that checks if a drag operation has started.
+ */
 let IsDragStartedExecution = class IsDragStartedExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        return !!this._fComponentsStore.fDraggable?.isDragStarted;
+        return !!this._store.fDraggable?.isDragStarted;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsDragStartedExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsDragStartedExecution });
@@ -8848,22 +9256,25 @@ class StartDragSequenceRequest {
     static fToken = Symbol('StartDragSequenceRequest');
 }
 
+/**
+ * Execution that starts the drag sequence by adding a dragging class to the host element
+ */
 let StartDragSequenceExecution = class StartDragSequenceExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
+    _mediator = inject(FMediator);
+    _store = inject(FComponentsStore);
     _fDraggableDataContext = inject(FDraggableDataContext);
     get _hostElement() {
-        return this._fComponentsStore.fDraggable.hostElement;
+        return this._store.fDraggable.hostElement;
     }
     handle(request) {
         if (this._fDraggableDataContext.draggableItems.length > 0) {
             this._hostElement.classList.add(F_CSS_CLASS.DRAG_AND_DROP.DRAGGING);
-            this._fMediator.execute(new EmitSelectionChangeEventRequest());
+            this._mediator.execute(new EmitSelectionChangeEventRequest());
             this._emitDragStarted();
         }
     }
     _emitDragStarted() {
-        this._fComponentsStore.fDraggable?.fDragStarted?.emit({
+        this._store.fDraggable?.fDragStarted?.emit({
             fEventType: this._fDraggableDataContext.draggableItems[0].fEventType,
             fData: { ...this._fDraggableDataContext.draggableItems[0].fData }
         });
@@ -8878,12 +9289,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Execution that prepares the drag sequence by invoking the prepareDragSequence method on each draggable item.
+ */
 let PrepareDragSequenceExecution = class PrepareDragSequenceExecution {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
         this._callPrepareDragSequence();
-        this._fMediator.execute(new StartDragSequenceRequest());
+        this._mediator.execute(new StartDragSequenceRequest());
     }
     _callPrepareDragSequence() {
         this._fDraggableDataContext.draggableItems.forEach((item) => {
@@ -8904,10 +9318,13 @@ class RemoveDndFromStoreRequest {
     static fToken = Symbol('RemoveDndFromStoreRequest');
 }
 
+/**
+ * Execution that removes the drag and drop directive from the FComponentsStore.
+ */
 let RemoveDndFromStoreExecution = class RemoveDndFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fDraggable = undefined;
+        this._store.fDraggable = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveDndFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveDndFromStoreExecution });
@@ -8919,6 +9336,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Collection of all FDraggable feature executions.
+ */
 const F_DRAGGABLE_FEATURES = [
     AddDndToStoreExecution,
     EmitSelectionChangeEventExecution,
@@ -8939,10 +9359,13 @@ class AddFlowToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds a Flow to the FComponentsStore.
+ */
 let AddFlowToStoreExecution = class AddFlowToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fFlow = request.fComponent;
+        this._store.fFlow = request.fComponent;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddFlowToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddFlowToStoreExecution });
@@ -8958,10 +9381,13 @@ class GetFlowRequest {
     static fToken = Symbol('GetFlowRequest');
 }
 
+/**
+ * Execution that retrieves the current Flow from the FComponentsStore.
+ */
 let GetFlowExecution = class GetFlowExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        const result = this._fComponentsStore.fFlow;
+        const result = this._store.fFlow;
         if (!result) {
             throw new Error(`Flow not found in store`);
         }
@@ -8981,10 +9407,13 @@ class GetFlowHostElementRequest {
     static fToken = Symbol('GetFlowHostElementRequest');
 }
 
+/**
+ * Execution that retrieves the Flow host element from the FComponentsStore.
+ */
 let GetFlowHostElementExecution = class GetFlowHostElementExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle() {
-        return this._fComponentsStore.flowHost;
+        return this._store.flowHost;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetFlowHostElementExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetFlowHostElementExecution });
@@ -9000,14 +9429,17 @@ class GetFlowStateConnectionsRequest {
     static fToken = Symbol('GetFlowStateConnectionsRequest');
 }
 
+/**
+ * Execution that retrieves the current Flow state connections from the FComponentsStore.
+ */
 let GetFlowStateConnectionsExecution = class GetFlowStateConnectionsExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        return this._fComponentsStore.fConnections.map(this._mapToConnectionState);
+        return this._store.fConnections.map(this._mapToConnectionState);
     }
     _mapToConnectionState(x) {
         return {
-            id: x.fId,
+            id: x.fId(),
             fOutputId: x.fOutputId,
             fInputId: x.fInputId,
             fType: x.fType,
@@ -9033,15 +9465,15 @@ class GetFlowStateNodesRequest {
     }
 }
 
+/**
+ * Execution that retrieves the state of Flow nodes, including their position, size, inputs, outputs, and selection status.
+ */
 let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
-    fComponentsStore;
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
+    _store = inject(FComponentsStore);
     handle(request) {
-        return this.fComponentsStore.fNodes.filter((x) => x instanceof request.type).map((x) => {
+        return this._store.fNodes.filter((x) => x instanceof request.type).map((x) => {
             return {
-                id: x.fId,
+                id: x.fId(),
                 parent: x.fParentId,
                 position: x.position,
                 size: x.size,
@@ -9052,7 +9484,7 @@ let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
         });
     }
     _getOutputs(hostElement) {
-        return this.fComponentsStore.fOutputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
+        return this._store.fOutputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
             return {
                 id: x.fId,
                 fConnectableSide: x.fConnectableSide
@@ -9060,14 +9492,14 @@ let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
         });
     }
     _getInputs(hostElement) {
-        return this.fComponentsStore.fInputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
+        return this._store.fInputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
             return {
                 id: x.fId,
                 fConnectableSide: x.fConnectableSide
             };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetFlowStateNodesExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetFlowStateNodesExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetFlowStateNodesExecution });
 };
 GetFlowStateNodesExecution = __decorate([
@@ -9075,22 +9507,25 @@ GetFlowStateNodesExecution = __decorate([
 ], GetFlowStateNodesExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetFlowStateNodesExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
+        }] });
 
 class GetFlowStateRequest {
     static fToken = Symbol('GetFlowStateRequest');
 }
 
+/**
+ * Execution that retrieves the current state of the Flow, including its position, scale, nodes, groups, and connections.
+ */
 let GetFlowStateExecution = class GetFlowStateExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
+    _mediator = inject(FMediator);
+    _store = inject(FComponentsStore);
     handle(payload) {
         return {
-            position: this._getCanvasPosition(this._fComponentsStore.fCanvas.transform),
-            scale: this._fComponentsStore.fCanvas.transform.scale,
-            nodes: this._fMediator.execute(new GetFlowStateNodesRequest(FNodeDirective)),
-            groups: this._fMediator.execute(new GetFlowStateNodesRequest(FGroupDirective)),
-            connections: this._fMediator.execute(new GetFlowStateConnectionsRequest())
+            position: this._getCanvasPosition(this._store.fCanvas.transform),
+            scale: this._store.fCanvas.transform.scale,
+            nodes: this._mediator.execute(new GetFlowStateNodesRequest(FNodeDirective)),
+            groups: this._mediator.execute(new GetFlowStateNodesRequest(FGroupDirective)),
+            connections: this._mediator.execute(new GetFlowStateConnectionsRequest())
         };
     }
     _getCanvasPosition(transform) {
@@ -9106,6 +9541,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Providers for retrieving the current Flow state, including nodes, groups, and connections.
+ */
 const GET_FLOW_STATE_PROVIDERS = [
     GetFlowStateExecution,
     GetFlowStateNodesExecution,
@@ -9116,10 +9554,13 @@ class RemoveFlowFromStoreRequest {
     static fToken = Symbol('RemoveFlowFromStoreRequest');
 }
 
+/**
+ * Execution that removes a Flow from the FComponentsStore.
+ */
 let RemoveFlowFromStoreExecution = class RemoveFlowFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fFlow = undefined;
+        this._store.fFlow = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveFlowFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveFlowFromStoreExecution });
@@ -9131,6 +9572,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Providers for managing the Flow in the FComponentsStore.
+ * This includes adding, retrieving, and removing the Flow,
+ * as well as getting the Flow host element and its state.
+ */
 const F_FLOW_FEATURES = [
     AddFlowToStoreExecution,
     GetFlowExecution,
@@ -9147,10 +9593,13 @@ class AddLineAlignmentToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds a line alignment to the FComponentsStore.
+ */
 let AddLineAlignmentToStoreExecution = class AddLineAlignmentToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fLineAlignment = request.fComponent;
+        this._store.fLineAlignment = request.fComponent;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddLineAlignmentToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddLineAlignmentToStoreExecution });
@@ -9166,10 +9615,13 @@ class RemoveLineAlignmentFromStoreRequest {
     static fToken = Symbol('RemoveLineAlignmentFromStoreRequest');
 }
 
+/**
+ * Execution that removes a line alignment from the FComponentsStore.
+ */
 let RemoveLineAlignmentFromStoreExecution = class RemoveLineAlignmentFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fLineAlignment = undefined;
+        this._store.fLineAlignment = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveLineAlignmentFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveLineAlignmentFromStoreExecution });
@@ -9181,6 +9633,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Collection of all FLineAlignment feature executions.
+ * These executions handle the addition and removal of line alignments
+ * in the FComponentsStore.
+ */
 const F_LINE_ALIGNMENT_FEATURES = [
     AddLineAlignmentToStoreExecution,
     RemoveLineAlignmentFromStoreExecution
@@ -9194,10 +9651,13 @@ class AddNodeToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds a Node to the FComponentsStore.
+ */
 let AddNodeToStoreExecution = class AddNodeToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.addComponent(this._fComponentsStore.fNodes, request.fComponent);
+        this._store.addComponent(this._store.fNodes, request.fComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddNodeToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddNodeToStoreExecution });
@@ -9217,18 +9677,21 @@ class CalculateInputConnectionsRequest {
     }
 }
 
+/**
+ * Execution that calculates input connections for a given FNode.
+ */
 let CalculateInputConnectionsExecution = class CalculateInputConnectionsExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         return this._calculateConnections(new Set(this._calculateConnectors(request.fNode)));
     }
     _calculateConnectors(fNode) {
-        return this._fComponentsStore.fInputs
+        return this._store.fInputs
             .filter((x) => fNode.isContains(x.hostElement))
             .map((x) => x.fId);
     }
     _calculateConnections(ids) {
-        return this._fComponentsStore.fConnections
+        return this._store.fConnections
             .filter((x) => ids.has(x.fInputId));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateInputConnectionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -9245,13 +9708,17 @@ class CalculateNodesBoundingBoxRequest {
     static fToken = Symbol('CalculateNodesBoundingBoxRequest');
 }
 
+/**
+ * Execution that calculates the bounding box of all nodes in the FComponentsStore.
+ * It retrieves the rectangles of each node's host element and computes their union.
+ */
 let CalculateNodesBoundingBoxExecution = class CalculateNodesBoundingBoxExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         return RectExtensions.union(this._getNodesRects());
     }
     _getNodesRects() {
-        return this._fComponentsStore.fNodes.map((x) => {
+        return this._store.fNodes.map((x) => {
             return this._getElementRect(x.hostElement);
         });
     }
@@ -9276,10 +9743,15 @@ class CalculateNodesBoundingBoxNormalizedPositionRequest {
     }
 }
 
+/**
+ * Execution that calculates the bounding box of all nodes in the FComponentsStore
+ * and returns their normalized positions.
+ * It retrieves the rectangles of each node's host element and computes their union.
+ */
 let CalculateNodesBoundingBoxNormalizedPositionExecution = class CalculateNodesBoundingBoxNormalizedPositionExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        return RectExtensions.union(this._getNodesRects(request.fNodes || this._fComponentsStore.fNodes));
+        return RectExtensions.union(this._getNodesRects(request.fNodes || this._store.fNodes));
     }
     _getNodesRects(fNodes) {
         return fNodes.map((x) => {
@@ -9307,18 +9779,21 @@ class CalculateOutputConnectionsRequest {
     }
 }
 
+/**
+ * Execution that calculates output connections for a given FNode.
+ */
 let CalculateOutputConnectionsExecution = class CalculateOutputConnectionsExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         return this._calculateConnections(new Set(this._calculateConnectors(request.fNode)));
     }
     _calculateConnectors(fNode) {
-        return this._fComponentsStore.fOutputs
+        return this._store.fOutputs
             .filter((x) => fNode.isContains(x.hostElement))
             .map((x) => x.fId);
     }
     _calculateConnections(ids) {
-        return this._fComponentsStore.fConnections
+        return this._store.fConnections
             .filter((x) => ids.has(x.fOutputId));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateOutputConnectionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -9341,6 +9816,10 @@ class GetNodePaddingRequest {
     }
 }
 
+/**
+ * Execution that retrieves the padding data of a Node.
+ * If the Node does not include padding, it returns [0, 0, 0, 0].
+ */
 let GetNodePaddingExecution = class GetNodePaddingExecution {
     _browser = inject(BrowserService);
     handle(request) {
@@ -9369,10 +9848,13 @@ class GetNodesRequest {
     static fToken = Symbol('GetNodesRequest');
 }
 
+/**
+ * Execution that retrieves all nodes from the FComponentsStore.
+ */
 let GetNodesExecution = class GetNodesExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        return this._fComponentsStore.fNodes;
+        return this._store.fNodes;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetNodesExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetNodesExecution });
@@ -9392,17 +9874,20 @@ class GetParentNodesRequest {
     }
 }
 
+/**
+ * Execution that retrieves all parent nodes of a given node from the FComponentsStore.
+ */
 let GetParentNodesExecution = class GetParentNodesExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         return this._getParentNodes(request.fNode, new Set(), []);
     }
     _getParentNodes(fNode, visited, result) {
-        if (visited.has(fNode.fId)) {
-            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fNode.fId);
+        if (visited.has(fNode.fId())) {
+            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fNode.fId());
         }
-        visited.add(fNode.fId);
-        const parent = this._fComponentsStore.fNodes.find((x) => x.fId === fNode.fParentId);
+        visited.add(fNode.fId());
+        const parent = this._store.fNodes.find((x) => x.fId() === fNode.fParentId);
         if (!parent) {
             return result;
         }
@@ -9429,20 +9914,41 @@ class UpdateNodeWhenStateOrSizeChangedRequest {
     }
 }
 
+/**
+ * Execution that updates a node's connectors when its state or size changes.
+ */
 let UpdateNodeWhenStateOrSizeChangedExecution = class UpdateNodeWhenStateOrSizeChangedExecution {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
+    /**
+     * Handles the request to update the node's connectors based on state or size changes.
+     * It listens for resize events and recalculates the connectable sides of the connectors.
+     * @param request
+     */
     handle(request) {
         const { hostElement, connectors, stateChanges } = request.fComponent;
         new FChannelHub(new FResizeChannel(hostElement), stateChanges).pipe(notifyOnStart(), debounceTime(10)).listen(request.destroyRef, () => {
             this._calculateConnectorsConnectableSide(connectors, hostElement);
-            this._fMediator.execute(new NotifyDataChangedRequest());
+            this._mediator.execute(new NotifyDataChangedRequest());
         });
     }
+    /**
+     * Calculates the connectable side for each connector based on its position relative to the node host.
+     * @param fConnectors
+     * @param fNodeHost
+     * @private
+     */
     _calculateConnectorsConnectableSide(fConnectors, fNodeHost) {
         fConnectors.forEach((x) => {
             x.fConnectableSide = this._calculateConnectorConnectableSide(x, fNodeHost);
         });
     }
+    /**
+     * Calculates the connectable side of a connector based on its user-defined side or its position relative to the node host.
+     * @param fConnector
+     * @param fNodeHost
+     * @returns {EFConnectableSide}
+     * @private
+     */
     _calculateConnectorConnectableSide(fConnector, fNodeHost) {
         let result;
         if (fConnector.userFConnectableSide === EFConnectableSide.AUTO) {
@@ -9453,6 +9959,12 @@ let UpdateNodeWhenStateOrSizeChangedExecution = class UpdateNodeWhenStateOrSizeC
         }
         return result;
     }
+    /**
+     * Determines the side of the connector relative to the node host based on the minimum distance.
+     * @param fConnectorHost
+     * @param fNodeHost
+     * @private
+     */
     _getSideByDelta(fConnectorHost, fNodeHost) {
         let result;
         const childRect = RectExtensions.fromElement(fConnectorHost);
@@ -9494,10 +10006,13 @@ class RemoveNodeFromStoreRequest {
     }
 }
 
+/**
+ * Execution that removes a node from the FComponentsStore.
+ */
 let RemoveNodeFromStoreExecution = class RemoveNodeFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fNodes, request.fComponent);
+        this._store.removeComponent(this._store.fNodes, request.fComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveNodeFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveNodeFromStoreExecution });
@@ -9509,6 +10024,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * This file exports all the node-related executions that can be used in the F-Flow domain.
+ */
 const F_NODE_FEATURES = [
     AddNodeToStoreExecution,
     CalculateInputConnectionsExecution,
@@ -9532,10 +10050,13 @@ class AddZoomToStoreRequest {
 
 const F_ZOOM_TAG = 'F_ZOOM';
 
+/**
+ * Execution that adds a Zoom to the FComponentsStore.
+ */
 let AddZoomToStoreExecution = class AddZoomToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fComponents = {
+        this._store.fComponents = {
             [F_ZOOM_TAG]: request.fComponent
         };
     }
@@ -9553,10 +10074,13 @@ class RemoveZoomFromStoreRequest {
     static fToken = Symbol('RemoveZoomFromStoreRequest');
 }
 
+/**
+ * Execution that removes a Zoom from the FComponentsStore.
+ */
 let RemoveZoomFromStoreExecution = class RemoveZoomFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
-        this._fComponentsStore.fComponents = {
+        this._store.fComponents = {
             [F_ZOOM_TAG]: undefined
         };
     }
@@ -9574,10 +10098,13 @@ class ResetZoomRequest {
     static fToken = Symbol('ResetZoomRequest');
 }
 
+/**
+ * Execution that resets the zoom level of the FCanvas.
+ */
 let ResetZoomExecution = class ResetZoomExecution {
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     get _fCanvas() {
-        return this._fComponentsStore.fCanvas;
+        return this._store.fCanvas;
     }
     handle(request) {
         this._fCanvas.resetScale();
@@ -9608,20 +10135,24 @@ class SetZoomRequest {
     }
 }
 
+/**
+ * Execution that sets the zoom level of the FCanvas based on the provided request.
+ * It adjusts the zoom level by a specified step and direction, ensuring it stays within defined limits.
+ */
 let SetZoomExecution = class SetZoomExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
+    _mediator = inject(FMediator);
+    _store = inject(FComponentsStore);
     get _fHost() {
-        return this._fComponentsStore.fFlow?.hostElement;
+        return this._store.fFlow?.hostElement;
     }
     get _fCanvas() {
-        return this._fComponentsStore.fCanvas;
+        return this._store.fCanvas;
     }
     get _fZoomComponent() {
-        return this._fComponentsStore.fComponents[F_ZOOM_TAG];
+        return this._store.fComponents[F_ZOOM_TAG];
     }
     get _isDragStarted() {
-        return this._fMediator.execute(new IsDragStartedRequest());
+        return this._mediator.execute(new IsDragStartedRequest());
     }
     handle(request) {
         if (this._isDragStarted || !this._fZoomComponent) {
@@ -9648,6 +10179,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Collection of all FZoom feature executions.
+ * These executions handle the addition, removal, and resetting of zoom levels
+ * in the FComponentsStore.
+ */
 const F_ZOOM_FEATURES = [
     AddZoomToStoreExecution,
     RemoveZoomFromStoreExecution,
@@ -9659,12 +10195,17 @@ class SortNodeLayersRequest {
     static fToken = Symbol('SortNodeLayersRequest');
 }
 
+/**
+ * Execution that sorts node layers by their parent nodes in the FCanvas.
+ * It retrieves all groups, sorts their children nodes based on their current order,
+ * and moves them to maintain the correct hierarchy.
+ */
 let SortNodeLayersExecution = class SortNodeLayersExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
-    _fBrowser = inject(BrowserService);
+    _store = inject(FComponentsStore);
+    _mediator = inject(FMediator);
+    _browser = inject(BrowserService);
     get _fCanvas() {
-        return this._fComponentsStore.fCanvas;
+        return this._store.fCanvas;
     }
     get _fGroupsContainer() {
         return this._fCanvas.fGroupsContainer().nativeElement;
@@ -9681,20 +10222,20 @@ let SortNodeLayersExecution = class SortNodeLayersExecution {
         });
     }
     _getGroups() {
-        return this._fComponentsStore.fNodes
+        return this._store.fNodes
             .filter((x) => this._fGroupsContainer.contains(x.hostElement));
     }
     _getSortedChildrenNodes(parent) {
         const allElements = this._fNodeElements;
-        return this._getChildrenNodes(parent.fId)
+        return this._getChildrenNodes(parent.fId())
             .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
     }
     _getChildrenNodes(fId) {
-        return this._fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId))
+        return this._mediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId))
             .filter((x) => this._fNodesContainer.contains(x.hostElement)).map((x) => x.hostElement);
     }
     _moveChildrenNodes(sortedChildrenGroups) {
-        const fragment = this._fBrowser.document.createDocumentFragment();
+        const fragment = this._browser.document.createDocumentFragment();
         sortedChildrenGroups.forEach((childGroup) => {
             fragment.appendChild(childGroup); // Append automatically removes the element from its current position
         });
@@ -9719,10 +10260,15 @@ class SortItemsByParentRequest {
     }
 }
 
+/**
+ * Execution that sorts items by their parent nodes in the FItemsContainer.
+ * It retrieves all items within the container, sorts their children based on their current order,
+ * and moves them to maintain the correct hierarchy.
+ */
 let SortItemsByParentExecution = class SortItemsByParentExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
-    _fBrowser = inject(BrowserService);
+    _store = inject(FComponentsStore);
+    _mediator = inject(FMediator);
+    _browser = inject(BrowserService);
     _fItemsContainer;
     get _fItemElements() {
         return Array.from(this._fItemsContainer.children);
@@ -9734,22 +10280,22 @@ let SortItemsByParentExecution = class SortItemsByParentExecution {
         });
     }
     _getItemsOfContainer() {
-        return this._fComponentsStore.fNodes
+        return this._store.fNodes
             .filter((x) => this._fItemsContainer.contains(x.hostElement));
     }
     _getSortedChildrenItems(fItem) {
         const indexInContainer = this._fItemElements.indexOf(fItem.hostElement);
-        return this._getChildrenItems(fItem.fId)
+        return this._getChildrenItems(fItem.fId())
             .filter((child) => this._fItemElements.indexOf(child) < indexInContainer)
             .sort((a, b) => this._fItemElements.indexOf(a) - this._fItemElements.indexOf(b));
     }
     _getChildrenItems(fId) {
-        return this._fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId))
+        return this._mediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId))
             .filter((x) => this._fItemsContainer.contains(x.hostElement)).map((x) => x.hostElement);
     }
     _moveChildrenItems(sortedChildrenItems, parent) {
         let nextSibling = parent.hostElement.nextElementSibling;
-        const fragment = this._fBrowser.document.createDocumentFragment();
+        const fragment = this._browser.document.createDocumentFragment();
         sortedChildrenItems.forEach((child) => {
             fragment.appendChild(child); // Append automatically removes the element from its current position
         });
@@ -9769,19 +10315,26 @@ class SortItemLayersRequest {
     static fToken = Symbol('SortItemLayersRequest');
 }
 
+/**
+ * Execution that sorts item layers in the FCanvas by their parent nodes.
+ * This execution is registered to handle SortItemLayersRequest and
+ * ensures that items are sorted correctly within their parent nodes.
+ * It first sorts items by their parent nodes in the groups container,
+ * then sorts the node layers, and finally sorts items by their parent nodes in the nodes container.
+ */
 let SortItemLayersExecution = class SortItemLayersExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
+    _mediator = inject(FMediator);
     get _fCanvas() {
-        return this._fComponentsStore.fCanvas;
+        return this._store.fCanvas;
     }
     handle(request) {
-        if (!this._fComponentsStore.fCanvas) {
+        if (!this._store.fCanvas) {
             return;
         }
-        this._fMediator.execute(new SortItemsByParentRequest(this._fCanvas.fGroupsContainer().nativeElement));
-        this._fMediator.execute(new SortNodeLayersRequest());
-        this._fMediator.execute(new SortItemsByParentRequest(this._fCanvas.fNodesContainer().nativeElement));
+        this._mediator.execute(new SortItemsByParentRequest(this._fCanvas.fGroupsContainer().nativeElement));
+        this._mediator.execute(new SortNodeLayersRequest());
+        this._mediator.execute(new SortItemsByParentRequest(this._fCanvas.fNodesContainer().nativeElement));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortItemLayersExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortItemLayersExecution });
@@ -9836,6 +10389,12 @@ function LogExecutionTime(label) {
     };
 }
 
+/**
+ * This module provides a collection of common providers for the FFlow domain.
+ * It includes features related to canvas, connections, background, connectors,
+ * draggable elements, flow, line alignment, nodes, selection, zoom,
+ * and various utility executions.
+ */
 const COMMON_PROVIDERS = [
     ...F_CANVAS_FEATURES,
     ...F_CONNECTION_FEATURES,
@@ -10121,8 +10680,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive
         }] });
 
+/**
+ * Component representing a canvas in the F-Flow framework.
+ * It handles the rendering of nodes, connections, and groups,
+ * as well as user interactions such as zooming and panning.
+ * It extends the FCanvasBase class and implements OnInit and OnDestroy lifecycle hooks.
+ * It provides methods to manipulate the canvas, such as centering nodes or groups,
+ * fitting the canvas to the screen, and resetting the scale.
+ * It also emits events when the canvas changes, allowing other components to react to these changes.
+ */
 class FCanvasComponent extends FCanvasBase {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     _injector = inject(Injector);
     _flowId;
@@ -10141,41 +10709,69 @@ class FCanvasComponent extends FCanvasBase {
         return this._flowId;
     }
     ngOnInit() {
-        this._flowId = this._fMediator.execute(new GetFlowRequest()).fId();
-        this._fMediator.execute(new AddCanvasToStoreRequest(this));
+        this._flowId = this._mediator.execute(new GetFlowRequest()).fId();
+        this._mediator.execute(new AddCanvasToStoreRequest(this));
         this._positionChange();
         this._scaleChange();
         super.subscribeOnCanvasChange();
     }
     _positionChange() {
         effect(() => {
-            this._fMediator.execute(new InputCanvasPositionRequest(this.transform, this.position()));
+            this._mediator.execute(new InputCanvasPositionRequest(this.transform, this.position()));
         }, { injector: this._injector });
     }
     _scaleChange() {
         effect(() => {
-            this._fMediator.execute(new InputCanvasScaleRequest(this.transform, this.scale()));
+            this._mediator.execute(new InputCanvasScaleRequest(this.transform, this.scale()));
         }, { injector: this._injector });
     }
+    /**
+     * Redraws the canvas by applying the current transformation.
+     */
     redraw() {
-        this._fMediator.execute(new SetBackgroundTransformRequest(this.transform));
+        this._mediator.execute(new SetBackgroundTransformRequest(this.transform));
         this.hostElement.setAttribute("style", `transform: ${TransformModelExtensions.toString(this.transform)}`);
-        this._fMediator.execute(new NotifyTransformChangedRequest());
+        this._mediator.execute(new NotifyTransformChangedRequest());
     }
+    /**
+     * Redraws the canvas with an animation effect.
+     * This method applies a CSS transition to the canvas element,
+     * allowing for a smooth visual update of the canvas's transformation.
+     */
     redrawWithAnimation() {
-        this._fMediator.execute(new SetBackgroundTransformRequest(this.transform));
+        this._mediator.execute(new SetBackgroundTransformRequest(this.transform));
         this.hostElement.setAttribute("style", `transition: transform ${isMobile() ? 80 : 150}ms ease-in-out; transform: ${TransformModelExtensions.toString(this.transform)}`);
         transitionEnd(this.hostElement, () => this.redraw());
     }
+    /**
+     * Centers the specified group or node on the canvas.
+     * @param id - The ID of the group or node to center.
+     * @param animated - If true, the centering will be animated; otherwise, it will be instantaneous.
+     */
     centerGroupOrNode(id, animated = true) {
-        setTimeout(() => this._fMediator.execute(new CenterGroupOrNodeRequest(id, animated)));
+        setTimeout(() => this._mediator.execute(new CenterGroupOrNodeRequest(id, animated)));
     }
+    /**
+     * Fits the canvas to the screen by adjusting the scale and position.
+     * @param toCenter - paddings from the bounds of the canvas
+     * @param animated - If true, the fit will be animated; otherwise, it will be instantaneous.
+     */
     fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
-        setTimeout(() => this._fMediator.execute(new FitToFlowRequest(toCenter, animated)));
+        setTimeout(() => this._mediator.execute(new FitToFlowRequest(toCenter, animated)));
     }
+    /**
+     * Resets the scale and center all nodes and groups on the canvas.
+     * This method is used to restore the canvas to its default scale and position,
+     * allowing users to quickly return to a standard view of the canvas content.
+     * @param animated - If true, the reset will be animated; otherwise, it will be instantaneous.
+     * This is useful for providing a smooth user experience when resetting the view.
+     */
     resetScaleAndCenter(animated = true) {
-        setTimeout(() => this._fMediator.execute(new ResetScaleAndCenterRequest(animated)));
+        setTimeout(() => this._mediator.execute(new ResetScaleAndCenterRequest(animated)));
     }
+    /**
+     *  Gets the current scale of the canvas.
+     */
     getScale() {
         return this.transform.scale || 1;
     }
@@ -10185,8 +10781,15 @@ class FCanvasComponent extends FCanvasBase {
     setZoom(scale, toPosition = PointExtensions.initialize()) {
         this.setScale(scale, toPosition);
     }
+    /**
+     * Sets the scale of the canvas to a specified value.
+     * This method is used to zoom in or out of the canvas,
+     * allowing users to adjust the view of the canvas content.
+     * @param scale - The scale factor to set for the canvas.
+     * @param toPosition - The position to which the canvas should be centered after scaling.
+     */
     setScale(scale, toPosition = PointExtensions.initialize()) {
-        this._fMediator.execute(new UpdateScaleRequest(scale, toPosition));
+        this._mediator.execute(new UpdateScaleRequest(scale, toPosition));
     }
     /**
      *  @deprecated Method "resetZoom" is deprecated. Use "resetScale" instead. This method will be removed in version 18.0.0.`,
@@ -10194,16 +10797,20 @@ class FCanvasComponent extends FCanvasBase {
     resetZoom() {
         this.resetScale();
     }
+    /**
+     * Resets the scale of the canvas to its default value.
+     * This method is used to restore the canvas to its original scale.
+     */
     resetScale() {
-        this._fMediator.execute(new ResetScaleRequest());
+        this._mediator.execute(new ResetScaleRequest());
     }
     ngOnDestroy() {
-        this._fMediator.execute(new RemoveCanvasFromStoreRequest());
+        this._mediator.execute(new RemoveCanvasFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCanvasComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: FCanvasComponent, isStandalone: true, selector: "f-canvas", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
             { provide: F_CANVAS, useExisting: FCanvasComponent }
-        ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, isSignal: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, isSignal: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, isSignal: true }], 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 });
+        ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, isSignal: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, isSignal: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, isSignal: true }], 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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     Deprecated('setScale')
@@ -10217,7 +10824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         'class': 'f-component f-canvas',
                     }, providers: [
                         { provide: F_CANVAS, useExisting: FCanvasComponent }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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: ChangeDetectionStrategy.OnPush, 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}\n"] }]
         }], propDecorators: { setZoom: [], resetZoom: [] } });
 
 const F_CANVAS_PROVIDERS = [
@@ -10236,40 +10843,37 @@ class FMinimapData {
 }
 
 class FMinimapFlowDirective {
-    fMinSize = 1000;
-    _fMediator = inject(FMediator);
+    fMinSize = input(1000);
+    _mediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     get hostElement() {
         return this._elementReference.nativeElement;
     }
     model = new FMinimapData(this.hostElement);
     redraw() {
-        const { scale, viewBox } = this._fMediator.execute(new MinimapCalculateSvgScaleAndViewBoxRequest(this.hostElement, this.fMinSize));
+        const { scale, viewBox } = this._mediator.execute(new MinimapCalculateSvgScaleAndViewBoxRequest(this.hostElement, this.fMinSize()));
         this.model = new FMinimapData(this.hostElement, scale, viewBox);
         setRectToViewBox(viewBox, this.hostElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapFlowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FMinimapFlowDirective, selector: "svg[fMinimapFlow]", inputs: { fMinSize: "fMinSize" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FMinimapFlowDirective, selector: "svg[fMinimapFlow]", inputs: { fMinSize: { classPropertyName: "fMinSize", publicName: "fMinSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapFlowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'svg[fMinimapFlow]'
                 }]
-        }], propDecorators: { fMinSize: [{
-                type: Input
-            }] } });
+        }] });
 
 class FMinimapCanvasDirective {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     get hostElement() {
         return this._elementReference.nativeElement;
     }
     redraw() {
         this._clearCanvas();
-        this._fMediator.execute(new MinimapDrawNodesRequest())
-            .forEach((x) => {
+        this._mediator.execute(new MinimapDrawNodesRequest()).forEach((x) => {
             this.hostElement.appendChild(x);
         });
     }
@@ -10287,13 +10891,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class FMinimapViewDirective {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     get hostElement() {
         return this._elementReference.nativeElement;
     }
     redraw() {
-        setRectToElement(this._fMediator.execute(new MinimapCalculateViewBoxRequest()), this.hostElement);
+        setRectToElement(this._mediator.execute(new MinimapCalculateViewBoxRequest()), this.hostElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FMinimapViewDirective, selector: "rect[fMinimapView]", host: { classAttribute: "f-component f-minimap-view" }, ngImport: i0 });
@@ -10310,38 +10914,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class FMinimapComponent {
     _destroyRef = inject(DestroyRef);
-    _fMediator = inject(FMediator);
-    _fBrowser = inject(BrowserService);
-    fMinimapCanvas;
-    fMinimapFlow;
-    fMinimapView;
-    fMinSize = 1000;
+    _mediator = inject(FMediator);
+    _browser = inject(BrowserService);
+    _canvas = viewChild.required(FMinimapCanvasDirective);
+    _flow = viewChild.required(FMinimapFlowDirective);
+    _minimapView = viewChild.required(FMinimapViewDirective);
+    fMinSize = input(1000);
     ngAfterViewInit() {
         this._listenTransformChanges();
     }
     _listenTransformChanges() {
-        this._fMediator.execute(new ListenTransformChangesRequest()).pipe(notifyOnStart(), debounceTime(2)).listen(this._destroyRef, () => {
+        this._mediator.execute(new ListenTransformChangesRequest()).pipe(notifyOnStart(), debounceTime(2)).listen(this._destroyRef, () => {
             this._redraw();
         });
     }
     _redraw() {
-        if (!this._fBrowser.isBrowser()) {
+        if (!this._browser.isBrowser()) {
             return;
         }
-        this.fMinimapFlow.redraw();
-        this.fMinimapView.redraw();
-        this.fMinimapCanvas.redraw();
+        this._flow().redraw();
+        this._minimapView().redraw();
+        this._canvas().redraw();
     }
     onPointerDown(event) {
-        this._fMediator.execute(new MinimapDragPreparationRequest(event, this.fMinimapFlow.model));
+        this._mediator.execute(new MinimapDragPreparationRequest(event, this._flow().model));
     }
     onPointerUp(event) {
-        this._fMediator.execute(new MinimapDragFinalizeRequest(event));
+        this._mediator.execute(new MinimapDragFinalizeRequest(event));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FMinimapComponent, selector: "f-minimap", inputs: { fMinSize: "fMinSize" }, host: { classAttribute: "f-component f-minimap" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: FMinimapComponent, selector: "f-minimap", inputs: { fMinSize: { classPropertyName: "fMinSize", publicName: "fMinSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "f-component f-minimap" }, providers: [
             { provide: F_BEFORE_MAIN_PLUGIN, useExisting: FMinimapComponent },
-        ], viewQueries: [{ propertyName: "fMinimapCanvas", first: true, predicate: FMinimapCanvasDirective, descendants: true, static: true }, { propertyName: "fMinimapFlow", first: true, predicate: FMinimapFlowDirective, descendants: true, static: true }, { propertyName: "fMinimapView", first: true, predicate: FMinimapViewDirective, descendants: true, static: true }], exportAs: ["fComponent"], ngImport: i0, template: "<svg fMinimapFlow width=\"100%\" height=\"100%\" fLockedContext [fMinSize]=\"fMinSize\">\n  <g fMinimapCanvas></g>\n  <rect fMinimapView x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" stroke=\"none\"/>\n</svg>\n\n", styles: [":host{display:block;position:absolute}:host svg{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: FMinimapCanvasDirective, selector: "g[fMinimapCanvas]" }, { kind: "directive", type: FMinimapViewDirective, selector: "rect[fMinimapView]" }, { kind: "directive", type: FMinimapFlowDirective, selector: "svg[fMinimapFlow]", inputs: ["fMinSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "_canvas", first: true, predicate: FMinimapCanvasDirective, descendants: true, isSignal: true }, { propertyName: "_flow", first: true, predicate: FMinimapFlowDirective, descendants: true, isSignal: true }, { propertyName: "_minimapView", first: true, predicate: FMinimapViewDirective, descendants: true, isSignal: true }], exportAs: ["fComponent"], ngImport: i0, template: "<svg fMinimapFlow width=\"100%\" height=\"100%\" fLockedContext [fMinSize]=\"fMinSize()\">\n  <g fMinimapCanvas></g>\n  <rect fMinimapView x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" stroke=\"none\"/>\n</svg>\n\n", styles: [":host{display:block;position:absolute}:host svg{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: FMinimapCanvasDirective, selector: "g[fMinimapCanvas]" }, { kind: "directive", type: FMinimapViewDirective, selector: "rect[fMinimapView]" }, { kind: "directive", type: FMinimapFlowDirective, selector: "svg[fMinimapFlow]", inputs: ["fMinSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapComponent, decorators: [{
             type: Component,
@@ -10349,19 +10953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         'class': 'f-component f-minimap',
                     }, providers: [
                         { provide: F_BEFORE_MAIN_PLUGIN, useExisting: FMinimapComponent },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg fMinimapFlow width=\"100%\" height=\"100%\" fLockedContext [fMinSize]=\"fMinSize\">\n  <g fMinimapCanvas></g>\n  <rect fMinimapView x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" stroke=\"none\"/>\n</svg>\n\n", styles: [":host{display:block;position:absolute}:host svg{overflow:hidden}\n"] }]
-        }], propDecorators: { fMinimapCanvas: [{
-                type: ViewChild,
-                args: [FMinimapCanvasDirective, { static: true }]
-            }], fMinimapFlow: [{
-                type: ViewChild,
-                args: [FMinimapFlowDirective, { static: true }]
-            }], fMinimapView: [{
-                type: ViewChild,
-                args: [FMinimapViewDirective, { static: true }]
-            }], fMinSize: [{
-                type: Input
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg fMinimapFlow width=\"100%\" height=\"100%\" fLockedContext [fMinSize]=\"fMinSize()\">\n  <g fMinimapCanvas></g>\n  <rect fMinimapView x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" stroke=\"none\"/>\n</svg>\n\n", styles: [":host{display:block;position:absolute}:host svg{overflow:hidden}\n"] }]
+        }] });
 
 const F_MINIMAP_PROVIDERS = [
     FMinimapComponent,
@@ -10468,7 +11061,7 @@ class FFlowComponent extends FFlowBase {
             ...COMMON_PROVIDERS,
             ...F_DRAGGABLE_PROVIDERS,
             { provide: F_FLOW, useExisting: FFlowComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content select=\"f-minimap\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FFlowComponent, decorators: [{
             type: Component,
@@ -10483,7 +11076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ...COMMON_PROVIDERS,
                         ...F_DRAGGABLE_PROVIDERS,
                         { provide: F_FLOW, useExisting: FFlowComponent },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content select=\"f-minimap\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"] }]
         }] });
 
 const F_FLOW_PROVIDERS = [
@@ -10548,8 +11141,14 @@ class FZoomDirective extends FZoomBase {
         if (targetElement?.closest('[fLockedContext]')) {
             return;
         }
-        this.setZoom(PointExtensions.initialize(event.clientX, event.clientY), this.step, this._calculateDirection(event.deltaY), false);
+        const step = this._normalizeWheelStep(event.deltaY);
+        this.setZoom(PointExtensions.initialize(event.clientX, event.clientY), step, this._calculateDirection(event.deltaY), false);
     };
+    _normalizeWheelStep(deltaY) {
+        const intensity = Math.abs(deltaY) / 100;
+        const normalized = Math.max(0.1, Math.min(intensity, 1));
+        return this.step * normalized;
+    }
     _calculateDirection(deltaY) {
         return deltaY > 0 ? EFZoomDirection.ZOOM_OUT : EFZoomDirection.ZOOM_IN;
     }
@@ -10691,5 +11290,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * 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, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, BaseConnectionDragHandler, 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, CalculateCommonNodeMoveLimitsExecution, CalculateCommonNodeMoveLimitsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateInputConnectionsExecution, CalculateInputConnectionsRequest, CalculateNodeMoveLimitsExecution, CalculateNodeMoveLimitsRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CalculateOutputConnectionsExecution, CalculateOutputConnectionsRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, DragAndDropBase, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFZoomDirection, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, EventExtensions, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCanvasDragHandler, FCanvasMoveFinalizeExecution, FCanvasMoveFinalizeRequest, FCanvasMovePreparationExecution, FCanvasMovePreparationRequest, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleEndComponent, FConnectionDragHandleStartComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionDragHandler, FCreateConnectionDragHandlerPreparationExecution, FCreateConnectionDragHandlerPreparationRequest, FCreateConnectionEvent, FCreateConnectionFinalizeExecution, FCreateConnectionFinalizeRequest, FCreateConnectionFromOutletPreparationExecution, FCreateConnectionFromOutletPreparationRequest, FCreateConnectionFromOutputPreparationExecution, FCreateConnectionFromOutputPreparationRequest, FCreateConnectionPreparationExecution, FCreateConnectionPreparationRequest, FCreateNodeEvent, FDragBlockerDirective, FDragHandleDirective, FDragHandlerResult, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemCreatePlaceholderExecution, FExternalItemCreatePlaceholderRequest, FExternalItemCreatePreviewExecution, FExternalItemCreatePreviewRequest, FExternalItemDirective, FExternalItemDragHandler, FExternalItemFinalizeExecution, FExternalItemFinalizeRequest, FExternalItemPlaceholderDirective, FExternalItemPreparationExecution, FExternalItemPreparationRequest, FExternalItemPreviewDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FLineAlignmentDragHandler, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FMoveNodesEvent, FNodeBase, FNodeDirective, FNodeDropToGroupDragHandler, FNodeDropToGroupFinalizeExecution, FNodeDropToGroupFinalizeRequest, FNodeDropToGroupPreparationExecution, FNodeDropToGroupPreparationRequest, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeMoveDragHandler, FNodeMoveFinalizeExecution, FNodeMoveFinalizeRequest, FNodeMovePreparationExecution, FNodeMovePreparationRequest, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeResizeDragHandler, FNodeResizeFinalizeExecution, FNodeResizeFinalizeRequest, FNodeResizePreparationExecution, FNodeResizePreparationRequest, FNodeRotateDragHandler, FNodeRotateFinalizeExecution, FNodeRotateFinalizeRequest, FNodeRotatePreparationExecution, FNodeRotatePreparationRequest, FReassignConnectionDragHandler, FReassignConnectionEvent, FReassignConnectionFinalizeExecution, FReassignConnectionFinalizeRequest, FReassignConnectionPreparationExecution, FReassignConnectionPreparationRequest, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSingleSelectExecution, FSingleSelectRequest, FSnapConnectionComponent, FStraightPathBuilder, FSummaryNodeMoveDragHandler, FZoomBase, FZoomDirective, F_AFTER_MAIN_PLUGIN, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_BEFORE_MAIN_PLUGIN, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, 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_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_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, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFirstConnectableOutputExecution, GetFirstConnectableOutputRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedConnectorRectExecution, GetNormalizedConnectorRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, IMouseEvent, IPointerEvent, IPointerUpEvent, ITouchDownEvent, ITouchMoveEvent, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineAlignmentPreparationExecution, LineAlignmentPreparationRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MOUSE_EVENT_IGNORE_TIME, MarkAllCanBeConnectedInputsExecution, MarkAllCanBeConnectedInputsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DROP_TO_GROUP_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NODE_ROTATE_PROVIDERS, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PointBoundsLimiter, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, 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, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SourceConnectionDragHandler, SourceTargetConnectionDragHandler, StartDragSequenceExecution, StartDragSequenceRequest, TargetConnectionDragHandler, UnmarkAllCanBeConnectedInputsExecution, UnmarkAllCanBeConnectedInputsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, infinityMinMax, isDragBlocker, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isRotateHandle, isValidEventTrigger, mediatorEffect, 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, BaseConnectionDragHandler, 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, CalculateCommonNodeMoveLimitsExecution, CalculateCommonNodeMoveLimitsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateInputConnectionsExecution, CalculateInputConnectionsRequest, CalculateNodeMoveLimitsExecution, CalculateNodeMoveLimitsRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CalculateOutputConnectionsExecution, CalculateOutputConnectionsRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, DragAndDropBase, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFZoomDirection, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, EventExtensions, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCanvasDragHandler, FCanvasMoveFinalizeExecution, FCanvasMoveFinalizeRequest, FCanvasMovePreparationExecution, FCanvasMovePreparationRequest, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleEndComponent, FConnectionDragHandleStartComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionDragHandler, FCreateConnectionDragHandlerPreparationExecution, FCreateConnectionDragHandlerPreparationRequest, FCreateConnectionEvent, FCreateConnectionFinalizeExecution, FCreateConnectionFinalizeRequest, FCreateConnectionFromOutletPreparationExecution, FCreateConnectionFromOutletPreparationRequest, FCreateConnectionFromOutputPreparationExecution, FCreateConnectionFromOutputPreparationRequest, FCreateConnectionPreparationExecution, FCreateConnectionPreparationRequest, FCreateNodeEvent, FDragBlockerDirective, FDragHandleDirective, FDragHandlerResult, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemCreatePlaceholderExecution, FExternalItemCreatePlaceholderRequest, FExternalItemCreatePreviewExecution, FExternalItemCreatePreviewRequest, FExternalItemDirective, FExternalItemDragHandler, FExternalItemFinalizeExecution, FExternalItemFinalizeRequest, FExternalItemPlaceholderDirective, FExternalItemPreparationExecution, FExternalItemPreparationRequest, FExternalItemPreviewDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FLineAlignmentDragHandler, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FMoveNodesEvent, FNodeBase, FNodeDirective, FNodeDropToGroupDragHandler, FNodeDropToGroupFinalizeExecution, FNodeDropToGroupFinalizeRequest, FNodeDropToGroupPreparationExecution, FNodeDropToGroupPreparationRequest, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeMoveDragHandler, FNodeMoveFinalizeExecution, FNodeMoveFinalizeRequest, FNodeMovePreparationExecution, FNodeMovePreparationRequest, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeResizeDragHandler, FNodeResizeFinalizeExecution, FNodeResizeFinalizeRequest, FNodeResizePreparationExecution, FNodeResizePreparationRequest, FNodeRotateDragHandler, FNodeRotateFinalizeExecution, FNodeRotateFinalizeRequest, FNodeRotatePreparationExecution, FNodeRotatePreparationRequest, FReassignConnectionDragHandler, FReassignConnectionEvent, FReassignConnectionFinalizeExecution, FReassignConnectionFinalizeRequest, FReassignConnectionPreparationExecution, FReassignConnectionPreparationRequest, FReassignSourceDragHandler, FReassignTargetDragHandler, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSingleSelectExecution, FSingleSelectRequest, FSnapConnectionComponent, FStraightPathBuilder, FSummaryNodeMoveDragHandler, FZoomBase, FZoomDirective, F_AFTER_MAIN_PLUGIN, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_BEFORE_MAIN_PLUGIN, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, 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_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_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, FindClosestConnectorExecution, FindClosestConnectorRequest, FindConnectableConnectorUsingPriorityAndPositionExecution, FindConnectableConnectorUsingPriorityAndPositionRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetAllCanBeConnectedSourceConnectorsAndRectsExecution, GetAllCanBeConnectedSourceConnectorsAndRectsRequest, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFirstConnectableOutputExecution, GetFirstConnectableOutputRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedConnectorRectExecution, GetNormalizedConnectorRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, IMouseEvent, IPointerEvent, IPointerUpEvent, ITouchDownEvent, ITouchMoveEvent, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineAlignmentPreparationExecution, LineAlignmentPreparationRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MOUSE_EVENT_IGNORE_TIME, MarkConnectableConnectorsExecution, MarkConnectableConnectorsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DROP_TO_GROUP_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NODE_ROTATE_PROVIDERS, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PointBoundsLimiter, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, 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, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SourceConnectionDragHandler, SourceTargetConnectionDragHandler, StartDragSequenceExecution, StartDragSequenceRequest, TargetConnectionDragHandler, UnmarkConnectableConnectorsExecution, UnmarkConnectableConnectorsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, infinityMinMax, isClosestConnectorInsideSnapThreshold, isDragBlocker, isDragHandleEnd, isDragHandleStart, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isPointerInsideStartOrEndDragHandles, isRotateHandle, isValidEventTrigger, mediatorEffect, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, roundedRectFromPoint, transitionEnd };
 //# sourceMappingURL=foblex-flow.mjs.map