feat: add custom path connection type with control points

[Copilot]

Enables user-defined connection paths via control points for industrial diagrams (P&ID, circuit diagrams, process flows) where automatic routing is insufficient.

Changes

• New connection type: Added CUSTOM_PATH to EFConnectionType enum
• Path builder: FCustomPathBuilder renders paths through arbitrary control points with configurable rounded corners via quadratic bezier curves
• API extension: Added optional controlPoints?: IPoint[] to IFConnectionBuilderRequest and fControlPoints input to all connection components
• Example: custom-path-control-points component demonstrates L-shaped, Z-shaped, and multi-segment paths

Usage

<f-connection
  fType="custom-path"
  fOutputId="output1"
  fInputId="input1"
  [fControlPoints]="[
    { x: 150, y: 50 },
    { x: 150, y: 100 }
  ]"
  [fRadius]="8"
>
</f-connection>

export class DiagramComponent {
  // Define path programmatically
  controlPoints = [
    { x: 100, y: 50 },
    { x: 100, y: 100 },
    { x: 200, y: 100 }
  ];
}

Backward compatible - existing connection types unchanged.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• download.cypress.io
  • Triggering command: node index.js --exec install (dns block)
• fonts.googleapis.com
  • Triggering command: ng build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature]: user-defined path of connections</issue_title>
<issue_description>### Describe the Feature

Is it planned to have a kind of custom connection type that the path of the connection can be defined by the user by multipe draggable handles on each polygon point of a line?

What problem does it solve?

For diagrams in the industrial context like P&ID diagrams, circuit diagrams or process flow diagrams it would be helpful to position the connection paths manually / programmatically.

Have you considered any alternatives?

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

@siarheihuzarevich Thanks for the suggestion! We do have plans to support customizable connection paths (with draggable control points), but this won’t be included in the very next release. The approximate timeline for this feature is around four months. Once we have a more concrete estimate, I’ll update this issue.

Also, if this feature is important for your workflow, please describe how you imagine the UX?

Your input will help us make the final implementation more user-friendly 🙌

And if you like the library, please consider giving it a ⭐️ — it really helps support the project! :)</comment_new>

• Fixes [Feature]: user-defined path of connections #249

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[siarheihuzarevich]

Implement drag and drop logic for this points similar to dnd features inside library

[Copilot]

Pull Request Overview

This PR adds support for custom connection paths with user-defined control points, addressing the need for manual path routing in industrial diagrams (P&ID, circuit diagrams, process flows).

• Added CUSTOM_PATH enum value and FCustomPathBuilder class to render paths through arbitrary control points with rounded corners
• Extended connection API with fControlPoints input across all connection components
• Included comprehensive example demonstrating L-shaped, Z-shaped, and multi-segment industrial-style paths

Reviewed Changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/app/examples.config.ts	Registers new example component with metadata
public/markdown/examples/custom-path-control-points.md	Documentation for custom path feature with usage examples
projects/f-flow/src/f-connection/f-snap-connection/f-snap-connection.component.ts	Adds fControlPoints property to snap connection
projects/f-flow/src/f-connection/f-connection/f-connection.component.ts	Adds @Input() fControlPoints to main connection component
projects/f-flow/src/f-connection/f-connection-for-create/f-connection-for-create.component.ts	Adds fControlPoints property to connection creation component
projects/f-flow/src/f-connection/f-connection-builder/i-f-connection-builder-request.ts	Extends interface with optional controlPoints field
projects/f-flow/src/f-connection/f-connection-builder/f-connection-factory.ts	Registers FCustomPathBuilder for CUSTOM_PATH type
projects/f-flow/src/f-connection/common/f-connection-base.ts	Adds abstract fControlPoints property and passes to builder
projects/f-flow/src/f-connection/common/e-f-connection-type.ts	Adds CUSTOM_PATH enum value
projects/f-flow/src/f-connection/common/domain/index.ts	Exports new FCustomPathBuilder
projects/f-flow/src/f-connection/common/domain/f-custom-path.builder.ts	Core implementation of custom path rendering with bezier curves
projects/f-flow/src/f-connection/common/domain/f-custom-path.builder.spec.ts	Comprehensive unit tests for path builder
projects/f-examples/connections/custom-path-control-points/custom-path-control-points.component.ts	Example component with three path patterns
projects/f-examples/connections/custom-path-control-points/custom-path-control-points.component.scss	Styling for example component
projects/f-examples/connections/custom-path-control-points/custom-path-control-points.component.html	Template demonstrating custom paths

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The fControlPoints property should be decorated with @Input() to allow parent components to bind values. The main FConnectionComponent uses @Input() for this property (line 72-73), but FSnapConnectionComponent is missing this decorator.

Suggested change

	@Input()

[Copilot]

The fControlPoints property should be decorated with @Input() to allow parent components to bind values. The main FConnectionComponent uses @Input() for this property (line 72-73), but FConnectionForCreateComponent is missing this decorator.

Suggested change

	@Input()

[Copilot]

The magic number 0.0002 lacks explanation for why this specific value is needed for proper rendering. Consider extracting this to a named constant with a comment explaining the technical reason (e.g., RENDERING_OFFSET = 0.0002 // Prevents SVG rendering artifacts at path endpoints).

[Copilot]

The index parameter is unused in this method. Consider removing it or adding a comment explaining why it's kept for consistency with other segment builders.

Suggested change

	private _buildLastLineSegment(index: number, point: IPoint): string {
	private _buildLastLineSegment(point: IPoint): string {