HTMLGraph | Layouts

Layouts

To enable automatic node positioning using a layout algorithm, call the enableLayout method on CanvasBuilder.

    
const element = document.getElementById(&#34;canvas&#34;);

const canvas = new CanvasBuilder(element)
  .enableLayout()
  .build();

As shown below, coordinates are calculated automatically and do not need to be specified explicitly when calling the addNode method.

    
const element = document.createElement(&#39;div&#39;);

canvas.addNode({
  id: &#34;node-1&#34;,
  element: element,
  ports: [
    { id: &#34;node-1&#34;, element: element }
  ],
});

The enableLayout method accepts optional configuration parameters:

    
const element = document.getElementById(&#34;canvas&#34;);

const canvas = new CanvasBuilder(element)
  .enableLayout({
    algorithm: {
      type: &#34;forceDirected&#34;,
    },
    applyOn: &#34;topologyChangeMicrotask&#34;,
    staticNodeResolver: (nodeId) =&gt; false,
    events: {
      onBeforeApplied: () =&gt; {
        console.log(&#34;Layout is about to be applied&#34;);
      },
      onAfterApplied: () =&gt; {
        console.log(&#34;Layout has been applied&#34;);
      },
    },
  })
  .build();

Configuration Parameters

Name	Type	Description	Required	Default
`algorithm`	`AlgorithmConfig`	Specifies the layout algorithm to apply	no	`{ type: "forceDirected" }`
`applyOn`	`Trigger`	Specifies when to apply the algorithm	no	`{ type: "topologyChangeMicrotask" }`
`staticNodeResolver`	`(nodeId) => boolean`	Function that determines whether a node is static	no	`() => false`
`events`	`EventsConfig`	Handlers for available events	no	`{}`

`AlgorithmConfig` Options

Algorithm	Configuration	Example
ForceDirected	ForceDirected	`{ type: "forceDirected" }`
Hierarchical	Hierarchical	`{ type: "hierarchical" }`
Custom	Custom	`{ type: "custom", instance: new MyAlgorithm() }`

Trigger strategies

Strategy	Description	Example
TopologyChangeMicrotask	Layout is recalculated when the graph topology changes. Calculation occurs in the next microtask, allowing intensive layout computations to run after all nodes and edges have been added.	`{ type: "topologyChangeMicrotask" }`
TopologyChangeMacrotask	Layout is recalculated when the graph topology changes. Calculation occurs in the next macrotask, allowing intensive layout computations to run after all nodes and edges have been added.	`{ type: "topologyChangeMacrotask" }`
Manual	Layout is recalculated when the `emit` method is called on the provided `EventSubject` instance, as shown in the example below.	`new EventSubject()`

Manual Layout Trigger

    
import { CanvasBuilder, EventSubject } from &#34;@html-graph/html-graph&#34;;

const element = document.getElementById(&#34;canvas&#34;);
const trigger = new EventSubject();

const canvas = new CanvasBuilder(element)
  .enableLayout({
    applyOn: trigger,
  })
  .build();

// Add all nodes and edges here

// Then trigger the layout calculation
trigger.emit();

Events Configuration