@foblex/flow 1.5.1 → 1.5.3

package/f-connection/f-connection-for-create/f-connection-for-create.component.d.ts

@@ -4,6 +4,7 @@ import { EFConnectionBehavior } from '../common';
 import { EFConnectionType } from '../common';
 import { FComponentsStore } from '../../f-components-store';
 import { FMarkerBase } from '../f-marker';
+import { FConnectionCenterDirective } from '../f-connection-center';
 import * as i0 from "@angular/core";
 export declare class FConnectionForCreateComponent extends FConnectionBase implements AfterViewInit, OnInit, OnDestroy {
     private fComponentsStore;
@@ -28,13 +29,14 @@ export declare class FConnectionForCreateComponent extends FConnectionBase imple
     fSelection: FConnectionSelectionComponent;
     fTextComponent: IConnectionText;
     fConnectionCenter: ElementRef<HTMLDivElement>;
+    fConnectionCenters: QueryList<FConnectionCenterDirective>;
     get boundingElement(): HTMLElement | SVGElement;
     constructor(elementReference: ElementRef<HTMLElement>, fComponentsStore: FComponentsStore);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FConnectionForCreateComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FConnectionForCreateComponent, "f-connection-for-create", never, { "fStartColor": { "alias": "fStartColor"; "required": false; }; "fEndColor": { "alias": "fEndColor"; "required": false; }; "fBehavior": { "alias": "fBehavior"; "required": false; }; "fType": { "alias": "fType"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["fMarkers"], ["*", "[fConnectionCenter]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FConnectionForCreateComponent, "f-connection-for-create", never, { "fStartColor": { "alias": "fStartColor"; "required": false; }; "fEndColor": { "alias": "fEndColor"; "required": false; }; "fBehavior": { "alias": "fBehavior"; "required": false; }; "fType": { "alias": "fType"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["fMarkers", "fConnectionCenters"], ["*", "[fConnectionCenter]"], false, never>;
     static ngAcceptInputType_fBehavior: string;
     static ngAcceptInputType_fType: string;
 }

package/fesm2022/foblex-flow.mjs

@@ -2,8 +2,9 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Component, ChangeDetectionStrategy, Input, Directive, Injectable, ContentChild, Inject, ViewChild, ContentChildren, Optional, SkipSelf, EventEmitter, Output, NgModule } from '@angular/core';
 import { TransformModelExtensions, DomElementExtensions, PointExtensions, RectExtensions, BooleanExtensions, sanitizeElementId, Point, GuidExtensions, VectorExtensions, EventExtensions, mixinChangePosition, mixinFitToParent, mixinOneToOneCentering, mixinChangeZoom, SizeExtensions, MouseEventExtensions, IMouseEvent, ITouchDownEvent, ITouchMoveEvent, ITouchUpEvent } from '@foblex/core';
 import { Subject, Observable, Subscription, startWith, debounceTime } from 'rxjs';
-import { __decorate } from 'tslib';
+import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
+import { __decorate } from 'tslib';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
@@ -418,7 +419,7 @@ class FNodeInputDirective extends FNodeInputBase {
         this.fComponentsStore.removeInput(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fInputId", "id"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled"], _fConnectableSide: ["fInputConnectableSide", "_fConnectableSide"] }, 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, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fInputId", "id"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled"], _fConnectableSide: ["fInputConnectableSide", "_fConnectableSide"] }, host: { properties: { "attr.data-f-input-id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled", "class.f-node-input-not-connectable": "!canBeConnected" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeInputDirective, decorators: [{
             type: Directive,
@@ -426,7 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     selector: "[fNodeInput]",
                     exportAs: 'fNodeInput',
                     host: {
-                        '[attr.id]': 'id',
+                        '[attr.data-f-input-id]': 'id',
                         class: "f-component f-node-input",
                         '[class.f-node-input-multiple]': 'multiple',
                         '[class.f-node-input-disabled]': 'disabled',
@@ -511,7 +512,7 @@ class FNodeOutletDirective extends FNodeOutletBase {
         this.fComponentsStore.removeOutlet(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fOutletId", "id"], disabled: ["fOutletDisabled", "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, useExisting: FNodeOutletDirective }], exportAs: ["fNodeOutlet"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fOutletId", "id"], disabled: ["fOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.data-f-outlet-id": "id", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }], exportAs: ["fNodeOutlet"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeOutletDirective, decorators: [{
             type: Directive,
@@ -519,7 +520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     selector: "[fNodeOutlet]",
                     exportAs: 'fNodeOutlet',
                     host: {
-                        '[attr.id]': 'id',
+                        '[attr.data-f-outlet-id]': 'id',
                         class: "f-component f-node-outlet",
                         '[class.f-node-outlet-disabled]': 'disabled'
                     },
@@ -599,7 +600,7 @@ class FNodeOutputDirective extends FNodeOutputBase {
         this.fComponentsStore.removeOutput(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fOutputId", "id"], disabled: ["fOutputDisabled", "disabled"], _fConnectableSide: ["fOutputConnectableSide", "_fConnectableSide"] }, host: { properties: { "attr.id": "id", "class.f-node-output-disabled": "disabled" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fOutputId", "id"], disabled: ["fOutputDisabled", "disabled"], _fConnectableSide: ["fOutputConnectableSide", "_fConnectableSide"] }, host: { properties: { "attr.data-f-output-id": "id", "class.f-node-output-disabled": "disabled" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeOutputDirective, decorators: [{
             type: Directive,
@@ -607,7 +608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     selector: "[fNodeOutput]",
                     exportAs: 'fNodeOutput',
                     host: {
-                        '[attr.id]': 'id',
+                        '[attr.data-f-output-id]': 'id',
                         class: "f-component f-node-output",
                         '[class.f-node-output-disabled]': 'disabled',
                     },
@@ -1078,6 +1079,7 @@ class FMarkerDirective extends FMarkerBase {
         this.refX = 0;
         this.refY = 0;
         this.type = EFMarkerType.START;
+        this.hostElement.style.display = 'none';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FMarkerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FMarkerDirective, isStandalone: true, selector: "svg[fMarker]", inputs: { hostElement: "hostElement", width: "width", height: "height", refX: "refX", refY: "refY", type: "type" }, host: { classAttribute: "f-component f-marker" }, providers: [{ provide: F_MARKER, useExisting: FMarkerDirective }], usesInheritance: true, ngImport: i0 }); }
@@ -1283,7 +1285,9 @@ class FConnectionBase extends MIXIN_BASE$1 {
             markerElement.setAttribute('markerUnits', 'strokeWidth');
             marker.hostElement.setAttribute('height', `${marker.height}`);
             marker.hostElement.setAttribute('width', `${marker.width}`);
-            markerElement.append(marker.hostElement.cloneNode(true));
+            const clone = marker.hostElement.cloneNode(true);
+            clone.style.display = 'unset';
+            markerElement.append(clone);
             this.fDefs.nativeElement.append(markerElement);
         });
         this.fMarkers.forEach((marker) => {
@@ -1326,6 +1330,18 @@ function castToConnectionType(type) {
     return result;
 }
 
+class FConnectionCenterDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FConnectionCenterDirective, isStandalone: true, selector: "[fConnectionCenter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionCenterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fConnectionCenter]",
+                    standalone: true
+                }]
+        }] });
+
 let uniqueId$4 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
     set fBehavior(value) {
@@ -1364,13 +1380,13 @@ class FConnectionForCreateComponent extends FConnectionBase {
         this.fComponentsStore.fTempConnection = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fBehavior: ["fBehavior", "fBehavior", castToConnectionBehavior], fType: ["fType", "fType", castToConnectionType], disabled: "disabled" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fBehavior: ["fBehavior", "fBehavior", castToConnectionBehavior], fType: ["fType", "fType", castToConnectionType], disabled: "disabled" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }, { propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection-for-create", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection f-connection-for-create"
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { fStartColor: [{
                 type: Input
             }], fEndColor: [{
@@ -1407,6 +1423,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             }], fConnectionCenter: [{
                 type: ViewChild,
                 args: ['fConnectionCenter', { static: true }]
+            }], fConnectionCenters: [{
+                type: ContentChildren,
+                args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
 let uniqueId$3 = 0;
@@ -1444,7 +1463,7 @@ class FConnectionComponent extends FConnectionBase {
         this.fComponentsStore.removeConnection(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: FConnectionComponent, selector: "f-connection", inputs: { fConnectionId: "fConnectionId", fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fBehavior: ["fBehavior", "fBehavior", castToConnectionBehavior], fType: ["fType", "fType", castToConnectionType], disabled: "disabled" }, host: { properties: { "attr.id": "fConnectionId", "class.f-connection-disabled": "disabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: FConnectionComponent, selector: "f-connection", inputs: { fConnectionId: "fConnectionId", fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fBehavior: ["fBehavior", "fBehavior", castToConnectionBehavior], fType: ["fType", "fType", castToConnectionType], disabled: "disabled" }, host: { properties: { "attr.id": "fConnectionId", "class.f-connection-disabled": "disabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }, { propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
@@ -1452,7 +1471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         '[attr.id]': 'fConnectionId',
                         class: "f-component f-connection",
                         '[class.f-connection-disabled]': 'disabled',
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { fConnectionId: [{
                 type: Input
             }], fText: [{
@@ -1499,20 +1518,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             }], fConnectionCenter: [{
                 type: ViewChild,
                 args: ['fConnectionCenter', { static: true }]
+            }], fConnectionCenters: [{
+                type: ContentChildren,
+                args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
-class FConnectionCenterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FConnectionCenterDirective, isStandalone: true, selector: "[fConnectionCenter]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FConnectionCenterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[fConnectionCenter]",
-                    standalone: true
-                }]
-        }] });
-
 const F_NODE = new InjectionToken('F_NODE');
 class FNodeBase {
     constructor() {
@@ -1692,7 +1702,7 @@ class FNodeDirective extends FNodeBase {
         this.subscriptions$.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeDirective, selector: "[fNode]", inputs: { fNodeId: "fNodeId", position: ["fNodePosition", "position"], disabled: "disabled" }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.id": "fNodeId", "class.f-node-disabled": "disabled" }, classAttribute: "f-node f-component" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: FNodeDirective, selector: "[fNode]", inputs: { fNodeId: "fNodeId", position: ["fNodePosition", "position"], disabled: "disabled" }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.data-f-node-id": "fNodeId", "class.f-node-disabled": "disabled" }, classAttribute: "f-node f-component" }, providers: [
             { provide: F_NODE, useExisting: FNodeDirective }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
 }
@@ -1702,7 +1712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     selector: "[fNode]",
                     exportAs: "fComponent",
                     host: {
-                        '[attr.id]': 'fNodeId',
+                        '[attr.data-f-node-id]': 'fNodeId',
                         class: "f-node f-component",
                         '[class.f-node-disabled]': 'disabled'
                     },