@foblex/flow 12.2.0 → 12.2.3

package/fesm2022/foblex-flow.mjs

@@ -1,96 +1,218 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, ChangeDetectionStrategy, Input, Directive, Injectable, ContentChild, Inject, ViewChild, Optional, ContentChildren, SkipSelf, EventEmitter, Output, NgModule } from '@angular/core';
-import { TransformModelExtensions, DomElementExtensions, PointExtensions, RectExtensions, BooleanExtensions, sanitizeElementId, Point, GuidExtensions, VectorExtensions, EventExtensions, mixinChangePosition, mixinFitToParent, mixinOneToOneCentering, mixinChangeZoom, MouseEventExtensions, IMouseEvent, ITouchDownEvent, ITouchMoveEvent, ITouchUpEvent, SizeExtensions } from '@foblex/core';
-import { Subject, Observable, Subscription, startWith, debounceTime } from 'rxjs';
+import { TransformModelExtensions, PointExtensions, SizeExtensions, DomElementExtensions, RectExtensions, BooleanExtensions, sanitizeElementId, Point, VectorExtensions, EventExtensions, mixinChangePosition, mixinFitToParent, mixinOneToOneCentering, mixinChangeZoom, MouseEventExtensions, IMouseEvent, ITouchDownEvent, ITouchMoveEvent, ITouchUpEvent } from '@foblex/core';
+import { Subscription, Subject, startWith, Observable, merge, debounceTime } from 'rxjs';
 import * as i3 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { __decorate } from 'tslib';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
-let uniqueId$9 = 0;
-class FCellPatternComponent {
+let uniqueId$b = 0;
+class FRectPatternComponent {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, changeDetectorRef) {
+    set vColor(value) {
+        this._vColor = value;
+        this._stateChanges.next();
+    }
+    set hColor(value) {
+        this._vColor = value;
+        this._stateChanges.next();
+    }
+    set vSize(value) {
+        this._vSize = value;
+        this._stateChanges.next();
+    }
+    set hSize(value) {
+        this._hSize = value;
+        this._stateChanges.next();
+    }
+    constructor(elementReference) {
         this.elementReference = elementReference;
-        this.changeDetectorRef = changeDetectorRef;
-        this.id = `f-pattern-${uniqueId$9++}`;
-        this.verticalLineColor = 'rgba(0,0,0,0.1)';
-        this.horizontalLineColor = 'rgba(0,0,0,0.1)';
-        this.transform = TransformModelExtensions.default();
-        this.x = 0;
-        this.y = 0;
-        this.defaultCellSize = 20;
-        this.cellSize = this.defaultCellSize;
+        this._subscription$ = new Subscription();
+        this._stateChanges = new Subject();
+        this.id = `f-pattern-${uniqueId$b++}`;
+        this._vColor = 'rgba(0,0,0,0.1)';
+        this._hColor = 'rgba(0,0,0,0.1)';
+        this._vSize = 20;
+        this._hSize = 20;
+        this._transform = TransformModelExtensions.default();
+        this._position = PointExtensions.initialize();
+        this._size = SizeExtensions.initialize(this._hSize, this._vSize);
+        this.createPattern();
+    }
+    createPattern() {
+        this._pattern = DomElementExtensions.createSvgElement('pattern');
+        this._pattern.setAttribute('patternUnits', 'userSpaceOnUse');
+        this.hostElement.appendChild(this._pattern);
+        this._vLine = DomElementExtensions.createSvgElement('line');
+        this._pattern.appendChild(this._vLine);
+        this._hLine = DomElementExtensions.createSvgElement('line');
+        this._pattern.appendChild(this._hLine);
     }
     ngOnInit() {
-        this.createPatternDom();
-        this.redraw();
+        this._subscription$.add(this.subscribeToStateChanges());
     }
-    createPatternDom() {
-        this.pattern = DomElementExtensions.createSvgElement('pattern');
-        this.pattern.setAttribute('patternUnits', 'userSpaceOnUse');
-        this.hostElement.appendChild(this.pattern);
-        this.horizontalLine = DomElementExtensions.createSvgElement('line');
-        this.horizontalLine.setAttribute('stroke', this.horizontalLineColor);
-        this.pattern.appendChild(this.horizontalLine);
-        this.verticalLine = DomElementExtensions.createSvgElement('line');
-        this.verticalLine.setAttribute('stroke', this.verticalLineColor);
-        this.pattern.appendChild(this.verticalLine);
+    subscribeToStateChanges() {
+        return this._stateChanges.pipe(startWith(null)).subscribe(() => {
+            this.redraw();
+        });
     }
     calculatePattern() {
-        this.x = this.transform.position.x + this.transform.scaledPosition.x;
-        this.y = this.transform.position.y + this.transform.scaledPosition.y;
-        this.cellSize = this.defaultCellSize * this.transform.scale;
+        this._position.x = this._transform.position.x + this._transform.scaledPosition.x;
+        this._position.y = this._transform.position.y + this._transform.scaledPosition.y;
+        this._size = SizeExtensions.initialize(this._hSize * this._transform.scale, this._vSize * this._transform.scale);
     }
     redraw() {
         this.calculatePattern();
         this.redrawPattern();
-        this.redrawHorizontalLine();
-        this.redrawVerticalLine();
-        this.changeDetectorRef.detectChanges();
+        this.redrawLine(this._vLine, this._vColor, this._size.width, 0, this._size.width, this._size.height);
+        this.redrawLine(this._hLine, this._hColor, 0, this._size.height, this._size.width, this._size.height);
     }
     redrawPattern() {
-        this.pattern.setAttribute('x', `${this.x}`);
-        this.pattern.setAttribute('y', `${this.y}`);
-        this.pattern.setAttribute('width', `${this.cellSize}`);
-        this.pattern.setAttribute('height', `${this.cellSize}`);
-    }
-    redrawHorizontalLine() {
-        this.horizontalLine.setAttribute('x1', `0`);
-        this.horizontalLine.setAttribute('x2', `${this.cellSize}`);
-        this.horizontalLine.setAttribute('y1', `${this.cellSize}`);
-        this.horizontalLine.setAttribute('y2', `${this.cellSize}`);
-    }
-    redrawVerticalLine() {
-        this.verticalLine.setAttribute('x1', `${this.cellSize}`);
-        this.verticalLine.setAttribute('x2', `${this.cellSize}`);
-        this.verticalLine.setAttribute('y1', `0`);
-        this.verticalLine.setAttribute('y2', `${this.cellSize}`);
+        this._pattern.setAttribute('x', `${this._position.x}`);
+        this._pattern.setAttribute('y', `${this._position.y}`);
+        this._pattern.setAttribute('width', `${this._size.width}`);
+        this._pattern.setAttribute('height', `${this._size.height}`);
+    }
+    redrawLine(line, color, x1, y1, x2, y2) {
+        line.setAttribute('stroke', `${color}`);
+        line.setAttribute('x1', `${x1}`);
+        line.setAttribute('x2', `${x2}`);
+        line.setAttribute('y1', `${y1}`);
+        line.setAttribute('y2', `${y2}`);
     }
     setTransform(transform) {
-        this.transform = transform;
-        this.redraw();
+        this._transform = transform;
+        this._stateChanges.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FCellPatternComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FCellPatternComponent, selector: "f-cell-pattern", inputs: { id: "id", verticalLineColor: "verticalLineColor", horizontalLineColor: "horizontalLineColor" }, host: { properties: { "attr.id": "id" } }, providers: [
-            { provide: F_BACKGROUND_PATTERN, useExisting: FCellPatternComponent }
-        ], ngImport: i0, template: "<ng-container></ng-container>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    ngOnDestroy() {
+        this._subscription$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FRectPatternComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FRectPatternComponent, selector: "f-rect-pattern", inputs: { id: "id", vColor: "vColor", hColor: "hColor", vSize: "vSize", hSize: "hSize" }, host: { properties: { "attr.id": "id" } }, providers: [
+            { provide: F_BACKGROUND_PATTERN, useExisting: FRectPatternComponent }
+        ], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FCellPatternComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FRectPatternComponent, decorators: [{
             type: Component,
-            args: [{ selector: "f-cell-pattern", host: {
+            args: [{
+                    selector: "f-rect-pattern",
+                    template: ``,
+                    host: {
                         '[attr.id]': 'id'
-                    }, providers: [
-                        { provide: F_BACKGROUND_PATTERN, useExisting: FCellPatternComponent }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container></ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+                    },
+                    providers: [
+                        { provide: F_BACKGROUND_PATTERN, useExisting: FRectPatternComponent }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
+                type: Input
+            }], vColor: [{
+                type: Input
+            }], hColor: [{
+                type: Input
+            }], vSize: [{
+                type: Input
+            }], hSize: [{
+                type: Input
+            }] } });
+
+let uniqueId$a = 0;
+class FCirclePatternComponent {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    set color(value) {
+        this._color = value;
+        this._stateChanges.next();
+    }
+    set radius(value) {
+        this._radius = value;
+        this._stateChanges.next();
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+        this._subscription$ = new Subscription();
+        this._stateChanges = new Subject();
+        this.id = `f-pattern-${uniqueId$a++}`;
+        this._color = 'rgba(0,0,0,0.1)';
+        this._radius = 20;
+        this._scaledRadius = 20;
+        this._transform = TransformModelExtensions.default();
+        this._position = PointExtensions.initialize();
+        this.createPattern();
+    }
+    createPattern() {
+        this._pattern = DomElementExtensions.createSvgElement('pattern');
+        this._pattern.setAttribute('patternUnits', 'userSpaceOnUse');
+        this.hostElement.appendChild(this._pattern);
+        this._circle = DomElementExtensions.createSvgElement('circle');
+        this._pattern.appendChild(this._circle);
+    }
+    ngOnInit() {
+        this._subscription$.add(this.subscribeToStateChanges());
+    }
+    subscribeToStateChanges() {
+        return this._stateChanges.pipe(startWith(null)).subscribe(() => {
+            this.redraw();
+        });
+    }
+    calculatePattern() {
+        this._position.x = this._transform.position.x + this._transform.scaledPosition.x;
+        this._position.y = this._transform.position.y + this._transform.scaledPosition.y;
+        this._scaledRadius = this._radius * this._transform.scale;
+    }
+    redraw() {
+        this.calculatePattern();
+        this.redrawPattern();
+        this.redrawElement();
+    }
+    redrawPattern() {
+        this._pattern.setAttribute('x', `${this._position.x}`);
+        this._pattern.setAttribute('y', `${this._position.y}`);
+        this._pattern.setAttribute('width', `${this._scaledRadius}`);
+        this._pattern.setAttribute('height', `${this._scaledRadius}`);
+    }
+    redrawElement() {
+        this._circle.setAttribute('fill', this._color);
+        this._circle.setAttribute('cx', `${this._scaledRadius / 2}`);
+        this._circle.setAttribute('cy', `${this._scaledRadius / 2}`);
+        this._circle.setAttribute('r', `${this._scaledRadius / this._radius}`);
+    }
+    setTransform(transform) {
+        this._transform = transform;
+        this._stateChanges.next();
+    }
+    ngOnDestroy() {
+        this._subscription$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FCirclePatternComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FCirclePatternComponent, selector: "f-circle-pattern", inputs: { id: "id", color: "color", radius: "radius" }, host: { properties: { "attr.id": "id" } }, providers: [
+            { provide: F_BACKGROUND_PATTERN, useExisting: FCirclePatternComponent }
+        ], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FCirclePatternComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "f-circle-pattern",
+                    template: ``,
+                    host: {
+                        '[attr.id]': 'id'
+                    },
+                    providers: [
+                        { provide: F_BACKGROUND_PATTERN, useExisting: FCirclePatternComponent }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
                 type: Input
-            }], verticalLineColor: [{
+            }], color: [{
                 type: Input
-            }], horizontalLineColor: [{
+            }], radius: [{
                 type: Input
             }] } });
 
@@ -107,7 +229,9 @@ class FComponentsStore {
     constructor() {
         this.changes = new Subject();
         this.fNodes = [];
+        this.fGroups = [];
         this.fConnections = [];
+        this.fMarkers = [];
         this.fOutputs = [];
         this.fInputs = [];
         this.fOutlets = [];
@@ -118,48 +242,19 @@ class FComponentsStore {
     get transform() {
         return this.fCanvas?.transform;
     }
-    addOutput(output) {
-        this.fOutputs.push(output);
-        this.changes.next();
-    }
-    removeOutput(output) {
-        this.fOutputs = this.fOutputs.filter(o => o !== output);
-        this.changes.next();
-    }
-    addInput(input) {
-        this.fInputs.push(input);
-        this.changes.next();
-    }
-    removeInput(input) {
-        this.fInputs = this.fInputs.filter(i => i !== input);
-        this.changes.next();
-    }
-    addOutlet(outlet) {
-        this.fOutlets.push(outlet);
-        this.changes.next();
-    }
-    removeOutlet(outlet) {
-        this.fOutlets = this.fOutlets.filter(o => o !== outlet);
-        this.changes.next();
-    }
-    addNode(node) {
-        this.fNodes.push(node);
-        this.changes.next();
-    }
     findNode(element) {
         return this.fNodes.find(n => n.isContains(element));
     }
-    removeNode(node) {
-        this.fNodes = this.fNodes.filter(n => n !== node);
+    addComponent(collection, component) {
+        collection.push(component);
         this.changes.next();
     }
-    addConnection(connection) {
-        this.fConnections.push(connection);
-        this.changes.next();
-    }
-    removeConnection(connection) {
-        this.fConnections = this.fConnections.filter(c => c !== connection);
-        this.changes.next();
+    removeComponent(collection, component) {
+        const index = collection.indexOf(component);
+        if (index > -1) {
+            collection.splice(index, 1);
+            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 +263,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 +281,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);
@@ -209,13 +304,13 @@ class FBackgroundComponent extends FBackgroundBase {
         this.fComponentsStore.fBackground = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FBackgroundComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FBackgroundComponent, selector: "f-background", host: { classAttribute: "f-component f-background" }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], queries: [{ propertyName: "fBackgroundPattern", first: true, predicate: F_BACKGROUND_PATTERN, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg>\n    <ng-content></ng-content>\n\n<!--    <rect width=\"100%\" height=\"100%\" fill=\"url(#background-pattern)\"></rect>-->\n</svg>\n", styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FBackgroundComponent, selector: "f-background", host: { classAttribute: "f-component f-background" }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], queries: [{ propertyName: "fBackgroundPattern", first: true, predicate: F_BACKGROUND_PATTERN, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg><ng-content></ng-content></svg>\n", styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FBackgroundComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-background", host: {
                         'class': 'f-component f-background'
-                    }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg>\n    <ng-content></ng-content>\n\n<!--    <rect width=\"100%\" height=\"100%\" fill=\"url(#background-pattern)\"></rect>-->\n</svg>\n", styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"] }]
+                    }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg><ng-content></ng-content></svg>\n", styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { fBackgroundPattern: [{
                 type: ContentChild,
                 args: [F_BACKGROUND_PATTERN, { static: true }]
@@ -267,8 +362,7 @@ class CalculateConnectionCenterHandler {
             }
         }
         const remainingDistanceToCenter = halfTotalDistance - (accumulatedDistance - distances[centerIndex]);
-        const result = this.findPointAtDistance(points[centerIndex], points[centerIndex + 1], remainingDistanceToCenter);
-        return result;
+        return this.findPointAtDistance(points[centerIndex], points[centerIndex + 1], remainingDistanceToCenter);
     }
     calculateDistance(pointA, pointB) {
         return Math.sqrt(Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2));
@@ -383,7 +477,7 @@ function castToConnectableSide(type) {
     return result;
 }
 
-let uniqueId$7 = 0;
+let uniqueId$8 = 0;
 class FNodeInputDirective extends FNodeInputBase {
     get disabled() {
         return this.isDisabled;
@@ -397,6 +491,7 @@ class FNodeInputDirective extends FNodeInputBase {
     }
     set _fSide(value) {
         this._fConnectableSide = castToConnectableSide(value);
+        this.fNode.refresh();
     }
     get _fSide() {
         return this._fConnectableSide;
@@ -409,17 +504,14 @@ 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;
         this.isConnected = false;
     }
     ngOnInit() {
-        if (!this.fNode) {
-            throw new Error('fNodeInput must be inside f-node');
-        }
-        this.fComponentsStore.addInput(this);
+        this.fComponentsStore.addComponent(this.fComponentsStore.fInputs, this);
         this.fNode.addConnector(this);
     }
     setConnected(isConnected) {
@@ -428,7 +520,7 @@ class FNodeInputDirective extends FNodeInputBase {
     }
     ngOnDestroy() {
         this.fNode.removeConnector(this);
-        this.fComponentsStore.removeInput(this);
+        this.fComponentsStore.removeComponent(this.fComponentsStore.fInputs, this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fInputId", "id"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled"], _fSide: ["fInputConnectableSide", "_fSide"] }, host: { properties: { "attr.data-f-input-id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled", "class.f-node-input-not-connectable": "!canBeConnected" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0 }); }
@@ -488,7 +580,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 +600,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;
@@ -518,10 +610,10 @@ class FNodeOutletDirective extends FNodeOutletBase {
         if (!this.fNode) {
             throw new Error('fNodeOutlet must be inside fNode Directive');
         }
-        this.fComponentsStore.addOutlet(this);
+        this.fComponentsStore.addComponent(this.fComponentsStore.fOutlets, this);
     }
     ngOnDestroy() {
-        this.fComponentsStore.removeOutlet(this);
+        this.fComponentsStore.removeComponent(this.fComponentsStore.fOutlets, this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fOutletId", "id"], disabled: ["fOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.data-f-outlet-id": "id", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }], exportAs: ["fNodeOutlet"], usesInheritance: true, ngImport: i0 }); }
@@ -571,7 +663,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;
@@ -585,6 +677,7 @@ class FNodeOutputDirective extends FNodeOutputBase {
     }
     set _fSide(value) {
         this._fConnectableSide = castToConnectableSide(value);
+        this.fNode.refresh();
     }
     get _fSide() {
         return this._fConnectableSide;
@@ -597,7 +690,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;
@@ -608,7 +701,7 @@ class FNodeOutputDirective extends FNodeOutputBase {
         if (!this.fNode) {
             throw new Error('fNodeOutput must be inside fNode Directive');
         }
-        this.fComponentsStore.addOutput(this);
+        this.fComponentsStore.addComponent(this.fComponentsStore.fOutputs, this);
         this.fNode.addConnector(this);
     }
     setConnected(isConnected) {
@@ -617,7 +710,7 @@ class FNodeOutputDirective extends FNodeOutputBase {
     }
     ngOnDestroy() {
         this.fNode.removeConnector(this);
-        this.fComponentsStore.removeOutput(this);
+        this.fComponentsStore.removeComponent(this.fComponentsStore.fOutputs, this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fOutputId", "id"], multiple: ["fOutputMultiple", "multiple"], disabled: ["fOutputDisabled", "disabled"], _fSide: ["fOutputConnectableSide", "_fSide"], isSelfConnectable: "isSelfConnectable" }, host: { properties: { "attr.data-f-output-id": "id", "class.f-node-output-disabled": "disabled" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0 }); }
@@ -682,7 +775,7 @@ class FBezierPathBuilder {
         const { source, sourceSide, target, targetSide, offset } = request;
         const sourceAnglePoint = FBezierPathBuilder.getAnglePoint(sourceSide, source, target, offset);
         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.0001} ${target.y + 0.0001}`;
+        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 };
     }
@@ -821,14 +914,14 @@ class FSegmentPathBuilder {
         return `${index === 0 ? 'M' : 'L'}${point.x} ${point.y}`;
     }
     buildLastLineSegment(index, point) {
-        return `L${point.x + 0.0001} ${point.y + 0.0001}`;
+        return `L${point.x + 0.0002} ${point.y + 0.0002}`;
     }
 }
 
 class FStraightPathBuilder {
     handle(request) {
         const { source, target } = request;
-        const path = `M ${source.x} ${source.y} L ${target.x + 0.0001} ${target.y + 0.0001}`;
+        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 };
     }
@@ -1064,13 +1157,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
 
 const CONNECTION_PATH = new InjectionToken('CONNECTION_PATH');
 
-const FLOW = {
-    UID: GuidExtensions.generate(),
-};
-function getFlowUid() {
-    return FLOW.UID;
-}
-
 var EFMarkerType;
 (function (EFMarkerType) {
     EFMarkerType["START"] = "f-connection-marker-start";
@@ -1079,56 +1165,23 @@ var EFMarkerType;
     EFMarkerType["SELECTED_END"] = "f-connection-selected-marker-end";
 })(EFMarkerType || (EFMarkerType = {}));
 
-const F_MARKER = new InjectionToken('F_MARKER');
-class FMarkerBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FMarkerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: FMarkerBase, ngImport: i0 }); }
+function getMarkerStartId(fConnectionId) {
+    return sanitizeElementId(`${EFMarkerType.START}-${fConnectionId}`);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FMarkerBase, decorators: [{
-            type: Directive
-        }] });
-
-class FMarkerDirective extends FMarkerBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference) {
-        super();
-        this.elementReference = elementReference;
-        this.width = 0;
-        this.height = 0;
-        this.refX = 0;
-        this.refY = 0;
-        this.type = EFMarkerType.START;
-        this.hostElement.style.display = 'none';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FMarkerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: FMarkerDirective, selector: "svg[fMarker]", inputs: { hostElement: "hostElement", width: "width", height: "height", refX: "refX", refY: "refY", type: "type" }, host: { classAttribute: "f-component f-marker" }, providers: [{ provide: F_MARKER, useExisting: FMarkerDirective }], usesInheritance: true, ngImport: i0 }); }
+function getMarkerEndId(fConnectionId) {
+    return sanitizeElementId(`${EFMarkerType.END}-${fConnectionId}`);
+}
+function getMarkerSelectedStartId(fConnectionId) {
+    return sanitizeElementId(`${EFMarkerType.SELECTED_START}-${fConnectionId}`);
+}
+function getMarkerSelectedEndId(fConnectionId) {
+    return sanitizeElementId(`${EFMarkerType.SELECTED_END}-${fConnectionId}`);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FMarkerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "svg[fMarker]",
-                    host: {
-                        class: "f-component f-marker"
-                    },
-                    providers: [{ provide: F_MARKER, useExisting: FMarkerDirective }],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hostElement: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], refX: [{
-                type: Input
-            }], refY: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
 
 class FConnectionPathComponent {
+    get fPathId() {
+        return this.base.fConnectionId;
+    }
     get linkToGradient() {
         return F_CONNECTION_IDENTIFIERS.linkToGradient(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
     }
@@ -1149,21 +1202,15 @@ class FConnectionPathComponent {
         this.hostElement.setAttribute("d", `${path}`);
     }
     select() {
-        this.hostElement.setAttribute('marker-start', `url(#${this.getMarkerId(EFMarkerType.SELECTED_START)})`);
-        this.hostElement.setAttribute('marker-end', `url(#${this.getMarkerId(EFMarkerType.SELECTED_END)})`);
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerSelectedStartId(this.base.fConnectionId)})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerSelectedEndId(this.base.fConnectionId)})`);
     }
     deselect() {
-        this.hostElement.setAttribute('marker-start', `url(#${this.getMarkerId(EFMarkerType.START)})`);
-        this.hostElement.setAttribute('marker-end', `url(#${this.getMarkerId(EFMarkerType.END)})`);
-    }
-    getMarkerId(type) {
-        return sanitizeElementId(`${getFlowUid()}-${type}-${this.base.fConnectionId}`);
-    }
-    isSelected() {
-        return this.hostElement.getAttribute('marker-start') === `url(#${this.getMarkerId(EFMarkerType.SELECTED_START)})`;
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this.base.fConnectionId)})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fConnectionId)})`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FConnectionPathComponent, decorators: [{
             type: Component,
@@ -1174,6 +1221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                     host: {
                         class: "f-component f-connection-path",
                         '[attr.id]': 'attrConnectionId',
+                        '[attr.data-f-path-id]': 'fPathId',
                         '[attr.stroke]': 'linkToGradient',
                     },
                     providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }],
@@ -1225,13 +1273,16 @@ function mixinChangeConnectionSelection(base) {
         }
         select() {
             this.fPath?.select();
-            this.hostElement.classList.add(F_SELECTED_CLASS);
+            if (!this.hostElement.classList.contains(F_SELECTED_CLASS)) {
+                this.hostElement.classList.add(F_SELECTED_CLASS);
+            }
         }
         isSelected() {
             return this.hostElement.classList.contains(F_SELECTED_CLASS);
         }
         constructor(...args) {
             super(...args);
+            this.fSelectionDisabled = false;
         }
     };
 }
@@ -1300,12 +1351,6 @@ class FConnectionBase extends MIXIN_BASE$1 {
         this.fGradient.initialize();
         this.redraw();
     }
-    reset() {
-        this.path = '';
-        this.fPath.initialize();
-        this.fGradient.initialize();
-        this.redraw();
-    }
     isContains(element) {
         return (this.hostElement.firstChild?.lastChild).contains(element);
     }
@@ -1318,39 +1363,14 @@ class FConnectionBase extends MIXIN_BASE$1 {
                 sourceSide: fromSide,
                 target: to,
                 targetSide: toSide,
-                radius: 8,
-                offset: 32
+                radius: this.fRadius,
+                offset: this.fOffset
             }
         });
         this.path = pathResult.path;
         const transform = `position: absolute; pointerEvents: all; transform: translate(-50%, -50%); left: ${pathResult.connectionCenter.x}px; top: ${pathResult.connectionCenter.y}px`;
         this.fConnectionCenter?.nativeElement?.setAttribute('style', transform);
     }
-    setMarkers() {
-        this.fDefs.nativeElement.innerHTML = '';
-        this.fMarkers.forEach((marker) => {
-            const markerElement = DomElementExtensions.createSvgElement('marker');
-            markerElement.setAttribute('id', this.getMarkerId(getFlowUid() + '-' + marker.type + '-' + this.fConnectionId));
-            markerElement.setAttribute('markerHeight', `${marker.height}`);
-            markerElement.setAttribute('markerWidth', `${marker.width}`);
-            markerElement.setAttribute('orient', 'auto');
-            markerElement.setAttribute('refX', `${marker.refX}`);
-            markerElement.setAttribute('refY', `${marker.refY}`);
-            markerElement.setAttribute('markerUnits', 'strokeWidth');
-            marker.hostElement.setAttribute('height', `${marker.height}`);
-            marker.hostElement.setAttribute('width', `${marker.width}`);
-            const clone = marker.hostElement.cloneNode(true);
-            clone.style.display = 'unset';
-            markerElement.append(clone);
-            this.fDefs.nativeElement.append(markerElement);
-        });
-        this.fMarkers.forEach((marker) => {
-            marker.hostElement.remove();
-        });
-    }
-    getMarkerId(id) {
-        return sanitizeElementId(id);
-    }
     redraw() {
         this.fPath.setPath(this.path);
         this.fSelection.setPath(this.path);
@@ -1406,30 +1426,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 }]
         }] });
 
-let uniqueId$4 = 0;
+let uniqueId$5 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
+    set fStartColor(value) {
+        this._fStartColor = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fStartColor() {
+        return this._fStartColor;
+    }
+    set fEndColor(value) {
+        this._fEndColor = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fEndColor() {
+        return this._fEndColor;
+    }
+    set fRadius(value) {
+        this._fRadius = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fRadius() {
+        return this._fRadius;
+    }
+    set fOffset(value) {
+        this._fOffset = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fOffset() {
+        return this._fOffset;
+    }
     set fBehavior(value) {
         this._behavior = castToConnectionBehavior(value);
+        this.fComponentsStore.changes.next();
     }
     get fBehavior() {
         return this._behavior;
     }
     set fType(value) {
         this._type = value;
+        this.fComponentsStore.changes.next();
     }
     get fType() {
         return this._type;
     }
+    get fMarkers() {
+        return this.fComponentsStore.fMarkers.filter((x) => {
+            return this.hostElement.contains(x.hostElement);
+        });
+    }
     get boundingElement() {
         return this.fPath.hostElement;
     }
     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';
+        this._fStartColor = 'black';
+        this._fEndColor = 'black';
+        this._fRadius = 8;
+        this._fOffset = 32;
         this._behavior = EFConnectionBehavior.FIXED;
         this._type = EFConnectionType.STRAIGHT;
         this.fDraggingDisabled = false;
@@ -1445,7 +1502,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
         this.fComponentsStore.fTempConnection = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FConnectionForCreateComponent, 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: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fBehavior: "fBehavior", fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], 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 }], 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: 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: 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: 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: FConnectionForCreateComponent, decorators: [{
             type: Component,
@@ -1456,6 +1513,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Input
             }], fEndColor: [{
                 type: Input
+            }], fRadius: [{
+                type: Input
+            }], fOffset: [{
+                type: Input
             }], fBehavior: [{
                 type: Input
             }], fType: [{
@@ -1463,9 +1524,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             }], fDefs: [{
                 type: ViewChild,
                 args: ['defs', { static: true }]
-            }], fMarkers: [{
-                type: ContentChildren,
-                args: [F_MARKER, { descendants: true }]
             }], fPath: [{
                 type: ViewChild,
                 args: [CONNECTION_PATH, { static: true }]
@@ -1489,43 +1547,101 @@ 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 fText(value) {
+        this._fText = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fText() {
+        return this._fText;
+    }
+    set fStartColor(value) {
+        this._fStartColor = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fStartColor() {
+        return this._fStartColor;
+    }
+    set fEndColor(value) {
+        this._fEndColor = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fEndColor() {
+        return this._fEndColor;
+    }
+    set fOutputId(value) {
+        this._fOutputId = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fOutputId() {
+        return this._fOutputId;
+    }
+    set fInputId(value) {
+        this._fInputId = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fInputId() {
+        return this._fInputId;
+    }
+    set fRadius(value) {
+        this._fRadius = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fRadius() {
+        return this._fRadius;
+    }
+    set fOffset(value) {
+        this._fOffset = value;
+        this.fComponentsStore.changes.next();
+    }
+    get fOffset() {
+        return this._fOffset;
+    }
     set fBehavior(value) {
         this._behavior = castToConnectionBehavior(value);
+        this.fComponentsStore.changes.next();
     }
     get fBehavior() {
         return this._behavior;
     }
     set fType(value) {
         this._type = value;
+        this.fComponentsStore.changes.next();
     }
     get fType() {
         return this._type;
     }
+    get fMarkers() {
+        return this.fComponentsStore.fMarkers.filter((x) => {
+            return this.hostElement.contains(x.hostElement);
+        });
+    }
     get boundingElement() {
         return this.fPath.hostElement;
     }
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fConnectionId = `f-connection-${uniqueId$3++}`;
-        this.fText = '';
-        this.fStartColor = 'black';
-        this.fEndColor = 'black';
+        this.fConnectionId = `f-connection-${uniqueId$4++}`;
+        this._fText = '';
+        this._fStartColor = 'black';
+        this._fEndColor = 'black';
+        this._fRadius = 8;
+        this._fOffset = 32;
         this._behavior = EFConnectionBehavior.FIXED;
         this._type = EFConnectionType.STRAIGHT;
         this.fDraggingDisabled = false;
         this.fSelectionDisabled = false;
     }
     ngOnInit() {
-        this.fComponentsStore.addConnection(this);
+        this.fComponentsStore.addComponent(this.fComponentsStore.fConnections, this);
     }
     ngOnDestroy() {
-        this.fComponentsStore.removeConnection(this);
+        this.fComponentsStore.removeComponent(this.fComponentsStore.fConnections, 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", 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\">\n      </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}\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 +1650,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  <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\">\n      </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}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }, { type: FComponentsStore }], propDecorators: { fConnectionId: [{
                 type: Input
             }], fText: [{
@@ -1547,6 +1663,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Input
             }], fInputId: [{
                 type: Input
+            }], fRadius: [{
+                type: Input
+            }], fOffset: [{
+                type: Input
             }], fBehavior: [{
                 type: Input
             }], fType: [{
@@ -1559,9 +1679,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             }], fDefs: [{
                 type: ViewChild,
                 args: ['defs', { static: true }]
-            }], fMarkers: [{
-                type: ContentChildren,
-                args: [F_MARKER, { descendants: true }]
             }], fPath: [{
                 type: ViewChild,
                 args: [CONNECTION_PATH, { static: true }]
@@ -1585,6 +1702,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
+const F_MARKER = new InjectionToken('F_MARKER');
+class FMarkerBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FMarkerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: FMarkerBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FMarkerBase, decorators: [{
+            type: Directive
+        }] });
+
+class FMarkerDirective extends FMarkerBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(fComponentsStore, elementReference) {
+        super();
+        this.fComponentsStore = fComponentsStore;
+        this.elementReference = elementReference;
+        this.width = 0;
+        this.height = 0;
+        this.refX = 0;
+        this.refY = 0;
+        this.type = EFMarkerType.START;
+        this.orient = 'auto';
+        this.markerUnits = 'strokeWidth';
+        this.hostElement.style.display = 'none';
+    }
+    ngOnInit() {
+        this.fComponentsStore.addComponent(this.fComponentsStore.fMarkers, this);
+    }
+    ngOnDestroy() {
+        this.fComponentsStore.removeComponent(this.fComponentsStore.fMarkers, this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FMarkerDirective, deps: [{ token: FComponentsStore }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: FMarkerDirective, selector: "svg[fMarker]", inputs: { hostElement: "hostElement", width: "width", height: "height", refX: "refX", refY: "refY", type: "type", orient: "orient", markerUnits: "markerUnits" }, host: { classAttribute: "f-component f-marker" }, providers: [{ provide: F_MARKER, useExisting: FMarkerDirective }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FMarkerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "svg[fMarker]",
+                    host: {
+                        class: "f-component f-marker"
+                    },
+                    providers: [{ provide: F_MARKER, useExisting: FMarkerDirective }],
+                }]
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: i0.ElementRef }], propDecorators: { hostElement: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], refX: [{
+                type: Input
+            }], refY: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], orient: [{
+                type: Input
+            }], markerUnits: [{
+                type: Input
+            }] } });
+
 const F_NODE = new InjectionToken('F_NODE');
 class FNodeBase {
     constructor() {
@@ -1698,7 +1877,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 +1895,7 @@ class FNodeDirective extends FNodeBase {
         this.renderer = renderer;
         this.fComponentsStore = fComponentsStore;
         this.subscriptions$ = new Subscription();
-        this.fNodeId = `f-node-${uniqueId$2++}`;
+        this.fId = `f-node-${uniqueId$3++}`;
         this.positionChange = new EventEmitter();
         this.fDraggingDisabled = false;
         this.fSelectionDisabled = false;
@@ -1730,7 +1909,7 @@ class FNodeDirective extends FNodeBase {
         this.setStyle('left', '0');
         this.setStyle('top', '0');
         super.redraw();
-        this.fComponentsStore.addNode(this);
+        this.fComponentsStore.addComponent(this.fComponentsStore.fNodes, this);
     }
     setStyle(styleName, value) {
         this.renderer.setStyle(this.hostElement, styleName, value);
@@ -1739,7 +1918,7 @@ class FNodeDirective extends FNodeBase {
         this.subscriptions$.add(this.subscribeOnResizeChanges());
     }
     subscribeOnResizeChanges() {
-        return new FResizeObserver(this.hostElement).pipe(startWith(null)).subscribe(() => {
+        return merge(new FResizeObserver(this.hostElement), this.stateChanges).pipe(debounceTime(5), startWith(null)).subscribe(() => {
             this.connectors.forEach((fConnector) => {
                 fConnector.fConnectableSide = new CalculateConnectorConnectableSideHandler().handle(new CalculateConnectorConnectableSideRequest(fConnector, this.hostElement));
             });
@@ -1748,23 +1927,25 @@ class FNodeDirective extends FNodeBase {
     }
     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.removeNode(this);
+        this.fComponentsStore.removeComponent(this.fComponentsStore.fNodes, this);
         this.stateChanges.complete();
         this.subscriptions$.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FNodeDirective, 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: FNodeDirective, selector: "[fNode]", inputs: { fNodeId: "fNodeId", position: ["fNodePosition", "position"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled"] }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.data-f-node-id": "fNodeId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], position: ["fNodePosition", "position"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled"] }, outputs: { positionChange: "fNodePositionChange" }, 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 }); }
 }
@@ -1774,7 +1955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                     selector: "[fNode]",
                     exportAs: "fComponent",
                     host: {
-                        '[attr.data-f-node-id]': 'fNodeId',
+                        '[attr.data-f-node-id]': 'fId',
                         class: "f-node f-component",
                         '[class.f-node-dragging-disabled]': 'fDraggingDisabled',
                         '[class.f-node-selection-disabled]': 'fSelectionDisabled'
@@ -1783,8 +1964,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         { provide: F_NODE, useExisting: FNodeDirective }
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FComponentsStore }], propDecorators: { fNodeId: [{
-                type: Input
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FComponentsStore }], propDecorators: { fId: [{
+                type: Input,
+                args: ['fNodeId']
             }], position: [{
                 type: Input,
                 args: ['fNodePosition']
@@ -2041,7 +2223,9 @@ class FDraggableDataContext {
         this.draggableItems = [];
         this.onPointerDownScale = 1;
         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 +2351,10 @@ class CreateConnectionDragHandler {
 }
 
 class FCreateConnectionEvent {
-    constructor(fOutputId, fInputId) {
+    constructor(fOutputId, fInputId, fDropPosition) {
         this.fOutputId = fOutputId;
         this.fInputId = fInputId;
+        this.fDropPosition = fDropPosition;
     }
 }
 
@@ -2304,23 +2489,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);
+                    throw RequiredOutput();
                 }
-                const isOutlet = isNodeOutlet(output.hostElement);
-                if (isOutlet) {
-                    output = this.findFirstCanBeConnectedOutputByOutletHandler.handle(output);
-                    if (!output) {
-                        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 +2666,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 +2687,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 +2695,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,
@@ -2550,6 +2732,7 @@ class ExternalItemDragHandler {
     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() {
@@ -2612,7 +2795,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 +2804,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 +3116,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 +3133,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 +3189,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 +3351,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();
     }
-    selectIfNotSelected() {
+    selectItem(item) {
+        this.fDraggableDataContext.selectedItems.push(item);
+        item.select();
+        this.fDraggableDataContext.markSelectionAsChanged();
+    }
+    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
@@ -3282,10 +3453,12 @@ class FDraggableBase {
                 this.dragStartTime = Date.now();
                 this.dragStartPosition = mouseEvent.getPosition();
                 this.ngZone.runOutsideAngular(() => {
+                    this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
                     this.document?.addEventListener('mousemove', this.onMouseMove);
                     this.document?.addEventListener('mouseup', this.onMouseUp);
                 });
                 this.mouseListeners = () => {
+                    this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
                     this.document?.removeEventListener('mousemove', this.onMouseMove);
                     this.document?.removeEventListener('mouseup', this.onMouseUp);
                 };
@@ -3302,15 +3475,20 @@ class FDraggableBase {
                 this.dragStartTime = Date.now();
                 this.dragStartPosition = touchEvent.getPosition();
                 this.ngZone.runOutsideAngular(() => {
+                    this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
                     this.document?.addEventListener('touchmove', this.onTouchMove);
                     this.document?.addEventListener('touchend', this.onTouchUp);
                 });
                 this.touchListeners = () => {
+                    this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
                     this.document?.removeEventListener('touchmove', this.onTouchMove);
                     this.document?.removeEventListener('touchend', this.onTouchUp);
                 };
             }
         };
+        this.onSelectStart = (event) => {
+            this.onSelect(event);
+        };
         this.onMouseMove = (event) => {
             this.moveHandler(new IMouseEvent(event));
         };
@@ -3453,6 +3631,13 @@ class FDraggableDirective extends FDraggableBase {
             this.hostElement.classList.add('f-dragging');
         }
     }
+    onSelect(event) {
+        const isTargetNotHtml = event.constructor.name === 'Event';
+        const target = isTargetNotHtml ? event.target.parentNode : event.target;
+        if (target && isExternalItem(target)) {
+            event.preventDefault();
+        }
+    }
     onPointerMove(event) {
         const pointerPositionInCanvas = Point.fromPoint(event.getPosition()).elementTransform(this.hostElement);
         const difference = pointerPositionInCanvas.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
@@ -3479,6 +3664,7 @@ class FDraggableDirective extends FDraggableBase {
         }
         const result = this.fMediator.send(new GetSelectionRequest());
         this.fSelectionChange.emit(result);
+        this.fDraggableDataContext.isSelectedChanged = false;
     }
     ngOnDestroy() {
         super.unsubscribe();
@@ -3542,6 +3728,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
+class CreateConnectionMarkersRequest {
+    constructor(fConnection) {
+        this.fConnection = fConnection;
+    }
+}
+
+let CreateConnectionMarkersHandler = class CreateConnectionMarkersHandler {
+    handle(request) {
+        const element = DomElementExtensions.createSvgElement('defs');
+        const fConnection = request.fConnection;
+        fConnection.fMarkers.forEach((marker) => {
+            const markerElement = this.createMarkerElement(marker, fConnection.fConnectionId);
+            const clone = marker.hostElement.cloneNode(true);
+            clone.setAttribute('height', `${marker.height}`);
+            clone.setAttribute('width', `${marker.width}`);
+            clone.removeAttribute('markerUnits');
+            clone.style.display = 'unset';
+            markerElement.append(clone);
+            element.append(markerElement);
+        });
+        fConnection.fDefs.nativeElement.innerHTML = element.innerHTML;
+        this.makeSafariCompatible(fConnection);
+    }
+    // Safari does not support markers on path elements if markers are defined after the path element
+    makeSafariCompatible(fConnection) {
+        fConnection.fPath.hostElement.replaceWith(fConnection.fPath.hostElement);
+    }
+    createMarkerElement(marker, fConnectionId) {
+        const markerElement = DomElementExtensions.createSvgElement('marker');
+        markerElement.setAttribute('id', sanitizeElementId(marker.type + '-' + fConnectionId));
+        markerElement.setAttribute('markerHeight', `${marker.height}`);
+        markerElement.setAttribute('markerWidth', `${marker.width}`);
+        markerElement.setAttribute('orient', `${marker.orient}`);
+        markerElement.setAttribute('refX', `${marker.refX}`);
+        markerElement.setAttribute('refY', `${marker.refY}`);
+        markerElement.setAttribute('markerUnits', `${marker.markerUnits}`);
+        return markerElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: CreateConnectionMarkersHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: CreateConnectionMarkersHandler }); }
+};
+CreateConnectionMarkersHandler = __decorate([
+    FHandlerRegister(CreateConnectionMarkersRequest)
+], CreateConnectionMarkersHandler);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: CreateConnectionMarkersHandler, decorators: [{
+            type: Injectable
+        }] });
+
 class GetConnectionVectorRequest {
     constructor(outputRect, inputRect, behavior, outputSide, inputSide) {
         this.outputRect = outputRect;
@@ -3642,8 +3876,7 @@ let GetElementRectInFlowHandler = class GetElementRectInFlowHandler {
         const systemRect = RectExtensions.fromElement(request.element);
         const position = Point.fromPoint(systemRect).elementTransform(this.flowHost).sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
         const size = SizeExtensions.initialize(systemRect.width / this.transform.scale, systemRect.height / this.transform.scale);
-        const result = RectExtensions.initialize(position.x, position.y, size.width, size.height);
-        return result;
+        return RectExtensions.initialize(position.x, position.y, size.width, size.height);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GetElementRectInFlowHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GetElementRectInFlowHandler }); }
@@ -3755,6 +3988,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
 
+class GetPositionInFlowRequest {
+    constructor(position) {
+        this.position = position;
+    }
+}
+
+let GetPositionInFlowHandler = class GetPositionInFlowHandler {
+    get transform() {
+        return this.fComponentsStore.transform;
+    }
+    get flowHost() {
+        return this.fComponentsStore.flowHost;
+    }
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        return Point.fromPoint(request.position).elementTransform(this.flowHost)
+            .sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GetPositionInFlowHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GetPositionInFlowHandler }); }
+};
+GetPositionInFlowHandler = __decorate([
+    FHandlerRegister(GetPositionInFlowRequest)
+], GetPositionInFlowHandler);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GetPositionInFlowHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
+
 class GetSelectionRequest {
 }
 
@@ -3795,7 +4058,9 @@ let RedrawConnectionsHandler = class RedrawConnectionsHandler {
     }
     handle(request) {
         this.resetConnectors();
-        this.fComponentsStore.fTempConnection?.setMarkers();
+        if (this.fComponentsStore.fTempConnection) {
+            this.setMarkers(this.fComponentsStore.fTempConnection);
+        }
         this.fComponentsStore.fConnections.forEach((connection) => {
             const output = this.fComponentsStore.fOutputs.find((x) => x.id === connection.fOutputId);
             const input = this.fComponentsStore.fInputs.find((x) => x.id === connection.fInputId);
@@ -3812,15 +4077,19 @@ let RedrawConnectionsHandler = class RedrawConnectionsHandler {
         output.setConnected(true);
         input.setConnected(true);
         const vector = this.getVector(output, input, connection);
+        this.setMarkers(connection);
         connection.setVector(vector.point1, output.fConnectableSide, vector.point2, input.fConnectableSide);
-        connection.setMarkers();
         connection.initialize();
+        connection.isSelected() ? connection.select() : null;
     }
     getVector(output, input, connection) {
         const outputRect = this.fMediator.send(new GetElementRectInFlowRequest(output.hostElement));
         const inputRect = this.fMediator.send(new GetElementRectInFlowRequest(input.hostElement));
         return this.fMediator.send(new GetConnectionVectorRequest(outputRect, inputRect, connection.fBehavior, output.fConnectableSide, input.fConnectableSide));
     }
+    setMarkers(connection) {
+        this.fMediator.send(new CreateConnectionMarkersRequest(connection));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RedrawConnectionsHandler, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RedrawConnectionsHandler }); }
 };
@@ -3849,7 +4118,7 @@ let SelectHandler = class SelectHandler {
         });
         this.fDraggableDataContext.selectedItems = [];
         request.nodes.forEach((key) => {
-            const node = this.fDataContext.fNodes.find((x) => x.fNodeId === key);
+            const node = this.fDataContext.fNodes.find((x) => x.fId === key);
             if (node) {
                 node.select();
                 this.fDraggableDataContext.selectedItems.push(node);
@@ -3907,6 +4176,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;
@@ -3915,8 +4214,7 @@ class GetConnectionHandler {
         this.fComponentsStore = fComponentsStore;
     }
     handle(element) {
-        const result = this.fConnections.find(c => c.isContains(element));
-        return result;
+        return this.fConnections.find(c => c.isContains(element));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GetConnectionHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GetConnectionHandler }); }
@@ -3965,74 +4263,23 @@ 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,
+    CreateConnectionMarkersHandler,
     GetConnectionVectorHandler,
     GetElementRectInFlowHandler,
     GetNodesRectHandler,
     GetOutputRectInFlowHandler,
+    GetPositionInFlowHandler,
     GetSelectionHandler,
     RedrawConnectionsHandler,
     SelectHandler,
     SelectAllHandler,
+    UpdateItemLayerHandler,
     GetConnectionHandler,
     GetInputRectInFlowHandler,
     GetIncomingConnectionsHandler,
     GetOutgoingConnectionsHandler,
-    UpdateConnectionLayerHandler,
-    UpdateNodeLayerHandler,
 ];
 
 class FCanvasComponent extends FCanvasBase {
@@ -4104,13 +4351,13 @@ class FCanvasComponent extends FCanvasBase {
         this.completeDrag();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FCanvasComponent, deps: [{ token: i0.ElementRef }, { token: FFlowMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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=\"[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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", 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=\"[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}\n"] }]
+                    }, 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}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FFlowMediator }, { type: FComponentsStore }], propDecorators: { fCanvasChange: [{
                 type: Output
             }], position: [{
@@ -4423,7 +4670,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,13 +4681,12 @@ 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;
     }
     ngOnInit() {
         this.fComponentsStore.fFlow = this;
-        FLOW.UID = this.fFlowId;
     }
     ngAfterContentInit() {
         this.subscription$.add(this.subscribeOnElementsChanges());
@@ -4454,16 +4700,20 @@ class FFlowComponent extends FFlowBase {
             }
         });
     }
+    redraw() {
+        this.fComponentsStore.changes.next();
+    }
     reset() {
         this.isLoaded = false;
     }
     getNodesRect() {
-        const result = this.fMediator.send(new GetNodesRectRequest());
-        return result;
+        return this.fMediator.send(new GetNodesRectRequest());
     }
     getSelection() {
-        const result = this.fMediator.send(new GetSelectionRequest());
-        return result;
+        return this.fMediator.send(new GetSelectionRequest());
+    }
+    getPositionInFlow(position) {
+        return this.fMediator.send(new GetPositionInFlowRequest(position));
     }
     selectAll() {
         this.fMediator.send(new SelectAllRequest());
@@ -4518,6 +4768,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Output
             }] } });
 
+const F_GROUP = new InjectionToken('F_GROUP');
+class FGroupBase extends FNodeBase {
+}
+
+let uniqueId = 0;
+class FGroupDirective extends FGroupBase {
+    set position(value) {
+        this._position = PointExtensions.castToPoint(value);
+        this.refresh();
+    }
+    get position() {
+        return this._position;
+    }
+    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.fId = `f-group-${uniqueId++}`;
+        this.positionChange = new EventEmitter();
+        this.fDraggingDisabled = false;
+        this.fSelectionDisabled = false;
+        this.connectors = [];
+    }
+    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.addComponent(this.fComponentsStore.fGroups, this);
+    }
+    setStyle(styleName, value) {
+        this.renderer.setStyle(this.hostElement, styleName, value);
+    }
+    ngAfterViewInit() {
+        this.subscriptions$.add(this.subscribeOnResizeChanges());
+    }
+    subscribeOnResizeChanges() {
+        return merge(new FResizeObserver(this.hostElement), this.stateChanges).pipe(debounceTime(5), startWith(null)).subscribe(() => {
+            this.connectors.forEach((fConnector) => {
+                fConnector.fConnectableSide = new CalculateConnectorConnectableSideHandler().handle(new CalculateConnectorConnectableSideRequest(fConnector, this.hostElement));
+            });
+            this.fComponentsStore.changes.next();
+        });
+    }
+    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.fGroups, this);
+        this.stateChanges.complete();
+        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: { fId: ["fGroupId", "fId"], position: ["fGroupPosition", "position"], fDraggingDisabled: ["fGroupDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fGroupSelectionDisabled", "fSelectionDisabled"] }, outputs: { positionChange: "fGroupPositionChange" }, host: { properties: { "attr.data-f-group-id": "fId" }, 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]': 'fId',
+                        class: "f-group f-component",
+                    },
+                    providers: [
+                        { provide: F_GROUP, useExisting: FGroupDirective }
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FComponentsStore }], propDecorators: { fId: [{
+                type: Input,
+                args: ['fGroupId']
+            }], position: [{
+                type: Input,
+                args: ['fGroupPosition']
+            }], positionChange: [{
+                type: Output,
+                args: ['fGroupPositionChange']
+            }], fDraggingDisabled: [{
+                type: Input,
+                args: ['fGroupDraggingDisabled']
+            }], fSelectionDisabled: [{
+                type: Input,
+                args: ['fGroupSelectionDisabled']
+            }] } });
+
+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,
@@ -4530,9 +4890,11 @@ class FFlowModule {
             FMarkerDirective,
             FFlowComponent,
             FBackgroundComponent,
-            FCellPatternComponent,
+            FRectPatternComponent,
+            FCirclePatternComponent,
             FCanvasComponent,
             FNodeDirective,
+            FGroupDirective,
             FDragHandleDirective,
             FConnectionComponent,
             FConnectionForCreateComponent,
@@ -4545,7 +4907,8 @@ class FFlowModule {
             FSelectionAreaComponent,
             FLineAlignmentComponent], imports: [CommonModule], exports: [FFlowComponent,
             FBackgroundComponent,
-            FCellPatternComponent,
+            FRectPatternComponent,
+            FCirclePatternComponent,
             FCanvasComponent,
             FNodeDirective,
             FDragHandleDirective,
@@ -4579,9 +4942,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         FMarkerDirective,
                         FFlowComponent,
                         FBackgroundComponent,
-                        FCellPatternComponent,
+                        FRectPatternComponent,
+                        FCirclePatternComponent,
                         FCanvasComponent,
                         FNodeDirective,
+                        FGroupDirective,
                         FDragHandleDirective,
                         FConnectionComponent,
                         FConnectionForCreateComponent,
@@ -4603,7 +4968,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                     exports: [
                         FFlowComponent,
                         FBackgroundComponent,
-                        FCellPatternComponent,
+                        FRectPatternComponent,
+                        FCirclePatternComponent,
                         FCanvasComponent,
                         FNodeDirective,
                         FDragHandleDirective,
@@ -4627,5 +4993,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, CreateConnectionMarkersHandler, CreateConnectionMarkersRequest, CreateConnectionOnPointerUp, CreateConnectionPrepareDragSequence, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFDraggableType, EFMarkerType, EXTERNAL_ITEM_PROVIDERS, ExternalItemDragHandler, ExternalItemOnPointerUp, ExternalItemPrepareDragSequence, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowMediator, FFlowModule, FGroupBase, FGroupDirective, FHandlerRegister, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FRectPatternComponent, 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, GetPositionInFlowHandler, GetPositionInFlowRequest, 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, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, isExternalItem, isGroup, isNode, isNodeDragHandle, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility };
 //# sourceMappingURL=foblex-flow.mjs.map