@foblex/flow 12.2.0 → 12.2.2

package/fesm2022/foblex-flow.mjs

@@ -8,7 +8,7 @@ import { __decorate } from 'tslib';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
-let uniqueId$9 = 0;
+let uniqueId$a = 0;
 class FCellPatternComponent {
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -16,7 +16,7 @@ class FCellPatternComponent {
     constructor(elementReference, changeDetectorRef) {
         this.elementReference = elementReference;
         this.changeDetectorRef = changeDetectorRef;
-        this.id = `f-pattern-${uniqueId$9++}`;
+        this.id = `f-pattern-${uniqueId$a++}`;
         this.verticalLineColor = 'rgba(0,0,0,0.1)';
         this.horizontalLineColor = 'rgba(0,0,0,0.1)';
         this.transform = TransformModelExtensions.default();
@@ -107,6 +107,7 @@ class FComponentsStore {
     constructor() {
         this.changes = new Subject();
         this.fNodes = [];
+        this.fGroups = [];
         this.fConnections = [];
         this.fOutputs = [];
         this.fInputs = [];
@@ -161,6 +162,14 @@ class FComponentsStore {
         this.fConnections = this.fConnections.filter(c => c !== connection);
         this.changes.next();
     }
+    addGroup(group) {
+        this.fGroups.push(group);
+        this.changes.next();
+    }
+    removeGroup(group) {
+        this.fGroups = this.fGroups.filter(n => n !== group);
+        this.changes.next();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FComponentsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FComponentsStore }); }
 }
@@ -168,7 +177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             type: Injectable
         }] });
 
-let uniqueId$8 = 0;
+let uniqueId$9 = 0;
 class FBackgroundComponent extends FBackgroundBase {
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -186,7 +195,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);
@@ -383,7 +392,7 @@ function castToConnectableSide(type) {
     return result;
 }
 
-let uniqueId$7 = 0;
+let uniqueId$8 = 0;
 class FNodeInputDirective extends FNodeInputBase {
     get disabled() {
         return this.isDisabled;
@@ -409,7 +418,7 @@ class FNodeInputDirective extends FNodeInputBase {
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-input-${uniqueId$7++}`;
+        this.id = `f-node-input-${uniqueId$8++}`;
         this.multiple = true;
         this.isDisabled = false;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -488,7 +497,7 @@ function isNodeOutlet(element) {
     return !!element.closest('[fNodeOutlet]');
 }
 
-let uniqueId$6 = 0;
+let uniqueId$7 = 0;
 class FNodeOutletDirective extends FNodeOutletBase {
     get disabled() {
         return this.isDisabled;
@@ -508,7 +517,7 @@ class FNodeOutletDirective extends FNodeOutletBase {
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-outlet-${uniqueId$6++}`;
+        this.id = `f-node-outlet-${uniqueId$7++}`;
         this.isDisabled = false;
         this.fConnectableSide = EFConnectableSide.AUTO;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -571,7 +580,7 @@ function isNodeOutput(element) {
     return !!element.closest('[fNodeOutput]');
 }
 
-let uniqueId$5 = 0;
+let uniqueId$6 = 0;
 class FNodeOutputDirective extends FNodeOutputBase {
     get disabled() {
         return this.isDisabled;
@@ -597,7 +606,7 @@ class FNodeOutputDirective extends FNodeOutputBase {
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-output-${uniqueId$5++}`;
+        this.id = `f-node-output-${uniqueId$6++}`;
         this.multiple = false;
         this.isDisabled = false;
         this._fConnectableSide = EFConnectableSide.AUTO;
@@ -1232,6 +1241,7 @@ function mixinChangeConnectionSelection(base) {
         }
         constructor(...args) {
             super(...args);
+            this.fSelectionDisabled = false;
         }
     };
 }
@@ -1406,7 +1416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 }]
         }] });
 
-let uniqueId$4 = 0;
+let uniqueId$5 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
     set fBehavior(value) {
         this._behavior = castToConnectionBehavior(value);
@@ -1426,7 +1436,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fConnectionId = `f-connection-for-create-${uniqueId$4++}`;
+        this.fConnectionId = `f-connection-for-create-${uniqueId$5++}`;
         this.fText = '';
         this.fStartColor = 'black';
         this.fEndColor = 'black';
@@ -1489,7 +1499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
-let uniqueId$3 = 0;
+let uniqueId$4 = 0;
 class FConnectionComponent extends FConnectionBase {
     set fBehavior(value) {
         this._behavior = castToConnectionBehavior(value);
@@ -1509,7 +1519,7 @@ class FConnectionComponent extends FConnectionBase {
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fConnectionId = `f-connection-${uniqueId$3++}`;
+        this.fConnectionId = `f-connection-${uniqueId$4++}`;
         this.fText = '';
         this.fStartColor = 'black';
         this.fEndColor = 'black';
@@ -1525,7 +1535,7 @@ class FConnectionComponent extends FConnectionBase {
         this.fComponentsStore.removeConnection(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FConnectionComponent, selector: "f-connection", inputs: { fConnectionId: "fConnectionId", fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", 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: "fMarkers", predicate: F_MARKER, descendants: true }, { 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    <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: 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: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FConnectionComponent, selector: "f-connection", inputs: { fConnectionId: "fConnectionId", fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", 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: "fMarkers", predicate: F_MARKER, descendants: true }, { 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    <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\">\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: 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: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
@@ -1534,7 +1544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         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    <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"] }]
+                    }, 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    <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\">\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: { fConnectionId: [{
                 type: Input
             }], fText: [{
@@ -1698,7 +1708,7 @@ class FResizeObserver extends Observable {
     }
 }
 
-let uniqueId$2 = 0;
+let uniqueId$3 = 0;
 class FNodeDirective extends FNodeBase {
     set position(value) {
         this._position = PointExtensions.castToPoint(value);
@@ -1716,7 +1726,7 @@ class FNodeDirective extends FNodeBase {
         this.renderer = renderer;
         this.fComponentsStore = fComponentsStore;
         this.subscriptions$ = new Subscription();
-        this.fNodeId = `f-node-${uniqueId$2++}`;
+        this.fNodeId = `f-node-${uniqueId$3++}`;
         this.positionChange = new EventEmitter();
         this.fDraggingDisabled = false;
         this.fSelectionDisabled = false;
@@ -2043,6 +2053,9 @@ class FDraggableDataContext {
         this.onPointerDownPosition = new Point(0, 0);
         this.isSelectedChanged = false;
     }
+    markSelectionAsChanged() {
+        this.isSelectedChanged = true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FDraggableDataContext }); }
 }
@@ -2167,9 +2180,10 @@ class CreateConnectionDragHandler {
 }
 
 class FCreateConnectionEvent {
-    constructor(fOutputId, fInputId) {
+    constructor(fOutputId, fInputId, fDropPosition) {
         this.fOutputId = fOutputId;
         this.fInputId = fInputId;
+        this.fDropPosition = fDropPosition;
     }
 }
 
@@ -2304,23 +2318,21 @@ class CreateConnectionOnPointerUp {
         if (isCreateConnection) {
             const handler = this.fDraggableDataContext.draggableItems[0];
             const inputsUnderPointer = this.findInputsUnderPointerHandler.handle(new FindInputsUnderPointerRequest(event, handler));
-            if (inputsUnderPointer.length > 0) {
-                let output = this.fComponentsStore.fOutputs.find((x) => x.id === handler.connection.fOutputId);
-                if (!output) {
-                    output = this.fComponentsStore.fOutlets.find((x) => x.id === handler.connection.fOutputId);
-                }
+            let output = this.fComponentsStore.fOutputs.find((x) => x.id === handler.connection.fOutputId);
+            if (!output) {
+                output = this.fComponentsStore.fOutlets.find((x) => x.id === handler.connection.fOutputId);
+            }
+            if (!output) {
+                throw OutputNotFound(handler.connection.fOutputId);
+            }
+            const isOutlet = isNodeOutlet(output.hostElement);
+            if (isOutlet) {
+                output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(output);
                 if (!output) {
-                    throw OutputNotFound(handler.connection.fOutputId);
-                }
-                const isOutlet = isNodeOutlet(output.hostElement);
-                if (isOutlet) {
-                    output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(output);
-                    if (!output) {
-                        throw RequiredOutput();
-                    }
+                    throw RequiredOutput();
                 }
-                this.fComponentsStore.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(output.id, inputsUnderPointer[0]?.id));
             }
+            this.fComponentsStore.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(output.id, inputsUnderPointer[0]?.id, event.getPosition()));
             handler.complete();
         }
     }
@@ -2483,12 +2495,11 @@ class ReassignConnectionPrepareDragSequence {
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, fMediator, updateConnectionLayerHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.getConnectionHandler = getConnectionHandler;
         this.fMediator = fMediator;
-        this.updateConnectionLayerHandler = updateConnectionLayerHandler;
     }
     handle(event) {
         const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
@@ -2505,7 +2516,7 @@ class ReassignConnectionPrepareDragSequence {
             }
         }
         if (connectionToReassign && !this.fDraggableDataContext.draggableItems.length) {
-            this.updateConnectionLayerHandler.handle(connectionToReassign);
+            this.fMediator.send(new UpdateItemLayerRequest(connectionToReassign, this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement));
             this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
             this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(this.transform.scale);
             this.fDraggableDataContext.draggableItems = [
@@ -2513,12 +2524,12 @@ class ReassignConnectionPrepareDragSequence {
             ];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: FFlowMediator }, { token: UpdateConnectionLayerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ReassignConnectionPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: FFlowMediator }, { type: UpdateConnectionLayerHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: FFlowMediator }] });
 
 const CONNECTIONS_PROVIDERS = [
     FindFirstCanBeConnectedOutputByOutletHandler,
@@ -2612,7 +2623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 }]
         }] });
 
-let uniqueId$1 = 0;
+let uniqueId$2 = 0;
 class FExternalItemDirective extends FExternalItemBase {
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -2621,7 +2632,7 @@ class FExternalItemDirective extends FExternalItemBase {
         super();
         this.elementReference = elementReference;
         this.fExternalItemService = fExternalItemService;
-        this.fExternalItemId = `f-external-item-${uniqueId$1++}`;
+        this.fExternalItemId = `f-external-item-${uniqueId$2++}`;
         this.fDisabled = false;
     }
     ngOnInit() {
@@ -2933,10 +2944,9 @@ class NodePrepareDragSequence {
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
-    constructor(fComponentsStore, fDraggableDataContext, updateNodeLayerHandler, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, fMediator) {
+    constructor(fComponentsStore, fDraggableDataContext, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
-        this.updateNodeLayerHandler = updateNodeLayerHandler;
         this.getOutgoingConnectionsHandler = getOutgoingConnectionsHandler;
         this.getIncomingConnectionsHandler = getIncomingConnectionsHandler;
         this.fMediator = fMediator;
@@ -2951,7 +2961,7 @@ class NodePrepareDragSequence {
                     node.select();
                     this.fDraggableDataContext.isSelectedChanged = true;
                 }
-                this.updateNodeLayerHandler.handle(node);
+                this.fMediator.send(new UpdateItemLayerRequest(node, this.fComponentsStore.fCanvas.fNodesContainer.nativeElement));
                 const itemsToDrag = this.calculateDraggableConnectionsAndNodes();
                 const draggedNodes = itemsToDrag.filter((x) => {
                     return x.type === EFDraggableType.NODE;
@@ -3007,12 +3017,12 @@ class NodePrepareDragSequence {
     getOutputsForNode(node) {
         return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: NodePrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: UpdateNodeLayerHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: NodePrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: NodePrepareDragSequence }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: NodePrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: UpdateNodeLayerHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: FFlowMediator }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: FFlowMediator }] });
 
 const NODE_PROVIDERS = [
     NodeOnPointerUp,
@@ -3169,82 +3179,71 @@ const SELECTION_AREA_PROVIDERS = [
 ];
 
 class SingleSelectOnPointerDown {
-    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, updateConnectionLayerHandler) {
+    constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.getConnectionHandler = getConnectionHandler;
-        this.updateConnectionLayerHandler = updateConnectionLayerHandler;
+        this.fMediator = fMediator;
     }
     handle(event) {
         if (!this.fComponentsStore.fFlow?.hostElement.contains(event.targetElement)) {
             return;
         }
-        const node = this.fComponentsStore.findNode(event.targetElement);
-        const connection = this.getConnectionHandler.handle(event.targetElement);
-        this.deselectAll(node, event);
-        let element;
-        if (this.fDraggableDataContext.selectedItems.length) {
-            element = this.fDraggableDataContext.selectedItems[0];
+        const item = this.getSelectableItem(event);
+        if (item) {
+            this.fMediator.send(new UpdateItemLayerRequest(item, item.hostElement.parentElement));
         }
-        this.resetSelectionIfNotMultiselect(event);
-        if (node) {
-            if (!this.fDraggableDataContext.selectedItems.includes(node) && !node.fSelectionDisabled) {
-                this.fDraggableDataContext.selectedItems.push(node);
-                if (element?.hostElement.dataset['fNodeId'] !== node.hostElement.dataset['fNodeId']) {
-                    this.fDraggableDataContext.isSelectedChanged = true;
-                }
-            }
-            else {
-                const index = this.fDraggableDataContext.selectedItems.indexOf(node);
-                if (index > -1) {
-                    this.fDraggableDataContext.selectedItems.splice(index, 1);
-                }
+        this.isMultiselectEnabled(event) ? this.multiSelect(item) : this.singleSelect(item);
+    }
+    getSelectableItem(event) {
+        return this.fComponentsStore.findNode(event.targetElement) || this.getConnectionHandler.handle(event.targetElement);
+    }
+    isMultiselectEnabled(event) {
+        return MouseEventExtensions.isCommandButton(event.originalEvent) ||
+            MouseEventExtensions.isShiftPressed(event.originalEvent);
+    }
+    singleSelect(item) {
+        if (item) {
+            if (!item.isSelected() && !item.fSelectionDisabled) {
+                this.clearSelection();
+                this.selectItem(item);
             }
         }
-        else if (connection) {
-            this.updateConnectionLayerHandler.handle(connection);
-            if (!this.fDraggableDataContext.selectedItems.includes(connection) && !connection.fSelectionDisabled) {
-                this.fDraggableDataContext.selectedItems.push(connection);
-                if (element?.hostElement.id !== connection.hostElement.id) {
-                    this.fDraggableDataContext.isSelectedChanged = true;
-                }
-            }
-            else {
-                const index = this.fDraggableDataContext.selectedItems.indexOf(connection);
-                if (index > -1) {
-                    this.fDraggableDataContext.selectedItems.splice(index, 1);
-                }
-            }
+        else {
+            this.clearSelection();
         }
-        this.selectIfNotSelected();
     }
-    deselectAll(node, event) {
-        this.fDraggableDataContext.selectedItems.forEach((x) => {
-            if (x !== node || (!isNodeOutlet(event.targetElement) && !isNodeOutput(event.targetElement))) {
-                x.deselect();
-            }
-        });
+    multiSelect(item) {
+        if (item && !item.fSelectionDisabled) {
+            item.isSelected() ? this.deselectItem(item) : this.selectItem(item);
+        }
     }
-    resetSelectionIfNotMultiselect(event) {
-        const isMultiselect = MouseEventExtensions.isCommandButton(event.originalEvent) ||
-            MouseEventExtensions.isShiftPressed(event.originalEvent);
-        if (!isMultiselect) {
-            this.fDraggableDataContext.selectedItems = [];
+    deselectItem(item) {
+        const index = this.fDraggableDataContext.selectedItems.indexOf(item);
+        if (index > -1) {
+            this.fDraggableDataContext.selectedItems.splice(index, 1);
         }
+        item.deselect();
+        this.fDraggableDataContext.markSelectionAsChanged();
+    }
+    selectItem(item) {
+        this.fDraggableDataContext.selectedItems.push(item);
+        item.select();
+        this.fDraggableDataContext.markSelectionAsChanged();
     }
-    selectIfNotSelected() {
+    clearSelection() {
         this.fDraggableDataContext.selectedItems.forEach((x) => {
-            if (!x.isSelected()) {
-                x.select();
-            }
+            x.deselect();
+            this.fDraggableDataContext.markSelectionAsChanged();
         });
+        this.fDraggableDataContext.selectedItems = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: UpdateConnectionLayerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SingleSelectOnPointerDown }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SingleSelectOnPointerDown, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: UpdateConnectionLayerHandler }] });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: FFlowMediator }] });
 
 const SINGLE_SELECT_PROVIDERS = [
     SingleSelectOnPointerDown
@@ -3812,8 +3811,8 @@ let RedrawConnectionsHandler = class RedrawConnectionsHandler {
         output.setConnected(true);
         input.setConnected(true);
         const vector = this.getVector(output, input, connection);
-        connection.setVector(vector.point1, output.fConnectableSide, vector.point2, input.fConnectableSide);
         connection.setMarkers();
+        connection.setVector(vector.point1, output.fConnectableSide, vector.point2, input.fConnectableSide);
         connection.initialize();
     }
     getVector(output, input, connection) {
@@ -3907,6 +3906,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
+class UpdateItemLayerRequest {
+    constructor(item, itemContainer) {
+        this.item = item;
+        this.itemContainer = itemContainer;
+    }
+}
+
+let UpdateItemLayerHandler = class UpdateItemLayerHandler {
+    handle(request) {
+        const elements = Array.from(request.itemContainer.children);
+        const elementsCount = elements.length;
+        const targetIndex = elements.findIndex((x) => x === request.item.hostElement);
+        if (targetIndex !== elementsCount - 1) {
+            const afterElements = elements.splice(targetIndex + 1);
+            afterElements.forEach((x) => {
+                request.itemContainer.removeChild(x);
+                request.itemContainer.insertBefore(x, request.item.hostElement);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UpdateItemLayerHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UpdateItemLayerHandler }); }
+};
+UpdateItemLayerHandler = __decorate([
+    FHandlerRegister(UpdateItemLayerRequest)
+], UpdateItemLayerHandler);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UpdateItemLayerHandler, decorators: [{
+            type: Injectable
+        }] });
+
 class GetConnectionHandler {
     get fConnections() {
         return this.fComponentsStore.fConnections;
@@ -3965,58 +3994,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
-class UpdateNodeLayerHandler {
-    get fNodesContainer() {
-        return this.fComponentsStore.fCanvas?.fNodesContainer?.nativeElement;
-    }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(node) {
-        const elements = Array.from(this.fNodesContainer.children);
-        const elementsCount = elements.length;
-        const targetIndex = elements.findIndex((x) => x === node.hostElement);
-        if (targetIndex !== elementsCount - 1) {
-            const afterElements = elements.splice(targetIndex + 1);
-            afterElements.forEach((x) => {
-                this.fNodesContainer.removeChild(x);
-                this.fNodesContainer.insertBefore(x, node.hostElement);
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UpdateNodeLayerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UpdateNodeLayerHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UpdateNodeLayerHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
-class UpdateConnectionLayerHandler {
-    get fConnectionsContainer() {
-        return this.fComponentsStore.fCanvas?.fConnectionsContainer?.nativeElement;
-    }
-    constructor(fComponentsStore) {
-        this.fComponentsStore = fComponentsStore;
-    }
-    handle(connection) {
-        const elements = Array.from(this.fConnectionsContainer.children);
-        const elementsCount = elements.length;
-        const targetIndex = elements.findIndex((x) => x === connection.hostElement);
-        if (targetIndex !== elementsCount - 1) {
-            const afterElements = elements.splice(targetIndex + 1);
-            afterElements.forEach((x) => {
-                this.fConnectionsContainer.removeChild(x);
-                this.fConnectionsContainer.insertBefore(x, connection.hostElement);
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UpdateConnectionLayerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UpdateConnectionLayerHandler }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: UpdateConnectionLayerHandler, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: FComponentsStore }] });
-
 const COMMON_PROVIDERS = [
     ClearSelectionHandler,
     GetConnectionVectorHandler,
@@ -4027,12 +4004,14 @@ const COMMON_PROVIDERS = [
     RedrawConnectionsHandler,
     SelectHandler,
     SelectAllHandler,
+    UpdateItemLayerHandler,
     GetConnectionHandler,
     GetInputRectInFlowHandler,
     GetIncomingConnectionsHandler,
     GetOutgoingConnectionsHandler,
-    UpdateConnectionLayerHandler,
-    UpdateNodeLayerHandler,
+    // UpdateConnectionLayerHandler,
+    //
+    // UpdateNodeLayerHandler,
 ];
 
 class FCanvasComponent extends FCanvasBase {
@@ -4423,7 +4402,7 @@ const F_FLOW = new InjectionToken('F_FLOW');
 class FFlowBase {
 }
 
-let uniqueId = 0;
+let uniqueId$1 = 0;
 class FFlowComponent extends FFlowBase {
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -4434,7 +4413,7 @@ class FFlowComponent extends FFlowBase {
         this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
         this.subscription$ = new Subscription();
-        this.fFlowId = `f-flow-${uniqueId++}`;
+        this.fFlowId = `f-flow-${uniqueId$1++}`;
         this.fLoaded = new EventEmitter();
         this.isLoaded = false;
     }
@@ -4518,6 +4497,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Output
             }] } });
 
+const F_GROUP = new InjectionToken('F_GROUP');
+class FGroupBase {
+    isContains(element) {
+        return this.hostElement.contains(element);
+    }
+    redraw() {
+        this.setStyle('transform', 'translate(' + this.position.x + 'px,' + this.position.y + 'px)');
+        this.setStyle('width', `${this.size.width}px`);
+        this.setStyle('height', `${this.size.height}px`);
+    }
+}
+
+let uniqueId = 0;
+class FGroupDirective extends FGroupBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, renderer, fComponentsStore) {
+        super();
+        this.elementReference = elementReference;
+        this.renderer = renderer;
+        this.fComponentsStore = fComponentsStore;
+        this.subscriptions$ = new Subscription();
+        this.fGroupId = `f-group-${uniqueId++}`;
+    }
+    ngOnInit() {
+        this.setStyle('position', 'absolute');
+        this.setStyle('transform-origin', '0 0');
+        this.setStyle('user-select', 'none');
+        this.setStyle('pointer-events', 'all');
+        this.setStyle('left', '0');
+        this.setStyle('top', '0');
+        super.redraw();
+        this.fComponentsStore.addGroup(this);
+    }
+    setStyle(styleName, value) {
+        this.renderer.setStyle(this.hostElement, styleName, value);
+    }
+    ngOnDestroy() {
+        this.fComponentsStore.removeGroup(this);
+        this.subscriptions$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FGroupDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: FGroupDirective, selector: "[fGroup]", inputs: { fGroupId: "fGroupId" }, host: { properties: { "attr.data-f-group-id": "fGroupId" }, classAttribute: "f-group f-component" }, providers: [
+            { provide: F_GROUP, useExisting: FGroupDirective }
+        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fGroup]",
+                    exportAs: "fComponent",
+                    host: {
+                        '[attr.data-f-group-id]': 'fGroupId',
+                        class: "f-group f-component",
+                    },
+                    providers: [
+                        { provide: F_GROUP, useExisting: FGroupDirective }
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FComponentsStore }], propDecorators: { fGroupId: [{
+                type: Input
+            }] } });
+
+function isGroup(element) {
+    return !!element.closest('[f-group]');
+}
+
 class FFlowModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: FFlowModule, declarations: [FConnectionDragHandleComponent,
@@ -4533,6 +4580,7 @@ class FFlowModule {
             FCellPatternComponent,
             FCanvasComponent,
             FNodeDirective,
+            FGroupDirective,
             FDragHandleDirective,
             FConnectionComponent,
             FConnectionForCreateComponent,
@@ -4582,6 +4630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         FCellPatternComponent,
                         FCanvasComponent,
                         FNodeDirective,
+                        FGroupDirective,
                         FDragHandleDirective,
                         FConnectionComponent,
                         FConnectionForCreateComponent,
@@ -4627,5 +4676,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CanvasDragHandler, CanvasOnPointerUp, CanvasPrepareDragSequence, ClearSelectionHandler, ClearSelectionRequest, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionOnPointerUp, CreateConnectionPrepareDragSequence, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFDraggableType, EFMarkerType, EXTERNAL_ITEM_PROVIDERS, ExternalItemDragHandler, ExternalItemOnPointerUp, ExternalItemPrepareDragSequence, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCellPatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowMediator, FFlowModule, FHandlerRegister, FLOW, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FResizeObserver, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FStraightPathBuilder, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_PATTERN, F_CANVAS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_IDENTIFIERS, F_DRAGGABLE, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_FLOW, F_LINE_ALIGNMENT, F_MARKER, F_NODE, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_SELECTED_CLASS, F_SELECTION_AREA, F_ZOOM, FindFirstCanBeConnectedOutputByOutletHandler, FindInputsUnderPointerHandler, FindInputsUnderPointerRequest, FirstNotConnectedInputOfNodeUnderPointerHandler, GetCanBeSelectedItemsHandler, GetConnectionHandler, GetConnectionVectorHandler, GetConnectionVectorRequest, GetElementRectInFlowHandler, GetElementRectInFlowRequest, GetIncomingConnectionsHandler, GetInputRectInFlowHandler, GetInputRectInFlowRequest, GetInputRectInFlowResponse, GetNodesRectHandler, GetNodesRectRequest, GetOutgoingConnectionsHandler, GetOutputRectInFlowHandler, GetOutputRectInFlowRequest, GetOutputRectInFlowResponse, GetSelectionHandler, GetSelectionRequest, IsConnectionUnderNodeHandler, LineElement, LineService, MOUSE_EVENT_IGNORE_TIME, NODE_PROVIDERS, NearestCoordinateFinder, NodeDragHandler, NodeOnPointerUp, NodePrepareDragSequence, ReassignConnectionDragHandler, ReassignConnectionOnPointerUp, ReassignConnectionPrepareDragSequence, RedrawConnectionsHandler, RedrawConnectionsRequest, SELECTION_AREA_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllHandler, SelectAllRequest, SelectHandler, SelectRequest, SelectionAreaDragHandle, SelectionAreaOnPointerUp, SelectionAreaPrepareDragSequence, SingleSelectOnPointerDown, UpdateConnectionLayerHandler, UpdateNodeLayerHandler, castToConnectableSide, castToConnectionBehavior, castToConnectionType, getExternalItem, getFlowUid, isExternalItem, isNode, isNodeDragHandle, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility };
+export { CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CanvasDragHandler, CanvasOnPointerUp, CanvasPrepareDragSequence, ClearSelectionHandler, ClearSelectionRequest, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionOnPointerUp, CreateConnectionPrepareDragSequence, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFDraggableType, EFMarkerType, EXTERNAL_ITEM_PROVIDERS, ExternalItemDragHandler, ExternalItemOnPointerUp, ExternalItemPrepareDragSequence, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCellPatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowMediator, FFlowModule, FGroupBase, FGroupDirective, FHandlerRegister, FLOW, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FResizeObserver, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FStraightPathBuilder, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_PATTERN, F_CANVAS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_IDENTIFIERS, F_DRAGGABLE, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_FLOW, F_GROUP, F_LINE_ALIGNMENT, F_MARKER, F_NODE, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_SELECTED_CLASS, F_SELECTION_AREA, F_ZOOM, FindFirstCanBeConnectedOutputByOutletHandler, FindInputsUnderPointerHandler, FindInputsUnderPointerRequest, FirstNotConnectedInputOfNodeUnderPointerHandler, GetCanBeSelectedItemsHandler, GetConnectionHandler, GetConnectionVectorHandler, GetConnectionVectorRequest, GetElementRectInFlowHandler, GetElementRectInFlowRequest, GetIncomingConnectionsHandler, GetInputRectInFlowHandler, GetInputRectInFlowRequest, GetInputRectInFlowResponse, GetNodesRectHandler, GetNodesRectRequest, GetOutgoingConnectionsHandler, GetOutputRectInFlowHandler, GetOutputRectInFlowRequest, GetOutputRectInFlowResponse, GetSelectionHandler, GetSelectionRequest, IsConnectionUnderNodeHandler, LineElement, LineService, MOUSE_EVENT_IGNORE_TIME, NODE_PROVIDERS, NearestCoordinateFinder, NodeDragHandler, NodeOnPointerUp, NodePrepareDragSequence, ReassignConnectionDragHandler, ReassignConnectionOnPointerUp, ReassignConnectionPrepareDragSequence, RedrawConnectionsHandler, RedrawConnectionsRequest, SELECTION_AREA_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllHandler, SelectAllRequest, SelectHandler, SelectRequest, SelectionAreaDragHandle, SelectionAreaOnPointerUp, SelectionAreaPrepareDragSequence, SingleSelectOnPointerDown, UpdateItemLayerHandler, UpdateItemLayerRequest, castToConnectableSide, castToConnectionBehavior, castToConnectionType, getExternalItem, getFlowUid, isExternalItem, isGroup, isNode, isNodeDragHandle, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility };
 //# sourceMappingURL=foblex-flow.mjs.map