HTMLGraph
Star

Animated Layouts

Iterative layout algorithms allow visualizing intermediate results while calculations are ongoing. Users can observe the evolving graph layout in real-time without having to wait until all nodes have reached their final positions.

To enable animated nodes positioning, call the enableAnimatedLayout method on CanvasBuilder.

    
const element = document.getElementById("canvas");

const canvas = new CanvasBuilder(element)
  .enableAnimatedLayout()
  .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('div');

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

  
The enableAnimatedLayout method accepts optional configuration parameters:
    
const element = document.getElementById("canvas");

const canvas = new CanvasBuilder(element)
  .enableAnimatedLayout({
    algorithm: {
      type: "forceDirected",
    },
    staticNodeResolver: (nodeId) => false,
    events: {
      onBeforeApplied: () => {
        console.log("Layout is about to be applied");
      },
      onAfterApplied: () => {
        console.log("Layout has been applied");
      },
    },
  })
  .build();

  
Configuration Parameters
NameTypeDescriptionRequiredDefault
algorithmAlgorithmConfigSpecifies the layout algorithm to applyno{ type: "forceDirected" }
staticNodeResolver(nodeId) => booleanFunction that determines whether a node is staticno() => false
eventsEventsConfigHandlers for available eventsno{}
AlgorithmConfig Options
AlgorithmConfigurationExample
ForceDirectedForceDirected{ type: "forceDirected" }
CustomCustom{ type: "custom", instance: new MyAlgorithm() }
Events Configuration
NameTypeDescriptionRequiredDefault
onBeforeApplied() => voidFunction to call before layout appliedNo() => {}
onAfterApplied() => voidFunction to call after layout has been appliedNo() => {}