Files
feuerwerk/src/editor/graph/GraphEditor.ts
T
rootandClaude Fable 5.1 e7d82bd1a9 State machines: asset, tab, State branch and Set state nodes (#51)
A state machine is an asset whose graph holds one `State` node per state
(no ports, name as title), edited in a new "State machine" tab that reuses
the graph canvas: right-click places "State n", snap toggle shared with the
Behavior tab via SnapToggle. `statemachine` is a value kind like texture
(port, literal node, variable, struct field, tagged list item).

Behaviors use it through `State branch` (one exec output per state) and
`Set state` (one exec input per state; the interpreter now hands `run` the
entry port). States live per behavior instance in NodeContext.states, with
no initial state. Ports derive from the inline picker or a wired
`State machine` literal; BehaviorLookup became GraphLookup with
behavior(id) and machine(id).

The Graph tab is labelled "Behavior" (key unchanged). Unit tests
(state-machine, kinds, catalog, ports), e2e step 26 and README added.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-12 18:00:23 +02:00

70 lines
2.6 KiB
TypeScript

import type { Asset, BehaviorAsset } from '../../core/model/Asset';
import { findAsset, findAssetOf } from '../../core/model/Project';
import { AssetTabEditor } from '../AssetTabEditor';
import type { EditorState } from '../state';
import { Breadcrumb } from './Breadcrumb';
import { GraphCanvas } from './GraphCanvas';
import { 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> {
private readonly snap = new SnapToggle(() => this.canvas);
readonly breadcrumb = new Breadcrumb();
private trail: Trail = [];
constructor(state: EditorState) {
super(state, { noun: 'Behavior', infoWidth: INFO_WIDTH });
this.breadcrumb.onPick = (index) => this.open(this.trail[index]!, backTo(this.trail, index));
this.mount(new GraphCanvas(state), this.snap.widgets, this.breadcrumb);
this.canvas.onOpenBehavior = (id) => this.open(id, descend(this.trail, this.currentAssetId, id));
// Play swaps in the runtime copy of the project, and back.
state.on('mode', () => this.refresh());
}
/**
* The bar goes up before the graph switches: switching fits the view to the canvas, and a bar
* appearing afterwards would cut the bottom of the fitted graph off.
*/
private open(assetId: string, trail: Trail): void {
this.trail = trail;
this.showTrail();
this.state.select({ kind: 'asset', assetId });
this.refresh();
}
protected override refresh(): void {
super.refresh();
const project = this.state.project;
this.trail = follow(this.trail, this.currentAssetId, (id) =>
Boolean(findAssetOf(project, id, 'behavior')),
);
this.showTrail();
}
private showTrail(): void {
const names = this.trail.map((id) => findAsset(this.state.project, id)?.name ?? '');
if (this.breadcrumb.show(names)) this.relayout();
}
protected override selectedId(): string {
return this.state.selectedBehaviorId ?? '';
}
protected override isMine(asset: Asset): asset is BehaviorAsset {
return asset.type === 'behavior';
}
protected override infoText(asset: BehaviorAsset): string {
const nodes = asset.graph.nodes.length;
const links = asset.graph.edges.length;
return `${nodes} ${nodes === 1 ? 'node' : 'nodes'} · ${links} ${links === 1 ? 'link' : 'links'}`;
}
protected override syncExtras(asset: BehaviorAsset | null): void {
this.snap.setEnabled(Boolean(asset));
}
}