HTMLGraph | Tutorials | Stacked Selection

Stacked Selection

The library does not provide stacked selection feature out-of-the-box, but this functionality can be implemented using Selectable Entities feature.

The main idea is to verify if mouse down event has ctrl key pressed and change selection behavior based on this parameter.

    
let stackingEnabled = false;

const currentSelection = new Set();

const canvas = new CanvasBuilder(element)
  .enableUserSelectableNodes({
    onNodeSelected: (selectedNodeId) =&gt; {
      if (!stackingEnabled) {
        currentSelection.clear();
      }

      currentSelection.add(selectedNodeId);

      highlightSelectedNodes();
    },
    mouseDownEventVerifier: (event) =&gt; {
      stackingEnabled = event.ctrlKey;

      return event.button === 0;
    },
    mouseUpEventVerifier: (event) =&gt; {
      return event.button === 0;
    },
  })
  .enableUserSelectableCanvas({
    onCanvasSelected: () =&gt; {
      currentSelection.clear();

      highlightSelectedNodes();
    }
  })
  // ...
  .build();

const highlightSelectedNodes = () =&gt; {
  canvas.graph.getAllNodeIds().forEach((nodeId) =&gt; {
    const { element } = canvas.graph.getNode(nodeId);
    const selected = currentSelection.has(nodeId);

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

Hold ctrl key in the example below to activate selection stacking.