Add marker.cornerradius to treemap

draftlogs/6351_add.md

@@ -0,0 +1 @@
+ - Expose `marker.fillet` attribute for rounded corners in treemap and icicle plots [[#6351](https://github.com/plotly/plotly.js/pull/6351)]

src/traces/icicle/attributes.js

@@ -61,6 +61,8 @@ module.exports = {
 
         line: sunburstAttrs.marker.line,
 
+        fillet: treemapAttrs.marker.fillet,
+
         editType: 'calc'
     },
         colorScaleAttrs('marker', {

src/traces/icicle/defaults.js

@@ -62,6 +62,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     var lineWidth = coerce('marker.line.width');
     if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
 
+    coerce('marker.fillet');
+
     coerce('marker.colors');
     var withColorscale = traceOut._hasColorscale = (
         hasColorscale(traceIn, 'marker', 'colors') ||

src/traces/treemap/attributes.js

@@ -141,7 +141,19 @@ module.exports = {
 
         line: sunburstAttrs.marker.line,
 
-        editType: 'calc'
+        fillet: {
+            valType: 'number',
+            min: 0,
+            // max: 10, // TODO: Do we need a max?
+            dflt: 0,
+            editType: 'plot',
+            description: [
+                'Sets the rounding of corners (in px).'
+            ].join(' ')
+        },
+
+        editType: 'calc',
+
     },
         colorScaleAttrs('marker', {
             colorAttr: 'colors',

src/traces/treemap/defaults.js

@@ -85,6 +85,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('marker.pad.r', headerSize / 4);
     coerce('marker.pad.b', bottomText ? headerSize : headerSize / 4);
 
+    coerce('marker.fillet');
+
     traceOut._hovered = {
         marker: {
             line: {

src/traces/treemap/plot_one.js

@@ -217,12 +217,8 @@ module.exports = function plotOne(gd, cd, element, transitionOpts, drawDescendan
         var dy = _y1 - _y0;
         if(!dx || !dy) return '';
 
-        var FILLET = 0; // TODO: may expose this constant
-
-        var r = (
-            dx > 2 * FILLET &&
-            dy > 2 * FILLET
-        ) ? FILLET : 0;
+        var FILLET = trace.marker.fillet;
+        var r = dx > 2 * FILLET && dy > 2 * FILLET ? FILLET : Math.min(dx, dy) / 2;
 
         var arc = function(rx, ry) { return r ? 'a' + pos(r, r) + ' 0 0 1 ' + pos(rx, ry) : ''; };
 

test/image/mocks/icicle_packages_colorscale_novalue.json

@@ -8,6 +8,7 @@
                 "line": {
                     "color": "#777"
                 },
+                "fillet": 10,
                 "colorscale": [[0, "#FFF"], [0.01, "#FF0"], [0.1, "#F00"], [1, "#000"]],
                 "showscale": true
             },

test/image/mocks/treemap_packages_colorscale_novalue.json

@@ -9,6 +9,7 @@
 				"line": {
 					"color": "#777"
 				},
+				"fillet": 4,
 				"colorscale": [[0, "#FFF"], [0.01, "#FF0"], [0.1, "#F00"], [1, "#000"]],
 				"showscale": true
 			},

test/jasmine/tests/icicle_test.js

@@ -793,6 +793,39 @@ describe('Test icicle restyle:', function() {
         .then(_assert('back to dflt', ['', '0.7', '', '0.7']))
         .then(done, done.fail);
     });
+
+    it('should be able to restyle *marker.fillet*', function(done) {
+        var mock = {
+            data: [{
+                type: 'icicle',
+                labels: ['Root', 'A', 'B', 'b'],
+                parents: ['', 'Root', 'Root', 'B']
+            }]
+        };
+
+        function _assert(msg, exp) {
+            return function() {
+                var layer = d3Select(gd).select('.iciclelayer');
+                layer.selectAll('.surface').each(function() {
+                    var surfaces = d3Select(this);
+                    var path = surfaces[0][0].getAttribute('d');
+                    expect(path.indexOf('a') !== -1).toEqual(exp);
+                });
+            };
+        }
+
+        Plotly.newPlot(gd, mock)
+        .then(_assert('no arcs', false))
+        .then(function() {
+            return Plotly.restyle(gd, 'marker.fillet', 10);
+        })
+        .then(_assert('has arcs', true))
+        .then(function() {
+            return Plotly.restyle(gd, 'marker.fillet', 0);
+        })
+        .then(_assert('no arcs', false))
+        .then(done, done.fail);
+    });
 });
 
 describe('Test icicle texttemplate without `values` should work at root level:', function() {

test/jasmine/tests/treemap_test.js

@@ -1294,6 +1294,42 @@ describe('Test treemap restyle:', function() {
         .then(_assert('back to dflt', ['Root', 'B', 'A\nnode1', 'b\nnode3']))
         .then(done, done.fail);
     });
+
+    it('should be able to restyle *marker.fillet*', function(done) {
+        var mock = {
+            data: [{
+                type: 'treemap',
+                labels: ['Root', 'A', 'B', 'b'],
+                parents: ['', 'Root', 'Root', 'B'],
+                text: ['node0', 'node1', 'node2', 'node3'],
+                values: [0, 1, 2, 3],
+                pathbar: { visible: false }
+            }]
+        };
+
+        function _assert(msg, exp) {
+            return function() {
+                var layer = d3Select(gd).select('.treemaplayer');
+                layer.selectAll('.surface').each(function() {
+                    var surfaces = d3Select(this);
+                    var path = surfaces[0][0].getAttribute('d');
+                    expect(path.indexOf('a') !== -1).toEqual(exp);
+                });
+            };
+        }
+
+        Plotly.newPlot(gd, mock)
+        .then(_assert('no arcs', false))
+        .then(function() {
+            return Plotly.restyle(gd, 'marker.fillet', 10);
+        })
+        .then(_assert('has arcs', true))
+        .then(function() {
+            return Plotly.restyle(gd, 'marker.fillet', 0);
+        })
+        .then(_assert('no arcs', false))
+        .then(done, done.fail);
+    });
 });
 
 describe('Test treemap tweening:', function() {

test/plot-schema.json

@@ -34113,6 +34113,13 @@
       "valType": "string"
      },
      "editType": "calc",
+     "fillet": {
+      "description": "Sets the rounding of corners (in px).",
+      "dflt": 0,
+      "editType": "plot",
+      "min": 0,
+      "valType": "number"
+     },
      "line": {
       "color": {
        "arrayOk": true,
@@ -69182,6 +69189,13 @@
       ]
      },
      "editType": "calc",
+     "fillet": {
+      "description": "Sets the rounding of corners (in px).",
+      "dflt": 0,
+      "editType": "plot",
+      "min": 0,
+      "valType": "number"
+     },
      "line": {
       "color": {
        "arrayOk": true,