ui: NodeGraph: Add API to find non-overlapping placement for new nodes (#3479)

Author: stevegolton

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

@@ -13,7 +13,12 @@
 // limitations under the License.
 
 import m from 'mithril';
-import {Connection, Node, NodeGraph} from '../../widgets/nodegraph';
+import {
+  Connection,
+  Node,
+  NodeGraph,
+  NodeGraphApi,
+} from '../../widgets/nodegraph';
 import {Checkbox} from '../../widgets/checkbox';
 import {PopupMenu} from '../../widgets/menu';
 import {MenuItem} from '../../widgets/menu';
@@ -39,8 +44,17 @@ interface NodeTemplate {
   allInputsLeft?: boolean;
 }
 
-export function NodeGraphDemo() {
+interface NodeGraphDemoAttrs {
+  readonly titleBars?: boolean;
+  readonly accentBars?: boolean;
+  readonly allInputsLeft?: boolean;
+  readonly allOutputsRight?: boolean;
+  readonly multiselect?: boolean;
+}
+
+export function NodeGraphDemo(): m.Component<NodeGraphDemoAttrs> {
   let selectedNodeId: string | null = null;
+  let graphApi: NodeGraphApi | undefined;
 
   // State for select node checkboxes
   const columnOptions = {
@@ -61,17 +75,48 @@ export function NodeGraphDemo() {
   // State for filter expression
   let filterExpression = '';
 
+  // Helper to create a node template for placement calculation
+  function createNodeTemplate(
+    id: string,
+    type: 'table' | 'select' | 'filter' | 'join',
+  ): Omit<Node, 'x' | 'y'> {
+    const template = nodeTemplates[type];
+    return {
+      id,
+      inputs: template.inputs,
+      outputs: template.outputs,
+      content: template.content,
+      hue: nodeHues[type],
+    };
+  }
+
   // Function to add a new node
   function addNode(
     type: 'table' | 'select' | 'filter' | 'join',
     toNodeId?: string,
   ) {
     const id = uuidv4();
+
+    let x: number;
+    let y: number;
+
+    // Use API to find optimal placement if available
+    if (graphApi && !toNodeId) {
+      const nodeTemplate = createNodeTemplate(id, type);
+      const placement = graphApi.findPlacementForNode(nodeTemplate);
+      x = placement.x;
+      y = placement.y;
+    } else {
+      // Fallback to random position
+      x = 100 + Math.random() * 200;
+      y = 50 + Math.random() * 200;
+    }
+
     const newNode: ModelNode = {
       id: id,
       type: type,
-      x: 100 + Math.random() * 200, // Random offset
-      y: 50 + Math.random() * 200,
+      x,
+      y,
     };
     modelNodes.set(newNode.id, newNode);
     if (toNodeId) {
@@ -92,7 +137,6 @@ export function NodeGraphDemo() {
   // Model state - persists across renders
   const modelNodes: Map<string, ModelNode> = new Map();
   addNode('table');
-  addNode('select');
 
   // Template renderers - map from type to node template
   const nodeTemplates: Record<string, NodeTemplate> = {
@@ -327,6 +371,9 @@ export function NodeGraphDemo() {
             nodes: renderNodes(),
             connections: connections,
             selectedNodeId: selectedNodeId,
+            onReady: (api: NodeGraphApi) => {
+              graphApi = api;
+            },
             onNodeDrag: (nodeId: string, x: number, y: number) => {
               const model = modelNodes.get(nodeId);
               if (model) {

ui/src/widgets/nodegraph.ts

@@ -97,6 +97,7 @@ interface CanvasState {
 export interface NodeGraphApi {
   autoLayout: () => void;
   recenter: () => void;
+  findPlacementForNode: (node: Omit<Node, 'x' | 'y'>) => Position;
 }
 
 export interface NodeGraphAttrs {
@@ -1128,9 +1129,104 @@ export function NodeGraph(): m.Component<NodeGraphAttrs> {
         autofit(nodes, canvas);
       };
 
+      // Find a non-overlapping position for a new node
+      const findPlacementForNode = (
+        newNode: Omit<Node, 'x' | 'y'>,
+      ): Position => {
+        if (latestVnode === null || canvasElement === null) {
+          return {x: 0, y: 0};
+        }
+
+        const {nodes = []} = latestVnode.attrs;
+        const canvas = canvasElement;
+
+        // Default starting position (center of viewport in canvas space)
+        const canvasRect = canvas.getBoundingClientRect();
+        const centerX =
+          (canvasRect.width / 2 - canvasState.panOffset.x) / canvasState.zoom;
+        const centerY =
+          (canvasRect.height / 2 - canvasState.panOffset.y) / canvasState.zoom;
+
+        // Create a temporary node with coordinates to render and measure
+        const tempNode: Node = {
+          ...newNode,
+          x: centerX,
+          y: centerY,
+        };
+
+        // Create temporary DOM element to measure size
+        const tempContainer = document.createElement('div');
+        tempContainer.style.position = 'absolute';
+        tempContainer.style.left = '-9999px';
+        tempContainer.style.visibility = 'hidden';
+        canvas.appendChild(tempContainer);
+
+        // Render the node into the temporary container
+        m.render(
+          tempContainer,
+          m(
+            '.pf-node',
+            {
+              'data-node': tempNode.id,
+              'style': {
+                ...(tempNode.hue !== undefined
+                  ? {'--pf-node-hue': `${tempNode.hue}`}
+                  : {}),
+              },
+            },
+            [
+              tempNode.titleBar &&
+                m('.pf-node-header', [
+                  m('.pf-node-title', tempNode.titleBar.title),
+                ]),
+              m('.pf-node-body', [
+                tempNode.content !== undefined &&
+                  m('.pf-node-content', tempNode.content),
+                tempNode.inputs
+                  ?.slice(tempNode.allInputsLeft ? 0 : 1)
+                  .map((input: string) =>
+                    m('.pf-port-row.pf-port-input', [m('span', input)]),
+                  ),
+                tempNode.outputs
+                  ?.slice(tempNode.allOutputsRight ? 0 : 1)
+                  .map((output: string) =>
+                    m('.pf-port-row.pf-port-output', [m('span', output)]),
+                  ),
+              ]),
+            ],
+          ),
+        );
+
+        // Get dimensions from the rendered element
+        const dims = getNodeDimensions(tempNode.id);
+
+        // Calculate chain height
+        const chain = getChain(tempNode);
+        let chainHeight = 0;
+        chain.forEach((chainNode) => {
+          const chainDims = getNodeDimensions(chainNode.id);
+          chainHeight += chainDims.height;
+        });
+
+        // Clean up temporary element
+        canvas.removeChild(tempContainer);
+
+        // Find non-overlapping position starting from center
+        const finalPos = findNearestNonOverlappingPosition(
+          centerX,
+          centerY,
+          tempNode.id,
+          nodes,
+          dims.width,
+          chainHeight,
+        );
+
+        return finalPos;
+      };
+
       // Provide API to parent
       if (onReady) {
-        onReady({autoLayout, recenter});
+        onReady({autoLayout, recenter, findPlacementForNode});
       }
     },