Hack transition from undefined fill-outline-color

Closes #3657
mapbox · Jan 19, 2017 · 97bb006 · 97bb006
1 parent 9661c98
commit 97bb006
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 4 deletions.
diff --git a/js/style/style_layer/fill_style_layer.js b/js/style/style_layer/fill_style_layer.js
@@ -6,11 +6,23 @@ const FillBucket = require('../../data/bucket/fill_bucket');
 class FillStyleLayer extends StyleLayer {
 
     getPaintValue(name, globalProperties, featureProperties) {
-        if (name === 'fill-outline-color' && this.getPaintProperty('fill-outline-color') === undefined) {
-            return super.getPaintValue('fill-color', globalProperties, featureProperties);
-        } else {
-            return super.getPaintValue(name, globalProperties, featureProperties);
+        if (name === 'fill-outline-color') {
+            const target = this.getPaintProperty('fill-outline-color');
+            if (target === undefined) {
+                return super.getPaintValue('fill-color', globalProperties, featureProperties);
+            }
+
+            // https://github.com/mapbox/mapbox-gl-js/issues/3657
+            const transition = this._paintTransitions['fill-outline-color'];
+            if (!transition.instant()) {
+                const source = transition.oldTransition._calculateTargetValue(globalProperties, featureProperties);
+                if (!source) {
+                    return super.getPaintValue('fill-color', globalProperties, featureProperties);
+                }
+            }
         }
+
+        return super.getPaintValue(name, globalProperties, featureProperties);
     }
 
     getPaintValueStopZoomLevels(name) {

diff --git a/test/js/style/style_layer.test.js b/test/js/style/style_layer.test.js
@@ -276,6 +276,36 @@ test('StyleLayer#setPaintProperty', (t) => {
         t.end();
     });
 
+    t.test('can transition fill-outline-color from undefined to a value #3657', (t) => {
+        const layer = StyleLayer.create({
+            id: 'building',
+            type: 'fill',
+            source: 'streets',
+            paint: {
+                'fill-color': '#00f'
+            }
+        });
+
+        const animationLoop = createAnimationLoop();
+
+        // setup: set and then unset fill-outline-color so that, when we then try
+        // to re-set it, StyleTransition#calculate() attempts interpolation
+        layer.setPaintProperty('fill-outline-color', '#f00');
+        layer.updatePaintTransitions([], {transition: true}, null, animationLoop);
+        layer.setPaintProperty('fill-outline-color', undefined);
+        layer.updatePaintTransitions([], {transition: true}, null, animationLoop);
+
+        // re-set fill-outline-color and get its value, triggering the attempt
+        // to interpolate between undefined and #f00
+        layer.setPaintProperty('fill-outline-color', '#f00');
+        layer.updatePaintTransitions([], {transition: true}, null, animationLoop);
+        t.doesNotThrow(() => {
+            layer.getPaintValue('fill-outline-color');
+        });
+        t.end();
+    });
+
+
     t.end();
 });