Add legend title click toggle setup and event handling

Author: alexshoe

src/components/legend/draw.js

@@ -10,7 +10,8 @@ var dragElement = require('../dragelement');
 var Drawing = require('../drawing');
 var Color = require('../color');
 var svgTextUtils = require('../../lib/svg_text_utils');
-var handleClick = require('./handle_click');
+var handleClick = require('./handle_click').handleClick;
+var handleTitleClick = require('./handle_click').handleTitleClick;
 
 var constants = require('./constants');
 var alignmentConstants = require('../../constants/alignment');
@@ -180,8 +181,14 @@ function drawOne(gd, opts) {
             .text(title.text);
 
         textLayout(titleEl, scrollBox, gd, legendObj, MAIN_TITLE); // handle mathjax or multi-line text and compute title height
+
+        // Set up title click if enabled and not in hover mode
+        if(!inHover && (legendObj.titleclick || legendObj.titledoubleclick)) {
+            setupTitleToggle(scrollBox, gd, legendObj, legendId);
+        }
     } else {
         scrollBox.selectAll('.' + legendId + 'titletext').remove();
+        scrollBox.selectAll('.' + legendId + 'titletoggle').remove();
     }
 
     var scrollBar = Lib.ensureSingle(legend, 'rect', 'scrollbar', function(s) {
@@ -198,7 +205,22 @@ function drawOne(gd, opts) {
     traces.exit().remove();
 
     traces.style('opacity', function(d) {
-        var trace = d[0].trace;
+        var legendItem = d[0];
+        var trace = legendItem.trace;
+
+        // Toggle opacity of legend group titles if all items in the group are hidden
+        if(legendItem.groupTitle) {
+            var groupName = trace.legendgroup;
+            var shapes = (fullLayout.shapes || []).filter(function(s) { return s.showlegend; });
+            var anyVisible = gd._fullData.concat(shapes).some(function(item) {
+                return item.legendgroup === groupName &&
+                    (item.legend || 'legend') === legendId &&
+                    item.visible === true;
+            });
+
+            return anyVisible ? 1 : 0.5;
+        }
+
         if(Registry.traceIs(trace, 'pie-like')) {
             return hiddenSlices.indexOf(d[0].label) !== -1 ? 0.5 : 1;
         } else {
@@ -207,7 +229,12 @@ function drawOne(gd, opts) {
     })
     .each(function() { d3.select(this).call(drawTexts, gd, legendObj); })
     .call(style, gd, legendObj)
-    .each(function() { if(!inHover) d3.select(this).call(setupTraceToggle, gd, legendId); });
+    .each(function(d) {
+        if(inHover) return;
+        // Don't create a click targets for group titles when groupclick is 'toggleitem'
+        if(d[0].groupTitle && legendObj.groupclick === 'toggleitem') return;
+        d3.select(this).call(setupTraceToggle, gd, legendId);
+    });
 
     Lib.syncOrAsync([
         Plots.previousPromises,
@@ -221,6 +248,20 @@ function drawOne(gd, opts) {
             // re-calculate title position after legend width is derived. To allow for horizontal alignment
             if(title.text) {
                 horizontalAlignTitle(titleEl, legendObj, bw);
+
+                // Position click target for the title after dimensions are computed
+                if(!inHover && (legendObj.titleclick || legendObj.titledoubleclick)) {
+                    positionTitleToggle(scrollBox, legendObj, legendId);
+                }
+
+                // Toggle opacity of legend titles if all items in the legend are hidden
+                var shapes = (fullLayout.shapes || []).filter(function(s) { return s.showlegend; });
+                var anyVisible = gd._fullData.concat(shapes).some(function(item) {
+                    var inThisLegend = (item.legend || 'legend') === legendId;
+                    return inThisLegend && item.visible === true;
+                });
+                
+                titleEl.style('opacity', anyVisible ? 1 : 0.5);
             }
 
             if(!inHover) {
@@ -624,6 +665,92 @@ function setupTraceToggle(g, gd, legendId) {
     });
 }
 
+function setupTitleToggle(scrollBox, gd, legendObj, legendId) {
+    // For now, skip title click for legends containing pie-like traces
+    var hasPie = gd._fullData.some(function(trace) {
+        var legend = trace.legend || 'legend';
+        var inThisLegend = Array.isArray(legend) ? legend.includes(legendId) : legend === legendId;
+        return inThisLegend && Registry.traceIs(trace, 'pie-like');
+    });
+    if(hasPie) return;
+
+    var doubleClickDelay = gd._context.doubleClickDelay;
+    var newMouseDownTime;
+    var numClicks = 1;
+
+    var titleToggle = Lib.ensureSingle(scrollBox, 'rect', legendId + 'titletoggle', function(s) {
+        if(!gd._context.staticPlot) {
+            s.style('cursor', 'pointer').attr('pointer-events', 'all');
+        }
+        s.call(Color.fill, 'rgba(0,0,0,0)');
+    });
+
+    if(gd._context.staticPlot) return;
+
+    titleToggle.on('mousedown', function() {
+        newMouseDownTime = (new Date()).getTime();
+        if(newMouseDownTime - gd._legendMouseDownTime < doubleClickDelay) {
+            // in a click train
+            numClicks += 1;
+        } else {
+            // new click train
+            numClicks = 1;
+            gd._legendMouseDownTime = newMouseDownTime;
+        }
+    });
+    titleToggle.on('mouseup', function() {
+        if(gd._dragged || gd._editing) return;
+
+        if((new Date()).getTime() - gd._legendMouseDownTime > doubleClickDelay) {
+            numClicks = Math.max(numClicks - 1, 1);
+        }
+
+        var evtData = {
+            event: d3.event,
+            legendId: legendId,
+            data: gd.data,
+            layout: gd.layout,
+            fullData: gd._fullData,
+            fullLayout: gd._fullLayout
+        };
+
+        if(numClicks === 1 && legendObj.titleclick) {
+            var clickVal = Events.triggerHandler(gd, 'plotly_legendtitleclick', evtData);
+            if(clickVal === false) return;
+
+            legendObj._titleClickTimeout = setTimeout(function() {
+                if(gd._fullLayout) handleTitleClick(gd, legendObj, legendObj.titleclick);
+            }, doubleClickDelay);
+        } else if(numClicks === 2) {
+            if(legendObj._titleClickTimeout) clearTimeout(legendObj._titleClickTimeout);
+            gd._legendMouseDownTime = 0;
+
+            var dblClickVal = Events.triggerHandler(gd, 'plotly_legendtitledoubleclick', evtData);
+            if(dblClickVal !== false && legendObj.titledoubleclick) handleTitleClick(gd, legendObj, legendObj.titledoubleclick);
+        }
+    });
+}
+
+function positionTitleToggle(scrollBox, legendObj, legendId) {
+    var titleToggle = scrollBox.select('.' + legendId + 'titletoggle');
+    if(!titleToggle.size()) return;
+
+    var side = legendObj.title.side || 'top';
+    var bw = legendObj.borderwidth;
+    var x = bw;
+    var width = legendObj._titleWidth + 2 * constants.titlePad;
+    var height = legendObj._titleHeight + 2 * constants.titlePad;
+
+
+    if(side === 'top center') {
+        x = bw + 0.5 * (legendObj._width - 2 * bw - width);
+    } else if(side === 'top right') {
+        x = legendObj._width - bw - width;
+    }
+
+    titleToggle.attr({ x: x, y: bw, width: width, height: height });
+}
+
 function textLayout(s, g, gd, legendObj, aTitle) {
     if(legendObj._inHover) s.attr('data-notex', true); // do not process MathJax for unified hover
     svgTextUtils.convertToTspans(s, gd, function() {