Refactor `ForceSimulation` to allow for more dynamism

[regexident]

This admittedly major refactor of ForceSimulation resolves #198, #202, #203 and #204, while adding support for highly dynamic, yet efficient simulations.

Changes

• Exports cloneData as const (rather than let) (resolves #203)
• Updates alpha prop based on internal d3 simulation (important: dynamic sims now need reheating!) (resolves #202)

Improvements

• No longer re-initializes forces on unrelated prop-changes (resolves #204)
• No longer re-initializes all forces if any of them changes (resolves #201)
• No longer rebuilds internal d3.Simulation for static=true on every frame

Bug Fixes

• Automatically evicts dropped forces (resolves #206)

New features

• Exports start, tick and end events (resolves #198)
• Exports stopped prop for pausing simulation

Example changes

• Adds all sorts of controls to "Force Graph" example for simulation forces and parameters

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 5e911f704990224feb0315e686ffb87a51e2ba43

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
layerchart	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 1:20pm

[regexident]

FYI: I added "collide easing" (as described in #198) to the "Force Graph" example for illustration purposes. I don't expect/intend it to remain there. This goes for most of the example changes in this PR, honestly.

[techniq]

@regexident Wow, this looks great, thanks! Will take me a bit to read through fully (definitely more complicated implementation from before), but makes sense at first pass.

I did notice a regression with the Force Group example no longer clumping. My guess is related to "does not re-initialize forces on unrelated prop-changes".

https://github.com/techniq/layerchart/assets/177476/156ee933-a4e8-4b79-b4cc-02fd2019120f

Also, what do you say we keep the changes you made to Force Graph as a new "Force Debug" or "Force Playground" example?

[regexident]

@regexident Wow, this looks great, thanks! Will take me a bit to read through fully (definitely more complicated implementation from before), but makes sense at first pass.

Yeah, it is indeed quite a bit more complex. 😅 But at the benefit of being much, much more efficient and also more versatile.

I did notice a regression with the Force Group example no longer clumping. My guess is related to "does not re-initialize forces on unrelated prop-changes".

CleanShot.2024-06-23.at.10.02.08.mp4

Oh, I missed that button, good catch, I'll look into it!

Also, what do you say we keep the changes you made to Force Graph as a new "Force Debug" or "Force Playground" example?

Either that or I would just add them to the "Force Graph" example directly. Minus some of the bells and whistles that were only meant as a demonstration of things this refactor enables, such as the controls for "State", "Status", "Charge Distance Min", "Charge Distance Max", and "Collide Strength Target" (which I would just replace with a simple "Collide Strength" control).

[regexident]

@techniq One significant (but intentional) change of this refactor is that <ForceSimulation … static={false}> now needs manual reheating (by either adjusting alpha for an instant re-heat, or alphaTarget for a smoother re-heat).

I think that this behavior is a net-positive, as it …

• a) now closely resembles d3-force's behavior, making it fairly straight-forward to port d3 visualizations to LayerChart.
• b) is highly versatile in what fine-tuned behavior is supported (e.g. reduced re-heating on drag, etc.)
• c) instant full-on reheating (as prior to this PR) is still possibly by re-setting alpha={1}

---

It's also important to note that with today's ForceSimulation any changes to cached forces already require manual re-heating, but with the big caveat of alpha not updating, so alpha={1} might actually get swallowed by Svelte, if that's what it was set to before.

So in a way things are more consistent now.

[regexident]

@techniq I've adapted all other examples under "Force", resolving any regressions (like the one you mentioned above) and making use of more efficient force caching.