From 6e2fbf46d7537f312a5bcb6313953e20270f356c Mon Sep 17 00:00:00 2001
From: Mike Horn <gpbmike@gmail.com>
Date: Tue, 12 Sep 2017 16:02:50 -0700
Subject: [PATCH] Pause animation loop when removing canvas source (#5243)

---
 src/source/canvas_source.js            | 15 +++++++---
 test/unit/source/canvas_source.test.js | 41 +++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/source/canvas_source.js b/src/source/canvas_source.js
index e43e488ba45..ccb0ea890f6 100644
--- a/src/source/canvas_source.js
+++ b/src/source/canvas_source.js
@@ -66,12 +66,16 @@ class CanvasSource extends ImageSource {
         let loopID;
 
         this.play = function() {
-            loopID = this.map.style.animationLoop.set(Infinity);
-            this.map._rerender();
+            if (loopID === undefined) {
+                loopID = this.map.style.animationLoop.set(Infinity);
+                this.map._rerender();
+            }
         };
 
         this.pause = function() {
-            this.map.style.animationLoop.cancel(loopID);
+            if (loopID !== undefined) {
+                loopID = this.map.style.animationLoop.cancel(loopID);
+            }
         };
 
         this._finishLoading();
@@ -87,7 +91,6 @@ class CanvasSource extends ImageSource {
     }
 
     onAdd(map: Map) {
-        if (this.map) return;
         this.map = map;
         this.load();
         if (this.canvas) {
@@ -95,6 +98,10 @@ class CanvasSource extends ImageSource {
         }
     }
 
+    onRemove() {
+        this.pause();
+    }
+
     /**
      * Sets the canvas's coordinates and re-renders the map.
      *
diff --git a/test/unit/source/canvas_source.test.js b/test/unit/source/canvas_source.test.js
index 2a33eaf683a..30d5569a01b 100644
--- a/test/unit/source/canvas_source.test.js
+++ b/test/unit/source/canvas_source.test.js
@@ -3,6 +3,7 @@
 const test = require('mapbox-gl-js-test').test;
 const CanvasSource = require('../../../src/source/canvas_source');
 const Transform = require('../../../src/geo/transform');
+const AnimationLoop = require('../../../src/style/animation_loop');
 const Evented = require('../../../src/util/evented');
 const util = require('../../../src/util/util');
 const window = require('../../../src/util/window');
@@ -30,7 +31,7 @@ class StubMap extends Evented {
     constructor() {
         super();
         this.transform = new Transform();
-        this.style = { animationLoop: { set: function() {} } };
+        this.style = { animationLoop: new AnimationLoop() };
     }
 
     _rerender() {
@@ -94,6 +95,44 @@ test('CanvasSource', (t) => {
         source.onAdd(map);
     });
 
+    t.test('onRemove stops animation', (t) => {
+        const source = createSource();
+        const map = new StubMap();
+
+        source.onAdd(map);
+
+        t.equal(map.style.animationLoop.stopped(), false, 'should animate initally');
+
+        source.onRemove();
+
+        t.equal(map.style.animationLoop.stopped(), true, 'should stop animating');
+
+        source.onAdd(map);
+
+        t.equal(map.style.animationLoop.stopped(), false, 'should animate when added again');
+
+        t.end();
+    });
+
+    t.test('play and pause animation', (t) => {
+        const source = createSource();
+        const map = new StubMap();
+
+        source.onAdd(map);
+
+        t.equal(map.style.animationLoop.stopped(), false, 'initially animating');
+
+        source.pause();
+
+        t.equal(map.style.animationLoop.stopped(), true, 'can be paused');
+
+        source.play();
+
+        t.equal(map.style.animationLoop.stopped(), false, 'can be played');
+
+        t.end();
+    });
+
     t.end();
 });