ForceDirectedLayoutAlgorithm

Import it from @grafloria/engine.

Also has every member of BaseLayoutAlgorithm, listed on its own entry.

Physics-based layout where:

Nodes repel each other (like magnets with same poles)
Connected nodes attract each other (like springs)
System settles into equilibrium over iterations

Best for:

Network diagrams
Social graphs
Relationship visualizations
Organic, natural-looking layouts

ts
class ForceDirectedLayoutAlgorithm extends BaseLayoutAlgorithm implements ILayoutAlgorithm

Methods

constructor(options?: ForceDirectedOptions)
getName(): string — Get the name of the layout algorithm
getType(): 'force-directed' — Get the type of the layout algorithm
override configure(config: LayoutConfiguration): void — Configure the layout algorithm
override getConfiguration(): LayoutConfiguration — Get current configuration
override canApply(diagram: DiagramModel): { valid: boolean; reason?: string } — Validate if this algorithm can be applied to the given diagram

For example:

Hierarchical layout requires a DAG (no cycles)
Force-directed works better with connected nodes
calculatePlacement(options: PlacementOptions): PlacementResult — Calculate position for a single new node

This is called when a node is added to the diagram. The algorithm should return a position that:

Doesn't overlap with existing nodes
Follows the layout strategy
Fits within the viewport (or is close to existing content)
reLayout(diagram: DiagramModel, config?: LayoutConfiguration): Map<string, Point> — Re-layout all nodes in the diagram

This is called when the user explicitly requests a re-layout (e.g., clicks "Re-Arrange" button). The algorithm should calculate new positions for ALL nodes.

onActivate(): void — Called when the algorithm is activated Use this to initialize any state or caches
onDeactivate(): void — Called when the algorithm is deactivated Use this to clean up state or caches

Was this page helpful?