Pause animation loop when removing canvas source

[gpbmike]

Problem

When removing a canvas source, the map can be left in a infinite animation loop.

Solution

When removing a canvas source, pause the animation.

Additional Changes

Protect against setting more than more animation loop per canvas source.

• briefly describe the changes in this PR
• write tests for all new functionality
• manually test the debug page

fixes #5097

[gpbmike]

I would love some help writing tests for this PR. I don't feel like I'm knowledgable enough about the internals to know how to write a good test.

I would like to add a canvas source and then remove it and check for rerenders.

[lbud]

Hey @gpbmike, thanks for your contribution!

The canvas source unit tests are here. All unit tests are run with <yarn|npm> run test-unit, but you can run just the one file with node test/unit/source/canvas_source.test.js. Adding a 'remove source' test within the larger CanvasSource test, following the patterns of the other subtests, would be good here.

Right now the canvas source tests stub source.map.style.animationLoop. What I'd recommend is changing that to include an actual AnimationLoop instance, like we do in animation_loop.test.js. Then you'll be able to use the AnimationLoop#stopped method to check to make sure removing the canvas source cancels the animation loop.

Note that you'll probably have to borrow a few concepts from GeoJSONSource and its respective unit test since it's the only other source type that currently implements onRemove and broadcasts an event.

Let me know if you have any more questions! And if you don't have enough bandwidth I'm happy to pick this up.

[gpbmike]

@lbud Thanks for your help again. I have added tests for onRemove, pause, and play.

[jfirebaugh]

Thanks @gpbmike!