Manage the preview's rerenders using events

[sophiedeziel]

Closes #236

Summary

In order to have the library perform the renders whenever needed, and without the client's intervention (✨ magical ✨), I removed the public .render function from the main class, the calls from the demo app, and worked from there to have re-renders performed automatically on any setting change.

I had trouble assigning the default and initial values without triggering 1000 initial renders. I realized that it would work really well with a debounce and an event listener that only starts listening after the initial setup.

So I introduced a whole events dispatcher that clients can use!

Example:

  const preview = new GCodePreview({
      canvas: document.querySelector('canvas'),
      extrusionColor: 'hotpink'
  });

  preview.addEventListener('animationComplete', () => {
    console.log('Animation complete!')
  });

I did not add the ability to remove a listener yet, I can do it separately or as part of this.

Key changes

• Added .addEventListener that can listen to many different events from the lib.
  • Converted some of the existing code and logic to use them when appropriate
• I had to convert a ton of properties in SceneManager from simple propertied to _ prefixed with getters/setters. It makes the class very long and verbose, but at least they're all consistent!
• Changed some of the update logic in the demo. Instead of recreating a new preview object each time, I'm reseting it. This allows for an easier management of listeners:
  • Changed the presets structure a bit. Instead of a init preset, we can see them as presets for the UI, that is then applied to the preview.
  • Load presets -> merge with defaults -> apply to the demo UI -> UI listeners apply them to the preview
  • The flow above ensure that we push everything to the preview. When the preview can "tell us" something we should update (like the layer count), it's event listeners that we should use.

WIP

• The changes to the app broke the initial camera position preset.
• Tests

[github-actions]

Visit the preview URL for this PR (updated for commit 9de20ff):

https://gcode-preview--pr310-manage-renders-and-e-569o0jmk.web.app

_{(expires Wed, 08 Oct 2025 03:41:47 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 59bd114ae4847b32c2bba0b68620b9069a3e3531}

[sophiedeziel]

That's the key to re-render automatically on changes. This is setting listeners on all properties that we want to see reflected right away on the scene.

[sophiedeziel]

debounced event listeners to re-render! ✨ magical ✨

[sophiedeziel]

That's how I got rid of the es-lint disable comments when defining a class properties without using them in the constructor. Typescript implicitly uses Rest to assign the values, if I understood correctly.