in legend with pattern revise sizes

src/components/drawing/index.js

@@ -359,7 +359,6 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
  *
  * @param {object} sel: d3 selection to apply this pattern to
  *     You can use `selection.call(Drawing.pattern, ...)`
- * @param {string} calledBy: option to know the caller component
  * @param {DOM element} gd: the graph div `sel` is part of
  * @param {string} patternID: a unique (within this plot) identifier
  *     for this pattern, so that we don't create unnecessary definitions
@@ -371,9 +370,7 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
  * @param {string} fgcolor: foreground color for this pattern
  * @param {number} fgopacity: foreground opacity for this pattern
  */
-drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity, mcc, fillmode, bgcolor, fgcolor, fgopacity) {
-    var isLegend = calledBy === 'legend';
-
+drawing.pattern = function(sel, gd, patternID, shape, size, solidity, mcc, fillmode, bgcolor, fgcolor, fgopacity) {
     if(mcc) {
         if(fillmode === 'overlay') {
             bgcolor = mcc;
@@ -530,8 +527,7 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
                 'id': fullID,
                 'width': width + 'px',
                 'height': height + 'px',
-                'patternUnits': 'userSpaceOnUse',
-                'patternTransform': isLegend ? 'scale(0.7)' : ''
+                'patternUnits': 'userSpaceOnUse'
             });
 
             if(bgcolor) {
@@ -600,13 +596,6 @@ drawing.getPatternAttr = function(mp, i, dflt) {
     return mp;
 };
 
-drawing.getPatternLegendDim = function(mp, i, dflt) {
-    if(mp && Lib.isArrayOrTypedArray(mp)) {
-        return dflt;
-    }
-    return mp;
-};
-
 drawing.pointStyle = function(s, trace, gd) {
     if(!s.size()) return;
 
@@ -745,7 +734,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
             if(perPointPattern) patternID += '-' + d.i;
 
             drawing.pattern(
-                sel, 'point', gd, patternID,
+                sel, gd, patternID,
                 patternShape, patternSize, patternSolidity,
                 d.mcc, markerPattern.fillmode,
                 patternBGColor, patternFGColor, patternFGOpacity

src/components/legend/style.js

@@ -366,11 +366,11 @@ module.exports = function style(s, gd, legend) {
                 var patternBGColor = Drawing.getPatternAttr(markerPattern.bgcolor, 0, null);
                 var patternFGColor = Drawing.getPatternAttr(markerPattern.fgcolor, 0, null);
                 var patternFGOpacity = markerPattern.fgopacity;
-                var patternSize = Math.min(12, Drawing.getPatternLegendDim(markerPattern.size, 0, 8));
-                var patternSolidity = Drawing.getPatternLegendDim(markerPattern.solidity, 0, 0.3);
+                var patternSize = dimAttr(markerPattern.size, 6, 8);
+                var patternSolidity = dimAttr(markerPattern.solidity, 0.5, 1);
                 var patternID = 'legend-' + trace.uid;
                 p.call(
-                    Drawing.pattern, 'legend', gd, patternID,
+                    Drawing.pattern, gd, patternID,
                     patternShape, patternSize, patternSolidity,
                     mcc, markerPattern.fillmode,
                     patternBGColor, patternFGColor, patternFGOpacity
@@ -677,3 +677,9 @@ function getStyleGuide(d) {
         anyFill: showFill || showGradientFill,
     };
 }
+
+function dimAttr(v, dflt, max) {
+    if(v && Lib.isArrayOrTypedArray(v)) return dflt;
+    if(v > max) return max;
+    return v;
+}

test/image/mocks/pattern_legend_variations.json

@@ -0,0 +1,108 @@
+{
+  "data": [
+    {
+      "name": "size: 4",
+      "type": "bar",
+      "x": ["A", "B", "C", "D", "E"],
+      "y": [1, 1, 1, 1, 1],
+      "marker": {
+        "colorscale": "Greens", "reversescale": true,
+        "line": { "color": "#444", "width": 1 },
+        "color": [1, 2, 3, 4, 5],
+        "pattern": {
+          "fillmode": "replace",
+          "size": 4,
+          "shape": "."
+        }
+      }
+    },
+    {
+      "name": "size: 6",
+      "type": "bar",
+      "x": ["A", "B", "C", "D", "E"],
+      "y": [1, 1, 1, 1, 1],
+      "marker": {
+        "colorscale": "Greens", "reversescale": true,
+        "line": { "color": "#444", "width": 1 },
+        "color": [1, 2, 3, 4, 5],
+        "pattern": {
+          "fillmode": "overlay", "fgopacity": 1,
+          "size": 6,
+          "shape": "."
+        }
+      }
+    },
+    {
+      "name": "size: 8",
+      "type": "bar",
+      "x": ["A", "B", "C", "D", "E"],
+      "y": [1, 1, 1, 1, 1],
+      "marker": {
+        "colorscale": "Reds",
+        "line": { "color": "#444", "width": 1 },
+        "color": [1, 2, 3, 4, 5],
+        "pattern": {
+          "fillmode": "replace",
+          "size": 8,
+          "shape": "."
+        }
+      }
+    },
+    {
+      "name": "size: 10",
+      "type": "bar",
+      "x": ["A", "B", "C", "D", "E"],
+      "y": [1, 1, 1, 1, 1],
+      "marker": {
+        "colorscale": "Reds",
+        "line": { "color": "#444", "width": 1 },
+        "color": [1, 2, 3, 4, 5],
+        "pattern": {
+          "fillmode": "overlay", "fgopacity": 1,
+          "size": 10,
+          "shape": "."
+        }
+      }
+    },
+    {
+      "name": "size: 12",
+      "type": "bar",
+      "x": ["A", "B", "C", "D", "E"],
+      "y": [1, 1, 1, 1, 1],
+      "marker": {
+        "colorscale": "Blues", "reversescale": true,
+        "line": { "color": "#444", "width": 1 },
+        "color": [1, 2, 3, 4, 5],
+        "pattern": {
+          "fillmode": "replace",
+          "size": 12,
+          "shape": "."
+        }
+      }
+    },
+    {
+      "name": "size: [ ]",
+      "type": "bar",
+      "x": ["A", "B", "C", "D", "E"],
+      "y": [1, 1, 1, 1, 1],
+      "marker": {
+        "colorscale": "Blues", "reversescale": true,
+        "line": { "color": "#444", "width": 1 },
+        "color": [1, 2, 3, 4, 5],
+        "pattern": {
+          "fillmode": "overlay", "fgopacity": 1,
+          "size": [4, 6, 8, 10, 12],
+          "shape": "."
+        }
+      }
+    }
+  ],
+  "layout": {
+    "title": {
+      "text": "legend pattern size range"
+    },
+    "width": 800,
+    "height": 400,
+    "hovermode": "x unified"
+  }
+}

test/image/mocks/pattern_with_colorscale.json

@@ -6,7 +6,6 @@
       "y": [4, 3, 2, 1],
       "name": "replace bar",
       "type": "bar",
-      "textposition": "outside",
       "marker": {
         "line": { "color": "lightblue", "width": 2 },
         "color": [4, 3, 2, 1],
@@ -24,7 +23,6 @@
       "y": [4, 3, 2, 1],
       "name": "overlay bar",
       "type": "bar",
-      "textposition": "outside",
       "marker": {
         "line": { "color": "lightblue", "width": 2 },
         "color": [4, 3, 2, 1],