Modules

HTMLGraph extends its functionality through optional modules, 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 shift and zoom
  .enableUserDraggableNodes() // Allows dragging nodes
  .enableBackground() // Renders a customizable background
  .build();

  

Here is an overview of all available modules:

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.

Virtual Scroll

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

Responsive Nodes

Automatically maintain edge connections when nodes are resized.

Box Area Rendering

Advanced control for virtual scrolling with precise rendering regions.