HTMLGraph | Features | Selectable Nodes

Selectable Nodes

To enable built-in selectable nodes, there are two CanvasBuilder configurations available:

enableUserSelectableNodes - when the user clicks inside a node
enableUserSelectableCanvas - when the user clicks outside of any node

Call them separately or both as needed.

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

const canvas = new CanvasBuilder(element)
  .enableUserSelectableNodes({
    onNodeSelected: (selectedNodeId) =&gt; {
      canvas.graph.getAllNodeIds().forEach((nodeId) =&gt; {
        const { element } = canvas.graph.getNode(nodeId);

        element.classList.toggle(&#34;selected&#34;, nodeId === selectedNodeId);
      });
    }
  })
  .enableUserSelectableCanvas({
    onCanvasSelected: () =&gt; {
      canvas.graph.getAllNodeIds().forEach((nodeId) =&gt; {
        const { element } = canvas.graph.getNode(nodeId);

        element.classList.remove(&#34;selected&#34;);
      });
    }
  })
  .build();

Both methods require a configuration object.

Selectable Nodes Configuration Parameters

Name	Type	Description	Required	Default
`onNodeSelected`	`(selectedNodeId) => void`	Function to call when node is selected	yes
`movementThreshold`	`number`	Specifies maximum cursor travel, when user actions can still be regarded as selection	no	`10`
`mouseDownEventVerifier`	`(event) => boolean`	Function to verify if mouse event should initiate node selection process	no	`(event) => event.button === 0`
`mouseUpEventVerifier`	`(event) => boolean`	Function to verify if mouse event should apply node selection	no	`(event) => event.button === 0`

Selectable Canvas Configuration Parameters

Name	Type	Description	Required	Default
`onCanvasSelected`	`() => void`	Function to call when canvas is selected	yes
`movementThreshold`	`number`	Specifies maximum cursor travel, when user actions can still be regarded as selection	no	`10`
`mouseDownEventVerifier`	`(event) => boolean`	Function to verify if mouse event should initiate canvas selection process	no	`(event) => event.button === 0`
`mouseUpEventVerifier`	`(event) => boolean`	Function to verify if mouse event should apply canvas selection	no	`(event) => event.button === 0`