NodeGraph: Add multi-node select

Change-Id: I56ca8c38029e027707d9016aaa70c31d207145b3

Author: stevegolton

ui/src/assets/widgets/nodegraph.scss

@@ -333,3 +333,11 @@ svg {
 .pf-panning {
   cursor: grabbing;
 }
+
+.pf-selection-rect {
+  position: absolute;
+  border: 2px solid var(--pf-color-accent);
+  background: color-mix(in srgb, var(--pf-color-accent) 15%, transparent);
+  pointer-events: none;
+  z-index: 1000;
+}

ui/src/plugins/dev.perfetto.ExplorePage/query_builder/graph/graph.ts

@@ -594,21 +594,21 @@ export class Graph implements m.ClassComponent<GraphAttrs> {
         m(NodeGraph, {
           nodes,
           connections,
-          selectedNodeId: selectedNode?.nodeId ?? null,
+          selectedNodeIds: selectedNode?.nodeId ? [selectedNode.nodeId] : [],
           hideControls: true,
           onReady: (api: NodeGraphApi) => {
             this.nodeGraphApi = api;
           },
-          onNodeSelect: (nodeId: string | null) => {
-            if (nodeId === null) {
-              attrs.onDeselect();
-            } else {
-              const qnode = findQueryNode(nodeId, rootNodes);
-              if (qnode) {
-                attrs.onNodeSelected(qnode);
-              }
+          multiselect: false,
+          onNodeSelect: (nodeId: string) => {
+            const qnode = findQueryNode(nodeId, rootNodes);
+            if (qnode) {
+              attrs.onNodeSelected(qnode);
             }
           },
+          onSelectionClear: () => {
+            attrs.onDeselect();
+          },
           onNodeDrag: (nodeId: string, x: number, y: number) => {
             attrs.onNodeLayoutChange(nodeId, {x, y});
           },

ui/src/plugins/dev.perfetto.WidgetsPage/nodegraph_demo.ts

@@ -48,12 +48,13 @@ interface NodeGraphDemoAttrs {
   readonly accentBars?: boolean;
   readonly allInputsLeft?: boolean;
   readonly allOutputsRight?: boolean;
+  readonly multiselect?: boolean;
   readonly colors?: boolean;
 }
 
 export function NodeGraphDemo(): m.Component<NodeGraphDemoAttrs> {
-  let selectedNodeId: string | null = null;
   let graphApi: NodeGraphApi | undefined;
+  const selectedNodeIds = new Set<string>();
 
   // State for select node checkboxes
   const columnOptions = {
@@ -376,17 +377,18 @@ export function NodeGraphDemo(): m.Component<NodeGraphDemoAttrs> {
           m(NodeGraph, {
             nodes: renderNodes(),
             connections: connections,
-            selectedNodeId: selectedNodeId,
             onReady: (api: NodeGraphApi) => {
               graphApi = api;
             },
+            selectedNodeIds: Array.from(selectedNodeIds),
             onNodeDrag: (nodeId: string, x: number, y: number) => {
               const model = modelNodes.get(nodeId);
               if (model) {
                 model.x = x;
                 model.y = y;
               }
             },
+            multiselect: attrs.multiselect,
             onConnect: (conn: Connection) => {
               console.log('onConnect:', conn);
               connections.push(conn);
@@ -408,7 +410,7 @@ export function NodeGraphDemo(): m.Component<NodeGraphDemoAttrs> {
               }
 
               // Clear selection if needed
-              if (selectedNodeId === nodeId) selectedNodeId = null;
+              selectedNodeIds.delete(nodeId);
 
               // Remove any connections to/from this node
               for (let i = connections.length - 1; i >= 0; i--) {
@@ -425,10 +427,27 @@ export function NodeGraphDemo(): m.Component<NodeGraphDemoAttrs> {
 
               console.log(`onNodeRemove: ${nodeId}`);
             },
-            onNodeSelect: (nodeId: string | null) => {
-              selectedNodeId = nodeId;
+            onNodeSelect: (nodeId: string) => {
+              selectedNodeIds.clear();
+              selectedNodeIds.add(nodeId);
               console.log(`onNodeSelect: ${nodeId}`);
             },
+            onNodeAddToSelection: (nodeId: string) => {
+              selectedNodeIds.add(nodeId);
+              console.log(
+                `onNodeAddToSelection: ${nodeId} (total: ${selectedNodeIds.size})`,
+              );
+            },
+            onNodeRemoveFromSelection: (nodeId: string) => {
+              selectedNodeIds.delete(nodeId);
+              console.log(
+                `onNodeRemoveFromSelection: ${nodeId} (total: ${selectedNodeIds.size})`,
+              );
+            },
+            onSelectionClear: () => {
+              selectedNodeIds.clear();
+              console.log(`onSelectionClear`);
+            },
             onDock: (targetId: string, childNode: Omit<Node, 'x' | 'y'>) => {
               const target = modelNodes.get(targetId);
               const child = modelNodes.get(childNode.id);

ui/src/plugins/dev.perfetto.WidgetsPage/widgets_page.ts

@@ -1660,6 +1660,7 @@ export class WidgetsPage implements m.ClassComponent<{app: App}> {
           accentBars: false,
           allInputsLeft: false,
           allOutputsRight: false,
+          multiselect: false,
           colors: false,
         },
       }),