How painekillers/tree-builder works
tree-builder is a browser-based graph/tree viewer: callers provide nodes and a root, then the viewer lays out the graph, renders it on a canvas, and offers search, theme switching, node details, and navigation controls. The graph, world, and viewer excerpts support the main runtime links; README provides no additional capability detail. The sample app demonstrates the workflow, while some viewer UI handlers and theme implementations are only partially or not sampled.
Main entry points: viewer.js Viewer Controller · bridge.js Layout Bridge · world.js Canvas World · main.js Sample App
Components 14
Graph Input
- Sample App
main.js - Node Data
nodes.js
Graph Rendering
- Graph Model
core/graph.js - Layout Bridge
core/world/bridge.js - Canvas World
core/world/world.js - Camera
core/world/camera.js - Render Objects
core/world/objects.js
Viewer Interface
- Viewer Controller
viewer/viewer.js - Fuzzy Search
viewer/search.js - Tooltips
viewer/tooltip.js
Themes
- Theme Control
viewer/theme.js - Theme Definitions
core/themes - Theme Stylesheets
viewer/themes
Other components
- Viewer User
Connections 18
- Viewer User → Viewer Controller: operates
viewer/viewer.js - Sample App → Node Data: loads data
main.js - Sample App → Viewer Controller: creates viewer
main.js - Sample App → Graph Model: constructs graph
main.js - Viewer Controller → Graph Model: accepts graph
viewer/viewer.js - Viewer Controller → Layout Bridge: configures layout
viewer/viewer.js - Layout Bridge → Graph Model: builds layout
core/world/bridge.js - Layout Bridge → Render Objects: creates render objects
core/world/bridge.js - Layout Bridge → Canvas World: adds objects
core/world/bridge.js - Viewer Controller → Canvas World: initializes canvas
viewer/viewer.js - Viewer Controller → Camera: creates camera
viewer/viewer.js - Canvas World → Render Objects: draws objects
core/world/world.js - Canvas World → Camera: applies view
core/world/world.js - Viewer Controller → Fuzzy Search: queries index
viewer/viewer.js - Viewer Controller → Tooltips: initializes tooltips
viewer/viewer.js - Viewer Controller → Theme Control: applies themes
viewer/viewer.js - Theme Control → Theme Definitions: loads definitions
viewer/theme.js - Theme Control → Theme Stylesheets: loads stylesheets
viewer/theme.js