Convert Vue/HTML animation timeline keyframe section into a Canvas element

[Azagwen]

What is that?

This PR aims to reduce timeline stutter & load time by replacing the Vue rendered HTML keyframe elements with a single, fixed sized, and culled Canvas element.

Why, who needs this?

Animation size can heavily influence how the timeline performs as of now, with some extreme cases being able to straight up crash Blockbench if the Bing up All Animators Action were to be pressed (looking at you, Figurigamma). Whereas other, less extreme cases can take up to 30s to load a full timeline for all animators on some longer/more loaded animations.

This PR should be quite beneficial to projects with heavy animations that feature thousands of keyframes across hundreds of channels! Bringing up all animators on a file with 250.000+ keyframes takes a mere couple of seconds now, altho it is still quite choppy to scroll, it does not crash the app anymore.

Using a Canvas also means we do not need to worry about HTML reflow, something which Vue seems to do quite often I've realized. Here, when our canvas is re-flown, the renderer discards all keyframes that shouldn't be visible.

Some stylistic changes!

While working on this, I also added new icons for molang keyframes, and minified keyframes, since I already had a SVG renderer developped (no need to add blurry or pixelated text rendering here).
Keyframes now also respond to hovering with a color & size change!

Keyframe type	Regular	Molang	Discontinuous	Discontinuous Molang
Linear
Smooth
Bézier
Step
Minified

Known issue so far (checked = resolved):

• The graph editor seems to display with width: 0, height: 0, and with display: none, after the selector box was used.
• Turning off the graph editor does not update the keyframe canvas.
• Keyframe Canvas SVG icon rendering needs some more love, altho it is 90% of the way there, some more complex SVG formations cause it to render inaccurate or incorrect results.
  • Replaced SVG renderer with much simpler text renderer + updated icomoon font.
• The graph editor seems to struggle to properly drag bézier handles
• Dragging a graph bezier seems to go very fast down or up depending on graph size, leaving the mouse cursor quite easily

To-dos:

• TODO - Rendering DOM elements on the timeline is currently WIP, it should be restored soon, after I work out the few remaining kinks and unexpected issues listed above.

[netlify]

✅ Deploy Preview for blockbench-dev ready!

Name	Link
🔨 Latest commit	7481eea
🔍 Latest deploy log	https://app.netlify.com/projects/blockbench-dev/deploys/6a9918389394fd00089eb597
😎 Deploy Preview	https://deploy-preview-3714--blockbench-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Azagwen]

Tweaks to perform (checked = done):

• Graph editor keys should have their own CSS variables for scale, so they can be made smaller again
• Some plugins that add animation channels seem to cause offsets in the visual position of keys