Foblex Flow
Overview
Custom Nodes
Drag Handle
Node Selection
Resize Handle
Rotate Handle
Grouping
Drag to Group
Node as Connector
Connector Inside Node
Connector Outlet
Limiting Connections
Connection Rules
Connectable Side
Drag to Connect
Click to Connect
NewDrag to Reassign
Create Node on Connection Drop
Remove Connection on Drop
Assign Node to Connection on Drop
Auto Snap
Connection Types (Straight, Segment, Bezier, Adaptive Curve)
Custom Connection Type
Connection Behaviours
Connection Markers
Connection Content
Connection Gradients
Connection Waypoints
Connection Connectable Side
Minimap
Zoom
Background
Auto Pan
NewCanvas Layer Ordering
NewSelection Area
Magnetic Lines
Magnetic Rects
Grid System
Add Node from Palette
Accessibility
NewHelp in Positioning (Legacy)
DeprecatedDagre Layout
Dagre Auto Layout
ELK.js Layout
ELK.js Auto Layout
Reflow on Resize
Cut/Copy/Paste
Undo/Redo
Undo/Redo V2
Drag Start/End Events
Custom Event Triggers
Control Schemes
NewLarge Scene Performance
Connection Redraw Performance
AI Low-Code Platform
Schema Designer
Call Center Flow
UML Diagram
Tournament Bracket
Foblex Flow
Connection Connectable Side
Description
Control which side an individual connection uses at both ends instead of relying only on connector defaults. Use this when routing should stay predictable, or when a specific edge needs to override the usual node-side behavior.
Example
[example.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/connections/connection-connectable-side/example.html [example.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/connections/connection-connectable-side/example.ts [example.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/connections/connection-connectable-side/example.scss
Supported modes
- Set explicit sides such as
LEFT,RIGHT,TOP, orBOTTOM. - Use
CALCULATE,CALCULATE_HORIZONTAL, orCALCULATE_VERTICALwhen the route should adapt to node positions. - Configure the side independently for the output and input of each connection.
Why it matters
- Manual mode helps when the route itself carries meaning and should not jump around.
- Calculated modes are useful when layouts are dynamic but still need cleaner edge directions.
- Connection-side settings take precedence over connector-side settings, so they are the stronger routing control.