Controlled state
Host the diagram plus runtime selection, viewport, mode, and dirty flags.
Runtime state
WireDiagram remains durable. Selection, viewport, mode, and dirty state can be controlled by the host without becoming persisted diagram fields.
tsx
import "@aigentive/wire-react/styles.css";
import { useState } from "react";
import {
WireWorkspace,
type WireMode,
type WireSelection,
type WireViewport
} from "@aigentive/wire-react";
export function ControlledWorkspace({ initial, optionCatalog }) {
const [diagram, setDiagram] = useState(initial);
const [selection, setSelection] = useState<WireSelection>({ nodeIds: ["qualify"], edgeIds: [] });
const [viewport, setViewport] = useState<WireViewport>({ x: 0, y: 0, zoom: 1 });
const [mode, setMode] = useState<WireMode>("edit");
const [dirty, setDirty] = useState(false);
return (
<WireWorkspace
diagram={diagram}
onChange={setDiagram}
selection={selection}
onSelectionChange={(next) => setSelection(next)}
viewport={viewport}
onViewportChange={(next) => setViewport(next)}
mode={mode}
onModeChange={(next) => setMode(next)}
dirty={dirty}
onDirtyChange={(next) => setDirty(next)}
optionCatalog={optionCatalog}
/>
);
}