Snap to the grid from the start in every graph tab (#391)
Laying out a graph by hand mostly means lining nodes up, so the magnet was switched on in nearly every session. Every graph tab now starts with it lit: Behavior, State machine, Shader, Particles, Sound FX, Instrument, the song's Routing and the Routing tab. - SnapToggle takes the state it starts in and lights its button to match. GRAPH_SNAPS_AT_FIRST sets it for the toggles and for GraphCanvas alike, so button and canvas cannot disagree. - Curve and Vector Art are no graphs and still start without it. - New hook __gm.graphSnapping(on?) reads every graph tab's magnet, or "mixed" where button and canvas differ, and switches them all. - The e2e harness reads the magnets after each navigate() and then switches them off, as it already sets the zoom transition to 0. Most checks drag a node to an exact spot. e2e 45 does the same itself, because the editor comes up there through the sign-in. - e2e 06 checks that all eight graph tabs started with the magnet on. The checks in 06, 26 and 65 that read it off now say they read what the harness left. Tests: - Unit snap-toggle: 4 tests, 1 new (lit at first, nothing asked of the target before a click). - e2e 06 (melektaus-atx): 150 checks, 1 new. e2e 34: 134 checks. - Gate (melektaus-atx, together with #390): 287 files, 4397 tests. - Pictures looked at: none, the state comes from the hook. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
e70954115c
commit
fe4e0d9f1a
18 files changed
+104
-25
No files matched your search
@@ -82,6 +82,7 @@ import { type PaletteEntry, paletteEntries } from './paletteEntries';
|
||||
import { NODE_WIDTH, NodeView, TITLE_HEIGHT } from './NodeView';
|
||||
import type { NodeFace } from './nodeFace';
|
||||
import { drawGraphGrid, FIT_MARGIN, inView, ZOOM_LIMITS, zoomedAbout } from './graphView';
|
||||
import { GRAPH_SNAPS_AT_FIRST } from './SnapToggle';
|
||||
import { GraphWiring } from './wiring';
|
||||
|
||||
/** One running instance's answer for a machine: which state it holds, and whose instance it is. */
|
||||
@@ -136,7 +137,7 @@ export class GraphCanvas extends Widget {
|
||||
draw: () => this.applyView(),
|
||||
});
|
||||
private panning: { startX: number; startY: number; panX: number; panY: number } | null = null;
|
||||
private snapping = false;
|
||||
private snapping = GRAPH_SNAPS_AT_FIRST;
|
||||
private readonly wiring: GraphWiring;
|
||||
private readonly drags: GraphDrags;
|
||||
/** A rubber-band selection in progress, in graph coordinates. */
|
||||
|
||||
@@ -4,14 +4,14 @@ import { AssetTabEditor } from '../AssetTabEditor';
|
||||
import type { EditorState } from '../state';
|
||||
import { Breadcrumb } from './Breadcrumb';
|
||||
import { GraphCanvas } from './GraphCanvas';
|
||||
import { SnapToggle } from './SnapToggle';
|
||||
import { GRAPH_SNAPS_AT_FIRST, SnapToggle } from './SnapToggle';
|
||||
import { backTo, descend, follow, type Trail } from './trail';
|
||||
|
||||
/** Room kept for the "N nodes · M links" readout, wide enough for a three-digit graph. */
|
||||
const INFO_WIDTH = 150;
|
||||
|
||||
export class GraphEditor extends AssetTabEditor<BehaviorAsset, GraphCanvas> {
|
||||
readonly snap = new SnapToggle(() => this.canvas);
|
||||
readonly snap = new SnapToggle(() => this.canvas, GRAPH_SNAPS_AT_FIRST);
|
||||
readonly breadcrumb = new Breadcrumb();
|
||||
private trail: Trail = [];
|
||||
/** A call followed into another behavior: the tab goes on to that document (#171). */
|
||||
|
||||
@@ -6,12 +6,20 @@ export interface Snappable {
|
||||
setSnapping(on: boolean): void;
|
||||
}
|
||||
|
||||
/** The magnet every tab that snaps carries in its header (#194): an icon toggle, off at first. */
|
||||
/** 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).
|
||||
*/
|
||||
export class SnapToggle {
|
||||
readonly button: Button;
|
||||
private on = false;
|
||||
|
||||
constructor(private readonly target: () => Snappable) {
|
||||
constructor(
|
||||
private readonly target: () => Snappable,
|
||||
private on = false,
|
||||
) {
|
||||
this.button = new Button('', {
|
||||
width: Theme.controlHeight,
|
||||
icon: HEADER_ICON_SVG.snap,
|
||||
@@ -19,6 +27,11 @@ export class SnapToggle {
|
||||
tooltip: 'Snap to the grid',
|
||||
onClick: () => this.set(!this.on),
|
||||
});
|
||||
this.button.setToggled(on);
|
||||
}
|
||||
|
||||
get snapping(): boolean {
|
||||
return this.on;
|
||||
}
|
||||
|
||||
get widgets(): readonly Button[] {
|
||||
|
||||
Reference in new issue
Block a user