Improve camera init

package.json

@@ -80,7 +80,7 @@
     "gl-mat4": "^1.2.0",
     "gl-mesh3d": "^2.0.8",
     "gl-plot2d": "^1.4.2",
-    "gl-plot3d": "^2.1.1",
+    "gl-plot3d": "git://github.com/gl-vis/gl-plot3d.git#5f28e06ac02b248e6990ef385d2df49bb3a7baf8",
     "gl-pointcloud2d": "^1.0.2",
     "gl-scatter3d": "^1.2.0",
     "gl-select-box": "^1.0.3",

src/plots/gl3d/scene.js

@@ -192,7 +192,7 @@ function render(scene) {
     scene.drawAnnotations(scene);
 }
 
-function tryCreatePlot(scene, camera, pixelRatio, canvas, gl) {
+function tryCreatePlot(scene, cameraObject, pixelRatio, canvas, gl) {
 
     var glplotOptions = {
         canvas: canvas,
@@ -204,7 +204,7 @@ function tryCreatePlot(scene, camera, pixelRatio, canvas, gl) {
         snapToData: true,
         autoScale: true,
         autoBounds: false,
-        camera: camera,
+        cameraObject: cameraObject,
         pixelRatio: pixelRatio
     };
 
@@ -238,9 +238,11 @@ function tryCreatePlot(scene, camera, pixelRatio, canvas, gl) {
     return true;
 }
 
-function initializeGLPlot(scene, camera, pixelRatio, canvas, gl) {
+function initializeGLPlot(scene, pixelRatio, canvas, gl) {
 
-    var success = tryCreatePlot(scene, camera, pixelRatio, canvas, gl);
+    scene.initializeGLCamera();
+
+    var success = tryCreatePlot(scene, scene.camera, pixelRatio, canvas, gl);
     /*
     * createPlot will throw when webgl is not enabled in the client.
     * Lets return an instance of the module with all functions noop'd.
@@ -281,8 +283,6 @@ function initializeGLPlot(scene, camera, pixelRatio, canvas, gl) {
         }, false);
     }
 
-    if(!scene.camera) scene.initializeGLCamera();
-
     scene.glplot.camera = scene.camera;
 
     scene.glplot.oncontextloss = function() {
@@ -351,9 +351,7 @@ function Scene(options, fullLayout) {
     this.convertAnnotations = Registry.getComponentMethod('annotations3d', 'convert');
     this.drawAnnotations = Registry.getComponentMethod('annotations3d', 'draw');
 
-    var camera = fullLayout.scene.camera;
-
-    initializeGLPlot(this, camera, this.pixelRatio);
+    initializeGLPlot(this, this.pixelRatio);
 }
 
 var proto = Scene.prototype;
@@ -796,7 +794,7 @@ proto.setCamera = function setCamera(cameraData) {
 
         this.glplot.dispose();
 
-        initializeGLPlot(this, cameraData, pixelRatio);
+        initializeGLPlot(this, pixelRatio);
         this.glplot.camera._ortho = newOrtho;
     }
 };
@@ -851,7 +849,6 @@ proto.saveCamera = function saveCamera(layout) {
 
 proto.updateFx = function(dragmode, hovermode) {
     var camera = this.camera;
-
     if(camera) {
         // rotate and orbital are synonymous
         if(dragmode === 'orbit') {
@@ -873,16 +870,16 @@ proto.updateFx = function(dragmode, hovermode) {
             var y = fullCamera.up.y;
             var z = fullCamera.up.z;
             // only push `up` back to (full)layout if it's going to change
-            if(z / Math.sqrt(x * x + y * y + z * z) > 0.999) return;
-
-            var attr = this.id + '.camera.up';
-            var zUp = {x: 0, y: 0, z: 1};
-            var edits = {};
-            edits[attr] = zUp;
-            var layout = gd.layout;
-            Registry.call('_storeDirectGUIEdit', layout, fullLayout._preGUI, edits);
-            fullCamera.up = zUp;
-            Lib.nestedProperty(layout, attr).set(zUp);
+            if(z / Math.sqrt(x * x + y * y + z * z) < 0.999) {
+                var attr = this.id + '.camera.up';
+                var zUp = {x: 0, y: 0, z: 1};
+                var edits = {};
+                edits[attr] = zUp;
+                var layout = gd.layout;
+                Registry.call('_storeDirectGUIEdit', layout, fullLayout._preGUI, edits);
+                fullCamera.up = zUp;
+                Lib.nestedProperty(layout, attr).set(zUp);
+            }
         } else {
             // none rotation modes [pan or zoom]
             camera.keyBindingMode = dragmode;

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -21,6 +21,133 @@ function countCanvases() {
     return d3.selectAll('canvas').size();
 }
 
+describe('Test gl3d before/after plot', function() {
+    var gd;
+
+    var mock = require('@mocks/gl3d_marker-arrays.json');
+
+    beforeEach(function() {
+        jasmine.DEFAULT_TIMEOUT_INTERVAL = 4000;
+    });
+
+    afterEach(function() {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+    });
+
+    it('@gl should not rotate camera on the very first click before scene is complete and then should rotate', function(done) {
+        var _mock = Lib.extendDeep(
+            {
+                layout: {
+                    scene: {
+                        camera: {
+                            up: {
+                                x: 0,
+                                y: 0,
+                                z: 1
+                            },
+                            eye: {
+                                x: 1.2,
+                                y: 1.2,
+                                z: 1.2
+                            },
+                            center: {
+                                x: 0,
+                                y: 0,
+                                z: 0
+                            }
+                        }
+                    }
+                }
+            },
+            mock
+        );
+
+        var x = 605;
+        var y = 271;
+
+        function _stayThere() {
+            mouseEvent('mousemove', x, y);
+            return delay(20)();
+        }
+
+        function _clickThere() {
+            mouseEvent('mouseover', x, y, {buttons: 1});
+            return delay(20)();
+        }
+
+        function _clickOtherplace() {
+            mouseEvent('mouseover', 300, 300, {buttons: 1});
+            return delay(20)();
+        }
+
+        _stayThere()
+        .then(function() {
+            gd = createGraphDiv();
+            return Plotly.plot(gd, _mock);
+        })
+        .then(delay(20))
+        .then(function() {
+            var cameraIn = gd._fullLayout.scene.camera;
+            expect(cameraIn.up.x).toEqual(0, 'cameraIn.up.x');
+            expect(cameraIn.up.y).toEqual(0, 'cameraIn.up.y');
+            expect(cameraIn.up.z).toEqual(1, 'cameraIn.up.z');
+            expect(cameraIn.center.x).toEqual(0, 'cameraIn.center.x');
+            expect(cameraIn.center.y).toEqual(0, 'cameraIn.center.y');
+            expect(cameraIn.center.z).toEqual(0, 'cameraIn.center.z');
+            expect(cameraIn.eye.x).toEqual(1.2, 'cameraIn.eye.x');
+            expect(cameraIn.eye.y).toEqual(1.2, 'cameraIn.eye.y');
+            expect(cameraIn.eye.z).toEqual(1.2, 'cameraIn.eye.z');
+        })
+        .then(delay(20))
+        .then(function() {
+            var cameraBefore = gd._fullLayout.scene._scene.glplot.camera;
+            expect(cameraBefore.up[0]).toBeCloseTo(0, 2, 'cameraBefore.up[0]');
+            expect(cameraBefore.up[1]).toBeCloseTo(0, 2, 'cameraBefore.up[1]');
+            expect(cameraBefore.up[2]).toBeCloseTo(1, 2, 'cameraBefore.up[2]');
+            expect(cameraBefore.center[0]).toBeCloseTo(0, 2, 'cameraBefore.center[0]');
+            expect(cameraBefore.center[1]).toBeCloseTo(0, 2, 'cameraBefore.center[1]');
+            expect(cameraBefore.center[2]).toBeCloseTo(0, 2, 'cameraBefore.center[2]');
+            expect(cameraBefore.eye[0]).toBeCloseTo(1.2, 2, 'cameraBefore.eye[0]');
+            expect(cameraBefore.eye[1]).toBeCloseTo(1.2, 2, 'cameraBefore.eye[1]');
+            expect(cameraBefore.eye[2]).toBeCloseTo(1.2, 2, 'cameraBefore.eye[2]');
+            expect(cameraBefore.mouseListener.enabled === true);
+        })
+        .then(_clickThere)
+        .then(delay(20))
+        .then(function() {
+            var cameraAfter = gd._fullLayout.scene._scene.glplot.camera;
+            expect(cameraAfter.up[0]).toBeCloseTo(0, 2, 'cameraAfter.up[0]');
+            expect(cameraAfter.up[1]).toBeCloseTo(0, 2, 'cameraAfter.up[1]');
+            expect(cameraAfter.up[2]).toBeCloseTo(1, 2, 'cameraAfter.up[2]');
+            expect(cameraAfter.center[0]).toBeCloseTo(0, 2, 'cameraAfter.center[0]');
+            expect(cameraAfter.center[1]).toBeCloseTo(0, 2, 'cameraAfter.center[1]');
+            expect(cameraAfter.center[2]).toBeCloseTo(0, 2, 'cameraAfter.center[2]');
+            expect(cameraAfter.eye[0]).toBeCloseTo(1.2, 2, 'cameraAfter.eye[0]');
+            expect(cameraAfter.eye[1]).toBeCloseTo(1.2, 2, 'cameraAfter.eye[1]');
+            expect(cameraAfter.eye[2]).toBeCloseTo(1.2, 2, 'cameraAfter.eye[2]');
+            expect(cameraAfter.mouseListener.enabled === true);
+        })
+        .then(_clickOtherplace)
+        .then(delay(20))
+        .then(function() {
+            var cameraFinal = gd._fullLayout.scene._scene.glplot.camera;
+            expect(cameraFinal.up[0]).toBeCloseTo(0, 2, 'cameraFinal.up[0]');
+            expect(cameraFinal.up[1]).toBeCloseTo(0, 2, 'cameraFinal.up[1]');
+            expect(cameraFinal.up[2]).toBeCloseTo(1, 2, 'cameraFinal.up[2]');
+            expect(cameraFinal.center[0]).toBeCloseTo(0, 2, 'cameraFinal.center[0]');
+            expect(cameraFinal.center[1]).toBeCloseTo(0, 2, 'cameraFinal.center[1]');
+            expect(cameraFinal.center[2]).toBeCloseTo(0, 2, 'cameraFinal.center[2]');
+            expect(cameraFinal.eye[0]).not.toBeCloseTo(1.2, 2, 'cameraFinal.eye[0]');
+            expect(cameraFinal.eye[1]).not.toBeCloseTo(1.2, 2, 'cameraFinal.eye[1]');
+            expect(cameraFinal.eye[2]).not.toBeCloseTo(1.2, 2, 'cameraFinal.eye[2]');
+            expect(cameraFinal.mouseListener.enabled === true);
+        })
+        .then(done);
+    });
+
+});
+
 describe('Test gl3d plots', function() {
     var gd, ptData;
 
@@ -365,10 +492,7 @@ describe('Test gl3d plots', function() {
         // N.B. gl3d click events are 'mouseover' events
         // with button 1 pressed
         function _click() {
-            var x = 605;
-            var y = 271;
-            mouseEvent('mousemove', x, y);
-            mouseEvent('mouseover', x, y, {buttons: 1});
+            mouseEvent('mouseover', 605, 271, {buttons: 1});
             return delay(20)();
         }