@foblex/flow 0.0.1

package/fesm2022/foblex-flow.mjs

@@ -0,0 +1,3055 @@
+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 { 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 * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+const F_SELECTED_CLASS = 'f-selected';
+
+const F_CONNECTION_COMPONENT = new InjectionToken('F_CONNECTION_COMPONENT');
+class FConnectionBase {
+    constructor() {
+        this.path = '';
+        this.vector = VectorExtensions.initialize();
+    }
+    initialize() {
+    }
+    isContains(element) {
+        return this.hostElement.contains(element);
+    }
+    deselect() {
+        this.hostElement.classList.remove(F_SELECTED_CLASS);
+    }
+    select() {
+        this.hostElement.classList.add(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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionBase, decorators: [{
+            type: Directive
+        }] });
+
+const F_CONNECTION_IDENTIFIERS = {
+    textId(connectionId) {
+        return 'connection_text_' + connectionId;
+    },
+    connectionForSelectionId(connectionId) {
+        return 'connection_for_selection_' + connectionId;
+    },
+    connectionId(connectionId) {
+        return 'connection_' + connectionId;
+    },
+    gradientId(connectionId) {
+        return 'connection_gradient_' + connectionId;
+    },
+    linkToGradient(connectionId) {
+        return `url(#${F_CONNECTION_IDENTIFIERS.gradientId(connectionId)})`;
+    },
+    linkToConnection(connectionId) {
+        return `#${F_CONNECTION_IDENTIFIERS.connectionId(connectionId)}`;
+    }
+};
+
+class FConnectionPathComponent {
+    get linkToGradient() {
+        return F_CONNECTION_IDENTIFIERS.linkToGradient(this.fromTo?.output.id + this.fromTo?.input?.id);
+    }
+    get attrConnectionId() {
+        return F_CONNECTION_IDENTIFIERS.connectionId(this.fromTo?.output.id + this.fromTo?.input?.id);
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+    }
+    ngOnInit() {
+        this.deselect();
+    }
+    setPath(path) {
+        this.hostElement.setAttribute("d", `${path}`);
+    }
+    select() {
+        this.hostElement.setAttribute('marker-start', `url(#connection-marker-start-selected)`);
+        this.hostElement.setAttribute('marker-end', `url(#connection-marker-end-selected)`);
+    }
+    deselect() {
+        if (this.fromTo?.input) {
+            this.hostElement.setAttribute('marker-start', `url(#connection-marker-start-${this.fromTo?.output?.color})`);
+            this.hostElement.setAttribute('marker-end', `url(#connection-marker-end-${this.fromTo?.input?.color})`);
+        }
+        else {
+            this.hostElement.setAttribute('marker-start', `url(#connection-marker-start)`);
+            this.hostElement.setAttribute('marker-end', `url(#connection-marker-end)`);
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionPathComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "path[f-connection-path]",
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: "f-component f-connection-path",
+                        '[attr.id]': 'attrConnectionId',
+                        '[attr.stroke]': 'linkToGradient',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fromTo: [{
+                type: Input
+            }] } });
+
+class FConnectionGradientComponent {
+    get gradientId() {
+        return F_CONNECTION_IDENTIFIERS.gradientId(this.fromTo?.output.id + this.fromTo?.input?.id);
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    get stop1Element() {
+        return this.elementReference.nativeElement.children.item(0);
+    }
+    get stop2Element() {
+        return this.elementReference.nativeElement.children.item(1);
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+    }
+    ngAfterContentInit() {
+        this.stop1Element.setAttribute('offset', '0%');
+        this.stop2Element.setAttribute('offset', '100%');
+    }
+    updateGradient() {
+        this.setFromColor(this.fromTo?.output.color);
+        this.setToColor(this.fromTo?.input?.color);
+    }
+    setFromColor(color) {
+        this.stop1Element.setAttribute('stop-color', color || 'transparent');
+    }
+    setToColor(color) {
+        this.stop2Element.setAttribute('stop-color', color || 'transparent');
+    }
+    redraw(vector) {
+        const x = vector.point2.x - vector.point1.x;
+        const y = vector.point2.y - vector.point1.y;
+        const distance = Math.sqrt(x * x + y * y) || 0.01;
+        const from = new Point(0.5 - (0.5 * x) / distance, 0.5 - (0.5 * y) / distance);
+        this.hostElement.setAttribute('x1', from.x.toString());
+        this.hostElement.setAttribute('y1', from.y.toString());
+        const to = new Point(0.5 + (0.5 * x) / distance, 0.5 + (0.5 * y) / distance);
+        this.hostElement.setAttribute('x2', to.x.toString());
+        this.hostElement.setAttribute('y2', to.y.toString());
+        this.updateGradient();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionGradientComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]", inputs: { fromTo: "fromTo" }, host: { properties: { "attr.id": "gradientId" }, classAttribute: "f-component f-connection-gradient" }, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:stop/>\n    <svg:stop/>\n</ng-container>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionGradientComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "linearGradient[fConnectionGradient]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "f-component f-connection-gradient",
+                        '[attr.id]': 'gradientId'
+                    }, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:stop/>\n    <svg:stop/>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fromTo: [{
+                type: Input
+            }] } });
+
+class FConnectionTextPathDirective {
+    get linkToConnection() {
+        return F_CONNECTION_IDENTIFIERS.linkToConnection(this.fromTo?.output.id + this.fromTo?.input?.id);
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+    }
+    ngOnInit() {
+        this.hostElement.setAttribute('startOffset', '50%');
+        this.hostElement.setAttribute('text-anchor', `middle`);
+    }
+    getBBox() {
+        return this.hostElement.getBBox();
+    }
+    setOffset(offset) {
+        this.hostElement.setAttribute('startOffset', offset.toString());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionTextPathDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]", inputs: { fromTo: "fromTo" }, host: { properties: { "attr.href": "linkToConnection" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionTextPathDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textPath[f-connection-text-path]',
+                    host: {
+                        '[attr.href]': 'linkToConnection'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fromTo: [{
+                type: Input
+            }] } });
+
+class FConnectionTextComponent {
+    get textId() {
+        return F_CONNECTION_IDENTIFIERS.textId(this.fromTo?.output.id + this.fromTo?.input?.id);
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+    }
+    redraw(vector) {
+        const isTextReverse = FConnectionTextComponent.isTextReverse(vector);
+        this.hostElement.setAttribute('dy', isTextReverse ? '15' : '-8');
+        const textRect = this.textPathDirective.getBBox();
+        const textRectCenter = [textRect.x + textRect.width / 2, textRect.y + textRect.height / 2];
+        this.hostElement.setAttribute('transform', isTextReverse ? `rotate(180, ${textRectCenter})` : '');
+        const startOffset = FConnectionTextComponent.getTextStartOffset(vector, this.fromTo?.output.name || '');
+        // this.textPathDirective.setOffset(startOffset);
+        if (startOffset < 0) {
+            this.hostElement.style.display = 'none';
+        }
+        else {
+            this.hostElement.style.display = 'unset';
+        }
+    }
+    static isTextReverse(vector) {
+        return vector.point1.x > vector.point2.x;
+    }
+    static getTextStartOffset(vector, name) {
+        const symbolWidth = 8;
+        const vectorLength = PointExtensions.hypotenuse(vector.point1, vector.point2);
+        return vectorLength / 2 - ((name || '').length * symbolWidth) / 2;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionTextComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionTextComponent, selector: "text[f-connection-text]", inputs: { fromTo: "fromTo" }, host: { properties: { "attr.id": "textId" }, classAttribute: "f-component f-connection-text" }, viewQueries: [{ propertyName: "textPathDirective", first: true, predicate: FConnectionTextPathDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:textPath f-connection-text-path [fromTo]=\"fromTo\">\n        {{ fromTo?.output?.name }}\n    </svg:textPath>\n</ng-container>\n", dependencies: [{ kind: "directive", type: FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]", inputs: ["fromTo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "text[f-connection-text]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "f-component f-connection-text",
+                        '[attr.id]': 'textId',
+                    }, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:textPath f-connection-text-path [fromTo]=\"fromTo\">\n        {{ fromTo?.output?.name }}\n    </svg:textPath>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fromTo: [{
+                type: Input
+            }], textPathDirective: [{
+                type: ViewChild,
+                args: [FConnectionTextPathDirective, { static: true }]
+            }] } });
+
+const F_TEMP_CONNECTION_COMPONENT = new InjectionToken('F_TEMP_CONNECTION_COMPONENT');
+let uniqueId$7 = 0;
+class FTempConnectionComponent extends FConnectionBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        super();
+        this.elementReference = elementReference;
+        this.id = `f-temp-connection-${uniqueId$7++}`;
+    }
+    ngAfterViewInit() {
+        this.hostElement.style.display = "none";
+    }
+    initializeDrag() {
+        this.hostElement.style.display = "unset";
+    }
+    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.fGradient.redraw(this.vector);
+        this.fText.redraw(this.vector);
+    }
+    completeDrag() {
+        this.hostElement.style.display = "none";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FTempConnectionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FTempConnectionComponent, selector: "g[fTempConnection]", host: { classAttribute: "f-component f-connection f-temp-connection" }, providers: [
+            { provide: F_TEMP_CONNECTION_COMPONENT, useExisting: FTempConnectionComponent }
+        ], viewQueries: [{ propertyName: "fPath", first: true, predicate: FConnectionPathComponent, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: FConnectionGradientComponent, 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:g>\n        <svg:path f-connection-path stroke-dasharray=\"10,10\" [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n    </svg:g>\n    <svg:text f-connection-text [fromTo]=\"fromTo\"></svg:text>\n</ng-container>\n", dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FTempConnectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "g[fTempConnection]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "f-component f-connection f-temp-connection"
+                    }, providers: [
+                        { provide: F_TEMP_CONNECTION_COMPONENT, useExisting: FTempConnectionComponent }
+                    ], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:linearGradient fConnectionGradient [fromTo]=\"fromTo\"></svg:linearGradient>\n    <svg:g>\n        <svg:path f-connection-path stroke-dasharray=\"10,10\" [attr.d]=\"path\" [fromTo]=\"fromTo\"></svg:path>\n    </svg:g>\n    <svg:text f-connection-text [fromTo]=\"fromTo\"></svg:text>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fPath: [{
+                type: ViewChild,
+                args: [FConnectionPathComponent, { static: true }]
+            }], fGradient: [{
+                type: ViewChild,
+                args: [FConnectionGradientComponent, { static: true }]
+            }], fText: [{
+                type: ViewChild,
+                args: [FConnectionTextComponent, { static: true }]
+            }] } });
+
+const F_CONNECTION_DRAG_HANDLE_CLASS = 'f-connection-drag-handle';
+class FConnectionDragHandleComponent {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+        this.class = F_CONNECTION_DRAG_HANDLE_CLASS;
+    }
+    redraw(point) {
+        this.hostElement.setAttribute('cx', point.x.toString());
+        this.hostElement.setAttribute('cy', point.y.toString());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionDragHandleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]", host: { properties: { "class": "class" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionDragHandleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "circle[f-connection-drag-handle]",
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'class'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class FConnectionSelectionComponent {
+    get connectionForSelectionId() {
+        return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this.fromTo?.output.id + this.fromTo?.input?.id);
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+    }
+    setPath(path) {
+        this.hostElement.setAttribute("d", `${path}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionSelectionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]", inputs: { fromTo: "fromTo" }, host: { properties: { "attr.id": "connectionForSelectionId" }, classAttribute: "f-component f-connection-selection" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionSelectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "path[fConnectionSelection]",
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: "f-component f-connection-selection",
+                        '[attr.id]': 'connectionForSelectionId',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fromTo: [{
+                type: Input
+            }] } });
+
+const F_CANVAS = new InjectionToken('F_CANVAS');
+class FCanvasBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+        this.initialize();
+    }
+    initialize() {
+        this.hostElement.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
+        this.hostElement.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
+        this.hostElement.setAttribute('version', '1.1');
+        this.hostElement.setAttribute('baseProfile', 'full');
+        this.hostElement.style.cssText = 'user-select:none; width:100%; height:100%;';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FCanvasBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FCanvasBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FCanvasBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class FCanvasDirective extends FCanvasBase {
+    constructor(elementReference) {
+        super(elementReference);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FCanvasDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FCanvasDirective, isStandalone: true, selector: "svg[fCanvas]", providers: [{ provide: F_CANVAS, useExisting: FCanvasDirective }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FCanvasDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "svg[fCanvas]",
+                    standalone: true,
+                    providers: [{ provide: F_CANVAS, useExisting: FCanvasDirective }],
+                }]
+        }], 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 {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        super(TransformModelExtensions.default());
+        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);
+    }
+    completeDrag() {
+        // const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
+        this.canvasChange.emit();
+    }
+    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 {
+    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]", 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: 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
+            }] } });
+
+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();
+    }
+    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 }]; } });
+
+function getElementRectInCanvas(element, transform, svgHost) {
+    const rect = RectExtensions.fromElement(element);
+    const position = Point.fromPoint(rect).matrixTransform(svgHost).sub(transform.scaledPosition).sub(transform.position).div(transform.scale);
+    const size = SizeExtensions.initialize(rect.width / transform.scale, rect.height / transform.scale);
+    return RectExtensions.initialize(position.x, position.y, size.width, size.height);
+}
+
+class FConnectorBase {
+    constructor() {
+        this.stateChanges = new Subject();
+    }
+    getElementRectInCanvas(transform, svgHost) {
+        return getElementRectInCanvas(this.hostElement, transform, svgHost);
+    }
+    isContains(element) {
+        return this.hostElement.contains(element);
+    }
+}
+
+const F_NODE_INPUT_DIRECTIVE = new InjectionToken('F_NODE_INPUT_DIRECTIVE');
+class FNodeInputBase extends FConnectorBase {
+    constructor() {
+        super(...arguments);
+        this.isConnected = false;
+    }
+    get canBeConnected() {
+        return !this.disabled && (this.multiple ? true : !this.isConnected);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FNodeInputBase, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeInputBase, decorators: [{
+            type: Directive
+        }] });
+
+function isNodeInput(element) {
+    return !!element.closest('[fNodeInput]');
+}
+
+let uniqueId$6 = 0;
+class FNodeInputDirective extends FNodeInputBase {
+    get color() {
+        return this.fNodeInputColor || 'black';
+    }
+    get disabled() {
+        return this.isDisabled;
+    }
+    set disabled(isDisabled) {
+        const value = BooleanExtensions.castToBoolean(isDisabled);
+        if (value !== this.isDisabled) {
+            this.isDisabled = value;
+            this.stateChanges.next();
+        }
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        super();
+        this.elementReference = elementReference;
+        this.id = `f-node-input-${uniqueId$6++}`;
+        this.multiple = true;
+        this.isDisabled = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", 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.4", ngImport: i0, type: FNodeInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fNodeInput]",
+                    host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-node-input",
+                        '[class.f-node-input-multiple]': 'multiple',
+                        '[class.f-node-input-disabled]': 'disabled',
+                        '[class.f-node-input-not-connectable]': '!canBeConnected',
+                    },
+                    providers: [{ provide: F_NODE_INPUT_DIRECTIVE, useExisting: FNodeInputDirective }],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], fNodeInputColor: [{
+                type: Input,
+                args: ['fNodeInputColor']
+            }], multiple: [{
+                type: Input,
+                args: ['fNodeInputMultiple']
+            }], disabled: [{
+                type: Input,
+                args: ['fNodeInputDisabled']
+            }] } });
+
+class FOutConnectorBase extends FConnectorBase {
+}
+
+const F_NODE_OUTLET_DIRECTIVE = new InjectionToken('F_NODE_OUTLET_DIRECTIVE');
+class FNodeOutletBase extends FOutConnectorBase {
+    constructor() {
+        super(...arguments);
+        this.outputs = [];
+    }
+    get canBeConnected() {
+        return !this.disabled;
+    }
+    setOutputs(outputs) {
+        this.outputs = outputs;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeOutletBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FNodeOutletBase, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeOutletBase, decorators: [{
+            type: Directive
+        }] });
+
+function isNodeOutlet(element) {
+    return !!element.closest('[fNodeOutlet]');
+}
+
+let uniqueId$5 = 0;
+class FNodeOutletDirective extends FNodeOutletBase {
+    get disabled() {
+        return this.isDisabled;
+    }
+    set disabled(isDisabled) {
+        const value = BooleanExtensions.castToBoolean(isDisabled);
+        if (value !== this.isDisabled) {
+            this.isDisabled = value;
+            this.stateChanges.next();
+        }
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        super();
+        this.elementReference = elementReference;
+        this.id = `f-node-outlet-${uniqueId$5++}`;
+        this.color = 'black';
+        this.name = '';
+        this.isDisabled = false;
+        this.isConnectionFromOutlet = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", 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.4", ngImport: i0, type: FNodeOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fNodeOutlet]",
+                    host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-node-outlet",
+                        '[class.f-node-outlet-disabled]': 'disabled'
+                    },
+                    providers: [{ provide: F_NODE_OUTLET_DIRECTIVE, useExisting: FNodeOutletDirective }],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], color: [{
+                type: Input,
+                args: ['fNodeOutletColor']
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: ['fNodeOutletDisabled']
+            }], isConnectionFromOutlet: [{
+                type: Input
+            }] } });
+
+const F_NODE_OUTPUT_DIRECTIVE = new InjectionToken('F_NODE_OUTPUT_DIRECTIVE');
+class FNodeOutputBase extends FOutConnectorBase {
+    constructor() {
+        super(...arguments);
+        this.isConnected = false;
+    }
+    get canBeConnected() {
+        return !this.disabled && !this.isConnected;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeOutputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FNodeOutputBase, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeOutputBase, decorators: [{
+            type: Directive
+        }] });
+
+function isNodeOutput(element) {
+    return !!element.closest('[fNodeOutput]');
+}
+
+let uniqueId$4 = 0;
+class FNodeOutputDirective extends FNodeOutputBase {
+    get disabled() {
+        return this.isDisabled;
+    }
+    set disabled(isDisabled) {
+        const value = BooleanExtensions.castToBoolean(isDisabled);
+        if (value !== this.isDisabled) {
+            this.isDisabled = value;
+            this.stateChanges.next();
+        }
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        super();
+        this.elementReference = elementReference;
+        this.id = `f-node-output-${uniqueId$4++}`;
+        this.color = 'black';
+        this.name = '';
+        this.isDisabled = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", 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.4", ngImport: i0, type: FNodeOutputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fNodeOutput]",
+                    host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-node-output",
+                        '[class.f-node-output-disabled]': 'disabled',
+                        '[class.f-node-output-connected]': 'isConnected'
+                    },
+                    providers: [{ provide: F_NODE_OUTPUT_DIRECTIVE, useExisting: FNodeOutputDirective }],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], color: [{
+                type: Input,
+                args: ['fNodeOutputColor']
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                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();
+    }
+    isContains(element) {
+        return this.hostElement.contains(element);
+    }
+    redraw() {
+        this.hostElement.setAttribute('transform', 'translate(' + this.position.x + ',' + this.position.y + ')');
+    }
+    deselect() {
+        this.hostElement.classList.remove(F_SELECTED_CLASS);
+    }
+    select() {
+        this.hostElement.classList.add(F_SELECTED_CLASS);
+    }
+    updatePosition(position) {
+        this.position = position;
+    }
+    completeDrag() {
+        this.positionChange.emit(this.position);
+    }
+}
+
+const F_DRAG_HANDLE = new InjectionToken('F_DRAG_HANDLE');
+class FDragHandleDirective {
+    get disabled() {
+        return this.isDisabled;
+    }
+    set disabled(isDisabled) {
+        const value = BooleanExtensions.castToBoolean(isDisabled);
+        if (value !== this.isDisabled) {
+            this.isDisabled = value;
+            this.stateChanges.next();
+        }
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, _parentNode) {
+        this.elementReference = elementReference;
+        this.stateChanges = new Subject();
+        this.isDisabled = false;
+        this._parentNode = _parentNode;
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDragHandleDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE_COMPONENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FDragHandleDirective, selector: "[fDragHandle]", inputs: { disabled: ["fDragHandleDisabled", "disabled"] }, host: { properties: { "class.f-drag-handle-disabled": "disabled" }, classAttribute: "f-drag-handle f-component" }, providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fDragHandle]",
+                    host: {
+                        class: "f-drag-handle f-component",
+                        '[class.f-drag-handle-disabled]': 'disabled'
+                    },
+                    providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [F_NODE_COMPONENT]
+                }, {
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { disabled: [{
+                type: Input,
+                args: ['fDragHandleDisabled']
+            }] } });
+
+function isNodeDragHandle(element) {
+    const dragHandle = getClosestDragHandle(element);
+    return !!dragHandle && !isElementOrParentExcluded(element);
+}
+function isElementOrParentExcluded(element) {
+    const isContains = isElementContainsClass(element);
+    const parentElement = element.parentElement;
+    const dragHandle = getClosestDragHandle(parentElement);
+    if (!isContains && !!dragHandle) {
+        return isElementOrParentExcluded(parentElement);
+    }
+    return isContains;
+}
+function getClosestDragHandle(element) {
+    return element.closest('[fDragHandle]');
+}
+function isElementContainsClass(element) {
+    return element.classList.contains('f-drag-handle-disabled');
+}
+
+const F_FOREIGN_OBJECT_COMPONENT = new InjectionToken('F_FOREIGN_OBJECT_COMPONENT');
+class FForeignObjectBase {
+    constructor(_parentNode) {
+        this.subscriptions$ = new Subscription();
+        this.stateChanges = new Subject();
+        this._parentNode = _parentNode;
+    }
+    ngAfterViewInit() {
+        this.subscriptions$.add(this.subscribeOnResizeChanges());
+    }
+    subscribeOnResizeChanges() {
+        return new FResizeObserver(this.hostElement.firstChild).pipe(startWith(null), debounceTime(10)).subscribe(() => {
+            this.redraw();
+            this.stateChanges.next();
+        });
+    }
+    redraw() {
+        const element = this.hostElement.firstChild;
+        if (element && !!element.getBoundingClientRect) {
+            const rect = RectExtensions.fromElement(element);
+            const scale = this.transform.scale;
+            this.hostElement.setAttribute("width", `${rect.width / scale}`);
+            this.hostElement.setAttribute("height", `${rect.height / scale}`);
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this.subscriptions$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FForeignObjectBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FForeignObjectBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FForeignObjectBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }]; } });
+
+class FForeignObjectComponent extends FForeignObjectBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    get transform() {
+        return this.flow.transform;
+    }
+    constructor(elementReference, flow, _parentNode) {
+        super(_parentNode);
+        this.elementReference = elementReference;
+        this.flow = flow;
+        this.defaultWidth = 100;
+        this.defaultHeight = 100;
+        this.hostElement.style.cssText = 'overflow:visible;';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FForeignObjectComponent, deps: [{ token: i0.ElementRef }, { token: FFlowComponent }, { token: F_NODE_COMPONENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FForeignObjectComponent, selector: "foreignObject[fForeignObject]", inputs: { defaultWidth: ["fDefaultWidth", "defaultWidth"], defaultHeight: ["fDefaultHeight", "defaultHeight"] }, host: { properties: { "attr.width": "defaultWidth", "attr.height": "defaultHeight" }, classAttribute: "f-foreign-object f-component" }, providers: [
+            { provide: F_FOREIGN_OBJECT_COMPONENT, useExisting: FForeignObjectComponent }
+        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content></ng-content>\n</ng-container>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FForeignObjectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "foreignObject[fForeignObject]", exportAs: "fComponent", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "f-foreign-object f-component",
+                        '[attr.width]': 'defaultWidth',
+                        '[attr.height]': 'defaultHeight'
+                    }, providers: [
+                        { provide: F_FOREIGN_OBJECT_COMPONENT, useExisting: FForeignObjectComponent }
+                    ], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content></ng-content>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FFlowComponent }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [F_NODE_COMPONENT]
+                }, {
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { defaultWidth: [{
+                type: Input,
+                args: ['fDefaultWidth']
+            }], defaultHeight: [{
+                type: Input,
+                args: ['fDefaultHeight']
+            }] } });
+
+let uniqueId$3 = 0;
+class FNodeComponent extends FNodeBase {
+    set position(value) {
+        this._position = PointExtensions.castToPoint(value);
+        this.refresh();
+    }
+    get position() {
+        return this._position;
+    }
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        super();
+        this.elementReference = elementReference;
+        this.id = `f-node-${uniqueId$3++}`;
+        this._position = PointExtensions.initialize();
+        this.positionChange = new EventEmitter();
+    }
+    ngOnInit() {
+        super.redraw();
+    }
+    refresh() {
+        this.stateChanges.next();
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: FNodeComponent, selector: "g[fNode]", inputs: { id: "id", position: ["fNodePosition", "position"] }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-node f-component" }, providers: [
+            { provide: F_NODE_COMPONENT, useExisting: FNodeComponent }
+        ], queries: [{ propertyName: "fForeignObject", first: true, predicate: F_FOREIGN_OBJECT_COMPONENT, descendants: true, static: true }, { propertyName: "handles", predicate: F_DRAG_HANDLE, descendants: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content></ng-content>\n</ng-container>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "g[fNode]", exportAs: "fComponent", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.id]': 'id',
+                        class: "f-node f-component"
+                    }, providers: [
+                        { provide: F_NODE_COMPONENT, useExisting: FNodeComponent }
+                    ], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n  <ng-content></ng-content>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], handles: [{
+                type: ContentChildren,
+                args: [F_DRAG_HANDLE, { descendants: true }]
+            }], fForeignObject: [{
+                type: ContentChild,
+                args: [F_FOREIGN_OBJECT_COMPONENT, { static: true }]
+            }], position: [{
+                type: Input,
+                args: ['fNodePosition']
+            }], positionChange: [{
+                type: Output,
+                args: ['fNodePositionChange']
+            }] } });
+
+const F_SELECTION = new InjectionToken('F_SELECTION');
+class FSelectionDirective {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+        this.fElement = new RectFElement();
+        this.hostElement.appendChild(this.fElement.hostElement);
+    }
+    hide() {
+        this.fElement.hide();
+    }
+    show() {
+        this.fElement.show();
+    }
+    draw(object) {
+        this.fElement.draw(object);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FSelectionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FSelectionDirective, selector: "g[fSelection]", host: { classAttribute: "f-selection f-component" }, providers: [
+            { provide: F_SELECTION, useExisting: FSelectionDirective }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FSelectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "g[fSelection]",
+                    host: {
+                        'class': 'f-selection f-component'
+                    },
+                    providers: [
+                        { provide: F_SELECTION, useExisting: FSelectionDirective }
+                    ],
+                }]
+        }], 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) {
+        return this.fConnections.toArray().find((x) => {
+            return x.isContains(element);
+        });
+    }
+    findOutgoingConnections(outputs) {
+        return findOutgoingConnections(this.fConnections.toArray(), outputs);
+    }
+    findIncomingConnections(inputs) {
+        return findIncomingConnections(this.fConnections.toArray(), inputs);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionsContainerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FConnectionsContainerBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectionsContainerBase, decorators: [{
+            type: Directive
+        }] });
+function findIncomingConnections(allConnections, inputs) {
+    return allConnections.filter((x) => {
+        return inputs.includes(x.fromTo.input);
+    });
+}
+function findOutgoingConnections(allConnections, outputs) {
+    return allConnections.filter((x) => {
+        return outputs.includes(x.fromTo.output);
+    });
+}
+
+const F_BACKGROUND = new InjectionToken('F_BACKGROUND');
+class FBackgroundBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, fCanvas) {
+        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 }); }
+}
+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 }]; } });
+
+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 }); }
+}
+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++}`;
+    }
+    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 {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, flow) {
+        super();
+        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() {
+    }
+    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 FConnectionsContainerComponent extends FConnectionsContainerBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        super();
+        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]" }] }); }
+}
+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 }]
+            }] } });
+
+var EDraggableType;
+(function (EDraggableType) {
+    EDraggableType["NODE"] = "node";
+    EDraggableType["REASSIGN_CONNECTION"] = "reassign-connection";
+    EDraggableType["TEMP_CONNECTION"] = "temp-connection";
+    EDraggableType["CONNECTION"] = "connection";
+    EDraggableType["CANVAS"] = "canvas";
+    EDraggableType["PALETTE_ITEM"] = "palette-item";
+    EDraggableType["DEFAULT"] = "default";
+    EDraggableType["SELECTION"] = "selection";
+})(EDraggableType || (EDraggableType = {}));
+
+class CanvasOnPointerMove {
+    constructor(fItemsContainer) {
+        this.fItemsContainer = fItemsContainer;
+        this.type = EDraggableType.CANVAS;
+        this.onPointerDownPosition = PointExtensions.initialize();
+        this.onPointerDownPosition = this.fItemsContainer.transform.position;
+    }
+    initialize() {
+    }
+    move(difference) {
+        this.fItemsContainer.setPosition(Point.fromPoint(this.onPointerDownPosition).add(difference));
+        this.fItemsContainer.redraw();
+    }
+    complete() {
+        this.fItemsContainer.completeDrag();
+    }
+}
+
+class CanvasOnPointerDownHandler {
+    constructor(fBackground, fItemsContainer, hostElement) {
+        this.fBackground = fBackground;
+        this.fItemsContainer = fItemsContainer;
+        this.hostElement = hostElement;
+    }
+    handle(payload) {
+        let result;
+        const pointerPositionInCanvas = Point.fromPoint(payload.event.getPosition()).matrixTransform(this.hostElement);
+        if (this.fBackground.isBackgroundElement(payload.event.targetElement) && payload.event.isMouseLeftButton()) {
+            result = {
+                onPointerDownScale: 1,
+                onPointerDownPosition: pointerPositionInCanvas.div(1),
+                draggableItems: [
+                    new CanvasOnPointerMove(this.fItemsContainer)
+                ]
+            };
+        }
+        return result;
+    }
+}
+
+class CanvasOnPointerDownRequest {
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+class CreateConnectionOnPointerDownRequest {
+    constructor(event, transform) {
+        this.event = event;
+        this.transform = transform;
+    }
+}
+
+class CreateConnectionOnPointerMove {
+    constructor(connection, mouseDownPoint, transform, hostElement) {
+        this.connection = connection;
+        this.mouseDownPoint = mouseDownPoint;
+        this.type = EDraggableType.TEMP_CONNECTION;
+        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
+        this.onPointerDownToConnectorRect = RectExtensions.initialize();
+        this.onPointerDownFromConnectorRect = this.connection.fromTo.output.getElementRectInCanvas(transform, hostElement);
+        this.onPointerDownToConnectorRect = RectExtensions.initialize(this.mouseDownPoint.x, this.mouseDownPoint.y, 0, 0);
+    }
+    initialize() {
+        this.connection.initializeDrag();
+        this.move(new Point(0, 0));
+    }
+    move(difference) {
+        const toPoint = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
+        const vector = getConnectionIntersect(this.onPointerDownFromConnectorRect, toPoint);
+        this.connection.setVector(vector);
+        this.connection.redraw();
+    }
+    complete() {
+        this.connection.completeDrag();
+    }
+}
+
+class FindFirstCanBeConnectedOutputByOutletHandler {
+    constructor(fFlow) {
+        this.fFlow = fFlow;
+    }
+    handle(payload) {
+        let result;
+        const node = this.fFlow.fNodesContainer.fNodes.find((x) => x.isContains(payload.outlet.hostElement));
+        if (!node) {
+            throw new Error('Node not found');
+        }
+        const outputsOfNode = this.fFlow.outputs.filter((x) => {
+            return node.isContains(x.hostElement) && x.canBeConnected;
+        });
+        if (outputsOfNode.length > 0) {
+            result = outputsOfNode[0];
+        }
+        return result;
+    }
+}
+
+class FindFirstCanBeConnectedOutputByOutletRequest {
+    constructor(outlet) {
+        this.outlet = outlet;
+    }
+}
+
+class CreateConnectionOnPointerDown {
+    get fConnectionsContainer() {
+        return this.fFlow.fConnectionsContainer;
+    }
+    get fNodesContainer() {
+        return this.fFlow.fNodesContainer;
+    }
+    constructor(fFlow, hostElement) {
+        this.fFlow = fFlow;
+        this.hostElement = hostElement;
+    }
+    handle(payload) {
+        let result;
+        const node = this.fNodesContainer.findNode(payload.event.targetElement);
+        const pointerPositionInCanvas = Point.fromPoint(payload.event.getPosition()).matrixTransform(this.hostElement);
+        if (node) {
+            if (isNodeOutlet(payload.event.targetElement)) {
+                const outlet = this.fFlow.outlets.find((x) => {
+                    return x.hostElement.contains(payload.event.targetElement);
+                });
+                if (!outlet) {
+                    throw new Error('Outlet not found');
+                }
+                const nodeOutputs = this.fFlow.outputs.filter((x) => node.isContains(x.hostElement));
+                outlet.setOutputs(nodeOutputs);
+                if (outlet.canBeConnected) {
+                    if (outlet.isConnectionFromOutlet) {
+                        console.log('outlet', outlet.hostElement);
+                        const outletCenter = outlet.getElementRectInCanvas(payload.transform, this.hostElement).gravityCenter;
+                        console.log('outletCenter', outletCenter);
+                        result = this.createConnectionHandler(payload, pointerPositionInCanvas, outlet, outletCenter);
+                    }
+                    else {
+                        const output = new FindFirstCanBeConnectedOutputByOutletHandler(this.fFlow).handle(new FindFirstCanBeConnectedOutputByOutletRequest(outlet));
+                        if (!output) {
+                            throw new Error('Output not found');
+                        }
+                        const outputCenter = output.getElementRectInCanvas(payload.transform, this.hostElement).gravityCenter;
+                        result = this.createConnectionHandler(payload, pointerPositionInCanvas, output, outputCenter);
+                    }
+                }
+            }
+            else if (this.isNodeOutput(payload.event.targetElement, node)) {
+                const output = this.fFlow.outputs.find((x) => {
+                    return x.hostElement.contains(payload.event.targetElement);
+                });
+                if (!output) {
+                    throw new Error('Output not found');
+                }
+                if (output.canBeConnected) {
+                    const outputCenter = output.getElementRectInCanvas(payload.transform, this.hostElement).gravityCenter;
+                    result = this.createConnectionHandler(payload, pointerPositionInCanvas, output, outputCenter);
+                }
+            }
+        }
+        return result;
+    }
+    createConnectionHandler(payload, pointerPositionInCanvas, output, outputCenter) {
+        // @ts-ignore
+        this.fConnectionsContainer.fTempConnection.fromTo = new TempConnectionInputOutputModel(output);
+        return {
+            onPointerDownScale: payload.transform.scale,
+            onPointerDownPosition: pointerPositionInCanvas.div(payload.transform.scale),
+            draggableItems: [
+                new CreateConnectionOnPointerMove(this.fConnectionsContainer.fTempConnection, outputCenter, payload.transform, this.hostElement)
+            ]
+        };
+    }
+    isNodeOutput(targetElement, node) {
+        const outlets = this.fFlow.outlets.filter((x) => node.isContains(x.hostElement));
+        return isNodeOutput(targetElement) && !outlets.length;
+    }
+}
+
+class FirstNotConnectedInputOfNodeUnderPointerHandler {
+    constructor(fFlow) {
+        this.fFlow = fFlow;
+    }
+    handle(payload) {
+        const position = payload.event.getPosition();
+        const elementsFromPoint = document.elementsFromPoint(position.x, position.y);
+        const nodes = elementsFromPoint.map((element) => {
+            return this.fFlow.fNodesContainer.fNodes.find((x) => x.isContains(element));
+        }).filter((x) => !!x);
+        const inputs = nodes.map((x) => {
+            return this.fFlow.inputs.filter((i) => x.isContains(i.hostElement)).find((i) => {
+                return !i.isConnected && i.canBeConnected;
+            });
+        });
+        const result = inputs.find((x) => !!x);
+        return result;
+    }
+}
+
+class FirstNotConnectedInputOfNodeUnderPointerRequest {
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+class InputsUnderPointerHandler {
+    constructor(fFlow) {
+        this.fFlow = fFlow;
+    }
+    handle(payload) {
+        const position = payload.event.getPosition();
+        const elementsFromPoint = document.elementsFromPoint(position.x, position.y);
+        return elementsFromPoint.filter((x) => isNodeInput(x)).map((element) => {
+            return this.fFlow.inputs.find((x) => x.isContains(element));
+        }).filter((x) => !!x);
+    }
+}
+
+class InputsUnderPointerRequest {
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+class FindInputsUnderPointerRequest {
+    constructor(event, dragHandler) {
+        this.event = event;
+        this.dragHandler = dragHandler;
+    }
+}
+
+class FindInputsUnderPointerHandler {
+    constructor(fFlow) {
+        this.fFlow = fFlow;
+    }
+    handle(payload) {
+        const inputsUnderPointer = this.getInputsUnderPointer(payload);
+        return inputsUnderPointer.filter((x) => {
+            const targetNode = this.fFlow.fNodesContainer.fNodes.find((y) => y.isContains(x.hostElement));
+            const sourceNode = this.fFlow.fNodesContainer.fNodes.find((y) => y.isContains(payload.dragHandler.connection.fromTo.output.hostElement));
+            return sourceNode?.hostElement !== targetNode?.hostElement;
+        });
+    }
+    getInputsUnderPointer(payload) {
+        let inputs = new InputsUnderPointerHandler(this.fFlow).handle(new InputsUnderPointerRequest(payload.event));
+        const input = new FirstNotConnectedInputOfNodeUnderPointerHandler(this.fFlow).handle(new FirstNotConnectedInputOfNodeUnderPointerRequest(payload.event));
+        if (input) {
+            inputs.push(input);
+        }
+        inputs = inputs.filter((x) => x.canBeConnected);
+        return inputs;
+    }
+}
+
+class CreateConnectionEvent {
+    constructor(outputId, inputId) {
+        this.outputId = outputId;
+        this.inputId = inputId;
+    }
+}
+
+class CreateConnectionOnPointerUp {
+    constructor(fFlow, onCreateConnection) {
+        this.fFlow = fFlow;
+        this.onCreateConnection = onCreateConnection;
+    }
+    handle(payload) {
+        const isCreateConnection = payload.dragHandler.draggableItems.some((x) => x.type === EDraggableType.TEMP_CONNECTION);
+        if (isCreateConnection) {
+            const handler = payload.dragHandler.draggableItems[0];
+            const inputsUnderPointer = new FindInputsUnderPointerHandler(this.fFlow).handle(new FindInputsUnderPointerRequest(payload.event, handler));
+            if (inputsUnderPointer.length > 0) {
+                let output = handler.connection.fromTo.output;
+                const isOutlet = isNodeOutlet(output.hostElement);
+                if (isOutlet) {
+                    output = new FindFirstCanBeConnectedOutputByOutletHandler(this.fFlow).handle(new FindFirstCanBeConnectedOutputByOutletRequest(output));
+                    if (!output) {
+                        throw new Error('Output not found');
+                    }
+                }
+                this.onCreateConnection.emit(new CreateConnectionEvent(output.id, inputsUnderPointer[0]?.id));
+            }
+            handler.complete();
+        }
+    }
+}
+
+class CreateConnectionOnPointerUpRequest {
+    constructor(event, dragHandler) {
+        this.event = event;
+        this.dragHandler = dragHandler;
+    }
+}
+
+class ReassignConnectionOnPointerMove {
+    constructor(connection, canvasTransform, canvasHost) {
+        this.connection = connection;
+        this.canvasTransform = canvasTransform;
+        this.canvasHost = canvasHost;
+        this.type = EDraggableType.REASSIGN_CONNECTION;
+        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
+        this.onPointerDownToConnectorRect = RectExtensions.initialize();
+        this.onPointerDownFromConnectorRect = this.connection.fromTo.output.getElementRectInCanvas(canvasTransform, canvasHost);
+        this.onPointerDownToConnectorRect = RectExtensions.initialize(this.connection.vector.point2.x, this.connection.vector.point2.y, 0, 0);
+    }
+    initialize() {
+    }
+    move(difference) {
+        const toRect = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
+        const vector = getConnectionIntersect(this.onPointerDownFromConnectorRect, toRect);
+        this.connection.setVector(vector);
+        this.connection.redraw();
+    }
+    complete() {
+        const fromConnectorRect = this.connection.fromTo.output.getElementRectInCanvas(this.canvasTransform, this.canvasHost);
+        const toConnectorRect = this.connection.fromTo.input.getElementRectInCanvas(this.canvasTransform, this.canvasHost);
+        const vector = getConnectionIntersect(fromConnectorRect, toConnectorRect);
+        this.connection.setVector(vector);
+        this.connection.completeDrag();
+    }
+}
+
+class ReassignConnectionOnPointerDown {
+    get fConnectionsContainer() {
+        return this.fFlow.fConnectionsContainer;
+    }
+    constructor(fFlow, hostElement) {
+        this.fFlow = fFlow;
+        this.hostElement = hostElement;
+    }
+    handle(payload) {
+        let result;
+        const pointerPositionInCanvas = Point.fromPoint(payload.event.getPosition()).matrixTransform(this.hostElement);
+        const position = payload.event.getPosition();
+        const allElements = document.elementsFromPoint(position.x, position.y);
+        const dragHandlesOfConnections = allElements.filter((x) => {
+            return !!this.fConnectionsContainer.findConnectionWithElement(x) && x.classList.contains(F_CONNECTION_DRAG_HANDLE_CLASS);
+        });
+        let connectionToReassign;
+        if (dragHandlesOfConnections.length) {
+            connectionToReassign = this.fConnectionsContainer.findConnectionWithElement(dragHandlesOfConnections[0]);
+        }
+        if (connectionToReassign && payload.event.isMouseLeftButton()) {
+            result = {
+                onPointerDownScale: payload.transform.scale,
+                onPointerDownPosition: pointerPositionInCanvas.div(payload.transform.scale),
+                draggableItems: [
+                    new ReassignConnectionOnPointerMove(connectionToReassign, payload.transform, this.hostElement)
+                ]
+            };
+        }
+        return result;
+    }
+}
+
+class ReassignConnectionOnPointerDownRequest {
+    constructor(event, transform) {
+        this.event = event;
+        this.transform = transform;
+    }
+}
+
+class ReassignConnectionEvent {
+    constructor(connectionId, outputId, oldInputId, newInputId) {
+        this.connectionId = connectionId;
+        this.outputId = outputId;
+        this.oldInputId = oldInputId;
+        this.newInputId = newInputId;
+    }
+}
+
+class ReassignConnectionOnPointerUp {
+    constructor(fFlow, onReassignConnection) {
+        this.fFlow = fFlow;
+        this.onReassignConnection = onReassignConnection;
+    }
+    handle(payload) {
+        const isReassignConnection = payload.dragHandler.draggableItems.some((x) => x.type === EDraggableType.REASSIGN_CONNECTION);
+        if (isReassignConnection) {
+            const handler = payload.dragHandler.draggableItems[0];
+            const inputsUnderPointer = new FindInputsUnderPointerHandler(this.fFlow).handle(new FindInputsUnderPointerRequest(payload.event, handler));
+            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));
+                }
+            }
+            handler.complete();
+        }
+    }
+}
+
+class ReassignConnectionOnPointerUpRequest {
+    constructor(event, dragHandler) {
+        this.event = event;
+        this.dragHandler = dragHandler;
+    }
+}
+
+class DefaultDragHandler {
+    handle() {
+        return {
+            onPointerDownScale: 1,
+            onPointerDownPosition: new Point(0, 0),
+            draggableItems: []
+        };
+    }
+}
+
+class ExternalItemOnPointerDownRequest {
+    constructor(event) {
+        this.event = event;
+    }
+}
+
+const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
+class FExternalItemBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FExternalItemBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FExternalItemBase, decorators: [{
+            type: Directive
+        }] });
+
+function isExternalItem(element) {
+    return !!element.closest('[fExternalItem]');
+}
+function getExternalItem(element) {
+    return element.closest('[fExternalItem]');
+}
+
+class FExternalItemService {
+    constructor() {
+        this.items = [];
+    }
+    registerItem(item) {
+        this.items.push(item);
+    }
+    getItem(element) {
+        return this.items.find(item => item.hostElement === element);
+    }
+    removeItem(item) {
+        const index = this.items.indexOf(item);
+        if (index !== -1) {
+            this.items.splice(index, 1);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FExternalItemService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FExternalItemService, decorators: [{
+            type: Injectable
+        }] });
+
+let uniqueId = 0;
+class FExternalItemDirective extends FExternalItemBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference, fExternalItemService) {
+        super();
+        this.elementReference = elementReference;
+        this.fExternalItemService = fExternalItemService;
+        this.id = `f-external-item-${uniqueId++}`;
+    }
+    ngOnInit() {
+        this.fExternalItemService.registerItem(this);
+    }
+    ngOnDestroy() {
+        this.fExternalItemService.removeItem(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FExternalItemDirective, deps: [{ token: i0.ElementRef }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { id: "id", data: "data" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-external-item" }, providers: [
+            { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FExternalItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fExternalItem]",
+                    host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-external-item",
+                    },
+                    providers: [
+                        { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FExternalItemService }]; }, propDecorators: { id: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+class ExternalItemOnPointerMoveHandler {
+    constructor(externalItem) {
+        this.externalItem = externalItem;
+        this.type = EDraggableType.PALETTE_ITEM;
+        this.onPointerDownRect = RectExtensions.initialize();
+        this.difference = PointExtensions.initialize();
+    }
+    getStyle(position) {
+        return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
+    }
+    initialize() {
+        this.onPointerDownRect = RectExtensions.fromElement(this.externalItem.hostElement);
+        this.placeholder = DomElementExtensions.deepCloneNode(this.externalItem.hostElement);
+        document.body.appendChild(this.placeholder);
+    }
+    move(difference) {
+        this.difference = difference;
+        const position = Point.fromPoint(this.onPointerDownRect).add(this.difference);
+        this.placeholder.setAttribute('style', this.getStyle(position));
+    }
+    getPlaceholderRect() {
+        return RectExtensions.fromElement(this.placeholder);
+    }
+    complete() {
+        document.body.removeChild(this.placeholder);
+    }
+}
+
+class ExternalItemOnPointerDownHandler {
+    constructor(fExternalItemService, hostElement) {
+        this.fExternalItemService = fExternalItemService;
+        this.hostElement = hostElement;
+    }
+    handle(payload) {
+        let result;
+        if (isExternalItem(payload.event.targetElement)) {
+            const item = this.fExternalItemService.getItem(getExternalItem(payload.event.targetElement));
+            if (!item) {
+                throw new Error('External item not found');
+            }
+            const pointerPositionInCanvas = Point.fromPoint(payload.event.getPosition()).matrixTransform(this.hostElement);
+            result = {
+                onPointerDownScale: 1,
+                onPointerDownPosition: pointerPositionInCanvas.div(1),
+                draggableItems: [
+                    new ExternalItemOnPointerMoveHandler(item)
+                ]
+            };
+        }
+        return result;
+    }
+}
+
+class CreateNodeEvent {
+    constructor(rect, data) {
+        this.rect = rect;
+        this.data = data;
+    }
+}
+
+class ExternalItemOnPointerUpHandler {
+    constructor(fFlow, onCreateNode) {
+        this.fFlow = fFlow;
+        this.onCreateNode = onCreateNode;
+    }
+    handle(payload) {
+        const pointerPositionInCanvas = Point.fromPoint(payload.event.getPosition()).matrixTransform(this.fFlow.hostElement);
+        let difference = pointerPositionInCanvas.div(payload.dragHandler.onPointerDownScale).sub(payload.dragHandler.onPointerDownPosition);
+        const isDragPaletteItem = payload.dragHandler.draggableItems.some((x) => x.type === EDraggableType.PALETTE_ITEM);
+        if (isDragPaletteItem) {
+            const dragHandler = payload.dragHandler.draggableItems[0];
+            dragHandler.move(difference);
+            const isPointerInCanvasRect = document.elementsFromPoint(payload.event.getPosition().x, payload.event.getPosition().y).some((x) => x === this.fFlow.hostElement);
+            if (isPointerInCanvasRect) {
+                const rectInCanvas = getElementRectInCanvas(dragHandler.placeholder, this.fFlow.transform, this.fFlow.hostElement);
+                this.onCreateNode.emit(new CreateNodeEvent(rectInCanvas, dragHandler.externalItem.data));
+            }
+            dragHandler.complete();
+        }
+    }
+}
+
+class ExternalItemOnPointerUpRequest {
+    constructor(event, dragHandler) {
+        this.event = event;
+        this.dragHandler = dragHandler;
+    }
+}
+
+class NodeOnPointerDownRequest {
+    constructor(event, transform, selectedItems, isMoveCurrentNode = false) {
+        this.event = event;
+        this.transform = transform;
+        this.selectedItems = selectedItems;
+        this.isMoveCurrentNode = isMoveCurrentNode;
+    }
+}
+
+class FConnectionDragHandler {
+    constructor(connection, canvasTransform, canvasHost) {
+        this.connection = connection;
+        this.type = EDraggableType.CONNECTION;
+        this.onPointerDownVector = VectorExtensions.initialize();
+        this.onPointerDownVector = getConnectionIntersect(this.connection.fromTo.output.getElementRectInCanvas(canvasTransform, canvasHost), this.connection.fromTo.input.getElementRectInCanvas(canvasTransform, canvasHost));
+    }
+    initialize() {
+    }
+    move(difference) {
+        const fromPoint = Point.fromPoint(this.onPointerDownVector.point1).add(difference);
+        const toPoint = Point.fromPoint(this.onPointerDownVector.point2).add(difference);
+        this.connection.setVector(VectorExtensions.initialize(fromPoint, toPoint));
+        this.connection.redraw();
+    }
+    complete() {
+    }
+}
+
+class FConnectionSourceDragHandler {
+    constructor(connection, canvasTransform, canvasHost) {
+        this.connection = connection;
+        this.type = EDraggableType.CONNECTION;
+        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
+        this.onPointerDownToConnectorRect = RectExtensions.initialize();
+        this.onPointerDownFromConnectorRect = this.connection.fromTo.output.getElementRectInCanvas(canvasTransform, canvasHost);
+        this.onPointerDownToConnectorRect = this.connection.fromTo.input.getElementRectInCanvas(canvasTransform, canvasHost);
+    }
+    initialize() {
+    }
+    move(difference) {
+        const fromPoint = RectExtensions.addPoint(this.onPointerDownFromConnectorRect, difference);
+        const vector = getConnectionIntersect(fromPoint, this.onPointerDownToConnectorRect);
+        this.connection.setVector(vector);
+        this.connection.redraw();
+    }
+    complete() {
+    }
+}
+
+class FConnectionTargetDragHandler {
+    constructor(connection, canvasTransform, canvasHost) {
+        this.connection = connection;
+        this.type = EDraggableType.CONNECTION;
+        this.onPointerDownFromConnectorRect = RectExtensions.initialize();
+        this.onPointerDownToConnectorRect = RectExtensions.initialize();
+        this.onPointerDownFromConnectorRect = this.connection.fromTo.output.getElementRectInCanvas(canvasTransform, canvasHost);
+        this.onPointerDownToConnectorRect = this.connection.fromTo.input.getElementRectInCanvas(canvasTransform, canvasHost);
+    }
+    initialize() {
+    }
+    move(difference) {
+        const toPoint = RectExtensions.addPoint(this.onPointerDownToConnectorRect, difference);
+        const vector = getConnectionIntersect(this.onPointerDownFromConnectorRect, toPoint);
+        this.connection.setVector(vector);
+        this.connection.redraw();
+    }
+    complete() {
+    }
+}
+
+class NodeOnPointerMove {
+    constructor(fLineAlignment, fNode) {
+        this.fLineAlignment = fLineAlignment;
+        this.fNode = fNode;
+        this.type = EDraggableType.NODE;
+        this.onPointerDownPosition = PointExtensions.initialize();
+        this.onPointerDownPosition = this.fNode.position;
+    }
+    initialize() {
+    }
+    move(difference) {
+        const position = Point.fromPoint(this.onPointerDownPosition).add(difference);
+        this.fNode.updatePosition(position);
+        this.fNode.redraw();
+        this.fLineAlignment?.handle(difference);
+    }
+    complete() {
+        this.fNode.completeDrag();
+    }
+}
+
+class NodeOnPointerDown {
+    get fConnectionsContainer() {
+        return this.fFlow.fConnectionsContainer;
+    }
+    get fNodesContainer() {
+        return this.fFlow.fNodesContainer;
+    }
+    constructor(fLineAlignment, fFlow, hostElement) {
+        this.fLineAlignment = fLineAlignment;
+        this.fFlow = fFlow;
+        this.hostElement = hostElement;
+    }
+    handle(payload) {
+        let result;
+        const node = this.fNodesContainer.findNode(payload.event.targetElement);
+        const pointerPositionInCanvas = Point.fromPoint(payload.event.getPosition()).matrixTransform(this.hostElement);
+        if (node) {
+            if (isNodeDragHandle(payload.event.targetElement)) {
+                if (!payload.selectedItems.includes(node) && payload.isMoveCurrentNode) {
+                    payload.selectedItems.push(node);
+                    node.select();
+                }
+                this.fNodesContainer.setNodeToTopLayer(node);
+                const itemsToDrag = this.calculateDraggableConnectionsAndNodes(payload);
+                const draggedNodes = itemsToDrag.filter((x) => {
+                    return x.type === EDraggableType.NODE;
+                }).map((x) => x.fNode);
+                this.fLineAlignment?.initialize(this.fNodesContainer.fNodes.toArray(), draggedNodes);
+                result = {
+                    onPointerDownScale: payload.transform.scale,
+                    onPointerDownPosition: pointerPositionInCanvas.div(payload.transform.scale),
+                    draggableItems: itemsToDrag
+                };
+            }
+        }
+        return result;
+    }
+    calculateDraggableConnectionsAndNodes(payload) {
+        let itemsToDrag = [];
+        const selectedNodes = payload.selectedItems.map((x) => {
+            return this.fNodesContainer.findNode(x.hostElement);
+        }).filter((x) => !!x);
+        const nodeDragHandlers = selectedNodes.map((x) => new NodeOnPointerMove(this.fLineAlignment, x));
+        itemsToDrag = nodeDragHandlers;
+        const allOutputs = selectedNodes.reduce((result, x) => {
+            return result.concat(this.getOutputsForNode(x));
+        }, []);
+        const allInputs = selectedNodes.reduce((result, x) => {
+            return result.concat(this.getInputsForNode(x));
+        }, []);
+        nodeDragHandlers.forEach((nodeHandler) => {
+            const outputConnections = this.fConnectionsContainer.findOutgoingConnections(this.getOutputsForNode(nodeHandler.fNode));
+            outputConnections.forEach((c) => {
+                if (allInputs.includes(c.fromTo.input)) {
+                    itemsToDrag.push(new FConnectionDragHandler(c, payload.transform, this.hostElement));
+                }
+                else {
+                    itemsToDrag.push(new FConnectionSourceDragHandler(c, payload.transform, this.hostElement));
+                }
+            });
+            const inputConnections = this.fConnectionsContainer.findIncomingConnections(this.getInputsForNode(nodeHandler.fNode));
+            inputConnections.forEach((c) => {
+                if (allOutputs.includes(c.fromTo.output)) {
+                    const index = itemsToDrag.findIndex((x) => x.type === EDraggableType.CONNECTION && x.connection.id === c.id);
+                    if (index !== -1) {
+                        itemsToDrag.push(new FConnectionDragHandler(c, payload.transform, this.hostElement));
+                    }
+                }
+                else {
+                    itemsToDrag.push(new FConnectionTargetDragHandler(c, payload.transform, this.hostElement));
+                }
+            });
+            //itemsToDrag.push(new NodeOnPointerMove(this.fLineAlignment, x.fNode));
+        });
+        return itemsToDrag;
+    }
+    getInputsForNode(node) {
+        return this.fFlow.inputs.toArray().filter((x) => node.isContains(x.hostElement));
+    }
+    getOutputsForNode(node) {
+        return this.fFlow.outputs.toArray().filter((x) => node.isContains(x.hostElement));
+    }
+}
+
+class NodeOnPointerUp {
+    constructor(fLineAlignment, fConnectIfIntersect, hostElement) {
+        this.fLineAlignment = fLineAlignment;
+        this.fConnectIfIntersect = fConnectIfIntersect;
+        this.hostElement = hostElement;
+    }
+    handle(payload) {
+        const pointerPositionInCanvas = Point.fromPoint(payload.event.getPosition()).matrixTransform(this.hostElement);
+        let difference = pointerPositionInCanvas.div(payload.dragHandler.onPointerDownScale).sub(payload.dragHandler.onPointerDownPosition);
+        const isDragNodes = payload.dragHandler.draggableItems.some((x) => x.type === EDraggableType.NODE);
+        if (isDragNodes) {
+            const nearestIntersection = this.fLineAlignment?.findNearestCoordinate(difference);
+            if (nearestIntersection) {
+                difference.x = nearestIntersection.xResult.value ? (difference.x - nearestIntersection.xResult.distance) : difference.x;
+                difference.y = nearestIntersection.yResult.value ? (difference.y - nearestIntersection.yResult.distance) : difference.y;
+            }
+            payload.dragHandler.draggableItems.forEach((x) => {
+                x.move(difference);
+                x.complete();
+            });
+            this.fConnectIfIntersect?.handle(payload.dragHandler.draggableItems);
+            this.fLineAlignment?.complete();
+        }
+    }
+}
+
+class NodeOnPointerUpRequest {
+    constructor(event, dragHandler) {
+        this.event = event;
+        this.dragHandler = dragHandler;
+    }
+}
+
+class SelectionOnPointerMove {
+    constructor(fFlow, fSelection, selectedOnStart, onPointerDownPosition = PointExtensions.initialize()) {
+        this.fFlow = fFlow;
+        this.fSelection = fSelection;
+        this.selectedOnStart = selectedOnStart;
+        this.onPointerDownPosition = onPointerDownPosition;
+        this.type = EDraggableType.SELECTION;
+        this.selectedItems = [];
+        this.items = [];
+        const nodeRects = fFlow.fNodesContainer.fNodes.map((x) => {
+            return {
+                element: x,
+                rect: getElementRectInCanvas(x.hostElement, fFlow.transform, this.fFlow.hostElement)
+            };
+        });
+        const lineRects = fFlow.fConnectionsContainer.fConnections.map((x) => {
+            return {
+                element: x,
+                rect: getElementRectInCanvas(x.fPath.hostElement, fFlow.transform, this.fFlow.hostElement)
+            };
+        });
+        this.items = [...nodeRects, ...lineRects].filter((x) => {
+            return !selectedOnStart.includes(x.element);
+        });
+    }
+    initialize() {
+        this.fSelection?.show();
+        this.fSelection?.draw({ ...this.onPointerDownPosition, width: 0, height: 0 });
+    }
+    move(difference) {
+        const currentPoint = Point.fromPoint(difference).add(this.onPointerDownPosition);
+        const x = Math.min(this.onPointerDownPosition.x, currentPoint.x);
+        const y = Math.min(this.onPointerDownPosition.y, currentPoint.y);
+        const width = Math.abs(difference.x);
+        const height = Math.abs(difference.y);
+        this.fSelection?.draw({ x, y, width, height });
+        this.selectedItems = [];
+        this.items.forEach((item) => {
+            item.element.deselect();
+            if (RectExtensions.intersectionWithRect(item.rect, RectExtensions.initialize(x, y, width, height))) {
+                item.element.select();
+                this.selectedItems.push(item.element);
+            }
+        });
+    }
+    complete() {
+        this.fSelection?.hide();
+        this.selectedItems.push(...this.selectedOnStart || []);
+    }
+}
+
+class SelectionOnPointerDown {
+    constructor(fFlow, fSelection, hostElement) {
+        this.fFlow = fFlow;
+        this.fSelection = fSelection;
+        this.hostElement = hostElement;
+    }
+    handle(payload) {
+        const pointerPositionInCanvas = Point.fromPoint(payload.event.getPosition()).matrixTransform(this.hostElement);
+        let node = this.fFlow.fNodesContainer.findNode(payload.event.targetElement);
+        const connection = this.fFlow.fConnectionsContainer.findConnectionWithElement(payload.event.targetElement);
+        payload.selectedItems.forEach((x) => {
+            x.deselect();
+        });
+        const isMultiselect = MouseEventExtensions.isCommandButton(payload.event.originalEvent) ||
+            MouseEventExtensions.isShiftPressed(payload.event.originalEvent);
+        if (!isMultiselect) {
+            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);
+                }
+                else {
+                    payload.selectedItems.splice(payload.selectedItems.indexOf(node), 1);
+                }
+            }
+        }
+        else if (connection) {
+            if (!payload.selectedItems.includes(connection)) {
+                payload.selectedItems.push(connection);
+            }
+            else {
+                payload.selectedItems.splice(payload.selectedItems.indexOf(connection), 1);
+            }
+        }
+        payload.selectedItems.forEach((x) => {
+            x.select();
+        });
+        let draggableItems = [];
+        if (MouseEventExtensions.isShiftPressed(payload.event.originalEvent)) {
+            draggableItems = [
+                new SelectionOnPointerMove(this.fFlow, this.fSelection, payload.selectedItems, pointerPositionInCanvas)
+            ];
+        }
+        return {
+            onPointerDownScale: 1,
+            onPointerDownPosition: pointerPositionInCanvas.div(1),
+            draggableItems: draggableItems,
+            selectedItems: payload.selectedItems
+        };
+    }
+}
+
+class SelectionOnPointerDownRequest {
+    constructor(event, transform, selectedItems) {
+        this.event = event;
+        this.transform = transform;
+        this.selectedItems = selectedItems;
+    }
+}
+
+class SelectionOnPointerUp {
+    constructor(hostElement) {
+        this.hostElement = hostElement;
+    }
+    handle(payload) {
+        let result = payload.selectedItems;
+        const pointerPositionInCanvas = Point.fromPoint(payload.event.getPosition()).matrixTransform(this.hostElement);
+        let difference = pointerPositionInCanvas.div(payload.dragHandler.onPointerDownScale).sub(payload.dragHandler.onPointerDownPosition);
+        const isSelection = payload.dragHandler.draggableItems.some((x) => x.type === EDraggableType.SELECTION);
+        if (isSelection) {
+            payload.dragHandler.draggableItems.forEach((x) => {
+                x.move(difference);
+                x.complete();
+            });
+            result = payload.dragHandler.draggableItems[0].selectedItems;
+        }
+        return result;
+    }
+}
+
+class SelectionOnPointerUpRequest {
+    constructor(event, dragHandler, selectedItems) {
+        this.event = event;
+        this.dragHandler = dragHandler;
+        this.selectedItems = selectedItems;
+    }
+}
+
+class FDraggableService {
+    get hostElement() {
+        return this.fFlow.hostElement;
+    }
+    get transform() {
+        return this.fFlow.transform;
+    }
+    constructor() {
+    }
+    setFlow(fFlow) {
+        this.fFlow = fFlow;
+    }
+    onPointerDown(event) {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+const F_DND_DIRECTIVE = new InjectionToken('F_DND_DIRECTIVE');
+class FDraggableBase extends IDragAndDropBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    get transform() {
+        return this.fItemsContainer.transform;
+    }
+    get fItemsContainer() {
+        return this.fFlow.fItemsContainer;
+    }
+    get fBackground() {
+        return this.fFlow.fBackground;
+    }
+    constructor(fFlow, fDNDService, fExternalItemService, elementReference, ngZone) {
+        super(ngZone);
+        this.fFlow = fFlow;
+        this.fDNDService = fDNDService;
+        this.fExternalItemService = fExternalItemService;
+        this.elementReference = elementReference;
+        this.subscriptions$ = new Subscription();
+        this.dragHandler = new DefaultDragHandler().handle();
+        this.selectedItems = [];
+        this.fDNDService.setFlow(this.fFlow);
+    }
+    ngAfterViewInit() {
+        super.subscribe(document);
+        this.dragSelection = new SelectionOnPointerDown(this.fFlow, this.fSelection, this.hostElement);
+        this.reassignConnection = new ReassignConnectionOnPointerDown(this.fFlow, this.hostElement);
+        this.dragCanvas = new CanvasOnPointerDownHandler(this.fBackground, this.fItemsContainer, this.hostElement);
+        this.dragNode = new NodeOnPointerDown(this.fLineAlignment, this.fFlow, this.hostElement);
+        this.createConnection = new CreateConnectionOnPointerDown(this.fFlow, this.hostElement);
+        this.dragExternalItem = new ExternalItemOnPointerDownHandler(this.fExternalItemService, this.hostElement);
+    }
+    onPointerDown(event) {
+        let result = event.isMouseLeftButton();
+        const selection = this.dragSelection.handle(new SelectionOnPointerDownRequest(event, this.transform, this.selectedItems));
+        this.selectedItems = selection.selectedItems || [];
+        const reassignConnection = this.reassignConnection.handle(new ReassignConnectionOnPointerDownRequest(event, this.transform));
+        const createConnection = this.createConnection.handle(new CreateConnectionOnPointerDownRequest(event, this.transform));
+        const dragNode = this.dragNode.handle(new NodeOnPointerDownRequest(event, this.transform, this.selectedItems));
+        const dragCanvas = this.dragCanvas.handle(new CanvasOnPointerDownRequest(event));
+        const dragExternalItem = this.dragExternalItem.handle(new ExternalItemOnPointerDownRequest(event));
+        const dragSelection = selection.draggableItems.length ? selection : undefined;
+        const dragHandle = dragSelection || reassignConnection || createConnection || dragNode || dragCanvas || dragExternalItem;
+        if (!dragHandle) {
+            this.dragHandler = new DefaultDragHandler().handle();
+            result = false;
+        }
+        else {
+            this.dragHandler = dragHandle;
+        }
+        return result;
+    }
+    prepareDragSequence(event) {
+        const isDragNodes = this.dragHandler.draggableItems.some((x) => x.type === EDraggableType.NODE);
+        if (isDragNodes) {
+            this.dragHandler = this.dragNode.handle(new NodeOnPointerDownRequest(event, this.transform, this.selectedItems, true));
+        }
+        this.dragHandler.draggableItems.forEach((item) => {
+            item.initialize();
+        });
+    }
+    onPointerMove(event) {
+        const pointerPositionInCanvas = Point.fromPoint(event.getPosition()).matrixTransform(this.hostElement);
+        const difference = pointerPositionInCanvas.div(this.dragHandler.onPointerDownScale).sub(this.dragHandler.onPointerDownPosition);
+        this.dragHandler.draggableItems.forEach((item) => {
+            item.move(difference);
+        });
+    }
+    onPointerUp(event) {
+        new ReassignConnectionOnPointerUp(this.fFlow, this.onReassignConnection).handle(new ReassignConnectionOnPointerUpRequest(event, this.dragHandler));
+        new CreateConnectionOnPointerUp(this.fFlow, this.onCreateConnection).handle(new CreateConnectionOnPointerUpRequest(event, this.dragHandler));
+        new NodeOnPointerUp(this.fLineAlignment, this.fConnectIfIntersect, this.hostElement).handle(new NodeOnPointerUpRequest(event, this.dragHandler));
+        this.selectedItems = new SelectionOnPointerUp(this.hostElement).handle(new SelectionOnPointerUpRequest(event, this.dragHandler, this.selectedItems));
+        new ExternalItemOnPointerUpHandler(this.fFlow, this.onCreateNode).handle(new ExternalItemOnPointerUpRequest(event, this.dragHandler));
+    }
+    ngOnDestroy() {
+        super.unsubscribe();
+        this.subscriptions$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableBase, deps: [{ token: FFlowBase }, { token: FDraggableService }, { token: FExternalItemService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FDraggableBase, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: FFlowBase }, { type: FDraggableService }, { type: FExternalItemService }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+
+const ALIGN_THRESHOLD$1 = 10;
+function findNearestCoordinateByX(elements, target) {
+    let nearest;
+    let minDistance;
+    for (const element of elements) {
+        const distanceLeftLeft = target.x - element.x;
+        const distanceLeftRight = target.x - (element.x + element.width);
+        const distanceCenterCenter = target.gravityCenter.x - element.gravityCenter.x;
+        const distanceRightLeft = (target.x + target.width) - element.x;
+        const distanceRightRight = (target.x + target.width) - (element.x + element.width);
+        if (Math.abs(distanceLeftLeft) <= ALIGN_THRESHOLD$1 ||
+            Math.abs(distanceLeftRight) <= ALIGN_THRESHOLD$1 ||
+            Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD$1 ||
+            Math.abs(distanceRightLeft) <= ALIGN_THRESHOLD$1 ||
+            Math.abs(distanceRightRight) <= ALIGN_THRESHOLD$1) {
+            if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
+                minDistance = distanceCenterCenter;
+                nearest = element.gravityCenter.x;
+            }
+            if (Math.abs(distanceLeftLeft) < Math.abs(minDistance)) {
+                minDistance = distanceLeftLeft;
+                nearest = element.x;
+            }
+            if (Math.abs(distanceRightRight) < Math.abs(minDistance)) {
+                minDistance = distanceRightRight;
+                nearest = element.x + element.width;
+            }
+            if (Math.abs(distanceLeftRight) < Math.abs(minDistance)) {
+                minDistance = distanceLeftRight;
+                nearest = element.x + element.width;
+            }
+            if (Math.abs(distanceRightLeft) < Math.abs(minDistance)) {
+                minDistance = distanceRightLeft;
+                nearest = element.x;
+            }
+        }
+    }
+    return { value: nearest, distance: minDistance };
+}
+
+const ALIGN_THRESHOLD = 10;
+function findNearestCoordinateByY(elements, target) {
+    let nearest;
+    let minDistance;
+    for (const element of elements) {
+        const distanceTopTop = target.y - element.y;
+        const distanceTopBottom = target.y - (element.y + element.height);
+        const distanceCenterCenter = target.gravityCenter.y - element.gravityCenter.y;
+        const distanceBottomTop = (target.y + target.height) - element.y;
+        const distanceBottomBottom = (target.y + target.height) - (element.y + element.height);
+        if (Math.abs(distanceTopTop) <= ALIGN_THRESHOLD ||
+            Math.abs(distanceTopBottom) <= ALIGN_THRESHOLD ||
+            Math.abs(distanceCenterCenter) <= ALIGN_THRESHOLD ||
+            Math.abs(distanceBottomTop) <= ALIGN_THRESHOLD ||
+            Math.abs(distanceBottomBottom) <= ALIGN_THRESHOLD) {
+            if (minDistance === undefined || Math.abs(distanceCenterCenter) < Math.abs(minDistance)) {
+                minDistance = distanceCenterCenter;
+                nearest = element.gravityCenter.y;
+            }
+            if (Math.abs(distanceTopTop) < Math.abs(minDistance)) {
+                minDistance = distanceTopTop;
+                nearest = element.y;
+            }
+            if (Math.abs(distanceBottomBottom) < Math.abs(minDistance)) {
+                minDistance = distanceBottomBottom;
+                nearest = element.y + element.height;
+            }
+            if (Math.abs(distanceTopBottom) < Math.abs(minDistance)) {
+                minDistance = distanceTopBottom;
+                nearest = element.y + element.height;
+            }
+            if (Math.abs(distanceBottomTop) < Math.abs(minDistance)) {
+                minDistance = distanceBottomTop;
+                nearest = element.y;
+            }
+        }
+    }
+    return { value: nearest, distance: minDistance };
+}
+
+const F_LINE_ALIGNMENT = new InjectionToken('F_LINE_ALIGNMENT');
+class FLineAlignmentDirective {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    get transform() {
+        return this.fFlow.fItemsContainer.transform;
+    }
+    constructor(fFlow, elementReference) {
+        this.fFlow = fFlow;
+        this.elementReference = elementReference;
+        this.fHorizontalLine = new LineFElement();
+        this.fVerticalLine = new LineFElement();
+        this.size = SizeExtensions.initialize();
+        this.draggedNodeRect = RectExtensions.initialize();
+        this.rects = [];
+        this.hostElement.appendChild(this.fHorizontalLine.hostElement);
+        this.hostElement.appendChild(this.fVerticalLine.hostElement);
+    }
+    initialize(allNodes, currentNodes) {
+        this.size = this.fFlow.hostElement.getBoundingClientRect();
+        this.rects = [];
+        const draggedNodeRects = currentNodes.map((x) => {
+            return getElementRectInCanvas(x.hostElement, this.transform, this.fFlow.hostElement);
+        });
+        this.draggedNodeRect = RectExtensions.union(draggedNodeRects);
+        const allNodesExcludeCurrents = allNodes.filter((x) => {
+            return !currentNodes.includes(x);
+        });
+        this.rects = allNodesExcludeCurrents.map((x) => {
+            return getElementRectInCanvas(x.hostElement, this.transform, this.fFlow.hostElement);
+        });
+    }
+    handle(difference) {
+        this.drawIntersections(difference);
+    }
+    drawIntersections(difference) {
+        const intersect = this.findNearestCoordinate(difference);
+        if (intersect.xResult.value !== undefined) {
+            this.fVerticalLine.show();
+            this.fVerticalLine.draw({
+                x1: intersect.xResult.value * this.transform.scale + this.transform.position.x + this.transform.scaledPosition.x,
+                x2: intersect.xResult.value * this.transform.scale + this.transform.position.x + this.transform.scaledPosition.x,
+                y1: 0,
+                y2: this.size.height
+            });
+        }
+        else {
+            this.fVerticalLine.hide();
+        }
+        if (intersect.yResult.value !== undefined) {
+            this.fHorizontalLine.show();
+            this.fHorizontalLine.draw({
+                x1: 0,
+                x2: this.size.width,
+                y1: intersect.yResult.value * this.transform.scale + this.transform.position.y + this.transform.scaledPosition.y,
+                y2: intersect.yResult.value * this.transform.scale + this.transform.position.y + this.transform.scaledPosition.y,
+            });
+        }
+        else {
+            this.fHorizontalLine.hide();
+        }
+    }
+    findNearestCoordinate(difference) {
+        let result = {
+            xResult: { value: undefined, distance: undefined },
+            yResult: { value: undefined, distance: undefined }
+        };
+        const rect = RectExtensions.addPoint(this.draggedNodeRect, difference);
+        const xResult = findNearestCoordinateByX(this.rects, rect);
+        const yResult = findNearestCoordinateByY(this.rects, rect);
+        result = { xResult, yResult };
+        return result;
+    }
+    complete() {
+        this.fVerticalLine.hide();
+        this.fHorizontalLine.hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FLineAlignmentDirective, deps: [{ token: F_FLOW_COMPONENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FLineAlignmentDirective, selector: "g[fLineAlignment]", host: { classAttribute: "f-line-alignment f-component" }, providers: [
+            { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentDirective }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FLineAlignmentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "g[fLineAlignment]",
+                    host: {
+                        'class': 'f-line-alignment f-component'
+                    },
+                    providers: [
+                        { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentDirective }
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: FFlowBase, decorators: [{
+                    type: Inject,
+                    args: [F_FLOW_COMPONENT]
+                }] }, { type: i0.ElementRef }]; } });
+
+class FDraggableDirective extends FDraggableBase {
+    constructor(fFlow, fDNDService, fExternalItemService, elementReference, ngZone) {
+        super(fFlow, fDNDService, fExternalItemService, elementReference, ngZone);
+        this.disabled = false;
+        this.onCreateConnection = new EventEmitter();
+        this.onReassignConnection = new EventEmitter();
+        this.onCreateNode = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableDirective, deps: [{ token: F_FLOW_COMPONENT }, { token: FDraggableService }, { token: FExternalItemService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FDraggableDirective, selector: "svg[fDraggable]", inputs: { disabled: "disabled" }, outputs: { onCreateConnection: "onCreateConnection", onReassignConnection: "onReassignConnection", onCreateNode: "onCreateNode" }, providers: [
+            { provide: F_DND_DIRECTIVE, useExisting: FDraggableDirective }
+        ], queries: [{ propertyName: "fLineAlignment", first: true, predicate: F_LINE_ALIGNMENT, descendants: true, static: true }, { propertyName: "fConnectIfIntersect", first: true, predicate: F_CONNECT_IF_INTERSECT, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: F_SELECTION, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "svg[fDraggable]",
+                    providers: [
+                        { provide: F_DND_DIRECTIVE, useExisting: FDraggableDirective }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: FFlowBase, decorators: [{
+                    type: Inject,
+                    args: [F_FLOW_COMPONENT]
+                }] }, { type: FDraggableService }, { type: FExternalItemService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], fLineAlignment: [{
+                type: ContentChild,
+                args: [F_LINE_ALIGNMENT, { static: true }]
+            }], fConnectIfIntersect: [{
+                type: ContentChild,
+                args: [F_CONNECT_IF_INTERSECT, { static: true }]
+            }], fSelection: [{
+                type: ContentChild,
+                args: [F_SELECTION, { static: true }]
+            }], onCreateConnection: [{
+                type: Output
+            }], onReassignConnection: [{
+                type: Output
+            }], onCreateNode: [{
+                type: Output
+            }] } });
+
+class FDraggableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: FDraggableModule, declarations: [FDraggableDirective,
+            FExternalItemDirective,
+            FLineAlignmentDirective,
+            FSelectionDirective,
+            FConnectIfIntersectDirective], exports: [FDraggableDirective,
+            FExternalItemDirective,
+            FLineAlignmentDirective,
+            FSelectionDirective,
+            FConnectIfIntersectDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableModule, providers: [
+            FExternalItemService,
+            FDraggableService
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FDraggableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FDraggableDirective,
+                        FExternalItemDirective,
+                        FLineAlignmentDirective,
+                        FSelectionDirective,
+                        FConnectIfIntersectDirective
+                    ],
+                    imports: [],
+                    providers: [
+                        FExternalItemService,
+                        FDraggableService
+                    ],
+                    exports: [
+                        FDraggableDirective,
+                        FExternalItemDirective,
+                        FLineAlignmentDirective,
+                        FSelectionDirective,
+                        FConnectIfIntersectDirective
+                    ]
+                }]
+        }] });
+
+class ConnectIfIntersectHandler {
+    constructor(connections, fFlow, fItemsContainer) {
+        this.connections = connections;
+        this.fFlow = fFlow;
+        this.fItemsContainer = fItemsContainer;
+    }
+    handle(request) {
+        const isValid = this.isValidRequest(request);
+        if (!isValid) {
+            return;
+        }
+        const fNode = request.draggableItems[0].fNode;
+        const outputsOfNode = this.getOutputsForNode(fNode);
+        const inputsOfNode = this.getInputsForNode(fNode);
+        const isCantBeConnectedByOutput = outputsOfNode.some((x) => !x.canBeConnected);
+        const isCantBeConnectedByInput = this.connections.some((x) => {
+            return inputsOfNode.find((input) => input.id === x.fromTo?.input?.id);
+        });
+        if (!isCantBeConnectedByInput && outputsOfNode.length && !isCantBeConnectedByOutput && inputsOfNode.length) {
+            const output = outputsOfNode[0];
+            const input = inputsOfNode[0];
+            const outgoingConnections = findOutgoingConnections(this.connections, [output]);
+            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);
+                // }
+            }
+        }
+    }
+    isValidRequest(request) {
+        const result = request?.draggableItems.length === 1 &&
+            request?.draggableItems[0].type === EDraggableType.NODE;
+        return result;
+    }
+    getOutputsForNode(node) {
+        return this.fFlow.outputs.filter((x) => node.isContains(x.hostElement));
+    }
+    getInputsForNode(node) {
+        return this.fFlow.inputs.filter((x) => node.isContains(x.hostElement));
+    }
+    findConnectionsUnderNode(node) {
+        const nodeRect = getElementRectInCanvas(node.hostElement, this.fItemsContainer.transform, this.fFlow.hostElement);
+        return this.connections.filter((x) => {
+            const intersection = RectExtensions.intersectionWithVector(nodeRect, x.vector.point1, x.vector.point2);
+            return (intersection || []).length > 0;
+        });
+    }
+}
+
+class ConnectIfIntersectRequest {
+    constructor(draggableItems) {
+        this.draggableItems = draggableItems;
+    }
+}
+
+const F_CONNECT_IF_INTERSECT = new InjectionToken('F_CONNECT_IF_INTERSECT');
+class FConnectIfIntersectDirective {
+    constructor(fFlow, fItemsContainer) {
+        this.fFlow = fFlow;
+        this.fItemsContainer = fItemsContainer;
+    }
+    handle(draggableItems) {
+        new ConnectIfIntersectHandler(this.fConnections.toArray(), this.fFlow, this.fItemsContainer).handle(new ConnectIfIntersectRequest(draggableItems));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectIfIntersectDirective, deps: [{ token: F_FLOW_COMPONENT }, { token: F_ITEMS_CONTAINER }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FConnectIfIntersectDirective, selector: "g[fConnectIfIntersect]", providers: [
+            { provide: F_CONNECT_IF_INTERSECT, useExisting: FConnectIfIntersectDirective }
+        ], queries: [{ propertyName: "fConnections", predicate: F_CONNECTION_COMPONENT, descendants: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FConnectIfIntersectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "g[fConnectIfIntersect]",
+                    providers: [
+                        { provide: F_CONNECT_IF_INTERSECT, useExisting: FConnectIfIntersectDirective }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: FFlowBase, decorators: [{
+                    type: Inject,
+                    args: [F_FLOW_COMPONENT]
+                }] }, { type: FItemsContainerBase, decorators: [{
+                    type: Inject,
+                    args: [F_ITEMS_CONTAINER]
+                }] }]; }, propDecorators: { fConnections: [{
+                type: ContentChildren,
+                args: [F_CONNECTION_COMPONENT, { descendants: true }]
+            }] } });
+
+const F_ZOOM = new InjectionToken('F_ZOOM');
+class FZoomBase {
+    constructor(fItemsContainer, fDnd, fCanvas) {
+        this.fItemsContainer = fItemsContainer;
+        this.fDnd = fDnd;
+        this.fCanvas = fCanvas;
+        this.isEnabled = false;
+        this.minimum = 0.3;
+        this.maximum = 4;
+        this.step = 1.1;
+        this.listeners = EventExtensions.emptyListener();
+    }
+    toggleZoom() {
+        if (this.isEnabled && this.fCanvas.hostElement) {
+            this.subscribe();
+        }
+        else {
+            this.unsubscribe();
+        }
+    }
+    subscribe() {
+        this.listeners();
+        this.fCanvas.hostElement.addEventListener('wheel', this.onWheel.bind(this));
+        this.fCanvas.hostElement.addEventListener('dblclick', this.onDoubleClick.bind(this));
+        this.listeners = () => {
+            this.fCanvas.hostElement.removeEventListener('wheel', this.onWheel.bind(this));
+            this.fCanvas.hostElement.removeEventListener('dblclick', this.onDoubleClick.bind(this));
+        };
+    }
+    getScale() {
+        return this.fItemsContainer.transform.scale || 1;
+    }
+    onWheel(event) {
+        event.preventDefault();
+        if (this.fDnd.isDragStarted) {
+            return;
+        }
+        let result = this.getScale();
+        if (event.deltaY > 0) {
+            if (this.getScale() / this.step >= this.minimum) {
+                result = this.getScale() / this.step;
+            }
+        }
+        else if (event.deltaY < 0) {
+            if (this.getScale() * this.step <= this.maximum) {
+                result = this.getScale() * this.step;
+            }
+        }
+        const pointerPositionInCanvas = new Point(event.clientX, event.clientY).matrixTransform(this.fCanvas.hostElement);
+        this.fItemsContainer.setZoom(result, pointerPositionInCanvas);
+        this.fItemsContainer.redraw();
+        this.fItemsContainer.completeDrag();
+    }
+    onZoomToCenter(deltaY) {
+        const preventDefault = () => { };
+        const rect = RectExtensions.fromElement(this.fCanvas.hostElement);
+        this.onWheel({
+            deltaY, preventDefault, clientX: rect.gravityCenter.x, clientY: rect.gravityCenter.y
+        });
+    }
+    onDoubleClick(event) {
+        event.preventDefault();
+        if (this.fDnd.isDragStarted) {
+            return;
+        }
+        let result = this.getScale();
+        if (this.getScale() * 1.7 <= this.maximum) {
+            result = this.getScale() * 1.7;
+        }
+        const pointerPositionInCanvas = new Point(event.clientX, event.clientY).matrixTransform(this.fCanvas.hostElement);
+        this.fItemsContainer.setZoom(result, pointerPositionInCanvas);
+        this.fItemsContainer.redrawWithAnimation();
+        this.fItemsContainer.completeDrag();
+    }
+    reset() {
+        this.fItemsContainer.resetZoom();
+        this.fItemsContainer.redraw();
+        this.fItemsContainer.completeDrag();
+    }
+    unsubscribe() {
+        this.listeners();
+        this.listeners = EventExtensions.emptyListener();
+    }
+}
+
+class FZoomDirective extends FZoomBase {
+    get fFlowZoom() {
+        return this.isEnabled;
+    }
+    set fFlowZoom(isEnabled) {
+        const value = BooleanExtensions.castToBoolean(isEnabled);
+        if (value !== this.isEnabled) {
+            this.isEnabled = value;
+            this.toggleZoom();
+        }
+    }
+    constructor(fItemsContainer, fDnd, fCanvas) {
+        super(fItemsContainer, fDnd, fCanvas);
+    }
+    ngAfterViewInit() {
+        super.toggleZoom();
+    }
+    ngOnDestroy() {
+        super.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FZoomDirective, deps: [{ token: F_ITEMS_CONTAINER }, { token: F_DND_DIRECTIVE }, { token: F_CANVAS }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: FZoomDirective, selector: "g[fZoom]", inputs: { fFlowZoom: ["fZoom", "fFlowZoom"] }, host: { classAttribute: "f-flow-zoom f-component" }, providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FZoomDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "g[fZoom]",
+                    exportAs: 'fComponent',
+                    host: {
+                        'class': 'f-flow-zoom f-component'
+                    },
+                    providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }],
+                }]
+        }], ctorParameters: function () { return [{ type: FItemsContainerBase, decorators: [{
+                    type: Inject,
+                    args: [F_ITEMS_CONTAINER]
+                }] }, { type: FDraggableBase, decorators: [{
+                    type: Inject,
+                    args: [F_DND_DIRECTIVE]
+                }] }, { type: FCanvasBase, decorators: [{
+                    type: Inject,
+                    args: [F_CANVAS]
+                }] }]; }, propDecorators: { fFlowZoom: [{
+                type: Input,
+                args: ['fZoom']
+            }] } });
+
+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,
+            FNodeComponent,
+            FZoomDirective,
+            FForeignObjectComponent,
+            FDragHandleDirective,
+            FItemsContainerDirective,
+            FNodesContainerComponent,
+            FConnectionsContainerComponent,
+            FNodeInputDirective,
+            FNodeOutletDirective,
+            FNodeOutputDirective], imports: [CommonModule,
+            FConnectionModule,
+            FCanvasDirective,
+            FBackgroundDirective], exports: [FFlowComponent,
+            FNodeComponent,
+            FZoomDirective,
+            FForeignObjectComponent,
+            FDragHandleDirective,
+            FItemsContainerDirective,
+            FNodesContainerComponent,
+            FConnectionsContainerComponent,
+            FConnectionModule,
+            FNodeInputDirective,
+            FNodeOutletDirective,
+            FNodeOutputDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowModule, imports: [CommonModule,
+            FConnectionModule, FConnectionModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: FFlowModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FFlowComponent,
+                        FNodeComponent,
+                        FZoomDirective,
+                        FForeignObjectComponent,
+                        FDragHandleDirective,
+                        FItemsContainerDirective,
+                        FNodesContainerComponent,
+                        FConnectionsContainerComponent,
+                        FNodeInputDirective,
+                        FNodeOutletDirective,
+                        FNodeOutputDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FConnectionModule,
+                        FCanvasDirective,
+                        FBackgroundDirective,
+                    ],
+                    providers: [],
+                    exports: [
+                        FFlowComponent,
+                        FNodeComponent,
+                        FZoomDirective,
+                        FForeignObjectComponent,
+                        FDragHandleDirective,
+                        FItemsContainerDirective,
+                        FNodesContainerComponent,
+                        FConnectionsContainerComponent,
+                        FConnectionModule,
+                        FNodeInputDirective,
+                        FNodeOutletDirective,
+                        FNodeOutputDirective,
+                    ]
+                }]
+        }] });
+
+/**
+ * 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 };
+//# sourceMappingURL=foblex-flow.mjs.map