search

vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
1.97k stars 293 forks source link

onZoom method is called even without touching the globe and triggers all events on htmlElement elements #193

Closed yano1978 closed 3 months ago

yano1978 commented 3 months ago

Bug

When using onZoom, is called even without touching the globe and makes htmlElement markers flickering because of all events triggered on them

Steps to reproduce the behavior:

  1. Add .onZoom method to a globe instance and console.log(coordinates)
  2. Try to hover markers and see how flickering is so high that I cannot click on them (see video attached)

Expected behavior I would expect toZoom to be triggered only when it actually changes and to not effect other elements. I tried using a debouncing function and it improved a bit, but still very laggy.

Additional context Is there a way of "controlling" onZoom event amount (or with any other method/helper)?

https://github.com/vasturiano/globe.gl/assets/47816089/7694e5ce-7c8f-4ec5-b484-762b8ab3fd0d

Thanks and very best!

yano1978 commented 3 months ago

Ok I solved it actually, the issue was that all htmlElement elements were recreated all the time because of htmlElementsData's dynamic nature, so instead of debouncing inside onZoom, I do that outside and that really marginalise the issue.