refactor: more principled optimization animation support in @penrose/editor

[wodeni]

Description

Related issue/PR: #1000

#1000 re-introduced optimization animation in @penrose/editor by allowing "step size" configuration. However, because we handled repeated stepping by a simple while loop, there can be race conditions when the user press "resample" multiple times, i.e. the frames from the previous state might get rendered.

In general, the optimizer for a given diagram should stop running in the browser upon re-compilation and resample, but the animation is only possible if we call stepState and RenderStatic sequentially. To solve this problem, this PR uses (1) Recoil to manage the state transition between diagram states and (2) requestAnimationFrame to avoid too many recursive state updates in React and to ask the browser to render each frame. Importantly, we also call cancelAnimationFrame to make sure that there is only one pending animation request (source). Otherwise, there can be race conditions among animation frames just as before.

Implementation strategy and design decisions

• Implemented state management and animation frames described above
• Fixed errors on startup about roger if editor is running locally

Examples with steps to reproduce them

Checklist

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new ESLint warnings
• I have reviewed any generated changes to the diagrams/ folder

Open questions

N/A

[codecov]

Codecov Report

Merging #1017 (7be59c8) into main (3e7f647) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #1017   +/-   ##
=======================================
  Coverage   63.57%   63.57%           
=======================================
  Files          62       62           
  Lines        7810     7810           
  Branches     1786     1786           
=======================================
  Hits         4965     4965           
  Misses       2729     2729           
  Partials      116      116           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3e7f647...7be59c8. Read the comment docs.

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	7be59c8
Status:	✅  Deploy successful!
Preview URL:	https://07dc5d07.penrose-72l.pages.dev

View logs