Draw and revise investigation notes without leaving the graph. Every completed gesture is one undo step.
// Markup commands describe notes and shapes in graph coordinates, not screen pixels.
// MarkupDeck keeps annotations aligned through camera changes and records edits in OGJS
// history, so drawing, undo, export, and teardown share one lifecycle.
import { Ogjs } from '../../src/index';
import { MarkupDeck } from '../../src/annotations/MarkupDeck';
const og = new Ogjs({ container: '#viz', theme: 'light' });
og.setGraph({
nodes: [
{ id: 'case', x: 0, y: 0, size: 13, color: '#0f172a', label: 'Case' },
{ id: 'account', x: -150, y: 85, size: 9, color: '#2563eb', label: 'Account' },
{ id: 'device', x: 155, y: 80, size: 9, color: '#7c3aed', label: 'Device' },
{ id: 'merchant', x: 0, y: -135, size: 9, color: '#f59e0b', label: 'Merchant' },
{ id: 'signal', x: 195, y: -90, size: 8, color: '#10b981', label: 'Signal' },
],
edges: [
{ id: 'ca', source: 'case', target: 'account' },
{ id: 'cd', source: 'case', target: 'device' },
{ id: 'cm', source: 'case', target: 'merchant' },
{ id: 'ds', source: 'device', target: 'signal' },
],
});
og.camera.fit({
target: 'all', avoid: document.querySelector('.markup-note'),
paddingPx: 24, maxOccupancy: .44,
});
const deck = new MarkupDeck(og);
// Import a versioned annotation document rather than issuing drawing commands one at a time.
// Graph-space shapes and node anchors remain stable across pan, zoom, export, and reload.
deck.importDocument({ version: 1, annotations: [
{ id: 'focus', type: 'rect', x: -195, y: 125, w: 390, h: -250, color: '#f59e0b', label: 'investigation boundary' },
{ id: 'flow', type: 'arrow', x1: -115, y1: 55, x2: -20, y2: 5, color: '#ef4444', label: 'shared device' },
{ id: 'note', type: 'callout', nodeId: 'device', text: 'review ownership', color: '#7c3aed', dx: -72, dy: 54 },
] });
// The imported starting document is baseline state, not a user edit. Clearing history ensures
// the first Undo reverses the next authored action instead of removing initial markup.
og.history.clear();