@foblex/flow 19.1.6 → 19.2.0

package/fesm2022/foblex-flow.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, ElementRef, DestroyRef, Injector, input, effect, untracked, Directive, signal, numberAttribute, model, booleanAttribute, ChangeDetectionStrategy, Component, viewChild, Input, computed, contentChildren, contentChild, Renderer2, output, NgZone, ViewContainerRef, TemplateRef, runInInjectionContext, EventEmitter, Output, afterNextRender, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, ElementRef, DestroyRef, Injector, input, effect, untracked, Directive, signal, computed, numberAttribute, model, booleanAttribute, ChangeDetectionStrategy, Component, viewChild, Input, contentChildren, contentChild, Renderer2, output, NgZone, ViewContainerRef, TemplateRef, runInInjectionContext, EventEmitter, Output, afterNextRender, NgModule } from '@angular/core';
 import { TransformModelExtensions, PointExtensions, RectExtensions, GetIntersections, RoundedRect, Point, LineExtensions, SizeExtensions, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
 import { FExecutionRegister, FMediator } from '@foblex/mediator';
@@ -980,11 +980,13 @@ class FitToFlowRequest {
     toCenter;
     animated;
     emitCanvasChange;
+    maxScale;
     static fToken = Symbol('FitToFlowRequest');
-    constructor(toCenter, animated, emitCanvasChange = true) {
+    constructor(toCenter, animated, emitCanvasChange = true, maxScale) {
         this.toCenter = toCenter;
         this.animated = animated;
         this.emitCanvasChange = emitCanvasChange;
+        this.maxScale = maxScale;
     }
 }
 
@@ -997,16 +999,16 @@ let FitToFlow = class FitToFlow {
         return this._store.transform;
     }
     _mediator = inject(FMediator);
-    handle({ toCenter, animated, emitCanvasChange }) {
+    handle({ toCenter, animated, emitCanvasChange, maxScale }) {
         const fNodesRect = this._mediator.execute(new CalculateNodesBoundingBoxRequest()) ||
             RectExtensions.initialize();
         if (fNodesRect.width === 0 || fNodesRect.height === 0) {
             return;
         }
-        this.fitToParent(fNodesRect, RectExtensions.fromElement(this._store.flowHost), this._store.nodes.getAll().map((x) => x._position), toCenter);
+        this.fitToParent(fNodesRect, RectExtensions.fromElement(this._store.flowHost), this._store.nodes.getAll().map((x) => x._position), toCenter, maxScale);
         this._mediator.execute(new RedrawCanvasWithAnimationRequest(animated, ECanvasRedrawContext.VIEWPORT_ONLY, emitCanvasChange));
     }
-    fitToParent(rect, parentRect, points, toCenter) {
+    fitToParent(rect, parentRect, points, toCenter, maxScale) {
         this._transform.scaledPosition = PointExtensions.initialize();
         this._transform.position = this._getZeroPositionWithoutScale(points);
         const itemsContainerWidth = rect.width / this._transform.scale + toCenter.x;
@@ -1016,6 +1018,11 @@ let FitToFlow = class FitToFlow {
             (itemsContainerWidth < parentRect.width && itemsContainerHeight < parentRect.height)) {
             this._transform.scale = Math.min(parentRect.width / itemsContainerWidth, parentRect.height / itemsContainerHeight);
         }
+        // A small bounding box (a couple of nodes) would otherwise be magnified to
+        // fill the viewport; the optional cap keeps the content readable (issue #147).
+        if (maxScale != null && this._transform.scale > maxScale) {
+            this._transform.scale = maxScale;
+        }
         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 -
@@ -1971,6 +1978,21 @@ const F_CONNECTION_WAYPOINTS = new InjectionToken('F_CONNECTION_WAYPOINTS');
 class FConnectionWaypointsBase {
     hostElement = inject((ElementRef)).nativeElement;
     candidates = signal([], ...(ngDevMode ? [{ debugName: "candidates" }] : []));
+    /**
+     * Handle display positions supplied by the line builder (for example the
+     * bend apex of a rounded segment corner). The waypoint model itself is
+     * untouched — dragging and events always operate on the real waypoints.
+     */
+    handles = signal([], ...(ngDevMode ? [{ debugName: "handles" }] : []));
+    /**
+     * Where the waypoint handles are drawn and hit-tested: the builder-supplied
+     * positions when they cover every waypoint, otherwise the waypoints
+     * themselves.
+     */
+    displayedWaypoints = computed(() => {
+        const handles = this.handles();
+        return handles.length === this.waypoints().length ? handles : this.waypoints();
+    }, ...(ngDevMode ? [{ debugName: "displayedWaypoints" }] : []));
     _activeIndex = 0;
     _waypoints = [];
     insert(candidate) {
@@ -2005,7 +2027,11 @@ function findWaypointCandidate(connection, position) {
 function findExistingWaypoint(connection, position) {
     const component = connection.fWaypoints();
     const radius = component?.radius() || 8;
-    return component?.waypoints().find((x) => isPointerInsidePoint(position, x, radius));
+    // Handles can be drawn slightly off the raw waypoint (on the bend apex of a
+    // rounded corner), so hit-test where they are rendered but hand back the
+    // real waypoint — dragging always operates on the model value.
+    const index = (component?.displayedWaypoints() ?? []).findIndex((x) => isPointerInsidePoint(position, x, radius));
+    return index >= 0 ? component?.waypoints()[index] : undefined;
 }
 
 function pickWaypoint(connections, position) {
@@ -2060,13 +2086,13 @@ class FConnectionWaypoints extends FConnectionWaypointsBase {
         this._notifyDataChanged();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionWaypoints, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FConnectionWaypoints, isStandalone: true, selector: "f-connection-waypoints", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, waypoints: { classPropertyName: "waypoints", publicName: "waypoints", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { waypoints: "waypointsChange" }, host: { classAttribute: "f-component f-connection-waypoints" }, providers: [{ provide: F_CONNECTION_WAYPOINTS, useExisting: FConnectionWaypoints }], usesInheritance: true, ngImport: i0, template: "@if (visibility()) {\n  <svg xmlns=\"http://www.w3.org/2000/svg\">\n    <g>\n      @for (candidate of candidates(); track $index) {\n        <circle\n          [attr.r]=\"radius()\"\n          class=\"f-candidate\"\n          [attr.cx]=\"candidate.x\"\n          [attr.cy]=\"candidate.y\"\n        ></circle>\n      }\n      @for (point of waypoints(); track $index) {\n        <circle\n          [attr.r]=\"radius()\"\n          (contextmenu)=\"remove($index, $event)\"\n          class=\"f-waypoint\"\n          [attr.cx]=\"point.x\"\n          [attr.cy]=\"point.y\"\n        ></circle>\n      }\n    </g>\n  </svg>\n}\n\n", styles: [":host{pointer-events:none;position:absolute}svg{display:block;vertical-align:middle;position:absolute;overflow:visible}circle{pointer-events:visible}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FConnectionWaypoints, isStandalone: true, selector: "f-connection-waypoints", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, waypoints: { classPropertyName: "waypoints", publicName: "waypoints", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { waypoints: "waypointsChange" }, host: { classAttribute: "f-component f-connection-waypoints" }, providers: [{ provide: F_CONNECTION_WAYPOINTS, useExisting: FConnectionWaypoints }], usesInheritance: true, ngImport: i0, template: "@if (visibility()) {\n<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <g>\n    @for (candidate of candidates(); track $index) {\n    <circle\n      [attr.r]=\"radius()\"\n      class=\"f-candidate\"\n      [attr.cx]=\"candidate.x\"\n      [attr.cy]=\"candidate.y\"\n    ></circle>\n    } @for (point of displayedWaypoints(); track $index) {\n    <circle\n      [attr.r]=\"radius()\"\n      (contextmenu)=\"remove($index, $event)\"\n      class=\"f-waypoint\"\n      [attr.cx]=\"point.x\"\n      [attr.cy]=\"point.y\"\n    ></circle>\n    }\n  </g>\n</svg>\n}\n", styles: [":host{pointer-events:none;position:absolute}svg{display:block;vertical-align:middle;position:absolute;overflow:visible}circle{pointer-events:visible}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionWaypoints, decorators: [{
             type: Component,
             args: [{ selector: 'f-connection-waypoints', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'f-component f-connection-waypoints',
-                    }, providers: [{ provide: F_CONNECTION_WAYPOINTS, useExisting: FConnectionWaypoints }], template: "@if (visibility()) {\n  <svg xmlns=\"http://www.w3.org/2000/svg\">\n    <g>\n      @for (candidate of candidates(); track $index) {\n        <circle\n          [attr.r]=\"radius()\"\n          class=\"f-candidate\"\n          [attr.cx]=\"candidate.x\"\n          [attr.cy]=\"candidate.y\"\n        ></circle>\n      }\n      @for (point of waypoints(); track $index) {\n        <circle\n          [attr.r]=\"radius()\"\n          (contextmenu)=\"remove($index, $event)\"\n          class=\"f-waypoint\"\n          [attr.cx]=\"point.x\"\n          [attr.cy]=\"point.y\"\n        ></circle>\n      }\n    </g>\n  </svg>\n}\n\n", styles: [":host{pointer-events:none;position:absolute}svg{display:block;vertical-align:middle;position:absolute;overflow:visible}circle{pointer-events:visible}\n"] }]
+                    }, providers: [{ provide: F_CONNECTION_WAYPOINTS, useExisting: FConnectionWaypoints }], template: "@if (visibility()) {\n<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <g>\n    @for (candidate of candidates(); track $index) {\n    <circle\n      [attr.r]=\"radius()\"\n      class=\"f-candidate\"\n      [attr.cx]=\"candidate.x\"\n      [attr.cy]=\"candidate.y\"\n    ></circle>\n    } @for (point of displayedWaypoints(); track $index) {\n    <circle\n      [attr.r]=\"radius()\"\n      (contextmenu)=\"remove($index, $event)\"\n      class=\"f-waypoint\"\n      [attr.cx]=\"point.x\"\n      [attr.cy]=\"point.y\"\n    ></circle>\n    }\n  </g>\n</svg>\n}\n", styles: [":host{pointer-events:none;position:absolute}svg{display:block;vertical-align:middle;position:absolute;overflow:visible}circle{pointer-events:visible}\n"] }]
         }], propDecorators: { radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], waypoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "waypoints", required: false }] }, { type: i0.Output, args: ["waypointsChange"] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }] } });
 
 var EFMarkerType;
@@ -2642,6 +2668,29 @@ function dist(a, b) {
     return Math.hypot(b.x - a.x, b.y - a.y);
 }
 
+/**
+ * Control point for a cubic segment end that lies on an intermediate waypoint.
+ * The tangent runs from the previous toward the next neighbor (Catmull-Rom
+ * style), so the two segments meeting at the waypoint share one tangent
+ * direction and the curve passes through it smoothly. Connector sides shape
+ * only the real endpoints of the connection, never the waypoints.
+ *
+ * `distance` is positive for an outgoing control point and negative for an
+ * incoming one.
+ */
+function calculateSmoothControlPoint(anchor, previous, next, distance) {
+    const dx = next.x - previous.x;
+    const dy = next.y - previous.y;
+    const length = Math.hypot(dx, dy);
+    if (length === 0) {
+        return { x: anchor.x, y: anchor.y };
+    }
+    return {
+        x: anchor.x + (dx / length) * distance,
+        y: anchor.y + (dy / length) * distance,
+    };
+}
+
 function mergePointChains(chains) {
     const out = [];
     for (const chain of chains) {
@@ -2763,13 +2812,19 @@ class CalculateAdaptiveCurveData {
         const clampedOffset = Math.max(0, offset ?? 0);
         const anchors = buildConnectionAnchors(source, target, waypoints);
         const segments = [];
+        // Connector sides shape only the first and the last tangent; at
+        // intermediate waypoints both adjacent segments share one Catmull-Rom
+        // style tangent, so the curve passes through waypoints without kinks.
         for (let i = 0; i < anchors.length - 1; i++) {
             const a = anchors[i];
             const b = anchors[i + 1];
-            const h0 = CalculateAdaptiveCurveData._handleLength(a, b, sourceSide, clampedOffset);
-            const h3 = CalculateAdaptiveCurveData._handleLength(b, a, targetSide, clampedOffset);
-            const c1 = CalculateAdaptiveCurveData._softControl(sourceSide, a, b, h0);
-            const c2 = CalculateAdaptiveCurveData._softControl(targetSide, b, a, h3);
+            const handle = Math.hypot(b.x - a.x, b.y - a.y) / 3;
+            const c1 = i === 0
+                ? CalculateAdaptiveCurveData._softControl(sourceSide, a, b, CalculateAdaptiveCurveData._handleLength(a, b, sourceSide, clampedOffset))
+                : calculateSmoothControlPoint(a, anchors[i - 1], b, handle);
+            const c2 = i === anchors.length - 2
+                ? CalculateAdaptiveCurveData._softControl(targetSide, b, a, CalculateAdaptiveCurveData._handleLength(b, a, targetSide, clampedOffset))
+                : calculateSmoothControlPoint(b, a, anchors[i + 2], -handle);
             segments.push({ p0: a, c1, c2, p3: b, chainIndex: i });
         }
         const points = sampleMultiCubicUniform(segments, 12);
@@ -2787,11 +2842,19 @@ class CalculateBezierCurveData {
     handle({ source, sourceSide, target, targetSide, offset, waypoints, }) {
         const anchors = buildConnectionAnchors(source, target, waypoints);
         const segments = [];
+        // Connector sides shape only the first and the last tangent; at
+        // intermediate waypoints both adjacent segments share one Catmull-Rom
+        // style tangent, so the curve passes through waypoints without kinks.
         for (let i = 0; i < anchors.length - 1; i++) {
             const a = anchors[i];
             const b = anchors[i + 1];
-            const c1 = getAnglePoint(sourceSide, a, b, offset ?? 0);
-            const c2 = getAnglePoint(targetSide, b, a, offset ?? 0);
+            const handle = Math.hypot(b.x - a.x, b.y - a.y) / 3;
+            const c1 = i === 0
+                ? getAnglePoint(sourceSide, a, b, offset ?? 0)
+                : calculateSmoothControlPoint(a, anchors[i - 1], b, handle);
+            const c2 = i === anchors.length - 2
+                ? getAnglePoint(targetSide, b, a, offset ?? 0)
+                : calculateSmoothControlPoint(b, a, anchors[i + 2], -handle);
             segments.push({ p0: a, c1, c2, p3: b, chainIndex: i });
         }
         const points = sampleMultiCubicUniform(segments, 12);
@@ -2894,6 +2957,38 @@ function createSegmentLinePath(points, borderRadius) {
     parts.push(`L ${last.x + END_EPS} ${last.y + END_EPS}`);
     return parts.join(' ');
 }
+/**
+ * The point of the rendered path closest to corner `b` — the apex of the
+ * rounded bend `getBend` produces for it, or `b` itself when the corner is
+ * rendered sharp. Uses the same bend-size clamping as `getBend`, so the
+ * result always lies on the path.
+ */
+function calculateCornerApex(a, b, c, size) {
+    if (size <= 0) {
+        return { x: b.x, y: b.y };
+    }
+    const collinearX = Math.abs(a.x - b.x) <= EPS$1 && Math.abs(b.x - c.x) <= EPS$1;
+    const collinearY = Math.abs(a.y - b.y) <= EPS$1 && Math.abs(b.y - c.y) <= EPS$1;
+    if (collinearX || collinearY) {
+        return { x: b.x, y: b.y };
+    }
+    const ab = Math.hypot(b.x - a.x, b.y - a.y);
+    const bc = Math.hypot(c.x - b.x, c.y - b.y);
+    const bendSize = Math.min(ab * 0.5, bc * 0.5, size);
+    if (bendSize < MIN_VISIBLE || ab === 0 || bc === 0) {
+        return { x: b.x, y: b.y };
+    }
+    // The bend is a quadratic from (b - bendSize*din) to (b + bendSize*dout)
+    // with control b; its apex at t = 0.5 is b + 0.25 * bendSize * (dout - din).
+    const dinX = (b.x - a.x) / ab;
+    const dinY = (b.y - a.y) / ab;
+    const doutX = (c.x - b.x) / bc;
+    const doutY = (c.y - b.y) / bc;
+    return {
+        x: b.x + 0.25 * bendSize * (doutX - dinX),
+        y: b.y + 0.25 * bendSize * (doutY - dinY),
+    };
+}
 function getBend(a, b, c, size) {
     const x = b.x;
     const y = b.y;
@@ -2933,17 +3028,24 @@ const CONNECTOR_SIDE_POINT = {
     [EFConnectableSide.BOTTOM]: PointExtensions.initialize(0, 1),
     [EFConnectableSide.AUTO]: PointExtensions.initialize(0, 0),
 };
+const HARD_VIOLATION_SCORE = 1000;
+const ARRIVAL_AXIS_SCORE = 8;
+const BEND_SCORE = 1;
+const LENGTH_SCORE = 1e-6;
+const NODE_ZONE_SCORE = 1;
+const NODE_ZONE_SCORE_LIMIT = 600;
 class CalculateSegmentLineData {
     handle({ source, sourceSide, target, targetSide, waypoints, offset, radius, }) {
         const anchors = buildConnectionAnchors(source, target, waypoints);
-        const chains = [];
+        const chains = anchors.length === 2
+            ? [this._getPathPoints(source, sourceSide, target, targetSide, offset ?? 0)]
+            : this._buildWaypointChains(anchors, sourceSide, targetSide, offset ?? 0);
         const candidates = [];
-        for (let i = 0; i < anchors.length - 1; i++) {
-            const a = anchors[i];
-            const b = anchors[i + 1];
-            const points = this._getPathPoints(a, sourceSide, b, targetSide, offset ?? 0);
-            chains.push(points);
-            candidates.push(...calculatePolylineCandidates(points));
+        for (const chain of chains) {
+            const candidate = this._calculateChainCandidate(chain);
+            if (candidate) {
+                candidates.push(candidate);
+            }
         }
         const polyline = normalizePolyline(mergePointChains(chains));
         const penultimatePoint = polyline.length > 1 ? polyline[polyline.length - 2] : source;
@@ -2954,8 +3056,205 @@ class CalculateSegmentLineData {
             secondPoint,
             points: polyline,
             candidates,
+            waypointHandles: this._calculateWaypointHandles(waypoints ?? [], polyline, radius ?? 0),
         };
     }
+    /**
+     * Display positions for the waypoint handles. A waypoint that is a rounded
+     * corner of the polyline maps to the apex of its bend, so the handle sits on
+     * the rendered path; a waypoint lying mid-segment is already on the line.
+     */
+    _calculateWaypointHandles(waypoints, polyline, radius) {
+        return waypoints.map((waypoint) => {
+            const index = polyline.findIndex((point) => point.x === waypoint.x && point.y === waypoint.y);
+            if (index <= 0 || index >= polyline.length - 1) {
+                return { x: waypoint.x, y: waypoint.y };
+            }
+            return calculateCornerApex(polyline[index - 1], waypoint, polyline[index + 1], radius);
+        });
+    }
+    /**
+     * Routes the connection through intermediate waypoints. Connector sides and
+     * the connector gap apply only at the real endpoints; waypoints are
+     * pass-through anchors, so no connector-like stubs appear around them. Each
+     * chain is an explicit orthogonal route that never doubles back on the
+     * direction it arrived with — a same-line reversal would be collapsed by
+     * polyline normalization and would detach the path from the waypoint.
+     */
+    _buildWaypointChains(anchors, sourceSide, targetSide, offset) {
+        const sourceDirection = CONNECTOR_SIDE_POINT[sourceSide];
+        const targetDirection = CONNECTOR_SIDE_POINT[targetSide];
+        const nodeZones = [
+            { anchor: anchors[0], direction: { x: -sourceDirection.x, y: -sourceDirection.y } },
+            {
+                anchor: anchors[anchors.length - 1],
+                direction: { x: -targetDirection.x, y: -targetDirection.y },
+            },
+        ].filter((zone) => zone.direction.x !== 0 || zone.direction.y !== 0);
+        const chains = [];
+        let leaveDirection = null;
+        for (let i = 0; i < anchors.length - 1; i++) {
+            const a = anchors[i];
+            const b = anchors[i + 1];
+            const isFirstChain = i === 0;
+            const isLastChain = i === anchors.length - 2;
+            let chain;
+            if (isFirstChain) {
+                const sourceGap = {
+                    x: a.x + sourceDirection.x * offset,
+                    y: a.y + sourceDirection.y * offset,
+                };
+                const route = this._routeOrthogonal(sourceGap, sourceDirection, b, null, nodeZones);
+                chain = [a, ...route];
+            }
+            else if (isLastChain) {
+                const targetGap = {
+                    x: b.x + targetDirection.x * offset,
+                    y: b.y + targetDirection.y * offset,
+                };
+                const stubDirection = { x: -targetDirection.x, y: -targetDirection.y };
+                const route = this._routeOrthogonal(a, leaveDirection, targetGap, stubDirection, nodeZones);
+                chain = [...route, b];
+            }
+            else {
+                chain = this._routeOrthogonal(a, leaveDirection, b, null, nodeZones);
+            }
+            chains.push(chain);
+            leaveDirection = this._calculateArrivalDirection(isLastChain ? chain.slice(0, -1) : chain);
+        }
+        return chains;
+    }
+    /**
+     * Connects two points with an axis-aligned route. Candidates are the
+     * straight segment, both L-shapes, and both Z-shapes; the route that keeps
+     * the constraints wins. `leaveDirection` is the motion the path arrived
+     * with (its reversal as a first move is forbidden); `stubDirection` is the
+     * upcoming connector stub motion (arriving against it is forbidden).
+     * A non-dominant-axis arrival is only softly penalized, so waypoints are
+     * entered along the axis they are farther away on.
+     */
+    _routeOrthogonal(from, leaveDirection, to, stubDirection, nodeZones) {
+        if (from.x === to.x && from.y === to.y) {
+            return [from];
+        }
+        const corners = [];
+        if (from.x === to.x || from.y === to.y) {
+            corners.push([]);
+        }
+        corners.push([{ x: to.x, y: from.y }]);
+        corners.push([{ x: from.x, y: to.y }]);
+        const centerBetweenPoints = calculateCenterBetweenPoints(from, to);
+        corners.push([
+            { x: centerBetweenPoints.x, y: from.y },
+            { x: centerBetweenPoints.x, y: to.y },
+        ]);
+        corners.push([
+            { x: from.x, y: centerBetweenPoints.y },
+            { x: to.x, y: centerBetweenPoints.y },
+        ]);
+        const dominantAxis = Math.abs(to.x - from.x) >= Math.abs(to.y - from.y) ? 'x' : 'y';
+        let bestRoute = null;
+        let bestScore = Number.POSITIVE_INFINITY;
+        for (const cornerPoints of corners) {
+            const route = this._compactRoute([from, ...cornerPoints, to]);
+            const score = this._scoreRoute(route, leaveDirection, stubDirection, dominantAxis, nodeZones);
+            if (score < bestScore) {
+                bestScore = score;
+                bestRoute = route;
+            }
+        }
+        return bestRoute ?? [from, to];
+    }
+    _compactRoute(points) {
+        const route = [points[0]];
+        for (let i = 1; i < points.length; i++) {
+            const last = route[route.length - 1];
+            if (points[i].x !== last.x || points[i].y !== last.y) {
+                route.push(points[i]);
+            }
+        }
+        return route;
+    }
+    _scoreRoute(route, leaveDirection, stubDirection, dominantAxis, nodeZones) {
+        let score = 0;
+        let length = 0;
+        let zoneLength = 0;
+        for (let i = 0; i < route.length - 1; i++) {
+            length += Math.abs(route[i + 1].x - route[i].x) + Math.abs(route[i + 1].y - route[i].y);
+            for (const zone of nodeZones) {
+                zoneLength += this._calculateSegmentLengthInZone(route[i], route[i + 1], zone);
+            }
+        }
+        score += Math.min(NODE_ZONE_SCORE_LIMIT, zoneLength * NODE_ZONE_SCORE);
+        const first = this._segmentDirection(route[0], route[1]);
+        if (leaveDirection &&
+            (leaveDirection.x !== 0 || leaveDirection.y !== 0) &&
+            first.x === -leaveDirection.x &&
+            first.y === -leaveDirection.y) {
+            score += HARD_VIOLATION_SCORE;
+        }
+        const arrival = this._segmentDirection(route[route.length - 2], route[route.length - 1]);
+        if (stubDirection && arrival.x === -stubDirection.x && arrival.y === -stubDirection.y) {
+            score += HARD_VIOLATION_SCORE;
+        }
+        if (!stubDirection && arrival[dominantAxis] === 0) {
+            score += ARRIVAL_AXIS_SCORE;
+        }
+        return score + (route.length - 2) * BEND_SCORE + length * LENGTH_SCORE;
+    }
+    _segmentDirection(a, b) {
+        return { x: Math.sign(b.x - a.x), y: Math.sign(b.y - a.y) };
+    }
+    /**
+     * Length of the part of an axis-aligned segment lying inside the half-plane
+     * behind a connector (where the endpoint's node body is).
+     */
+    _calculateSegmentLengthInZone(a, b, zone) {
+        const zoneAxis = zone.direction.x !== 0 ? 'x' : 'y';
+        const zoneSign = zone.direction[zoneAxis];
+        const boundary = zone.anchor[zoneAxis];
+        const start = (a[zoneAxis] - boundary) * zoneSign;
+        const end = (b[zoneAxis] - boundary) * zoneSign;
+        if (start <= 0 && end <= 0) {
+            return 0;
+        }
+        const segmentLength = Math.abs(b.x - a.x) + Math.abs(b.y - a.y);
+        if (a[zoneAxis] === b[zoneAxis]) {
+            return segmentLength;
+        }
+        const insideLength = Math.max(start, end) - Math.max(0, Math.min(start, end));
+        return Math.min(segmentLength, Math.max(0, insideLength));
+    }
+    /**
+     * Waypoint-creation candidate for one chain: the midpoint of its longest
+     * straight segment. Corner rounding consumes at most half of each adjacent
+     * segment, so this point always lies on the rendered path — a length-based
+     * chain midpoint can land on a rounded corner and float off the line.
+     */
+    _calculateChainCandidate(chain) {
+        let bestLength = 0;
+        let candidate = null;
+        for (let i = 0; i < chain.length - 1; i++) {
+            const length = Math.abs(chain[i + 1].x - chain[i].x) + Math.abs(chain[i + 1].y - chain[i].y);
+            if (length > bestLength) {
+                bestLength = length;
+                candidate = {
+                    x: (chain[i].x + chain[i + 1].x) / 2,
+                    y: (chain[i].y + chain[i + 1].y) / 2,
+                };
+            }
+        }
+        return candidate;
+    }
+    _calculateArrivalDirection(chain) {
+        for (let i = chain.length - 1; i > 0; i--) {
+            const direction = this._segmentDirection(chain[i - 1], chain[i]);
+            if (direction.x !== 0 || direction.y !== 0) {
+                return direction;
+            }
+        }
+        return null;
+    }
     _getPathPoints(source, sourceSide, target, targetSide, offset) {
         const sourceDirection = CONNECTOR_SIDE_POINT[sourceSide];
         const targetDirection = CONNECTOR_SIDE_POINT[targetSide];
@@ -3531,11 +3830,12 @@ class FConnectionBase extends MIXIN_BASE$1 {
     }
     setLine({ point1, point2 }) {
         this.line = LineExtensions.initialize(point1, point2);
-        const { path, points, penultimatePoint, secondPoint, candidates } = this._getPathResult(point1, point2);
+        const { path, points, penultimatePoint, secondPoint, candidates, waypointHandles } = this._getPathResult(point1, point2);
         this.path = path;
         this._penultimatePoint = penultimatePoint || point1;
         this._secondPoint = secondPoint || point2;
         this.fWaypoints()?.candidates.set(candidates || []);
+        this.fWaypoints()?.handles.set(waypointHandles || []);
         this._contentLayoutEngine.layout(points || [], this._contents());
     }
     _contents() {
@@ -8107,96 +8407,363 @@ class CreateConnectionFinalizeRequest {
     }
 }
 
-class ResolveConnectableOutputForOutletRequest {
-    outlet;
-    static fToken = Symbol('ResolveConnectableOutputForOutletRequest');
-    constructor(outlet) {
-        this.outlet = outlet;
-    }
-}
-
-let ResolveConnectableOutputForOutlet = class ResolveConnectableOutputForOutlet {
-    _store = inject(FComponentsStore);
-    handle({ outlet }) {
-        const node = this._findOwnerNode(outlet);
-        if (!node) {
-            throw new Error('The fOutlet must belong to an fNode');
-        }
-        const output = this._findFirstConnectableOutputInNode(node);
-        if (!output) {
-            throw new Error('Outlet requires at least one connectable output in the same node.');
-        }
-        return output;
+let uniqueId$6 = 0;
+class FConnectionComponent extends FConnectionBase {
+    fId = input(`f-connection-${uniqueId$6++}`, ...(ngDevMode ? [{ debugName: "fId", alias: 'fConnectionId' }] : [{ alias: 'fConnectionId' }]));
+    fSourceId = input('', ...(ngDevMode ? [{ debugName: "fSourceId", transform: (value) => stringAttribute(value) || '' }] : [{
+            transform: (value) => stringAttribute(value) || '',
+        }]));
+    fTargetId = input('', ...(ngDevMode ? [{ debugName: "fTargetId", transform: (value) => stringAttribute(value) || '' }] : [{
+            transform: (value) => stringAttribute(value) || '',
+        }]));
+    /** @deprecated Use `fSourceId`. */
+    fOutputId = input('', ...(ngDevMode ? [{ debugName: "fOutputId", transform: (value) => stringAttribute(value) || '' }] : [{
+            transform: (value) => stringAttribute(value) || '',
+        }]));
+    /** @deprecated Use `fTargetId`. */
+    fInputId = input('', ...(ngDevMode ? [{ debugName: "fInputId", transform: (value) => stringAttribute(value) || '' }] : [{
+            transform: (value) => stringAttribute(value) || '',
+        }]));
+    fRadius = 8;
+    fOffset = 12;
+    fBehavior = EFConnectionBehavior.FIXED;
+    fType = EFConnectionType.STRAIGHT;
+    fSelectionDisabled = input(false, ...(ngDevMode ? [{ debugName: "fSelectionDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    fReassignableStart = input(false, ...(ngDevMode ? [{ debugName: "fReassignableStart", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    fDraggingDisabled = input(false, ...(ngDevMode ? [{ debugName: "fDraggingDisabled", alias: 'fReassignDisabled',
+            transform: booleanAttribute }] : [{
+            alias: 'fReassignDisabled',
+            transform: booleanAttribute,
+        }]));
+    fSourceSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fSourceSide", transform: (x) => {
+                return castToEnum(x, 'fSourceSide', EFConnectionConnectableSide);
+            } }] : [{
+            transform: (x) => {
+                return castToEnum(x, 'fSourceSide', EFConnectionConnectableSide);
+            },
+        }]));
+    fTargetSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fTargetSide", transform: (x) => {
+                return castToEnum(x, 'fTargetSide', EFConnectionConnectableSide);
+            } }] : [{
+            transform: (x) => {
+                return castToEnum(x, 'fTargetSide', EFConnectionConnectableSide);
+            },
+        }]));
+    /** @deprecated Use `fTargetSide`. */
+    fInputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fInputSide", transform: (x) => {
+                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
+            } }] : [{
+            transform: (x) => {
+                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
+            },
+        }]));
+    /** @deprecated Use `fSourceSide`. */
+    fOutputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fOutputSide", transform: (x) => {
+                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
+            } }] : [{
+            transform: (x) => {
+                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
+            },
+        }]));
+    get boundingElement() {
+        return this.fPath().hostElement;
     }
-    _findOwnerNode(outlet) {
-        const host = outlet.hostElement;
-        return this._store.nodes.getAll().find((n) => n.isContains(host));
+    _mediator = inject(FMediator);
+    ngOnInit() {
+        this._mediator.execute(new AddConnectionToStoreRequest(this));
     }
-    _findFirstConnectableOutputInNode(node) {
-        return getAllSourceConnectors(this._store).find((x) => node.isContains(x.hostElement) && x.canBeConnected);
+    ngOnChanges() {
+        this._mediator.execute(new EmitConnectionsChangesRequest());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ResolveConnectableOutputForOutlet, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ResolveConnectableOutputForOutlet });
-};
-ResolveConnectableOutputForOutlet = __decorate([
-    FExecutionRegister(ResolveConnectableOutputForOutletRequest)
-], ResolveConnectableOutputForOutlet);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ResolveConnectableOutputForOutlet, decorators: [{
-            type: Injectable
-        }] });
-
-class FCreateConnectionEvent {
-    // -----------------------------
-    // Preferred API
-    // -----------------------------
-    /** Source connector id */
-    sourceId;
-    /** Target connector id (can be undefined if dropped to nowhere) */
-    targetId;
-    /** Pointer position where the user dropped pointer. */
-    dropPosition;
-    // -----------------------------
-    // Deprecated compatibility API (keep as FIELDS)
-    // -----------------------------
-    /** @deprecated Use `sourceId` */
-    fOutputId;
-    /** @deprecated Use `targetId` */
-    fInputId;
-    /** @deprecated Use `dropPosition` */
-    fDropPosition;
-    constructor(sourceId, targetId, dropPosition) {
-        // preferred
-        this.sourceId = sourceId;
-        this.targetId = targetId;
-        this.dropPosition = dropPosition;
-        // legacy aliases
-        this.fOutputId = sourceId;
-        this.fInputId = targetId;
-        this.fDropPosition = dropPosition;
+    ngOnDestroy() {
+        this._mediator.execute(new RemoveConnectionFromStoreRequest(this));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FConnectionComponent, isStandalone: false, selector: "f-connection", inputs: { fId: { classPropertyName: "fId", publicName: "fConnectionId", isSignal: true, isRequired: false, transformFunction: null }, fSourceId: { classPropertyName: "fSourceId", publicName: "fSourceId", isSignal: true, isRequired: false, transformFunction: null }, fTargetId: { classPropertyName: "fTargetId", publicName: "fTargetId", isSignal: true, isRequired: false, transformFunction: null }, fOutputId: { classPropertyName: "fOutputId", publicName: "fOutputId", isSignal: true, isRequired: false, transformFunction: null }, fInputId: { classPropertyName: "fInputId", publicName: "fInputId", isSignal: true, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fSelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, fReassignableStart: { classPropertyName: "fReassignableStart", publicName: "fReassignableStart", isSignal: true, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fReassignDisabled", isSignal: true, isRequired: false, transformFunction: null }, fSourceSide: { classPropertyName: "fSourceSide", publicName: "fSourceSide", isSignal: true, isRequired: false, transformFunction: null }, fTargetSide: { classPropertyName: "fTargetSide", publicName: "fTargetSide", isSignal: true, isRequired: false, transformFunction: null }, fInputSide: { classPropertyName: "fInputSide", publicName: "fInputSide", isSignal: true, isRequired: false, transformFunction: null }, fOutputSide: { classPropertyName: "fOutputSide", publicName: "fOutputSide", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "fId()", "attr.data-f-connection-type": "fType", "class.f-connection-selection-disabled": "fSelectionDisabled()", "class.f-connection-reassign-disabled": "fDraggingDisabled()" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FConnectionComponent }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n<ng-content select=\"f-connection-waypoints\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none}:host svg{display:block;vertical-align:middle;overflow:visible!important;position:absolute}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionGradientRenderer, selector: "linearGradient[fConnectionGradientRenderer]", inputs: ["fConnectionGradientRendererFor"] }, { kind: "component", type: FConnectionDragHandleStart, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEnd, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionPath, selector: "path[f-connection-path]", inputs: ["useGradient"] }, { kind: "component", type: FConnectionSelection, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'f-connection', exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.id]': 'fId()',
+                        '[attr.data-f-connection-type]': 'fType',
+                        class: 'f-component f-connection',
+                        '[class.f-connection-selection-disabled]': 'fSelectionDisabled()',
+                        '[class.f-connection-reassign-disabled]': 'fDraggingDisabled()',
+                    }, providers: [{ provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n<ng-content select=\"f-connection-waypoints\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none}:host svg{display:block;vertical-align:middle;overflow:visible!important;position:absolute}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"] }]
+        }], propDecorators: { fId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fConnectionId", required: false }] }], fSourceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fSourceId", required: false }] }], fTargetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fTargetId", required: false }] }], fOutputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fOutputId", required: false }] }], fInputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fInputId", required: false }] }], fRadius: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], fOffset: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], fBehavior: [{
+                type: Input,
+                args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
+            }], fType: [{
+                type: Input
+            }], fSelectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fSelectionDisabled", required: false }] }], fReassignableStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "fReassignableStart", required: false }] }], fDraggingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fReassignDisabled", required: false }] }], fSourceSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fSourceSide", required: false }] }], fTargetSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fTargetSide", required: false }] }], fInputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fInputSide", required: false }] }], fOutputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fOutputSide", required: false }] }] } });
 
-/**
- * One in-progress connection creation, independent of the gesture that drives it.
- *
- * The drag-to-connect handler and the click-to-connect flow both delegate here, so the
- * preview line, snap highlighting, connectable marking, target resolution, and the
- * `fCreateConnection` emission behave identically in every mode. The session owns its
- * state (it survives the per-pointerdown drag-context reset), and `begin()` refuses to
- * start when no `<f-connection-for-create>` is present — the same opt-in gate the drag
- * path uses.
- */
-class FCreateConnectionSession {
-    _mediator = inject(FMediator);
-    _connectionBehaviour = inject(ConnectionBehaviourBuilder);
-    _store = inject(FComponentsStore);
-    _targets = [];
-    _sourceRef;
-    get _connection() {
-        return this._store.connections.getForCreate();
-    }
-    get _snapConnection() {
-        return this._store.connections.getForSnap();
+let uniqueId$5 = 0;
+class FConnectionForCreateComponent extends FConnectionBase {
+    fId = signal(`f-connection-for-create-${uniqueId$5++}`, ...(ngDevMode ? [{ debugName: "fId" }] : []));
+    fOutputId = signal('', ...(ngDevMode ? [{ debugName: "fOutputId" }] : []));
+    fInputId = signal('', ...(ngDevMode ? [{ debugName: "fInputId" }] : []));
+    fRadius = 8;
+    fOffset = 12;
+    fBehavior = EFConnectionBehavior.FIXED;
+    fType = EFConnectionType.STRAIGHT;
+    fInputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fInputSide", transform: (x) => {
+                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
+            } }] : [{
+            transform: (x) => {
+                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
+            },
+        }]));
+    fOutputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fOutputSide", transform: (x) => {
+                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
+            } }] : [{
+            transform: (x) => {
+                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
+            },
+        }]));
+    get boundingElement() {
+        return this.fPath().hostElement;
+    }
+    _mediator = inject(FMediator);
+    ngOnInit() {
+        this._mediator.execute(new AddConnectionForCreateToStoreRequest(this));
+    }
+    ngAfterViewInit() {
+        this.hide();
+    }
+    ngOnChanges() {
+        this._mediator.execute(new EmitConnectionsChangesRequest());
+    }
+    ngOnDestroy() {
+        this._mediator.execute(new RemoveConnectionForCreateFromStoreRequest());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionForCreateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FConnectionForCreateComponent, isStandalone: false, selector: "f-connection-for-create", inputs: { fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fInputSide: { classPropertyName: "fInputSide", publicName: "fInputSide", isSignal: true, isRequired: false, transformFunction: null }, fOutputSide: { classPropertyName: "fOutputSide", publicName: "fOutputSide", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "f-component f-connection f-connection-for-create" }, providers: [
+            { provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FConnectionForCreateComponent },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionGradientRenderer, selector: "linearGradient[fConnectionGradientRenderer]", inputs: ["fConnectionGradientRendererFor"] }, { kind: "component", type: FConnectionDragHandleEnd, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionPath, selector: "path[f-connection-path]", inputs: ["useGradient"] }, { kind: "component", type: FConnectionSelection, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'f-connection-for-create', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'f-component f-connection f-connection-for-create',
+                        'aria-hidden': 'true',
+                    }, providers: [
+                        { provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FConnectionForCreateComponent },
+                    ], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"] }]
+        }], propDecorators: { fRadius: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], fOffset: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], fBehavior: [{
+                type: Input,
+                args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
+            }], fType: [{
+                type: Input
+            }], fInputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fInputSide", required: false }] }], fOutputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fOutputSide", required: false }] }] } });
+
+let uniqueId$4 = 0;
+class FSnapConnectionComponent extends FConnectionBase {
+    fId = signal(`f-snap-connection-${uniqueId$4++}`, ...(ngDevMode ? [{ debugName: "fId" }] : []));
+    fSnapThreshold = 20;
+    /**
+     * Fires when the snapped target changes during a connection-creation gesture:
+     * with the connector id while one is within `fSnapThreshold`, and with an
+     * `undefined` target when the snap is released or the gesture ends.
+     */
+    fSnapTargetChange = output();
+    fOutputId = signal('', ...(ngDevMode ? [{ debugName: "fOutputId" }] : []));
+    fInputId = signal('', ...(ngDevMode ? [{ debugName: "fInputId" }] : []));
+    fRadius = 8;
+    fOffset = 12;
+    fBehavior = EFConnectionBehavior.FIXED;
+    fType = EFConnectionType.STRAIGHT;
+    fInputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fInputSide", transform: (x) => {
+                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
+            } }] : [{
+            transform: (x) => {
+                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
+            },
+        }]));
+    fOutputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fOutputSide", transform: (x) => {
+                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
+            } }] : [{
+            transform: (x) => {
+                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
+            },
+        }]));
+    get boundingElement() {
+        return this.fPath().hostElement;
+    }
+    _mediator = inject(FMediator);
+    ngOnInit() {
+        this._mediator.execute(new AddSnapConnectionToStoreRequest(this));
+    }
+    ngAfterViewInit() {
+        this.hide();
+    }
+    ngOnChanges() {
+        this._mediator.execute(new EmitConnectionsChangesRequest());
+    }
+    ngOnDestroy() {
+        this._mediator.execute(new RemoveSnapConnectionFromStoreRequest());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FSnapConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FSnapConnectionComponent, isStandalone: false, selector: "f-snap-connection", inputs: { fSnapThreshold: { classPropertyName: "fSnapThreshold", publicName: "fSnapThreshold", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fInputSide: { classPropertyName: "fInputSide", publicName: "fInputSide", isSignal: true, isRequired: false, transformFunction: null }, fOutputSide: { classPropertyName: "fOutputSide", publicName: "fOutputSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fSnapTargetChange: "fSnapTargetChange" }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FSnapConnectionComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionGradientRenderer, selector: "linearGradient[fConnectionGradientRenderer]", inputs: ["fConnectionGradientRendererFor"] }, { kind: "component", type: FConnectionDragHandleEnd, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionPath, selector: "path[f-connection-path]", inputs: ["useGradient"] }, { kind: "component", type: FConnectionSelection, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FSnapConnectionComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'f-snap-connection', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'f-component f-connection f-snap-connection',
+                        'aria-hidden': 'true',
+                    }, providers: [{ provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FSnapConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"] }]
+        }], propDecorators: { fSnapThreshold: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], fSnapTargetChange: [{ type: i0.Output, args: ["fSnapTargetChange"] }], fRadius: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], fOffset: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], fBehavior: [{
+                type: Input,
+                args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
+            }], fType: [{
+                type: Input
+            }], fInputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fInputSide", required: false }] }], fOutputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fOutputSide", required: false }] }] } });
+
+/**
+ * Emitted by `<f-snap-connection>` when the snapped target changes during a
+ * connection-creation gesture. `targetId` is the connector currently within
+ * `fSnapThreshold`, or `undefined` when the snap is released or the gesture
+ * ends — so both endpoints can be styled while the snap preview is shown.
+ */
+class FSnapTargetChangeEvent {
+    sourceId;
+    targetId;
+    constructor(sourceId, targetId) {
+        this.sourceId = sourceId;
+        this.targetId = targetId;
+    }
+}
+
+const F_CONNECTION_PROVIDERS = [
+    FConnectionDragHandleStart,
+    FConnectionDragHandleEnd,
+    FConnectionPath,
+    FConnectionSelection,
+    FConnectionMarker,
+    FConnectionComponent,
+    FConnectionForCreateComponent,
+    FSnapConnectionComponent,
+];
+const F_CONNECTION_IMPORTS_EXPORTS = [
+    FConnectionContent,
+    FConnectionMarkerCircle,
+    FConnectionMarkerArrow,
+    FConnectionGradient,
+    FConnectionGradientRenderer,
+    FConnectionWaypoints,
+];
+
+class ResolveConnectableOutputForOutletRequest {
+    outlet;
+    static fToken = Symbol('ResolveConnectableOutputForOutletRequest');
+    constructor(outlet) {
+        this.outlet = outlet;
+    }
+}
+
+let ResolveConnectableOutputForOutlet = class ResolveConnectableOutputForOutlet {
+    _store = inject(FComponentsStore);
+    handle({ outlet }) {
+        const node = this._findOwnerNode(outlet);
+        if (!node) {
+            throw new Error('The fOutlet must belong to an fNode');
+        }
+        const output = this._findFirstConnectableOutputInNode(node);
+        if (!output) {
+            throw new Error('Outlet requires at least one connectable output in the same node.');
+        }
+        return output;
+    }
+    _findOwnerNode(outlet) {
+        const host = outlet.hostElement;
+        return this._store.nodes.getAll().find((n) => n.isContains(host));
+    }
+    _findFirstConnectableOutputInNode(node) {
+        return getAllSourceConnectors(this._store).find((x) => node.isContains(x.hostElement) && x.canBeConnected);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ResolveConnectableOutputForOutlet, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ResolveConnectableOutputForOutlet });
+};
+ResolveConnectableOutputForOutlet = __decorate([
+    FExecutionRegister(ResolveConnectableOutputForOutletRequest)
+], ResolveConnectableOutputForOutlet);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ResolveConnectableOutputForOutlet, decorators: [{
+            type: Injectable
+        }] });
+
+class FCreateConnectionEvent {
+    // -----------------------------
+    // Preferred API
+    // -----------------------------
+    /** Source connector id */
+    sourceId;
+    /** Target connector id (can be undefined if dropped to nowhere) */
+    targetId;
+    /** Pointer position where the user dropped pointer. */
+    dropPosition;
+    // -----------------------------
+    // Deprecated compatibility API (keep as FIELDS)
+    // -----------------------------
+    /** @deprecated Use `sourceId` */
+    fOutputId;
+    /** @deprecated Use `targetId` */
+    fInputId;
+    /** @deprecated Use `dropPosition` */
+    fDropPosition;
+    constructor(sourceId, targetId, dropPosition) {
+        // preferred
+        this.sourceId = sourceId;
+        this.targetId = targetId;
+        this.dropPosition = dropPosition;
+        // legacy aliases
+        this.fOutputId = sourceId;
+        this.fInputId = targetId;
+        this.fDropPosition = dropPosition;
+    }
+}
+
+/**
+ * One in-progress connection creation, independent of the gesture that drives it.
+ *
+ * The drag-to-connect handler and the click-to-connect flow both delegate here, so the
+ * preview line, snap highlighting, connectable marking, target resolution, and the
+ * `fCreateConnection` emission behave identically in every mode. The session owns its
+ * state (it survives the per-pointerdown drag-context reset), and `begin()` refuses to
+ * start when no `<f-connection-for-create>` is present — the same opt-in gate the drag
+ * path uses.
+ */
+class FCreateConnectionSession {
+    _mediator = inject(FMediator);
+    _connectionBehaviour = inject(ConnectionBehaviourBuilder);
+    _store = inject(FComponentsStore);
+    _targets = [];
+    _sourceRef;
+    _snapTargetId;
+    get _connection() {
+        return this._store.connections.getForCreate();
+    }
+    get _snapConnection() {
+        return this._store.connections.getForSnap();
     }
     get isActive() {
         return !!this._sourceRef;
@@ -8244,8 +8811,22 @@ class FCreateConnectionSession {
             return;
         }
         const snapTarget = closest && closest.distance < snap.fSnapThreshold ? closest : undefined;
+        this._emitSnapTargetChange(sourceRef, snapTarget?.connector);
         this._drawSnapConnection(sourceRef, snapTarget);
     }
+    /** One event per acquired/switched/released snap target, not one per pointer move. */
+    _emitSnapTargetChange(sourceRef, target) {
+        const snap = this._snapConnection;
+        if (!snap) {
+            return;
+        }
+        const targetId = target?.fId();
+        if (targetId === this._snapTargetId) {
+            return;
+        }
+        this._snapTargetId = targetId;
+        snap.fSnapTargetChange.emit(new FSnapTargetChangeEvent(this._resolveEventSource(sourceRef.connector).fId(), targetId));
+    }
     /**
      * Resolves the connectable target at a client-space point using the same priority as
      * the drag drop: rect hit, then snap-threshold closest, then `fConnectOnNode` node.
@@ -8326,6 +8907,11 @@ class FCreateConnectionSession {
         snap.redraw();
     }
     _end() {
+        const sourceRef = this._sourceRef;
+        if (sourceRef && this._snapTargetId !== undefined) {
+            this._emitSnapTargetChange(sourceRef, undefined);
+        }
+        this._snapTargetId = undefined;
         const connection = this._connection;
         if (connection) {
             connection.redraw();
@@ -9151,8 +9737,14 @@ let ReassignConnectionPreparation = class ReassignConnectionPreparation {
         this._startDrag(connection, pointerInFlow);
         queueMicrotask(() => this._bringToFront(connection));
     }
+    /**
+     * Connections attached to the same connector have coinciding drag handles, so
+     * a selected connection wins over registration order — grabbing the handle of
+     * the connection the user just selected is what they aimed at (discussion #328).
+     */
     _findConnectionAt(pointerInFlow) {
-        return this._connections.find((c) => isPointerInsideStartOrEndDragHandles(c, pointerInFlow));
+        const matches = this._connections.filter((c) => isPointerInsideStartOrEndDragHandles(c, pointerInFlow));
+        return matches.find((c) => c.isSelected()) ?? matches[0];
     }
     _capturePointerDown(request) {
         this._dragContext.onPointerDownScale = this._transform.scale;
@@ -12221,11 +12813,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }] });
 
-let uniqueId$6 = 0;
+let uniqueId$3 = 0;
 class FExternalItem extends FExternalItemBase {
     _apiService = inject(FExternalItemService);
     /** Stable id for matching drag sessions, lookups, etc. */
-    externalItemId = input(`f-external-item-${uniqueId$6++}`, ...(ngDevMode ? [{ debugName: "externalItemId", alias: 'fExternalItemId' }] : [{
+    externalItemId = input(`f-external-item-${uniqueId$3++}`, ...(ngDevMode ? [{ debugName: "externalItemId", alias: 'fExternalItemId' }] : [{
             alias: 'fExternalItemId',
         }]));
     /** Payload attached to external item. */
@@ -16749,7 +17341,7 @@ class FindConnectableConnectorUsingPriorityAndPositionRequest {
 /**
  * Execution that finds a connectable connector at a given position with priority.
  * It checks for connectors at the position, the closest connector if snap connection is enabled,
- * and the first connectable connector of the node at that position.
+ * and the closest connectable connector of the node at that position.
  */
 let FindConnectableConnectorUsingPriorityAndPosition = class FindConnectableConnectorUsingPriorityAndPosition {
     _mediator = inject(FMediator);
@@ -16775,12 +17367,12 @@ let FindConnectableConnectorUsingPriorityAndPosition = class FindConnectableConn
         const result = [];
         result.push(...this._filterConnectorsThatLocatedAtPosition(request));
         // Closest connector is only added if snap connection is enabled and there is a closest connector found
-        // Closest connector has more priority than the first connectable input of the node at position
+        // Closest connector has more priority than the node-level connector of the node at position
         const closestConnector = this._isSnapConnectionEnabledAndHasClosestConnector(request);
         if (closestConnector) {
             result.unshift(closestConnector.connector);
         }
-        const fInput = this._getFirstConnectableConnectorOfNodeAtPosition(request);
+        const fInput = this._getClosestConnectableConnectorOfNodeAtPosition(request);
         if (fInput) {
             result.push(fInput);
         }
@@ -16806,12 +17398,13 @@ let FindConnectableConnectorUsingPriorityAndPosition = class FindConnectableConn
     _isValidClosestInput(closestConnector) {
         return !!closestConnector && closestConnector.distance < this._snapConnection.fSnapThreshold;
     }
-    //if node placed in position and fConnectOnNode is true, return the first connectable connector of the node
-    _getFirstConnectableConnectorOfNodeAtPosition(request) {
+    //if node placed in position and fConnectOnNode is true, return the closest connectable connector of the node
+    _getClosestConnectableConnectorOfNodeAtPosition(request) {
+        const pointerInFlow = this._calculatePointerInFlow(request.pointerPosition);
         return this._getElementsFromPoint(request.pointerPosition)
             .map((x) => this._findConnectableNode(x))
             .filter((x) => !!x)
-            .map((x) => this._findFirstConnectableConnectorOfNode(request.connectableConnectors, x))
+            .map((x) => this._findClosestConnectableConnectorOfNode(request.connectableConnectors, x, pointerInFlow))
             .find((x) => !!x);
     }
     _getElementsFromPoint(position) {
@@ -16820,8 +17413,14 @@ let FindConnectableConnectorUsingPriorityAndPosition = class FindConnectableConn
     _findConnectableNode(element) {
         return this._fNodes.find((x) => x.isContains(element) && x.fConnectOnNode());
     }
-    _findFirstConnectableConnectorOfNode(connectableInputs, fNode) {
-        return connectableInputs.find((x) => x.connector.fNodeId === fNode.fId())?.connector;
+    /**
+     * A node can expose several connectable connectors; picking the one nearest
+     * to the drop point matches what the user aimed at, while registration order
+     * would pick an arbitrary one (see issue #326).
+     */
+    _findClosestConnectableConnectorOfNode(connectableConnectors, fNode, pointerInFlow) {
+        const nodeConnectors = connectableConnectors.filter((x) => x.connector.fNodeId === fNode.fId());
+        return this._mediator.execute(new CalculateClosestConnectorRequest(pointerInFlow, nodeConnectors))?.connector;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FindConnectableConnectorUsingPriorityAndPosition, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FindConnectableConnectorUsingPriorityAndPosition });
@@ -19087,6 +19686,8 @@ class RunDevDiagnosticsRequest {
     static fToken = Symbol('RunDevDiagnosticsRequest');
 }
 
+const DEFAULT_MIN_CONNECTOR_SIZE = 1;
+const DEFAULT_MAX_NODE_POSITION_DRIFT = 2;
 /**
  * Dev-mode misconfiguration checks (`FFxxxx` codes), run after each settled nodes
  * change. Every check targets a real-world silent failure mined from support issues;
@@ -19094,6 +19695,7 @@ class RunDevDiagnosticsRequest {
  */
 let RunDevDiagnostics = class RunDevDiagnostics {
     _store = inject(FComponentsStore);
+    _config = inject(F_FLOW_CONFIG, { optional: true });
     handle(_) {
         if (!isFDevMode()) {
             return;
@@ -19101,6 +19703,8 @@ let RunDevDiagnostics = class RunDevDiagnostics {
         this._checkDetachedItems();
         this._checkInteractionsWithoutDraggable();
         this._checkHiddenConnectors();
+        this._checkZeroSizeConnectors();
+        this._checkNodePositionDrift();
         this._checkNestedNodes();
         this._checkDanglingParentIds();
     }
@@ -19157,23 +19761,89 @@ let RunDevDiagnostics = class RunDevDiagnostics {
         }
         return features;
     }
-    /**
-     * FF1006 — a connector hidden with CSS (`display: none`) still registers, but its
-     * geometry is a 0×0 point: connections attach to the wrong place or nowhere.
-     */
-    _checkHiddenConnectors() {
-        const connectors = [
+    /**
+     * FF1006 — a connector hidden with CSS (`display: none`) still registers, but its
+     * geometry is a 0×0 point: connections attach to the wrong place or nowhere.
+     */
+    _checkHiddenConnectors() {
+        for (const connector of this._allConnectors()) {
+            const host = connector.hostElement;
+            if (host.isConnected && host.getClientRects().length === 0) {
+                fWarnOnce('FF1006', connector.fId(), `Connector "${connector.fId()}" is hidden with CSS (display: none?), so its geometry is a 0×0 point and connections cannot attach to it correctly. Conditionally render it instead of hiding it.`);
+            }
+        }
+    }
+    /**
+     * FF1010 — a rendered connector whose own box is zero/near-zero sized. The visual
+     * dot is often drawn with `::before`/`::after`, but hit-testing and connection
+     * geometry use the element's box, so drops land past the connector and fall back
+     * to node-level connect (see issue #326). Threshold comes from
+     * `provideFFlow({ diagnostics: { minConnectorSize } })`; `0` disables the check.
+     */
+    _checkZeroSizeConnectors() {
+        const threshold = this._config?.diagnostics?.minConnectorSize ?? DEFAULT_MIN_CONNECTOR_SIZE;
+        if (threshold <= 0) {
+            return;
+        }
+        for (const connector of this._allConnectors()) {
+            const host = connector.hostElement;
+            if (!host.isConnected || host.getClientRects().length === 0) {
+                continue;
+            }
+            const { width, height } = host.getBoundingClientRect();
+            if (width < threshold || height < threshold) {
+                fWarnOnce('FF1010', connector.fId(), `Connector "${connector.fId()}" is ${Math.round(width)}×${Math.round(height)}px. Hit-testing and connection geometry use the element's own box, so a dot drawn with ::before/::after is not enough — give the connector element itself a size (width/height).`);
+            }
+        }
+    }
+    /**
+     * FF1011 — a node whose rendered box diverges from its model position. The canvas
+     * places the host at `fNodePosition`, so a drift means app CSS on the node host
+     * (margin, left/top, an extra transform) or out-of-band positioning moved the
+     * visuals; model-driven features (minimap, fitToScreen, auto-layout) keep using
+     * the model position and disagree with what the user sees (see issue #331).
+     * Threshold comes from `provideFFlow({ diagnostics: { maxNodePositionDrift } })`;
+     * `0` disables the check.
+     */
+    _checkNodePositionDrift() {
+        const threshold = this._config?.diagnostics?.maxNodePositionDrift ?? DEFAULT_MAX_NODE_POSITION_DRIFT;
+        if (threshold <= 0) {
+            return;
+        }
+        const flowHost = this._store.flowHost;
+        const transform = this._store.transform;
+        if (!flowHost || !transform) {
+            return;
+        }
+        const scale = transform.scale || 1;
+        for (const node of this._store.nodes.getAll()) {
+            const host = node.hostElement;
+            if (!host.isConnected || host.getClientRects().length === 0) {
+                continue;
+            }
+            const rect = host.getBoundingClientRect();
+            const renderedCenter = calculatePointerInFlow({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }, flowHost, transform);
+            // Centers survive rotation (the host spins around its own center), so compare
+            // them instead of AABB origins; sizes come from unscaled layout geometry.
+            const width = typeof host.offsetWidth === 'number' ? host.offsetWidth : rect.width / scale;
+            const height = typeof host.offsetHeight === 'number' ? host.offsetHeight : rect.height / scale;
+            const driftX = renderedCenter.x - (node._position.x + width / 2);
+            const driftY = renderedCenter.y - (node._position.y + height / 2);
+            // Compared in on-screen pixels: at deep zoom-out a sub-pixel gBCR reading
+            // divided by the scale would otherwise cross the threshold on its own.
+            const drift = Math.max(Math.abs(driftX), Math.abs(driftY)) * scale;
+            if (drift > threshold) {
+                fWarnOnce('FF1011', node.fId(), `${this._describe(node)} "${node.fId()}" is rendered ~${Math.round(drift)}px away from its fNodePosition (model x: ${Math.round(node._position.x)}, y: ${Math.round(node._position.y)}; rendered x: ${Math.round(renderedCenter.x - width / 2)}, y: ${Math.round(renderedCenter.y - height / 2)}). The minimap, fitToScreen and auto-layout read the model, so they place this node where fNodePosition says — not where CSS moved it. Fold the offset (margin/left/top/extra transform on the node host) into fNodePosition instead.`);
+            }
+        }
+    }
+    _allConnectors() {
+        return [
             ...this._store.connectors.getAll(),
             ...this._store.outputs.getAll(),
             ...this._store.inputs.getAll(),
             ...this._store.outlets.getAll(),
         ];
-        for (const connector of connectors) {
-            const host = connector.hostElement;
-            if (host.isConnected && host.getClientRects().length === 0) {
-                fWarnOnce('FF1006', connector.fId(), `Connector "${connector.fId()}" is hidden with CSS (display: none?), so its geometry is a 0×0 point and connections cannot attach to it correctly. Conditionally render it instead of hiding it.`);
-            }
-        }
     }
     /**
      * FF1007 — an `[fNode]`/`[fGroup]` element nested inside another node element: the
@@ -20502,7 +21172,7 @@ const COMMON_PROVIDERS = [
     MoveFrontElementsBeforeTargetElement,
 ];
 
-let uniqueId$5 = 0;
+let uniqueId$2 = 0;
 class FRectPatternComponent {
     _destroyRef = inject(DestroyRef);
     _elementReference = inject(ElementRef);
@@ -20511,7 +21181,7 @@ class FRectPatternComponent {
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    id = input(`f-pattern-${uniqueId$5++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`f-pattern-${uniqueId$2++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
     vColor = input('rgba(0,0,0,0.1)', ...(ngDevMode ? [{ debugName: "vColor" }] : []));
     hColor = input('rgba(0,0,0,0.1)', ...(ngDevMode ? [{ debugName: "hColor" }] : []));
     vSize = input(20, ...(ngDevMode ? [{ debugName: "vSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
@@ -20595,7 +21265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], vColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "vColor", required: false }] }], hColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hColor", required: false }] }], vSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "vSize", required: false }] }], hSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hSize", required: false }] }] } });
 
-let uniqueId$4 = 0;
+let uniqueId$1 = 0;
 class FCirclePatternComponent {
     _destroyRef = inject(DestroyRef);
     _elementReference = inject(ElementRef);
@@ -20604,7 +21274,7 @@ class FCirclePatternComponent {
     get hostElement() {
         return this._elementReference.nativeElement;
     }
-    id = input(`f-pattern-${uniqueId$4++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`f-pattern-${uniqueId$1++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
     color = input('rgba(0,0,0,0.1)', ...(ngDevMode ? [{ debugName: "color" }] : []));
     radius = input(20, ...(ngDevMode ? [{ debugName: "radius", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     _scaledRadius = 20;
@@ -21036,11 +21706,13 @@ class FCanvasComponent extends FCanvasBase {
      * @param padding - paddings from the bounds of the canvas
      * @param animated - If true, the fit will be animated; otherwise, it will be instantaneous.
      * @param emitCanvasChange - If false, does not emit `fCanvasChange` for this programmatic move.
+     * @param maxScale - Upper bound for the resulting scale, so a small graph is not
+     * magnified to fill the viewport. Unlimited when omitted.
      */
-    fitToScreen(padding = PointExtensions.initialize(), animated = true, emitCanvasChange = true) {
+    fitToScreen(padding = PointExtensions.initialize(), animated = true, emitCanvasChange = true, maxScale) {
         this._warnWhenCalledBeforeNodesRender('fitToScreen()');
         this._afterRedraw(() => {
-            this._mediator.execute(new FitToFlowRequest(padding, animated, emitCanvasChange));
+            this._mediator.execute(new FitToFlowRequest(padding, animated, emitCanvasChange, maxScale));
         });
     }
     /**
@@ -21105,251 +21777,6 @@ const F_CANVAS_PROVIDERS = [
     FCanvasComponent,
 ];
 
-let uniqueId$3 = 0;
-class FConnectionComponent extends FConnectionBase {
-    fId = input(`f-connection-${uniqueId$3++}`, ...(ngDevMode ? [{ debugName: "fId", alias: 'fConnectionId' }] : [{ alias: 'fConnectionId' }]));
-    fSourceId = input('', ...(ngDevMode ? [{ debugName: "fSourceId", transform: (value) => stringAttribute(value) || '' }] : [{
-            transform: (value) => stringAttribute(value) || '',
-        }]));
-    fTargetId = input('', ...(ngDevMode ? [{ debugName: "fTargetId", transform: (value) => stringAttribute(value) || '' }] : [{
-            transform: (value) => stringAttribute(value) || '',
-        }]));
-    /** @deprecated Use `fSourceId`. */
-    fOutputId = input('', ...(ngDevMode ? [{ debugName: "fOutputId", transform: (value) => stringAttribute(value) || '' }] : [{
-            transform: (value) => stringAttribute(value) || '',
-        }]));
-    /** @deprecated Use `fTargetId`. */
-    fInputId = input('', ...(ngDevMode ? [{ debugName: "fInputId", transform: (value) => stringAttribute(value) || '' }] : [{
-            transform: (value) => stringAttribute(value) || '',
-        }]));
-    fRadius = 8;
-    fOffset = 12;
-    fBehavior = EFConnectionBehavior.FIXED;
-    fType = EFConnectionType.STRAIGHT;
-    fSelectionDisabled = input(false, ...(ngDevMode ? [{ debugName: "fSelectionDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    fReassignableStart = input(false, ...(ngDevMode ? [{ debugName: "fReassignableStart", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    fDraggingDisabled = input(false, ...(ngDevMode ? [{ debugName: "fDraggingDisabled", alias: 'fReassignDisabled',
-            transform: booleanAttribute }] : [{
-            alias: 'fReassignDisabled',
-            transform: booleanAttribute,
-        }]));
-    fSourceSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fSourceSide", transform: (x) => {
-                return castToEnum(x, 'fSourceSide', EFConnectionConnectableSide);
-            } }] : [{
-            transform: (x) => {
-                return castToEnum(x, 'fSourceSide', EFConnectionConnectableSide);
-            },
-        }]));
-    fTargetSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fTargetSide", transform: (x) => {
-                return castToEnum(x, 'fTargetSide', EFConnectionConnectableSide);
-            } }] : [{
-            transform: (x) => {
-                return castToEnum(x, 'fTargetSide', EFConnectionConnectableSide);
-            },
-        }]));
-    /** @deprecated Use `fTargetSide`. */
-    fInputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fInputSide", transform: (x) => {
-                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
-            } }] : [{
-            transform: (x) => {
-                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
-            },
-        }]));
-    /** @deprecated Use `fSourceSide`. */
-    fOutputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fOutputSide", transform: (x) => {
-                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
-            } }] : [{
-            transform: (x) => {
-                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
-            },
-        }]));
-    get boundingElement() {
-        return this.fPath().hostElement;
-    }
-    _mediator = inject(FMediator);
-    ngOnInit() {
-        this._mediator.execute(new AddConnectionToStoreRequest(this));
-    }
-    ngOnChanges() {
-        this._mediator.execute(new EmitConnectionsChangesRequest());
-    }
-    ngOnDestroy() {
-        this._mediator.execute(new RemoveConnectionFromStoreRequest(this));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FConnectionComponent, isStandalone: false, selector: "f-connection", inputs: { fId: { classPropertyName: "fId", publicName: "fConnectionId", isSignal: true, isRequired: false, transformFunction: null }, fSourceId: { classPropertyName: "fSourceId", publicName: "fSourceId", isSignal: true, isRequired: false, transformFunction: null }, fTargetId: { classPropertyName: "fTargetId", publicName: "fTargetId", isSignal: true, isRequired: false, transformFunction: null }, fOutputId: { classPropertyName: "fOutputId", publicName: "fOutputId", isSignal: true, isRequired: false, transformFunction: null }, fInputId: { classPropertyName: "fInputId", publicName: "fInputId", isSignal: true, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fSelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, fReassignableStart: { classPropertyName: "fReassignableStart", publicName: "fReassignableStart", isSignal: true, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fReassignDisabled", isSignal: true, isRequired: false, transformFunction: null }, fSourceSide: { classPropertyName: "fSourceSide", publicName: "fSourceSide", isSignal: true, isRequired: false, transformFunction: null }, fTargetSide: { classPropertyName: "fTargetSide", publicName: "fTargetSide", isSignal: true, isRequired: false, transformFunction: null }, fInputSide: { classPropertyName: "fInputSide", publicName: "fInputSide", isSignal: true, isRequired: false, transformFunction: null }, fOutputSide: { classPropertyName: "fOutputSide", publicName: "fOutputSide", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "fId()", "attr.data-f-connection-type": "fType", "class.f-connection-selection-disabled": "fSelectionDisabled()", "class.f-connection-reassign-disabled": "fDraggingDisabled()" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FConnectionComponent }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n<ng-content select=\"f-connection-waypoints\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none}:host svg{display:block;vertical-align:middle;overflow:visible!important;position:absolute}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionGradientRenderer, selector: "linearGradient[fConnectionGradientRenderer]", inputs: ["fConnectionGradientRendererFor"] }, { kind: "component", type: FConnectionDragHandleStart, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEnd, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionPath, selector: "path[f-connection-path]", inputs: ["useGradient"] }, { kind: "component", type: FConnectionSelection, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'f-connection', exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'fId()',
-                        '[attr.data-f-connection-type]': 'fType',
-                        class: 'f-component f-connection',
-                        '[class.f-connection-selection-disabled]': 'fSelectionDisabled()',
-                        '[class.f-connection-reassign-disabled]': 'fDraggingDisabled()',
-                    }, providers: [{ provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n<ng-content select=\"f-connection-waypoints\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none}:host svg{display:block;vertical-align:middle;overflow:visible!important;position:absolute}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"] }]
-        }], propDecorators: { fId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fConnectionId", required: false }] }], fSourceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fSourceId", required: false }] }], fTargetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fTargetId", required: false }] }], fOutputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fOutputId", required: false }] }], fInputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fInputId", required: false }] }], fRadius: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], fOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], fBehavior: [{
-                type: Input,
-                args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
-            }], fType: [{
-                type: Input
-            }], fSelectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fSelectionDisabled", required: false }] }], fReassignableStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "fReassignableStart", required: false }] }], fDraggingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fReassignDisabled", required: false }] }], fSourceSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fSourceSide", required: false }] }], fTargetSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fTargetSide", required: false }] }], fInputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fInputSide", required: false }] }], fOutputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fOutputSide", required: false }] }] } });
-
-let uniqueId$2 = 0;
-class FConnectionForCreateComponent extends FConnectionBase {
-    fId = signal(`f-connection-for-create-${uniqueId$2++}`, ...(ngDevMode ? [{ debugName: "fId" }] : []));
-    fOutputId = signal('', ...(ngDevMode ? [{ debugName: "fOutputId" }] : []));
-    fInputId = signal('', ...(ngDevMode ? [{ debugName: "fInputId" }] : []));
-    fRadius = 8;
-    fOffset = 12;
-    fBehavior = EFConnectionBehavior.FIXED;
-    fType = EFConnectionType.STRAIGHT;
-    fInputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fInputSide", transform: (x) => {
-                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
-            } }] : [{
-            transform: (x) => {
-                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
-            },
-        }]));
-    fOutputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fOutputSide", transform: (x) => {
-                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
-            } }] : [{
-            transform: (x) => {
-                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
-            },
-        }]));
-    get boundingElement() {
-        return this.fPath().hostElement;
-    }
-    _mediator = inject(FMediator);
-    ngOnInit() {
-        this._mediator.execute(new AddConnectionForCreateToStoreRequest(this));
-    }
-    ngAfterViewInit() {
-        this.hide();
-    }
-    ngOnChanges() {
-        this._mediator.execute(new EmitConnectionsChangesRequest());
-    }
-    ngOnDestroy() {
-        this._mediator.execute(new RemoveConnectionForCreateFromStoreRequest());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionForCreateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FConnectionForCreateComponent, isStandalone: false, selector: "f-connection-for-create", inputs: { fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fInputSide: { classPropertyName: "fInputSide", publicName: "fInputSide", isSignal: true, isRequired: false, transformFunction: null }, fOutputSide: { classPropertyName: "fOutputSide", publicName: "fOutputSide", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "f-component f-connection f-connection-for-create" }, providers: [
-            { provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FConnectionForCreateComponent },
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionGradientRenderer, selector: "linearGradient[fConnectionGradientRenderer]", inputs: ["fConnectionGradientRendererFor"] }, { kind: "component", type: FConnectionDragHandleEnd, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionPath, selector: "path[f-connection-path]", inputs: ["useGradient"] }, { kind: "component", type: FConnectionSelection, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'f-connection-for-create', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'f-component f-connection f-connection-for-create',
-                        'aria-hidden': 'true',
-                    }, providers: [
-                        { provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FConnectionForCreateComponent },
-                    ], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"] }]
-        }], propDecorators: { fRadius: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], fOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], fBehavior: [{
-                type: Input,
-                args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
-            }], fType: [{
-                type: Input
-            }], fInputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fInputSide", required: false }] }], fOutputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fOutputSide", required: false }] }] } });
-
-let uniqueId$1 = 0;
-class FSnapConnectionComponent extends FConnectionBase {
-    fId = signal(`f-snap-connection-${uniqueId$1++}`, ...(ngDevMode ? [{ debugName: "fId" }] : []));
-    fSnapThreshold = 20;
-    fOutputId = signal('', ...(ngDevMode ? [{ debugName: "fOutputId" }] : []));
-    fInputId = signal('', ...(ngDevMode ? [{ debugName: "fInputId" }] : []));
-    fRadius = 8;
-    fOffset = 12;
-    fBehavior = EFConnectionBehavior.FIXED;
-    fType = EFConnectionType.STRAIGHT;
-    fInputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fInputSide", transform: (x) => {
-                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
-            } }] : [{
-            transform: (x) => {
-                return castToEnum(x, 'fInputSide', EFConnectionConnectableSide);
-            },
-        }]));
-    fOutputSide = input(EFConnectionConnectableSide.DEFAULT, ...(ngDevMode ? [{ debugName: "fOutputSide", transform: (x) => {
-                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
-            } }] : [{
-            transform: (x) => {
-                return castToEnum(x, 'fOutputSide', EFConnectionConnectableSide);
-            },
-        }]));
-    get boundingElement() {
-        return this.fPath().hostElement;
-    }
-    _mediator = inject(FMediator);
-    ngOnInit() {
-        this._mediator.execute(new AddSnapConnectionToStoreRequest(this));
-    }
-    ngAfterViewInit() {
-        this.hide();
-    }
-    ngOnChanges() {
-        this._mediator.execute(new EmitConnectionsChangesRequest());
-    }
-    ngOnDestroy() {
-        this._mediator.execute(new RemoveSnapConnectionFromStoreRequest());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FSnapConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FSnapConnectionComponent, isStandalone: false, selector: "f-snap-connection", inputs: { fSnapThreshold: { classPropertyName: "fSnapThreshold", publicName: "fSnapThreshold", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fInputSide: { classPropertyName: "fInputSide", publicName: "fInputSide", isSignal: true, isRequired: false, transformFunction: null }, fOutputSide: { classPropertyName: "fOutputSide", publicName: "fOutputSide", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FSnapConnectionComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionGradientRenderer, selector: "linearGradient[fConnectionGradientRenderer]", inputs: ["fConnectionGradientRendererFor"] }, { kind: "component", type: FConnectionDragHandleEnd, selector: "circle[f-connection-drag-handle-end]" }, { kind: "component", type: FConnectionPath, selector: "path[f-connection-path]", inputs: ["useGradient"] }, { kind: "component", type: FConnectionSelection, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FSnapConnectionComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'f-snap-connection', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'f-component f-connection f-snap-connection',
-                        'aria-hidden': 'true',
-                    }, providers: [{ provide: F_CONNECTION_COMPONENTS_PARENT, useExisting: FSnapConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <ng-content select=\"svg[fMarker]\" />\n  <g class=\"f-connection-group\">\n    @if (fGradient(); as gradient) {\n      <linearGradient\n        fConnectionGradientRenderer\n        [fConnectionGradientRendererFor]=\"gradient\"\n      ></linearGradient>\n    }\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [useGradient]=\"!!fGradient()\" [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n  </g>\n</svg>\n<ng-content select=\"f-connection-marker-circle, f-connection-marker-arrow\" />\n<ng-content select=\"f-connection-gradient\" />\n\n@if (fContents().length) {\n  <ng-content select=\"[fConnectionContent]\" />\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-content{pointer-events:all}\n"] }]
-        }], propDecorators: { fSnapThreshold: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], fRadius: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], fOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], fBehavior: [{
-                type: Input,
-                args: [{ transform: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }]
-            }], fType: [{
-                type: Input
-            }], fInputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fInputSide", required: false }] }], fOutputSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fOutputSide", required: false }] }] } });
-
-const F_CONNECTION_PROVIDERS = [
-    FConnectionDragHandleStart,
-    FConnectionDragHandleEnd,
-    FConnectionPath,
-    FConnectionSelection,
-    FConnectionMarker,
-    FConnectionComponent,
-    FConnectionForCreateComponent,
-    FSnapConnectionComponent,
-];
-const F_CONNECTION_IMPORTS_EXPORTS = [
-    FConnectionContent,
-    FConnectionMarkerCircle,
-    FConnectionMarkerArrow,
-    FConnectionGradient,
-    FConnectionGradientRenderer,
-    FConnectionWaypoints,
-];
-
 const CLEAR_DELAY = 4000;
 /**
  * Speaks editor feedback to assistive technology through a live region (WCAG 4.1.3 —
@@ -24423,5 +24850,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddCanvasToStore, AddCanvasToStoreRequest, AddConnectionForCreateToStore, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStore, AddConnectionMarkerToStoreRequest, AddConnectionToStore, AddConnectionToStoreRequest, AddConnectorToStore, AddConnectorToStoreRequest, AddDndToStore, AddDndToStoreRequest, AddFlowToStore, AddFlowToStoreRequest, AddNodeToStore, AddNodeToStoreRequest, AddPatternToBackground, AddPatternToBackgroundRequest, AddSnapConnectionToStore, AddSnapConnectionToStoreRequest, ApplyChildResizeConstraints, ApplyChildResizeConstraintsRequest, ApplyConnectionRender, ApplyConnectionRenderRequest, ApplyConnectionWorkerResult, ApplyConnectionWorkerResultRequest, ApplyParentResizeConstraints, ApplyParentResizeConstraintsRequest, AttachDragNodeHandlerFromSelection, AttachDragNodeHandlerFromSelectionRequest, AttachResizeConnectionDragHandlersToNode, AttachResizeConnectionDragHandlersToNodeRequest, AttachSoftParentConnectionDragHandlersToNode, AttachSoftParentConnectionDragHandlersToNodeRequest, AttachSourceConnectionDragHandlersToNode, AttachSourceConnectionDragHandlersToNodeRequest, AttachTargetConnectionDragHandlersToNode, AttachTargetConnectionDragHandlersToNodeRequest, BuildConnectionLine, BuildConnectionLineRequest, BuildConnectionWorkerBatch, BuildConnectionWorkerBatchRequest, BuildConnectionWorkerPayloadItem, BuildConnectionWorkerPayloadItemRequest, BuildDragNodeConstraints, BuildDragNodeConstraintsRequest, CALCULATABLE_SIDES, COMMON_PROVIDERS, CONNECTABLE_SIDE_EPSILON, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateAdaptiveCurveData, CalculateBezierCurveData, CalculateChangedRectFromDifference, CalculateChangedRectFromDifferenceRequest, CalculateClosestConnector, CalculateClosestConnectorRequest, CalculateConnectableSideByConnectedPositions, CalculateConnectableSideByConnectedPositionsRequest, CalculateConnectableSideByInternalPosition, CalculateConnectableSideByInternalPositionRequest, CalculateConnectionsState, CalculateConnectionsStateRequest, CalculateConnectorsConnectableSides, CalculateConnectorsConnectableSidesRequest, CalculateDirectChildrenUnionRect, CalculateDirectChildrenUnionRectRequest, CalculateFlowPointFromMinimapPoint, CalculateFlowPointFromMinimapPointRequest, CalculateFlowState, CalculateFlowStateRequest, CalculateInputConnections, CalculateInputConnectionsRequest, CalculateNodesBoundingBox, CalculateNodesBoundingBoxNormalizedPosition, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CalculateNodesState, CalculateNodesStateRequest, CalculateOutputConnections, CalculateOutputConnectionsRequest, CalculateResizeLimits, CalculateResizeLimitsRequest, CalculateSegmentLineData, CalculateSelectableItems, CalculateSelectableItemsRequest, CalculateSourceConnectorsToConnect, CalculateSourceConnectorsToConnectRequest, CalculateStraightLineData, CalculateTargetConnectorsToConnect, CalculateTargetConnectorsToConnectRequest, CenterBasedDeltaCalculator, CenterGroupOrNode, CenterGroupOrNodeRequest, CenterOfMassSelectionStrategy, ChainPushCollisionResolver, ClearSelection, ClearSelectionRequest, CompleteConnectionRedraw, CompleteConnectionRedrawRequest, ConnectableSidesScheduler, ConnectedSubgraphScopeFilter, ConnectionBehaviourBuilder, ConnectionBehaviourBuilderRequest, ConnectionContentLayoutEngine, ConnectionLineBuilder, ConnectionLineBuilderRequest, ConnectionRedrawState, ConnectionWorkerState, CreateConnectionCreateDragHandler, CreateConnectionCreateDragHandlerRequest, CreateConnectionFinalize, CreateConnectionFinalizeRequest, CreateConnectionFromConnectorPreparation, CreateConnectionFromConnectorPreparationRequest, CreateConnectionFromOutletPreparation, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparation, CreateConnectionFromOutputPreparationRequest, CreateConnectionHandler, CreateConnectionMarkers, CreateConnectionMarkersRequest, CreateConnectionPreparation, CreateConnectionPreparationRequest, CreateDragNodeHandler, CreateDragNodeHandlerRequest, CreateDragNodeHierarchy, CreateDragNodeHierarchyRequest, DRAG_AND_DROP_COMMON_PROVIDERS, DRAG_AUTO_PAN_PROVIDERS, DRAG_CANVAS_PROVIDERS, DRAG_CONNECTIONS_PROVIDERS, DRAG_DROP_TO_GROUP_PROVIDERS, DRAG_EXTERNAL_ITEM_HANDLER_KIND, DRAG_EXTERNAL_ITEM_HANDLER_TYPE, DRAG_EXTERNAL_ITEM_PROVIDERS, DRAG_MINIMAP_HANDLER_KIND, DRAG_MINIMAP_HANDLER_TYPE, DRAG_MINIMAP_PROVIDERS, DRAG_NODE_HANDLER_KIND, DRAG_NODE_HANDLER_TYPE, DRAG_SELECTION_AREA_PROVIDERS, DRAG_SELECT_BY_POINTER_PROVIDERS, DeltaClamp, Deprecated, DetectConnectionsUnderDragNode, DetectConnectionsUnderDragNodeRequest, DisableConnectionWorker, DisableConnectionWorkerRequest, DownstreamConnectionsSelectionStrategy, DragAndDropBase, DragCanvasFinalize, DragCanvasFinalizeRequest, DragCanvasHandler, DragCanvasPreparation, DragCanvasPreparationRequest, DragConnectionWaypointFinalize, DragConnectionWaypointFinalizeRequest, DragConnectionWaypointHandler, DragConnectionWaypointPreparation, DragConnectionWaypointPreparationRequest, DragExternalItemCreatePlaceholder, DragExternalItemCreatePlaceholderRequest, DragExternalItemCreatePreview, DragExternalItemCreatePreviewRequest, DragExternalItemFinalize, DragExternalItemFinalizeRequest, DragExternalItemHandler, DragExternalItemPreparation, DragExternalItemPreparationRequest, DragHandlerBase, DragHandlerInjector, DragMinimapFinalize, DragMinimapFinalizeRequest, DragMinimapHandler, DragMinimapPreparation, DragMinimapPreparationRequest, DragNodeConnectionBothSidesHandler, DragNodeConnectionHandlerBase, DragNodeConnectionSourceHandler, DragNodeConnectionTargetHandler, DragNodeDeltaConstraints, DragNodeFinalize, DragNodeFinalizeRequest, DragNodeHandler, DragNodeHierarchy, DragNodeItemHandler, DragNodePreparation, DragNodePreparationRequest, DropToGroupFinalize, DropToGroupFinalizeRequest, DropToGroupHandler, DropToGroupPreparation, DropToGroupPreparationRequest, ECanvasRedrawContext, EFCanvasLayer, EFConnectableSide, EFConnectionBehavior, EFConnectionConnectableSide, EFConnectionType, EFFlowFeatureKind, EFLayoutDirection, EFLayoutMode, EFMarkerType, EFReflowAxis, EFReflowCollision, EFReflowDeltaSource, EFReflowMode, EFReflowScope, EFResizeHandleType, EFZoomDirection, EMPTY_REFLOW_PLAN, EdgeBasedDeltaCalculator, EmitConnectionsChanges, EmitConnectionsChangesRequest, EmitEndDragSequenceEvent, EmitEndDragSequenceEventRequest, EmitSelectionChangeEvent, EmitSelectionChangeEventRequest, EmitStartDragSequenceEvent, EmitStartDragSequenceEventRequest, EnsureConnectionWorker, EnsureConnectionWorkerRequest, EventExtensions, ExternalRectConstraint, FA11yAnnouncer, FA11yController, FAutoPan, FAutoPanBase, FBackgroundBase, FBackgroundComponent, FCache, FCacheConnector, FCacheConnectorKeyFactory, FCacheNode, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FChannel, FChannelHub, FCirclePatternComponent, FClickConnectFlow, FComponentsStore, FConnectionBase, FConnectionComponent, FConnectionComponentsParent, FConnectionContent, FConnectionContentBase, FConnectionDragHandleBase, FConnectionDragHandleEnd, FConnectionDragHandleStart, FConnectionForCreateComponent, FConnectionGradient, FConnectionGradientBase, FConnectionGradientRenderer, FConnectionGradientRendererBase, FConnectionMarker, FConnectionMarkerArrow, FConnectionMarkerBase, FConnectionMarkerCircle, FConnectionMarkerRegistry, FConnectionPath, FConnectionPathBase, FConnectionRegistry, FConnectionSelection, FConnectionSelectionBase, FConnectionWaypoints, FConnectionWaypointsBase, FConnectionWaypointsChangedEvent, FConnectorBase, FConnectorDirective, FConnectorRegistry, FControlSchemeController, FCreateConnectionEvent, FCreateConnectionSession, FCreateNodeEvent, FDeleteSelectedEvent, FDragBlockerDirective, FDragExternalItemStartEventData, FDragHandleDirective, FDragHandlerResult, FDragNodeStartEventData, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItem, FExternalItemBase, FExternalItemPlaceholder, FExternalItemPreview, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FFlowState, FFlowStateController, FGroupDirective, FIdRegistryBase, FLayoutController, FLayoutEngine, FLineAlignmentComponent, FMagneticLines, FMagneticLinesBase, FMagneticRects, FMagneticRectsBase, FMinimapBase, FMinimapCanvasDirective, FMinimapComponent, FMinimapFlowDirective, FMinimapState, FMinimapViewDirective, FMoveNodesEvent, FNodeBase, FNodeConnectionsIntersectionEvent, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeRegistry, FReassignConnectionEvent, FRectPatternComponent, FReflowBaselineTracker, FReflowController, FReflowCycleGuard, FReflowIgnore, FReflowIgnoreRegistry, FReflowOrchestrator, FReflowPlanner, FResizeChannel, FResizeHandleDirective, FResizeNodeStartEventData, FRotateHandleDirective, FRotateNodeStartEventData, FSelectionArea, FSelectionAreaBase, FSelectionChangeEvent, FSingleRegistryBase, FSnapConnectionComponent, FSourceConnectorBase, FVirtualFor, FZoomBase, FZoomDirective, F_A11Y_CONFIG, F_AUTO_PAN_PROVIDERS, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CACHE_FEATURES, F_CACHE_OPTIONS, F_CANVAS, F_CANVAS_CONFIG, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_COMPONENTS_PARENT, F_CONNECTION_CONTENT, F_CONNECTION_DRAG_HANDLE_END, F_CONNECTION_DRAG_HANDLE_START, F_CONNECTION_FEATURES, F_CONNECTION_FLOW, F_CONNECTION_GRADIENT, F_CONNECTION_IMPORTS_EXPORTS, F_CONNECTION_MARKER, F_CONNECTION_PATH, F_CONNECTION_PROVIDERS, F_CONNECTION_SELECTION, F_CONNECTION_WAYPOINTS, F_CONNECTOR, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CONTROL_SCHEME_CONFIG, F_CSS_CLASS, F_DEFAULT_A11Y_CONFIG, F_DEFAULT_A11Y_KEYS, F_DEFAULT_A11Y_MESSAGES, F_DEFAULT_CONTROL_SCHEME, F_DEFAULT_LAYER_ORDER, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_DRAG_SELECT_CONTROL_SCHEME, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_CONFIG, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_FLOW_STATE_CONFIG, F_LAYOUT, F_LAYOUT_OPTIONS, F_LINE_ALIGNMENT_PROVIDERS, F_MAGNETIC_LINES, F_MAGNETIC_LINES_PROVIDERS, F_MAGNETIC_RECTS, F_MAGNETIC_RECTS_PROVIDERS, F_MINIMAP_BASE, F_MINIMAP_FEATURES, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_REFLOW_CONFIG, F_REFLOW_PROVIDERS, F_SCROLL_PAN_CONTROL_SCHEME, F_SELECTED_CLASS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_VIRTUAL_FOR_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, FindConnectableConnectorUsingPriorityAndPosition, FindConnectableConnectorUsingPriorityAndPositionRequest, FitToChildNodesAndGroups, FitToChildNodesAndGroupsRequest, FitToFlow, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetCachedFCacheRect, GetCachedFCacheRectRequest, GetChildNodeIds, GetChildNodeIdsRequest, GetConnectorRectReference, GetConnectorRectReferenceRequest, GetCurrentSelection, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroups, GetDeepChildrenNodesAndGroupsRequest, GetFlow, GetFlowRequest, GetNodePadding, GetNodePaddingRequest, GetNormalizedConnectorRect, GetNormalizedConnectorRectRequest, GetNormalizedElementRect, GetNormalizedElementRectRequest, GetNormalizedParentNodeRect, GetNormalizedParentNodeRectRequest, GetNormalizedPoint, GetNormalizedPointRequest, GetParentNodes, GetParentNodesRequest, GlobalScopeFilter, GridSnapper, GroupScopeFilter, HandleConnectionWorkerMessage, HandleConnectionWorkerMessageRequest, IMouseEvent, INSTANCES, IPointerEvent, IPointerUpEvent, ITouchDownEvent, ITouchMoveEvent, InitializeDragSequence, InitializeDragSequenceRequest, InputCanvasPosition, InputCanvasPositionRequest, InputCanvasScale, InputCanvasScaleRequest, InvalidateFCacheNode, InvalidateFCacheNodeRequest, IsArrayHasParentNode, IsArrayHasParentNodeRequest, IsConnectionRedrawCurrent, IsConnectionRedrawCurrentRequest, IsConnectionWorkerEnabled, IsConnectionWorkerEnabledRequest, IsDragStarted, IsDragStartedRequest, ListenConnectionsChanges, ListenConnectionsChangesRequest, ListenNodesChanges, ListenNodesChangesRequest, ListenTransformChanges, ListenTransformChangesRequest, LogExecutionTime, MOUSE_EVENT_IGNORE_TIME, MagneticLineElement, MagneticLineRenderer, MagneticLinesHandler, MagneticLinesPreparation, MagneticLinesPreparationRequest, MagneticRectElement, MagneticRectsHandler, MagneticRectsPreparation, MagneticRectsPreparationRequest, MagneticRectsRenderer, MarkConnectableConnectors, MarkConnectableConnectorsRequest, MarkConnectionConnectorsAsConnected, MarkConnectionConnectorsAsConnectedRequest, MinimapCalculateViewRect, MinimapCalculateViewRectRequest, MinimapCalculateViewport, MinimapCalculateViewportRequest, MinimapDrawNodes, MinimapDrawNodesRequest, MinimapNodeRects, MoveFrontElementsBeforeTargetElement, MoveFrontElementsBeforeTargetElementRequest, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NODE_ROTATE_PROVIDERS, NotifyFullRendered, NotifyFullRenderedRequest, NotifyNodesRendered, NotifyNodesRenderedRequest, NotifyTransformChanged, NotifyTransformChangedRequest, OnPointerMove, OnPointerMoveRequest, PINCH_TO_ZOOM_PROVIDERS, PinchToZoomFinalize, PinchToZoomFinalizeRequest, PinchToZoomHandler, PinchToZoomPreparation, PinchToZoomPreparationRequest, Polyline, PolylineContentAlign, PolylineContentPlace, PolylineSampler, PrepareDragSequence, PrepareDragSequenceRequest, PreventDefaultIsExternalItem, PreventDefaultIsExternalItemRequest, QueueConnectionRedraw, QueueConnectionRedrawRequest, QueueConnectionRedrawState, RESIZE_DIRECTIONS, RESIZE_NODE_HANDLER_KIND, RESIZE_NODE_HANDLER_TYPE, ROTATE_NODE_HANDLER_KIND, ROTATE_NODE_HANDLER_TYPE, ReadNodeBoundsWithPaddings, ReadNodeBoundsWithPaddingsRequest, ReadNodeBoundsWithPaddingsResponse, ReassignConnectionFinalize, ReassignConnectionFinalizeRequest, ReassignConnectionHandler, ReassignConnectionPreparation, ReassignConnectionPreparationRequest, ReassignConnectionSourceHandler, ReassignConnectionTargetHandler, RedrawCanvasWithAnimation, RedrawCanvasWithAnimationRequest, RedrawConnections, RedrawConnectionsRequest, RegisterFCacheConnector, RegisterFCacheConnectorRequest, RegisterFCacheNode, RegisterFCacheNodeRequest, RegisterPluginInstance, RegisterPluginInstanceRequest, RemoveCanvasFromStore, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStore, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStore, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStore, RemoveConnectionMarkerFromStoreRequest, RemoveConnectionWaypoint, RemoveConnectionWaypointRequest, RemoveConnectorFromStore, RemoveConnectorFromStoreRequest, RemoveDndFromStore, RemoveDndFromStoreRequest, RemoveFlowFromStore, RemoveFlowFromStoreRequest, RemoveNodeFromStore, RemoveNodeFromStoreRequest, RemovePluginInstance, RemovePluginInstanceRequest, RemoveSnapConnectionFromStore, RemoveSnapConnectionFromStoreRequest, RenderConnection, RenderConnectionFromGeometry, RenderConnectionFromGeometryRequest, RenderConnectionRequest, RenderConnectionWithLine, RenderConnectionWithLineRequest, RenderLifecycleState, ResetConnectionWorkerRuntime, ResetConnectionWorkerRuntimeRequest, ResetRenderLifecycle, ResetRenderLifecycleRequest, ResetScale, ResetScaleAndCenter, ResetScaleAndCenterRequest, ResetScaleRequest, ResetZoom, ResetZoomRequest, ResizeNodeConnectionBothSidesHandler, ResizeNodeConnectionHandlerBase, ResizeNodeConnectionSourceHandler, ResizeNodeConnectionTargetHandler, ResizeNodeFinalize, ResizeNodeFinalizeRequest, ResizeNodeHandler, ResizeNodePreparation, ResizeNodePreparationRequest, ResolveConnectableOutputForOutlet, ResolveConnectableOutputForOutletRequest, ResolveConnectionEndpointRect, ResolveConnectionEndpointRectRequest, ResolveConnectionEndpointRotationContext, ResolveConnectionEndpointRotationContextRequest, ResolveConnectionEndpoints, ResolveConnectionEndpointsRequest, ResolveConnectionGeometry, ResolveConnectionGeometryRequest, RotateNodeFinalize, RotateNodeFinalizeRequest, RotateNodeHandler, RotateNodePreparation, RotateNodePreparationRequest, RunAutoPanFrame, RunAutoPanFrameRequest, RunConnectionRedrawSlice, RunConnectionRedrawSliceRequest, RunConnectionWorker, RunConnectionWorkerBatch, RunConnectionWorkerBatchRequest, RunConnectionWorkerRequest, RunDevDiagnostics, RunDevDiagnosticsRequest, ScheduleAutoPanFrame, ScheduleAutoPanFrameRequest, ScrollCanvas, ScrollCanvasRequest, Select, SelectAll, SelectAllRequest, SelectAndUpdateNodeLayer, SelectAndUpdateNodeLayerRequest, SelectByPointer, SelectByPointerRequest, SelectRequest, SelectionAreaFinalize, SelectionAreaFinalizeRequest, SelectionAreaHandler, SelectionAreaPreparation, SelectionAreaPreparationRequest, SetBackgroundTransform, SetBackgroundTransformRequest, SetFCacheConnectorRect, SetFCacheConnectorRectRequest, SetFCacheNodeRect, SetFCacheNodeRectRequest, SetZoom, SetZoomRequest, ShouldUseConnectionWorker, ShouldUseConnectionWorkerRequest, SortDropCandidatesByLayer, SortDropCandidatesByLayerRequest, SortItemLayers, SortItemLayersRequest, SortItemsByParent, SortItemsByParentRequest, SortNodeLayers, SortNodeLayersRequest, StartConnectionRedraw, StartConnectionRedrawRequest, StartConnectionWorkerRedraw, StartConnectionWorkerRedrawRequest, StopAutoPan, StopAutoPanRequest, StopCollisionResolver, UnmarkConnectableConnectors, UnmarkConnectableConnectorsRequest, UnregisterFCacheConnector, UnregisterFCacheConnectorRequest, UnregisterFCacheNode, UnregisterFCacheNodeRequest, UpdateFCacheRectByElement, UpdateFCacheRectByElementRequest, UpdateItemAndChildrenLayers, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChanged, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScale, UpdateScaleRequest, WaitForConnectionsRendered, WaitForConnectionsRenderedRequest, XRangeSelectionStrategy, afterNextPaint, buildConnectionAnchors, buildCornerMidPointsAndApplyOffsets, calculateAutoPanAxisDelta, calculateAutoPanDelta, calculateCenterBetweenPoints, calculateCurveCandidates, calculateDifferenceAfterRotation, calculateMagneticGuides, calculateMagneticRects, calculatePointerInFlow, calculatePolylineCandidates, calculatePositionAfterRotation, castToConnectorType, coerceMarkerType, computeEdgeDeltas, createConnectionDomIdentifier, createConnectionSelectionDomIdentifier, createConnectionWorkerUrl, createGradientDomIdentifier, createGradientDomUrl, createMultiCubicPath, createSVGElement, createSegmentLinePath, cubicBezierAtT, debounceAnimationFrame, debounceMicrotask, debounceTime, defaultEventTrigger, determineSide, expandRectByOverflow, fDiagnosticMessage, fInstanceKey, fProvideCache, fSuppressDevWarnings, fWarnOnce, filterConnectableTargets, findExistingWaypoint, findNodeOrGroupContaining, findSourceConnector, findSpatialNeighbor, findTargetConnector, findWaypointCandidate, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getAllSourceConnectors, getAllTargetConnectors, getExternalItemHost, infinityMinMax, injectFlowState, isCalculateMode, isConnectionWorkerRuntimeSupported, isConnector, isDragBlocker, isDragExternalItemHandler, isDragHandleEnd, isDragHandleStart, isDragMinimapHandler, isDragNodeHandler, isExternalItem, isFDevMode, isMobile, isNode, isNodeOutlet, isNodeOutput, isOnFlowBackground, isOutletConnector, isPointerInsidePoint, isPointerInsideStartOrEndDragHandles, isResizeNodeHandler, isRotateHandle, isRotateNodeHandler, isSourceConnector, isTargetConnector, isValidEventTrigger, mergeA11yConfig, mergeControlSchemeConfig, mergeFCanvasConfig, mergeFlowStateConfig, mergeLayoutNodes, mergePointChains, mergeReflowConfig, middleButtonEventTrigger, mixinChangeSelection, mixinChangeVisibility, normalizeFlowLayoutData, normalizePolyline, notifyOnStart, pickWaypoint, primaryButtonEventTrigger, provideFFlow, provideFLayout, rebaseAutoPanPointerDownPosition, rectFromPoint, requireSourceConnector, requireTargetConnector, resolveAutoPanMode, resolveConnectionWorkerRuntime, resolveLayerOrder, revokeConnectionWorkerUrl, sampleCubicBezierUniform, sampleMultiCubicUniform, stringAttribute, takeOne, transitionEnd, withA11y, withConnectionFlow, withControlScheme, withFCanvas, withFlowState, withReflowOnResize, withinSnapThreshold };
+export { AddCanvasToStore, AddCanvasToStoreRequest, AddConnectionForCreateToStore, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStore, AddConnectionMarkerToStoreRequest, AddConnectionToStore, AddConnectionToStoreRequest, AddConnectorToStore, AddConnectorToStoreRequest, AddDndToStore, AddDndToStoreRequest, AddFlowToStore, AddFlowToStoreRequest, AddNodeToStore, AddNodeToStoreRequest, AddPatternToBackground, AddPatternToBackgroundRequest, AddSnapConnectionToStore, AddSnapConnectionToStoreRequest, ApplyChildResizeConstraints, ApplyChildResizeConstraintsRequest, ApplyConnectionRender, ApplyConnectionRenderRequest, ApplyConnectionWorkerResult, ApplyConnectionWorkerResultRequest, ApplyParentResizeConstraints, ApplyParentResizeConstraintsRequest, AttachDragNodeHandlerFromSelection, AttachDragNodeHandlerFromSelectionRequest, AttachResizeConnectionDragHandlersToNode, AttachResizeConnectionDragHandlersToNodeRequest, AttachSoftParentConnectionDragHandlersToNode, AttachSoftParentConnectionDragHandlersToNodeRequest, AttachSourceConnectionDragHandlersToNode, AttachSourceConnectionDragHandlersToNodeRequest, AttachTargetConnectionDragHandlersToNode, AttachTargetConnectionDragHandlersToNodeRequest, BuildConnectionLine, BuildConnectionLineRequest, BuildConnectionWorkerBatch, BuildConnectionWorkerBatchRequest, BuildConnectionWorkerPayloadItem, BuildConnectionWorkerPayloadItemRequest, BuildDragNodeConstraints, BuildDragNodeConstraintsRequest, CALCULATABLE_SIDES, COMMON_PROVIDERS, CONNECTABLE_SIDE_EPSILON, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateAdaptiveCurveData, CalculateBezierCurveData, CalculateChangedRectFromDifference, CalculateChangedRectFromDifferenceRequest, CalculateClosestConnector, CalculateClosestConnectorRequest, CalculateConnectableSideByConnectedPositions, CalculateConnectableSideByConnectedPositionsRequest, CalculateConnectableSideByInternalPosition, CalculateConnectableSideByInternalPositionRequest, CalculateConnectionsState, CalculateConnectionsStateRequest, CalculateConnectorsConnectableSides, CalculateConnectorsConnectableSidesRequest, CalculateDirectChildrenUnionRect, CalculateDirectChildrenUnionRectRequest, CalculateFlowPointFromMinimapPoint, CalculateFlowPointFromMinimapPointRequest, CalculateFlowState, CalculateFlowStateRequest, CalculateInputConnections, CalculateInputConnectionsRequest, CalculateNodesBoundingBox, CalculateNodesBoundingBoxNormalizedPosition, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CalculateNodesState, CalculateNodesStateRequest, CalculateOutputConnections, CalculateOutputConnectionsRequest, CalculateResizeLimits, CalculateResizeLimitsRequest, CalculateSegmentLineData, CalculateSelectableItems, CalculateSelectableItemsRequest, CalculateSourceConnectorsToConnect, CalculateSourceConnectorsToConnectRequest, CalculateStraightLineData, CalculateTargetConnectorsToConnect, CalculateTargetConnectorsToConnectRequest, CenterBasedDeltaCalculator, CenterGroupOrNode, CenterGroupOrNodeRequest, CenterOfMassSelectionStrategy, ChainPushCollisionResolver, ClearSelection, ClearSelectionRequest, CompleteConnectionRedraw, CompleteConnectionRedrawRequest, ConnectableSidesScheduler, ConnectedSubgraphScopeFilter, ConnectionBehaviourBuilder, ConnectionBehaviourBuilderRequest, ConnectionContentLayoutEngine, ConnectionLineBuilder, ConnectionLineBuilderRequest, ConnectionRedrawState, ConnectionWorkerState, CreateConnectionCreateDragHandler, CreateConnectionCreateDragHandlerRequest, CreateConnectionFinalize, CreateConnectionFinalizeRequest, CreateConnectionFromConnectorPreparation, CreateConnectionFromConnectorPreparationRequest, CreateConnectionFromOutletPreparation, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparation, CreateConnectionFromOutputPreparationRequest, CreateConnectionHandler, CreateConnectionMarkers, CreateConnectionMarkersRequest, CreateConnectionPreparation, CreateConnectionPreparationRequest, CreateDragNodeHandler, CreateDragNodeHandlerRequest, CreateDragNodeHierarchy, CreateDragNodeHierarchyRequest, DRAG_AND_DROP_COMMON_PROVIDERS, DRAG_AUTO_PAN_PROVIDERS, DRAG_CANVAS_PROVIDERS, DRAG_CONNECTIONS_PROVIDERS, DRAG_DROP_TO_GROUP_PROVIDERS, DRAG_EXTERNAL_ITEM_HANDLER_KIND, DRAG_EXTERNAL_ITEM_HANDLER_TYPE, DRAG_EXTERNAL_ITEM_PROVIDERS, DRAG_MINIMAP_HANDLER_KIND, DRAG_MINIMAP_HANDLER_TYPE, DRAG_MINIMAP_PROVIDERS, DRAG_NODE_HANDLER_KIND, DRAG_NODE_HANDLER_TYPE, DRAG_SELECTION_AREA_PROVIDERS, DRAG_SELECT_BY_POINTER_PROVIDERS, DeltaClamp, Deprecated, DetectConnectionsUnderDragNode, DetectConnectionsUnderDragNodeRequest, DisableConnectionWorker, DisableConnectionWorkerRequest, DownstreamConnectionsSelectionStrategy, DragAndDropBase, DragCanvasFinalize, DragCanvasFinalizeRequest, DragCanvasHandler, DragCanvasPreparation, DragCanvasPreparationRequest, DragConnectionWaypointFinalize, DragConnectionWaypointFinalizeRequest, DragConnectionWaypointHandler, DragConnectionWaypointPreparation, DragConnectionWaypointPreparationRequest, DragExternalItemCreatePlaceholder, DragExternalItemCreatePlaceholderRequest, DragExternalItemCreatePreview, DragExternalItemCreatePreviewRequest, DragExternalItemFinalize, DragExternalItemFinalizeRequest, DragExternalItemHandler, DragExternalItemPreparation, DragExternalItemPreparationRequest, DragHandlerBase, DragHandlerInjector, DragMinimapFinalize, DragMinimapFinalizeRequest, DragMinimapHandler, DragMinimapPreparation, DragMinimapPreparationRequest, DragNodeConnectionBothSidesHandler, DragNodeConnectionHandlerBase, DragNodeConnectionSourceHandler, DragNodeConnectionTargetHandler, DragNodeDeltaConstraints, DragNodeFinalize, DragNodeFinalizeRequest, DragNodeHandler, DragNodeHierarchy, DragNodeItemHandler, DragNodePreparation, DragNodePreparationRequest, DropToGroupFinalize, DropToGroupFinalizeRequest, DropToGroupHandler, DropToGroupPreparation, DropToGroupPreparationRequest, ECanvasRedrawContext, EFCanvasLayer, EFConnectableSide, EFConnectionBehavior, EFConnectionConnectableSide, EFConnectionType, EFFlowFeatureKind, EFLayoutDirection, EFLayoutMode, EFMarkerType, EFReflowAxis, EFReflowCollision, EFReflowDeltaSource, EFReflowMode, EFReflowScope, EFResizeHandleType, EFZoomDirection, EMPTY_REFLOW_PLAN, EdgeBasedDeltaCalculator, EmitConnectionsChanges, EmitConnectionsChangesRequest, EmitEndDragSequenceEvent, EmitEndDragSequenceEventRequest, EmitSelectionChangeEvent, EmitSelectionChangeEventRequest, EmitStartDragSequenceEvent, EmitStartDragSequenceEventRequest, EnsureConnectionWorker, EnsureConnectionWorkerRequest, EventExtensions, ExternalRectConstraint, FA11yAnnouncer, FA11yController, FAutoPan, FAutoPanBase, FBackgroundBase, FBackgroundComponent, FCache, FCacheConnector, FCacheConnectorKeyFactory, FCacheNode, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FChannel, FChannelHub, FCirclePatternComponent, FClickConnectFlow, FComponentsStore, FConnectionBase, FConnectionComponent, FConnectionComponentsParent, FConnectionContent, FConnectionContentBase, FConnectionDragHandleBase, FConnectionDragHandleEnd, FConnectionDragHandleStart, FConnectionForCreateComponent, FConnectionGradient, FConnectionGradientBase, FConnectionGradientRenderer, FConnectionGradientRendererBase, FConnectionMarker, FConnectionMarkerArrow, FConnectionMarkerBase, FConnectionMarkerCircle, FConnectionMarkerRegistry, FConnectionPath, FConnectionPathBase, FConnectionRegistry, FConnectionSelection, FConnectionSelectionBase, FConnectionWaypoints, FConnectionWaypointsBase, FConnectionWaypointsChangedEvent, FConnectorBase, FConnectorDirective, FConnectorRegistry, FControlSchemeController, FCreateConnectionEvent, FCreateConnectionSession, FCreateNodeEvent, FDeleteSelectedEvent, FDragBlockerDirective, FDragExternalItemStartEventData, FDragHandleDirective, FDragHandlerResult, FDragNodeStartEventData, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItem, FExternalItemBase, FExternalItemPlaceholder, FExternalItemPreview, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FFlowState, FFlowStateController, FGroupDirective, FIdRegistryBase, FLayoutController, FLayoutEngine, FLineAlignmentComponent, FMagneticLines, FMagneticLinesBase, FMagneticRects, FMagneticRectsBase, FMinimapBase, FMinimapCanvasDirective, FMinimapComponent, FMinimapFlowDirective, FMinimapState, FMinimapViewDirective, FMoveNodesEvent, FNodeBase, FNodeConnectionsIntersectionEvent, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeRegistry, FReassignConnectionEvent, FRectPatternComponent, FReflowBaselineTracker, FReflowController, FReflowCycleGuard, FReflowIgnore, FReflowIgnoreRegistry, FReflowOrchestrator, FReflowPlanner, FResizeChannel, FResizeHandleDirective, FResizeNodeStartEventData, FRotateHandleDirective, FRotateNodeStartEventData, FSelectionArea, FSelectionAreaBase, FSelectionChangeEvent, FSingleRegistryBase, FSnapConnectionComponent, FSnapTargetChangeEvent, FSourceConnectorBase, FVirtualFor, FZoomBase, FZoomDirective, F_A11Y_CONFIG, F_AUTO_PAN_PROVIDERS, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CACHE_FEATURES, F_CACHE_OPTIONS, F_CANVAS, F_CANVAS_CONFIG, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_COMPONENTS_PARENT, F_CONNECTION_CONTENT, F_CONNECTION_DRAG_HANDLE_END, F_CONNECTION_DRAG_HANDLE_START, F_CONNECTION_FEATURES, F_CONNECTION_FLOW, F_CONNECTION_GRADIENT, F_CONNECTION_IMPORTS_EXPORTS, F_CONNECTION_MARKER, F_CONNECTION_PATH, F_CONNECTION_PROVIDERS, F_CONNECTION_SELECTION, F_CONNECTION_WAYPOINTS, F_CONNECTOR, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CONTROL_SCHEME_CONFIG, F_CSS_CLASS, F_DEFAULT_A11Y_CONFIG, F_DEFAULT_A11Y_KEYS, F_DEFAULT_A11Y_MESSAGES, F_DEFAULT_CONTROL_SCHEME, F_DEFAULT_LAYER_ORDER, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_DRAG_SELECT_CONTROL_SCHEME, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_CONFIG, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_FLOW_STATE_CONFIG, F_LAYOUT, F_LAYOUT_OPTIONS, F_LINE_ALIGNMENT_PROVIDERS, F_MAGNETIC_LINES, F_MAGNETIC_LINES_PROVIDERS, F_MAGNETIC_RECTS, F_MAGNETIC_RECTS_PROVIDERS, F_MINIMAP_BASE, F_MINIMAP_FEATURES, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_REFLOW_CONFIG, F_REFLOW_PROVIDERS, F_SCROLL_PAN_CONTROL_SCHEME, F_SELECTED_CLASS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_VIRTUAL_FOR_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, FindConnectableConnectorUsingPriorityAndPosition, FindConnectableConnectorUsingPriorityAndPositionRequest, FitToChildNodesAndGroups, FitToChildNodesAndGroupsRequest, FitToFlow, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetCachedFCacheRect, GetCachedFCacheRectRequest, GetChildNodeIds, GetChildNodeIdsRequest, GetConnectorRectReference, GetConnectorRectReferenceRequest, GetCurrentSelection, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroups, GetDeepChildrenNodesAndGroupsRequest, GetFlow, GetFlowRequest, GetNodePadding, GetNodePaddingRequest, GetNormalizedConnectorRect, GetNormalizedConnectorRectRequest, GetNormalizedElementRect, GetNormalizedElementRectRequest, GetNormalizedParentNodeRect, GetNormalizedParentNodeRectRequest, GetNormalizedPoint, GetNormalizedPointRequest, GetParentNodes, GetParentNodesRequest, GlobalScopeFilter, GridSnapper, GroupScopeFilter, HandleConnectionWorkerMessage, HandleConnectionWorkerMessageRequest, IMouseEvent, INSTANCES, IPointerEvent, IPointerUpEvent, ITouchDownEvent, ITouchMoveEvent, InitializeDragSequence, InitializeDragSequenceRequest, InputCanvasPosition, InputCanvasPositionRequest, InputCanvasScale, InputCanvasScaleRequest, InvalidateFCacheNode, InvalidateFCacheNodeRequest, IsArrayHasParentNode, IsArrayHasParentNodeRequest, IsConnectionRedrawCurrent, IsConnectionRedrawCurrentRequest, IsConnectionWorkerEnabled, IsConnectionWorkerEnabledRequest, IsDragStarted, IsDragStartedRequest, ListenConnectionsChanges, ListenConnectionsChangesRequest, ListenNodesChanges, ListenNodesChangesRequest, ListenTransformChanges, ListenTransformChangesRequest, LogExecutionTime, MOUSE_EVENT_IGNORE_TIME, MagneticLineElement, MagneticLineRenderer, MagneticLinesHandler, MagneticLinesPreparation, MagneticLinesPreparationRequest, MagneticRectElement, MagneticRectsHandler, MagneticRectsPreparation, MagneticRectsPreparationRequest, MagneticRectsRenderer, MarkConnectableConnectors, MarkConnectableConnectorsRequest, MarkConnectionConnectorsAsConnected, MarkConnectionConnectorsAsConnectedRequest, MinimapCalculateViewRect, MinimapCalculateViewRectRequest, MinimapCalculateViewport, MinimapCalculateViewportRequest, MinimapDrawNodes, MinimapDrawNodesRequest, MinimapNodeRects, MoveFrontElementsBeforeTargetElement, MoveFrontElementsBeforeTargetElementRequest, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NODE_ROTATE_PROVIDERS, NotifyFullRendered, NotifyFullRenderedRequest, NotifyNodesRendered, NotifyNodesRenderedRequest, NotifyTransformChanged, NotifyTransformChangedRequest, OnPointerMove, OnPointerMoveRequest, PINCH_TO_ZOOM_PROVIDERS, PinchToZoomFinalize, PinchToZoomFinalizeRequest, PinchToZoomHandler, PinchToZoomPreparation, PinchToZoomPreparationRequest, Polyline, PolylineContentAlign, PolylineContentPlace, PolylineSampler, PrepareDragSequence, PrepareDragSequenceRequest, PreventDefaultIsExternalItem, PreventDefaultIsExternalItemRequest, QueueConnectionRedraw, QueueConnectionRedrawRequest, QueueConnectionRedrawState, RESIZE_DIRECTIONS, RESIZE_NODE_HANDLER_KIND, RESIZE_NODE_HANDLER_TYPE, ROTATE_NODE_HANDLER_KIND, ROTATE_NODE_HANDLER_TYPE, ReadNodeBoundsWithPaddings, ReadNodeBoundsWithPaddingsRequest, ReadNodeBoundsWithPaddingsResponse, ReassignConnectionFinalize, ReassignConnectionFinalizeRequest, ReassignConnectionHandler, ReassignConnectionPreparation, ReassignConnectionPreparationRequest, ReassignConnectionSourceHandler, ReassignConnectionTargetHandler, RedrawCanvasWithAnimation, RedrawCanvasWithAnimationRequest, RedrawConnections, RedrawConnectionsRequest, RegisterFCacheConnector, RegisterFCacheConnectorRequest, RegisterFCacheNode, RegisterFCacheNodeRequest, RegisterPluginInstance, RegisterPluginInstanceRequest, RemoveCanvasFromStore, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStore, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStore, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStore, RemoveConnectionMarkerFromStoreRequest, RemoveConnectionWaypoint, RemoveConnectionWaypointRequest, RemoveConnectorFromStore, RemoveConnectorFromStoreRequest, RemoveDndFromStore, RemoveDndFromStoreRequest, RemoveFlowFromStore, RemoveFlowFromStoreRequest, RemoveNodeFromStore, RemoveNodeFromStoreRequest, RemovePluginInstance, RemovePluginInstanceRequest, RemoveSnapConnectionFromStore, RemoveSnapConnectionFromStoreRequest, RenderConnection, RenderConnectionFromGeometry, RenderConnectionFromGeometryRequest, RenderConnectionRequest, RenderConnectionWithLine, RenderConnectionWithLineRequest, RenderLifecycleState, ResetConnectionWorkerRuntime, ResetConnectionWorkerRuntimeRequest, ResetRenderLifecycle, ResetRenderLifecycleRequest, ResetScale, ResetScaleAndCenter, ResetScaleAndCenterRequest, ResetScaleRequest, ResetZoom, ResetZoomRequest, ResizeNodeConnectionBothSidesHandler, ResizeNodeConnectionHandlerBase, ResizeNodeConnectionSourceHandler, ResizeNodeConnectionTargetHandler, ResizeNodeFinalize, ResizeNodeFinalizeRequest, ResizeNodeHandler, ResizeNodePreparation, ResizeNodePreparationRequest, ResolveConnectableOutputForOutlet, ResolveConnectableOutputForOutletRequest, ResolveConnectionEndpointRect, ResolveConnectionEndpointRectRequest, ResolveConnectionEndpointRotationContext, ResolveConnectionEndpointRotationContextRequest, ResolveConnectionEndpoints, ResolveConnectionEndpointsRequest, ResolveConnectionGeometry, ResolveConnectionGeometryRequest, RotateNodeFinalize, RotateNodeFinalizeRequest, RotateNodeHandler, RotateNodePreparation, RotateNodePreparationRequest, RunAutoPanFrame, RunAutoPanFrameRequest, RunConnectionRedrawSlice, RunConnectionRedrawSliceRequest, RunConnectionWorker, RunConnectionWorkerBatch, RunConnectionWorkerBatchRequest, RunConnectionWorkerRequest, RunDevDiagnostics, RunDevDiagnosticsRequest, ScheduleAutoPanFrame, ScheduleAutoPanFrameRequest, ScrollCanvas, ScrollCanvasRequest, Select, SelectAll, SelectAllRequest, SelectAndUpdateNodeLayer, SelectAndUpdateNodeLayerRequest, SelectByPointer, SelectByPointerRequest, SelectRequest, SelectionAreaFinalize, SelectionAreaFinalizeRequest, SelectionAreaHandler, SelectionAreaPreparation, SelectionAreaPreparationRequest, SetBackgroundTransform, SetBackgroundTransformRequest, SetFCacheConnectorRect, SetFCacheConnectorRectRequest, SetFCacheNodeRect, SetFCacheNodeRectRequest, SetZoom, SetZoomRequest, ShouldUseConnectionWorker, ShouldUseConnectionWorkerRequest, SortDropCandidatesByLayer, SortDropCandidatesByLayerRequest, SortItemLayers, SortItemLayersRequest, SortItemsByParent, SortItemsByParentRequest, SortNodeLayers, SortNodeLayersRequest, StartConnectionRedraw, StartConnectionRedrawRequest, StartConnectionWorkerRedraw, StartConnectionWorkerRedrawRequest, StopAutoPan, StopAutoPanRequest, StopCollisionResolver, UnmarkConnectableConnectors, UnmarkConnectableConnectorsRequest, UnregisterFCacheConnector, UnregisterFCacheConnectorRequest, UnregisterFCacheNode, UnregisterFCacheNodeRequest, UpdateFCacheRectByElement, UpdateFCacheRectByElementRequest, UpdateItemAndChildrenLayers, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChanged, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScale, UpdateScaleRequest, WaitForConnectionsRendered, WaitForConnectionsRenderedRequest, XRangeSelectionStrategy, afterNextPaint, buildConnectionAnchors, buildCornerMidPointsAndApplyOffsets, calculateAutoPanAxisDelta, calculateAutoPanDelta, calculateCenterBetweenPoints, calculateCornerApex, calculateCurveCandidates, calculateDifferenceAfterRotation, calculateMagneticGuides, calculateMagneticRects, calculatePointerInFlow, calculatePolylineCandidates, calculatePositionAfterRotation, calculateSmoothControlPoint, castToConnectorType, coerceMarkerType, computeEdgeDeltas, createConnectionDomIdentifier, createConnectionSelectionDomIdentifier, createConnectionWorkerUrl, createGradientDomIdentifier, createGradientDomUrl, createMultiCubicPath, createSVGElement, createSegmentLinePath, cubicBezierAtT, debounceAnimationFrame, debounceMicrotask, debounceTime, defaultEventTrigger, determineSide, expandRectByOverflow, fDiagnosticMessage, fInstanceKey, fProvideCache, fSuppressDevWarnings, fWarnOnce, filterConnectableTargets, findExistingWaypoint, findNodeOrGroupContaining, findSourceConnector, findSpatialNeighbor, findTargetConnector, findWaypointCandidate, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getAllSourceConnectors, getAllTargetConnectors, getExternalItemHost, infinityMinMax, injectFlowState, isCalculateMode, isConnectionWorkerRuntimeSupported, isConnector, isDragBlocker, isDragExternalItemHandler, isDragHandleEnd, isDragHandleStart, isDragMinimapHandler, isDragNodeHandler, isExternalItem, isFDevMode, isMobile, isNode, isNodeOutlet, isNodeOutput, isOnFlowBackground, isOutletConnector, isPointerInsidePoint, isPointerInsideStartOrEndDragHandles, isResizeNodeHandler, isRotateHandle, isRotateNodeHandler, isSourceConnector, isTargetConnector, isValidEventTrigger, mergeA11yConfig, mergeControlSchemeConfig, mergeFCanvasConfig, mergeFlowStateConfig, mergeLayoutNodes, mergePointChains, mergeReflowConfig, middleButtonEventTrigger, mixinChangeSelection, mixinChangeVisibility, normalizeFlowLayoutData, normalizePolyline, notifyOnStart, pickWaypoint, primaryButtonEventTrigger, provideFFlow, provideFLayout, rebaseAutoPanPointerDownPosition, rectFromPoint, requireSourceConnector, requireTargetConnector, resolveAutoPanMode, resolveConnectionWorkerRuntime, resolveLayerOrder, revokeConnectionWorkerUrl, sampleCubicBezierUniform, sampleMultiCubicUniform, stringAttribute, takeOne, transitionEnd, withA11y, withConnectionFlow, withControlScheme, withFCanvas, withFlowState, withReflowOnResize, withinSnapThreshold };
 //# sourceMappingURL=foblex-flow.mjs.map