@foblex/flow 12.5.1 → 12.6.0

package/fesm2022/foblex-flow.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, ChangeDetectionStrategy, Input, Directive, Injectable, ContentChild, HostBinding, Inject, ViewChild, Optional, ContentChildren, EventEmitter, Output, NgZone, NgModule } from '@angular/core';
-import * as i1 from '@foblex/core';
+import * as i3$1 from '@foblex/core';
 import { TransformModelExtensions, PointExtensions, SizeExtensions, DomElementExtensions, mixinChangePosition, mixinFitToParent, mixinOneToOneCentering, mixinChangeZoom, Point, RectExtensions, sanitizeElementId, LineExtensions, BooleanExtensions, MouseEventExtensions, EventExtensions, IMouseEvent, ITouchDownEvent, ITouchMoveEvent, ITouchUpEvent, Arc, Line, VectorExtensions } from '@foblex/core';
 import { Subscription, Subject, startWith, Observable, merge, debounceTime } from 'rxjs';
 import { __decorate } from 'tslib';
@@ -9,7 +9,7 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
-let uniqueId$a = 0;
+let uniqueId$b = 0;
 class FRectPatternComponent {
     elementReference;
     _subscription$ = new Subscription();
@@ -17,7 +17,7 @@ class FRectPatternComponent {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    id = `f-pattern-${uniqueId$a++}`;
+    id = `f-pattern-${uniqueId$b++}`;
     _vColor = 'rgba(0,0,0,0.1)';
     set vColor(value) {
         this._vColor = value;
@@ -126,7 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }] } });
 
-let uniqueId$9 = 0;
+let uniqueId$a = 0;
 class FCirclePatternComponent {
     elementReference;
     _subscription$ = new Subscription();
@@ -134,7 +134,7 @@ class FCirclePatternComponent {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    id = `f-pattern-${uniqueId$9++}`;
+    id = `f-pattern-${uniqueId$a++}`;
     _color = 'rgba(0,0,0,0.1)';
     set color(value) {
         this._color = value;
@@ -234,7 +234,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         }] });
 
 class FComponentsStore {
-    changes = new Subject();
+    componentsDataChanges = new Subject();
+    get componentsData$() {
+        return this.componentsDataChanges.asObservable();
+    }
+    componentsCountChanges = new Subject();
+    get componentsCount$() {
+        return this.componentsCountChanges.asObservable();
+    }
     get flowHost() {
         return this.fFlow?.hostElement;
     }
@@ -257,15 +264,18 @@ class FComponentsStore {
     }
     addComponent(collection, component) {
         collection.push(component);
-        this.changes.next();
+        this.componentsCountChanges.next();
     }
     removeComponent(collection, component) {
         const index = collection.indexOf(component);
         if (index > -1) {
             collection.splice(index, 1);
-            this.changes.next();
+            this.componentsCountChanges.next();
         }
     }
+    componentDataChanged() {
+        this.componentsDataChanges.next();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FComponentsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FComponentsStore });
 }
@@ -282,7 +292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }] });
 
-let uniqueId$8 = 0;
+let uniqueId$9 = 0;
 class FBackgroundComponent extends FBackgroundBase {
     elementReference;
     fComponentsStore;
@@ -303,7 +313,7 @@ class FBackgroundComponent extends FBackgroundBase {
         const pattern = children.length ? children[0] : undefined;
         if (pattern) {
             const defs = DomElementExtensions.createSvgElement('defs');
-            pattern.id = 'f-background-marker-' + uniqueId$8++;
+            pattern.id = 'f-background-marker-' + uniqueId$9++;
             this.fBackgroundPattern?.hostElement.remove();
             defs.appendChild(pattern);
             this.hostElement?.firstChild?.appendChild(defs);
@@ -453,7 +463,6 @@ class FDraggableDataContext {
     onPointerDownScale = 1;
     onPointerDownPosition = new Point(0, 0);
     draggableItems = [];
-    fSelectionArea;
     fLineAlignment;
     reset() {
         this.draggableItems = [];
@@ -476,9 +485,7 @@ let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
-        this.fDraggableDataContext.draggableItems.forEach((x) => {
-            x.complete?.();
-        });
+        this.fDraggableDataContext.draggableItems.forEach((x) => x.complete?.());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CanvasMoveFinalizeExecution });
@@ -490,18 +497,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-var EFDraggableType;
-(function (EFDraggableType) {
-    EFDraggableType["NODE"] = "node";
-    EFDraggableType["NODE_RESIZE"] = "node-resize";
-    EFDraggableType["REASSIGN_CONNECTION"] = "reassign-connection";
-    EFDraggableType["CREATE_CONNECTION"] = "create-connection";
-    EFDraggableType["CONNECTION"] = "connection";
-    EFDraggableType["MINI_MAP"] = "minimap";
-    EFDraggableType["CANVAS"] = "canvas";
-    EFDraggableType["PALETTE_ITEM"] = "palette-item";
-    EFDraggableType["SELECTION"] = "selection";
-})(EFDraggableType || (EFDraggableType = {}));
+class CanvasDragHandler {
+    fComponentsStore;
+    onPointerDownPosition = PointExtensions.initialize();
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    initialize() {
+        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
+    }
+    move(difference) {
+        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
+        this.fComponentsStore.fCanvas.redraw();
+    }
+    complete() {
+        this.fComponentsStore.fCanvas.completeDrag();
+    }
+}
 
 let CanvasMoveFinalizeValidator = class CanvasMoveFinalizeValidator {
     fDraggableDataContext;
@@ -509,7 +521,7 @@ let CanvasMoveFinalizeValidator = class CanvasMoveFinalizeValidator {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.CANVAS);
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof CanvasDragHandler);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CanvasMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CanvasMoveFinalizeValidator });
@@ -533,25 +545,6 @@ class CanvasMovePreparationRequest {
     }
 }
 
-class CanvasDragHandler {
-    fComponentsStore;
-    type = EFDraggableType.CANVAS;
-    onPointerDownPosition = PointExtensions.initialize();
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    initialize() {
-        this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
-    }
-    move(difference) {
-        this.fComponentsStore.fCanvas.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
-        this.fComponentsStore.fCanvas.redraw();
-    }
-    complete() {
-        this.fComponentsStore.fCanvas.completeDrag();
-    }
-}
-
 let CanvasMovePreparationExecution = class CanvasMovePreparationExecution {
     fComponentsStore;
     fDraggableDataContext;
@@ -602,11 +595,15 @@ let CanvasMovePreparationValidator = class CanvasMovePreparationValidator {
     }
     getNode(targetElement) {
         let result = this.fComponentsStore.findNode(targetElement);
+        // if (result && result.fDraggingDisabled || !this.isNodeHasDragHandle(targetElement)) {
         if (result && result.fDraggingDisabled) {
             result = undefined;
         }
         return result;
     }
+    isNodeHasDragHandle(targetElement) {
+        return isElementWithClass(targetElement, '.f-drag-handle');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CanvasMovePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CanvasMovePreparationValidator });
 };
@@ -711,6 +708,14 @@ function isNodeInput(element) {
     return !!element.closest('[fNodeInput]');
 }
 
+function isGroup(element) {
+    return !!element.closest('[fGroup]');
+}
+
+function isNode(element) {
+    return !!element.closest('[fNode]');
+}
+
 const F_DRAG_HANDLE = new InjectionToken('F_DRAG_HANDLE');
 class FDragHandleDirective {
     elementReference;
@@ -903,7 +908,7 @@ class FBezierPathBuilder {
         const targetAnglePoint = FBezierPathBuilder.getAnglePoint(targetSide, target, source, offset);
         const path = `M ${source.x} ${source.y} C ${sourceAnglePoint.x} ${sourceAnglePoint.y}, ${targetAnglePoint.x} ${targetAnglePoint.y}, ${target.x + 0.0002} ${target.y + 0.0002}`;
         const connectionCenter = new CalculateConnectionCenterHandler().handle(new CalculateConnectionCenterRequest([source, sourceAnglePoint, targetAnglePoint, target]));
-        return { path, connectionCenter };
+        return { path, connectionCenter, penultimatePoint: targetAnglePoint };
     }
 }
 
@@ -919,7 +924,8 @@ class FSegmentPathBuilder {
         const { source, sourceSide, target, targetSide } = request;
         const { points, center } = this.getPathPoints(source, sourceSide, target, targetSide, request.offset);
         const path = this.buildPath(points, request.radius);
-        return { path, connectionCenter: center };
+        const penultimatePoint = points.length > 1 ? points[points.length - 2] : source;
+        return { path, connectionCenter: center, penultimatePoint };
     }
     getPathPoints(source, sourceSide, target, targetSide, offset) {
         const sourceDirection = CONNECTOR_SIDE_POINT[sourceSide];
@@ -1049,7 +1055,7 @@ class FStraightPathBuilder {
         const { source, target } = request;
         const path = `M ${source.x} ${source.y} L ${target.x + 0.0002} ${target.y + 0.0002}`;
         const connectionCenter = new CalculateConnectionCenterHandler().handle(new CalculateConnectionCenterRequest([source, target]));
-        return { path, connectionCenter };
+        return { path, connectionCenter, penultimatePoint: source };
     }
 }
 
@@ -1080,7 +1086,7 @@ class FConnectionTextPathDirective {
     elementReference;
     base;
     get linkToConnection() {
-        return F_CONNECTION_IDENTIFIERS.linkToConnection(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.linkToConnection(this.base.fId + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -1142,7 +1148,7 @@ class FConnectionTextComponent {
     elementReference;
     base;
     get textId() {
-        return F_CONNECTION_IDENTIFIERS.textId(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.textId(this.base.fId + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -1209,8 +1215,8 @@ class FConnectionDragHandleComponent {
     constructor(elementReference) {
         this.elementReference = elementReference;
     }
-    redraw(start, end) {
-        const point = this.calculateCircleCenter(start, end, 8);
+    redraw(penultimatePoint, endPoint) {
+        const point = this.calculateCircleCenter(penultimatePoint, endPoint, 8);
         this.hostElement.setAttribute('cx', point.x.toString());
         this.hostElement.setAttribute('cy', point.y.toString());
     }
@@ -1242,7 +1248,7 @@ class FConnectionGradientComponent {
     elementReference;
     base;
     get gradientId() {
-        return F_CONNECTION_IDENTIFIERS.gradientId(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.gradientId(this.base.fId + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -1317,13 +1323,13 @@ class FConnectionPathComponent {
     elementReference;
     base;
     get fPathId() {
-        return this.base.fConnectionId;
+        return this.base.fId;
     }
     get linkToGradient() {
-        return F_CONNECTION_IDENTIFIERS.linkToGradient(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.linkToGradient(this.base.fId + this.base.fOutputId + this.base.fInputId);
     }
     get attrConnectionId() {
-        return F_CONNECTION_IDENTIFIERS.connectionId(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.connectionId(this.base.fId + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -1339,12 +1345,12 @@ class FConnectionPathComponent {
         this.hostElement.setAttribute("d", `${path}`);
     }
     select() {
-        this.hostElement.setAttribute('marker-start', `url(#${getMarkerSelectedStartId(this.base.fConnectionId)})`);
-        this.hostElement.setAttribute('marker-end', `url(#${getMarkerSelectedEndId(this.base.fConnectionId)})`);
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerSelectedStartId(this.base.fId)})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerSelectedEndId(this.base.fId)})`);
     }
     deselect() {
-        this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this.base.fConnectionId)})`);
-        this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fConnectionId)})`);
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this.base.fId)})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fId)})`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.data-f-path-id": "fPathId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1372,7 +1378,7 @@ class FConnectionSelectionComponent {
     elementReference;
     base;
     get connectionForSelectionId() {
-        return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this.base.fId + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -1406,6 +1412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 const F_SELECTED_CLASS = 'f-selected';
 function mixinChangeConnectionSelection(base) {
     return class extends base {
+        fId = '';
         fSelectionDisabled = false;
         fPath;
         deselect() {
@@ -1484,6 +1491,7 @@ class FConnectionBase extends MIXIN_BASE {
     path = '';
     line = LineExtensions.initialize();
     stateChanges = new Subject();
+    penultimatePoint = PointExtensions.initialize();
     constructor(elementReference, cFactory) {
         super(elementReference.nativeElement);
         this.cFactory = cFactory;
@@ -1500,6 +1508,7 @@ class FConnectionBase extends MIXIN_BASE {
         this.line = LineExtensions.initialize(source, target);
         const pathResult = this.getPathResult(source, sourceSide, target, targetSide);
         this.path = pathResult.path;
+        this.penultimatePoint = pathResult.penultimatePoint || source;
         this.fConnectionCenter?.nativeElement?.setAttribute('style', this.getTransform(pathResult.connectionCenter));
     }
     getPathResult(source, sourceSide, target, targetSide) {
@@ -1517,7 +1526,7 @@ class FConnectionBase extends MIXIN_BASE {
         this.fPath.setPath(this.path);
         this.fSelection.setPath(this.path);
         this.fGradient.redraw(this.line);
-        this.fDragHandle.redraw(this.line.point1, this.line.point2);
+        this.fDragHandle.redraw(this.penultimatePoint, this.line.point2);
         this.fTextComponent.redraw(this.line);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FConnectionBase, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Directive });
@@ -1552,15 +1561,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }] });
 
-let uniqueId$7 = 0;
+let uniqueId$8 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
     fComponentsStore;
-    fConnectionId = `f-connection-for-create-${uniqueId$7++}`;
+    fId = `f-connection-for-create-${uniqueId$8++}`;
     fText = '';
     _fStartColor = 'black';
     set fStartColor(value) {
         this._fStartColor = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fStartColor() {
         return this._fStartColor;
@@ -1568,7 +1577,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     _fEndColor = 'black';
     set fEndColor(value) {
         this._fEndColor = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fEndColor() {
         return this._fEndColor;
@@ -1578,7 +1587,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     _fRadius = 8;
     set fRadius(value) {
         this._fRadius = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fRadius() {
         return this._fRadius;
@@ -1586,7 +1595,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     _fOffset = 32;
     set fOffset(value) {
         this._fOffset = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fOffset() {
         return this._fOffset;
@@ -1594,7 +1603,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     _behavior = EFConnectionBehavior.FIXED;
     set fBehavior(value) {
         this._behavior = castToEnum(value, 'fBehavior', EFConnectionBehavior);
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fBehavior() {
         return this._behavior;
@@ -1602,7 +1611,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     _type = EFConnectionType.STRAIGHT;
     set fType(value) {
         this._type = castToEnum(value, 'fType', EFConnectionType);
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fType() {
         return this._type;
@@ -1639,14 +1648,17 @@ class FConnectionForCreateComponent extends FConnectionBase {
         this.fComponentsStore.fTempConnection = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fId: ["fConnectionId", "fId"], fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection-for-create", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection f-connection-for-create"
                     }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }, { type: FComponentsStore }], propDecorators: { fStartColor: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }, { type: FComponentsStore }], propDecorators: { fId: [{
+                type: Input,
+                args: ['fConnectionId']
+            }], fStartColor: [{
                 type: Input
             }], fEndColor: [{
                 type: Input
@@ -1684,14 +1696,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
-let uniqueId$6 = 0;
+let uniqueId$7 = 0;
 class FConnectionComponent extends FConnectionBase {
     fComponentsStore;
-    fConnectionId = `f-connection-${uniqueId$6++}`;
+    fId = `f-connection-${uniqueId$7++}`;
     _fText = '';
     set fText(value) {
         this._fText = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fText() {
         return this._fText;
@@ -1699,7 +1711,7 @@ class FConnectionComponent extends FConnectionBase {
     _fStartColor = 'black';
     set fStartColor(value) {
         this._fStartColor = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fStartColor() {
         return this._fStartColor;
@@ -1707,7 +1719,7 @@ class FConnectionComponent extends FConnectionBase {
     _fEndColor = 'black';
     set fEndColor(value) {
         this._fEndColor = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fEndColor() {
         return this._fEndColor;
@@ -1715,7 +1727,7 @@ class FConnectionComponent extends FConnectionBase {
     _fOutputId;
     set fOutputId(value) {
         this._fOutputId = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fOutputId() {
         return this._fOutputId;
@@ -1723,7 +1735,7 @@ class FConnectionComponent extends FConnectionBase {
     _fInputId;
     set fInputId(value) {
         this._fInputId = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fInputId() {
         return this._fInputId;
@@ -1731,7 +1743,7 @@ class FConnectionComponent extends FConnectionBase {
     _fRadius = 8;
     set fRadius(value) {
         this._fRadius = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fRadius() {
         return this._fRadius;
@@ -1739,7 +1751,7 @@ class FConnectionComponent extends FConnectionBase {
     _fOffset = 32;
     set fOffset(value) {
         this._fOffset = value;
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fOffset() {
         return this._fOffset;
@@ -1747,7 +1759,7 @@ class FConnectionComponent extends FConnectionBase {
     _behavior = EFConnectionBehavior.FIXED;
     set fBehavior(value) {
         this._behavior = castToEnum(value, 'fBehavior', EFConnectionBehavior);
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fBehavior() {
         return this._behavior;
@@ -1755,7 +1767,7 @@ class FConnectionComponent extends FConnectionBase {
     _type = EFConnectionType.STRAIGHT;
     set fType(value) {
         this._type = value; //castToEnum(value, 'fType', EFConnectionType);
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     get fType() {
         return this._type;
@@ -1789,18 +1801,19 @@ class FConnectionComponent extends FConnectionBase {
         this.fComponentsStore.removeComponent(this.fComponentsStore.fConnections, this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FConnectionComponent, selector: "f-connection", inputs: { fConnectionId: "fConnectionId", fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled"], fSelectionDisabled: "fSelectionDisabled" }, host: { properties: { "attr.id": "fConnectionId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FConnectionComponent, selector: "f-connection", inputs: { fId: ["fConnectionId", "fId"], fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled"], fSelectionDisabled: "fSelectionDisabled" }, host: { properties: { "attr.id": "fId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection", exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'fConnectionId',
+                        '[attr.id]': 'fId',
                         class: "f-component f-connection",
                         '[class.f-connection-selection-disabled]': 'fSelectionDisabled',
                         '[class.f-connection-reassign-disabled]': 'fDraggingDisabled',
                     }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n  <defs #defs></defs>\n  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }, { type: FComponentsStore }], propDecorators: { fConnectionId: [{
-                type: Input
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }, { type: FComponentsStore }], propDecorators: { fId: [{
+                type: Input,
+                args: ['fConnectionId']
             }], fText: [{
                 type: Input
             }], fStartColor: [{
@@ -1940,6 +1953,7 @@ class FNodeBase {
     stateChanges = new Subject();
     _position = PointExtensions.initialize();
     _size;
+    fCanBeResizedByChild = true;
     isContains(element) {
         return this.hostElement.contains(element);
     }
@@ -1982,6 +1996,143 @@ class FResizeObserver extends Observable {
     }
 }
 
+let uniqueId$6 = 0;
+class FGroupDirective extends FNodeBase {
+    elementReference;
+    renderer;
+    fComponentsStore;
+    fMediator;
+    subscriptions$ = new Subscription();
+    fId = `f-group-${uniqueId$6++}`;
+    fParentId = null;
+    set position(value) {
+        this._position = PointExtensions.castToPoint(value);
+        this.refresh();
+    }
+    get position() {
+        return this._position;
+    }
+    positionChange = new EventEmitter();
+    set size(value) {
+        this._size = value;
+        this.refresh();
+    }
+    get size() {
+        return this._size;
+    }
+    sizeChange = new EventEmitter();
+    fDraggingDisabled = false;
+    fSelectionDisabled = false;
+    fIncludePadding = true;
+    fConnectOnNode = true;
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    connectors = [];
+    constructor(elementReference, renderer, fComponentsStore, fMediator) {
+        super();
+        this.elementReference = elementReference;
+        this.renderer = renderer;
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+    }
+    ngOnInit() {
+        this.setStyle('position', 'absolute');
+        this.setStyle('transform-origin', 'center');
+        this.setStyle('user-select', 'none');
+        this.setStyle('pointer-events', 'all');
+        this.setStyle('left', '0');
+        this.setStyle('top', '0');
+        super.redraw();
+        this.fComponentsStore.addComponent(this.fComponentsStore.fNodes, this);
+    }
+    setStyle(styleName, value) {
+        this.renderer.setStyle(this.hostElement, styleName, value);
+    }
+    redraw() {
+        super.redraw();
+        this.fMediator.send(new EmitTransformChangesRequest());
+    }
+    ngAfterViewInit() {
+        this.subscriptions$.add(this.subscribeOnResizeChanges());
+    }
+    subscribeOnResizeChanges() {
+        return merge(new FResizeObserver(this.hostElement), this.stateChanges).pipe(debounceTime(10), startWith(null)).subscribe(() => {
+            this.connectors.forEach((fConnector) => {
+                fConnector.fConnectableSide = new CalculateConnectorConnectableSideHandler().handle(new CalculateConnectorConnectableSideRequest(fConnector, this.hostElement));
+            });
+            this.fComponentsStore.componentDataChanged();
+        });
+    }
+    addConnector(connector) {
+        this.connectors.push(connector);
+        this.stateChanges.next();
+    }
+    removeConnector(connector) {
+        const index = this.connectors.indexOf(connector);
+        if (index !== -1) {
+            this.connectors.splice(index, 1);
+        }
+        this.stateChanges.next();
+    }
+    refresh() {
+        this.stateChanges.next();
+    }
+    ngOnDestroy() {
+        this.fComponentsStore.removeComponent(this.fComponentsStore.fNodes, this);
+        this.stateChanges.complete();
+        this.subscriptions$.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FGroupDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FGroupDirective, selector: "[fGroup]", inputs: { fId: ["fGroupId", "fId"], fParentId: ["fGroupParentId", "fParentId"], position: ["fGroupPosition", "position"], size: ["fGroupSize", "size"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled"], fIncludePadding: "fIncludePadding", fConnectOnNode: "fConnectOnNode" }, outputs: { positionChange: "fGroupPositionChange", sizeChange: "fGroupSizeChange" }, host: { properties: { "attr.data-f-group-id": "fId", "class.f-group-dragging-disabled": "fDraggingDisabled", "class.f-group-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-group f-component" }, providers: [
+            { provide: F_NODE, useExisting: FGroupDirective }
+        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fGroup]",
+                    exportAs: "fComponent",
+                    host: {
+                        '[attr.data-f-group-id]': 'fId',
+                        class: "f-group f-component",
+                        '[class.f-group-dragging-disabled]': 'fDraggingDisabled',
+                        '[class.f-group-selection-disabled]': 'fSelectionDisabled',
+                    },
+                    providers: [
+                        { provide: F_NODE, useExisting: FGroupDirective }
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FComponentsStore }, { type: FFlowMediator }], propDecorators: { fId: [{
+                type: Input,
+                args: ['fGroupId']
+            }], fParentId: [{
+                type: Input,
+                args: ['fGroupParentId']
+            }], position: [{
+                type: Input,
+                args: ['fGroupPosition']
+            }], positionChange: [{
+                type: Output,
+                args: ['fGroupPositionChange']
+            }], size: [{
+                type: Input,
+                args: ['fGroupSize']
+            }], sizeChange: [{
+                type: Output,
+                args: ['fGroupSizeChange']
+            }], fDraggingDisabled: [{
+                type: Input,
+                args: ['fGroupDraggingDisabled']
+            }], fSelectionDisabled: [{
+                type: Input,
+                args: ['fGroupSelectionDisabled']
+            }], fIncludePadding: [{
+                type: Input
+            }], fConnectOnNode: [{
+                type: Input
+            }] } });
+
 let uniqueId$5 = 0;
 class FNodeDirective extends FNodeBase {
     elementReference;
@@ -1990,6 +2141,7 @@ class FNodeDirective extends FNodeBase {
     fMediator;
     subscriptions$ = new Subscription();
     fId = `f-node-${uniqueId$5++}`;
+    fParentId = null;
     set position(value) {
         this._position = PointExtensions.castToPoint(value);
         this.refresh();
@@ -2008,6 +2160,8 @@ class FNodeDirective extends FNodeBase {
     sizeChange = new EventEmitter();
     fDraggingDisabled = false;
     fSelectionDisabled = false;
+    fIncludePadding = true;
+    //TODO: Add ability to connect to first connectable input if node is under pointer
     fConnectOnNode = true;
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2045,7 +2199,7 @@ class FNodeDirective extends FNodeBase {
             this.connectors.forEach((fConnector) => {
                 fConnector.fConnectableSide = new CalculateConnectorConnectableSideHandler().handle(new CalculateConnectorConnectableSideRequest(fConnector, this.hostElement));
             });
-            this.fComponentsStore.changes.next();
+            this.fComponentsStore.componentDataChanged();
         });
     }
     addConnector(connector) {
@@ -2068,7 +2222,7 @@ class FNodeDirective extends FNodeBase {
         this.subscriptions$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled"], fConnectOnNode: "fConnectOnNode" }, outputs: { positionChange: "fNodePositionChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], fParentId: ["fNodeParentId", "fParentId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled"], fIncludePadding: "fIncludePadding", fConnectOnNode: "fConnectOnNode" }, outputs: { positionChange: "fNodePositionChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
             { provide: F_NODE, useExisting: FNodeDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
@@ -2090,6 +2244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FComponentsStore }, { type: FFlowMediator }], propDecorators: { fId: [{
                 type: Input,
                 args: ['fNodeId']
+            }], fParentId: [{
+                type: Input,
+                args: ['fNodeParentId']
             }], position: [{
                 type: Input,
                 args: ['fNodePosition']
@@ -2108,19 +2265,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }], fSelectionDisabled: [{
                 type: Input,
                 args: ['fNodeSelectionDisabled']
+            }], fIncludePadding: [{
+                type: Input
             }], fConnectOnNode: [{
                 type: Input
             }] } });
 
-function isNode(element) {
-    return !!element.closest('[fNode]');
-}
-
 const F_NODE_PROVIDERS = [
+    FGroupDirective,
     FNodeDirective,
     FDragHandleDirective,
     FResizeHandleDirective,
-    // FRotateHandleDirective
 ];
 
 let uniqueId$4 = 0;
@@ -2675,13 +2830,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
+class CreateConnectionDragHandler {
+    fMediator;
+    connection;
+    mouseDownPoint;
+    onPointerDownFromConnectorRect = new RoundedRect();
+    onPointerDownToConnectorRect = new RoundedRect();
+    outputSide = EFConnectableSide.BOTTOM;
+    constructor(fMediator, connection, mouseDownPoint) {
+        this.fMediator = fMediator;
+        this.connection = connection;
+        this.mouseDownPoint = mouseDownPoint;
+    }
+    initialize() {
+        const outputRect = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
+        this.outputSide = outputRect.fConnectableSide;
+        this.onPointerDownFromConnectorRect = RoundedRect.fromRoundedRect(outputRect.rect);
+        this.onPointerDownToConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this.mouseDownPoint.x, this.mouseDownPoint.y, 0, 0));
+        this.connection.show();
+        this.move(new Point(0, 0));
+    }
+    move(difference) {
+        const line = this.fMediator.send(new GetConnectionLineRequest(this.onPointerDownFromConnectorRect, this.onPointerDownToConnectorRect.addPoint(difference), this.connection.fBehavior, this.outputSide, EFConnectableSide.TOP));
+        this.connection.setLine(line.point1, this.outputSide, line.point2, EFConnectableSide.TOP);
+        this.connection.redraw();
+    }
+    complete() {
+        this.connection.redraw();
+        this.connection.hide();
+    }
+}
+
 let CreateConnectionFinalizeValidator = class CreateConnectionFinalizeValidator {
     fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.CREATE_CONNECTION);
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof CreateConnectionDragHandler);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CreateConnectionFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CreateConnectionFinalizeValidator });
@@ -2709,38 +2895,6 @@ class CreateConnectionDragHandlerRequest {
     }
 }
 
-class CreateConnectionDragHandler {
-    fMediator;
-    connection;
-    mouseDownPoint;
-    type = EFDraggableType.CREATE_CONNECTION;
-    onPointerDownFromConnectorRect = new RoundedRect();
-    onPointerDownToConnectorRect = new RoundedRect();
-    outputSide = EFConnectableSide.BOTTOM;
-    constructor(fMediator, connection, mouseDownPoint) {
-        this.fMediator = fMediator;
-        this.connection = connection;
-        this.mouseDownPoint = mouseDownPoint;
-    }
-    initialize() {
-        const outputRect = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
-        this.outputSide = outputRect.fConnectableSide;
-        this.onPointerDownFromConnectorRect = RoundedRect.fromRoundedRect(outputRect.rect);
-        this.onPointerDownToConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(this.mouseDownPoint.x, this.mouseDownPoint.y, 0, 0));
-        this.connection.show();
-        this.move(new Point(0, 0));
-    }
-    move(difference) {
-        const line = this.fMediator.send(new GetConnectionLineRequest(this.onPointerDownFromConnectorRect, this.onPointerDownToConnectorRect.addPoint(difference), this.connection.fBehavior, this.outputSide, EFConnectableSide.TOP));
-        this.connection.setLine(line.point1, this.outputSide, line.point2, EFConnectableSide.TOP);
-        this.connection.redraw();
-    }
-    complete() {
-        this.connection.redraw();
-        this.connection.hide();
-    }
-}
-
 let CreateConnectionDragHandlerExecution = class CreateConnectionDragHandlerExecution {
     fComponentsStore;
     fDraggableDataContext;
@@ -3031,7 +3185,7 @@ let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecut
         if (!input || !this.isReassignToDifferentInput(input)) {
             return;
         }
-        this.fDraggable.fReassignConnection.emit(new FReassignConnectionEvent(this.dragHandler.connection.fConnectionId, this.dragHandler.connection.fOutputId, this.dragHandler.connection.fInputId, input.id));
+        this.fDraggable.fReassignConnection.emit(new FReassignConnectionEvent(this.dragHandler.connection.fId, this.dragHandler.connection.fOutputId, this.dragHandler.connection.fInputId, input.id));
     }
     getInputUnderPointer(event) {
         return this.fMediator.send(new GetInputUnderPointerRequest(event, this.dragHandler));
@@ -3049,40 +3203,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
-let ReassignConnectionFinalizeValidator = class ReassignConnectionFinalizeValidator {
-    fDraggableDataContext;
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.REASSIGN_CONNECTION);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ReassignConnectionFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ReassignConnectionFinalizeValidator });
-};
-ReassignConnectionFinalizeValidator = __decorate([
-    FValidatorRegister(ReassignConnectionFinalizeRequest)
-], ReassignConnectionFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ReassignConnectionFinalizeValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
-
-const REASSIGN_CONNECTION_FINALIZE_PROVIDERS = [
-    ReassignConnectionFinalizeExecution,
-    ReassignConnectionFinalizeValidator,
-];
-
-class ReassignConnectionPreparationRequest {
-    event;
-    constructor(event) {
-        this.event = event;
-    }
-}
-
 class ReassignConnectionDragHandler {
     fMediator;
     connection;
-    type = EFDraggableType.REASSIGN_CONNECTION;
     onPointerDownFromConnectorRect = new RoundedRect();
     onPointerDownToConnectorRect = new RoundedRect();
     outputSide = EFConnectableSide.BOTTOM;
@@ -3112,6 +3235,36 @@ class ReassignConnectionDragHandler {
     }
 }
 
+let ReassignConnectionFinalizeValidator = class ReassignConnectionFinalizeValidator {
+    fDraggableDataContext;
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof ReassignConnectionDragHandler);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ReassignConnectionFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ReassignConnectionFinalizeValidator });
+};
+ReassignConnectionFinalizeValidator = __decorate([
+    FValidatorRegister(ReassignConnectionFinalizeRequest)
+], ReassignConnectionFinalizeValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ReassignConnectionFinalizeValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
+
+const REASSIGN_CONNECTION_FINALIZE_PROVIDERS = [
+    ReassignConnectionFinalizeExecution,
+    ReassignConnectionFinalizeValidator,
+];
+
+class ReassignConnectionPreparationRequest {
+    event;
+    constructor(event) {
+        this.event = event;
+    }
+}
+
 let ReassignConnectionPreparationExecution = class ReassignConnectionPreparationExecution {
     fComponentsStore;
     fDraggableDataContext;
@@ -3135,7 +3288,7 @@ let ReassignConnectionPreparationExecution = class ReassignConnectionPreparation
         if (connectionToReassign.fDraggingDisabled) {
             return;
         }
-        this.fMediator.send(new UpdateItemLayerRequest(connectionToReassign, this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement));
+        this.fMediator.send(new UpdateItemAndChildrenLayersRequest(connectionToReassign, this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement));
         this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
         this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
             .elementTransform(this.flowHost).div(this.transform.scale);
@@ -3213,296 +3366,535 @@ const CONNECTIONS_PROVIDERS = [
     ...GET_INPUT_UNDER_POINTER_PROVIDERS,
 ];
 
-class ExternalItemFinalizeRequest {
-    event;
-    constructor(event) {
-        this.event = event;
+class ConvertComputedToPixelsRequest {
+    value;
+    clientWidth;
+    clientHeight;
+    fontSize;
+    constructor(value, clientWidth, clientHeight, fontSize) {
+        this.value = value;
+        this.clientWidth = clientWidth;
+        this.clientHeight = clientHeight;
+        this.fontSize = fontSize;
     }
 }
 
-class FCreateNodeEvent {
+let ConvertComputedToPixelsExecution = class ConvertComputedToPixelsExecution {
+    windowService;
+    constructor(windowService) {
+        this.windowService = windowService;
+    }
+    handle(request) {
+        return this.convert(request.value, request.clientWidth, request.clientHeight, request.fontSize);
+    }
+    convert(value, clientWidth, clientHeight, fontSize) {
+        if (value.endsWith('px')) {
+            return parseFloat(value);
+        }
+        else if (value.endsWith('%')) {
+            const percentage = parseFloat(value) / 100;
+            return Math.max(clientWidth, clientHeight) * percentage;
+        }
+        else if (value.endsWith('em')) {
+            return parseFloat(value) * parseFloat(fontSize);
+        }
+        else if (value.endsWith('rem')) {
+            return parseFloat(value) * parseFloat(getComputedStyle(this.windowService.getWindow().document.documentElement).fontSize);
+        }
+        else if (value.endsWith('vh')) {
+            const vh = this.windowService.getWindow().innerHeight / 100;
+            return parseFloat(value) * vh;
+        }
+        else if (value.endsWith('vw')) {
+            const vw = this.windowService.getWindow().innerWidth / 100;
+            return parseFloat(value) * vw;
+        }
+        return parseFloat(value) || 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ConvertComputedToPixelsExecution, deps: [{ token: i3$1.WindowService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ConvertComputedToPixelsExecution });
+};
+ConvertComputedToPixelsExecution = __decorate([
+    FExecutionRegister(ConvertComputedToPixelsRequest)
+], ConvertComputedToPixelsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ConvertComputedToPixelsExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i3$1.WindowService }] });
+
+class GetNodePaddingRequest {
+    fNode;
     rect;
-    data;
-    constructor(rect, data) {
+    constructor(fNode, rect) {
+        this.fNode = fNode;
         this.rect = rect;
-        this.data = data;
     }
 }
 
-let ExternalItemFinalizeExecution = class ExternalItemFinalizeExecution {
-    fComponentsStore;
-    fDraggableDataContext;
+let GetNodePaddingExecution = class GetNodePaddingExecution {
     fMediator;
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+    constructor(fMediator) {
+        this.fMediator = fMediator;
     }
-    get fCreateNode() {
-        return this.fComponentsStore.fDraggable.fCreateNode;
+    handle(request) {
+        return request.fNode.fIncludePadding ? this.getPaddingData(request.fNode, request.rect) : [0, 0, 0, 0];
     }
-    get dragHandler() {
-        return this.fDraggableDataContext.draggableItems[0];
+    getPaddingData(node, rect) {
+        const style = window.getComputedStyle(node.hostElement);
+        return [
+            this.convertToPixels(style.paddingLeft, rect.width, rect.height, style.fontSize),
+            this.convertToPixels(style.paddingTop, rect.width, rect.height, style.fontSize),
+            this.convertToPixels(style.paddingRight, rect.width, rect.height, style.fontSize),
+            this.convertToPixels(style.paddingBottom, rect.width, rect.height, style.fontSize)
+        ];
     }
-    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
+    convertToPixels(value, clientWidth, clientHeight, fontSize) {
+        return this.fMediator.send(new ConvertComputedToPixelsRequest(value, clientWidth, clientHeight, fontSize));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNodePaddingExecution, deps: [{ token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNodePaddingExecution });
+};
+GetNodePaddingExecution = __decorate([
+    FExecutionRegister(GetNodePaddingRequest)
+], GetNodePaddingExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNodePaddingExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FFlowMediator }] });
+
+class GetNormalizedNodeRectRequest {
+    fNode;
+    constructor(fNode) {
+        this.fNode = fNode;
+    }
+}
+
+let GetNormalizedNodeRectExecution = class GetNormalizedNodeRectExecution {
+    fComponentsStore;
+    constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fMediator = fMediator;
     }
     handle(request) {
-        this.emitEvent(this.getExternalItemElementsFromPoint(request.event.getPosition()));
-        this.dragHandler.complete();
+        return this.normalizeRect(RectExtensions.fromElement(request.fNode.hostElement), request.fNode.position);
     }
-    getExternalItemElementsFromPoint(position) {
-        return document.elementsFromPoint(position.x, position.y)
-            .filter(x => !x.closest('.f-external-item'));
+    normalizeRect(scaledRect, position) {
+        const rect = RectExtensions.div(scaledRect, this.fComponentsStore.fCanvas.transform.scale);
+        return RectExtensions.initialize(position.x, position.y, rect.width, rect.height);
     }
-    emitEvent(elements) {
-        if (this.isPointerInCanvasRect(elements)) {
-            this.fCreateNode.emit(new FCreateNodeEvent(this.getRectInCanvas(), this.dragHandler.externalItem.fData));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNormalizedNodeRectExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNormalizedNodeRectExecution });
+};
+GetNormalizedNodeRectExecution = __decorate([
+    FExecutionRegister(GetNormalizedNodeRectRequest)
+], GetNormalizedNodeRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNormalizedNodeRectExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
+
+class GetNormalizedParentNodeRectRequest {
+    fNode;
+    constructor(fNode) {
+        this.fNode = fNode;
+    }
+}
+
+let GetNormalizedParentNodeRectExecution = class GetNormalizedParentNodeRectExecution {
+    fComponentsStore;
+    fMediator;
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+    }
+    handle(request) {
+        let result = RectExtensions.initialize(-Infinity, -Infinity, Infinity, Infinity);
+        const parentNode = this.getNode(request.fNode.fParentId);
+        if (parentNode) {
+            result = this.getParentRect(parentNode);
         }
+        return result;
     }
-    isPointerInCanvasRect(elements) {
-        return elements.length ? this.flowHost.contains(elements[0]) : false;
+    getNode(fId) {
+        return this.fComponentsStore.fNodes.find((x) => x.fId === fId);
     }
-    getRectInCanvas() {
-        return this.fMediator.send(new GetElementRectInFlowRequest(this.dragHandler.placeholder));
+    getParentRect(node) {
+        const rect = this.getNormalizedNodeRect(node);
+        const padding = this.getNodePadding(node, rect);
+        return RectExtensions.initialize(rect.x + padding[0], rect.y + padding[1], rect.width - padding[0] - padding[2], rect.height - padding[1] - padding[3]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeExecution });
+    getNormalizedNodeRect(node) {
+        return this.fMediator.send(new GetNormalizedNodeRectRequest(node));
+    }
+    getNodePadding(node, rect) {
+        return this.fMediator.send(new GetNodePaddingRequest(node, rect));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNormalizedParentNodeRectExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNormalizedParentNodeRectExecution });
 };
-ExternalItemFinalizeExecution = __decorate([
-    FExecutionRegister(ExternalItemFinalizeRequest)
-], ExternalItemFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeExecution, decorators: [{
+GetNormalizedParentNodeRectExecution = __decorate([
+    FExecutionRegister(GetNormalizedParentNodeRectRequest)
+], GetNormalizedParentNodeRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNormalizedParentNodeRectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
 
-let ExternalItemFinalizeValidator = class ExternalItemFinalizeValidator {
-    fDraggableDataContext;
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
+class GetParentNodesRequest {
+    fNode;
+    constructor(fNode) {
+        this.fNode = fNode;
+    }
+}
+
+let GetParentNodesExecution = class GetParentNodesExecution {
+    fComponentsStore;
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.PALETTE_ITEM);
+        return this.getParentNodes(request.fNode, new Set(), []);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeValidator });
+    getParentNodes(fNode, visited, result) {
+        if (visited.has(fNode.fId)) {
+            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fNode.fId);
+        }
+        visited.add(fNode.fId);
+        const parent = this.fComponentsStore.fNodes.find((x) => x.fId === fNode.fParentId);
+        if (!parent) {
+            return result;
+        }
+        result.push(parent);
+        return this.getParentNodes(parent, visited, result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetParentNodesExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetParentNodesExecution });
 };
-ExternalItemFinalizeValidator = __decorate([
-    FValidatorRegister(ExternalItemFinalizeRequest)
-], ExternalItemFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeValidator, decorators: [{
+GetParentNodesExecution = __decorate([
+    FExecutionRegister(GetParentNodesRequest)
+], GetParentNodesExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetParentNodesExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-const EXTERNAL_ITEM_FINALIZE_PROVIDERS = [
-    ExternalItemFinalizeExecution,
-    ExternalItemFinalizeValidator,
+class IsArrayHasParentNodeRequest {
+    fNode;
+    fNodes;
+    constructor(fNode, fNodes) {
+        this.fNode = fNode;
+        this.fNodes = fNodes;
+    }
+}
+
+let IsArrayHasParentNodeExecution = class IsArrayHasParentNodeExecution {
+    fMediator;
+    constructor(fMediator) {
+        this.fMediator = fMediator;
+    }
+    handle(request) {
+        return this.isParentNodeInArray(this.getParentNodeIds(request.fNode), request.fNodes);
+    }
+    getParentNodeIds(fNode) {
+        return this.getParentNodes(fNode).map((x) => x.fId);
+    }
+    getParentNodes(fNode) {
+        return this.fMediator.send(new GetParentNodesRequest(fNode));
+    }
+    isParentNodeInArray(parentNodeIds, fNodes) {
+        return fNodes.some((x) => parentNodeIds.includes(x.fId));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsArrayHasParentNodeExecution, deps: [{ token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsArrayHasParentNodeExecution });
+};
+IsArrayHasParentNodeExecution = __decorate([
+    FExecutionRegister(IsArrayHasParentNodeRequest)
+], IsArrayHasParentNodeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsArrayHasParentNodeExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FFlowMediator }] });
+
+const DRAG_AND_DROP_COMMON_PROVIDERS = [
+    ConvertComputedToPixelsExecution,
+    GetNodePaddingExecution,
+    GetNormalizedNodeRectExecution,
+    GetNormalizedParentNodeRectExecution,
+    GetParentNodesExecution,
+    IsArrayHasParentNodeExecution
 ];
 
-class ExternalItemPreparationRequest {
-    event;
-    constructor(event) {
-        this.event = event;
+class PutInputConnectionHandlersToArrayRequest {
+    nodeDragHandler;
+    outputIds;
+    result;
+    constructor(nodeDragHandler, outputIds, result) {
+        this.nodeDragHandler = nodeDragHandler;
+        this.outputIds = outputIds;
+        this.result = result;
     }
 }
 
-const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
-class FExternalItemBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FExternalItemBase, ngImport: i0 });
+class ConnectionBaseDragHandler {
+    fMediator;
+    connection;
+    fromConnectorRect = new RoundedRect();
+    fromConnectorSide = EFConnectableSide.BOTTOM;
+    toConnectorRect = new RoundedRect();
+    toConnectorSide = EFConnectableSide.TOP;
+    constructor(fMediator, connection) {
+        this.fMediator = fMediator;
+        this.connection = connection;
+    }
+    initialize() {
+        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
+        this.fromConnectorRect = RoundedRect.fromRoundedRect(fromConnector.rect);
+        this.fromConnectorSide = fromConnector.fConnectableSide;
+        const toConnector = this.fMediator.send(new GetInputRectInFlowRequest(this.connection.fInputId));
+        this.toConnectorRect = RoundedRect.fromRoundedRect(toConnector.rect);
+        this.toConnectorSide = toConnector.fConnectableSide;
+    }
+    getDifference(difference, restrictions) {
+        return {
+            x: Math.min(Math.max(difference.x, restrictions.min.x), restrictions.max.x),
+            y: Math.min(Math.max(difference.y, restrictions.min.y), restrictions.max.y)
+        };
+    }
+    redrawConnection(line) {
+        this.connection.setLine(line.point1, this.fromConnectorSide, line.point2, this.toConnectorSide);
+        this.connection.redraw();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ConnectionBaseDragHandler, deps: [{ token: FFlowMediator }, { token: FConnectionBase }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ConnectionBaseDragHandler, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ConnectionBaseDragHandler, decorators: [{
             type: Directive
-        }] });
+        }], ctorParameters: () => [{ type: FFlowMediator }, { type: FConnectionBase }] });
 
-function isExternalItem(element) {
-    return !!element.closest('[fExternalItem]');
-}
-function getExternalItem(element) {
-    return element.closest('[fExternalItem]');
+class ConnectionDragHandler extends ConnectionBaseDragHandler {
+    sourceRestrictions;
+    targetRestrictions;
+    constructor(fMediator, connection) {
+        super(fMediator, connection);
+    }
+    setOutputRestrictions(min, max) {
+        this.sourceRestrictions = { min, max };
+    }
+    setInputRestrictions(min, max) {
+        this.targetRestrictions = { min, max };
+    }
+    move(difference) {
+        this.redrawConnection(this.getNewLineValue(difference));
+    }
+    getNewLineValue(difference) {
+        return this.fMediator.send(new GetConnectionLineRequest(this.fromConnectorRect.addPoint(this.getDifference({ ...difference }, this.sourceRestrictions)), this.toConnectorRect.addPoint(this.getDifference({ ...difference }, this.targetRestrictions)), this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
+    }
 }
 
-class FExternalItemService {
-    items = [];
-    registerItem(item) {
-        this.items.push(item);
+class ConnectionTargetDragHandler extends ConnectionBaseDragHandler {
+    minDistance;
+    maxDistance;
+    constructor(fMediator, connection, minDistance, maxDistance) {
+        super(fMediator, connection);
+        this.minDistance = minDistance;
+        this.maxDistance = maxDistance;
     }
-    getItem(element) {
-        return this.items.find(item => item.hostElement === element);
+    move(difference) {
+        this.redrawConnection(this.getNewLineValue(difference));
     }
-    removeItem(item) {
-        const index = this.items.indexOf(item);
-        if (index !== -1) {
-            this.items.splice(index, 1);
-        }
+    getNewLineValue(difference) {
+        return this.fMediator.send(new GetConnectionLineRequest(this.fromConnectorRect, this.toConnectorRect.addPoint(this.getDifference({ ...difference }, { min: this.minDistance, max: this.maxDistance })), this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
 
-let uniqueId$1 = 0;
-class FExternalItemDirective extends FExternalItemBase {
-    elementReference;
-    fExternalItemService;
-    fExternalItemId = `f-external-item-${uniqueId$1++}`;
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    fData;
-    fDisabled = false;
-    constructor(elementReference, fExternalItemService) {
-        super();
-        this.elementReference = elementReference;
-        this.fExternalItemService = fExternalItemService;
+let PutInputConnectionHandlersToArrayExecution = class PutInputConnectionHandlersToArrayExecution {
+    fComponentsStore;
+    fMediator;
+    get fConnections() {
+        return this.fComponentsStore.fConnections;
     }
-    ngOnInit() {
-        this.fExternalItemService.registerItem(this);
-        this.disablePointerEvents(Array.from(this.hostElement.children));
+    constructor(fComponentsStore, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
     }
-    disablePointerEvents(children) {
-        children.forEach((x) => {
-            x.style.pointerEvents = 'none';
-            this.disablePointerEvents(Array.from(x.children));
+    handle(request) {
+        this.getInputConnections(request.nodeDragHandler.fNode).forEach((connection) => {
+            const index = this.getExistingConnectionHandlerIndex(request.result, connection);
+            if (index !== -1) {
+                this.updateExistingConnectionHandler(request.result, index, request.nodeDragHandler);
+            }
+            else {
+                request.result.push(this.createNewConnectionHandler(request.nodeDragHandler, request.outputIds, connection));
+            }
         });
     }
-    ngOnDestroy() {
-        this.fExternalItemService.removeItem(this);
+    getInputConnections(node) {
+        const inputIds = new Set(this.getInputsForNode(node).map((x) => x.id));
+        return this.fConnections.filter((x) => inputIds.has(x.fInputId));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemDirective, deps: [{ token: i0.ElementRef }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { fExternalItemId: "fExternalItemId", fData: "fData", fDisabled: "fDisabled" }, host: { properties: { "attr.id": "fExternalItemId", "class.f-external-item-disabled": "fDisabled" }, classAttribute: "f-component f-external-item" }, providers: [
-            { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
-        ], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[fExternalItem]",
-                    host: {
-                        '[attr.id]': 'fExternalItemId',
-                        class: "f-component f-external-item",
-                        '[class.f-external-item-disabled]': 'fDisabled',
-                    },
-                    providers: [
-                        { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
-                    ],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FExternalItemService }], propDecorators: { fExternalItemId: [{
-                type: Input
-            }], fData: [{
-                type: Input
-            }], fDisabled: [{
-                type: Input
-            }] } });
-
-const F_EXTERNAL_ITEM_PROVIDERS = [
-    FExternalItemDirective
-];
-
-class ExternalItemDragHandler {
-    externalItem;
-    type = EFDraggableType.PALETTE_ITEM;
-    placeholder;
-    onPointerDownRect = RectExtensions.initialize();
-    difference = PointExtensions.initialize();
-    constructor(externalItem) {
-        this.externalItem = externalItem;
+    getInputsForNode(node) {
+        return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
     }
-    getStyle(position) {
-        return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
+    getExistingConnectionHandlerIndex(result, connection) {
+        return result.findIndex((x) => x instanceof ConnectionDragHandler && x.connection.fId === connection.fId);
     }
-    initialize() {
-        this.onPointerDownRect = this.getExternalItemRect();
-        this.placeholder = DomElementExtensions.deepCloneNode(this.externalItem.hostElement);
-        this.placeholder.setAttribute('style', this.getStyle(Point.fromPoint(this.onPointerDownRect)));
-        document.body.appendChild(this.placeholder);
+    createNewConnectionHandler(nodeDragHandler, outputIds, connection) {
+        let result;
+        if (outputIds.includes(connection.fOutputId)) {
+            result = this.getNewConnectionHandler(connection, nodeDragHandler);
+        }
+        else {
+            result = this.getNewSourceConnectionHandler(connection, nodeDragHandler);
+        }
+        return result;
     }
-    getExternalItemRect() {
-        const rect = this.externalItem.hostElement.getBoundingClientRect();
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-        const offsetTop = rect.top + scrollTop;
-        const offsetLeft = rect.left + scrollLeft;
-        return RectExtensions.initialize(offsetLeft, offsetTop, rect.width, rect.height);
+    getNewConnectionHandler(connection, nodeDragHandler) {
+        const handler = new ConnectionDragHandler(this.fMediator, connection);
+        handler.setInputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        return handler;
+    }
+    updateExistingConnectionHandler(result, index, nodeDragHandler) {
+        result[index].setInputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+    }
+    getNewSourceConnectionHandler(connection, nodeDragHandler) {
+        return new ConnectionTargetDragHandler(this.fMediator, connection, nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PutInputConnectionHandlersToArrayExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PutInputConnectionHandlersToArrayExecution });
+};
+PutInputConnectionHandlersToArrayExecution = __decorate([
+    FExecutionRegister(PutInputConnectionHandlersToArrayRequest)
+], PutInputConnectionHandlersToArrayExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PutInputConnectionHandlersToArrayExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
+
+class PutOutputConnectionHandlersToArrayRequest {
+    nodeDragHandler;
+    inputIds;
+    result;
+    constructor(nodeDragHandler, inputIds, result) {
+        this.nodeDragHandler = nodeDragHandler;
+        this.inputIds = inputIds;
+        this.result = result;
+    }
+}
+
+class ConnectionSourceDragHandler extends ConnectionBaseDragHandler {
+    minDistance;
+    maxDistance;
+    constructor(fMediator, connection, minDistance, maxDistance) {
+        super(fMediator, connection);
+        this.minDistance = minDistance;
+        this.maxDistance = maxDistance;
     }
     move(difference) {
-        this.difference = difference;
-        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
-        this.placeholder.setAttribute('style', this.getStyle(position));
+        this.redrawConnection(this.getNewLineValue(difference));
     }
-    complete() {
-        document.body.removeChild(this.placeholder);
+    getNewLineValue(difference) {
+        return this.fMediator.send(new GetConnectionLineRequest(this.fromConnectorRect.addPoint(this.getDifference({ ...difference }, { min: this.minDistance, max: this.maxDistance })), this.toConnectorRect, this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
     }
 }
 
-let ExternalItemPreparationExecution = class ExternalItemPreparationExecution {
+let PutOutputConnectionHandlersToArrayExecution = class PutOutputConnectionHandlersToArrayExecution {
     fComponentsStore;
-    fDraggableDataContext;
-    fExternalItemService;
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
+    fMediator;
+    get fConnections() {
+        return this.fComponentsStore.fConnections;
     }
-    constructor(fComponentsStore, fDraggableDataContext, fExternalItemService) {
+    constructor(fComponentsStore, fMediator) {
         this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fExternalItemService = fExternalItemService;
+        this.fMediator = fMediator;
     }
     handle(request) {
-        this.fDraggableDataContext.onPointerDownScale = 1;
-        this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition()).elementTransform(this.flowHost);
-        this.fDraggableDataContext.draggableItems = [
-            new ExternalItemDragHandler(this.getExternalItem(request.event.targetElement))
-        ];
+        this.getOutputConnections(request.nodeDragHandler.fNode).forEach((connection) => {
+            const index = this.getExistingConnectionHandlerIndex(request.result, connection);
+            if (index !== -1) {
+                this.updateExistingConnectionHandler(request.result, index, request.nodeDragHandler);
+            }
+            else {
+                request.result.push(this.createNewConnectionHandler(request.nodeDragHandler, request.inputIds, connection));
+            }
+        });
     }
-    getExternalItem(targetElement) {
-        return this.fExternalItemService.getItem(getExternalItem(targetElement));
+    getOutputConnections(node) {
+        const outputsIds = new Set(this.getOutputsForNode(node).map((x) => x.id));
+        return this.fConnections.filter((x) => outputsIds.has(x.fOutputId));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationExecution });
-};
-ExternalItemPreparationExecution = __decorate([
-    FExecutionRegister(ExternalItemPreparationRequest)
-], ExternalItemPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationExecution, decorators: [{
+    getOutputsForNode(node) {
+        return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
+    }
+    getExistingConnectionHandlerIndex(result, connection) {
+        return result.findIndex((x) => x instanceof ConnectionDragHandler && x.connection.fId === connection.fId);
+    }
+    createNewConnectionHandler(nodeDragHandler, inputIds, connection) {
+        let result;
+        if (inputIds.includes(connection.fInputId)) {
+            result = this.getNewConnectionHandler(connection, nodeDragHandler);
+        }
+        else {
+            result = this.getNewSourceConnectionHandler(connection, nodeDragHandler);
+        }
+        return result;
+    }
+    getNewConnectionHandler(connection, nodeDragHandler) {
+        const handler = new ConnectionDragHandler(this.fMediator, connection);
+        handler.setOutputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+        return handler;
+    }
+    updateExistingConnectionHandler(result, index, nodeDragHandler) {
+        result[index].setOutputRestrictions(nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+    }
+    getNewSourceConnectionHandler(connection, nodeDragHandler) {
+        return new ConnectionSourceDragHandler(this.fMediator, connection, nodeDragHandler.minDistance, nodeDragHandler.maxDistance);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PutOutputConnectionHandlersToArrayExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PutOutputConnectionHandlersToArrayExecution });
+};
+PutOutputConnectionHandlersToArrayExecution = __decorate([
+    FExecutionRegister(PutOutputConnectionHandlersToArrayRequest)
+], PutOutputConnectionHandlersToArrayExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PutOutputConnectionHandlersToArrayExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
 
-let ExternalItemPreparationValidator = class ExternalItemPreparationValidator {
-    fExternalItemService;
-    constructor(fExternalItemService) {
-        this.fExternalItemService = fExternalItemService;
+class GetNodeMoveRestrictionsRequest {
+    fNode;
+    hasParentNodeInSelected;
+    constructor(fNode, hasParentNodeInSelected) {
+        this.fNode = fNode;
+        this.hasParentNodeInSelected = hasParentNodeInSelected;
+    }
+}
+
+let GetNodeMoveRestrictionsExecution = class GetNodeMoveRestrictionsExecution {
+    fMediator;
+    constructor(fMediator) {
+        this.fMediator = fMediator;
     }
     handle(request) {
-        const externalItem = this.getExternalItem(request.event.targetElement);
-        return isExternalItem(request.event.targetElement) && !!externalItem && !externalItem.fDisabled;
+        if (request.fNode.fParentId && !request.hasParentNodeInSelected) {
+            const fParentNodeRect = this.getParentNodeRect(request.fNode);
+            const fCurrentNodeRect = this.getCurrentNodeRect(request.fNode);
+            return {
+                min: PointExtensions.initialize(fParentNodeRect.x - fCurrentNodeRect.x, fParentNodeRect.y - fCurrentNodeRect.y),
+                max: PointExtensions.initialize((fParentNodeRect.x + fParentNodeRect.width) - (fCurrentNodeRect.x + fCurrentNodeRect.width), (fParentNodeRect.y + fParentNodeRect.height) - (fCurrentNodeRect.y + fCurrentNodeRect.height))
+            };
+        }
+        return { ...DEFAULT_RESTRICTIONS };
     }
-    getExternalItem(targetElement) {
-        return this.fExternalItemService.getItem(getExternalItem(targetElement));
+    getCurrentNodeRect(fNode) {
+        return this.fMediator.send(new GetNormalizedNodeRectRequest(fNode));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationValidator, deps: [{ token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationValidator });
+    getParentNodeRect(fNode) {
+        return this.fMediator.send(new GetNormalizedParentNodeRectRequest(fNode));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNodeMoveRestrictionsExecution, deps: [{ token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNodeMoveRestrictionsExecution });
 };
-ExternalItemPreparationValidator = __decorate([
-    FValidatorRegister(ExternalItemPreparationRequest)
-], ExternalItemPreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationValidator, decorators: [{
+GetNodeMoveRestrictionsExecution = __decorate([
+    FExecutionRegister(GetNodeMoveRestrictionsRequest)
+], GetNodeMoveRestrictionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNodeMoveRestrictionsExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FExternalItemService }] });
-
-const EXTERNAL_ITEM_PREPARATION_PROVIDERS = [
-    ExternalItemPreparationExecution,
-    ExternalItemPreparationValidator,
-];
-
-const EXTERNAL_ITEM_PROVIDERS = [
-    ...EXTERNAL_ITEM_FINALIZE_PROVIDERS,
-    ...EXTERNAL_ITEM_PREPARATION_PROVIDERS,
-];
+        }], ctorParameters: () => [{ type: FFlowMediator }] });
+const DEFAULT_RESTRICTIONS = {
+    min: PointExtensions.initialize(-Infinity, -Infinity),
+    max: PointExtensions.initialize(Infinity, Infinity)
+};
 
 class CreateMoveNodesDragModelFromSelectionRequest {
 }
@@ -3510,177 +3902,113 @@ class CreateMoveNodesDragModelFromSelectionRequest {
 class NodeDragHandler {
     fDraggableDataContext;
     fNode;
-    type = EFDraggableType.NODE;
+    minDistance;
+    maxDistance;
     onPointerDownPosition = PointExtensions.initialize();
-    constructor(fDraggableDataContext, fNode) {
+    constructor(fDraggableDataContext, fNode, minDistance, maxDistance) {
         this.fDraggableDataContext = fDraggableDataContext;
         this.fNode = fNode;
-        this.onPointerDownPosition = this.fNode.position;
+        this.minDistance = minDistance;
+        this.maxDistance = maxDistance;
+        this.onPointerDownPosition = { ...fNode.position };
     }
     move(difference) {
-        const position = Point.fromPoint(this.onPointerDownPosition).add(difference);
+        const restrictedDifference = this.getDifference(difference, { min: this.minDistance, max: this.maxDistance });
+        this.redrawNode(this.getNewPosition(restrictedDifference));
+        this.fDraggableDataContext.fLineAlignment?.handle(restrictedDifference);
+    }
+    getNewPosition(difference) {
+        return Point.fromPoint(this.onPointerDownPosition).add(difference);
+    }
+    getDifference(difference, restrictions) {
+        return {
+            x: Math.min(Math.max(difference.x, restrictions.min.x), restrictions.max.x),
+            y: Math.min(Math.max(difference.y, restrictions.min.y), restrictions.max.y)
+        };
+    }
+    redrawNode(position) {
         this.fNode.updatePosition(position);
         this.fNode.redraw();
-        this.fDraggableDataContext.fLineAlignment?.handle(difference);
     }
     complete() {
         this.fNode.positionChange.emit(this.fNode.position);
     }
 }
 
-class ConnectionDragHandler {
-    fMediator;
-    connection;
-    type = EFDraggableType.CONNECTION;
-    onPointerDownLine = LineExtensions.initialize();
-    fromConnectorSide = EFConnectableSide.BOTTOM;
-    toConnectorSide = EFConnectableSide.TOP;
-    constructor(fMediator, connection) {
-        this.fMediator = fMediator;
-        this.connection = connection;
-    }
-    initialize() {
-        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
-        this.fromConnectorSide = fromConnector.fConnectableSide;
-        const toConnector = this.fMediator.send(new GetInputRectInFlowRequest(this.connection.fInputId));
-        this.toConnectorSide = toConnector.fConnectableSide;
-        this.onPointerDownLine = this.fMediator.send(new GetConnectionLineRequest(fromConnector.rect, toConnector.rect, this.connection.fBehavior, fromConnector.fConnectableSide, toConnector.fConnectableSide));
-    }
-    move(difference) {
-        const fromPoint = Point.fromPoint(this.onPointerDownLine.point1).add(difference);
-        const toPoint = Point.fromPoint(this.onPointerDownLine.point2).add(difference);
-        this.connection.setLine(fromPoint, this.fromConnectorSide, toPoint, this.toConnectorSide);
-        this.connection.redraw();
-    }
-}
-
-class ConnectionSourceDragHandler {
-    fMediator;
-    connection;
-    type = EFDraggableType.CONNECTION;
-    fromConnectorRect = new RoundedRect();
-    fromConnectorSide = EFConnectableSide.BOTTOM;
-    toConnectorRect = new RoundedRect();
-    toConnectorSide = EFConnectableSide.TOP;
-    constructor(fMediator, connection) {
-        this.fMediator = fMediator;
-        this.connection = connection;
-    }
-    initialize() {
-        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
-        this.fromConnectorRect = RoundedRect.fromRoundedRect(fromConnector.rect);
-        this.fromConnectorSide = fromConnector.fConnectableSide;
-        const toConnector = this.fMediator.send(new GetInputRectInFlowRequest(this.connection.fInputId));
-        this.toConnectorRect = RoundedRect.fromRoundedRect(toConnector.rect);
-        this.toConnectorSide = toConnector.fConnectableSide;
+class NodeResizeByChildDragHandler {
+    fDraggableDataContext;
+    onPointerDownPosition = PointExtensions.initialize();
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
     }
     move(difference) {
-        const line = this.fMediator.send(new GetConnectionLineRequest(this.fromConnectorRect.addPoint(difference), this.toConnectorRect, this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
-        this.connection.setLine(line.point1, this.fromConnectorSide, line.point2, this.toConnectorSide);
-        this.connection.redraw();
-    }
-}
-
-class ConnectionTargetDragHandler {
-    fMediator;
-    connection;
-    type = EFDraggableType.CONNECTION;
-    fromConnectorRect = new RoundedRect();
-    fromConnectorSide = EFConnectableSide.BOTTOM;
-    toConnectorRect = new RoundedRect();
-    toConnectorSide = EFConnectableSide.TOP;
-    constructor(fMediator, connection) {
-        this.fMediator = fMediator;
-        this.connection = connection;
-    }
-    initialize() {
-        const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
-        this.fromConnectorRect = RoundedRect.fromRoundedRect(fromConnector.rect);
-        this.fromConnectorSide = fromConnector.fConnectableSide;
-        const toConnector = this.fMediator.send(new GetInputRectInFlowRequest(this.connection.fInputId));
-        this.toConnectorRect = RoundedRect.fromRoundedRect(toConnector.rect);
-        this.toConnectorSide = toConnector.fConnectableSide;
     }
-    move(difference) {
-        const line = this.fMediator.send(new GetConnectionLineRequest(this.fromConnectorRect, this.toConnectorRect.addPoint(difference), this.connection.fBehavior, this.fromConnectorSide, this.toConnectorSide));
-        this.connection.setLine(line.point1, this.fromConnectorSide, line.point2, this.toConnectorSide);
-        this.connection.redraw();
+    complete() {
     }
 }
 
 let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragModelFromSelectionExecution {
     fComponentsStore;
     fDraggableDataContext;
-    getOutgoingConnectionsHandler;
-    getIncomingConnectionsHandler;
     fMediator;
-    constructor(fComponentsStore, fDraggableDataContext, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, fMediator) {
+    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
-        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
         this.fMediator = fMediator;
     }
     handle(request) {
-        const selectedNodes = this.getSelectedNodes();
-        return this.getDragHandlersWithConnections(this.getDragHandlersFromNodes(selectedNodes), this.getAllOutputIds(selectedNodes), this.getAllInputIds(selectedNodes));
+        const itemsToDrag = this.getNodesWithRestrictions(this.getSelectedNodes());
+        return this.getDragHandlersWithConnections(this.getDragHandlersFromNodes(itemsToDrag), this.getAllOutputIds(itemsToDrag), this.getAllInputIds(itemsToDrag));
     }
     getSelectedNodes() {
-        return this.fDraggableDataContext.selectedItems.map((x) => {
-            return this.fComponentsStore.findNode(x.hostElement);
-        }).filter((x) => !!x);
+        return this.fDraggableDataContext.selectedItems
+            .map((x) => this.fComponentsStore.findNode(x.hostElement))
+            .filter((x) => !!x);
+    }
+    getNodesWithRestrictions(selectedNodes) {
+        const result = [];
+        selectedNodes.forEach((x) => {
+            const hasParentNodeInSelected = this.fMediator.send(new IsArrayHasParentNodeRequest(x, selectedNodes));
+            const restrictions = this.fMediator.send(new GetNodeMoveRestrictionsRequest(x, hasParentNodeInSelected));
+            const parentNodes = this.fMediator.send(new GetParentNodesRequest(x));
+            result.push({ node: x, parentNodes, ...restrictions }, ...this.getChildrenItemsToDrag(x, restrictions));
+        });
+        return result;
     }
-    getAllOutputIds(nodes) {
-        return nodes.reduce((result, x) => {
-            return result.concat(this.getOutputsForNode(x));
-        }, []).map((x) => x.id);
+    getChildrenItemsToDrag(node, restrictions) {
+        return this.getChildrenNodes(node.fId).map((x) => ({ node: x, ...restrictions }));
+    }
+    getChildrenNodes(fId) {
+        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId));
+    }
+    getAllOutputIds(items) {
+        return items.flatMap((x) => this.getOutputsForNode(x.node)).map((x) => x.id);
     }
     getOutputsForNode(node) {
         return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
     }
-    getAllInputIds(nodes) {
-        return nodes.reduce((result, x) => {
-            return result.concat(this.getInputsForNode(x));
-        }, []).map((x) => x.id);
+    getAllInputIds(items) {
+        return items.flatMap((x) => this.getInputsForNode(x.node)).map((x) => x.id);
     }
     getInputsForNode(node) {
         return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
     }
-    getDragHandlersFromNodes(nodes) {
-        return nodes.map((x) => new NodeDragHandler(this.fDraggableDataContext, x));
-    }
-    getDragHandlersWithConnections(nodes, outputIds, inputIds) {
-        let result = nodes;
-        nodes.forEach((nodeHandler) => {
-            this.getDragHandlersForOutputConnections(nodeHandler.fNode, inputIds, result);
-            this.getDragHandlersForInputConnections(nodeHandler.fNode, outputIds, result);
+    getDragHandlersFromNodes(items) {
+        let result = [];
+        items.forEach((node) => {
+            result.push(new NodeDragHandler(this.fDraggableDataContext, node.node, node.min, node.max), ...(node.parentNodes || []).map((parent) => new NodeResizeByChildDragHandler(this.fDraggableDataContext)));
         });
         return result;
     }
-    getDragHandlersForOutputConnections(fNode, inputIds, result) {
-        this.getOutgoingConnectionsHandler.handle(this.getOutputsForNode(fNode)).forEach((c) => {
-            if (inputIds.includes(c.fInputId)) {
-                result.push(new ConnectionDragHandler(this.fMediator, c));
-            }
-            else {
-                result.push(new ConnectionSourceDragHandler(this.fMediator, c));
-            }
-        });
-    }
-    getDragHandlersForInputConnections(fNode, outputIds, result) {
-        this.getIncomingConnectionsHandler.handle(this.getInputsForNode(fNode)).forEach((c) => {
-            if (outputIds.includes(c.fOutputId)) {
-                const index = result.findIndex((x) => x.type === EFDraggableType.CONNECTION && x.connection.fConnectionId === c.fConnectionId);
-                if (index !== -1) {
-                    result.push(new ConnectionDragHandler(this.fMediator, c));
-                }
-            }
-            else {
-                result.push(new ConnectionTargetDragHandler(this.fMediator, c));
-            }
+    getDragHandlersWithConnections(handlers, outputIds, inputIds) {
+        let result = handlers;
+        handlers.filter((x) => x instanceof NodeDragHandler).forEach((dragHandler) => {
+            this.fMediator.send(new PutOutputConnectionHandlersToArrayRequest(dragHandler, inputIds, result));
+            this.fMediator.send(new PutInputConnectionHandlersToArrayRequest(dragHandler, outputIds, result));
         });
+        return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution });
 };
 CreateMoveNodesDragModelFromSelectionExecution = __decorate([
@@ -3688,9 +4016,12 @@ CreateMoveNodesDragModelFromSelectionExecution = __decorate([
 ], CreateMoveNodesDragModelFromSelectionExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: FFlowMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 const CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS = [
+    GetNodeMoveRestrictionsExecution,
+    PutInputConnectionHandlersToArrayExecution,
+    PutOutputConnectionHandlersToArrayExecution,
     CreateMoveNodesDragModelFromSelectionExecution,
 ];
 
@@ -3738,8 +4069,7 @@ let NodeMovePreparationExecution = class NodeMovePreparationExecution {
         this.fDraggableDataContext.fLineAlignment?.initialize(this.fComponentsStore.fNodes, nodesToDrag);
     }
     filterNodesFromDraggableItems(items) {
-        return items.filter((x) => x.type === EFDraggableType.NODE)
-            .map(x => x.fNode);
+        return items.filter((x) => x instanceof NodeDragHandler).map(x => x.fNode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMovePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMovePreparationExecution });
@@ -3815,7 +4145,7 @@ let NodeMoveFinalizeExecution = class NodeMoveFinalizeExecution {
     handle(request) {
         const difference = this.getDifferenceWithLineAlignment(this.getDifferenceBetweenPreparationAndFinalize(request.event.getPosition()));
         this.fDraggableDataContext.draggableItems.forEach((x) => {
-            x.move(difference);
+            x.move({ ...difference });
             x.complete?.();
         });
         this.fMediator.send(new IsConnectionUnderNodeRequest());
@@ -3833,44 +4163,295 @@ let NodeMoveFinalizeExecution = class NodeMoveFinalizeExecution {
         }
         return difference;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeExecution });
+};
+NodeMoveFinalizeExecution = __decorate([
+    FExecutionRegister(NodeMoveFinalizeRequest)
+], NodeMoveFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
+
+let NodeMoveFinalizeValidator = class NodeMoveFinalizeValidator {
+    fDraggableDataContext;
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof NodeDragHandler);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeValidator });
+};
+NodeMoveFinalizeValidator = __decorate([
+    FValidatorRegister(NodeMoveFinalizeRequest)
+], NodeMoveFinalizeValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
+
+const NODE_MOVE_FINALIZE_PROVIDERS = [
+    NodeMoveFinalizeExecution,
+    NodeMoveFinalizeValidator,
+];
+
+const NODE_PROVIDERS = [
+    ...CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS,
+    ...NODE_MOVE_FINALIZE_PROVIDERS,
+    ...NODE_MOVE_PREPARATION_PROVIDERS,
+];
+
+class ApplyChildResizeRestrictionsRequest {
+    rect;
+    restrictionsRect;
+    constructor(rect, restrictionsRect) {
+        this.rect = rect;
+        this.restrictionsRect = restrictionsRect;
+    }
+}
+
+const OFFSET$1 = 0;
+let ApplyChildResizeRestrictionsExecution = class ApplyChildResizeRestrictionsExecution {
+    handle(request) {
+        this.applyRestrictions(request.rect, request.restrictionsRect);
+    }
+    applyRestrictions(rect, restrictionsRect) {
+        this.left(rect, restrictionsRect);
+        this.top(rect, restrictionsRect);
+        this.right(rect, restrictionsRect);
+        this.bottom(rect, restrictionsRect);
+    }
+    left(rect, restrictionsRect) {
+        if (rect.x > restrictionsRect.x - OFFSET$1) {
+            rect.width += rect.x - restrictionsRect.x - OFFSET$1;
+            rect.x = restrictionsRect.x - OFFSET$1;
+        }
+    }
+    top(rect, restrictionsRect) {
+        if (rect.y > restrictionsRect.y - OFFSET$1) {
+            rect.height += rect.y - restrictionsRect.y - OFFSET$1;
+            rect.y = restrictionsRect.y - OFFSET$1;
+        }
+    }
+    right(rect, restrictionsRect) {
+        if (rect.x + rect.width <= restrictionsRect.x + restrictionsRect.width + OFFSET$1) {
+            rect.width = restrictionsRect.x + restrictionsRect.width - rect.x + OFFSET$1;
+        }
+    }
+    bottom(rect, restrictionsRect) {
+        if (rect.y + rect.height <= restrictionsRect.y + restrictionsRect.height + OFFSET$1) {
+            rect.height = restrictionsRect.y + restrictionsRect.height - rect.y + OFFSET$1;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ApplyChildResizeRestrictionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ApplyChildResizeRestrictionsExecution });
+};
+ApplyChildResizeRestrictionsExecution = __decorate([
+    FExecutionRegister(ApplyChildResizeRestrictionsRequest)
+], ApplyChildResizeRestrictionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ApplyChildResizeRestrictionsExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class ApplyParentResizeRestrictionsRequest {
+    rect;
+    restrictionsRect;
+    constructor(rect, restrictionsRect) {
+        this.rect = rect;
+        this.restrictionsRect = restrictionsRect;
+    }
+}
+
+const OFFSET = 0;
+let ApplyParentResizeRestrictionsExecution = class ApplyParentResizeRestrictionsExecution {
+    handle(request) {
+        this.applyRestrictions(request.rect, request.restrictionsRect);
+    }
+    applyRestrictions(rect, restrictionsRect) {
+        this.left(rect, restrictionsRect);
+        this.top(rect, restrictionsRect);
+        this.right(rect, restrictionsRect);
+        this.bottom(rect, restrictionsRect);
+    }
+    left(rect, restrictionsRect) {
+        if (rect.x <= restrictionsRect.x + OFFSET) {
+            rect.width -= restrictionsRect.x - rect.x + OFFSET;
+            rect.x = restrictionsRect.x + OFFSET;
+        }
+    }
+    top(rect, restrictionsRect) {
+        if (rect.y <= restrictionsRect.y + OFFSET) {
+            rect.height -= restrictionsRect.y - rect.y + OFFSET;
+            rect.y = restrictionsRect.y + OFFSET;
+        }
+    }
+    right(rect, restrictionsRect) {
+        if (rect.x + rect.width > restrictionsRect.x + restrictionsRect.width - OFFSET) {
+            rect.width = restrictionsRect.x + restrictionsRect.width - rect.x - OFFSET;
+        }
+    }
+    bottom(rect, restrictionsRect) {
+        if (rect.y + rect.height > restrictionsRect.y + restrictionsRect.height - OFFSET) {
+            rect.height = restrictionsRect.y + restrictionsRect.height - rect.y - OFFSET;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ApplyParentResizeRestrictionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ApplyParentResizeRestrictionsExecution });
+};
+ApplyParentResizeRestrictionsExecution = __decorate([
+    FExecutionRegister(ApplyParentResizeRestrictionsRequest)
+], ApplyParentResizeRestrictionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ApplyParentResizeRestrictionsExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class CalculateChangedPositionRequest {
+    originalRect;
+    changedRect;
+    difference;
+    fResizeHandleType;
+    constructor(originalRect, changedRect, difference, fResizeHandleType) {
+        this.originalRect = originalRect;
+        this.changedRect = changedRect;
+        this.difference = difference;
+        this.fResizeHandleType = fResizeHandleType;
+    }
+}
+
+const RESIZE_DIRECTIONS = {
+    [EFResizeHandleType.LEFT_TOP]: { x: -1, y: -1 },
+    [EFResizeHandleType.RIGHT_TOP]: { x: 1, y: -1 },
+    [EFResizeHandleType.RIGHT_BOTTOM]: { x: 1, y: 1 },
+    [EFResizeHandleType.LEFT_BOTTOM]: { x: -1, y: 1 },
+};
+
+let CalculateChangedPositionExecution = class CalculateChangedPositionExecution {
+    handle(request) {
+        return this.change(request.originalRect, request.difference, RESIZE_DIRECTIONS[request.fResizeHandleType], request.changedRect);
+    }
+    change(originalRect, difference, direction, changedRect) {
+        return RectExtensions.initialize(originalRect.x + (direction.x === -1 ? difference.x : 0) + changedRect.x, originalRect.y + (direction.y === -1 ? difference.y : 0) + changedRect.y, changedRect.width, changedRect.height);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CalculateChangedPositionExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CalculateChangedPositionExecution });
+};
+CalculateChangedPositionExecution = __decorate([
+    FExecutionRegister(CalculateChangedPositionRequest)
+], CalculateChangedPositionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CalculateChangedPositionExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class CalculateChangedSizeRequest {
+    originalRect;
+    difference;
+    fResizeHandleType;
+    constructor(originalRect, difference, fResizeHandleType) {
+        this.originalRect = originalRect;
+        this.difference = difference;
+        this.fResizeHandleType = fResizeHandleType;
+    }
+}
+
+let CalculateChangedSizeExecution = class CalculateChangedSizeExecution {
+    handle(request) {
+        return this.change(request.originalRect, request.difference, RESIZE_DIRECTIONS[request.fResizeHandleType]);
+    }
+    change(rect, difference, direction) {
+        const result = RectExtensions.initialize(0, 0, rect.width + direction.x * difference.x, rect.height + direction.y * difference.y);
+        if (result.width < 0) {
+            result.x = result.width;
+            result.width = Math.abs(result.width);
+        }
+        if (result.height < 0) {
+            result.y = result.height;
+            result.height = Math.abs(result.height);
+        }
+        return RectExtensions.copy(result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CalculateChangedSizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CalculateChangedSizeExecution });
+};
+CalculateChangedSizeExecution = __decorate([
+    FExecutionRegister(CalculateChangedSizeRequest)
+], CalculateChangedSizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CalculateChangedSizeExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class GetNormalizedChildrenNodesRectRequest {
+    fNode;
+    rect;
+    constructor(fNode, rect) {
+        this.fNode = fNode;
+        this.rect = rect;
+    }
+}
+
+let GetNormalizedChildrenNodesRectExecution = class GetNormalizedChildrenNodesRectExecution {
+    fMediator;
+    constructor(fMediator) {
+        this.fMediator = fMediator;
+    }
+    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;
+    }
+    getChildrenNodes(fId) {
+        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId));
+    }
+    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]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, deps: [{ token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution });
 };
-NodeMoveFinalizeExecution = __decorate([
-    FExecutionRegister(NodeMoveFinalizeRequest)
-], NodeMoveFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeExecution, decorators: [{
+GetNormalizedChildrenNodesRectExecution = __decorate([
+    FExecutionRegister(GetNormalizedChildrenNodesRectRequest)
+], GetNormalizedChildrenNodesRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNormalizedChildrenNodesRectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
+        }], ctorParameters: () => [{ type: FFlowMediator }] });
 
-let NodeMoveFinalizeValidator = class NodeMoveFinalizeValidator {
-    fDraggableDataContext;
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
+class GetNodeResizeRestrictionsRequest {
+    fNode;
+    rect;
+    constructor(fNode, rect) {
+        this.fNode = fNode;
+        this.rect = rect;
+    }
+}
+
+let GetNodeResizeRestrictionsExecution = class GetNodeResizeRestrictionsExecution {
+    fMediator;
+    constructor(fMediator) {
+        this.fMediator = fMediator;
     }
     handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.NODE);
+        const childRect = this.fMediator.send(new GetNormalizedChildrenNodesRectRequest(request.fNode, request.rect));
+        const parentRect = this.fMediator.send(new GetNormalizedParentNodeRectRequest(request.fNode));
+        return {
+            parentRect,
+            childRect,
+        };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeValidator });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNodeResizeRestrictionsExecution, deps: [{ token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNodeResizeRestrictionsExecution });
 };
-NodeMoveFinalizeValidator = __decorate([
-    FValidatorRegister(NodeMoveFinalizeRequest)
-], NodeMoveFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeMoveFinalizeValidator, decorators: [{
+GetNodeResizeRestrictionsExecution = __decorate([
+    FExecutionRegister(GetNodeResizeRestrictionsRequest)
+], GetNodeResizeRestrictionsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetNodeResizeRestrictionsExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
-
-const NODE_MOVE_FINALIZE_PROVIDERS = [
-    NodeMoveFinalizeExecution,
-    NodeMoveFinalizeValidator,
-];
-
-const NODE_PROVIDERS = [
-    ...CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS,
-    ...NODE_MOVE_FINALIZE_PROVIDERS,
-    ...NODE_MOVE_PREPARATION_PROVIDERS,
-];
+        }], ctorParameters: () => [{ type: FFlowMediator }] });
 
 class NodeResizeFinalizeRequest {
     event;
@@ -3899,13 +4480,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
+class NodeResizeDragHandler {
+    fMediator;
+    fNode;
+    fResizeHandleType;
+    originalRect;
+    restrictions;
+    childRestrictions = () => { };
+    constructor(fMediator, fNode, fResizeHandleType) {
+        this.fMediator = fMediator;
+        this.fNode = fNode;
+        this.fResizeHandleType = fResizeHandleType;
+    }
+    initialize() {
+        this.originalRect = this.fMediator.send(new GetNormalizedNodeRectRequest(this.fNode));
+        this.restrictions = this.fMediator.send(new GetNodeResizeRestrictionsRequest(this.fNode, this.originalRect));
+        if (this.restrictions.childRect) {
+            this.childRestrictions = (rect, restrictionsRect) => {
+                this.applyChildRestrictions(rect, restrictionsRect);
+            };
+        }
+    }
+    move(difference) {
+        const changedRect = this.changePosition(difference, this.changeSize(difference));
+        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) {
+        return this.fMediator.send(new CalculateChangedSizeRequest(this.originalRect, difference, this.fResizeHandleType));
+    }
+    changePosition(difference, changedRect) {
+        return this.fMediator.send(new CalculateChangedPositionRequest(this.originalRect, changedRect, difference, this.fResizeHandleType));
+    }
+    applyChildRestrictions(rect, restrictionsRect) {
+        this.fMediator.send(new ApplyChildResizeRestrictionsRequest(rect, restrictionsRect));
+    }
+    applyParentRestrictions(rect, restrictionsRect) {
+        this.fMediator.send(new ApplyParentResizeRestrictionsRequest(rect, restrictionsRect));
+    }
+    complete() {
+        this.fNode.sizeChange.emit(RectExtensions.initialize(this.fNode.position.x, this.fNode.position.y, this.fNode.size.width, this.fNode.size.height));
+    }
+}
+
 let NodeResizeFinalizeValidator = class NodeResizeFinalizeValidator {
     fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.NODE_RESIZE);
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof NodeResizeDragHandler);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeResizeFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NodeResizeFinalizeValidator });
@@ -3929,57 +4556,6 @@ class NodeResizePreparationRequest {
     }
 }
 
-const RESIZE_DIRECTIONS = {
-    [EFResizeHandleType.LEFT_TOP]: { x: -1, y: -1 },
-    [EFResizeHandleType.LEFT_BOTTOM]: { x: -1, y: 1 },
-    [EFResizeHandleType.RIGHT_TOP]: { x: 1, y: -1 },
-    [EFResizeHandleType.RIGHT_BOTTOM]: { x: 1, y: 1 },
-};
-class NodeResizeDragHandler {
-    fComponentsStore;
-    fNode;
-    fResizeHandleType;
-    type = EFDraggableType.NODE_RESIZE;
-    onPointerDownPosition;
-    rect;
-    get scale() {
-        return this.fComponentsStore.fCanvas.transform.scale;
-    }
-    constructor(fComponentsStore, fNode, fResizeHandleType) {
-        this.fComponentsStore = fComponentsStore;
-        this.fNode = fNode;
-        this.fResizeHandleType = fResizeHandleType;
-        this.onPointerDownPosition = this.fNode.position;
-        this.rect = RectExtensions.fromElement(this.fNode.hostElement);
-    }
-    move(difference) {
-        const sizeAndOffset = this.calculateSize(difference, RESIZE_DIRECTIONS[this.fResizeHandleType]);
-        const newPosition = this.calculatePosition(difference, RESIZE_DIRECTIONS[this.fResizeHandleType], sizeAndOffset.offsetPosition);
-        this.fNode.updatePosition(newPosition);
-        this.fNode.updateSize(sizeAndOffset.newSize);
-        this.fNode.redraw();
-    }
-    calculateSize(difference, direction) {
-        const newSize = SizeExtensions.initialize(this.rect.width / this.scale + direction.x * difference.x, this.rect.height / this.scale + direction.y * difference.y);
-        let offsetPosition = PointExtensions.initialize(0, 0);
-        if (newSize.width < 0) {
-            offsetPosition.x = newSize.width;
-            newSize.width = Math.abs(newSize.width);
-        }
-        if (newSize.height < 0) {
-            offsetPosition.y = newSize.height;
-            newSize.height = Math.abs(newSize.height);
-        }
-        return { newSize, offsetPosition };
-    }
-    calculatePosition(difference, direction, offsetPosition) {
-        return PointExtensions.initialize(this.onPointerDownPosition.x + (direction.x === -1 ? difference.x : 0) + offsetPosition.x, this.onPointerDownPosition.y + (direction.y === -1 ? difference.y : 0) + offsetPosition.y);
-    }
-    complete() {
-        this.fNode.sizeChange.emit(RectExtensions.initialize(this.fNode.position.x, this.fNode.position.y, this.fNode.size.width, this.fNode.size.height));
-    }
-}
-
 let NodeResizePreparationExecution = class NodeResizePreparationExecution {
     fComponentsStore;
     fDraggableDataContext;
@@ -3999,7 +4575,7 @@ let NodeResizePreparationExecution = class NodeResizePreparationExecution {
         this.selectAndUpdateNodeLayer(request.event.targetElement);
         const handleType = getValueFromDataAttr(request.event.targetElement, 'fResizeHandleType', '.f-resize-handle');
         const itemsToDrag = [
-            new NodeResizeDragHandler(this.fComponentsStore, this.getNode(request.event.targetElement), EFResizeHandleType[handleType])
+            new NodeResizeDragHandler(this.fMediator, this.getNode(request.event.targetElement), EFResizeHandleType[handleType])
         ];
         this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
         this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
@@ -4062,186 +4638,16 @@ const NODE_RESIZE_PREPARATION_PROVIDERS = [
 ];
 
 const NODE_RESIZE_PROVIDERS = [
+    ApplyChildResizeRestrictionsExecution,
+    ApplyParentResizeRestrictionsExecution,
+    CalculateChangedPositionExecution,
+    CalculateChangedSizeExecution,
+    GetNormalizedChildrenNodesRectExecution,
+    GetNodeResizeRestrictionsExecution,
     ...NODE_RESIZE_FINALIZE_PROVIDERS,
     ...NODE_RESIZE_PREPARATION_PROVIDERS,
 ];
 
-class SelectionAreaFinalizeRequest {
-    event;
-    constructor(event) {
-        this.event = event;
-    }
-}
-
-let SelectionAreaFinalizeExecution = class SelectionAreaFinalizeExecution {
-    fDraggableDataContext;
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        this.fDraggableDataContext.draggableItems.forEach((x) => {
-            x.complete?.();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeExecution });
-};
-SelectionAreaFinalizeExecution = __decorate([
-    FExecutionRegister(SelectionAreaFinalizeRequest)
-], SelectionAreaFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
-
-let SelectionAreaFinalizeValidator = class SelectionAreaFinalizeValidator {
-    fDraggableDataContext;
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.SELECTION);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeValidator });
-};
-SelectionAreaFinalizeValidator = __decorate([
-    FValidatorRegister(SelectionAreaFinalizeRequest)
-], SelectionAreaFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
-
-const SELECTION_AREA_FINALIZE_PROVIDERS = [
-    SelectionAreaFinalizeExecution,
-    SelectionAreaFinalizeValidator,
-];
-
-class SelectionAreaPreparationRequest {
-    event;
-    constructor(event) {
-        this.event = event;
-    }
-}
-
-class GetCanBeSelectedItemsRequest {
-}
-
-class SelectionAreaDragHandle {
-    fComponentsStore;
-    fDraggableDataContext;
-    fMediator;
-    type = EFDraggableType.SELECTION;
-    canBeSelected = [];
-    selectedByMove = [];
-    get canvasPosition() {
-        return Point.fromPoint(this.fComponentsStore.fCanvas.transform.position).add(this.fComponentsStore.fCanvas.transform.scaledPosition);
-    }
-    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fMediator = fMediator;
-    }
-    initialize() {
-        this.canBeSelected = this.fMediator.send(new GetCanBeSelectedItemsRequest());
-        this.fDraggableDataContext.fSelectionArea?.show();
-        this.fDraggableDataContext.fSelectionArea?.draw({
-            left: this.fDraggableDataContext.onPointerDownPosition.x,
-            top: this.fDraggableDataContext.onPointerDownPosition.y,
-            width: 0,
-            height: 0
-        });
-    }
-    move(difference) {
-        const currentPoint = Point.fromPoint(difference).add(this.fDraggableDataContext.onPointerDownPosition);
-        const x = Math.min(this.fDraggableDataContext.onPointerDownPosition.x, currentPoint.x);
-        const y = Math.min(this.fDraggableDataContext.onPointerDownPosition.y, currentPoint.y);
-        const width = Math.abs(difference.x);
-        const height = Math.abs(difference.y);
-        this.fDraggableDataContext.fSelectionArea?.draw({ left: x, top: y, width, height });
-        this.selectedByMove = [];
-        this.canBeSelected.forEach((item) => {
-            item.element.deselect();
-            const itemRect = RectExtensions.addPoint(item.rect, this.canvasPosition);
-            const isIntersect = RectExtensions.intersectionWithRect(itemRect, RectExtensions.initialize(x, y, width, height));
-            if (isIntersect) {
-                item.element.select();
-                this.selectedByMove.push(item.element);
-            }
-        });
-        this.fMediator.send(new EmitTransformChangesRequest());
-    }
-    complete() {
-        this.fDraggableDataContext.fSelectionArea?.hide();
-        this.fDraggableDataContext.selectedItems.push(...this.selectedByMove);
-        if (this.selectedByMove.length > 0) {
-            this.fDraggableDataContext.isSelectedChanged = true;
-        }
-    }
-}
-
-let SelectionAreaPreparationExecution = class SelectionAreaPreparationExecution {
-    fComponentsStore;
-    fDraggableDataContext;
-    fMediator;
-    get flowHost() {
-        return this.fComponentsStore.fFlow.hostElement;
-    }
-    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
-        this.fComponentsStore = fComponentsStore;
-        this.fDraggableDataContext = fDraggableDataContext;
-        this.fMediator = fMediator;
-    }
-    handle(request) {
-        this.fDraggableDataContext.draggableItems = [
-            new SelectionAreaDragHandle(this.fComponentsStore, this.fDraggableDataContext, this.fMediator)
-        ];
-        this.fDraggableDataContext.onPointerDownScale = 1;
-        this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
-            .elementTransform(this.flowHost);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationExecution });
-};
-SelectionAreaPreparationExecution = __decorate([
-    FExecutionRegister(SelectionAreaPreparationRequest)
-], SelectionAreaPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationExecution, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
-
-let SelectionAreaPreparationValidator = class SelectionAreaPreparationValidator {
-    fDraggableDataContext;
-    constructor(fDraggableDataContext) {
-        this.fDraggableDataContext = fDraggableDataContext;
-    }
-    handle(request) {
-        return this.isDragHandlesEmpty()
-            && MouseEventExtensions.isShiftPressed(request.event.originalEvent)
-            && !!this.fDraggableDataContext.fSelectionArea;
-    }
-    isDragHandlesEmpty() {
-        return !this.fDraggableDataContext.draggableItems.length;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationValidator });
-};
-SelectionAreaPreparationValidator = __decorate([
-    FValidatorRegister(SelectionAreaPreparationRequest)
-], SelectionAreaPreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
-
-const SELECTION_AREA_PREPARATION_PROVIDERS = [
-    SelectionAreaPreparationExecution,
-    SelectionAreaPreparationValidator,
-];
-
-const SELECTION_AREA_PROVIDERS = [
-    ...SELECTION_AREA_FINALIZE_PROVIDERS,
-    ...SELECTION_AREA_PREPARATION_PROVIDERS
-];
-
 class SingleSelectRequest {
     event;
     constructor(event) {
@@ -4253,25 +4659,26 @@ let SingleSelectExecution = class SingleSelectExecution {
     platform;
     fComponentsStore;
     fDraggableDataContext;
-    getConnectionHandler;
     fMediator;
-    constructor(platform, fComponentsStore, fDraggableDataContext, getConnectionHandler, fMediator) {
+    constructor(platform, fComponentsStore, fDraggableDataContext, fMediator) {
         this.platform = platform;
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.getConnectionHandler = getConnectionHandler;
         this.fMediator = fMediator;
     }
     handle(request) {
         const { event } = request;
         const item = this.getSelectableItem(event);
         if (item) {
-            this.fMediator.send(new UpdateItemLayerRequest(item, item.hostElement.parentElement));
+            this.fMediator.send(new UpdateItemAndChildrenLayersRequest(item, item.hostElement.parentElement));
         }
         this.isMultiselectEnabled(event) ? this.multiSelect(item) : this.singleSelect(item);
     }
     getSelectableItem(event) {
-        return this.fComponentsStore.findNode(event.targetElement) || this.getConnectionHandler.handle(event.targetElement);
+        return this.fComponentsStore.findNode(event.targetElement) || this.getConnectionHandler(event.targetElement);
+    }
+    getConnectionHandler(element) {
+        return this.fComponentsStore.fConnections.find(c => c.isContains(element) || c.fConnectionCenter?.nativeElement?.contains(element));
     }
     isMultiselectEnabled(event) {
         return MouseEventExtensions.isCommandButton(this.platform.getOS(), event.originalEvent) ||
@@ -4313,7 +4720,7 @@ let SingleSelectExecution = class SingleSelectExecution {
         });
         this.fDraggableDataContext.selectedItems = [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SingleSelectExecution, deps: [{ token: i1.PlatformService }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SingleSelectExecution, deps: [{ token: i3$1.PlatformService }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SingleSelectExecution });
 };
 SingleSelectExecution = __decorate([
@@ -4321,7 +4728,7 @@ SingleSelectExecution = __decorate([
 ], SingleSelectExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SingleSelectExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.PlatformService }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: FFlowMediator }] });
+        }], ctorParameters: () => [{ type: i3$1.PlatformService }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 let SingleSelectValidator = class SingleSelectValidator {
     fComponentsStore;
@@ -4368,6 +4775,7 @@ class FDraggableBase {
     dragStartTime = 0;
     dragStartPosition = PointExtensions.initialize();
     moveHandler = this.checkDragSequenceToStart;
+    pointerDownElement = null;
     constructor(ngZone) {
         this.ngZone = ngZone;
     }
@@ -4375,6 +4783,7 @@ class FDraggableBase {
         const isSyntheticEvent = this.isSyntheticEvent(event);
         const isFakeEvent = isFakeMousedownFromScreenReader(event);
         const mouseEvent = new IMouseEvent(event);
+        this.pointerDownElement = mouseEvent.targetElement;
         if (isSyntheticEvent || isFakeEvent || this.disabled) {
             return;
         }
@@ -4397,10 +4806,11 @@ class FDraggableBase {
     onTouchDown = (event) => {
         const isFakeEvent = isFakeTouchstartFromScreenReader(event);
         const touchEvent = new ITouchDownEvent(event);
+        this.pointerDownElement = touchEvent.targetElement;
         if (isFakeEvent || this.disabled) {
             return;
         }
-        let result = this.onPointerDown(new ITouchDownEvent(event));
+        let result = this.onPointerDown(touchEvent);
         if (result) {
             this.dragStartTime = Date.now();
             this.dragStartPosition = touchEvent.getPosition();
@@ -4427,7 +4837,8 @@ class FDraggableBase {
     };
     checkDragSequenceToStart(event) {
         const pointerPosition = event.getPosition();
-        if (!this.isDragStarted) {
+        if (!this.isDragStarted && this.pointerDownElement) {
+            event.setTarget(this.pointerDownElement);
             const distanceX = Math.abs(pointerPosition.x - this.dragStartPosition.x);
             const distanceY = Math.abs(pointerPosition.y - this.dragStartPosition.y);
             const isOverThreshold = distanceX + distanceY >= this.dragStartThreshold;
@@ -4461,6 +4872,7 @@ class FDraggableBase {
     };
     endDragSequence() {
         this.isDragStarted = false;
+        this.pointerDownElement = null;
         this.moveHandler = this.checkDragSequenceToStart;
         this.mouseListeners();
         this.mouseListeners = EventExtensions.emptyListener();
@@ -4468,47 +4880,337 @@ class FDraggableBase {
         this.touchListeners = EventExtensions.emptyListener();
         this.finalizeDragSequence();
     }
-    subscribe(document) {
-        if (this.document) {
-            this.unsubscribe();
+    subscribe(document) {
+        if (this.document) {
+            this.unsubscribe();
+        }
+        this.document = document;
+        this.ngZone?.runOutsideAngular(() => {
+            document.addEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
+            document.addEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
+        });
+        this.startListeners = () => {
+            document.removeEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
+            document.removeEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
+        };
+    }
+    unsubscribe() {
+        this.startListeners();
+        this.startListeners = EventExtensions.emptyListener();
+        this.touchListeners();
+        this.touchListeners = EventExtensions.emptyListener();
+        this.mouseListeners();
+        this.mouseListeners = EventExtensions.emptyListener();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FDraggableBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FDraggableBase, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FDraggableBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }] });
+function isTouchEvent(event) {
+    return event.type[0] === 't';
+}
+function isFakeMousedownFromScreenReader(event) {
+    return event.buttons === 0 || (event.offsetX === 0 && event.offsetY === 0);
+}
+function isFakeTouchstartFromScreenReader(event) {
+    const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0]);
+    return (!!touch &&
+        touch.identifier === -1 &&
+        (touch.radiusX == null || touch.radiusX === 1) &&
+        (touch.radiusY == null || touch.radiusY === 1));
+}
+
+class ExternalItemFinalizeRequest {
+    event;
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+class FCreateNodeEvent {
+    rect;
+    data;
+    constructor(rect, data) {
+        this.rect = rect;
+        this.data = data;
+    }
+}
+
+let ExternalItemFinalizeExecution = class ExternalItemFinalizeExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
+    }
+    get fCreateNode() {
+        return this.fComponentsStore.fDraggable.fCreateNode;
+    }
+    get dragHandler() {
+        return this.fDraggableDataContext.draggableItems[0];
+    }
+    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fMediator = fMediator;
+    }
+    handle(request) {
+        this.emitEvent(this.getExternalItemElementsFromPoint(request.event.getPosition()));
+        this.dragHandler.complete();
+    }
+    getExternalItemElementsFromPoint(position) {
+        return document.elementsFromPoint(position.x, position.y)
+            .filter(x => !x.closest('.f-external-item'));
+    }
+    emitEvent(elements) {
+        if (this.isPointerInCanvasRect(elements)) {
+            this.fCreateNode.emit(new FCreateNodeEvent(this.getRectInCanvas(), this.dragHandler.externalItem.fData));
+        }
+    }
+    isPointerInCanvasRect(elements) {
+        return elements.length ? this.flowHost.contains(elements[0]) : false;
+    }
+    getRectInCanvas() {
+        return this.fMediator.send(new GetElementRectInFlowRequest(this.dragHandler.placeholder));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeExecution });
+};
+ExternalItemFinalizeExecution = __decorate([
+    FExecutionRegister(ExternalItemFinalizeRequest)
+], ExternalItemFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
+
+class ExternalItemDragHandler {
+    externalItem;
+    placeholder;
+    onPointerDownRect = RectExtensions.initialize();
+    difference = PointExtensions.initialize();
+    constructor(externalItem) {
+        this.externalItem = externalItem;
+    }
+    getStyle(position) {
+        return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
+    }
+    initialize() {
+        this.onPointerDownRect = this.getExternalItemRect();
+        this.placeholder = DomElementExtensions.deepCloneNode(this.externalItem.hostElement);
+        this.placeholder.setAttribute('style', this.getStyle(Point.fromPoint(this.onPointerDownRect)));
+        document.body.appendChild(this.placeholder);
+    }
+    getExternalItemRect() {
+        const rect = this.externalItem.hostElement.getBoundingClientRect();
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        const offsetTop = rect.top + scrollTop;
+        const offsetLeft = rect.left + scrollLeft;
+        return RectExtensions.initialize(offsetLeft, offsetTop, rect.width, rect.height);
+    }
+    move(difference) {
+        this.difference = difference;
+        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
+        this.placeholder.setAttribute('style', this.getStyle(position));
+    }
+    complete() {
+        document.body.removeChild(this.placeholder);
+    }
+}
+
+let ExternalItemFinalizeValidator = class ExternalItemFinalizeValidator {
+    fDraggableDataContext;
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof ExternalItemDragHandler);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeValidator });
+};
+ExternalItemFinalizeValidator = __decorate([
+    FValidatorRegister(ExternalItemFinalizeRequest)
+], ExternalItemFinalizeValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemFinalizeValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
+
+const EXTERNAL_ITEM_FINALIZE_PROVIDERS = [
+    ExternalItemFinalizeExecution,
+    ExternalItemFinalizeValidator,
+];
+
+class ExternalItemPreparationRequest {
+    event;
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+let ExternalItemPreparationExecution = class ExternalItemPreparationExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fExternalItemService;
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
+    }
+    constructor(fComponentsStore, fDraggableDataContext, fExternalItemService) {
+        this.fComponentsStore = fComponentsStore;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fExternalItemService = fExternalItemService;
+    }
+    handle(request) {
+        this.fDraggableDataContext.onPointerDownScale = 1;
+        this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition()).elementTransform(this.flowHost);
+        this.fDraggableDataContext.draggableItems = [
+            new ExternalItemDragHandler(this.getExternalItem(request.event.targetElement))
+        ];
+    }
+    getExternalItem(targetElement) {
+        return this.fExternalItemService.getItem(getExternalItem(targetElement));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationExecution });
+};
+ExternalItemPreparationExecution = __decorate([
+    FExecutionRegister(ExternalItemPreparationRequest)
+], ExternalItemPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
+
+let ExternalItemPreparationValidator = class ExternalItemPreparationValidator {
+    fExternalItemService;
+    constructor(fExternalItemService) {
+        this.fExternalItemService = fExternalItemService;
+    }
+    handle(request) {
+        const externalItem = this.getExternalItem(request.event.targetElement);
+        return isExternalItem(request.event.targetElement) && !!externalItem && !externalItem.fDisabled;
+    }
+    getExternalItem(targetElement) {
+        return this.fExternalItemService.getItem(getExternalItem(targetElement));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationValidator, deps: [{ token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationValidator });
+};
+ExternalItemPreparationValidator = __decorate([
+    FValidatorRegister(ExternalItemPreparationRequest)
+], ExternalItemPreparationValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ExternalItemPreparationValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FExternalItemService }] });
+
+const EXTERNAL_ITEM_PREPARATION_PROVIDERS = [
+    ExternalItemPreparationExecution,
+    ExternalItemPreparationValidator,
+];
+
+const F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS = [
+    ...EXTERNAL_ITEM_FINALIZE_PROVIDERS,
+    ...EXTERNAL_ITEM_PREPARATION_PROVIDERS,
+];
+
+const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
+class FExternalItemBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FExternalItemBase, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemBase, decorators: [{
+            type: Directive
+        }] });
+
+function isExternalItem(element) {
+    return !!element.closest('[fExternalItem]');
+}
+function getExternalItem(element) {
+    return element.closest('[fExternalItem]');
+}
+
+class FExternalItemService {
+    items = [];
+    registerItem(item) {
+        this.items.push(item);
+    }
+    getItem(element) {
+        return this.items.find(item => item.hostElement === element);
+    }
+    removeItem(item) {
+        const index = this.items.indexOf(item);
+        if (index !== -1) {
+            this.items.splice(index, 1);
         }
-        this.document = document;
-        this.ngZone?.runOutsideAngular(() => {
-            document.addEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
-            document.addEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+let uniqueId$1 = 0;
+class FExternalItemDirective extends FExternalItemBase {
+    elementReference;
+    fExternalItemService;
+    fExternalItemId = `f-external-item-${uniqueId$1++}`;
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    fData;
+    fDisabled = false;
+    constructor(elementReference, fExternalItemService) {
+        super();
+        this.elementReference = elementReference;
+        this.fExternalItemService = fExternalItemService;
+    }
+    ngOnInit() {
+        this.fExternalItemService.registerItem(this);
+        this.disablePointerEvents(Array.from(this.hostElement.children));
+    }
+    disablePointerEvents(children) {
+        children.forEach((x) => {
+            x.style.pointerEvents = 'none';
+            this.disablePointerEvents(Array.from(x.children));
         });
-        this.startListeners = () => {
-            document.removeEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
-            document.removeEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
-        };
     }
-    unsubscribe() {
-        this.startListeners();
-        this.startListeners = EventExtensions.emptyListener();
-        this.touchListeners();
-        this.touchListeners = EventExtensions.emptyListener();
-        this.mouseListeners();
-        this.mouseListeners = EventExtensions.emptyListener();
+    ngOnDestroy() {
+        this.fExternalItemService.removeItem(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FDraggableBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FDraggableBase, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FDraggableBase, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }] });
-function isTouchEvent(event) {
-    return event.type[0] === 't';
-}
-function isFakeMousedownFromScreenReader(event) {
-    return event.buttons === 0 || (event.offsetX === 0 && event.offsetY === 0);
-}
-function isFakeTouchstartFromScreenReader(event) {
-    const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0]);
-    return (!!touch &&
-        touch.identifier === -1 &&
-        (touch.radiusX == null || touch.radiusX === 1) &&
-        (touch.radiusY == null || touch.radiusY === 1));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemDirective, deps: [{ token: i0.ElementRef }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { fExternalItemId: "fExternalItemId", fData: "fData", fDisabled: "fDisabled" }, host: { properties: { "attr.id": "fExternalItemId", "class.f-external-item-disabled": "fDisabled" }, classAttribute: "f-component f-external-item" }, providers: [
+            { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
+        ], usesInheritance: true, ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FExternalItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fExternalItem]",
+                    host: {
+                        '[attr.id]': 'fExternalItemId',
+                        class: "f-component f-external-item",
+                        '[class.f-external-item-disabled]': 'fDisabled',
+                    },
+                    providers: [
+                        { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FExternalItemService }], propDecorators: { fExternalItemId: [{
+                type: Input
+            }], fData: [{
+                type: Input
+            }], fDisabled: [{
+                type: Input
+            }] } });
+
+const F_EXTERNAL_ITEM_PROVIDERS = [
+    FExternalItemDirective
+];
 
 const F_DRAG_AND_DROP_PLUGIN = new InjectionToken('F_DRAG_AND_DROP_PLUGIN');
 
@@ -4562,7 +5264,6 @@ class FDraggableDirective extends FDraggableBase {
         this.plugins.forEach((p) => {
             p.prepareDragSequence?.(event);
         });
-        this.fMediator.send(new SelectionAreaPreparationRequest(event));
         this.fMediator.send(new NodeResizePreparationRequest(event));
         this.fMediator.send(new NodeMovePreparationRequest(event));
         this.fMediator.send(new CanvasMovePreparationRequest(event));
@@ -4601,7 +5302,7 @@ class FDraggableDirective extends FDraggableBase {
         const pointerPositionInCanvas = Point.fromPoint(event.getPosition()).elementTransform(this.hostElement);
         const difference = pointerPositionInCanvas.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
         this.fDraggableDataContext.draggableItems.forEach((item) => {
-            item.move(difference);
+            item.move({ ...difference });
         });
     }
     onPointerUp(event) {
@@ -4610,7 +5311,6 @@ class FDraggableDirective extends FDraggableBase {
         });
         this.fMediator.send(new ReassignConnectionFinalizeRequest(event));
         this.fMediator.send(new CreateConnectionFinalizeRequest(event));
-        this.fMediator.send(new SelectionAreaFinalizeRequest(event));
         this.fMediator.send(new NodeResizeFinalizeRequest(event));
         this.fMediator.send(new NodeMoveFinalizeRequest(event));
         this.fMediator.send(new CanvasMoveFinalizeRequest(event));
@@ -4744,7 +5444,6 @@ class FMinimapDragHandler {
     canvasPosition;
     eventPoint;
     minimap;
-    type = EFDraggableType.MINI_MAP;
     lastDifference = null;
     constructor(fComponentsStore, fMediator, flowRect, canvasPosition, eventPoint, minimap) {
         this.fComponentsStore = fComponentsStore;
@@ -4832,82 +5531,256 @@ let MinimapDragPreparationValidator = class MinimapDragPreparationValidator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragPreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragPreparationValidator });
 };
-MinimapDragPreparationValidator = __decorate([
-    FValidatorRegister(MinimapDragPreparationRequest)
-], MinimapDragPreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragPreparationValidator, decorators: [{
+MinimapDragPreparationValidator = __decorate([
+    FValidatorRegister(MinimapDragPreparationRequest)
+], MinimapDragPreparationValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragPreparationValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
+
+const MINIMAP_DRAG_PREPARATION_PROVIDERS = [
+    MinimapDragPreparationExecution,
+    MinimapDragPreparationValidator,
+];
+
+class MinimapDragFinalizeRequest {
+    event;
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+let MinimapDragFinalizeExecution = class MinimapDragFinalizeExecution {
+    fDraggableDataContext;
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        this.fDraggableDataContext.draggableItems.forEach((x) => {
+            x.complete?.();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeExecution });
+};
+MinimapDragFinalizeExecution = __decorate([
+    FExecutionRegister(MinimapDragFinalizeRequest)
+], MinimapDragFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
+
+let MinimapDragFinalizeValidator = class MinimapDragFinalizeValidator {
+    fDraggableDataContext;
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof FMinimapDragHandler);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeValidator });
+};
+MinimapDragFinalizeValidator = __decorate([
+    FValidatorRegister(MinimapDragFinalizeRequest)
+], MinimapDragFinalizeValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ 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 {
+    event;
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+let SelectionAreaFinalizeExecution = class SelectionAreaFinalizeExecution {
+    fDraggableDataContext;
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        this.fDraggableDataContext.draggableItems.forEach((x) => {
+            x.complete?.();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeExecution });
+};
+SelectionAreaFinalizeExecution = __decorate([
+    FExecutionRegister(SelectionAreaFinalizeRequest)
+], SelectionAreaFinalizeExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
+
+class GetCanBeSelectedItemsRequest {
+}
+
+class SelectionAreaDragHandle {
+    fComponentsStore;
+    fSelectionArea;
+    fDraggableDataContext;
+    fMediator;
+    canBeSelected = [];
+    selectedByMove = [];
+    get canvasPosition() {
+        return Point.fromPoint(this.fComponentsStore.fCanvas.transform.position).add(this.fComponentsStore.fCanvas.transform.scaledPosition);
+    }
+    constructor(fComponentsStore, fSelectionArea, fDraggableDataContext, fMediator) {
+        this.fComponentsStore = fComponentsStore;
+        this.fSelectionArea = fSelectionArea;
+        this.fDraggableDataContext = fDraggableDataContext;
+        this.fMediator = fMediator;
+    }
+    initialize() {
+        this.canBeSelected = this.fMediator.send(new GetCanBeSelectedItemsRequest());
+        this.fSelectionArea.show();
+        this.fSelectionArea.draw(RectExtensions.initialize(this.fDraggableDataContext.onPointerDownPosition.x, this.fDraggableDataContext.onPointerDownPosition.y));
+    }
+    move(difference) {
+        const currentPoint = Point.fromPoint(difference).add(this.fDraggableDataContext.onPointerDownPosition);
+        const x = Math.min(this.fDraggableDataContext.onPointerDownPosition.x, currentPoint.x);
+        const y = Math.min(this.fDraggableDataContext.onPointerDownPosition.y, currentPoint.y);
+        const width = Math.abs(difference.x);
+        const height = Math.abs(difference.y);
+        this.fSelectionArea.draw(RectExtensions.initialize(x, y, width, height));
+        this.selectedByMove = [];
+        this.canBeSelected.forEach((item) => {
+            item.element.deselect();
+            const itemRect = RectExtensions.addPoint(item.rect, this.canvasPosition);
+            const isIntersect = RectExtensions.intersectionWithRect(itemRect, RectExtensions.initialize(x, y, width, height));
+            if (isIntersect) {
+                item.element.select();
+                this.selectedByMove.push(item.element);
+            }
+        });
+        this.fMediator.send(new EmitTransformChangesRequest());
+    }
+    complete() {
+        this.fSelectionArea.hide();
+        this.fDraggableDataContext.selectedItems.push(...this.selectedByMove);
+        if (this.selectedByMove.length > 0) {
+            this.fDraggableDataContext.isSelectedChanged = true;
+        }
+    }
+}
+
+let SelectionAreaFinalizeValidator = class SelectionAreaFinalizeValidator {
+    fDraggableDataContext;
+    constructor(fDraggableDataContext) {
+        this.fDraggableDataContext = fDraggableDataContext;
+    }
+    handle(request) {
+        return this.fDraggableDataContext.draggableItems.some((x) => x instanceof SelectionAreaDragHandle);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeValidator });
+};
+SelectionAreaFinalizeValidator = __decorate([
+    FValidatorRegister(SelectionAreaFinalizeRequest)
+], SelectionAreaFinalizeValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaFinalizeValidator, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-const MINIMAP_DRAG_PREPARATION_PROVIDERS = [
-    MinimapDragPreparationExecution,
-    MinimapDragPreparationValidator,
+const SELECTION_AREA_FINALIZE_PROVIDERS = [
+    SelectionAreaFinalizeExecution,
+    SelectionAreaFinalizeValidator,
 ];
 
-class MinimapDragFinalizeRequest {
+class SelectionAreaPreparationRequest {
     event;
-    constructor(event) {
+    fSelectionArea;
+    constructor(event, fSelectionArea) {
         this.event = event;
+        this.fSelectionArea = fSelectionArea;
     }
 }
 
-let MinimapDragFinalizeExecution = class MinimapDragFinalizeExecution {
+let SelectionAreaPreparationExecution = class SelectionAreaPreparationExecution {
+    fComponentsStore;
     fDraggableDataContext;
-    constructor(fDraggableDataContext) {
+    fMediator;
+    get flowHost() {
+        return this.fComponentsStore.fFlow.hostElement;
+    }
+    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
+        this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
+        this.fMediator = fMediator;
     }
     handle(request) {
-        this.fDraggableDataContext.draggableItems.forEach((x) => {
-            x.complete?.();
-        });
+        this.fDraggableDataContext.draggableItems = [
+            new SelectionAreaDragHandle(this.fComponentsStore, request.fSelectionArea, this.fDraggableDataContext, this.fMediator)
+        ];
+        this.fDraggableDataContext.onPointerDownScale = 1;
+        this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
+            .elementTransform(this.flowHost);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationExecution });
 };
-MinimapDragFinalizeExecution = __decorate([
-    FExecutionRegister(MinimapDragFinalizeRequest)
-], MinimapDragFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeExecution, decorators: [{
+SelectionAreaPreparationExecution = __decorate([
+    FExecutionRegister(SelectionAreaPreparationRequest)
+], SelectionAreaPreparationExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
-let MinimapDragFinalizeValidator = class MinimapDragFinalizeValidator {
+let SelectionAreaPreparationValidator = class SelectionAreaPreparationValidator {
     fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
-        return this.fDraggableDataContext.draggableItems.some((x) => x.constructor.name === FMinimapDragHandler.name);
+        return this.isDragHandlesEmpty()
+            && MouseEventExtensions.isShiftPressed(request.event.originalEvent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeValidator });
+    isDragHandlesEmpty() {
+        return !this.fDraggableDataContext.draggableItems.length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationValidator });
 };
-MinimapDragFinalizeValidator = __decorate([
-    FValidatorRegister(MinimapDragFinalizeRequest)
-], MinimapDragFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MinimapDragFinalizeValidator, decorators: [{
+SelectionAreaPreparationValidator = __decorate([
+    FValidatorRegister(SelectionAreaPreparationRequest)
+], SelectionAreaPreparationValidator);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectionAreaPreparationValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-const MINIMAP_DRAG_FINALIZE_PROVIDERS = [
-    MinimapDragFinalizeExecution,
-    MinimapDragFinalizeValidator,
+const SELECTION_AREA_PREPARATION_PROVIDERS = [
+    SelectionAreaPreparationExecution,
+    SelectionAreaPreparationValidator,
 ];
 
-const F_MINIMAP_DRAG_AND_DROP_PROVIDERS = [
-    CalculateFlowPointFromMinimapPointExecution,
-    ...MINIMAP_DRAG_FINALIZE_PROVIDERS,
-    ...MINIMAP_DRAG_PREPARATION_PROVIDERS,
+const F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS = [
+    ...SELECTION_AREA_FINALIZE_PROVIDERS,
+    ...SELECTION_AREA_PREPARATION_PROVIDERS
 ];
 
 const F_DRAGGABLE_PROVIDERS = [
     ...CANVAS_PROVIDERS,
     ...CONNECTIONS_PROVIDERS,
+    ...DRAG_AND_DROP_COMMON_PROVIDERS,
     ...SINGLE_SELECT_PROVIDERS,
-    ...EXTERNAL_ITEM_PROVIDERS,
+    ...F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS,
     ...NODE_PROVIDERS,
     ...NODE_RESIZE_PROVIDERS,
-    ...SELECTION_AREA_PROVIDERS,
+    ...F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS,
     ...F_MINIMAP_DRAG_AND_DROP_PROVIDERS
 ];
 
@@ -4917,9 +5790,7 @@ let ClearSelectionExecution = class ClearSelectionExecution {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            x.deselect();
-        });
+        this.fDraggableDataContext.selectedItems.forEach((x) => x.deselect());
         this.fDraggableDataContext.selectedItems = [];
         this.fDraggableDataContext.isSelectedChanged = true;
     }
@@ -4945,7 +5816,7 @@ let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
         const element = DomElementExtensions.createSvgElement('defs');
         const fConnection = request.fConnection;
         fConnection.fMarkers.forEach((marker) => {
-            const markerElement = this.createMarkerElement(marker, fConnection.fConnectionId);
+            const markerElement = this.createMarkerElement(marker, fConnection.fId);
             const clone = marker.hostElement.cloneNode(true);
             clone.setAttribute('height', `${marker.height}`);
             clone.setAttribute('width', `${marker.width}`);
@@ -5372,6 +6243,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
+class GetDeepChildrenNodesAndGroupsRequest {
+    fId;
+    constructor(fId) {
+        this.fId = fId;
+    }
+}
+
+let GetDeepChildrenNodesAndGroupsExecution = class GetDeepChildrenNodesAndGroupsExecution {
+    fComponentsStore;
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        return this.getChildrenNodes(request.fId);
+    }
+    getChildrenNodes(fId, visited = new Set()) {
+        if (visited.has(fId)) {
+            throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fId);
+        }
+        visited.add(fId);
+        const result = this.fComponentsStore.fNodes.filter((x) => x.fParentId === fId);
+        result.forEach((x) => {
+            result.push(...this.getChildrenNodes(x.fId, visited));
+        });
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution });
+};
+GetDeepChildrenNodesAndGroupsExecution = __decorate([
+    FExecutionRegister(GetDeepChildrenNodesAndGroupsRequest)
+], GetDeepChildrenNodesAndGroupsExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetDeepChildrenNodesAndGroupsExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
+
 class GetConnectionLineRequest {
     outputRect;
     inputRect;
@@ -5443,10 +6350,10 @@ const positionFixedOutbound = {
     },
 };
 
-class GetExternalNodesRectRequest {
+class GetScaledNodeRectsWithFlowPositionRequest {
 }
 
-let GetExternalNodesRectExecution = class GetExternalNodesRectExecution {
+let GetScaledNodeRectsWithFlowPositionExecution = class GetScaledNodeRectsWithFlowPositionExecution {
     fComponentsStore;
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
@@ -5463,13 +6370,13 @@ let GetExternalNodesRectExecution = class GetExternalNodesRectExecution {
     getNodes() {
         return this.fComponentsStore.fNodes;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetExternalNodesRectExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetExternalNodesRectExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetScaledNodeRectsWithFlowPositionExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetScaledNodeRectsWithFlowPositionExecution });
 };
-GetExternalNodesRectExecution = __decorate([
-    FExecutionRegister(GetExternalNodesRectRequest)
-], GetExternalNodesRectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetExternalNodesRectExecution, decorators: [{
+GetScaledNodeRectsWithFlowPositionExecution = __decorate([
+    FExecutionRegister(GetScaledNodeRectsWithFlowPositionRequest)
+], GetScaledNodeRectsWithFlowPositionExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetScaledNodeRectsWithFlowPositionExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
@@ -5647,66 +6554,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
-class GetOutgoingConnectionsHandler {
-    fComponentsStore;
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
-    }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(outputs) {
-        const outputsIds = outputs.map((x) => x.id);
-        return this.fConnections.filter((x) => {
-            return outputsIds.includes(x.fOutputId);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetOutgoingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetOutgoingConnectionsHandler });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetOutgoingConnectionsHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
-class GetIncomingConnectionsHandler {
-    fComponentsStore;
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
-    }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(inputs) {
-        const inputsIds = inputs.map((x) => x.id);
-        return this.fConnections.filter((x) => {
-            return inputsIds.includes(x.fInputId);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetIncomingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetIncomingConnectionsHandler });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetIncomingConnectionsHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
 let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
     fComponentsStore;
     fDraggableDataContext;
     fMediator;
-    getOutgoingConnectionsHandler;
-    getIncomingConnectionsHandler;
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext, fMediator, getOutgoingConnectionsHandler, getIncomingConnectionsHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.fMediator = fMediator;
-        this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
-        this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
     }
     handle() {
         const isValid = this.isValidRequest();
@@ -5723,19 +6584,19 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
         if (!isCantBeConnectedByInput && outputsOfNode.length && !isCantBeConnectedByOutput && inputsOfNode.length) {
             const output = outputsOfNode[0];
             const input = inputsOfNode[0];
-            const outgoingConnections = this.getOutgoingConnectionsHandler.handle([output]);
-            const incomingConnections = this.getIncomingConnectionsHandler.handle([input]);
-            if (outgoingConnections.length === 0 && incomingConnections.length === 0) {
-                const connections = this.findConnectionsUnderNode(fNode);
-                if (connections.length) {
-                    //TODO: need to implement
-                }
-            }
+            // const outgoingConnections = this.getOutgoingConnectionsHandler.handle([ output ]);
+            // const incomingConnections = this.getIncomingConnectionsHandler.handle([ input ]);
+            // if (outgoingConnections.length === 0 && incomingConnections.length === 0) {
+            //   const connections = this.findConnectionsUnderNode(fNode);
+            //   if (connections.length) {
+            //     //TODO: need to implement
+            //   }
+            // }
         }
     }
     isValidRequest() {
         const result = this.fDraggableDataContext.draggableItems.length === 1 &&
-            this.fDraggableDataContext.draggableItems[0].type === EFDraggableType.NODE;
+            this.fDraggableDataContext.draggableItems[0] instanceof NodeDragHandler;
         return result;
     }
     getOutputsForNode(node) {
@@ -5751,7 +6612,7 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
             return ([]).length > 0;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsConnectionUnderNodeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsConnectionUnderNodeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsConnectionUnderNodeExecution });
 };
 IsConnectionUnderNodeExecution = __decorate([
@@ -5759,7 +6620,7 @@ IsConnectionUnderNodeExecution = __decorate([
 ], IsConnectionUnderNodeExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsConnectionUnderNodeExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 class RedrawConnectionsRequest {
 }
@@ -5844,7 +6705,7 @@ let SelectExecution = class SelectExecution {
             }
         });
         request.connections.forEach((key) => {
-            const connection = this.fDataContext.fConnections.find((x) => x.fConnectionId === key);
+            const connection = this.fDataContext.fConnections.find((x) => x.fId === key);
             if (connection) {
                 connection.select();
                 this.fDraggableDataContext.selectedItems.push(connection);
@@ -5904,7 +6765,45 @@ class SelectAndUpdateNodeLayerRequest {
     }
 }
 
-class UpdateItemLayerRequest {
+class MoveFrontElementsBeforeTargetElementRequest {
+    fItemsContainer;
+    allElements;
+    elementsThatShouldBeInFront;
+    targetIndex;
+    constructor(fItemsContainer, // fGroupsContainer || fNodesContainer || fConnectionsContainer
+    allElements, elementsThatShouldBeInFront, targetIndex) {
+        this.fItemsContainer = fItemsContainer;
+        this.allElements = allElements;
+        this.elementsThatShouldBeInFront = elementsThatShouldBeInFront;
+        this.targetIndex = targetIndex;
+    }
+}
+
+let MoveFrontElementsBeforeTargetElementExecution = class MoveFrontElementsBeforeTargetElementExecution {
+    handle(request) {
+        const elementsToMove = [];
+        for (let i = request.targetIndex + 1; i < request.allElements.length; i++) {
+            const element = request.allElements[i];
+            if (!request.elementsThatShouldBeInFront.includes(element)) {
+                elementsToMove.push(element);
+            }
+        }
+        elementsToMove.forEach((x) => {
+            request.fItemsContainer.removeChild(x);
+            request.fItemsContainer.insertBefore(x, request.allElements[request.targetIndex]);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MoveFrontElementsBeforeTargetElementExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MoveFrontElementsBeforeTargetElementExecution });
+};
+MoveFrontElementsBeforeTargetElementExecution = __decorate([
+    FExecutionRegister(MoveFrontElementsBeforeTargetElementRequest)
+], MoveFrontElementsBeforeTargetElementExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MoveFrontElementsBeforeTargetElementExecution, decorators: [{
+            type: Injectable
+        }] });
+
+class UpdateItemAndChildrenLayersRequest {
     item;
     itemContainer;
     constructor(item, itemContainer) {
@@ -5913,40 +6812,104 @@ class UpdateItemLayerRequest {
     }
 }
 
-let UpdateItemLayerExecution = class UpdateItemLayerExecution {
+let UpdateItemAndChildrenLayersExecution = class UpdateItemAndChildrenLayersExecution {
+    fComponentsStore;
+    fMediator;
+    windowService;
+    get fGroupsContainer() {
+        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
+    }
+    get fNodesContainer() {
+        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
+    }
+    get fConnectionsContainer() {
+        return this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement;
+    }
+    constructor(fComponentsStore, fMediator, windowService) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+        this.windowService = windowService;
+    }
     handle(request) {
-        const elements = Array.from(request.itemContainer.children);
-        const targetIndex = elements.findIndex((x) => x === request.item.hostElement);
-        if (targetIndex !== -1 && targetIndex !== elements.length - 1) {
-            const afterElements = elements.splice(targetIndex + 1);
-            afterElements.forEach((x) => {
-                request.itemContainer.removeChild(x);
-                request.itemContainer.insertBefore(x, request.item.hostElement);
-            });
+        switch (request.itemContainer) {
+            case this.fGroupsContainer:
+                this.handleGroup(request);
+                break;
+            case this.fNodesContainer:
+                this.handleNode(request);
+                break;
+            case this.fConnectionsContainer:
+                this.handleConnection(request);
+                break;
+            default:
+                throw new Error('Unknown container');
+        }
+    }
+    handleGroup(request) {
+        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
+        const childrenGroups = this.getChildrenGroups(childrenNodesAndGroups);
+        this.updateLayers(this.fGroupsContainer, request.item.hostElement, childrenGroups);
+        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
+        if (childrenNodes.length) {
+            this.updateLayers(this.fNodesContainer, childrenNodes[0], childrenNodes);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UpdateItemLayerExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UpdateItemLayerExecution });
+    handleNode(request) {
+        const childrenNodesAndGroups = this.getChildrenNodesAndGroups(request.item.fId);
+        const childrenNodes = this.getChildrenNodes(childrenNodesAndGroups);
+        this.updateLayers(request.itemContainer, request.item.hostElement, childrenNodes);
+    }
+    handleConnection(request) {
+        this.updateLayers(request.itemContainer, request.item.hostElement, []);
+    }
+    updateLayers(itemContainer, item, elementsThatShouldBeInFront) {
+        const allElements = Array.from(itemContainer.children);
+        const targetIndex = allElements.findIndex((x) => x === item);
+        if (this.isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront)) {
+            this.fMediator.send(new MoveFrontElementsBeforeTargetElementRequest(itemContainer, allElements, elementsThatShouldBeInFront, targetIndex));
+        }
+    }
+    isAnythingNeedToBeMoved(allElements, targetIndex, elementsThatShouldBeInFront) {
+        for (let i = targetIndex + 1; i < allElements.length; i++) {
+            if (!elementsThatShouldBeInFront.includes(allElements[i])) {
+                return true;
+            }
+        }
+        return false;
+    }
+    getChildrenGroups(elements) {
+        const allElements = Array.from(this.fGroupsContainer.children);
+        return elements.filter((x) => this.fGroupsContainer.contains(x))
+            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+    }
+    getChildrenNodes(elements) {
+        const allElements = Array.from(this.fNodesContainer.children);
+        return elements.filter((x) => this.fNodesContainer.contains(x))
+            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+    }
+    getChildrenNodesAndGroups(fId) {
+        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId)).map((x) => x.hostElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }, { token: i3$1.WindowService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UpdateItemAndChildrenLayersExecution });
 };
-UpdateItemLayerExecution = __decorate([
-    FExecutionRegister(UpdateItemLayerRequest)
-], UpdateItemLayerExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UpdateItemLayerExecution, decorators: [{
+UpdateItemAndChildrenLayersExecution = __decorate([
+    FExecutionRegister(UpdateItemAndChildrenLayersRequest)
+], UpdateItemAndChildrenLayersExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UpdateItemAndChildrenLayersExecution, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }, { type: i3$1.WindowService }] });
 
 let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution {
     fDraggableDataContext;
-    fComponentsStore;
     fMediator;
-    constructor(fDraggableDataContext, fComponentsStore, fMediator) {
+    constructor(fDraggableDataContext, fMediator) {
         this.fDraggableDataContext = fDraggableDataContext;
-        this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
     }
     handle(request) {
         this.selectNodeIfNotSelected(request.node);
-        this.fMediator.send(new UpdateItemLayerRequest(request.node, this.fComponentsStore.fCanvas.fNodesContainer.nativeElement));
+        this.fMediator.send(new UpdateItemAndChildrenLayersRequest(request.node, request.node.hostElement.parentElement));
     }
     selectNodeIfNotSelected(node) {
         if (!this.fDraggableDataContext.selectedItems.includes(node) && !node.fSelectionDisabled) {
@@ -5955,7 +6918,7 @@ let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution
             this.fDraggableDataContext.isSelectedChanged = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectAndUpdateNodeLayerExecution });
 };
 SelectAndUpdateNodeLayerExecution = __decorate([
@@ -5963,7 +6926,146 @@ SelectAndUpdateNodeLayerExecution = __decorate([
 ], SelectAndUpdateNodeLayerExecution);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FDraggableDataContext }, { type: FComponentsStore }, { type: FFlowMediator }] });
+        }], ctorParameters: () => [{ type: FDraggableDataContext }, { type: FFlowMediator }] });
+
+class SortNodeLayersRequest {
+}
+
+let SortNodeLayersExecution = class SortNodeLayersExecution {
+    fComponentsStore;
+    fMediator;
+    windowService;
+    get fGroupsContainer() {
+        return this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement;
+    }
+    get fNodesContainer() {
+        return this.fComponentsStore.fCanvas.fNodesContainer.nativeElement;
+    }
+    get fNodesContainerElements() {
+        return Array.from(this.fNodesContainer.children);
+    }
+    constructor(fComponentsStore, fMediator, windowService) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+        this.windowService = windowService;
+    }
+    handle(request) {
+        this.getGroups().forEach((parent) => {
+            this.moveChildrenNodes(this.getSortedChildrenNodes(parent));
+        });
+    }
+    getGroups() {
+        return this.fComponentsStore.fNodes.filter((x) => this.fGroupsContainer.contains(x.hostElement));
+    }
+    getSortedChildrenNodes(parent) {
+        const allElements = this.fNodesContainerElements;
+        return this.getChildrenNodes(parent.fId)
+            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+    }
+    getChildrenNodes(fId) {
+        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId))
+            .filter((x) => this.fNodesContainer.contains(x.hostElement)).map((x) => x.hostElement);
+    }
+    moveChildrenNodes(sortedChildrenGroups) {
+        const fragment = this.windowService.getWindow().document.createDocumentFragment();
+        sortedChildrenGroups.forEach((childGroup) => {
+            fragment.appendChild(childGroup); // Append automatically removes the element from its current position
+        });
+        this.fNodesContainer.appendChild(fragment);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortNodeLayersExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }, { token: i3$1.WindowService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortNodeLayersExecution });
+};
+SortNodeLayersExecution = __decorate([
+    FExecutionRegister(SortNodeLayersRequest)
+], SortNodeLayersExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortNodeLayersExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }, { type: i3$1.WindowService }] });
+
+class SortItemsByParentRequest {
+    fItemsContainer;
+    constructor(fItemsContainer // fGroupsContainer || fNodesContainer
+    ) {
+        this.fItemsContainer = fItemsContainer;
+    }
+}
+
+let SortItemsByParentExecution = class SortItemsByParentExecution {
+    fComponentsStore;
+    fMediator;
+    windowService;
+    fItemsContainer;
+    get fItemsFromContainer() {
+        return Array.from(this.fItemsContainer.children);
+    }
+    constructor(fComponentsStore, fMediator, windowService) {
+        this.fComponentsStore = fComponentsStore;
+        this.fMediator = fMediator;
+        this.windowService = windowService;
+    }
+    handle(request) {
+        this.fItemsContainer = request.fItemsContainer;
+        this.getItems().forEach((parent) => {
+            this.moveChildrenItems(this.getSortedChildrenItems(parent), parent);
+        });
+    }
+    getItems() {
+        return this.fComponentsStore.fNodes.filter((x) => this.fItemsContainer.contains(x.hostElement));
+    }
+    getSortedChildrenItems(parent) {
+        const allElements = this.fItemsFromContainer;
+        const parentIndex = allElements.indexOf(parent.hostElement);
+        return this.getChildrenGroups(parent.fId)
+            .filter((child) => allElements.indexOf(child) < parentIndex)
+            .sort((a, b) => allElements.indexOf(a) - allElements.indexOf(b));
+    }
+    getChildrenGroups(fId) {
+        return this.fMediator.send(new GetDeepChildrenNodesAndGroupsRequest(fId))
+            .filter((x) => this.fItemsContainer.contains(x.hostElement)).map((x) => x.hostElement);
+    }
+    moveChildrenItems(sortedChildrenItems, parent) {
+        let nextSibling = parent.hostElement.nextElementSibling;
+        const fragment = this.windowService.getWindow().document.createDocumentFragment();
+        sortedChildrenItems.forEach((child) => {
+            fragment.appendChild(child); // Append automatically removes the element from its current position
+        });
+        this.fItemsContainer.insertBefore(fragment, nextSibling);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortItemsByParentExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }, { token: i3$1.WindowService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortItemsByParentExecution });
+};
+SortItemsByParentExecution = __decorate([
+    FExecutionRegister(SortItemsByParentRequest)
+], SortItemsByParentExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortItemsByParentExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }, { type: i3$1.WindowService }] });
+
+class SortItemLayersRequest {
+}
+
+let SortItemLayersExecution = class SortItemLayersExecution {
+    fMediator;
+    fComponentsStore;
+    constructor(fMediator, fComponentsStore) {
+        this.fMediator = fMediator;
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        this.fMediator.send(new SortItemsByParentRequest(this.fComponentsStore.fCanvas.fGroupsContainer.nativeElement));
+        this.fMediator.send(new SortNodeLayersRequest());
+        this.fMediator.send(new SortItemsByParentRequest(this.fComponentsStore.fCanvas.fNodesContainer.nativeElement));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortItemLayersExecution, deps: [{ token: FFlowMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortItemLayersExecution });
+};
+SortItemLayersExecution = __decorate([
+    FExecutionRegister(SortItemLayersRequest)
+], SortItemLayersExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SortItemLayersExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FFlowMediator }, { type: FComponentsStore }] });
 
 class SubscribeOnTransformChangesRequest {
 }
@@ -5976,7 +7078,7 @@ let SubscribeOnTransformChangesExecution = class SubscribeOnTransformChangesExec
         this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
-        return merge(this.fTransformStore.changes, this.fComponentsStore.changes);
+        return merge(this.fTransformStore.changes, this.fComponentsStore.componentsData$, this.fComponentsStore.componentsCount$);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SubscribeOnTransformChangesExecution, deps: [{ token: FTransformStore }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SubscribeOnTransformChangesExecution });
@@ -6000,24 +7102,6 @@ function getKeyByValue(object, value) {
     return Object.keys(object).find(key => object[key] === value);
 }
 
-class GetConnectionHandler {
-    fComponentsStore;
-    get fConnections() {
-        return this.fComponentsStore.fConnections;
-    }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(element) {
-        return this.fConnections.find(c => c.isContains(element) || c.fConnectionCenter?.nativeElement?.contains(element));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetConnectionHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetConnectionHandler });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GetConnectionHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
 function getValueFromDataAttr(element, attr, cls) {
     return getClosestTarget(element, cls).dataset[attr];
 }
@@ -6038,9 +7122,10 @@ const COMMON_PROVIDERS = [
     CreateConnectionMarkersExecution,
     EmitTransformChangesExecution,
     GetCanBeSelectedItemsExecution,
+    GetDeepChildrenNodesAndGroupsExecution,
     GetConnectionLineExecution,
     GetElementRectInFlowExecution,
-    GetExternalNodesRectExecution,
+    GetScaledNodeRectsWithFlowPositionExecution,
     GetNodesRectExecution,
     GetOutputRectInFlowExecution,
     GetPositionInFlowExecution,
@@ -6050,12 +7135,13 @@ const COMMON_PROVIDERS = [
     SelectExecution,
     SelectAllExecution,
     SelectAndUpdateNodeLayerExecution,
+    SortItemLayersExecution,
+    SortItemsByParentExecution,
+    SortNodeLayersExecution,
     SubscribeOnTransformChangesExecution,
-    UpdateItemLayerExecution,
-    GetConnectionHandler,
+    UpdateItemAndChildrenLayersExecution,
+    MoveFrontElementsBeforeTargetElementExecution,
     GetInputRectInFlowExecution,
-    GetIncomingConnectionsHandler,
-    GetOutgoingConnectionsHandler,
 ];
 
 class FCanvasComponent extends FCanvasBase {
@@ -6087,6 +7173,7 @@ class FCanvasComponent extends FCanvasBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    fGroupsContainer;
     fNodesContainer;
     fConnectionsContainer;
     constructor(elementReference, fMediator, fComponentsStore) {
@@ -6111,7 +7198,7 @@ class FCanvasComponent extends FCanvasBase {
         }, 150);
     }
     fitToScreen(toCenter = PointExtensions.initialize(), animated = true) {
-        const fNodesRect = this.fMediator.send(new GetNodesRectRequest());
+        const fNodesRect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize();
         if (fNodesRect.width === 0 || fNodesRect.height === 0) {
             return;
         }
@@ -6122,7 +7209,7 @@ class FCanvasComponent extends FCanvasBase {
         this.completeDrag();
     }
     oneToOne() {
-        const fNodesRect = this.fMediator.send(new GetNodesRectRequest());
+        const fNodesRect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize();
         if (fNodesRect.width === 0 || fNodesRect.height === 0) {
             return;
         }
@@ -6133,19 +7220,22 @@ class FCanvasComponent extends FCanvasBase {
         this.completeDrag();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FCanvasComponent, deps: [{ token: i0.ElementRef }, { token: FFlowMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: "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 #fConnectionsContainer>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"[fGroup]\"></ng-content>\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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-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: "18.2.0", ngImport: i0, type: FCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-canvas', exportAs: 'fComponent', host: {
                         'class': 'f-component f-canvas',
-                    }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <div #fConnectionsContainer>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"[fGroup]\"></ng-content>\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"] }]
+                    }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div #fGroupsContainer>\n    <ng-content select=\"[fGroup]\"></ng-content>\n  </div>\n  <div #fConnectionsContainer>\n    <ng-content select=\"f-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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FFlowMediator }, { 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 }]
@@ -6189,6 +7279,8 @@ class LineService {
         this.hostElement = hostElement;
         this.fHorizontalLine = new LineElement(this.hostElement);
         this.fVerticalLine = new LineElement(this.hostElement);
+        this.fHorizontalLine.hide();
+        this.fVerticalLine.hide();
     }
     drawVerticalLine(x, size, transform) {
         this.fVerticalLine.show();
@@ -6365,7 +7457,7 @@ class FLineAlignmentComponent extends FLineAlignmentBase {
         const draggedNodeRects = currentNodes.map((x) => {
             return this.fMediator.send(new GetElementRectInFlowRequest(x.hostElement));
         });
-        this.draggedNodeRect = RectExtensions.union(draggedNodeRects);
+        this.draggedNodeRect = RectExtensions.union(draggedNodeRects) || RectExtensions.initialize();
         const allNodesExcludeCurrents = allNodes.filter((x) => {
             return !currentNodes.includes(x);
         });
@@ -6462,7 +7554,8 @@ class FMinimapFlowDirective {
         return this.ensureMinimumSize(normalizedRect);
     }
     getNodesRect() {
-        return RectExtensions.elementTransform(this.fMediator.send(new GetNodesRectRequest()), this.flowHost);
+        const rect = this.fMediator.send(new GetNodesRectRequest()) || RectExtensions.initialize(0, 0, 0, 0);
+        return RectExtensions.elementTransform(rect, this.flowHost);
     }
     getMinimapRect() {
         return RectExtensions.elementTransform(RectExtensions.fromElement(this.hostElement), this.flowHost);
@@ -6504,7 +7597,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 class FMinimapCanvasDirective {
     elementReference;
-    fMediator;
     fComponentsStore;
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -6515,9 +7607,8 @@ class FMinimapCanvasDirective {
     get flowScale() {
         return this.fComponentsStore.transform.scale;
     }
-    constructor(elementReference, fMediator, fComponentsStore) {
+    constructor(elementReference, fComponentsStore) {
         this.elementReference = elementReference;
-        this.fMediator = fMediator;
         this.fComponentsStore = fComponentsStore;
     }
     redraw() {
@@ -6534,7 +7625,7 @@ class FMinimapCanvasDirective {
     }
     configureNodeElement(element, node) {
         this.setElementAttributes(element, this.getNodeRect(node));
-        this.applyClassList(element, node);
+        this.applyClassList(element, node, node instanceof FNodeDirective);
     }
     getNodeRect(node) {
         const nodeRectInFlow = RectExtensions.elementTransform(RectExtensions.fromElement(node.hostElement), this.flowHost);
@@ -6546,13 +7637,13 @@ class FMinimapCanvasDirective {
         element.setAttribute('width', rect.width.toString());
         element.setAttribute('height', rect.height.toString());
     }
-    applyClassList(element, node) {
-        element.classList.add('f-component', 'f-minimap-node');
+    applyClassList(element, node, isNode) {
+        element.classList.add('f-component', isNode ? 'f-minimap-node' : 'f-minimap-group');
         if (node.isSelected()) {
             element.classList.add('f-selected');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FMinimapCanvasDirective, deps: [{ token: i0.ElementRef }, { token: FFlowMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FMinimapCanvasDirective, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FMinimapCanvasDirective, selector: "g[fMinimapCanvas]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FMinimapCanvasDirective, decorators: [{
@@ -6560,7 +7651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{
                     selector: 'g[fMinimapCanvas]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FFlowMediator }, { type: FComponentsStore }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }] });
 
 class FMinimapViewDirective {
     elementReference;
@@ -6664,7 +7755,6 @@ const F_MINIMAP_PROVIDERS = [
     FMinimapFlowDirective,
 ];
 
-const F_SELECTION_AREA = new InjectionToken('F_SELECTION_AREA');
 class FSelectionAreaBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FSelectionAreaBase, ngImport: i0 });
@@ -6675,17 +7765,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 class FSelectionAreaComponent extends FSelectionAreaBase {
     elementReference;
-    fDraggableDataContext;
+    fMediator;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, fDraggableDataContext) {
+    constructor(elementReference, fMediator) {
         super();
         this.elementReference = elementReference;
-        this.fDraggableDataContext = fDraggableDataContext;
+        this.fMediator = fMediator;
     }
     ngOnInit() {
-        this.fDraggableDataContext.fSelectionArea = this;
         this.hostElement.style.display = 'none';
     }
     hide() {
@@ -6696,14 +7785,20 @@ class FSelectionAreaComponent extends FSelectionAreaBase {
     }
     draw(object) {
         const style = this.hostElement.style;
-        style.left = object.left + 'px';
-        style.top = object.top + 'px';
+        style.left = object.x + 'px';
+        style.top = object.y + 'px';
         style.width = object.width + 'px';
         style.height = object.height + 'px';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Component });
+    onPointerDown(event) {
+        this.fMediator.send(new SelectionAreaPreparationRequest(event, this));
+    }
+    onPointerUp(event) {
+        this.fMediator.send(new SelectionAreaFinalizeRequest(event));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
-            { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
+            { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
@@ -6711,9 +7806,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{ selector: "f-selection-area", template: ``, host: {
                         'class': 'f-selection-area f-component'
                     }, providers: [
-                        { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
+                        { provide: F_DRAG_AND_DROP_PLUGIN, useExisting: FSelectionAreaComponent },
                     ], styles: [":host{position:absolute}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FFlowMediator }] });
 
 const F_SELECTION_AREA_PROVIDERS = [
     FSelectionAreaComponent
@@ -6746,24 +7841,32 @@ class FFlowComponent extends FFlowBase {
     }
     ngAfterContentInit() {
         this.subscription$.add(this.subscribeOnElementsChanges());
+        this.subscription$.add(this.subscribeOnComponentsCountChanges());
+    }
+    subscribeOnComponentsCountChanges() {
+        return this.fComponentsStore.componentsCount$.pipe(startWith(null), debounceTime(20)).subscribe(() => {
+            this.fMediator.send(new SortItemLayersRequest());
+        });
     }
     subscribeOnElementsChanges() {
-        return this.fComponentsStore.changes.pipe(startWith(null), debounceTime(20)).subscribe(() => {
+        return this.fComponentsStore.componentsData$.pipe(startWith(null), debounceTime(20)).subscribe(() => {
             this.fMediator.send(new RedrawConnectionsRequest());
             if (!this.isLoaded) {
                 this.isLoaded = true;
-                this.fLoaded.emit();
+                setTimeout(() => {
+                    this.fLoaded.emit();
+                });
             }
         });
     }
     redraw() {
-        this.fComponentsStore.changes.next();
+        this.fComponentsStore.componentDataChanged();
     }
     reset() {
         this.isLoaded = false;
     }
-    getNodesRect() {
-        return this.fMediator.send(new GetExternalNodesRectRequest());
+    getAllNodesRect() {
+        return this.fMediator.send(new GetScaledNodeRectsWithFlowPositionRequest());
     }
     getSelection() {
         return this.fMediator.send(new GetSelectionRequest());
@@ -6974,7 +8077,7 @@ const F_ZOOM_PROVIDERS = [
 
 class FFlowModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: FFlowModule, declarations: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective], imports: [CommonModule], exports: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: FFlowModule, declarations: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective], imports: [CommonModule], exports: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FMinimapComponent, FMinimapCanvasDirective, FMinimapViewDirective, FMinimapFlowDirective, FGroupDirective, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FFlowModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FFlowModule, decorators: [{
@@ -7018,5 +8121,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CANVAS_MOVE_FINALIZE_PROVIDERS, CANVAS_MOVE_PREPARATION_PROVIDERS, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS, CREATE_CONNECTION_FINALIZE_PROVIDERS, CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS, CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS, CREATE_CONNECTION_PREPARATION_PROVIDERS, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMoveFinalizeValidator, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CanvasMovePreparationValidator, ClearSelectionExecution, ClearSelectionRequest, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionDragHandlerExecution, CreateConnectionDragHandlerRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFinalizeValidator, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionFromOutputPreparationValidator, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateConnectionPreparationValidator, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFConnectorShape, EFDraggableType, EFMarkerType, EFResizeHandleType, EXTERNAL_ITEM_FINALIZE_PROVIDERS, EXTERNAL_ITEM_PREPARATION_PROVIDERS, EXTERNAL_ITEM_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, FConnectorShapeExtensions, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExecutionRegister, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowMediator, FFlowModule, 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, FStraightPathBuilder, FTransformStore, FValidatorRegister, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_PROVIDERS, F_DRAGGABLE, F_DRAGGABLE_PROVIDERS, F_DRAG_AND_DROP_PLUGIN, F_DRAG_HANDLE, F_EXTERNAL_ITEM, 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, F_SELECTION_AREA_PROVIDERS, F_ZOOM, F_ZOOM_PROVIDERS, GET_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS, GET_INPUT_UNDER_POINTER_PROVIDERS, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeConnectedOutputByOutletValidator, GetCanBeSelectedItemsExecution, GetConnectionHandler, GetConnectionLineExecution, GetConnectionLineRequest, GetElementRectInFlowExecution, GetElementRectInFlowRequest, GetExternalNodesRectExecution, GetExternalNodesRectRequest, GetIncomingConnectionsHandler, GetInputRectInFlowExecution, GetInputRectInFlowRequest, GetInputRectInFlowResponse, GetInputUnderPointerExecution, GetInputUnderPointerRequest, GetInputUnderPointerValidator, GetNodesRectExecution, GetNodesRectRequest, GetOutgoingConnectionsHandler, GetOutputRectInFlowExecution, GetOutputRectInFlowRequest, GetOutputRectInFlowResponse, GetPositionInFlowExecution, GetPositionInFlowRequest, GetSelectionExecution, GetSelectionRequest, IntersectionFinder, IsConnectionUnderNodeExecution, LineElement, LineService, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MOUSE_EVENT_IGNORE_TIME, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragFinalizeValidator, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDragPreparationValidator, 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, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizeFinalizeValidator, NodeResizePreparationExecution, NodeResizePreparationRequest, NodeResizePreparationValidator, Pipeline, REASSIGN_CONNECTION_FINALIZE_PROVIDERS, REASSIGN_CONNECTION_PREPARATION_PROVIDERS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionFinalizeValidator, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, ReassignConnectionPreparationValidator, RedrawConnectionsExecution, RedrawConnectionsRequest, RoundedRect, SELECTION_AREA_FINALIZE_PROVIDERS, SELECTION_AREA_PREPARATION_PROVIDERS, SELECTION_AREA_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaFinalizeValidator, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SelectionAreaPreparationValidator, SingleSelectExecution, SingleSelectRequest, SingleSelectValidator, SubscribeOnTransformChangesExecution, SubscribeOnTransformChangesRequest, UpdateItemLayerExecution, UpdateItemLayerRequest, castToEnum, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, getValueFromDataAttr, isElementWithClass, isExternalItem, isNode, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility };
+export { ApplyChildResizeRestrictionsExecution, ApplyChildResizeRestrictionsRequest, ApplyParentResizeRestrictionsExecution, ApplyParentResizeRestrictionsRequest, CANVAS_MOVE_FINALIZE_PROVIDERS, CANVAS_MOVE_PREPARATION_PROVIDERS, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS, CREATE_CONNECTION_FINALIZE_PROVIDERS, CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS, CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS, CREATE_CONNECTION_PREPARATION_PROVIDERS, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedPositionExecution, CalculateChangedPositionRequest, CalculateChangedSizeExecution, CalculateChangedSizeRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMoveFinalizeValidator, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CanvasMovePreparationValidator, ClearSelectionExecution, ClearSelectionRequest, ConnectionBaseDragHandler, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, ConvertComputedToPixelsExecution, ConvertComputedToPixelsRequest, CreateConnectionDragHandler, CreateConnectionDragHandlerExecution, CreateConnectionDragHandlerRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFinalizeValidator, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionFromOutputPreparationValidator, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateConnectionPreparationValidator, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, DRAG_AND_DROP_COMMON_PROVIDERS, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFConnectorShape, 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, FConnectorShapeExtensions, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExecutionRegister, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowMediator, 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, FStraightPathBuilder, FTransformStore, FValidatorRegister, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_PROVIDERS, F_DRAGGABLE, F_DRAGGABLE_PROVIDERS, F_DRAG_AND_DROP_PLUGIN, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_RESIZE_HANDLE, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_ZOOM, F_ZOOM_PROVIDERS, GET_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS, GET_INPUT_UNDER_POINTER_PROVIDERS, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeConnectedOutputByOutletValidator, GetCanBeSelectedItemsExecution, GetConnectionLineExecution, GetConnectionLineRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRectInFlowExecution, GetElementRectInFlowRequest, GetInputRectInFlowExecution, GetInputRectInFlowRequest, GetInputRectInFlowResponse, GetInputUnderPointerExecution, GetInputUnderPointerRequest, GetInputUnderPointerValidator, GetNodeMoveRestrictionsExecution, GetNodeMoveRestrictionsRequest, GetNodePaddingExecution, GetNodePaddingRequest, GetNodeResizeRestrictionsExecution, GetNodeResizeRestrictionsRequest, GetNodesRectExecution, GetNodesRectRequest, GetNormalizedChildrenNodesRectExecution, GetNormalizedChildrenNodesRectRequest, GetNormalizedNodeRectExecution, GetNormalizedNodeRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetOutputRectInFlowExecution, GetOutputRectInFlowRequest, GetOutputRectInFlowResponse, GetParentNodesExecution, GetParentNodesRequest, GetPositionInFlowExecution, GetPositionInFlowRequest, GetScaledNodeRectsWithFlowPositionExecution, GetScaledNodeRectsWithFlowPositionRequest, GetSelectionExecution, GetSelectionRequest, IntersectionFinder, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, LineElement, LineService, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MOUSE_EVENT_IGNORE_TIME, 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, Pipeline, PutInputConnectionHandlersToArrayExecution, PutInputConnectionHandlersToArrayRequest, PutOutputConnectionHandlersToArrayExecution, PutOutputConnectionHandlersToArrayRequest, REASSIGN_CONNECTION_FINALIZE_PROVIDERS, REASSIGN_CONNECTION_PREPARATION_PROVIDERS, RESIZE_DIRECTIONS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionFinalizeValidator, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, ReassignConnectionPreparationValidator, RedrawConnectionsExecution, RedrawConnectionsRequest, RoundedRect, SELECTION_AREA_FINALIZE_PROVIDERS, SELECTION_AREA_PREPARATION_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaFinalizeValidator, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SelectionAreaPreparationValidator, SingleSelectExecution, SingleSelectRequest, SingleSelectValidator, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SubscribeOnTransformChangesExecution, SubscribeOnTransformChangesRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, castToEnum, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, getValueFromDataAttr, isElementWithClass, isExternalItem, isGroup, isNode, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility };
 //# sourceMappingURL=foblex-flow.mjs.map