This repo demonstrates an interactive force-directed graph layout integration with tldraw. It uses WebCola, JS port of libcola. This repo is aimed to be a starting point for further exploration and there's lots to be explored! I would also love PRs if you have core improvements which everyone can benefit from.
You can mess around with it online here
tldraw.graph.montage.mov
- Select shapes you wish to include in the physics simulation
- Click the "Graph" button (or hit "G")
- Move shapes around and watch it go brrrrrrrrrr
- Click "Graph" again to stop the simulation
- Any shapes connected with arrows are included in the graph layout (this extends to videos, frames, and all other shapes)
- When you select a shape, it will be "fixed" so you can move it around. Deselect to unfreeze.
- Making a shape red will fix it in place
- Light blue arrows create an alignment constraint between two shapes
- Much more interesting constraints are possible, PRs welcome!
yarn install
yarn devThen go to http://localhost:5173 in your browser.
Multiplayer is supported* using yjs and partykit. To deploy:
yarn deploy*Note that multiplayer is essentially the same as a single client manually moving many shapes each frame, but it sure is fun! Due to a connection bug I've disabled multiplayer (err, commented out line 25 of App.tsx). PRs for multiplayer fixes/improvements are very welcome!
Please open an issue or PR if you have any suggestions or improvements! Especially looking for:
- Architecture / performance improvements / bug fixes
- More interesting constraint demonstrations
- Approaches to proper multiplayer support
- Rotation is not considered in the layout (PRs welcome!)
- Performance is much poorer than it needs to be, we're currently restarting the layout sim every frame (I know, I know...) and PRs to fix this or otherwise speed things up are very welcome!
- Due to the current edge length calculation, it's possible for the graph to never reach a stable / zero energy state