Undirected

CustomizationSelectable connectionsConnection path

This example demonstrates several essential features:

• Round nodes
• Selectable connections
• Unified port for connections
• Removal of connections with a designated button located in the middle of the path
• Connections represented by straight lines and loops with markers at the end

The classic preset is used for rendering, which involves splitting into input and output ports, but in this case, a trick is employed to pack them into a single unified socket, represented by a transparent circle slightly larger in radius than its node. Custom components are used to represent the nodes and connections. The rete-connection-path-plugin plugin is used for setting up connection path and marker. Instead of getDOMSocketPosition, a custom socket position calculator is used to ensure that the beginning and end of the connection coincide with the node's border.

Approximately 50% of the example's source code relies on the stack and is available for React.js and Angular. If you're using a different stack, you can migrate the necessary components by referencing the source code or request their implementation through GitHub Issues in the appropriate repository.