@foblex/flow 12.6.5 → 12.6.7

package/fesm2015/foblex-flow.js

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Directive, Input, HostBinding, EventEmitter, Output, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, ContentChildren, NgZone, ContentChild, NgModule } from '@angular/core';
-import { PointExtensions, RectExtensions, Point, RoundedRect, LineExtensions, SizeExtensions, GetIntersections, Line, TransformModelExtensions } from '@foblex/2d';
+import { RoundedRect, RectExtensions, TransformModelExtensions, PointExtensions, Point, SizeExtensions, LineExtensions, GetIntersections, Line } from '@foblex/2d';
 import { Subject, Observable, Subscription, merge } from 'rxjs';
 import { debounceTime, startWith } from 'rxjs/operators';
 import { __decorate } from 'tslib';
 import * as i2 from '@foblex/mediator';
 import { FExecutionRegister, FValidatorRegister, FMediator } from '@foblex/mediator';
-import { castToEnum, castToBoolean, normalizeDomElementId, flatMap, isClosestElementHasClass, getDataAttrValueFromClosestElementWithClass, deepCloneNode } from '@foblex/utils';
+import { normalizeDomElementId, castToEnum, castToBoolean, flatMap, isClosestElementHasClass, getDataAttrValueFromClosestElementWithClass, deepCloneNode } from '@foblex/utils';
 import * as i1 from '@foblex/platform';
 import { EOperationSystem } from '@foblex/platform';
 import * as i8 from '@angular/common';
@@ -15,15 +15,12 @@ import { DragAndDropBase, EventExtensions } from '@foblex/drag-toolkit';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
-class CenterGroupOrNodeRequest {
-    constructor(id, animated) {
-        this.id = id;
-        this.animated = animated;
+class CreateConnectionMarkersRequest {
+    constructor(fConnection) {
+        this.fConnection = fConnection;
     }
 }
 
-const F_CANVAS_ANIMATION_DURATION = 150;
-
 class FComponentsStore {
     constructor() {
         this.componentsDataChanges = new Subject();
@@ -84,6 +81,170 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }] });
 
+let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
+    constructor(fBrowser, fComponentsStore) {
+        this.fBrowser = fBrowser;
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        const element = createSVGElement$1('defs', this.fBrowser);
+        const fConnection = request.fConnection;
+        this.getMarkers(fConnection).forEach((marker) => {
+            const markerElement = this.createMarkerElement(marker, fConnection.fId);
+            const clone = marker.hostElement.cloneNode(true);
+            clone.setAttribute('height', `${marker.height}`);
+            clone.setAttribute('width', `${marker.width}`);
+            clone.removeAttribute('markerUnits');
+            clone.style.display = 'unset';
+            markerElement.append(clone);
+            element.append(markerElement);
+        });
+        fConnection.fDefs.nativeElement.innerHTML = element.innerHTML;
+        this.makeSafariCompatible(fConnection);
+    }
+    getMarkers(fConnection) {
+        return this.fComponentsStore.fMarkers.filter((x) => fConnection.hostElement.contains(x.hostElement));
+    }
+    // Safari does not support markers on path elements if markers are defined after the path element
+    makeSafariCompatible(fConnection) {
+        fConnection.fPath.hostElement.replaceWith(fConnection.fPath.hostElement);
+    }
+    createMarkerElement(marker, fConnectionId) {
+        const markerElement = createSVGElement$1('marker', this.fBrowser);
+        markerElement.setAttribute('id', normalizeDomElementId(marker.type + '-' + fConnectionId));
+        markerElement.setAttribute('markerHeight', `${marker.height}`);
+        markerElement.setAttribute('markerWidth', `${marker.width}`);
+        markerElement.setAttribute('orient', `${marker.orient}`);
+        markerElement.setAttribute('refX', `${marker.refX}`);
+        markerElement.setAttribute('refY', `${marker.refY}`);
+        markerElement.setAttribute('markerUnits', `${marker.markerUnits}`);
+        return markerElement;
+    }
+};
+CreateConnectionMarkersExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateConnectionMarkersExecution, deps: [{ token: i1.BrowserService }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+CreateConnectionMarkersExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateConnectionMarkersExecution });
+CreateConnectionMarkersExecution = __decorate([
+    FExecutionRegister(CreateConnectionMarkersRequest)
+], CreateConnectionMarkersExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateConnectionMarkersExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.BrowserService }, { type: FComponentsStore }]; } });
+function createSVGElement$1(tag, fBrowser) {
+    return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
+}
+
+class CreateRoundedRectFromElementRequest {
+    constructor(element) {
+        this.element = element;
+    }
+}
+
+let CreateRoundedRectFromElementExecution = class CreateRoundedRectFromElementExecution {
+    constructor(fBrowser) {
+        this.fBrowser = fBrowser;
+    }
+    handle(request) {
+        return this.setRadiusFromElement(RoundedRect.fromRect(RectExtensions.fromElement(request.element)), request.element);
+    }
+    setRadiusFromElement(rect, element) {
+        const styles = this.getComputedStyle(element);
+        rect.radius1 = this.toPixels(styles.borderTopLeftRadius, element, styles.fontSize);
+        rect.radius2 = this.toPixels(styles.borderTopRightRadius, element, styles.fontSize);
+        rect.radius3 = this.toPixels(styles.borderBottomRightRadius, element, styles.fontSize);
+        rect.radius4 = this.toPixels(styles.borderBottomLeftRadius, element, styles.fontSize);
+        return rect;
+    }
+    getComputedStyle(element) {
+        return this.fBrowser.window.getComputedStyle(element);
+    }
+    toPixels(value, element, fontSize) {
+        return this.fBrowser.toPixels(value, element.clientWidth, element.clientHeight, fontSize) || 0;
+    }
+};
+CreateRoundedRectFromElementExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateRoundedRectFromElementExecution, deps: [{ token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+CreateRoundedRectFromElementExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateRoundedRectFromElementExecution });
+CreateRoundedRectFromElementExecution = __decorate([
+    FExecutionRegister(CreateRoundedRectFromElementRequest)
+], CreateRoundedRectFromElementExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateRoundedRectFromElementExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.BrowserService }]; } });
+
+class EmitTransformChangesRequest {
+}
+
+let EmitTransformChangesExecution = class EmitTransformChangesExecution {
+    constructor(fTransformStore) {
+        this.fTransformStore = fTransformStore;
+    }
+    handle(request) {
+        this.fTransformStore.changes.next();
+    }
+};
+EmitTransformChangesExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EmitTransformChangesExecution, deps: [{ token: FTransformStore }], target: i0.ɵɵFactoryTarget.Injectable });
+EmitTransformChangesExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EmitTransformChangesExecution });
+EmitTransformChangesExecution = __decorate([
+    FExecutionRegister(EmitTransformChangesRequest)
+], EmitTransformChangesExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EmitTransformChangesExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FTransformStore }]; } });
+
+class AddPatternToBackgroundRequest {
+    constructor(fPattern) {
+        this.fPattern = fPattern;
+    }
+}
+
+let uniqueId$c = 0;
+let AddPatternToBackgroundExecution = class AddPatternToBackgroundExecution {
+    constructor(fComponentsStore, fBrowser) {
+        this.fComponentsStore = fComponentsStore;
+        this.fBrowser = fBrowser;
+    }
+    get fBackground() {
+        return this.fComponentsStore.fBackground;
+    }
+    handle(request) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const children = ((_a = request.fPattern) === null || _a === void 0 ? void 0 : _a.hostElement.getElementsByTagName('pattern')) || [];
+        const pattern = children.length ? children[0] : undefined;
+        if (pattern) {
+            const defs = createSVGElement('defs', this.fBrowser);
+            pattern.id = 'f-background-pattern-' + uniqueId$c++;
+            (_b = request.fPattern) === null || _b === void 0 ? void 0 : _b.hostElement.remove();
+            defs.appendChild(pattern);
+            (_d = (_c = this.fBackground.hostElement) === null || _c === void 0 ? void 0 : _c.firstChild) === null || _d === void 0 ? void 0 : _d.appendChild(defs);
+            const rect = createSVGElement('rect', this.fBrowser);
+            rect.setAttribute('fill', 'url(#' + pattern.id + ')');
+            rect.setAttribute('width', '100%');
+            rect.setAttribute('height', '100%');
+            (_e = this.fBackground.hostElement.firstChild) === null || _e === void 0 ? void 0 : _e.appendChild(rect);
+            const transform = ((_f = this.fComponentsStore.fCanvas) === null || _f === void 0 ? void 0 : _f.transform) || TransformModelExtensions.default();
+            (_g = request.fPattern) === null || _g === void 0 ? void 0 : _g.setTransform(transform);
+        }
+    }
+};
+AddPatternToBackgroundExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddPatternToBackgroundExecution, deps: [{ token: FComponentsStore }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+AddPatternToBackgroundExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddPatternToBackgroundExecution });
+AddPatternToBackgroundExecution = __decorate([
+    FExecutionRegister(AddPatternToBackgroundRequest)
+], AddPatternToBackgroundExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddPatternToBackgroundExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i1.BrowserService }]; } });
+
+const F_BACKGROUND_FEATURES = [
+    AddPatternToBackgroundExecution
+];
+
+class CenterGroupOrNodeRequest {
+    constructor(id, animated) {
+        this.id = id;
+        this.animated = animated;
+    }
+}
+
 let CenterGroupOrNodeExecution = class CenterGroupOrNodeExecution {
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
@@ -98,10 +259,8 @@ let CenterGroupOrNodeExecution = class CenterGroupOrNodeExecution {
         }
         this.toCenter(this.getNodeRect(fNode), this.getFlowRect(), fNode.position);
         request.animated ? this.fComponentsStore.fCanvas.redrawWithAnimation() : this.fComponentsStore.fCanvas.redraw();
-        this.fComponentsStore.fCanvas.completeDrag();
-        setTimeout(() => {
-            this.fComponentsStore.componentDataChanged();
-        }, F_CANVAS_ANIMATION_DURATION);
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
+        setTimeout(() => this.fComponentsStore.componentDataChanged(), F_CANVAS_ANIMATION_DURATION);
     }
     toCenter(fNodeRect, fFlowRect, position) {
         this.transform.scaledPosition = PointExtensions.initialize();
@@ -126,91 +285,484 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class ClearSelectionRequest {
-}
-
-class CanvasMoveFinalizeRequest {
-    constructor(event) {
-        this.event = event;
+class FitToFlowRequest {
+    constructor(toCenter, animated) {
+        this.toCenter = toCenter;
+        this.animated = animated;
     }
 }
 
-class FDraggableDataContext {
-    constructor() {
-        this.selectedItems = [];
-        this.isSelectedChanged = false;
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
-        this.draggableItems = [];
+let FitToFlowExecution = class FitToFlowExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
     }
-    reset() {
-        this.draggableItems = [];
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    markSelectionAsChanged() {
-        this.isSelectedChanged = true;
+    handle(request) {
+        const fNodesRect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize();
+        if (fNodesRect.width === 0 || fNodesRect.height === 0) {
+            return;
+        }
+        this.fitToParent(fNodesRect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fComponentsStore.fNodes.map((x) => x.position), request.toCenter);
+        request.animated ? this.fComponentsStore.fCanvas.redrawWithAnimation() : this.fComponentsStore.fCanvas.redraw();
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
+        setTimeout(() => this.fComponentsStore.componentDataChanged(), F_CANVAS_ANIMATION_DURATION);
     }
-}
-FDraggableDataContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FDraggableDataContext.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext, decorators: [{
+    fitToParent(rect, parentRect, points, toCenter) {
+        this.transform.scaledPosition = PointExtensions.initialize();
+        this.transform.position = this.getZeroPositionWithoutScale(points);
+        const itemsContainerWidth = (rect.width / this.transform.scale) + toCenter.x;
+        const itemsContainerHeight = (rect.height / this.transform.scale) + toCenter.y;
+        if ((itemsContainerWidth > parentRect.width || itemsContainerHeight > parentRect.height) ||
+            itemsContainerWidth < parentRect.width && itemsContainerHeight < parentRect.height) {
+            this.transform.scale = Math.min(parentRect.width / itemsContainerWidth, parentRect.height / itemsContainerHeight);
+        }
+        const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
+        const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
+        this.transform.position = PointExtensions.initialize(newX + (toCenter.x / 2) * this.transform.scale, newY + (toCenter.y / 2) * this.transform.scale);
+    }
+    getZeroPositionWithoutScale(points) {
+        const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
+        const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
+        return PointExtensions.initialize(xPoint, yPoint);
+    }
+};
+FitToFlowExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FitToFlowExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+FitToFlowExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FitToFlowExecution });
+FitToFlowExecution = __decorate([
+    FExecutionRegister(FitToFlowRequest)
+], FitToFlowExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FitToFlowExecution, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
+class InputCanvasPositionRequest {
+    constructor(transform, position) {
+        this.transform = transform;
+        this.position = position;
+    }
+}
+
+let InputCanvasPositionExecution = class InputCanvasPositionExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
-        this.fDraggableDataContext.draggableItems.forEach((x) => { var _a; return (_a = x.complete) === null || _a === void 0 ? void 0 : _a.call(x); });
+        var _a;
+        if (!request.position) {
+            return;
+        }
+        const position = PointExtensions.sum(request.transform.position, request.transform.scaledPosition);
+        if (!PointExtensions.isEqual(position, request.position)) {
+            request.transform.position = request.position;
+            request.transform.scaledPosition = PointExtensions.initialize();
+            (_a = this.fComponentsStore.fCanvas) === null || _a === void 0 ? void 0 : _a.redraw();
+        }
     }
 };
-CanvasMoveFinalizeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-CanvasMoveFinalizeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution });
-CanvasMoveFinalizeExecution = __decorate([
-    FExecutionRegister(CanvasMoveFinalizeRequest)
-], CanvasMoveFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution, decorators: [{
+InputCanvasPositionExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasPositionExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+InputCanvasPositionExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasPositionExecution });
+InputCanvasPositionExecution = __decorate([
+    FExecutionRegister(InputCanvasPositionRequest)
+], InputCanvasPositionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasPositionExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class CanvasDragHandler {
+class InputCanvasScaleRequest {
+    constructor(transform, scale) {
+        this.transform = transform;
+        this.scale = scale;
+    }
+}
+
+let InputCanvasScaleExecution = class InputCanvasScaleExecution {
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.onPointerDownPosition = PointExtensions.initialize();
-    }
-    initialize() {
-        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
-    }
-    move(difference) {
-        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
-        this.fComponentsStore.fCanvas.redraw();
     }
-    complete() {
-        this.fComponentsStore.fCanvas.completeDrag();
+    handle(request) {
+        var _a;
+        if (!request.scale) {
+            return;
+        }
+        request.transform.scale = request.scale;
+        (_a = this.fComponentsStore.fCanvas) === null || _a === void 0 ? void 0 : _a.redraw();
     }
+};
+InputCanvasScaleExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasScaleExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+InputCanvasScaleExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasScaleExecution });
+InputCanvasScaleExecution = __decorate([
+    FExecutionRegister(InputCanvasScaleRequest)
+], InputCanvasScaleExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasScaleExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
+class ResetScaleRequest {
 }
 
-let CanvasMoveFinalizeValidator = class CanvasMoveFinalizeValidator {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
+let ResetScaleExecution = class ResetScaleExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
     handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof CanvasDragHandler);
+        this.transform.scale = 1;
+        this.transform.scaledPosition = PointExtensions.initialize();
     }
 };
-CanvasMoveFinalizeValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-CanvasMoveFinalizeValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator });
-CanvasMoveFinalizeValidator = __decorate([
-    FValidatorRegister(CanvasMoveFinalizeRequest)
-], CanvasMoveFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator, decorators: [{
+ResetScaleExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+ResetScaleExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleExecution });
+ResetScaleExecution = __decorate([
+    FExecutionRegister(ResetScaleRequest)
+], ResetScaleExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-const CANVAS_MOVE_FINALIZE_PROVIDERS = [
-    CanvasMoveFinalizeExecution,
+class ResetScaleAndCenterRequest {
+    constructor(animated) {
+        this.animated = animated;
+    }
+}
+
+let ResetScaleAndCenterExecution = class ResetScaleAndCenterExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+    }
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    handle(request) {
+        const fNodesRect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize();
+        if (fNodesRect.width === 0 || fNodesRect.height === 0) {
+            return;
+        }
+        this.oneToOneCentering(fNodesRect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fComponentsStore.fNodes.map((x) => x.position));
+        request.animated ? this.fComponentsStore.fCanvas.redrawWithAnimation() : this.fComponentsStore.fCanvas.redraw();
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
+        setTimeout(() => this.fComponentsStore.componentDataChanged(), F_CANVAS_ANIMATION_DURATION);
+    }
+    oneToOneCentering(rect, parentRect, points) {
+        this.transform.scaledPosition = PointExtensions.initialize();
+        this.transform.position = this.getZeroPositionWithoutScale(points);
+        const newX = (parentRect.width - rect.width / this.transform.scale) / 2 - this.transform.position.x;
+        const newY = (parentRect.height - rect.height / this.transform.scale) / 2 - this.transform.position.y;
+        this.transform.scale = 1;
+        this.transform.position = PointExtensions.initialize(newX, newY);
+    }
+    getZeroPositionWithoutScale(points) {
+        const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
+        const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
+        return PointExtensions.initialize(xPoint, yPoint);
+    }
+};
+ResetScaleAndCenterExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleAndCenterExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+ResetScaleAndCenterExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleAndCenterExecution });
+ResetScaleAndCenterExecution = __decorate([
+    FExecutionRegister(ResetScaleAndCenterRequest)
+], ResetScaleAndCenterExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleAndCenterExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+
+class UpdateScaleRequest {
+    constructor(scale, toPosition) {
+        this.scale = scale;
+        this.toPosition = toPosition;
+    }
+}
+
+let UpdateScaleExecution = class UpdateScaleExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    handle(request) {
+        if (request.scale !== this.transform.scale) {
+            const summaryPosition = PointExtensions.sum(this.transform.scaledPosition, this.transform.position);
+            const newX = request.toPosition.x - (request.toPosition.x - summaryPosition.x) * request.scale / this.transform.scale;
+            const newY = request.toPosition.y - (request.toPosition.y - summaryPosition.y) * request.scale / this.transform.scale;
+            this.transform.scale = request.scale;
+            this.transform.scaledPosition = PointExtensions.sub(PointExtensions.initialize(newX, newY), this.transform.position);
+        }
+    }
+};
+UpdateScaleExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateScaleExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+UpdateScaleExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateScaleExecution });
+UpdateScaleExecution = __decorate([
+    FExecutionRegister(UpdateScaleRequest)
+], UpdateScaleExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateScaleExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
+const F_CANVAS_FEATURES = [
+    CenterGroupOrNodeExecution,
+    FitToFlowExecution,
+    InputCanvasPositionExecution,
+    InputCanvasScaleExecution,
+    ResetScaleExecution,
+    ResetScaleAndCenterExecution,
+    UpdateScaleExecution
+];
+
+class FindClosestInputUsingSnapThresholdRequest {
+    constructor(position, canBeConnectedInputs, snapThreshold) {
+        this.position = position;
+        this.canBeConnectedInputs = canBeConnectedInputs;
+        this.snapThreshold = snapThreshold;
+    }
+}
+
+let FindClosestInputUsingSnapThresholdExecution = class FindClosestInputUsingSnapThresholdExecution {
+    handle(payload) {
+        let result;
+        let minDistance = Infinity;
+        for (const element of payload.canBeConnectedInputs) {
+            const distance = this.distanceToRectangle(payload.position, element);
+            if (distance < minDistance) {
+                minDistance = distance;
+                result = element;
+            }
+        }
+        return minDistance < payload.snapThreshold ? result : undefined;
+    }
+    distanceToRectangle(point, inputWithRect) {
+        const closestX = this.clamp(point.x, inputWithRect.fRect.x, inputWithRect.fRect.x + inputWithRect.fRect.width);
+        const closestY = this.clamp(point.y, inputWithRect.fRect.y, inputWithRect.fRect.y + inputWithRect.fRect.height);
+        const dx = point.x - closestX;
+        const dy = point.y - closestY;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+};
+FindClosestInputUsingSnapThresholdExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FindClosestInputUsingSnapThresholdExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FindClosestInputUsingSnapThresholdExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FindClosestInputUsingSnapThresholdExecution });
+FindClosestInputUsingSnapThresholdExecution = __decorate([
+    FExecutionRegister(FindClosestInputUsingSnapThresholdRequest)
+], FindClosestInputUsingSnapThresholdExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FindClosestInputUsingSnapThresholdExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class GetAllCanBeConnectedInputPositionsRequest {
+    constructor(fOutputId) {
+        this.fOutputId = fOutputId;
+    }
+}
+
+class GetConnectorWithRectRequest {
+    constructor(connector) {
+        this.connector = connector;
+    }
+}
+
+class GetElementRectInFlowRequest {
+    constructor(element) {
+        this.element = element;
+    }
+}
+
+let GetElementRectInFlowExecution = class GetElementRectInFlowExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+    }
+    get transform() {
+        return this.fComponentsStore.transform;
+    }
+    get flowHost() {
+        return this.fComponentsStore.flowHost;
+    }
+    handle(request) {
+        const systemRect = this.fMediator.send(new CreateRoundedRectFromElementRequest(request.element));
+        const position = this.transformElementPositionInFlow(systemRect);
+        const size = this.transformElementSizeInFlow(systemRect);
+        return new RoundedRect(position.x, position.y, size.width, size.height, systemRect.radius1, systemRect.radius2, systemRect.radius3, systemRect.radius4);
+    }
+    transformElementPositionInFlow(rect) {
+        return Point.fromPoint(rect).elementTransform(this.flowHost).sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
+    }
+    transformElementSizeInFlow(rect) {
+        return SizeExtensions.initialize(rect.width / this.transform.scale, rect.height / this.transform.scale);
+    }
+};
+GetElementRectInFlowExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetElementRectInFlowExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+GetElementRectInFlowExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetElementRectInFlowExecution });
+GetElementRectInFlowExecution = __decorate([
+    FExecutionRegister(GetElementRectInFlowRequest)
+], GetElementRectInFlowExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetElementRectInFlowExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+
+let GetConnectorWithRectExecution = class GetConnectorWithRectExecution {
+    constructor(fMediator) {
+        this.fMediator = fMediator;
+    }
+    handle(request) {
+        return {
+            fConnector: request.connector,
+            fRect: this.fMediator.send(new GetElementRectInFlowRequest(request.connector.hostElement))
+        };
+    }
+};
+GetConnectorWithRectExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetConnectorWithRectExecution, deps: [{ token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+GetConnectorWithRectExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetConnectorWithRectExecution });
+GetConnectorWithRectExecution = __decorate([
+    FExecutionRegister(GetConnectorWithRectRequest)
+], GetConnectorWithRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetConnectorWithRectExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2.FMediator }]; } });
+
+let GetAllCanBeConnectedInputPositionsExecution = class GetAllCanBeConnectedInputPositionsExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+    }
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    get fInputs() {
+        return this.fComponentsStore.fInputs;
+    }
+    handle(payload) {
+        return this.getCanBeConnectedInputs(this.getOutput(payload.fOutputId)).map((x) => {
+            return this.fMediator.send(new GetConnectorWithRectRequest(x));
+        });
+    }
+    getOutput(fId) {
+        return this.findOutputById(fId) || this.findOutletById(fId);
+    }
+    findOutputById(fId) {
+        return this.fComponentsStore.fOutputs.find((x) => x.id === fId);
+    }
+    findOutletById(fId) {
+        return this.fComponentsStore.fOutlets.find((x) => x.id === fId);
+    }
+    getCanBeConnectedInputs(output) {
+        return output.isSelfConnectable ?
+            this.fInputs.filter((x) => x.canBeConnected) :
+            this.filterSelfConnectable(this.fInputs.filter((x) => x.canBeConnected), output);
+    }
+    filterSelfConnectable(inputs, output) {
+        return inputs.filter((x) => { var _a, _b; return ((_a = this.getNodeOfConnector(output)) === null || _a === void 0 ? void 0 : _a.hostElement) !== ((_b = this.getNodeOfConnector(x)) === null || _b === void 0 ? void 0 : _b.hostElement); });
+    }
+    getNodeOfConnector(connector) {
+        return this.fNodes.find((x) => x.isContains(connector.hostElement));
+    }
+};
+GetAllCanBeConnectedInputPositionsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetAllCanBeConnectedInputPositionsExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+GetAllCanBeConnectedInputPositionsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetAllCanBeConnectedInputPositionsExecution });
+GetAllCanBeConnectedInputPositionsExecution = __decorate([
+    FExecutionRegister(GetAllCanBeConnectedInputPositionsRequest)
+], GetAllCanBeConnectedInputPositionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetAllCanBeConnectedInputPositionsExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+
+const F_CONNECTION_FEATURES = [
+    FindClosestInputUsingSnapThresholdExecution,
+    GetAllCanBeConnectedInputPositionsExecution,
+    GetConnectorWithRectExecution,
+];
+
+class ClearSelectionRequest {
+}
+
+class CanvasMoveFinalizeRequest {
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+class FDraggableDataContext {
+    constructor() {
+        this.selectedItems = [];
+        this.isSelectedChanged = false;
+        this.onPointerDownScale = 1;
+        this.onPointerDownPosition = new Point(0, 0);
+        this.draggableItems = [];
+    }
+    reset() {
+        this.draggableItems = [];
+        this.onPointerDownScale = 1;
+        this.onPointerDownPosition = new Point(0, 0);
+    }
+    markSelectionAsChanged() {
+        this.isSelectedChanged = true;
+    }
+}
+FDraggableDataContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FDraggableDataContext.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext, decorators: [{
+            type: Injectable
+        }] });
+
+let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        this.fDraggableDataContext.draggableItems.forEach((x) => { var _a; return (_a = x.complete) === null || _a === void 0 ? void 0 : _a.call(x); });
+    }
+};
+CanvasMoveFinalizeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+CanvasMoveFinalizeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution });
+CanvasMoveFinalizeExecution = __decorate([
+    FExecutionRegister(CanvasMoveFinalizeRequest)
+], CanvasMoveFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+
+class CanvasDragHandler {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+        this.onPointerDownPosition = PointExtensions.initialize();
+    }
+    initialize() {
+        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
+    }
+    move(difference) {
+        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
+        this.fComponentsStore.fCanvas.redraw();
+    }
+    complete() {
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
+    }
+}
+
+let CanvasMoveFinalizeValidator = class CanvasMoveFinalizeValidator {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof CanvasDragHandler);
+    }
+};
+CanvasMoveFinalizeValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+CanvasMoveFinalizeValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator });
+CanvasMoveFinalizeValidator = __decorate([
+    FValidatorRegister(CanvasMoveFinalizeRequest)
+], CanvasMoveFinalizeValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+
+const CANVAS_MOVE_FINALIZE_PROVIDERS = [
+    CanvasMoveFinalizeExecution,
     CanvasMoveFinalizeValidator,
 ];
 
@@ -375,10 +927,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Directive
         }] });
 
-function isNodeInput(element) {
-    return !!element.closest('[fNodeInput]');
-}
-
 function isGroup(element) {
     return !!element.closest('[fGroup]');
 }
@@ -527,113 +1075,26 @@ function mixinChangeVisibility(base) {
     };
 }
 
-function mixinChangeZoom(base) {
-    return class extends base {
-        setZoom(scaleValue, toPosition) {
-            if (scaleValue !== this.transform.scale) {
-                const summaryPosition = PointExtensions.sum(this.transform.scaledPosition, this.transform.position);
-                const newX = toPosition.x - (toPosition.x - summaryPosition.x) * scaleValue / this.transform.scale;
-                const newY = toPosition.y - (toPosition.y - summaryPosition.y) * scaleValue / this.transform.scale;
-                this.transform.scale = scaleValue;
-                this.transform.scaledPosition = PointExtensions.sub(PointExtensions.initialize(newX, newY), this.transform.position);
-            }
-        }
-        setScalePosition(value) {
-            this.transform.scaledPosition = value;
-        }
-        resetZoom() {
-            this.transform.scale = 1;
-            this.transform.scaledPosition = PointExtensions.initialize();
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinFitToParent(base) {
-    return class extends base {
-        fitToParent(rect, parentRect, points, toCenter) {
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.transform.position = this.getZeroPositionWithoutScale(points);
-            const itemsContainerWidth = (rect.width / this.transform.scale) + toCenter.x;
-            const itemsContainerHeight = (rect.height / this.transform.scale) + toCenter.y;
-            if ((itemsContainerWidth > parentRect.width || itemsContainerHeight > parentRect.height) ||
-                itemsContainerWidth < parentRect.width && itemsContainerHeight < parentRect.height) {
-                this.transform.scale = Math.min(parentRect.width / itemsContainerWidth, parentRect.height / itemsContainerHeight);
-            }
-            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
-            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
-            this.transform.position = PointExtensions.initialize(newX + (toCenter.x / 2) * this.transform.scale, newY + (toCenter.y / 2) * this.transform.scale);
-        }
-        getZeroPositionWithoutScale(points) {
-            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
-            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
-            return PointExtensions.initialize(xPoint, yPoint);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinOneToOneCentering(base) {
-    return class extends base {
-        oneToOneCentering(rect, parentRect, points) {
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.transform.position = this.getZeroPositionWithoutScale(points);
-            const itemsContainerWidth = rect.width / this.transform.scale;
-            const itemsContainerHeight = rect.height / this.transform.scale;
-            this.transform.scale = 1;
-            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
-            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
-            this.transform.position = PointExtensions.initialize(newX, newY);
-        }
-        getZeroPositionWithoutScale(points) {
-            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
-            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
-            return PointExtensions.initialize(xPoint, yPoint);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinChangePosition(base) {
-    return class extends base {
-        getPosition() {
-            return this.transform.position;
-        }
-        setPosition(position) {
-            this.transform.position = PointExtensions.copy(position);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-const F_NODE = new InjectionToken('F_NODE');
-const MIXIN_BASE$2 = mixinChangeSelection(class {
-    constructor(hostElement) {
-        this.hostElement = hostElement;
-    }
-});
-class FNodeBase extends MIXIN_BASE$2 {
-    constructor() {
-        super(...arguments);
-        this.stateChanges = new Subject();
-        this._position = PointExtensions.initialize();
-        this.fCanBeResizedByChild = true;
-    }
-    isContains(element) {
-        return this.hostElement.contains(element);
-    }
-    redraw() {
-        if (this.size) {
-            this.setStyle('width', '' + this.size.width + 'px');
-            this.setStyle('height', '' + this.size.height + 'px');
+const F_NODE = new InjectionToken('F_NODE');
+const MIXIN_BASE$1 = mixinChangeSelection(class {
+    constructor(hostElement) {
+        this.hostElement = hostElement;
+    }
+});
+class FNodeBase extends MIXIN_BASE$1 {
+    constructor() {
+        super(...arguments);
+        this.stateChanges = new Subject();
+        this._position = PointExtensions.initialize();
+        this.fCanBeResizedByChild = true;
+    }
+    isContains(element) {
+        return this.hostElement.contains(element);
+    }
+    redraw() {
+        if (this.size) {
+            this.setStyle('width', '' + this.size.width + 'px');
+            this.setStyle('height', '' + this.size.height + 'px');
         }
         this.setStyle('transform', `translate(${this.position.x}px,${this.position.y}px)`);
     }
@@ -660,7 +1121,7 @@ class FResizeObserver extends Observable {
     }
 }
 
-let uniqueId$c = 0;
+let uniqueId$b = 0;
 class FGroupDirective extends FNodeBase {
     constructor(elementReference, renderer, fComponentsStore, fMediator, fBrowser) {
         super(elementReference.nativeElement);
@@ -669,7 +1130,7 @@ class FGroupDirective extends FNodeBase {
         this.fMediator = fMediator;
         this.fBrowser = fBrowser;
         this.subscriptions$ = new Subscription();
-        this.fId = `f-group-${uniqueId$c++}`;
+        this.fId = `f-group-${uniqueId$b++}`;
         this.fParentId = null;
         this.positionChange = new EventEmitter();
         this.sizeChange = new EventEmitter();
@@ -793,7 +1254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-let uniqueId$b = 0;
+let uniqueId$a = 0;
 class FNodeDirective extends FNodeBase {
     constructor(elementReference, renderer, fComponentsStore, fMediator, fBrowser) {
         super(elementReference.nativeElement);
@@ -802,7 +1263,7 @@ class FNodeDirective extends FNodeBase {
         this.fMediator = fMediator;
         this.fBrowser = fBrowser;
         this.subscriptions$ = new Subscription();
-        this.fId = `f-node-${uniqueId$b++}`;
+        this.fId = `f-node-${uniqueId$a++}`;
         this.fParentId = null;
         this.positionChange = new EventEmitter();
         this.sizeChange = new EventEmitter();
@@ -934,14 +1395,14 @@ const F_NODE_PROVIDERS = [
     FResizeHandleDirective,
 ];
 
-let uniqueId$a = 0;
+let uniqueId$9 = 0;
 class FNodeInputDirective extends FNodeInputBase {
     constructor(elementReference, fNode, fComponentsStore) {
         super();
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-input-${uniqueId$a++}`;
+        this.id = `f-node-input-${uniqueId$9++}`;
         this.multiple = true;
         this.isDisabled = false;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1037,14 +1498,14 @@ function isNodeOutlet(element) {
     return !!element.closest('[fNodeOutlet]');
 }
 
-let uniqueId$9 = 0;
+let uniqueId$8 = 0;
 class FNodeOutletDirective extends FNodeOutletBase {
     constructor(elementReference, fNode, fComponentsStore) {
         super();
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-outlet-${uniqueId$9++}`;
+        this.id = `f-node-outlet-${uniqueId$8++}`;
         this.isDisabled = false;
         this.fConnectableSide = EFConnectableSide.AUTO;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1120,14 +1581,14 @@ function isNodeOutput(element) {
     return !!element.closest('[fNodeOutput]');
 }
 
-let uniqueId$8 = 0;
+let uniqueId$7 = 0;
 class FNodeOutputDirective extends FNodeOutputBase {
     constructor(elementReference, fNode, fComponentsStore) {
         super();
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-output-${uniqueId$8++}`;
+        this.id = `f-node-output-${uniqueId$7++}`;
         this.multiple = false;
         this.isDisabled = false;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1218,79 +1679,6 @@ class CreateConnectionFinalizeRequest {
     }
 }
 
-class GetInputUnderPointerRequest {
-    constructor(event, dragHandler) {
-        this.event = event;
-        this.dragHandler = dragHandler;
-    }
-}
-
-let GetInputUnderPointerExecution = class GetInputUnderPointerExecution {
-    constructor(fComponentsStore, fBrowser) {
-        this.fComponentsStore = fComponentsStore;
-        this.fBrowser = fBrowser;
-    }
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
-    }
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
-    }
-    handle(payload) {
-        const output = (this.getOutput(payload.dragHandler) || this.getOutlet(payload.dragHandler));
-        const inputsUnderPointer = this.getInputsUnderPointer(payload.event.getPosition());
-        const connectors = output.isSelfConnectable ?
-            inputsUnderPointer :
-            this.filterSelfConnectable(inputsUnderPointer, output);
-        return connectors.length > 0 ? connectors[0] : undefined;
-    }
-    getOutput(dragHandler) {
-        return this.fComponentsStore.fOutputs.find((x) => x.id === dragHandler.connection.fOutputId);
-    }
-    getOutlet(dragHandler) {
-        return this.fComponentsStore.fOutlets.find((x) => x.id === dragHandler.connection.fOutputId);
-    }
-    getInputsUnderPointer(position) {
-        const result = this.getInputsInPosition(position);
-        const input = this.getFirstConnectableInputOfNodeInPosition(position);
-        if (input) {
-            result.push(input);
-        }
-        return result;
-    }
-    getInputsInPosition(position) {
-        return this.getElementsFromPoint(position).map((element) => this.fInputs.find(x => x.isContains(element) && x.canBeConnected)).filter((x) => !!x);
-    }
-    getElementsFromPoint(position) {
-        return this.fBrowser.document.elementsFromPoint(position.x, position.y);
-    }
-    getFirstConnectableInputOfNodeInPosition(position) {
-        return this.getNodesInPosition(position).map((x) => {
-            return this.fInputs.find((i) => x.isContains(i.hostElement) && i.canBeConnected);
-        }).find((x) => !!x);
-    }
-    getNodesInPosition(position) {
-        return this.getElementsFromPoint(position).map((element) => {
-            return this.fNodes.find((x) => x.isContains(element) && x.fConnectOnNode);
-        }).filter((x) => !!x);
-    }
-    filterSelfConnectable(inputs, connector) {
-        return inputs.filter((x) => {
-            const targetNode = this.fNodes.find((k) => k.isContains(x.hostElement));
-            const sourceNode = this.fNodes.find((k) => k.isContains(connector.hostElement));
-            return (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.hostElement) !== (targetNode === null || targetNode === void 0 ? void 0 : targetNode.hostElement);
-        });
-    }
-};
-GetInputUnderPointerExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerExecution, deps: [{ token: FComponentsStore }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
-GetInputUnderPointerExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerExecution });
-GetInputUnderPointerExecution = __decorate([
-    FExecutionRegister(GetInputUnderPointerRequest)
-], GetInputUnderPointerExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i1.BrowserService }]; } });
-
 function createErrorClass(impl) {
     const _super = (instance) => {
         Error.call(instance);
@@ -1323,38 +1711,6 @@ function RequiredOutput() {
     return new ConflictError(`The fNode must contain at least one fOutput if there is an fOutlet`);
 }
 
-let GetInputUnderPointerValidator = class GetInputUnderPointerValidator {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(request) {
-        let output = this.getOutput(request.dragHandler) || this.getOutlet(request.dragHandler);
-        if (!output) {
-            throw OutputNotFound(request.dragHandler.connection.fOutputId);
-        }
-        return true;
-    }
-    getOutput(dragHandler) {
-        return this.fComponentsStore.fOutputs.find((x) => x.id === dragHandler.connection.fOutputId);
-    }
-    getOutlet(dragHandler) {
-        return this.fComponentsStore.fOutlets.find((x) => x.id === dragHandler.connection.fOutputId);
-    }
-};
-GetInputUnderPointerValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-GetInputUnderPointerValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerValidator });
-GetInputUnderPointerValidator = __decorate([
-    FValidatorRegister(GetInputUnderPointerRequest)
-], GetInputUnderPointerValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
-
-const GET_INPUT_UNDER_POINTER_PROVIDERS = [
-    GetInputUnderPointerExecution,
-    GetInputUnderPointerValidator,
-];
-
 class GetCanBeConnectedOutputByOutletRequest {
     constructor(outlet) {
         this.outlet = outlet;
@@ -1416,11 +1772,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-const GET_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS = [
-    GetCanBeConnectedOutputByOutletExecution,
-    GetCanBeConnectedOutputByOutletValidator,
-];
-
 class FCreateConnectionEvent {
     constructor(fOutputId, fInputId, fDropPosition) {
         this.fOutputId = fOutputId;
@@ -1429,6 +1780,115 @@ class FCreateConnectionEvent {
     }
 }
 
+class GetInputUnderPointerRequest {
+    constructor(event, dragHandler) {
+        this.event = event;
+        this.dragHandler = dragHandler;
+    }
+}
+
+let GetInputUnderPointerExecution = class GetInputUnderPointerExecution {
+    constructor(fComponentsStore, fDraggableDataContext, fBrowser) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fBrowser = fBrowser;
+    }
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    get fInputs() {
+        return this.fComponentsStore.fInputs;
+    }
+    handle(payload) {
+        const output = (this.getOutput(payload.dragHandler) || this.getOutlet(payload.dragHandler));
+        const inputsUnderPointer = this.getInputsUnderPointer(payload.event.getPosition(), payload.dragHandler);
+        const connectors = output.isSelfConnectable ?
+            inputsUnderPointer :
+            this.filterSelfConnectable(inputsUnderPointer, output);
+        return connectors.length > 0 ? connectors[0] : undefined;
+    }
+    getOutput(dragHandler) {
+        return this.fComponentsStore.fOutputs.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    }
+    getOutlet(dragHandler) {
+        return this.fComponentsStore.fOutlets.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    }
+    getInputsUnderPointer(position, dragHandler) {
+        const result = this.getInputsInPosition(position);
+        const closestInput = dragHandler.getClosetInput(this.getDifference(position));
+        if (closestInput) {
+            result.push(closestInput.fConnector);
+        }
+        const input = this.getFirstConnectableInputOfNodeInPosition(position);
+        if (input) {
+            result.push(input);
+        }
+        return result;
+    }
+    getDifference(position) {
+        return Point.fromPoint(position).elementTransform(this.fComponentsStore.flowHost)
+            .div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
+    }
+    getInputsInPosition(position) {
+        return this.getElementsFromPoint(position).map((element) => this.fInputs.find(x => x.isContains(element) && x.canBeConnected)).filter((x) => !!x);
+    }
+    getElementsFromPoint(position) {
+        return this.fBrowser.document.elementsFromPoint(position.x, position.y);
+    }
+    getFirstConnectableInputOfNodeInPosition(position) {
+        return this.getNodesInPosition(position).map((x) => {
+            return this.fInputs.find((i) => x.isContains(i.hostElement) && i.canBeConnected);
+        }).find((x) => !!x);
+    }
+    getNodesInPosition(position) {
+        return this.getElementsFromPoint(position).map((element) => {
+            return this.fNodes.find((x) => x.isContains(element) && x.fConnectOnNode);
+        }).filter((x) => !!x);
+    }
+    filterSelfConnectable(inputs, connector) {
+        return inputs.filter((x) => {
+            const targetNode = this.fNodes.find((k) => k.isContains(x.hostElement));
+            const sourceNode = this.fNodes.find((k) => k.isContains(connector.hostElement));
+            return (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.hostElement) !== (targetNode === null || targetNode === void 0 ? void 0 : targetNode.hostElement);
+        });
+    }
+};
+GetInputUnderPointerExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+GetInputUnderPointerExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerExecution });
+GetInputUnderPointerExecution = __decorate([
+    FExecutionRegister(GetInputUnderPointerRequest)
+], GetInputUnderPointerExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i1.BrowserService }]; } });
+
+let GetInputUnderPointerValidator = class GetInputUnderPointerValidator {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        let output = this.getOutput(request.dragHandler) || this.getOutlet(request.dragHandler);
+        if (!output) {
+            throw OutputNotFound(request.dragHandler.fConnection.fOutputId);
+        }
+        return true;
+    }
+    getOutput(dragHandler) {
+        return this.fComponentsStore.fOutputs.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    }
+    getOutlet(dragHandler) {
+        return this.fComponentsStore.fOutlets.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    }
+};
+GetInputUnderPointerValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+GetInputUnderPointerValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerValidator });
+GetInputUnderPointerValidator = __decorate([
+    FValidatorRegister(GetInputUnderPointerRequest)
+], GetInputUnderPointerValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
 let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution {
     constructor(fComponentsStore, fDraggableDataContext, fMediator) {
         this.fComponentsStore = fComponentsStore;
@@ -1444,15 +1904,15 @@ let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution
     }
     getTargetOutput(output) {
         if (!output) {
-            throw OutputNotFound(this.dragHandler.connection.fOutputId);
+            throw OutputNotFound(this.dragHandler.fConnection.fOutputId);
         }
         return isNodeOutlet(output.hostElement) ? this.fMediator.send(new GetCanBeConnectedOutputByOutletRequest(output)) : output;
     }
     getOutput() {
-        return this.fComponentsStore.fOutputs.find((x) => x.id === this.dragHandler.connection.fOutputId);
+        return this.fComponentsStore.fOutputs.find((x) => x.id === this.dragHandler.fConnection.fOutputId);
     }
     getOutlet() {
-        return this.fComponentsStore.fOutlets.find((x) => x.id === this.dragHandler.connection.fOutputId);
+        return this.fComponentsStore.fOutlets.find((x) => x.id === this.dragHandler.fConnection.fOutputId);
     }
     emitEvent(event) {
         var _a, _b;
@@ -1472,32 +1932,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }]; } });
 
 class CreateConnectionDragHandler {
-    constructor(fMediator, connection, onPointerDownPosition) {
+    constructor(fMediator, fComponentsStore, fOutput, onPointerDownPosition) {
         this.fMediator = fMediator;
-        this.connection = connection;
+        this.fComponentsStore = fComponentsStore;
+        this.fOutput = fOutput;
         this.onPointerDownPosition = onPointerDownPosition;
-        this.onPointerDownFromConnectorRect = new RoundedRect();
-        this.onPointerDownToConnectorRect = new RoundedRect();
-        this.outputSide = EFConnectableSide.BOTTOM;
+        this.toConnectorRect = new RoundedRect();
+        this.canBeConnectedInputs = [];
+    }
+    get fConnection() {
+        return this.fComponentsStore.fTempConnection;
+    }
+    get fSnapConnection() {
+        return this.fComponentsStore.fSnapConnection;
     }
     initialize() {
-        const outputRect = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
-        this.outputSide = outputRect.fConnectableSide;
-        this.onPointerDownFromConnectorRect = RoundedRect.fromRoundedRect(outputRect.rect);
-        console.log('onPointerDown1', this.onPointerDownFromConnectorRect.x, this.onPointerDownFromConnectorRect.y);
-        this.onPointerDownToConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this.onPointerDownPosition.x, this.onPointerDownPosition.y, 0, 0));
-        console.log('onPointerDown2', this.onPointerDownPosition);
-        this.connection.show();
+        if (this.fSnapConnection) {
+            this.fSnapConnection.fOutputId = this.fOutput.id;
+            this.fSnapConnection.initialize();
+            this.canBeConnectedInputs = this.fMediator.send(new GetAllCanBeConnectedInputPositionsRequest(this.fOutput.id));
+        }
+        this.fConnection.fOutputId = this.fOutput.id;
+        this.fConnection.initialize();
+        this.fOutputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.fOutput));
+        this.toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this.onPointerDownPosition.x, this.onPointerDownPosition.y));
+        this.fConnection.show();
         this.move(PointExtensions.initialize());
     }
     move(difference) {
-        const line = this.fMediator.send(new GetConnectionLineRequest(this.onPointerDownFromConnectorRect, this.onPointerDownToConnectorRect.addPoint(difference), this.connection.fBehavior, this.outputSide, EFConnectableSide.TOP));
-        this.connection.setLine(line.point1, this.outputSide, line.point2, EFConnectableSide.TOP);
-        this.connection.redraw();
+        this.drawTempConnection(this.toConnectorRect.addPoint(difference));
+        this.drawSnapConnection(this.getClosetInput(difference));
+    }
+    drawTempConnection(fInputRect) {
+        const line = this.fMediator.send(new GetConnectionLineRequest(this.fOutputWithRect.fRect, fInputRect, this.fConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, EFConnectableSide.TOP));
+        this.fConnection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, EFConnectableSide.TOP);
+        this.fConnection.redraw();
+    }
+    drawSnapConnection(fInputWithRect) {
+        var _a;
+        if (fInputWithRect) {
+            const line = this.fMediator.send(new GetConnectionLineRequest(this.fOutputWithRect.fRect, fInputWithRect.fRect, this.fSnapConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, fInputWithRect.fConnector.fConnectableSide));
+            this.fSnapConnection.show();
+            this.fSnapConnection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, fInputWithRect.fConnector.fConnectableSide);
+            this.fSnapConnection.redraw();
+        }
+        else {
+            (_a = this.fSnapConnection) === null || _a === void 0 ? void 0 : _a.hide();
+        }
+    }
+    getClosetInput(difference) {
+        return this.fMediator.send(new FindClosestInputUsingSnapThresholdRequest(Point.fromPoint(this.toConnectorRect).add(difference), this.canBeConnectedInputs, this.fSnapConnection.fSnapThreshold));
     }
     complete() {
-        this.connection.redraw();
-        this.connection.hide();
+        var _a;
+        this.fConnection.redraw();
+        this.fConnection.hide();
+        (_a = this.fSnapConnection) === null || _a === void 0 ? void 0 : _a.hide();
     }
 }
 
@@ -1518,11 +2008,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
 
-const CREATE_CONNECTION_FINALIZE_PROVIDERS = [
-    CreateConnectionFinalizeExecution,
-    CreateConnectionFinalizeValidator,
-];
-
 class CreateConnectionDragHandlerRequest {
     constructor(onPointerDownPosition, connector) {
         this.onPointerDownPosition = onPointerDownPosition;
@@ -1543,15 +2028,14 @@ let CreateConnectionDragHandlerExecution = class CreateConnectionDragHandlerExec
         return this.fComponentsStore.fCanvas.transform;
     }
     handle(request) {
-        this.fComponentsStore.fTempConnection.fOutputId = request.connector.id;
-        this.fComponentsStore.fTempConnection.initialize();
         this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
-        const positionRelativeToFlowComponent = Point.fromPoint(request.onPointerDownPosition).elementTransform(this.flowHost).div(this.transform.scale);
+        const positionRelativeToFlowComponent = Point.fromPoint(request.onPointerDownPosition)
+            .elementTransform(this.flowHost).div(this.transform.scale);
         this.fDraggableDataContext.onPointerDownPosition = positionRelativeToFlowComponent;
         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(this.fMediator, this.fComponentsStore.fTempConnection, positionRelativeToCanvasComponent)
+            new CreateConnectionDragHandler(this.fMediator, this.fComponentsStore, request.connector, positionRelativeToCanvasComponent)
         ];
     }
 };
@@ -1564,10 +2048,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }]; } });
 
-const CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS = [
-    CreateConnectionDragHandlerExecution,
-];
-
 class CreateConnectionFromOutletPreparationRequest {
     constructor(event) {
         this.event = event;
@@ -1616,10 +2096,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-const CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS = [
-    CreateConnectionFromOutletPreparationExecution,
-];
-
 class CreateConnectionFromOutputPreparationRequest {
     constructor(event) {
         this.event = event;
@@ -1682,11 +2158,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-const CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS = [
-    CreateConnectionFromOutputPreparationExecution,
-    CreateConnectionFromOutputPreparationValidator,
-];
-
 class CreateConnectionPreparationRequest {
     constructor(event) {
         this.event = event;
@@ -1749,14 +2220,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
 
-const CREATE_CONNECTION_PREPARATION_PROVIDERS = [
-    ...CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS,
-    ...CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS,
-    ...CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS,
-    CreateConnectionPreparationExecution,
-    CreateConnectionPreparationValidator,
-];
-
 class ReassignConnectionFinalizeRequest {
     constructor(event) {
         this.event = event;
@@ -1764,8 +2227,8 @@ class ReassignConnectionFinalizeRequest {
 }
 
 class FReassignConnectionEvent {
-    constructor(connectionId, fOutputId, oldFInputId, newFInputId) {
-        this.connectionId = connectionId;
+    constructor(fConnectionId, fOutputId, oldFInputId, newFInputId) {
+        this.fConnectionId = fConnectionId;
         this.fOutputId = fOutputId;
         this.oldFInputId = oldFInputId;
         this.newFInputId = newFInputId;
@@ -1793,13 +2256,13 @@ let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecut
         if (!input || !this.isReassignToDifferentInput(input)) {
             return;
         }
-        this.fDraggable.fReassignConnection.emit(new FReassignConnectionEvent(this.dragHandler.connection.fId, this.dragHandler.connection.fOutputId, this.dragHandler.connection.fInputId, input.id));
+        this.fDraggable.fReassignConnection.emit(new FReassignConnectionEvent(this.dragHandler.fConnection.fId, this.dragHandler.fConnection.fOutputId, this.dragHandler.fConnection.fInputId, input.id));
     }
     getInputUnderPointer(event) {
         return this.fMediator.send(new GetInputUnderPointerRequest(event, this.dragHandler));
     }
     isReassignToDifferentInput(inputsUnderPointer) {
-        return this.dragHandler.connection.fInputId !== inputsUnderPointer.id;
+        return this.dragHandler.fConnection.fInputId !== inputsUnderPointer.id;
     }
 };
 ReassignConnectionFinalizeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ReassignConnectionFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1812,32 +2275,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }]; } });
 
 class ReassignConnectionDragHandler {
-    constructor(fMediator, connection) {
+    constructor(fMediator, fComponentsStore, fConnection) {
         this.fMediator = fMediator;
-        this.connection = connection;
-        this.onPointerDownFromConnectorRect = new RoundedRect();
-        this.onPointerDownToConnectorRect = new RoundedRect();
-        this.outputSide = EFConnectableSide.BOTTOM;
-        this.inputSide = EFConnectableSide.TOP;
+        this.fComponentsStore = fComponentsStore;
+        this.fConnection = fConnection;
+        this.toConnectorRect = new RoundedRect();
+        this.canBeConnectedInputs = [];
+    }
+    get fSnapConnection() {
+        return this.fComponentsStore.fSnapConnection;
     }
     initialize() {
-        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
-        this.inputSide = this.fMediator.send(new GetInputRectInFlowRequest(this.connection.fInputId)).fConnectableSide;
-        this.outputSide = fromConnector.fConnectableSide;
-        this.onPointerDownFromConnectorRect = RoundedRect.fromRoundedRect(fromConnector.rect);
-        this.onPointerDownToConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this.connection.line.point2.x, this.connection.line.point2.y, 0, 0));
+        if (this.fSnapConnection) {
+            this.fSnapConnection.fOutputId = this.fConnection.fOutputId;
+            this.fSnapConnection.initialize();
+            this.canBeConnectedInputs = this.fMediator.send(new GetAllCanBeConnectedInputPositionsRequest(this.fConnection.fOutputId));
+        }
+        this.fOutputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getOutput()));
+        this.fInputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getInput()));
+        this.toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this.fConnection.line.point2.x, this.fConnection.line.point2.y));
+    }
+    getOutput() {
+        return this.fComponentsStore.fOutputs.find((x) => x.id === this.fConnection.fOutputId);
+    }
+    getInput() {
+        return this.fComponentsStore.fInputs.find((x) => x.id === this.fConnection.fInputId);
     }
     move(difference) {
-        const line = this.fMediator.send(new GetConnectionLineRequest(this.onPointerDownFromConnectorRect, this.onPointerDownToConnectorRect.addPoint(difference), this.connection.fBehavior, this.outputSide, this.inputSide));
-        this.connection.setLine(line.point1, this.outputSide, line.point2, this.inputSide);
-        this.connection.redraw();
+        this.drawConnection({ fRect: this.toConnectorRect.addPoint(difference), fConnector: this.fInputWithRect.fConnector });
+        this.drawSnapConnection(this.getClosetInput(difference));
+    }
+    drawConnection(fInputWithRect) {
+        const line = this.fMediator.send(new GetConnectionLineRequest(this.fOutputWithRect.fRect, fInputWithRect.fRect, this.fConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, fInputWithRect.fConnector.fConnectableSide));
+        this.fConnection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, fInputWithRect.fConnector.fConnectableSide);
+        this.fConnection.redraw();
+    }
+    drawSnapConnection(fInputWithRect) {
+        var _a;
+        if (fInputWithRect) {
+            const line = this.fMediator.send(new GetConnectionLineRequest(this.fOutputWithRect.fRect, fInputWithRect.fRect, this.fSnapConnection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, fInputWithRect.fConnector.fConnectableSide));
+            this.fSnapConnection.show();
+            this.fSnapConnection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, fInputWithRect.fConnector.fConnectableSide);
+            this.fSnapConnection.redraw();
+        }
+        else {
+            (_a = this.fSnapConnection) === null || _a === void 0 ? void 0 : _a.hide();
+        }
+    }
+    getClosetInput(difference) {
+        return this.fMediator.send(new FindClosestInputUsingSnapThresholdRequest(Point.fromPoint(this.toConnectorRect).add(difference), this.canBeConnectedInputs, this.fSnapConnection.fSnapThreshold));
     }
     complete() {
-        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
-        const toConnector = this.fMediator.send(new GetInputRectInFlowRequest(this.connection.fInputId));
-        const line = this.fMediator.send(new GetConnectionLineRequest(fromConnector.rect, toConnector.rect, this.connection.fBehavior, fromConnector.fConnectableSide, toConnector.fConnectableSide));
-        this.connection.setLine(line.point1, fromConnector.fConnectableSide, line.point2, toConnector.fConnectableSide);
-        this.connection.redraw();
+        var _a;
+        this.drawConnection(this.fInputWithRect);
+        (_a = this.fSnapConnection) === null || _a === void 0 ? void 0 : _a.hide();
     }
 }
 
@@ -1858,11 +2349,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
 
-const REASSIGN_CONNECTION_FINALIZE_PROVIDERS = [
-    ReassignConnectionFinalizeExecution,
-    ReassignConnectionFinalizeValidator,
-];
-
 class ReassignConnectionPreparationRequest {
     constructor(event) {
         this.event = event;
@@ -2498,12 +2984,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     args: [F_CONNECTION_BUILDERS]
                 }] }]; } });
 
-const MIXIN_BASE$1 = mixinChangeSelection(mixinChangeVisibility(class {
+const MIXIN_BASE = mixinChangeSelection(mixinChangeVisibility(class {
     constructor(hostElement) {
         this.hostElement = hostElement;
     }
 }));
-class FConnectionBase extends MIXIN_BASE$1 {
+class FConnectionBase extends MIXIN_BASE {
     constructor(elementReference, cFactory) {
         super(elementReference.nativeElement);
         this.cFactory = cFactory;
@@ -2585,12 +3071,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-let uniqueId$7 = 0;
+let uniqueId$6 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fId = `f-connection-for-create-${uniqueId$7++}`;
+        this.fId = `f-connection-for-create-${uniqueId$6++}`;
         this.fText = '';
         this._fStartColor = 'black';
         this._fEndColor = 'black';
@@ -2643,11 +3129,6 @@ class FConnectionForCreateComponent extends FConnectionBase {
     get fType() {
         return this._type;
     }
-    get fMarkers() {
-        return this.fComponentsStore.fMarkers.filter((x) => {
-            return this.hostElement.contains(x.hostElement);
-        });
-    }
     get boundingElement() {
         return this.fPath.hostElement;
     }
@@ -2713,12 +3194,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
-let uniqueId$6 = 0;
+let uniqueId$5 = 0;
 class FConnectionComponent extends FConnectionBase {
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fId = `f-connection-${uniqueId$6++}`;
+        this.fId = `f-connection-${uniqueId$5++}`;
         this._fText = '';
         this._fStartColor = 'black';
         this._fEndColor = 'black';
@@ -2792,11 +3273,6 @@ class FConnectionComponent extends FConnectionBase {
     get fType() {
         return this._type;
     }
-    get fMarkers() {
-        return this.fComponentsStore.fMarkers.filter((x) => {
-            return this.hostElement.contains(x.hostElement);
-        });
-    }
     get boundingElement() {
         return this.fPath.hostElement;
     }
@@ -2947,15 +3423,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-let uniqueId$5 = 0;
+let uniqueId$4 = 0;
 class FSnapConnectionComponent extends FConnectionBase {
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fId = `f-snap-connection-${uniqueId$5++}`;
+        this.fId = `f-snap-connection-${uniqueId$4++}`;
         this.fText = '';
         this._fStartColor = 'black';
         this._fEndColor = 'black';
+        this.fSnapThreshold = 20;
         this._fRadius = 8;
         this._fOffset = 32;
         this._behavior = EFConnectionBehavior.FIXED;
@@ -3005,26 +3482,21 @@ class FSnapConnectionComponent extends FConnectionBase {
     get fType() {
         return this._type;
     }
-    get fMarkers() {
-        return this.fComponentsStore.fMarkers.filter((x) => {
-            return this.hostElement.contains(x.hostElement);
-        });
-    }
     get boundingElement() {
         return this.fPath.hostElement;
     }
     ngOnInit() {
-        this.fComponentsStore.fTempConnection = this;
+        this.fComponentsStore.fSnapConnection = this;
     }
     ngAfterViewInit() {
         this.hide();
     }
     ngOnDestroy() {
-        this.fComponentsStore.fTempConnection = undefined;
+        this.fComponentsStore.fSnapConnection = undefined;
     }
 }
 FSnapConnectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSnapConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
-FSnapConnectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType" }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FSnapConnectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fSnapThreshold: "fSnapThreshold", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType" }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], components: [{ type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }, { type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { type: FConnectionTextComponent, selector: "text[f-connection-text]" }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSnapConnectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -3041,6 +3513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], fEndColor: [{
                 type: Input
+            }], fSnapThreshold: [{
+                type: Input
             }], fRadius: [{
                 type: Input
             }], fOffset: [{
@@ -3085,7 +3559,8 @@ const F_CONNECTION_PROVIDERS = [
     FConnectionComponent,
     FConnectionCenterDirective,
     FConnectionForCreateComponent,
-    FMarkerDirective
+    FMarkerDirective,
+    FSnapConnectionComponent
 ];
 
 let ReassignConnectionPreparationExecution = class ReassignConnectionPreparationExecution {
@@ -3114,7 +3589,7 @@ let ReassignConnectionPreparationExecution = class ReassignConnectionPreparation
         this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
             .elementTransform(this.flowHost).div(this.transform.scale);
         this.fDraggableDataContext.draggableItems = [
-            new ReassignConnectionDragHandler(this.fMediator, connectionToReassign)
+            new ReassignConnectionDragHandler(this.fMediator, this.fComponentsStore, connectionToReassign)
         ];
     }
     getDragHandleElement(position) {
@@ -3172,20 +3647,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i1.BrowserService }]; } });
 
-const REASSIGN_CONNECTION_PREPARATION_PROVIDERS = [
+const CONNECTIONS_PROVIDERS = [
+    GetInputUnderPointerExecution,
+    GetInputUnderPointerValidator,
+    CreateConnectionFinalizeExecution,
+    CreateConnectionFinalizeValidator,
+    CreateConnectionDragHandlerExecution,
+    CreateConnectionFromOutletPreparationExecution,
+    GetCanBeConnectedOutputByOutletExecution,
+    GetCanBeConnectedOutputByOutletValidator,
+    CreateConnectionFromOutputPreparationExecution,
+    CreateConnectionFromOutputPreparationValidator,
+    CreateConnectionPreparationExecution,
+    CreateConnectionPreparationValidator,
+    ReassignConnectionFinalizeExecution,
+    ReassignConnectionFinalizeValidator,
     ReassignConnectionPreparationExecution,
     ReassignConnectionPreparationValidator,
 ];
 
-const CONNECTIONS_PROVIDERS = [
-    ...CREATE_CONNECTION_FINALIZE_PROVIDERS,
-    ...CREATE_CONNECTION_PREPARATION_PROVIDERS,
-    ...GET_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS,
-    ...REASSIGN_CONNECTION_FINALIZE_PROVIDERS,
-    ...REASSIGN_CONNECTION_PREPARATION_PROVIDERS,
-    ...GET_INPUT_UNDER_POINTER_PROVIDERS,
-];
-
 class GetNodePaddingRequest {
     constructor(fNode, rect) {
         this.fNode = fNode;
@@ -3374,21 +3854,20 @@ class PutInputConnectionHandlersToArrayRequest {
 }
 
 class ConnectionBaseDragHandler {
-    constructor(fMediator, connection) {
+    constructor(fMediator, fComponentsStore, connection) {
         this.fMediator = fMediator;
+        this.fComponentsStore = fComponentsStore;
         this.connection = connection;
-        this.fromConnectorRect = new RoundedRect();
-        this.fromConnectorSide = EFConnectableSide.BOTTOM;
-        this.toConnectorRect = new RoundedRect();
-        this.toConnectorSide = EFConnectableSide.TOP;
     }
     initialize() {
-        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
-        this.fromConnectorRect = RoundedRect.fromRoundedRect(fromConnector.rect);
-        this.fromConnectorSide = fromConnector.fConnectableSide;
-        const toConnector = this.fMediator.send(new GetInputRectInFlowRequest(this.connection.fInputId));
-        this.toConnectorRect = RoundedRect.fromRoundedRect(toConnector.rect);
-        this.toConnectorSide = toConnector.fConnectableSide;
+        this.fOutputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getOutput()));
+        this.fInputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getInput()));
+    }
+    getOutput() {
+        return this.fComponentsStore.fOutputs.find((x) => x.id === this.connection.fOutputId);
+    }
+    getInput() {
+        return this.fComponentsStore.fInputs.find((x) => x.id === this.connection.fInputId);
     }
     getDifference(difference, restrictions) {
         return {
@@ -3397,19 +3876,19 @@ class ConnectionBaseDragHandler {
         };
     }
     redrawConnection(line) {
-        this.connection.setLine(line.point1, this.fromConnectorSide, line.point2, this.toConnectorSide);
+        this.connection.setLine(line.point1, this.fOutputWithRect.fConnector.fConnectableSide, line.point2, this.fInputWithRect.fConnector.fConnectableSide);
         this.connection.redraw();
     }
 }
-ConnectionBaseDragHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConnectionBaseDragHandler, deps: [{ token: i2.FMediator }, { token: FConnectionBase }], target: i0.ɵɵFactoryTarget.Directive });
+ConnectionBaseDragHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConnectionBaseDragHandler, deps: [{ token: i2.FMediator }, { token: FComponentsStore }, { token: FConnectionBase }], target: i0.ɵɵFactoryTarget.Directive });
 ConnectionBaseDragHandler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ConnectionBaseDragHandler, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConnectionBaseDragHandler, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i2.FMediator }, { type: FConnectionBase }]; } });
+        }], ctorParameters: function () { return [{ type: i2.FMediator }, { type: FComponentsStore }, { type: FConnectionBase }]; } });
 
 class ConnectionDragHandler extends ConnectionBaseDragHandler {
-    constructor(fMediator, connection) {
-        super(fMediator, connection);
+    constructor(fMediator, fComponentsStore, connection) {
+        super(fMediator, fComponentsStore, connection);
     }
     setOutputRestrictions(min, max) {
         this.sourceRestrictions = { min, max };
@@ -3421,13 +3900,13 @@ class ConnectionDragHandler extends ConnectionBaseDragHandler {
         this.redrawConnection(this.getNewLineValue(difference));
     }
     getNewLineValue(difference) {
-        return this.fMediator.send(new GetConnectionLineRequest(this.fromConnectorRect.addPoint(this.getDifference(Object.assign({}, difference), this.sourceRestrictions)), this.toConnectorRect.addPoint(this.getDifference(Object.assign({}, difference), this.targetRestrictions)), this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
+        return this.fMediator.send(new GetConnectionLineRequest(RoundedRect.fromRect(this.fOutputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), this.sourceRestrictions)), RoundedRect.fromRect(this.fInputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), this.targetRestrictions)), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
     }
 }
 
 class ConnectionTargetDragHandler extends ConnectionBaseDragHandler {
-    constructor(fMediator, connection, minDistance, maxDistance) {
-        super(fMediator, connection);
+    constructor(fMediator, fComponentsStore, connection, minDistance, maxDistance) {
+        super(fMediator, fComponentsStore, connection);
         this.minDistance = minDistance;
         this.maxDistance = maxDistance;
     }
@@ -3435,7 +3914,7 @@ class ConnectionTargetDragHandler extends ConnectionBaseDragHandler {
         this.redrawConnection(this.getNewLineValue(difference));
     }
     getNewLineValue(difference) {
-        return this.fMediator.send(new GetConnectionLineRequest(this.fromConnectorRect, this.toConnectorRect.addPoint(this.getDifference(Object.assign({}, difference), { min: this.minDistance, max: this.maxDistance })), this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
+        return this.fMediator.send(new GetConnectionLineRequest(RoundedRect.fromRect(this.fOutputWithRect.fRect), RoundedRect.fromRect(this.fInputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), { min: this.minDistance, max: this.maxDistance })), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
     }
 }
 
@@ -3479,7 +3958,7 @@ let PutInputConnectionHandlersToArrayExecution = class PutInputConnectionHandler
         return result;
     }
     getNewConnectionHandler(connection, nodeDragHandler) {
-        const handler = new ConnectionDragHandler(this.fMediator, connection);
+        const handler = new ConnectionDragHandler(this.fMediator, this.fComponentsStore, connection);
         handler.setInputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
         return handler;
     }
@@ -3487,7 +3966,7 @@ let PutInputConnectionHandlersToArrayExecution = class PutInputConnectionHandler
         result[index].setInputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
     }
     getNewSourceConnectionHandler(connection, nodeDragHandler) {
-        return new ConnectionTargetDragHandler(this.fMediator, connection, nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        return new ConnectionTargetDragHandler(this.fMediator, this.fComponentsStore, connection, nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
     }
 };
 PutInputConnectionHandlersToArrayExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PutInputConnectionHandlersToArrayExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -3508,8 +3987,8 @@ class PutOutputConnectionHandlersToArrayRequest {
 }
 
 class ConnectionSourceDragHandler extends ConnectionBaseDragHandler {
-    constructor(fMediator, connection, minDistance, maxDistance) {
-        super(fMediator, connection);
+    constructor(fMediator, fComponentsStore, connection, minDistance, maxDistance) {
+        super(fMediator, fComponentsStore, connection);
         this.minDistance = minDistance;
         this.maxDistance = maxDistance;
     }
@@ -3517,7 +3996,7 @@ class ConnectionSourceDragHandler extends ConnectionBaseDragHandler {
         this.redrawConnection(this.getNewLineValue(difference));
     }
     getNewLineValue(difference) {
-        return this.fMediator.send(new GetConnectionLineRequest(this.fromConnectorRect.addPoint(this.getDifference(Object.assign({}, difference), { min: this.minDistance, max: this.maxDistance })), this.toConnectorRect, this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
+        return this.fMediator.send(new GetConnectionLineRequest(RoundedRect.fromRect(this.fOutputWithRect.fRect).addPoint(this.getDifference(Object.assign({}, difference), { min: this.minDistance, max: this.maxDistance })), RoundedRect.fromRect(this.fInputWithRect.fRect), this.connection.fBehavior, this.fOutputWithRect.fConnector.fConnectableSide, this.fInputWithRect.fConnector.fConnectableSide));
     }
 }
 
@@ -3561,7 +4040,7 @@ let PutOutputConnectionHandlersToArrayExecution = class PutOutputConnectionHandl
         return result;
     }
     getNewConnectionHandler(connection, nodeDragHandler) {
-        const handler = new ConnectionDragHandler(this.fMediator, connection);
+        const handler = new ConnectionDragHandler(this.fMediator, this.fComponentsStore, connection);
         handler.setOutputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
         return handler;
     }
@@ -3569,7 +4048,7 @@ let PutOutputConnectionHandlersToArrayExecution = class PutOutputConnectionHandl
         result[index].setOutputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
     }
     getNewSourceConnectionHandler(connection, nodeDragHandler) {
-        return new ConnectionSourceDragHandler(this.fMediator, connection, nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        return new ConnectionSourceDragHandler(this.fMediator, this.fComponentsStore, connection, nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
     }
 };
 PutOutputConnectionHandlersToArrayExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PutOutputConnectionHandlersToArrayExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -4673,13 +5152,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-let uniqueId$4 = 0;
+let uniqueId$3 = 0;
 class FExternalItemDirective extends FExternalItemBase {
     constructor(elementReference, fExternalItemService) {
         super();
         this.elementReference = elementReference;
         this.fExternalItemService = fExternalItemService;
-        this.fExternalItemId = `f-external-item-${uniqueId$4++}`;
+        this.fExternalItemId = `f-external-item-${uniqueId$3++}`;
         this.fDisabled = false;
     }
     get hostElement() {
@@ -4885,13 +5364,6 @@ class FSelectionChangeEvent {
     }
 }
 
-class MinimapDragPreparationRequest {
-    constructor(event, minimap) {
-        this.event = event;
-        this.minimap = minimap;
-    }
-}
-
 class CalculateFlowPointFromMinimapPointRequest {
     constructor(flowRect, canvasPosition, eventPoint, minimap) {
         this.flowRect = flowRect;
@@ -4935,6 +5407,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
+class MinimapDragFinalizeRequest {
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+let MinimapDragFinalizeExecution = class MinimapDragFinalizeExecution {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        this.fDraggableDataContext.draggableItems.forEach((x) => {
+            var _a;
+            (_a = x.complete) === null || _a === void 0 ? void 0 : _a.call(x);
+        });
+    }
+};
+MinimapDragFinalizeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+MinimapDragFinalizeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution });
+MinimapDragFinalizeExecution = __decorate([
+    FExecutionRegister(MinimapDragFinalizeRequest)
+], MinimapDragFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+
 class FMinimapDragHandler {
     constructor(fComponentsStore, fMediator, flowRect, canvasPosition, eventPoint, minimap) {
         this.fComponentsStore = fComponentsStore;
@@ -4966,7 +5464,36 @@ class FMinimapDragHandler {
     complete() {
         var _a;
         (_a = this.fComponentsStore.fCanvas) === null || _a === void 0 ? void 0 : _a.hostElement.classList.remove('f-scaled-animate');
-        this.fComponentsStore.fCanvas.completeDrag();
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
+    }
+}
+
+let MinimapDragFinalizeValidator = class MinimapDragFinalizeValidator {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof FMinimapDragHandler);
+    }
+};
+MinimapDragFinalizeValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+MinimapDragFinalizeValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator });
+MinimapDragFinalizeValidator = __decorate([
+    FValidatorRegister(MinimapDragFinalizeRequest)
+], MinimapDragFinalizeValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+
+const MINIMAP_DRAG_FINALIZE_PROVIDERS = [
+    MinimapDragFinalizeExecution,
+    MinimapDragFinalizeValidator,
+];
+
+class MinimapDragPreparationRequest {
+    constructor(event, minimap) {
+        this.event = event;
+        this.minimap = minimap;
     }
 }
 
@@ -4984,7 +5511,7 @@ let MinimapDragPreparationExecution = class MinimapDragPreparationExecution {
         const startCanvasPosition = Point.fromPoint(this.fComponentsStore.fCanvas.transform.position);
         this.fComponentsStore.fCanvas.setPosition(this.getNewPosition(eventPoint, request.minimap));
         this.fComponentsStore.fCanvas.redraw();
-        this.fComponentsStore.fCanvas.completeDrag();
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
         this.fDraggableDataContext.onPointerDownScale = 1;
         this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(eventPoint).elementTransform(this.flowHost);
         this.fDraggableDataContext.draggableItems = [
@@ -5032,53 +5559,20 @@ const MINIMAP_DRAG_PREPARATION_PROVIDERS = [
     MinimapDragPreparationValidator,
 ];
 
-class MinimapDragFinalizeRequest {
-    constructor(event) {
-        this.event = event;
+function checkRectIsFinite(rect) {
+    if (!Number.isFinite(rect.width) || !Number.isFinite(rect.height) || !Number.isFinite(rect.x) || !Number.isFinite(rect.y)) {
+        return RectExtensions.initialize(0, 0, 0, 0);
     }
+    return rect;
 }
 
-let MinimapDragFinalizeExecution = class MinimapDragFinalizeExecution {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        this.fDraggableDataContext.draggableItems.forEach((x) => {
-            var _a;
-            (_a = x.complete) === null || _a === void 0 ? void 0 : _a.call(x);
-        });
-    }
-};
-MinimapDragFinalizeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-MinimapDragFinalizeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution });
-MinimapDragFinalizeExecution = __decorate([
-    FExecutionRegister(MinimapDragFinalizeRequest)
-], MinimapDragFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
-
-let MinimapDragFinalizeValidator = class MinimapDragFinalizeValidator {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof FMinimapDragHandler);
+class FMinimapData {
+    constructor(element, scale = 1, viewBox = RectExtensions.initialize(0, 0, 0, 0)) {
+        this.element = element;
+        this.scale = scale;
+        this.viewBox = viewBox;
     }
-};
-MinimapDragFinalizeValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-MinimapDragFinalizeValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator });
-MinimapDragFinalizeValidator = __decorate([
-    FValidatorRegister(MinimapDragFinalizeRequest)
-], MinimapDragFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
-
-const MINIMAP_DRAG_FINALIZE_PROVIDERS = [
-    MinimapDragFinalizeExecution,
-    MinimapDragFinalizeValidator,
-];
+}
 
 const F_MINIMAP_DRAG_AND_DROP_PROVIDERS = [
     CalculateFlowPointFromMinimapPointExecution,
@@ -5250,987 +5744,837 @@ const F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS = [
     ...SELECTION_AREA_PREPARATION_PROVIDERS
 ];
 
-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 FSelectionAreaBase {
+}
+FSelectionAreaBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FSelectionAreaBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FSelectionAreaBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaBase, decorators: [{
+            type: Directive
+        }] });
 
-let ClearSelectionExecution = class ClearSelectionExecution {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        this.fDraggableDataContext.selectedItems.forEach((x) => x.deselect());
-        this.fDraggableDataContext.selectedItems = [];
-        this.fDraggableDataContext.isSelectedChanged = true;
+class FSelectionAreaComponent extends FSelectionAreaBase {
+    constructor(elementReference, fMediator) {
+        super();
+        this.elementReference = elementReference;
+        this.fMediator = fMediator;
     }
-};
-ClearSelectionExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClearSelectionExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-ClearSelectionExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClearSelectionExecution });
-ClearSelectionExecution = __decorate([
-    FExecutionRegister(ClearSelectionRequest)
-], ClearSelectionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClearSelectionExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
-
-class CreateConnectionMarkersRequest {
-    constructor(fConnection) {
-        this.fConnection = fConnection;
+    get hostElement() {
+        return this.elementReference.nativeElement;
     }
-}
-
-let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
-    constructor(fBrowser) {
-        this.fBrowser = fBrowser;
-    }
-    handle(request) {
-        const element = createSVGElement$1('defs', this.fBrowser);
-        const fConnection = request.fConnection;
-        fConnection.fMarkers.forEach((marker) => {
-            const markerElement = this.createMarkerElement(marker, fConnection.fId);
-            const clone = marker.hostElement.cloneNode(true);
-            clone.setAttribute('height', `${marker.height}`);
-            clone.setAttribute('width', `${marker.width}`);
-            clone.removeAttribute('markerUnits');
-            clone.style.display = 'unset';
-            markerElement.append(clone);
-            element.append(markerElement);
-        });
-        fConnection.fDefs.nativeElement.innerHTML = element.innerHTML;
-        this.makeSafariCompatible(fConnection);
-    }
-    // Safari does not support markers on path elements if markers are defined after the path element
-    makeSafariCompatible(fConnection) {
-        fConnection.fPath.hostElement.replaceWith(fConnection.fPath.hostElement);
-    }
-    createMarkerElement(marker, fConnectionId) {
-        const markerElement = createSVGElement$1('marker', this.fBrowser);
-        markerElement.setAttribute('id', normalizeDomElementId(marker.type + '-' + fConnectionId));
-        markerElement.setAttribute('markerHeight', `${marker.height}`);
-        markerElement.setAttribute('markerWidth', `${marker.width}`);
-        markerElement.setAttribute('orient', `${marker.orient}`);
-        markerElement.setAttribute('refX', `${marker.refX}`);
-        markerElement.setAttribute('refY', `${marker.refY}`);
-        markerElement.setAttribute('markerUnits', `${marker.markerUnits}`);
-        return markerElement;
-    }
-};
-CreateConnectionMarkersExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateConnectionMarkersExecution, deps: [{ token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
-CreateConnectionMarkersExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateConnectionMarkersExecution });
-CreateConnectionMarkersExecution = __decorate([
-    FExecutionRegister(CreateConnectionMarkersRequest)
-], CreateConnectionMarkersExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateConnectionMarkersExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.BrowserService }]; } });
-function createSVGElement$1(tag, fBrowser) {
-    return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
-}
-
-class CreateRoundedRectFromElementRequest {
-    constructor(element) {
-        this.element = element;
+    ngOnInit() {
+        this.hostElement.style.display = 'none';
     }
-}
-
-let CreateRoundedRectFromElementExecution = class CreateRoundedRectFromElementExecution {
-    constructor(fBrowser) {
-        this.fBrowser = fBrowser;
+    hide() {
+        this.hostElement.style.display = 'none';
     }
-    handle(request) {
-        return this.setRadiusFromElement(RoundedRect.fromRect(RectExtensions.fromElement(request.element)), request.element);
+    show() {
+        this.hostElement.style.display = 'block';
     }
-    setRadiusFromElement(rect, element) {
-        const styles = this.getComputedStyle(element);
-        rect.radius1 = this.toPixels(styles.borderTopLeftRadius, element, styles.fontSize);
-        rect.radius2 = this.toPixels(styles.borderTopRightRadius, element, styles.fontSize);
-        rect.radius3 = this.toPixels(styles.borderBottomRightRadius, element, styles.fontSize);
-        rect.radius4 = this.toPixels(styles.borderBottomLeftRadius, element, styles.fontSize);
-        return rect;
+    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';
     }
-    getComputedStyle(element) {
-        return this.fBrowser.window.getComputedStyle(element);
+    onPointerDown(event) {
+        this.fMediator.send(new SelectionAreaPreparationRequest(event, this));
     }
-    toPixels(value, element, fontSize) {
-        return this.fBrowser.toPixels(value, element.clientWidth, element.clientHeight, fontSize) || 0;
+    onPointerUp(event) {
+        this.fMediator.send(new SelectionAreaFinalizeRequest(event));
     }
-};
-CreateRoundedRectFromElementExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateRoundedRectFromElementExecution, deps: [{ token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
-CreateRoundedRectFromElementExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateRoundedRectFromElementExecution });
-CreateRoundedRectFromElementExecution = __decorate([
-    FExecutionRegister(CreateRoundedRectFromElementRequest)
-], CreateRoundedRectFromElementExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateRoundedRectFromElementExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.BrowserService }]; } });
-
-class EmitTransformChangesRequest {
 }
+FSelectionAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Component });
+FSelectionAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FSelectionAreaComponent, selector: "f-selection-area", 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: "12.2.17", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "f-selection-area",
+                    template: ``,
+                    styleUrls: ['./f-selection-area.component.scss'],
+                    host: {
+                        'class': 'f-selection-area f-component'
+                    },
+                    providers: [
+                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.FMediator }]; } });
 
-let EmitTransformChangesExecution = class EmitTransformChangesExecution {
-    constructor(fTransformStore) {
-        this.fTransformStore = fTransformStore;
-    }
-    handle(request) {
-        this.fTransformStore.changes.next();
-    }
-};
-EmitTransformChangesExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EmitTransformChangesExecution, deps: [{ token: FTransformStore }], target: i0.ɵɵFactoryTarget.Injectable });
-EmitTransformChangesExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EmitTransformChangesExecution });
-EmitTransformChangesExecution = __decorate([
-    FExecutionRegister(EmitTransformChangesRequest)
-], EmitTransformChangesExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EmitTransformChangesExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FTransformStore }]; } });
-
-class GetElementRectInFlowRequest {
-    constructor(element) {
-        this.element = element;
-    }
-}
+const F_SELECTION_AREA_PROVIDERS = [
+    FSelectionAreaComponent
+];
 
-let GetElementRectInFlowExecution = class GetElementRectInFlowExecution {
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
-    get transform() {
-        return this.fComponentsStore.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.flowHost;
-    }
-    handle(request) {
-        const systemRect = this.fMediator.send(new CreateRoundedRectFromElementRequest(request.element));
-        const position = this.transformElementPositionInFlow(systemRect);
-        const size = this.transformElementSizeInFlow(systemRect);
-        return new RoundedRect(position.x, position.y, size.width, size.height, systemRect.radius1, systemRect.radius2, systemRect.radius3, systemRect.radius4);
-    }
-    transformElementPositionInFlow(rect) {
-        return Point.fromPoint(rect).elementTransform(this.flowHost).sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
-    }
-    transformElementSizeInFlow(rect) {
-        return SizeExtensions.initialize(rect.width / this.transform.scale, rect.height / this.transform.scale);
-    }
-};
-GetElementRectInFlowExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetElementRectInFlowExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-GetElementRectInFlowExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetElementRectInFlowExecution });
-GetElementRectInFlowExecution = __decorate([
-    FExecutionRegister(GetElementRectInFlowRequest)
-], GetElementRectInFlowExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetElementRectInFlowExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+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 GetCanBeSelectedItemsExecution = class GetCanBeSelectedItemsExecution {
-    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
-        this.fComponentsStore = fComponentsStore;
+let ClearSelectionExecution = class ClearSelectionExecution {
+    constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
-        this.fMediator = fMediator;
-    }
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
-    }
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
-    }
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    handle() {
-        return [...this.getNodesWithRects(), ...this.getConnectionsWithRects()].filter((x) => {
-            return !this.fDraggableDataContext.selectedItems.includes(x.element);
-        });
-    }
-    getNodesWithRects() {
-        return this.fNodes.filter((x) => !x.fSelectionDisabled).map((x) => {
-            return {
-                element: x,
-                rect: RectExtensions.mult(this.fMediator.send(new GetElementRectInFlowRequest(x.hostElement)), this.transform.scale)
-            };
-        });
-    }
-    getConnectionsWithRects() {
-        return this.fConnections.filter((x) => !x.fSelectionDisabled).map((x) => {
-            return {
-                element: x,
-                rect: RectExtensions.mult(this.fMediator.send(new GetElementRectInFlowRequest(x.boundingElement)), this.transform.scale)
-            };
-        });
-    }
-};
-GetCanBeSelectedItemsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetCanBeSelectedItemsExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-GetCanBeSelectedItemsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetCanBeSelectedItemsExecution });
-GetCanBeSelectedItemsExecution = __decorate([
-    FExecutionRegister(GetCanBeSelectedItemsRequest)
-], GetCanBeSelectedItemsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetCanBeSelectedItemsExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }]; } });
-
-class GetDeepChildrenNodesAndGroupsRequest {
-    constructor(fId) {
-        this.fId = fId;
-    }
-}
-
-let GetDeepChildrenNodesAndGroupsExecution = class GetDeepChildrenNodesAndGroupsExecution {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
-        return this.getChildrenNodes(request.fId);
-    }
-    getChildrenNodes(fId, visited = new Set()) {
-        if (visited.has(fId)) {
-            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fId);
-        }
-        visited.add(fId);
-        const result = this.fComponentsStore.fNodes.filter((x) => x.fParentId === fId);
-        result.forEach((x) => {
-            result.push(...this.getChildrenNodes(x.fId, visited));
-        });
-        return result;
-    }
-};
-GetDeepChildrenNodesAndGroupsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-GetDeepChildrenNodesAndGroupsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution });
-GetDeepChildrenNodesAndGroupsExecution = __decorate([
-    FExecutionRegister(GetDeepChildrenNodesAndGroupsRequest)
-], GetDeepChildrenNodesAndGroupsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
-
-class GetConnectionLineRequest {
-    constructor(outputRect, inputRect, behavior, outputSide, inputSide) {
-        this.outputRect = outputRect;
-        this.inputRect = inputRect;
-        this.behavior = behavior;
-        this.outputSide = outputSide;
-        this.inputSide = inputSide;
-    }
-}
-
-let GetConnectionLineExecution = class GetConnectionLineExecution {
-    constructor() {
-        this.behaviorHandlers = {
-            [EFConnectionBehavior.FLOATING.toString()]: this.floatingBehavior,
-            [EFConnectionBehavior.FIXED_CENTER.toString()]: this.fixedCenterBehavior,
-            [EFConnectionBehavior.FIXED.toString()]: this.fixedOutboundBehaviour,
-        };
-    }
-    handle(payload) {
-        return this.behaviorHandlers[payload.behavior](payload);
-    }
-    floatingBehavior(payload) {
-        const fromResult = GetIntersections.getRoundedRectIntersections(payload.outputRect.gravityCenter, payload.inputRect.gravityCenter, payload.outputRect)[0];
-        const toResult = GetIntersections.getRoundedRectIntersections(payload.inputRect.gravityCenter, payload.outputRect.gravityCenter, payload.inputRect)[0];
-        return new Line(fromResult ? fromResult : payload.outputRect.gravityCenter, toResult ? toResult : payload.inputRect.gravityCenter);
-    }
-    fixedCenterBehavior(payload) {
-        return new Line(payload.outputRect.gravityCenter, payload.inputRect.gravityCenter);
-    }
-    fixedOutboundBehaviour(payload) {
-        return new Line(positionFixedOutbound[payload.outputSide === EFConnectableSide.AUTO ? EFConnectableSide.BOTTOM : payload.outputSide](payload.outputRect), positionFixedOutbound[payload.inputSide === EFConnectableSide.AUTO ? EFConnectableSide.TOP : payload.inputSide](payload.inputRect));
+        this.fDraggableDataContext.selectedItems.forEach((x) => x.deselect());
+        this.fDraggableDataContext.selectedItems = [];
+        this.fDraggableDataContext.isSelectedChanged = true;
     }
 };
-GetConnectionLineExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetConnectionLineExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-GetConnectionLineExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetConnectionLineExecution });
-GetConnectionLineExecution = __decorate([
-    FExecutionRegister(GetConnectionLineRequest)
-], GetConnectionLineExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetConnectionLineExecution, decorators: [{
+ClearSelectionExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClearSelectionExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+ClearSelectionExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClearSelectionExecution });
+ClearSelectionExecution = __decorate([
+    FExecutionRegister(ClearSelectionRequest)
+], ClearSelectionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClearSelectionExecution, decorators: [{
             type: Injectable
-        }] });
-const positionFixedOutbound = {
-    [EFConnectableSide.TOP]: (rect) => {
-        const result = new Point();
-        result.y = rect.y;
-        result.x = rect.x + rect.width / 2;
-        return result;
-    },
-    [EFConnectableSide.BOTTOM]: (rect) => {
-        const result = new Point();
-        result.y = rect.y + rect.height;
-        result.x = rect.x + rect.width / 2;
-        return result;
-    },
-    [EFConnectableSide.LEFT]: (rect) => {
-        const result = new Point();
-        result.x = rect.x;
-        result.y = rect.y + rect.height / 2;
-        return result;
-    },
-    [EFConnectableSide.RIGHT]: (rect) => {
-        const result = new Point();
-        result.x = rect.x + rect.width;
-        result.y = rect.y + rect.height / 2;
-        return result;
-    },
-};
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
 
-class GetFlowStateConnectionsRequest {
+class GetSelectionRequest {
 }
 
-let GetFlowStateConnectionsExecution = class GetFlowStateConnectionsExecution {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
+let GetSelectionExecution = class GetSelectionExecution {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-    handle(request) {
-        return this.fComponentsStore.fConnections.map((x) => {
-            return {
-                id: x.fId,
-                fOutputId: x.fOutputId,
-                fInputId: x.fInputId,
-                fType: x.fType,
-                fBehavior: x.fBehavior,
-                isSelected: x.isSelected()
-            };
+    handle() {
+        let selectedNodes = [];
+        let selectedConnections = [];
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            if (x.hostElement.classList.contains('f-node')) {
+                selectedNodes.push(x.hostElement.dataset['fNodeId']);
+            }
+            else {
+                selectedConnections.push(x.hostElement.id);
+            }
         });
+        return new FSelectionChangeEvent(selectedNodes, selectedConnections);
     }
 };
-GetFlowStateConnectionsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateConnectionsExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-GetFlowStateConnectionsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateConnectionsExecution });
-GetFlowStateConnectionsExecution = __decorate([
-    FExecutionRegister(GetFlowStateConnectionsRequest)
-], GetFlowStateConnectionsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateConnectionsExecution, decorators: [{
+GetSelectionExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetSelectionExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+GetSelectionExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetSelectionExecution });
+GetSelectionExecution = __decorate([
+    FExecutionRegister(GetSelectionRequest)
+], GetSelectionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetSelectionExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
 
-class GetFlowStateNodesRequest {
-    constructor(type) {
-        this.type = type;
+class SelectRequest {
+    constructor(nodes, connections) {
+        this.nodes = nodes;
+        this.connections = connections;
     }
 }
 
-let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
+let SelectExecution = class SelectExecution {
+    constructor(fDataContext, fDraggableDataContext) {
+        this.fDataContext = fDataContext;
+        this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
-        return this.fComponentsStore.fNodes.filter((x) => x instanceof request.type).map((x) => {
-            return {
-                id: x.fId,
-                parent: x.fParentId,
-                position: x.position,
-                size: x.size,
-                fOutputs: this.getOutputs(x.hostElement),
-                fInputs: this.getInputs(x.hostElement),
-                isSelected: x.isSelected()
-            };
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            x.deselect();
         });
-    }
-    getOutputs(hostElement) {
-        return this.fComponentsStore.fOutputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
-            return {
-                id: x.id,
-                fConnectableSide: x.fConnectableSide
-            };
+        this.fDraggableDataContext.selectedItems = [];
+        request.nodes.forEach((key) => {
+            const node = this.fDataContext.fNodes.find((x) => x.fId === key);
+            if (node) {
+                node.select();
+                this.fDraggableDataContext.selectedItems.push(node);
+            }
         });
-    }
-    getInputs(hostElement) {
-        return this.fComponentsStore.fInputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
-            return {
-                id: x.id,
-                fConnectableSide: x.fConnectableSide
-            };
+        request.connections.forEach((key) => {
+            const connection = this.fDataContext.fConnections.find((x) => x.fId === key);
+            if (connection) {
+                connection.select();
+                this.fDraggableDataContext.selectedItems.push(connection);
+            }
         });
+        this.fDraggableDataContext.isSelectedChanged = true;
     }
 };
-GetFlowStateNodesExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateNodesExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-GetFlowStateNodesExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateNodesExecution });
-GetFlowStateNodesExecution = __decorate([
-    FExecutionRegister(GetFlowStateNodesRequest)
-], GetFlowStateNodesExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateNodesExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
-
-class GetFlowStateRequest {
-}
-
-let GetFlowStateExecution = class GetFlowStateExecution {
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
-    handle(payload) {
-        return {
-            position: this.getCanvasPosition(this.fComponentsStore.fCanvas.transform),
-            scale: this.fComponentsStore.fCanvas.transform.scale,
-            nodes: this.fMediator.send(new GetFlowStateNodesRequest(FNodeDirective)),
-            groups: this.fMediator.send(new GetFlowStateNodesRequest(FGroupDirective)),
-            connections: this.fMediator.send(new GetFlowStateConnectionsRequest())
-        };
-    }
-    getCanvasPosition(transform) {
-        return PointExtensions.sum(transform.position, transform.scaledPosition);
-    }
-};
-GetFlowStateExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-GetFlowStateExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateExecution });
-GetFlowStateExecution = __decorate([
-    FExecutionRegister(GetFlowStateRequest)
-], GetFlowStateExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateExecution, decorators: [{
+SelectExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectExecution });
+SelectExecution = __decorate([
+    FExecutionRegister(SelectRequest)
+], SelectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
-
-const GET_FLOW_STATE_PROVIDERS = [
-    GetFlowStateExecution,
-    GetFlowStateNodesExecution,
-    GetFlowStateConnectionsExecution
-];
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
 
-class GetScaledNodeRectsWithFlowPositionRequest {
+class SelectAllRequest {
 }
 
-let GetScaledNodeRectsWithFlowPositionExecution = class GetScaledNodeRectsWithFlowPositionExecution {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
+let SelectAllExecution = class SelectAllExecution {
+    constructor(fDataContext, fDraggableDataContext) {
+        this.fDataContext = fDataContext;
+        this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
-        return RectExtensions.union(this.getNodesRects());
-    }
-    getNodesRects() {
-        return this.getNodes().map((x) => {
-            const rect = RectExtensions.fromElement(x.hostElement);
-            return RectExtensions.initialize(x.position.x, x.position.y, rect.width, rect.height);
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            x.deselect();
         });
-    }
-    getNodes() {
-        return this.fComponentsStore.fNodes;
+        this.fDraggableDataContext.selectedItems = [];
+        this.fDataContext.fNodes.forEach((x) => {
+            x.select();
+            this.fDraggableDataContext.selectedItems.push(x);
+        });
+        this.fDataContext.fConnections.forEach((x) => {
+            x.select();
+            this.fDraggableDataContext.selectedItems.push(x);
+        });
+        this.fDraggableDataContext.isSelectedChanged = true;
     }
 };
-GetScaledNodeRectsWithFlowPositionExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetScaledNodeRectsWithFlowPositionExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-GetScaledNodeRectsWithFlowPositionExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetScaledNodeRectsWithFlowPositionExecution });
-GetScaledNodeRectsWithFlowPositionExecution = __decorate([
-    FExecutionRegister(GetScaledNodeRectsWithFlowPositionRequest)
-], GetScaledNodeRectsWithFlowPositionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetScaledNodeRectsWithFlowPositionExecution, decorators: [{
+SelectAllExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAllExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectAllExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAllExecution });
+SelectAllExecution = __decorate([
+    FExecutionRegister(SelectAllRequest)
+], SelectAllExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAllExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
 
-class GetInputRectInFlowRequest {
-    constructor(fInputId) {
-        this.fInputId = fInputId;
+class SelectAndUpdateNodeLayerRequest {
+    constructor(fNode) {
+        this.fNode = fNode;
     }
 }
 
-class GetInputRectInFlowResponse {
-    constructor(rect, fConnectableSide) {
-        this.rect = rect;
-        this.fConnectableSide = fConnectableSide;
+class MoveFrontElementsBeforeTargetElementRequest {
+    constructor(fItemsContainer, // fGroupsContainer || fNodesContainer || fConnectionsContainer
+    allElements, elementsThatShouldBeInFront, targetIndex) {
+        this.fItemsContainer = fItemsContainer;
+        this.allElements = allElements;
+        this.elementsThatShouldBeInFront = elementsThatShouldBeInFront;
+        this.targetIndex = targetIndex;
     }
 }
 
-let GetInputRectInFlowExecution = class GetInputRectInFlowExecution {
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
+let MoveFrontElementsBeforeTargetElementExecution = class MoveFrontElementsBeforeTargetElementExecution {
     handle(request) {
-        const input = this.fComponentsStore.fInputs.find((x) => x.id === request.fInputId);
-        if (!input) {
-            throw InputNotFound(request.fInputId);
+        const elementsToMove = [];
+        for (let i = request.targetIndex + 1; i < request.allElements.length; i++) {
+            const element = request.allElements[i];
+            if (!request.elementsThatShouldBeInFront.includes(element)) {
+                elementsToMove.push(element);
+            }
         }
-        return new GetInputRectInFlowResponse(this.fMediator.send(new GetElementRectInFlowRequest(input.hostElement)), input.fConnectableSide);
+        elementsToMove.forEach((x) => {
+            request.fItemsContainer.removeChild(x);
+            request.fItemsContainer.insertBefore(x, request.allElements[request.targetIndex]);
+        });
     }
 };
-GetInputRectInFlowExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputRectInFlowExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-GetInputRectInFlowExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputRectInFlowExecution });
-GetInputRectInFlowExecution = __decorate([
-    FExecutionRegister(GetInputRectInFlowRequest)
-], GetInputRectInFlowExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputRectInFlowExecution, decorators: [{
+MoveFrontElementsBeforeTargetElementExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MoveFrontElementsBeforeTargetElementExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MoveFrontElementsBeforeTargetElementExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MoveFrontElementsBeforeTargetElementExecution });
+MoveFrontElementsBeforeTargetElementExecution = __decorate([
+    FExecutionRegister(MoveFrontElementsBeforeTargetElementRequest)
+], MoveFrontElementsBeforeTargetElementExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MoveFrontElementsBeforeTargetElementExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+        }] });
 
-class GetNodesRectRequest {
+class UpdateItemAndChildrenLayersRequest {
+    constructor(item, itemContainer) {
+        this.item = item;
+        this.itemContainer = itemContainer;
+    }
 }
 
-let GetNodesRectExecution = class GetNodesRectExecution {
+class GetDeepChildrenNodesAndGroupsRequest {
+    constructor(fId) {
+        this.fId = fId;
+    }
+}
+
+let GetDeepChildrenNodesAndGroupsExecution = class GetDeepChildrenNodesAndGroupsExecution {
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
-        return RectExtensions.union(this.getNodesRects());
-    }
-    getNodesRects() {
-        return this.getNodes().map((x) => RectExtensions.fromElement(x.hostElement));
+        return this.getChildrenNodes(request.fId);
     }
-    getNodes() {
-        return this.fComponentsStore.fNodes;
+    getChildrenNodes(fId, visited = new Set()) {
+        if (visited.has(fId)) {
+            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fId);
+        }
+        visited.add(fId);
+        const result = this.fComponentsStore.fNodes.filter((x) => x.fParentId === fId);
+        result.forEach((x) => {
+            result.push(...this.getChildrenNodes(x.fId, visited));
+        });
+        return result;
     }
 };
-GetNodesRectExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetNodesRectExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-GetNodesRectExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetNodesRectExecution });
-GetNodesRectExecution = __decorate([
-    FExecutionRegister(GetNodesRectRequest)
-], GetNodesRectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetNodesRectExecution, decorators: [{
+GetDeepChildrenNodesAndGroupsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+GetDeepChildrenNodesAndGroupsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution });
+GetDeepChildrenNodesAndGroupsExecution = __decorate([
+    FExecutionRegister(GetDeepChildrenNodesAndGroupsRequest)
+], GetDeepChildrenNodesAndGroupsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class GetOutputRectInFlowRequest {
-    constructor(fOutputId) {
-        this.fOutputId = fOutputId;
-    }
-}
-
-class GetOutputRectInFlowResponse {
-    constructor(rect, fConnectableSide) {
-        this.rect = rect;
-        this.fConnectableSide = fConnectableSide;
-    }
-}
-
-let GetOutputRectInFlowExecution = class GetOutputRectInFlowExecution {
+let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExecution {
     constructor(fComponentsStore, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
     }
+    get fGroupsContainer() {
+        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
+    }
+    get fNodesContainer() {
+        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
+    }
+    get fConnectionsContainer() {
+        return this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement;
+    }
     handle(request) {
-        let output = this.fComponentsStore.fOutputs.find((x) => x.id === request.fOutputId);
-        if (!output) {
-            output = this.fComponentsStore.fOutlets.find((x) => x.id === request.fOutputId);
+        switch (request.itemContainer) {
+            case this.fGroupsContainer:
+                this.handleGroup(request);
+                break;
+            case this.fNodesContainer:
+                this.handleNode(request);
+                break;
+            case this.fConnectionsContainer:
+                this.handleConnection(request);
+                break;
+            default:
+                throw new Error('Unknown container');
         }
-        if (!output) {
-            throw OutputNotFound(request.fOutputId);
+    }
+    handleGroup(request) {
+        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
+        const childrenGroups = this.getChildrenGroups(childrenNodesAndGroups);
+        this.updateLayers(this.fGroupsContainer, request.item.hostElement, childrenGroups);
+        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
+        if (childrenNodes.length) {
+            this.updateLayers(this.fNodesContainer, childrenNodes[0], childrenNodes);
         }
-        const result = this.fMediator.send(new GetElementRectInFlowRequest(output.hostElement));
-        return new GetOutputRectInFlowResponse(result, output.fConnectableSide);
     }
-};
-GetOutputRectInFlowExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetOutputRectInFlowExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-GetOutputRectInFlowExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetOutputRectInFlowExecution });
-GetOutputRectInFlowExecution = __decorate([
-    FExecutionRegister(GetOutputRectInFlowRequest)
-], GetOutputRectInFlowExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetOutputRectInFlowExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
-
-class GetPositionInFlowRequest {
-    constructor(position) {
-        this.position = position;
+    handleNode(request) {
+        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
+        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
+        this.updateLayers(request.itemContainer, request.item.hostElement, childrenNodes);
     }
-}
-
-let GetPositionInFlowExecution = class GetPositionInFlowExecution {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
+    handleConnection(request) {
+        this.updateLayers(request.itemContainer, request.item.hostElement, []);
     }
-    get transform() {
-        return this.fComponentsStore.transform;
+    updateLayers(itemContainer, item, elementsThatShouldBeInFront) {
+        const allElements = Array.from(itemContainer.children);
+        const targetIndex = allElements.findIndex((x) => x === item);
+        if (this.isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront)) {
+            this.fMediator.send(new MoveFrontElementsBeforeTargetElementRequest(itemContainer, allElements, elementsThatShouldBeInFront, targetIndex));
+        }
     }
-    get flowHost() {
-        return this.fComponentsStore.flowHost;
+    isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront) {
+        for (let i = targetIndex + 1; i < allElements.length; i++) {
+            if (!elementsThatShouldBeInFront.includes(allElements[i])) {
+                return true;
+            }
+        }
+        return false;
     }
-    handle(request) {
-        return Point.fromPoint(request.position).elementTransform(this.flowHost)
-            .sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
+    getChildrenGroups(elements) {
+        const allElements = Array.from(this.fGroupsContainer.children);
+        return elements.filter((x) => this.fGroupsContainer.contains(x))
+            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+    }
+    getChildrenNodes(elements) {
+        const allElements = Array.from(this.fNodesContainer.children);
+        return elements.filter((x) => this.fNodesContainer.contains(x))
+            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+    }
+    getChildrenNodesAndGroups(fId) {
+        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId)).map((x) => x.hostElement);
     }
 };
-GetPositionInFlowExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetPositionInFlowExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-GetPositionInFlowExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetPositionInFlowExecution });
-GetPositionInFlowExecution = __decorate([
-    FExecutionRegister(GetPositionInFlowRequest)
-], GetPositionInFlowExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetPositionInFlowExecution, decorators: [{
+UpdateItemAndChildrenLayersExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+UpdateItemAndChildrenLayersExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateItemAndChildrenLayersExecution });
+UpdateItemAndChildrenLayersExecution = __decorate([
+    FExecutionRegister(UpdateItemAndChildrenLayersRequest)
+], UpdateItemAndChildrenLayersExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
-
-class GetSelectionRequest {
-}
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-let GetSelectionExecution = class GetSelectionExecution {
-    constructor(fDraggableDataContext) {
+let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution {
+    constructor(fDraggableDataContext, fMediator) {
         this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle() {
-        let selectedNodes = [];
-        let selectedConnections = [];
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            if (x.hostElement.classList.contains('f-node')) {
-                selectedNodes.push(x.hostElement.dataset['fNodeId']);
-            }
-            else {
-                selectedConnections.push(x.hostElement.id);
-            }
-        });
-        return new FSelectionChangeEvent(selectedNodes, selectedConnections);
+        this.fMediator = fMediator;
+    }
+    handle(request) {
+        this.selectNodeIfNotSelected(request.fNode);
+        this.fMediator.send(new UpdateItemAndChildrenLayersRequest(request.fNode, request.fNode.hostElement.parentElement));
+    }
+    selectNodeIfNotSelected(fNode) {
+        if (!this.fDraggableDataContext.selectedItems.includes(fNode) && !fNode.fSelectionDisabled) {
+            this.fDraggableDataContext.selectedItems.push(fNode);
+            fNode.select();
+            this.fDraggableDataContext.isSelectedChanged = true;
+        }
     }
 };
-GetSelectionExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetSelectionExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-GetSelectionExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetSelectionExecution });
-GetSelectionExecution = __decorate([
-    FExecutionRegister(GetSelectionRequest)
-], GetSelectionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetSelectionExecution, decorators: [{
+SelectAndUpdateNodeLayerExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectAndUpdateNodeLayerExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAndUpdateNodeLayerExecution });
+SelectAndUpdateNodeLayerExecution = __decorate([
+    FExecutionRegister(SelectAndUpdateNodeLayerRequest)
+], SelectAndUpdateNodeLayerExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }, { type: i2.FMediator }]; } });
 
-let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
+const F_SELECTION_FEATURES = [
+    ClearSelectionExecution,
+    GetSelectionExecution,
+    SelectExecution,
+    SelectAllExecution,
+    SelectAndUpdateNodeLayerExecution
+];
+
+let GetCanBeSelectedItemsExecution = class GetCanBeSelectedItemsExecution {
     constructor(fComponentsStore, fDraggableDataContext, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.fMediator = fMediator;
     }
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    get fConnections() {
+        return this.fComponentsStore.fConnections;
+    }
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
     handle() {
-        const isValid = this.isValidRequest();
-        if (!isValid) {
-            return;
-        }
-        const fNode = this.fDraggableDataContext.draggableItems[0].fNode;
-        const outputsOfNode = this.getOutputsForNode(fNode);
-        const inputsOfNode = this.getInputsForNode(fNode);
-        const isCantBeConnectedByOutput = outputsOfNode.some((x) => !x.canBeConnected);
-        const isCantBeConnectedByInput = this.fComponentsStore.fConnections.some((x) => {
-            return inputsOfNode.find((input) => input.id === x.fInputId);
+        return [...this.getNodesWithRects(), ...this.getConnectionsWithRects()].filter((x) => {
+            return !this.fDraggableDataContext.selectedItems.includes(x.element);
         });
-        if (!isCantBeConnectedByInput && outputsOfNode.length && !isCantBeConnectedByOutput && inputsOfNode.length) {
-            const output = outputsOfNode[0];
-            const input = inputsOfNode[0];
-            // const outgoingConnections = this.getOutgoingConnectionsHandler.handle([ output ]);
-            // const incomingConnections = this.getIncomingConnectionsHandler.handle([ input ]);
-            // if (outgoingConnections.length === 0 && incomingConnections.length === 0) {
-            //   const connections = this.findConnectionsUnderNode(fNode);
-            //   if (connections.length) {
-            //     //TODO: need to implement
-            //   }
-            // }
-        }
-    }
-    isValidRequest() {
-        const result = this.fDraggableDataContext.draggableItems.length === 1 &&
-            this.fDraggableDataContext.draggableItems[0] instanceof NodeDragHandler;
-        return result;
-    }
-    getOutputsForNode(node) {
-        return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
     }
-    getInputsForNode(node) {
-        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    getNodesWithRects() {
+        return this.fNodes.filter((x) => !x.fSelectionDisabled).map((x) => {
+            return {
+                element: x,
+                rect: RectExtensions.mult(this.fMediator.send(new GetElementRectInFlowRequest(x.hostElement)), this.transform.scale)
+            };
+        });
     }
-    findConnectionsUnderNode(node) {
-        const nodeRect = this.fMediator.send(new GetElementRectInFlowRequest(node.hostElement));
-        return this.fComponentsStore.fConnections.filter((x) => {
-            // const intersection = [];// RectExtensions.intersectionWithVector(nodeRect, x.line.point1, x.line.point2, 0, 0, 0, 0);
-            return ([]).length > 0;
+    getConnectionsWithRects() {
+        return this.fConnections.filter((x) => !x.fSelectionDisabled).map((x) => {
+            return {
+                element: x,
+                rect: RectExtensions.mult(this.fMediator.send(new GetElementRectInFlowRequest(x.boundingElement)), this.transform.scale)
+            };
         });
     }
 };
-IsConnectionUnderNodeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IsConnectionUnderNodeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-IsConnectionUnderNodeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IsConnectionUnderNodeExecution });
-IsConnectionUnderNodeExecution = __decorate([
-    FExecutionRegister(IsConnectionUnderNodeRequest)
-], IsConnectionUnderNodeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IsConnectionUnderNodeExecution, decorators: [{
+GetCanBeSelectedItemsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetCanBeSelectedItemsExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+GetCanBeSelectedItemsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetCanBeSelectedItemsExecution });
+GetCanBeSelectedItemsExecution = __decorate([
+    FExecutionRegister(GetCanBeSelectedItemsRequest)
+], GetCanBeSelectedItemsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetCanBeSelectedItemsExecution, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }]; } });
 
-class RedrawConnectionsRequest {
+class GetConnectionLineRequest {
+    constructor(outputRect, inputRect, behavior, outputSide, inputSide) {
+        this.outputRect = outputRect;
+        this.inputRect = inputRect;
+        this.behavior = behavior;
+        this.outputSide = outputSide;
+        this.inputSide = inputSide;
+    }
 }
 
-let RedrawConnectionsExecution = class RedrawConnectionsExecution {
-    constructor(fComponentsStore, fMediator) {
+let GetConnectionLineExecution = class GetConnectionLineExecution {
+    constructor() {
+        this.behaviorHandlers = {
+            [EFConnectionBehavior.FLOATING.toString()]: this.floatingBehavior,
+            [EFConnectionBehavior.FIXED_CENTER.toString()]: this.fixedCenterBehavior,
+            [EFConnectionBehavior.FIXED.toString()]: this.fixedOutboundBehaviour,
+        };
+    }
+    handle(payload) {
+        return this.behaviorHandlers[payload.behavior](payload);
+    }
+    floatingBehavior(payload) {
+        const fromResult = GetIntersections.getRoundedRectIntersections(payload.outputRect.gravityCenter, payload.inputRect.gravityCenter, payload.outputRect)[0];
+        const toResult = GetIntersections.getRoundedRectIntersections(payload.inputRect.gravityCenter, payload.outputRect.gravityCenter, payload.inputRect)[0];
+        return new Line(fromResult ? fromResult : payload.outputRect.gravityCenter, toResult ? toResult : payload.inputRect.gravityCenter);
+    }
+    fixedCenterBehavior(payload) {
+        return new Line(payload.outputRect.gravityCenter, payload.inputRect.gravityCenter);
+    }
+    fixedOutboundBehaviour(payload) {
+        return new Line(positionFixedOutbound[payload.outputSide === EFConnectableSide.AUTO ? EFConnectableSide.BOTTOM : payload.outputSide](payload.outputRect), positionFixedOutbound[payload.inputSide === EFConnectableSide.AUTO ? EFConnectableSide.TOP : payload.inputSide](payload.inputRect));
+    }
+};
+GetConnectionLineExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetConnectionLineExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GetConnectionLineExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetConnectionLineExecution });
+GetConnectionLineExecution = __decorate([
+    FExecutionRegister(GetConnectionLineRequest)
+], GetConnectionLineExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetConnectionLineExecution, decorators: [{
+            type: Injectable
+        }] });
+const positionFixedOutbound = {
+    [EFConnectableSide.TOP]: (rect) => {
+        const result = new Point();
+        result.y = rect.y;
+        result.x = rect.x + rect.width / 2;
+        return result;
+    },
+    [EFConnectableSide.BOTTOM]: (rect) => {
+        const result = new Point();
+        result.y = rect.y + rect.height;
+        result.x = rect.x + rect.width / 2;
+        return result;
+    },
+    [EFConnectableSide.LEFT]: (rect) => {
+        const result = new Point();
+        result.x = rect.x;
+        result.y = rect.y + rect.height / 2;
+        return result;
+    },
+    [EFConnectableSide.RIGHT]: (rect) => {
+        const result = new Point();
+        result.x = rect.x + rect.width;
+        result.y = rect.y + rect.height / 2;
+        return result;
+    },
+};
+
+class GetFlowStateConnectionsRequest {
+}
+
+let GetFlowStateConnectionsExecution = class GetFlowStateConnectionsExecution {
+    constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
     }
     handle(request) {
-        this.resetConnectors();
-        if (this.fComponentsStore.fTempConnection) {
-            this.setMarkers(this.fComponentsStore.fTempConnection);
-        }
-        this.fComponentsStore.fConnections.forEach((connection) => {
-            const output = this.fComponentsStore.fOutputs.find((x) => x.id === connection.fOutputId);
-            const input = this.fComponentsStore.fInputs.find((x) => x.id === connection.fInputId);
-            if (output && input) {
-                this.setupConnection(output, input, connection);
-            }
+        return this.fComponentsStore.fConnections.map((x) => {
+            return {
+                id: x.fId,
+                fOutputId: x.fOutputId,
+                fInputId: x.fInputId,
+                fType: x.fType,
+                fBehavior: x.fBehavior,
+                isSelected: x.isSelected()
+            };
         });
     }
-    resetConnectors() {
-        this.fComponentsStore.fOutputs.forEach((output) => output.setConnected(false));
-        this.fComponentsStore.fInputs.forEach((input) => input.setConnected(false));
+};
+GetFlowStateConnectionsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateConnectionsExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+GetFlowStateConnectionsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateConnectionsExecution });
+GetFlowStateConnectionsExecution = __decorate([
+    FExecutionRegister(GetFlowStateConnectionsRequest)
+], GetFlowStateConnectionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateConnectionsExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
+class GetFlowStateNodesRequest {
+    constructor(type) {
+        this.type = type;
     }
-    setupConnection(output, input, connection) {
-        output.setConnected(true);
-        input.setConnected(true);
-        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.select() : null;
+}
+
+let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
-    getLine(output, input, connection) {
-        const outputRect = this.fMediator.send(new GetElementRectInFlowRequest(output.hostElement));
-        const inputRect = this.fMediator.send(new GetElementRectInFlowRequest(input.hostElement));
-        return this.fMediator.send(new GetConnectionLineRequest(outputRect, inputRect, connection.fBehavior, output.fConnectableSide, input.fConnectableSide));
+    handle(request) {
+        return this.fComponentsStore.fNodes.filter((x) => x instanceof request.type).map((x) => {
+            return {
+                id: x.fId,
+                parent: x.fParentId,
+                position: x.position,
+                size: x.size,
+                fOutputs: this.getOutputs(x.hostElement),
+                fInputs: this.getInputs(x.hostElement),
+                isSelected: x.isSelected()
+            };
+        });
     }
-    setMarkers(connection) {
-        this.fMediator.send(new CreateConnectionMarkersRequest(connection));
+    getOutputs(hostElement) {
+        return this.fComponentsStore.fOutputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
+            return {
+                id: x.id,
+                fConnectableSide: x.fConnectableSide
+            };
+        });
+    }
+    getInputs(hostElement) {
+        return this.fComponentsStore.fInputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
+            return {
+                id: x.id,
+                fConnectableSide: x.fConnectableSide
+            };
+        });
     }
 };
-RedrawConnectionsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RedrawConnectionsExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-RedrawConnectionsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RedrawConnectionsExecution });
-RedrawConnectionsExecution = __decorate([
-    FExecutionRegister(RedrawConnectionsRequest)
-], RedrawConnectionsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RedrawConnectionsExecution, decorators: [{
+GetFlowStateNodesExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateNodesExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+GetFlowStateNodesExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateNodesExecution });
+GetFlowStateNodesExecution = __decorate([
+    FExecutionRegister(GetFlowStateNodesRequest)
+], GetFlowStateNodesExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateNodesExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class SelectRequest {
-    constructor(nodes, connections) {
-        this.nodes = nodes;
-        this.connections = connections;
-    }
+class GetFlowStateRequest {
 }
 
-let SelectExecution = class SelectExecution {
-    constructor(fDataContext, fDraggableDataContext) {
-        this.fDataContext = fDataContext;
-        this.fDraggableDataContext = fDraggableDataContext;
+let GetFlowStateExecution = class GetFlowStateExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
     }
-    handle(request) {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            x.deselect();
-        });
-        this.fDraggableDataContext.selectedItems = [];
-        request.nodes.forEach((key) => {
-            const node = this.fDataContext.fNodes.find((x) => x.fId === key);
-            if (node) {
-                node.select();
-                this.fDraggableDataContext.selectedItems.push(node);
-            }
-        });
-        request.connections.forEach((key) => {
-            const connection = this.fDataContext.fConnections.find((x) => x.fId === key);
-            if (connection) {
-                connection.select();
-                this.fDraggableDataContext.selectedItems.push(connection);
-            }
-        });
-        this.fDraggableDataContext.isSelectedChanged = true;
+    handle(payload) {
+        return {
+            position: this.getCanvasPosition(this.fComponentsStore.fCanvas.transform),
+            scale: this.fComponentsStore.fCanvas.transform.scale,
+            nodes: this.fMediator.send(new GetFlowStateNodesRequest(FNodeDirective)),
+            groups: this.fMediator.send(new GetFlowStateNodesRequest(FGroupDirective)),
+            connections: this.fMediator.send(new GetFlowStateConnectionsRequest())
+        };
+    }
+    getCanvasPosition(transform) {
+        return PointExtensions.sum(transform.position, transform.scaledPosition);
     }
 };
-SelectExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-SelectExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectExecution });
-SelectExecution = __decorate([
-    FExecutionRegister(SelectRequest)
-], SelectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectExecution, decorators: [{
+GetFlowStateExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+GetFlowStateExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateExecution });
+GetFlowStateExecution = __decorate([
+    FExecutionRegister(GetFlowStateRequest)
+], GetFlowStateExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetFlowStateExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-class SelectAllRequest {
+const GET_FLOW_STATE_PROVIDERS = [
+    GetFlowStateExecution,
+    GetFlowStateNodesExecution,
+    GetFlowStateConnectionsExecution
+];
+
+class GetScaledNodeRectsWithFlowPositionRequest {
 }
 
-let SelectAllExecution = class SelectAllExecution {
-    constructor(fDataContext, fDraggableDataContext) {
-        this.fDataContext = fDataContext;
-        this.fDraggableDataContext = fDraggableDataContext;
+let GetScaledNodeRectsWithFlowPositionExecution = class GetScaledNodeRectsWithFlowPositionExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            x.deselect();
-        });
-        this.fDraggableDataContext.selectedItems = [];
-        this.fDataContext.fNodes.forEach((x) => {
-            x.select();
-            this.fDraggableDataContext.selectedItems.push(x);
-        });
-        this.fDataContext.fConnections.forEach((x) => {
-            x.select();
-            this.fDraggableDataContext.selectedItems.push(x);
+        return RectExtensions.union(this.getNodesRects());
+    }
+    getNodesRects() {
+        return this.getNodes().map((x) => {
+            const rect = RectExtensions.fromElement(x.hostElement);
+            return RectExtensions.initialize(x.position.x, x.position.y, rect.width, rect.height);
         });
-        this.fDraggableDataContext.isSelectedChanged = true;
+    }
+    getNodes() {
+        return this.fComponentsStore.fNodes;
     }
 };
-SelectAllExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAllExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-SelectAllExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAllExecution });
-SelectAllExecution = __decorate([
-    FExecutionRegister(SelectAllRequest)
-], SelectAllExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAllExecution, decorators: [{
+GetScaledNodeRectsWithFlowPositionExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetScaledNodeRectsWithFlowPositionExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+GetScaledNodeRectsWithFlowPositionExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetScaledNodeRectsWithFlowPositionExecution });
+GetScaledNodeRectsWithFlowPositionExecution = __decorate([
+    FExecutionRegister(GetScaledNodeRectsWithFlowPositionRequest)
+], GetScaledNodeRectsWithFlowPositionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetScaledNodeRectsWithFlowPositionExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class SelectAndUpdateNodeLayerRequest {
-    constructor(node) {
-        this.node = node;
-    }
+class GetNodesRectRequest {
 }
 
-class MoveFrontElementsBeforeTargetElementRequest {
-    constructor(fItemsContainer, // fGroupsContainer || fNodesContainer || fConnectionsContainer
-    allElements, elementsThatShouldBeInFront, targetIndex) {
-        this.fItemsContainer = fItemsContainer;
-        this.allElements = allElements;
-        this.elementsThatShouldBeInFront = elementsThatShouldBeInFront;
-        this.targetIndex = targetIndex;
+let GetNodesRectExecution = class GetNodesRectExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
-}
-
-let MoveFrontElementsBeforeTargetElementExecution = class MoveFrontElementsBeforeTargetElementExecution {
     handle(request) {
-        const elementsToMove = [];
-        for (let i = request.targetIndex + 1; i < request.allElements.length; i++) {
-            const element = request.allElements[i];
-            if (!request.elementsThatShouldBeInFront.includes(element)) {
-                elementsToMove.push(element);
-            }
-        }
-        elementsToMove.forEach((x) => {
-            request.fItemsContainer.removeChild(x);
-            request.fItemsContainer.insertBefore(x, request.allElements[request.targetIndex]);
-        });
+        return RectExtensions.union(this.getNodesRects());
+    }
+    getNodesRects() {
+        return this.getNodes().map((x) => RectExtensions.fromElement(x.hostElement));
+    }
+    getNodes() {
+        return this.fComponentsStore.fNodes;
     }
 };
-MoveFrontElementsBeforeTargetElementExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MoveFrontElementsBeforeTargetElementExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MoveFrontElementsBeforeTargetElementExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MoveFrontElementsBeforeTargetElementExecution });
-MoveFrontElementsBeforeTargetElementExecution = __decorate([
-    FExecutionRegister(MoveFrontElementsBeforeTargetElementRequest)
-], MoveFrontElementsBeforeTargetElementExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MoveFrontElementsBeforeTargetElementExecution, decorators: [{
+GetNodesRectExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetNodesRectExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+GetNodesRectExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetNodesRectExecution });
+GetNodesRectExecution = __decorate([
+    FExecutionRegister(GetNodesRectRequest)
+], GetNodesRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetNodesRectExecution, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class UpdateItemAndChildrenLayersRequest {
-    constructor(item, itemContainer) {
-        this.item = item;
-        this.itemContainer = itemContainer;
+class GetPositionInFlowRequest {
+    constructor(position) {
+        this.position = position;
     }
 }
 
-let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExecution {
-    constructor(fComponentsStore, fMediator) {
+let GetPositionInFlowExecution = class GetPositionInFlowExecution {
+    constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
     }
-    get fGroupsContainer() {
-        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
-    }
-    get fNodesContainer() {
-        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
+    get transform() {
+        return this.fComponentsStore.transform;
     }
-    get fConnectionsContainer() {
-        return this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement;
+    get flowHost() {
+        return this.fComponentsStore.flowHost;
     }
     handle(request) {
-        switch (request.itemContainer) {
-            case this.fGroupsContainer:
-                this.handleGroup(request);
-                break;
-            case this.fNodesContainer:
-                this.handleNode(request);
-                break;
-            case this.fConnectionsContainer:
-                this.handleConnection(request);
-                break;
-            default:
-                throw new Error('Unknown container');
-        }
+        return Point.fromPoint(request.position).elementTransform(this.flowHost)
+            .sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
     }
-    handleGroup(request) {
-        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
-        const childrenGroups = this.getChildrenGroups(childrenNodesAndGroups);
-        this.updateLayers(this.fGroupsContainer, request.item.hostElement, childrenGroups);
-        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
-        if (childrenNodes.length) {
-            this.updateLayers(this.fNodesContainer, childrenNodes[0], childrenNodes);
-        }
+};
+GetPositionInFlowExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetPositionInFlowExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+GetPositionInFlowExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetPositionInFlowExecution });
+GetPositionInFlowExecution = __decorate([
+    FExecutionRegister(GetPositionInFlowRequest)
+], GetPositionInFlowExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetPositionInFlowExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
+let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
+    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fMediator = fMediator;
     }
-    handleNode(request) {
-        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
-        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
-        this.updateLayers(request.itemContainer, request.item.hostElement, childrenNodes);
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    handleConnection(request) {
-        this.updateLayers(request.itemContainer, request.item.hostElement, []);
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
-    updateLayers(itemContainer, item, elementsThatShouldBeInFront) {
-        const allElements = Array.from(itemContainer.children);
-        const targetIndex = allElements.findIndex((x) => x === item);
-        if (this.isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront)) {
-            this.fMediator.send(new MoveFrontElementsBeforeTargetElementRequest(itemContainer, allElements, elementsThatShouldBeInFront, targetIndex));
+    handle() {
+        const isValid = this.isValidRequest();
+        if (!isValid) {
+            return;
+        }
+        const fNode = this.fDraggableDataContext.draggableItems[0].fNode;
+        const outputsOfNode = this.getOutputsForNode(fNode);
+        const inputsOfNode = this.getInputsForNode(fNode);
+        const isCantBeConnectedByOutput = outputsOfNode.some((x) => !x.canBeConnected);
+        const isCantBeConnectedByInput = this.fComponentsStore.fConnections.some((x) => {
+            return inputsOfNode.find((input) => input.id === x.fInputId);
+        });
+        if (!isCantBeConnectedByInput && outputsOfNode.length && !isCantBeConnectedByOutput && inputsOfNode.length) {
+            const output = outputsOfNode[0];
+            const input = inputsOfNode[0];
+            // const outgoingConnections = this.getOutgoingConnectionsHandler.handle([ output ]);
+            // const incomingConnections = this.getIncomingConnectionsHandler.handle([ input ]);
+            // if (outgoingConnections.length === 0 && incomingConnections.length === 0) {
+            //   const connections = this.findConnectionsUnderNode(fNode);
+            //   if (connections.length) {
+            //     //TODO: need to implement
+            //   }
+            // }
         }
     }
-    isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront) {
-        for (let i = targetIndex + 1; i < allElements.length; i++) {
-            if (!elementsThatShouldBeInFront.includes(allElements[i])) {
-                return true;
-            }
-        }
-        return false;
+    isValidRequest() {
+        const result = this.fDraggableDataContext.draggableItems.length === 1 &&
+            this.fDraggableDataContext.draggableItems[0] instanceof NodeDragHandler;
+        return result;
     }
-    getChildrenGroups(elements) {
-        const allElements = Array.from(this.fGroupsContainer.children);
-        return elements.filter((x) => this.fGroupsContainer.contains(x))
-            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+    getOutputsForNode(node) {
+        return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
     }
-    getChildrenNodes(elements) {
-        const allElements = Array.from(this.fNodesContainer.children);
-        return elements.filter((x) => this.fNodesContainer.contains(x))
-            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+    getInputsForNode(node) {
+        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
     }
-    getChildrenNodesAndGroups(fId) {
-        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId)).map((x) => x.hostElement);
+    findConnectionsUnderNode(node) {
+        const nodeRect = this.fMediator.send(new GetElementRectInFlowRequest(node.hostElement));
+        return this.fComponentsStore.fConnections.filter((x) => {
+            // const intersection = [];// RectExtensions.intersectionWithVector(nodeRect, x.line.point1, x.line.point2, 0, 0, 0, 0);
+            return ([]).length > 0;
+        });
     }
 };
-UpdateItemAndChildrenLayersExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-UpdateItemAndChildrenLayersExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateItemAndChildrenLayersExecution });
-UpdateItemAndChildrenLayersExecution = __decorate([
-    FExecutionRegister(UpdateItemAndChildrenLayersRequest)
-], UpdateItemAndChildrenLayersExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, decorators: [{
+IsConnectionUnderNodeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IsConnectionUnderNodeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+IsConnectionUnderNodeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IsConnectionUnderNodeExecution });
+IsConnectionUnderNodeExecution = __decorate([
+    FExecutionRegister(IsConnectionUnderNodeRequest)
+], IsConnectionUnderNodeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IsConnectionUnderNodeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }]; } });
 
-let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution {
-    constructor(fDraggableDataContext, fMediator) {
-        this.fDraggableDataContext = fDraggableDataContext;
+class RedrawConnectionsRequest {
+}
+
+let RedrawConnectionsExecution = class RedrawConnectionsExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
     }
     handle(request) {
-        this.selectNodeIfNotSelected(request.node);
-        this.fMediator.send(new UpdateItemAndChildrenLayersRequest(request.node, request.node.hostElement.parentElement));
-    }
-    selectNodeIfNotSelected(node) {
-        if (!this.fDraggableDataContext.selectedItems.includes(node) && !node.fSelectionDisabled) {
-            this.fDraggableDataContext.selectedItems.push(node);
-            node.select();
-            this.fDraggableDataContext.isSelectedChanged = true;
+        this.resetConnectors();
+        if (this.fComponentsStore.fTempConnection) {
+            this.setMarkers(this.fComponentsStore.fTempConnection);
         }
+        if (this.fComponentsStore.fSnapConnection) {
+            this.setMarkers(this.fComponentsStore.fSnapConnection);
+        }
+        this.fComponentsStore.fConnections.forEach((connection) => {
+            const output = this.fComponentsStore.fOutputs.find((x) => x.id === connection.fOutputId);
+            const input = this.fComponentsStore.fInputs.find((x) => x.id === connection.fInputId);
+            if (output && input) {
+                this.setupConnection(output, input, connection);
+            }
+        });
+    }
+    resetConnectors() {
+        this.fComponentsStore.fOutputs.forEach((output) => output.setConnected(false));
+        this.fComponentsStore.fInputs.forEach((input) => input.setConnected(false));
+    }
+    setupConnection(output, input, connection) {
+        output.setConnected(true);
+        input.setConnected(true);
+        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.select() : null;
+    }
+    getLine(output, input, connection) {
+        const outputRect = this.fMediator.send(new GetElementRectInFlowRequest(output.hostElement));
+        const inputRect = this.fMediator.send(new GetElementRectInFlowRequest(input.hostElement));
+        return this.fMediator.send(new GetConnectionLineRequest(outputRect, inputRect, connection.fBehavior, output.fConnectableSide, input.fConnectableSide));
+    }
+    setMarkers(connection) {
+        this.fMediator.send(new CreateConnectionMarkersRequest(connection));
     }
 };
-SelectAndUpdateNodeLayerExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-SelectAndUpdateNodeLayerExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAndUpdateNodeLayerExecution });
-SelectAndUpdateNodeLayerExecution = __decorate([
-    FExecutionRegister(SelectAndUpdateNodeLayerRequest)
-], SelectAndUpdateNodeLayerExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, decorators: [{
+RedrawConnectionsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RedrawConnectionsExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+RedrawConnectionsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RedrawConnectionsExecution });
+RedrawConnectionsExecution = __decorate([
+    FExecutionRegister(RedrawConnectionsRequest)
+], RedrawConnectionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RedrawConnectionsExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }, { type: i2.FMediator }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
 class ShowConnectionsAfterCalculationsRequest {
 }
@@ -6404,16 +6748,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FTransformStore }, { type: FComponentsStore }]; } });
 
+const F_CANVAS_ANIMATION_DURATION = 150;
+
 function createSVGElement(tag, fBrowser) {
     return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
 }
 
 const COMMON_PROVIDERS = [
-    CenterGroupOrNodeExecution,
-    ClearSelectionExecution,
+    ...F_CANVAS_FEATURES,
+    ...F_CONNECTION_FEATURES,
+    ...F_BACKGROUND_FEATURES,
     CreateConnectionMarkersExecution,
     CreateRoundedRectFromElementExecution,
     EmitTransformChangesExecution,
+    ...F_SELECTION_FEATURES,
     GetCanBeSelectedItemsExecution,
     GetDeepChildrenNodesAndGroupsExecution,
     GetConnectionLineExecution,
@@ -6421,14 +6769,9 @@ const COMMON_PROVIDERS = [
     ...GET_FLOW_STATE_PROVIDERS,
     GetScaledNodeRectsWithFlowPositionExecution,
     GetNodesRectExecution,
-    GetOutputRectInFlowExecution,
     GetPositionInFlowExecution,
-    GetSelectionExecution,
     IsConnectionUnderNodeExecution,
     RedrawConnectionsExecution,
-    SelectExecution,
-    SelectAllExecution,
-    SelectAndUpdateNodeLayerExecution,
     ShowConnectionsAfterCalculationsExecution,
     SortItemLayersExecution,
     SortItemsByParentExecution,
@@ -6436,17 +6779,16 @@ const COMMON_PROVIDERS = [
     SubscribeOnTransformChangesExecution,
     UpdateItemAndChildrenLayersExecution,
     MoveFrontElementsBeforeTargetElementExecution,
-    GetInputRectInFlowExecution,
 ];
 
-let uniqueId$3 = 0;
+let uniqueId$2 = 0;
 class FRectPatternComponent {
     constructor(elementReference, fBrowser) {
         this.elementReference = elementReference;
         this.fBrowser = fBrowser;
         this._subscription$ = new Subscription();
         this._stateChanges = new Subject();
-        this.id = `f-pattern-${uniqueId$3++}`;
+        this.id = `f-pattern-${uniqueId$2++}`;
         this._vColor = 'rgba(0,0,0,0.1)';
         this._hColor = 'rgba(0,0,0,0.1)';
         this._vSize = 20;
@@ -6553,14 +6895,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-let uniqueId$2 = 0;
+let uniqueId$1 = 0;
 class FCirclePatternComponent {
     constructor(elementReference, fBrowser) {
         this.elementReference = elementReference;
         this.fBrowser = fBrowser;
         this._subscription$ = new Subscription();
         this._stateChanges = new Subject();
-        this.id = `f-pattern-${uniqueId$2++}`;
+        this.id = `f-pattern-${uniqueId$1++}`;
         this._color = 'rgba(0,0,0,0.1)';
         this._radius = 20;
         this._scaledRadius = 20;
@@ -6658,13 +7000,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Directive
         }] });
 
-let uniqueId$1 = 0;
 class FBackgroundComponent extends FBackgroundBase {
-    constructor(elementReference, fComponentsStore, fBrowser) {
+    constructor(elementReference, fComponentsStore, fMediator) {
         super();
         this.elementReference = elementReference;
         this.fComponentsStore = fComponentsStore;
-        this.fBrowser = fBrowser;
+        this.fMediator = fMediator;
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -6673,23 +7014,7 @@ class FBackgroundComponent extends FBackgroundBase {
         this.fComponentsStore.fBackground = this;
     }
     ngAfterContentInit() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const children = ((_a = this.fBackgroundPattern) === null || _a === void 0 ? void 0 : _a.hostElement.getElementsByTagName('pattern')) || [];
-        const pattern = children.length ? children[0] : undefined;
-        if (pattern) {
-            const defs = createSVGElement('defs', this.fBrowser);
-            pattern.id = 'f-background-marker-' + uniqueId$1++;
-            (_b = this.fBackgroundPattern) === null || _b === void 0 ? void 0 : _b.hostElement.remove();
-            defs.appendChild(pattern);
-            (_d = (_c = this.hostElement) === null || _c === void 0 ? void 0 : _c.firstChild) === null || _d === void 0 ? void 0 : _d.appendChild(defs);
-            const rect = createSVGElement('rect', this.fBrowser);
-            rect.setAttribute('fill', 'url(#' + pattern.id + ')');
-            rect.setAttribute('width', '100%');
-            rect.setAttribute('height', '100%');
-            (_e = this.hostElement.firstChild) === null || _e === void 0 ? void 0 : _e.appendChild(rect);
-            const transform = ((_f = this.fComponentsStore.fCanvas) === null || _f === void 0 ? void 0 : _f.transform) || TransformModelExtensions.default();
-            (_g = this.fBackgroundPattern) === null || _g === void 0 ? void 0 : _g.setTransform(transform);
-        }
+        this.fMediator.send(new AddPatternToBackgroundRequest(this.fBackgroundPattern));
     }
     isBackgroundElement(element) {
         return this.hostElement.contains(element);
@@ -6702,13 +7027,13 @@ class FBackgroundComponent extends FBackgroundBase {
         this.fComponentsStore.fBackground = undefined;
     }
 }
-FBackgroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FBackgroundComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Component });
-FBackgroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FBackgroundComponent, selector: "f-background", host: { classAttribute: "f-component f-background" }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], queries: [{ propertyName: "fBackgroundPattern", first: true, predicate: F_BACKGROUND_PATTERN, descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg><ng-content></ng-content></svg>\n", styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FBackgroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FBackgroundComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Component });
+FBackgroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FBackgroundComponent, selector: "f-background", host: { classAttribute: "f-component f-background" }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], queries: [{ propertyName: "fBackgroundPattern", first: true, predicate: F_BACKGROUND_PATTERN, descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg><ng-content></ng-content></svg>", isInline: true, styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FBackgroundComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "f-background",
-                    templateUrl: "./f-background.component.html",
+                    template: "<svg><ng-content></ng-content></svg>",
                     styleUrls: ["./f-background.component.scss"],
                     host: {
                         'class': 'f-component f-background'
@@ -6716,7 +7041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: i1.BrowserService }]; }, propDecorators: { fBackgroundPattern: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: i2.FMediator }]; }, propDecorators: { fBackgroundPattern: [{
                 type: ContentChild,
                 args: [F_BACKGROUND_PATTERN, { static: false }]
             }] } });
@@ -6735,27 +7060,25 @@ class FCanvasChangeEvent {
 }
 
 const F_CANVAS = new InjectionToken('F_CANVAS');
-const MIXIN_BASE = mixinChangePosition(mixinFitToParent(mixinOneToOneCentering(mixinChangeZoom(class {
-    constructor(transform) {
-        this.transform = transform;
-    }
-}))));
-class FCanvasBase extends MIXIN_BASE {
+class FCanvasBase {
     constructor() {
-        super(TransformModelExtensions.default());
+        this.transform = TransformModelExtensions.default();
+    }
+    getPosition() {
+        return this.transform.position;
     }
-    completeDrag() {
-        this.fCanvasChange.emit(new FCanvasChangeEvent(this.getCanvasPosition(), this.transform.scale));
+    setPosition(position) {
+        this.transform.position = position;
     }
-    getCanvasPosition() {
-        return PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
+    emitCanvasChangeEvent() {
+        this.fCanvasChange.emit(new FCanvasChangeEvent(PointExtensions.sum(this.transform.position, this.transform.scaledPosition), this.transform.scale));
     }
 }
 FCanvasBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FCanvasBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FCanvasBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FCanvasBase, usesInheritance: true, ngImport: i0 });
+FCanvasBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FCanvasBase, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FCanvasBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 class FCanvasComponent extends FCanvasBase {
     constructor(elementReference, fMediator, fComponentsStore) {
@@ -6766,22 +7089,10 @@ class FCanvasComponent extends FCanvasBase {
         this.fCanvasChange = new EventEmitter();
     }
     set position(value) {
-        if (!value) {
-            return;
-        }
-        const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
-        if (!PointExtensions.isEqual(position, value)) {
-            this.transform.position = value;
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.redraw();
-        }
+        this.fMediator.send(new InputCanvasPositionRequest(this.transform, value));
     }
     set scale(value) {
-        if (!value) {
-            return;
-        }
-        this.transform.scale = value;
-        this.redraw();
+        this.fMediator.send(new InputCanvasScaleRequest(this.transform, value));
     }
     get fNodes() {
         return this.fComponentsStore.fNodes;
@@ -6810,36 +7121,22 @@ class FCanvasComponent extends FCanvasBase {
         this.fMediator.send(new CenterGroupOrNodeRequest(id, animated));
     }
     fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
-        const fNodesRect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize();
-        if (fNodesRect.width === 0 || fNodesRect.height === 0) {
-            return;
-        }
-        this.fitToParent(fNodesRect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fNodes.map((x) => {
-            return Point.fromPoint(x.position);
-        }), toCenter);
-        animated ? this.redrawWithAnimation() : this.redraw();
-        this.completeDrag();
-        setTimeout(() => {
-            this.fComponentsStore.componentDataChanged();
-        }, F_CANVAS_ANIMATION_DURATION);
+        this.fMediator.send(new FitToFlowRequest(toCenter, animated));
     }
-    oneToOne() {
-        const fNodesRect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize();
-        if (fNodesRect.width === 0 || fNodesRect.height === 0) {
-            return;
-        }
-        this.oneToOneCentering(fNodesRect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fNodes.map((x) => {
-            return Point.fromPoint(x.position);
-        }));
-        this.redrawWithAnimation();
-        this.completeDrag();
-        setTimeout(() => {
-            this.fComponentsStore.componentDataChanged();
-        }, F_CANVAS_ANIMATION_DURATION);
+    resetScaleAndCenter(animated = true) {
+        this.fMediator.send(new ResetScaleAndCenterRequest(animated));
+    }
+    setZoom(scale, toPosition = PointExtensions.initialize()) {
+        this.fMediator.send(new UpdateScaleRequest(scale, toPosition));
+    }
+    resetZoom() {
+        this.fMediator.send(new ResetScaleRequest());
     }
 }
 FCanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FCanvasComponent, deps: [{ token: i0.ElementRef }, { token: i2.FMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
-FCanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, static: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FCanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
+        { provide: F_CANVAS, useExisting: FCanvasComponent }
+    ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, static: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FCanvasComponent, decorators: [{
             type: Component,
             args: [{
@@ -6850,7 +7147,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     host: {
                         'class': 'f-component f-canvas',
                     },
-                    providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }],
+                    providers: [
+                        { provide: F_CANVAS, useExisting: FCanvasComponent }
+                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.FMediator }, { type: FComponentsStore }]; }, propDecorators: { fCanvasChange: [{
@@ -7133,21 +7432,6 @@ const F_LINE_ALIGNMENT_PROVIDERS = [
     FLineAlignmentComponent
 ];
 
-function checkRectIsFinite(rect) {
-    if (!Number.isFinite(rect.width) || !Number.isFinite(rect.height) || !Number.isFinite(rect.x) || !Number.isFinite(rect.y)) {
-        return RectExtensions.initialize(0, 0, 0, 0);
-    }
-    return rect;
-}
-
-class FMinimapData {
-    constructor(element, scale = 1, viewBox = RectExtensions.initialize(0, 0, 0, 0)) {
-        this.element = element;
-        this.scale = scale;
-        this.viewBox = viewBox;
-    }
-}
-
 class FMinimapFlowDirective {
     constructor(elementReference, fMediator, fComponentsStore) {
         this.elementReference = elementReference;
@@ -7379,69 +7663,6 @@ const F_MINIMAP_PROVIDERS = [
     FMinimapFlowDirective,
 ];
 
-class FSelectionAreaBase {
-}
-FSelectionAreaBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FSelectionAreaBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FSelectionAreaBase, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaBase, decorators: [{
-            type: Directive
-        }] });
-
-class FSelectionAreaComponent extends FSelectionAreaBase {
-    constructor(elementReference, fMediator) {
-        super();
-        this.elementReference = elementReference;
-        this.fMediator = fMediator;
-    }
-    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.send(new SelectionAreaPreparationRequest(event, this));
-    }
-    onPointerUp(event) {
-        this.fMediator.send(new SelectionAreaFinalizeRequest(event));
-    }
-}
-FSelectionAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Component });
-FSelectionAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FSelectionAreaComponent, selector: "f-selection-area", 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: "12.2.17", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "f-selection-area",
-                    template: ``,
-                    styleUrls: ['./f-selection-area.component.scss'],
-                    host: {
-                        'class': 'f-selection-area f-component'
-                    },
-                    providers: [
-                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.FMediator }]; } });
-
-const F_SELECTION_AREA_PROVIDERS = [
-    FSelectionAreaComponent
-];
-
 const F_FLOW = new InjectionToken('F_FLOW');
 class FFlowBase {
 }
@@ -7473,15 +7694,14 @@ class FFlowComponent extends FFlowBase {
         this.subscription$.add(this.subscribeOnComponentsCountChanges());
     }
     subscribeOnComponentsCountChanges() {
-        return this.fComponentsStore.componentsCount$.pipe(startWith(null), debounceTime(20)).subscribe(() => {
+        return this.fComponentsStore.componentsCount$.pipe(startWith(null), debounceTime(1)).subscribe(() => {
             this.fMediator.send(new SortItemLayersRequest());
         });
     }
     subscribeOnElementsChanges() {
-        return this.fComponentsStore.componentsData$.pipe(startWith(null), debounceTime(20)).subscribe(() => {
+        return this.fComponentsStore.componentsData$.pipe(startWith(null), debounceTime(1)).subscribe(() => {
             this.fMediator.send(new RedrawConnectionsRequest());
             if (!this.isLoaded) {
-                // this.fMediator.send(new ShowConnectionsAfterCalculationsRequest());
                 this.isLoaded = true;
                 this.fLoaded.emit();
             }
@@ -7525,8 +7745,8 @@ FFlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         FTransformStore,
         FDraggableDataContext,
         FConnectionFactory,
-        ...F_DRAGGABLE_PROVIDERS,
         ...COMMON_PROVIDERS,
+        ...F_DRAGGABLE_PROVIDERS,
         { provide: F_FLOW, useExisting: FFlowComponent },
     ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content select=\"f-minimap\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FFlowComponent, decorators: [{
@@ -7545,8 +7765,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         FTransformStore,
                         FDraggableDataContext,
                         FConnectionFactory,
-                        ...F_DRAGGABLE_PROVIDERS,
                         ...COMMON_PROVIDERS,
+                        ...F_DRAGGABLE_PROVIDERS,
                         { provide: F_FLOW, useExisting: FFlowComponent },
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -7612,7 +7832,7 @@ class FZoomBase {
         const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
         this.fCanvas.setZoom(result, pointerPositionInFlow);
         this.fCanvas.redraw();
-        this.fCanvas.completeDrag();
+        this.fCanvas.emitCanvasChangeEvent();
     }
     onDoubleClick(event) {
         var _a;
@@ -7629,7 +7849,7 @@ class FZoomBase {
         const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
         this.fCanvas.setZoom(result, pointerPositionInFlow);
         this.fCanvas.redrawWithAnimation();
-        this.fCanvas.completeDrag();
+        this.fCanvas.emitCanvasChangeEvent();
     }
     onZoomToCenter(deltaY, position) {
         const preventDefault = () => {
@@ -7648,7 +7868,7 @@ class FZoomBase {
     reset() {
         this.fCanvas.resetZoom();
         this.fCanvas.redraw();
-        this.fCanvas.completeDrag();
+        this.fCanvas.emitCanvasChangeEvent();
     }
     unsubscribe() {
         this.listeners();
@@ -7717,7 +7937,7 @@ const F_ZOOM_PROVIDERS = [
 class FFlowModule {
 }
 FFlowModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FFlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FFlowModule, declarations: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, 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, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective] });
+FFlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", 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] });
 FFlowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FFlowModule, imports: [[
             CommonModule,
         ]] });
@@ -7762,5 +7982,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, CANVAS_MOVE_FINALIZE_PROVIDERS, CANVAS_MOVE_PREPARATION_PROVIDERS, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS, CREATE_CONNECTION_FINALIZE_PROVIDERS, CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS, CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS, CREATE_CONNECTION_PREPARATION_PROVIDERS, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMoveFinalizeValidator, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CanvasMovePreparationValidator, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, ConnectionBaseDragHandler, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionDragHandlerExecution, CreateConnectionDragHandlerRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFinalizeValidator, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionFromOutputPreparationValidator, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateConnectionPreparationValidator, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, CreateRoundedRectFromElementExecution, CreateRoundedRectFromElementRequest, DRAG_AND_DROP_COMMON_PROVIDERS, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EXTERNAL_ITEM_FINALIZE_PROVIDERS, EXTERNAL_ITEM_PREPARATION_PROVIDERS, EmitTransformChangesExecution, EmitTransformChangesRequest, ExternalItemDragHandler, ExternalItemFinalizeExecution, ExternalItemFinalizeRequest, ExternalItemFinalizeValidator, ExternalItemPreparationExecution, ExternalItemPreparationRequest, ExternalItemPreparationValidator, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FRectPatternComponent, FResizeHandleDirective, FResizeObserver, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSnapConnectionComponent, FStraightPathBuilder, FTransformStore, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_ANIMATION_DURATION, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_PROVIDERS, 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_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, 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_ZOOM, F_ZOOM_PROVIDERS, GET_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS, GET_FLOW_STATE_PROVIDERS, GET_INPUT_UNDER_POINTER_PROVIDERS, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeConnectedOutputByOutletValidator, GetCanBeSelectedItemsExecution, GetConnectionLineExecution, GetConnectionLineRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRectInFlowExecution, GetElementRectInFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetInputRectInFlowExecution, GetInputRectInFlowRequest, GetInputRectInFlowResponse, GetInputUnderPointerExecution, GetInputUnderPointerRequest, GetInputUnderPointerValidator, GetNodeMoveRestrictionsExecution, GetNodeMoveRestrictionsRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesRectExecution, GetNodesRectRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedNodeRectExecution, GetNormalizedNodeRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetOutputRectInFlowExecution, GetOutputRectInFlowRequest, GetOutputRectInFlowResponse, GetParentNodesExecution, GetParentNodesRequest, GetPositionInFlowExecution, GetPositionInFlowRequest, GetScaledNodeRectsWithFlowPositionExecution, GetScaledNodeRectsWithFlowPositionRequest, GetSelectionExecution, GetSelectionRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, LineElement, LineService, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragFinalizeValidator, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDragPreparationValidator, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_MOVE_FINALIZE_PROVIDERS, NODE_MOVE_PREPARATION_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_FINALIZE_PROVIDERS, NODE_RESIZE_PREPARATION_PROVIDERS, NODE_RESIZE_PROVIDERS, NearestCoordinateFinder, NodeDragHandler, NodeMoveFinalizeExecution, NodeMoveFinalizeRequest, NodeMoveFinalizeValidator, NodeMovePreparationExecution, NodeMovePreparationRequest, NodeMovePreparationValidator, NodeResizeByChildDragHandler, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizeFinalizeValidator, NodeResizePreparationExecution, NodeResizePreparationRequest, NodeResizePreparationValidator, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, REASSIGN_CONNECTION_FINALIZE_PROVIDERS, REASSIGN_CONNECTION_PREPARATION_PROVIDERS, RESIZE_DIRECTIONS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionFinalizeValidator, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, ReassignConnectionPreparationValidator, RedrawConnectionsExecution, RedrawConnectionsRequest, SELECTION_AREA_FINALIZE_PROVIDERS, SELECTION_AREA_PREPARATION_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaFinalizeValidator, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SelectionAreaPreparationValidator, ShowConnectionsAfterCalculationsExecution, ShowConnectionsAfterCalculationsRequest, SingleSelectExecution, SingleSelectRequest, SingleSelectValidator, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SubscribeOnTransformChangesExecution, SubscribeOnTransformChangesRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, checkRectIsFinite, createSVGElement, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isGroup, isNode, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangePosition, mixinChangeSelection, mixinChangeVisibility, mixinChangeZoom, mixinFitToParent, mixinOneToOneCentering };
+export { AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, CANVAS_MOVE_FINALIZE_PROVIDERS, CANVAS_MOVE_PREPARATION_PROVIDERS, 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, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMoveFinalizeValidator, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CanvasMovePreparationValidator, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, ConnectionBaseDragHandler, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionDragHandlerExecution, CreateConnectionDragHandlerRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFinalizeValidator, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionFromOutputPreparationValidator, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateConnectionPreparationValidator, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, CreateRoundedRectFromElementExecution, CreateRoundedRectFromElementRequest, DRAG_AND_DROP_COMMON_PROVIDERS, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EXTERNAL_ITEM_FINALIZE_PROVIDERS, EXTERNAL_ITEM_PREPARATION_PROVIDERS, EmitTransformChangesExecution, EmitTransformChangesRequest, ExternalItemDragHandler, ExternalItemFinalizeExecution, ExternalItemFinalizeRequest, ExternalItemFinalizeValidator, ExternalItemPreparationExecution, ExternalItemPreparationRequest, ExternalItemPreparationValidator, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FRectPatternComponent, FResizeHandleDirective, FResizeObserver, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSnapConnectionComponent, FStraightPathBuilder, FTransformStore, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_ANIMATION_DURATION, 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_PROVIDERS, 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_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, 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_ZOOM, F_ZOOM_PROVIDERS, FindClosestInputUsingSnapThresholdExecution, FindClosestInputUsingSnapThresholdRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputPositionsExecution, GetAllCanBeConnectedInputPositionsRequest, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeConnectedOutputByOutletValidator, GetCanBeSelectedItemsExecution, GetConnectionLineExecution, GetConnectionLineRequest, GetConnectorWithRectExecution, GetConnectorWithRectRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRectInFlowExecution, GetElementRectInFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetInputUnderPointerExecution, GetInputUnderPointerRequest, GetInputUnderPointerValidator, GetNodeMoveRestrictionsExecution, GetNodeMoveRestrictionsRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesRectExecution, GetNodesRectRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedNodeRectExecution, GetNormalizedNodeRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetParentNodesExecution, GetParentNodesRequest, GetPositionInFlowExecution, GetPositionInFlowRequest, GetScaledNodeRectsWithFlowPositionExecution, GetScaledNodeRectsWithFlowPositionRequest, GetSelectionExecution, GetSelectionRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, LineElement, LineService, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragFinalizeValidator, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDragPreparationValidator, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_MOVE_FINALIZE_PROVIDERS, NODE_MOVE_PREPARATION_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_FINALIZE_PROVIDERS, NODE_RESIZE_PREPARATION_PROVIDERS, NODE_RESIZE_PROVIDERS, NearestCoordinateFinder, NodeDragHandler, NodeMoveFinalizeExecution, NodeMoveFinalizeRequest, NodeMoveFinalizeValidator, NodeMovePreparationExecution, NodeMovePreparationRequest, NodeMovePreparationValidator, NodeResizeByChildDragHandler, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizeFinalizeValidator, NodeResizePreparationExecution, NodeResizePreparationRequest, NodeResizePreparationValidator, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionFinalizeValidator, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, ReassignConnectionPreparationValidator, RedrawConnectionsExecution, RedrawConnectionsRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, SELECTION_AREA_FINALIZE_PROVIDERS, SELECTION_AREA_PREPARATION_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaFinalizeValidator, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SelectionAreaPreparationValidator, ShowConnectionsAfterCalculationsExecution, ShowConnectionsAfterCalculationsRequest, SingleSelectExecution, SingleSelectRequest, SingleSelectValidator, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SubscribeOnTransformChangesExecution, SubscribeOnTransformChangesRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateScaleExecution, UpdateScaleRequest, checkRectIsFinite, createSVGElement, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isGroup, isNode, isNodeOutlet, isNodeOutput, mixinChangeSelection, mixinChangeVisibility };
 //# sourceMappingURL=foblex-flow.js.map