@foblex/flow 1.1.7 → 1.1.9

package/fesm2022/foblex-flow.mjs

@@ -560,6 +560,8 @@ function isNodeInput(element) {
     return !!element.closest('[fNodeInput]');
 }
 
+const F_FLOW_CONNECTOR_PARENT = new InjectionToken('F_FLOW_CONNECTOR_PARENT');
+
 let uniqueId$7 = 0;
 class FNodeInputDirective extends FNodeInputBase {
     get color() {
@@ -578,14 +580,19 @@ class FNodeInputDirective extends FNodeInputBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference) {
+    constructor(elementReference, _parentFlow) {
         super();
         this.elementReference = elementReference;
+        this._parentFlow = _parentFlow;
         this.id = `f-node-input-${uniqueId$7++}`;
         this.multiple = true;
         this.isDisabled = false;
+        this._parentFlow?.addConnector(this);
+    }
+    ngOnDestroy() {
+        this._parentFlow?.removeConnector(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }, { token: F_FLOW_CONNECTOR_PARENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: "id", fNodeInputColor: "fNodeInputColor", multiple: ["fNodeInputMultiple", "multiple"], disabled: ["fNodeInputDisabled", "disabled"] }, host: { properties: { "attr.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_DIRECTIVE, useExisting: FNodeInputDirective }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeInputDirective, decorators: [{
@@ -601,7 +608,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                     providers: [{ provide: F_NODE_INPUT_DIRECTIVE, useExisting: FNodeInputDirective }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [F_FLOW_CONNECTOR_PARENT]
+                }, {
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { id: [{
                 type: Input
             }], fNodeInputColor: [{
                 type: Input,
@@ -655,16 +669,21 @@ class FNodeOutletDirective extends FNodeOutletBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference) {
+    constructor(elementReference, _parentFlow) {
         super();
         this.elementReference = elementReference;
+        this._parentFlow = _parentFlow;
         this.id = `f-node-outlet-${uniqueId$6++}`;
         this.color = 'black';
         this.name = '';
         this.isDisabled = false;
         this.isConnectionFromOutlet = false;
+        this._parentFlow?.addConnector(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    ngOnDestroy() {
+        this._parentFlow?.removeConnector(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }, { token: F_FLOW_CONNECTOR_PARENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: "id", color: ["fNodeOutletColor", "color"], name: "name", disabled: ["fNodeOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.id": "id", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET_DIRECTIVE, useExisting: FNodeOutletDirective }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutletDirective, decorators: [{
@@ -678,7 +697,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                     providers: [{ provide: F_NODE_OUTLET_DIRECTIVE, useExisting: FNodeOutletDirective }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [F_FLOW_CONNECTOR_PARENT]
+                }, {
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { id: [{
                 type: Input
             }], color: [{
                 type: Input,
@@ -727,15 +753,20 @@ class FNodeOutputDirective extends FNodeOutputBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
-    constructor(elementReference) {
+    constructor(elementReference, _parentFlow) {
         super();
         this.elementReference = elementReference;
+        this._parentFlow = _parentFlow;
         this.id = `f-node-output-${uniqueId$5++}`;
         this.color = 'black';
         this.name = '';
         this.isDisabled = false;
+        this._parentFlow?.addConnector(this);
+    }
+    ngOnDestroy() {
+        this._parentFlow?.removeConnector(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }, { token: F_FLOW_CONNECTOR_PARENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: "id", color: ["fNodeOutputColor", "color"], name: "name", disabled: ["fNodeOutputDisabled", "disabled"] }, host: { properties: { "attr.id": "id", "class.f-node-output-disabled": "disabled", "class.f-node-output-connected": "isConnected" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT_DIRECTIVE, useExisting: FNodeOutputDirective }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutputDirective, decorators: [{
@@ -750,7 +781,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                     providers: [{ provide: F_NODE_OUTPUT_DIRECTIVE, useExisting: FNodeOutputDirective }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [F_FLOW_CONNECTOR_PARENT]
+                }, {
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { id: [{
                 type: Input
             }], color: [{
                 type: Input,
@@ -2050,10 +2088,10 @@ class NodeOnPointerDown {
         return itemsToDrag;
     }
     getInputsForNode(node) {
-        return this.fFlow.inputs.toArray().filter((x) => node.isContains(x.hostElement));
+        return this.fFlow.inputs.filter((x) => node.isContains(x.hostElement));
     }
     getOutputsForNode(node) {
-        return this.fFlow.outputs.toArray().filter((x) => node.isContains(x.hostElement));
+        return this.fFlow.outputs.filter((x) => node.isContains(x.hostElement));
     }
 }
 
@@ -2103,13 +2141,13 @@ class SelectionOnPointerMove {
         const nodeRects = fFlow.fNodesContainer.fNodes.map((x) => {
             return {
                 element: x,
-                rect: getElementRectInCanvas(x.hostElement, fFlow.transform, this.fFlow.hostElement)
+                rect: RectExtensions.mult(getElementRectInCanvas(x.hostElement, fFlow.transform, this.fFlow.hostElement), fFlow.transform.scale)
             };
         });
         const lineRects = fFlow.fConnectionsContainer.fConnections.map((x) => {
             return {
                 element: x,
-                rect: getElementRectInCanvas(x.fPath.hostElement, fFlow.transform, this.fFlow.hostElement)
+                rect: RectExtensions.mult(getElementRectInCanvas(x.fPath.hostElement, fFlow.transform, this.fFlow.hostElement), fFlow.transform.scale)
             };
         });
         this.items = [...nodeRects, ...lineRects].filter((x) => {
@@ -2664,12 +2702,9 @@ class ConnectIfIntersectHandler {
             const incomingConnections = findIncomingConnections(this.connections, [input]);
             if (outgoingConnections.length === 0 && incomingConnections.length === 0) {
                 const connections = this.findConnectionsUnderNode(fNode);
-                console.log('connections', connections);
-                // if (connections.length) {
-                //   const connectedTo = (connections[ 0 ].fromTo?.output as FNodeOutputBase).connectedTo;
-                //   (connections[ 0 ].fromTo?.output as FNodeOutputBase).connectTo(input.id);
-                //   output.connectTo(connectedTo);
-                // }
+                if (connections.length) {
+                    console.log('connections', connections);
+                }
             }
         }
     }
@@ -2892,6 +2927,7 @@ class FFlowBase {
         this.changeDetectorRef = changeDetectorRef;
         this.ngZone = ngZone;
         this.onDestroy = new Subject();
+        this.connectorChanges = new Subject();
     }
     ngAfterContentInit() {
         this.subscribeOnComponentsChanges();
@@ -2900,9 +2936,7 @@ class FFlowBase {
         const changes = [
             this.fNodesContainer.fNodes.changes,
             this.fConnectionsContainer.fConnections.changes,
-            this.outlets.changes,
-            this.outputs.changes,
-            this.inputs.changes
+            this.connectorChanges
         ];
         merge(...changes).pipe(startWith(null), takeUntil(this.onDestroy)).subscribe(() => {
             const changedOrDestroyed = merge(...changes, this.onDestroy);
@@ -2944,9 +2978,39 @@ class FFlowComponent extends FFlowBase {
         this.CONNECTION_MARKER_START_SELECTED = CONNECTION_MARKER_START_SELECTED;
         this.CONNECTION_MARKER_END_SELECTED = CONNECTION_MARKER_END_SELECTED;
         this.id = `f-flow-${uniqueId$1++}`;
+        this.outlets = [];
+        this.outputs = [];
+        this.inputs = [];
+    }
+    addConnector(connector) {
+        if (connector instanceof FNodeOutletBase) {
+            this.outlets.push(connector);
+        }
+        else if (connector instanceof FNodeInputBase) {
+            this.inputs.push(connector);
+        }
+        else if (connector instanceof FNodeOutputBase) {
+            this.outputs.push(connector);
+        }
+        this.connectorChanges.next();
+    }
+    removeConnector(connector) {
+        if (connector instanceof FNodeOutletBase) {
+            this.outlets = this.outlets.filter(x => x !== connector);
+        }
+        else if (connector instanceof FNodeInputBase) {
+            this.inputs = this.inputs.filter(x => x !== connector);
+        }
+        else if (connector instanceof FNodeOutputBase) {
+            this.outputs = this.outputs.filter(x => x !== connector);
+        }
+        this.connectorChanges.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", 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.5", 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]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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 },
+            { provide: F_FLOW_CONNECTOR_PARENT, 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 }], 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.5", ngImport: i0, type: FFlowComponent, decorators: [{
             type: Component,
@@ -2957,7 +3021,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     ], 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" }]
+                    }, providers: [
+                        { provide: F_FLOW_COMPONENT, useExisting: FFlowComponent },
+                        { provide: F_FLOW_CONNECTOR_PARENT, 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: [{
@@ -2972,15 +3039,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }], 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;