Features

HTMLGraph extends its functionality through optional features, which can be enabled by calling their respective methods on a CanvasBuilder instance.

CanvasBuilder uses a fluent interface, allowing methods to be chained for concise configuration. For example:

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

const canvas = new CanvasBuilder(element)
  .enableUserTransformableViewport() // Enables viewport pan and zoom
  .enableUserDraggableNodes() // Enables draggable nodes
  .enableBackground() // Renders background
  .build();

  

Here is an overview of all available features:

Transformable Viewport

Shift and zoom your graph using mouse or touch gestures for intuitive navigation.

Draggable Nodes

Easily reposition nodes by dragging them with mouse or touch gestures.

Background Rendering

Add customizable backgrounds that seamlessly work with the transformable viewport.

Connectable Ports

Create connections by dragging between ports, enabling dynamic graph editing.

Draggable Edges

Update existing connections by dragging adjacent ports, enabling dynamic graph editing.

Virtual Scroll

Optimize performance for large graphs with intelligent rendering of visible elements only.

Node Resize Reactive Edges

Automatically maintain edge connections when nodes are resized.