path pattern fills

Author: alexcjohnson

src/components/drawing/attributes.js

@@ -28,6 +28,16 @@ exports.pattern = {
             'By default, no pattern is used for filling the area.',
         ].join(' ')
     },
+    path: {
+        valType: 'string',
+        arrayOk: true,
+        editType: 'style',
+        description: [
+            'Sets a custom path for pattern fill.',
+            'Use with no `shape` or `solidity`, provide an SVG path string for',
+            'the regions of the square from (0,0) to (`size`,`size`) to color.'
+        ].join(' ')
+    },
     fillmode: {
         valType: 'enumerated',
         values: ['replace', 'overlay'],

src/components/drawing/index.js

@@ -218,13 +218,14 @@ drawing.dashStyle = function(dash, lineWidth) {
 function setFillStyle(sel, trace, gd, forLegend) {
     var markerPattern = trace.fillpattern;
     var fillgradient = trace.fillgradient;
-    var patternShape = markerPattern && drawing.getPatternAttr(markerPattern.shape, 0, '');
+    var pAttr = drawing.getPatternAttr;
+    var patternShape = markerPattern && (pAttr(markerPattern.shape, 0, '') || pAttr(markerPattern.path, 0, ''));
     if(patternShape) {
-        var patternBGColor = drawing.getPatternAttr(markerPattern.bgcolor, 0, null);
-        var patternFGColor = drawing.getPatternAttr(markerPattern.fgcolor, 0, null);
+        var patternBGColor = pAttr(markerPattern.bgcolor, 0, null);
+        var patternFGColor = pAttr(markerPattern.fgcolor, 0, null);
         var patternFGOpacity = markerPattern.fgopacity;
-        var patternSize = drawing.getPatternAttr(markerPattern.size, 0, 8);
-        var patternSolidity = drawing.getPatternAttr(markerPattern.solidity, 0, 0.3);
+        var patternSize = pAttr(markerPattern.size, 0, 8);
+        var patternSolidity = pAttr(markerPattern.solidity, 0, 0.3);
         var patternID = trace.uid;
         drawing.pattern(sel, 'point', gd, patternID,
             patternShape, patternSize, patternSolidity,
@@ -306,6 +307,7 @@ drawing.fillGroupStyle = function(s, gd, forLegend) {
 };
 
 var SYMBOLDEFS = require('./symbol_defs');
+const { marker } = require('../../traces/bar/attributes');
 
 drawing.symbolNames = [];
 drawing.symbolFuncs = [];
@@ -662,6 +664,16 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
                 fill: fgRGB
             };
             break;
+        default:
+            width = size;
+            height = size;
+            patternTag = 'path';
+            patternAttrs = {
+                d: shape,
+                opacity: opacity,
+                fill: fgRGB
+            };
+            break;
     }
 
     var str = [
@@ -869,7 +881,10 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd, pt) {
         }
 
         var markerPattern = marker.pattern;
-        var patternShape = markerPattern && drawing.getPatternAttr(markerPattern.shape, d.i, '');
+        var pAttr = drawing.getPatternAttr;
+        var patternShape = markerPattern && (
+            pAttr(markerPattern.shape, d.i, '') || pAttr(markerPattern.path, d.i, '')
+        );
 
         if(gradientType && gradientType !== 'none') {
             var gradientColor = d.mgc;
@@ -888,14 +903,15 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd, pt) {
                 fgcolor = pt.color;
                 perPointPattern = true;
             }
-            var patternFGColor = drawing.getPatternAttr(fgcolor, d.i, (pt && pt.color) || null);
+            var patternFGColor = pAttr(fgcolor, d.i, (pt && pt.color) || null);
 
-            var patternBGColor = drawing.getPatternAttr(markerPattern.bgcolor, d.i, null);
+            var patternBGColor = pAttr(markerPattern.bgcolor, d.i, null);
             var patternFGOpacity = markerPattern.fgopacity;
-            var patternSize = drawing.getPatternAttr(markerPattern.size, d.i, 8);
-            var patternSolidity = drawing.getPatternAttr(markerPattern.solidity, d.i, 0.3);
+            var patternSize = pAttr(markerPattern.size, d.i, 8);
+            var patternSolidity = pAttr(markerPattern.solidity, d.i, 0.3);
             perPointPattern = perPointPattern || d.mcc ||
                 Lib.isArrayOrTypedArray(markerPattern.shape) ||
+                Lib.isArrayOrTypedArray(markerPattern.path) ||
                 Lib.isArrayOrTypedArray(markerPattern.bgcolor) ||
                 Lib.isArrayOrTypedArray(markerPattern.fgcolor) ||
                 Lib.isArrayOrTypedArray(markerPattern.size) ||

src/components/legend/style.js

@@ -376,11 +376,14 @@ module.exports = function style(s, gd, legend) {
             var fillColor = mcc || d0.mc || marker.color;
 
             var markerPattern = marker.pattern;
-            var patternShape = markerPattern && Drawing.getPatternAttr(markerPattern.shape, 0, '');
+            var pAttr = Drawing.getPatternAttr;
+            var patternShape = markerPattern && (
+                pAttr(markerPattern.shape, 0, '') || pAttr(markerPattern.path, 0, '')
+            );
 
             if(patternShape) {
-                var patternBGColor = Drawing.getPatternAttr(markerPattern.bgcolor, 0, null);
-                var patternFGColor = Drawing.getPatternAttr(markerPattern.fgcolor, 0, null);
+                var patternBGColor = pAttr(markerPattern.bgcolor, 0, null);
+                var patternFGColor = pAttr(markerPattern.fgcolor, 0, null);
                 var patternFGOpacity = markerPattern.fgopacity;
                 var patternSize = dimAttr(markerPattern.size, 8, 10);
                 var patternSolidity = dimAttr(markerPattern.solidity, 0.5, 1);

src/lib/coerce.js

@@ -502,8 +502,14 @@ exports.coerceFont = function(coerce, attr, dfltObj, opts) {
  */
 exports.coercePattern = function(coerce, attr, markerColor, hasMarkerColorscale) {
     var shape = coerce(attr + '.shape');
-    if(shape) {
-        coerce(attr + '.solidity');
+    var path;
+    if(!shape) {
+        path = coerce(attr + '.path');
+    }
+    if(shape || path) {
+        if(shape) {
+            coerce(attr + '.solidity');
+        }
         coerce(attr + '.size');
         var fillmode = coerce(attr + '.fillmode');
         var isOverlay = fillmode === 'overlay';

test/image/mocks/pattern_bars.json

@@ -56,7 +56,27 @@
     }
    }
   },
-
+  {
+    "x": ["a", "b", "c", "d", "e"],
+    "y": [7, 8, 9, 10, 11],
+    "name": "Bar 5",
+    "type": "bar",
+    "textposition": "outside",
+    "text": "path",
+    "marker": {
+     "pattern": {
+      "path": [
+        "M0,0H4V4H0Z",
+        "M0,0H6V6Z",
+        "M0,0V4H4Z",
+        "M0,0C0,2,4,2,4,4C4,6,0,6,0,8H2C2,6,6,6,6,4C6,2,2,2,2,0Z",
+        "M4,4L7,2A3.5,3.5,0,1,0,7,6Z"
+      ],
+      "fgcolor": "yellow",
+      "bgcolor": "black"
+     }
+    }
+   },
   {
    "t": ["M", "N", "O", "P"],
    "r": [1, 2, 3, 4],