scale down patterns so that default sizes fit in legend icons

plotly · Jun 18, 2021 · 178e0a6 · 178e0a6
1 parent 38bd5ec
commit 178e0a6
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 5 deletions.
diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
@@ -359,6 +359,7 @@ 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
@@ -370,7 +371,9 @@ 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, gd, patternID, shape, size, solidity, mcc, fillmode, bgcolor, fgcolor, fgopacity) {
+drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity, mcc, fillmode, bgcolor, fgcolor, fgopacity) {
+    var isLegend = calledBy === 'legend';
+
     if(mcc) {
         if(fillmode === 'overlay') {
             bgcolor = mcc;
@@ -527,7 +530,9 @@ drawing.pattern = function(sel, gd, patternID, shape, size, solidity, mcc, fillm
                 'id': fullID,
                 'width': width + 'px',
                 'height': height + 'px',
-                'patternUnits': 'userSpaceOnUse'
+                'patternUnits': 'userSpaceOnUse',
+                // for legends scale down patterns just a bit so that default size (i.e 8) nicely fit in small icons
+                'patternTransform': isLegend ? 'scale(0.8)' : ''
             });
 
             if(bgcolor) {
@@ -734,7 +739,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
             if(perPointPattern) patternID += '-' + d.i;
 
             drawing.pattern(
-                sel, gd, patternID,
+                sel, 'point', gd, patternID,
                 patternShape, patternSize, patternSolidity,
                 d.mcc, markerPattern.fillmode,
                 patternBGColor, patternFGColor, patternFGOpacity

diff --git a/src/components/legend/style.js b/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 = dimAttr(markerPattern.size, 6, 8);
+                var patternSize = dimAttr(markerPattern.size, 8, 10);
                 var patternSolidity = dimAttr(markerPattern.solidity, 0.5, 1);
                 var patternID = 'legend-' + trace.uid;
                 p.call(
-                    Drawing.pattern, gd, patternID,
+                    Drawing.pattern, 'legend', gd, patternID,
                     patternShape, patternSize, patternSolidity,
                     mcc, markerPattern.fillmode,
                     patternBGColor, patternFGColor, patternFGOpacity

diff --git a/test/image/baselines/pattern_bars.png b/test/image/baselines/pattern_bars.png
diff --git a/test/image/baselines/pattern_fgcolor_overlay_fillmode.png b/test/image/baselines/pattern_fgcolor_overlay_fillmode.png
diff --git a/test/image/baselines/pattern_legend_variations.png b/test/image/baselines/pattern_legend_variations.png
diff --git a/test/image/baselines/pattern_with_colorscale.png b/test/image/baselines/pattern_with_colorscale.png