@foblex/flow 12.6.6 → 12.6.8

package/fesm2015/foblex-flow.js

@@ -1,23 +1,19 @@
-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 { InjectionToken, Injectable, Directive, Input, HostBinding, EventEmitter, Output, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, ContentChildren, NgZone, ContentChild, NgModule } from '@angular/core';
+import { RoundedRect, RectExtensions, TransformModelExtensions, PointExtensions, Point, SizeExtensions, LineExtensions, GetIntersections, Line } from '@foblex/2d';
+import { Subject, Observable, Subscription, merge } from 'rxjs';
+import { debounceTime, startWith } from 'rxjs/operators';
+import { __decorate } from 'tslib';
 import * as i2 from '@foblex/mediator';
 import { FExecutionRegister, FValidatorRegister, FMediator } from '@foblex/mediator';
 import { 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';
 
-class AddPatternToBackgroundRequest {
-    constructor(fPattern) {
-        this.fPattern = fPattern;
-    }
-}
+const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
 class CreateConnectionMarkersRequest {
     constructor(fConnection) {
@@ -194,170 +190,328 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FTransformStore }]; } });
 
-class ClearSelectionRequest {
-}
-
-class CanvasMoveFinalizeRequest {
-    constructor(event) {
-        this.event = event;
+class AddPatternToBackgroundRequest {
+    constructor(fPattern) {
+        this.fPattern = fPattern;
     }
 }
 
-class FDraggableDataContext {
-    constructor() {
-        this.selectedItems = [];
-        this.isSelectedChanged = false;
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
-        this.draggableItems = [];
-    }
-    reset() {
-        this.draggableItems = [];
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
-    }
-    markSelectionAsChanged() {
-        this.isSelectedChanged = true;
+let uniqueId$c = 0;
+let AddPatternToBackgroundExecution = class AddPatternToBackgroundExecution {
+    constructor(fComponentsStore, fBrowser) {
+        this.fComponentsStore = fComponentsStore;
+        this.fBrowser = fBrowser;
     }
-}
-FDraggableDataContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FDraggableDataContext.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext, decorators: [{
-            type: Injectable
-        }] });
-
-let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
+    get fBackground() {
+        return this.fComponentsStore.fBackground;
     }
     handle(request) {
-        this.fDraggableDataContext.draggableItems.forEach((x) => { var _a; return (_a = x.complete) === null || _a === void 0 ? void 0 : _a.call(x); });
+        var _a, _b, _c, _d, _e, _f, _g;
+        const children = ((_a = request.fPattern) === null || _a === void 0 ? void 0 : _a.hostElement.getElementsByTagName('pattern')) || [];
+        const pattern = children.length ? children[0] : undefined;
+        if (pattern) {
+            const defs = createSVGElement('defs', this.fBrowser);
+            pattern.id = 'f-background-pattern-' + uniqueId$c++;
+            (_b = request.fPattern) === null || _b === void 0 ? void 0 : _b.hostElement.remove();
+            defs.appendChild(pattern);
+            (_d = (_c = this.fBackground.hostElement) === null || _c === void 0 ? void 0 : _c.firstChild) === null || _d === void 0 ? void 0 : _d.appendChild(defs);
+            const rect = createSVGElement('rect', this.fBrowser);
+            rect.setAttribute('fill', 'url(#' + pattern.id + ')');
+            rect.setAttribute('width', '100%');
+            rect.setAttribute('height', '100%');
+            (_e = this.fBackground.hostElement.firstChild) === null || _e === void 0 ? void 0 : _e.appendChild(rect);
+            const transform = ((_f = this.fComponentsStore.fCanvas) === null || _f === void 0 ? void 0 : _f.transform) || TransformModelExtensions.default();
+            (_g = request.fPattern) === null || _g === void 0 ? void 0 : _g.setTransform(transform);
+        }
     }
 };
-CanvasMoveFinalizeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-CanvasMoveFinalizeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution });
-CanvasMoveFinalizeExecution = __decorate([
-    FExecutionRegister(CanvasMoveFinalizeRequest)
-], CanvasMoveFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution, decorators: [{
+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: FDraggableDataContext }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i1.BrowserService }]; } });
 
-class CanvasDragHandler {
+const F_BACKGROUND_FEATURES = [
+    AddPatternToBackgroundExecution
+];
+
+class CenterGroupOrNodeRequest {
+    constructor(id, animated) {
+        this.id = id;
+        this.animated = animated;
+    }
+}
+
+let CenterGroupOrNodeExecution = class CenterGroupOrNodeExecution {
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.onPointerDownPosition = PointExtensions.initialize();
-    }
-    initialize() {
-        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
     }
-    move(difference) {
-        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
-        this.fComponentsStore.fCanvas.redraw();
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
-    complete() {
+    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.emitCanvasChangeEvent();
+        setTimeout(() => this.fComponentsStore.componentDataChanged(), F_CANVAS_ANIMATION_DURATION);
     }
-}
-
-let CanvasMoveFinalizeValidator = class CanvasMoveFinalizeValidator {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
+    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);
     }
-    handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof CanvasDragHandler);
+    getNode(id) {
+        return this.fComponentsStore.fNodes.find((x) => x.fId === id);
+    }
+    getNodeRect(fNode) {
+        return RectExtensions.fromElement(fNode.hostElement);
+    }
+    getFlowRect() {
+        return RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement);
     }
 };
-CanvasMoveFinalizeValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-CanvasMoveFinalizeValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator });
-CanvasMoveFinalizeValidator = __decorate([
-    FValidatorRegister(CanvasMoveFinalizeRequest)
-], CanvasMoveFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator, decorators: [{
+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: FDraggableDataContext }]; } });
-
-const CANVAS_MOVE_FINALIZE_PROVIDERS = [
-    CanvasMoveFinalizeExecution,
-    CanvasMoveFinalizeValidator,
-];
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-class CanvasMovePreparationRequest {
-    constructor(event) {
-        this.event = event;
+class FitToFlowRequest {
+    constructor(toCenter, animated) {
+        this.toCenter = toCenter;
+        this.animated = animated;
     }
 }
 
-let CanvasMovePreparationExecution = class CanvasMovePreparationExecution {
-    constructor(fComponentsStore, fDraggableDataContext) {
+let FitToFlowExecution = class FitToFlowExecution {
+    constructor(fComponentsStore, fMediator) {
         this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
+        this.fMediator = fMediator;
     }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
     }
     handle(request) {
-        this.fDraggableDataContext.onPointerDownScale = 1;
-        this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
-            .elementTransform(this.flowHost);
-        this.fDraggableDataContext.draggableItems = [
-            new CanvasDragHandler(this.fComponentsStore)
-        ];
+        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);
     }
 };
-CanvasMovePreparationExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-CanvasMovePreparationExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationExecution });
-CanvasMovePreparationExecution = __decorate([
-    FExecutionRegister(CanvasMovePreparationRequest)
-], CanvasMovePreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationExecution, 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: FComponentsStore }, { type: FDraggableDataContext }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-let CanvasMovePreparationValidator = class CanvasMovePreparationValidator {
-    constructor(fComponentsStore, fDraggableDataContext) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
+class InputCanvasPositionRequest {
+    constructor(transform, position) {
+        this.transform = transform;
+        this.position = position;
     }
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+}
+
+let InputCanvasPositionExecution = class InputCanvasPositionExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
-        return !this.fDraggableDataContext.draggableItems.length &&
-            (this.isBackgroundElement(request.event.targetElement) || this.isDragOnHost(request.event.targetElement));
-    }
-    isBackgroundElement(targetElement) {
         var _a;
-        return (_a = this.fComponentsStore.fBackground) === null || _a === void 0 ? void 0 : _a.isBackgroundElement(targetElement);
-    }
-    isDragOnHost(targetElement) {
-        return this.flowHost.contains(targetElement) && !this.getNode(targetElement);
-    }
-    getNode(targetElement) {
-        let result = this.fComponentsStore.findNode(targetElement);
-        if (result && result.fDraggingDisabled) {
-            result = undefined;
+        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();
         }
-        return result;
     }
 };
-CanvasMovePreparationValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-CanvasMovePreparationValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationValidator });
-CanvasMovePreparationValidator = __decorate([
-    FValidatorRegister(CanvasMovePreparationRequest)
-], CanvasMovePreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationValidator, 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 }, { type: FDraggableDataContext }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-const CANVAS_MOVE_PREPARATION_PROVIDERS = [
-    CanvasMovePreparationExecution,
-    CanvasMovePreparationValidator,
-];
+class InputCanvasScaleRequest {
+    constructor(transform, scale) {
+        this.transform = transform;
+        this.scale = scale;
+    }
+}
 
-const CANVAS_PROVIDERS = [
-    ...CANVAS_MOVE_FINALIZE_PROVIDERS,
-    ...CANVAS_MOVE_PREPARATION_PROVIDERS,
+let InputCanvasScaleExecution = class InputCanvasScaleExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        var _a;
+        if (!request.scale) {
+            return;
+        }
+        request.transform.scale = request.scale;
+        (_a = this.fComponentsStore.fCanvas) === null || _a === void 0 ? void 0 : _a.redraw();
+    }
+};
+InputCanvasScaleExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasScaleExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+InputCanvasScaleExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasScaleExecution });
+InputCanvasScaleExecution = __decorate([
+    FExecutionRegister(InputCanvasScaleRequest)
+], InputCanvasScaleExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasScaleExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
+class ResetScaleRequest {
+}
+
+let ResetScaleExecution = class ResetScaleExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    handle(request) {
+        this.transform.scale = 1;
+        this.transform.scaledPosition = PointExtensions.initialize();
+    }
+};
+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;
+    }
+}
+
+let ResetScaleAndCenterExecution = class ResetScaleAndCenterExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+    }
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    handle(request) {
+        const fNodesRect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize();
+        if (fNodesRect.width === 0 || fNodesRect.height === 0) {
+            return;
+        }
+        this.oneToOneCentering(fNodesRect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fComponentsStore.fNodes.map((x) => x.position));
+        request.animated ? this.fComponentsStore.fCanvas.redrawWithAnimation() : this.fComponentsStore.fCanvas.redraw();
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
+        setTimeout(() => this.fComponentsStore.componentDataChanged(), F_CANVAS_ANIMATION_DURATION);
+    }
+    oneToOneCentering(rect, parentRect, points) {
+        this.transform.scaledPosition = PointExtensions.initialize();
+        this.transform.position = this.getZeroPositionWithoutScale(points);
+        const newX = (parentRect.width - rect.width / this.transform.scale) / 2 - this.transform.position.x;
+        const newY = (parentRect.height - rect.height / this.transform.scale) / 2 - this.transform.position.y;
+        this.transform.scale = 1;
+        this.transform.position = PointExtensions.initialize(newX, newY);
+    }
+    getZeroPositionWithoutScale(points) {
+        const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
+        const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
+        return PointExtensions.initialize(xPoint, yPoint);
+    }
+};
+ResetScaleAndCenterExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleAndCenterExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+ResetScaleAndCenterExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleAndCenterExecution });
+ResetScaleAndCenterExecution = __decorate([
+    FExecutionRegister(ResetScaleAndCenterRequest)
+], ResetScaleAndCenterExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleAndCenterExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+
+class UpdateScaleRequest {
+    constructor(scale, toPosition) {
+        this.scale = scale;
+        this.toPosition = toPosition;
+    }
+}
+
+let UpdateScaleExecution = class UpdateScaleExecution {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    get transform() {
+        return this.fComponentsStore.fCanvas.transform;
+    }
+    handle(request) {
+        if (request.scale !== this.transform.scale) {
+            const summaryPosition = PointExtensions.sum(this.transform.scaledPosition, this.transform.position);
+            const newX = request.toPosition.x - (request.toPosition.x - summaryPosition.x) * request.scale / this.transform.scale;
+            const newY = request.toPosition.y - (request.toPosition.y - summaryPosition.y) * request.scale / this.transform.scale;
+            this.transform.scale = request.scale;
+            this.transform.scaledPosition = PointExtensions.sub(PointExtensions.initialize(newX, newY), this.transform.position);
+        }
+    }
+};
+UpdateScaleExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateScaleExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+UpdateScaleExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateScaleExecution });
+UpdateScaleExecution = __decorate([
+    FExecutionRegister(UpdateScaleRequest)
+], UpdateScaleExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateScaleExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
+const F_CANVAS_FEATURES = [
+    CenterGroupOrNodeExecution,
+    FitToFlowExecution,
+    InputCanvasPositionExecution,
+    InputCanvasScaleExecution,
+    ResetScaleExecution,
+    ResetScaleAndCenterExecution,
+    UpdateScaleExecution
 ];
 
 class FindClosestInputUsingSnapThresholdRequest {
@@ -413,6 +567,45 @@ class GetConnectorWithRectRequest {
     }
 }
 
+class GetElementRectInFlowRequest {
+    constructor(element) {
+        this.element = element;
+    }
+}
+
+let GetElementRectInFlowExecution = class GetElementRectInFlowExecution {
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+    }
+    get transform() {
+        return this.fComponentsStore.transform;
+    }
+    get flowHost() {
+        return this.fComponentsStore.flowHost;
+    }
+    handle(request) {
+        const systemRect = this.fMediator.send(new CreateRoundedRectFromElementRequest(request.element));
+        const position = this.transformElementPositionInFlow(systemRect);
+        const size = this.transformElementSizeInFlow(systemRect);
+        return new RoundedRect(position.x, position.y, size.width, size.height, systemRect.radius1, systemRect.radius2, systemRect.radius3, systemRect.radius4);
+    }
+    transformElementPositionInFlow(rect) {
+        return Point.fromPoint(rect).elementTransform(this.flowHost).sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
+    }
+    transformElementSizeInFlow(rect) {
+        return SizeExtensions.initialize(rect.width / this.transform.scale, rect.height / this.transform.scale);
+    }
+};
+GetElementRectInFlowExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetElementRectInFlowExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+GetElementRectInFlowExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetElementRectInFlowExecution });
+GetElementRectInFlowExecution = __decorate([
+    FExecutionRegister(GetElementRectInFlowRequest)
+], GetElementRectInFlowExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetElementRectInFlowExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
+
 let GetConnectorWithRectExecution = class GetConnectorWithRectExecution {
     constructor(fMediator) {
         this.fMediator = fMediator;
@@ -479,153 +672,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-class GetInputUnderPointerRequest {
-    constructor(event, dragHandler) {
+const F_CONNECTION_FEATURES = [
+    FindClosestInputUsingSnapThresholdExecution,
+    GetAllCanBeConnectedInputPositionsExecution,
+    GetConnectorWithRectExecution,
+];
+
+class ClearSelectionRequest {
+}
+
+class CanvasMoveFinalizeRequest {
+    constructor(event) {
         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;
+class FDraggableDataContext {
+    constructor() {
+        this.selectedItems = [];
+        this.isSelectedChanged = false;
+        this.onPointerDownScale = 1;
+        this.onPointerDownPosition = new Point(0, 0);
+        this.draggableItems = [];
     }
-    get fInputs() {
-        return this.fComponentsStore.fInputs;
+    reset() {
+        this.draggableItems = [];
+        this.onPointerDownScale = 1;
+        this.onPointerDownPosition = new Point(0, 0);
     }
-    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;
+    markSelectionAsChanged() {
+        this.isSelectedChanged = true;
     }
-    getOutput(dragHandler) {
-        return this.fComponentsStore.fOutputs.find((x) => x.id === dragHandler.fConnection.fOutputId);
+}
+FDraggableDataContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FDraggableDataContext.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FDraggableDataContext, decorators: [{
+            type: Injectable
+        }] });
+
+let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-    getOutlet(dragHandler) {
-        return this.fComponentsStore.fOutlets.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    handle(request) {
+        this.fDraggableDataContext.draggableItems.forEach((x) => { var _a; return (_a = x.complete) === null || _a === void 0 ? void 0 : _a.call(x); });
     }
-    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);
+};
+CanvasMoveFinalizeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+CanvasMoveFinalizeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution });
+CanvasMoveFinalizeExecution = __decorate([
+    FExecutionRegister(CanvasMoveFinalizeRequest)
+], CanvasMoveFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+
+class CanvasDragHandler {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+        this.onPointerDownPosition = PointExtensions.initialize();
     }
-    getInputsInPosition(position) {
-        return this.getElementsFromPoint(position).map((element) => this.fInputs.find(x => x.isContains(element) && x.canBeConnected)).filter((x) => !!x);
+    initialize() {
+        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
     }
-    getElementsFromPoint(position) {
-        return this.fBrowser.document.elementsFromPoint(position.x, position.y);
+    move(difference) {
+        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
+        this.fComponentsStore.fCanvas.redraw();
     }
-    getFirstConnectableInputOfNodeInPosition(position) {
-        return this.getNodesInPosition(position).map((x) => {
-            return this.fInputs.find((i) => x.isContains(i.hostElement) && i.canBeConnected);
-        }).find((x) => !!x);
+    complete() {
+        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
     }
-    getNodesInPosition(position) {
-        return this.getElementsFromPoint(position).map((element) => {
-            return this.fNodes.find((x) => x.isContains(element) && x.fConnectOnNode);
-        }).filter((x) => !!x);
+}
+
+let CanvasMoveFinalizeValidator = class CanvasMoveFinalizeValidator {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-    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);
-        });
+    handle(request) {
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof CanvasDragHandler);
     }
 };
-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: [{
+CanvasMoveFinalizeValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+CanvasMoveFinalizeValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator });
+CanvasMoveFinalizeValidator = __decorate([
+    FValidatorRegister(CanvasMoveFinalizeRequest)
+], CanvasMoveFinalizeValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMoveFinalizeValidator, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: 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;
-});
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
 
-const ConflictError = createErrorClass((_super) => function error(message) {
-    _super(this);
-    this.message = message || 'Conflict error occurred.';
-    this.code = 409;
-});
+const CANVAS_MOVE_FINALIZE_PROVIDERS = [
+    CanvasMoveFinalizeExecution,
+    CanvasMoveFinalizeValidator,
+];
 
-function OutputNotFound(id) {
-    return new NotFoundError(`Output with fOutputId ${id} not found. Make sure there is no f-connection to a non-existent fOutput.`);
-}
-function InputNotFound(id) {
-    return new NotFoundError(`Input with fInputId ${id} not found. Make sure there is no f-connection to a non-existent fInput.`);
-}
-function RequiredOutput() {
-    return new ConflictError(`The fNode must contain at least one fOutput if there is an fOutlet`);
+class CanvasMovePreparationRequest {
+    constructor(event) {
+        this.event = event;
+    }
 }
 
-let GetInputUnderPointerValidator = class GetInputUnderPointerValidator {
-    constructor(fComponentsStore) {
+let CanvasMovePreparationExecution = class CanvasMovePreparationExecution {
+    constructor(fComponentsStore, fDraggableDataContext) {
         this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
     }
     handle(request) {
-        let output = this.getOutput(request.dragHandler) || this.getOutlet(request.dragHandler);
-        if (!output) {
-            throw OutputNotFound(request.dragHandler.fConnection.fOutputId);
-        }
-        return true;
+        this.fDraggableDataContext.onPointerDownScale = 1;
+        this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
+            .elementTransform(this.flowHost);
+        this.fDraggableDataContext.draggableItems = [
+            new CanvasDragHandler(this.fComponentsStore)
+        ];
     }
-    getOutput(dragHandler) {
-        return this.fComponentsStore.fOutputs.find((x) => x.id === dragHandler.fConnection.fOutputId);
+};
+CanvasMovePreparationExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+CanvasMovePreparationExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationExecution });
+CanvasMovePreparationExecution = __decorate([
+    FExecutionRegister(CanvasMovePreparationRequest)
+], CanvasMovePreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
+
+let CanvasMovePreparationValidator = class CanvasMovePreparationValidator {
+    constructor(fComponentsStore, fDraggableDataContext) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
     }
-    getOutlet(dragHandler) {
-        return this.fComponentsStore.fOutlets.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
+    }
+    handle(request) {
+        return !this.fDraggableDataContext.draggableItems.length &&
+            (this.isBackgroundElement(request.event.targetElement) || this.isDragOnHost(request.event.targetElement));
+    }
+    isBackgroundElement(targetElement) {
+        var _a;
+        return (_a = this.fComponentsStore.fBackground) === null || _a === void 0 ? void 0 : _a.isBackgroundElement(targetElement);
+    }
+    isDragOnHost(targetElement) {
+        return this.flowHost.contains(targetElement) && !this.getNode(targetElement);
+    }
+    getNode(targetElement) {
+        let result = this.fComponentsStore.findNode(targetElement);
+        if (result && result.fDraggingDisabled) {
+            result = undefined;
+        }
+        return result;
     }
 };
-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: [{
+CanvasMovePreparationValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+CanvasMovePreparationValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationValidator });
+CanvasMovePreparationValidator = __decorate([
+    FValidatorRegister(CanvasMovePreparationRequest)
+], CanvasMovePreparationValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CanvasMovePreparationValidator, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
 
-const CONNECTION_DRAG_COMMON_PROVIDERS = [
-    FindClosestInputUsingSnapThresholdExecution,
-    GetAllCanBeConnectedInputPositionsExecution,
-    GetConnectorWithRectExecution,
-    GetInputUnderPointerExecution,
-    GetInputUnderPointerValidator
+const CANVAS_MOVE_PREPARATION_PROVIDERS = [
+    CanvasMovePreparationExecution,
+    CanvasMovePreparationValidator,
+];
+
+const CANVAS_PROVIDERS = [
+    ...CANVAS_MOVE_FINALIZE_PROVIDERS,
+    ...CANVAS_MOVE_PREPARATION_PROVIDERS,
 ];
 
 var EFConnectableSide;
@@ -905,7 +1121,7 @@ class FResizeObserver extends Observable {
     }
 }
 
-let uniqueId$d = 0;
+let uniqueId$b = 0;
 class FGroupDirective extends FNodeBase {
     constructor(elementReference, renderer, fComponentsStore, fMediator, fBrowser) {
         super(elementReference.nativeElement);
@@ -914,7 +1130,7 @@ class FGroupDirective extends FNodeBase {
         this.fMediator = fMediator;
         this.fBrowser = fBrowser;
         this.subscriptions$ = new Subscription();
-        this.fId = `f-group-${uniqueId$d++}`;
+        this.fId = `f-group-${uniqueId$b++}`;
         this.fParentId = null;
         this.positionChange = new EventEmitter();
         this.sizeChange = new EventEmitter();
@@ -1038,7 +1254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-let uniqueId$c = 0;
+let uniqueId$a = 0;
 class FNodeDirective extends FNodeBase {
     constructor(elementReference, renderer, fComponentsStore, fMediator, fBrowser) {
         super(elementReference.nativeElement);
@@ -1047,7 +1263,7 @@ class FNodeDirective extends FNodeBase {
         this.fMediator = fMediator;
         this.fBrowser = fBrowser;
         this.subscriptions$ = new Subscription();
-        this.fId = `f-node-${uniqueId$c++}`;
+        this.fId = `f-node-${uniqueId$a++}`;
         this.fParentId = null;
         this.positionChange = new EventEmitter();
         this.sizeChange = new EventEmitter();
@@ -1179,14 +1395,14 @@ const F_NODE_PROVIDERS = [
     FResizeHandleDirective,
 ];
 
-let uniqueId$b = 0;
+let uniqueId$9 = 0;
 class FNodeInputDirective extends FNodeInputBase {
     constructor(elementReference, fNode, fComponentsStore) {
         super();
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-input-${uniqueId$b++}`;
+        this.id = `f-node-input-${uniqueId$9++}`;
         this.multiple = true;
         this.isDisabled = false;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1282,14 +1498,14 @@ function isNodeOutlet(element) {
     return !!element.closest('[fNodeOutlet]');
 }
 
-let uniqueId$a = 0;
+let uniqueId$8 = 0;
 class FNodeOutletDirective extends FNodeOutletBase {
     constructor(elementReference, fNode, fComponentsStore) {
         super();
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-outlet-${uniqueId$a++}`;
+        this.id = `f-node-outlet-${uniqueId$8++}`;
         this.isDisabled = false;
         this.fConnectableSide = EFConnectableSide.AUTO;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1365,14 +1581,14 @@ function isNodeOutput(element) {
     return !!element.closest('[fNodeOutput]');
 }
 
-let uniqueId$9 = 0;
+let uniqueId$7 = 0;
 class FNodeOutputDirective extends FNodeOutputBase {
     constructor(elementReference, fNode, fComponentsStore) {
         super();
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-output-${uniqueId$9++}`;
+        this.id = `f-node-output-${uniqueId$7++}`;
         this.multiple = false;
         this.isDisabled = false;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1463,6 +1679,38 @@ class CreateConnectionFinalizeRequest {
     }
 }
 
+function createErrorClass(impl) {
+    const _super = (instance) => {
+        Error.call(instance);
+    };
+    const constructor = impl(_super);
+    constructor.prototype = Object.create(Error.prototype);
+    constructor.prototype.constructor = constructor;
+    return constructor;
+}
+
+const NotFoundError = createErrorClass((_super) => function error(message) {
+    _super(this);
+    this.message = message || 'The requested resource was not found.';
+    this.code = 404;
+});
+
+const ConflictError = createErrorClass((_super) => function error(message) {
+    _super(this);
+    this.message = message || 'Conflict error occurred.';
+    this.code = 409;
+});
+
+function OutputNotFound(id) {
+    return new NotFoundError(`Output with fOutputId ${id} not found. Make sure there is no f-connection to a non-existent fOutput.`);
+}
+function InputNotFound(id) {
+    return new NotFoundError(`Input with fInputId ${id} not found. Make sure there is no f-connection to a non-existent fInput.`);
+}
+function RequiredOutput() {
+    return new ConflictError(`The fNode must contain at least one fOutput if there is an fOutlet`);
+}
+
 class GetCanBeConnectedOutputByOutletRequest {
     constructor(outlet) {
         this.outlet = outlet;
@@ -1524,11 +1772,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-const GET_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS = [
-    GetCanBeConnectedOutputByOutletExecution,
-    GetCanBeConnectedOutputByOutletValidator,
-];
-
 class FCreateConnectionEvent {
     constructor(fOutputId, fInputId, fDropPosition) {
         this.fOutputId = fOutputId;
@@ -1537,14 +1780,123 @@ class FCreateConnectionEvent {
     }
 }
 
-let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution {
-    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
+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.fMediator = fMediator;
+        this.fBrowser = fBrowser;
     }
-    get dragHandler() {
-        return this.fDraggableDataContext.draggableItems[0];
+    get fNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    get fInputs() {
+        return this.fComponentsStore.fInputs;
+    }
+    handle(payload) {
+        const output = (this.getOutput(payload.dragHandler) || this.getOutlet(payload.dragHandler));
+        const inputsUnderPointer = this.getInputsUnderPointer(payload.event.getPosition(), payload.dragHandler);
+        const connectors = output.isSelfConnectable ?
+            inputsUnderPointer :
+            this.filterSelfConnectable(inputsUnderPointer, output);
+        return connectors.length > 0 ? connectors[0] : undefined;
+    }
+    getOutput(dragHandler) {
+        return this.fComponentsStore.fOutputs.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    }
+    getOutlet(dragHandler) {
+        return this.fComponentsStore.fOutlets.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    }
+    getInputsUnderPointer(position, dragHandler) {
+        const result = this.getInputsInPosition(position);
+        const closestInput = dragHandler.getClosetInput(this.getDifference(position));
+        if (closestInput) {
+            result.push(closestInput.fConnector);
+        }
+        const input = this.getFirstConnectableInputOfNodeInPosition(position);
+        if (input) {
+            result.push(input);
+        }
+        return result;
+    }
+    getDifference(position) {
+        return Point.fromPoint(position).elementTransform(this.fComponentsStore.flowHost)
+            .div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
+    }
+    getInputsInPosition(position) {
+        return this.getElementsFromPoint(position).map((element) => this.fInputs.find(x => x.isContains(element) && x.canBeConnected)).filter((x) => !!x);
+    }
+    getElementsFromPoint(position) {
+        return this.fBrowser.document.elementsFromPoint(position.x, position.y);
+    }
+    getFirstConnectableInputOfNodeInPosition(position) {
+        return this.getNodesInPosition(position).map((x) => {
+            return this.fInputs.find((i) => x.isContains(i.hostElement) && i.canBeConnected);
+        }).find((x) => !!x);
+    }
+    getNodesInPosition(position) {
+        return this.getElementsFromPoint(position).map((element) => {
+            return this.fNodes.find((x) => x.isContains(element) && x.fConnectOnNode);
+        }).filter((x) => !!x);
+    }
+    filterSelfConnectable(inputs, connector) {
+        return inputs.filter((x) => {
+            const targetNode = this.fNodes.find((k) => k.isContains(x.hostElement));
+            const sourceNode = this.fNodes.find((k) => k.isContains(connector.hostElement));
+            return (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.hostElement) !== (targetNode === null || targetNode === void 0 ? void 0 : targetNode.hostElement);
+        });
+    }
+};
+GetInputUnderPointerExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Injectable });
+GetInputUnderPointerExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerExecution });
+GetInputUnderPointerExecution = __decorate([
+    FExecutionRegister(GetInputUnderPointerRequest)
+], GetInputUnderPointerExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i1.BrowserService }]; } });
+
+let GetInputUnderPointerValidator = class GetInputUnderPointerValidator {
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        let output = this.getOutput(request.dragHandler) || this.getOutlet(request.dragHandler);
+        if (!output) {
+            throw OutputNotFound(request.dragHandler.fConnection.fOutputId);
+        }
+        return true;
+    }
+    getOutput(dragHandler) {
+        return this.fComponentsStore.fOutputs.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    }
+    getOutlet(dragHandler) {
+        return this.fComponentsStore.fOutlets.find((x) => x.id === dragHandler.fConnection.fOutputId);
+    }
+};
+GetInputUnderPointerValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+GetInputUnderPointerValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerValidator });
+GetInputUnderPointerValidator = __decorate([
+    FValidatorRegister(GetInputUnderPointerRequest)
+], GetInputUnderPointerValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetInputUnderPointerValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+
+let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution {
+    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fMediator = fMediator;
+    }
+    get dragHandler() {
+        return this.fDraggableDataContext.draggableItems[0];
     }
     handle(request) {
         this.emitEvent(request.event);
@@ -1609,7 +1961,9 @@ class CreateConnectionDragHandler {
     }
     move(difference) {
         this.drawTempConnection(this.toConnectorRect.addPoint(difference));
-        this.drawSnapConnection(this.getClosetInput(difference));
+        if (this.fSnapConnection) {
+            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));
@@ -1629,6 +1983,9 @@ class CreateConnectionDragHandler {
         }
     }
     getClosetInput(difference) {
+        if (!this.fSnapConnection) {
+            return undefined;
+        }
         return this.fMediator.send(new FindClosestInputUsingSnapThresholdRequest(Point.fromPoint(this.toConnectorRect).add(difference), this.canBeConnectedInputs, this.fSnapConnection.fSnapThreshold));
     }
     complete() {
@@ -1656,11 +2013,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
 
-const CREATE_CONNECTION_FINALIZE_PROVIDERS = [
-    CreateConnectionFinalizeExecution,
-    CreateConnectionFinalizeValidator,
-];
-
 class CreateConnectionDragHandlerRequest {
     constructor(onPointerDownPosition, connector) {
         this.onPointerDownPosition = onPointerDownPosition;
@@ -1701,10 +2053,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i2.FMediator }]; } });
 
-const CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS = [
-    CreateConnectionDragHandlerExecution,
-];
-
 class CreateConnectionFromOutletPreparationRequest {
     constructor(event) {
         this.event = event;
@@ -1753,10 +2101,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
 
-const CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS = [
-    CreateConnectionFromOutletPreparationExecution,
-];
-
 class CreateConnectionFromOutputPreparationRequest {
     constructor(event) {
         this.event = event;
@@ -1819,11 +2163,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
-const CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS = [
-    CreateConnectionFromOutputPreparationExecution,
-    CreateConnectionFromOutputPreparationValidator,
-];
-
 class CreateConnectionPreparationRequest {
     constructor(event) {
         this.event = event;
@@ -1886,14 +2225,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
 
-const CREATE_CONNECTION_PREPARATION_PROVIDERS = [
-    ...CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS,
-    ...CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS,
-    ...CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS,
-    CreateConnectionPreparationExecution,
-    CreateConnectionPreparationValidator,
-];
-
 class ReassignConnectionFinalizeRequest {
     constructor(event) {
         this.event = event;
@@ -1976,8 +2307,13 @@ class ReassignConnectionDragHandler {
         return this.fComponentsStore.fInputs.find((x) => x.id === this.fConnection.fInputId);
     }
     move(difference) {
-        this.drawConnection({ fRect: this.toConnectorRect.addPoint(difference), fConnector: this.fInputWithRect.fConnector });
-        this.drawSnapConnection(this.getClosetInput(difference));
+        this.drawConnection({
+            fRect: this.toConnectorRect.addPoint(difference),
+            fConnector: this.fInputWithRect.fConnector
+        });
+        if (this.fSnapConnection) {
+            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));
@@ -1997,6 +2333,9 @@ class ReassignConnectionDragHandler {
         }
     }
     getClosetInput(difference) {
+        if (!this.fSnapConnection) {
+            return undefined;
+        }
         return this.fMediator.send(new FindClosestInputUsingSnapThresholdRequest(Point.fromPoint(this.toConnectorRect).add(difference), this.canBeConnectedInputs, this.fSnapConnection.fSnapThreshold));
     }
     complete() {
@@ -2023,11 +2362,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
 
-const REASSIGN_CONNECTION_FINALIZE_PROVIDERS = [
-    ReassignConnectionFinalizeExecution,
-    ReassignConnectionFinalizeValidator,
-];
-
 class ReassignConnectionPreparationRequest {
     constructor(event) {
         this.event = event;
@@ -2750,12 +3084,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-let uniqueId$8 = 0;
+let uniqueId$6 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fId = `f-connection-for-create-${uniqueId$8++}`;
+        this.fId = `f-connection-for-create-${uniqueId$6++}`;
         this.fText = '';
         this._fStartColor = 'black';
         this._fEndColor = 'black';
@@ -2873,12 +3207,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
-let uniqueId$7 = 0;
+let uniqueId$5 = 0;
 class FConnectionComponent extends FConnectionBase {
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fId = `f-connection-${uniqueId$7++}`;
+        this.fId = `f-connection-${uniqueId$5++}`;
         this._fText = '';
         this._fStartColor = 'black';
         this._fEndColor = 'black';
@@ -3102,12 +3436,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-let uniqueId$6 = 0;
+let uniqueId$4 = 0;
 class FSnapConnectionComponent extends FConnectionBase {
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fId = `f-snap-connection-${uniqueId$6++}`;
+        this.fId = `f-snap-connection-${uniqueId$4++}`;
         this.fText = '';
         this._fStartColor = 'black';
         this._fEndColor = 'black';
@@ -3326,20 +3660,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i1.BrowserService }]; } });
 
-const REASSIGN_CONNECTION_PREPARATION_PROVIDERS = [
+const CONNECTIONS_PROVIDERS = [
+    GetInputUnderPointerExecution,
+    GetInputUnderPointerValidator,
+    CreateConnectionFinalizeExecution,
+    CreateConnectionFinalizeValidator,
+    CreateConnectionDragHandlerExecution,
+    CreateConnectionFromOutletPreparationExecution,
+    GetCanBeConnectedOutputByOutletExecution,
+    GetCanBeConnectedOutputByOutletValidator,
+    CreateConnectionFromOutputPreparationExecution,
+    CreateConnectionFromOutputPreparationValidator,
+    CreateConnectionPreparationExecution,
+    CreateConnectionPreparationValidator,
+    ReassignConnectionFinalizeExecution,
+    ReassignConnectionFinalizeValidator,
     ReassignConnectionPreparationExecution,
     ReassignConnectionPreparationValidator,
 ];
 
-const CONNECTIONS_PROVIDERS = [
-    ...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,
-];
-
 class GetNodePaddingRequest {
     constructor(fNode, rect) {
         this.fNode = fNode;
@@ -4237,9 +4576,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 
 class GetNormalizedChildrenNodesRectRequest {
-    constructor(fNode, rect) {
+    constructor(fNode, paddings) {
         this.fNode = fNode;
-        this.rect = rect;
+        this.paddings = paddings;
     }
 }
 
@@ -4250,7 +4589,7 @@ let GetNormalizedChildrenNodesRectExecution = class GetNormalizedChildrenNodesRe
     handle(request) {
         const childNodeRect = RectExtensions.union(this.getChildrenNodes(request.fNode.fId).map((x) => this.normalizeRect(x)));
         return childNodeRect ?
-            this.concatRectWithParentPadding(childNodeRect, this.getNodePadding(request.fNode, request.rect)) : null;
+            this.concatRectWithParentPadding(childNodeRect, request.paddings) : null;
     }
     getChildrenNodes(fId) {
         return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId));
@@ -4258,9 +4597,6 @@ let GetNormalizedChildrenNodesRectExecution = class GetNormalizedChildrenNodesRe
     normalizeRect(node) {
         return this.fMediator.send(new GetNormalizedNodeRectRequest(node));
     }
-    getNodePadding(node, rect) {
-        return this.fMediator.send(new GetNodePaddingRequest(node, rect));
-    }
     concatRectWithParentPadding(rect, padding) {
         return RectExtensions.initialize(rect.x - padding[0], rect.y - padding[1], rect.width + padding[0] + padding[2], rect.height + +padding[1] + padding[3]);
     }
@@ -4286,13 +4622,18 @@ let GetNodeResizeRestrictionsExecution = class GetNodeResizeRestrictionsExecutio
         this.fMediator = fMediator;
     }
     handle(request) {
-        const childRect = this.fMediator.send(new GetNormalizedChildrenNodesRectRequest(request.fNode, request.rect));
+        const fNodePaddings = this.getNodePaddings(request.fNode, request.rect);
+        const childRect = this.fMediator.send(new GetNormalizedChildrenNodesRectRequest(request.fNode, fNodePaddings));
         const parentRect = this.fMediator.send(new GetNormalizedParentNodeRectRequest(request.fNode));
         return {
             parentRect,
             childRect,
+            minSize: SizeExtensions.initialize(fNodePaddings[0] + fNodePaddings[2], fNodePaddings[1] + fNodePaddings[3])
         };
     }
+    getNodePaddings(node, rect) {
+        return this.fMediator.send(new GetNodePaddingRequest(node, rect));
+    }
 };
 GetNodeResizeRestrictionsExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetNodeResizeRestrictionsExecution, deps: [{ token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
 GetNodeResizeRestrictionsExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetNodeResizeRestrictionsExecution });
@@ -4334,7 +4675,8 @@ class NodeResizeDragHandler {
         this.fMediator = fMediator;
         this.fNode = fNode;
         this.fResizeHandleType = fResizeHandleType;
-        this.childRestrictions = () => { };
+        this.childRestrictions = () => {
+        };
     }
     initialize() {
         this.originalRect = this.fMediator.send(new GetNormalizedNodeRectRequest(this.fNode));
@@ -4346,14 +4688,14 @@ class NodeResizeDragHandler {
         }
     }
     move(difference) {
-        const changedRect = this.changePosition(difference, this.changeSize(difference));
+        const changedRect = this.changePosition(difference, this.changeSize(difference, this.restrictions.minSize));
         this.childRestrictions(changedRect, this.restrictions.childRect);
         this.applyParentRestrictions(changedRect, this.restrictions.parentRect);
         this.fNode.updatePosition(changedRect);
         this.fNode.updateSize(changedRect);
         this.fNode.redraw();
     }
-    changeSize(difference) {
+    changeSize(difference, minSize) {
         return this.fMediator.send(new CalculateChangedSizeRequest(this.originalRect, difference, this.fResizeHandleType));
     }
     changePosition(difference, changedRect) {
@@ -4826,13 +5168,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-let uniqueId$5 = 0;
+let uniqueId$3 = 0;
 class FExternalItemDirective extends FExternalItemBase {
     constructor(elementReference, fExternalItemService) {
         super();
         this.elementReference = elementReference;
         this.fExternalItemService = fExternalItemService;
-        this.fExternalItemId = `f-external-item-${uniqueId$5++}`;
+        this.fExternalItemId = `f-external-item-${uniqueId$3++}`;
         this.fDisabled = false;
     }
     get hostElement() {
@@ -5038,13 +5380,6 @@ class FSelectionChangeEvent {
     }
 }
 
-class MinimapDragPreparationRequest {
-    constructor(event, minimap) {
-        this.event = event;
-        this.minimap = minimap;
-    }
-}
-
 class CalculateFlowPointFromMinimapPointRequest {
     constructor(flowRect, canvasPosition, eventPoint, minimap) {
         this.flowRect = flowRect;
@@ -5088,6 +5423,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
 
+class MinimapDragFinalizeRequest {
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+let MinimapDragFinalizeExecution = class MinimapDragFinalizeExecution {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        this.fDraggableDataContext.draggableItems.forEach((x) => {
+            var _a;
+            (_a = x.complete) === null || _a === void 0 ? void 0 : _a.call(x);
+        });
+    }
+};
+MinimapDragFinalizeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+MinimapDragFinalizeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution });
+MinimapDragFinalizeExecution = __decorate([
+    FExecutionRegister(MinimapDragFinalizeRequest)
+], MinimapDragFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+
 class FMinimapDragHandler {
     constructor(fComponentsStore, fMediator, flowRect, canvasPosition, eventPoint, minimap) {
         this.fComponentsStore = fComponentsStore;
@@ -5123,6 +5484,35 @@ class FMinimapDragHandler {
     }
 }
 
+let MinimapDragFinalizeValidator = class MinimapDragFinalizeValidator {
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof FMinimapDragHandler);
+    }
+};
+MinimapDragFinalizeValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+MinimapDragFinalizeValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator });
+MinimapDragFinalizeValidator = __decorate([
+    FValidatorRegister(MinimapDragFinalizeRequest)
+], MinimapDragFinalizeValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+
+const MINIMAP_DRAG_FINALIZE_PROVIDERS = [
+    MinimapDragFinalizeExecution,
+    MinimapDragFinalizeValidator,
+];
+
+class MinimapDragPreparationRequest {
+    constructor(event, minimap) {
+        this.event = event;
+        this.minimap = minimap;
+    }
+}
+
 let MinimapDragPreparationExecution = class MinimapDragPreparationExecution {
     constructor(fComponentsStore, fMediator, fDraggableDataContext) {
         this.fComponentsStore = fComponentsStore;
@@ -5185,67 +5575,34 @@ const MINIMAP_DRAG_PREPARATION_PROVIDERS = [
     MinimapDragPreparationValidator,
 ];
 
-class MinimapDragFinalizeRequest {
+function checkRectIsFinite(rect) {
+    if (!Number.isFinite(rect.width) || !Number.isFinite(rect.height) || !Number.isFinite(rect.x) || !Number.isFinite(rect.y)) {
+        return RectExtensions.initialize(0, 0, 0, 0);
+    }
+    return rect;
+}
+
+class FMinimapData {
+    constructor(element, scale = 1, viewBox = RectExtensions.initialize(0, 0, 0, 0)) {
+        this.element = element;
+        this.scale = scale;
+        this.viewBox = viewBox;
+    }
+}
+
+const F_MINIMAP_DRAG_AND_DROP_PROVIDERS = [
+    CalculateFlowPointFromMinimapPointExecution,
+    ...MINIMAP_DRAG_FINALIZE_PROVIDERS,
+    ...MINIMAP_DRAG_PREPARATION_PROVIDERS,
+];
+
+class SelectionAreaFinalizeRequest {
     constructor(event) {
         this.event = event;
     }
 }
 
-let MinimapDragFinalizeExecution = class MinimapDragFinalizeExecution {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        this.fDraggableDataContext.draggableItems.forEach((x) => {
-            var _a;
-            (_a = x.complete) === null || _a === void 0 ? void 0 : _a.call(x);
-        });
-    }
-};
-MinimapDragFinalizeExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-MinimapDragFinalizeExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution });
-MinimapDragFinalizeExecution = __decorate([
-    FExecutionRegister(MinimapDragFinalizeRequest)
-], MinimapDragFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
-
-let MinimapDragFinalizeValidator = class MinimapDragFinalizeValidator {
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof FMinimapDragHandler);
-    }
-};
-MinimapDragFinalizeValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-MinimapDragFinalizeValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator });
-MinimapDragFinalizeValidator = __decorate([
-    FValidatorRegister(MinimapDragFinalizeRequest)
-], MinimapDragFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MinimapDragFinalizeValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
-
-const MINIMAP_DRAG_FINALIZE_PROVIDERS = [
-    MinimapDragFinalizeExecution,
-    MinimapDragFinalizeValidator,
-];
-
-const F_MINIMAP_DRAG_AND_DROP_PROVIDERS = [
-    CalculateFlowPointFromMinimapPointExecution,
-    ...MINIMAP_DRAG_FINALIZE_PROVIDERS,
-    ...MINIMAP_DRAG_PREPARATION_PROVIDERS,
-];
-
-class SelectionAreaFinalizeRequest {
-    constructor(event) {
-        this.event = event;
-    }
-}
-
-let SelectionAreaFinalizeExecution = class SelectionAreaFinalizeExecution {
+let SelectionAreaFinalizeExecution = class SelectionAreaFinalizeExecution {
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
@@ -5403,6 +5760,69 @@ const F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS = [
     ...SELECTION_AREA_PREPARATION_PROVIDERS
 ];
 
+class FSelectionAreaBase {
+}
+FSelectionAreaBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FSelectionAreaBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FSelectionAreaBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaBase, decorators: [{
+            type: Directive
+        }] });
+
+class FSelectionAreaComponent extends FSelectionAreaBase {
+    constructor(elementReference, fMediator) {
+        super();
+        this.elementReference = elementReference;
+        this.fMediator = fMediator;
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    ngOnInit() {
+        this.hostElement.style.display = 'none';
+    }
+    hide() {
+        this.hostElement.style.display = 'none';
+    }
+    show() {
+        this.hostElement.style.display = 'block';
+    }
+    draw(object) {
+        const style = this.hostElement.style;
+        style.left = object.x + 'px';
+        style.top = object.y + 'px';
+        style.width = object.width + 'px';
+        style.height = object.height + 'px';
+    }
+    onPointerDown(event) {
+        this.fMediator.send(new SelectionAreaPreparationRequest(event, this));
+    }
+    onPointerUp(event) {
+        this.fMediator.send(new SelectionAreaFinalizeRequest(event));
+    }
+}
+FSelectionAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Component });
+FSelectionAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
+        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "f-selection-area",
+                    template: ``,
+                    styleUrls: ['./f-selection-area.component.scss'],
+                    host: {
+                        'class': 'f-selection-area f-component'
+                    },
+                    providers: [
+                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.FMediator }]; } });
+
+const F_SELECTION_AREA_PROVIDERS = [
+    FSelectionAreaComponent
+];
+
 const F_DRAGGABLE_PROVIDERS = [
     ...CANVAS_PROVIDERS,
     ...CONNECTIONS_PROVIDERS,
@@ -5739,45 +6159,6 @@ const F_SELECTION_FEATURES = [
     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;
@@ -6383,415 +6764,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: FTransformStore }, { type: FComponentsStore }]; } });
 
-const F_CANVAS_ANIMATION_DURATION = 150;
-
-function createSVGElement(tag, fBrowser) {
-    return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
-}
-
-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;
-        }
-        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);
-    }
-    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);
-    }
-    getNode(id) {
-        return this.fComponentsStore.fNodes.find((x) => x.fId === id);
-    }
-    getNodeRect(fNode) {
-        return RectExtensions.fromElement(fNode.hostElement);
-    }
-    getFlowRect() {
-        return RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement);
-    }
-};
-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 }]; } });
-
-class FitToFlowRequest {
-    constructor(toCenter, animated) {
-        this.toCenter = toCenter;
-        this.animated = animated;
-    }
-}
-
-let FitToFlowExecution = class FitToFlowExecution {
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    handle(request) {
-        const fNodesRect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize();
-        if (fNodesRect.width === 0 || fNodesRect.height === 0) {
-            return;
-        }
-        this.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);
-    }
-};
-FitToFlowExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FitToFlowExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-FitToFlowExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FitToFlowExecution });
-FitToFlowExecution = __decorate([
-    FExecutionRegister(FitToFlowRequest)
-], FitToFlowExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FitToFlowExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
-
-class InputCanvasPositionRequest {
-    constructor(transform, position) {
-        this.transform = transform;
-        this.position = position;
-    }
-}
-
-let InputCanvasPositionExecution = class InputCanvasPositionExecution {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(request) {
-        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();
-        }
-    }
-};
-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 InputCanvasScaleRequest {
-    constructor(transform, scale) {
-        this.transform = transform;
-        this.scale = scale;
-    }
-}
-
-let InputCanvasScaleExecution = class InputCanvasScaleExecution {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(request) {
-        var _a;
-        if (!request.scale) {
-            return;
-        }
-        request.transform.scale = request.scale;
-        (_a = this.fComponentsStore.fCanvas) === null || _a === void 0 ? void 0 : _a.redraw();
-    }
-};
-InputCanvasScaleExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasScaleExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-InputCanvasScaleExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasScaleExecution });
-InputCanvasScaleExecution = __decorate([
-    FExecutionRegister(InputCanvasScaleRequest)
-], InputCanvasScaleExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputCanvasScaleExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
-
-class ResetScaleRequest {
-}
-
-let ResetScaleExecution = class ResetScaleExecution {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    handle(request) {
-        this.transform.scale = 1;
-        this.transform.scaledPosition = PointExtensions.initialize();
-    }
-};
-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;
-    }
-}
-
-let ResetScaleAndCenterExecution = class ResetScaleAndCenterExecution {
-    constructor(fComponentsStore, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fMediator = fMediator;
-    }
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    handle(request) {
-        const fNodesRect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize();
-        if (fNodesRect.width === 0 || fNodesRect.height === 0) {
-            return;
-        }
-        this.oneToOneCentering(fNodesRect, RectExtensions.fromElement(this.fComponentsStore.fFlow.hostElement), this.fComponentsStore.fNodes.map((x) => x.position));
-        request.animated ? this.fComponentsStore.fCanvas.redrawWithAnimation() : this.fComponentsStore.fCanvas.redraw();
-        this.fComponentsStore.fCanvas.emitCanvasChangeEvent();
-        setTimeout(() => this.fComponentsStore.componentDataChanged(), F_CANVAS_ANIMATION_DURATION);
-    }
-    oneToOneCentering(rect, parentRect, points) {
-        this.transform.scaledPosition = PointExtensions.initialize();
-        this.transform.position = this.getZeroPositionWithoutScale(points);
-        const newX = (parentRect.width - rect.width / this.transform.scale) / 2 - this.transform.position.x;
-        const newY = (parentRect.height - rect.height / this.transform.scale) / 2 - this.transform.position.y;
-        this.transform.scale = 1;
-        this.transform.position = PointExtensions.initialize(newX, newY);
-    }
-    getZeroPositionWithoutScale(points) {
-        const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
-        const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
-        return PointExtensions.initialize(xPoint, yPoint);
-    }
-};
-ResetScaleAndCenterExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleAndCenterExecution, deps: [{ token: FComponentsStore }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-ResetScaleAndCenterExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleAndCenterExecution });
-ResetScaleAndCenterExecution = __decorate([
-    FExecutionRegister(ResetScaleAndCenterRequest)
-], ResetScaleAndCenterExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ResetScaleAndCenterExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: i2.FMediator }]; } });
-
-class UpdateScaleRequest {
-    constructor(scale, toPosition) {
-        this.scale = scale;
-        this.toPosition = toPosition;
-    }
-}
-
-let UpdateScaleExecution = class UpdateScaleExecution {
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    get transform() {
-        return this.fComponentsStore.fCanvas.transform;
-    }
-    handle(request) {
-        if (request.scale !== this.transform.scale) {
-            const summaryPosition = PointExtensions.sum(this.transform.scaledPosition, this.transform.position);
-            const newX = request.toPosition.x - (request.toPosition.x - summaryPosition.x) * request.scale / this.transform.scale;
-            const newY = request.toPosition.y - (request.toPosition.y - summaryPosition.y) * request.scale / this.transform.scale;
-            this.transform.scale = request.scale;
-            this.transform.scaledPosition = PointExtensions.sub(PointExtensions.initialize(newX, newY), this.transform.position);
-        }
-    }
-};
-UpdateScaleExecution.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateScaleExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-UpdateScaleExecution.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateScaleExecution });
-UpdateScaleExecution = __decorate([
-    FExecutionRegister(UpdateScaleRequest)
-], UpdateScaleExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UpdateScaleExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
-
-class FCanvasChangeEvent {
-    constructor(position, scale) {
-        this.position = position;
-        this.scale = scale;
-    }
-}
-
-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();
-    }
-    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));
-    }
-    fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
-        this.fMediator.send(new FitToFlowRequest(toCenter, animated));
-    }
-    resetScaleAndCenter(animated = true) {
-        this.fMediator.send(new ResetScaleAndCenterRequest(animated));
-    }
-    setZoom(scale, toPosition = PointExtensions.initialize()) {
-        this.fMediator.send(new UpdateScaleRequest(scale, toPosition));
-    }
-    resetZoom() {
-        this.fMediator.send(new ResetScaleRequest());
-    }
-}
-FCanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FCanvasComponent, deps: [{ token: i0.ElementRef }, { token: i2.FMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
-FCanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
-        { provide: F_CANVAS, useExisting: FCanvasComponent }
-    ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, static: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-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,
-];
+const F_CANVAS_ANIMATION_DURATION = 150;
 
-const F_BACKGROUND_FEATURES = [
-    AddPatternToBackgroundExecution
-];
+function createSVGElement(tag, fBrowser) {
+    return fBrowser.document.createElementNS('http://www.w3.org/2000/svg', tag);
+}
 
 const COMMON_PROVIDERS = [
     ...F_CANVAS_FEATURES,
+    ...F_CONNECTION_FEATURES,
     ...F_BACKGROUND_FEATURES,
     CreateConnectionMarkersExecution,
     CreateRoundedRectFromElementExecution,
@@ -6816,54 +6797,14 @@ const COMMON_PROVIDERS = [
     MoveFrontElementsBeforeTargetElementExecution,
 ];
 
-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;
+let uniqueId$2 = 0;
 class FRectPatternComponent {
     constructor(elementReference, fBrowser) {
         this.elementReference = elementReference;
         this.fBrowser = fBrowser;
         this._subscription$ = new Subscription();
         this._stateChanges = new Subject();
-        this.id = `f-pattern-${uniqueId$3++}`;
+        this.id = `f-pattern-${uniqueId$2++}`;
         this._vColor = 'rgba(0,0,0,0.1)';
         this._hColor = 'rgba(0,0,0,0.1)';
         this._vSize = 20;
@@ -6970,14 +6911,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-let uniqueId$2 = 0;
+let uniqueId$1 = 0;
 class FCirclePatternComponent {
     constructor(elementReference, fBrowser) {
         this.elementReference = elementReference;
         this.fBrowser = fBrowser;
         this._subscription$ = new Subscription();
         this._stateChanges = new Subject();
-        this.id = `f-pattern-${uniqueId$2++}`;
+        this.id = `f-pattern-${uniqueId$1++}`;
         this._color = 'rgba(0,0,0,0.1)';
         this._radius = 20;
         this._scaledRadius = 20;
@@ -7075,7 +7016,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Directive
         }] });
 
-let uniqueId$1 = 0;
 class FBackgroundComponent extends FBackgroundBase {
     constructor(elementReference, fComponentsStore, fMediator) {
         super();
@@ -7128,6 +7068,127 @@ const F_BACKGROUND_PROVIDERS = [
     FCirclePatternComponent
 ];
 
+class FCanvasChangeEvent {
+    constructor(position, scale) {
+        this.position = position;
+        this.scale = scale;
+    }
+}
+
+const F_CANVAS = new InjectionToken('F_CANVAS');
+class FCanvasBase {
+    constructor() {
+        this.transform = TransformModelExtensions.default();
+    }
+    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));
+    }
+    fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
+        this.fMediator.send(new FitToFlowRequest(toCenter, animated));
+    }
+    resetScaleAndCenter(animated = true) {
+        this.fMediator.send(new ResetScaleAndCenterRequest(animated));
+    }
+    setZoom(scale, toPosition = PointExtensions.initialize()) {
+        this.fMediator.send(new UpdateScaleRequest(scale, toPosition));
+    }
+    resetZoom() {
+        this.fMediator.send(new ResetScaleRequest());
+    }
+}
+FCanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FCanvasComponent, deps: [{ token: i0.ElementRef }, { token: i2.FMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
+FCanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [
+        { provide: F_CANVAS, useExisting: FCanvasComponent }
+    ], viewQueries: [{ propertyName: "fGroupsContainer", first: true, predicate: ["fGroupsContainer"], descendants: true, static: true }, { propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-snap-connection\"></ng-content>\n    <ng-content select=\"f-connection\"></ng-content>\n    <ng-content select=\"f-connection-for-create\"></ng-content>\n  </div>\n\n  <div #fNodesContainer>\n    <ng-content select=\"[fNode]\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host.f-scaled-animate{transition:transform .09s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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;
@@ -7387,21 +7448,6 @@ const F_LINE_ALIGNMENT_PROVIDERS = [
     FLineAlignmentComponent
 ];
 
-function checkRectIsFinite(rect) {
-    if (!Number.isFinite(rect.width) || !Number.isFinite(rect.height) || !Number.isFinite(rect.x) || !Number.isFinite(rect.y)) {
-        return RectExtensions.initialize(0, 0, 0, 0);
-    }
-    return rect;
-}
-
-class FMinimapData {
-    constructor(element, scale = 1, viewBox = RectExtensions.initialize(0, 0, 0, 0)) {
-        this.element = element;
-        this.scale = scale;
-        this.viewBox = viewBox;
-    }
-}
-
 class FMinimapFlowDirective {
     constructor(elementReference, fMediator, fComponentsStore) {
         this.elementReference = elementReference;
@@ -7633,69 +7679,6 @@ const F_MINIMAP_PROVIDERS = [
     FMinimapFlowDirective,
 ];
 
-class FSelectionAreaBase {
-}
-FSelectionAreaBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FSelectionAreaBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FSelectionAreaBase, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaBase, decorators: [{
-            type: Directive
-        }] });
-
-class FSelectionAreaComponent extends FSelectionAreaBase {
-    constructor(elementReference, fMediator) {
-        super();
-        this.elementReference = elementReference;
-        this.fMediator = fMediator;
-    }
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    ngOnInit() {
-        this.hostElement.style.display = 'none';
-    }
-    hide() {
-        this.hostElement.style.display = 'none';
-    }
-    show() {
-        this.hostElement.style.display = 'block';
-    }
-    draw(object) {
-        const style = this.hostElement.style;
-        style.left = object.x + 'px';
-        style.top = object.y + 'px';
-        style.width = object.width + 'px';
-        style.height = object.height + 'px';
-    }
-    onPointerDown(event) {
-        this.fMediator.send(new SelectionAreaPreparationRequest(event, this));
-    }
-    onPointerUp(event) {
-        this.fMediator.send(new SelectionAreaFinalizeRequest(event));
-    }
-}
-FSelectionAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: i2.FMediator }], target: i0.ɵɵFactoryTarget.Component });
-FSelectionAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
-        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "f-selection-area",
-                    template: ``,
-                    styleUrls: ['./f-selection-area.component.scss'],
-                    host: {
-                        'class': 'f-selection-area f-component'
-                    },
-                    providers: [
-                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.FMediator }]; } });
-
-const F_SELECTION_AREA_PROVIDERS = [
-    FSelectionAreaComponent
-];
-
 const F_FLOW = new InjectionToken('F_FLOW');
 class FFlowBase {
 }
@@ -7735,7 +7718,6 @@ class FFlowComponent extends FFlowBase {
         return this.fComponentsStore.componentsData$.pipe(startWith(null), debounceTime(1)).subscribe(() => {
             this.fMediator.send(new RedrawConnectionsRequest());
             if (!this.isLoaded) {
-                // this.fMediator.send(new ShowConnectionsAfterCalculationsRequest());
                 this.isLoaded = true;
                 this.fLoaded.emit();
             }
@@ -7779,8 +7761,8 @@ FFlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         FTransformStore,
         FDraggableDataContext,
         FConnectionFactory,
-        ...F_DRAGGABLE_PROVIDERS,
         ...COMMON_PROVIDERS,
+        ...F_DRAGGABLE_PROVIDERS,
         { provide: F_FLOW, useExisting: FFlowComponent },
     ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"[fDefinitions]\"></ng-content>\n\n  <ng-content select=\"f-background\"></ng-content>\n\n  <ng-content select=\"f-line-alignment\"></ng-content>\n\n  <ng-content select=\"f-canvas\"></ng-content>\n\n  <ng-content select=\"f-selection-area\"></ng-content>\n\n  <ng-content select=\"f-minimap\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FFlowComponent, decorators: [{
@@ -7799,8 +7781,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         FTransformStore,
                         FDraggableDataContext,
                         FConnectionFactory,
-                        ...F_DRAGGABLE_PROVIDERS,
                         ...COMMON_PROVIDERS,
+                        ...F_DRAGGABLE_PROVIDERS,
                         { provide: F_FLOW, useExisting: FFlowComponent },
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -8016,5 +7998,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, CANVAS_MOVE_FINALIZE_PROVIDERS, CANVAS_MOVE_PREPARATION_PROVIDERS, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMoveFinalizeValidator, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CanvasMovePreparationValidator, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, ConnectionBaseDragHandler, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionDragHandlerExecution, CreateConnectionDragHandlerRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFinalizeValidator, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionFromOutputPreparationValidator, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateConnectionPreparationValidator, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, CreateRoundedRectFromElementExecution, CreateRoundedRectFromElementRequest, DRAG_AND_DROP_COMMON_PROVIDERS, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EXTERNAL_ITEM_FINALIZE_PROVIDERS, EXTERNAL_ITEM_PREPARATION_PROVIDERS, EmitTransformChangesExecution, EmitTransformChangesRequest, ExternalItemDragHandler, ExternalItemFinalizeExecution, ExternalItemFinalizeRequest, ExternalItemFinalizeValidator, ExternalItemPreparationExecution, ExternalItemPreparationRequest, ExternalItemPreparationValidator, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FRectPatternComponent, FResizeHandleDirective, FResizeObserver, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSnapConnectionComponent, FStraightPathBuilder, FTransformStore, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_ANIMATION_DURATION, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_PROVIDERS, F_DRAGGABLE_PROVIDERS, F_DRAG_AND_DROP_PLUGIN, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_RESIZE_HANDLE, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_ZOOM, F_ZOOM_PROVIDERS, FindClosestInputUsingSnapThresholdExecution, FindClosestInputUsingSnapThresholdRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputPositionsExecution, GetAllCanBeConnectedInputPositionsRequest, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeConnectedOutputByOutletValidator, GetCanBeSelectedItemsExecution, GetConnectionLineExecution, GetConnectionLineRequest, GetConnectorWithRectExecution, GetConnectorWithRectRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRectInFlowExecution, GetElementRectInFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetInputUnderPointerExecution, GetInputUnderPointerRequest, GetInputUnderPointerValidator, GetNodeMoveRestrictionsExecution, GetNodeMoveRestrictionsRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesRectExecution, GetNodesRectRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedNodeRectExecution, GetNormalizedNodeRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetParentNodesExecution, GetParentNodesRequest, GetPositionInFlowExecution, GetPositionInFlowRequest, GetScaledNodeRectsWithFlowPositionExecution, GetScaledNodeRectsWithFlowPositionRequest, GetSelectionExecution, GetSelectionRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, LineElement, LineService, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragFinalizeValidator, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDragPreparationValidator, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, NODE_MOVE_FINALIZE_PROVIDERS, NODE_MOVE_PREPARATION_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_FINALIZE_PROVIDERS, NODE_RESIZE_PREPARATION_PROVIDERS, NODE_RESIZE_PROVIDERS, NearestCoordinateFinder, NodeDragHandler, NodeMoveFinalizeExecution, NodeMoveFinalizeRequest, NodeMoveFinalizeValidator, NodeMovePreparationExecution, NodeMovePreparationRequest, NodeMovePreparationValidator, NodeResizeByChildDragHandler, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizeFinalizeValidator, NodeResizePreparationExecution, NodeResizePreparationRequest, NodeResizePreparationValidator, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, RESIZE_DIRECTIONS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionFinalizeValidator, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, ReassignConnectionPreparationValidator, RedrawConnectionsExecution, RedrawConnectionsRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, SELECTION_AREA_FINALIZE_PROVIDERS, SELECTION_AREA_PREPARATION_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaFinalizeValidator, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SelectionAreaPreparationValidator, ShowConnectionsAfterCalculationsExecution, ShowConnectionsAfterCalculationsRequest, SingleSelectExecution, SingleSelectRequest, SingleSelectValidator, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SubscribeOnTransformChangesExecution, SubscribeOnTransformChangesRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateScaleExecution, UpdateScaleRequest, checkRectIsFinite, createSVGElement, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isGroup, isNode, isNodeOutlet, isNodeOutput, mixinChangeSelection, mixinChangeVisibility };
 //# sourceMappingURL=foblex-flow.js.map