HTMLGraph | Box Area Rendering

Box Area Rendering

Instead of relying on the built-in virtual scroll, you can fine-tune your own virtual scroll implementation. This can be achieved by providing an EventSubject trigger for graph rendering within a bounded area using the enableBoxAreaRendering method of CanvasBuilder.

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

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

const canvas = new CanvasBuilder()
  .setElement(element)
  .enableBoxAreaRendering(trigger)
  .build();

You can then trigger rendering within a specific bounded area:

    
trigger.emit({ x: 100, y: 100, width: 1200, height: 1200 });

EventSubject

EventSubject is a straightforward implementation of the Observer pattern.

EventSubject<T> provides the following methods:

Name	Arguments	Description
`subscribe`	`function (payload: T) => void`	Adds a function to call on `emit`
`unsubscribe`	`function (payload: T) => void`	Removes a function to call on `emit`
`emit`	`T`	Calls all subscribed callbacks

When a box rendering trigger is specified, it becomes your responsibility to initiate rendering (unless you use the built-in virtual scroll).

Box Area Rendering