HTMLGraph | Features | Selectable Entities

Selectable Entities

To enable built-in selectable entities, three CanvasBuilder configurations are available:

enableUserSelectableNodes - handles selection when the user clicks inside a node
enableUserSelectableEdges - handles selection when the user clicks inside an edge. Edges must be interactive for this feature to work. See the Interactive Edges tutorial.
enableUserSelectableCanvas - handles selection when the user clicks outside of any node or edge

Call them separately or all together 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);
      });
    }
  })
  .enableUserSelectableEdges({
    onEdgeSelected: (selectedEdgeId) =&gt; {
      canvas.graph.getAllEdgeIds().forEach((edgeId) =&gt; {
        const { shape } = canvas.graph.getEdge(edgeId);
        const width = edgeId === selectedEdgeId ? 2 : 1;

        shape.line.setAttribute(&#34;stroke-width&#34;, `${width}`);
      });
    },
  })
  .enableUserSelectableCanvas({
    onCanvasSelected: () =&gt; {
      canvas.graph.getAllNodeIds().forEach((nodeId) =&gt; {
        const { element } = canvas.graph.getNode(nodeId);

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

      canvas.graph.getAllEdgeIds().forEach((edgeId) =&gt; {
        const { shape } = canvas.graph.getEdge(edgeId);

        shape.line.setAttribute(&#34;stroke-width&#34;, &#34;1&#34;);
      });
    },
  })
  .build();

All 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 Edges Configuration Parameters

Name	Type	Description	Required	Default
`onEdgeSelected`	`(selectedEdgeId) => void`	Function to call when edge 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`