@foblex/flow 17.2.0 → 17.2.1

package/fesm2022/foblex-flow.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Directive, ElementRef, Input, HostBinding, EventEmitter, DestroyRef, booleanAttribute, Output, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, numberAttribute, ContentChildren, Injector, NgZone, ContentChild, Renderer2, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, Directive, ElementRef, Input, HostBinding, EventEmitter, DestroyRef, booleanAttribute, Output, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, numberAttribute, ContentChildren, ViewContainerRef, TemplateRef, Injector, NgZone, ContentChild, Renderer2, NgModule } from '@angular/core';
 import { RectExtensions, RoundedRect, TransformModelExtensions, PointExtensions, SizeExtensions, Point, LineExtensions, GetIntersections, findClosestAlignment, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
 import * as i2$1 from '@foblex/mediator';
 import { FExecutionRegister, FMediator } from '@foblex/mediator';
 import * as i1 from '@foblex/platform';
 import { BrowserService, PlatformService, EOperationSystem } from '@foblex/platform';
-import { normalizeDomElementId, castToEnum, flatMap, isClosestElementHasClass, getDataAttrValueFromClosestElementWithClass, deepCloneNode } from '@foblex/utils';
+import { normalizeDomElementId, castToEnum, flatMap, isClosestElementHasClass, getDataAttrValueFromClosestElementWithClass, getOrCreateRootNodeForViewRef, deepCloneNode, disableDragInteractions, extendStyles } from '@foblex/utils';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { DragAndDropBase } from '@foblex/drag-toolkit';
@@ -2874,48 +2874,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }] });
 
 let RedrawConnectionsExecution = class RedrawConnectionsExecution {
-    fComponentsStore;
-    fMediator;
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
     handle(request) {
         this._resetConnectors();
-        if (this.fComponentsStore.fTempConnection) {
-            this.setMarkers(this.fComponentsStore.fTempConnection);
+        if (this._fComponentsStore.fTempConnection) {
+            this._setMarkers(this._fComponentsStore.fTempConnection);
         }
-        if (this.fComponentsStore.fSnapConnection) {
-            this.setMarkers(this.fComponentsStore.fSnapConnection);
+        if (this._fComponentsStore.fSnapConnection) {
+            this._setMarkers(this._fComponentsStore.fSnapConnection);
         }
-        this.fComponentsStore.fConnections.forEach((connection) => {
-            const output = this.fComponentsStore.fOutputs.find((x) => x.fId === connection.fOutputId);
-            const input = this.fComponentsStore.fInputs.find((x) => x.fId === connection.fInputId);
-            if (output && input) {
-                this._setupConnection(output, input, connection);
-            }
+        this._fComponentsStore.fConnections.forEach((x) => {
+            this._setupConnection(this._getOutput(x.fOutputId), this._getInput(x.fInputId), x);
         });
     }
+    _getOutput(id) {
+        const result = this._fComponentsStore.fOutputs.find((x) => x.fId === id);
+        if (!result) {
+            throw new Error(`Output with id ${id} not found`);
+        }
+        return result;
+    }
+    _getInput(id) {
+        const result = this._fComponentsStore.fInputs.find((x) => x.fId === id);
+        if (!result) {
+            throw new Error(`Input with id ${id} not found`);
+        }
+        return result;
+    }
     _resetConnectors() {
-        this.fComponentsStore.fOutputs.forEach((x) => x.resetConnected());
-        this.fComponentsStore.fInputs.forEach((x) => x.resetConnected());
+        this._fComponentsStore.fOutputs.forEach((x) => x.resetConnected());
+        this._fComponentsStore.fInputs.forEach((x) => x.resetConnected());
     }
-    _setupConnection(output, input, connection) {
-        output.setConnected(input);
-        input.setConnected(output);
-        const line = this.getLine(output, input, connection);
-        this.setMarkers(connection);
-        connection.setLine(line.point1, output.fConnectableSide, line.point2, input.fConnectableSide);
-        connection.initialize();
-        connection.isSelected() ? connection.markAsSelected() : null;
+    _setupConnection(fOutput, fInput, fConnection) {
+        fOutput.setConnected(fInput);
+        fInput.setConnected(fOutput);
+        const line = this._getLine(fOutput, fInput, fConnection);
+        this._setMarkers(fConnection);
+        fConnection.setLine(line.point1, fOutput.fConnectableSide, line.point2, fInput.fConnectableSide);
+        fConnection.initialize();
+        fConnection.isSelected() ? fConnection.markAsSelected() : null;
     }
-    getLine(output, input, connection) {
-        return this.fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this.fMediator.execute(new GetNormalizedElementRectRequest(output.hostElement, true)), this.fMediator.execute(new GetNormalizedElementRectRequest(input.hostElement, true)), connection.fBehavior, output.fConnectableSide, input.fConnectableSide));
+    _getLine(output, input, connection) {
+        return this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fMediator.execute(new GetNormalizedElementRectRequest(output.hostElement, true)), this._fMediator.execute(new GetNormalizedElementRectRequest(input.hostElement, true)), connection.fBehavior, output.fConnectableSide, input.fConnectableSide));
     }
-    setMarkers(connection) {
-        this.fMediator.execute(new CreateConnectionMarkersRequest(connection));
+    _setMarkers(connection) {
+        this._fMediator.execute(new CreateConnectionMarkersRequest(connection));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RedrawConnectionsExecution, deps: [{ token: FComponentsStore }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RedrawConnectionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RedrawConnectionsExecution });
 };
 RedrawConnectionsExecution = __decorate([
@@ -2923,7 +2929,7 @@ RedrawConnectionsExecution = __decorate([
 ], RedrawConnectionsExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RedrawConnectionsExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i2$1.FMediator }] });
+        }] });
 
 class RemoveConnectionForCreateFromStoreRequest {
 }
@@ -3149,229 +3155,362 @@ class FindInputAtPositionRequest {
     }
 }
 
-class CanvasMoveFinalizeRequest {
-    event;
-    constructor(event) {
-        this.event = event;
+let FindInputAtPositionExecution = class FindInputAtPositionExecution {
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    _fBrowser = inject(BrowserService);
+    get _transform() {
+        return this._fComponentsStore.fCanvas.transform;
     }
-}
-
-class FDraggableDataContext {
-    selectedItems = [];
-    isSelectedChanged = false;
-    onPointerDownScale = 1;
-    onPointerDownPosition = new Point(0, 0);
-    draggableItems = [];
-    reset() {
-        this.draggableItems = [];
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
+    get _fHost() {
+        return this._fComponentsStore.fFlow.hostElement;
     }
-    markSelectionAsChanged() {
-        this.isSelectedChanged = true;
+    get _fNodes() {
+        return this._fComponentsStore.fNodes;
     }
-    isEmpty() {
-        return !this.draggableItems.length;
+    get _fSnapConnection() {
+        return this._fComponentsStore.fSnapConnection;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDataContext });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDataContext, decorators: [{
-            type: Injectable
-        }] });
-
-class CanvasDragHandler {
-    _fComponentsStore;
-    onPointerDownPosition = PointExtensions.initialize();
-    constructor(_fComponentsStore) {
-        this._fComponentsStore = _fComponentsStore;
+    handle(payload) {
+        const fInputs = this._findInputsAtPosition(payload);
+        return fInputs.length > 0 ? fInputs[0] : undefined;
     }
-    prepareDragSequence() {
-        this.onPointerDownPosition = this._fComponentsStore.fCanvas.transform.position;
+    _findInputsAtPosition(request) {
+        const result = [];
+        result.push(...this._getConnectableInputsAtPosition(request));
+        const fClosestInput = this._calculateClosetInput(request);
+        if (fClosestInput) {
+            result.unshift(fClosestInput.fConnector);
+        }
+        const fInput = this._getFirstConnectableInputOfNodeAtPosition(request);
+        if (fInput) {
+            result.push(fInput);
+        }
+        return result;
     }
-    onPointerMove(difference) {
-        this._fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
-        this._fComponentsStore.fCanvas.redraw();
+    _getConnectableInputsAtPosition(request) {
+        return request.canBeConnectedInputs.filter((x) => {
+            return RectExtensions.isIncludePoint(x.fRect, this._getPointInFlow(request.pointerPosition));
+        }).map((x) => x.fConnector);
     }
-    onPointerUp() {
-        this._fComponentsStore.fCanvas.emitCanvasChangeEvent();
+    _getPointInFlow(position) {
+        return Point.fromPoint(position)
+            .elementTransform(this._fHost)
+            .sub(this._transform.scaledPosition).sub(this._transform.position)
+            .div(this._transform.scale);
     }
-}
-
-let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
-    _fDraggableDataContext = inject(FDraggableDataContext);
-    handle(request) {
-        if (!this._isValid()) {
-            return;
+    //if the closest input is valid, return it
+    _calculateClosetInput(request) {
+        if (!this._fSnapConnection) {
+            return undefined;
         }
-        this._fDraggableDataContext.draggableItems.forEach((x) => x.onPointerUp?.());
+        const fClosestInput = this._fMediator.execute(new CalculateClosestInputRequest(this._getPointInFlow(request.pointerPosition), request.canBeConnectedInputs));
+        return this._isValidClosestInput(fClosestInput) ? fClosestInput : undefined;
     }
-    _isValid() {
-        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof CanvasDragHandler);
+    _isValidClosestInput(fClosestInput) {
+        return !!fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold;
+    }
+    //if node placed in position and fConnectOnNode is true, return the first connectable input of the node
+    _getFirstConnectableInputOfNodeAtPosition(request) {
+        return this._getElementsFromPoint(request.pointerPosition)
+            .map((x) => this._findConnectableNode(x))
+            .filter((x) => !!x)
+            .map((x) => this._findFirstConnectableInputOfNode(request.canBeConnectedInputs, x))
+            .find((x) => !!x);
+    }
+    _getElementsFromPoint(position) {
+        return this._fBrowser.document.elementsFromPoint(position.x, position.y);
+    }
+    _findConnectableNode(element) {
+        return this._fNodes.find((x) => x.isContains(element) && x.fConnectOnNode);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMoveFinalizeExecution });
+    _findFirstConnectableInputOfNode(connectableInputs, fNode) {
+        return connectableInputs.find((x) => x.fConnector.fNodeId === fNode.fId)?.fConnector;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindInputAtPositionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindInputAtPositionExecution });
 };
-CanvasMoveFinalizeExecution = __decorate([
-    FExecutionRegister(CanvasMoveFinalizeRequest)
-], CanvasMoveFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMoveFinalizeExecution, decorators: [{
+FindInputAtPositionExecution = __decorate([
+    FExecutionRegister(FindInputAtPositionRequest)
+], FindInputAtPositionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindInputAtPositionExecution, decorators: [{
             type: Injectable
         }] });
 
-class CanvasMovePreparationRequest {
-    event;
-    constructor(event) {
-        this.event = event;
+class GetAllCanBeConnectedInputsAndRectsRequest {
+    fOutputOrOutlet;
+    constructor(fOutputOrOutlet) {
+        this.fOutputOrOutlet = fOutputOrOutlet;
     }
 }
 
-let CanvasMovePreparationExecution = class CanvasMovePreparationExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    _fDraggableDataContext = inject(FDraggableDataContext);
-    get _fHost() {
-        return this._fComponentsStore.fFlow.hostElement;
+class GetConnectorAndRectRequest {
+    fConnector;
+    constructor(fConnector) {
+        this.fConnector = fConnector;
     }
+}
+
+let GetConnectorAndRectExecution = class GetConnectorAndRectExecution {
+    _fMediator = inject(FMediator);
     handle(request) {
-        if (!this._isValid(request)) {
-            return;
-        }
-        this._fDraggableDataContext.onPointerDownScale = 1;
-        this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
-            .elementTransform(this._fHost);
-        this._fDraggableDataContext.draggableItems = [
-            new CanvasDragHandler(this._fComponentsStore)
-        ];
+        return {
+            fConnector: request.fConnector,
+            fRect: this._getConnectorRect(request.fConnector)
+        };
     }
-    _isValid(request) {
-        return this._fDraggableDataContext.isEmpty() &&
-            (this._isBackgroundElement(request.event.targetElement) || this._isDragOnHost(request.event.targetElement));
+    _getConnectorRect(fConnector) {
+        return this._fMediator.execute(new GetNormalizedElementRectRequest(fConnector.hostElement, true));
     }
-    _isBackgroundElement(targetElement) {
-        return this._fComponentsStore.fBackground?.hostElement.contains(targetElement);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorAndRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorAndRectExecution });
+};
+GetConnectorAndRectExecution = __decorate([
+    FExecutionRegister(GetConnectorAndRectRequest)
+], GetConnectorAndRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorAndRectExecution, decorators: [{
+            type: Injectable
+        }] });
+
+let GetAllCanBeConnectedInputsAndRectsExecution = class GetAllCanBeConnectedInputsAndRectsExecution {
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    get _fInputs() {
+        return this._fComponentsStore.fInputs;
     }
-    _isDragOnHost(targetElement) {
-        return this._fHost.contains(targetElement) && !this._getNode(targetElement);
+    handle(payload) {
+        return this._getCanBeConnectedInputs(payload.fOutputOrOutlet).map((x) => {
+            return this._fMediator.execute(new GetConnectorAndRectRequest(x));
+        });
     }
-    _getNode(targetElement) {
-        let result = this._fComponentsStore.fNodes
-            .find(x => x.isContains(targetElement));
-        if (result && result.fDraggingDisabled) {
-            result = undefined;
+    _getCanBeConnectedInputs(fOutputOrOutlet) {
+        let fInputs = [];
+        if (fOutputOrOutlet.canBeConnectedInputs?.length) {
+            fInputs = this._fInputs.filter((x) => fOutputOrOutlet.canBeConnectedInputs.includes(x.fId));
         }
-        return result;
+        else {
+            fInputs = this._fInputs.filter((x) => x.canBeConnected);
+            if (!fOutputOrOutlet.isSelfConnectable) {
+                fInputs = this._filterSelfConnectable(fInputs, fOutputOrOutlet);
+            }
+        }
+        return fInputs;
+    }
+    _filterSelfConnectable(fInputs, fOutputOrOutlet) {
+        return fInputs.filter((x) => fOutputOrOutlet.fNodeId !== x.fNodeId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution });
 };
-CanvasMovePreparationExecution = __decorate([
-    FExecutionRegister(CanvasMovePreparationRequest)
-], CanvasMovePreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CanvasMovePreparationExecution, decorators: [{
+GetAllCanBeConnectedInputsAndRectsExecution = __decorate([
+    FExecutionRegister(GetAllCanBeConnectedInputsAndRectsRequest)
+], GetAllCanBeConnectedInputsAndRectsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution, decorators: [{
             type: Injectable
         }] });
 
-const CANVAS_PROVIDERS = [
-    CanvasMoveFinalizeExecution,
-    CanvasMovePreparationExecution,
-];
-
-class CreateConnectionFinalizeRequest {
-    event;
-    constructor(event) {
-        this.event = event;
+class MarkAllCanBeConnectedInputsRequest {
+    fInputs;
+    constructor(fInputs) {
+        this.fInputs = fInputs;
     }
 }
 
-function createErrorClass(impl) {
-    const _super = (instance) => {
-        Error.call(instance);
-    };
-    const constructor = impl(_super);
-    constructor.prototype = Object.create(Error.prototype);
-    constructor.prototype.constructor = constructor;
-    return constructor;
-}
-
-const NotFoundError = createErrorClass((_super) => function error(message) {
-    _super(this);
-    this.message = message || 'The requested resource was not found.';
-    this.code = 404;
-});
-
-const ConflictError = createErrorClass((_super) => function error(message) {
-    _super(this);
-    this.message = message || 'Conflict error occurred.';
-    this.code = 409;
-});
+const F_CSS_CLASS = {
+    DRAG_AND_DROP: {
+        DRAGGING: 'f-dragging',
+        CONNECTIONS_DRAGGING: 'f-connections-dragging',
+    },
+    CONNECTOR: {
+        OUTPUT_CONNECTED: 'f-node-output-connected',
+        OUTPUT_NOT_CONNECTABLE: 'f-node-output-not-connectable',
+        INPUT_CONNECTED: 'f-node-input-connected',
+        INPUT_NOT_CONNECTABLE: 'f-node-input-not-connectable',
+        INPUT_CAN_BE_CONNECTED_TO: 'f-node-input-can-be-connected-to',
+    }
+};
 
-function OutputNotFound(id) {
-    return new NotFoundError(`Output with fOutputId ${id} not found. Make sure there is no f-connection to a non-existent fOutput.`);
-}
-function InputNotFound(id) {
-    return new NotFoundError(`Input with fInputId ${id} not found. Make sure there is no f-connection to a non-existent fInput.`);
-}
-function RequiredOutput() {
-    return new ConflictError(`The fNode must contain at least one fOutput if there is an fOutlet`);
+let MarkAllCanBeConnectedInputsExecution = class MarkAllCanBeConnectedInputsExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(payload) {
+        this._fComponentsStore.flowHost.classList.add(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
+        payload.fInputs.forEach((fInput) => this._markCanBeConnectedTo(fInput));
+    }
+    _markCanBeConnectedTo(fInput) {
+        fInput.hostElement.classList.add(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution });
+};
+MarkAllCanBeConnectedInputsExecution = __decorate([
+    FExecutionRegister(MarkAllCanBeConnectedInputsRequest)
+], MarkAllCanBeConnectedInputsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class RemoveInputFromStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
+    }
 }
 
-class GetCanBeConnectedOutputByOutletRequest {
-    fOutlet;
-    constructor(fOutlet) {
-        this.fOutlet = fOutlet;
+let RemoveInputFromStoreExecution = class RemoveInputFromStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.removeComponent(this._fComponentsStore.fInputs, request.fComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution });
+};
+RemoveInputFromStoreExecution = __decorate([
+    FExecutionRegister(RemoveInputFromStoreRequest)
+], RemoveInputFromStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class RemoveOutletFromStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
     }
 }
 
-let GetCanBeConnectedOutputByOutletExecution = class GetCanBeConnectedOutputByOutletExecution {
-    _fComponentStore = inject(FComponentsStore);
-    get _fNodes() {
-        return this._fComponentStore.fNodes;
+let RemoveOutletFromStoreExecution = class RemoveOutletFromStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutlets, request.fComponent);
     }
-    get _fOutputs() {
-        return this._fComponentStore.fOutputs;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution });
+};
+RemoveOutletFromStoreExecution = __decorate([
+    FExecutionRegister(RemoveOutletFromStoreRequest)
+], RemoveOutletFromStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class RemoveOutputFromStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
     }
-    _fNode;
+}
+
+let RemoveOutputFromStoreExecution = class RemoveOutputFromStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
     handle(request) {
-        if (!this._isValid(request)) {
-            return;
-        }
-        const fOutputs = this._getConnectableOutputs();
-        if (!fOutputs.length) {
-            throw new Error('The fNode must contain at least one fOutput if there is an fOutlet');
-        }
-        return fOutputs[0];
+        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutputs, request.fComponent);
     }
-    _isValid(request) {
-        return !!this._getNode(request.fOutlet);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution });
+};
+RemoveOutputFromStoreExecution = __decorate([
+    FExecutionRegister(RemoveOutputFromStoreRequest)
+], RemoveOutputFromStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class UnmarkAllCanBeConnectedInputsRequest {
+    fInputs;
+    constructor(fInputs) {
+        this.fInputs = fInputs;
     }
-    _getNode(fOutlet) {
-        this._fNode = this._fNodes.find((x) => x.isContains(fOutlet.hostElement));
-        return this._fNode;
+}
+
+let UnmarkAllCanBeConnectedInputsExecution = class UnmarkAllCanBeConnectedInputsExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(payload) {
+        this._fComponentsStore.flowHost.classList.remove(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
+        payload.fInputs.forEach((fInput) => this._unmarkCanBeConnectedTo(fInput));
     }
-    _getConnectableOutputs() {
-        return this._fOutputs
-            .filter((x) => this._fNode.isContains(x.hostElement) && x.canBeConnected);
+    _unmarkCanBeConnectedTo(fInput) {
+        fInput.hostElement.classList.remove(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetCanBeConnectedOutputByOutletExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetCanBeConnectedOutputByOutletExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution });
 };
-GetCanBeConnectedOutputByOutletExecution = __decorate([
-    FExecutionRegister(GetCanBeConnectedOutputByOutletRequest)
-], GetCanBeConnectedOutputByOutletExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetCanBeConnectedOutputByOutletExecution, decorators: [{
+UnmarkAllCanBeConnectedInputsExecution = __decorate([
+    FExecutionRegister(UnmarkAllCanBeConnectedInputsRequest)
+], UnmarkAllCanBeConnectedInputsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, decorators: [{
             type: Injectable
         }] });
 
-class FCreateConnectionEvent {
-    fOutputId;
-    fInputId;
-    fDropPosition;
-    constructor(fOutputId, fInputId, fDropPosition) {
-        this.fOutputId = fOutputId;
-        this.fInputId = fInputId;
-        this.fDropPosition = fDropPosition;
+const F_CONNECTORS_FEATURES = [
+    AddInputToStoreExecution,
+    AddOutletToStoreExecution,
+    AddOutputToStoreExecution,
+    CalculateClosestInputExecution,
+    FindInputAtPositionExecution,
+    GetAllCanBeConnectedInputsAndRectsExecution,
+    GetConnectorAndRectExecution,
+    MarkAllCanBeConnectedInputsExecution,
+    RemoveInputFromStoreExecution,
+    RemoveOutletFromStoreExecution,
+    RemoveOutputFromStoreExecution,
+    UnmarkAllCanBeConnectedInputsExecution
+];
+
+class AddDndToStoreRequest {
+    fComponent;
+    constructor(fComponent) {
+        this.fComponent = fComponent;
+    }
+}
+
+let AddDndToStoreExecution = class AddDndToStoreExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        this._fComponentsStore.fDraggable = request.fComponent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution });
+};
+AddDndToStoreExecution = __decorate([
+    FExecutionRegister(AddDndToStoreRequest)
+], AddDndToStoreExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class EmitSelectionChangeEventRequest {
+}
+
+class FCanvasMoveFinalizeRequest {
+    event;
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+class FDraggableDataContext {
+    selectedItems = [];
+    isSelectedChanged = false;
+    onPointerDownScale = 1;
+    onPointerDownPosition = new Point(0, 0);
+    draggableItems = [];
+    reset() {
+        this.draggableItems = [];
+        this.onPointerDownScale = 1;
+        this.onPointerDownPosition = new Point(0, 0);
+    }
+    markSelectionAsChanged() {
+        this.isSelectedChanged = true;
+    }
+    isEmpty() {
+        return !this.draggableItems.length;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDataContext });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDataContext, decorators: [{
+            type: Injectable
+        }] });
 
 class FInjector {
     static _injector;
@@ -3392,57 +3531,275 @@ function fInject(token) {
     return FInjector.get().get(token);
 }
 
-class CreateConnectionDragHandler {
-    _fOutputOrOutlet;
-    _fMediator = fInject(FMediator);
+class FCanvasDragHandler {
+    fEventType = 'canvas-move';
     _fComponentsStore = fInject(FComponentsStore);
-    _toConnectorRect = new RoundedRect();
-    get _fConnection() {
-        return this._fComponentsStore.fTempConnection;
-    }
-    get _fSnapConnection() {
-        return this._fComponentsStore.fSnapConnection;
-    }
-    _fOutputWithRect;
-    _canBeConnectedInputs = [];
-    constructor(_fOutputOrOutlet, _onPointerDownPosition) {
-        this._fOutputOrOutlet = _fOutputOrOutlet;
-        this._toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(_onPointerDownPosition.x, _onPointerDownPosition.y));
-    }
+    _onPointerDownPosition = PointExtensions.initialize();
     prepareDragSequence() {
-        this._getAndMarkCanBeConnectedInputs();
-        this._initializeSnapConnection();
-        this._initializeConnectionForCreate();
-        this._fOutputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fOutputOrOutlet));
-        this._fConnection.show();
-        this.onPointerMove(PointExtensions.initialize());
+        this._onPointerDownPosition = this._fComponentsStore.fCanvas.transform.position;
     }
-    _getAndMarkCanBeConnectedInputs() {
-        this._canBeConnectedInputs = this._fMediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutputOrOutlet));
-        this._fMediator.execute(new MarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+    onPointerMove(difference) {
+        this._fComponentsStore.fCanvas.setPosition(Point.fromPoint(this._onPointerDownPosition).add(difference));
+        this._fComponentsStore.fCanvas.redraw();
     }
-    _initializeSnapConnection() {
-        if (!this._fSnapConnection) {
+    onPointerUp() {
+        this._fComponentsStore.fCanvas.emitCanvasChangeEvent();
+    }
+}
+
+let FCanvasMoveFinalizeExecution = class FCanvasMoveFinalizeExecution {
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    handle(request) {
+        if (!this._isValid()) {
             return;
         }
-        this._fSnapConnection.fOutputId = this._fOutputOrOutlet.fId;
-        this._fSnapConnection.initialize();
-    }
-    _initializeConnectionForCreate() {
-        this._fConnection.fOutputId = this._fOutputOrOutlet.fId;
-        this._fConnection.initialize();
+        this._fDraggableDataContext.draggableItems.forEach((x) => x.onPointerUp?.());
     }
-    onPointerMove(difference) {
-        const fClosestInput = this._findClosestInput(difference);
-        this._drawConnectionForCreate(this._toConnectorRect.addPoint(difference), fClosestInput?.fConnector.fConnectableSide || EFConnectableSide.TOP);
-        if (this._fSnapConnection) {
-            this._drawSnapConnection(this._getClosestInputForSnapConnection(fClosestInput));
-        }
+    _isValid() {
+        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof FCanvasDragHandler);
     }
-    _drawConnectionForCreate(toConnectorRect, fSide) {
-        const line = this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, toConnectorRect, this._fConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fSide));
-        this._fConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fSide);
-        this._fConnection.redraw();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCanvasMoveFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCanvasMoveFinalizeExecution });
+};
+FCanvasMoveFinalizeExecution = __decorate([
+    FExecutionRegister(FCanvasMoveFinalizeRequest)
+], FCanvasMoveFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCanvasMoveFinalizeExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class FCanvasMovePreparationRequest {
+    event;
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+let FCanvasMovePreparationExecution = class FCanvasMovePreparationExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    get _fHost() {
+        return this._fComponentsStore.fFlow.hostElement;
+    }
+    handle(request) {
+        if (!this._isValid(request)) {
+            return;
+        }
+        this._fDraggableDataContext.onPointerDownScale = 1;
+        this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
+            .elementTransform(this._fHost);
+        this._fDraggableDataContext.draggableItems = [new FCanvasDragHandler()];
+    }
+    _isValid(request) {
+        return this._fDraggableDataContext.isEmpty() &&
+            (this._isBackgroundElement(request.event.targetElement) || this._isDragOnHost(request.event.targetElement));
+    }
+    _isBackgroundElement(targetElement) {
+        return this._fComponentsStore.fBackground?.hostElement.contains(targetElement);
+    }
+    _isDragOnHost(targetElement) {
+        return this._fHost.contains(targetElement) && !this._getNode(targetElement);
+    }
+    _getNode(targetElement) {
+        let result = this._fComponentsStore.fNodes
+            .find(x => x.isContains(targetElement));
+        if (result && result.fDraggingDisabled) {
+            result = undefined;
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCanvasMovePreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCanvasMovePreparationExecution });
+};
+FCanvasMovePreparationExecution = __decorate([
+    FExecutionRegister(FCanvasMovePreparationRequest)
+], FCanvasMovePreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCanvasMovePreparationExecution, decorators: [{
+            type: Injectable
+        }] });
+
+const CANVAS_PROVIDERS = [
+    FCanvasMoveFinalizeExecution,
+    FCanvasMovePreparationExecution,
+];
+
+class FDragHandlerResult {
+    _data;
+    setData(data) {
+        this._data = { ...this._data, ...data };
+    }
+    getData() {
+        return this._data;
+    }
+    clear() {
+        this._data = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDragHandlerResult, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDragHandlerResult });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDragHandlerResult, decorators: [{
+            type: Injectable
+        }] });
+
+class FCreateConnectionFinalizeRequest {
+    event;
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+function createErrorClass(impl) {
+    const _super = (instance) => {
+        Error.call(instance);
+    };
+    const constructor = impl(_super);
+    constructor.prototype = Object.create(Error.prototype);
+    constructor.prototype.constructor = constructor;
+    return constructor;
+}
+
+const NotFoundError = createErrorClass((_super) => function error(message) {
+    _super(this);
+    this.message = message || 'The requested resource was not found.';
+    this.code = 404;
+});
+
+const ConflictError = createErrorClass((_super) => function error(message) {
+    _super(this);
+    this.message = message || 'Conflict error occurred.';
+    this.code = 409;
+});
+
+function OutputNotFound(id) {
+    return new NotFoundError(`Output with fOutputId ${id} not found. Make sure there is no f-connection to a non-existent fOutput.`);
+}
+function InputNotFound(id) {
+    return new NotFoundError(`Input with fInputId ${id} not found. Make sure there is no f-connection to a non-existent fInput.`);
+}
+function RequiredOutput() {
+    return new ConflictError(`The fNode must contain at least one fOutput if there is an fOutlet`);
+}
+
+class GetFirstConnectableOutputRequest {
+    fOutlet;
+    constructor(fOutlet) {
+        this.fOutlet = fOutlet;
+    }
+}
+
+let GetFirstConnectableOutputExecution = class GetFirstConnectableOutputExecution {
+    _fComponentStore = inject(FComponentsStore);
+    get _fNodes() {
+        return this._fComponentStore.fNodes;
+    }
+    get _fOutputs() {
+        return this._fComponentStore.fOutputs;
+    }
+    _fNode;
+    handle(request) {
+        if (!this._isValid(request)) {
+            return;
+        }
+        const fOutputs = this._getConnectableOutputs();
+        if (!fOutputs.length) {
+            throw new Error('The fNode must contain at least one fOutput if there is an fOutlet');
+        }
+        return fOutputs[0];
+    }
+    _isValid(request) {
+        return !!this._getNode(request.fOutlet);
+    }
+    _getNode(fOutlet) {
+        this._fNode = this._fNodes.find((x) => x.isContains(fOutlet.hostElement));
+        return this._fNode;
+    }
+    _getConnectableOutputs() {
+        return this._fOutputs
+            .filter((x) => this._fNode.isContains(x.hostElement) && x.canBeConnected);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFirstConnectableOutputExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFirstConnectableOutputExecution });
+};
+GetFirstConnectableOutputExecution = __decorate([
+    FExecutionRegister(GetFirstConnectableOutputRequest)
+], GetFirstConnectableOutputExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetFirstConnectableOutputExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class FCreateConnectionEvent {
+    fOutputId;
+    fInputId;
+    fDropPosition;
+    constructor(fOutputId, fInputId, fDropPosition) {
+        this.fOutputId = fOutputId;
+        this.fInputId = fInputId;
+        this.fDropPosition = fDropPosition;
+    }
+}
+
+class FCreateConnectionDragHandler {
+    _fOutputOrOutlet;
+    fEventType = 'create-connection';
+    fData;
+    _fResult = fInject((FDragHandlerResult));
+    _fMediator = fInject(FMediator);
+    _fComponentsStore = fInject(FComponentsStore);
+    _toConnectorRect = new RoundedRect();
+    get _fConnection() {
+        return this._fComponentsStore.fTempConnection;
+    }
+    get _fSnapConnection() {
+        return this._fComponentsStore.fSnapConnection;
+    }
+    _fOutputWithRect;
+    _canBeConnectedInputs = [];
+    constructor(_fOutputOrOutlet, _onPointerDownPosition) {
+        this._fOutputOrOutlet = _fOutputOrOutlet;
+        this._toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(_onPointerDownPosition.x, _onPointerDownPosition.y));
+        this.fData = {
+            fOutputOrOutletId: this._fOutputOrOutlet.fId,
+        };
+    }
+    prepareDragSequence() {
+        this._getAndMarkCanBeConnectedInputs();
+        this._initializeSnapConnection();
+        this._initializeConnectionForCreate();
+        this._fOutputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fOutputOrOutlet));
+        this._fConnection.show();
+        this.onPointerMove(PointExtensions.initialize());
+        this._fResult.setData({
+            toConnectorRect: this._toConnectorRect,
+            canBeConnectedInputs: this._canBeConnectedInputs,
+            fOutputId: this._fOutputOrOutlet.fId,
+        });
+    }
+    _getAndMarkCanBeConnectedInputs() {
+        this._canBeConnectedInputs = this._fMediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutputOrOutlet));
+        this._fMediator.execute(new MarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+    }
+    _initializeSnapConnection() {
+        if (!this._fSnapConnection) {
+            return;
+        }
+        this._fSnapConnection.fOutputId = this._fOutputOrOutlet.fId;
+        this._fSnapConnection.initialize();
+    }
+    _initializeConnectionForCreate() {
+        this._fConnection.fOutputId = this._fOutputOrOutlet.fId;
+        this._fConnection.initialize();
+    }
+    onPointerMove(difference) {
+        const fClosestInput = this._findClosestInput(difference);
+        this._drawConnectionForCreate(this._toConnectorRect.addPoint(difference), fClosestInput?.fConnector.fConnectableSide || EFConnectableSide.TOP);
+        if (this._fSnapConnection) {
+            this._drawSnapConnection(this._getClosestInputForSnapConnection(fClosestInput));
+        }
+    }
+    _drawConnectionForCreate(toConnectorRect, fSide) {
+        const line = this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, toConnectorRect, this._fConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fSide));
+        this._fConnection.setLine(line.point1, this._fOutputWithRect.fConnector.fConnectableSide, line.point2, fSide);
+        this._fConnection.redraw();
     }
     _drawSnapConnection(fClosestInput) {
         if (fClosestInput) {
@@ -3467,26 +3824,15 @@ class CreateConnectionDragHandler {
         this._fSnapConnection?.hide();
         this._fMediator.execute(new UnmarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
-    getData() {
-        return {
-            toConnectorRect: this._toConnectorRect,
-            fOutputId: this._fOutputOrOutlet.fId,
-            canBeConnectedInputs: this._canBeConnectedInputs
-        };
-    }
 }
 
-let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution {
-    fComponentsStore;
-    fDraggableDataContext;
-    fMediator;
+let FCreateConnectionFinalizeExecution = class FCreateConnectionFinalizeExecution {
+    _fResult = inject(FDragHandlerResult);
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
     get _fDragHandler() {
-        return this.fDraggableDataContext.draggableItems[0];
-    }
-    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fMediator = fMediator;
+        return this._fDraggableDataContext.draggableItems[0];
     }
     handle(request) {
         if (!this._isValid()) {
@@ -3496,40 +3842,37 @@ let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution
         this._fDragHandler.onPointerUp();
     }
     _isValid() {
-        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof CreateConnectionDragHandler);
+        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof FCreateConnectionDragHandler);
     }
     getTargetOutput(output) {
         if (!output) {
-            throw OutputNotFound(this._getDragHandlerData().fOutputId);
+            throw OutputNotFound(this._fResult.getData().fOutputId);
         }
-        return isNodeOutlet(output.hostElement) ? this.fMediator.execute(new GetCanBeConnectedOutputByOutletRequest(output)) : output;
+        return isNodeOutlet(output.hostElement) ? this._fMediator.execute(new GetFirstConnectableOutputRequest(output)) : output;
     }
     getOutput() {
-        return this.fComponentsStore.fOutputs.find((x) => x.fId === this._getDragHandlerData().fOutputId);
+        return this._fComponentsStore.fOutputs.find((x) => x.fId === this._fResult.getData().fOutputId);
     }
     getOutlet() {
-        return this.fComponentsStore.fOutlets.find((x) => x.fId === this._getDragHandlerData().fOutputId);
+        return this._fComponentsStore.fOutlets.find((x) => x.fId === this._fResult.getData().fOutputId);
     }
     emitEvent(event) {
-        this.fComponentsStore.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(this.getTargetOutput(this.getOutput() || this.getOutlet()).fId, this._getInputUnderPointer(event)?.fId, event.getPosition()));
+        this._fComponentsStore.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(this.getTargetOutput(this.getOutput() || this.getOutlet()).fId, this._getInputUnderPointer(event)?.fId, event.getPosition()));
     }
     _getInputUnderPointer(event) {
-        return this.fMediator.execute(new FindInputAtPositionRequest(event.getPosition(), this._getDragHandlerData().toConnectorRect, this._getDragHandlerData().canBeConnectedInputs));
+        return this._fMediator.execute(new FindInputAtPositionRequest(event.getPosition(), this._fResult.getData().toConnectorRect, this._fResult.getData().canBeConnectedInputs));
     }
-    _getDragHandlerData() {
-        return this._fDragHandler.getData();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2$1.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFinalizeExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionFinalizeExecution });
 };
-CreateConnectionFinalizeExecution = __decorate([
-    FExecutionRegister(CreateConnectionFinalizeRequest)
-], CreateConnectionFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFinalizeExecution, decorators: [{
+FCreateConnectionFinalizeExecution = __decorate([
+    FExecutionRegister(FCreateConnectionFinalizeRequest)
+], FCreateConnectionFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionFinalizeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2$1.FMediator }] });
+        }] });
 
-class CreateConnectionDragHandlerPreparationRequest {
+class FCreateConnectionDragHandlerPreparationRequest {
     onPointerDownPosition;
     fOutputOrOutlet;
     constructor(onPointerDownPosition, fOutputOrOutlet) {
@@ -3538,7 +3881,7 @@ class CreateConnectionDragHandlerPreparationRequest {
     }
 }
 
-let CreateConnectionDragHandlerPreparationExecution = class CreateConnectionDragHandlerPreparationExecution {
+let FCreateConnectionDragHandlerPreparationExecution = class FCreateConnectionDragHandlerPreparationExecution {
     _fComponentsStore = inject(FComponentsStore);
     _fDraggableDataContext = inject(FDraggableDataContext);
     get _fHost() {
@@ -3555,20 +3898,20 @@ let CreateConnectionDragHandlerPreparationExecution = class CreateConnectionDrag
         const positionRelativeToCanvasComponent = Point.fromPoint(positionRelativeToFlowComponent).mult(this._transform.scale)
             .sub(this._transform.position).sub(this._transform.scaledPosition).div(this._transform.scale);
         this._fDraggableDataContext.draggableItems = [
-            new CreateConnectionDragHandler(request.fOutputOrOutlet, positionRelativeToCanvasComponent)
+            new FCreateConnectionDragHandler(request.fOutputOrOutlet, positionRelativeToCanvasComponent)
         ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionDragHandlerPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionDragHandlerPreparationExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionDragHandlerPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionDragHandlerPreparationExecution });
 };
-CreateConnectionDragHandlerPreparationExecution = __decorate([
-    FExecutionRegister(CreateConnectionDragHandlerPreparationRequest)
-], CreateConnectionDragHandlerPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionDragHandlerPreparationExecution, decorators: [{
+FCreateConnectionDragHandlerPreparationExecution = __decorate([
+    FExecutionRegister(FCreateConnectionDragHandlerPreparationRequest)
+], FCreateConnectionDragHandlerPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionDragHandlerPreparationExecution, decorators: [{
             type: Injectable
         }] });
 
-class CreateConnectionFromOutletPreparationRequest {
+class FCreateConnectionFromOutletPreparationRequest {
     event;
     fNode;
     constructor(event, fNode) {
@@ -3577,7 +3920,7 @@ class CreateConnectionFromOutletPreparationRequest {
     }
 }
 
-let CreateConnectionFromOutletPreparationExecution = class CreateConnectionFromOutletPreparationExecution {
+let FCreateConnectionFromOutletPreparationExecution = class FCreateConnectionFromOutletPreparationExecution {
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
@@ -3607,22 +3950,22 @@ let CreateConnectionFromOutletPreparationExecution = class CreateConnectionFromO
             .filter((x) => fNode.isContains(x.hostElement));
     }
     _createDragHandler(position, fOutputOrOutlet) {
-        this._fMediator.execute(new CreateConnectionDragHandlerPreparationRequest(position, fOutputOrOutlet));
+        this._fMediator.execute(new FCreateConnectionDragHandlerPreparationRequest(position, fOutputOrOutlet));
     }
     _getConnectableOutput(fOutlet) {
-        return this._fMediator.execute(new GetCanBeConnectedOutputByOutletRequest(fOutlet));
+        return this._fMediator.execute(new GetFirstConnectableOutputRequest(fOutlet));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionFromOutletPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionFromOutletPreparationExecution });
 };
-CreateConnectionFromOutletPreparationExecution = __decorate([
-    FExecutionRegister(CreateConnectionFromOutletPreparationRequest)
-], CreateConnectionFromOutletPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution, decorators: [{
+FCreateConnectionFromOutletPreparationExecution = __decorate([
+    FExecutionRegister(FCreateConnectionFromOutletPreparationRequest)
+], FCreateConnectionFromOutletPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionFromOutletPreparationExecution, decorators: [{
             type: Injectable
         }] });
 
-class CreateConnectionFromOutputPreparationRequest {
+class FCreateConnectionFromOutputPreparationRequest {
     event;
     fNode;
     constructor(event, fNode) {
@@ -3631,7 +3974,7 @@ class CreateConnectionFromOutputPreparationRequest {
     }
 }
 
-let CreateConnectionFromOutputPreparationExecution = class CreateConnectionFromOutputPreparationExecution {
+let FCreateConnectionFromOutputPreparationExecution = class FCreateConnectionFromOutputPreparationExecution {
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
     handle(request) {
@@ -3640,7 +3983,7 @@ let CreateConnectionFromOutputPreparationExecution = class CreateConnectionFromO
         }
         const fOutput = this._getOutput(request.event.targetElement);
         if (fOutput.canBeConnected) {
-            this._fMediator.execute(new CreateConnectionDragHandlerPreparationRequest(request.event.getPosition(), fOutput));
+            this._fMediator.execute(new FCreateConnectionDragHandlerPreparationRequest(request.event.getPosition(), fOutput));
         }
     }
     _isValid(request) {
@@ -3661,17 +4004,17 @@ let CreateConnectionFromOutputPreparationExecution = class CreateConnectionFromO
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionFromOutputPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionFromOutputPreparationExecution });
 };
-CreateConnectionFromOutputPreparationExecution = __decorate([
-    FExecutionRegister(CreateConnectionFromOutputPreparationRequest)
-], CreateConnectionFromOutputPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution, decorators: [{
+FCreateConnectionFromOutputPreparationExecution = __decorate([
+    FExecutionRegister(FCreateConnectionFromOutputPreparationRequest)
+], FCreateConnectionFromOutputPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionFromOutputPreparationExecution, decorators: [{
             type: Injectable
         }] });
 
-class CreateConnectionPreparationRequest {
+class FCreateConnectionPreparationRequest {
     event;
     fTrigger;
     constructor(event, fTrigger) {
@@ -3680,7 +4023,7 @@ class CreateConnectionPreparationRequest {
     }
 }
 
-let CreateConnectionPreparationExecution = class CreateConnectionPreparationExecution {
+let FCreateConnectionPreparationExecution = class FCreateConnectionPreparationExecution {
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
     _fDraggableDataContext = inject(FDraggableDataContext);
@@ -3690,10 +4033,10 @@ let CreateConnectionPreparationExecution = class CreateConnectionPreparationExec
             return;
         }
         if (isNodeOutlet(request.event.targetElement)) {
-            this._fMediator.execute(new CreateConnectionFromOutletPreparationRequest(request.event, this._fNode));
+            this._fMediator.execute(new FCreateConnectionFromOutletPreparationRequest(request.event, this._fNode));
         }
         else if (isNodeOutput(request.event.targetElement)) {
-            this._fMediator.execute(new CreateConnectionFromOutputPreparationRequest(request.event, this._fNode));
+            this._fMediator.execute(new FCreateConnectionFromOutputPreparationRequest(request.event, this._fNode));
         }
     }
     _isValid(request) {
@@ -3707,25 +4050,28 @@ let CreateConnectionPreparationExecution = class CreateConnectionPreparationExec
     _isValidConditions() {
         return this._fDraggableDataContext.isEmpty() && !!this._fComponentsStore.fTempConnection;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionPreparationExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionPreparationExecution });
 };
-CreateConnectionPreparationExecution = __decorate([
-    FExecutionRegister(CreateConnectionPreparationRequest)
-], CreateConnectionPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CreateConnectionPreparationExecution, decorators: [{
+FCreateConnectionPreparationExecution = __decorate([
+    FExecutionRegister(FCreateConnectionPreparationRequest)
+], FCreateConnectionPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FCreateConnectionPreparationExecution, decorators: [{
             type: Injectable
         }] });
 
-class ReassignConnectionFinalizeRequest {
+class FReassignConnectionFinalizeRequest {
     event;
     constructor(event) {
         this.event = event;
     }
 }
 
-class ReassignConnectionDragHandler {
+class FReassignConnectionDragHandler {
     _fConnection;
+    fEventType = 'reassign-connection';
+    fData;
+    _fResult = fInject((FDragHandlerResult));
     _fMediator = fInject(FMediator);
     _fComponentsStore = fInject(FComponentsStore);
     _toConnectorRect = new RoundedRect();
@@ -3752,12 +4098,20 @@ class ReassignConnectionDragHandler {
     constructor(_fConnection) {
         this._fConnection = _fConnection;
         this._toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this._fConnection.line.point2.x, this._fConnection.line.point2.y));
+        this.fData = {
+            fConnectionId: this._fConnection.fId
+        };
     }
     prepareDragSequence() {
         this._getAndMarkCanBeConnectedInputs();
         this._initializeSnapConnection();
         this._fOutputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fOutput));
         this._fInputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fInput));
+        this._fResult.setData({
+            toConnectorRect: this._toConnectorRect,
+            canBeConnectedInputs: this._canBeConnectedInputs,
+            fConnection: this._fConnection
+        });
     }
     _getAndMarkCanBeConnectedInputs() {
         this._canBeConnectedInputs = this._fMediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutput));
@@ -3810,16 +4164,6 @@ class ReassignConnectionDragHandler {
         this._fSnapConnection?.hide();
         this._fMediator.execute(new UnmarkAllCanBeConnectedInputsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
-    getData() {
-        return {
-            toConnectorRect: this._toConnectorRect,
-            fOutputId: this._fConnection.fOutputId,
-            canBeConnectedInputs: this._canBeConnectedInputs
-        };
-    }
-    getConnection() {
-        return this._fConnection;
-    }
 }
 
 class FReassignConnectionEvent {
@@ -3837,7 +4181,8 @@ class FReassignConnectionEvent {
     }
 }
 
-let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecution {
+let FReassignConnectionFinalizeExecution = class FReassignConnectionFinalizeExecution {
+    _fResult = inject(FDragHandlerResult);
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
     _fDraggableDataContext = inject(FDraggableDataContext);
@@ -3855,7 +4200,7 @@ let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecut
         this._fDragHandler.onPointerUp();
     }
     _isDroppedConnectionReassignEvent() {
-        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof ReassignConnectionDragHandler);
+        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof FReassignConnectionDragHandler);
     }
     _applyReassignEvent(event) {
         const fInput = this._getInputUnderPointer(event);
@@ -3865,32 +4210,29 @@ let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecut
         this._emitReassignConnectionEvent(event, fInput);
     }
     _getInputUnderPointer(event) {
-        return this._fMediator.execute(new FindInputAtPositionRequest(event.getPosition(), this._getDragHandlerData().toConnectorRect, this._getDragHandlerData().canBeConnectedInputs));
+        return this._fMediator.execute(new FindInputAtPositionRequest(event.getPosition(), this._fResult.getData().toConnectorRect, this._fResult.getData().canBeConnectedInputs));
     }
     _isReassignToDifferentInput(fInput) {
-        return this._fDragHandler.getConnection().fInputId !== fInput.fId;
+        return this._fResult.getData().fConnection.fInputId !== fInput.fId;
     }
     _emitReassignConnectionEvent(event, fInput) {
         this._fDraggable.fReassignConnection.emit(this._getEventData(event, fInput));
     }
     _getEventData(event, fInput) {
-        const fConnection = this._fDragHandler.getConnection();
+        const fConnection = this._fResult.getData().fConnection;
         return new FReassignConnectionEvent(fConnection.fId, fConnection.fOutputId, fConnection.fInputId, fInput?.fId, event.getPosition());
     }
-    _getDragHandlerData() {
-        return this._fDragHandler.getData();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionFinalizeExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FReassignConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FReassignConnectionFinalizeExecution });
 };
-ReassignConnectionFinalizeExecution = __decorate([
-    FExecutionRegister(ReassignConnectionFinalizeRequest)
-], ReassignConnectionFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionFinalizeExecution, decorators: [{
+FReassignConnectionFinalizeExecution = __decorate([
+    FExecutionRegister(FReassignConnectionFinalizeRequest)
+], FReassignConnectionFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FReassignConnectionFinalizeExecution, decorators: [{
             type: Injectable
         }] });
 
-class ReassignConnectionPreparationRequest {
+class FReassignConnectionPreparationRequest {
     event;
     fTrigger;
     constructor(event, fTrigger) {
@@ -3899,7 +4241,7 @@ class ReassignConnectionPreparationRequest {
     }
 }
 
-let ReassignConnectionPreparationExecution = class ReassignConnectionPreparationExecution {
+let FReassignConnectionPreparationExecution = class FReassignConnectionPreparationExecution {
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
     _fDraggableDataContext = inject(FDraggableDataContext);
@@ -3921,7 +4263,7 @@ let ReassignConnectionPreparationExecution = class ReassignConnectionPreparation
         this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
             .elementTransform(this._fHost).div(this._transform.scale);
         this._fDraggableDataContext.draggableItems = [
-            new ReassignConnectionDragHandler(this._fConnection)
+            new FReassignConnectionDragHandler(this._fConnection)
         ];
         setTimeout(() => this._updateConnectionLayer());
     }
@@ -3950,25 +4292,25 @@ let ReassignConnectionPreparationExecution = class ReassignConnectionPreparation
     _updateConnectionLayer() {
         this._fMediator.execute(new UpdateItemAndChildrenLayersRequest(this._fConnection, this._fComponentsStore.fCanvas.fConnectionsContainer.nativeElement));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionPreparationExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FReassignConnectionPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FReassignConnectionPreparationExecution });
 };
-ReassignConnectionPreparationExecution = __decorate([
-    FExecutionRegister(ReassignConnectionPreparationRequest)
-], ReassignConnectionPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ReassignConnectionPreparationExecution, decorators: [{
+FReassignConnectionPreparationExecution = __decorate([
+    FExecutionRegister(FReassignConnectionPreparationRequest)
+], FReassignConnectionPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FReassignConnectionPreparationExecution, decorators: [{
             type: Injectable
         }] });
 
 const CONNECTIONS_PROVIDERS = [
-    CreateConnectionFinalizeExecution,
-    CreateConnectionDragHandlerPreparationExecution,
-    CreateConnectionFromOutletPreparationExecution,
-    GetCanBeConnectedOutputByOutletExecution,
-    CreateConnectionFromOutputPreparationExecution,
-    CreateConnectionPreparationExecution,
-    ReassignConnectionFinalizeExecution,
-    ReassignConnectionPreparationExecution,
+    FCreateConnectionFinalizeExecution,
+    FCreateConnectionDragHandlerPreparationExecution,
+    FCreateConnectionFromOutletPreparationExecution,
+    GetFirstConnectableOutputExecution,
+    FCreateConnectionFromOutputPreparationExecution,
+    FCreateConnectionPreparationExecution,
+    FReassignConnectionFinalizeExecution,
+    FReassignConnectionPreparationExecution,
 ];
 
 class GetNormalizedParentNodeRectRequest {
@@ -4126,30 +4468,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Injectable
         }] });
 
+class FDragStartedEvent {
+    fEventType;
+    fData;
+    constructor(fEventType, fData) {
+        this.fEventType = fEventType;
+        this.fData = fData;
+    }
+}
+
 const DRAG_AND_DROP_COMMON_PROVIDERS = [
     GetNormalizedParentNodeRectExecution,
     IsArrayHasParentNodeExecution,
     IsConnectionUnderNodeExecution,
 ];
 
-class IsDragStartedRequest {
-}
-
-let IsDragStartedExecution = class IsDragStartedExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(request) {
-        return !!this._fComponentsStore.fDraggable?.isDragStarted;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsDragStartedExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsDragStartedExecution });
-};
-IsDragStartedExecution = __decorate([
-    FExecutionRegister(IsDragStartedRequest)
-], IsDragStartedExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsDragStartedExecution, decorators: [{
-            type: Injectable
-        }] });
-
 class BaseConnectionDragHandler {
     fConnection;
     _fMediator = fInject(FMediator);
@@ -4493,6 +4826,7 @@ class NodeDragHandler {
     fNode;
     fSourceHandlers;
     fTargetHandlers;
+    fEventType = 'move-node';
     _onPointerDownPosition = PointExtensions.initialize();
     constructor(fNode, fSourceHandlers = [], fTargetHandlers = []) {
         this.fNode = fNode;
@@ -4561,6 +4895,8 @@ class SummaryNodeDragHandler {
     limits;
     fHandlers;
     commonRect;
+    fEventType = 'move-node';
+    fData;
     // private _fMediator = fInject(FMediator);
     _fComponentStore = fInject(FComponentsStore);
     _fBoundsLimiter;
@@ -4570,6 +4906,9 @@ class SummaryNodeDragHandler {
         this.commonRect = commonRect;
         //this._onPointerDownPosition = this._getDraggedNodesBoundingRect();
         this._fBoundsLimiter = new PointBoundsLimiter(this.commonRect, limits);
+        this.fData = {
+            fNodeIds: this.fHandlers.map((x) => x.fNode.fId)
+        };
     }
     // private _getDraggedNodesBoundingRect(): IRect {
     //   return RectExtensions.union(this.fHandlers.map((x) => {
@@ -4703,6 +5042,7 @@ class LineAlignmentDragHandler {
     _draggedNodeRect;
     _rects;
     _restrictions;
+    fEventType = 'line-alignment';
     _fComponentsStore = fInject(FComponentsStore);
     _debounceTimer = null;
     _transform;
@@ -4913,6 +5253,7 @@ class NodeDragToParentDragHandler {
     fComponentsStore;
     fDraggableDataContext;
     notDraggedNodesRects;
+    fEventType = 'move-node-to-parent';
     DEBOUNCE_TIME = 15;
     get _transform() {
         return this.fComponentsStore.fCanvas.transform;
@@ -5544,12 +5885,17 @@ class NodeResizeFinalizeRequest {
 class NodeResizeDragHandler {
     _fNode;
     _fResizeHandleType;
+    fEventType = 'node-resize';
+    fData;
     _fMediator = fInject(FMediator);
     _originalRect;
     _resizeRestrictions;
     constructor(_fNode, _fResizeHandleType) {
         this._fNode = _fNode;
         this._fResizeHandleType = _fResizeHandleType;
+        this.fData = {
+            fNodeId: _fNode.fId,
+        };
     }
     prepareDragSequence() {
         this._originalRect = this._getOriginalNodeRect();
@@ -5700,7 +6046,7 @@ const NODE_RESIZE_PROVIDERS = [
     NodeResizePreparationExecution,
 ];
 
-class SingleSelectRequest {
+class FSingleSelectRequest {
     event;
     fMultiSelectTrigger;
     constructor(event, fMultiSelectTrigger) {
@@ -5746,7 +6092,7 @@ class SingleSelectRequest {
  *    - Adding or removing an element from the selection triggers the corresponding methods.
  *    - Selection state is tracked in the shared context for future use.
  */
-let SingleSelectExecution = class SingleSelectExecution {
+let FSingleSelectExecution = class FSingleSelectExecution {
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
     _fDraggableDataContext = inject(FDraggableDataContext);
@@ -5827,18 +6173,18 @@ let SingleSelectExecution = class SingleSelectExecution {
         fItem.markAsSelected();
         this._fDraggableDataContext.markSelectionAsChanged();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SingleSelectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SingleSelectExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSingleSelectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSingleSelectExecution });
 };
-SingleSelectExecution = __decorate([
-    FExecutionRegister(SingleSelectRequest)
-], SingleSelectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SingleSelectExecution, decorators: [{
+FSingleSelectExecution = __decorate([
+    FExecutionRegister(FSingleSelectRequest)
+], FSingleSelectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSingleSelectExecution, decorators: [{
             type: Injectable
         }] });
 
 const SINGLE_SELECT_PROVIDERS = [
-    SingleSelectExecution,
+    FSingleSelectExecution,
 ];
 
 class FDraggableBase extends DragAndDropBase {
@@ -5852,33 +6198,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Directive
         }], ctorParameters: () => [{ type: undefined }] });
 
-class ExternalItemFinalizeRequest {
-    event;
+class FExternalItemCreatePlaceholderRequest {
+    fExternalItem;
+    constructor(fExternalItem) {
+        this.fExternalItem = fExternalItem;
+    }
+}
+
+let FExternalItemCreatePlaceholderExecution = class FExternalItemCreatePlaceholderExecution {
+    _fBrowser = inject(BrowserService);
+    _containerRef = inject(ViewContainerRef);
+    handle(request) {
+        const { hostElement, fPlaceholder } = request.fExternalItem;
+        const result = fPlaceholder ?
+            this._fromTemplate(fPlaceholder) :
+            this._fromHost(hostElement);
+        result.classList.add('f-external-item-placeholder');
+        result.style.pointerEvents = 'none';
+        return result;
+    }
+    _fromTemplate(template) {
+        return getOrCreateRootNodeForViewRef(this._createViewRef(template), this._fBrowser.document);
+    }
+    _fromHost(element) {
+        return deepCloneNode(element);
+    }
+    _createViewRef(template) {
+        const result = this._containerRef.createEmbeddedView(template);
+        result.detectChanges();
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemCreatePlaceholderExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemCreatePlaceholderExecution });
+};
+FExternalItemCreatePlaceholderExecution = __decorate([
+    FExecutionRegister(FExternalItemCreatePlaceholderRequest)
+], FExternalItemCreatePlaceholderExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemCreatePlaceholderExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class FExternalItemCreatePreviewRequest {
+    fExternalItem;
+    constructor(fExternalItem) {
+        this.fExternalItem = fExternalItem;
+    }
+}
+
+let FExternalItemCreatePreviewExecution = class FExternalItemCreatePreviewExecution {
+    _fBrowser = inject(BrowserService);
+    _containerRef = inject(ViewContainerRef);
+    handle(request) {
+        const { hostElement, fPreview } = request.fExternalItem;
+        const result = fPreview ?
+            this._fromTemplate(fPreview) :
+            this._fromHost(hostElement);
+        this._setPreviewStyles(result);
+        disableDragInteractions(result);
+        result.classList.add('f-external-item-preview');
+        return result;
+    }
+    _fromTemplate(template) {
+        return getOrCreateRootNodeForViewRef(this._createViewRef(template), this._fBrowser.document);
+    }
+    _fromHost(element) {
+        return deepCloneNode(element);
+    }
+    _createViewRef(template) {
+        const result = this._containerRef.createEmbeddedView(template);
+        result.detectChanges();
+        return result;
+    }
+    _setPreviewStyles(element) {
+        extendStyles(element.style, {
+            'pointer-events': 'none',
+            'margin': 'showPopover' in element ? '0 auto 0 0' : '0',
+            'position': 'fixed',
+            'top': '0',
+            'left': '0',
+            'z-index': '1000',
+        }, new Set(['position',]));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemCreatePreviewExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemCreatePreviewExecution });
+};
+FExternalItemCreatePreviewExecution = __decorate([
+    FExecutionRegister(FExternalItemCreatePreviewRequest)
+], FExternalItemCreatePreviewExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemCreatePreviewExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class FExternalItemFinalizeRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
-class ExternalItemDragHandler {
-    externalItem;
+class FExternalItemDragHandler {
+    _fExternalItem;
+    fEventType = 'external-item';
+    fData;
+    _fResult = fInject((FDragHandlerResult));
+    _fMediator = fInject(FMediator);
     _fBrowser = fInject(BrowserService);
-    placeholder;
-    onPointerDownRect = RectExtensions.initialize();
-    difference = PointExtensions.initialize();
-    constructor(externalItem) {
-        this.externalItem = externalItem;
+    _preview;
+    _placeholder;
+    _onPointerDownRect = RectExtensions.initialize();
+    get _fItemHost() {
+        return this._fExternalItem.hostElement;
     }
-    getStyle(position) {
-        return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
+    constructor(_fExternalItem) {
+        this._fExternalItem = _fExternalItem;
+        this.fData = { fData: _fExternalItem.fData };
     }
     prepareDragSequence() {
-        this.onPointerDownRect = this.getExternalItemRect();
-        this.placeholder = deepCloneNode(this.externalItem.hostElement);
-        this.placeholder.setAttribute('style', this.getStyle(Point.fromPoint(this.onPointerDownRect)));
-        this._fBrowser.document.body.appendChild(this.placeholder);
+        this._onPointerDownRect = this._getExternalItemRect();
+        this._createAndAppendPreview();
+        this._createAndAppendPlaceholder();
+        this._setFResultData();
+    }
+    _createAndAppendPreview() {
+        this._preview = this._fMediator.execute(new FExternalItemCreatePreviewRequest(this._fExternalItem));
+        if (this._fExternalItem.fPreviewMatchSize) {
+            this._matchElementSize(this._preview, this._onPointerDownRect);
+        }
+        this._preview.style.transform = setTransform(this._onPointerDownRect);
+        this._fBrowser.document.body.appendChild(this._preview);
+    }
+    _createAndAppendPlaceholder() {
+        this._placeholder = this._fMediator.execute(new FExternalItemCreatePlaceholderRequest(this._fExternalItem));
+        this._fItemHost.parentElement.replaceChild(this._placeholder, this._fItemHost);
+    }
+    _matchElementSize(target, sourceRect) {
+        target.style.width = `${sourceRect.width}px`;
+        target.style.height = `${sourceRect.height}px`;
+    }
+    _setFResultData() {
+        this._fResult.setData({
+            preview: this._preview,
+            fExternalItem: this._fExternalItem,
+        });
     }
-    getExternalItemRect() {
-        const rect = this.externalItem.hostElement.getBoundingClientRect();
+    _getExternalItemRect() {
+        const rect = this._fExternalItem.hostElement.getBoundingClientRect();
         const scrollTop = this._fBrowser.window.pageYOffset || this._fBrowser.document.documentElement.scrollTop;
         const scrollLeft = this._fBrowser.window.pageXOffset || this._fBrowser.document.documentElement.scrollLeft;
         const offsetTop = rect.top + scrollTop;
@@ -5886,14 +6350,17 @@ class ExternalItemDragHandler {
         return RectExtensions.initialize(offsetLeft, offsetTop, rect.width, rect.height);
     }
     onPointerMove(difference) {
-        this.difference = difference;
-        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
-        this.placeholder.setAttribute('style', this.getStyle(position));
+        const position = Point.fromPoint(this._onPointerDownRect).add(difference);
+        this._preview.style.transform = setTransform(position);
     }
     onPointerUp() {
-        this._fBrowser.document.body.removeChild(this.placeholder);
+        this._fBrowser.document.body.removeChild(this._preview);
+        this._placeholder.parentElement.replaceChild(this._fItemHost, this._placeholder);
     }
 }
+function setTransform({ x, y }) {
+    return `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
+}
 
 class FCreateNodeEvent {
     rect;
@@ -5904,73 +6371,64 @@ class FCreateNodeEvent {
     }
 }
 
-let ExternalItemFinalizeExecution = class ExternalItemFinalizeExecution {
-    fComponentsStore;
-    fDraggableDataContext;
-    fMediator;
-    fBrowser;
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    get fCreateNode() {
-        return this.fComponentsStore.fDraggable.fCreateNode;
+let FExternalItemFinalizeExecution = class FExternalItemFinalizeExecution {
+    _fResult = inject(FDragHandlerResult);
+    _fMediator = inject(FMediator);
+    _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    _fBrowser = inject(BrowserService);
+    get _fHost() {
+        return this._fComponentsStore.fFlow.hostElement;
     }
-    get dragHandler() {
-        return this.fDraggableDataContext.draggableItems[0];
+    get _fCreateNode() {
+        return this._fComponentsStore.fDraggable.fCreateNode;
     }
-    constructor(fComponentsStore, fDraggableDataContext, fMediator, fBrowser) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fMediator = fMediator;
-        this.fBrowser = fBrowser;
+    get _fDragHandler() {
+        return this._fDraggableDataContext.draggableItems[0];
     }
     handle(request) {
         if (!this._isValid()) {
             return;
         }
-        this.emitEvent(this.getExternalItemElementsFromPoint(request.event.getPosition()));
-        this.dragHandler.onPointerUp();
+        this._emitEvent(this._getElementsFromPoint(request.event.getPosition()));
+        this._fDragHandler.onPointerUp();
     }
     _isValid() {
-        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof ExternalItemDragHandler);
+        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof FExternalItemDragHandler);
     }
-    getExternalItemElementsFromPoint(position) {
-        return this.fBrowser.document.elementsFromPoint(position.x, position.y)
-            .filter(x => !x.closest('.f-external-item'));
+    _getElementsFromPoint(position) {
+        return this._fBrowser.document.elementsFromPoint(position.x, position.y)
+            .filter(x => !x.closest('.f-external-item') && !x.closest('.f-external-item-preview'));
     }
-    emitEvent(elements) {
+    _emitEvent(elements) {
         if (this.isPointerInCanvasRect(elements)) {
-            this.fCreateNode.emit(new FCreateNodeEvent(this.getRectInCanvas(), this.dragHandler.externalItem.fData));
+            this._fCreateNode.emit(new FCreateNodeEvent(this._getPreviewRect(), this._fResult.getData().fExternalItem.fData));
         }
     }
     isPointerInCanvasRect(elements) {
-        return elements.length ? this.flowHost.contains(elements[0]) : false;
+        return elements.length ? this._fHost.contains(elements[0]) : false;
     }
-    getRectInCanvas() {
-        return this.fMediator.execute(new GetNormalizedElementRectRequest(this.dragHandler.placeholder, false));
+    _getPreviewRect() {
+        return this._fMediator.execute(new GetNormalizedElementRectRequest(this._fResult.getData().preview, false));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2$1.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemFinalizeExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemFinalizeExecution });
 };
-ExternalItemFinalizeExecution = __decorate([
-    FExecutionRegister(ExternalItemFinalizeRequest)
-], ExternalItemFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemFinalizeExecution, decorators: [{
+FExternalItemFinalizeExecution = __decorate([
+    FExecutionRegister(FExternalItemFinalizeRequest)
+], FExternalItemFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemFinalizeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2$1.FMediator }, { type: i1.BrowserService }] });
-
-const EXTERNAL_ITEM_FINALIZE_PROVIDERS = [
-    ExternalItemFinalizeExecution,
-];
+        }] });
 
-class ExternalItemPreparationRequest {
+class FExternalItemPreparationRequest {
     event;
     constructor(event) {
         this.event = event;
     }
 }
 
-let ExternalItemPreparationExecution = class ExternalItemPreparationExecution {
+let FExternalItemPreparationExecution = class FExternalItemPreparationExecution {
     _fExternalItemService = inject(FExternalItemService);
     _fDraggableDataContext = inject(FDraggableDataContext);
     _fComponentsStore = inject(FComponentsStore);
@@ -5984,7 +6442,7 @@ let ExternalItemPreparationExecution = class ExternalItemPreparationExecution {
         this._fDraggableDataContext.onPointerDownScale = 1;
         this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition()).elementTransform(this._fHost);
         this._fDraggableDataContext.draggableItems = [
-            new ExternalItemDragHandler(this._getExternalItem(request.event.targetElement))
+            new FExternalItemDragHandler(this._getExternalItem(request.event.targetElement))
         ];
     }
     _isValid(request) {
@@ -5996,20 +6454,16 @@ let ExternalItemPreparationExecution = class ExternalItemPreparationExecution {
     _getExternalItem(targetElement) {
         return this._fExternalItemService.getItem(getExternalItem(targetElement));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemPreparationExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemPreparationExecution });
 };
-ExternalItemPreparationExecution = __decorate([
-    FExecutionRegister(ExternalItemPreparationRequest)
-], ExternalItemPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ExternalItemPreparationExecution, decorators: [{
+FExternalItemPreparationExecution = __decorate([
+    FExecutionRegister(FExternalItemPreparationRequest)
+], FExternalItemPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemPreparationExecution, decorators: [{
             type: Injectable
         }] });
 
-const EXTERNAL_ITEM_PREPARATION_PROVIDERS = [
-    ExternalItemPreparationExecution,
-];
-
 class PreventDefaultIsExternalItemRequest {
     event;
     constructor(event) {
@@ -6055,12 +6509,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }] });
 
 const F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS = [
-    ...EXTERNAL_ITEM_FINALIZE_PROVIDERS,
-    ...EXTERNAL_ITEM_PREPARATION_PROVIDERS,
+    FExternalItemCreatePlaceholderExecution,
+    FExternalItemCreatePreviewExecution,
+    FExternalItemFinalizeExecution,
+    FExternalItemPreparationExecution,
     PreventDefaultIsExternalItemExecution,
 ];
 
-const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
 class FExternalItemBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FExternalItemBase, ngImport: i0 });
@@ -6070,17 +6525,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }] });
 
 class FExternalItemService {
-    items = [];
+    _items = [];
     registerItem(item) {
-        this.items.push(item);
+        this._items.push(item);
     }
     getItem(element) {
-        return this.items.find(item => item.hostElement === element);
+        return this._items.find(item => item.hostElement === element);
     }
     removeItem(item) {
-        const index = this.items.indexOf(item);
+        const index = this._items.indexOf(item);
         if (index !== -1) {
-            this.items.splice(index, 1);
+            this._items.splice(index, 1);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -6093,23 +6548,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 }]
         }] });
 
+const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
+
 let uniqueId$3 = 0;
 class FExternalItemDirective extends FExternalItemBase {
-    elementReference;
-    fExternalItemService;
+    _elementReference = inject(ElementRef);
+    _fExternalItemService = inject(FExternalItemService);
     fExternalItemId = `f-external-item-${uniqueId$3++}`;
     get hostElement() {
-        return this.elementReference.nativeElement;
+        return this._elementReference.nativeElement;
     }
     fData;
     fDisabled = false;
-    constructor(elementReference, fExternalItemService) {
-        super();
-        this.elementReference = elementReference;
-        this.fExternalItemService = fExternalItemService;
-    }
+    fPreview;
+    fPreviewMatchSize = true;
+    fPlaceholder;
     ngOnInit() {
-        this.fExternalItemService.registerItem(this);
+        this._fExternalItemService.registerItem(this);
         this.disablePointerEvents(Array.from(this.hostElement.children));
     }
     disablePointerEvents(children) {
@@ -6119,10 +6574,10 @@ class FExternalItemDirective extends FExternalItemBase {
         });
     }
     ngOnDestroy() {
-        this.fExternalItemService.removeItem(this);
+        this._fExternalItemService.removeItem(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemDirective, deps: [{ token: i0.ElementRef }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { fExternalItemId: "fExternalItemId", fData: "fData", fDisabled: "fDisabled" }, host: { properties: { "attr.id": "fExternalItemId", "class.f-external-item-disabled": "fDisabled" }, classAttribute: "f-component f-external-item" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FExternalItemDirective, isStandalone: true, selector: "[fExternalItem]", inputs: { fExternalItemId: "fExternalItemId", fData: "fData", fDisabled: ["fDisabled", "fDisabled", booleanAttribute], fPreview: "fPreview", fPreviewMatchSize: ["fPreviewMatchSize", "fPreviewMatchSize", booleanAttribute], fPlaceholder: "fPlaceholder" }, host: { properties: { "attr.id": "fExternalItemId", "class.f-external-item-disabled": "fDisabled" }, classAttribute: "f-component f-external-item" }, providers: [
             { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
         ], usesInheritance: true, ngImport: i0 });
 }
@@ -6130,6 +6585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Directive,
             args: [{
                     selector: "[fExternalItem]",
+                    standalone: true,
                     host: {
                         '[attr.id]': 'fExternalItemId',
                         class: "f-component f-external-item",
@@ -6139,23 +6595,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FExternalItemService }], propDecorators: { fExternalItemId: [{
+        }], propDecorators: { fExternalItemId: [{
                 type: Input
             }], fData: [{
                 type: Input
             }], fDisabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], fPreview: [{
+                type: Input
+            }], fPreviewMatchSize: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], fPlaceholder: [{
                 type: Input
             }] } });
 
-const F_EXTERNAL_ITEM_PROVIDERS = [
-    FExternalItemDirective
-];
+class FExternalItemPlaceholderDirective {
+    _fExternalItem = inject(F_EXTERNAL_ITEM);
+    _templateRef = inject(TemplateRef);
+    ngOnInit() {
+        this._fExternalItem.fPlaceholder = this._templateRef;
+    }
+    ngOnDestroy() {
+        this._fExternalItem.fPlaceholder = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemPlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FExternalItemPlaceholderDirective, isStandalone: true, selector: "ng-template[fExternalItemPlaceholder]", host: { classAttribute: "f-component f-external-item-placeholder" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemPlaceholderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[fExternalItemPlaceholder]",
+                    standalone: true,
+                    host: {
+                        class: "f-component f-external-item-placeholder",
+                    }
+                }]
+        }] });
+
+class FExternalItemPreviewDirective {
+    _fExternalItem = inject(F_EXTERNAL_ITEM);
+    _templateRef = inject(TemplateRef);
+    ngOnInit() {
+        this._fExternalItem.fPreview = this._templateRef;
+    }
+    ngOnDestroy() {
+        this._fExternalItem.fPreview = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemPreviewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FExternalItemPreviewDirective, isStandalone: true, selector: "ng-template[fExternalItemPreview]", host: { classAttribute: "f-component f-external-item-preview" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FExternalItemPreviewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[fExternalItemPreview]",
+                    standalone: true,
+                    host: {
+                        class: "f-component f-external-item-preview",
+                    },
+                }]
+        }] });
 
 const F_DRAG_AND_DROP_PLUGIN = new InjectionToken('F_DRAG_AND_DROP_PLUGIN');
 
 class FDraggableDirective extends FDraggableBase {
     _fBrowser;
     _elementReference = inject(ElementRef);
+    _fResult = inject(FDragHandlerResult);
     _fMediator = inject(FMediator);
     _fPlatform = inject(PlatformService);
     _injector = inject(Injector);
@@ -6193,11 +6700,12 @@ class FDraggableDirective extends FDraggableBase {
     }
     onPointerDown(event) {
         FInjector.set(this._injector);
+        this._fResult.clear();
         this._fMediator.execute(new InitializeDragSequenceRequest());
         this.plugins.forEach((p) => p.onPointerDown?.(event));
-        this._fMediator.execute(new SingleSelectRequest(event, this.fMultiSelectTrigger));
-        this._fMediator.execute(new ReassignConnectionPreparationRequest(event, this.fReassignConnectionTrigger));
-        this._fMediator.execute(new CreateConnectionPreparationRequest(event, this.fCreateConnectionTrigger));
+        this._fMediator.execute(new FSingleSelectRequest(event, this.fMultiSelectTrigger));
+        this._fMediator.execute(new FReassignConnectionPreparationRequest(event, this.fReassignConnectionTrigger));
+        this._fMediator.execute(new FCreateConnectionPreparationRequest(event, this.fCreateConnectionTrigger));
         const isMouseLeftOrTouch = event.isMouseLeftButton();
         if (!isMouseLeftOrTouch) {
             this.finalizeDragSequence();
@@ -6209,8 +6717,8 @@ class FDraggableDirective extends FDraggableBase {
         this._fMediator.execute(new NodeResizePreparationRequest(event));
         this._fMediator.execute(new NodeMovePreparationRequest(event));
         this._fMediator.execute(new NodeDragToParentPreparationRequest(event));
-        this._fMediator.execute(new CanvasMovePreparationRequest(event));
-        this._fMediator.execute(new ExternalItemPreparationRequest(event));
+        this._fMediator.execute(new FCanvasMovePreparationRequest(event));
+        this._fMediator.execute(new FExternalItemPreparationRequest(event));
         this._fMediator.execute(new PrepareDragSequenceRequest());
     }
     onSelect(event) {
@@ -6222,19 +6730,20 @@ class FDraggableDirective extends FDraggableBase {
     }
     onPointerUp(event) {
         this.plugins.forEach((x) => x.onPointerUp?.(event));
-        this._fMediator.execute(new ReassignConnectionFinalizeRequest(event));
-        this._fMediator.execute(new CreateConnectionFinalizeRequest(event));
+        this._fMediator.execute(new FReassignConnectionFinalizeRequest(event));
+        this._fMediator.execute(new FCreateConnectionFinalizeRequest(event));
         this._fMediator.execute(new NodeResizeFinalizeRequest(event));
         this._fMediator.execute(new NodeMoveFinalizeRequest(event));
         this._fMediator.execute(new NodeDragToParentFinalizeRequest(event));
-        this._fMediator.execute(new CanvasMoveFinalizeRequest(event));
-        this._fMediator.execute(new ExternalItemFinalizeRequest(event));
+        this._fMediator.execute(new FCanvasMoveFinalizeRequest(event));
+        this._fMediator.execute(new FExternalItemFinalizeRequest(event));
         this._fMediator.execute(new EndDragSequenceRequest());
         FInjector.clear();
     }
     finalizeDragSequence() {
         this._fMediator.execute(new EmitSelectionChangeEventRequest());
         FInjector.clear();
+        this._fResult.clear();
     }
     ngOnDestroy() {
         this._fMediator.execute(new RemoveDndFromStoreRequest());
@@ -6242,13 +6751,14 @@ class FDraggableDirective extends FDraggableBase {
         FInjector.clear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDirective, deps: [{ token: NgZone, optional: true }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: ["fDraggableDisabled", "disabled", booleanAttribute], fMultiSelectTrigger: "fMultiSelectTrigger", fReassignConnectionTrigger: "fReassignConnectionTrigger", fCreateConnectionTrigger: "fCreateConnectionTrigger", fEmitOnNodeIntersect: ["fEmitOnNodeIntersect", "fEmitOnNodeIntersect", booleanAttribute], vCellSize: ["vCellSize", "vCellSize", numberAttribute], hCellSize: ["hCellSize", "hCellSize", numberAttribute], fCellSizeWhileDragging: ["fCellSizeWhileDragging", "fCellSizeWhileDragging", booleanAttribute] }, outputs: { fSelectionChange: "fSelectionChange", fNodeIntersectedWithConnections: "fNodeIntersectedWithConnections", fCreateNode: "fCreateNode", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection", fDropToGroup: "fDropToGroup", fDragStarted: "fDragStarted", fDragEnded: "fDragEnded" }, queries: [{ propertyName: "plugins", predicate: F_DRAG_AND_DROP_PLUGIN, descendants: true }], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: ["fDraggableDisabled", "disabled", booleanAttribute], fMultiSelectTrigger: "fMultiSelectTrigger", fReassignConnectionTrigger: "fReassignConnectionTrigger", fCreateConnectionTrigger: "fCreateConnectionTrigger", fEmitOnNodeIntersect: ["fEmitOnNodeIntersect", "fEmitOnNodeIntersect", booleanAttribute], vCellSize: ["vCellSize", "vCellSize", numberAttribute], hCellSize: ["hCellSize", "hCellSize", numberAttribute], fCellSizeWhileDragging: ["fCellSizeWhileDragging", "fCellSizeWhileDragging", booleanAttribute] }, outputs: { fSelectionChange: "fSelectionChange", fNodeIntersectedWithConnections: "fNodeIntersectedWithConnections", fCreateNode: "fCreateNode", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection", fDropToGroup: "fDropToGroup", fDragStarted: "fDragStarted", fDragEnded: "fDragEnded" }, providers: [FDragHandlerResult], queries: [{ propertyName: "plugins", predicate: F_DRAG_AND_DROP_PLUGIN, descendants: true }], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FDraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "f-flow[fDraggable]",
-                    exportAs: 'fDraggable'
+                    exportAs: 'fDraggable',
+                    providers: [FDragHandlerResult]
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -6298,13 +6808,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }] } });
 
 class FSelectionChangeEvent {
-    nodes;
-    groups;
-    connections;
-    constructor(nodes, groups, connections) {
-        this.nodes = nodes;
-        this.groups = groups;
-        this.connections = connections;
+    fNodeIds;
+    fGroupIds;
+    fConnectionIds;
+    constructor(fNodeIds, fGroupIds, fConnectionIds) {
+        this.fNodeIds = fNodeIds;
+        this.fGroupIds = fGroupIds;
+        this.fConnectionIds = fConnectionIds;
     }
 }
 
@@ -6372,6 +6882,7 @@ class FMinimapDragHandler {
     canvasPosition;
     eventPoint;
     minimap;
+    fEventType = 'minimap';
     lastDifference = null;
     constructor(fComponentsStore, fMediator, flowRect, canvasPosition, eventPoint, minimap) {
         this.fComponentsStore = fComponentsStore;
@@ -6674,6 +7185,7 @@ class SelectionAreaDragHandle {
     _fSelectionArea;
     _fDraggableDataContext;
     _fMediator;
+    fEventType = 'selection-area';
     _canBeSelected = [];
     _selectedByMove = [];
     get _fCanvasPosition() {
@@ -6701,490 +7213,168 @@ class SelectionAreaDragHandle {
         this._selectedByMove = [];
         this._canBeSelected.forEach((item) => {
             item.element.unmarkAsSelected();
-            const fItemRect = RectExtensions.addPoint(item.fRect, this._fCanvasPosition);
-            const isIntersect = RectExtensions.intersectionWithRect(fItemRect, fSelectionAreaRect);
-            if (isIntersect) {
-                item.element.markAsSelected();
-                this._selectedByMove.push(item.element);
-            }
-        });
-        this._fMediator.execute(new NotifyTransformChangedRequest());
-    }
-    _getMinimumPoint(point1, point2) {
-        return PointExtensions.initialize(Math.min(point1.x, point2.x), Math.min(point1.y, point2.y));
-    }
-    onPointerUp() {
-        this._fSelectionArea.hide();
-        this._fDraggableDataContext.selectedItems.push(...this._selectedByMove);
-        if (this._selectedByMove.length > 0) {
-            this._fDraggableDataContext.isSelectedChanged = true;
-        }
-    }
-}
-
-let SelectionAreaFinalizeExecution = class SelectionAreaFinalizeExecution {
-    _fDraggableDataContext = inject(FDraggableDataContext);
-    handle(request) {
-        if (!this._isValid()) {
-            return;
-        }
-        this._fDraggableDataContext.draggableItems.forEach((x) => {
-            x.onPointerUp?.();
-        });
-    }
-    _isValid() {
-        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof SelectionAreaDragHandle);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaFinalizeExecution });
-};
-SelectionAreaFinalizeExecution = __decorate([
-    FExecutionRegister(SelectionAreaFinalizeRequest)
-], SelectionAreaFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaFinalizeExecution, decorators: [{
-            type: Injectable
-        }] });
-
-class SelectionAreaPreparationRequest {
-    event;
-    fSelectionArea;
-    fTrigger;
-    constructor(event, fSelectionArea, fTrigger) {
-        this.event = event;
-        this.fSelectionArea = fSelectionArea;
-        this.fTrigger = fTrigger;
-    }
-}
-
-let SelectionAreaPreparationExecution = class SelectionAreaPreparationExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
-    _fDraggableDataContext = inject(FDraggableDataContext);
-    get _fHost() {
-        return this._fComponentsStore.fFlow.hostElement;
-    }
-    handle(request) {
-        if (!this._isValid(request)) {
-            return;
-        }
-        this._fDraggableDataContext.draggableItems = [
-            new SelectionAreaDragHandle(this._fComponentsStore, request.fSelectionArea, this._fDraggableDataContext, this._fMediator)
-        ];
-        this._fDraggableDataContext.onPointerDownScale = 1;
-        this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
-            .elementTransform(this._fHost);
-    }
-    _isValid(request) {
-        return this._fDraggableDataContext.isEmpty()
-            && isValidEventTrigger(request.event.originalEvent, request.fTrigger);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution });
-};
-SelectionAreaPreparationExecution = __decorate([
-    FExecutionRegister(SelectionAreaPreparationRequest)
-], SelectionAreaPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution, decorators: [{
-            type: Injectable
-        }] });
-
-const F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS = [
-    SelectionAreaPreparationExecution,
-    SelectionAreaFinalizeExecution
-];
-
-class FSelectionAreaBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FSelectionAreaBase, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaBase, decorators: [{
-            type: Directive
-        }] });
-
-class FSelectionAreaComponent extends FSelectionAreaBase {
-    _fMediator = inject(FMediator);
-    _elementReference = inject(ElementRef);
-    fTrigger = (event) => {
-        return event.shiftKey;
-    };
-    get hostElement() {
-        return this._elementReference.nativeElement;
-    }
-    ngOnInit() {
-        this.hostElement.style.display = 'none';
-    }
-    hide() {
-        this.hostElement.style.display = 'none';
-    }
-    show() {
-        this.hostElement.style.display = 'block';
-    }
-    draw(object) {
-        const style = this.hostElement.style;
-        style.left = object.x + 'px';
-        style.top = object.y + 'px';
-        style.width = object.width + 'px';
-        style.height = object.height + 'px';
-    }
-    onPointerDown(event) {
-        this._fMediator.execute(new SelectionAreaPreparationRequest(event, this, this.fTrigger));
-    }
-    onPointerUp(event) {
-        this._fMediator.execute(new SelectionAreaFinalizeRequest(event));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FSelectionAreaComponent, selector: "f-selection-area", inputs: { fTrigger: "fTrigger" }, host: { classAttribute: "f-selection-area f-component" }, providers: [
-            { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
-        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "f-selection-area", template: ``, host: {
-                        'class': 'f-selection-area f-component'
-                    }, providers: [
-                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
-                    ], styles: [":host{position:absolute}\n"] }]
-        }], propDecorators: { fTrigger: [{
-                type: Input
-            }] } });
-
-const F_SELECTION_AREA_PROVIDERS = [
-    FSelectionAreaComponent
-];
-
-const F_DRAGGABLE_PROVIDERS = [
-    ...CANVAS_PROVIDERS,
-    ...CONNECTIONS_PROVIDERS,
-    ...DRAG_AND_DROP_COMMON_PROVIDERS,
-    ...SINGLE_SELECT_PROVIDERS,
-    ...F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS,
-    ...NODE_PROVIDERS,
-    ...NODE_RESIZE_PROVIDERS,
-    ...F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS,
-    ...F_MINIMAP_DRAG_AND_DROP_PROVIDERS
-];
-
-let FindInputAtPositionExecution = class FindInputAtPositionExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
-    _fDraggableDataContext = inject(FDraggableDataContext);
-    _fBrowser = inject(BrowserService);
-    get _fNodes() {
-        return this._fComponentsStore.fNodes;
-    }
-    get _fSnapConnection() {
-        return this._fComponentsStore.fSnapConnection;
-    }
-    handle(payload) {
-        const fInputs = this._findInputsAtPosition(payload);
-        return fInputs.length > 0 ? fInputs[0] : undefined;
-    }
-    _findInputsAtPosition(request) {
-        const result = [];
-        result.push(...this._getConnectableInputsAtPosition(request));
-        const fClosestInput = this._calculateClosetInput(request);
-        if (fClosestInput) {
-            result.unshift(fClosestInput.fConnector);
-        }
-        const fInput = this._getFirstConnectableInputOfNodeAtPosition(request);
-        if (fInput) {
-            result.push(fInput);
-        }
-        return result;
-    }
-    _getConnectableInputsAtPosition(request) {
-        return request.canBeConnectedInputs.filter((x) => {
-            return RectExtensions.isIncludePoint(x.fRect, this._calculateDifference(request.pointerPosition));
-        }).map((x) => x.fConnector);
-    }
-    _calculateDifference(position) {
-        return Point.fromPoint(position)
-            .elementTransform(this._fComponentsStore.flowHost)
-            .div(this._fDraggableDataContext.onPointerDownScale)
-            .sub(this._fDraggableDataContext.onPointerDownPosition);
-    }
-    //if the closest input is valid, return it
-    _calculateClosetInput(request) {
-        if (!this._fSnapConnection) {
-            return undefined;
-        }
-        const position = Point.fromPoint(request.toConnectorRect).add(this._calculateDifference(request.pointerPosition));
-        const fClosestInput = this._fMediator.execute(new CalculateClosestInputRequest(position, request.canBeConnectedInputs));
-        return this._isValidClosestInput(fClosestInput) ? fClosestInput : undefined;
-    }
-    _isValidClosestInput(fClosestInput) {
-        return !!fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold;
-    }
-    //if node placed in position and fConnectOnNode is true, return the first connectable input of the node
-    _getFirstConnectableInputOfNodeAtPosition(request) {
-        return this._getElementsFromPoint(request.pointerPosition)
-            .map((x) => this._findConnectableNode(x))
-            .filter((x) => !!x)
-            .map((x) => this._findFirstConnectableInputOfNode(request.canBeConnectedInputs, x))
-            .find((x) => !!x);
-    }
-    _getElementsFromPoint(position) {
-        return this._fBrowser.document.elementsFromPoint(position.x, position.y);
-    }
-    _findConnectableNode(element) {
-        return this._fNodes.find((x) => x.isContains(element) && x.fConnectOnNode);
-    }
-    _findFirstConnectableInputOfNode(connectableInputs, fNode) {
-        return connectableInputs.find((x) => x.fConnector.fNodeId === fNode.fId)?.fConnector;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindInputAtPositionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindInputAtPositionExecution });
-};
-FindInputAtPositionExecution = __decorate([
-    FExecutionRegister(FindInputAtPositionRequest)
-], FindInputAtPositionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FindInputAtPositionExecution, decorators: [{
-            type: Injectable
-        }] });
-
-class GetAllCanBeConnectedInputsAndRectsRequest {
-    fOutputOrOutlet;
-    constructor(fOutputOrOutlet) {
-        this.fOutputOrOutlet = fOutputOrOutlet;
-    }
-}
-
-class GetConnectorAndRectRequest {
-    fConnector;
-    constructor(fConnector) {
-        this.fConnector = fConnector;
-    }
-}
-
-let GetConnectorAndRectExecution = class GetConnectorAndRectExecution {
-    _fMediator = inject(FMediator);
-    handle(request) {
-        return {
-            fConnector: request.fConnector,
-            fRect: this._getConnectorRect(request.fConnector)
-        };
-    }
-    _getConnectorRect(fConnector) {
-        return this._fMediator.execute(new GetNormalizedElementRectRequest(fConnector.hostElement, true));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorAndRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorAndRectExecution });
-};
-GetConnectorAndRectExecution = __decorate([
-    FExecutionRegister(GetConnectorAndRectRequest)
-], GetConnectorAndRectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetConnectorAndRectExecution, decorators: [{
-            type: Injectable
-        }] });
-
-let GetAllCanBeConnectedInputsAndRectsExecution = class GetAllCanBeConnectedInputsAndRectsExecution {
-    _fMediator = inject(FMediator);
-    _fComponentsStore = inject(FComponentsStore);
-    get _fInputs() {
-        return this._fComponentsStore.fInputs;
-    }
-    handle(payload) {
-        return this._getCanBeConnectedInputs(payload.fOutputOrOutlet).map((x) => {
-            return this._fMediator.execute(new GetConnectorAndRectRequest(x));
-        });
-    }
-    _getCanBeConnectedInputs(fOutputOrOutlet) {
-        let fInputs = [];
-        if (fOutputOrOutlet.canBeConnectedInputs?.length) {
-            fInputs = this._fInputs.filter((x) => fOutputOrOutlet.canBeConnectedInputs.includes(x.fId));
-        }
-        else {
-            fInputs = this._fInputs.filter((x) => x.canBeConnected);
-            if (!fOutputOrOutlet.isSelfConnectable) {
-                fInputs = this._filterSelfConnectable(fInputs, fOutputOrOutlet);
-            }
-        }
-        return fInputs;
-    }
-    _filterSelfConnectable(fInputs, fOutputOrOutlet) {
-        return fInputs.filter((x) => fOutputOrOutlet.fNodeId !== x.fNodeId);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution });
-};
-GetAllCanBeConnectedInputsAndRectsExecution = __decorate([
-    FExecutionRegister(GetAllCanBeConnectedInputsAndRectsRequest)
-], GetAllCanBeConnectedInputsAndRectsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution, decorators: [{
-            type: Injectable
-        }] });
-
-class MarkAllCanBeConnectedInputsRequest {
-    fInputs;
-    constructor(fInputs) {
-        this.fInputs = fInputs;
-    }
-}
-
-const F_CSS_CLASS = {
-    DRAG_AND_DROP: {
-        DRAGGING: 'f-dragging',
-        CONNECTIONS_DRAGGING: 'f-connections-dragging',
-    },
-    CONNECTOR: {
-        OUTPUT_CONNECTED: 'f-node-output-connected',
-        OUTPUT_NOT_CONNECTABLE: 'f-node-output-not-connectable',
-        INPUT_CONNECTED: 'f-node-input-connected',
-        INPUT_NOT_CONNECTABLE: 'f-node-input-not-connectable',
-        INPUT_CAN_BE_CONNECTED_TO: 'f-node-input-can-be-connected-to',
-    }
-};
-
-let MarkAllCanBeConnectedInputsExecution = class MarkAllCanBeConnectedInputsExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(payload) {
-        this._fComponentsStore.flowHost.classList.add(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
-        payload.fInputs.forEach((fInput) => this._markCanBeConnectedTo(fInput));
-    }
-    _markCanBeConnectedTo(fInput) {
-        fInput.hostElement.classList.add(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution });
-};
-MarkAllCanBeConnectedInputsExecution = __decorate([
-    FExecutionRegister(MarkAllCanBeConnectedInputsRequest)
-], MarkAllCanBeConnectedInputsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MarkAllCanBeConnectedInputsExecution, decorators: [{
-            type: Injectable
-        }] });
-
-class RemoveInputFromStoreRequest {
-    fComponent;
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+            const fItemRect = RectExtensions.addPoint(item.fRect, this._fCanvasPosition);
+            const isIntersect = RectExtensions.intersectionWithRect(fItemRect, fSelectionAreaRect);
+            if (isIntersect) {
+                item.element.markAsSelected();
+                this._selectedByMove.push(item.element);
+            }
+        });
+        this._fMediator.execute(new NotifyTransformChangedRequest());
     }
-}
-
-let RemoveInputFromStoreExecution = class RemoveInputFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fInputs, request.fComponent);
+    _getMinimumPoint(point1, point2) {
+        return PointExtensions.initialize(Math.min(point1.x, point2.x), Math.min(point1.y, point2.y));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution });
-};
-RemoveInputFromStoreExecution = __decorate([
-    FExecutionRegister(RemoveInputFromStoreRequest)
-], RemoveInputFromStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveInputFromStoreExecution, decorators: [{
-            type: Injectable
-        }] });
-
-class RemoveOutletFromStoreRequest {
-    fComponent;
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+    onPointerUp() {
+        this._fSelectionArea.hide();
+        this._fDraggableDataContext.selectedItems.push(...this._selectedByMove);
+        if (this._selectedByMove.length > 0) {
+            this._fDraggableDataContext.isSelectedChanged = true;
+        }
     }
 }
 
-let RemoveOutletFromStoreExecution = class RemoveOutletFromStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
+let SelectionAreaFinalizeExecution = class SelectionAreaFinalizeExecution {
+    _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutlets, request.fComponent);
+        if (!this._isValid()) {
+            return;
+        }
+        this._fDraggableDataContext.draggableItems.forEach((x) => {
+            x.onPointerUp?.();
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution });
+    _isValid() {
+        return this._fDraggableDataContext.draggableItems.some((x) => x instanceof SelectionAreaDragHandle);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaFinalizeExecution });
 };
-RemoveOutletFromStoreExecution = __decorate([
-    FExecutionRegister(RemoveOutletFromStoreRequest)
-], RemoveOutletFromStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutletFromStoreExecution, decorators: [{
+SelectionAreaFinalizeExecution = __decorate([
+    FExecutionRegister(SelectionAreaFinalizeRequest)
+], SelectionAreaFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaFinalizeExecution, decorators: [{
             type: Injectable
         }] });
 
-class RemoveOutputFromStoreRequest {
-    fComponent;
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+class SelectionAreaPreparationRequest {
+    event;
+    fSelectionArea;
+    fTrigger;
+    constructor(event, fSelectionArea, fTrigger) {
+        this.event = event;
+        this.fSelectionArea = fSelectionArea;
+        this.fTrigger = fTrigger;
     }
 }
 
-let RemoveOutputFromStoreExecution = class RemoveOutputFromStoreExecution {
+let SelectionAreaPreparationExecution = class SelectionAreaPreparationExecution {
+    _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
+    get _fHost() {
+        return this._fComponentsStore.fFlow.hostElement;
+    }
     handle(request) {
-        this._fComponentsStore.removeComponent(this._fComponentsStore.fOutputs, request.fComponent);
+        if (!this._isValid(request)) {
+            return;
+        }
+        this._fDraggableDataContext.draggableItems = [
+            new SelectionAreaDragHandle(this._fComponentsStore, request.fSelectionArea, this._fDraggableDataContext, this._fMediator)
+        ];
+        this._fDraggableDataContext.onPointerDownScale = 1;
+        this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
+            .elementTransform(this._fHost);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution });
+    _isValid(request) {
+        return this._fDraggableDataContext.isEmpty()
+            && isValidEventTrigger(request.event.originalEvent, request.fTrigger);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution });
 };
-RemoveOutputFromStoreExecution = __decorate([
-    FExecutionRegister(RemoveOutputFromStoreRequest)
-], RemoveOutputFromStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RemoveOutputFromStoreExecution, decorators: [{
+SelectionAreaPreparationExecution = __decorate([
+    FExecutionRegister(SelectionAreaPreparationRequest)
+], SelectionAreaPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SelectionAreaPreparationExecution, decorators: [{
             type: Injectable
         }] });
 
-class UnmarkAllCanBeConnectedInputsRequest {
-    fInputs;
-    constructor(fInputs) {
-        this.fInputs = fInputs;
-    }
+const F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS = [
+    SelectionAreaPreparationExecution,
+    SelectionAreaFinalizeExecution
+];
+
+class FSelectionAreaBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: FSelectionAreaBase, ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaBase, decorators: [{
+            type: Directive
+        }] });
 
-let UnmarkAllCanBeConnectedInputsExecution = class UnmarkAllCanBeConnectedInputsExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(payload) {
-        this._fComponentsStore.flowHost.classList.remove(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
-        payload.fInputs.forEach((fInput) => this._unmarkCanBeConnectedTo(fInput));
+class FSelectionAreaComponent extends FSelectionAreaBase {
+    _fMediator = inject(FMediator);
+    _elementReference = inject(ElementRef);
+    fTrigger = (event) => {
+        return event.shiftKey;
+    };
+    get hostElement() {
+        return this._elementReference.nativeElement;
     }
-    _unmarkCanBeConnectedTo(fInput) {
-        fInput.hostElement.classList.remove(F_CSS_CLASS.CONNECTOR.INPUT_CAN_BE_CONNECTED_TO);
+    ngOnInit() {
+        this.hostElement.style.display = 'none';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution });
-};
-UnmarkAllCanBeConnectedInputsExecution = __decorate([
-    FExecutionRegister(UnmarkAllCanBeConnectedInputsRequest)
-], UnmarkAllCanBeConnectedInputsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnmarkAllCanBeConnectedInputsExecution, decorators: [{
-            type: Injectable
-        }] });
-
-const F_CONNECTORS_FEATURES = [
-    AddInputToStoreExecution,
-    AddOutletToStoreExecution,
-    AddOutputToStoreExecution,
-    CalculateClosestInputExecution,
-    FindInputAtPositionExecution,
-    GetAllCanBeConnectedInputsAndRectsExecution,
-    GetConnectorAndRectExecution,
-    MarkAllCanBeConnectedInputsExecution,
-    RemoveInputFromStoreExecution,
-    RemoveOutletFromStoreExecution,
-    RemoveOutputFromStoreExecution,
-    UnmarkAllCanBeConnectedInputsExecution
-];
-
-class AddDndToStoreRequest {
-    fComponent;
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+    hide() {
+        this.hostElement.style.display = 'none';
+    }
+    show() {
+        this.hostElement.style.display = 'block';
+    }
+    draw(object) {
+        const style = this.hostElement.style;
+        style.left = object.x + 'px';
+        style.top = object.y + 'px';
+        style.width = object.width + 'px';
+        style.height = object.height + 'px';
+    }
+    onPointerDown(event) {
+        this._fMediator.execute(new SelectionAreaPreparationRequest(event, this, this.fTrigger));
     }
+    onPointerUp(event) {
+        this._fMediator.execute(new SelectionAreaFinalizeRequest(event));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FSelectionAreaComponent, selector: "f-selection-area", inputs: { fTrigger: "fTrigger" }, host: { classAttribute: "f-selection-area f-component" }, providers: [
+            { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "f-selection-area", template: ``, host: {
+                        'class': 'f-selection-area f-component'
+                    }, providers: [
+                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
+                    ], styles: [":host{position:absolute}\n"] }]
+        }], propDecorators: { fTrigger: [{
+                type: Input
+            }] } });
 
-let AddDndToStoreExecution = class AddDndToStoreExecution {
-    _fComponentsStore = inject(FComponentsStore);
-    handle(request) {
-        this._fComponentsStore.fDraggable = request.fComponent;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution });
-};
-AddDndToStoreExecution = __decorate([
-    FExecutionRegister(AddDndToStoreRequest)
-], AddDndToStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AddDndToStoreExecution, decorators: [{
-            type: Injectable
-        }] });
+const F_SELECTION_AREA_PROVIDERS = [
+    FSelectionAreaComponent
+];
 
-class EmitSelectionChangeEventRequest {
-}
+const F_DRAGGABLE_PROVIDERS = [
+    ...CANVAS_PROVIDERS,
+    ...CONNECTIONS_PROVIDERS,
+    ...DRAG_AND_DROP_COMMON_PROVIDERS,
+    ...SINGLE_SELECT_PROVIDERS,
+    ...F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS,
+    ...NODE_PROVIDERS,
+    ...NODE_RESIZE_PROVIDERS,
+    ...F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS,
+    ...F_MINIMAP_DRAG_AND_DROP_PROVIDERS
+];
 
 class ClearSelectionRequest {
 }
@@ -7260,9 +7450,9 @@ let GetCurrentSelectionExecution = class GetCurrentSelectionExecution {
     _fDraggableDataContext = inject(FDraggableDataContext);
     handle() {
         return {
-            nodes: this._getSelectedNodes(),
-            groups: this._getSelectedGroups(),
-            connections: this._getSelectedConnections()
+            fNodeIds: this._getSelectedNodes(),
+            fGroupIds: this._getSelectedGroups(),
+            fConnectionIds: this._getSelectedConnections()
         };
     }
     _getSelectedNodes() {
@@ -7596,7 +7786,7 @@ let EmitSelectionChangeEventExecution = class EmitSelectionChangeEventExecution
         return this._fMediator.execute(new GetCurrentSelectionRequest());
     }
     _emitSelectionChange(selection) {
-        this._fSelectionChange.emit(new FSelectionChangeEvent(selection.nodes, selection.groups, selection.connections));
+        this._fSelectionChange.emit(new FSelectionChangeEvent(selection.fNodeIds, selection.fGroupIds, selection.fConnectionIds));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: EmitSelectionChangeEventExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: EmitSelectionChangeEventExecution });
@@ -7692,6 +7882,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             type: Injectable
         }] });
 
+class IsDragStartedRequest {
+}
+
+let IsDragStartedExecution = class IsDragStartedExecution {
+    _fComponentsStore = inject(FComponentsStore);
+    handle(request) {
+        return !!this._fComponentsStore.fDraggable?.isDragStarted;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsDragStartedExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsDragStartedExecution });
+};
+IsDragStartedExecution = __decorate([
+    FExecutionRegister(IsDragStartedRequest)
+], IsDragStartedExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IsDragStartedExecution, decorators: [{
+            type: Injectable
+        }] });
+
 class PrepareDragSequenceRequest {
 }
 
@@ -7701,10 +7909,10 @@ class StartDragSequenceRequest {
 let StartDragSequenceExecution = class StartDragSequenceExecution {
     _fMediator = inject(FMediator);
     _fComponentsStore = inject(FComponentsStore);
+    _fDraggableDataContext = inject(FDraggableDataContext);
     get _hostElement() {
         return this._fComponentsStore.fDraggable.hostElement;
     }
-    _fDraggableDataContext = inject(FDraggableDataContext);
     handle(request) {
         if (this._fDraggableDataContext.draggableItems.length > 0) {
             this._hostElement.classList.add(F_CSS_CLASS.DRAG_AND_DROP.DRAGGING);
@@ -7713,7 +7921,10 @@ let StartDragSequenceExecution = class StartDragSequenceExecution {
         }
     }
     _emitDragStarted() {
-        this._fComponentsStore.fDraggable?.fDragStarted?.emit();
+        this._fComponentsStore.fDraggable?.fDragStarted?.emit({
+            fEventType: this._fDraggableDataContext.draggableItems[0].fEventType,
+            fData: { ...this._fDraggableDataContext.draggableItems[0].fData }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: StartDragSequenceExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: StartDragSequenceExecution });
@@ -9320,6 +9531,9 @@ class FZoomDirective extends FZoomBase {
             this._listenTriggers();
         }
     }
+    /**
+     *  @deprecated`,
+     */
     fZoomTriggers = [
         { event: EFTriggerEvent.WHEEL, action: EFZoomAction.WHEEL },
         { event: EFTriggerEvent.DOUBLE_CLICK, action: EFZoomAction.DOUBLE_CLICK }
@@ -9351,6 +9565,9 @@ class FZoomDirective extends FZoomBase {
         }
         this._disposeListeners();
         this._validateTriggers();
+        if (!this._isEnabled) {
+            return;
+        }
         this.fZoomTriggers.forEach((x) => {
             this._triggersListener.push(this._rendered.listen(this._fHost, x.event, this._getAction(x)));
         });
@@ -9478,7 +9695,7 @@ const F_ZOOM_PROVIDERS = [
 
 class FFlowModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, declarations: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FSnapConnectionComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective], imports: [CommonModule], exports: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FSnapConnectionComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, declarations: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FSnapConnectionComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective], imports: [CommonModule], exports: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FSnapConnectionComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FFlowModule, decorators: [{
@@ -9490,7 +9707,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         ...F_ZOOM_PROVIDERS,
                         ...F_CONNECTION_PROVIDERS,
                         ...F_CONNECTORS_PROVIDERS,
-                        ...F_EXTERNAL_ITEM_PROVIDERS,
                         ...F_FLOW_PROVIDERS,
                         ...F_LINE_ALIGNMENT_PROVIDERS,
                         ...F_MINIMAP_PROVIDERS,
@@ -9507,7 +9723,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         ...F_ZOOM_PROVIDERS,
                         ...F_CONNECTION_PROVIDERS,
                         ...F_CONNECTORS_PROVIDERS,
-                        ...F_EXTERNAL_ITEM_PROVIDERS,
                         ...F_FLOW_PROVIDERS,
                         ...F_LINE_ALIGNMENT_PROVIDERS,
                         ...F_MINIMAP_PROVIDERS,
@@ -9522,5 +9737,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStoreExecution, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStoreExecution, AddNodeToStoreRequest, AddOutletToStoreExecution, AddOutletToStoreRequest, AddOutputToStoreExecution, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, BaseConnectionDragHandler, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateClosestInputExecution, CalculateClosestInputRequest, CalculateCommonNodeMoveLimitsExecution, CalculateCommonNodeMoveLimitsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateNodeMoveLimitsExecution, CalculateNodeMoveLimitsRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, CreateConnectionDragHandler, CreateConnectionDragHandlerPreparationExecution, CreateConnectionDragHandlerPreparationRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFTriggerEvent, EFZoomAction, EFZoomDirection, EXTERNAL_ITEM_FINALIZE_PROVIDERS, EXTERNAL_ITEM_PREPARATION_PROVIDERS, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, ExternalItemDragHandler, ExternalItemFinalizeExecution, ExternalItemFinalizeRequest, ExternalItemPreparationExecution, ExternalItemPreparationRequest, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FInjector, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSnapConnectionComponent, FStraightPathBuilder, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CSS_CLASS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_DRAG_AND_DROP_PLUGIN, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_RESIZE_HANDLE, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, F_ZOOM_TAG, FindInputAtPositionExecution, FindInputAtPositionRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineAlignmentDragHandler, LineAlignmentPreparationExecution, LineAlignmentPreparationRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MarkAllCanBeConnectedInputsExecution, MarkAllCanBeConnectedInputsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DRAG_TO_PARENT_FINALIZE_PROVIDERS, NODE_MOVE_PREPARATION_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_FINALIZE_PROVIDERS, NODE_RESIZE_PROVIDERS, NodeDragHandler, NodeDragToParentDragHandler, NodeDragToParentFinalizeExecution, NodeDragToParentFinalizeRequest, NodeDragToParentPreparationExecution, NodeDragToParentPreparationRequest, NodeMoveFinalizeExecution, NodeMoveFinalizeRequest, NodeMovePreparationExecution, NodeMovePreparationRequest, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizePreparationExecution, NodeResizePreparationRequest, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PointBoundsLimiter, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, RedrawCanvasWithAnimationExecution, RedrawCanvasWithAnimationRequest, RedrawConnectionsExecution, RedrawConnectionsRequest, RemoveBackgroundFromStoreExecution, RemoveBackgroundFromStoreRequest, RemoveCanvasFromStoreExecution, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStoreExecution, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStoreExecution, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStoreExecution, RemoveConnectionMarkerFromStoreRequest, RemoveDndFromStoreExecution, RemoveDndFromStoreRequest, RemoveFlowFromStoreExecution, RemoveFlowFromStoreRequest, RemoveInputFromStoreExecution, RemoveInputFromStoreRequest, RemoveLineAlignmentFromStoreExecution, RemoveLineAlignmentFromStoreRequest, RemoveNodeFromStoreExecution, RemoveNodeFromStoreRequest, RemoveOutletFromStoreExecution, RemoveOutletFromStoreRequest, RemoveOutputFromStoreExecution, RemoveOutputFromStoreRequest, RemoveSnapConnectionFromStoreExecution, RemoveSnapConnectionFromStoreRequest, RemoveZoomFromStoreExecution, RemoveZoomFromStoreRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, ResetZoomExecution, ResetZoomRequest, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SingleSelectExecution, SingleSelectRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SourceConnectionDragHandler, SourceTargetConnectionDragHandler, StartDragSequenceExecution, StartDragSequenceRequest, SummaryNodeDragHandler, TargetConnectionDragHandler, UnmarkAllCanBeConnectedInputsExecution, UnmarkAllCanBeConnectedInputsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, fInject, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isValidEventTrigger, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, transitionEnd };
+export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStoreExecution, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStoreExecution, AddNodeToStoreRequest, AddOutletToStoreExecution, AddOutletToStoreRequest, AddOutputToStoreExecution, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, BaseConnectionDragHandler, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateClosestInputExecution, CalculateClosestInputRequest, CalculateCommonNodeMoveLimitsExecution, CalculateCommonNodeMoveLimitsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateNodeMoveLimitsExecution, CalculateNodeMoveLimitsRequest, CalculateNodesBoundingBoxExecution, CalculateNodesBoundingBoxNormalizedPositionExecution, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFTriggerEvent, EFZoomAction, EFZoomDirection, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCanvasDragHandler, FCanvasMoveFinalizeExecution, FCanvasMoveFinalizeRequest, FCanvasMovePreparationExecution, FCanvasMovePreparationRequest, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionDragHandler, FCreateConnectionDragHandlerPreparationExecution, FCreateConnectionDragHandlerPreparationRequest, FCreateConnectionEvent, FCreateConnectionFinalizeExecution, FCreateConnectionFinalizeRequest, FCreateConnectionFromOutletPreparationExecution, FCreateConnectionFromOutletPreparationRequest, FCreateConnectionFromOutputPreparationExecution, FCreateConnectionFromOutputPreparationRequest, FCreateConnectionPreparationExecution, FCreateConnectionPreparationRequest, FCreateNodeEvent, FDragHandleDirective, FDragHandlerResult, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemCreatePlaceholderExecution, FExternalItemCreatePlaceholderRequest, FExternalItemCreatePreviewExecution, FExternalItemCreatePreviewRequest, FExternalItemDirective, FExternalItemDragHandler, FExternalItemFinalizeExecution, FExternalItemFinalizeRequest, FExternalItemPlaceholderDirective, FExternalItemPreparationExecution, FExternalItemPreparationRequest, FExternalItemPreviewDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FInjector, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionDragHandler, FReassignConnectionEvent, FReassignConnectionFinalizeExecution, FReassignConnectionFinalizeRequest, FReassignConnectionPreparationExecution, FReassignConnectionPreparationRequest, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSingleSelectExecution, FSingleSelectRequest, FSnapConnectionComponent, FStraightPathBuilder, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CSS_CLASS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_DRAG_AND_DROP_PLUGIN, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_RESIZE_HANDLE, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, F_ZOOM_TAG, FindInputAtPositionExecution, FindInputAtPositionRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFirstConnectableOutputExecution, GetFirstConnectableOutputRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesExecution, GetNodesRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodesExecution, GetParentNodesRequest, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStartedExecution, IsDragStartedRequest, LineAlignmentDragHandler, LineAlignmentPreparationExecution, LineAlignmentPreparationRequest, LineElement, LineService, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MarkAllCanBeConnectedInputsExecution, MarkAllCanBeConnectedInputsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_DRAG_TO_PARENT_FINALIZE_PROVIDERS, NODE_MOVE_PREPARATION_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_FINALIZE_PROVIDERS, NODE_RESIZE_PROVIDERS, NodeDragHandler, NodeDragToParentDragHandler, NodeDragToParentFinalizeExecution, NodeDragToParentFinalizeRequest, NodeDragToParentPreparationExecution, NodeDragToParentPreparationRequest, NodeMoveFinalizeExecution, NodeMoveFinalizeRequest, NodeMovePreparationExecution, NodeMovePreparationRequest, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizePreparationExecution, NodeResizePreparationRequest, 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, SummaryNodeDragHandler, TargetConnectionDragHandler, UnmarkAllCanBeConnectedInputsExecution, UnmarkAllCanBeConnectedInputsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChangedExecution, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, fInject, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isValidEventTrigger, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, transitionEnd };
 //# sourceMappingURL=foblex-flow.mjs.map