Module: components/Canvas/Connection

Renders a single connection (edge) between two workflow nodes in the AutoRA Workflow Editor. Contains the orthogonal auto-routing engine that chooses optimal source/target ports and computes an SVG path that avoids overlapping nodes and other connections.
Source:

Methods

(inner) Connection(props) → {JSX.Element}

Renders a single connection between two nodes as an auto-routed orthogonal SVG path, with an invisible wide hit-area for easier selection, endpoint dots, and an arrowhead. Recomputes the optimal route (memoized) and notifies the parent when the chosen ports differ from the connection's stored points.
Parameters:
Name Type Description
props Object
Properties
Name Type Description
connection Object The connection data (id, sourceId, targetId, optional sourcePoint/targetPoint).
sourceNode Object The source node.
targetNode Object The target node.
allNodes Array.<Object> All nodes in the workflow, used for routing/collision.
allConnections Array.<Object> All connections, used for crossing/occupancy checks.
isSelected boolean Whether this connection is currently selected.
onSelect function Called with the connection id when the connection is clicked.
onPortsChanged function Called with (id, sourcePoint, targetPoint) when routing selects new ports.
Source:
Returns:
Type
JSX.Element

(inner) buildOrthogonalPath(x1, y1, x2, y2, sourceDir, targetDir, nodes, connections, currentConnectionId) → {string}

Legacy single-route builder kept for backward compatibility: generates candidate paths for fixed source/target points and directions, then returns the best-scoring one as an SVG path string (without alternative port selection).
Parameters:
Name Type Description
x1 number Source point x.
y1 number Source point y.
x2 number Target point x.
y2 number Target point y.
sourceDir Object Outward direction of the source port.
targetDir Object Outward direction of the target port.
nodes Array.<Object> All nodes in the workflow.
connections Array.<Object> All connections in the workflow.
currentConnectionId string Id of the connection being routed.
Source:
Returns:
The best-scoring SVG path "d" string.
Type
string

(inner) buildOrthogonalPathWithPortSelection(originalSourcePort, originalTargetPort, sourceNode, targetNode, nodes, connections, currentConnectionId) → {Object}

The primary routing engine. Considers the original ports plus available alternative source/target ports, generates candidate paths for each combination, scores them, and returns the lowest-cost path together with the ports that produced it.
Parameters:
Name Type Description
originalSourcePort Object The connection's current source point.
originalTargetPort Object The connection's current target point.
sourceNode Object The source node.
targetNode Object The target node.
nodes Array.<Object> All nodes in the workflow.
connections Array.<Object> All connections in the workflow.
currentConnectionId string Id of the connection being routed.
Source:
Returns:
The best SVG path string and the chosen source/target ports.
Type
Object

(inner) cleanPath(points) → {string}

Converts a list of points into an SVG path string, removing duplicate points and collapsing consecutive collinear (same horizontal or vertical) segments.
Parameters:
Name Type Description
points Array.<Array.<number>> Ordered list of [x, y] points.
Source:
Returns:
An SVG path "d" attribute string.
Type
string

(inner) findPortId(node, point, ports) → {string}

Finds the id of the port nearest to a given point (by Euclidean distance).
Parameters:
Name Type Description
node Object The node owning the ports (unused for the lookup itself).
point Object The reference point.
ports Array.<{id: string, x: number, y: number}> Candidate ports.
Source:
Returns:
The id of the closest port.
Type
string

(inner) generatePathOptions(x1, y1, x2, y2, sourceDir, targetDir, nodes) → {Array.<Array.<Array.<number>>>}

Generates a set of candidate orthogonal routes between a source and target point, trying several stub lengths and routing strategies (direct, mid-split, and detours around the top/bottom/left/right extents of all nodes) depending on port orientation.
Parameters:
Name Type Description
x1 number Source point x.
y1 number Source point y.
x2 number Target point x.
y2 number Target point y.
sourceDir Object Outward direction of the source port.
targetDir Object Outward direction of the target port.
nodes Array.<Object> All nodes, used to compute detour extents.
Source:
Returns:
A list of candidate paths, each an ordered list of [x, y] points.
Type
Array.<Array.<Array.<number>>>

(inner) getAvailablePorts(node, connections, currentConnectionId, isSource) → {Array.<{id: string, x: number, y: number}>}

Returns the node's ports that are both the correct type for the requested role (output for source, input for target) and not already occupied by another connection.
Parameters:
Name Type Description
node Object The node whose ports are considered.
connections Array.<Object> All connections in the workflow.
currentConnectionId string Id of the connection being routed (ignored for occupancy).
isSource boolean True to find output (source) ports, false for input (target) ports.
Source:
Returns:
The available ports.
Type
Array.<{id: string, x: number, y: number}>

(inner) getExistingConnectionSegments(connections, currentConnectionId, allNodes) → {Array.<{x1: number, y1: number, x2: number, y2: number, connId: string}>}

Builds a list of straight-line segment approximations for all connections except the one currently being routed, resolving each connection's endpoints from its stored points or its nodes' default ports.
Parameters:
Name Type Description
connections Array.<Object> All connections in the workflow.
currentConnectionId string Id of the connection to exclude from the result.
allNodes Array.<Object> All nodes, used to resolve default port positions.
Source:
Returns:
Segment approximations.
Type
Array.<{x1: number, y1: number, x2: number, y2: number, connId: string}>

(inner) getNodeBounds(node, extraPaddingopt) → {Object}

Computes the padded bounding box of a node, sized according to its shape/type (diamond filter, control node, or standard node), for use in collision detection.
Parameters:
Name Type Attributes Default Description
node Object The node to measure.
Properties
Name Type Description
type string The node type (e.g. 'filter_point', 'start_point').
x number The node's x position.
y number The node's y position.
extraPadding number <optional>
 0 Additional padding to add beyond the default.
Source:
Returns:
The bounding box.
Type
Object

(inner) getPortDirection(portId) → {Object}

Returns the outward unit direction vector for a named port, used to build the initial stub of a routed path leaving/entering a node.
Parameters:
Name Type Description
portId string The port identifier ('top', 'bottom', 'left', or 'right').
Source:
Returns:
The outward direction vector (defaults to right).
Type
Object

(inner) isPortOccupied(nodeId, port, connections, currentConnectionId) → {boolean}

Determines whether a given port on a node is already used (within a small distance threshold) as the source or target of any connection other than the current one.
Parameters:
Name Type Description
nodeId string The id of the node owning the port.
port Object The port position to test.
connections Array.<Object> All connections in the workflow.
currentConnectionId string Id of the connection to ignore.
Source:
Returns:
True if the port is occupied by another connection.
Type
boolean

(inner) lineIntersectsRect(x1, y1, x2, y2, rect) → {boolean}

Checks whether a line segment crosses any of the four edges of a rectangle.
Parameters:
Name Type Description
x1 number Segment start x.
y1 number Segment start y.
x2 number Segment end x.
y2 number Segment end y.
rect Object The rectangle.
Source:
Returns:
True if the segment intersects any edge of the rectangle.
Type
boolean

(inner) pathCoincides(path, existingSegments, thresholdopt) → {boolean}

Detects whether a candidate path runs along (overlaps) an existing connection by comparing parallel horizontal or vertical segments that are close together and share a meaningful span of overlap.
Parameters:
Name Type Attributes Default Description
path Array.<Array.<number>> Ordered list of [x, y] points forming the path.
existingSegments Array.<{x1: number, y1: number, x2: number, y2: number}> Existing connection segments.
threshold number <optional>
 15 Max perpendicular distance to treat segments as coinciding.
Source:
Returns:
True if the path substantially overlaps an existing connection.
Type
boolean

(inner) pathCrossesConnections(path, existingSegments) → {boolean}

Checks whether any segment of a candidate path crosses any existing connection segment.
Parameters:
Name Type Description
path Array.<Array.<number>> Ordered list of [x, y] points forming the path.
existingSegments Array.<{x1: number, y1: number, x2: number, y2: number}> Existing connection segments.
Source:
Returns:
True if the path crosses an existing connection.
Type
boolean

(inner) scorePath(path, nodes, existingSegments, x1, y1, x2, y2) → {number}

Assigns a cost to a candidate path (lower is better): heavy penalties for crossing nodes, medium for crossing or coinciding with other connections, plus smaller costs proportional to total length and number of bends.
Parameters:
Name Type Description
path Array.<Array.<number>> Ordered list of [x, y] points forming the path.
nodes Array.<Object> All nodes, for collision checks.
existingSegments Array.<Object> Existing connection segments, for crossing/coincidence checks.
x1 number Source port x (allowed touch point).
y1 number Source port y (allowed touch point).
x2 number Target port x (allowed touch point).
y2 number Target port y (allowed touch point).
Source:
Returns:
The path score; lower values are preferred.
Type
number

(inner) segmentCrossesNodes(x1, y1, x2, y2, nodes, portX1, portY1, portX2, portY2) → {boolean}

Determines whether a routing segment passes through any node's padded bounds, while tolerating the segment legitimately touching a node at the exact port positions where the connection attaches.
Parameters:
Name Type Description
x1 number Segment start x.
y1 number Segment start y.
x2 number Segment end x.
y2 number Segment end y.
nodes Array.<Object> All nodes to test against.
portX1 number Source port x (allowed touch point).
portY1 number Source port y (allowed touch point).
portX2 number Target port x (allowed touch point).
portY2 number Target port y (allowed touch point).
Source:
Returns:
True if the segment improperly crosses a node.
Type
boolean

(inner) segmentsIntersect(x1, y1, x2, y2, x3, y3, x4, y4) → {boolean}

Determines whether two line segments (x1,y1)-(x2,y2) and (x3,y3)-(x4,y4) cross, using a slightly inset parametric test so endpoints that merely touch don't count.
Parameters:
Name Type Description
x1 number First segment start x.
y1 number First segment start y.
x2 number First segment end x.
y2 number First segment end y.
x3 number Second segment start x.
y3 number Second segment start y.
x4 number Second segment end x.
y4 number Second segment end y.
Source:
Returns:
True if the segments intersect (excluding near-endpoint touches).
Type
boolean