b310-digital / teammapper

Mindmapping made simple: Host and create your own mindmaps. Share your mindmap sessions with your team and collaborate on mindmaps.
https://teammapper.org
MIT License
202 stars 16 forks source link

Implement D3 Simulation to add a force boundary #304

Open sorenjohanson opened 2 days ago

sorenjohanson commented 2 days ago

Proposed feature Right now, nodes can be stretched out endlessly, which in turn can cause issues with browser-based limitations of the <canvas> element. When a canvas element is too big, it can no longer be exported as an image.

One solution would be to add a "simple" bounding box (not so simple, since it'd need to be calculated every time we move a node). A more flexible solution would be to use D3's existing physics simulation capabilities to implement gravity. This would cause nodes to be "pulled" back to the center if they exceed canvas size. Ideally, this should be simpler to implement (since it is a global configuration and not node-based) and could be accompanied by a bounding box.