@foblex/flow 1.0.1 → 1.0.3

package/fesm2022/foblex-flow.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Component, ChangeDetectionStrategy, Input, ViewChild, EventEmitter, Output, NgModule, Inject, Optional, SkipSelf, ContentChildren, ContentChild, Injectable } from '@angular/core';
+import { InjectionToken, Directive, Component, ChangeDetectionStrategy, Input, ViewChild, Inject, NgModule, Optional, SkipSelf, EventEmitter, ContentChildren, ContentChild, Output, Injectable } from '@angular/core';
 import { VectorExtensions, Point, PointExtensions, TransformModelExtensions, RectExtensions, SizeExtensions, BooleanExtensions, FResizeObserver, RectFElement, DomElementExtensions, MouseEventExtensions, IDragAndDropBase, LineFElement, EventExtensions } from '@foblex/core';
-import { Subject, merge, startWith, takeUntil, defer, switchMap, take, Subscription, debounceTime } from 'rxjs';
+import { Subject, Subscription, startWith, debounceTime, defer, switchMap, merge, take, takeUntil } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -12,6 +12,7 @@ class FConnectionBase {
     constructor() {
         this.path = '';
         this.vector = VectorExtensions.initialize();
+        this.stateChanges = new Subject();
     }
     initialize() {
     }
@@ -24,6 +25,9 @@ class FConnectionBase {
     select() {
         this.hostElement.classList.add(F_SELECTED_CLASS);
     }
+    isSelected() {
+        return this.hostElement.classList.contains(F_SELECTED_CLASS);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionBase, ngImport: i0 }); }
 }
@@ -85,6 +89,9 @@ class FConnectionPathComponent {
             this.hostElement.setAttribute('marker-end', `url(#connection-marker-end)`);
         }
     }
+    isSelected() {
+        return this.hostElement.getAttribute('marker-start') === `url(#connection-marker-start-selected)`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionPathComponent, selector: "path[f-connection-path]", inputs: { fromTo: "fromTo" }, host: { properties: { "attr.id": "attrConnectionId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -393,205 +400,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-function mixinChangeZoom(base) {
-    return class extends base {
-        setZoom(scaleValue, toPosition) {
-            if (scaleValue !== this.transform.scale) {
-                const summaryPosition = PointExtensions.sum(this.transform.scaledPosition, this.transform.position);
-                const newX = toPosition.x - (toPosition.x - summaryPosition.x) * scaleValue / this.transform.scale;
-                const newY = toPosition.y - (toPosition.y - summaryPosition.y) * scaleValue / this.transform.scale;
-                this.transform.scale = scaleValue;
-                this.transform.scaledPosition = PointExtensions.sub(PointExtensions.initialize(newX, newY), this.transform.position);
-            }
-        }
-        setScalePosition(value) {
-            this.transform.scaledPosition = value;
-        }
-        resetZoom() {
-            this.transform.scale = 1;
-            this.transform.scaledPosition = PointExtensions.initialize();
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinFitToParent(base) {
-    return class extends base {
-        fitToParent(rect, parentRect, points) {
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.transform.position = this.getZeroPositionWithoutScale(points);
-            const itemsContainerWidth = rect.width / this.transform.scale;
-            const itemsContainerHeight = rect.height / this.transform.scale;
-            if ((itemsContainerWidth > parentRect.width || itemsContainerHeight > parentRect.height) ||
-                itemsContainerWidth < parentRect.width && itemsContainerHeight < parentRect.height) {
-                this.transform.scale = Math.min(parentRect.width / itemsContainerWidth, parentRect.height / itemsContainerHeight);
-            }
-            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
-            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
-            this.transform.position = PointExtensions.initialize(newX, newY);
-        }
-        getZeroPositionWithoutScale(points) {
-            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
-            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
-            return PointExtensions.initialize(xPoint, yPoint);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinOneToOneCentering(base) {
-    return class extends base {
-        oneToOneCentering(rect, parentRect, points) {
-            this.transform.scaledPosition = PointExtensions.initialize();
-            this.transform.position = this.getZeroPositionWithoutScale(points);
-            const itemsContainerWidth = rect.width / this.transform.scale;
-            const itemsContainerHeight = rect.height / this.transform.scale;
-            this.transform.scale = 1;
-            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
-            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
-            this.transform.position = PointExtensions.initialize(newX, newY);
-        }
-        getZeroPositionWithoutScale(points) {
-            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
-            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
-            return PointExtensions.initialize(xPoint, yPoint);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-function mixinChangePosition(base) {
-    return class extends base {
-        getPosition() {
-            return this.transform.position;
-        }
-        setPosition(position) {
-            this.transform.position = PointExtensions.copy(position);
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-
-const F_ITEMS_CONTAINER = new InjectionToken('F_ITEMS_CONTAINER');
-const MIXIN_BASE = mixinChangePosition(mixinFitToParent(mixinOneToOneCentering(mixinChangeZoom(class {
-    constructor(transform) {
-        this.transform = transform;
-    }
-}))));
-class FItemsContainerBase extends MIXIN_BASE {
+const F_BACKGROUND = new InjectionToken('F_BACKGROUND');
+class FBackgroundBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference) {
-        super(TransformModelExtensions.default());
+    constructor(elementReference, fCanvas) {
         this.elementReference = elementReference;
-        this.parseData();
-    }
-    parseData() {
-        const transform = TransformModelExtensions.fromString(this.hostElement.getAttribute("transform"));
-        this.transform = transform ? transform : this.transform;
-    }
-    redraw() {
-        this.hostElement.setAttribute("transform", TransformModelExtensions.toString(this.transform));
-    }
-    redrawWithAnimation() {
-        this.hostElement.setAttribute("style", 'transition: transform 0.15s ease-in-out');
-        this.redraw();
-        setTimeout(() => {
-            this.hostElement.removeAttribute("style");
-        }, 150);
+        this.fCanvas = fCanvas;
+        this.transform = TransformModelExtensions.default();
+        console.log('FBackgroundBase');
     }
-    completeDrag() {
-        // const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
-        this.canvasChange.emit();
+    isBackgroundElement(element) {
+        return this.hostElement === element || this.hostElement.contains(element) || this.fCanvas.hostElement.contains(element);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FItemsContainerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FItemsContainerBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FBackgroundBase, deps: [{ token: i0.ElementRef }, { token: FCanvasBase }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FBackgroundBase, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FItemsContainerBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FBackgroundBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FCanvasBase }]; } });
 
-class FItemsContainerDirective extends FItemsContainerBase {
-    constructor(elementReference) {
-        super(elementReference);
-        this.canvasChange = new EventEmitter();
+class FBackgroundDirective extends FBackgroundBase {
+    constructor(elementReference, fCanvas) {
+        super(elementReference, fCanvas);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FItemsContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FItemsContainerDirective, selector: "g[fItemsContainer]", outputs: { canvasChange: "canvasChange" }, host: { classAttribute: "f-items-container" }, providers: [{ provide: F_ITEMS_CONTAINER, useExisting: FItemsContainerDirective }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FBackgroundDirective, deps: [{ token: i0.ElementRef }, { token: F_CANVAS }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FBackgroundDirective, isStandalone: true, selector: "g[fBackground]", providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundDirective }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FItemsContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FBackgroundDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "g[fItemsContainer]",
-                    exportAs: 'fComponent',
-                    host: {
-                        'class': 'f-items-container'
-                    },
-                    providers: [{ provide: F_ITEMS_CONTAINER, useExisting: FItemsContainerDirective }],
+                    selector: "g[fBackground]",
+                    standalone: true,
+                    providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundDirective }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { canvasChange: [{
-                type: Output
-            }] } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FCanvasBase, decorators: [{
+                    type: Inject,
+                    args: [F_CANVAS]
+                }] }]; } });
 
-const F_FLOW_COMPONENT = new InjectionToken('F_FLOW_COMPONENT');
-class FFlowBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference, changeDetectorRef, ngZone) {
-        this.elementReference = elementReference;
-        this.changeDetectorRef = changeDetectorRef;
-        this.ngZone = ngZone;
-        this.onDestroy = new Subject();
-    }
-    ngAfterContentInit() {
-        this.subscribeOnComponentsChanges();
-    }
-    subscribeOnComponentsChanges() {
-        console.log(this.fNodesContainer);
-        const changes = [
-            this.fNodesContainer.fNodes.changes,
-            this.fConnectionsContainer.fConnections.changes,
-            this.outlets.changes,
-            this.outputs.changes,
-            this.inputs.changes
-        ];
-        merge(...changes).pipe(startWith(null), takeUntil(this.onDestroy)).subscribe(() => {
-            const changedOrDestroyed = merge(...changes, this.onDestroy);
-            // const nodesChanges = new QueryListStateChanges(this.ngZone).handle(this.nodes);
-            //
-            // merge(nodesChanges).pipe(startWith(null), takeUntil(changedOrDestroyed)).subscribe(() => {
-            //
-            //
-            // });
-            this.fConnectionsContainer.fConnections.forEach((connection) => {
-                connection.fromTo = {
-                    output: this.outputs.find((x) => x.id === connection.outputId),
-                    input: this.inputs.find((x) => x.id === connection.inputId)
-                };
-                connection.initialize();
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.onDestroy.next();
-        this.onDestroy.complete();
+class TempConnectionInputOutputModel {
+    constructor(output) {
+        this.output = output;
+        this.input = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowBase, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FFlowBase, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowBase, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; } });
+
+class FConnectionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: FConnectionModule, declarations: [FTempConnectionComponent,
+            FConnectionComponent,
+            FConnectionDragHandleComponent,
+            FConnectionGradientComponent,
+            FConnectionPathComponent,
+            FConnectionTextComponent,
+            FConnectionTextPathDirective,
+            FConnectionSelectionComponent], imports: [CommonModule], exports: [FTempConnectionComponent,
+            FConnectionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FTempConnectionComponent,
+                        FConnectionComponent,
+                        FConnectionDragHandleComponent,
+                        FConnectionGradientComponent,
+                        FConnectionPathComponent,
+                        FConnectionTextComponent,
+                        FConnectionTextPathDirective,
+                        FConnectionSelectionComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        FTempConnectionComponent,
+                        FConnectionComponent
+                    ]
+                }]
+        }] });
+
+function getConnectionIntersect(fromRect, toRect) {
+    const fromResult = RectExtensions.intersectionWithVector(fromRect, fromRect.gravityCenter, toRect.gravityCenter);
+    const toResult = RectExtensions.intersectionWithVector(toRect, fromRect.gravityCenter, toRect.gravityCenter);
+    return {
+        point1: fromResult ? fromResult[1] : fromRect.gravityCenter,
+        point2: toResult ? toResult[0] : toRect.gravityCenter,
+    };
+}
 
 function getElementRectInCanvas(element, transform, svgHost) {
     const rect = RectExtensions.fromElement(element);
@@ -834,98 +733,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 args: ['fNodeOutputDisabled']
             }] } });
 
-const F_NODES_CONTAINER = new InjectionToken('F_NODES_CONTAINER');
-class FNodesContainerBase {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.stateChanges = defer(() => {
-            const items = this.fNodes;
-            if (items) {
-                return items.changes.pipe(startWith(items), switchMap(() => merge(...items.map(x => merge(x.fForeignObject.stateChanges, x.stateChanges)))));
-            }
-            return this.ngZone.onStable.pipe(take(1), switchMap(() => this.stateChanges));
-        });
-    }
-    findNode(element) {
-        return this.fNodes.find((x) => {
-            return x.isContains(element);
-        });
-    }
-    setNodeToTopLayer(node) {
-        const elements = Array.from(this.hostElement.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.hostElement.removeChild(x);
-                this.hostElement.insertBefore(x, node.hostElement);
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodesContainerBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FNodesContainerBase, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodesContainerBase, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
-
-class TempConnectionInputOutputModel {
-    constructor(output) {
-        this.output = output;
-        this.input = null;
-    }
-}
-
-class FConnectionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: FConnectionModule, declarations: [FTempConnectionComponent,
-            FConnectionComponent,
-            FConnectionDragHandleComponent,
-            FConnectionGradientComponent,
-            FConnectionPathComponent,
-            FConnectionTextComponent,
-            FConnectionTextPathDirective,
-            FConnectionSelectionComponent], imports: [CommonModule], exports: [FTempConnectionComponent,
-            FConnectionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        FTempConnectionComponent,
-                        FConnectionComponent,
-                        FConnectionDragHandleComponent,
-                        FConnectionGradientComponent,
-                        FConnectionPathComponent,
-                        FConnectionTextComponent,
-                        FConnectionTextPathDirective,
-                        FConnectionSelectionComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        FTempConnectionComponent,
-                        FConnectionComponent
-                    ]
-                }]
-        }] });
-
-function getConnectionIntersect(fromRect, toRect) {
-    const fromResult = RectExtensions.intersectionWithVector(fromRect, fromRect.gravityCenter, toRect.gravityCenter);
-    const toResult = RectExtensions.intersectionWithVector(toRect, fromRect.gravityCenter, toRect.gravityCenter);
-    return {
-        point1: fromResult ? fromResult[1] : fromRect.gravityCenter,
-        point2: toResult ? toResult[0] : toRect.gravityCenter,
-    };
-}
-
 const F_NODE_COMPONENT = new InjectionToken('F_NODE_COMPONENT');
 class FNodeBase {
     constructor() {
         this.stateChanges = new Subject();
+        this._position = PointExtensions.initialize();
     }
     isContains(element) {
         return this.hostElement.contains(element);
@@ -939,8 +751,11 @@ class FNodeBase {
     select() {
         this.hostElement.classList.add(F_SELECTED_CLASS);
     }
+    isSelected() {
+        return this.hostElement.classList.contains(F_SELECTED_CLASS);
+    }
     updatePosition(position) {
-        this.position = position;
+        this._position = position;
     }
     completeDrag() {
         this.positionChange.emit(this.position);
@@ -1112,7 +927,6 @@ class FNodeComponent extends FNodeBase {
         super();
         this.elementReference = elementReference;
         this.id = `f-node-${uniqueId$3++}`;
-        this._position = PointExtensions.initialize();
         this.positionChange = new EventEmitter();
     }
     ngOnInit() {
@@ -1153,6 +967,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 args: ['fNodePositionChange']
             }] } });
 
+function isNode(element) {
+    return !!element.closest('[fNode]');
+}
+
 const F_SELECTION = new InjectionToken('F_SELECTION');
 class FSelectionDirective {
     get hostElement() {
@@ -1190,27 +1008,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class FNodesContainerComponent extends FNodesContainerBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference, ngZone) {
-        super(ngZone);
-        this.elementReference = elementReference;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodesContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FNodesContainerComponent, selector: "g[fNodesContainer]", host: { classAttribute: "f-nodes-container" }, providers: [{ provide: F_NODES_CONTAINER, useExisting: FNodesContainerComponent }], queries: [{ propertyName: "fNodes", predicate: F_NODE_COMPONENT, descendants: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content select=\"[fNode]\"></ng-content>\n</ng-container>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodesContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "g[fNodesContainer]", exportAs: 'fComponent', host: {
-                        'class': 'f-nodes-container'
-                    }, providers: [{ provide: F_NODES_CONTAINER, useExisting: FNodesContainerComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content select=\"[fNode]\"></ng-content>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { fNodes: [{
-                type: ContentChildren,
-                args: [F_NODE_COMPONENT, { descendants: true }]
-            }] } });
-
 const F_CONNECTIONS_CONTAINER = new InjectionToken('F_CONNECTIONS_CONTAINER');
 class FConnectionsContainerBase {
     findConnectionWithElement(element) {
@@ -1241,198 +1038,257 @@ function findOutgoingConnections(allConnections, outputs) {
     });
 }
 
-const F_BACKGROUND = new InjectionToken('F_BACKGROUND');
-class FBackgroundBase {
+class FConnectionsContainerComponent extends FConnectionsContainerBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, fCanvas) {
+    constructor(elementReference) {
+        super();
         this.elementReference = elementReference;
-        this.fCanvas = fCanvas;
-        this.transform = TransformModelExtensions.default();
-        console.log('FBackgroundBase');
     }
-    isBackgroundElement(element) {
-        return this.hostElement === element || this.hostElement.contains(element) || this.fCanvas.hostElement.contains(element);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FBackgroundBase, deps: [{ token: i0.ElementRef }, { token: FCanvasBase }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FBackgroundBase, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionsContainerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionsContainerComponent, selector: "g[fConnectionsContainer]", host: { classAttribute: "f-connections-container" }, providers: [{ provide: F_CONNECTIONS_CONTAINER, useExisting: FConnectionsContainerComponent }], queries: [{ propertyName: "fConnections", predicate: F_CONNECTION_COMPONENT, descendants: true }], viewQueries: [{ propertyName: "fTempConnection", first: true, predicate: F_TEMP_CONNECTION_COMPONENT, descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content select=\"[fConnection]\"></ng-content>\n  <svg:g fTempConnection></svg:g>\n</ng-container>\n", dependencies: [{ kind: "component", type: FTempConnectionComponent, selector: "g[fTempConnection]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FBackgroundBase, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FCanvasBase }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionsContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "g[fConnectionsContainer]", exportAs: 'fComponent', host: {
+                        'class': 'f-connections-container'
+                    }, providers: [{ provide: F_CONNECTIONS_CONTAINER, useExisting: FConnectionsContainerComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content select=\"[fConnection]\"></ng-content>\n  <svg:g fTempConnection></svg:g>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fConnections: [{
+                type: ContentChildren,
+                args: [F_CONNECTION_COMPONENT, { descendants: true }]
+            }], fTempConnection: [{
+                type: ViewChild,
+                args: [F_TEMP_CONNECTION_COMPONENT, { static: true }]
+            }] } });
 
-class FBackgroundDirective extends FBackgroundBase {
-    constructor(elementReference, fCanvas) {
-        super(elementReference, fCanvas);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FBackgroundDirective, deps: [{ token: i0.ElementRef }, { token: F_CANVAS }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FBackgroundDirective, isStandalone: true, selector: "g[fBackground]", providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundDirective }], usesInheritance: true, ngImport: i0 }); }
+function mixinChangeZoom(base) {
+    return class extends base {
+        setZoom(scaleValue, toPosition) {
+            if (scaleValue !== this.transform.scale) {
+                const summaryPosition = PointExtensions.sum(this.transform.scaledPosition, this.transform.position);
+                const newX = toPosition.x - (toPosition.x - summaryPosition.x) * scaleValue / this.transform.scale;
+                const newY = toPosition.y - (toPosition.y - summaryPosition.y) * scaleValue / this.transform.scale;
+                this.transform.scale = scaleValue;
+                this.transform.scaledPosition = PointExtensions.sub(PointExtensions.initialize(newX, newY), this.transform.position);
+            }
+        }
+        setScalePosition(value) {
+            this.transform.scaledPosition = value;
+        }
+        resetZoom() {
+            this.transform.scale = 1;
+            this.transform.scaledPosition = PointExtensions.initialize();
+        }
+        constructor(...args) {
+            super(...args);
+        }
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FBackgroundDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "g[fBackground]",
-                    standalone: true,
-                    providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundDirective }],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FCanvasBase, decorators: [{
-                    type: Inject,
-                    args: [F_CANVAS]
-                }] }]; } });
 
-let uniqueId$2 = 0;
-const CONNECTION_MARKER_START = "connection-marker-start";
-const CONNECTION_MARKER_END = "connection-marker-end";
-const CONNECTION_MARKER_START_SELECTED = "connection-marker-start-selected";
-const CONNECTION_MARKER_END_SELECTED = "connection-marker-end-selected";
-class FFlowComponent extends FFlowBase {
-    get transform() {
-        return this.fItemsContainer.transform;
-    }
-    constructor(elementReference, changeDetectorRef, ngZone) {
-        super(elementReference, changeDetectorRef, ngZone);
-        this.CONNECTION_MARKER_START = CONNECTION_MARKER_START;
-        this.CONNECTION_MARKER_END = CONNECTION_MARKER_END;
-        this.CONNECTION_MARKER_START_SELECTED = CONNECTION_MARKER_START_SELECTED;
-        this.CONNECTION_MARKER_END_SELECTED = CONNECTION_MARKER_END_SELECTED;
-        this.id = `f-flow-${uniqueId$2++}`;
+function mixinFitToParent(base) {
+    return class extends base {
+        fitToParent(rect, parentRect, points) {
+            this.transform.scaledPosition = PointExtensions.initialize();
+            this.transform.position = this.getZeroPositionWithoutScale(points);
+            const itemsContainerWidth = rect.width / this.transform.scale;
+            const itemsContainerHeight = rect.height / this.transform.scale;
+            if ((itemsContainerWidth > parentRect.width || itemsContainerHeight > parentRect.height) ||
+                itemsContainerWidth < parentRect.width && itemsContainerHeight < parentRect.height) {
+                this.transform.scale = Math.min(parentRect.width / itemsContainerWidth, parentRect.height / itemsContainerHeight);
+            }
+            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
+            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
+            this.transform.position = PointExtensions.initialize(newX, newY);
+        }
+        getZeroPositionWithoutScale(points) {
+            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
+            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
+            return PointExtensions.initialize(xPoint, yPoint);
+        }
+        constructor(...args) {
+            super(...args);
+        }
+    };
+}
+
+function mixinOneToOneCentering(base) {
+    return class extends base {
+        oneToOneCentering(rect, parentRect, points) {
+            this.transform.scaledPosition = PointExtensions.initialize();
+            this.transform.position = this.getZeroPositionWithoutScale(points);
+            const itemsContainerWidth = rect.width / this.transform.scale;
+            const itemsContainerHeight = rect.height / this.transform.scale;
+            this.transform.scale = 1;
+            const newX = (parentRect.width - itemsContainerWidth * this.transform.scale) / 2 - this.transform.position.x * this.transform.scale;
+            const newY = (parentRect.height - itemsContainerHeight * this.transform.scale) / 2 - this.transform.position.y * this.transform.scale;
+            this.transform.position = PointExtensions.initialize(newX, newY);
+        }
+        getZeroPositionWithoutScale(points) {
+            const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0;
+            const yPoint = points.length ? Math.min(...points.map((point) => point.y)) : 0;
+            return PointExtensions.initialize(xPoint, yPoint);
+        }
+        constructor(...args) {
+            super(...args);
+        }
+    };
+}
+
+function mixinChangePosition(base) {
+    return class extends base {
+        getPosition() {
+            return this.transform.position;
+        }
+        setPosition(position) {
+            this.transform.position = PointExtensions.copy(position);
+        }
+        constructor(...args) {
+            super(...args);
+        }
+    };
+}
+
+class CanvasChangeEvent {
+    constructor(position, scale) {
+        this.position = position;
+        this.scale = scale;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FFlowComponent, selector: "svg[fFlow]", inputs: { id: "id" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-flow" }, providers: [{ provide: F_FLOW_COMPONENT, useExisting: FFlowComponent }], queries: [{ propertyName: "fNodesContainer", first: true, predicate: F_NODES_CONTAINER, descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: F_CONNECTIONS_CONTAINER, descendants: true }, { propertyName: "fItemsContainer", first: true, predicate: F_ITEMS_CONTAINER, descendants: true, static: true }, { propertyName: "outlets", predicate: F_NODE_OUTLET_DIRECTIVE, descendants: true }, { propertyName: "outputs", predicate: F_NODE_OUTPUT_DIRECTIVE, descendants: true }, { propertyName: "inputs", predicate: F_NODE_INPUT_DIRECTIVE, descendants: true }], viewQueries: [{ propertyName: "fBackground", first: true, predicate: F_BACKGROUND, descendants: true, static: true }], usesInheritance: true, hostDirectives: [{ directive: FCanvasDirective }], ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <svg:g fBackground>\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#background)\"></rect>\n  </svg:g>\n  <ng-content></ng-content>\n  <svg:defs>\n    <svg:marker [id]=\"CONNECTION_MARKER_START\" class=\"connection-marker-start\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"2\"></svg:circle>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_END\" class=\"connection-marker-end\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n      <svg:path d=\"M0,0 L6,3 0,6Z\"></svg:path>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_START_SELECTED\" class=\"connection-marker-start f-selected\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"2\"></svg:circle>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_END_SELECTED\" class=\"connection-marker-end f-selected\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n      <svg:path d=\"M0,0 L6,3 0,6Z\"></svg:path>\n    </svg:marker>\n    <ng-container *ngIf=\"fConnectionsContainer\">\n      <ng-container *ngFor=\"let connection of fConnectionsContainer.fConnections.toArray()\">\n        <svg:marker [id]=\"'connection-marker-start-' + connection.fromTo?.output?.color\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n          <svg:circle cx=\"5\" cy=\"5\" r=\"2\" [attr.stroke]=\"'none'\" [attr.fill]=\"connection.fromTo?.output?.color\"></svg:circle>\n        </svg:marker>\n        <svg:marker [id]=\"'connection-marker-end-' + connection.fromTo?.input?.color\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n          <svg:path d=\"M0,0 L6,3 0,6Z\" [attr.stroke]=\"'none'\" [attr.fill]=\"connection.fromTo?.input?.color\"></svg:path>\n        </svg:marker>\n      </ng-container>\n\n    </ng-container>\n    <svg:pattern id=\"background\" height=\"10\" width=\"10\" class=\"fb-background-pattern\"\n                 patternUnits=\"userSpaceOnUse\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"0.5\"/>\n    </svg:pattern>\n  </svg:defs>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FBackgroundDirective, selector: "g[fBackground]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'svg[fFlow]', hostDirectives: [
-                        {
-                            directive: FCanvasDirective
-                        }
-                    ], host: {
-                        '[attr.id]': 'id',
-                        class: "f-component f-flow"
-                    }, providers: [{ provide: F_FLOW_COMPONENT, useExisting: FFlowComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <svg:g fBackground>\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#background)\"></rect>\n  </svg:g>\n  <ng-content></ng-content>\n  <svg:defs>\n    <svg:marker [id]=\"CONNECTION_MARKER_START\" class=\"connection-marker-start\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"2\"></svg:circle>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_END\" class=\"connection-marker-end\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n      <svg:path d=\"M0,0 L6,3 0,6Z\"></svg:path>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_START_SELECTED\" class=\"connection-marker-start f-selected\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"2\"></svg:circle>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_END_SELECTED\" class=\"connection-marker-end f-selected\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n      <svg:path d=\"M0,0 L6,3 0,6Z\"></svg:path>\n    </svg:marker>\n    <ng-container *ngIf=\"fConnectionsContainer\">\n      <ng-container *ngFor=\"let connection of fConnectionsContainer.fConnections.toArray()\">\n        <svg:marker [id]=\"'connection-marker-start-' + connection.fromTo?.output?.color\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n          <svg:circle cx=\"5\" cy=\"5\" r=\"2\" [attr.stroke]=\"'none'\" [attr.fill]=\"connection.fromTo?.output?.color\"></svg:circle>\n        </svg:marker>\n        <svg:marker [id]=\"'connection-marker-end-' + connection.fromTo?.input?.color\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n          <svg:path d=\"M0,0 L6,3 0,6Z\" [attr.stroke]=\"'none'\" [attr.fill]=\"connection.fromTo?.input?.color\"></svg:path>\n        </svg:marker>\n      </ng-container>\n\n    </ng-container>\n    <svg:pattern id=\"background\" height=\"10\" width=\"10\" class=\"fb-background-pattern\"\n                 patternUnits=\"userSpaceOnUse\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"0.5\"/>\n    </svg:pattern>\n  </svg:defs>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { id: [{
-                type: Input
-            }], fNodesContainer: [{
-                type: ContentChild,
-                args: [F_NODES_CONTAINER, { static: true }]
-            }], fConnectionsContainer: [{
-                type: ContentChild,
-                args: [F_CONNECTIONS_CONTAINER, { descendants: true }]
-            }], fItemsContainer: [{
-                type: ContentChild,
-                args: [F_ITEMS_CONTAINER, { static: true }]
-            }], fBackground: [{
-                type: ViewChild,
-                args: [F_BACKGROUND, { static: true }]
-            }], outlets: [{
-                type: ContentChildren,
-                args: [F_NODE_OUTLET_DIRECTIVE, { descendants: true }]
-            }], outputs: [{
-                type: ContentChildren,
-                args: [F_NODE_OUTPUT_DIRECTIVE, { descendants: true }]
-            }], inputs: [{
-                type: ContentChildren,
-                args: [F_NODE_INPUT_DIRECTIVE, { descendants: true }]
-            }] } });
 
-let uniqueId$1 = 0;
-class FConnectionComponent extends FConnectionBase {
+const F_ITEMS_CONTAINER = new InjectionToken('F_ITEMS_CONTAINER');
+const MIXIN_BASE = mixinChangePosition(mixinFitToParent(mixinOneToOneCentering(mixinChangeZoom(class {
+    constructor(transform) {
+        this.transform = transform;
+    }
+}))));
+class FItemsContainerBase extends MIXIN_BASE {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference, flow) {
-        super();
+    constructor(elementReference) {
+        super(TransformModelExtensions.default());
         this.elementReference = elementReference;
-        this.flow = flow;
-        this.id = `f-connection-${uniqueId$1++}`;
-    }
-    initialize() {
-        const vector = getConnectionIntersect(this.fromTo.output.getElementRectInCanvas(this.flow.transform, this.flow.hostElement), this.fromTo.input.getElementRectInCanvas(this.flow.transform, this.flow.hostElement));
-        this.setVector(vector);
-        this.redraw();
-    }
-    initializeDrag() {
+        this.parseData();
     }
-    setVector(vector) {
-        this.vector = vector;
-        this.path = `M${vector.point1.x},${vector.point1.y}L${vector.point2.x + 0.0001},${vector.point2.y + 0.0001}`;
+    parseData() {
+        const transform = TransformModelExtensions.fromString(this.hostElement.getAttribute("transform"));
+        this.transform = transform ? transform : this.transform;
     }
     redraw() {
-        this.fPath.setPath(this.path);
-        this.fSelection.setPath(this.path);
-        this.fGradient.redraw(this.vector);
-        this.fDragHandle.redraw(this.vector.point2);
-        this.fText.redraw(this.vector);
-    }
-    select() {
-        this.fPath.select();
-        super.select();
+        this.hostElement.setAttribute("transform", TransformModelExtensions.toString(this.transform));
     }
-    deselect() {
-        this.fPath.deselect();
-        super.deselect();
+    redrawWithAnimation() {
+        this.hostElement.setAttribute("style", 'transition: transform 0.15s ease-in-out');
+        this.redraw();
+        setTimeout(() => {
+            this.hostElement.removeAttribute("style");
+        }, 150);
     }
     completeDrag() {
+        const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
+        this.canvasChange.emit(new CanvasChangeEvent(position, this.transform.scale));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FItemsContainerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FItemsContainerBase, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FItemsContainerBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class FItemsContainerDirective extends FItemsContainerBase {
+    set position(value) {
+        const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
+        if (!PointExtensions.isEqual(position, value)) {
+            this.transform.position = value;
+            this.transform.scaledPosition = PointExtensions.initialize();
+            this.redraw();
+        }
+    }
+    set scale(value) {
+        this.transform.scale = value;
         this.redraw();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: F_FLOW_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionComponent, selector: "g[fConnection]", inputs: { id: "id", outputId: "outputId", inputId: "inputId" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION_COMPONENT, useExisting: FConnectionComponent }], viewQueries: [{ propertyName: "fPath", first: true, predicate: FConnectionPathComponent, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: FConnectionGradientComponent, 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: "fText", first: true, predicate: FConnectionTextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:linearGradient fConnectionGradient [fromTo]=\"fromTo\"></svg:linearGradient>\n    <svg:path fConnectionSelection [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n    <svg:g>\n        <svg:path f-connection-path [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n        <svg:circle f-connection-drag-handle r=\"8\"></svg:circle>\n    </svg:g>\n    <svg:text f-connection-text [fromTo]=\"fromTo\"></svg:text>\n</ng-container>\n", dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]", inputs: ["fromTo"] }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]", inputs: ["fromTo"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]", inputs: ["fromTo"] }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]", inputs: ["fromTo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    constructor(elementReference) {
+        super(elementReference);
+        this.canvasChange = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FItemsContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FItemsContainerDirective, selector: "g[fItemsContainer]", inputs: { position: "position", scale: "scale" }, outputs: { canvasChange: "canvasChange" }, host: { classAttribute: "f-items-container" }, providers: [{ provide: F_ITEMS_CONTAINER, useExisting: FItemsContainerDirective }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "g[fConnection]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'id',
-                        class: "f-component f-connection"
-                    }, providers: [{ provide: F_CONNECTION_COMPONENT, useExisting: FConnectionComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:linearGradient fConnectionGradient [fromTo]=\"fromTo\"></svg:linearGradient>\n    <svg:path fConnectionSelection [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n    <svg:g>\n        <svg:path f-connection-path [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n        <svg:circle f-connection-drag-handle r=\"8\"></svg:circle>\n    </svg:g>\n    <svg:text f-connection-text [fromTo]=\"fromTo\"></svg:text>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FFlowBase, decorators: [{
-                    type: Inject,
-                    args: [F_FLOW_COMPONENT]
-                }] }]; }, propDecorators: { id: [{
-                type: Input
-            }], outputId: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FItemsContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "g[fItemsContainer]",
+                    exportAs: 'fComponent',
+                    host: {
+                        'class': 'f-items-container'
+                    },
+                    providers: [{ provide: F_ITEMS_CONTAINER, useExisting: FItemsContainerDirective }],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { canvasChange: [{
+                type: Output
+            }], position: [{
                 type: Input
-            }], inputId: [{
+            }], scale: [{
                 type: Input
-            }], fPath: [{
-                type: ViewChild,
-                args: [FConnectionPathComponent, { static: true }]
-            }], fGradient: [{
-                type: ViewChild,
-                args: [FConnectionGradientComponent, { static: true }]
-            }], fDragHandle: [{
-                type: ViewChild,
-                args: [FConnectionDragHandleComponent, { static: true }]
-            }], fSelection: [{
-                type: ViewChild,
-                args: [FConnectionSelectionComponent, { static: true }]
-            }], fText: [{
-                type: ViewChild,
-                args: [FConnectionTextComponent, { static: true }]
             }] } });
 
-class FConnectionsContainerComponent extends FConnectionsContainerBase {
+const F_NODES_CONTAINER = new InjectionToken('F_NODES_CONTAINER');
+class FNodesContainerBase {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.stateChanges = defer(() => {
+            const items = this.fNodes;
+            if (items) {
+                return items.changes.pipe(startWith(items), switchMap(() => merge(...items.map(x => merge(x.fForeignObject.stateChanges, x.stateChanges)))));
+            }
+            return this.ngZone.onStable.pipe(take(1), switchMap(() => this.stateChanges));
+        });
+    }
+    findNode(element) {
+        return this.fNodes.find((x) => {
+            return x.isContains(element);
+        });
+    }
+    setNodeToTopLayer(node) {
+        const elements = Array.from(this.hostElement.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.hostElement.removeChild(x);
+                this.hostElement.insertBefore(x, node.hostElement);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodesContainerBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FNodesContainerBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodesContainerBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
+class FNodesContainerComponent extends FNodesContainerBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference) {
-        super();
+    constructor(elementReference, ngZone) {
+        super(ngZone);
         this.elementReference = elementReference;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionsContainerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionsContainerComponent, selector: "g[fConnectionsContainer]", host: { classAttribute: "f-connections-container" }, providers: [{ provide: F_CONNECTIONS_CONTAINER, useExisting: FConnectionsContainerComponent }], queries: [{ propertyName: "fConnections", predicate: F_CONNECTION_COMPONENT, descendants: true }], viewQueries: [{ propertyName: "fTempConnection", first: true, predicate: F_TEMP_CONNECTION_COMPONENT, descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content select=\"[fConnection]\"></ng-content>\n  <svg:g fTempConnection></svg:g>\n</ng-container>\n", dependencies: [{ kind: "component", type: FTempConnectionComponent, selector: "g[fTempConnection]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodesContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FNodesContainerComponent, selector: "g[fNodesContainer]", host: { classAttribute: "f-nodes-container" }, providers: [{ provide: F_NODES_CONTAINER, useExisting: FNodesContainerComponent }], queries: [{ propertyName: "fNodes", predicate: F_NODE_COMPONENT, descendants: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content select=\"[fNode]\"></ng-content>\n</ng-container>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionsContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodesContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "g[fConnectionsContainer]", exportAs: 'fComponent', host: {
-                        'class': 'f-connections-container'
-                    }, providers: [{ provide: F_CONNECTIONS_CONTAINER, useExisting: FConnectionsContainerComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content select=\"[fConnection]\"></ng-content>\n  <svg:g fTempConnection></svg:g>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fConnections: [{
+            args: [{ selector: "g[fNodesContainer]", exportAs: 'fComponent', host: {
+                        'class': 'f-nodes-container'
+                    }, providers: [{ provide: F_NODES_CONTAINER, useExisting: FNodesContainerComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content select=\"[fNode]\"></ng-content>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { fNodes: [{
                 type: ContentChildren,
-                args: [F_CONNECTION_COMPONENT, { descendants: true }]
-            }], fTempConnection: [{
-                type: ViewChild,
-                args: [F_TEMP_CONNECTION_COMPONENT, { static: true }]
+                args: [F_NODE_COMPONENT, { descendants: true }]
             }] } });
 
 var EDraggableType;
@@ -1823,10 +1679,13 @@ class ReassignConnectionOnPointerUp {
         this.onReassignConnection = onReassignConnection;
     }
     handle(payload) {
+        console.log('ReassignConnectionOnPointerUp', payload);
         const isReassignConnection = payload.dragHandler.draggableItems.some((x) => x.type === EDraggableType.REASSIGN_CONNECTION);
         if (isReassignConnection) {
+            console.log('ReassignConnectionOnPointerUp - isReassignConnection');
             const handler = payload.dragHandler.draggableItems[0];
             const inputsUnderPointer = new FindInputsUnderPointerHandler(this.fFlow).handle(new FindInputsUnderPointerRequest(payload.event, handler));
+            console.log(inputsUnderPointer);
             if (inputsUnderPointer.length > 0) {
                 if (handler.connection.fromTo?.input?.id !== inputsUnderPointer[0]?.id) {
                     this.onReassignConnection.emit(new ReassignConnectionEvent(handler.connection.id, handler.connection.fromTo?.output.id, handler.connection.fromTo?.input?.id, inputsUnderPointer[0]?.id));
@@ -1899,7 +1758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
             type: Injectable
         }] });
 
-let uniqueId = 0;
+let uniqueId$2 = 0;
 class FExternalItemDirective extends FExternalItemBase {
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -1908,7 +1767,7 @@ class FExternalItemDirective extends FExternalItemBase {
         super();
         this.elementReference = elementReference;
         this.fExternalItemService = fExternalItemService;
-        this.id = `f-external-item-${uniqueId++}`;
+        this.id = `f-external-item-${uniqueId$2++}`;
     }
     ngOnInit() {
         this.fExternalItemService.registerItem(this);
@@ -2298,7 +2157,9 @@ class SelectionOnPointerDown {
         let node = this.fFlow.fNodesContainer.findNode(payload.event.targetElement);
         const connection = this.fFlow.fConnectionsContainer.findConnectionWithElement(payload.event.targetElement);
         payload.selectedItems.forEach((x) => {
-            x.deselect();
+            if (x !== node || (!isNodeOutlet(payload.event.targetElement) && !isNodeOutput(payload.event.targetElement))) {
+                x.deselect();
+            }
         });
         const isMultiselect = MouseEventExtensions.isCommandButton(payload.event.originalEvent) ||
             MouseEventExtensions.isShiftPressed(payload.event.originalEvent);
@@ -2306,9 +2167,6 @@ class SelectionOnPointerDown {
             payload.selectedItems = [];
         }
         if (node) {
-            if (isNodeOutlet(payload.event.targetElement) || isNodeOutput(payload.event.targetElement)) {
-                node = undefined;
-            }
             if (node) {
                 if (!payload.selectedItems.includes(node)) {
                     payload.selectedItems.push(node);
@@ -2327,7 +2185,9 @@ class SelectionOnPointerDown {
             }
         }
         payload.selectedItems.forEach((x) => {
-            x.select();
+            if (!x.isSelected()) {
+                x.select();
+            }
         });
         let draggableItems = [];
         if (MouseEventExtensions.isShiftPressed(payload.event.originalEvent)) {
@@ -2899,7 +2759,8 @@ class FZoomBase {
         this.fItemsContainer.completeDrag();
     }
     onZoomToCenter(deltaY) {
-        const preventDefault = () => { };
+        const preventDefault = () => {
+        };
         const rect = RectExtensions.fromElement(this.fCanvas.hostElement);
         this.onWheel({
             deltaY, preventDefault, clientX: rect.gravityCenter.x, clientY: rect.gravityCenter.y
@@ -2907,7 +2768,7 @@ class FZoomBase {
     }
     onDoubleClick(event) {
         event.preventDefault();
-        if (this.fDnd.isDragStarted) {
+        if (this.fDnd.isDragStarted || isNode(event.target)) {
             return;
         }
         let result = this.getScale();
@@ -2977,6 +2838,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 args: ['fZoom']
             }] } });
 
+const F_FLOW_COMPONENT = new InjectionToken('F_FLOW_COMPONENT');
+class FFlowBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, changeDetectorRef, ngZone) {
+        this.elementReference = elementReference;
+        this.changeDetectorRef = changeDetectorRef;
+        this.ngZone = ngZone;
+        this.onDestroy = new Subject();
+    }
+    ngAfterContentInit() {
+        this.subscribeOnComponentsChanges();
+    }
+    subscribeOnComponentsChanges() {
+        const changes = [
+            this.fNodesContainer.fNodes.changes,
+            this.fConnectionsContainer.fConnections.changes,
+            this.outlets.changes,
+            this.outputs.changes,
+            this.inputs.changes
+        ];
+        merge(...changes).pipe(startWith(null), takeUntil(this.onDestroy)).subscribe(() => {
+            const changedOrDestroyed = merge(...changes, this.onDestroy);
+            merge(this.fNodesContainer.stateChanges).pipe(startWith(null), takeUntil(changedOrDestroyed)).subscribe(() => {
+                this.fConnectionsContainer.fConnections.forEach((connection) => {
+                    connection.fromTo = {
+                        output: this.outputs.find((x) => x.id === connection.outputId),
+                        input: this.inputs.find((x) => x.id === connection.inputId)
+                    };
+                    connection.initialize();
+                });
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowBase, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FFlowBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; } });
+
+let uniqueId$1 = 0;
+const CONNECTION_MARKER_START = "connection-marker-start";
+const CONNECTION_MARKER_END = "connection-marker-end";
+const CONNECTION_MARKER_START_SELECTED = "connection-marker-start-selected";
+const CONNECTION_MARKER_END_SELECTED = "connection-marker-end-selected";
+class FFlowComponent extends FFlowBase {
+    get transform() {
+        return this.fItemsContainer.transform;
+    }
+    constructor(elementReference, changeDetectorRef, ngZone) {
+        super(elementReference, changeDetectorRef, ngZone);
+        this.CONNECTION_MARKER_START = CONNECTION_MARKER_START;
+        this.CONNECTION_MARKER_END = CONNECTION_MARKER_END;
+        this.CONNECTION_MARKER_START_SELECTED = CONNECTION_MARKER_START_SELECTED;
+        this.CONNECTION_MARKER_END_SELECTED = CONNECTION_MARKER_END_SELECTED;
+        this.id = `f-flow-${uniqueId$1++}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FFlowComponent, selector: "svg[fFlow]", inputs: { id: "id" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-flow" }, providers: [{ provide: F_FLOW_COMPONENT, useExisting: FFlowComponent }], queries: [{ propertyName: "fNodesContainer", first: true, predicate: F_NODES_CONTAINER, descendants: true, static: true }, { propertyName: "fConnectionsContainer", first: true, predicate: F_CONNECTIONS_CONTAINER, descendants: true }, { propertyName: "fItemsContainer", first: true, predicate: F_ITEMS_CONTAINER, descendants: true, static: true }, { propertyName: "outlets", predicate: F_NODE_OUTLET_DIRECTIVE, descendants: true }, { propertyName: "outputs", predicate: F_NODE_OUTPUT_DIRECTIVE, descendants: true }, { propertyName: "inputs", predicate: F_NODE_INPUT_DIRECTIVE, descendants: true }], viewQueries: [{ propertyName: "fBackground", first: true, predicate: F_BACKGROUND, descendants: true, static: true }], usesInheritance: true, hostDirectives: [{ directive: FCanvasDirective }], ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <svg:g fBackground>\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#background)\"></rect>\n  </svg:g>\n  <ng-content></ng-content>\n  <svg:defs>\n    <svg:marker [id]=\"CONNECTION_MARKER_START\" class=\"connection-marker-start\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"2\"></svg:circle>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_END\" class=\"connection-marker-end\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n      <svg:path d=\"M0,0 L6,3 0,6Z\"></svg:path>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_START_SELECTED\" class=\"connection-marker-start f-selected\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"2\"></svg:circle>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_END_SELECTED\" class=\"connection-marker-end f-selected\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n      <svg:path d=\"M0,0 L6,3 0,6Z\"></svg:path>\n    </svg:marker>\n    <ng-container *ngIf=\"fConnectionsContainer\">\n      <ng-container *ngFor=\"let connection of fConnectionsContainer.fConnections.toArray()\">\n        <svg:marker [id]=\"'connection-marker-start-' + connection.fromTo?.output?.color\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n          <svg:circle cx=\"5\" cy=\"5\" r=\"2\" [attr.stroke]=\"'none'\" [attr.fill]=\"connection.fromTo?.output?.color\"></svg:circle>\n        </svg:marker>\n        <svg:marker [id]=\"'connection-marker-end-' + connection.fromTo?.input?.color\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n          <svg:path d=\"M0,0 L6,3 0,6Z\" [attr.stroke]=\"'none'\" [attr.fill]=\"connection.fromTo?.input?.color\"></svg:path>\n        </svg:marker>\n      </ng-container>\n\n    </ng-container>\n    <svg:pattern id=\"background\" height=\"10\" width=\"10\" class=\"fb-background-pattern\"\n                 patternUnits=\"userSpaceOnUse\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"0.5\"/>\n    </svg:pattern>\n  </svg:defs>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FBackgroundDirective, selector: "g[fBackground]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'svg[fFlow]', hostDirectives: [
+                        {
+                            directive: FCanvasDirective
+                        }
+                    ], host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-flow"
+                    }, providers: [{ provide: F_FLOW_COMPONENT, useExisting: FFlowComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <svg:g fBackground>\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#background)\"></rect>\n  </svg:g>\n  <ng-content></ng-content>\n  <svg:defs>\n    <svg:marker [id]=\"CONNECTION_MARKER_START\" class=\"connection-marker-start\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"2\"></svg:circle>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_END\" class=\"connection-marker-end\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n      <svg:path d=\"M0,0 L6,3 0,6Z\"></svg:path>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_START_SELECTED\" class=\"connection-marker-start f-selected\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"2\"></svg:circle>\n    </svg:marker>\n    <svg:marker [id]=\"CONNECTION_MARKER_END_SELECTED\" class=\"connection-marker-end f-selected\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n      <svg:path d=\"M0,0 L6,3 0,6Z\"></svg:path>\n    </svg:marker>\n    <ng-container *ngIf=\"fConnectionsContainer\">\n      <ng-container *ngFor=\"let connection of fConnectionsContainer.fConnections.toArray()\">\n        <svg:marker [id]=\"'connection-marker-start-' + connection.fromTo?.output?.color\" markerHeight=\"10\" markerWidth=\"10\" refY=\"5\" refX=\"5\">\n          <svg:circle cx=\"5\" cy=\"5\" r=\"2\" [attr.stroke]=\"'none'\" [attr.fill]=\"connection.fromTo?.output?.color\"></svg:circle>\n        </svg:marker>\n        <svg:marker [id]=\"'connection-marker-end-' + connection.fromTo?.input?.color\" markerHeight=\"10\" markerWidth=\"10\" orient=\"auto\" refX=\"5\" refY=\"3\">\n          <svg:path d=\"M0,0 L6,3 0,6Z\" [attr.stroke]=\"'none'\" [attr.fill]=\"connection.fromTo?.input?.color\"></svg:path>\n        </svg:marker>\n      </ng-container>\n\n    </ng-container>\n    <svg:pattern id=\"background\" height=\"10\" width=\"10\" class=\"fb-background-pattern\"\n                 patternUnits=\"userSpaceOnUse\">\n      <svg:circle cx=\"5\" cy=\"5\" r=\"0.5\"/>\n    </svg:pattern>\n  </svg:defs>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { id: [{
+                type: Input
+            }], fNodesContainer: [{
+                type: ContentChild,
+                args: [F_NODES_CONTAINER, { static: true }]
+            }], fConnectionsContainer: [{
+                type: ContentChild,
+                args: [F_CONNECTIONS_CONTAINER, { descendants: true }]
+            }], fItemsContainer: [{
+                type: ContentChild,
+                args: [F_ITEMS_CONTAINER, { static: true }]
+            }], fBackground: [{
+                type: ViewChild,
+                args: [F_BACKGROUND, { static: true }]
+            }], outlets: [{
+                type: ContentChildren,
+                args: [F_NODE_OUTLET_DIRECTIVE, { descendants: true }]
+            }], outputs: [{
+                type: ContentChildren,
+                args: [F_NODE_OUTPUT_DIRECTIVE, { descendants: true }]
+            }], inputs: [{
+                type: ContentChildren,
+                args: [F_NODE_INPUT_DIRECTIVE, { descendants: true }]
+            }] } });
+
+let uniqueId = 0;
+class FConnectionComponent extends FConnectionBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, flow) {
+        super();
+        this.elementReference = elementReference;
+        this.flow = flow;
+        this.id = `f-connection-${uniqueId++}`;
+    }
+    initialize() {
+        const vector = getConnectionIntersect(this.fromTo.output.getElementRectInCanvas(this.flow.transform, this.flow.hostElement), this.fromTo.input.getElementRectInCanvas(this.flow.transform, this.flow.hostElement));
+        this.setVector(vector);
+        this.redraw();
+    }
+    initializeDrag() {
+    }
+    setVector(vector) {
+        this.vector = vector;
+        this.path = `M${vector.point1.x},${vector.point1.y}L${vector.point2.x + 0.0001},${vector.point2.y + 0.0001}`;
+    }
+    redraw() {
+        this.fPath.setPath(this.path);
+        this.fSelection.setPath(this.path);
+        this.fGradient.redraw(this.vector);
+        this.fDragHandle.redraw(this.vector.point2);
+        this.fText.redraw(this.vector);
+    }
+    select() {
+        this.fPath.select();
+        super.select();
+    }
+    deselect() {
+        this.fPath.deselect();
+        super.deselect();
+    }
+    completeDrag() {
+        this.redraw();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: F_FLOW_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionComponent, selector: "g[fConnection]", inputs: { id: "id", outputId: "outputId", inputId: "inputId" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION_COMPONENT, useExisting: FConnectionComponent }], viewQueries: [{ propertyName: "fPath", first: true, predicate: FConnectionPathComponent, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: FConnectionGradientComponent, 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: "fText", first: true, predicate: FConnectionTextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:linearGradient fConnectionGradient [fromTo]=\"fromTo\"></svg:linearGradient>\n    <svg:path fConnectionSelection [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n    <svg:g>\n        <svg:path f-connection-path [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n        <svg:circle f-connection-drag-handle r=\"8\"></svg:circle>\n    </svg:g>\n    <svg:text f-connection-text [fromTo]=\"fromTo\"></svg:text>\n</ng-container>\n", dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]", inputs: ["fromTo"] }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]", inputs: ["fromTo"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]", inputs: ["fromTo"] }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]", inputs: ["fromTo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "g[fConnection]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-connection"
+                    }, providers: [{ provide: F_CONNECTION_COMPONENT, useExisting: FConnectionComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:linearGradient fConnectionGradient [fromTo]=\"fromTo\"></svg:linearGradient>\n    <svg:path fConnectionSelection [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n    <svg:g>\n        <svg:path f-connection-path [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n        <svg:circle f-connection-drag-handle r=\"8\"></svg:circle>\n    </svg:g>\n    <svg:text f-connection-text [fromTo]=\"fromTo\"></svg:text>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FFlowBase, decorators: [{
+                    type: Inject,
+                    args: [F_FLOW_COMPONENT]
+                }] }]; }, propDecorators: { id: [{
+                type: Input
+            }], outputId: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], fPath: [{
+                type: ViewChild,
+                args: [FConnectionPathComponent, { static: true }]
+            }], fGradient: [{
+                type: ViewChild,
+                args: [FConnectionGradientComponent, { static: true }]
+            }], fDragHandle: [{
+                type: ViewChild,
+                args: [FConnectionDragHandleComponent, { static: true }]
+            }], fSelection: [{
+                type: ViewChild,
+                args: [FConnectionSelectionComponent, { static: true }]
+            }], fText: [{
+                type: ViewChild,
+                args: [FConnectionTextComponent, { static: true }]
+            }] } });
+
 class FFlowModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: FFlowModule, declarations: [FFlowComponent,
@@ -3051,5 +3088,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CONNECTION_MARKER_END, CONNECTION_MARKER_END_SELECTED, CONNECTION_MARKER_START, CONNECTION_MARKER_START_SELECTED, FCanvasDirective, FConnectIfIntersectDirective, FConnectionComponent, FConnectionModule, FConnectionsContainerComponent, FDragHandleDirective, FDraggableDirective, FExternalItemDirective, FFlowComponent, FFlowModule, FForeignObjectComponent, FItemsContainerDirective, FLineAlignmentDirective, FNodeComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FNodesContainerComponent, FSelectionDirective, FTempConnectionComponent, FZoomDirective, F_CONNECT_IF_INTERSECT, F_DRAG_HANDLE, F_LINE_ALIGNMENT, F_SELECTION, F_TEMP_CONNECTION_COMPONENT };
+export { CONNECTION_MARKER_END, CONNECTION_MARKER_END_SELECTED, CONNECTION_MARKER_START, CONNECTION_MARKER_START_SELECTED, CanvasChangeEvent, FCanvasDirective, FConnectIfIntersectDirective, FConnectionComponent, FConnectionModule, FConnectionsContainerComponent, FDragHandleDirective, FDraggableDirective, FExternalItemDirective, FFlowComponent, FFlowModule, FForeignObjectComponent, FItemsContainerDirective, FLineAlignmentDirective, FNodeComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FNodesContainerComponent, FSelectionDirective, FTempConnectionComponent, FZoomDirective, F_CONNECT_IF_INTERSECT, F_DRAG_HANDLE, F_LINE_ALIGNMENT, F_SELECTION, F_TEMP_CONNECTION_COMPONENT };
 //# sourceMappingURL=foblex-flow.mjs.map