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 Gradients
UpdatedConnection Waypoints
NewConnection Connectable Side
NewMinimap
Zoom
Background
Auto Pan
NewCanvas Layer Ordering
NewSelection Area
Magnetic Lines
NewMagnetic Rects
NewGrid System
Add Node from Palette
Help in Positioning (Legacy)
DeprecatedDagre Layout
NewDagre Auto Layout
NewELK.js Layout
NewELK.js Auto Layout
NewReflow on Resize
NewCut/Copy/Paste
Undo/Redo
Undo/Redo V2
Drag Start/End Events
Custom Event Triggers
Large Scene Performance
Connection Redraw Performance
UpdatedAI 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.