fix select/lasso on ternary subplots

- broken since #448
- 🔒 down with test

Author: etpinard

src/plots/ternary/index.js

@@ -69,4 +69,8 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
             oldTernary.clipDef.remove();
         }
     }
+
+    if(oldFullLayout._zoomlayer) {
+        oldFullLayout._zoomlayer.selectAll('.select-outline').remove();
+    }
 };

src/plots/ternary/ternary.js

@@ -122,10 +122,6 @@ proto.makeFramework = function() {
 
     _this.plotContainer.selectAll('.backplot,.frontplot,.grids')
         .call(Drawing.setClipUrl, clipId);
-
-    if(!_this.graphDiv._context.staticPlot) {
-        _this.initInteractions();
-    }
 };
 
 var w_over_h = Math.sqrt(4 / 3);
@@ -302,6 +298,10 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
             'M' + (x0 + w / 2) + ',' + y0 + 'l' + (w / 2) + ',' + h : 'M0,0')
         .call(Color.stroke, caxis.linecolor || '#000')
         .style('stroke-width', (caxis.linewidth || 0) + 'px');
+
+    if(!_this.graphDiv._context.staticPlot) {
+        _this.initInteractions();
+    }
 };
 
 proto.drawAxes = function(doTitles) {
@@ -387,7 +387,10 @@ proto.initInteractions = function() {
     var dragOptions = {
         element: dragger,
         gd: gd,
-        plotinfo: {plot: zoomContainer},
+        plotinfo: {
+            xaxis: _this.xaxis,
+            yaxis: _this.yaxis
+        },
         doubleclick: doubleClick,
         subplot: _this.id,
         prepFn: function(e, startX, startY) {

test/jasmine/tests/select_test.js

@@ -6,6 +6,7 @@ var doubleClick = require('../assets/double_click');
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
+var fail = require('../assets/fail_test');
 var mouseEvent = require('../assets/mouse_event');
 var customMatchers = require('../assets/custom_matchers');
 
@@ -368,4 +369,55 @@ describe('select box and lasso', function() {
         })
         .then(done);
     });
+
+    it('should work on scatterternary traces', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/ternary_simple'));
+        var gd = createGraphDiv();
+        var pts = [];
+
+        fig.layout.width = 800;
+        fig.layout.dragmode = 'select';
+
+        function assertPoints(expected) {
+            expect(pts.length).toBe(expected.length, 'selected points length');
+
+            pts.forEach(function(p, i) {
+                var e = expected[i];
+                expect(p.a).toBe(e.a, 'selected pt a val');
+                expect(p.b).toBe(e.b, 'selected pt b val');
+                expect(p.c).toBe(e.c, 'selected pt c val');
+            });
+            pts = [];
+        }
+
+        Plotly.plot(gd, fig).then(function() {
+            gd.on('plotly_selected', function(data) {
+                pts = data.points;
+            });
+
+            assertSelectionNodes(0, 0);
+            drag([[400, 200], [445, 235]]);
+            assertSelectionNodes(0, 2);
+            assertPoints([{ a: 0.5, b: 0.25, c: 0.25 }]);
+
+            return Plotly.relayout(gd, 'dragmode', 'lasso');
+        })
+        .then(function() {
+            assertSelectionNodes(0, 0);
+            drag([[400, 200], [445, 200], [445, 235], [400, 235], [400, 200]]);
+            assertSelectionNodes(0, 2);
+            assertPoints([{ a: 0.5, b: 0.25, c: 0.25 }]);
+
+            // should work after a relayout too
+            return Plotly.relayout(gd, 'width', 400);
+        })
+        .then(function() {
+            assertSelectionNodes(0, 0);
+            drag([[200, 200], [230, 200], [230, 230], [200, 230], [200, 200]]);
+            assertSelectionNodes(0, 2);
+            assertPoints([{ a: 0.5, b: 0.25, c: 0.25 }]);
+        })
+        .catch(fail)
+        .then(done);
+    });
 });