@foblex/flow 17.6.0 → 17.7.0

package/fesm2022/foblex-flow.mjs

@@ -2,7 +2,7 @@ import * as i0 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 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';
@@ -19,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));
     }
@@ -28,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 });
@@ -299,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 });
@@ -323,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') || [];
@@ -343,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);
         }
     }
@@ -365,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 });
@@ -388,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 });
@@ -403,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,
@@ -418,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 });
@@ -443,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);
@@ -462,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 });
@@ -490,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) {
@@ -501,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) {
@@ -536,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`);
         }
@@ -565,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;
@@ -575,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;
     }
@@ -599,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 });
@@ -636,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 });
@@ -667,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 });
@@ -686,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;
@@ -713,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) {
@@ -760,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) {
@@ -784,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,
@@ -806,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 });
@@ -829,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 });
@@ -852,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 });
@@ -876,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 });
@@ -899,9 +971,12 @@ class CreateConnectionMarkersRequest {
     }
 }
 
+/**
+ * Execution that creates connection markers for a given connection.
+ */
 let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
     _browser = inject(BrowserService);
-    _componentsStore = inject(FComponentsStore);
+    _store = inject(FComponentsStore);
     handle(request) {
         const element = createSVGElement$1('defs', this._browser);
         const fConnection = request.fConnection;
@@ -922,7 +997,7 @@ let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
         this.makeSafariCompatible(fConnection);
     }
     getMarkers(fConnection) {
-        return this._componentsStore.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) {
@@ -2777,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);
 }
@@ -2793,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,
@@ -2800,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),
@@ -2821,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,
@@ -2860,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
     // +------------------------------------------+
@@ -2885,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);
@@ -2900,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);
@@ -2915,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);
@@ -2939,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);
@@ -3001,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 });
@@ -3024,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`);
         }
@@ -3055,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 });
@@ -3074,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 });
@@ -3089,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,
@@ -3111,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 });
@@ -3134,6 +3260,9 @@ class AddOutletToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds an OutletConnector to the FComponentsStore.
+ */
 let AddOutletToStoreExecution = class AddOutletToStoreExecution {
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
@@ -3157,6 +3286,9 @@ class AddOutputToStoreRequest {
     }
 }
 
+/**
+ * Execution that adds an OutputConnector to the FComponentsStore.
+ */
 let AddOutputToStoreExecution = class AddOutputToStoreExecution {
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
@@ -3182,6 +3314,11 @@ class FindClosestConnectorRequest {
     }
 }
 
+/**
+ * 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;
@@ -3228,6 +3365,11 @@ class FindConnectableConnectorUsingPriorityAndPositionRequest {
     }
 }
 
+/**
+ * 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);
@@ -3327,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,
@@ -3336,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 });
@@ -3348,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) {
@@ -3393,15 +3541,20 @@ class GetAllCanBeConnectedSourceConnectorsAndRectsRequest {
     }
 }
 
+/**
+ * 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 {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
     get _fSourceConnectors() {
         return this._fComponentsStore.fOutputs;
     }
     handle(payload) {
         return this._getCanBeConnectedSourceConnectors(payload.fTargetConnector).map((x) => {
-            return this._fMediator.execute(new GetConnectorAndRectRequest(x));
+            return this._mediator.execute(new GetConnectorAndRectRequest(x));
         });
     }
     _getCanBeConnectedSourceConnectors(fTargetConnector) {
@@ -3431,6 +3584,9 @@ class MarkConnectableConnectorsRequest {
     }
 }
 
+/**
+ * Execution that marks connectors as connectable.
+ */
 let MarkConnectableConnectorsExecution = class MarkConnectableConnectorsExecution {
     _store = inject(FComponentsStore);
     handle(payload) {
@@ -3458,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 });
@@ -3481,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 });
@@ -3504,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 });
@@ -3527,6 +3692,9 @@ class UnmarkConnectableConnectorsRequest {
     }
 }
 
+/**
+ * Execution that unmarks connectors as connectable.
+ */
 let UnmarkConnectableConnectorsExecution = class UnmarkConnectableConnectorsExecution {
     _store = inject(FComponentsStore);
     handle(payload) {
@@ -3546,6 +3714,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+/*
+  * This file exports all the connector-related executions that can be used in the FFlow domain.
+ */
 const F_CONNECTORS_FEATURES = [
     AddInputToStoreExecution,
     AddOutletToStoreExecution,
@@ -3570,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 });
@@ -6656,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.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([
@@ -6664,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.FMediator }] });
+        }], ctorParameters: () => [{ type: i1$1.FMediator }] });
 
 class GetNodeResizeRestrictionsRequest {
     fNode;
@@ -7368,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;
@@ -7389,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);
@@ -7417,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);
@@ -7444,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) {
@@ -7476,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;
@@ -7923,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.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([
@@ -7931,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.FMediator }, { type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i1$1.FMediator }, { type: FDraggableDataContext }] });
 
 const MINIMAP_DRAG_PREPARATION_PROVIDERS = [
     MinimapDragPreparationExecution,
@@ -8367,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) {
@@ -8396,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);
@@ -8426,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);
@@ -8447,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)
             };
         });
     }
@@ -8495,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() {
@@ -8541,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);
@@ -8579,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);
         });
@@ -8630,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 = [];
@@ -8672,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);
     }
@@ -8682,7 +8948,7 @@ 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));
         }, directChildren);
@@ -8697,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;
@@ -8748,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) {
@@ -8770,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 });
@@ -8782,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.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([
@@ -8808,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.FMediator }] });
+        }] });
 
+/**
+ * This module provides a collection of executions related to selection features in the FFlow domain.
+ */
 const F_SELECTION_FEATURES = [
     ClearSelectionExecution,
     GetCanBeSelectedItemsExecution,
@@ -8819,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) {
@@ -8832,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));
@@ -8854,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) {
@@ -8866,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 });
@@ -8886,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) {
@@ -8922,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) {
@@ -8941,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 });
@@ -8964,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 }
         });
@@ -8994,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) => {
@@ -9020,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 });
@@ -9035,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,
@@ -9055,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 });
@@ -9074,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`);
         }
@@ -9097,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 });
@@ -9116,10 +9429,13 @@ 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 {
@@ -9149,13 +9465,13 @@ 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(),
                 parent: x.fParentId,
@@ -9168,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
@@ -9176,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([
@@ -9191,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) {
@@ -9222,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,
@@ -9232,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 });
@@ -9247,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,
@@ -9263,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 });
@@ -9282,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 });
@@ -9297,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
@@ -9310,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 });
@@ -9333,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 });
@@ -9361,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);
         });
     }
@@ -9392,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) => {
@@ -9423,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 });
@@ -9457,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) {
@@ -9485,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 });
@@ -9508,8 +9874,11 @@ 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(), []);
     }
@@ -9518,7 +9887,7 @@ let GetParentNodesExecution = class GetParentNodesExecution {
             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);
+        const parent = this._store.fNodes.find((x) => x.fId() === fNode.fParentId);
         if (!parent) {
             return result;
         }
@@ -9545,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) {
@@ -9569,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);
@@ -9610,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 });
@@ -9625,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,
@@ -9648,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
         };
     }
@@ -9669,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
         };
     }
@@ -9690,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();
@@ -9724,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) {
@@ -9764,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,
@@ -9775,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;
@@ -9797,7 +10222,7 @@ let SortNodeLayersExecution = class SortNodeLayersExecution {
         });
     }
     _getGroups() {
-        return this._fComponentsStore.fNodes
+        return this._store.fNodes
             .filter((x) => this._fGroupsContainer.contains(x.hostElement));
     }
     _getSortedChildrenNodes(parent) {
@@ -9806,11 +10231,11 @@ let SortNodeLayersExecution = class SortNodeLayersExecution {
             .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
         });
@@ -9835,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);
@@ -9850,7 +10280,7 @@ let SortItemsByParentExecution = class SortItemsByParentExecution {
         });
     }
     _getItemsOfContainer() {
-        return this._fComponentsStore.fNodes
+        return this._store.fNodes
             .filter((x) => this._fItemsContainer.contains(x.hostElement));
     }
     _getSortedChildrenItems(fItem) {
@@ -9860,12 +10290,12 @@ let SortItemsByParentExecution = class SortItemsByParentExecution {
             .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
         });
@@ -9885,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 });
@@ -9952,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,
@@ -10237,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;
@@ -10257,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());
     }
-    centerGroupOrNode(id, animated = true) {
-        setTimeout(() => this._fMediator.execute(new CenterGroupOrNodeRequest(id, animated)));
+    /**
+     * Centers the specified group or node on the canvas.
+     * @param groupOrNodeId - The ID of the group or node to center.
+     * @param animated - If true, the centering will be animated; otherwise, it will be instantaneous.
+     */
+    centerGroupOrNode(groupOrNodeId, animated = true) {
+        setTimeout(() => this._mediator.execute(new CenterGroupOrNodeRequest(groupOrNodeId, animated)));
     }
-    fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
-        setTimeout(() => this._fMediator.execute(new FitToFlowRequest(toCenter, animated)));
+    /**
+     * Fits the canvas to the screen by adjusting the scale and position.
+     * @param padding - paddings from the bounds of the canvas
+     * @param animated - If true, the fit will be animated; otherwise, it will be instantaneous.
+     */
+    fitToScreen(padding = PointExtensions.initialize(), animated = true) {
+        setTimeout(() => this._mediator.execute(new FitToFlowRequest(padding, 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;
     }
@@ -10301,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.`,
@@ -10310,11 +10797,15 @@ 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: [
@@ -10650,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;
     }