adminandClaude Opus 5.5
b9d1602b94
An agent that built a graph through MCP left every new node in one row. In the first real test that put nine nodes on a line 2080 px long, with the Owner's links running straight through all the others. Placing nodes by hand cost nine move_node calls and guessed heights. The agent now gives no coordinates, and the editor lays the nodes out. - arrange.ts is a pure function. It puts the flow into columns from left to right and sets an Owner or Get right before the first node it feeds. It orders each column for the fewest crossings and lines nodes up by their linked ports without overlaps. - Node sizes come from the drawn NodeView in the browser and from an estimate in unit tests. Both share the constants in nodeBox.ts. - run_commands arranges the nodes that came without x and y when the call ends, inside the same undo step. Nodes that were there stay. - New command arrange_graph and new tool lint_graph. The lint counts overlaps, crossings, links through foreign nodes, backward links and the longest links, with example ids. - The relay instructions tell the agent not to give coordinates and to fetch far values with a second Get or Owner node. - An Arrange button next to the snap magnet in all eight graph tabs. It arranges the selected nodes, or all of them, as one undo step. Found while testing on a real project: - lint_graph missed a crossing where two links swap rows exactly mirrored. Both curves then share a sample point in the middle, and only a crossing between two sample points was counted. Links that meet on a point count now (segmentsMeet). - The Arrow-key graph with one Owner for four Moves cannot get below 8 crossings. The Owner feeds object in row 2 of Move, between exec and dt of the key, so it always crosses one of them. Tests: - graph-arrange, agent-edit, snap-toggle: 33/33. The swapped-rows test was red before the fix (0 instead of 1). - Four counter-checks that bend arrange or the edit plan, all red. - e2e 71 on melektaus-atx: 18/18. Lint after the build shows 0 overlaps, 0 links through nodes, 0 backward. Arrange takes a tangled graph from 3 backward links and 2 crossings to 0, and one Ctrl+Z restores it. - Gate on melektaus-atx: CHECK EXIT 0, 318 files, 4917 tests, measured before the lint fix. - Live through MCP on the user's project: lint_graph reports 8 crossings after Arrange, matching the screenshot. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Button, Theme } from '../../ui';
|
|
import { HEADER_ICON_SVG } from '../panels/headerIcons';
|
|
|
|
/** Whatever a tab snaps: the graph canvas, the vector art canvas. A graph arranges its nodes too. */
|
|
export interface Snappable {
|
|
setSnapping(on: boolean): void;
|
|
arrange?(): void;
|
|
}
|
|
|
|
/** A graph, any of them, snaps from the start (#391); a curve and a vector art wait for the magnet. */
|
|
export const GRAPH_SNAPS_AT_FIRST = true;
|
|
|
|
/**
|
|
* The magnet every tab that snaps carries in its header (#194): an icon toggle, lit at first where
|
|
* its target starts snapping, as every graph does (#391). A graph's tab has *Arrange* beside it
|
|
* (#429), which is there and greyed out exactly when the magnet is.
|
|
*/
|
|
export class SnapToggle {
|
|
readonly button: Button;
|
|
readonly arrangeButton: Button | null;
|
|
|
|
constructor(
|
|
private readonly target: () => Snappable,
|
|
private on = false,
|
|
arranges = false,
|
|
) {
|
|
this.button = new Button('', {
|
|
width: Theme.controlHeight,
|
|
icon: HEADER_ICON_SVG.snap,
|
|
toggle: true,
|
|
tooltip: 'Snap to the grid',
|
|
onClick: () => this.set(!this.on),
|
|
});
|
|
this.button.setToggled(on);
|
|
this.arrangeButton = arranges
|
|
? new Button('Arrange', {
|
|
tooltip: 'Arrange the selected nodes, or all of them, left to right',
|
|
onClick: () => this.target().arrange?.(),
|
|
})
|
|
: null;
|
|
}
|
|
|
|
get snapping(): boolean {
|
|
return this.on;
|
|
}
|
|
|
|
get widgets(): readonly Button[] {
|
|
return this.arrangeButton ? [this.button, this.arrangeButton] : [this.button];
|
|
}
|
|
|
|
set(on: boolean): void {
|
|
this.on = on;
|
|
this.target().setSnapping(on);
|
|
this.button.setToggled(on);
|
|
}
|
|
|
|
setEnabled(on: boolean): void {
|
|
this.button.setEnabled(on);
|
|
this.arrangeButton?.setEnabled(on);
|
|
}
|
|
}
|