@foblex/flow 12.6.4 → 12.6.6

package/fesm2015/foblex-flow.js

@@ -1,28 +1,29 @@
-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 { Subject, Observable, Subscription, merge } from 'rxjs';
-import { debounceTime, startWith } from 'rxjs/operators';
 import { __decorate } from 'tslib';
+import { RoundedRect, RectExtensions, Point, PointExtensions, LineExtensions, SizeExtensions, GetIntersections, Line, TransformModelExtensions } from '@foblex/2d';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, Directive, Input, HostBinding, EventEmitter, Output, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, ContentChildren, NgZone, ContentChild, NgModule } from '@angular/core';
 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 { Subject, Observable, Subscription, merge } from 'rxjs';
+import { debounceTime, startWith } from 'rxjs/operators';
 import * as i8 from '@angular/common';
 import { CommonModule } from '@angular/common';
 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 AddPatternToBackgroundRequest {
+    constructor(fPattern) {
+        this.fPattern = fPattern;
     }
 }
 
-const F_CANVAS_ANIMATION_DURATION = 150;
+class CreateConnectionMarkersRequest {
+    constructor(fConnection) {
+        this.fConnection = fConnection;
+    }
+}
 
 class FComponentsStore {
     constructor() {
@@ -84,47 +85,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }] });
 
-let CenterGroupOrNodeExecution = class CenterGroupOrNodeExecution {
-    constructor(fComponentsStore) {
+let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
+    constructor(fBrowser, fComponentsStore) {
+        this.fBrowser = fBrowser;
         this.fComponentsStore = fComponentsStore;
     }
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
+    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) {
-        const fNode = this.getNode(request.id);
-        if (!fNode) {
-            return;
-        }
-        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);
+        return this.setRadiusFromElement(RoundedRect.fromRect(RectExtensions.fromElement(request.element)), request.element);
     }
-    toCenter(fNodeRect, fFlowRect, position) {
-        this.transform.scaledPosition = PointExtensions.initialize();
-        this.transform.position = PointExtensions.initialize((fFlowRect.width - fNodeRect.width) / 2 - position.x * this.transform.scale, (fFlowRect.height - fNodeRect.height) / 2 - position.y * this.transform.scale);
+    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;
     }
-    getNode(id) {
-        return this.fComponentsStore.fNodes.find((x) => x.fId === id);
+    getComputedStyle(element) {
+        return this.fBrowser.window.getComputedStyle(element);
     }
-    getNodeRect(fNode) {
-        return RectExtensions.fromElement(fNode.hostElement);
+    toPixels(value, element, fontSize) {
+        return this.fBrowser.toPixels(value, element.clientWidth, element.clientHeight, fontSize) || 0;
     }
-    getFlowRect() {
-        return RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement);
+};
+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();
     }
 };
-CenterGroupOrNodeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CenterGroupOrNodeExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-CenterGroupOrNodeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CenterGroupOrNodeExecution });
-CenterGroupOrNodeExecution = __decorate([
-    FExecutionRegister(CenterGroupOrNodeRequest)
-], CenterGroupOrNodeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CenterGroupOrNodeExecution, decorators: [{
+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: FComponentsStore }]; } });
+        }], ctorParameters: function () { return [{ type: FTransformStore }]; } });
 
 class ClearSelectionRequest {
 }
@@ -188,7 +256,7 @@ class CanvasDragHandler {
         this.fComponentsStore.fCanvas.redraw();
     }
     complete() {
-        this.fComponentsStore.fCanvas.completeDrag();
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
     }
 }
 
@@ -292,95 +360,359 @@ const CANVAS_PROVIDERS = [
     ...CANVAS_MOVE_PREPARATION_PROVIDERS,
 ];
 
-var EFConnectableSide;
-(function (EFConnectableSide) {
-    EFConnectableSide["LEFT"] = "left";
-    EFConnectableSide["RIGHT"] = "right";
-    EFConnectableSide["TOP"] = "top";
-    EFConnectableSide["BOTTOM"] = "bottom";
-    EFConnectableSide["AUTO"] = "auto";
-})(EFConnectableSide || (EFConnectableSide = {}));
+class FindClosestInputUsingSnapThresholdRequest {
+    constructor(position, canBeConnectedInputs, snapThreshold) {
+        this.position = position;
+        this.canBeConnectedInputs = canBeConnectedInputs;
+        this.snapThreshold = snapThreshold;
+    }
+}
 
-class CalculateConnectorConnectableSideHandler {
-    handle(request) {
+let FindClosestInputUsingSnapThresholdExecution = class FindClosestInputUsingSnapThresholdExecution {
+    handle(payload) {
         let result;
-        if (request.fConnector._fConnectableSide === EFConnectableSide.AUTO) {
-            result = this.getSideByDelta(request.fConnector.hostElement, request.fNodeHost);
-        }
-        else {
-            result = request.fConnector._fConnectableSide;
+        let minDistance = Infinity;
+        for (const element of payload.canBeConnectedInputs) {
+            const distance = this.distanceToRectangle(payload.position, element);
+            if (distance < minDistance) {
+                minDistance = distance;
+                result = element;
+            }
         }
-        return result;
+        return minDistance < payload.snapThreshold ? result : undefined;
     }
-    getSideByDelta(fConnectorHost, fNodeHost) {
-        let result;
-        const childRect = RectExtensions.fromElement(fConnectorHost);
-        const parentRect = fNodeHost.getBoundingClientRect();
-        const deltaLeft = childRect.gravityCenter.x - parentRect.left;
-        const deltaRight = parentRect.right - childRect.gravityCenter.x;
-        const deltaTop = childRect.gravityCenter.y - parentRect.top;
-        const deltaBottom = parentRect.bottom - childRect.gravityCenter.y;
-        const minDelta = Math.min(deltaLeft, deltaRight, deltaTop, deltaBottom);
-        if (minDelta === deltaLeft) {
-            result = EFConnectableSide.LEFT;
-        }
-        else if (minDelta === deltaRight) {
-            result = EFConnectableSide.RIGHT;
-        }
-        else if (minDelta === deltaTop) {
-            result = EFConnectableSide.TOP;
-        }
-        else {
-            result = EFConnectableSide.BOTTOM;
-        }
-        return result;
+    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 CalculateConnectorConnectableSideRequest {
-    constructor(fConnector, fNodeHost) {
-        this.fConnector = fConnector;
-        this.fNodeHost = fNodeHost;
+class GetAllCanBeConnectedInputPositionsRequest {
+    constructor(fOutputId) {
+        this.fOutputId = fOutputId;
     }
 }
 
-class FConnectorBase {
-    constructor() {
-        this.stateChanges = new Subject();
-        this.isSelfConnectable = true;
-        this.fConnectableSide = EFConnectableSide.AUTO;
-        this._fConnectableSide = EFConnectableSide.AUTO;
-    }
-    isContains(element) {
-        return this.hostElement.contains(element);
-    }
-    setConnected(isConnected) {
-        this.isConnected = isConnected;
+class GetConnectorWithRectRequest {
+    constructor(connector) {
+        this.connector = connector;
     }
 }
 
-const F_NODE_INPUT = new InjectionToken('F_NODE_INPUT');
-class FNodeInputBase extends FConnectorBase {
-    constructor() {
-        super(...arguments);
-        this.isConnected = false;
+let GetConnectorWithRectExecution = class GetConnectorWithRectExecution {
+    constructor(fMediator) {
+        this.fMediator = fMediator;
     }
-    get canBeConnected() {
-        return !this.disabled && (this.multiple ? true : !this.isConnected);
+    handle(request) {
+        return {
+            fConnector: request.connector,
+            fRect: this.fMediator.send(new GetElementRectInFlowRequest(request.connector.hostElement))
+        };
     }
-}
-FNodeInputBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FNodeInputBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FNodeInputBase, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FNodeInputBase, decorators: [{
-            type: Directive
-        }] });
+};
+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 }]; } });
 
-function isNodeInput(element) {
-    return !!element.closest('[fNodeInput]');
-}
+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 }]; } });
 
-function isGroup(element) {
-    return !!element.closest('[fGroup]');
+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 }]; } });
+
+function createErrorClass(impl) {
+    const _super = (instance) => {
+        Error.call(instance);
+    };
+    const constructor = impl(_super);
+    constructor.prototype = Object.create(Error.prototype);
+    constructor.prototype.constructor = constructor;
+    return constructor;
+}
+
+const NotFoundError = createErrorClass((_super) => function error(message) {
+    _super(this);
+    this.message = message || 'The requested resource was not found.';
+    this.code = 404;
+});
+
+const ConflictError = createErrorClass((_super) => function error(message) {
+    _super(this);
+    this.message = message || 'Conflict error occurred.';
+    this.code = 409;
+});
+
+function OutputNotFound(id) {
+    return new NotFoundError(`Output with fOutputId ${id} not found. Make sure there is no f-connection to a non-existent fOutput.`);
+}
+function InputNotFound(id) {
+    return new NotFoundError(`Input with fInputId ${id} not found. Make sure there is no f-connection to a non-existent fInput.`);
+}
+function RequiredOutput() {
+    return new ConflictError(`The fNode must contain at least one fOutput if there is an fOutlet`);
+}
+
+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 }]; } });
+
+const CONNECTION_DRAG_COMMON_PROVIDERS = [
+    FindClosestInputUsingSnapThresholdExecution,
+    GetAllCanBeConnectedInputPositionsExecution,
+    GetConnectorWithRectExecution,
+    GetInputUnderPointerExecution,
+    GetInputUnderPointerValidator
+];
+
+var EFConnectableSide;
+(function (EFConnectableSide) {
+    EFConnectableSide["LEFT"] = "left";
+    EFConnectableSide["RIGHT"] = "right";
+    EFConnectableSide["TOP"] = "top";
+    EFConnectableSide["BOTTOM"] = "bottom";
+    EFConnectableSide["AUTO"] = "auto";
+})(EFConnectableSide || (EFConnectableSide = {}));
+
+class CalculateConnectorConnectableSideHandler {
+    handle(request) {
+        let result;
+        if (request.fConnector._fConnectableSide === EFConnectableSide.AUTO) {
+            result = this.getSideByDelta(request.fConnector.hostElement, request.fNodeHost);
+        }
+        else {
+            result = request.fConnector._fConnectableSide;
+        }
+        return result;
+    }
+    getSideByDelta(fConnectorHost, fNodeHost) {
+        let result;
+        const childRect = RectExtensions.fromElement(fConnectorHost);
+        const parentRect = fNodeHost.getBoundingClientRect();
+        const deltaLeft = childRect.gravityCenter.x - parentRect.left;
+        const deltaRight = parentRect.right - childRect.gravityCenter.x;
+        const deltaTop = childRect.gravityCenter.y - parentRect.top;
+        const deltaBottom = parentRect.bottom - childRect.gravityCenter.y;
+        const minDelta = Math.min(deltaLeft, deltaRight, deltaTop, deltaBottom);
+        if (minDelta === deltaLeft) {
+            result = EFConnectableSide.LEFT;
+        }
+        else if (minDelta === deltaRight) {
+            result = EFConnectableSide.RIGHT;
+        }
+        else if (minDelta === deltaTop) {
+            result = EFConnectableSide.TOP;
+        }
+        else {
+            result = EFConnectableSide.BOTTOM;
+        }
+        return result;
+    }
+}
+
+class CalculateConnectorConnectableSideRequest {
+    constructor(fConnector, fNodeHost) {
+        this.fConnector = fConnector;
+        this.fNodeHost = fNodeHost;
+    }
+}
+
+class FConnectorBase {
+    constructor() {
+        this.stateChanges = new Subject();
+        this.isSelfConnectable = true;
+        this.fConnectableSide = EFConnectableSide.AUTO;
+        this._fConnectableSide = EFConnectableSide.AUTO;
+    }
+    isContains(element) {
+        return this.hostElement.contains(element);
+    }
+    setConnected(isConnected) {
+        this.isConnected = isConnected;
+    }
+}
+
+const F_NODE_INPUT = new InjectionToken('F_NODE_INPUT');
+class FNodeInputBase extends FConnectorBase {
+    constructor() {
+        super(...arguments);
+        this.isConnected = false;
+    }
+    get canBeConnected() {
+        return !this.disabled && (this.multiple ? true : !this.isConnected);
+    }
+}
+FNodeInputBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FNodeInputBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FNodeInputBase, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FNodeInputBase, decorators: [{
+            type: Directive
+        }] });
+
+function isGroup(element) {
+    return !!element.closest('[fGroup]');
 }
 
 function isNode(element) {
@@ -527,100 +859,13 @@ 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 {
+const MIXIN_BASE$1 = mixinChangeSelection(class {
     constructor(hostElement) {
         this.hostElement = hostElement;
     }
 });
-class FNodeBase extends MIXIN_BASE$2 {
+class FNodeBase extends MIXIN_BASE$1 {
     constructor() {
         super(...arguments);
         this.stateChanges = new Subject();
@@ -660,7 +905,7 @@ class FResizeObserver extends Observable {
     }
 }
 
-let uniqueId$c = 0;
+let uniqueId$d = 0;
 class FGroupDirective extends FNodeBase {
     constructor(elementReference, renderer, fComponentsStore, fMediator, fBrowser) {
         super(elementReference.nativeElement);
@@ -669,7 +914,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$d++}`;
         this.fParentId = null;
         this.positionChange = new EventEmitter();
         this.sizeChange = new EventEmitter();
@@ -793,7 +1038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-let uniqueId$b = 0;
+let uniqueId$c = 0;
 class FNodeDirective extends FNodeBase {
     constructor(elementReference, renderer, fComponentsStore, fMediator, fBrowser) {
         super(elementReference.nativeElement);
@@ -802,7 +1047,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$c++}`;
         this.fParentId = null;
         this.positionChange = new EventEmitter();
         this.sizeChange = new EventEmitter();
@@ -934,14 +1179,14 @@ const F_NODE_PROVIDERS = [
     FResizeHandleDirective,
 ];
 
-let uniqueId$a = 0;
+let uniqueId$b = 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$b++}`;
         this.multiple = true;
         this.isDisabled = false;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1037,14 +1282,14 @@ function isNodeOutlet(element) {
     return !!element.closest('[fNodeOutlet]');
 }
 
-let uniqueId$9 = 0;
+let uniqueId$a = 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$a++}`;
         this.isDisabled = false;
         this.fConnectableSide = EFConnectableSide.AUTO;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1120,14 +1365,14 @@ function isNodeOutput(element) {
     return !!element.closest('[fNodeOutput]');
 }
 
-let uniqueId$8 = 0;
+let uniqueId$9 = 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$9++}`;
         this.multiple = false;
         this.isDisabled = false;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1218,143 +1463,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);
-    };
-    const constructor = impl(_super);
-    constructor.prototype = Object.create(Error.prototype);
-    constructor.prototype.constructor = constructor;
-    return constructor;
-}
-
-const NotFoundError = createErrorClass((_super) => function error(message) {
-    _super(this);
-    this.message = message || 'The requested resource was not found.';
-    this.code = 404;
-});
-
-const ConflictError = createErrorClass((_super) => function error(message) {
-    _super(this);
-    this.message = message || 'Conflict error occurred.';
-    this.code = 409;
-});
-
-function OutputNotFound(id) {
-    return new NotFoundError(`Output with fOutputId ${id} not found. Make sure there is no f-connection to a non-existent fOutput.`);
-}
-function InputNotFound(id) {
-    return new NotFoundError(`Input with fInputId ${id} not found. Make sure there is no f-connection to a non-existent fInput.`);
-}
-function RequiredOutput() {
-    return new ConflictError(`The fNode must contain at least one fOutput if there is an fOutlet`);
-}
-
-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;
@@ -1444,15 +1552,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 +1580,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();
     }
 }
 
@@ -1543,15 +1681,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)
         ];
     }
 };
@@ -1764,8 +1901,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 +1930,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 +1949,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();
     }
 }
 
@@ -2498,12 +2663,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 +2750,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-let uniqueId$7 = 0;
+let uniqueId$8 = 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$8++}`;
         this.fText = '';
         this._fStartColor = 'black';
         this._fEndColor = 'black';
@@ -2643,11 +2808,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 +2873,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
-let uniqueId$6 = 0;
+let uniqueId$7 = 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$7++}`;
         this._fText = '';
         this._fStartColor = 'black';
         this._fEndColor = 'black';
@@ -2792,11 +2952,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;
     }
@@ -2808,7 +2963,7 @@ class FConnectionComponent extends FConnectionBase {
     }
 }
 FConnectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
-FConnectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FConnectionComponent, selector: "f-connection", inputs: { fId: ["fConnectionId", "fId"], fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled"], fSelectionDisabled: "fSelectionDisabled" }, host: { properties: { "attr.id": "fId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute;display:none}: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 });
+FConnectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FConnectionComponent, selector: "f-connection", inputs: { fId: ["fConnectionId", "fId"], fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled"], fSelectionDisabled: "fSelectionDisabled" }, host: { properties: { "attr.id": "fId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], 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: FConnectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2947,15 +3102,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-let uniqueId$5 = 0;
+let uniqueId$6 = 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$6++}`;
         this.fText = '';
         this._fStartColor = 'black';
         this._fEndColor = 'black';
+        this.fSnapThreshold = 20;
         this._fRadius = 8;
         this._fOffset = 32;
         this._behavior = EFConnectionBehavior.FIXED;
@@ -3005,26 +3161,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 +3192,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 +3238,8 @@ const F_CONNECTION_PROVIDERS = [
     FConnectionComponent,
     FConnectionCenterDirective,
     FConnectionForCreateComponent,
-    FMarkerDirective
+    FMarkerDirective,
+    FSnapConnectionComponent
 ];
 
 let ReassignConnectionPreparationExecution = class ReassignConnectionPreparationExecution {
@@ -3114,7 +3268,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) {
@@ -3178,12 +3332,12 @@ const REASSIGN_CONNECTION_PREPARATION_PROVIDERS = [
 ];
 
 const CONNECTIONS_PROVIDERS = [
+    ...CONNECTION_DRAG_COMMON_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 {
@@ -3374,21 +3528,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 +3550,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 +3574,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 +3588,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 +3632,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 +3640,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 +3661,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 +3670,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 +3714,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 +3722,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 +4826,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-let uniqueId$4 = 0;
+let uniqueId$5 = 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$5++}`;
         this.fDisabled = false;
     }
     get hostElement() {
@@ -4966,7 +5119,7 @@ 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();
     }
 }
 
@@ -4984,7 +5137,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 = [
@@ -5281,201 +5434,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
 
-class CreateConnectionMarkersRequest {
-    constructor(fConnection) {
-        this.fConnection = fConnection;
-    }
+class GetSelectionRequest {
 }
 
-let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
-    constructor(fBrowser) {
-        this.fBrowser = fBrowser;
+let GetSelectionExecution = class GetSelectionExecution {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-    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);
+    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);
+            }
         });
-        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;
+        return new FSelectionChangeEvent(selectedNodes, selectedConnections);
     }
 };
-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: [{
+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: i1.BrowserService }]; } });
-function createSVGElement$1(tag, fBrowser) {
-    return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
-}
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
 
-class CreateRoundedRectFromElementRequest {
-    constructor(element) {
-        this.element = element;
-    }
+class SelectRequest {
+    constructor(nodes, connections) {
+        this.nodes = nodes;
+        this.connections = connections;
+    }
 }
 
-let CreateRoundedRectFromElementExecution = class CreateRoundedRectFromElementExecution {
-    constructor(fBrowser) {
-        this.fBrowser = fBrowser;
+let SelectExecution = class SelectExecution {
+    constructor(fDataContext, fDraggableDataContext) {
+        this.fDataContext = fDataContext;
+        this.fDraggableDataContext = fDraggableDataContext;
     }
     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;
+        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;
     }
 };
-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: [{
+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: i1.BrowserService }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
 
-class EmitTransformChangesRequest {
+class SelectAllRequest {
 }
 
-let EmitTransformChangesExecution = class EmitTransformChangesExecution {
-    constructor(fTransformStore) {
-        this.fTransformStore = fTransformStore;
+let SelectAllExecution = class SelectAllExecution {
+    constructor(fDataContext, fDraggableDataContext) {
+        this.fDataContext = fDataContext;
+        this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
-        this.fTransformStore.changes.next();
+        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);
+        });
+        this.fDraggableDataContext.isSelectedChanged = true;
     }
 };
-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: [{
+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: FTransformStore }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
 
-class GetElementRectInFlowRequest {
-    constructor(element) {
-        this.element = element;
+class SelectAndUpdateNodeLayerRequest {
+    constructor(fNode) {
+        this.fNode = fNode;
     }
 }
 
-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;
+class MoveFrontElementsBeforeTargetElementRequest {
+    constructor(fItemsContainer, // fGroupsContainer || fNodesContainer || fConnectionsContainer
+    allElements, elementsThatShouldBeInFront, targetIndex) {
+        this.fItemsContainer = fItemsContainer;
+        this.allElements = allElements;
+        this.elementsThatShouldBeInFront = elementsThatShouldBeInFront;
+        this.targetIndex = targetIndex;
     }
+}
+
+let MoveFrontElementsBeforeTargetElementExecution = class MoveFrontElementsBeforeTargetElementExecution {
     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);
+        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]);
+        });
     }
 };
-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: [{
+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 }]; } });
+        }] });
 
-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;
-    }
-    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)
-            };
-        });
+class UpdateItemAndChildrenLayersRequest {
+    constructor(item, itemContainer) {
+        this.item = item;
+        this.itemContainer = itemContainer;
     }
-};
-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) {
@@ -5511,36 +5621,239 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             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 UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
     }
-}
-
-let GetConnectionLineExecution = class GetConnectionLineExecution {
-    constructor() {
-        this.behaviorHandlers = {
-            [EFConnectionBehavior.FLOATING.toString()]: this.floatingBehavior,
-            [EFConnectionBehavior.FIXED_CENTER.toString()]: this.fixedCenterBehavior,
-            [EFConnectionBehavior.FIXED.toString()]: this.fixedOutboundBehaviour,
-        };
+    get fGroupsContainer() {
+        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
     }
-    handle(payload) {
-        return this.behaviorHandlers[payload.behavior](payload);
+    get fNodesContainer() {
+        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
     }
-    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);
+    get fConnectionsContainer() {
+        return this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement;
     }
-    fixedCenterBehavior(payload) {
-        return new Line(payload.outputRect.gravityCenter, payload.inputRect.gravityCenter);
+    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');
+        }
     }
-    fixedOutboundBehaviour(payload) {
+    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);
+        }
+    }
+    handleNode(request) {
+        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
+        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
+        this.updateLayers(request.itemContainer, request.item.hostElement, childrenNodes);
+    }
+    handleConnection(request) {
+        this.updateLayers(request.itemContainer, request.item.hostElement, []);
+    }
+    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));
+        }
+    }
+    isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront) {
+        for (let i = targetIndex + 1; i < allElements.length; i++) {
+            if (!elementsThatShouldBeInFront.includes(allElements[i])) {
+                return true;
+            }
+        }
+        return false;
+    }
+    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);
+    }
+};
+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 }, { type: i2.FMediator }]; } });
+
+let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution {
+    constructor(fDraggableDataContext, fMediator) {
+        this.fDraggableDataContext = fDraggableDataContext;
+        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;
+        }
+    }
+};
+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 }, { type: i2.FMediator }]; } });
+
+const F_SELECTION_FEATURES = [
+    ClearSelectionExecution,
+    GetSelectionExecution,
+    SelectExecution,
+    SelectAllExecution,
+    SelectAndUpdateNodeLayerExecution
+];
+
+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 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;
+    }
+    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 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));
     }
 };
@@ -5722,41 +6035,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class GetInputRectInFlowRequest {
-    constructor(fInputId) {
-        this.fInputId = fInputId;
-    }
-}
-
-class GetInputRectInFlowResponse {
-    constructor(rect, fConnectableSide) {
-        this.rect = rect;
-        this.fConnectableSide = fConnectableSide;
-    }
-}
-
-let GetInputRectInFlowExecution = class GetInputRectInFlowExecution {
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
-    handle(request) {
-        const input = this.fComponentsStore.fInputs.find((x) => x.id === request.fInputId);
-        if (!input) {
-            throw InputNotFound(request.fInputId);
-        }
-        return new GetInputRectInFlowResponse(this.fMediator.send(new GetElementRectInFlowRequest(input.hostElement)), input.fConnectableSide);
-    }
-};
-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: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
-
 class GetNodesRectRequest {
 }
 
@@ -5783,45 +6061,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             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 {
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
-    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);
-        }
-        if (!output) {
-            throw OutputNotFound(request.fOutputId);
-        }
-        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;
@@ -5852,47 +6091,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class GetSelectionRequest {
-}
-
-let GetSelectionExecution = class GetSelectionExecution {
-    constructor(fDraggableDataContext) {
+let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
+    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
+        this.fComponentsStore = fComponentsStore;
         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);
-    }
-};
-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: FDraggableDataContext }]; } });
-
-let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
-    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fMediator = fMediator;
-    }
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+        this.fMediator = fMediator;
+    }
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
     handle() {
         const isValid = this.isValidRequest();
@@ -5960,6 +6169,9 @@ let RedrawConnectionsExecution = class RedrawConnectionsExecution {
         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);
@@ -5999,421 +6211,592 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-class SelectRequest {
-    constructor(nodes, connections) {
-        this.nodes = nodes;
-        this.connections = connections;
-    }
+class ShowConnectionsAfterCalculationsRequest {
 }
 
-let SelectExecution = class SelectExecution {
-    constructor(fDataContext, fDraggableDataContext) {
-        this.fDataContext = fDataContext;
-        this.fDraggableDataContext = fDraggableDataContext;
+let ShowConnectionsAfterCalculationsExecution = class ShowConnectionsAfterCalculationsExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
     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.fComponentsStore.fConnections.forEach((connection) => {
+            connection.hostElement.style.display = 'unset';
         });
-        this.fDraggableDataContext.isSelectedChanged = true;
     }
 };
-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: [{
+ShowConnectionsAfterCalculationsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ShowConnectionsAfterCalculationsExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+ShowConnectionsAfterCalculationsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ShowConnectionsAfterCalculationsExecution });
+ShowConnectionsAfterCalculationsExecution = __decorate([
+    FExecutionRegister(ShowConnectionsAfterCalculationsRequest)
+], ShowConnectionsAfterCalculationsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ShowConnectionsAfterCalculationsExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class SelectAllRequest {
+class SortNodeLayersRequest {
 }
 
-let SelectAllExecution = class SelectAllExecution {
-    constructor(fDataContext, fDraggableDataContext) {
-        this.fDataContext = fDataContext;
-        this.fDraggableDataContext = fDraggableDataContext;
+let SortNodeLayersExecution = class SortNodeLayersExecution {
+    constructor(fComponentsStore, fMediator, fBrowser) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+        this.fBrowser = fBrowser;
+    }
+    get fGroupsContainer() {
+        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
+    }
+    get fNodesContainer() {
+        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
+    }
+    get fNodesContainerElements() {
+        return Array.from(this.fNodesContainer.children);
     }
     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);
+        this.getGroups().forEach((parent) => {
+            this.moveChildrenNodes(this.getSortedChildrenNodes(parent));
         });
-        this.fDraggableDataContext.isSelectedChanged = true;
     }
-};
-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 }, { type: FDraggableDataContext }]; } });
-
-class SelectAndUpdateNodeLayerRequest {
-    constructor(node) {
-        this.node = node;
+    getGroups() {
+        return this.fComponentsStore.fNodes.filter((x) => this.fGroupsContainer.contains(x.hostElement));
     }
-}
-
-class MoveFrontElementsBeforeTargetElementRequest {
-    constructor(fItemsContainer, // fGroupsContainer || fNodesContainer || fConnectionsContainer
-    allElements, elementsThatShouldBeInFront, targetIndex) {
-        this.fItemsContainer = fItemsContainer;
-        this.allElements = allElements;
-        this.elementsThatShouldBeInFront = elementsThatShouldBeInFront;
-        this.targetIndex = targetIndex;
+    getSortedChildrenNodes(parent) {
+        const allElements = this.fNodesContainerElements;
+        return this.getChildrenNodes(parent.fId)
+            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
     }
-}
-
-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]);
+    getChildrenNodes(fId) {
+        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId))
+            .filter((x) => this.fNodesContainer.contains(x.hostElement)).map((x) => x.hostElement);
+    }
+    moveChildrenNodes(sortedChildrenGroups) {
+        const fragment = this.fBrowser.document.createDocumentFragment();
+        sortedChildrenGroups.forEach((childGroup) => {
+            fragment.appendChild(childGroup); // Append automatically removes the element from its current position
         });
+        this.fNodesContainer.appendChild(fragment);
     }
 };
-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: [{
+SortNodeLayersExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortNodeLayersExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+SortNodeLayersExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortNodeLayersExecution });
+SortNodeLayersExecution = __decorate([
+    FExecutionRegister(SortNodeLayersRequest)
+], SortNodeLayersExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortNodeLayersExecution, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }, { type: i1.BrowserService }]; } });
 
-class UpdateItemAndChildrenLayersRequest {
-    constructor(item, itemContainer) {
-        this.item = item;
-        this.itemContainer = itemContainer;
+class SortItemsByParentRequest {
+    constructor(fItemsContainer // fGroupsContainer || fNodesContainer
+    ) {
+        this.fItemsContainer = fItemsContainer;
     }
 }
 
-let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExecution {
-    constructor(fComponentsStore, fMediator) {
+let SortItemsByParentExecution = class SortItemsByParentExecution {
+    constructor(fComponentsStore, fMediator, fBrowser) {
         this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
+        this.fBrowser = fBrowser;
     }
-    get fGroupsContainer() {
-        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
-    }
-    get fNodesContainer() {
-        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
-    }
-    get fConnectionsContainer() {
-        return this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement;
+    get fItemsFromContainer() {
+        return Array.from(this.fItemsContainer.children);
     }
     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');
-        }
+        this.fItemsContainer = request.fItemsContainer;
+        this.getItems().forEach((parent) => {
+            this.moveChildrenItems(this.getSortedChildrenItems(parent), parent);
+        });
     }
-    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);
-        }
+    getItems() {
+        return this.fComponentsStore.fNodes.filter((x) => this.fItemsContainer.contains(x.hostElement));
     }
-    handleNode(request) {
-        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
-        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
-        this.updateLayers(request.itemContainer, request.item.hostElement, childrenNodes);
+    getSortedChildrenItems(parent) {
+        const allElements = this.fItemsFromContainer;
+        const parentIndex = allElements.indexOf(parent.hostElement);
+        return this.getChildrenGroups(parent.fId)
+            .filter((child) => allElements.indexOf(child) < parentIndex)
+            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
     }
-    handleConnection(request) {
-        this.updateLayers(request.itemContainer, request.item.hostElement, []);
+    getChildrenGroups(fId) {
+        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId))
+            .filter((x) => this.fItemsContainer.contains(x.hostElement)).map((x) => x.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));
-        }
+    moveChildrenItems(sortedChildrenItems, parent) {
+        let nextSibling = parent.hostElement.nextElementSibling;
+        const fragment = this.fBrowser.document.createDocumentFragment();
+        sortedChildrenItems.forEach((child) => {
+            fragment.appendChild(child); // Append automatically removes the element from its current position
+        });
+        this.fItemsContainer.insertBefore(fragment, nextSibling);
     }
-    isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront) {
-        for (let i = targetIndex + 1; i < allElements.length; i++) {
-            if (!elementsThatShouldBeInFront.includes(allElements[i])) {
-                return true;
-            }
+};
+SortItemsByParentExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemsByParentExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+SortItemsByParentExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemsByParentExecution });
+SortItemsByParentExecution = __decorate([
+    FExecutionRegister(SortItemsByParentRequest)
+], SortItemsByParentExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemsByParentExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }, { type: i1.BrowserService }]; } });
+
+class SortItemLayersRequest {
+}
+
+let SortItemLayersExecution = class SortItemLayersExecution {
+    constructor(fMediator, fComponentsStore) {
+        this.fMediator = fMediator;
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        this.fMediator.send(new SortItemsByParentRequest(this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement));
+        this.fMediator.send(new SortNodeLayersRequest());
+        this.fMediator.send(new SortItemsByParentRequest(this.fComponentsStore.fCanvas.fNodesContainer.nativeElement));
+    }
+};
+SortItemLayersExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemLayersExecution, deps: [{ token: i2.FMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+SortItemLayersExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemLayersExecution });
+SortItemLayersExecution = __decorate([
+    FExecutionRegister(SortItemLayersRequest)
+], SortItemLayersExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemLayersExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2.FMediator }, { type: FComponentsStore }]; } });
+
+class SubscribeOnTransformChangesRequest {
+}
+
+let SubscribeOnTransformChangesExecution = class SubscribeOnTransformChangesExecution {
+    constructor(fTransformStore, fComponentsStore) {
+        this.fTransformStore = fTransformStore;
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        return merge(this.fTransformStore.changes, this.fComponentsStore.componentsData$, this.fComponentsStore.componentsCount$);
+    }
+};
+SubscribeOnTransformChangesExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SubscribeOnTransformChangesExecution, deps: [{ token: FTransformStore }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+SubscribeOnTransformChangesExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SubscribeOnTransformChangesExecution });
+SubscribeOnTransformChangesExecution = __decorate([
+    FExecutionRegister(SubscribeOnTransformChangesRequest)
+], SubscribeOnTransformChangesExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SubscribeOnTransformChangesExecution, decorators: [{
+            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);
+}
+
+class CenterGroupOrNodeRequest {
+    constructor(id, animated) {
+        this.id = id;
+        this.animated = animated;
+    }
+}
+
+let CenterGroupOrNodeExecution = class CenterGroupOrNodeExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    handle(request) {
+        const fNode = this.getNode(request.id);
+        if (!fNode) {
+            return;
         }
-        return false;
+        this.toCenter(this.getNodeRect(fNode), this.getFlowRect(), fNode.position);
+        request.animated ? this.fComponentsStore.fCanvas.redrawWithAnimation() : this.fComponentsStore.fCanvas.redraw();
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
+        setTimeout(() => this.fComponentsStore.componentDataChanged(), F_CANVAS_ANIMATION_DURATION);
     }
-    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));
+    toCenter(fNodeRect, fFlowRect, position) {
+        this.transform.scaledPosition = PointExtensions.initialize();
+        this.transform.position = PointExtensions.initialize((fFlowRect.width - fNodeRect.width) / 2 - position.x * this.transform.scale, (fFlowRect.height - fNodeRect.height) / 2 - position.y * this.transform.scale);
     }
-    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));
+    getNode(id) {
+        return this.fComponentsStore.fNodes.find((x) => x.fId === id);
     }
-    getChildrenNodesAndGroups(fId) {
-        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId)).map((x) => x.hostElement);
+    getNodeRect(fNode) {
+        return RectExtensions.fromElement(fNode.hostElement);
+    }
+    getFlowRect() {
+        return RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement);
     }
 };
-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: [{
+CenterGroupOrNodeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CenterGroupOrNodeExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+CenterGroupOrNodeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CenterGroupOrNodeExecution });
+CenterGroupOrNodeExecution = __decorate([
+    FExecutionRegister(CenterGroupOrNodeRequest)
+], CenterGroupOrNodeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CenterGroupOrNodeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution {
-    constructor(fDraggableDataContext, fMediator) {
-        this.fDraggableDataContext = fDraggableDataContext;
+class FitToFlowRequest {
+    constructor(toCenter, animated) {
+        this.toCenter = toCenter;
+        this.animated = animated;
+    }
+}
+
+let FitToFlowExecution = class FitToFlowExecution {
+    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));
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    selectNodeIfNotSelected(node) {
-        if (!this.fDraggableDataContext.selectedItems.includes(node) && !node.fSelectionDisabled) {
-            this.fDraggableDataContext.selectedItems.push(node);
-            node.select();
-            this.fDraggableDataContext.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);
+    }
+    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);
     }
 };
-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: [{
+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: FDraggableDataContext }, { type: i2.FMediator }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-class ShowConnectionsAfterCalculationsRequest {
+class InputCanvasPositionRequest {
+    constructor(transform, position) {
+        this.transform = transform;
+        this.position = position;
+    }
 }
 
-let ShowConnectionsAfterCalculationsExecution = class ShowConnectionsAfterCalculationsExecution {
+let InputCanvasPositionExecution = class InputCanvasPositionExecution {
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
-        this.fComponentsStore.fConnections.forEach((connection) => {
-            connection.hostElement.style.display = 'unset';
-        });
+        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();
+        }
     }
 };
-ShowConnectionsAfterCalculationsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ShowConnectionsAfterCalculationsExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-ShowConnectionsAfterCalculationsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ShowConnectionsAfterCalculationsExecution });
-ShowConnectionsAfterCalculationsExecution = __decorate([
-    FExecutionRegister(ShowConnectionsAfterCalculationsRequest)
-], ShowConnectionsAfterCalculationsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ShowConnectionsAfterCalculationsExecution, 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: FComponentsStore }]; } });
 
-class SortNodeLayersRequest {
+class InputCanvasScaleRequest {
+    constructor(transform, scale) {
+        this.transform = transform;
+        this.scale = scale;
+    }
 }
 
-let SortNodeLayersExecution = class SortNodeLayersExecution {
-    constructor(fComponentsStore, fMediator, fBrowser) {
+let InputCanvasScaleExecution = class InputCanvasScaleExecution {
+    constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-        this.fBrowser = fBrowser;
     }
-    get fGroupsContainer() {
-        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
+    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();
     }
-    get fNodesContainer() {
-        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
+};
+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 ResetScaleExecution = class ResetScaleExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
-    get fNodesContainerElements() {
-        return Array.from(this.fNodesContainer.children);
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
     handle(request) {
-        this.getGroups().forEach((parent) => {
-            this.moveChildrenNodes(this.getSortedChildrenNodes(parent));
-        });
+        this.transform.scale = 1;
+        this.transform.scaledPosition = PointExtensions.initialize();
     }
-    getGroups() {
-        return this.fComponentsStore.fNodes.filter((x) => this.fGroupsContainer.contains(x.hostElement));
+};
+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: FComponentsStore }]; } });
+
+class ResetScaleAndCenterRequest {
+    constructor(animated) {
+        this.animated = animated;
     }
-    getSortedChildrenNodes(parent) {
-        const allElements = this.fNodesContainerElements;
-        return this.getChildrenNodes(parent.fId)
-            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+}
+
+let ResetScaleAndCenterExecution = class ResetScaleAndCenterExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
     }
-    getChildrenNodes(fId) {
-        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId))
-            .filter((x) => this.fNodesContainer.contains(x.hostElement)).map((x) => x.hostElement);
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    moveChildrenNodes(sortedChildrenGroups) {
-        const fragment = this.fBrowser.document.createDocumentFragment();
-        sortedChildrenGroups.forEach((childGroup) => {
-            fragment.appendChild(childGroup); // Append automatically removes the element from its current position
-        });
-        this.fNodesContainer.appendChild(fragment);
+    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);
     }
 };
-SortNodeLayersExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortNodeLayersExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
-SortNodeLayersExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortNodeLayersExecution });
-SortNodeLayersExecution = __decorate([
-    FExecutionRegister(SortNodeLayersRequest)
-], SortNodeLayersExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortNodeLayersExecution, decorators: [{
+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 }, { type: i1.BrowserService }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-class SortItemsByParentRequest {
-    constructor(fItemsContainer // fGroupsContainer || fNodesContainer
-    ) {
-        this.fItemsContainer = fItemsContainer;
+class UpdateScaleRequest {
+    constructor(scale, toPosition) {
+        this.scale = scale;
+        this.toPosition = toPosition;
     }
 }
 
-let SortItemsByParentExecution = class SortItemsByParentExecution {
-    constructor(fComponentsStore, fMediator, fBrowser) {
+let UpdateScaleExecution = class UpdateScaleExecution {
+    constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-        this.fBrowser = fBrowser;
     }
-    get fItemsFromContainer() {
-        return Array.from(this.fItemsContainer.children);
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
     handle(request) {
-        this.fItemsContainer = request.fItemsContainer;
-        this.getItems().forEach((parent) => {
-            this.moveChildrenItems(this.getSortedChildrenItems(parent), parent);
-        });
+        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);
+        }
     }
-    getItems() {
-        return this.fComponentsStore.fNodes.filter((x) => this.fItemsContainer.contains(x.hostElement));
+};
+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 }]; } });
+
+class FCanvasChangeEvent {
+    constructor(position, scale) {
+        this.position = position;
+        this.scale = scale;
     }
-    getSortedChildrenItems(parent) {
-        const allElements = this.fItemsFromContainer;
-        const parentIndex = allElements.indexOf(parent.hostElement);
-        return this.getChildrenGroups(parent.fId)
-            .filter((child) => allElements.indexOf(child) < parentIndex)
-            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+}
+
+const F_CANVAS_FEATURES = [
+    CenterGroupOrNodeExecution,
+    FitToFlowExecution,
+    InputCanvasPositionExecution,
+    InputCanvasScaleExecution,
+    ResetScaleExecution,
+    ResetScaleAndCenterExecution,
+    UpdateScaleExecution
+];
+
+const F_CANVAS = new InjectionToken('F_CANVAS');
+class FCanvasBase {
+    constructor() {
+        this.transform = TransformModelExtensions.default();
     }
-    getChildrenGroups(fId) {
-        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId))
-            .filter((x) => this.fItemsContainer.contains(x.hostElement)).map((x) => x.hostElement);
+    getPosition() {
+        return this.transform.position;
+    }
+    setPosition(position) {
+        this.transform.position = position;
+    }
+    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, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FCanvasBase, decorators: [{
+            type: Directive
+        }] });
+
+class FCanvasComponent extends FCanvasBase {
+    constructor(elementReference, fMediator, fComponentsStore) {
+        super();
+        this.elementReference = elementReference;
+        this.fMediator = fMediator;
+        this.fComponentsStore = fComponentsStore;
+        this.fCanvasChange = new EventEmitter();
+    }
+    set position(value) {
+        this.fMediator.send(new InputCanvasPositionRequest(this.transform, value));
+    }
+    set scale(value) {
+        this.fMediator.send(new InputCanvasScaleRequest(this.transform, value));
+    }
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    ngOnInit() {
+        this.fComponentsStore.fCanvas = this;
+    }
+    redraw() {
+        var _a;
+        (_a = this.fComponentsStore.fBackground) === null || _a === void 0 ? void 0 : _a.setTransform(this.transform);
+        this.hostElement.setAttribute("style", `transform: ${TransformModelExtensions.toString(this.transform)}`);
+        this.fMediator.send(new EmitTransformChangesRequest());
+    }
+    redrawWithAnimation() {
+        var _a;
+        (_a = this.fComponentsStore.fBackground) === null || _a === void 0 ? void 0 : _a.setTransform(this.transform);
+        this.hostElement.setAttribute("style", `transition: transform ${F_CANVAS_ANIMATION_DURATION}ms ease-in-out; transform: ${TransformModelExtensions.toString(this.transform)}`);
+        setTimeout(() => {
+            this.redraw();
+        }, F_CANVAS_ANIMATION_DURATION);
+    }
+    centerGroupOrNode(id, animated = true) {
+        this.fMediator.send(new CenterGroupOrNodeRequest(id, animated));
     }
-    moveChildrenItems(sortedChildrenItems, parent) {
-        let nextSibling = parent.hostElement.nextElementSibling;
-        const fragment = this.fBrowser.document.createDocumentFragment();
-        sortedChildrenItems.forEach((child) => {
-            fragment.appendChild(child); // Append automatically removes the element from its current position
-        });
-        this.fItemsContainer.insertBefore(fragment, nextSibling);
+    fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
+        this.fMediator.send(new FitToFlowRequest(toCenter, animated));
     }
-};
-SortItemsByParentExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemsByParentExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
-SortItemsByParentExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemsByParentExecution });
-SortItemsByParentExecution = __decorate([
-    FExecutionRegister(SortItemsByParentRequest)
-], SortItemsByParentExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemsByParentExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }, { type: i1.BrowserService }]; } });
-
-class SortItemLayersRequest {
-}
-
-let SortItemLayersExecution = class SortItemLayersExecution {
-    constructor(fMediator, fComponentsStore) {
-        this.fMediator = fMediator;
-        this.fComponentsStore = fComponentsStore;
+    resetScaleAndCenter(animated = true) {
+        this.fMediator.send(new ResetScaleAndCenterRequest(animated));
     }
-    handle(request) {
-        this.fMediator.send(new SortItemsByParentRequest(this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement));
-        this.fMediator.send(new SortNodeLayersRequest());
-        this.fMediator.send(new SortItemsByParentRequest(this.fComponentsStore.fCanvas.fNodesContainer.nativeElement));
+    setZoom(scale, toPosition = PointExtensions.initialize()) {
+        this.fMediator.send(new UpdateScaleRequest(scale, toPosition));
+    }
+    resetZoom() {
+        this.fMediator.send(new ResetScaleRequest());
     }
-};
-SortItemLayersExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemLayersExecution, deps: [{ token: i2.FMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-SortItemLayersExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemLayersExecution });
-SortItemLayersExecution = __decorate([
-    FExecutionRegister(SortItemLayersRequest)
-], SortItemLayersExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortItemLayersExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i2.FMediator }, { type: FComponentsStore }]; } });
-
-class SubscribeOnTransformChangesRequest {
 }
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FCanvasComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'f-canvas',
+                    templateUrl: './f-canvas.component.html',
+                    styleUrls: ['./f-canvas.component.scss'],
+                    exportAs: 'fComponent',
+                    host: {
+                        'class': 'f-component f-canvas',
+                    },
+                    providers: [
+                        { provide: F_CANVAS, useExisting: FCanvasComponent }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.FMediator }, { type: FComponentsStore }]; }, propDecorators: { fCanvasChange: [{
+                type: Output
+            }], position: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }], fGroupsContainer: [{
+                type: ViewChild,
+                args: ['fGroupsContainer', { static: true }]
+            }], fNodesContainer: [{
+                type: ViewChild,
+                args: ['fNodesContainer', { static: true }]
+            }], fConnectionsContainer: [{
+                type: ViewChild,
+                args: ['fConnectionsContainer', { static: true }]
+            }] } });
 
-let SubscribeOnTransformChangesExecution = class SubscribeOnTransformChangesExecution {
-    constructor(fTransformStore, fComponentsStore) {
-        this.fTransformStore = fTransformStore;
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(request) {
-        return merge(this.fTransformStore.changes, this.fComponentsStore.componentsData$, this.fComponentsStore.componentsCount$);
-    }
-};
-SubscribeOnTransformChangesExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SubscribeOnTransformChangesExecution, deps: [{ token: FTransformStore }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-SubscribeOnTransformChangesExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SubscribeOnTransformChangesExecution });
-SubscribeOnTransformChangesExecution = __decorate([
-    FExecutionRegister(SubscribeOnTransformChangesRequest)
-], SubscribeOnTransformChangesExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SubscribeOnTransformChangesExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FTransformStore }, { type: FComponentsStore }]; } });
+const F_CANVAS_PROVIDERS = [
+    FCanvasComponent,
+];
 
-function createSVGElement(tag, fBrowser) {
-    return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
-}
+const F_BACKGROUND_FEATURES = [
+    AddPatternToBackgroundExecution
+];
 
 const COMMON_PROVIDERS = [
-    CenterGroupOrNodeExecution,
-    ClearSelectionExecution,
+    ...F_CANVAS_FEATURES,
+    ...F_BACKGROUND_FEATURES,
     CreateConnectionMarkersExecution,
     CreateRoundedRectFromElementExecution,
     EmitTransformChangesExecution,
+    ...F_SELECTION_FEATURES,
     GetCanBeSelectedItemsExecution,
     GetDeepChildrenNodesAndGroupsExecution,
     GetConnectionLineExecution,
@@ -6421,14 +6804,9 @@ const COMMON_PROVIDERS = [
     ...GET_FLOW_STATE_PROVIDERS,
     GetScaledNodeRectsWithFlowPositionExecution,
     GetNodesRectExecution,
-    GetOutputRectInFlowExecution,
     GetPositionInFlowExecution,
-    GetSelectionExecution,
     IsConnectionUnderNodeExecution,
     RedrawConnectionsExecution,
-    SelectExecution,
-    SelectAllExecution,
-    SelectAndUpdateNodeLayerExecution,
     ShowConnectionsAfterCalculationsExecution,
     SortItemLayersExecution,
     SortItemsByParentExecution,
@@ -6436,9 +6814,48 @@ const COMMON_PROVIDERS = [
     SubscribeOnTransformChangesExecution,
     UpdateItemAndChildrenLayersExecution,
     MoveFrontElementsBeforeTargetElementExecution,
-    GetInputRectInFlowExecution,
 ];
 
+let uniqueId$4 = 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$4++;
+            (_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_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
+
 let uniqueId$3 = 0;
 class FRectPatternComponent {
     constructor(elementReference, fBrowser) {
@@ -6660,11 +7077,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 
 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 +7090,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 +7103,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 +7117,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 }]
             }] } });
@@ -6727,153 +7128,6 @@ const F_BACKGROUND_PROVIDERS = [
     FCirclePatternComponent
 ];
 
-class FCanvasChangeEvent {
-    constructor(position, scale) {
-        this.position = position;
-        this.scale = scale;
-    }
-}
-
-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 {
-    constructor() {
-        super(TransformModelExtensions.default());
-    }
-    completeDrag() {
-        this.fCanvasChange.emit(new FCanvasChangeEvent(this.getCanvasPosition(), this.transform.scale));
-    }
-    getCanvasPosition() {
-        return PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
-    }
-}
-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 });
-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) {
-        super();
-        this.elementReference = elementReference;
-        this.fMediator = fMediator;
-        this.fComponentsStore = fComponentsStore;
-        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();
-        }
-    }
-    set scale(value) {
-        if (!value) {
-            return;
-        }
-        this.transform.scale = value;
-        this.redraw();
-    }
-    get fNodes() {
-        return this.fComponentsStore.fNodes;
-    }
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    ngOnInit() {
-        this.fComponentsStore.fCanvas = this;
-    }
-    redraw() {
-        var _a;
-        (_a = this.fComponentsStore.fBackground) === null || _a === void 0 ? void 0 : _a.setTransform(this.transform);
-        this.hostElement.setAttribute("style", `transform: ${TransformModelExtensions.toString(this.transform)}`);
-        this.fMediator.send(new EmitTransformChangesRequest());
-    }
-    redrawWithAnimation() {
-        var _a;
-        (_a = this.fComponentsStore.fBackground) === null || _a === void 0 ? void 0 : _a.setTransform(this.transform);
-        this.hostElement.setAttribute("style", `transition: transform ${F_CANVAS_ANIMATION_DURATION}ms ease-in-out; transform: ${TransformModelExtensions.toString(this.transform)}`);
-        setTimeout(() => {
-            this.redraw();
-        }, F_CANVAS_ANIMATION_DURATION);
-    }
-    centerGroupOrNode(id, animated = true) {
-        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);
-    }
-    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);
-    }
-}
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FCanvasComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'f-canvas',
-                    templateUrl: './f-canvas.component.html',
-                    styleUrls: ['./f-canvas.component.scss'],
-                    exportAs: 'fComponent',
-                    host: {
-                        'class': 'f-component f-canvas',
-                    },
-                    providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.FMediator }, { type: FComponentsStore }]; }, propDecorators: { fCanvasChange: [{
-                type: Output
-            }], position: [{
-                type: Input
-            }], scale: [{
-                type: Input
-            }], fGroupsContainer: [{
-                type: ViewChild,
-                args: ['fGroupsContainer', { static: true }]
-            }], fNodesContainer: [{
-                type: ViewChild,
-                args: ['fNodesContainer', { static: true }]
-            }], fConnectionsContainer: [{
-                type: ViewChild,
-                args: ['fConnectionsContainer', { static: true }]
-            }] } });
-
-const F_CANVAS_PROVIDERS = [
-    FCanvasComponent,
-];
-
 class LineElement {
     constructor(fBrowser, hostElement) {
         this.hostElement = hostElement;
@@ -7473,15 +7727,15 @@ 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.fMediator.send(new ShowConnectionsAfterCalculationsRequest());
                 this.isLoaded = true;
                 this.fLoaded.emit();
             }
@@ -7612,7 +7866,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 +7883,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 +7902,7 @@ class FZoomBase {
     reset() {
         this.fCanvas.resetZoom();
         this.fCanvas.redraw();
-        this.fCanvas.completeDrag();
+        this.fCanvas.emitCanvasChangeEvent();
     }
     unsubscribe() {
         this.listeners();
@@ -7717,7 +7971,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 +8016,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_DRAG_COMMON_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_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_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_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS, 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, REASSIGN_CONNECTION_FINALIZE_PROVIDERS, REASSIGN_CONNECTION_PREPARATION_PROVIDERS, 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