attach scene2d relayoutCallback onto proto

- call after each mouse-change / wheel-change,
  as opposed to each time the scene2d ticks changed
  (which didn't cover all the cases)
- make sure gl2d pan test `mouseup` to trigger relayoutCallback

Author: etpinard

src/plots/gl2d/camera.js

@@ -91,6 +91,7 @@ function createCamera(scene) {
                     updateRange(1, result.boxStart[1], result.boxEnd[1]);
                     unSetAutoRange();
                     result.boxEnabled = false;
+                    scene.relayoutCallback();
                 }
                 break;
 
@@ -110,11 +111,16 @@ function createCamera(scene) {
 
                     scene.setRanges(dataBox);
 
+                    result.panning = true;
                     result.lastInputTime = Date.now();
                     unSetAutoRange();
                     scene.cameraChanged();
                     scene.handleAnnotations();
                 }
+                else if(result.panning) {
+                    result.panning = false;
+                    scene.relayoutCallback();
+                }
                 break;
         }
 
@@ -154,6 +160,7 @@ function createCamera(scene) {
                 unSetAutoRange();
                 scene.cameraChanged();
                 scene.handleAnnotations();
+                scene.relayoutCallback();
                 break;
         }
 

src/plots/gl2d/scene2d.js

@@ -288,27 +288,30 @@ proto.updateRefs = function(newFullLayout) {
     this.yaxis = this.fullLayout[yaxisName];
 };
 
-function relayoutCallback(scene) {
-    var xrange = scene.xaxis.range,
-        yrange = scene.yaxis.range;
+proto.relayoutCallback = function() {
+    var graphDiv = this.graphDiv,
+        xaxis = this.xaxis,
+        yaxis = this.yaxis,
+        layout = graphDiv.layout;
 
-    // Update the layout on the DIV
-    scene.graphDiv.layout.xaxis.autorange = scene.xaxis.autorange;
-    scene.graphDiv.layout.xaxis.range = xrange.slice(0);
-    scene.graphDiv.layout.yaxis.autorange = scene.yaxis.autorange;
-    scene.graphDiv.layout.yaxis.range = yrange.slice(0);
+    // update user layout
+    layout.xaxis.autorange = xaxis.autorange;
+    layout.xaxis.range = xaxis.range.slice(0);
+    layout.yaxis.autorange = yaxis.autorange;
+    layout.yaxis.range = yaxis.range.slice(0);
 
-    // Make a meaningful value to be passed on to the possible 'plotly_relayout' subscriber(s)
+    // make a meaningful value to be passed on to the possible 'plotly_relayout' subscriber(s)
     // scene.camera has no many useful projection or scale information
     // helps determine which one is the latest input (if async)
     var update = {
-        lastInputTime: scene.camera.lastInputTime
+        lastInputTime: this.camera.lastInputTime
     };
-    update[scene.xaxis._name] = xrange.slice();
-    update[scene.yaxis._name] = yrange.slice();
 
-    scene.graphDiv.emit('plotly_relayout', update);
-}
+    update[xaxis._name] = xaxis.range.slice(0);
+    update[yaxis._name] = yaxis.range.slice(0);
+
+    graphDiv.emit('plotly_relayout', update);
+};
 
 proto.cameraChanged = function() {
     var camera = this.camera;
@@ -323,8 +326,6 @@ proto.cameraChanged = function() {
         this.glplotOptions.dataBox = camera.dataBox;
         this.glplot.update(this.glplotOptions);
         this.handleAnnotations();
-
-        relayoutCallback(this);
     }
 };
 

test/jasmine/tests/gl_plot_interact_test.js

@@ -236,6 +236,13 @@ describe('Test gl plot interactions', function() {
 
         it('should respond to drag interactions', function(done) {
 
+            function mouseTo(p0, p1) {
+                mouseEvent('mousemove', p0[0], p0[1]);
+                mouseEvent('mousedown', p0[0], p0[1], { buttons: 1 });
+                mouseEvent('mousemove', p1[0], p1[1], { buttons: 1 });
+                mouseEvent('mouseup', p1[0], p1[1]);
+            }
+
             jasmine.addMatchers(customMatchers);
 
             var precision = 5;
@@ -263,14 +270,10 @@ describe('Test gl plot interactions', function() {
             expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
 
             setTimeout(function() {
-
-                mouseEvent('mousemove', 200, 200);
-
                 relayoutCallback.calls.reset();
 
                 // Drag scene along the X axis
-
-                mouseEvent('mousemove', 220, 200, {buttons: 1});
+                mouseTo([200, 200], [220, 200]);
 
                 expect(gd.layout.xaxis.autorange).toBe(false);
                 expect(gd.layout.yaxis.autorange).toBe(false);
@@ -279,36 +282,31 @@ describe('Test gl plot interactions', function() {
                 expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
 
                 // Drag scene back along the X axis
-
-                mouseEvent('mousemove', 200, 200, {buttons: 1});
+                mouseTo([220, 200], [200, 200]);
 
                 expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
                 expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
 
                 // Drag scene along the Y axis
-
-                mouseEvent('mousemove', 200, 150, {buttons: 1});
+                mouseTo([200, 200], [200, 150]);
 
                 expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
                 expect(gd.layout.yaxis.range).toBeCloseToArray(newY, precision);
 
                 // Drag scene back along the Y axis
-
-                mouseEvent('mousemove', 200, 200, {buttons: 1});
+                mouseTo([200, 150], [200, 200]);
 
                 expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
                 expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
 
                 // Drag scene along both the X and Y axis
-
-                mouseEvent('mousemove', 220, 150, {buttons: 1});
+                mouseTo([200, 200], [220, 150]);
 
                 expect(gd.layout.xaxis.range).toBeCloseToArray(newX, precision);
                 expect(gd.layout.yaxis.range).toBeCloseToArray(newY, precision);
 
                 // Drag scene back along the X and Y axis
-
-                mouseEvent('mousemove', 200, 200, {buttons: 1});
+                mouseTo([220, 150], [200, 200]);
 
                 expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
                 expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);