feuerwerk/tools/e2e/06-graph.mjs

/**
 * The behavior graph editor: binding to the selection, dragging nodes, the palette (row click
 * and Enter), connecting ports, deleting, the live highlight while playing, variables.
 */
export async function graph(t) {
  const {
    check,
    sleep,
    evaluate,
    json,
    shot,
    click,
    clickText,
    drag,
    mouse,
    locate,
    typeText,
    press,
    holdKey,
    undo,
    state,
    select,
    stop,
    asset,
  } = t;
  const nodeOf = async (id) => (await asset('mover')).graph.nodes.find((n) => n.id === id);
  const graphCounts = async () => {
    const g = (await asset('mover')).graph;
    return { nodes: g.nodes.length, edges: g.edges.length };
  };
  const variableKeys = async () => (await asset('mover')).variables.map((v) => v.key).join(',');

  // 13. Selecting the Mover asset binds the graph; the Graph tab shows it.
  await clickText('Mover');
  await evaluate(`__gm.showTab('graph')`);
  await sleep(250);
  check(
    'graph editor shows the selected behavior',
    (await evaluate(`__gm.graph.current()`)) === 'mover' && (await evaluate('__gm.tab()')) === 'graph',
  );
  await shot('16-graph');

  // 13a. Drag a node: clicking its title selects it, dragging moves it (undoable).
  const axisBefore = await nodeOf('n-axis');
  const axisPos = await json(`__gm.graph.nodeAt('n-axis')`);
  await drag(axisPos.x, axisPos.y, axisPos.x + 60, axisPos.y + 40);
  let s = await state();
  const axisAfter = await nodeOf('n-axis');
  check(
    'dragging a node selects and moves it',
    s.selection?.kind === 'node' &&
      s.selection.nodeId === 'n-axis' &&
      axisAfter.x === axisBefore.x + 60 &&
      axisAfter.y === axisBefore.y + 40,
    `${JSON.stringify(s.selection)} ${axisBefore.x},${axisBefore.y} → ${axisAfter.x},${axisAfter.y}`,
  );
  check(
    'node inspector shows the node',
    Boolean(await evaluate(`__gm.locate('Axis input')`)) &&
      Boolean(await evaluate(`__gm.locate('DATA NODE')`)),
  );
  await undo();
  const axisUndone = await nodeOf('n-axis');
  check(
    'undo moves the node back',
    axisUndone.x === axisBefore.x && axisUndone.y === axisBefore.y,
    `${axisUndone.x},${axisUndone.y}`,
  );

  // 13b. Regression: typing a query and then *clicking* a row must add exactly one node.
  //      (The search field's blur-commit once picked the first match and the row click picked
  //      it again → two nodes.)
  const gcenter = await json('__gm.graph.center()');
  const beforeClickPick = await graphCounts();
  await click(gcenter.x + 250, gcenter.y + 250, 'right');
  await sleep(100);
  check('node palette opens (row-click case)', Boolean(await evaluate(`__gm.locate('Search nodes…')`)));
  await typeText('stop');
  await sleep(150);
  const stopRow = await locate('Stop game'); // nothing else on screen shows this label
  await click(stopRow.x, stopRow.y);
  await sleep(100);
  const afterClickPick = await graphCounts();
  check(
    'clicking a palette row adds exactly one node',
    afterClickPick.nodes === beforeClickPick.nodes + 1,
    JSON.stringify({ beforeClickPick, afterClickPick }),
  );
  check('palette closed after row click', !(await evaluate(`__gm.locate('Search nodes…')`)));
  await undo(); // so the next step finds the same empty spot and the expected graph
  check('undo removes the clicked node again', (await graphCounts()).nodes === beforeClickPick.nodes);

  // 13c. Right-click the empty canvas → palette → search "log" → Enter adds a Log node.
  const before13 = await graphCounts();
  await click(gcenter.x + 250, gcenter.y + 250, 'right');
  await sleep(100);
  check('node palette opens', Boolean(await evaluate(`__gm.locate('Search nodes…')`)));
  await typeText('log');
  await sleep(100);
  await press('Enter');
  await sleep(250);
  const after13 = await graphCounts();
  s = await state();
  const newNode = s.selection?.kind === 'node' ? await nodeOf(s.selection.nodeId) : null;
  check(
    'palette adds a Log node and selects it',
    after13.nodes === before13.nodes + 1 && newNode?.type === 'Log',
    JSON.stringify({ after13, newNode }),
  );
  await shot('17-node-added');

  // 13d. Connect: drag from the Move node's exec output onto the Log node's exec input. An
  //      exec output must not connect to a data input: dragging onto "message" does nothing.
  const fromPort = await json(`__gm.graph.portAt('n-move', 'exec', true)`);
  const toPort = await json(`__gm.graph.portAt(${JSON.stringify(newNode.id)}, 'exec', false)`);
  await drag(fromPort.x, fromPort.y, toPort.x, toPort.y, 16);
  const connected = await graphCounts();
  check(
    'dragging port to port connects the nodes',
    connected.edges === before13.edges + 1,
    JSON.stringify(connected),
  );
  const dataPort = await json(`__gm.graph.portAt(${JSON.stringify(newNode.id)}, 'message', false)`);
  await drag(fromPort.x, fromPort.y, dataPort.x, dataPort.y, 16);
  check(
    'incompatible ports are rejected',
    (await graphCounts()).edges === before13.edges + 1 && s.mode === 'edit',
  );
  await shot('18-connected');

  // 13d2. A drop on the node's body instead of a port: it takes the first free compatible input,
  //       and the highlight names that port while the button is still down.
  const axisX = await json(`__gm.graph.portAt('n-axis', 'x', true)`);
  const logBody = await json(`__gm.graph.nodeAt(${JSON.stringify(newNode.id)})`);
  await mouse('mouseMoved', axisX.x, axisX.y);
  await mouse('mousePressed', axisX.x, axisX.y);
  await mouse('mouseMoved', toPort.x, toPort.y, 'left', { buttons: 1 });
  await sleep(50);
  const overExec = await json(`__gm.graph.dropTarget()`);
  check('a number drag over an exec port predicts nothing', overExec === null, JSON.stringify(overExec));
  await mouse('mouseMoved', logBody.x, logBody.y, 'left', { buttons: 1 });
  await sleep(50);
  const overBody = await json(`__gm.graph.dropTarget()`);
  check(
    'over the node body it predicts the first free compatible input',
    overBody?.nodeId === newNode.id && overBody.port === 'message' && overBody.isOutput === false,
    JSON.stringify(overBody),
  );
  await shot('18b-drop-prediction');
  await mouse('mouseReleased', logBody.x, logBody.y);
  await sleep(150);
  const dropped = await graphCounts();
  const messageEdge = (await asset('mover')).graph.edges.find(
    (e) => e.to.node === newNode.id && e.to.port === 'message',
  );
  check(
    'the drop connects exactly the predicted port',
    dropped.edges === before13.edges + 2 && messageEdge?.from.port === 'x',
    JSON.stringify({ dropped, messageEdge }),
  );
  check('the prediction is dropped with the drag', (await json(`__gm.graph.dropTarget()`)) === null);
  await undo();
  check('undo removes that edge again', (await graphCounts()).edges === before13.edges + 1);

  // 13d3. Dropped into empty space, the drag opens the palette filtered to what it could reach,
  //       and the picked node arrives already wired – as one undo step.
  const empty = { x: gcenter.x - 250, y: gcenter.y + 250 };
  const beforeDrop = await graphCounts();
  await mouse('mouseMoved', axisX.x, axisX.y);
  await mouse('mousePressed', axisX.x, axisX.y);
  await mouse('mouseMoved', empty.x, empty.y, 'left', { buttons: 1 });
  await sleep(50);
  await mouse('mouseReleased', empty.x, empty.y);
  await sleep(150);
  check('a drop into empty space opens the palette', Boolean(await evaluate(`__gm.locate('Search nodes…')`)));
  // "Restart game" takes exec only. Its label must not appear – and unlike "On update" it is not
  // a node on the canvas, where `locate` would find it whatever the palette lists.
  check(
    'it lists a node that takes a number, not one that cannot',
    Boolean(await evaluate(`__gm.locate('Clamp')`)) && !(await evaluate(`__gm.locate('Restart game')`)),
  );
  check(
    'the dragged edge stays on screen while the palette decides',
    (await json(`__gm.graph.danglingEdge()`)) === true,
  );
  await shot('18c-drop-into-empty');
  const clampRow = await locate('Clamp');
  await click(clampRow.x, clampRow.y);
  await sleep(200);
  const afterDrop = await graphCounts();
  const wired = await state();
  const clampEdge = (await asset('mover')).graph.edges.find(
    (e) => e.from.node === 'n-axis' && e.from.port === 'x' && e.to.node === wired.selection?.nodeId,
  );
  check(
    'the new node arrives connected to its first compatible input',
    afterDrop.nodes === beforeDrop.nodes + 1 &&
      afterDrop.edges === beforeDrop.edges + 1 &&
      clampEdge?.to.port === 'value',
    JSON.stringify({ afterDrop, clampEdge }),
  );
  check(
    'and the dangling edge gives way to the real one',
    (await json(`__gm.graph.danglingEdge()`)) === false,
  );
  await undo();
  const undone = await graphCounts();
  check(
    'one undo takes back both the node and its edge',
    undone.nodes === beforeDrop.nodes && undone.edges === beforeDrop.edges,
    JSON.stringify(undone),
  );

  // Cancelling the palette has to take the dangling edge with it, or it would hang there forever.
  await mouse('mouseMoved', axisX.x, axisX.y);
  await mouse('mousePressed', axisX.x, axisX.y);
  await mouse('mouseMoved', empty.x, empty.y, 'left', { buttons: 1 });
  await mouse('mouseReleased', empty.x, empty.y);
  await sleep(150);
  await press('Escape');
  await sleep(150);
  const cancelled = await graphCounts();
  check(
    'escaping the palette clears the edge and adds nothing',
    (await json(`__gm.graph.danglingEdge()`)) === false &&
      cancelled.nodes === beforeDrop.nodes &&
      cancelled.edges === beforeDrop.edges,
    JSON.stringify(cancelled),
  );

  // 13e. Delete removes the selected node together with its edge; undo brings both back.
  await select({ kind: 'node', assetId: 'mover', nodeId: newNode.id });
  await press('Delete');
  await sleep(150);
  const deleted = await graphCounts();
  check(
    'Delete removes the node and its edge',
    deleted.nodes === before13.nodes && deleted.edges === before13.edges,
    JSON.stringify(deleted),
  );
  await undo();
  const restored = await graphCounts();
  check(
    'undo restores node and edge',
    restored.nodes === before13.nodes + 1 && restored.edges === before13.edges + 1,
    JSON.stringify(restored),
  );

  // 13f. The fps readout runs in both modes. Play always starts on the Game tab; switching to
  //      Graph while playing shows the live highlight: hold ArrowRight → the exec edge is hot.
  const fpsEdit = await evaluate('__gm.fps()');
  check('fps readout is measured in edit mode', typeof fpsEdit === 'number' && fpsEdit > 0, `fps=${fpsEdit}`);
  // Single evaluate: the readout refreshes twice a second, so read value and label together.
  check(
    'fps label is visible in the toolbar',
    (await evaluate(`!!__gm.locate(__gm.fps() + ' fps')`)) === true,
  );
  await t.play();
  check('play switches to the game tab', (await evaluate('__gm.tab()')) === 'game');
  await sleep(600);
  const fpsPlay = await evaluate('__gm.fps()');
  check(
    'fps readout keeps running in play mode',
    typeof fpsPlay === 'number' && fpsPlay > 0,
    `fps=${fpsPlay}`,
  );
  await evaluate(`__gm.showTab('graph')`);
  await sleep(100);
  const holding = holdKey('ArrowRight', 300);
  await sleep(250);
  await shot('19-graph-live');
  await holding;
  await stop();

  // 13g. Variables: the "+ Variable" dropdown → Number adds "var1" with default 0; undo removes it.
  await select({ kind: 'asset', assetId: 'mover' });
  await sleep(150);
  await clickText('+ Variable');
  await clickText('Number');
  await sleep(100);
  check(
    'adding a variable declares it on the behavior',
    (await variableKeys()) === 'speed,var1',
    await variableKeys(),
  );
  await shot('20-variable-added');
  await undo();
  check('undo removes the variable', (await variableKeys()) === 'speed', await variableKeys());

  // 13h. The tab keeps its subject: selecting something else leaves the graph alone, and the
  //      header picker switches behaviors without any selection at all.
  const size = await graphCounts();
  const readout = `${size.nodes} nodes · ${size.edges} links`;
  check(
    'the header reports the size of the shown graph',
    Boolean(await evaluate(`__gm.locate(${JSON.stringify(readout)})`)),
    readout,
  );
  await select(null);
  await sleep(100);
  check(
    'graph editor keeps its behavior when nothing is selected',
    (await evaluate(`__gm.graph.current()`)) === 'mover',
  );
  await select({ kind: 'asset', assetId: 'cam' });
  await sleep(100);
  check(
    'graph editor keeps its behavior for a non-behavior asset',
    (await evaluate(`__gm.graph.current()`)) === 'mover',
  );
  // The picker is the *last* "Mover" on screen: the assets panel shows one too.
  const pickerAt = await locate('Mover', true);
  await click(pickerAt.x, pickerAt.y);
  await sleep(150);
  const spawnerRow = await locate('Spawner', true);
  await click(spawnerRow.x, spawnerRow.y);
  await sleep(200);
  check(
    'the header picker switches the graph to another behavior',
    (await evaluate(`__gm.graph.current()`)) === 'spawner',
    String(await evaluate(`__gm.graph.current()`)),
  );
  await select({ kind: 'asset', assetId: 'mover' });
  await sleep(100);
  check(
    'graph editor rebinds when a behavior is selected again',
    (await evaluate(`__gm.graph.current()`)) === 'mover',
  );

  // 13i. Mouse behaviour, as in the scene view: the middle button pans from anywhere – a node
  //      under it included – and the left button no longer pans at all.
  await clickText('Fit');
  await sleep(250);
  const positions = async () =>
    (await asset('mover')).graph.nodes.map((n) => `${n.id}:${n.x},${n.y}`).join(' ');
  const area = await json('__gm.graph.canvasRect()');
  const before13i = await positions();
  const axisScreenBefore = await json(`__gm.graph.nodeAt('n-axis')`);
  await drag(axisScreenBefore.x, axisScreenBefore.y, axisScreenBefore.x + 120, axisScreenBefore.y + 60, {
    button: 'middle',
  });
  const axisScreenPanned = await json(`__gm.graph.nodeAt('n-axis')`);
  check(
    'the middle button pans even when it starts on a node',
    Math.abs(axisScreenPanned.x - axisScreenBefore.x - 120) < 3 &&
      Math.abs(axisScreenPanned.y - axisScreenBefore.y - 60) < 3,
    JSON.stringify({ axisScreenBefore, axisScreenPanned }),
  );
  check(
    'panning over a node leaves the node where it was',
    (await positions()) === before13i,
    await positions(),
  );

  // An empty spot: after a fit every node sits at least a margin away from the corner.
  const corner = { x: area.x + 6, y: area.y + 6 };
  const opposite = { x: area.x + area.w - 6, y: area.y + area.h - 6 };
  const axisBeforeBand = await json(`__gm.graph.nodeAt('n-axis')`);
  await drag(corner.x, corner.y, corner.x + 60, corner.y + 40);
  const axisAfterBand = await json(`__gm.graph.nodeAt('n-axis')`);
  check(
    'dragging with the left button no longer pans',
    Math.abs(axisAfterBand.x - axisBeforeBand.x) < 3 && Math.abs(axisAfterBand.y - axisBeforeBand.y) < 3,
    JSON.stringify({ axisBeforeBand, axisAfterBand }),
  );

  // 13j. A rubber band across the whole canvas takes every node – the count comes from the model,
  //      so this cannot agree with the canvas by sharing its rule.
  const nodeCount = (await asset('mover')).graph.nodes.length;
  await drag(corner.x, corner.y, opposite.x, opposite.y, { steps: 16 });
  const banded = await json('__gm.graph.selected()');
  check(
    'a rubber band selects every node it spans',
    banded.length === nodeCount,
    `${banded.length} of ${nodeCount}`,
  );
  await shot('21-graph-multiselect');

  // 13k. The whole selection moves as one, and one undo takes all of it back.
  const beforeMove = (await asset('mover')).graph.nodes.map((n) => ({ id: n.id, x: n.x, y: n.y }));
  const grabAt = await json(`__gm.graph.nodeAt('n-axis')`);
  await drag(grabAt.x, grabAt.y, grabAt.x + 40, grabAt.y + 30);
  const afterMove = await asset('mover');
  const movedTogether = beforeMove.every((n) => {
    const now = afterMove.graph.nodes.find((m) => m.id === n.id);
    return now.x === n.x + 40 && now.y === n.y + 30;
  });
  check('dragging one of them moves the whole selection', movedTogether, await positions());
  await undo();
  check('one undo takes the group move back', (await positions()) === before13i, await positions());

  // 13l. Delete acts on the selection, not just the primary node.
  await drag(corner.x, corner.y, opposite.x, opposite.y, { steps: 16 });
  const beforeDelete = await graphCounts();
  await press('Delete');
  await sleep(200);
  const afterDelete = await graphCounts();
  check(
    'Delete removes every selected node, edges with them',
    afterDelete.nodes === 0 && afterDelete.edges === 0,
    JSON.stringify(afterDelete),
  );
  await undo();
  const restoredAll = await graphCounts();
  check(
    'one undo brings the whole graph back',
    restoredAll.nodes === beforeDelete.nodes && restoredAll.edges === beforeDelete.edges,
    JSON.stringify(restoredAll),
  );

  // 13m. Ctrl-click adds and removes single nodes. Fit first, so every node is really on screen
  //      and a click cannot miss one that the earlier pan pushed over the edge.
  await select({ kind: 'asset', assetId: 'mover' });
  await clickText('Fit');
  await sleep(250);
  const axisRow = await json(`__gm.graph.nodeAt('n-axis')`);
  await click(axisRow.x, axisRow.y);
  const second = (await asset('mover')).graph.nodes.find((n) => n.id !== 'n-axis');
  const secondAt = await json(`__gm.graph.nodeAt(${JSON.stringify(second.id)})`);
  await click(secondAt.x, secondAt.y, 'left', { ctrl: true });
  check(
    'ctrl-click adds a second node to the selection',
    JSON.stringify(await json('__gm.graph.selected()')) === JSON.stringify(['n-axis', second.id]),
    JSON.stringify(await json('__gm.graph.selected()')),
  );
  await click(secondAt.x, secondAt.y, 'left', { ctrl: true });
  check(
    'ctrl-clicking it again removes it',
    JSON.stringify(await json('__gm.graph.selected()')) === JSON.stringify(['n-axis']),
    JSON.stringify(await json('__gm.graph.selected()')),
  );

  // 13n. Fit really fits: proven against a node parked far outside, and against the fact that the
  //      graph is then wider than the canvas – otherwise centring alone would pass this check.
  await evaluate(
    `(() => { const n = __gm.state.project.assets.find(a => a.id === 'mover').graph.nodes.find(n => n.id === 'n-axis'); n.x += 2500; __gm.state.preview(); })()`,
  );
  await sleep(250);
  await clickText('Fit');
  await sleep(300);
  const rects = [];
  for (const node of (await asset('mover')).graph.nodes)
    rects.push(await json(`__gm.graph.nodeRect(${JSON.stringify(node.id)})`));
  const span = Math.max(...rects.map((r) => r.x + r.w)) - Math.min(...rects.map((r) => r.x));
  check(
    'the parked node makes the graph wider than the canvas, so fitting has to zoom out',
    span > area.w * 0.5,
    `span=${Math.round(span)} canvas=${Math.round(area.w)}`,
  );
  const outside = rects.filter(
    (r) => r.x < area.x || r.y < area.y || r.x + r.w > area.x + area.w || r.y + r.h > area.y + area.h,
  );
  check(
    'Fit leaves no node hanging out of the view',
    outside.length === 0,
    `${outside.length} outside: ${JSON.stringify(outside.slice(0, 2))}`,
  );
  await shot('22-graph-fitted');
  await evaluate(
    `(() => { const n = __gm.state.project.assets.find(a => a.id === 'mover').graph.nodes.find(n => n.id === 'n-axis'); n.x -= 2500; __gm.state.preview(); })()`,
  );
  await clickText('Fit');
  await sleep(250);
  check('the parked node is back where it started', (await positions()) === before13i, await positions());

  await evaluate(`__gm.showTab('scene')`);
}