Focus a graph before undo. History, rendering, events, semantic state, and teardown stay instance-owned.
// Each `Ogjs` instance receives its own container and graph data. Rendering, events,
// selection, history, semantic state, and teardown stay instance-scoped, so focusing one
// graph never changes another.
import { Ogjs } from '../../src/index';
function build(container, prefix, color) {
// A factory may create any number of independent instances from the same integration code.
// Namespaced ids here make the isolation visible but are not required by OGJS.
const graph = new Ogjs({ container, theme: 'light', accessibility: { label: `${prefix} network` } });
graph.setGraph({
nodes: [
{ id: `${prefix}-a`, x: -70, y: 20, size: 15, color },
{ id: `${prefix}-b`, x: 70, y: -20, size: 15, color },
],
edges: [{ source: `${prefix}-a`, target: `${prefix}-b` }],
});
graph.addNodes([{ id: `${prefix}-temporary`, x: 0, y: 90, size: 12, color: '#f59e0b' }]);
graph.camera.fit();
return graph;
}
const left = build('#graph-left', 'left', '#2563eb');
const right = build('#graph-right', 'right', '#9333ea');
// Destroying one instance releases only its renderer, events, semantic view, and history. The
// neighboring graph remains mounted because no lifecycle state is shared globally.
document.querySelector('#destroy-left').addEventListener('click', () => left.destroy());