make 'color' a shared attribute among layers at all types

Author: etpinard

src/plots/mapbox/layout_attributes.js

@@ -136,6 +136,7 @@ module.exports = {
             ].join(' ')
         },
 
+        // attributes shared between all types
         below: {
             valType: 'string',
             dflt: '',
@@ -147,7 +148,28 @@ module.exports = {
                 'the layer will be inserted above every existing layer.'
             ].join(' ')
         },
+        color: {
+            valType: 'color',
+            dflt: defaultLine,
+            role: 'style',
+            description: [
+                'Sets the primary layer color.',
+                'If `type` is *circle*, color corresponds to the circle color',
+                'If `type` is *line*, color corresponds to the line color',
+                'If `type` is *fill*, color corresponds to the fill color',
+                'If `type` is *symbol*, color corresponds to the icon color'
+            ].join(' ')
+        },
+        opacity: {
+            valType: 'number',
+            min: 0,
+            max: 1,
+            dflt: 1,
+            role: 'info',
+            description: 'Sets the opacity of the layer.'
+        },
 
+        // type-specific style attributes
         circle: {
             radius: {
                 valType: 'number',
@@ -157,15 +179,6 @@ module.exports = {
                     'Sets the circle radius.',
                     'Has an effect only when `type` is set to *circle*.'
                 ].join(' ')
-            },
-            color: {
-                valType: 'color',
-                dflt: defaultLine,
-                role: 'style',
-                description: [
-                    'Sets the circle color.',
-                    'Has an effect only when `type` is set to *circle*.'
-                ].join(' ')
             }
         },
 
@@ -178,28 +191,10 @@ module.exports = {
                     'Sets the line radius.',
                     'Has an effect only when `type` is set to *line*.'
                 ].join(' ')
-            },
-            color: {
-                valType: 'color',
-                dflt: defaultLine,
-                role: 'style',
-                description: [
-                    'Sets the line color.',
-                    'Has an effect only when `type` is set to *line*.'
-                ].join(' ')
             }
         },
 
         fill: {
-            color: {
-                valType: 'color',
-                dflt: defaultLine,
-                role: 'style',
-                description: [
-                    'Sets the fill color.',
-                    'Has an effect only when `type` is set to *fill*.'
-                ].join(' ')
-            },
             outlinecolor: {
                 valType: 'color',
                 dflt: defaultLine,
@@ -211,13 +206,6 @@ module.exports = {
             }
         },
 
-        opacity: {
-            valType: 'number',
-            min: 0,
-            max: 1,
-            dflt: 1,
-            role: 'info',
-            description: 'Sets the opacity of the layer.'
         }
     }
 

src/plots/mapbox/layout_defaults.js

@@ -57,34 +57,25 @@ function handleLayerDefaults(containerIn, containerOut) {
 
         if(sourceType === 'vector') coerce('sourcelayer');
 
-        // maybe add smart default based off GeoJSON geometry
+        // maybe add smart default based off GeoJSON geometry?
         var type = coerce('type');
 
-        var dfltColor;
+        coerce('below');
+        coerce('color');
+        coerce('opacity');
 
         if(type === 'circle') {
-            dfltColor = (layerIn.line || {}).color || (layerIn.fill || {}).color;
-
-            coerce('circle.color', dfltColor);
             coerce('circle.radius');
         }
 
         if(type === 'line') {
-            dfltColor = (layerIn.circle || {}).color || (layerIn.fill || {}).color;
-
-            coerce('line.color', dfltColor);
             coerce('line.width');
         }
 
         if(type === 'fill') {
-            dfltColor = (layerIn.circle || {}).color || (layerIn.line || {}).color;
-
-            coerce('fill.color', dfltColor);
-            coerce('fill.outlinecolor', dfltColor);
+            coerce('fill.outlinecolor');
         }
 
-        coerce('below');
-        coerce('opacity');
 
         layersOut.push(layerOut);
     }

test/image/mocks/mapbox_layers.json

@@ -532,9 +532,7 @@
           },
           "type": "fill",
           "below": "water",
-          "fill": {
-            "color": "#ece2f0"
-          },
+          "color": "#ece2f0",
           "opacity": 0.8
         },
         {

test/jasmine/tests/mapbox_test.js

@@ -85,40 +85,47 @@ describe('mapbox defaults', function() {
     });
 
     it('should only coerce relevant layer style attributes', function() {
+        var base = {
+            line: { width: 3 },
+            fill: { outlinecolor: '#d3d3d3' },
+            circle: { radius: 20 },
+            symbol: { icon: 'monument' }
+        };
+
         layoutIn = {
             mapbox: {
-                layers: [{
-                    sourcetype: 'vector',
-                    type: 'line',
-                    line: {
-                        color: 'red',
-                        width: 3
-                    },
-                    fillcolor: 'blue'
-                }, {
-                    sourcetype: 'geojson',
-                    type: 'fill',
-                    line: {
-                        color: 'red',
-                        width: 3
-                    },
-                    fill: {
-                        color: 'blue',
-                        outlinecolor: 'green'
-                    }
-                }]
+                layers: [
+                    Lib.extendFlat({}, base, {
+                        type: 'line',
+                        color: 'red'
+                    }),
+                    Lib.extendFlat({}, base, {
+                        type: 'fill',
+                        color: 'blue'
+                    }),
+                    Lib.extendFlat({}, base, {
+                        type: 'circle',
+                        color: 'green'
+                    }),
             }
         };
 
         supplyLayoutDefaults(layoutIn, layoutOut, fullData);
 
-        expect(layoutOut.mapbox.layers[0].line.color).toEqual('red');
+        expect(layoutOut.mapbox.layers[0].color).toEqual('red');
         expect(layoutOut.mapbox.layers[0].line.width).toEqual(3);
         expect(layoutOut.mapbox.layers[0].fill).toBeUndefined();
+        expect(layoutOut.mapbox.layers[0].circle).toBeUndefined();
 
+        expect(layoutOut.mapbox.layers[1].color).toEqual('blue');
+        expect(layoutOut.mapbox.layers[1].fill.outlinecolor).toEqual('#d3d3d3');
         expect(layoutOut.mapbox.layers[1].line).toBeUndefined();
-        expect(layoutOut.mapbox.layers[1].fill.color).toEqual('blue');
-        expect(layoutOut.mapbox.layers[1].fill.outlinecolor).toEqual('green');
+        expect(layoutOut.mapbox.layers[1].circle).toBeUndefined();
+
+        expect(layoutOut.mapbox.layers[2].color).toEqual('green');
+        expect(layoutOut.mapbox.layers[2].circle.radius).toEqual(20);
+        expect(layoutOut.mapbox.layers[2].line).toBeUndefined();
+        expect(layoutOut.mapbox.layers[2].fill).toBeUndefined();
     });
 });