From 97e2f31b22f00eda9b364b9cb255ff8bd46dec84 Mon Sep 17 00:00:00 2001
From: Matt Harker <thundercloud@theflux.co.uk>
Date: Wed, 28 Nov 2018 23:32:30 +0000
Subject: [PATCH] Cache the interactive context to prevent context thrashing
 (#664)

---
 src/components/interactive-map.js | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/interactive-map.js b/src/components/interactive-map.js
index 36f4c5d3..b7dd61af 100644
--- a/src/components/interactive-map.js
+++ b/src/components/interactive-map.js
@@ -170,6 +170,11 @@ type State = {
   isHovering: boolean
 };
 
+type InteractiveContextProps = {
+  isDragging: boolean,
+  eventManager: any
+};
+
 export default class InteractiveMap extends PureComponent<InteractiveMapProps, State> {
 
   static supported() {
@@ -191,6 +196,11 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
     this._eventManager = new EventManager(null, {
       touchAction: props.touchAction
     });
+
+    this._updateInteractiveContext({
+      isDragging: false,
+      eventManager: this._eventManager
+    });
   }
 
   state : State = {
@@ -219,12 +229,17 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
     this._setControllerProps(this.props);
   }
 
-  componentWillUpdate(nextProps : InteractiveMapProps) {
+  componentWillUpdate(nextProps : InteractiveMapProps, nextState : State) {
     this._setControllerProps(nextProps);
+
+    if (nextState.isDragging !== this.state.isDragging) {
+      this._updateInteractiveContext({isDragging: nextState.isDragging});
+    }
   }
 
   _controller : MapController;
   _eventManager : any;
+  _interactiveContext : InteractiveContextProps;
   _width : number = 0;
   _height : number = 0;
   _eventCanvasRef: { current: null | HTMLDivElement } = createRef();
@@ -284,6 +299,10 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
     }
   }
 
+  _updateInteractiveContext(updatedContext : $Shape<InteractiveContextProps>) {
+    this._interactiveContext = Object.assign({}, this._interactiveContext, updatedContext);
+  }
+
   _onResize = ({width, height} : {width : number, height : number}) => {
     this._width = width;
     this._height = height;
@@ -414,12 +433,8 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
       height,
       cursor: getCursor(this.state)
     });
-    const interactiveContext = {
-      isDragging: this.state.isDragging,
-      eventManager: this._eventManager
-    };
 
-    return createElement(InteractiveContext.Provider, {value: interactiveContext},
+    return createElement(InteractiveContext.Provider, {value: this._interactiveContext},
       createElement('div', {
         key: 'event-canvas',
         ref: this._eventCanvasRef,