Hack transition from undefined fill-outline-color (#4020)

* Hack transition from undefined fill-outline-color Closes #3657 * Check for transition * Use more descriptive var name * Use StyleTransition heirarchy, not private method * Restore missing check for direct (non-transition) value * Remove assert of dubious value
mapbox · Jan 26, 2017 · 59e6b40 · 59e6b40
1 parent 67fc7df
commit 59e6b40
Show file tree

Hide file tree

Showing 2 changed files with 53 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,30 @@ 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') {
+            // Special-case handling of undefined fill-outline-color values
+            if (this.getPaintProperty('fill-outline-color') === undefined) {
+                return super.getPaintValue('fill-color', globalProperties, featureProperties);
+            }
+
+            // Handle transitions from fill-outline-color: undefined
+            let transition = this._paintTransitions['fill-outline-color'];
+            while (transition) {
+                const declaredValue = (
+                    transition &&
+                    transition.declaration &&
+                    transition.declaration.value
+                );
+
+                if (!declaredValue) {
+                    return super.getPaintValue('fill-color', globalProperties, featureProperties);
+                }
+
+                transition = transition.oldTransition;
+            }
         }
+
+        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();
 });