Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animated bubble chart refactoring #53

Draft
wants to merge 8 commits into
base: master
Choose a base branch
from
Draft

Conversation

objerke
Copy link
Collaborator

@objerke objerke commented Oct 27, 2021

This code refactor of the animated bubble chart aims to solve a few issues that are present in the current version.

Issues:

  • When the mod is stressed, e.g. by marking very quickly, the rendering code can get out of sync and start reading from a disposed data view. This leads to a blank canvas and it can't recover until it is fully re-rendered.
  • The other issue concerns the highlight feature. When the visualization is animating, it is possible to pause the animation by hovering over a circle. The current version does not stop immediately when entering over a circle and it is possible to see a slight shift of the highlight ring and the circle.

The refactoring solves both these issues.

  • The visualization is no longer rendering DataViewRows. Instead it is rendering a Frame with Bubbles. The frames are handled by an AnimationControl, which is also responsible for the animation speed and the current index.
  • The transition effect between frames is paused immediately when hovering over a bubble. The transition starts again after a few hundred milliseconds when leaving the bubble. The small pause is meant to simplify movement between bubbles.

The code flow is as follows:

  • Data and property changes enter into the subscribe loop of main.ts
  • Frames are created and passed into the long lived animation control instance.
  • The animation control renders the visualization fully (index.ts:render) when receiving changes from main.ts
  • When starting the animation, the animation control will call the update code to only change the position of the bubbles.

@objerke objerke self-assigned this Oct 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants