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

Memory leak of UIPointerActions 'uidrag' #70

Closed
cccdupont opened this issue Jul 21, 2019 · 8 comments · Fixed by #71
Closed

Memory leak of UIPointerActions 'uidrag' #70

cccdupont opened this issue Jul 21, 2019 · 8 comments · Fixed by #71

Comments

@cccdupont
Copy link

I've been wanting to use pts.js to draw interactive shapes. But the use of the "uidrag" action (i.e. for translating the shape) results in slowing down drastically the performances. Is this behaviour intended ? Or have I misused the "on" method of UIDragger ?

Fiddle to reproduce:

https://jsfiddle.net/ygov5x2m/ : click and drag on the shape, and open the console to see the issue.

pts version: 0.8.6
using Chromium 75.0.3770.90

@williamngan
Copy link
Owner

Thanks for reporting @cccdupont . We'll investigate as soon as possible.

@tibotiber if you have a moment, would you be able to help us take a look and see if there's a quick fix? Thanks!

@tibotiber
Copy link
Contributor

tibotiber commented Jul 23, 2019

Hi @cccdupont, very good catch, thank you :). And you're using on() properly, although note that you also have onDrag() etc if that's a better fit for you.

@williamngan thanks for the ping. I had a quick look, our issue comes from _holds not begin cleared properly.

_holds is an array of event strings being held, elements are added using hold() which returns the index of the added element (see UI.ts L191), and removed using unhold() which removes the element at a given index (see UI.ts L201). The issue is that UIDragger builds uidrag and uidrop events by holding multiple events, it holds move then drop keeping their indices (see UI.ts L442-L443) then unholds them in the same order (see UI.ts L456-L457) so by the moment drop is removed, it has changed index and remains there. Also UIButton is extended by UIDragger and has its own move event holding which probably adds to the indices confusion.

A fix for this would be to use something less volatile for the "id" of the members of _holds. Or maybe we could simply keep a count of how many live holding requests there are for each event in an object? Something like{ move: 2, up: 0, ... } then hold() would increment and unhold() decrement, and checking if an event is held would be like _holds[key] > 0. There might be better ways.

What do you guys think? I can push a PR if you're good with the proposed solution. I'm open to better alternatives.

@williamngan
Copy link
Owner

Good catch, @tibotiber . Agreed that we should use something less volatile than an array index. How about if we store them in an object, and then use delete key instead of splice( index ) ?

I'm open to any solution that you think it's best. Would greatly appreciate it if you have time to push a PR. Thank you so much @tibotiber 🙏

@tibotiber
Copy link
Contributor

All good, pushed a PR and it seems to solve the memory leak. I went with your idea @williamngan, but I've used a Map instead of an object so keys can be numbers. There was another element to the leak, we were always holding events and creating events handlers even if they already existed, so I now make sure to hold and handle events only once.

@tibotiber
Copy link
Contributor

Pretty timely report @cccdupont, I've just met with this in my own app :). You saved me a good amount of debugging hours.

@cccdupont
Copy link
Author

@tibotiber @williamngan thank you for the quick fix !

@williamngan
Copy link
Owner

@cccdupont 0.8.7 is published with the fix. Please give it a try and reopen this if you still encounter issues.

@tibotiber thank you so much!

@cccdupont
Copy link
Author

@williamngan It's working perfectly now, thank you again ! Loving the UIDragger 👍

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 a pull request may close this issue.

3 participants