@foblex/flow 17.4.0 → 17.4.2

package/fesm2022/foblex-flow.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Directive, ElementRef, Input, HostBinding, EventEmitter, DestroyRef, booleanAttribute, Output, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, numberAttribute, ContentChildren, ViewContainerRef, TemplateRef, Injector, NgZone, ContentChild, Renderer2, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, effect, Directive, input, computed, EventEmitter, DestroyRef, booleanAttribute, Input, Output, ElementRef, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, numberAttribute, ContentChildren, ViewContainerRef, TemplateRef, Injector, NgZone, contentChild, output, viewChild, Renderer2, NgModule } from '@angular/core';
 import { RectExtensions, RoundedRect, TransformModelExtensions, PointExtensions, SizeExtensions, Point, LineExtensions, GetIntersections, findClosestAlignment, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
 import * as i2$1 from '@foblex/mediator';
 import { FExecutionRegister, FMediator } from '@foblex/mediator';
 import * as i1 from '@foblex/platform';
 import { BrowserService, PlatformService, EOperationSystem } from '@foblex/platform';
-import { normalizeDomElementId, castToEnum, flatMap, isClosestElementHasClass, getDataAttrValueFromClosestElementWithClass, getOrCreateRootNodeForViewRef, deepCloneNode, disableDragInteractions, extendStyles } from '@foblex/utils';
+import { normalizeDomElementId, castToEnum, isClosestElementHasClass, flatMap, getDataAttrValueFromClosestElementWithClass, getOrCreateRootNodeForViewRef, deepCloneNode, disableDragInteractions, extendStyles } from '@foblex/utils';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { DragAndDropBase } from '@foblex/drag-toolkit';
@@ -147,6 +147,18 @@ class FChannelHub {
     }
 }
 
+function mediatorEffect(fn, options) {
+    let isFirstRun = true;
+    return effect(() => {
+        const request = fn();
+        if (isFirstRun) {
+            isFirstRun = false;
+            return;
+        }
+        options?.injector?.get(FMediator).execute(request);
+    }, options);
+}
+
 function notifyOnStart() {
     return callback => {
         callback();
@@ -306,34 +318,30 @@ class AddPatternToBackgroundRequest {
 
 let uniqueId$c = 0;
 let AddPatternToBackgroundExecution = class AddPatternToBackgroundExecution {
-    fComponentsStore;
-    fBrowser;
-    get fBackground() {
-        return this.fComponentsStore.fBackground;
-    }
-    constructor(fComponentsStore, fBrowser) {
-        this.fComponentsStore = fComponentsStore;
-        this.fBrowser = fBrowser;
+    _fComponentsStore = inject(FComponentsStore);
+    _fBrowser = inject(BrowserService);
+    get _fBackground() {
+        return this._fComponentsStore.fBackground;
     }
     handle(request) {
         const children = request.fPattern?.hostElement.getElementsByTagName('pattern') || [];
         const pattern = children.length ? children[0] : undefined;
         if (pattern) {
-            const defs = createSVGElement('defs', this.fBrowser);
+            const defs = createSVGElement('defs', this._fBrowser);
             pattern.id = 'f-background-pattern-' + uniqueId$c++;
             request.fPattern?.hostElement.remove();
             defs.appendChild(pattern);
-            this.fBackground.hostElement?.firstChild?.appendChild(defs);
-            const rect = createSVGElement('rect', this.fBrowser);
+            this._fBackground.hostElement?.firstChild?.appendChild(defs);
+            const rect = createSVGElement('rect', this._fBrowser);
             rect.setAttribute('fill', 'url(#' + pattern.id + ')');
             rect.setAttribute('width', '100%');
             rect.setAttribute('height', '100%');
-            this.fBackground.hostElement.firstChild?.appendChild(rect);
-            const transform = this.fComponentsStore.fCanvas?.transform || TransformModelExtensions.default();
+            this._fBackground.hostElement.firstChild?.appendChild(rect);
+            const transform = this._fComponentsStore.fCanvas?.transform || TransformModelExtensions.default();
             request.fPattern?.setTransform(transform);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddPatternToBackgroundExecution, deps: [{ token: FComponentsStore }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddPatternToBackgroundExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddPatternToBackgroundExecution });
 };
 AddPatternToBackgroundExecution = __decorate([
@@ -341,7 +349,7 @@ AddPatternToBackgroundExecution = __decorate([
 ], AddPatternToBackgroundExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddPatternToBackgroundExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i1.BrowserService }] });
+        }] });
 
 class RemoveBackgroundFromStoreRequest {
     fConnection;
@@ -556,6 +564,7 @@ let InputCanvasPositionExecution = class InputCanvasPositionExecution {
             request.transform.scaledPosition = PointExtensions.initialize();
             this._fComponentsStore.fCanvas?.redraw();
         }
+        return void 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InputCanvasPositionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InputCanvasPositionExecution });
@@ -579,7 +588,7 @@ class InputCanvasScaleRequest {
 let InputCanvasScaleExecution = class InputCanvasScaleExecution {
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
-        if (!request.scale) {
+        if (!request.scale && request.scale !== 0) {
             return;
         }
         request.transform.scale = request.scale;
@@ -687,28 +696,28 @@ class ResetScaleAndCenterRequest {
 }
 
 let ResetScaleAndCenterExecution = class ResetScaleAndCenterExecution {
+    _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
-    get transform() {
+    get _transform() {
         return this._fComponentsStore.fCanvas.transform;
     }
-    _fMediator = inject(FMediator);
     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._fComponentsStore.fFlow.hostElement), this._fComponentsStore.fNodes.map((x) => x.position));
         this._fMediator.execute(new RedrawCanvasWithAnimationRequest(request.animated));
     }
-    oneToOneCentering(rect, parentRect, points) {
-        this.transform.scaledPosition = PointExtensions.initialize();
-        this.transform.position = this.getZeroPositionWithoutScale(points);
-        const newX = (parentRect.width - rect.width / this.transform.scale) / 2 - this.transform.position.x;
-        const newY = (parentRect.height - rect.height / this.transform.scale) / 2 - this.transform.position.y;
-        this.transform.scale = 1;
-        this.transform.position = PointExtensions.initialize(newX, newY);
+    _oneToOneCentering(rect, parentRect, points) {
+        this._transform.scaledPosition = PointExtensions.initialize();
+        this._transform.position = this._getZeroPositionWithoutScale(points);
+        const newX = (parentRect.width - rect.width / this._transform.scale) / 2 - this._transform.position.x;
+        const newY = (parentRect.height - rect.height / this._transform.scale) / 2 - this._transform.position.y;
+        this._transform.scale = 1;
+        this._transform.position = PointExtensions.initialize(newX, newY);
     }
-    getZeroPositionWithoutScale(points) {
+    _getZeroPositionWithoutScale(points) {
         const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
         const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
         return PointExtensions.initialize(xPoint, yPoint);
@@ -1052,18 +1061,16 @@ var EFResizeHandleType;
     EFResizeHandleType["LEFT_BOTTOM"] = "left-bottom";
 })(EFResizeHandleType || (EFResizeHandleType = {}));
 
-const F_RESIZE_HANDLE = new InjectionToken('F_RESIZE_HANDLE');
 class FResizeHandleDirective {
-    _elementReference = inject(ElementRef);
-    type = EFResizeHandleType.LEFT_TOP;
-    get typeClass() {
-        return `f-resize-handle-${EFResizeHandleType[this.type.toUpperCase()]}`;
-    }
-    get hostElement() {
-        return this._elementReference.nativeElement;
-    }
+    type = input.required({
+        alias: 'fResizeHandleType',
+        transform: (x) => castToEnum(x, 'fResizeHandleType', EFResizeHandleType)
+    });
+    class = computed(() => {
+        return `f-resize-handle-${EFResizeHandleType[this.type().toUpperCase()]}`;
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FResizeHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FResizeHandleDirective, selector: "[fResizeHandle]", inputs: { type: ["fResizeHandleType", "type", (x) => castToEnum(x, 'fResizeHandleType', EFResizeHandleType)] }, host: { properties: { "attr.data-f-resize-handle-type": "type.toUpperCase()", "class": "this.typeClass" }, classAttribute: "f-resize-handle f-component" }, providers: [{ provide: F_RESIZE_HANDLE, useExisting: FResizeHandleDirective }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: FResizeHandleDirective, selector: "[fResizeHandle]", inputs: { type: { classPropertyName: "type", publicName: "fResizeHandleType", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-f-resize-handle-type": "type().toUpperCase()", "class": "class()" }, classAttribute: "f-resize-handle f-component" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FResizeHandleDirective, decorators: [{
             type: Directive,
@@ -1071,57 +1078,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     selector: "[fResizeHandle]",
                     host: {
                         class: `f-resize-handle f-component`,
-                        '[attr.data-f-resize-handle-type]': 'type.toUpperCase()',
+                        '[attr.data-f-resize-handle-type]': 'type().toUpperCase()',
+                        '[class]': 'class()'
                     },
-                    providers: [{ provide: F_RESIZE_HANDLE, useExisting: FResizeHandleDirective }],
                 }]
-        }], propDecorators: { type: [{
-                type: Input,
-                args: [{
-                        alias: 'fResizeHandleType',
-                        transform: (x) => castToEnum(x, 'fResizeHandleType', EFResizeHandleType)
-                    }]
-            }], typeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
-// export const F_ROTATE_HANDLE: InjectionToken<FRotateHandleDirective> = new InjectionToken<FRotateHandleDirective>('F_ROTATE_HANDLE');
-//
-// @Directive({
-//   selector: "[fRotateHandle]",
-//   host: {
-//     class: `f-rotate-handle f-component`,
-//     '[class.f-rotate-handle-disabled]': 'disabled',
-//   },
-//   providers: [ { provide: F_ROTATE_HANDLE, useExisting: FRotateHandleDirective } ],
-// })
 class FRotateHandleDirective {
-    elementReference;
-    isDisabled = false;
-    // @Input('fRotateHandleDisabled')
-    // public set disabled(isDisabled: boolean | undefined | string) {
-    //   this.isDisabled = BooleanExtensions.castToBoolean(isDisabled);
-    // }
-    get disabled() {
-        return this.isDisabled;
-    }
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference) {
-        this.elementReference = elementReference;
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FRotateHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FRotateHandleDirective, selector: "[fRotateHandle]", host: { classAttribute: "f-rotate-handle f-component" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FRotateHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fRotateHandle]",
+                    host: {
+                        class: `f-rotate-handle f-component`,
+                    },
+                }]
+        }] });
+
+function isRotateHandle(element) {
+    return isClosestElementHasClass(element, '.f-rotate-handle');
 }
 
-const F_DRAG_HANDLE = new InjectionToken('F_DRAG_HANDLE');
 class FDragHandleDirective {
-    _elementReference = inject(ElementRef);
-    get hostElement() {
-        return this._elementReference.nativeElement;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FDragHandleDirective, selector: "[fDragHandle]", host: { classAttribute: "f-drag-handle f-component" }, providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FDragHandleDirective, selector: "[fDragHandle]", host: { classAttribute: "f-drag-handle f-component" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDragHandleDirective, decorators: [{
             type: Directive,
@@ -1130,7 +1113,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     host: {
                         class: "f-drag-handle f-component"
                     },
-                    providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }],
                 }]
         }] });
 
@@ -1186,6 +1168,7 @@ const MIXIN_BASE$1 = mixinChangeSelection(class {
 class FNodeBase extends MIXIN_BASE$1 {
     stateChanges = new FChannel();
     _position = PointExtensions.initialize();
+    _rotate = 0;
     _size;
     fCanBeResizedByChild = true;
     connectors = [];
@@ -1197,11 +1180,14 @@ class FNodeBase extends MIXIN_BASE$1 {
             this.setStyle('width', '' + this.size.width + 'px');
             this.setStyle('height', '' + this.size.height + 'px');
         }
-        this.setStyle('transform', `translate(${this.position.x}px,${this.position.y}px)`);
+        this.setStyle('transform', `translate(${this.position.x}px,${this.position.y}px) rotate(${this.rotate}deg)`);
     }
     updatePosition(position) {
         this._position = position;
     }
+    updateRotate(rotate) {
+        this._rotate = rotate;
+    }
     updateSize(value) {
         this._size = value;
     }
@@ -1241,6 +1227,17 @@ class FGroupDirective extends FNodeBase {
         return this._position;
     }
     positionChange = new EventEmitter();
+    set rotate(value) {
+        if (this._rotate !== value) {
+            this._rotate = value;
+            this.redraw();
+            this.refresh();
+        }
+    }
+    get rotate() {
+        return this._rotate;
+    }
+    rotateChange = new EventEmitter();
     set size(value) {
         if (!this.size || !SizeExtensions.isEqual(this._size, value)) {
             this._size = value;
@@ -1296,7 +1293,7 @@ class FGroupDirective extends FNodeBase {
         this._fMediator.execute(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FGroupDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: ["fGroupId", "fId"], fParentId: ["fGroupParentId", "fParentId"], position: ["fGroupPosition", "position"], size: ["fGroupSize", "size"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute] }, outputs: { positionChange: "fGroupPositionChange", sizeChange: "fGroupSizeChange" }, host: { properties: { "attr.data-f-group-id": "fId", "class.f-group-dragging-disabled": "fDraggingDisabled", "class.f-group-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-group f-component" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: ["fGroupId", "fId"], fParentId: ["fGroupParentId", "fParentId"], position: ["fGroupPosition", "position"], rotate: ["fGroupRotate", "rotate"], size: ["fGroupSize", "size"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute] }, outputs: { positionChange: "fGroupPositionChange", rotateChange: "fGroupRotateChange", sizeChange: "fGroupSizeChange" }, host: { properties: { "attr.data-f-group-id": "fId", "class.f-group-dragging-disabled": "fDraggingDisabled", "class.f-group-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-group f-component" }, providers: [
             { provide: F_NODE, useExisting: FGroupDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
@@ -1327,6 +1324,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], positionChange: [{
                 type: Output,
                 args: ['fGroupPositionChange']
+            }], rotate: [{
+                type: Input,
+                args: ['fGroupRotate']
+            }], rotateChange: [{
+                type: Output,
+                args: ['fGroupRotateChange']
             }], size: [{
                 type: Input,
                 args: ['fGroupSize']
@@ -1371,6 +1374,17 @@ class FNodeDirective extends FNodeBase {
             this.refresh();
         }
     }
+    set rotate(value) {
+        if (this._rotate !== value) {
+            this._rotate = value;
+            this.redraw();
+            this.refresh();
+        }
+    }
+    get rotate() {
+        return this._rotate;
+    }
+    rotateChange = new EventEmitter();
     get size() {
         return this._size;
     }
@@ -1420,7 +1434,7 @@ class FNodeDirective extends FNodeBase {
         this._fMediator.execute(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], fParentId: ["fNodeParentId", "fParentId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute] }, outputs: { positionChange: "fNodePositionChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], fParentId: ["fNodeParentId", "fParentId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], rotate: ["fNodeRotate", "rotate"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute] }, outputs: { positionChange: "fNodePositionChange", rotateChange: "fNodeRotateChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
             { provide: F_NODE, useExisting: FNodeDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
@@ -1454,6 +1468,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], size: [{
                 type: Input,
                 args: ['fNodeSize']
+            }], rotate: [{
+                type: Input,
+                args: ['fNodeRotate']
+            }], rotateChange: [{
+                type: Output,
+                args: ['fNodeRotateChange']
             }], sizeChange: [{
                 type: Output,
                 args: ['fNodeSizeChange']
@@ -1480,6 +1500,7 @@ const F_NODE_PROVIDERS = [
     FNodeDirective,
     FDragHandleDirective,
     FResizeHandleDirective,
+    FRotateHandleDirective,
 ];
 
 let uniqueId$9 = 0;
@@ -2065,17 +2086,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 args: [FConnectionTextPathDirective, { static: true }]
             }] } });
 
-const F_CONNECTION_DRAG_HANDLE_CLASS = 'f-connection-drag-handle';
-class FConnectionDragHandleComponent {
-    elementReference;
+const F_CSS_CLASS = {
+    DRAG_AND_DROP: {
+        DRAGGING: 'f-dragging',
+        CONNECTIONS_DRAGGING: 'f-connections-dragging',
+    },
+    CONNECTOR: {
+        OUTPUT_CONNECTED: 'f-node-output-connected',
+        OUTPUT_NOT_CONNECTABLE: 'f-node-output-not-connectable',
+        INPUT_CONNECTED: 'f-node-input-connected',
+        INPUT_NOT_CONNECTABLE: 'f-node-input-not-connectable',
+        INPUT_CAN_BE_CONNECTED_TO: 'f-node-input-can-be-connected-to',
+    },
+    CONNECTION: {
+        DRAG_HANDLE: 'f-connection-drag-handle',
+    }
+};
+
+class FConnectionDragHandleStartComponent {
+    _elementReference = inject(ElementRef);
+    class = F_CSS_CLASS.CONNECTION.DRAG_HANDLE;
     point;
-    radius = 8;
-    class = F_CONNECTION_DRAG_HANDLE_CLASS;
     get hostElement() {
-        return this.elementReference.nativeElement;
+        return this._elementReference.nativeElement;
     }
-    constructor(elementReference) {
-        this.elementReference = elementReference;
+    redraw(penultimatePoint, startPoint) {
+        this.point = this._calculateCircleCenter(penultimatePoint, startPoint, 8);
+        this.hostElement.setAttribute('cx', this.point.x.toString());
+        this.hostElement.setAttribute('cy', this.point.y.toString());
+    }
+    _calculateCircleCenter(start, end, radius) {
+        const direction = { x: end.x - start.x, y: end.y - start.y };
+        const length = Math.sqrt(direction.x * direction.x + direction.y * direction.y) || 1;
+        const unitDirection = { x: direction.x / length, y: direction.y / length };
+        const scaledDirection = { x: unitDirection.x * radius, y: unitDirection.y * radius };
+        return { x: end.x - scaledDirection.x, y: end.y - scaledDirection.y };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionDragHandleStartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]", host: { properties: { "class": "class" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionDragHandleStartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "circle[f-connection-drag-handle-start]",
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'class'
+                    }
+                }]
+        }] });
+
+class FConnectionDragHandleEndComponent {
+    _elementReference = inject(ElementRef);
+    class = F_CSS_CLASS.CONNECTION.DRAG_HANDLE;
+    point;
+    get hostElement() {
+        return this._elementReference.nativeElement;
     }
     redraw(penultimatePoint, endPoint) {
         this.point = this._calculateCircleCenter(penultimatePoint, endPoint, 8);
@@ -2089,20 +2156,20 @@ class FConnectionDragHandleComponent {
         const scaledDirection = { x: unitDirection.x * radius, y: unitDirection.y * radius };
         return { x: end.x - scaledDirection.x, y: end.y - scaledDirection.y };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionDragHandleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]", host: { properties: { "class": "class" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionDragHandleEndComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]", host: { properties: { "class": "class" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionDragHandleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionDragHandleEndComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "circle[f-connection-drag-handle]",
+                    selector: "circle[f-connection-drag-handle-end]",
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'class'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }] });
 
 const CONNECTION_GRADIENT = new InjectionToken('CONNECTION_GRADIENT');
 
@@ -2214,7 +2281,7 @@ class FConnectionPathComponent {
         this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fId)})`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.data-f-path-id": "fPathId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], ngImport: i0, template: '', isInline: true, styles: [":host{fill:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.data-f-path-id": "fPathId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], ngImport: i0, template: '', isInline: true, styles: [":host{fill:none;pointer-events:stroke}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionPathComponent, decorators: [{
             type: Component,
@@ -2223,7 +2290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         '[attr.id]': 'attrConnectionId',
                         '[attr.data-f-path-id]': 'fPathId',
                         '[attr.stroke]': 'linkToGradient',
-                    }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], styles: [":host{fill:none}\n"] }]
+                    }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], styles: [":host{fill:none;pointer-events:stroke}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [F_CONNECTION]
@@ -2246,14 +2313,14 @@ class FConnectionSelectionComponent {
         this.hostElement.setAttribute("d", `${path}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionSelectionComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]", host: { properties: { "attr.id": "connectionForSelectionId" }, classAttribute: "f-component f-connection-selection" }, ngImport: i0, template: '', isInline: true, styles: [":host{fill:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]", host: { properties: { "attr.id": "connectionForSelectionId" }, classAttribute: "f-component f-connection-selection" }, ngImport: i0, template: '', isInline: true, styles: [":host{fill:none;pointer-events:stroke}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "path[fConnectionSelection]", template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection-selection",
                         '[attr.id]': 'connectionForSelectionId',
-                    }, styles: [":host{fill:none}\n"] }]
+                    }, styles: [":host{fill:none;pointer-events:stroke}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [F_CONNECTION]
@@ -2314,11 +2381,11 @@ class FConnectionBase extends MIXIN_BASE {
     isContains(element) {
         return (this.hostElement.firstChild?.lastChild).contains(element);
     }
-    setLine(source, sourceSide, target, targetSide) {
-        this.line = LineExtensions.initialize(source, target);
-        const pathResult = this.getPathResult(source, sourceSide, target, targetSide);
+    setLine({ point1, point2 }, sourceSide, targetSide) {
+        this.line = LineExtensions.initialize(point1, point2);
+        const pathResult = this.getPathResult(point1, sourceSide, point2, targetSide);
         this.path = pathResult.path;
-        this.penultimatePoint = pathResult.penultimatePoint || source;
+        this.penultimatePoint = pathResult.penultimatePoint || point1;
         this.fConnectionCenter?.nativeElement?.setAttribute('style', this.getTransform(pathResult.connectionCenter));
     }
     getPathResult(source, sourceSide, target, targetSide) {
@@ -2420,13 +2487,13 @@ class FConnectionForCreateComponent extends FConnectionBase {
         this._fMediator.execute(new RemoveConnectionForCreateFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection-for-create", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection f-connection-for-create"
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fStartColor: [{
                 type: Input
             }], fEndColor: [{
@@ -2453,7 +2520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 args: [CONNECTION_GRADIENT, { static: true }]
             }], fDragHandle: [{
                 type: ViewChild,
-                args: [FConnectionDragHandleComponent, { static: true }]
+                args: [FConnectionDragHandleEndComponent, { static: true }]
             }], fSelection: [{
                 type: ViewChild,
                 args: [FConnectionSelectionComponent, { static: true }]
@@ -2508,7 +2575,7 @@ class FConnectionComponent extends FConnectionBase {
         this._fMediator.execute(new RemoveConnectionFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FConnectionComponent, selector: "f-connection", inputs: { fId: ["fConnectionId", "fId"], fText: "fText", fTextStartOffset: "fTextStartOffset", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fSelectionDisabled", "fSelectionDisabled", booleanAttribute] }, host: { properties: { "attr.id": "fId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FConnectionComponent, selector: "f-connection", inputs: { fId: ["fConnectionId", "fId"], fText: "fText", fTextStartOffset: "fTextStartOffset", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fSelectionDisabled", "fSelectionDisabled", booleanAttribute] }, host: { properties: { "attr.id": "fId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
@@ -2517,7 +2584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         class: "f-component f-connection",
                         '[class.f-connection-selection-disabled]': 'fSelectionDisabled',
                         '[class.f-connection-reassign-disabled]': 'fDraggingDisabled',
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fId: [{
                 type: Input,
                 args: ['fConnectionId']
@@ -2561,7 +2628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 args: [CONNECTION_GRADIENT, { static: true }]
             }], fDragHandle: [{
                 type: ViewChild,
-                args: [FConnectionDragHandleComponent, { static: true }]
+                args: [FConnectionDragHandleEndComponent, { static: true }]
             }], fSelection: [{
                 type: ViewChild,
                 args: [FConnectionSelectionComponent, { static: true }]
@@ -2691,13 +2758,13 @@ class FSnapConnectionComponent extends FConnectionBase {
         this._fMediator.execute(new RemoveSnapConnectionFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSnapConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fSnapThreshold: ["fSnapThreshold", "fSnapThreshold", numberAttribute], fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fSnapThreshold: ["fSnapThreshold", "fSnapThreshold", numberAttribute], fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSnapConnectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-snap-connection", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection f-snap-connection"
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fStartColor: [{
                 type: Input
             }], fEndColor: [{
@@ -2727,7 +2794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 args: [CONNECTION_GRADIENT, { static: true }]
             }], fDragHandle: [{
                 type: ViewChild,
-                args: [FConnectionDragHandleComponent, { static: true }]
+                args: [FConnectionDragHandleEndComponent, { static: true }]
             }], fSelection: [{
                 type: ViewChild,
                 args: [FConnectionSelectionComponent, { static: true }]
@@ -2745,7 +2812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
 const F_CONNECTION_PROVIDERS = [
     FConnectionTextComponent,
     FConnectionTextPathDirective,
-    FConnectionDragHandleComponent,
+    FConnectionDragHandleStartComponent,
+    FConnectionDragHandleEndComponent,
     FConnectionGradientComponent,
     FConnectionPathComponent,
     FConnectionSelectionComponent,
@@ -2840,8 +2908,10 @@ let GetNormalizedElementRectExecution = class GetNormalizedElementRectExecution
     handle(request) {
         const systemRect = this._getElementRoundedRect(request);
         const position = this._normalizePosition(systemRect);
-        const size = this._normalizeSize(systemRect);
-        return new RoundedRect(position.x, position.y, size.width, size.height, systemRect.radius1, systemRect.radius2, systemRect.radius3, systemRect.radius4);
+        const unscaledSize = this._unscaleSize(systemRect);
+        const unscaledRect = this._getUnscaledRect(position, unscaledSize, systemRect);
+        const offsetSize = this._getOffsetSize(request.element, unscaledSize);
+        return RoundedRect.fromCenter(unscaledRect, offsetSize.width, offsetSize.height);
     }
     _getElementRoundedRect(request) {
         return request.isRoundedRect ? this._fMediator.execute(new GetElementRoundedRectRequest(request.element)) : RoundedRect.fromRect(RectExtensions.fromElement(request.element));
@@ -2849,9 +2919,15 @@ let GetNormalizedElementRectExecution = class GetNormalizedElementRectExecution
     _normalizePosition(rect) {
         return Point.fromPoint(rect).elementTransform(this._fComponentsStore.flowHost).sub(this._transform.scaledPosition).sub(this._transform.position).div(this._transform.scale);
     }
-    _normalizeSize(rect) {
+    _unscaleSize(rect) {
         return SizeExtensions.initialize(rect.width / this._transform.scale, rect.height / this._transform.scale);
     }
+    _getUnscaledRect(position, size, rect) {
+        return new RoundedRect(position.x, position.y, size.width, size.height, rect.radius1, rect.radius2, rect.radius3, rect.radius4);
+    }
+    _getOffsetSize(element, size) {
+        return SizeExtensions.offsetFromElement(element) || size;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedElementRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetNormalizedElementRectExecution });
 };
@@ -2900,7 +2976,7 @@ let RedrawConnectionsExecution = class RedrawConnectionsExecution {
         fInput.setConnected(fOutput);
         const line = this._getLine(fOutput, fInput, fConnection);
         this._setMarkers(fConnection);
-        fConnection.setLine(line.point1, fOutput.fConnectableSide, line.point2, fInput.fConnectableSide);
+        fConnection.setLine(line, fOutput.fConnectableSide, fInput.fConnectableSide);
         fConnection.initialize();
         fConnection.isSelected() ? fConnection.markAsSelected() : null;
     }
@@ -3305,20 +3381,6 @@ class MarkAllCanBeConnectedInputsRequest {
     }
 }
 
-const F_CSS_CLASS = {
-    DRAG_AND_DROP: {
-        DRAGGING: 'f-dragging',
-        CONNECTIONS_DRAGGING: 'f-connections-dragging',
-    },
-    CONNECTOR: {
-        OUTPUT_CONNECTED: 'f-node-output-connected',
-        OUTPUT_NOT_CONNECTABLE: 'f-node-output-not-connectable',
-        INPUT_CONNECTED: 'f-node-input-connected',
-        INPUT_NOT_CONNECTABLE: 'f-node-input-not-connectable',
-        INPUT_CAN_BE_CONNECTED_TO: 'f-node-input-can-be-connected-to',
-    }
-};
-
 let MarkAllCanBeConnectedInputsExecution = class MarkAllCanBeConnectedInputsExecution {
     _fComponentsStore = inject(FComponentsStore);
     handle(payload) {
@@ -3794,38 +3856,6 @@ class FCreateConnectionFinalizeRequest {
     }
 }
 
-function createErrorClass(impl) {
-    const _super = (instance) => {
-        Error.call(instance);
-    };
-    const constructor = impl(_super);
-    constructor.prototype = Object.create(Error.prototype);
-    constructor.prototype.constructor = constructor;
-    return constructor;
-}
-
-const NotFoundError = createErrorClass((_super) => function error(message) {
-    _super(this);
-    this.message = message || 'The requested resource was not found.';
-    this.code = 404;
-});
-
-const ConflictError = createErrorClass((_super) => function error(message) {
-    _super(this);
-    this.message = message || 'Conflict error occurred.';
-    this.code = 409;
-});
-
-function OutputNotFound(id) {
-    return new NotFoundError(`Output with fOutputId ${id} not found. Make sure there is no f-connection to a non-existent fOutput.`);
-}
-function InputNotFound(id) {
-    return new NotFoundError(`Input with fInputId ${id} not found. Make sure there is no f-connection to a non-existent fInput.`);
-}
-function RequiredOutput() {
-    return new ConflictError(`The fNode must contain at least one fOutput if there is an fOutlet`);
-}
-
 class GetFirstConnectableOutputRequest {
     fOutlet;
     constructor(fOutlet) {
@@ -3962,14 +3992,14 @@ class FCreateConnectionDragHandler {
     }
     _drawConnectionForCreate(toConnectorRect, fSide) {
         const line = this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, toConnectorRect, this._fConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fSide));
-        this._fConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fSide);
+        this._fConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fSide);
         this._fConnection.redraw();
     }
     _drawSnapConnection(fClosestInput) {
         if (fClosestInput) {
             const line = this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, fClosestInput.fRect, this._fSnapConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
             this._fSnapConnection.show();
-            this._fSnapConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fClosestInput.fConnector.fConnectableSide);
+            this._fSnapConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide);
             this._fSnapConnection.redraw();
         }
         else {
@@ -4010,7 +4040,7 @@ let FCreateConnectionFinalizeExecution = class FCreateConnectionFinalizeExecutio
     }
     getTargetOutput(output) {
         if (!output) {
-            throw OutputNotFound(this._fResult.getData().fOutputId);
+            throw new Error(`Output with fOutputId ${this._fResult.getData().fOutputId} not found. Make sure there is no f-connection to a non-existent fOutput.`);
         }
         return isNodeOutlet(output.hostElement) ? this._fMediator.execute(new GetFirstConnectableOutputRequest(output)) : output;
     }
@@ -4300,7 +4330,7 @@ class FReassignConnectionDragHandler {
     }
     _drawConnection(difference, fSide) {
         const line = this._getLineToPointer(difference, fSide);
-        this._fConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fSide);
+        this._fConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fSide);
         this._fConnection.redraw();
     }
     _getLineToPointer(difference, fSide) {
@@ -4310,7 +4340,7 @@ class FReassignConnectionDragHandler {
         if (fClosestInput) {
             const line = this._getLineToClosestInput(fClosestInput);
             this._fSnapConnection.show();
-            this._fSnapConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fClosestInput.fConnector.fConnectableSide);
+            this._fSnapConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide);
             this._fSnapConnection.redraw();
         }
         else {
@@ -4453,14 +4483,14 @@ let FReassignConnectionPreparationExecution = class FReassignConnectionPreparati
     }
     _getConnectionsFromPoint(position) {
         return this._fConnections.filter((x) => {
-            return this._isPointInsideCircle(position, x.fDragHandle.point) && !x.fDraggingDisabled;
+            return x.fDragHandle?.point && this._isPointInsideCircle(position, x.fDragHandle.point) && !x.fDraggingDisabled;
         });
     }
     _isPointInsideCircle(point, circleCenter) {
         return (point.x - circleCenter.x) ** 2 + (point.y - circleCenter.y) ** 2 <= 8 ** 2;
     }
     _updateConnectionLayer() {
-        this._fMediator.execute(new UpdateItemAndChildrenLayersRequest(this._fConnection, this._fComponentsStore.fCanvas.fConnectionsContainer.nativeElement));
+        this._fMediator.execute(new UpdateItemAndChildrenLayersRequest(this._fConnection, this._fComponentsStore.fCanvas.fConnectionsContainer().nativeElement));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FReassignConnectionPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FReassignConnectionPreparationExecution });
@@ -4553,18 +4583,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
 class BaseConnectionDragHandler {
     fConnection;
     _fMediator = fInject(FMediator);
-    _fComponentStore = fInject(FComponentsStore);
+    _fComponentsStore = fInject(FComponentsStore);
     _fOutputWithRect;
     _fInputWithRect;
     get _fOutput() {
-        const result = this._fComponentStore.fOutputs.find((x) => x.fId === this.fConnection.fOutputId);
+        const result = this._fComponentsStore.fOutputs.find((x) => x.fId === this.fConnection.fOutputId);
         if (!result) {
             throw new Error(this._connectorNotFoundPrefix(`fOutput with id ${this.fConnection.fOutputId} not found`));
         }
         return result;
     }
     get _fInput() {
-        const result = this._fComponentStore.fInputs.find((x) => x.fId === this.fConnection.fInputId);
+        const result = this._fComponentsStore.fInputs.find((x) => x.fId === this.fConnection.fInputId);
         if (!result) {
             throw new Error(this._connectorNotFoundPrefix(`fInput with id ${this.fConnection.fInputId} not found`));
         }
@@ -4593,7 +4623,7 @@ class BaseConnectionDragHandler {
         return this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(RoundedRect.fromRoundedRect(this._fOutputWithRect.fRect).addPoint(this._sourceDifference), RoundedRect.fromRoundedRect(this._fInputWithRect.fRect).addPoint(this._targetDifference), this.fConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, this._fInputWithRect.fConnector.fConnectableSide));
     }
     _redrawConnection(line) {
-        this.fConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, this._fInputWithRect.fConnector.fConnectableSide);
+        this.fConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, this._fInputWithRect.fConnector.fConnectableSide);
         this.fConnection.redraw();
     }
     _connectorNotFoundPrefix(message) {
@@ -5143,7 +5173,7 @@ class FLineAlignmentDragHandler {
     }
     findNearestCoordinate(difference) {
         const rect = RectExtensions.addPoint(this._draggedNodeRect, difference);
-        return findClosestAlignment(this._rects, rect, this._fComponentsStore.fLineAlignment.fAlignThreshold);
+        return findClosestAlignment(this._rects, rect, this._fComponentsStore.fLineAlignment.fAlignThreshold());
     }
     onPointerUp() {
         this._lineService.hideVerticalLine();
@@ -5226,7 +5256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }] });
 
 class FLineAlignmentComponent extends FLineAlignmentBase {
-    fAlignThreshold = 10;
+    fAlignThreshold = input(10, { transform: numberAttribute });
     _fMediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     get hostElement() {
@@ -5239,7 +5269,7 @@ class FLineAlignmentComponent extends FLineAlignmentBase {
         this._fMediator.execute(new RemoveLineAlignmentFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FLineAlignmentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FLineAlignmentComponent, selector: "f-line-alignment", inputs: { fAlignThreshold: "fAlignThreshold" }, host: { classAttribute: "f-line-alignment f-component" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: FLineAlignmentComponent, selector: "f-line-alignment", inputs: { fAlignThreshold: { classPropertyName: "fAlignThreshold", publicName: "fAlignThreshold", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "f-line-alignment f-component" }, providers: [
             { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "", isInline: true, styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] });
 }
@@ -5250,9 +5280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     }, providers: [
                         { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
                     ], styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
-        }], propDecorators: { fAlignThreshold: [{
-                type: Input
-            }] } });
+        }] });
 
 const F_LINE_ALIGNMENT_PROVIDERS = [
     FLineAlignmentComponent
@@ -5599,17 +5627,17 @@ const NODE_DROP_TO_GROUP_PROVIDERS = [
 
 class ApplyChildResizeRestrictionsRequest {
     rect;
-    restrictionsRect;
-    constructor(rect, restrictionsRect) {
+    restrictions;
+    constructor(rect, restrictions) {
         this.rect = rect;
-        this.restrictionsRect = restrictionsRect;
+        this.restrictions = restrictions;
     }
 }
 
 const CHILD_RESIZE_OFFSET = 0;
 let ApplyChildResizeRestrictionsExecution = class ApplyChildResizeRestrictionsExecution {
     handle(request) {
-        this._apply(request.rect, request.restrictionsRect);
+        this._apply(request.rect, request.restrictions.childrenBounds);
     }
     _apply(rect, restrictionsRect) {
         this._restrictLeft(rect, restrictionsRect);
@@ -5895,9 +5923,10 @@ class FNodeResizeDragHandler {
         this._applyResizeChanges(this._calculateChangedRect(difference));
     }
     _calculateChangedRect(difference) {
-        return this._calculatePosition(difference, this._calculateSize(difference, this._resizeRestrictions.minimumSize));
+        const changedSize = this._calculateSize(difference);
+        return this._calculatePosition(difference, changedSize);
     }
-    _calculateSize(difference, minimumSize) {
+    _calculateSize(difference) {
         return this._fMediator.execute(new CalculateChangedSizeRequest(this._originalRect, difference, this._fResizeHandleType));
     }
     _calculatePosition(difference, changedSize) {
@@ -5905,7 +5934,7 @@ class FNodeResizeDragHandler {
     }
     _applyResizeChanges(changedRect) {
         if (this._resizeRestrictions.childrenBounds) {
-            this._applyChildRestrictions(changedRect, this._resizeRestrictions.childrenBounds);
+            this._applyChildRestrictions(changedRect);
         }
         this._applyParentRestrictions(changedRect, this._resizeRestrictions.parentBounds);
         this._updateNodeRendering(changedRect);
@@ -5915,8 +5944,8 @@ class FNodeResizeDragHandler {
         this._fNode.updateSize(changedRect);
         this._fNode.redraw();
     }
-    _applyChildRestrictions(changedRect, restrictions) {
-        this._fMediator.execute(new ApplyChildResizeRestrictionsRequest(changedRect, restrictions));
+    _applyChildRestrictions(changedRect) {
+        this._fMediator.execute(new ApplyChildResizeRestrictionsRequest(changedRect, this._resizeRestrictions));
     }
     _applyParentRestrictions(changedRect, restrictions) {
         this._fMediator.execute(new ApplyParentResizeRestrictionsRequest(changedRect, restrictions));
@@ -6031,6 +6060,204 @@ const NODE_RESIZE_PROVIDERS = [
     FNodeResizePreparationExecution,
 ];
 
+class FNodeRotateFinalizeRequest {
+    event;
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+function calculateDifferenceAfterRotation(position, rotation, pivot) {
+    const { x: newX, y: newY } = calculatePositionAfterRotation(position, rotation, pivot);
+    const dx = newX - position.x;
+    const dy = newY - position.y;
+    return { x: dx, y: dy };
+}
+function calculatePositionAfterRotation(position, rotation, pivot) {
+    const translatedX = position.x - pivot.x;
+    const translatedY = position.y - pivot.y;
+    const theta = rotation * Math.PI / 180;
+    const cosTheta = Math.cos(theta);
+    const sinTheta = Math.sin(theta);
+    const rotatedX = translatedX * cosTheta - translatedY * sinTheta;
+    const rotatedY = translatedX * sinTheta + translatedY * cosTheta;
+    const newX = rotatedX + pivot.x;
+    const newY = rotatedY + pivot.y;
+    return { x: newX, y: newY };
+}
+
+class FNodeRotateDragHandler {
+    _fNode;
+    _fSourceHandlers;
+    _fTargetHandlers;
+    _fComponentsStore = fInject(FComponentsStore);
+    _fMediator = fInject(FMediator);
+    _fDraggableDataContext = fInject(FDraggableDataContext);
+    fEventType = 'node-rotate';
+    fData;
+    _initialRotationToX = 0;
+    _startRotation = 0;
+    _onDownPoint;
+    _fNodeRect;
+    get _transform() {
+        return this._fComponentsStore.fCanvas.transform;
+    }
+    constructor(_fNode, _fSourceHandlers, _fTargetHandlers) {
+        this._fNode = _fNode;
+        this._fSourceHandlers = _fSourceHandlers;
+        this._fTargetHandlers = _fTargetHandlers;
+        this._startRotation = this._fNode.rotate;
+        this.fData = {
+            fNodeId: _fNode.fId,
+        };
+    }
+    prepareDragSequence() {
+        this._fNodeRect = this._getOriginalNodeRect();
+        this._onDownPoint = this._calculateDownPoint();
+        this._initialRotationToX = this._calculateAngleBetweenVectors(this._onDownPoint) - this._startRotation;
+    }
+    _getOriginalNodeRect() {
+        return this._fMediator.execute(new GetNormalizedElementRectRequest(this._fNode.hostElement, false));
+    }
+    _calculateDownPoint() {
+        return PointExtensions.sub(this._fDraggableDataContext.onPointerDownPosition, PointExtensions.sum(this._transform.position, this._transform.scaledPosition));
+    }
+    _calculateAngleBetweenVectors(position) {
+        return Math.atan2(position.y - this._fNodeRect.gravityCenter.y, position.x - this._fNodeRect.gravityCenter.x) * (180 / Math.PI);
+    }
+    onPointerMove(difference) {
+        const position = PointExtensions.sum(this._onDownPoint, difference);
+        const rotation = this._calculateAngleBetweenVectors(position) - this._initialRotationToX;
+        this._updateNodeRendering(rotation);
+        this._fSourceHandlers.forEach((x) => {
+            x.connection.setSourceDifference(this._calculateDifferenceAfterRotation(x.connector, rotation));
+        });
+        this._fTargetHandlers.forEach((x) => {
+            x.connection.setTargetDifference(this._calculateDifferenceAfterRotation(x.connector, rotation));
+        });
+    }
+    _updateNodeRendering(rotation) {
+        this._fNode.updateRotate(rotation);
+        this._fNode.redraw();
+    }
+    _calculateDifferenceAfterRotation(position, rotation) {
+        return calculateDifferenceAfterRotation(position, rotation - this._startRotation, this._fNodeRect.gravityCenter);
+    }
+    onPointerUp() {
+        this._fNode.rotateChange.emit(this._fNode.rotate);
+    }
+}
+
+let FNodeRotateFinalizeExecution = class FNodeRotateFinalizeExecution {
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    handle(request) {
+        if (!this._isValid()) {
+            return;
+        }
+        this._fDraggableDataContext.draggableItems.forEach((x) => {
+            x.onPointerUp?.();
+        });
+    }
+    _isValid() {
+        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof FNodeRotateDragHandler);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeRotateFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeRotateFinalizeExecution });
+};
+FNodeRotateFinalizeExecution = __decorate([
+    FExecutionRegister(FNodeRotateFinalizeRequest)
+], FNodeRotateFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeRotateFinalizeExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class FNodeRotatePreparationRequest {
+    event;
+    fTrigger;
+    constructor(event, fTrigger) {
+        this.event = event;
+        this.fTrigger = fTrigger;
+    }
+}
+
+let FNodeRotatePreparationExecution = class FNodeRotatePreparationExecution {
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    get _transform() {
+        return this._fComponentsStore.fCanvas.transform;
+    }
+    get _fHost() {
+        return this._fComponentsStore.fFlow.hostElement;
+    }
+    _fNode;
+    handle(request) {
+        if (!this._isValid(request) || !this._isValidTrigger(request)) {
+            return;
+        }
+        this._selectAndUpdateNodeLayer();
+        this._fDraggableDataContext.onPointerDownScale = this._transform.scale;
+        this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
+            .elementTransform(this._fHost).div(this._transform.scale);
+        this._fDraggableDataContext.draggableItems = [
+            new FNodeRotateDragHandler(this._fNode, this._calculateOutputConnectionsDragHandlers(), this._calculateInputConnectionsDragHandlers())
+        ];
+    }
+    _isValid(request) {
+        return this._fDraggableDataContext.isEmpty()
+            && isRotateHandle(request.event.targetElement)
+            && this._isNodeCanBeDragged(this._getNode(request.event.targetElement));
+    }
+    _isNodeCanBeDragged(fNode) {
+        return !!fNode && !fNode.fDraggingDisabled;
+    }
+    _getNode(element) {
+        this._fNode = this._fComponentsStore
+            .fNodes.find(x => x.isContains(element));
+        return this._fNode;
+    }
+    _isValidTrigger(request) {
+        return isValidEventTrigger(request.event.originalEvent, request.fTrigger);
+    }
+    _selectAndUpdateNodeLayer() {
+        this._fMediator.execute(new SelectAndUpdateNodeLayerRequest(this._fNode));
+    }
+    _calculateInputConnectionsDragHandlers() {
+        return this._fMediator.execute(new CalculateInputConnectionsRequest(this._fNode)).map((x) => {
+            const connector = this._fComponentsStore.fInputs.find((y) => y.fId === x.fInputId).hostElement;
+            return {
+                connection: new TargetConnectionDragHandler(x),
+                connector: this._fMediator.execute(new GetNormalizedElementRectRequest(connector, false)).gravityCenter
+            };
+        });
+    }
+    _calculateOutputConnectionsDragHandlers() {
+        return this._fMediator.execute(new CalculateOutputConnectionsRequest(this._fNode)).map((x) => {
+            const connector = this._fComponentsStore.fOutputs.find((y) => y.fId === x.fOutputId).hostElement;
+            return {
+                connection: new SourceConnectionDragHandler(x),
+                connector: this._fMediator.execute(new GetNormalizedElementRectRequest(connector, false)).gravityCenter
+            };
+        });
+    }
+    _getOriginalNodeRect() {
+        return this._fMediator.execute(new GetNormalizedElementRectRequest(this._fNode.hostElement, false));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeRotatePreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeRotatePreparationExecution });
+};
+FNodeRotatePreparationExecution = __decorate([
+    FExecutionRegister(FNodeRotatePreparationRequest)
+], FNodeRotatePreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FNodeRotatePreparationExecution, decorators: [{
+            type: Injectable
+        }] });
+
+const NODE_ROTATE_PROVIDERS = [
+    FNodeRotateFinalizeExecution,
+    FNodeRotatePreparationExecution,
+];
+
 class FSingleSelectRequest {
     event;
     fMultiSelectTrigger;
@@ -6314,7 +6541,7 @@ class FExternalItemDragHandler {
     }
     _createAndAppendPlaceholder() {
         this._placeholder = this._fMediator.execute(new FExternalItemCreatePlaceholderRequest(this._fExternalItem));
-        this._fItemHost.parentElement.replaceChild(this._placeholder, this._fItemHost);
+        this._fBrowser.document.body.appendChild(this._fItemHost.parentElement.replaceChild(this._placeholder, this._fItemHost));
     }
     _matchElementSize(target, sourceRect) {
         target.style.width = `${sourceRect.width}px`;
@@ -6647,6 +6874,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 }]
         }] });
 
+const F_EXTERNAL_ITEM_PROVIDERS = [
+    FExternalItemDirective
+];
+
 const F_BEFORE_MAIN_PLUGIN = new InjectionToken('F_BEFORE_MAIN_PLUGIN');
 const F_AFTER_MAIN_PLUGIN = new InjectionToken('F_AFTER_MAIN_PLUGIN');
 
@@ -6667,6 +6898,7 @@ class FDraggableDirective extends FDraggableBase {
     fReassignConnectionTrigger = defaultEventTrigger;
     fCreateConnectionTrigger = defaultEventTrigger;
     fNodeResizeTrigger = defaultEventTrigger;
+    fNodeRotateTrigger = defaultEventTrigger;
     fNodeMoveTrigger = defaultEventTrigger;
     fCanvasMoveTrigger = defaultEventTrigger;
     fExternalItemTrigger = defaultEventTrigger;
@@ -6712,6 +6944,7 @@ class FDraggableDirective extends FDraggableBase {
     prepareDragSequence(event) {
         this._beforePlugins.forEach((p) => p.prepareDragSequence?.(event));
         this._fMediator.execute(new FNodeResizePreparationRequest(event, this.fNodeResizeTrigger));
+        this._fMediator.execute(new FNodeRotatePreparationRequest(event, this.fNodeRotateTrigger));
         this._fMediator.execute(new FNodeMovePreparationRequest(event, this.fNodeMoveTrigger));
         this._fMediator.execute(new FNodeDropToGroupPreparationRequest(event));
         this._fMediator.execute(new FCanvasMovePreparationRequest(event, this.fCanvasMoveTrigger));
@@ -6730,6 +6963,7 @@ class FDraggableDirective extends FDraggableBase {
         this._fMediator.execute(new FReassignConnectionFinalizeRequest(event));
         this._fMediator.execute(new FCreateConnectionFinalizeRequest(event));
         this._fMediator.execute(new FNodeResizeFinalizeRequest(event));
+        this._fMediator.execute(new FNodeRotateFinalizeRequest(event));
         this._fMediator.execute(new FNodeMoveFinalizeRequest(event));
         this._fMediator.execute(new FNodeDropToGroupFinalizeRequest(event));
         this._fMediator.execute(new FCanvasMoveFinalizeRequest(event));
@@ -6749,7 +6983,7 @@ class FDraggableDirective extends FDraggableBase {
         FInjector.clear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDirective, deps: [{ token: NgZone, optional: true }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: ["fDraggableDisabled", "disabled", booleanAttribute], fMultiSelectTrigger: "fMultiSelectTrigger", fReassignConnectionTrigger: "fReassignConnectionTrigger", fCreateConnectionTrigger: "fCreateConnectionTrigger", fNodeResizeTrigger: "fNodeResizeTrigger", fNodeMoveTrigger: "fNodeMoveTrigger", fCanvasMoveTrigger: "fCanvasMoveTrigger", fExternalItemTrigger: "fExternalItemTrigger", fEmitOnNodeIntersect: ["fEmitOnNodeIntersect", "fEmitOnNodeIntersect", booleanAttribute], vCellSize: ["vCellSize", "vCellSize", numberAttribute], hCellSize: ["hCellSize", "hCellSize", numberAttribute], fCellSizeWhileDragging: ["fCellSizeWhileDragging", "fCellSizeWhileDragging", booleanAttribute] }, outputs: { fSelectionChange: "fSelectionChange", fNodeIntersectedWithConnections: "fNodeIntersectedWithConnections", fCreateNode: "fCreateNode", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection", fDropToGroup: "fDropToGroup", fDragStarted: "fDragStarted", fDragEnded: "fDragEnded" }, providers: [FDragHandlerResult], queries: [{ propertyName: "_beforePlugins", predicate: F_BEFORE_MAIN_PLUGIN, descendants: true }, { propertyName: "_afterPlugins", predicate: F_AFTER_MAIN_PLUGIN, descendants: true }], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: ["fDraggableDisabled", "disabled", booleanAttribute], fMultiSelectTrigger: "fMultiSelectTrigger", fReassignConnectionTrigger: "fReassignConnectionTrigger", fCreateConnectionTrigger: "fCreateConnectionTrigger", fNodeResizeTrigger: "fNodeResizeTrigger", fNodeRotateTrigger: "fNodeRotateTrigger", fNodeMoveTrigger: "fNodeMoveTrigger", fCanvasMoveTrigger: "fCanvasMoveTrigger", fExternalItemTrigger: "fExternalItemTrigger", fEmitOnNodeIntersect: ["fEmitOnNodeIntersect", "fEmitOnNodeIntersect", booleanAttribute], vCellSize: ["vCellSize", "vCellSize", numberAttribute], hCellSize: ["hCellSize", "hCellSize", numberAttribute], fCellSizeWhileDragging: ["fCellSizeWhileDragging", "fCellSizeWhileDragging", booleanAttribute] }, outputs: { fSelectionChange: "fSelectionChange", fNodeIntersectedWithConnections: "fNodeIntersectedWithConnections", fCreateNode: "fCreateNode", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection", fDropToGroup: "fDropToGroup", fDragStarted: "fDragStarted", fDragEnded: "fDragEnded" }, providers: [FDragHandlerResult], queries: [{ propertyName: "_beforePlugins", predicate: F_BEFORE_MAIN_PLUGIN, descendants: true }, { propertyName: "_afterPlugins", predicate: F_AFTER_MAIN_PLUGIN, descendants: true }], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDirective, decorators: [{
             type: Directive,
@@ -6774,6 +7008,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 type: Input
             }], fNodeResizeTrigger: [{
                 type: Input
+            }], fNodeRotateTrigger: [{
+                type: Input
             }], fNodeMoveTrigger: [{
                 type: Input
             }], fCanvasMoveTrigger: [{
@@ -7382,6 +7618,7 @@ const F_DRAGGABLE_PROVIDERS = [
     ...NODE_PROVIDERS,
     ...NODE_DROP_TO_GROUP_PROVIDERS,
     ...NODE_RESIZE_PROVIDERS,
+    ...NODE_ROTATE_PROVIDERS,
     ...F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS,
     ...F_MINIMAP_DRAG_AND_DROP_PROVIDERS
 ];
@@ -7655,61 +7892,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExecution {
-    fComponentsStore;
-    fMediator;
-    get fGroupsContainer() {
-        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    get _fCanvas() {
+        return this._fComponentsStore.fCanvas;
     }
-    get fNodesContainer() {
-        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
+    get _fGroupsContainer() {
+        return this._fCanvas.fGroupsContainer().nativeElement;
     }
-    get fConnectionsContainer() {
-        return this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement;
+    get _fNodesContainer() {
+        return this._fCanvas.fNodesContainer().nativeElement;
     }
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
+    get _fConnectionsContainer() {
+        return this._fCanvas.fConnectionsContainer().nativeElement;
     }
     handle(request) {
         switch (request.itemContainer) {
-            case this.fGroupsContainer:
-                this.handleGroup(request);
+            case this._fGroupsContainer:
+                this._handleGroup(request);
                 break;
-            case this.fNodesContainer:
-                this.handleNode(request);
+            case this._fNodesContainer:
+                this._handleNode(request);
                 break;
-            case this.fConnectionsContainer:
-                this.handleConnection(request);
+            case this._fConnectionsContainer:
+                this._handleConnection(request);
                 break;
             default:
                 throw new Error('Unknown container');
         }
     }
-    handleGroup(request) {
-        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
-        const childrenGroups = this.getChildrenGroups(childrenNodesAndGroups);
-        this.updateLayers(this.fGroupsContainer, request.item.hostElement, childrenGroups);
-        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
+    _handleGroup(request) {
+        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId);
+        const childrenGroups = this._getChildrenGroups(childrenNodesAndGroups);
+        this._updateLayers(this._fGroupsContainer, request.item.hostElement, childrenGroups);
+        const childrenNodes = this._getChildrenNodes(childrenNodesAndGroups);
         if (childrenNodes.length) {
-            this.updateLayers(this.fNodesContainer, childrenNodes[0], childrenNodes);
+            this._updateLayers(this._fNodesContainer, childrenNodes[0], childrenNodes);
         }
     }
-    handleNode(request) {
-        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
-        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
-        this.updateLayers(request.itemContainer, request.item.hostElement, childrenNodes);
+    _handleNode(request) {
+        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId);
+        const childrenNodes = this._getChildrenNodes(childrenNodesAndGroups);
+        this._updateLayers(request.itemContainer, request.item.hostElement, childrenNodes);
     }
-    handleConnection(request) {
-        this.updateLayers(request.itemContainer, request.item.hostElement, []);
+    _handleConnection(request) {
+        this._updateLayers(request.itemContainer, request.item.hostElement, []);
     }
-    updateLayers(itemContainer, item, elementsThatShouldBeInFront) {
+    _updateLayers(itemContainer, item, elementsThatShouldBeInFront) {
         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));
+        if (this._isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront)) {
+            this._fMediator.execute(new MoveFrontElementsBeforeTargetElementRequest(itemContainer, allElements, elementsThatShouldBeInFront, targetIndex));
         }
     }
-    isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront) {
+    _isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront) {
         for (let i = targetIndex + 1; i < allElements.length; i++) {
             if (!elementsThatShouldBeInFront.includes(allElements[i])) {
                 return true;
@@ -7717,20 +7953,20 @@ let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExec
         }
         return false;
     }
-    getChildrenGroups(elements) {
-        const allElements = Array.from(this.fGroupsContainer.children);
-        return elements.filter((x) => this.fGroupsContainer.contains(x))
+    _getChildrenGroups(elements) {
+        const allElements = Array.from(this._fGroupsContainer.children);
+        return elements.filter((x) => this._fGroupsContainer.contains(x))
             .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
     }
-    getChildrenNodes(elements) {
-        const allElements = Array.from(this.fNodesContainer.children);
-        return elements.filter((x) => this.fNodesContainer.contains(x))
+    _getChildrenNodes(elements) {
+        const allElements = Array.from(this._fNodesContainer.children);
+        return elements.filter((x) => this._fNodesContainer.contains(x))
             .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
     }
-    getChildrenNodesAndGroups(fId) {
-        return this.fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId)).map((x) => x.hostElement);
+    _getChildrenNodesAndGroups(fId) {
+        return this._fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId)).map((x) => x.hostElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateItemAndChildrenLayersExecution });
 };
 UpdateItemAndChildrenLayersExecution = __decorate([
@@ -7738,7 +7974,7 @@ UpdateItemAndChildrenLayersExecution = __decorate([
 ], UpdateItemAndChildrenLayersExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }] });
+        }] });
 
 let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution {
     fDraggableDataContext;
@@ -8266,6 +8502,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Injectable
         }] });
 
+class CalculateInputConnectionsRequest {
+    fNode;
+    constructor(fNode) {
+        this.fNode = fNode;
+    }
+}
+
+let CalculateInputConnectionsExecution = class CalculateInputConnectionsExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        return this._calculateConnections(new Set(this._calculateConnectors(request.fNode)));
+    }
+    _calculateConnectors(fNode) {
+        return this._fComponentsStore.fInputs
+            .filter((x) => fNode.isContains(x.hostElement))
+            .map((x) => x.fId);
+    }
+    _calculateConnections(ids) {
+        return this._fComponentsStore.fConnections
+            .filter((x) => ids.has(x.fInputId));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateInputConnectionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateInputConnectionsExecution });
+};
+CalculateInputConnectionsExecution = __decorate([
+    FExecutionRegister(CalculateInputConnectionsRequest)
+], CalculateInputConnectionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateInputConnectionsExecution, decorators: [{
+            type: Injectable
+        }] });
+
 class CalculateNodesBoundingBoxRequest {
 }
 
@@ -8322,6 +8589,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Injectable
         }] });
 
+class CalculateOutputConnectionsRequest {
+    fNode;
+    constructor(fNode) {
+        this.fNode = fNode;
+    }
+}
+
+let CalculateOutputConnectionsExecution = class CalculateOutputConnectionsExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        return this._calculateConnections(new Set(this._calculateConnectors(request.fNode)));
+    }
+    _calculateConnectors(fNode) {
+        return this._fComponentsStore.fOutputs
+            .filter((x) => fNode.isContains(x.hostElement))
+            .map((x) => x.fId);
+    }
+    _calculateConnections(ids) {
+        return this._fComponentsStore.fConnections
+            .filter((x) => ids.has(x.fOutputId));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateOutputConnectionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateOutputConnectionsExecution });
+};
+CalculateOutputConnectionsExecution = __decorate([
+    FExecutionRegister(CalculateOutputConnectionsRequest)
+], CalculateOutputConnectionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CalculateOutputConnectionsExecution, decorators: [{
+            type: Injectable
+        }] });
+
 class GetNodePaddingRequest {
     fNode;
     rect;
@@ -8500,8 +8798,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
 
 const F_NODE_FEATURES = [
     AddNodeToStoreExecution,
+    CalculateInputConnectionsExecution,
     CalculateNodesBoundingBoxExecution,
     CalculateNodesBoundingBoxNormalizedPositionExecution,
+    CalculateOutputConnectionsExecution,
     GetNodePaddingExecution,
     GetNodesExecution,
     GetParentNodesExecution,
@@ -8668,48 +8968,47 @@ class SortNodeLayersRequest {
 }
 
 let SortNodeLayersExecution = class SortNodeLayersExecution {
-    fComponentsStore;
-    fMediator;
-    fBrowser;
-    get fGroupsContainer() {
-        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    _fBrowser = inject(BrowserService);
+    get _fCanvas() {
+        return this._fComponentsStore.fCanvas;
     }
-    get fNodesContainer() {
-        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
+    get _fGroupsContainer() {
+        return this._fCanvas.fGroupsContainer().nativeElement;
     }
-    get fNodesContainerElements() {
-        return Array.from(this.fNodesContainer.children);
+    get _fNodesContainer() {
+        return this._fCanvas.fNodesContainer().nativeElement;
     }
-    constructor(fComponentsStore, fMediator, fBrowser) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-        this.fBrowser = fBrowser;
+    get _fNodeElements() {
+        return Array.from(this._fNodesContainer.children);
     }
     handle(request) {
-        this.getGroups().forEach((parent) => {
-            this.moveChildrenNodes(this.getSortedChildrenNodes(parent));
+        this._getGroups().forEach((parent) => {
+            this._moveChildrenNodes(this._getSortedChildrenNodes(parent));
         });
     }
-    getGroups() {
-        return this.fComponentsStore.fNodes.filter((x) => this.fGroupsContainer.contains(x.hostElement));
+    _getGroups() {
+        return this._fComponentsStore.fNodes
+            .filter((x) => this._fGroupsContainer.contains(x.hostElement));
     }
-    getSortedChildrenNodes(parent) {
-        const allElements = this.fNodesContainerElements;
-        return this.getChildrenNodes(parent.fId)
+    _getSortedChildrenNodes(parent) {
+        const allElements = this._fNodeElements;
+        return this._getChildrenNodes(parent.fId)
             .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
     }
-    getChildrenNodes(fId) {
-        return this.fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId))
-            .filter((x) => this.fNodesContainer.contains(x.hostElement)).map((x) => x.hostElement);
+    _getChildrenNodes(fId) {
+        return this._fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId))
+            .filter((x) => this._fNodesContainer.contains(x.hostElement)).map((x) => x.hostElement);
     }
-    moveChildrenNodes(sortedChildrenGroups) {
-        const fragment = this.fBrowser.document.createDocumentFragment();
+    _moveChildrenNodes(sortedChildrenGroups) {
+        const fragment = this._fBrowser.document.createDocumentFragment();
         sortedChildrenGroups.forEach((childGroup) => {
             fragment.appendChild(childGroup); // Append automatically removes the element from its current position
         });
-        this.fNodesContainer.appendChild(fragment);
+        this._fNodesContainer.appendChild(fragment);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortNodeLayersExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortNodeLayersExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortNodeLayersExecution });
 };
 SortNodeLayersExecution = __decorate([
@@ -8717,7 +9016,7 @@ SortNodeLayersExecution = __decorate([
 ], SortNodeLayersExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortNodeLayersExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }, { type: i1.BrowserService }] });
+        }] });
 
 class SortItemsByParentRequest {
     fItemsContainer;
@@ -8728,27 +9027,22 @@ class SortItemsByParentRequest {
 }
 
 let SortItemsByParentExecution = class SortItemsByParentExecution {
-    fComponentsStore;
-    fMediator;
-    fBrowser;
-    fItemsContainer;
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    _fBrowser = inject(BrowserService);
+    _fItemsContainer;
     get _fItemElements() {
-        return Array.from(this.fItemsContainer.children);
-    }
-    constructor(fComponentsStore, fMediator, fBrowser) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-        this.fBrowser = fBrowser;
+        return Array.from(this._fItemsContainer.children);
     }
     handle(request) {
-        this.fItemsContainer = request.fItemsContainer;
+        this._fItemsContainer = request.fItemsContainer;
         this._getItemsOfContainer().forEach((fItem) => {
-            this.moveChildrenItems(this._getSortedChildrenItems(fItem), fItem);
+            this._moveChildrenItems(this._getSortedChildrenItems(fItem), fItem);
         });
     }
     _getItemsOfContainer() {
-        return this.fComponentsStore.fNodes
-            .filter((x) => this.fItemsContainer.contains(x.hostElement));
+        return this._fComponentsStore.fNodes
+            .filter((x) => this._fItemsContainer.contains(x.hostElement));
     }
     _getSortedChildrenItems(fItem) {
         const indexInContainer = this._fItemElements.indexOf(fItem.hostElement);
@@ -8757,18 +9051,18 @@ let SortItemsByParentExecution = class SortItemsByParentExecution {
             .sort((a, b) => this._fItemElements.indexOf(a) - this._fItemElements.indexOf(b));
     }
     _getChildrenItems(fId) {
-        return this.fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId))
-            .filter((x) => this.fItemsContainer.contains(x.hostElement)).map((x) => x.hostElement);
+        return this._fMediator.execute(new GetDeepChildrenNodesAndGroupsRequest(fId))
+            .filter((x) => this._fItemsContainer.contains(x.hostElement)).map((x) => x.hostElement);
     }
-    moveChildrenItems(sortedChildrenItems, parent) {
+    _moveChildrenItems(sortedChildrenItems, parent) {
         let nextSibling = parent.hostElement.nextElementSibling;
-        const fragment = this.fBrowser.document.createDocumentFragment();
+        const fragment = this._fBrowser.document.createDocumentFragment();
         sortedChildrenItems.forEach((child) => {
             fragment.appendChild(child); // Append automatically removes the element from its current position
         });
-        this.fItemsContainer.insertBefore(fragment, nextSibling);
+        this._fItemsContainer.insertBefore(fragment, nextSibling);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemsByParentExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemsByParentExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemsByParentExecution });
 };
 SortItemsByParentExecution = __decorate([
@@ -8776,27 +9070,26 @@ SortItemsByParentExecution = __decorate([
 ], SortItemsByParentExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemsByParentExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }, { type: i1.BrowserService }] });
+        }] });
 
 class SortItemLayersRequest {
 }
 
 let SortItemLayersExecution = class SortItemLayersExecution {
-    fMediator;
-    fComponentsStore;
-    constructor(fMediator, fComponentsStore) {
-        this.fMediator = fMediator;
-        this.fComponentsStore = fComponentsStore;
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    get _fCanvas() {
+        return this._fComponentsStore.fCanvas;
     }
     handle(request) {
-        if (!this.fComponentsStore.fCanvas) {
+        if (!this._fComponentsStore.fCanvas) {
             return;
         }
-        this.fMediator.execute(new SortItemsByParentRequest(this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement));
-        this.fMediator.execute(new SortNodeLayersRequest());
-        this.fMediator.execute(new SortItemsByParentRequest(this.fComponentsStore.fCanvas.fNodesContainer.nativeElement));
+        this._fMediator.execute(new SortItemsByParentRequest(this._fCanvas.fGroupsContainer().nativeElement));
+        this._fMediator.execute(new SortNodeLayersRequest());
+        this._fMediator.execute(new SortItemsByParentRequest(this._fCanvas.fNodesContainer().nativeElement));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemLayersExecution, deps: [{ token: i2$1.FMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemLayersExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemLayersExecution });
 };
 SortItemLayersExecution = __decorate([
@@ -8804,7 +9097,7 @@ SortItemLayersExecution = __decorate([
 ], SortItemLayersExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SortItemLayersExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2$1.FMediator }, { type: FComponentsStore }] });
+        }] });
 
 function createSVGElement(tag, fBrowser) {
     return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
@@ -8873,26 +9166,25 @@ const COMMON_PROVIDERS = [
 
 let uniqueId$2 = 0;
 class FRectPatternComponent {
-    _fBrowser;
     _destroyRef = inject(DestroyRef);
     _elementReference = inject(ElementRef);
+    _fBrowser = inject(BrowserService);
     _stateChanges = new FChannel();
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    id = `f-pattern-${uniqueId$2++}`;
-    vColor = 'rgba(0,0,0,0.1)';
-    hColor = 'rgba(0,0,0,0.1)';
-    vSize = 20;
-    hSize = 20;
+    id = input(`f-pattern-${uniqueId$2++}`);
+    vColor = input('rgba(0,0,0,0.1)');
+    hColor = input('rgba(0,0,0,0.1)');
+    vSize = input(20, { transform: numberAttribute });
+    hSize = input(20, { transform: numberAttribute });
     _transform = TransformModelExtensions.default();
     _position = PointExtensions.initialize();
-    _size = SizeExtensions.initialize(this.hSize, this.vSize);
+    _size = SizeExtensions.initialize(this.hSize(), this.vSize());
     _pattern;
     _vLine;
     _hLine;
-    constructor(_fBrowser) {
-        this._fBrowser = _fBrowser;
+    constructor() {
         this._createPattern();
     }
     _createPattern() {
@@ -8918,13 +9210,13 @@ class FRectPatternComponent {
     _redraw() {
         this._calculatePattern();
         this._redrawPattern();
-        this.redrawLine(this._vLine, this.vColor, this._size.width, 0, this._size.width, this._size.height);
-        this.redrawLine(this._hLine, this.hColor, 0, this._size.height, this._size.width, this._size.height);
+        this.redrawLine(this._vLine, this.vColor(), this._size.width, 0, this._size.width, this._size.height);
+        this.redrawLine(this._hLine, this.hColor(), 0, this._size.height, this._size.width, this._size.height);
     }
     _calculatePattern() {
         this._position.x = this._transform.position.x + this._transform.scaledPosition.x;
         this._position.y = this._transform.position.y + this._transform.scaledPosition.y;
-        this._size = SizeExtensions.initialize(this.hSize * this._transform.scale, this.vSize * this._transform.scale);
+        this._size = SizeExtensions.initialize(this.hSize() * this._transform.scale, this.vSize() * this._transform.scale);
     }
     _redrawPattern() {
         this._pattern.setAttribute('x', `${this._position.x}`);
@@ -8946,8 +9238,8 @@ class FRectPatternComponent {
     _refresh() {
         this._stateChanges.notify();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FRectPatternComponent, deps: [{ token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FRectPatternComponent, selector: "f-rect-pattern", inputs: { id: "id", vColor: "vColor", hColor: "hColor", vSize: "vSize", hSize: "hSize" }, host: { properties: { "attr.id": "id" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FRectPatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: FRectPatternComponent, isStandalone: true, selector: "f-rect-pattern", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, vColor: { classPropertyName: "vColor", publicName: "vColor", isSignal: true, isRequired: false, transformFunction: null }, hColor: { classPropertyName: "hColor", publicName: "hColor", isSignal: true, isRequired: false, transformFunction: null }, vSize: { classPropertyName: "vSize", publicName: "vSize", isSignal: true, isRequired: false, transformFunction: null }, hSize: { classPropertyName: "hSize", publicName: "hSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id" } }, providers: [
             { provide: F_BACKGROUND_PATTERN, useExisting: FRectPatternComponent }
         ], usesOnChanges: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -8956,6 +9248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             args: [{
                     selector: "f-rect-pattern",
                     template: ``,
+                    standalone: true,
                     host: {
                         '[attr.id]': 'id'
                     },
@@ -8964,37 +9257,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i1.BrowserService }], propDecorators: { id: [{
-                type: Input
-            }], vColor: [{
-                type: Input
-            }], hColor: [{
-                type: Input
-            }], vSize: [{
-                type: Input
-            }], hSize: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 let uniqueId$1 = 0;
 class FCirclePatternComponent {
-    _fBrowser;
     _destroyRef = inject(DestroyRef);
     _elementReference = inject(ElementRef);
+    _fBrowser = inject(BrowserService);
     _stateChanges = new FChannel();
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    id = `f-pattern-${uniqueId$1++}`;
-    color = 'rgba(0,0,0,0.1)';
-    radius = 20;
+    id = input(`f-pattern-${uniqueId$1++}`);
+    color = input('rgba(0,0,0,0.1)');
+    radius = input(20, { transform: numberAttribute });
     _scaledRadius = 20;
     _transform = TransformModelExtensions.default();
     _position = PointExtensions.initialize();
     _pattern;
     _circle;
-    constructor(_fBrowser) {
-        this._fBrowser = _fBrowser;
+    constructor() {
         this._createPattern();
     }
     _createPattern() {
@@ -9023,7 +9305,7 @@ class FCirclePatternComponent {
     _calculatePattern() {
         this._position.x = this._transform.position.x + this._transform.scaledPosition.x;
         this._position.y = this._transform.position.y + this._transform.scaledPosition.y;
-        this._scaledRadius = this.radius * this._transform.scale;
+        this._scaledRadius = this.radius() * this._transform.scale;
     }
     _redrawPattern() {
         this._pattern.setAttribute('x', `${this._position.x}`);
@@ -9032,10 +9314,10 @@ class FCirclePatternComponent {
         this._pattern.setAttribute('height', `${this._scaledRadius}`);
     }
     _redrawElement() {
-        this._circle.setAttribute('fill', this.color);
+        this._circle.setAttribute('fill', this.color());
         this._circle.setAttribute('cx', `${this._scaledRadius / 2}`);
         this._circle.setAttribute('cy', `${this._scaledRadius / 2}`);
-        this._circle.setAttribute('r', `${this._scaledRadius / this.radius}`);
+        this._circle.setAttribute('r', `${this._scaledRadius / this.radius()}`);
     }
     setTransform(transform) {
         this._transform = transform;
@@ -9044,8 +9326,8 @@ class FCirclePatternComponent {
     _refresh() {
         this._stateChanges.notify();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCirclePatternComponent, deps: [{ token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FCirclePatternComponent, selector: "f-circle-pattern", inputs: { id: "id", color: "color", radius: "radius" }, host: { properties: { "attr.id": "id" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCirclePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: FCirclePatternComponent, isStandalone: true, selector: "f-circle-pattern", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id" } }, providers: [
             { provide: F_BACKGROUND_PATTERN, useExisting: FCirclePatternComponent }
         ], usesOnChanges: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -9054,6 +9336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             args: [{
                     selector: "f-circle-pattern",
                     template: ``,
+                    standalone: true,
                     host: {
                         '[attr.id]': 'id'
                     },
@@ -9062,13 +9345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i1.BrowserService }], propDecorators: { id: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], radius: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 const F_BACKGROUND = new InjectionToken('F_BACKGROUND');
 class FBackgroundBase {
@@ -9080,36 +9357,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }] });
 
 class FBackgroundComponent extends FBackgroundBase {
+    _fMediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    fBackgroundPattern;
-    _fMediator = inject(FMediator);
+    fBackgroundPattern = contentChild(F_BACKGROUND_PATTERN);
     ngOnInit() {
         this._fMediator.execute(new AddBackgroundToStoreRequest(this));
     }
     ngAfterContentInit() {
-        this._fMediator.execute(new AddPatternToBackgroundRequest(this.fBackgroundPattern));
+        this._fMediator.execute(new AddPatternToBackgroundRequest(this.fBackgroundPattern()));
     }
     setTransform(transform) {
-        this.fBackgroundPattern?.setTransform(transform);
+        this.fBackgroundPattern()?.setTransform(transform);
     }
     ngOnDestroy() {
         this._fMediator.execute(new RemoveBackgroundFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FBackgroundComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FBackgroundComponent, selector: "f-background", host: { classAttribute: "f-component f-background" }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], queries: [{ propertyName: "fBackgroundPattern", first: true, predicate: F_BACKGROUND_PATTERN, descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg><ng-content></ng-content></svg>", isInline: true, styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: FBackgroundComponent, isStandalone: true, selector: "f-background", host: { classAttribute: "f-component f-background" }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], queries: [{ propertyName: "fBackgroundPattern", first: true, predicate: F_BACKGROUND_PATTERN, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<svg><ng-content></ng-content></svg>", isInline: true, styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FBackgroundComponent, decorators: [{
             type: Component,
-            args: [{ selector: "f-background", template: "<svg><ng-content></ng-content></svg>", host: {
+            args: [{ selector: "f-background", template: "<svg><ng-content></ng-content></svg>", standalone: true, host: {
                         'class': 'f-component f-background'
                     }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"] }]
-        }], propDecorators: { fBackgroundPattern: [{
-                type: ContentChild,
-                args: [F_BACKGROUND_PATTERN, { static: false }]
-            }] } });
+        }] });
 
 const F_BACKGROUND_PROVIDERS = [
     FBackgroundComponent,
@@ -9146,23 +9420,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }] });
 
 class FCanvasComponent extends FCanvasBase {
+    _fMediator = inject(FMediator);
     _elementReference = inject(ElementRef);
-    fCanvasChange = new EventEmitter();
-    set position(value) {
-        this._fMediator.execute(new InputCanvasPositionRequest(this.transform, PointExtensions.castToPoint(value)));
-    }
-    set scale(value) {
-        this._fMediator.execute(new InputCanvasScaleRequest(this.transform, value));
-    }
+    _injector = inject(Injector);
+    fCanvasChange = output();
+    position = input(PointExtensions.initialize(), { transform: PointExtensions.castToPoint });
+    scale = input(1, { transform: numberAttribute });
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    fGroupsContainer;
-    fNodesContainer;
-    fConnectionsContainer;
-    _fMediator = inject(FMediator);
+    fGroupsContainer = viewChild.required('fGroupsContainer');
+    fNodesContainer = viewChild.required('fNodesContainer');
+    fConnectionsContainer = viewChild.required('fConnectionsContainer');
     ngOnInit() {
         this._fMediator.execute(new AddCanvasToStoreRequest(this));
+        this._positionChange();
+        this._scaleChange();
+    }
+    _positionChange() {
+        effect(() => {
+            this._fMediator.execute(new InputCanvasPositionRequest(this.transform, this.position()));
+        }, { injector: this._injector });
+    }
+    _scaleChange() {
+        effect(() => {
+            this._fMediator.execute(new InputCanvasScaleRequest(this.transform, this.scale()));
+        }, { injector: this._injector });
     }
     redraw() {
         this._fMediator.execute(new SetBackgroundTransformRequest(this.transform));
@@ -9175,13 +9458,13 @@ class FCanvasComponent extends FCanvasBase {
         transitionEnd(this.hostElement, () => this.redraw());
     }
     centerGroupOrNode(id, animated = true) {
-        this._fMediator.execute(new CenterGroupOrNodeRequest(id, animated));
+        setTimeout(() => this._fMediator.execute(new CenterGroupOrNodeRequest(id, animated)));
     }
     fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
-        this._fMediator.execute(new FitToFlowRequest(toCenter, animated));
+        setTimeout(() => this._fMediator.execute(new FitToFlowRequest(toCenter, animated)));
     }
     resetScaleAndCenter(animated = true) {
-        this._fMediator.execute(new ResetScaleAndCenterRequest(animated));
+        setTimeout(() => this._fMediator.execute(new ResetScaleAndCenterRequest(animated)));
     }
     getScale() {
         return this.transform.scale || 1;
@@ -9208,9 +9491,9 @@ class FCanvasComponent extends FCanvasBase {
         this._fMediator.execute(new RemoveCanvasFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCanvasComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", 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 } }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
             { provide: F_CANVAS, useExisting: FCanvasComponent }
-        ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, static: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, isSignal: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, isSignal: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     Deprecated('setScale')
@@ -9220,27 +9503,12 @@ __decorate([
 ], FCanvasComponent.prototype, "resetZoom", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'f-canvas', exportAs: 'fComponent', host: {
+            args: [{ selector: 'f-canvas', standalone: true, host: {
                         'class': 'f-component f-canvas',
                     }, providers: [
                         { provide: F_CANVAS, useExisting: FCanvasComponent }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"] }]
-        }], propDecorators: { fCanvasChange: [{
-                type: Output
-            }], position: [{
-                type: Input
-            }], scale: [{
-                type: Input
-            }], fGroupsContainer: [{
-                type: ViewChild,
-                args: ['fGroupsContainer', { static: true }]
-            }], fNodesContainer: [{
-                type: ViewChild,
-                args: ['fNodesContainer', { static: true }]
-            }], fConnectionsContainer: [{
-                type: ViewChild,
-                args: ['fConnectionsContainer', { static: true }]
-            }], setZoom: [], resetZoom: [] } });
+        }], propDecorators: { setZoom: [], resetZoom: [] } });
 
 const F_CANVAS_PROVIDERS = [
     FCanvasComponent,
@@ -9396,25 +9664,21 @@ class FFlowBase {
 
 let uniqueId = 0;
 class FFlowComponent extends FFlowBase {
-    fBrowser;
     _destroyRef = inject(DestroyRef);
     _fMediator = inject(FMediator);
+    _browserService = inject(BrowserService);
     _elementReference = inject(ElementRef);
-    fId = `f-flow-${uniqueId++}`;
+    fId = input(`f-flow-${uniqueId++}`, { alias: 'fFlowId' });
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    fLoaded = new EventEmitter();
+    fLoaded = output();
     _isLoaded = false;
-    constructor(fBrowser) {
-        super();
-        this.fBrowser = fBrowser;
-    }
     ngOnInit() {
         this._fMediator.execute(new AddFlowToStoreRequest(this));
     }
     ngAfterContentInit() {
-        if (!this.fBrowser.isBrowser()) {
+        if (!this._browserService.isBrowser()) {
             return;
         }
         this._listenCountChanges();
@@ -9467,8 +9731,8 @@ class FFlowComponent extends FFlowBase {
     ngOnDestroy() {
         this._fMediator.execute(new RemoveFlowFromStoreRequest());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FFlowComponent, deps: [{ token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FFlowComponent, selector: "f-flow", inputs: { fId: ["fFlowId", "fId"] }, outputs: { fLoaded: "fLoaded" }, host: { properties: { "attr.id": "fId" }, classAttribute: "f-component f-flow" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FFlowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: FFlowComponent, isStandalone: true, selector: "f-flow", inputs: { fId: { classPropertyName: "fId", publicName: "fFlowId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fLoaded: "fLoaded" }, host: { properties: { "attr.id": "fId()" }, classAttribute: "f-component f-flow" }, providers: [
             FMediator,
             ...F_STORAGE_PROVIDERS,
             FDraggableDataContext,
@@ -9480,8 +9744,8 @@ class FFlowComponent extends FFlowBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FFlowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'f-flow', host: {
-                        '[attr.id]': 'fId',
+            args: [{ selector: 'f-flow', standalone: true, host: {
+                        '[attr.id]': 'fId()',
                         class: "f-component f-flow",
                     }, providers: [
                         FMediator,
@@ -9492,12 +9756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         ...F_DRAGGABLE_PROVIDERS,
                         { provide: F_FLOW, useExisting: FFlowComponent },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content select=\"f-minimap\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.BrowserService }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fFlowId']
-            }], fLoaded: [{
-                type: Output
-            }] } });
+        }] });
 
 const F_FLOW_PROVIDERS = [
     FFlowComponent
@@ -9650,20 +9909,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 args: [{ alias: 'fZoomDblClickStep', transform: numberAttribute }]
             }], getScale: [] } });
 
+const F_ZOOM_PROVIDERS = [
+    FZoomDirective
+];
+
 class FFlowModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, declarations: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FSnapConnectionComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective], imports: [CommonModule], exports: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FSnapConnectionComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, declarations: [FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleStartComponent, FConnectionDragHandleEndComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FSnapConnectionComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FRotateHandleDirective, FSelectionAreaComponent, FDraggableDirective], imports: [FFlowComponent, FCanvasComponent, FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FZoomDirective, FExternalItemDirective, CommonModule], exports: [FFlowComponent, FCanvasComponent, FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FZoomDirective, FExternalItemDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleStartComponent, FConnectionDragHandleEndComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FSnapConnectionComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FRotateHandleDirective, FSelectionAreaComponent, FDraggableDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        ...F_BACKGROUND_PROVIDERS,
-                        ...F_CANVAS_PROVIDERS,
                         ...F_CONNECTION_PROVIDERS,
                         ...F_CONNECTORS_PROVIDERS,
-                        ...F_FLOW_PROVIDERS,
                         ...F_LINE_ALIGNMENT_PROVIDERS,
                         ...F_MINIMAP_PROVIDERS,
                         ...F_NODE_PROVIDERS,
@@ -9671,14 +9931,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         FDraggableDirective,
                     ],
                     imports: [
+                        ...F_FLOW_PROVIDERS,
+                        ...F_CANVAS_PROVIDERS,
+                        ...F_BACKGROUND_PROVIDERS,
+                        ...F_ZOOM_PROVIDERS,
+                        ...F_EXTERNAL_ITEM_PROVIDERS,
                         CommonModule,
                     ],
                     exports: [
-                        ...F_BACKGROUND_PROVIDERS,
+                        ...F_FLOW_PROVIDERS,
                         ...F_CANVAS_PROVIDERS,
+                        ...F_BACKGROUND_PROVIDERS,
+                        ...F_ZOOM_PROVIDERS,
+                        ...F_EXTERNAL_ITEM_PROVIDERS,
                         ...F_CONNECTION_PROVIDERS,
                         ...F_CONNECTORS_PROVIDERS,
-                        ...F_FLOW_PROVIDERS,
                         ...F_LINE_ALIGNMENT_PROVIDERS,
                         ...F_MINIMAP_PROVIDERS,
                         ...F_NODE_PROVIDERS,
@@ -9692,5 +9959,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStoreExecution, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStoreExecution, AddNodeToStoreRequest, AddOutletToStoreExecution, AddOutletToStoreRequest, AddOutputToStoreExecution, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, BaseConnectionDragHandler, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateClosestInputExecution, CalculateClosestInputRequest, CalculateCommonNodeMoveLimitsExecution, CalculateCommonNodeMoveLimitsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateNodeMoveLimitsExecution, CalculateNodeMoveLimitsRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFZoomDirection, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCanvasDragHandler, FCanvasMoveFinalizeExecution, FCanvasMoveFinalizeRequest, FCanvasMovePreparationExecution, FCanvasMovePreparationRequest, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionDragHandler, FCreateConnectionDragHandlerPreparationExecution, FCreateConnectionDragHandlerPreparationRequest, FCreateConnectionEvent, FCreateConnectionFinalizeExecution, FCreateConnectionFinalizeRequest, FCreateConnectionFromOutletPreparationExecution, FCreateConnectionFromOutletPreparationRequest, FCreateConnectionFromOutputPreparationExecution, FCreateConnectionFromOutputPreparationRequest, FCreateConnectionPreparationExecution, FCreateConnectionPreparationRequest, FCreateNodeEvent, FDragHandleDirective, FDragHandlerResult, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemCreatePlaceholderExecution, FExternalItemCreatePlaceholderRequest, FExternalItemCreatePreviewExecution, FExternalItemCreatePreviewRequest, FExternalItemDirective, FExternalItemDragHandler, FExternalItemFinalizeExecution, FExternalItemFinalizeRequest, FExternalItemPlaceholderDirective, FExternalItemPreparationExecution, FExternalItemPreparationRequest, FExternalItemPreviewDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FInjector, FLineAlignmentBase, FLineAlignmentComponent, FLineAlignmentDragHandler, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FNodeBase, FNodeDirective, FNodeDropToGroupDragHandler, FNodeDropToGroupFinalizeExecution, FNodeDropToGroupFinalizeRequest, FNodeDropToGroupPreparationExecution, FNodeDropToGroupPreparationRequest, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeMoveDragHandler, FNodeMoveFinalizeExecution, FNodeMoveFinalizeRequest, FNodeMovePreparationExecution, FNodeMovePreparationRequest, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeResizeDragHandler, FNodeResizeFinalizeExecution, FNodeResizeFinalizeRequest, FNodeResizePreparationExecution, FNodeResizePreparationRequest, FReassignConnectionDragHandler, FReassignConnectionEvent, FReassignConnectionFinalizeExecution, FReassignConnectionFinalizeRequest, FReassignConnectionPreparationExecution, FReassignConnectionPreparationRequest, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSingleSelectExecution, FSingleSelectRequest, FSnapConnectionComponent, FStraightPathBuilder, FSummaryNodeMoveDragHandler, FZoomBase, FZoomDirective, F_AFTER_MAIN_PLUGIN, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_BEFORE_MAIN_PLUGIN, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CSS_CLASS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_RESIZE_HANDLE, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_TAG, FindInputAtPositionExecution, FindInputAtPositionRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFirstConnectableOutputExecution, GetFirstConnectableOutputRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineAlignmentPreparationExecution, LineAlignmentPreparationRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MarkAllCanBeConnectedInputsExecution, MarkAllCanBeConnectedInputsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DROP_TO_GROUP_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PointBoundsLimiter, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, RedrawCanvasWithAnimationExecution, RedrawCanvasWithAnimationRequest, RedrawConnectionsExecution, RedrawConnectionsRequest, RemoveBackgroundFromStoreExecution, RemoveBackgroundFromStoreRequest, RemoveCanvasFromStoreExecution, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStoreExecution, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStoreExecution, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStoreExecution, RemoveConnectionMarkerFromStoreRequest, RemoveDndFromStoreExecution, RemoveDndFromStoreRequest, RemoveFlowFromStoreExecution, RemoveFlowFromStoreRequest, RemoveInputFromStoreExecution, RemoveInputFromStoreRequest, RemoveLineAlignmentFromStoreExecution, RemoveLineAlignmentFromStoreRequest, RemoveNodeFromStoreExecution, RemoveNodeFromStoreRequest, RemoveOutletFromStoreExecution, RemoveOutletFromStoreRequest, RemoveOutputFromStoreExecution, RemoveOutputFromStoreRequest, RemoveSnapConnectionFromStoreExecution, RemoveSnapConnectionFromStoreRequest, RemoveZoomFromStoreExecution, RemoveZoomFromStoreRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, ResetZoomExecution, ResetZoomRequest, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SourceConnectionDragHandler, SourceTargetConnectionDragHandler, StartDragSequenceExecution, StartDragSequenceRequest, TargetConnectionDragHandler, UnmarkAllCanBeConnectedInputsExecution, UnmarkAllCanBeConnectedInputsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, fInject, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isValidEventTrigger, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, transitionEnd };
+export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStoreExecution, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStoreExecution, AddNodeToStoreRequest, AddOutletToStoreExecution, AddOutletToStoreRequest, AddOutputToStoreExecution, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, BaseConnectionDragHandler, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateClosestInputExecution, CalculateClosestInputRequest, CalculateCommonNodeMoveLimitsExecution, CalculateCommonNodeMoveLimitsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateInputConnectionsExecution, CalculateInputConnectionsRequest, CalculateNodeMoveLimitsExecution, CalculateNodeMoveLimitsRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CalculateOutputConnectionsExecution, CalculateOutputConnectionsRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFZoomDirection, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCanvasDragHandler, FCanvasMoveFinalizeExecution, FCanvasMoveFinalizeRequest, FCanvasMovePreparationExecution, FCanvasMovePreparationRequest, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleEndComponent, FConnectionDragHandleStartComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionDragHandler, FCreateConnectionDragHandlerPreparationExecution, FCreateConnectionDragHandlerPreparationRequest, FCreateConnectionEvent, FCreateConnectionFinalizeExecution, FCreateConnectionFinalizeRequest, FCreateConnectionFromOutletPreparationExecution, FCreateConnectionFromOutletPreparationRequest, FCreateConnectionFromOutputPreparationExecution, FCreateConnectionFromOutputPreparationRequest, FCreateConnectionPreparationExecution, FCreateConnectionPreparationRequest, FCreateNodeEvent, FDragHandleDirective, FDragHandlerResult, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemCreatePlaceholderExecution, FExternalItemCreatePlaceholderRequest, FExternalItemCreatePreviewExecution, FExternalItemCreatePreviewRequest, FExternalItemDirective, FExternalItemDragHandler, FExternalItemFinalizeExecution, FExternalItemFinalizeRequest, FExternalItemPlaceholderDirective, FExternalItemPreparationExecution, FExternalItemPreparationRequest, FExternalItemPreviewDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FInjector, FLineAlignmentBase, FLineAlignmentComponent, FLineAlignmentDragHandler, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FNodeBase, FNodeDirective, FNodeDropToGroupDragHandler, FNodeDropToGroupFinalizeExecution, FNodeDropToGroupFinalizeRequest, FNodeDropToGroupPreparationExecution, FNodeDropToGroupPreparationRequest, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeMoveDragHandler, FNodeMoveFinalizeExecution, FNodeMoveFinalizeRequest, FNodeMovePreparationExecution, FNodeMovePreparationRequest, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeResizeDragHandler, FNodeResizeFinalizeExecution, FNodeResizeFinalizeRequest, FNodeResizePreparationExecution, FNodeResizePreparationRequest, FNodeRotateDragHandler, FNodeRotateFinalizeExecution, FNodeRotateFinalizeRequest, FNodeRotatePreparationExecution, FNodeRotatePreparationRequest, FReassignConnectionDragHandler, FReassignConnectionEvent, FReassignConnectionFinalizeExecution, FReassignConnectionFinalizeRequest, FReassignConnectionPreparationExecution, FReassignConnectionPreparationRequest, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSingleSelectExecution, FSingleSelectRequest, FSnapConnectionComponent, FStraightPathBuilder, FSummaryNodeMoveDragHandler, FZoomBase, FZoomDirective, F_AFTER_MAIN_PLUGIN, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_BEFORE_MAIN_PLUGIN, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CSS_CLASS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, F_ZOOM_TAG, FindInputAtPositionExecution, FindInputAtPositionRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFirstConnectableOutputExecution, GetFirstConnectableOutputRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineAlignmentPreparationExecution, LineAlignmentPreparationRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MarkAllCanBeConnectedInputsExecution, MarkAllCanBeConnectedInputsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DROP_TO_GROUP_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NODE_ROTATE_PROVIDERS, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PointBoundsLimiter, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, RedrawCanvasWithAnimationExecution, RedrawCanvasWithAnimationRequest, RedrawConnectionsExecution, RedrawConnectionsRequest, RemoveBackgroundFromStoreExecution, RemoveBackgroundFromStoreRequest, RemoveCanvasFromStoreExecution, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStoreExecution, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStoreExecution, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStoreExecution, RemoveConnectionMarkerFromStoreRequest, RemoveDndFromStoreExecution, RemoveDndFromStoreRequest, RemoveFlowFromStoreExecution, RemoveFlowFromStoreRequest, RemoveInputFromStoreExecution, RemoveInputFromStoreRequest, RemoveLineAlignmentFromStoreExecution, RemoveLineAlignmentFromStoreRequest, RemoveNodeFromStoreExecution, RemoveNodeFromStoreRequest, RemoveOutletFromStoreExecution, RemoveOutletFromStoreRequest, RemoveOutputFromStoreExecution, RemoveOutputFromStoreRequest, RemoveSnapConnectionFromStoreExecution, RemoveSnapConnectionFromStoreRequest, RemoveZoomFromStoreExecution, RemoveZoomFromStoreRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, ResetZoomExecution, ResetZoomRequest, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SourceConnectionDragHandler, SourceTargetConnectionDragHandler, StartDragSequenceExecution, StartDragSequenceRequest, TargetConnectionDragHandler, UnmarkAllCanBeConnectedInputsExecution, UnmarkAllCanBeConnectedInputsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, fInject, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isRotateHandle, isValidEventTrigger, mediatorEffect, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, transitionEnd };
 //# sourceMappingURL=foblex-flow.mjs.map