Files
GMW/services/frontend/src/components/shell/scene-graph-context.tsx
T

105 lines
2.8 KiB
TypeScript

"use client";
import {
createContext,
type ReactNode,
useCallback,
useContext,
useMemo,
useRef,
useState,
} from "react";
/**
* SceneGraph bridge — views publish their live graph to the stage.
* The frame provides the setter; the stage consumes the graph.
* Keeps SSR seed pattern intact: page.tsx seeds view.tsx, view publishes.
*/
import type { ConstellationGraph } from "@/lib/constellation/graph";
export interface SceneGraphState {
graph: ConstellationGraph;
/** Node id currently focused (drives fly-to / highlight). */
focus: string | null;
}
type FocusUpdate = string | null | ((prev: string | null) => string | null);
interface SceneGraphContextValue {
state: SceneGraphState | null;
publish: (state: SceneGraphState) => void;
setFocus: (update: FocusUpdate) => void;
}
const SceneGraphContext = createContext<SceneGraphContextValue>({
state: null,
publish: () => {},
setFocus: () => {},
});
export function SceneGraphProvider({ children }: { children: ReactNode }) {
const [state, setState] = useState<SceneGraphState | null>(null);
const stateRef = useRef<SceneGraphState | null>(null);
const publish = useCallback((next: SceneGraphState) => {
const prev = stateRef.current;
const sameShape =
prev &&
prev.graph.nodes.length === next.graph.nodes.length &&
prev.graph.edges.length === next.graph.edges.length &&
prev.focus === next.focus;
if (!sameShape) {
stateRef.current = next;
setState(next);
return;
}
// Same shape — still update node values/labels in place.
let changed = false;
if (prev) {
for (let i = 0; i < next.graph.nodes.length; i++) {
const a = prev.graph.nodes[i];
const b = next.graph.nodes[i];
if (a?.id !== b?.id || a?.label !== b?.label || a?.value !== b?.value) {
changed = true;
break;
}
}
}
if (changed || !prev) {
stateRef.current = next;
setState(next);
}
}, []);
const setFocus = useCallback((update: FocusUpdate) => {
setState((prev) => {
if (!prev) return null;
const next = typeof update === "function" ? update(prev.focus) : update;
return next === prev.focus ? prev : { ...prev, focus: next };
});
}, []);
const value = useMemo(
() => ({ state, publish, setFocus }),
[state, publish, setFocus],
);
return (
<SceneGraphContext.Provider value={value}>
{children}
</SceneGraphContext.Provider>
);
}
export function useScenePublish(): (state: SceneGraphState) => void {
return useContext(SceneGraphContext).publish;
}
export function useSceneFocusSetter(): (update: FocusUpdate) => void {
return useContext(SceneGraphContext).setFocus;
}
export type { FocusUpdate };
export function useSceneGraph(): SceneGraphContextValue {
return useContext(SceneGraphContext);
}