@foblex/flow 17.5.8 → 17.6.0

package/fesm2022/foblex-flow.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, effect, Directive, input, computed, DestroyRef, EventEmitter, booleanAttribute, Input, Output, ElementRef, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, numberAttribute, ContentChildren, Injector, ViewContainerRef, TemplateRef, NgZone, contentChild, output, viewChild, Renderer2, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, effect, Directive, input, computed, signal, DestroyRef, EventEmitter, booleanAttribute, Input, Output, ElementRef, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, viewChild, contentChildren, numberAttribute, Injector, ViewContainerRef, TemplateRef, NgZone, ContentChildren, contentChild, output, Renderer2, NgModule } from '@angular/core';
 import { RectExtensions, RoundedRect, TransformModelExtensions, PointExtensions, SizeExtensions, Point, LineExtensions, GetIntersections, findClosestAlignment, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
-import * as i2$1 from '@foblex/mediator';
+import * as i2 from '@foblex/mediator';
 import { FExecutionRegister, FMediator } from '@foblex/mediator';
 import * as i1 from '@foblex/platform';
 import { BrowserService, PlatformService, EOperationSystem } from '@foblex/platform';
 import { normalizeDomElementId, castToEnum, isClosestElementHasClass, flatMap, getOrCreateRootNodeForViewRef, deepCloneNode, disableDragInteractions, extendStyles, getDataAttrValueFromClosestElementWithClass } from '@foblex/utils';
-import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
@@ -446,10 +445,10 @@ class CenterGroupOrNodeRequest {
 
 let CenterGroupOrNodeExecution = class CenterGroupOrNodeExecution {
     _fComponentsStore = inject(FComponentsStore);
+    _fMediator = inject(FMediator);
     get transform() {
         return this._fComponentsStore.fCanvas.transform;
     }
-    _fMediator = inject(FMediator);
     handle(request) {
         const fNode = this.getNode(request.id);
         if (!fNode) {
@@ -463,7 +462,7 @@ let CenterGroupOrNodeExecution = class CenterGroupOrNodeExecution {
         this.transform.position = PointExtensions.initialize((fFlowRect.width - fNodeRect.width) / 2 - position.x * this.transform.scale, (fFlowRect.height - fNodeRect.height) / 2 - position.y * this.transform.scale);
     }
     getNode(id) {
-        return this._fComponentsStore.fNodes.find((x) => x.fId === id);
+        return this._fComponentsStore.fNodes.find((x) => x.fId() === id);
     }
     getNodeRect(fNode) {
         return RectExtensions.fromElement(fNode.hostElement);
@@ -901,17 +900,13 @@ class CreateConnectionMarkersRequest {
 }
 
 let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
-    fBrowser;
-    fComponentsStore;
-    constructor(fBrowser, fComponentsStore) {
-        this.fBrowser = fBrowser;
-        this.fComponentsStore = fComponentsStore;
-    }
+    _browser = inject(BrowserService);
+    _componentsStore = inject(FComponentsStore);
     handle(request) {
-        const element = createSVGElement$1('defs', this.fBrowser);
+        const element = createSVGElement$1('defs', this._browser);
         const fConnection = request.fConnection;
         this.getMarkers(fConnection).forEach((marker) => {
-            const markerElement = this.createMarkerElement(marker, fConnection.fId);
+            const markerElement = this.createMarkerElement(marker, fConnection.fId());
             const clone = marker.hostElement.cloneNode(true);
             clone.setAttribute('height', `${marker.height}`);
             clone.setAttribute('width', `${marker.width}`);
@@ -920,18 +915,21 @@ let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
             markerElement.append(clone);
             element.append(markerElement);
         });
-        fConnection.fDefs.nativeElement.innerHTML = element.innerHTML;
+        const defs = fConnection.fDefs();
+        if (defs) {
+            defs.nativeElement.innerHTML = element.innerHTML;
+        }
         this.makeSafariCompatible(fConnection);
     }
     getMarkers(fConnection) {
-        return this.fComponentsStore.fMarkers.filter((x) => fConnection.hostElement.contains(x.hostElement));
+        return this._componentsStore.fMarkers.filter((x) => fConnection.hostElement.contains(x.hostElement));
     }
     // Safari does not support markers on path elements if markers are defined after the path element
     makeSafariCompatible(fConnection) {
-        fConnection.fPath.hostElement.replaceWith(fConnection.fPath.hostElement);
+        fConnection.fPath().hostElement.replaceWith(fConnection.fPath().hostElement);
     }
     createMarkerElement(marker, fConnectionId) {
-        const markerElement = createSVGElement$1('marker', this.fBrowser);
+        const markerElement = createSVGElement$1('marker', this._browser);
         markerElement.setAttribute('id', normalizeDomElementId(marker.type + '-' + fConnectionId));
         markerElement.setAttribute('markerHeight', `${marker.height}`);
         markerElement.setAttribute('markerWidth', `${marker.width}`);
@@ -941,7 +939,7 @@ let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
         markerElement.setAttribute('markerUnits', `${marker.markerUnits}`);
         return markerElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreateConnectionMarkersExecution, deps: [{ token: i1.BrowserService }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreateConnectionMarkersExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreateConnectionMarkersExecution });
 };
 CreateConnectionMarkersExecution = __decorate([
@@ -949,7 +947,7 @@ CreateConnectionMarkersExecution = __decorate([
 ], CreateConnectionMarkersExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreateConnectionMarkersExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.BrowserService }, { type: FComponentsStore }] });
+        }] });
 function createSVGElement$1(tag, fBrowser) {
     return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
 }
@@ -1147,7 +1145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 const F_SELECTED_CLASS = 'f-selected';
 function mixinChangeSelection(base) {
     return class extends base {
-        fId = '';
+        fId = signal('');
         fSelectionDisabled = false;
         unmarkAsSelected() {
             this.unmarkChildrenAsSelected?.();
@@ -1244,7 +1242,7 @@ class FGroupDirective extends FNodeBase {
     fBrowser;
     _destroyRef = inject(DestroyRef);
     _fMediator = inject(FMediator);
-    fId = `f-group-${uniqueId$b++}`;
+    fId = input(`f-group-${uniqueId$b++}`, { alias: 'fGroupId' });
     fParentId = null;
     set position(value) {
         if (!PointExtensions.isEqual(this._position, value)) {
@@ -1322,7 +1320,7 @@ class FGroupDirective extends FNodeBase {
         this._fMediator.execute(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FGroupDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: ["fGroupId", "fId"], fParentId: ["fGroupParentId", "fParentId"], position: ["fGroupPosition", "position"], rotate: ["fGroupRotate", "rotate"], size: ["fGroupSize", "size"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute], fMinimapClass: "fMinimapClass" }, outputs: { positionChange: "fGroupPositionChange", rotateChange: "fGroupRotateChange", sizeChange: "fGroupSizeChange" }, host: { properties: { "attr.data-f-group-id": "fId", "class.f-group-dragging-disabled": "fDraggingDisabled", "class.f-group-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-group f-component" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: { classPropertyName: "fId", publicName: "fGroupId", isSignal: true, isRequired: false, transformFunction: null }, fParentId: { classPropertyName: "fParentId", publicName: "fGroupParentId", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fGroupPosition", isSignal: false, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "fGroupRotate", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "fGroupSize", isSignal: false, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fGroupDraggingDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fGroupSelectionDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fIncludePadding: { classPropertyName: "fIncludePadding", publicName: "fIncludePadding", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fConnectOnNode: { classPropertyName: "fConnectOnNode", publicName: "fConnectOnNode", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fMinimapClass: { classPropertyName: "fMinimapClass", publicName: "fMinimapClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { positionChange: "fGroupPositionChange", rotateChange: "fGroupRotateChange", sizeChange: "fGroupSizeChange" }, host: { properties: { "attr.data-f-group-id": "fId()", "class.f-group-dragging-disabled": "fDraggingDisabled", "class.f-group-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-group f-component" }, providers: [
             { provide: F_NODE, useExisting: FGroupDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
@@ -1332,7 +1330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: "[fGroup]",
                     exportAs: "fComponent",
                     host: {
-                        '[attr.data-f-group-id]': 'fId',
+                        '[attr.data-f-group-id]': 'fId()',
                         class: "f-group f-component",
                         '[class.f-group-dragging-disabled]': 'fDraggingDisabled',
                         '[class.f-group-selection-disabled]': 'fSelectionDisabled',
@@ -1341,10 +1339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         { provide: F_NODE, useExisting: FGroupDirective }
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BrowserService }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fGroupId']
-            }], fParentId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BrowserService }], propDecorators: { fParentId: [{
                 type: Input,
                 args: ['fGroupParentId']
             }], position: [{
@@ -1387,7 +1382,7 @@ class FNodeDirective extends FNodeBase {
     fBrowser;
     _destroyRef = inject(DestroyRef);
     _fMediator = inject(FMediator);
-    fId = `f-node-${uniqueId$a++}`;
+    fId = input(`f-node-${uniqueId$a++}`, { alias: 'fNodeId' });
     fParentId = null;
     set position(value) {
         if (!PointExtensions.isEqual(this._position, value)) {
@@ -1466,7 +1461,7 @@ class FNodeDirective extends FNodeBase {
         this._fMediator.execute(new RemoveNodeFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], fParentId: ["fNodeParentId", "fParentId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], rotate: ["fNodeRotate", "rotate"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled", booleanAttribute], fIncludePadding: ["fIncludePadding", "fIncludePadding", booleanAttribute], fConnectOnNode: ["fConnectOnNode", "fConnectOnNode", booleanAttribute], fMinimapClass: "fMinimapClass" }, outputs: { positionChange: "fNodePositionChange", rotateChange: "fNodeRotateChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FNodeDirective, selector: "[fNode]", inputs: { fId: { classPropertyName: "fId", publicName: "fNodeId", isSignal: true, isRequired: false, transformFunction: null }, fParentId: { classPropertyName: "fParentId", publicName: "fNodeParentId", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fNodePosition", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "fNodeSize", isSignal: false, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "fNodeRotate", isSignal: false, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fNodeDraggingDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fNodeSelectionDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fIncludePadding: { classPropertyName: "fIncludePadding", publicName: "fIncludePadding", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fConnectOnNode: { classPropertyName: "fConnectOnNode", publicName: "fConnectOnNode", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fMinimapClass: { classPropertyName: "fMinimapClass", publicName: "fMinimapClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { positionChange: "fNodePositionChange", rotateChange: "fNodeRotateChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId()", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
             { provide: F_NODE, useExisting: FNodeDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
@@ -1476,7 +1471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: "[fNode]",
                     exportAs: "fComponent",
                     host: {
-                        '[attr.data-f-node-id]': 'fId',
+                        '[attr.data-f-node-id]': 'fId()',
                         class: "f-node f-component",
                         '[class.f-node-dragging-disabled]': 'fDraggingDisabled',
                         '[class.f-node-selection-disabled]': 'fSelectionDisabled',
@@ -1485,10 +1480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         { provide: F_NODE, useExisting: FNodeDirective }
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BrowserService }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fNodeId']
-            }], fParentId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BrowserService }], propDecorators: { fParentId: [{
                 type: Input,
                 args: ['fNodeParentId']
             }], position: [{
@@ -1547,7 +1539,7 @@ class FNodeInputDirective extends FNodeInputBase {
     disabled = false;
     userFConnectableSide = EFConnectableSide.AUTO;
     get fNodeId() {
-        return this._fNode.fId;
+        return this._fNode.fId();
     }
     get hostElement() {
         return this._elementReference.nativeElement;
@@ -1641,7 +1633,7 @@ class FNodeOutletDirective extends FNodeOutletBase {
     isConnectionFromOutlet = false;
     canBeConnectedInputs = [];
     get fNodeId() {
-        return this._fNode.fId;
+        return this._fNode.fId();
     }
     get hostElement() {
         return this._elementReference.nativeElement;
@@ -1708,7 +1700,7 @@ class FNodeOutputDirective extends FNodeOutputBase {
     isSelfConnectable = true;
     canBeConnectedInputs = [];
     get fNodeId() {
-        return this._fNode.fId;
+        return this._fNode.fId();
     }
     get hostElement() {
         return this._elementReference.nativeElement;
@@ -1812,7 +1804,12 @@ class FBezierPathBuilder {
         const targetAnglePoint = FBezierPathBuilder.getAnglePoint(targetSide, target, source, offset);
         const path = `M ${source.x} ${source.y} C ${sourceAnglePoint.x} ${sourceAnglePoint.y}, ${targetAnglePoint.x} ${targetAnglePoint.y}, ${target.x + 0.0002} ${target.y + 0.0002}`;
         const connectionCenter = new CalculateConnectionCenterHandler().handle(new CalculateConnectionCenterRequest([source, sourceAnglePoint, targetAnglePoint, target]));
-        return { path, connectionCenter, penultimatePoint: targetAnglePoint };
+        return {
+            path,
+            connectionCenter,
+            penultimatePoint: targetAnglePoint,
+            secondPoint: sourceAnglePoint,
+        };
     }
 }
 
@@ -1829,7 +1826,8 @@ class FSegmentPathBuilder {
         const { points, center } = this.getPathPoints(source, sourceSide, target, targetSide, request.offset);
         const path = this.buildPath(points, request.radius);
         const penultimatePoint = points.length > 1 ? points[points.length - 2] : source;
-        return { path, connectionCenter: center, penultimatePoint };
+        const secondPoint = points.length > 1 ? points[1] : target;
+        return { path, connectionCenter: center, penultimatePoint, secondPoint };
     }
     getPathPoints(source, sourceSide, target, targetSide, offset) {
         const sourceDirection = CONNECTOR_SIDE_POINT[sourceSide];
@@ -1959,7 +1957,7 @@ class FStraightPathBuilder {
         const { source, target } = request;
         const path = `M ${source.x} ${source.y} L ${target.x + 0.0002} ${target.y + 0.0002}`;
         const connectionCenter = new CalculateConnectionCenterHandler().handle(new CalculateConnectionCenterRequest([source, target]));
-        return { path, connectionCenter, penultimatePoint: source };
+        return { path, connectionCenter, penultimatePoint: source, secondPoint: target };
     }
 }
 
@@ -1991,7 +1989,7 @@ class FConnectionTextPathDirective {
     base;
     fBrowser;
     get linkToConnection() {
-        return F_CONNECTION_IDENTIFIERS.linkToConnection(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.linkToConnection(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2062,7 +2060,7 @@ class FConnectionTextComponent {
     elementReference;
     base;
     get textId() {
-        return F_CONNECTION_IDENTIFIERS.textId(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.textId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2130,7 +2128,7 @@ const F_CSS_CLASS = {
         OUTPUT_NOT_CONNECTABLE: 'f-node-output-not-connectable',
         INPUT_CONNECTED: 'f-node-input-connected',
         INPUT_NOT_CONNECTABLE: 'f-node-input-not-connectable',
-        INPUT_CAN_BE_CONNECTED_TO: 'f-node-input-can-be-connected-to',
+        CONNECTABLE: 'f-connector-connectable',
     },
     CONNECTION: {
         DRAG_HANDLE: 'f-connection-drag-handle',
@@ -2211,7 +2209,7 @@ class FConnectionGradientComponent {
     elementReference;
     base;
     get gradientId() {
-        return F_CONNECTION_IDENTIFIERS.gradientId(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.gradientId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2231,8 +2229,8 @@ class FConnectionGradientComponent {
         this.stop2Element.setAttribute('offset', '100%');
     }
     updateGradient() {
-        this.setFromColor(this.base.fStartColor);
-        this.setToColor(this.base.fEndColor);
+        this.setFromColor(this.base.fStartColor());
+        this.setToColor(this.base.fEndColor());
     }
     setFromColor(color) {
         this.stop1Element.setAttribute('stop-color', color || 'transparent');
@@ -2285,13 +2283,13 @@ class FConnectionPathComponent {
     elementReference;
     base;
     get fPathId() {
-        return this.base.fId;
+        return this.base.fId();
     }
     get linkToGradient() {
-        return F_CONNECTION_IDENTIFIERS.linkToGradient(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.linkToGradient(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get attrConnectionId() {
-        return F_CONNECTION_IDENTIFIERS.connectionId(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.connectionId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2307,12 +2305,12 @@ class FConnectionPathComponent {
         this.hostElement.setAttribute("d", `${path}`);
     }
     select() {
-        this.hostElement.setAttribute('marker-start', `url(#${getMarkerSelectedStartId(this.base.fId)})`);
-        this.hostElement.setAttribute('marker-end', `url(#${getMarkerSelectedEndId(this.base.fId)})`);
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerSelectedStartId(this.base.fId())})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerSelectedEndId(this.base.fId())})`);
     }
     deselect() {
-        this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this.base.fId)})`);
-        this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fId)})`);
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this.base.fId())})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fId())})`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.data-f-path-id": "fPathId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], ngImport: i0, template: '', isInline: true, styles: [":host{fill:none;pointer-events:stroke}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -2334,7 +2332,7 @@ class FConnectionSelectionComponent {
     elementReference;
     base;
     get connectionForSelectionId() {
-        return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this.base.fId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2402,14 +2400,16 @@ class FConnectionBase extends MIXIN_BASE {
     cFactory;
     path = '';
     line = LineExtensions.initialize();
+    fReassignableStart = signal(false);
     penultimatePoint = PointExtensions.initialize();
+    secondPoint = PointExtensions.initialize();
     constructor(elementReference, cFactory) {
         super(elementReference.nativeElement);
         this.cFactory = cFactory;
     }
     initialize() {
-        this.fPath.initialize();
-        this.fGradient.initialize();
+        this.fPath().initialize();
+        this.fGradient().initialize();
         this.redraw();
     }
     isContains(element) {
@@ -2420,7 +2420,8 @@ class FConnectionBase extends MIXIN_BASE {
         const pathResult = this.getPathResult(point1, sourceSide, point2, targetSide);
         this.path = pathResult.path;
         this.penultimatePoint = pathResult.penultimatePoint || point1;
-        this.fConnectionCenter?.nativeElement?.setAttribute('style', this.getTransform(pathResult.connectionCenter));
+        this.secondPoint = pathResult.secondPoint || point2;
+        this.fConnectionCenter()?.nativeElement?.setAttribute('style', this.getTransform(pathResult.connectionCenter));
     }
     getPathResult(source, sourceSide, target, targetSide) {
         const radius = this.fRadius > 0 ? this.fRadius : 0;
@@ -2434,17 +2435,18 @@ class FConnectionBase extends MIXIN_BASE {
         return `position: absolute; pointerEvents: all; transform: translate(-50%, -50%); left: ${position.x}px; top: ${position.y}px`;
     }
     markChildrenAsSelected() {
-        this.fPath.select();
+        this.fPath().select();
     }
     unmarkChildrenAsSelected() {
-        this.fPath.deselect();
+        this.fPath().deselect();
     }
     redraw() {
-        this.fPath.setPath(this.path);
-        this.fSelection.setPath(this.path);
-        this.fGradient.redraw(this.line);
-        this.fDragHandle.redraw(this.penultimatePoint, this.line.point2);
-        this.fTextComponent.redraw(this.line);
+        this.fPath().setPath(this.path);
+        this.fSelection().setPath(this.path);
+        this.fGradient().redraw(this.line);
+        this.fDragHandleEnd().redraw(this.penultimatePoint, this.line.point2);
+        this.fDragHandleStart()?.redraw(this.secondPoint, this.line.point1);
+        this.fTextComponent().redraw(this.line);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionBase, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FConnectionBase, usesInheritance: true, ngImport: i0 });
@@ -2480,11 +2482,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 let uniqueId$6 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
-    fId = `f-connection-for-create-${uniqueId$6++}`;
+    fId = signal(`f-connection-for-create-${uniqueId$6++}`);
     fText = '';
     fTextStartOffset = '';
-    fStartColor = 'black';
-    fEndColor = 'black';
+    fStartColor = input('black');
+    fEndColor = input('black');
     fOutputId;
     fInputId;
     fRadius = 8;
@@ -2493,16 +2495,17 @@ class FConnectionForCreateComponent extends FConnectionBase {
     fType = EFConnectionType.STRAIGHT;
     fDraggingDisabled = false;
     fSelectionDisabled = false;
-    fDefs;
-    fPath;
-    fGradient;
-    fDragHandle;
-    fSelection;
-    fTextComponent;
-    fConnectionCenter;
-    fConnectionCenters;
+    fDefs = viewChild.required('defs');
+    fPath = viewChild.required(CONNECTION_PATH);
+    fGradient = viewChild.required(CONNECTION_GRADIENT);
+    fDragHandleStart = viewChild(FConnectionDragHandleStartComponent);
+    fDragHandleEnd = viewChild.required(FConnectionDragHandleEndComponent);
+    fSelection = viewChild.required(FConnectionSelectionComponent);
+    fTextComponent = viewChild.required(CONNECTION_TEXT);
+    fConnectionCenter = viewChild('fConnectionCenter');
+    fConnectionCenters = contentChildren(FConnectionCenterDirective, { descendants: true });
     get boundingElement() {
-        return this.fPath.hostElement;
+        return this.fPath().hostElement;
     }
     _fMediator = inject(FMediator);
     constructor(elementReference, fConnectionFactory) {
@@ -2521,18 +2524,14 @@ class FConnectionForCreateComponent extends FConnectionBase {
         this._fMediator.execute(new RemoveConnectionForCreateFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: { classPropertyName: "fStartColor", publicName: "fStartColor", isSignal: true, isRequired: false, transformFunction: null }, fEndColor: { classPropertyName: "fEndColor", publicName: "fEndColor", isSignal: true, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null } }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, isSignal: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, isSignal: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, isSignal: true }, { propertyName: "fDragHandleStart", first: true, predicate: FConnectionDragHandleStartComponent, descendants: true, isSignal: true }, { propertyName: "fDragHandleEnd", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, isSignal: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, isSignal: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, isSignal: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection-for-create", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection f-connection-for-create"
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fStartColor: [{
-                type: Input
-            }], fEndColor: [{
-                type: Input
-            }], fRadius: [{
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fRadius: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], fOffset: [{
@@ -2543,57 +2542,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
             }], fType: [{
                 type: Input
-            }], fDefs: [{
-                type: ViewChild,
-                args: ['defs', { static: true }]
-            }], fPath: [{
-                type: ViewChild,
-                args: [CONNECTION_PATH, { static: true }]
-            }], fGradient: [{
-                type: ViewChild,
-                args: [CONNECTION_GRADIENT, { static: true }]
-            }], fDragHandle: [{
-                type: ViewChild,
-                args: [FConnectionDragHandleEndComponent, { static: true }]
-            }], fSelection: [{
-                type: ViewChild,
-                args: [FConnectionSelectionComponent, { static: true }]
-            }], fTextComponent: [{
-                type: ViewChild,
-                args: [CONNECTION_TEXT, { static: true }]
-            }], fConnectionCenter: [{
-                type: ViewChild,
-                args: ['fConnectionCenter', { static: false }]
-            }], fConnectionCenters: [{
-                type: ContentChildren,
-                args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
 let uniqueId$5 = 0;
 class FConnectionComponent extends FConnectionBase {
-    fId = `f-connection-${uniqueId$5++}`;
+    fId = input(`f-connection-${uniqueId$5++}`, { alias: 'fConnectionId' });
     fText = '';
     fTextStartOffset = '';
-    fStartColor = 'black';
-    fEndColor = 'black';
+    fStartColor = input('black');
+    fEndColor = input('black');
     fOutputId = '';
     fInputId = '';
     fRadius = 8;
     fOffset = 12;
     fBehavior = EFConnectionBehavior.FIXED;
     fType = EFConnectionType.STRAIGHT;
+    fReassignableStart = input(false);
     fDraggingDisabled = false;
     fSelectionDisabled = false;
-    fDefs;
-    fPath;
-    fGradient;
-    fDragHandle;
-    fSelection;
-    fTextComponent;
-    fConnectionCenter;
-    fConnectionCenters;
+    fDefs = viewChild.required('defs');
+    fPath = viewChild.required(CONNECTION_PATH);
+    fGradient = viewChild.required(CONNECTION_GRADIENT);
+    fDragHandleStart = viewChild(FConnectionDragHandleStartComponent);
+    fDragHandleEnd = viewChild.required(FConnectionDragHandleEndComponent);
+    fSelection = viewChild.required(FConnectionSelectionComponent);
+    fTextComponent = viewChild.required(CONNECTION_TEXT);
+    fConnectionCenter = viewChild('fConnectionCenter');
+    fConnectionCenters = contentChildren(FConnectionCenterDirective, { descendants: true });
     get boundingElement() {
-        return this.fPath.hostElement;
+        return this.fPath().hostElement;
     }
     _fMediator = inject(FMediator);
     constructor(elementReference, fConnectionFactory) {
@@ -2609,27 +2586,20 @@ class FConnectionComponent extends FConnectionBase {
         this._fMediator.execute(new RemoveConnectionFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: FConnectionComponent, selector: "f-connection", inputs: { fId: ["fConnectionId", "fId"], fText: "fText", fTextStartOffset: "fTextStartOffset", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled", booleanAttribute], fSelectionDisabled: ["fSelectionDisabled", "fSelectionDisabled", booleanAttribute] }, host: { properties: { "attr.id": "fId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FConnectionComponent, selector: "f-connection", inputs: { fId: { classPropertyName: "fId", publicName: "fConnectionId", isSignal: true, isRequired: false, transformFunction: null }, fText: { classPropertyName: "fText", publicName: "fText", isSignal: false, isRequired: false, transformFunction: null }, fTextStartOffset: { classPropertyName: "fTextStartOffset", publicName: "fTextStartOffset", isSignal: false, isRequired: false, transformFunction: null }, fStartColor: { classPropertyName: "fStartColor", publicName: "fStartColor", isSignal: true, isRequired: false, transformFunction: null }, fEndColor: { classPropertyName: "fEndColor", publicName: "fEndColor", isSignal: true, isRequired: false, transformFunction: null }, fOutputId: { classPropertyName: "fOutputId", publicName: "fOutputId", isSignal: false, isRequired: false, transformFunction: null }, fInputId: { classPropertyName: "fInputId", publicName: "fInputId", isSignal: false, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fReassignableStart: { classPropertyName: "fReassignableStart", publicName: "fReassignableStart", isSignal: true, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fReassignDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fSelectionDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { properties: { "attr.id": "fId()", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, isSignal: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, isSignal: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, isSignal: true }, { propertyName: "fDragHandleStart", first: true, predicate: FConnectionDragHandleStartComponent, descendants: true, isSignal: true }, { propertyName: "fDragHandleEnd", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, isSignal: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, isSignal: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, isSignal: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, isSignal: true }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection", exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'fId',
+                        '[attr.id]': 'fId()',
                         class: "f-component f-connection",
                         '[class.f-connection-selection-disabled]': 'fSelectionDisabled',
                         '[class.f-connection-reassign-disabled]': 'fDraggingDisabled',
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fConnectionId']
-            }], fText: [{
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fText: [{
                 type: Input
             }], fTextStartOffset: [{
                 type: Input
-            }], fStartColor: [{
-                type: Input
-            }], fEndColor: [{
-                type: Input
             }], fOutputId: [{
                 type: Input
             }], fInputId: [{
@@ -2651,30 +2621,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], fSelectionDisabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], fDefs: [{
-                type: ViewChild,
-                args: ['defs', { static: true }]
-            }], fPath: [{
-                type: ViewChild,
-                args: [CONNECTION_PATH, { static: true }]
-            }], fGradient: [{
-                type: ViewChild,
-                args: [CONNECTION_GRADIENT, { static: true }]
-            }], fDragHandle: [{
-                type: ViewChild,
-                args: [FConnectionDragHandleEndComponent, { static: true }]
-            }], fSelection: [{
-                type: ViewChild,
-                args: [FConnectionSelectionComponent, { static: true }]
-            }], fTextComponent: [{
-                type: ViewChild,
-                args: [CONNECTION_TEXT, { static: true }]
-            }], fConnectionCenter: [{
-                type: ViewChild,
-                args: ['fConnectionCenter', { static: false }]
-            }], fConnectionCenters: [{
-                type: ContentChildren,
-                args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
 var EFMarkerType;
@@ -2750,11 +2696,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 let uniqueId$4 = 0;
 class FSnapConnectionComponent extends FConnectionBase {
-    fId = `f-snap-connection-${uniqueId$4++}`;
+    fId = signal(`f-snap-connection-${uniqueId$4++}`);
     fText = '';
     fTextStartOffset = '';
-    fStartColor = 'black';
-    fEndColor = 'black';
+    fStartColor = input('black');
+    fEndColor = input('black');
     fSnapThreshold = 20;
     fOutputId;
     fInputId;
@@ -2764,16 +2710,17 @@ class FSnapConnectionComponent extends FConnectionBase {
     fType = EFConnectionType.STRAIGHT;
     fDraggingDisabled = false;
     fSelectionDisabled = false;
-    fDefs;
-    fPath;
-    fGradient;
-    fDragHandle;
-    fSelection;
-    fTextComponent;
-    fConnectionCenter;
-    fConnectionCenters;
+    fDefs = viewChild.required('defs');
+    fPath = viewChild.required(CONNECTION_PATH);
+    fGradient = viewChild.required(CONNECTION_GRADIENT);
+    fDragHandleStart = viewChild(FConnectionDragHandleStartComponent);
+    fDragHandleEnd = viewChild.required(FConnectionDragHandleEndComponent);
+    fSelection = viewChild.required(FConnectionSelectionComponent);
+    fTextComponent = viewChild.required(CONNECTION_TEXT);
+    fConnectionCenter = viewChild('fConnectionCenter');
+    fConnectionCenters = contentChildren(FConnectionCenterDirective, { descendants: true });
     get boundingElement() {
-        return this.fPath.hostElement;
+        return this.fPath().hostElement;
     }
     _fMediator = inject(FMediator);
     constructor(elementReference, fConnectionFactory) {
@@ -2792,18 +2739,14 @@ class FSnapConnectionComponent extends FConnectionBase {
         this._fMediator.execute(new RemoveSnapConnectionFromStoreRequest());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FSnapConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fSnapThreshold: ["fSnapThreshold", "fSnapThreshold", numberAttribute], fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fStartColor: { classPropertyName: "fStartColor", publicName: "fStartColor", isSignal: true, isRequired: false, transformFunction: null }, fEndColor: { classPropertyName: "fEndColor", publicName: "fEndColor", isSignal: true, isRequired: false, transformFunction: null }, fSnapThreshold: { classPropertyName: "fSnapThreshold", publicName: "fSnapThreshold", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null } }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, isSignal: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, isSignal: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, isSignal: true }, { propertyName: "fDragHandleStart", first: true, predicate: FConnectionDragHandleStartComponent, descendants: true, isSignal: true }, { propertyName: "fDragHandleEnd", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, isSignal: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, isSignal: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, isSignal: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FSnapConnectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-snap-connection", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection f-snap-connection"
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-end></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fStartColor: [{
-                type: Input
-            }], fEndColor: [{
-                type: Input
-            }], fSnapThreshold: [{
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }], propDecorators: { fSnapThreshold: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], fRadius: [{
@@ -2817,30 +2760,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
             }], fType: [{
                 type: Input
-            }], fDefs: [{
-                type: ViewChild,
-                args: ['defs', { static: true }]
-            }], fPath: [{
-                type: ViewChild,
-                args: [CONNECTION_PATH, { static: true }]
-            }], fGradient: [{
-                type: ViewChild,
-                args: [CONNECTION_GRADIENT, { static: true }]
-            }], fDragHandle: [{
-                type: ViewChild,
-                args: [FConnectionDragHandleEndComponent, { static: true }]
-            }], fSelection: [{
-                type: ViewChild,
-                args: [FConnectionSelectionComponent, { static: true }]
-            }], fTextComponent: [{
-                type: ViewChild,
-                args: [CONNECTION_TEXT, { static: true }]
-            }], fConnectionCenter: [{
-                type: ViewChild,
-                args: ['fConnectionCenter', { static: false }]
-            }], fConnectionCenters: [{
-                type: ContentChildren,
-                args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
 const F_CONNECTION_PROVIDERS = [
@@ -3253,21 +3172,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
-class CalculateClosestInputRequest {
+class FindClosestConnectorRequest {
     position;
-    canBeConnectedInputs;
-    static fToken = Symbol('CalculateClosestInputRequest');
-    constructor(position, canBeConnectedInputs) {
+    connectors;
+    static fToken = Symbol('FindClosestConnectorRequest');
+    constructor(position, connectors) {
         this.position = position;
-        this.canBeConnectedInputs = canBeConnectedInputs;
+        this.connectors = connectors;
     }
 }
 
-let CalculateClosestInputExecution = class CalculateClosestInputExecution {
+let FindClosestConnectorExecution = class FindClosestConnectorExecution {
     handle(payload) {
         let result;
         let minDistance = Infinity;
-        for (const element of payload.canBeConnectedInputs) {
+        for (const element of payload.connectors) {
             const distance = this._distanceToRectangle(payload.position, element);
             if (distance < minDistance) {
                 minDistance = distance;
@@ -3289,63 +3208,63 @@ let CalculateClosestInputExecution = class CalculateClosestInputExecution {
     _clamp(value, min, max) {
         return Math.max(min, Math.min(max, value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateClosestInputExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateClosestInputExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindClosestConnectorExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindClosestConnectorExecution });
 };
-CalculateClosestInputExecution = __decorate([
-    FExecutionRegister(CalculateClosestInputRequest)
-], CalculateClosestInputExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateClosestInputExecution, decorators: [{
+FindClosestConnectorExecution = __decorate([
+    FExecutionRegister(FindClosestConnectorRequest)
+], FindClosestConnectorExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindClosestConnectorExecution, decorators: [{
             type: Injectable
         }] });
 
-class FindInputAtPositionRequest {
+class FindConnectableConnectorUsingPriorityAndPositionRequest {
     pointerPosition;
-    toConnectorRect;
-    canBeConnectedInputs;
-    static fToken = Symbol('FindInputAtPositionRequest');
-    constructor(pointerPosition, toConnectorRect, canBeConnectedInputs) {
+    connectableConnectors;
+    static fToken = Symbol('FindConnectableConnectorUsingPriorityAndPositionRequest');
+    constructor(pointerPosition, connectableConnectors) {
         this.pointerPosition = pointerPosition;
-        this.toConnectorRect = toConnectorRect;
-        this.canBeConnectedInputs = canBeConnectedInputs;
+        this.connectableConnectors = connectableConnectors;
     }
 }
 
-let FindInputAtPositionExecution = class FindInputAtPositionExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
-    _fBrowser = inject(BrowserService);
+let FindConnectableConnectorUsingPriorityAndPositionExecution = class FindConnectableConnectorUsingPriorityAndPositionExecution {
+    _mediator = inject(FMediator);
+    _store = inject(FComponentsStore);
+    _browser = inject(BrowserService);
     get _transform() {
-        return this._fComponentsStore.fCanvas.transform;
+        return this._store.fCanvas.transform;
     }
     get _fHost() {
-        return this._fComponentsStore.fFlow.hostElement;
+        return this._store.fFlow.hostElement;
     }
     get _fNodes() {
-        return this._fComponentsStore.fNodes;
+        return this._store.fNodes;
     }
     get _fSnapConnection() {
-        return this._fComponentsStore.fSnapConnection;
+        return this._store.fSnapConnection;
     }
     handle(payload) {
-        const fInputs = this._findInputsAtPosition(payload);
-        return fInputs.length > 0 ? fInputs[0] : undefined;
+        const connectors = this._findConnectorAtPosition(payload);
+        return connectors.length > 0 ? connectors[0] : undefined;
     }
-    _findInputsAtPosition(request) {
+    _findConnectorAtPosition(request) {
         const result = [];
-        result.push(...this._getConnectableInputsAtPosition(request));
-        const fClosestInput = this._calculateClosetInput(request);
-        if (fClosestInput) {
-            result.unshift(fClosestInput.fConnector);
-        }
-        const fInput = this._getFirstConnectableInputOfNodeAtPosition(request);
+        result.push(...this._filterConnectorsThatLocatedAtPosition(request));
+        // Closest connector is only added if snap connection is enabled and there is a closest connector found
+        // Closest connector has more priority than the first connectable input of the node at position
+        const closestConnector = this._isSnapConnectionEnabledAndHasClosestConnector(request);
+        if (closestConnector) {
+            result.unshift(closestConnector.fConnector);
+        }
+        const fInput = this._getFirstConnectableConnectorOfNodeAtPosition(request);
         if (fInput) {
             result.push(fInput);
         }
         return result;
     }
-    _getConnectableInputsAtPosition(request) {
-        return request.canBeConnectedInputs.filter((x) => {
+    _filterConnectorsThatLocatedAtPosition(request) {
+        return request.connectableConnectors.filter((x) => {
             return RectExtensions.isIncludePoint(x.fRect, this._getPointInFlow(request.pointerPosition));
         }).map((x) => x.fConnector);
     }
@@ -3355,41 +3274,40 @@ let FindInputAtPositionExecution = class FindInputAtPositionExecution {
             .sub(this._transform.scaledPosition).sub(this._transform.position)
             .div(this._transform.scale);
     }
-    //if the closest input is valid, return it
-    _calculateClosetInput(request) {
+    _isSnapConnectionEnabledAndHasClosestConnector(request) {
         if (!this._fSnapConnection) {
             return undefined;
         }
-        const fClosestInput = this._fMediator.execute(new CalculateClosestInputRequest(this._getPointInFlow(request.pointerPosition), request.canBeConnectedInputs));
-        return this._isValidClosestInput(fClosestInput) ? fClosestInput : undefined;
+        const closestConnector = this._mediator.execute(new FindClosestConnectorRequest(this._getPointInFlow(request.pointerPosition), request.connectableConnectors));
+        return this._isValidClosestInput(closestConnector) ? closestConnector : undefined;
     }
-    _isValidClosestInput(fClosestInput) {
-        return !!fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold;
+    _isValidClosestInput(closestConnector) {
+        return !!closestConnector && closestConnector.distance < this._fSnapConnection.fSnapThreshold;
     }
-    //if node placed in position and fConnectOnNode is true, return the first connectable input of the node
-    _getFirstConnectableInputOfNodeAtPosition(request) {
+    //if node placed in position and fConnectOnNode is true, return the first connectable connector of the node
+    _getFirstConnectableConnectorOfNodeAtPosition(request) {
         return this._getElementsFromPoint(request.pointerPosition)
             .map((x) => this._findConnectableNode(x))
             .filter((x) => !!x)
-            .map((x) => this._findFirstConnectableInputOfNode(request.canBeConnectedInputs, x))
+            .map((x) => this._findFirstConnectableConnectorOfNode(request.connectableConnectors, x))
             .find((x) => !!x);
     }
     _getElementsFromPoint(position) {
-        return this._fBrowser.document.elementsFromPoint(position.x, position.y);
+        return this._browser.document.elementsFromPoint(position.x, position.y);
     }
     _findConnectableNode(element) {
         return this._fNodes.find((x) => x.isContains(element) && x.fConnectOnNode);
     }
-    _findFirstConnectableInputOfNode(connectableInputs, fNode) {
-        return connectableInputs.find((x) => x.fConnector.fNodeId === fNode.fId)?.fConnector;
+    _findFirstConnectableConnectorOfNode(connectableInputs, fNode) {
+        return connectableInputs.find((x) => x.fConnector.fNodeId === fNode.fId())?.fConnector;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindInputAtPositionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindInputAtPositionExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindConnectableConnectorUsingPriorityAndPositionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindConnectableConnectorUsingPriorityAndPositionExecution });
 };
-FindInputAtPositionExecution = __decorate([
-    FExecutionRegister(FindInputAtPositionRequest)
-], FindInputAtPositionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindInputAtPositionExecution, decorators: [{
+FindConnectableConnectorUsingPriorityAndPositionExecution = __decorate([
+    FExecutionRegister(FindConnectableConnectorUsingPriorityAndPositionRequest)
+], FindConnectableConnectorUsingPriorityAndPositionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindConnectableConnectorUsingPriorityAndPositionExecution, decorators: [{
             type: Injectable
         }] });
 
@@ -3467,30 +3385,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
-class MarkAllCanBeConnectedInputsRequest {
-    fInputs;
-    static fToken = Symbol('MarkAllCanBeConnectedInputsRequest');
-    constructor(fInputs) {
-        this.fInputs = fInputs;
+class GetAllCanBeConnectedSourceConnectorsAndRectsRequest {
+    fTargetConnector;
+    static fToken = Symbol('GetAllCanBeConnectedSourceConnectorsAndRectsRequest');
+    constructor(fTargetConnector) {
+        this.fTargetConnector = fTargetConnector;
     }
 }
 
-let MarkAllCanBeConnectedInputsExecution = class MarkAllCanBeConnectedInputsExecution {
+let GetAllCanBeConnectedSourceConnectorsAndRectsExecution = class GetAllCanBeConnectedSourceConnectorsAndRectsExecution {
+    _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
+    get _fSourceConnectors() {
+        return this._fComponentsStore.fOutputs;
+    }
     handle(payload) {
-        this._fComponentsStore.flowHost.classList.add(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
-        payload.fInputs.forEach((fInput) => this._markCanBeConnectedTo(fInput));
+        return this._getCanBeConnectedSourceConnectors(payload.fTargetConnector).map((x) => {
+            return this._fMediator.execute(new GetConnectorAndRectRequest(x));
+        });
     }
-    _markCanBeConnectedTo(fInput) {
-        fInput.hostElement.classList.add(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
+    _getCanBeConnectedSourceConnectors(fTargetConnector) {
+        return this._fSourceConnectors.filter((x) => {
+            let result = x.canBeConnected;
+            if (result && x.canBeConnectedInputs?.length) {
+                result = x.canBeConnectedInputs?.includes(fTargetConnector.fId);
+            }
+            return result;
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetAllCanBeConnectedSourceConnectorsAndRectsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetAllCanBeConnectedSourceConnectorsAndRectsExecution });
 };
-MarkAllCanBeConnectedInputsExecution = __decorate([
-    FExecutionRegister(MarkAllCanBeConnectedInputsRequest)
-], MarkAllCanBeConnectedInputsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, decorators: [{
+GetAllCanBeConnectedSourceConnectorsAndRectsExecution = __decorate([
+    FExecutionRegister(GetAllCanBeConnectedSourceConnectorsAndRectsRequest)
+], GetAllCanBeConnectedSourceConnectorsAndRectsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetAllCanBeConnectedSourceConnectorsAndRectsExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class MarkConnectableConnectorsRequest {
+    fConnectors;
+    static fToken = Symbol('MarkConnectableConnectorsRequest');
+    constructor(fConnectors) {
+        this.fConnectors = fConnectors;
+    }
+}
+
+let MarkConnectableConnectorsExecution = class MarkConnectableConnectorsExecution {
+    _store = inject(FComponentsStore);
+    handle(payload) {
+        this._store.flowHost.classList.add(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
+        payload.fConnectors.forEach((fConnector) => this._markConnector(fConnector));
+    }
+    _markConnector(fConnector) {
+        fConnector.hostElement.classList.add(F_CSS_CLASS.CONNECTOR.CONNECTABLE);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectorsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectorsExecution });
+};
+MarkConnectableConnectorsExecution = __decorate([
+    FExecutionRegister(MarkConnectableConnectorsRequest)
+], MarkConnectableConnectorsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectorsExecution, decorators: [{
             type: Injectable
         }] });
 
@@ -3563,30 +3519,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
-class UnmarkAllCanBeConnectedInputsRequest {
-    fInputs;
-    static fToken = Symbol('UnmarkAllCanBeConnectedInputsRequest');
-    constructor(fInputs) {
-        this.fInputs = fInputs;
+class UnmarkConnectableConnectorsRequest {
+    fConnectors;
+    static fToken = Symbol('UnmarkConnectableConnectorsRequest');
+    constructor(fConnectors) {
+        this.fConnectors = fConnectors;
     }
 }
 
-let UnmarkAllCanBeConnectedInputsExecution = class UnmarkAllCanBeConnectedInputsExecution {
-    _fComponentsStore = inject(FComponentsStore);
+let UnmarkConnectableConnectorsExecution = class UnmarkConnectableConnectorsExecution {
+    _store = inject(FComponentsStore);
     handle(payload) {
-        this._fComponentsStore.flowHost.classList.remove(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
-        payload.fInputs.forEach((fInput) => this._unmarkCanBeConnectedTo(fInput));
+        this._store.flowHost.classList.remove(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
+        payload.fConnectors.forEach((fConnector) => this._unmarkConnector(fConnector));
     }
-    _unmarkCanBeConnectedTo(fInput) {
-        fInput.hostElement.classList.remove(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
+    _unmarkConnector(fConnector) {
+        fConnector.hostElement.classList.remove(F_CSS_CLASS.CONNECTOR.CONNECTABLE);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectorsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectorsExecution });
 };
-UnmarkAllCanBeConnectedInputsExecution = __decorate([
-    FExecutionRegister(UnmarkAllCanBeConnectedInputsRequest)
-], UnmarkAllCanBeConnectedInputsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, decorators: [{
+UnmarkConnectableConnectorsExecution = __decorate([
+    FExecutionRegister(UnmarkConnectableConnectorsRequest)
+], UnmarkConnectableConnectorsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectorsExecution, decorators: [{
             type: Injectable
         }] });
 
@@ -3594,15 +3550,16 @@ const F_CONNECTORS_FEATURES = [
     AddInputToStoreExecution,
     AddOutletToStoreExecution,
     AddOutputToStoreExecution,
-    CalculateClosestInputExecution,
-    FindInputAtPositionExecution,
+    FindClosestConnectorExecution,
+    FindConnectableConnectorUsingPriorityAndPositionExecution,
+    GetAllCanBeConnectedSourceConnectorsAndRectsExecution,
     GetAllCanBeConnectedInputsAndRectsExecution,
     GetConnectorAndRectExecution,
-    MarkAllCanBeConnectedInputsExecution,
+    MarkConnectableConnectorsExecution,
     RemoveInputFromStoreExecution,
     RemoveOutletFromStoreExecution,
     RemoveOutputFromStoreExecution,
-    UnmarkAllCanBeConnectedInputsExecution
+    UnmarkConnectableConnectorsExecution
 ];
 
 class AddDndToStoreRequest {
@@ -3652,7 +3609,7 @@ let GetNormalizedParentNodeRectExecution = class GetNormalizedParentNodeRectExec
         return result;
     }
     _getNode(fId) {
-        return this._fComponentsStore.fNodes.find((x) => x.fId === fId);
+        return this._fComponentsStore.fNodes.find((x) => x.fId() === fId);
     }
     //   Parent Node
     // +----------------------------------------+
@@ -3712,10 +3669,10 @@ let IsArrayHasParentNodeExecution = class IsArrayHasParentNodeExecution {
         return this._isParentNodeInArray(this._getParentNodeIds(request.fParentNodes), request.fDraggedNodes);
     }
     _getParentNodeIds(fParentNodes) {
-        return fParentNodes.map((x) => x.fId);
+        return fParentNodes.map((x) => x.fId());
     }
     _isParentNodeInArray(parentNodeIds, fDraggedNodes) {
-        return fDraggedNodes.some((x) => parentNodeIds.includes(x.fId));
+        return fDraggedNodes.some((x) => parentNodeIds.includes(x.fId()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsArrayHasParentNodeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsArrayHasParentNodeExecution });
@@ -3756,7 +3713,7 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
         const fOutputConnections = this._getOutputConnectionsId(fOutputConnectors);
         const fInputConnections = this._getInputConnectionsId(fInputConnectors);
         const fConnectionsUnderNode = this._calculateConnectionsUnderNode(request.fNode).filter((x) => {
-            return !fOutputConnections.includes(x.fId) && !fInputConnections.includes(x.fId);
+            return !fOutputConnections.includes(x.fId()) && !fInputConnections.includes(x.fId());
         });
         if (!fConnectionsUnderNode.length) {
             return;
@@ -3777,13 +3734,13 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
         const connectorsId = this._getConnectorsId(connectors);
         return this._fComponentsStore.fConnections
             .filter((x) => connectorsId.includes(x.fOutputId))
-            .map((x) => x.fId);
+            .map((x) => x.fId());
     }
     _getInputConnectionsId(connectors) {
         const connectorsId = this._getConnectorsId(connectors);
         return this._fComponentsStore.fConnections
             .filter((x) => connectorsId.includes(x.fInputId))
-            .map((x) => x.fId);
+            .map((x) => x.fId());
     }
     _getConnectorsId(connectors) {
         return connectors.map((x) => x.fId);
@@ -3793,10 +3750,10 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
         return this._fComponentsStore.fConnections.filter((x) => this._isConnectionHasIntersectionsWithNode(x, fNodeRect));
     }
     _isConnectionHasIntersectionsWithNode(fConnection, fNodeRect) {
-        return GetIntersections.getRoundedRectIntersectionsWithSVGPath(fConnection.fPath.hostElement, fNodeRect).length > 0;
+        return GetIntersections.getRoundedRectIntersectionsWithSVGPath(fConnection.fPath().hostElement, fNodeRect).length > 0;
     }
     _emitNodeIntersectedWithConnections(fNode, fConnections) {
-        this._fComponentsStore.fDraggable?.fNodeIntersectedWithConnections.emit(new FNodeIntersectedWithConnections(fNode.fId, fConnections.map((x) => x.fId)));
+        this._fComponentsStore.fDraggable?.fNodeIntersectedWithConnections.emit(new FNodeIntersectedWithConnections(fNode.fId(), fConnections.map((x) => x.fId())));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsConnectionUnderNodeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsConnectionUnderNodeExecution });
@@ -4083,7 +4040,7 @@ class FCreateConnectionDragHandler {
     }
     _getAndMarkCanBeConnectedInputs() {
         this._canBeConnectedInputs = this._fMediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutputOrOutlet));
-        this._fMediator.execute(new MarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+        this._fMediator.execute(new MarkConnectableConnectorsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
     _initializeSnapConnection() {
         if (!this._fSnapConnection) {
@@ -4120,7 +4077,7 @@ class FCreateConnectionDragHandler {
         }
     }
     _findClosestInput(difference) {
-        return this._fMediator.execute(new CalculateClosestInputRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
+        return this._fMediator.execute(new FindClosestConnectorRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
     }
     _getClosestInputForSnapConnection(fClosestInput) {
         return fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold ? fClosestInput : undefined;
@@ -4129,7 +4086,7 @@ class FCreateConnectionDragHandler {
         this._fConnection.redraw();
         this._fConnection.hide();
         this._fSnapConnection?.hide();
-        this._fMediator.execute(new UnmarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+        this._fMediator.execute(new UnmarkConnectableConnectorsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
 }
 
@@ -4167,7 +4124,7 @@ let FCreateConnectionFinalizeExecution = class FCreateConnectionFinalizeExecutio
         this._fComponentsStore.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(this.getTargetOutput(this.getOutput() || this.getOutlet()).fId, this._getInputUnderPointer(event)?.fId, event.getPosition()));
     }
     _getInputUnderPointer(event) {
-        return this._fMediator.execute(new FindInputAtPositionRequest(event.getPosition(), this._fResult.getData().toConnectorRect, this._fResult.getData().canBeConnectedInputs));
+        return this._fMediator.execute(new FindConnectableConnectorUsingPriorityAndPositionRequest(event.getPosition(), this._fResult.getData().canBeConnectedInputs));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCreateConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCreateConnectionFinalizeExecution });
@@ -4383,133 +4340,273 @@ class FReassignConnectionFinalizeRequest {
     }
 }
 
+function isClosestConnectorInsideSnapThreshold(fClosestConnector, snapConnection) {
+    return fClosestConnector && fClosestConnector.distance < snapConnection.fSnapThreshold ? fClosestConnector : undefined;
+}
+function roundedRectFromPoint(point) {
+    return RoundedRect.fromRect(RectExtensions.initialize(point.x, point.y));
+}
+
+class FReassignTargetDragHandler {
+    _mediator;
+    _connection;
+    _sourceConnectorAndRect;
+    _targetConnectorAndRect;
+    _connectableConnectors = [];
+    get _sourceConnector() {
+        return this._sourceConnectorAndRect.fConnector;
+    }
+    get _sourceConnectorRect() {
+        return this._sourceConnectorAndRect.fRect;
+    }
+    get _targetConnector() {
+        return this._targetConnectorAndRect.fConnector;
+    }
+    _connectorRect;
+    _snapConnection;
+    constructor(_mediator, _connection, _sourceConnectorAndRect, _targetConnectorAndRect) {
+        this._mediator = _mediator;
+        this._connection = _connection;
+        this._sourceConnectorAndRect = _sourceConnectorAndRect;
+        this._targetConnectorAndRect = _targetConnectorAndRect;
+        this._connectorRect = roundedRectFromPoint(this._connection.line.point2);
+    }
+    getConnectableConnectors() {
+        return this._connectableConnectors;
+    }
+    markConnectableConnector() {
+        this._connectableConnectors = this._mediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._sourceConnector));
+        this._mediator.execute(new MarkConnectableConnectorsRequest(this._connectableConnectors.map((x) => x.fConnector)));
+    }
+    initializeSnapConnection(snapConnection) {
+        this._snapConnection = snapConnection;
+        if (!snapConnection) {
+            return;
+        }
+        snapConnection.fOutputId = this._connection.fOutputId;
+        snapConnection.initialize();
+    }
+    onPointerMove(difference) {
+        const newPoint = this._connectorRect.addPoint(difference);
+        const fClosestConnector = this._findClosestConnector(newPoint, this._connectableConnectors);
+        this._drawConnection(newPoint, fClosestConnector?.fConnector.fConnectableSide || this._targetConnector.fConnectableSide);
+        if (this._snapConnection) {
+            this._drawSnapConnection(isClosestConnectorInsideSnapThreshold(fClosestConnector, this._snapConnection));
+        }
+    }
+    _findClosestConnector(point, connectors) {
+        return this._mediator.execute(new FindClosestConnectorRequest(point, connectors));
+    }
+    _drawConnection(newPoint, fSide) {
+        const line = this._calculateNewLine(newPoint, fSide);
+        this._connection.setLine(line, this._sourceConnectorAndRect.fConnector.fConnectableSide, fSide);
+        this._connection.redraw();
+    }
+    _calculateNewLine(targetPoint, fSide) {
+        return this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(this._sourceConnectorRect, roundedRectFromPoint(targetPoint), this._connection.fBehavior, this._sourceConnector.fConnectableSide, fSide));
+    }
+    _drawSnapConnection(fClosestConnector) {
+        const snapConnection = this._snapConnection;
+        if (fClosestConnector) {
+            const line = this._getLineToClosestTargetConnector(fClosestConnector, snapConnection);
+            snapConnection.show();
+            snapConnection.setLine(line, this._sourceConnector.fConnectableSide, fClosestConnector.fConnector.fConnectableSide);
+            snapConnection.redraw();
+        }
+        else {
+            snapConnection.hide();
+        }
+    }
+    _getLineToClosestTargetConnector(fClosestInput, snapConnection) {
+        return this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(this._sourceConnectorRect, fClosestInput.fRect, snapConnection.fBehavior, this._sourceConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
+    }
+    onPointerUp() {
+        this._drawConnection(this._connectorRect, this._targetConnectorAndRect.fConnector.fConnectableSide);
+        this._snapConnection?.hide();
+        this._mediator.execute(new UnmarkConnectableConnectorsRequest(this._connectableConnectors.map((x) => x.fConnector)));
+    }
+}
+
+class FReassignSourceDragHandler {
+    _mediator;
+    _connection;
+    _sourceConnectorAndRect;
+    _targetConnectorAndRect;
+    _connectableConnectors = [];
+    get _sourceConnector() {
+        return this._sourceConnectorAndRect.fConnector;
+    }
+    get _targetConnector() {
+        return this._targetConnectorAndRect.fConnector;
+    }
+    _connectorRect;
+    _snapConnection;
+    constructor(_mediator, _connection, _sourceConnectorAndRect, _targetConnectorAndRect) {
+        this._mediator = _mediator;
+        this._connection = _connection;
+        this._sourceConnectorAndRect = _sourceConnectorAndRect;
+        this._targetConnectorAndRect = _targetConnectorAndRect;
+        this._connectorRect = roundedRectFromPoint(this._connection.line.point1);
+    }
+    getConnectableConnectors() {
+        return this._connectableConnectors;
+    }
+    markConnectableConnector() {
+        this._connectableConnectors = this._mediator.execute(new GetAllCanBeConnectedSourceConnectorsAndRectsRequest(this._targetConnector));
+        const isExistCurrentSourceConnector = this._connectableConnectors.some((x) => x.fConnector.fId === this._sourceConnector.fId);
+        if (!isExistCurrentSourceConnector) {
+            this._connectableConnectors.push(this._sourceConnectorAndRect);
+        }
+        this._mediator.execute(new MarkConnectableConnectorsRequest(this._connectableConnectors.map((x) => x.fConnector)));
+    }
+    initializeSnapConnection(snapConnection) {
+        this._snapConnection = snapConnection;
+        if (!snapConnection) {
+            return;
+        }
+        snapConnection.fInputId = this._connection.fInputId;
+        snapConnection.initialize();
+    }
+    onPointerMove(difference) {
+        const newPoint = this._connectorRect.addPoint(difference);
+        const fClosestConnector = this._findClosestConnector(newPoint, this._connectableConnectors);
+        this._drawConnection(newPoint, fClosestConnector?.fConnector.fConnectableSide || this._sourceConnector.fConnectableSide);
+        if (this._snapConnection) {
+            this._drawSnapConnection(isClosestConnectorInsideSnapThreshold(fClosestConnector, this._snapConnection));
+        }
+    }
+    _findClosestConnector(point, connectors) {
+        return this._mediator.execute(new FindClosestConnectorRequest(point, connectors));
+    }
+    _drawConnection(newPoint, fSide) {
+        const line = this._calculateNewLine(newPoint, fSide);
+        this._connection.setLine(line, fSide, this._targetConnectorAndRect.fConnector.fConnectableSide);
+        this._connection.redraw();
+    }
+    _calculateNewLine(sourcePoint, fSide) {
+        return this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(roundedRectFromPoint(sourcePoint), this._targetConnectorAndRect.fRect, this._connection.fBehavior, fSide, this._targetConnectorAndRect.fConnector.fConnectableSide));
+    }
+    _drawSnapConnection(fClosestConnector) {
+        const snapConnection = this._snapConnection;
+        if (fClosestConnector) {
+            const line = this._getLineToClosestSourceConnector(fClosestConnector, snapConnection);
+            snapConnection.show();
+            snapConnection.setLine(line, fClosestConnector.fConnector.fConnectableSide, this._targetConnector.fConnectableSide);
+            snapConnection.redraw();
+        }
+        else {
+            snapConnection.hide();
+        }
+    }
+    _getLineToClosestSourceConnector(fClosestInput, snapConnection) {
+        return this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(fClosestInput.fRect, this._targetConnectorAndRect.fRect, snapConnection.fBehavior, fClosestInput.fConnector.fConnectableSide, this._targetConnector.fConnectableSide));
+    }
+    onPointerUp() {
+        this._drawConnection(this._connectorRect, this._sourceConnectorAndRect.fConnector.fConnectableSide);
+        this._snapConnection?.hide();
+        this._mediator.execute(new UnmarkConnectableConnectorsRequest(this._connectableConnectors.map((x) => x.fConnector)));
+    }
+}
+
 class FReassignConnectionDragHandler {
-    _fConnection;
+    _connection;
+    _isTargetDragHandle;
     fEventType = 'reassign-connection';
     fData;
     _fResult;
     _fMediator;
-    _fComponentsStore;
-    _toConnectorRect = new RoundedRect();
+    _store;
     get _fSnapConnection() {
-        return this._fComponentsStore.fSnapConnection;
+        return this._store.fSnapConnection;
     }
-    _fOutputWithRect;
-    _fInputWithRect;
-    _canBeConnectedInputs = [];
-    get _fOutput() {
-        const result = this._fComponentsStore.fOutputs.find((x) => x.fId === this._fConnection.fOutputId);
+    get _sourceConnector() {
+        const result = this._store.fOutputs.find((x) => x.fId === this._connection.fOutputId);
         if (!result) {
             throw new Error('Connection output not found');
         }
         return result;
     }
-    get _fInput() {
-        const result = this._fComponentsStore.fInputs.find((x) => x.fId === this._fConnection.fInputId);
+    get _targetConnector() {
+        const result = this._store.fInputs.find((x) => x.fId === this._connection.fInputId);
         if (!result) {
             throw new Error('Connection input not found');
         }
         return result;
     }
-    constructor(_injector, _fConnection) {
-        this._fConnection = _fConnection;
+    get _sourceConnectorAndRect() {
+        return this._fMediator.execute(new GetConnectorAndRectRequest(this._sourceConnector));
+    }
+    get _targetConnectorAndRect() {
+        return this._fMediator.execute(new GetConnectorAndRectRequest(this._targetConnector));
+    }
+    _reassignHandler;
+    constructor(_injector, _connection, _isTargetDragHandle) {
+        this._connection = _connection;
+        this._isTargetDragHandle = _isTargetDragHandle;
         this._fResult = _injector.get(FDragHandlerResult);
         this._fMediator = _injector.get(FMediator);
-        this._fComponentsStore = _injector.get(FComponentsStore);
-        this._toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this._fConnection.line.point2.x, this._fConnection.line.point2.y));
+        this._store = _injector.get(FComponentsStore);
         this.fData = {
-            fConnectionId: this._fConnection.fId
+            fConnectionId: this._connection.fId()
         };
+        this._reassignHandler = this._isTargetDragHandle ? this._targetDragHandler() : this._sourceDragHandler();
+    }
+    _sourceDragHandler() {
+        return new FReassignSourceDragHandler(this._fMediator, this._connection, this._sourceConnectorAndRect, this._targetConnectorAndRect);
+    }
+    _targetDragHandler() {
+        return new FReassignTargetDragHandler(this._fMediator, this._connection, this._sourceConnectorAndRect, this._targetConnectorAndRect);
     }
     prepareDragSequence() {
-        this._getAndMarkCanBeConnectedInputs();
-        this._initializeSnapConnection();
-        this._fOutputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fOutput));
-        this._fInputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fInput));
+        this._reassignHandler.markConnectableConnector();
+        this._reassignHandler.initializeSnapConnection(this._fSnapConnection);
         this._fResult.setData({
-            toConnectorRect: this._toConnectorRect,
-            canBeConnectedInputs: this._canBeConnectedInputs,
-            fConnection: this._fConnection
+            isTargetDragHandle: this._isTargetDragHandle,
+            sourceConnectorRect: roundedRectFromPoint(this._connection.line.point1),
+            targetConnectorRect: roundedRectFromPoint(this._connection.line.point2),
+            connectableConnectors: this._reassignHandler.getConnectableConnectors(),
+            fConnection: this._connection
         });
     }
-    _getAndMarkCanBeConnectedInputs() {
-        this._canBeConnectedInputs = this._fMediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutput));
-        this._fMediator.execute(new MarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
-    }
-    _initializeSnapConnection() {
-        if (!this._fSnapConnection) {
-            return;
-        }
-        this._fSnapConnection.fOutputId = this._fConnection.fOutputId;
-        this._fSnapConnection.initialize();
-    }
     onPointerMove(difference) {
-        const fClosestInput = this._findClosestInput(difference);
-        this._drawConnection(this._toConnectorRect.addPoint(difference), fClosestInput?.fConnector.fConnectableSide || this._fInputWithRect.fConnector.fConnectableSide);
-        if (this._fSnapConnection) {
-            this._drawSnapConnection(this._getClosestInputForSnapConnection(fClosestInput));
-        }
-    }
-    _drawConnection(difference, fSide) {
-        const line = this._getLineToPointer(difference, fSide);
-        this._fConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fSide);
-        this._fConnection.redraw();
-    }
-    _getLineToPointer(difference, fSide) {
-        return this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, RoundedRect.fromRect(RectExtensions.initialize(difference.x, difference.y)), this._fConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fSide));
-    }
-    _drawSnapConnection(fClosestInput) {
-        if (fClosestInput) {
-            const line = this._getLineToClosestInput(fClosestInput);
-            this._fSnapConnection.show();
-            this._fSnapConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide);
-            this._fSnapConnection.redraw();
-        }
-        else {
-            this._fSnapConnection?.hide();
-        }
-    }
-    _getLineToClosestInput(fClosestInput) {
-        return this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, fClosestInput.fRect, this._fSnapConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
-    }
-    _findClosestInput(difference) {
-        return this._fMediator.execute(new CalculateClosestInputRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
-    }
-    _getClosestInputForSnapConnection(fClosestInput) {
-        return fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold ? fClosestInput : undefined;
+        this._reassignHandler.onPointerMove(difference);
     }
     onPointerUp() {
-        this._drawConnection(this._toConnectorRect, this._fInputWithRect.fConnector.fConnectableSide);
-        this._fSnapConnection?.hide();
-        this._fMediator.execute(new UnmarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+        this._reassignHandler.onPointerUp();
     }
 }
 
 class FReassignConnectionEvent {
-    fConnectionId;
-    fOutputId;
-    oldFInputId;
-    newFInputId;
-    fDropPosition;
-    constructor(fConnectionId, fOutputId, oldFInputId, newFInputId, fDropPosition) {
-        this.fConnectionId = fConnectionId;
-        this.fOutputId = fOutputId;
-        this.oldFInputId = oldFInputId;
-        this.newFInputId = newFInputId;
-        this.fDropPosition = fDropPosition;
+    connectionId;
+    isSourceReassign;
+    isTargetReassign;
+    oldSourceId;
+    newSourceId;
+    oldTargetId;
+    newTargetId;
+    dropPoint;
+    constructor(connectionId, isSourceReassign, isTargetReassign, oldSourceId, newSourceId, oldTargetId, newTargetId, dropPoint) {
+        this.connectionId = connectionId;
+        this.isSourceReassign = isSourceReassign;
+        this.isTargetReassign = isTargetReassign;
+        this.oldSourceId = oldSourceId;
+        this.newSourceId = newSourceId;
+        this.oldTargetId = oldTargetId;
+        this.newTargetId = newTargetId;
+        this.dropPoint = dropPoint;
     }
 }
 
 let FReassignConnectionFinalizeExecution = class FReassignConnectionFinalizeExecution {
-    _fResult = inject(FDragHandlerResult);
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
-    _fDraggableDataContext = inject(FDraggableDataContext);
+    _dragResult = inject(FDragHandlerResult);
+    _mediator = inject(FMediator);
+    _store = inject(FComponentsStore);
+    _draggableContext = inject(FDraggableDataContext);
     get _fDraggable() {
-        return this._fComponentsStore.fDraggable;
+        return this._store.fDraggable;
     }
     get _fDragHandler() {
-        return this._fDraggableDataContext.draggableItems[0];
+        return this._draggableContext.draggableItems[0];
     }
     handle(request) {
         if (!this._isDroppedConnectionReassignEvent()) {
@@ -4519,27 +4616,33 @@ let FReassignConnectionFinalizeExecution = class FReassignConnectionFinalizeExec
         this._fDragHandler.onPointerUp();
     }
     _isDroppedConnectionReassignEvent() {
-        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof FReassignConnectionDragHandler);
+        return this._draggableContext.draggableItems.some((x) => x instanceof FReassignConnectionDragHandler);
     }
     _applyReassignEvent(event) {
-        const fInput = this._getInputUnderPointer(event);
-        if (!!fInput && !this._isReassignToDifferentInput(fInput)) {
+        const fConnector = this._findConnectableConnectorUsingPriorityAndPosition(event);
+        if (!!fConnector && !this._isReassignToDifferentConnector(fConnector)) {
             return;
         }
-        this._emitReassignConnectionEvent(event, fInput);
+        this._emitReassignConnectionEvent(event, fConnector);
     }
-    _getInputUnderPointer(event) {
-        return this._fMediator.execute(new FindInputAtPositionRequest(event.getPosition(), this._fResult.getData().toConnectorRect, this._fResult.getData().canBeConnectedInputs));
+    _findConnectableConnectorUsingPriorityAndPosition(event) {
+        return this._mediator.execute(new FindConnectableConnectorUsingPriorityAndPositionRequest(event.getPosition(), this._dragResult.getData().connectableConnectors));
     }
-    _isReassignToDifferentInput(fInput) {
-        return this._fResult.getData().fConnection.fInputId !== fInput.fId;
+    _isReassignToDifferentConnector(fConnector) {
+        if (!this._dragResult.getData().isTargetDragHandle) {
+            return this._dragResult.getData().fConnection.fInputId !== fConnector.fId;
+        }
+        else {
+            return this._dragResult.getData().fConnection.fOutputId !== fConnector.fId;
+        }
     }
-    _emitReassignConnectionEvent(event, fInput) {
-        this._fDraggable.fReassignConnection.emit(this._getEventData(event, fInput));
+    _emitReassignConnectionEvent(event, fConnector) {
+        this._fDraggable.fReassignConnection.emit(this._getEventData(event, fConnector));
     }
-    _getEventData(event, fInput) {
-        const fConnection = this._fResult.getData().fConnection;
-        return new FReassignConnectionEvent(fConnection.fId, fConnection.fOutputId, fConnection.fInputId, fInput?.fId, event.getPosition());
+    _getEventData(event, fConnector) {
+        const fConnection = this._dragResult.getData().fConnection;
+        const isTargetDragHandle = this._dragResult.getData().isTargetDragHandle;
+        return new FReassignConnectionEvent(fConnection.fId(), !isTargetDragHandle, isTargetDragHandle, fConnection.fOutputId, !isTargetDragHandle ? fConnector?.fId : undefined, fConnection.fInputId, isTargetDragHandle ? fConnector?.fId : undefined, event.getPosition());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FReassignConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FReassignConnectionFinalizeExecution });
@@ -4561,6 +4664,23 @@ class FReassignConnectionPreparationRequest {
     }
 }
 
+function isPointerInsideStartOrEndDragHandles(connection, position) {
+    return isDragHandleEnd(connection, position) || isDragHandleStart(connection, position);
+}
+function isDragHandleEnd(connection, position) {
+    return connection.fDragHandleEnd()?.point
+        && _isPointInsideCircle(position, connection.fDragHandleEnd().point)
+        && !connection.fDraggingDisabled;
+}
+function isDragHandleStart(connection, position) {
+    return !!connection.fDragHandleStart()?.point
+        && _isPointInsideCircle(position, connection.fDragHandleStart().point)
+        && !connection.fDraggingDisabled && connection.fReassignableStart();
+}
+function _isPointInsideCircle(point, circleCenter) {
+    return (point.x - circleCenter.x) ** 2 + (point.y - circleCenter.y) ** 2 <= 8 ** 2;
+}
+
 let FReassignConnectionPreparationExecution = class FReassignConnectionPreparationExecution {
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
@@ -4577,19 +4697,20 @@ let FReassignConnectionPreparationExecution = class FReassignConnectionPreparati
         return this._fComponentsStore.fConnections;
     }
     handle(request) {
-        if (!this._isValid(request) || !this._isValidTrigger(request)) {
+        const position = this._getPointInFlow(request);
+        if (!this._isValid(position) || !this._isValidTrigger(request)) {
             return;
         }
         this._fDraggableDataContext.onPointerDownScale = this._transform.scale;
         this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
             .elementTransform(this._fHost).div(this._transform.scale);
         this._fDraggableDataContext.draggableItems = [
-            new FReassignConnectionDragHandler(this._injector, this._fConnection)
+            new FReassignConnectionDragHandler(this._injector, this._fConnection, isDragHandleEnd(this._fConnection, position))
         ];
         setTimeout(() => this._updateConnectionLayer());
     }
-    _isValid(request) {
-        this._fConnection = this._getConnectionToReassign(this._getPointInFlow(request));
+    _isValid(position) {
+        this._fConnection = this._getConnectionToReassign(position);
         return !!this._fConnection && !this._fDraggableDataContext.draggableItems.length;
     }
     _isValidTrigger(request) {
@@ -4606,12 +4727,7 @@ let FReassignConnectionPreparationExecution = class FReassignConnectionPreparati
         return connections.length ? connections[0] : undefined;
     }
     _getConnectionsFromPoint(position) {
-        return this._fConnections.filter((x) => {
-            return x.fDragHandle?.point && this._isPointInsideCircle(position, x.fDragHandle.point) && !x.fDraggingDisabled;
-        });
-    }
-    _isPointInsideCircle(point, circleCenter) {
-        return (point.x - circleCenter.x) ** 2 + (point.y - circleCenter.y) ** 2 <= 8 ** 2;
+        return this._fConnections.filter((x) => isPointerInsideStartOrEndDragHandles(x, position));
     }
     _updateConnectionLayer() {
         this._fMediator.execute(new UpdateItemAndChildrenLayersRequest(this._fConnection, this._fComponentsStore.fCanvas.fConnectionsContainer().nativeElement));
@@ -4912,7 +5028,7 @@ let PutInputConnectionHandlersToArrayExecution = class PutInputConnectionHandler
         request.fDragHandler.fTargetHandlers.push(fHandler);
     }
     _getExistingConnectionHandler(fHandlers, fConnection) {
-        return fHandlers.find((x) => x.fConnection.fId === fConnection.fId);
+        return fHandlers.find((x) => x.fConnection.fId() === fConnection.fId());
     }
     _createConnectionHandler(outputIds, fConnection) {
         let result;
@@ -4975,7 +5091,7 @@ let PutOutputConnectionHandlersToArrayExecution = class PutOutputConnectionHandl
         request.fDragHandler.fSourceHandlers.push(fHandler);
     }
     _getExistingConnectionHandler(fHandlers, fConnection) {
-        return fHandlers.find((x) => x.fConnection.fId === fConnection.fId);
+        return fHandlers.find((x) => x.fConnection.fId() === fConnection.fId());
     }
     _createConnectionHandler(inputIds, fConnection) {
         let result;
@@ -5144,7 +5260,7 @@ class FSummaryNodeMoveDragHandler {
         this._fComponentStore = _injector.get(FComponentsStore);
         this._fBoundsLimiter = new PointBoundsLimiter(_injector, this.commonRect, limits);
         this.fData = {
-            fNodeIds: this.fHandlers.map((x) => x.fNode.fId)
+            fNodeIds: this.fHandlers.map((x) => x.fNode.fId())
         };
     }
     onPointerMove(difference) {
@@ -5192,7 +5308,7 @@ let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragMo
     _getNodesToDragWithCommonLimits(fDraggedNodes) {
         return fDraggedNodes.reduce((result, x) => {
             result.push(x);
-            return result.concat(this._getChildrenNodes(x.fId));
+            return result.concat(this._getChildrenNodes(x.fId()));
         }, []);
     }
     _getNodesMoveLimits(fNodes, fParentNodes, fDraggedNodes) {
@@ -5217,14 +5333,14 @@ let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragMo
         return flatMap(fNodes, (fNode) => this._getNodeOutputIds(fNode));
     }
     _getNodeOutputIds(fNode) {
-        return this._fComponentsStore.fOutputs.filter((x) => fNode.fId === x.fNodeId)
+        return this._fComponentsStore.fOutputs.filter((x) => fNode.fId() === x.fNodeId)
             .map((x) => x.fId);
     }
     _getAllInputIds(fNodes) {
         return flatMap(fNodes, (fNode) => this._getNodeInputIds(fNode));
     }
     _getNodeInputIds(fNode) {
-        return this._fComponentsStore.fInputs.filter((x) => fNode.fId === x.fNodeId)
+        return this._fComponentsStore.fInputs.filter((x) => fNode.fId() === x.fNodeId)
             .map((x) => x.fId);
     }
     _mapToNodeDragHandlers(items) {
@@ -5597,7 +5713,7 @@ let FNodeMoveFinalizeExecution = class FNodeMoveFinalizeExecution {
             const event = this._getItems()[0].fData.fNodeIds.map((id) => {
                 return {
                     id,
-                    position: this._fComponentsStore.fNodes.find(x => x.fId === id).position,
+                    position: this._fComponentsStore.fNodes.find(x => x.fId() === id).position,
                 };
             });
             this._fComponentsStore.fDraggable?.fMoveNodes.emit(new FMoveNodesEvent(event));
@@ -5679,7 +5795,7 @@ let FNodeDropToGroupFinalizeExecution = class FNodeDropToGroupFinalizeExecution
         }
         const item = this._getDragHandleItem();
         if (item.fNodeWithRect) {
-            this._emitDroppedChildrenEvent(item.fNodeWithRect.node.fId, request.event);
+            this._emitDroppedChildrenEvent(item.fNodeWithRect.node.fId(), request.event);
         }
         item.onPointerUp?.();
     }
@@ -5704,7 +5820,7 @@ let FNodeDropToGroupFinalizeExecution = class FNodeDropToGroupFinalizeExecution
     _getDraggedNodeIds() {
         return this._fDraggableDataContext.draggableItems
             .find((x) => x instanceof FSummaryNodeMoveDragHandler)?.fHandlers
-            .map((x) => x.fNode.fId) || [];
+            .map((x) => x.fNode.fId()) || [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeDropToGroupFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeDropToGroupFinalizeExecution });
@@ -5956,7 +6072,7 @@ let FExternalItemFinalizeExecution = class FExternalItemFinalizeExecution {
     }
     _getDestinationNodeOrGroupId() {
         const dropToGroupHandler = this._getDropToGroupHandler();
-        let result = dropToGroupHandler.fNodeWithRect?.node.fId;
+        let result = dropToGroupHandler.fNodeWithRect?.node.fId();
         dropToGroupHandler.onPointerUp?.();
         return result;
     }
@@ -6527,7 +6643,7 @@ let GetNormalizedChildrenNodesRectExecution = class GetNormalizedChildrenNodesRe
         this.fMediator = fMediator;
     }
     handle(request) {
-        const childNodeRect = RectExtensions.union(this.getChildrenNodes(request.fNode.fId).map((x) => this.normalizeRect(x)));
+        const childNodeRect = RectExtensions.union(this.getChildrenNodes(request.fNode.fId()).map((x) => this.normalizeRect(x)));
         return childNodeRect ?
             this.concatRectWithParentPadding(childNodeRect, request.paddings) : null;
     }
@@ -6540,7 +6656,7 @@ let GetNormalizedChildrenNodesRectExecution = class GetNormalizedChildrenNodesRe
     concatRectWithParentPadding(rect, padding) {
         return RectExtensions.initialize(rect.x - padding[0], rect.y - padding[1], rect.width + padding[0] + padding[2], rect.height + +padding[1] + padding[3]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, deps: [{ token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, deps: [{ token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution });
 };
 GetNormalizedChildrenNodesRectExecution = __decorate([
@@ -6548,7 +6664,7 @@ GetNormalizedChildrenNodesRectExecution = __decorate([
 ], GetNormalizedChildrenNodesRectExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2$1.FMediator }] });
+        }], ctorParameters: () => [{ type: i2.FMediator }] });
 
 class GetNodeResizeRestrictionsRequest {
     fNode;
@@ -6609,7 +6725,7 @@ class FNodeResizeDragHandler {
         this._fNode = _fNode;
         this._fResizeHandleType = _fResizeHandleType;
         this.fData = {
-            fNodeId: _fNode.fId,
+            fNodeId: _fNode.fId(),
         };
         this._fMediator = _injector.get(FMediator);
     }
@@ -6815,7 +6931,7 @@ class FNodeRotateDragHandler {
         this._fTargetHandlers = _fTargetHandlers;
         this._startRotation = this._fNode.rotate;
         this.fData = {
-            fNodeId: _fNode.fId,
+            fNodeId: _fNode.fId(),
         };
         this._fComponentsStore = _injector.get(FComponentsStore);
         this._fMediator = _injector.get(FMediator);
@@ -7040,7 +7156,7 @@ let FSingleSelectExecution = class FSingleSelectExecution {
     }
     _getConnection(element) {
         return this._fComponentsStore.fConnections
-            .find(c => c.isContains(element) || c.fConnectionCenter?.nativeElement?.contains(element));
+            .find(c => c.isContains(element) || c.fConnectionCenter()?.nativeElement?.contains(element));
     }
     _updateItemAndChildrenLayers(fItem) {
         if (fItem) {
@@ -7807,7 +7923,7 @@ let MinimapDragPreparationExecution = class MinimapDragPreparationExecution {
     getFlowRect() {
         return RectExtensions.fromElement(this.flowHost);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MinimapDragPreparationExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MinimapDragPreparationExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MinimapDragPreparationExecution });
 };
 MinimapDragPreparationExecution = __decorate([
@@ -7815,7 +7931,7 @@ MinimapDragPreparationExecution = __decorate([
 ], MinimapDragPreparationExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MinimapDragPreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }, { type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2.FMediator }, { type: FDraggableDataContext }] });
 
 const MINIMAP_DRAG_PREPARATION_PROVIDERS = [
     MinimapDragPreparationExecution,
@@ -8434,14 +8550,14 @@ let SelectExecution = class SelectExecution {
         });
         this._fDraggableDataContext.selectedItems = [];
         request.nodes.forEach((key) => {
-            const node = this._fComponentsStore.fNodes.find((x) => x.fId === key);
+            const node = this._fComponentsStore.fNodes.find((x) => x.fId() === key);
             if (node) {
                 node.markAsSelected();
                 this._fDraggableDataContext.selectedItems.push(node);
             }
         });
         request.connections.forEach((key) => {
-            const connection = this._fComponentsStore.fConnections.find((x) => x.fId === key);
+            const connection = this._fComponentsStore.fConnections.find((x) => x.fId() === key);
             if (connection) {
                 connection.markAsSelected();
                 this._fDraggableDataContext.selectedItems.push(connection);
@@ -8568,7 +8684,7 @@ let GetDeepChildrenNodesAndGroupsExecution = class GetDeepChildrenNodesAndGroups
         visited.add(fId);
         const directChildren = this._fComponentsStore.fNodes.filter((x) => x.fParentId === fId);
         return directChildren.reduce((result, x) => {
-            return result.concat(this._getChildrenNodes(x.fId, visited));
+            return result.concat(this._getChildrenNodes(x.fId(), visited));
         }, directChildren);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -8612,7 +8728,7 @@ let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExec
         }
     }
     _handleGroup(request) {
-        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId);
+        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId());
         const childrenGroups = this._getChildrenGroups(childrenNodesAndGroups);
         this._updateLayers(this._fGroupsContainer, request.item.hostElement, childrenGroups);
         const childrenNodes = this._getChildrenNodes(childrenNodesAndGroups);
@@ -8621,7 +8737,7 @@ let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExec
         }
     }
     _handleNode(request) {
-        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId);
+        const childrenNodesAndGroups = this._getChildrenNodesAndGroups(request.item.fId());
         const childrenNodes = this._getChildrenNodes(childrenNodesAndGroups);
         this._updateLayers(request.itemContainer, request.item.hostElement, childrenNodes);
     }
@@ -8684,7 +8800,7 @@ let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution
             this.fDraggableDataContext.isSelectedChanged = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectAndUpdateNodeLayerExecution });
 };
 SelectAndUpdateNodeLayerExecution = __decorate([
@@ -8692,7 +8808,7 @@ SelectAndUpdateNodeLayerExecution = __decorate([
 ], SelectAndUpdateNodeLayerExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }, { type: i2$1.FMediator }] });
+        }], ctorParameters: () => [{ type: FDraggableDataContext }, { type: i2.FMediator }] });
 
 const F_SELECTION_FEATURES = [
     ClearSelectionExecution,
@@ -9007,7 +9123,7 @@ let GetFlowStateConnectionsExecution = class GetFlowStateConnectionsExecution {
     }
     _mapToConnectionState(x) {
         return {
-            id: x.fId,
+            id: x.fId(),
             fOutputId: x.fOutputId,
             fInputId: x.fInputId,
             fType: x.fType,
@@ -9041,7 +9157,7 @@ let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
     handle(request) {
         return this.fComponentsStore.fNodes.filter((x) => x instanceof request.type).map((x) => {
             return {
-                id: x.fId,
+                id: x.fId(),
                 parent: x.fParentId,
                 position: x.position,
                 size: x.size,
@@ -9398,11 +9514,11 @@ let GetParentNodesExecution = class GetParentNodesExecution {
         return this._getParentNodes(request.fNode, new Set(), []);
     }
     _getParentNodes(fNode, visited, result) {
-        if (visited.has(fNode.fId)) {
-            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fNode.fId);
+        if (visited.has(fNode.fId())) {
+            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fNode.fId());
         }
-        visited.add(fNode.fId);
-        const parent = this._fComponentsStore.fNodes.find((x) => x.fId === fNode.fParentId);
+        visited.add(fNode.fId());
+        const parent = this._fComponentsStore.fNodes.find((x) => x.fId() === fNode.fParentId);
         if (!parent) {
             return result;
         }
@@ -9686,7 +9802,7 @@ let SortNodeLayersExecution = class SortNodeLayersExecution {
     }
     _getSortedChildrenNodes(parent) {
         const allElements = this._fNodeElements;
-        return this._getChildrenNodes(parent.fId)
+        return this._getChildrenNodes(parent.fId())
             .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
     }
     _getChildrenNodes(fId) {
@@ -9739,7 +9855,7 @@ let SortItemsByParentExecution = class SortItemsByParentExecution {
     }
     _getSortedChildrenItems(fItem) {
         const indexInContainer = this._fItemElements.indexOf(fItem.hostElement);
-        return this._getChildrenItems(fItem.fId)
+        return this._getChildrenItems(fItem.fId())
             .filter((child) => this._fItemElements.indexOf(child) < indexInContainer)
             .sort((a, b) => this._fItemElements.indexOf(a) - this._fItemElements.indexOf(b));
     }
@@ -10203,7 +10319,7 @@ class FCanvasComponent extends FCanvasBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCanvasComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: FCanvasComponent, isStandalone: true, selector: "f-canvas", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
             { provide: F_CANVAS, useExisting: FCanvasComponent }
-        ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, isSignal: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, isSignal: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, isSignal: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, isSignal: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     Deprecated('setScale')
@@ -10217,7 +10333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         'class': 'f-component f-canvas',
                     }, providers: [
                         { provide: F_CANVAS, useExisting: FCanvasComponent }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"] }]
         }], propDecorators: { setZoom: [], resetZoom: [] } });
 
 const F_CANVAS_PROVIDERS = [
@@ -10236,40 +10352,37 @@ class FMinimapData {
 }
 
 class FMinimapFlowDirective {
-    fMinSize = 1000;
-    _fMediator = inject(FMediator);
+    fMinSize = input(1000);
+    _mediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     get hostElement() {
         return this._elementReference.nativeElement;
     }
     model = new FMinimapData(this.hostElement);
     redraw() {
-        const { scale, viewBox } = this._fMediator.execute(new MinimapCalculateSvgScaleAndViewBoxRequest(this.hostElement, this.fMinSize));
+        const { scale, viewBox } = this._mediator.execute(new MinimapCalculateSvgScaleAndViewBoxRequest(this.hostElement, this.fMinSize()));
         this.model = new FMinimapData(this.hostElement, scale, viewBox);
         setRectToViewBox(viewBox, this.hostElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapFlowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FMinimapFlowDirective, selector: "svg[fMinimapFlow]", inputs: { fMinSize: "fMinSize" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FMinimapFlowDirective, selector: "svg[fMinimapFlow]", inputs: { fMinSize: { classPropertyName: "fMinSize", publicName: "fMinSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapFlowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'svg[fMinimapFlow]'
                 }]
-        }], propDecorators: { fMinSize: [{
-                type: Input
-            }] } });
+        }] });
 
 class FMinimapCanvasDirective {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     get hostElement() {
         return this._elementReference.nativeElement;
     }
     redraw() {
         this._clearCanvas();
-        this._fMediator.execute(new MinimapDrawNodesRequest())
-            .forEach((x) => {
+        this._mediator.execute(new MinimapDrawNodesRequest()).forEach((x) => {
             this.hostElement.appendChild(x);
         });
     }
@@ -10287,13 +10400,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class FMinimapViewDirective {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _elementReference = inject(ElementRef);
     get hostElement() {
         return this._elementReference.nativeElement;
     }
     redraw() {
-        setRectToElement(this._fMediator.execute(new MinimapCalculateViewBoxRequest()), this.hostElement);
+        setRectToElement(this._mediator.execute(new MinimapCalculateViewBoxRequest()), this.hostElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FMinimapViewDirective, selector: "rect[fMinimapView]", host: { classAttribute: "f-component f-minimap-view" }, ngImport: i0 });
@@ -10310,38 +10423,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class FMinimapComponent {
     _destroyRef = inject(DestroyRef);
-    _fMediator = inject(FMediator);
-    _fBrowser = inject(BrowserService);
-    fMinimapCanvas;
-    fMinimapFlow;
-    fMinimapView;
-    fMinSize = 1000;
+    _mediator = inject(FMediator);
+    _browser = inject(BrowserService);
+    _canvas = viewChild.required(FMinimapCanvasDirective);
+    _flow = viewChild.required(FMinimapFlowDirective);
+    _minimapView = viewChild.required(FMinimapViewDirective);
+    fMinSize = input(1000);
     ngAfterViewInit() {
         this._listenTransformChanges();
     }
     _listenTransformChanges() {
-        this._fMediator.execute(new ListenTransformChangesRequest()).pipe(notifyOnStart(), debounceTime(2)).listen(this._destroyRef, () => {
+        this._mediator.execute(new ListenTransformChangesRequest()).pipe(notifyOnStart(), debounceTime(2)).listen(this._destroyRef, () => {
             this._redraw();
         });
     }
     _redraw() {
-        if (!this._fBrowser.isBrowser()) {
+        if (!this._browser.isBrowser()) {
             return;
         }
-        this.fMinimapFlow.redraw();
-        this.fMinimapView.redraw();
-        this.fMinimapCanvas.redraw();
+        this._flow().redraw();
+        this._minimapView().redraw();
+        this._canvas().redraw();
     }
     onPointerDown(event) {
-        this._fMediator.execute(new MinimapDragPreparationRequest(event, this.fMinimapFlow.model));
+        this._mediator.execute(new MinimapDragPreparationRequest(event, this._flow().model));
     }
     onPointerUp(event) {
-        this._fMediator.execute(new MinimapDragFinalizeRequest(event));
+        this._mediator.execute(new MinimapDragFinalizeRequest(event));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FMinimapComponent, selector: "f-minimap", inputs: { fMinSize: "fMinSize" }, host: { classAttribute: "f-component f-minimap" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: FMinimapComponent, selector: "f-minimap", inputs: { fMinSize: { classPropertyName: "fMinSize", publicName: "fMinSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "f-component f-minimap" }, providers: [
             { provide: F_BEFORE_MAIN_PLUGIN, useExisting: FMinimapComponent },
-        ], viewQueries: [{ propertyName: "fMinimapCanvas", first: true, predicate: FMinimapCanvasDirective, descendants: true, static: true }, { propertyName: "fMinimapFlow", first: true, predicate: FMinimapFlowDirective, descendants: true, static: true }, { propertyName: "fMinimapView", first: true, predicate: FMinimapViewDirective, descendants: true, static: true }], exportAs: ["fComponent"], ngImport: i0, template: "<svg fMinimapFlow width=\"100%\" height=\"100%\" fLockedContext [fMinSize]=\"fMinSize\">\n  <g fMinimapCanvas></g>\n  <rect fMinimapView x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" stroke=\"none\"/>\n</svg>\n\n", styles: [":host{display:block;position:absolute}:host svg{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: FMinimapCanvasDirective, selector: "g[fMinimapCanvas]" }, { kind: "directive", type: FMinimapViewDirective, selector: "rect[fMinimapView]" }, { kind: "directive", type: FMinimapFlowDirective, selector: "svg[fMinimapFlow]", inputs: ["fMinSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "_canvas", first: true, predicate: FMinimapCanvasDirective, descendants: true, isSignal: true }, { propertyName: "_flow", first: true, predicate: FMinimapFlowDirective, descendants: true, isSignal: true }, { propertyName: "_minimapView", first: true, predicate: FMinimapViewDirective, descendants: true, isSignal: true }], exportAs: ["fComponent"], ngImport: i0, template: "<svg fMinimapFlow width=\"100%\" height=\"100%\" fLockedContext [fMinSize]=\"fMinSize()\">\n  <g fMinimapCanvas></g>\n  <rect fMinimapView x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" stroke=\"none\"/>\n</svg>\n\n", styles: [":host{display:block;position:absolute}:host svg{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: FMinimapCanvasDirective, selector: "g[fMinimapCanvas]" }, { kind: "directive", type: FMinimapViewDirective, selector: "rect[fMinimapView]" }, { kind: "directive", type: FMinimapFlowDirective, selector: "svg[fMinimapFlow]", inputs: ["fMinSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMinimapComponent, decorators: [{
             type: Component,
@@ -10349,19 +10462,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         'class': 'f-component f-minimap',
                     }, providers: [
                         { provide: F_BEFORE_MAIN_PLUGIN, useExisting: FMinimapComponent },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg fMinimapFlow width=\"100%\" height=\"100%\" fLockedContext [fMinSize]=\"fMinSize\">\n  <g fMinimapCanvas></g>\n  <rect fMinimapView x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" stroke=\"none\"/>\n</svg>\n\n", styles: [":host{display:block;position:absolute}:host svg{overflow:hidden}\n"] }]
-        }], propDecorators: { fMinimapCanvas: [{
-                type: ViewChild,
-                args: [FMinimapCanvasDirective, { static: true }]
-            }], fMinimapFlow: [{
-                type: ViewChild,
-                args: [FMinimapFlowDirective, { static: true }]
-            }], fMinimapView: [{
-                type: ViewChild,
-                args: [FMinimapViewDirective, { static: true }]
-            }], fMinSize: [{
-                type: Input
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg fMinimapFlow width=\"100%\" height=\"100%\" fLockedContext [fMinSize]=\"fMinSize()\">\n  <g fMinimapCanvas></g>\n  <rect fMinimapView x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" stroke=\"none\"/>\n</svg>\n\n", styles: [":host{display:block;position:absolute}:host svg{overflow:hidden}\n"] }]
+        }] });
 
 const F_MINIMAP_PROVIDERS = [
     FMinimapComponent,
@@ -10432,7 +10534,9 @@ class FFlowComponent extends FFlowBase {
         return this._fMediator.execute(new GetFlowStateRequest());
     }
     selectAll() {
-        this._fMediator.execute(new SelectAllRequest());
+        setTimeout(() => {
+            this._fMediator.execute(new SelectAllRequest());
+        });
     }
     /**
      * Programmatically selects nodes and connections by their IDs.
@@ -10447,7 +10551,9 @@ class FFlowComponent extends FFlowBase {
      * triggering a `fSelectionChange` event on the next user interaction.
      */
     select(nodes, connections, isSelectedChanged = true) {
-        this._fMediator.execute(new SelectRequest(nodes, connections, isSelectedChanged));
+        setTimeout(() => {
+            this._fMediator.execute(new SelectRequest(nodes, connections, isSelectedChanged));
+        });
     }
     clearSelection() {
         this._fMediator.execute(new ClearSelectionRequest());
@@ -10464,7 +10570,7 @@ class FFlowComponent extends FFlowBase {
             ...COMMON_PROVIDERS,
             ...F_DRAGGABLE_PROVIDERS,
             { provide: F_FLOW, useExisting: FFlowComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content select=\"f-minimap\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FFlowComponent, decorators: [{
             type: Component,
@@ -10479,7 +10585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ...COMMON_PROVIDERS,
                         ...F_DRAGGABLE_PROVIDERS,
                         { provide: F_FLOW, useExisting: FFlowComponent },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content select=\"f-minimap\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"] }]
         }] });
 
 const F_FLOW_PROVIDERS = [
@@ -10687,5 +10793,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStoreExecution, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStoreExecution, AddNodeToStoreRequest, AddOutletToStoreExecution, AddOutletToStoreRequest, AddOutputToStoreExecution, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, BaseConnectionDragHandler, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateClosestInputExecution, CalculateClosestInputRequest, CalculateCommonNodeMoveLimitsExecution, CalculateCommonNodeMoveLimitsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateInputConnectionsExecution, CalculateInputConnectionsRequest, CalculateNodeMoveLimitsExecution, CalculateNodeMoveLimitsRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CalculateOutputConnectionsExecution, CalculateOutputConnectionsRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, DragAndDropBase, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFZoomDirection, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, EventExtensions, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCanvasDragHandler, FCanvasMoveFinalizeExecution, FCanvasMoveFinalizeRequest, FCanvasMovePreparationExecution, FCanvasMovePreparationRequest, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleEndComponent, FConnectionDragHandleStartComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionDragHandler, FCreateConnectionDragHandlerPreparationExecution, FCreateConnectionDragHandlerPreparationRequest, FCreateConnectionEvent, FCreateConnectionFinalizeExecution, FCreateConnectionFinalizeRequest, FCreateConnectionFromOutletPreparationExecution, FCreateConnectionFromOutletPreparationRequest, FCreateConnectionFromOutputPreparationExecution, FCreateConnectionFromOutputPreparationRequest, FCreateConnectionPreparationExecution, FCreateConnectionPreparationRequest, FCreateNodeEvent, FDragBlockerDirective, FDragHandleDirective, FDragHandlerResult, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemCreatePlaceholderExecution, FExternalItemCreatePlaceholderRequest, FExternalItemCreatePreviewExecution, FExternalItemCreatePreviewRequest, FExternalItemDirective, FExternalItemDragHandler, FExternalItemFinalizeExecution, FExternalItemFinalizeRequest, FExternalItemPlaceholderDirective, FExternalItemPreparationExecution, FExternalItemPreparationRequest, FExternalItemPreviewDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FLineAlignmentDragHandler, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FMoveNodesEvent, FNodeBase, FNodeDirective, FNodeDropToGroupDragHandler, FNodeDropToGroupFinalizeExecution, FNodeDropToGroupFinalizeRequest, FNodeDropToGroupPreparationExecution, FNodeDropToGroupPreparationRequest, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeMoveDragHandler, FNodeMoveFinalizeExecution, FNodeMoveFinalizeRequest, FNodeMovePreparationExecution, FNodeMovePreparationRequest, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeResizeDragHandler, FNodeResizeFinalizeExecution, FNodeResizeFinalizeRequest, FNodeResizePreparationExecution, FNodeResizePreparationRequest, FNodeRotateDragHandler, FNodeRotateFinalizeExecution, FNodeRotateFinalizeRequest, FNodeRotatePreparationExecution, FNodeRotatePreparationRequest, FReassignConnectionDragHandler, FReassignConnectionEvent, FReassignConnectionFinalizeExecution, FReassignConnectionFinalizeRequest, FReassignConnectionPreparationExecution, FReassignConnectionPreparationRequest, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSingleSelectExecution, FSingleSelectRequest, FSnapConnectionComponent, FStraightPathBuilder, FSummaryNodeMoveDragHandler, FZoomBase, FZoomDirective, F_AFTER_MAIN_PLUGIN, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_BEFORE_MAIN_PLUGIN, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CSS_CLASS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, F_ZOOM_TAG, FindInputAtPositionExecution, FindInputAtPositionRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFirstConnectableOutputExecution, GetFirstConnectableOutputRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedConnectorRectExecution, GetNormalizedConnectorRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, IMouseEvent, IPointerEvent, IPointerUpEvent, ITouchDownEvent, ITouchMoveEvent, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineAlignmentPreparationExecution, LineAlignmentPreparationRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MOUSE_EVENT_IGNORE_TIME, MarkAllCanBeConnectedInputsExecution, MarkAllCanBeConnectedInputsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DROP_TO_GROUP_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NODE_ROTATE_PROVIDERS, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PointBoundsLimiter, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, RedrawCanvasWithAnimationExecution, RedrawCanvasWithAnimationRequest, RedrawConnectionsExecution, RedrawConnectionsRequest, RemoveBackgroundFromStoreExecution, RemoveBackgroundFromStoreRequest, RemoveCanvasFromStoreExecution, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStoreExecution, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStoreExecution, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStoreExecution, RemoveConnectionMarkerFromStoreRequest, RemoveDndFromStoreExecution, RemoveDndFromStoreRequest, RemoveFlowFromStoreExecution, RemoveFlowFromStoreRequest, RemoveInputFromStoreExecution, RemoveInputFromStoreRequest, RemoveLineAlignmentFromStoreExecution, RemoveLineAlignmentFromStoreRequest, RemoveNodeFromStoreExecution, RemoveNodeFromStoreRequest, RemoveOutletFromStoreExecution, RemoveOutletFromStoreRequest, RemoveOutputFromStoreExecution, RemoveOutputFromStoreRequest, RemoveSnapConnectionFromStoreExecution, RemoveSnapConnectionFromStoreRequest, RemoveZoomFromStoreExecution, RemoveZoomFromStoreRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, ResetZoomExecution, ResetZoomRequest, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SourceConnectionDragHandler, SourceTargetConnectionDragHandler, StartDragSequenceExecution, StartDragSequenceRequest, TargetConnectionDragHandler, UnmarkAllCanBeConnectedInputsExecution, UnmarkAllCanBeConnectedInputsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, infinityMinMax, isDragBlocker, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isRotateHandle, isValidEventTrigger, mediatorEffect, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, transitionEnd };
+export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStoreExecution, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStoreExecution, AddNodeToStoreRequest, AddOutletToStoreExecution, AddOutletToStoreRequest, AddOutputToStoreExecution, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, BaseConnectionDragHandler, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateCommonNodeMoveLimitsExecution, CalculateCommonNodeMoveLimitsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateInputConnectionsExecution, CalculateInputConnectionsRequest, CalculateNodeMoveLimitsExecution, CalculateNodeMoveLimitsRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CalculateOutputConnectionsExecution, CalculateOutputConnectionsRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, DragAndDropBase, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFZoomDirection, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, EventExtensions, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCanvasDragHandler, FCanvasMoveFinalizeExecution, FCanvasMoveFinalizeRequest, FCanvasMovePreparationExecution, FCanvasMovePreparationRequest, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleEndComponent, FConnectionDragHandleStartComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionDragHandler, FCreateConnectionDragHandlerPreparationExecution, FCreateConnectionDragHandlerPreparationRequest, FCreateConnectionEvent, FCreateConnectionFinalizeExecution, FCreateConnectionFinalizeRequest, FCreateConnectionFromOutletPreparationExecution, FCreateConnectionFromOutletPreparationRequest, FCreateConnectionFromOutputPreparationExecution, FCreateConnectionFromOutputPreparationRequest, FCreateConnectionPreparationExecution, FCreateConnectionPreparationRequest, FCreateNodeEvent, FDragBlockerDirective, FDragHandleDirective, FDragHandlerResult, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemCreatePlaceholderExecution, FExternalItemCreatePlaceholderRequest, FExternalItemCreatePreviewExecution, FExternalItemCreatePreviewRequest, FExternalItemDirective, FExternalItemDragHandler, FExternalItemFinalizeExecution, FExternalItemFinalizeRequest, FExternalItemPlaceholderDirective, FExternalItemPreparationExecution, FExternalItemPreparationRequest, FExternalItemPreviewDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FLineAlignmentDragHandler, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FMoveNodesEvent, FNodeBase, FNodeDirective, FNodeDropToGroupDragHandler, FNodeDropToGroupFinalizeExecution, FNodeDropToGroupFinalizeRequest, FNodeDropToGroupPreparationExecution, FNodeDropToGroupPreparationRequest, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeMoveDragHandler, FNodeMoveFinalizeExecution, FNodeMoveFinalizeRequest, FNodeMovePreparationExecution, FNodeMovePreparationRequest, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeResizeDragHandler, FNodeResizeFinalizeExecution, FNodeResizeFinalizeRequest, FNodeResizePreparationExecution, FNodeResizePreparationRequest, FNodeRotateDragHandler, FNodeRotateFinalizeExecution, FNodeRotateFinalizeRequest, FNodeRotatePreparationExecution, FNodeRotatePreparationRequest, FReassignConnectionDragHandler, FReassignConnectionEvent, FReassignConnectionFinalizeExecution, FReassignConnectionFinalizeRequest, FReassignConnectionPreparationExecution, FReassignConnectionPreparationRequest, FReassignSourceDragHandler, FReassignTargetDragHandler, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSingleSelectExecution, FSingleSelectRequest, FSnapConnectionComponent, FStraightPathBuilder, FSummaryNodeMoveDragHandler, FZoomBase, FZoomDirective, F_AFTER_MAIN_PLUGIN, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_BEFORE_MAIN_PLUGIN, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CSS_CLASS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, F_ZOOM_TAG, FindClosestConnectorExecution, FindClosestConnectorRequest, FindConnectableConnectorUsingPriorityAndPositionExecution, FindConnectableConnectorUsingPriorityAndPositionRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetAllCanBeConnectedSourceConnectorsAndRectsExecution, GetAllCanBeConnectedSourceConnectorsAndRectsRequest, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFirstConnectableOutputExecution, GetFirstConnectableOutputRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedConnectorRectExecution, GetNormalizedConnectorRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, IMouseEvent, IPointerEvent, IPointerUpEvent, ITouchDownEvent, ITouchMoveEvent, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineAlignmentPreparationExecution, LineAlignmentPreparationRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MOUSE_EVENT_IGNORE_TIME, MarkConnectableConnectorsExecution, MarkConnectableConnectorsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DROP_TO_GROUP_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NODE_ROTATE_PROVIDERS, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PointBoundsLimiter, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, RedrawCanvasWithAnimationExecution, RedrawCanvasWithAnimationRequest, RedrawConnectionsExecution, RedrawConnectionsRequest, RemoveBackgroundFromStoreExecution, RemoveBackgroundFromStoreRequest, RemoveCanvasFromStoreExecution, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStoreExecution, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStoreExecution, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStoreExecution, RemoveConnectionMarkerFromStoreRequest, RemoveDndFromStoreExecution, RemoveDndFromStoreRequest, RemoveFlowFromStoreExecution, RemoveFlowFromStoreRequest, RemoveInputFromStoreExecution, RemoveInputFromStoreRequest, RemoveLineAlignmentFromStoreExecution, RemoveLineAlignmentFromStoreRequest, RemoveNodeFromStoreExecution, RemoveNodeFromStoreRequest, RemoveOutletFromStoreExecution, RemoveOutletFromStoreRequest, RemoveOutputFromStoreExecution, RemoveOutputFromStoreRequest, RemoveSnapConnectionFromStoreExecution, RemoveSnapConnectionFromStoreRequest, RemoveZoomFromStoreExecution, RemoveZoomFromStoreRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, ResetZoomExecution, ResetZoomRequest, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SourceConnectionDragHandler, SourceTargetConnectionDragHandler, StartDragSequenceExecution, StartDragSequenceRequest, TargetConnectionDragHandler, UnmarkConnectableConnectorsExecution, UnmarkConnectableConnectorsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, infinityMinMax, isClosestConnectorInsideSnapThreshold, isDragBlocker, isDragHandleEnd, isDragHandleStart, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isPointerInsideStartOrEndDragHandles, isRotateHandle, isValidEventTrigger, mediatorEffect, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, roundedRectFromPoint, transitionEnd };
 //# sourceMappingURL=foblex-flow.mjs.map