ls1intum / Apollon

UML Modeling Editor written in React
https://apollon-library.readthedocs.io
MIT License
68 stars 22 forks source link

Reduce redux operations for many elements #153

Closed iozbeyli closed 3 years ago

iozbeyli commented 3 years ago

Checklist

Motivation and Context

Updating redux state with the movement of elements can cause problems when there are many elements on the page. With this change we are updating redux state at the end of the movement when there are many elements. Number of elements is determined according to cpu power of the user.

Description

  1. Added cpu performance measure at the beginning
  2. Moved element position change to state when there are many elements
  3. Removed unnecessary state duplication from reducers
  4. Used animationframe instead of debounce for updating movement on mouse move

Steps for Testing

  1. Place elements on the screen and move them
  2. Performance tab of Google dev tools can be used, it also allows you to add cpu throttle