Use ResizeObserver to get chart size #56
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I'm trying to improve the general performance of the library because I found out that dragging the bar elements drops the frame rate below 60fps. My initial naive attempt here is to remove operations that I think are expensive and hope that on the way the performance will get better.
As a side effect this pull request fixes some appearance issues when new bars get created: They now don't animate from the left side or the chart but scale in from the center of their final position (see videos below).
Before
vue-ganttastic_before-change.mp4
New bar animates in from left side of chart and transforms to final position.
After
vue-ganttastic_after-change.mp4
New bar appears on final position.
The implementation prevents the expensive use of multiple
getBoundingClientRect
.Because we pass down the DOM reference we don't need to use
Element.clostest
.To make things simpler I used
useResizeObserver
from vue-use. This shouldn't increase file size by much since it's really well tree-shakable. If you don't want this we could write our own small implementation / copy the vue-use function over.I couldn't find out why, but this doesn't fully resolve the appearance issue: On the homepage of the docs (https://infectoone.github.io/vue-ganttastic/) the animation issue is still present after the fix.
This branch is based on the fix-lint-and-docs pull request. The diff can be seen here: dpschen/vue-ganttastic@feature/fix-lint-and-docs...dpschen:vue-ganttastic:feature/further-improvements
My intend is to use the same principle for the barElement so that we don't have to use
getElementById
in combination with the expensiveoffsetWidth
(see: https://gist.github.com/paulirish/5d52fb081b3570c81e3a). Meaning having the current dimensions of the bar always available so that we only have to pass reference to them.Further performance optimisation could be archived by throttling dragging events with
requestAnimationFrame
.