* chore: move layout map function to its own file
* chore: move graph render update map function to a file
* fix: test graph integration and rendering with missing events
* fix: return in graph integrator if missing data
* fix: graph render skips adding edges if data is missing
* fixup! fix: test graph integration and rendering with missing events
* fixup! fix: test graph integration and rendering with missing events
* fixup! chore: move graph render update map function to a file
* fix: add Audion.GraphEdge and related types to devtools
* fixup! fix: return in graph integrator if missing data
* fixup! fix: graph render skips adding edges if data is missing
* fixup! chore: move layout map function to its own file
* fixup! fix: test graph integration and rendering with missing events
* Explicitly mark runtime dependencies.
* Use TypeScript and official DevTools Protocol typings.
* Add typescript to package.json
* Debug up build files.
* Clean config.
* Log verbose.
* Remove import.
* Emit sourcemaps in dev only.
- Support multiple Web Audio contexts
- Render ports on nodes
- Smooth edge lines
- Draw edge lines between the ports the edge connects
- Add a loading screen until the panel's script is ready
- Add button that fits the graph to the viewport
- Zoom viewport around the mouse cursor
- Add viewport margin
- Constrain viewport panning when zoomed within the graph bounds
- Remove unused files
Multiple Web Audio Contexts
Collect web audio graph data in the devtools script for when the panel is opened and connects. On the panel the initial set of current graphs and updates is collected. One of those current graphs can be selected with the GraphSelector instance and it will passed on to the worker for layout and back to the panel for rendering. As one graph is rendered at any time, one instance of the rendering logic and state is reused with each graph, whichever one is currently selected. To the rendering logic receiving a graph for a web audio graph other than what it last displayed is the same as the previous graph destroying all of its nodes and making brand new ones.
The graph is created with nodes and edges added in the devtools page.
Pass the graph to the devtools panel, which sets node sizes, and passes
to a web worker. On the web worker dagre lays out the graph and sends it
back to the panel. When the panel receives it, it updates the positions
of nodes and updates edge lines.