Add Style#setState, using mapbox-gl-style-spec's diff module

mapbox · Nov 22, 2016 · 92956de · 92956de · lukasmartinelli · Dec 20, 2016
1 parent 47b017c
commit 92956de
Show file tree

Hide file tree

Showing 8 changed files with 18,331 additions and 6 deletions.
diff --git a/debug/dark-v9.js b/debug/dark-v9.js
diff --git a/debug/light-v9.js b/debug/light-v9.js
diff --git a/debug/setstyle.html b/debug/setstyle.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script src='/debug/dark-v9.js'></script>
+<script src='/debug/light-v9.js'></script>
+<script>
+// these are set in dark-v9.js and light-v9.js
+var dark = window.darkv9;
+var light = window.lightv9;
+
+var style = dark;
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 2,
+    center: [-77.01866, 38.888],
+    style: style,
+    hash: style
+});
+
+setInterval(function () {
+    style = (style === dark ? light : dark);
+    map.setStyle(style);
+}, 2000);
+
+</script>
+</body>
+</html>
diff --git a/js/style/style.js b/js/style/style.js
@@ -22,6 +22,29 @@ const styleSpec = require('./style_spec');
 const MapboxGLFunction = require('mapbox-gl-function');
 const getWorkerPool = require('../global_worker_pool');
 const deref = require('mapbox-gl-style-spec/lib/deref');
+const diff = require('mapbox-gl-style-spec/lib/diff');
+
+const supportedDiffOperations = util.pick(diff.operations, [
+    'addLayer',
+    'removeLayer',
+    'setPaintProperty',
+    'setLayoutProperty',
+    'setFilter',
+    'addSource',
+    'removeSource',
+    'setLayerZoomRange',
+    'setLight',
+    'setTransition'
+    // 'setGlyphs',
+    // 'setSprite',
+]);
+
+const ignoredDiffOperations = util.pick(diff.operations, [
+    'setCenter',
+    'setZoom',
+    'setBearing',
+    'setPitch'
+]);
 
 /**
  * @private
@@ -291,6 +314,50 @@ class Style extends Evented {
         this._updatedAllPaintProps = false;
     }
 
+    /**
+     * Update this style's state to match the given style JSON, performing only
+     * the necessary mutations.
+     *
+     * May throw an Error ('Unimplemented: METHOD') if the mapbox-gl-style-spec
+     * diff algorithm produces an operation that is not supported.
+     *
+     * @returns {boolean} true if any changes were made; false otherwise
+     * @private
+     */
+    setState(nextState) {
+        this._checkLoaded();
+
+        if (validateStyle.emitErrors(this, validateStyle(nextState))) return false;
+
+        nextState = util.extend({}, nextState);
+        nextState.layers = deref(nextState.layers);
+
+        const changes = diff(this.serialize(), nextState)
+            .filter(op => !(op.command in ignoredDiffOperations));
+
+        if (changes.length === 0) {
+            return false;
+        }
+
+        const unimplementedOps = changes.filter(op => !(op.command in supportedDiffOperations));
+        if (unimplementedOps.length > 0) {
+            throw new Error(`Unimplemented: ${unimplementedOps.map(op => op.command).join(', ')}.`);
+        }
+
+        changes.forEach((op) => {
+            if (op.command === 'setTransition') {
+                // `transition` is always read directly off of
+                // `this.stylesheet`, which we update below
+                return;
+            }
+            this[op.command].apply(this, op.args);
+        });
+
+        this.stylesheet = nextState;
+
+        return true;
+    }
+
     addSource(id, source, options) {
         this._checkLoaded();
 
@@ -473,7 +540,7 @@ class Style extends Evented {
 
         const layer = this.getLayer(layerId);
 
-        if (filter !== null && this._validate(validateStyle.filter, `layers.${layer.id}.filter`, filter)) return;
+        if (filter !== null && filter !== undefined && this._validate(validateStyle.filter, `layers.${layer.id}.filter`, filter)) return;
 
         if (util.deepEqual(layer.filter, filter)) return;
         layer.filter = util.clone(filter);

diff --git a/js/ui/map.js b/js/ui/map.js
@@ -645,18 +645,34 @@ class Map extends Camera {
     }
 
     /**
-     * Replaces the map's Mapbox style object with a new value.
+     * Updates the map's Mapbox style object with a new value.  If the given
+     * value is style JSON object, compares it against the the map's current
+     * state and perform only the changes necessary to make the map style match
+     * the desired state.
      *
      * @param {Object|string} style A JSON object conforming to the schema described in the
      *   [Mapbox Style Specification](https://mapbox.com/mapbox-gl-style-spec/), or a URL to such JSON.
+     * @param {boolean} forceNoDiff Force a 'full' update, removing the current style and adding building the given one instead of attempting a diff-based update.
      * @returns {Map} `this`
      * @see [Change a map's style](https://www.mapbox.com/mapbox-gl-js/example/setstyle/)
      */
-    setStyle(style) {
+    setStyle(style, forceNoDiff) {
+        const shouldTryDiff = !forceNoDiff && this.style && style &&
+            !(style instanceof Style) && typeof style !== 'string';
+        if (shouldTryDiff) {
+            try {
+                if (this.style.setState(style)) {
+                    this._update(true);
+                }
+                return this;
+            } catch (e) {
+                util.warnOnce(`Unable to perform style diff: ${e.message || e.error || e}.  Rebuilding the style from scratch.`);
+            }
+        }
+
         if (this.style) {
             this.style.setEventedParent(null);
             this.style._remove();
-
             this.off('rotate', this.style._redoPlacement);
             this.off('pitch', this.style._redoPlacement);
         }

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "grid-index": "^1.0.0",
     "mapbox-gl-function": "mapbox/mapbox-gl-function#41c6724e2bbd7bd1eb5991451bbf118b7d02b525",
     "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#597115a1e1bd982944b068f8accde34eada74fc2",
-    "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#512126c802dbb8f282e9826b181f0d53da00daf2",
+    "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#77434bd0bdb623809c85afaa3da432ebe01e993f",
     "mapbox-gl-supported": "^1.2.0",
     "package-json-versionify": "^1.0.2",
     "pbf": "^1.3.2",
@@ -62,7 +62,7 @@
     "in-publish": "^2.0.0",
     "jsdom": "^9.4.2",
     "lodash.template": "^4.4.0",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#5c89044bef42e8b557f60162b515f689e455de75",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#cfa20f8e0de49c48d3bb08c1d4786aedbd082474",
     "minifyify": "^7.0.1",
     "npm-run-all": "^3.0.0",
     "nyc": "^8.3.0",

diff --git a/test/js/style/style.test.js b/test/js/style/style.test.js
@@ -289,6 +289,60 @@ test('Style#_resolve', (t) => {
     t.end();
 });
 
+test('Style#setState', (t) => {
+    t.test('throw before loaded', (t) => {
+        const style = new Style(createStyleJSON());
+        t.throws(() => {
+            style.setState(style.serialize());
+        }, Error, /load/i);
+        style.on('style.load', () => {
+            t.end();
+        });
+    });
+
+    t.test('do nothing if there are no changes', (t) => {
+        const style = new Style(createStyleJSON());
+        [
+            'addLayer',
+            'removeLayer',
+            'setPaintProperty',
+            'setLayoutProperty',
+            'setFilter',
+            'addSource',
+            'removeSource',
+            'setLayerZoomRange',
+            'setLight'
+        ].forEach((method) => t.stub(style, method, () => t.fail(`${method} called`)));
+        style.on('style.load', () => {
+            const didChange = style.setState(createStyleJSON());
+            t.notOk(didChange, 'return false');
+            t.end();
+        });
+    });
+
+    t.test('return true if there is a change', (t) => {
+        const initialState = createStyleJSON();
+        const nextState = createStyleJSON({
+            sources: {
+                foo: {
+                    type: 'geojson',
+                    data: { type: 'FeatureCollection', features: [] }
+                }
+            }
+        });
+
+        const style = new Style(initialState);
+        style.on('style.load', () => {
+            const didChange = style.setState(nextState);
+            t.ok(didChange);
+            t.same(style.stylesheet, nextState);
+            t.end();
+        });
+    });
+
+    t.end();
+});
+
 test('Style#addSource', (t) => {
     t.test('throw before loaded', (t) => {
         const style = new Style(createStyleJSON()),

diff --git a/test/js/ui/map.test.js b/test/js/ui/map.test.js
@@ -208,6 +208,16 @@ test('Map', (t) => {
             });
         });
 
+        t.test('passing null removes style', (t) => {
+            const map = createMap();
+            const style = map.style;
+            t.ok(style);
+            t.spy(style, '_remove');
+            map.setStyle(null);
+            t.equal(style._remove.callCount, 1);
+            t.end();
+        });
+
         t.end();
     });
 
@@ -277,6 +287,32 @@ test('Map', (t) => {
             });
         });
 
+        t.test('creates a new Style if diff fails', (t) => {
+            const style = createStyle();
+            const map = createMap({ style: style });
+            t.stub(map.style, 'setState', () => {
+                throw new Error('Dummy error');
+            });
+
+            const previousStyle = map.style;
+            map.setStyle(style);
+            t.ok(map.style && map.style !== previousStyle);
+            t.end();
+        });
+
+        t.test('creates a new Style if forceNoDiff parameter is set', (t) => {
+            const style = createStyle();
+            const map = createMap({ style: style });
+            t.stub(map.style, 'setState', () => {
+                t.fail();
+            });
+
+            const previousStyle = map.style;
+            map.setStyle(style, true);
+            t.ok(map.style && map.style !== previousStyle);
+            t.end();
+        });
+
         t.end();
     });