TypeScript module for an interactive network topology map with:

• zoom (wheel + API), pan, zoom-to-area,
• custom minimap,
• edit mode with node-only move,
• snap-to-grid and dynamic alignment guides,
• JSON serialization/deserialization.

The repository also contains WorkflowEditor, a workflow-specific editor with pan/edit modes, state transitions, wheel zoom, and alignment guides for dragged states.

pnpm install

pnpm run typecheck
pnpm run build

build now uses Vite library mode and generates:

• dist/index.js (ES module),
• dist/index.umd.js (UMD bundle),
• dist/**/*.d.ts (TypeScript declarations).

pnpm run demo

Open: http://localhost:5173/vanilla-index.html

pnpm run demo:build

Output: dist/demo

pnpm run demo:build
docker compose up -d

Open: http://localhost:8080

• new Topology(config)
• loadData(nodes, links)
• toJSON()
• fromJSON(data)
• data.elements.getIdsByDataType(type)
• setMode('pan' | 'zoomToArea' | 'edit')
• getMode()
• setSnapToGrid(enabled)
• setGuidesEnabled(enabled)
• notifyResize({ main?, minimap? })
• resizeMain(width, height)
• resizeMinimap(width, height)
• destroy()

fromJSON(data) reads data.viewport and restores it by default. Set preserveViewportOnLoad: true in config to keep current viewport on load. Set fitToPageOnLoad: true to auto-fit the graph on loadData() and on fromJSON() when saved viewport is absent.

const managedObjectIds = map.data.elements.getIdsByDataType('managedobject');

Recommended host integration:

map.notifyResize({
  main: { width: mainWidth, height: mainHeight },
  minimap: { width: minimapWidth, height: minimapHeight }
});

• ExtJS: /Users/dima/Projects/topo-map/examples/extjs-launch.js
• Vanilla JS (no ExtJS): /Users/dima/Projects/topo-map/examples/vanilla-index.html + /Users/dima/Projects/topo-map/examples/vanilla-launch.js