correct pattern implementation when having colorscale on both modes

- also fixing missing bar legend color issue 5285

Author: archmoj

src/components/drawing/attributes.js

@@ -43,7 +43,7 @@ exports.pattern = {
         arrayOk: true,
         editType: 'style',
         description: [
-            'Sets the background color of the pattern fill.',
+            'When there is no colorscale sets the background color of the pattern fill.',
             'Defaults to a `marker.color` background when `fillmode` is *overlay*.',
             'Otherwise, defaults to a transparent background.'
         ].join(' ')
@@ -53,7 +53,7 @@ exports.pattern = {
         arrayOk: true,
         editType: 'style',
         description: [
-            'Sets the foreground color of the pattern fill.',
+            'When there is no colorscale sets the foreground color of the pattern fill.',
             'Defaults to a `marker.color` background when `fillmode` is *replace*.',
             'Otherwise, defaults to dark grey or white',
             'to increase contrast with the `bgcolor`.',
@@ -84,5 +84,8 @@ exports.pattern = {
             'and solidty of 1 shows only the foreground color without pattern.',
         ].join(' ')
     },
-    editType: 'style'
+    editType: 'style',
+    description: [
+        'Sets the pattern within the marker.'
+    ].join(' '),
 };

src/components/drawing/index.js

@@ -368,7 +368,17 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
  * @param {number} solidity: how solid lines of this pattern are
  * @param {string} prop: the property to apply to, 'fill' or 'stroke'
  */
-drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, solidity, prop) {
+drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, solidity, mcc, fillmode, prop) {
+    if(mcc) {
+        if(fillmode === 'overlay') {
+            bgcolor = mcc;
+            fgcolor = Color.contrast(bgcolor);
+        } else {
+            bgcolor = undefined;
+            fgcolor = mcc;
+        }
+    }
+
     var fullLayout = gd._fullLayout;
     var fullID = 'p' + fullLayout._uid + '-' + patternID;
     var width, height;
@@ -704,16 +714,17 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
             var patternFGColor = drawing.getPatternAttr(markerPattern.fgcolor, d.i, null);
             var patternSize = drawing.getPatternAttr(markerPattern.size, d.i, 8);
             var patternSolidity = drawing.getPatternAttr(markerPattern.solidity, d.i, 0.3);
-            var perPointPattern = Lib.isArrayOrTypedArray(markerPattern.shape) ||
-                                  Lib.isArrayOrTypedArray(markerPattern.bgcolor) ||
-                                  Lib.isArrayOrTypedArray(markerPattern.size) ||
-                                  Lib.isArrayOrTypedArray(markerPattern.solidity);
+            var perPointPattern = d.mcc ||
+                Lib.isArrayOrTypedArray(markerPattern.shape) ||
+                Lib.isArrayOrTypedArray(markerPattern.bgcolor) ||
+                Lib.isArrayOrTypedArray(markerPattern.size) ||
+                Lib.isArrayOrTypedArray(markerPattern.solidity);
 
             var patternID = trace.uid;
             if(perPointPattern) patternID += '-' + d.i;
 
             drawing.pattern(sel, gd, patternID, patternShape, patternBGColor, patternFGColor,
-                            patternSize, patternSolidity, 'fill');
+                            patternSize, patternSolidity, d.mcc, markerPattern.fillmode, 'fill');
         } else {
             Color.fill(sel, fillColor);
         }

src/components/legend/style.js

@@ -348,7 +348,11 @@ module.exports = function style(s, gd, legend) {
 
             p.style('stroke-width', w + 'px');
 
-            var fillColor = d0.mc || marker.color;
+            var mcc;
+            if('mc' in d0) {
+                mcc = Drawing.tryColorscale(marker, '')(d0.mc);
+            }
+            var fillColor = mcc || d0.mc || marker.color;
 
             var markerPattern = marker.pattern;
             var patternShape = markerPattern && Drawing.getPatternAttr(markerPattern.shape, 0, '');
@@ -360,7 +364,7 @@ module.exports = function style(s, gd, legend) {
                 var patternSolidity = Drawing.getPatternAttr(markerPattern.solidity, 0, 0.3);
                 var patternID = 'legend-' + trace.uid;
                 p.call(Drawing.pattern, gd, patternID, patternShape, patternBGColor,
-                    patternFGColor, patternSize, patternSolidity, 'fill');
+                    patternFGColor, patternSize, patternSolidity, mcc, markerPattern.fillmode, 'fill');
             } else {
                 p.call(Color.fill, fillColor);
             }

src/lib/coerce.js

@@ -428,23 +428,25 @@ exports.coerceFont = function(coerce, attr, dfltObj) {
 /*
  * Shortcut to coerce the pattern attributes
  */
-exports.coercePattern = function(coerce, attr, markerColor) {
+exports.coercePattern = function(coerce, attr, markerColor, hasMarkerColorscale) {
     var shape = coerce(attr + '.shape');
     if(shape) {
         coerce(attr + '.solidity');
         coerce(attr + '.size');
         var fillmode = coerce(attr + '.fillmode');
         var isOverlay = fillmode === 'overlay';
 
-        var bgcolor = coerce(attr + '.bgcolor', isOverlay ?
-            markerColor :
-            undefined
-        );
+        if(!hasMarkerColorscale) {
+            var bgcolor = coerce(attr + '.bgcolor', isOverlay ?
+                markerColor :
+                undefined
+            );
 
-        coerce(attr + '.fgcolor', isOverlay ?
-            Color.contrast(bgcolor) :
-            markerColor
-        );
+            coerce(attr + '.fgcolor', isOverlay ?
+                Color.contrast(bgcolor) :
+                markerColor
+            );
+        }
     }
 };
 

src/traces/bar/style_defaults.js

@@ -7,8 +7,8 @@ var coercePattern = require('../../lib').coercePattern;
 
 module.exports = function handleStyleDefaults(traceIn, traceOut, coerce, defaultColor, layout) {
     var markerColor = coerce('marker.color', defaultColor);
-
-    if(hasColorscale(traceIn, 'marker')) {
+    var hasMarkerColorscale = hasColorscale(traceIn, 'marker');
+    if(hasMarkerColorscale) {
         colorscaleDefaults(
             traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'}
         );
@@ -24,8 +24,7 @@ module.exports = function handleStyleDefaults(traceIn, traceOut, coerce, default
 
     coerce('marker.line.width');
     coerce('marker.opacity');
-    coercePattern(coerce, 'marker.pattern', markerColor);
-
+    coercePattern(coerce, 'marker.pattern', markerColor, hasMarkerColorscale);
     coerce('selected.marker.color');
     coerce('unselected.marker.color');
 };

tasks/test_mock.js

@@ -227,6 +227,7 @@ function notBlackListed(name) {
         'ohlc_first',
         'pattern_bars',
         'pattern_fgcolor_overlay_fillmode',
+        'pattern_with_colorscale',
         'plot_types',
         'polar_blank',
         'polar_dates',

test/image/baselines/pattern_with_colorscale.png

@@ -0,0 +1,108 @@
+{
+  "data": [
+    {
+      "legendrank": 4,
+      "x": ["a", "b", "c", "d"],
+      "y": [4, 3, 2, 1],
+      "name": "replace bar",
+      "type": "bar",
+      "textposition": "outside",
+      "marker": {
+        "line": { "color": "lightblue", "width": 2 },
+        "color": [4, 3, 2, 1],
+        "pattern": {
+          "fillmode": "replace",
+          "shape": "/"
+        }
+      }
+    },
+    {
+      "legendrank": 3,
+      "xaxis": "x2",
+      "yaxis": "y2",
+      "x": ["a", "b", "c", "d"],
+      "y": [4, 3, 2, 1],
+      "name": "overlay bar",
+      "type": "bar",
+      "textposition": "outside",
+      "marker": {
+        "line": { "color": "lightblue", "width": 2 },
+        "color": [4, 3, 2, 1],
+        "pattern": {
+          "fillmode": "overlay",
+          "shape": "/"
+        }
+      }
+    },
+
+    {
+      "legendrank": 2,
+      "t": ["M", "N", "O", "P"],
+      "r": [4, 3, 2, 1],
+      "type": "barpolar",
+      "name": "replace polar",
+      "marker": {
+        "line": { "color": "lightblue", "width": 2 },
+        "color": [4, 3, 2, 1],
+        "pattern": {
+          "fillmode": "replace",
+          "shape": "."
+        }
+      }
+    },
+
+    {
+      "legendrank": 1,
+      "subplot": "polar2",
+      "t": ["M", "N", "O", "P"],
+      "r": [4, 3, 2, 1],
+      "type": "barpolar",
+      "name": "overlay polar",
+      "marker": {
+        "line": { "color": "lightblue", "width": 2 },
+        "color": [4, 3, 2, 1],
+        "pattern": {
+          "fillmode": "overlay",
+          "shape": "."
+        }
+      }
+    }
+  ],
+  "layout": {
+    "title": {
+      "text": "pattern with colorscale and different fillmodes"
+    },
+    "width": 600,
+    "height": 600,
+
+    "xaxis": {
+      "domain": [0, 1]
+    },
+    "yaxis": {
+      "domain": [0, 0.3]
+    },
+
+    "xaxis2": {
+      "anchor": "y2",
+      "domain": [0, 1]
+    },
+    "yaxis2": {
+      "anchor": "x2",
+      "domain": [0.35, 0.65]
+    },
+
+    "polar": {
+      "domain": {
+        "x": [0, 0.475],
+        "y": [0.7, 1]
+      }
+    },
+
+    "polar2": {
+      "domain": {
+        "x": [0.525, 1],
+        "y": [0.7, 1]
+      }
+    }
+  }
+}

test/image/mocks/pattern_with_colorscale.json

@@ -294,6 +294,25 @@ describe('Bar.supplyDefaults', function() {
         expect(traceOut.marker.pattern.bgcolor).toBe('green');
         expect(traceOut.marker.pattern.fgcolor).toBe('#fff');
     });
+
+    it('should not coerce marker.pattern.bgcolor and marker.pattern.fgcolor when marker.colorscale is present', function() {
+        traceIn = {
+            marker: {
+                colorscale: 'Blues',
+                pattern: {
+                    shape: '+'
+                }
+            },
+            color: [1, 2, 3],
+            y: [1, 2, 3]
+        };
+        var layout = {};
+
+        supplyDefaults(traceIn, traceOut, defaultColor, layout);
+
+        expect(traceOut.marker.pattern.bgcolor).toBeUndefined();
+        expect(traceOut.marker.pattern.fgcolor).toBeUndefined();
+    });
 });
 
 describe('bar calc / crossTraceCalc (formerly known as setPositions)', function() {