add options to include shapes and newshape in legends

draftlogs/6653_add.md

@@ -0,0 +1 @@
+ - add options to include shapes and `newshape` in legends [[#6653](https://github.com/plotly/plotly.js/pull/6653)]

src/components/colorbar/draw.js

@@ -117,6 +117,7 @@ function makeColorBarData(gd) {
     for(var i = 0; i < calcdata.length; i++) {
         var cd = calcdata[i];
         trace = cd[0].trace;
+        if(!trace._module) continue;
         var moduleOpts = trace._module.colorbar;
 
         if(trace.visible === true && moduleOpts) {

src/components/legend/defaults.js

@@ -195,17 +195,37 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) {
 
 module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
     var i;
-    var legends = ['legend'];
 
-    for(i = 0; i < fullData.length; i++) {
-        Lib.pushUnique(legends, fullData[i].legend);
+    var allLegendsData = fullData.slice();
+
+    // shapes could also show up in legends
+    var shapes = layoutOut.shapes;
+    if(shapes) {
+        for(i = 0; i < shapes.length; i++) {
+            var shape = shapes[i];
+            if(!shape.showlegend) continue;
+
+            var mockTrace = {
+                _input: shape._input,
+                visible: shape.visible,
+                showlegend: shape.showlegend,
+                legend: shape.legend
+            };
+
+            allLegendsData.push(mockTrace);
+        }
+    }
+
+    var legends = ['legend'];
+    for(i = 0; i < allLegendsData.length; i++) {
+        Lib.pushUnique(legends, allLegendsData[i].legend);
     }
 
     layoutOut._legends = [];
     for(i = 0; i < legends.length; i++) {
         var legendId = legends[i];
 
-        groupDefaults(legendId, layoutIn, layoutOut, fullData);
+        groupDefaults(legendId, layoutIn, layoutOut, allLegendsData);
 
         if(
             layoutOut[legendId] &&

src/components/legend/draw.js

@@ -77,8 +77,39 @@ function drawOne(gd, opts) {
 
     var legendData;
     if(!inHover) {
-        if(!gd.calcdata) return;
-        legendData = fullLayout.showlegend && getLegendData(gd.calcdata, legendObj, fullLayout._legends.length > 1);
+        var calcdata = (gd.calcdata || []).slice();
+
+        var shapes = fullLayout.shapes;
+        for(var i = 0; i < shapes.length; i++) {
+            var shape = shapes[i];
+            if(!shape.showlegend) continue;
+
+            var shapeLegend = {
+                _fullInput: shape,
+                index: shape._index,
+                name: shape.name || shape.label.text || ('shape ' + shape._index),
+                legend: shape.legend,
+                legendgroup: shape.legendgroup,
+                legendgrouptitle: shape.legendgrouptitle,
+                legendrank: shape.legendrank,
+                legendwidth: shape.legendwidth,
+                showlegend: shape.showlegend,
+                visible: shape.visible,
+                opacity: shape.opacity,
+                mode: shape.type === 'line' ? 'lines' : 'markers',
+                line: shape.line,
+                marker: {
+                    line: shape.line,
+                    color: shape.fillcolor,
+                    symbol: shape.type === 'rect' ? 'square' : 'circle',
+                    size: 12
+                },
+            };
+
+            calcdata.push([{ trace: shapeLegend }]);
+        }
+        if(!calcdata.length) return;
+        legendData = fullLayout.showlegend && getLegendData(calcdata, legendObj, fullLayout._legends.length > 1);
     } else {
         if(!legendObj.entries) return;
         legendData = getLegendData(legendObj.entries, legendObj);

src/components/legend/handle_click.js

@@ -68,13 +68,17 @@ module.exports = function handleClick(g, gd, numClicks) {
         if(legendItem.groupTitle && !toggleGroup) return;
 
         var fullInput = fullTrace._fullInput;
+        var isShape = fullInput._isShape;
+        if(isShape) fullInput = fullTrace;
+        var index = fullInput.index;
+
         if(Registry.hasTransform(fullInput, 'groupby')) {
-            var kcont = carrs[fullInput.index];
+            var kcont = carrs[index];
             if(!kcont) {
                 var groupbyIndices = Registry.getTransformIndices(fullInput, 'groupby');
                 var lastGroupbyIndex = groupbyIndices[groupbyIndices.length - 1];
                 kcont = Lib.keyedContainer(fullInput, 'transforms[' + lastGroupbyIndex + '].styles', 'target', 'value.visible');
-                carrs[fullInput.index] = kcont;
+                carrs[index] = kcont;
             }
 
             var curState = kcont.get(fullTrace._group);
@@ -92,14 +96,18 @@ module.exports = function handleClick(g, gd, numClicks) {
                 // true -> legendonly. All others toggle to true:
                 kcont.set(fullTrace._group, visibility);
             }
-            carrIdx[fullInput.index] = insertUpdate(fullInput.index, 'visible', fullInput.visible === false ? false : true);
+            carrIdx[index] = insertUpdate(index, 'visible', fullInput.visible === false ? false : true);
         } else {
             // false -> false (not possible since will not be visible in legend)
             // true -> legendonly
             // legendonly -> true
             var nextVisibility = fullInput.visible === false ? false : visibility;
 
-            insertUpdate(fullInput.index, 'visible', nextVisibility);
+            if(isShape) {
+                Registry.call('_guiRelayout', gd, 'shapes[' + index + '].visible', nextVisibility);
+            } else {
+                insertUpdate(index, 'visible', nextVisibility);
+            }
         }
     }
 

src/components/shapes/attributes.js

@@ -7,19 +7,80 @@ var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 var templatedArray = require('../../plot_api/plot_template').templatedArray;
 var axisPlaceableObjs = require('../../constants/axis_placeable_objects');
+var basePlotAttributes = require('../../plots/attributes');
 var shapeTexttemplateAttrs = require('../../plots/template_attributes').shapeTexttemplateAttrs;
 var shapeLabelTexttemplateVars = require('./label_texttemplate');
 
 module.exports = templatedArray('shape', {
-    visible: {
+    visible: extendFlat({}, basePlotAttributes.visible, {
+        editType: 'calc+arraydraw',
+        description: [
+            'Determines whether or not this shape is visible.',
+            'If *legendonly*, the shape is not drawn,',
+            'but can appear as a legend item',
+            '(provided that the legend itself is visible).'
+        ].join(' ')
+    }),
+
+    showlegend: {
         valType: 'boolean',
-        dflt: true,
+        dflt: false,
         editType: 'calc+arraydraw',
         description: [
-            'Determines whether or not this shape is visible.'
+            'Determines whether or not this',
+            'shape is shown in the legend.'
         ].join(' ')
     },
 
+    legend: extendFlat({}, basePlotAttributes.legend, {
+        editType: 'calc+arraydraw',
+        description: [
+            'Sets the reference to a legend to show this shape in.',
+            'References to these legends are *legend*, *legend2*, *legend3*, etc.',
+            'Settings for these legends are set in the layout, under',
+            '`layout.legend`, `layout.legend2`, etc.'
+        ].join(' ')
+    }),
+
+    legendgroup: extendFlat({}, basePlotAttributes.legendgroup, {
+        editType: 'calc+arraydraw',
+        description: [
+            'Sets the legend group for this shape.',
+            'Traces and shapes part of the same legend group hide/show at the same time',
+            'when toggling legend items.'
+        ].join(' ')
+    }),
+
+    legendgrouptitle: {
+        text: extendFlat({}, basePlotAttributes.legendgrouptitle.text, {
+            editType: 'calc+arraydraw'
+        }),
+        font: fontAttrs({
+            editType: 'calc+arraydraw',
+            description: [
+                'Sets this legend group\'s title font.'
+            ].join(' '),
+        }),
+        editType: 'calc+arraydraw',
+    },
+
+    legendrank: extendFlat({}, basePlotAttributes.legendrank, {
+        editType: 'calc+arraydraw',
+        description: [
+            'Sets the legend rank for this shape.',
+            'Items and groups with smaller ranks are presented on top/left side while',
+            'with *reversed* `legend.traceorder` they are on bottom/right side.',
+            'The default legendrank is 1000,',
+            'so that you can use ranks less than 1000 to place certain items before all unranked items,',
+            'and ranks greater than 1000 to go after all unranked items.'
+        ].join(' ')
+    }),
+
+    legendwidth: extendFlat({}, basePlotAttributes.legendwidth, {
+        editType: 'calc+arraydraw',
+        description: 'Sets the width (in px or fraction) of the legend for this shape.',
+    }),
+
     type: {
         valType: 'enumerated',
         values: ['circle', 'rect', 'path', 'line'],

src/components/shapes/defaults.js

@@ -29,9 +29,21 @@ function handleShapeDefaults(shapeIn, shapeOut, fullLayout) {
         return Lib.coerce(shapeIn, shapeOut, attributes, attr, dflt);
     }
 
+    shapeOut._isShape = true;
+
     var visible = coerce('visible');
     if(!visible) return;
 
+    var showlegend = coerce('showlegend');
+    if(showlegend) {
+        coerce('legend');
+        coerce('legendwidth');
+        coerce('legendgroup');
+        coerce('legendgrouptitle.text');
+        Lib.coerceFont(coerce, 'legendgrouptitle.font');
+        coerce('legendrank');
+    }
+
     var path = coerce('path');
     var dfltType = path ? 'path' : 'rect';
     var shapeType = coerce('type', dfltType);

src/components/shapes/draw.js

@@ -58,7 +58,7 @@ function draw(gd) {
     }
 
     for(var i = 0; i < fullLayout.shapes.length; i++) {
-        if(fullLayout.shapes[i].visible) {
+        if(fullLayout.shapes[i].visible === true) {
             drawOne(gd, i);
         }
     }
@@ -89,7 +89,7 @@ function drawOne(gd, index) {
 
     // this shape is gone - quit now after deleting it
     // TODO: use d3 idioms instead of deleting and redrawing every time
-    if(!options._input || options.visible === false) return;
+    if(!options._input || options.visible !== true) return;
 
     if(options.layer !== 'below') {
         drawShape(gd._fullLayout._shapeUpperLayer);

src/components/shapes/draw_newshape/attributes.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var basePlotAttributes = require('../../../plots/attributes');
 var fontAttrs = require('../../../plots/font_attributes');
 var dash = require('../../drawing/attributes').dash;
 var extendFlat = require('../../../lib/extend').extendFlat;
@@ -9,6 +10,75 @@ var shapeLabelTexttemplateVars = require('../label_texttemplate');
 
 module.exports = {
     newshape: {
+        visible: extendFlat({}, basePlotAttributes.visible, {
+            editType: 'none',
+            description: [
+                'Determines whether or not new shape is visible.',
+                'If *legendonly*, the shape is not drawn,',
+                'but can appear as a legend item',
+                '(provided that the legend itself is visible).'
+            ].join(' ')
+        }),
+
+        showlegend: {
+            valType: 'boolean',
+            dflt: false,
+            editType: 'none',
+            description: [
+                'Determines whether or not new',
+                'shape is shown in the legend.'
+            ].join(' ')
+        },
+
+        legend: extendFlat({}, basePlotAttributes.legend, {
+            editType: 'none',
+            description: [
+                'Sets the reference to a legend to show new shape in.',
+                'References to these legends are *legend*, *legend2*, *legend3*, etc.',
+                'Settings for these legends are set in the layout, under',
+                '`layout.legend`, `layout.legend2`, etc.'
+            ].join(' ')
+        }),
+
+        legendgroup: extendFlat({}, basePlotAttributes.legendgroup, {
+            editType: 'none',
+            description: [
+                'Sets the legend group for new shape.',
+                'Traces and shapes part of the same legend group hide/show at the same time',
+                'when toggling legend items.'
+            ].join(' ')
+        }),
+
+        legendgrouptitle: {
+            text: extendFlat({}, basePlotAttributes.legendgrouptitle.text, {
+                editType: 'none'
+            }),
+            font: fontAttrs({
+                editType: 'none',
+                description: [
+                    'Sets this legend group\'s title font.'
+                ].join(' '),
+            }),
+            editType: 'none',
+        },
+
+        legendrank: extendFlat({}, basePlotAttributes.legendrank, {
+            editType: 'none',
+            description: [
+                'Sets the legend rank for new shape.',
+                'Items and groups with smaller ranks are presented on top/left side while',
+                'with *reversed* `legend.traceorder` they are on bottom/right side.',
+                'The default legendrank is 1000,',
+                'so that you can use ranks less than 1000 to place certain items before all unranked items,',
+                'and ranks greater than 1000 to go after all unranked items.'
+            ].join(' ')
+        }),
+
+        legendwidth: extendFlat({}, basePlotAttributes.legendwidth, {
+            editType: 'none',
+            description: 'Sets the width (in px or fraction) of the legend for new shape.',
+        }),
+
         line: {
             color: {
                 valType: 'color',

src/components/shapes/draw_newshape/defaults.js

@@ -14,6 +14,16 @@ function dfltLabelYanchor(isLine, labelTextPosition) {
 }
 
 module.exports = function supplyDrawNewShapeDefaults(layoutIn, layoutOut, coerce) {
+    coerce('newshape.visible');
+
+    coerce('newshape.showlegend');
+    coerce('newshape.legend');
+    coerce('newshape.legendwidth');
+    coerce('newshape.legendgroup');
+    coerce('newshape.legendgrouptitle.text');
+    Lib.coerceFont(coerce, 'newshape.legendgrouptitle.font');
+    coerce('newshape.legendrank');
+
     coerce('newshape.drawdirection');
     coerce('newshape.layer');
     coerce('newshape.fillcolor');

src/components/shapes/draw_newshape/newshapes.js

@@ -125,6 +125,18 @@ function createShapeObj(outlines, dragOptions, dragmode) {
     var newShape = {
         editable: true,
 
+        visible: newStyle.visible,
+
+        showlegend: newStyle.showlegend,
+        legend: newStyle.legend,
+        legendwidth: newStyle.legendwidth,
+        legendgroup: newStyle.legendgroup,
+        legendgrouptitle: {
+            text: newStyle.legendgrouptitle.text,
+            font: newStyle.legendgrouptitle.font
+        },
+        legendrank: newStyle.legendrank,
+
         label: newStyle.label,
 
         xref: xPaper ? 'paper' : xaxis._id,

src/core.js

@@ -31,8 +31,6 @@ register(require('./traces/scatter'));
 
 // register all registrable components modules
 register([
-    require('./components/legend'),
-    require('./components/fx'), // fx needs to come after legend
     require('./components/annotations'),
     require('./components/annotations3d'),
     require('./components/selections'),
@@ -46,6 +44,8 @@ register([
     require('./components/errorbars'),
     require('./components/colorscale'),
     require('./components/colorbar'),
+    require('./components/legend'),
+    require('./components/fx'), // fx needs to come after legend
     require('./components/modebar')
 ]);