fix date axis ranges and date interactions in gl2d

Author: alexcjohnson

src/plots/gl2d/camera.js

@@ -38,8 +38,7 @@ function createCamera(scene) {
     }
 
     result.mouseListener = mouseChange(element, function(buttons, x, y) {
-        var xrange = scene.xaxis.range,
-            yrange = scene.yaxis.range,
+        var dataBox = scene.calcDataBox(),
             viewBox = plot.viewBox;
 
         var lastX = result.lastPos[0],
@@ -51,14 +50,15 @@ function createCamera(scene) {
         // mouseChange gives y about top; convert to about bottom
         y = (viewBox[3] - viewBox[1]) - y;
 
-        function updateRange(range, start, end) {
+        function updateRange(i0, start, end) {
             var range0 = Math.min(start, end),
                 range1 = Math.max(start, end);
 
             if(range0 !== range1) {
-                range[0] = range0;
-                range[1] = range1;
-                result.dataBox = range;
+                dataBox[i0] = range0;
+                dataBox[i0 + 2] = range1;
+                result.dataBox = dataBox;
+                scene.setRanges(dataBox);
             }
             else {
                 scene.selectBox.selectBox = [0, 0, 1, 1];
@@ -70,11 +70,11 @@ function createCamera(scene) {
             case 'zoom':
                 if(buttons) {
                     var dataX = x /
-                            (viewBox[2] - viewBox[0]) * (xrange[1] - xrange[0]) +
-                        xrange[0];
+                            (viewBox[2] - viewBox[0]) * (dataBox[2] - dataBox[0]) +
+                        dataBox[0];
                     var dataY = y /
-                            (viewBox[3] - viewBox[1]) * (yrange[1] - yrange[0]) +
-                        yrange[0];
+                            (viewBox[3] - viewBox[1]) * (dataBox[3] - dataBox[1]) +
+                        dataBox[1];
 
                     if(!result.boxEnabled) {
                         result.boxStart[0] = dataX;
@@ -87,8 +87,8 @@ function createCamera(scene) {
                     result.boxEnabled = true;
                 }
                 else if(result.boxEnabled) {
-                    updateRange(xrange, result.boxStart[0], result.boxEnd[0]);
-                    updateRange(yrange, result.boxStart[1], result.boxEnd[1]);
+                    updateRange(0, result.boxStart[0], result.boxEnd[0]);
+                    updateRange(1, result.boxStart[1], result.boxEnd[1]);
                     unSetAutoRange();
                     result.boxEnabled = false;
                 }
@@ -98,15 +98,17 @@ function createCamera(scene) {
                 result.boxEnabled = false;
 
                 if(buttons) {
-                    var dx = (lastX - x) * (xrange[1] - xrange[0]) /
+                    var dx = (lastX - x) * (dataBox[2] - dataBox[0]) /
                         (plot.viewBox[2] - plot.viewBox[0]);
-                    var dy = (lastY - y) * (yrange[1] - yrange[0]) /
+                    var dy = (lastY - y) * (dataBox[3] - dataBox[1]) /
                         (plot.viewBox[3] - plot.viewBox[1]);
 
-                    xrange[0] += dx;
-                    xrange[1] += dx;
-                    yrange[0] += dy;
-                    yrange[1] += dy;
+                    dataBox[0] += dx;
+                    dataBox[2] += dx;
+                    dataBox[1] += dy;
+                    dataBox[3] += dy;
+
+                    scene.setRanges(dataBox);
 
                     result.lastInputTime = Date.now();
                     unSetAutoRange();
@@ -120,8 +122,7 @@ function createCamera(scene) {
     });
 
     result.wheelListener = mouseWheel(element, function(dx, dy) {
-        var xrange = scene.xaxis.range,
-            yrange = scene.yaxis.range,
+        var dataBox = scene.calcDataBox(),
             viewBox = plot.viewBox;
 
         var lastX = result.lastPos[0],
@@ -135,16 +136,18 @@ function createCamera(scene) {
                 var scale = Math.exp(0.1 * dy / (viewBox[3] - viewBox[1]));
 
                 var cx = lastX /
-                        (viewBox[2] - viewBox[0]) * (xrange[1] - xrange[0]) +
-                    xrange[0];
+                        (viewBox[2] - viewBox[0]) * (dataBox[2] - dataBox[0]) +
+                    dataBox[0];
                 var cy = lastY /
-                        (viewBox[3] - viewBox[1]) * (yrange[1] - yrange[0]) +
-                    yrange[0];
+                        (viewBox[3] - viewBox[1]) * (dataBox[3] - dataBox[1]) +
+                    dataBox[1];
+
+                dataBox[0] = (dataBox[0] - cx) * scale + cx;
+                dataBox[2] = (dataBox[2] - cx) * scale + cx;
+                dataBox[1] = (dataBox[1] - cy) * scale + cy;
+                dataBox[3] = (dataBox[3] - cy) * scale + cy;
 
-                xrange[0] = (xrange[0] - cx) * scale + cx;
-                xrange[1] = (xrange[1] - cx) * scale + cx;
-                yrange[0] = (yrange[0] - cy) * scale + cy;
-                yrange[1] = (yrange[1] - cy) * scale + cy;
+                scene.setRanges(dataBox);
 
                 result.lastInputTime = Date.now();
                 unSetAutoRange();

src/plots/gl2d/scene2d.js

@@ -311,14 +311,9 @@ var relayoutCallback = function(scene) {
 };
 
 proto.cameraChanged = function() {
-    var camera = this.camera,
-        xrange = this.xaxis.range,
-        yrange = this.yaxis.range;
+    var camera = this.camera;
 
-    this.glplot.setDataBox([
-        xrange[0], yrange[0],
-        xrange[1], yrange[1]
-    ]);
+    this.glplot.setDataBox(this.calcDataBox());
 
     var nextTicks = this.computeTickMarks();
     var curTicks = this.glplotOptions.ticks;
@@ -416,9 +411,7 @@ proto.plot = function(fullData, calcData, fullLayout) {
 
     options.ticks = this.computeTickMarks();
 
-    var xrange = this.xaxis.range;
-    var yrange = this.yaxis.range;
-    options.dataBox = [xrange[0], yrange[0], xrange[1], yrange[1]];
+    options.dataBox = this.calcDataBox();
 
     options.merge(fullLayout);
     glplot.update(options);
@@ -427,6 +420,27 @@ proto.plot = function(fullData, calcData, fullLayout) {
     this.glplot.draw();
 };
 
+proto.calcDataBox = function() {
+    var xaxis = this.xaxis,
+        yaxis = this.yaxis,
+        xrange = xaxis.range,
+        yrange = yaxis.range,
+        xr2l = xaxis.r2l,
+        yr2l = yaxis.r2l;
+
+    return [xr2l(xrange[0]), yr2l(yrange[0]), xr2l(xrange[1]), yr2l(yrange[1])];
+};
+
+proto.setRanges = function(dataBox) {
+    var xaxis = this.xaxis,
+        yaxis = this.yaxis,
+        xl2r = xaxis.l2r,
+        yl2r = yaxis.l2r;
+
+    xaxis.range = [xl2r(dataBox[0]), xl2r(dataBox[2])];
+    yaxis.range = [yl2r(dataBox[1]), yl2r(dataBox[3])];
+};
+
 proto.updateTraces = function(fullData, calcData) {
     var traceIds = Object.keys(this.traces);
     var i, j, fullTrace;