Add pattern fill for bar plots

s417-lama · s417-lama · commit 8f53e117a174 · 2021-02-23T22:31:17.000+09:00
diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
@@ -354,6 +354,145 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
     fullLayout._gradientUrlQueryParts[k] = 1;
 };
 
+/**
+ * pattern: create and apply a pattern fill
+ *
+ * @param {object} sel: d3 selection to apply this pattern to
+ *     You can use `selection.call(Drawing.pattern, ...)`
+ * @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
+ * @param {string} bgcolor: background color for this pattern
+ * @param {string} fgcolor: foreground color for this pattern
+ * @param {number} scale: scale of this pattern
+ * @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, scale, solidity, prop) {
+    var fullLayout = gd._fullLayout;
+    var fullID = 'p' + fullLayout._uid + '-' + patternID;
+    var baseSize = 8 * scale;
+    var width, height;
+
+    var path = '';
+    switch(shape) {
+        case '/':
+            width  = baseSize * Math.sqrt(2);
+            height = baseSize * Math.sqrt(2);
+            path = 'M-1,1l2,-2' +
+                   'M0,' + height + 'L' + width + ',0' +
+                   'M' + (width - 1) + ',' + (height + 1) + 'l2,-2';
+            break;
+        case '\\':
+            width  = baseSize * Math.sqrt(2);
+            height = baseSize * Math.sqrt(2);
+            path = 'M' + (width - 1) + ',-1l2,2' +
+                   'M0,0L' + width + ',' + height +
+                   'M-1,' + (height - 1) + 'l2,2';
+            break;
+        case 'x':
+            width  = baseSize * Math.sqrt(2);
+            height = baseSize * Math.sqrt(2);
+            path = 'M-1,1l2,-2' +
+                   'M0,' + height + 'L' + width + ',0' +
+                   'M' + (width - 1) + ',' + (height + 1) + 'l2,-2' +
+                   'M' + (width - 1) + ',-1l2,2' +
+                   'M0,0L' + width + ',' + height +
+                   'M-1,' + (height - 1) + 'l2,2';
+            break;
+        case '|':
+            width  = baseSize;
+            height = baseSize;
+            path = 'M' + (width / 2) + ',0L' + (width / 2) + ',' + height;
+            break;
+        case '-':
+            width  = baseSize;
+            height = baseSize;
+            path = 'M0,' + (height / 2) + 'L' + width + ',' + (height / 2);
+            break;
+        case '+':
+            width  = baseSize;
+            height = baseSize;
+            path = 'M' + (width / 2) + ',0L' + (width / 2) + ',' + height +
+                   'M0,' + (height / 2) + 'L' + width + ',' + (height / 2);
+            break;
+        case '+':
+            width  = baseSize;
+            height = baseSize;
+            path = 'M' + (width / 2) + ',0L' + (width / 2) + ',' + height +
+                   'M0,' + (height / 2) + 'L' + width + ',' + (height / 2);
+            break;
+        case '.':
+            width  = baseSize;
+            height = baseSize;
+            break;
+    }
+
+    var pattern = fullLayout._defs.select('.patterns')
+        .selectAll('#' + fullID)
+        .data([0]);
+
+    pattern.exit().remove();
+
+    pattern.enter()
+        .append('pattern')
+        .each(function() {
+            var el = d3.select(this);
+
+            el.attr({
+                'id'           : fullID,
+                'width'        : width + 'px',
+                'height'       : height + 'px',
+                'patternUnits' : 'userSpaceOnUse'
+            });
+
+            var rects = el.selectAll('rect').data([0]);
+            rects.exit().remove();
+            if(bgcolor) {
+                rects.enter()
+                    .append('rect')
+                    .attr({
+                        'width'  : width + 'px',
+                        'height' : height + 'px',
+                        'fill'   : bgcolor
+                    });
+            }
+
+            if(shape == '.') {
+                var circles = el.selectAll('circle').data([0]);
+                circles.exit().remove();
+                circles.enter()
+                    .append('circle')
+                    .attr({
+                        'cx'   : width / 2,
+                        'cy'   : height / 2,
+                        'r'    : solidity,
+                        'fill' : fgcolor
+                    });
+            } else {
+                var paths = el.selectAll('path').data([0]);
+                paths.exit().remove();
+                paths.enter()
+                    .append('path')
+                    .attr({
+                        'd'            : path,
+                        'stroke'       : fgcolor,
+                        'stroke-width' : solidity + 'px'
+                    });
+            }
+        });
+
+    sel.style(prop, getFullUrl(fullID, gd))
+        .style(prop + '-opacity', null);
+
+    sel.classed("pattern_filled", true);
+    var className2query = function(s) {
+        return '.' + s.attr('class').replace(/\s/g, '.');
+    };
+    var k = className2query(d3.select(sel.node().parentNode)) + '>.pattern_filled';
+    fullLayout._patternUrlQueryParts[k] = 1;
+};
+
 /*
  * Make the gradients container and clear out any previous gradients.
  * We never collect all the gradients we need in one place,
@@ -372,6 +511,16 @@ drawing.initGradients = function(gd) {
     fullLayout._gradientUrlQueryParts = {};
 };
 
+drawing.initPatterns = function(gd) {
+    var fullLayout = gd._fullLayout;
+
+    var patternsGroup = Lib.ensureSingle(fullLayout._defs, 'g', 'patterns');
+    patternsGroup.selectAll('pattern').remove();
+
+    // initialize stash of query parts filled in Drawing.pattern,
+    // used to fix URL strings during image exports
+    fullLayout._patternUrlQueryParts = {};
+};
 
 drawing.pointStyle = function(s, trace, gd) {
     if(!s.size()) return;
@@ -482,6 +631,16 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
             if(!gradientInfo[gradientType]) gradientType = 0;
         }
 
+        var getPatternAttr = function(mp, i, dflt) {
+            if (mp && Array.isArray(mp)) {
+                if (i < mp.length) return mp[i];
+                else               return dflt;
+            }
+            return mp;
+        };
+        var markerPattern = marker.patternfill;
+        var patternShape  = markerPattern && getPatternAttr(markerPattern.shape, d.i, '');
+
         if(gradientType && gradientType !== 'none') {
             var gradientColor = d.mgc;
             if(gradientColor) perPointGradient = true;
@@ -492,6 +651,20 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
 
             drawing.gradient(sel, gd, gradientID, gradientType,
                 [[0, gradientColor], [1, fillColor]], 'fill');
+        } else if(patternShape) {
+          var patternBGColor  = getPatternAttr(markerPattern.bgcolor , d.i, null);
+          var patternScale    = getPatternAttr(markerPattern.scale   , d.i, 1);
+          var patternSolidity = getPatternAttr(markerPattern.solidity, d.i, 1);
+          var perPointPattern = Array.isArray(markerPattern.shape)   ||
+                                Array.isArray(markerPattern.bgcolor) ||
+                                Array.isArray(markerPattern.scale)   ||
+                                Array.isArray(markerPattern.solidity);
+
+            var patternID = trace.uid;
+            if(perPointPattern) patternID += '-' + d.i;
+
+            drawing.pattern(sel, gd, patternID, patternShape, patternBGColor, fillColor,
+                            patternScale, patternSolidity, 'fill');
         } else {
             Color.fill(sel, fillColor);
         }
diff --git a/src/components/legend/style.js b/src/components/legend/style.js
@@ -357,8 +357,30 @@ module.exports = function style(s, gd, legend) {
             var d0 = d[0];
             var w = boundLineWidth(d0.mlw, marker.line, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);
 
-            p.style('stroke-width', w + 'px')
-                .call(Color.fill, d0.mc || marker.color);
+            p.style('stroke-width', w + 'px');
+
+            var fillColor = d0.mc || marker.color;
+
+            var getPatternAttr = function(mp, dflt) {
+                if (mp && Array.isArray(mp)) {
+                    if (mp.length > 0) return mp[0];
+                    else               return dflt;
+                }
+                return mp;
+            };
+            var markerPattern = marker.patternfill;
+            var patternShape  = markerPattern && getPatternAttr(markerPattern.shape, '');
+
+            if(patternShape) {
+                var patternBGColor  = getPatternAttr(markerPattern.bgcolor , null);
+                var patternScale    = getPatternAttr(markerPattern.scale   , 1);
+                var patternSolidity = getPatternAttr(markerPattern.solidity, 1);
+                var patternID       = trace.uid;
+                p.call(Drawing.pattern, gd, patternID, patternShape, patternBGColor,
+                       fillColor, patternScale, patternSolidity, 'fill');
+            } else {
+                p.call(Color.fill, fillColor);
+            }
 
             if(w) Color.stroke(p, d0.mlc || markerLine.color);
         });
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
@@ -144,8 +144,9 @@ function _doPlot(gd, data, layout, config) {
         }
     }
 
-    // clear gradient defs on each .plot call, because we know we'll loop through all traces
+    // clear gradient and pattern defs on each .plot call, because we know we'll loop through all traces
     Drawing.initGradients(gd);
+    Drawing.initPatterns(gd);
 
     // save initial show spikes once per graph
     if(graphWasEmpty) Axes.saveShowSpikeInitial(gd);
diff --git a/src/snapshot/tosvg.js b/src/snapshot/tosvg.js
@@ -106,28 +106,31 @@ module.exports = function toSVG(gd, format, scale) {
             }
         });
 
-
+    var queryParts = [];
     if(fullLayout._gradientUrlQueryParts) {
-        var queryParts = [];
         for(var k in fullLayout._gradientUrlQueryParts) queryParts.push(k);
+    }
 
-        if(queryParts.length) {
-            svg.selectAll(queryParts.join(',')).each(function() {
-                var pt = d3.select(this);
-
-                // similar to font family styles above,
-                // we must remove " after the SVG DOM has been serialized
-                var fill = this.style.fill;
-                if(fill && fill.indexOf('url(') !== -1) {
-                    pt.style('fill', fill.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
-                }
-
-                var stroke = this.style.stroke;
-                if(stroke && stroke.indexOf('url(') !== -1) {
-                    pt.style('stroke', stroke.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
-                }
-            });
-        }
+    if(fullLayout._patternUrlQueryParts) {
+        for(var k in fullLayout._patternUrlQueryParts) queryParts.push(k);
+    }
+
+    if(queryParts.length) {
+        svg.selectAll(queryParts.join(',')).each(function() {
+            var pt = d3.select(this);
+
+            // similar to font family styles above,
+            // we must remove " after the SVG DOM has been serialized
+            var fill = this.style.fill;
+            if(fill && fill.indexOf('url(') !== -1) {
+                pt.style('fill', fill.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
+            }
+
+            var stroke = this.style.stroke;
+            if(stroke && stroke.indexOf('url(') !== -1) {
+                pt.style('stroke', stroke.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
+            }
+        });
     }
 
     if(format === 'pdf' || format === 'eps') {
diff --git a/src/traces/bar/attributes.js b/src/traces/bar/attributes.js
@@ -39,6 +39,51 @@ var marker = extendFlat({
         max: 1,
         editType: 'style',
         description: 'Sets the opacity of the bars.'
+    },
+    patternfill: {
+        shape: {
+            valType: 'enumerated',
+            values: ['', '/', '\\', 'x', '-', '|', '+', '.'],
+            dflt: '',
+            arrayOk: true,
+            editType: 'style',
+            description: [
+                'Sets the shape of the pattern fill.',
+                'By default, no pattern is used for filling the area.',
+            ].join(' ')
+        },
+        bgcolor: {
+            valType: 'color',
+            arrayOk: true,
+            editType: 'style',
+            description: [
+                'Sets the background color of the pattern fill.',
+                'Defaults to a transparent background.',
+            ].join(' ')
+        },
+        scale: {
+            valType: 'number',
+            min: 0,
+            dflt: 1,
+            arrayOk: true,
+            editType: 'style',
+            description: [
+                'Sets the scale of the pattern fill.',
+                'Defaults to 1.',
+            ].join(' ')
+        },
+        solidity: {
+            valType: 'number',
+            min: 0,
+            dflt: 1,
+            arrayOk: true,
+            editType: 'style',
+            description: [
+                'Sets the solidity of the pattern fill.',
+                'Defaults to 1.',
+            ].join(' ')
+        },
+        editType: 'style'
     }
 });
 
diff --git a/src/traces/bar/style_defaults.js b/src/traces/bar/style_defaults.js
@@ -23,6 +23,10 @@ module.exports = function handleStyleDefaults(traceIn, traceOut, coerce, default
 
     coerce('marker.line.width');
     coerce('marker.opacity');
+    coerce('marker.patternfill.shape');
+    coerce('marker.patternfill.bgcolor');
+    coerce('marker.patternfill.scale');
+    coerce('marker.patternfill.solidity');
     coerce('selected.marker.color');
     coerce('unselected.marker.color');
 };
diff --git a/test/image/baselines/bar_patternfill.png b/test/image/baselines/bar_patternfill.png
diff --git a/test/image/mocks/bar_patternfill.json b/test/image/mocks/bar_patternfill.json
diff --git a/test/jasmine/tests/mock_test.js b/test/jasmine/tests/mock_test.js

Original file line number	Diff line number	Diff line change
`@@ -144,8 +144,9 @@ function _doPlot(gd, data, layout, config) {`
`144`	`144`	`}`
`145`	`145`	`}`
`146`	`146`
`147`		`- // clear gradient defs on each .plot call, because we know we'll loop through all traces`
	`147`	`+ // clear gradient and pattern defs on each .plot call, because we know we'll loop through all traces`
`148`	`148`	`Drawing.initGradients(gd);`
	`149`	`+ Drawing.initPatterns(gd);`
`149`	`150`
`150`	`151`	`// save initial show spikes once per graph`
`151`	`152`	`if(graphWasEmpty) Axes.saveShowSpikeInitial(gd);`