HTMLGraph | Features | Rectangular Selection

Rectangular Selection

To enable the built-in rectangular selection, call the enableRectangularSelection method on the CanvasBuilder instance.

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

const canvas = new CanvasBuilder(element)
  .enableRectangularSelection({
    onSelectionFinished: (selectionRect) =&gt; {
      canvas.graph.getAllNodeIds().forEach((nodeId) =&gt; {
        const { element } = canvas.graph.getNode(nodeId);
        const nodeRect = element.getBoundingClientRect();

        const selected = checkIntersection(nodeRect, selectionRect);

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

/**
 * This function verifies whether a node rectangle intersects with the selection rectangle.
 * Both parameters are of type `DOMRect`.
 */
const checkIntersection = (nodeRect, selectionRect) =&gt; {
  const isNodeRightOfSelection = nodeRect.right &lt; selectionRect.left;
  const isNodeLeftOfSelection = nodeRect.left &gt; selectionRect.right;
  const isNodeBottomOfSelection = nodeRect.bottom &lt; selectionRect.top;
  const isNodeTopOfSelection = nodeRect.top &gt; selectionRect.bottom;

  return !(
    isNodeRightOfSelection ||
    isNodeLeftOfSelection ||
    isNodeTopOfSelection ||
    isNodeBottomOfSelection
  );
}

Hold the ctrl key or use 3 finger touch to activate rectangular selection in the demo below.

Rectangular Selection Configuration Parameters

Name	Type	Description	Required	Default
`rectangleElement`	`Element`	Visual element to be placed inside the selection. Should have `width` and `height` of `100%`.	no	Semi-transparent blue rectangle with a gray dashed border
`onSelectionStarted`	`() => void`	Function to call when the selection is started	no	`() => {}`
`onSelectionChange`	`(rect: DOMRect) => void`	Function to call when the selection rectangle is updated	no	`() => {}`
`onSelectionFinished`	`(rect: DOMRect) => void`	Function to call when the selection is finished	no	`() => {}`
`onSelectionInterrupted`	`(rect: DOMRect) => void`	Function to call when the selection is interrupted in progress (e.g., mouse moved outside)	no	`() => {}`
`mouseDownEventVerifier`	`(event) => boolean`	Function to verify whether a mouse event should initiate the selection process	no	`(event) => event.button === 0 && event.ctrlKey`
`mouseUpEventVerifier`	`(event) => boolean`	Function to verify whether a mouse event should apply the selection	no	`(event) => event.button === 0`

Related Pages