[GLJS-781] Improved performance of markers dragging

package.json

@@ -58,7 +58,7 @@
     "insert-css": "^2.0.0",
     "json-loader": "^0.5.7",
     "lodash.once": "^4.0.0",
-    "mapbox-gl": "^3.0.1",
+    "mapbox-gl": "^3.2.0",
     "smokestack": "^3.6.0",
     "tap-status": "^1.0.1",
     "tape": "^4.6.0",

src/directions.js

@@ -54,7 +54,10 @@ import Instructions from './controls/instructions';
  */
 export default class MapboxDirections {
 
+
   constructor(options) {
+    this._directions = null;
+    this._stateSnapshot = null;
     this._store = this._initStore();
 
     this.actions = bindActionCreators(actions, this._store.dispatch);
@@ -122,6 +125,7 @@ export default class MapboxDirections {
     });
 
     if (map.getSource('directions')) map.removeSource('directions');
+    if (map.getSource('directions:markers')) map.removeSource('directions:markers');
 
     this._map = null;
     return this;
@@ -143,6 +147,7 @@ export default class MapboxDirections {
 
     // Add and set data theme layer/style
     this._map.addSource('directions', geojson);
+    this._map.addSource('directions:markers', geojson);
 
     // Add direction specific styles to the map
     if (styles && styles.length) styles.forEach((style) => this._map.addLayer(style));
@@ -162,25 +167,59 @@ export default class MapboxDirections {
     }
   }
 
+  _areMarkersChangedOnly(state) {
+    const changedSubscriptionFields = [];
+
+    if (!this._stateSnapshot) {
+      return false;
+    }
+
+    MapboxDirections.SUBSCRIPTION_FIELDS.forEach(field => {
+      if (this._stateSnapshot[field] !== state[field]) {
+        changedSubscriptionFields.push(field);
+      }
+    });
+
+    return changedSubscriptionFields.length <= MapboxDirections.MARKER_FIELDS.length && changedSubscriptionFields.every(field => {
+      return MapboxDirections.MARKER_FIELDS.includes(field);
+    });
+  }
+
   subscribedActions() {
     this.storeUnsubscribe = this._store.subscribe(() => {
+      const state = this._store.getState();
       const {
         origin,
         destination,
         hoverMarker,
         directions,
         routeIndex
-      } = this._store.getState();
+      } = state;
 
-      const geojson = {
+      const markersChangedOnly = this._areMarkersChangedOnly(state);
+
+      this._stateSnapshot = state;
+
+      const markersGeojson = {
         type: 'FeatureCollection',
         features: [
           origin,
           destination,
           hoverMarker
-        ].filter((d) => {
-          return d.geometry;
-        })
+        ].filter(d => d.geometry)
+      }
+
+      if (this._map.style && this._map.getSource('directions:markers')) {
+        this._map.getSource('directions:markers').setData(markersGeojson);
+      }
+
+      if (markersChangedOnly) {
+        return;
+      }
+
+      const geojson = {
+        type: 'FeatureCollection',
+        features: []
       };
 
       if (directions.length) {
@@ -570,3 +609,6 @@ export default class MapboxDirections {
     return this;
   }
 }
+
+MapboxDirections.MARKER_FIELDS = ['origin', 'destination', 'hoverMarker'];
+MapboxDirections.SUBSCRIPTION_FIELDS = ['origin', 'destination', 'hovedMarker', 'directions', 'routeIndex'];

src/directions_style.js

@@ -63,7 +63,7 @@ const style = [{
 }, {
   'id': 'directions-hover-point-casing',
   'type': 'circle',
-  'source': 'directions',
+  'source': 'directions:markers',
   'paint': {
     'circle-radius': 8,
     'circle-color': '#fff'
@@ -76,7 +76,7 @@ const style = [{
 }, {
   'id': 'directions-hover-point',
   'type': 'circle',
-  'source': 'directions',
+  'source': 'directions:markers',
   'paint': {
     'circle-radius': 6,
     'circle-color': '#3bb2d0'
@@ -89,7 +89,7 @@ const style = [{
 }, {
   'id': 'directions-waypoint-point-casing',
   'type': 'circle',
-  'source': 'directions',
+  'source': 'directions:markers',
   'paint': {
     'circle-radius': 8,
     'circle-color': '#fff'
@@ -102,7 +102,7 @@ const style = [{
 }, {
   'id': 'directions-waypoint-point',
   'type': 'circle',
-  'source': 'directions',
+  'source': 'directions:markers',
   'paint': {
     'circle-radius': 6,
     'circle-color': '#8a8bc9'
@@ -115,7 +115,7 @@ const style = [{
 }, {
   'id': 'directions-origin-point',
   'type': 'circle',
-  'source': 'directions',
+  'source': 'directions:markers',
   'paint': {
     'circle-radius': 18,
     'circle-color': '#3bb2d0'
@@ -128,7 +128,7 @@ const style = [{
 }, {
   'id': 'directions-origin-label',
   'type': 'symbol',
-  'source': 'directions',
+  'source': 'directions:markers',
   'layout': {
     'text-field': 'A',
     'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
@@ -145,7 +145,7 @@ const style = [{
 }, {
   'id': 'directions-destination-point',
   'type': 'circle',
-  'source': 'directions',
+  'source': 'directions:markers',
   'paint': {
     'circle-radius': 18,
     'circle-color': '#8a8bc9'
@@ -158,7 +158,7 @@ const style = [{
 }, {
   'id': 'directions-destination-label',
   'type': 'symbol',
-  'source': 'directions',
+  'source': 'directions:markers',
   'layout': {
     'text-field': 'B',
     'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],

test/test.directions.js

@@ -84,8 +84,10 @@ test('Directions#onRemove', t => {
   map.on('load', () => {
     directions.on('route', once(()=>{
       t.true(!!map.getSource('directions'), 'directions source is added');
+      t.true(!!map.getSource('directions:markers'), 'directions markers source is added');
       map.removeControl(directions);
       t.false(!!map.getSource('directions'), 'directions source is removed');
+      t.false(!!map.getSource('directions:markers'), 'directions markers source is removed');
       t.end();
     }));
     directions.setOrigin('Queen Street NY');