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
UpdatedDrag to Connect
Drag 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
UpdatedConnection Waypoints
NewConnection Gradients
UpdatedConnection Connectable Side
NewAuto Pan
NewAdd Node from Palette
Selection Area
Help in Positioning (Legacy)
DeprecatedMagnetic Lines
NewMagnetic Rects
NewGrid System
Minimap
Zoom
Background
Dagre Layout
NewDagre Auto Layout
NewELK.js Layout
NewELK.js Auto Layout
NewLarge Scene Performance
Connection Redraw Performance
UpdatedCut/Copy/Paste
Undo/Redo
Undo/Redo V2
Drag Start/End Events
Custom Event Triggers
AI Low-Code Platform
UpdatedSchema Designer
UpdatedCall Center Flow
UpdatedUML Diagram
UpdatedTournament Bracket
UpdatedFoblex 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.