feuerwerk/tools/e2e/36-graph-groups.mjs

import { node } from '../lib/builders.mjs';

/**
 * Groups and comments in a graph (#38). Two separate things on purpose: a group is a titled box
 * that carries what it encloses, a comment is a card of text that frames nothing.
 *
 * What only a running editor can answer is in here: that a group takes the nodes whose *centre*
 * lies in it and leaves the one beside it, that deleting the box leaves every node where it was,
 * and that the text on a freely picked colour flips between black and white so it stays readable –
 * none of which a unit test can see, because all three are about what is drawn and dragged.
 */

const GRAPH = {
  nodes: [
    node('gg-start', 'OnStart', 0, 0),
    node('gg-self', 'Self', 0, 200),
    node('gg-far', 'Self', 900, 600),
  ],
  // No links: this step is about the boxes behind the nodes, not about what runs.
  edges: [],
};

export async function graphGroups(t) {
  const {
    check,
    json,
    evaluate,
    mutate,
    click,
    clickText,
    drag,
    locate,
    press,
    typeText,
    shot,
    showTab,
    settle,
  } = t;

  const boxes = () => json('__gm.graph.annotations()');
  const one = async (kind) => (await boxes()).find((a) => a.kind === kind) ?? null;
  const nodeAt = (id) =>
    json(
      `(() => { const g = __gm.state.project.assets.find((a) => a.id === 'gg-logic').graph;` +
        ` const n = g.nodes.find((n) => n.id === ${JSON.stringify(id)});` +
        ` return n ? { x: n.x, y: n.y } : null; })()`,
    );

  await press('Escape');
  await evaluate('__gm.state.select(null)');

  // 36a. A graph of its own: two nodes close together and a third far away, which is what makes
  //      "the group took the right ones" a question with a wrong answer available.
  await mutate(`
    const p = __gm.state.project;
    const logic = structuredClone(p.assets.find((a) => a.id === 'mover'));
    Object.assign(logic, {
      id: 'gg-logic',
      name: 'Grouped',
      props: { enabled: true, runInEditor: false },
      variables: [],
      graph: ${JSON.stringify(GRAPH)},
    });
    p.assets.push(logic);`);
  await evaluate("__gm.state.select({ kind: 'asset', assetId: 'gg-logic' })");
  await showTab('graph');
  await evaluate('__gm.graph.current()');

  // 36b. The palette is the one gesture the canvas has for putting something on itself, so both
  //      boxes are offered there – above the nodes, and reachable by the same search field.
  const spot = await json('__gm.graph.emptySpot()');
  await click(spot.x, spot.y, 'right');
  const offered = await json('__gm.graph.paletteRows()');
  check(
    'the drop palette offers a group and a comment before the nodes',
    offered[0]?.type === 'add-group' && offered[1]?.type === 'add-comment',
    JSON.stringify(offered.slice(0, 4)),
  );
  // The search reaches them by what they are, not by the "Add" they both start with: that word is
  // what somebody types to find the `Add` node, and two entries jumping the list for it would cost
  // more than they help.
  await typeText('add');
  const searchedAdd = await json('__gm.graph.paletteRows()');
  await press('a', { ctrl: true });
  await typeText('comment');
  const searchedComment = await json('__gm.graph.paletteRows()');
  check(
    'the search finds them by what they are, and leaves the query "add" to the nodes',
    searchedAdd.every((row) => !row.type.startsWith('add-')) && searchedComment[0]?.type === 'add-comment',
    JSON.stringify({ add: searchedAdd.slice(0, 2), comment: searchedComment.slice(0, 2) }),
  );
  await clickText('Add comment');
  const comment = await one('note');
  check(
    'a comment is drawn where the palette was opened, in white on the default colour',
    comment !== null && comment.text === 'Comment' && comment.textColor === '#ffffff',
    JSON.stringify(comment),
  );

  // 36c. A group out of a selection: the two near nodes, right-clicked as a selection.
  await evaluate(
    "__gm.state.select({ kind: 'node', assetId: 'gg-logic', nodeIds: ['gg-start', 'gg-self'] })",
  );
  const start = await json('__gm.graph.nodeAt("gg-start")');
  await click(start.x, start.y, 'right');
  const menu = await json('__gm.menuRows()');
  await clickText('Group these 2 nodes');
  const group = await one('group');
  const farBefore = await nodeAt('gg-far');
  check(
    'the node menu groups the whole selection, and the box is drawn around it',
    menu.some((row) => (row ?? '') === 'Group these 2 nodes') &&
      group !== null &&
      group.text === 'Group' &&
      (await json('__gm.state.selection')).kind === 'annotation',
    JSON.stringify({ menu: menu.filter(Boolean).slice(0, 3), group }),
  );
  await shot('36-group');

  // 36d. Dragging the title bar. The far node is the check that matters: it never moves, because
  //      its centre is nowhere near the box – that is the whole membership rule.
  const startBefore = await nodeAt('gg-start');
  const commentBefore = (await one('note')).x;
  const title = await json(`__gm.graph.annotationAt(${JSON.stringify(group.id)})`);
  await drag(title.x, title.y, title.x + 80, title.y + 60);
  await settle();
  const startAfter = await nodeAt('gg-start');
  const farAfter = await nodeAt('gg-far');
  const movedBox = await one('group');
  check(
    'moving a group takes the nodes inside it and leaves the one beside it',
    startAfter.x > startBefore.x &&
      startAfter.y > startBefore.y &&
      movedBox.x > group.x &&
      farAfter.x === farBefore.x &&
      farAfter.y === farBefore.y &&
      (await one('note')).x === commentBefore,
    JSON.stringify({ startBefore, startAfter, farBefore, farAfter }),
  );

  // 36e. One undo for the whole gesture: the box and every node it carried, in one step.
  await t.undo();
  check(
    'one undo takes the move back whole',
    JSON.stringify(await nodeAt('gg-start')) === JSON.stringify(startBefore) &&
      (await one('group')).x === group.x,
    JSON.stringify({ node: await nodeAt('gg-start'), box: (await one('group')).x }),
  );

  // 36f. The corner resizes and nothing else: membership is derived from where the box ends up,
  //      so a node the corner sweeps over is simply inside it afterwards – it is not dragged.
  const corner = await json(`__gm.graph.annotationAt(${JSON.stringify(group.id)}, true)`);
  await drag(corner.x, corner.y, corner.x + 60, corner.y + 40);
  await settle();
  const resized = await one('group');
  check(
    'the corner resizes the box while every node stays put',
    resized.w > group.w &&
      resized.h > group.h &&
      JSON.stringify(await nodeAt('gg-start')) === JSON.stringify(startBefore),
    JSON.stringify({ before: { w: group.w, h: group.h }, after: { w: resized.w, h: resized.h } }),
  );

  // 36f2. With snapping on, the corner obeys the grid like a dragged node does – and it is the far
  //       edge that lands on it, because the near one is exactly what a resize must not move.
  const snapLabel = await locate('Snap');
  // The checkbox sits right of the "Snap" label; locate() gives the label's text centre.
  await click(snapLabel.x + 30, snapLabel.y);
  const held = await one('group');
  const snapCorner = await json(`__gm.graph.annotationAt(${JSON.stringify(group.id)}, true)`);
  // 53 and 37 are deliberately ragged: a multiple of 24 afterwards cannot come from the gesture.
  await drag(snapCorner.x, snapCorner.y, snapCorner.x + 53, snapCorner.y + 37);
  await settle();
  const snapped = await one('group');
  check(
    'with snapping on the resized box ends on the grid, without moving its near corner',
    (snapped.x + snapped.w) % 24 === 0 &&
      (snapped.y + snapped.h) % 24 === 0 &&
      snapped.x === held.x &&
      snapped.y === held.y &&
      snapped.w > held.w,
    JSON.stringify({ x: snapped.x, y: snapped.y, w: snapped.w, h: snapped.h }),
  );
  await click(snapLabel.x + 30, snapLabel.y);

  // 36g. A freely picked colour, typed as hex into the inspector. The point is the second colour:
  //      the text flips to black on a light fill, which is what makes a free picker safe.
  await evaluate(
    `__gm.state.select({ kind: 'annotation', assetId: 'gg-logic', annotationId: ${JSON.stringify(group.id)} })`,
  );
  const field = await json("__gm.inspectorField('Color')");
  await click(field.x, field.y);
  // The field already holds the current hex; typing without this appends to it and parses as nothing.
  await press('a', { ctrl: true });
  await typeText('#ffe08a');
  await press('Enter');
  const colored = await one('group');
  check(
    'a group takes any colour, and its title turns black to stay readable on a light one',
    colored.color === '#ffe08a' && colored.textColor === '#000000',
    JSON.stringify({ color: colored.color, textColor: colored.textColor }),
  );
  await shot('36-group-colored');

  // 36h. Delete takes the box and nothing else. A group that silently deleted what it framed
  //      would be the most expensive surprise in the editor.
  const nodesBefore = await json(
    "__gm.state.project.assets.find((a) => a.id === 'gg-logic').graph.nodes.length",
  );
  await press('Delete');
  check(
    'deleting a group leaves every node it framed exactly where it was',
    (await one('group')) === null &&
      (await json("__gm.state.project.assets.find((a) => a.id === 'gg-logic').graph.nodes.length")) ===
        nodesBefore &&
      JSON.stringify(await nodeAt('gg-start')) === JSON.stringify(startBefore),
    JSON.stringify({ nodes: nodesBefore, boxes: (await boxes()).map((a) => a.kind) }),
  );

  // 36i. And it all survives the round trip through the store, which is what writing a note is for.
  await t.saved();
  const stored = await t.api(`projects/${t.projectId}`);
  const saved = stored.project.assets.find((a) => a.id === 'gg-logic');
  check(
    'the comment is part of the saved document, the deleted group is not',
    (saved.graph.notes ?? []).length === 1 &&
      (saved.graph.notes ?? [])[0].text === 'Comment' &&
      (saved.graph.groups ?? []).length === 0,
    JSON.stringify({ notes: saved.graph.notes, groups: saved.graph.groups }),
  );
}