add options to include shapes and newshape in legends

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,54 @@ 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'
+    }),
+
+    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'
+    }),
+
+    legendgroup: extendFlat({}, basePlotAttributes.legendgroup, {
+        editType: 'calc+arraydraw'
+    }),
+
+    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'
+    }),
+
+    legendwidth: extendFlat({}, basePlotAttributes.legendwidth, {
+        editType: 'calc+arraydraw'
+    }),
+
     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,49 @@ var shapeLabelTexttemplateVars = require('../label_texttemplate');
 
 module.exports = {
     newshape: {
+        visible: extendFlat({}, basePlotAttributes.visible, {
+            editType: 'none'
+        }),
+
+        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'
+        }),
+
+        legendgroup: extendFlat({}, basePlotAttributes.legendgroup, {
+            editType: 'none'
+        }),
+
+        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'
+        }),
+
+        legendwidth: extendFlat({}, basePlotAttributes.legendwidth, {
+            editType: 'none'
+        }),
+
         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')
 ]);
 

src/plot_api/plot_api.js

@@ -2228,6 +2228,15 @@ function _relayout(gd, aobj) {
     // couldn't editType do this?
     if(updateAutosize(gd) || aobj.height || aobj.width) flags.plot = true;
 
+    // update shape legends
+    var shapes = fullLayout.shapes;
+    for(i = 0; i < shapes.length; i++) {
+        if(shapes[i].showlegend) {
+            flags.calc = true;
+            break;
+        }
+    }
+
     if(flags.plot || flags.calc) {
         flags.layoutReplot = true;
     }

src/plots/get_data.js

@@ -70,7 +70,7 @@ exports.getModuleCalcData = function(calcdata, arg1) {
         // would suggest), but by 'module plot method' so that if some traces
         // share the same module plot method (e.g. bar and histogram), we
         // only call it one!
-        if(trace._module.plot === plotMethod) {
+        if(trace._module && trace._module.plot === plotMethod) {
             moduleCalcData.push(cd);
         } else {
             remainingCalcData.push(cd);

test/image/mocks/multi-legends.json

@@ -55,9 +55,28 @@
                 "text": "Legend 3"
             }
         },
-        "hovermode": "x unified"
+        "hovermode": "x unified",
+        "dragmode": "drawline",
+        "newshape": {
+            "legend": "legend2",
+            "line": {
+                "color": "pink"
+            },
+            "label": {
+                "text": "new shape"
+            },
+            "showlegend": true
+        }
     },
     "config": {
-        "editable": true
+        "editable": true,
+        "modeBarButtonsToAdd": [
+            "drawline",
+            "drawopenpath",
+            "drawclosedpath",
+            "drawcircle",
+            "drawrect",
+            "eraseshape"
+        ]
     }
 }