Save camera and aspectratio only if they change before redraw the scene

- consider aspectratio changes in modebar home and initial views
- bump gl-plot3d 2.3.0

Author: archmoj

package-lock.json

@@ -81,7 +81,7 @@
     "gl-mat4": "^1.2.0",
     "gl-mesh3d": "^2.1.1",
     "gl-plot2d": "^1.4.2",
-    "gl-plot3d": "git://github.com/gl-vis/gl-plot3d.git#83e9c9406976e5ee92bf1f1851e4366e516c06f7",
+    "gl-plot3d": "^2.3.0",
     "gl-pointcloud2d": "^1.0.2",
     "gl-scatter3d": "^1.2.2",
     "gl-select-box": "^1.0.3",

package.json

@@ -344,17 +344,27 @@ function handleCamera3d(gd, ev) {
 
     for(var i = 0; i < sceneIds.length; i++) {
         var sceneId = sceneIds[i];
-        var key = sceneId + '.camera';
+        var camera = sceneId + '.camera';
+        var aspectratio = sceneId + '.aspectratio';
         var scene = fullLayout[sceneId]._scene;
+        var didUpdate;
 
         if(attr === 'resetLastSave') {
-            aobj[key + '.up'] = scene.viewInitial.up;
-            aobj[key + '.eye'] = scene.viewInitial.eye;
-            aobj[key + '.center'] = scene.viewInitial.center;
+            aobj[camera + '.up'] = scene.viewInitial.up;
+            aobj[camera + '.eye'] = scene.viewInitial.eye;
+            aobj[camera + '.center'] = scene.viewInitial.center;
+            didUpdate = true;
         } else if(attr === 'resetDefault') {
-            aobj[key + '.up'] = null;
-            aobj[key + '.eye'] = null;
-            aobj[key + '.center'] = null;
+            aobj[camera + '.up'] = null;
+            aobj[camera + '.eye'] = null;
+            aobj[camera + '.center'] = null;
+            didUpdate = true;
+        }
+
+        if(didUpdate) {
+            aobj[aspectratio + '.x'] = scene.viewInitial.aspectratio.x;
+            aobj[aspectratio + '.y'] = scene.viewInitial.aspectratio.y;
+            aobj[aspectratio + '.z'] = scene.viewInitial.aspectratio.z;
         }
     }
 

src/components/modebar/buttons.js

@@ -268,8 +268,10 @@ function initializeGLPlot(scene, pixelRatio, canvas, gl) {
         // camera updates
         update[scene.id + '.camera'] = getLayoutCamera(scene.camera);
 
-        // scene updates
-        update[scene.id + '.aspectratio'] = scene.glplot.getAspectratio();
+        if(scene.camera._ortho === true) {
+            // scene updates
+            update[scene.id + '.aspectratio'] = scene.glplot.getAspectratio();
+        }
 
         return update;
     };
@@ -290,15 +292,12 @@ function initializeGLPlot(scene, pixelRatio, canvas, gl) {
         if(gd._context._scrollZoom.gl3d) {
             if(scene.glplot.camera._ortho) {
                 var s = (e.deltaX > e.deltaY) ? 1.1 : 1.0 / 1.1;
-
-                var aspectratio = scene.fullSceneLayout.aspectratio;
-
-                aspectratio.x = scene.glplot.aspect[0] *= s;
-                aspectratio.y = scene.glplot.aspect[1] *= s;
-                aspectratio.z = scene.glplot.aspect[2] *= s;
-
-                scene.glplot.setAspectratio(aspectratio);
-                scene.glplot.redraw();
+                var o = scene.glplot.getAspectratio();
+                scene.glplot.setAspectratio({
+                    x: s * o.x,
+                    y: s * o.y,
+                    z: s * o.z
+                });
             }
 
             relayoutCallback(scene);
@@ -747,6 +746,15 @@ proto.plot = function(sceneData, fullLayout, layout) {
      */
     this.glplot.setAspectratio(fullSceneLayout.aspectratio);
 
+    // save 'initial' camera view settings for modebar button
+    if(!this.viewInitial.aspectratio) {
+        this.viewInitial.aspectratio = {
+            x: fullSceneLayout.aspectratio.x,
+            y: fullSceneLayout.aspectratio.y,
+            z: fullSceneLayout.aspectratio.z
+        };
+    }
+
     // Update frame position for multi plots
     var domain = fullSceneLayout.domain || null;
     var size = fullLayout._size || null;
@@ -841,25 +849,25 @@ proto.saveLayout = function saveLayout(layout) {
     var cameraNestedProp = Lib.nestedProperty(layout, this.id + '.camera');
     var cameraDataLastSave = cameraNestedProp.get();
 
+
     var aspectData = this.glplot.getAspectratio();
-    var aspectNestedProp = Lib.nestedProperty(layout, this.id + '.camera');
+    var aspectNestedProp = Lib.nestedProperty(layout, this.id + '.aspectratio');
     var aspectDataLastSave = aspectNestedProp.get();
 
-    var hasChanged = false;
-
     function same(x, y, i, j) {
         var vectors = ['up', 'center', 'eye'];
         var components = ['x', 'y', 'z'];
         return y[vectors[i]] && (x[vectors[i]][components[j]] === y[vectors[i]][components[j]]);
     }
 
+    var cameraChanged = false;
     if(cameraDataLastSave === undefined) {
-        hasChanged = true;
+        cameraChanged = true;
     } else {
         for(var i = 0; i < 3; i++) {
             for(var j = 0; j < 3; j++) {
                 if(!same(cameraData, cameraDataLastSave, i, j)) {
-                    hasChanged = true;
+                    cameraChanged = true;
                     break;
                 }
             }
@@ -868,37 +876,39 @@ proto.saveLayout = function saveLayout(layout) {
         if(!cameraDataLastSave.projection || (
             cameraData.projection &&
             cameraData.projection.type !== cameraDataLastSave.projection.type)) {
-            hasChanged = true;
+            cameraChanged = true;
         }
     }
 
-    if(!hasChanged) {
-        if(aspectDataLastSave === undefined) {
-            hasChanged = true;
-        } else {
-            if(
-                aspectDataLastSave.x !== aspectData.x ||
-                aspectDataLastSave.y !== aspectData.y ||
-                aspectDataLastSave.z !== aspectData.z
-            ) {
-                hasChanged = true;
-            }
-        }
-    }
+    var aspectChanged = (
+        aspectDataLastSave === undefined || (
+        aspectDataLastSave.x !== aspectData.x ||
+        aspectDataLastSave.y !== aspectData.y ||
+        aspectDataLastSave.z !== aspectData.z
+    ));
 
+    var hasChanged = cameraChanged || aspectChanged;
     if(hasChanged) {
         var preGUI = {};
-        preGUI[this.id + '.camera'] = cameraDataLastSave;
-        preGUI[this.id + '.aspectratio'] = aspectDataLastSave;
+        if(cameraChanged) preGUI[this.id + '.camera'] = cameraDataLastSave;
+        if(aspectChanged) preGUI[this.id + '.aspectratio'] = aspectDataLastSave;
         Registry.call('_storeDirectGUIEdit', layout, fullLayout._preGUI, preGUI);
 
-        cameraNestedProp.set(cameraData);
+        if(cameraChanged) {
+            cameraNestedProp.set(cameraData);
 
-        var cameraFullNP = Lib.nestedProperty(fullLayout, this.id + '.camera');
-        cameraFullNP.set(cameraData);
+            var cameraFullNP = Lib.nestedProperty(fullLayout, this.id + '.camera');
+            cameraFullNP.set(cameraData);
+        }
+
+        if(aspectChanged) {
+            aspectNestedProp.set(aspectData);
 
-        var aspectFullNP = Lib.nestedProperty(fullLayout, this.id + '.aspectratio');
-        aspectFullNP.set(aspectData);
+            var aspectFullNP = Lib.nestedProperty(fullLayout, this.id + '.aspectratio');
+            aspectFullNP.set(aspectData);
+
+            this.glplot.redraw();
+        }
     }
 
     return hasChanged;

src/plots/gl3d/scene.js

@@ -906,24 +906,6 @@ describe('Test gl3d drag and wheel interactions', function() {
             return scroll(sceneTarget2);
         })
         .then(function() {
-            expect(
-                gd._fullLayout.scene2.aspectratio.x
-            ).toEqual(
-                gd._fullLayout.scene2._scene.glplot.aspect[0]
-            );
-
-            expect(
-                gd._fullLayout.scene2.aspectratio.y
-            ).toEqual(
-                gd._fullLayout.scene2._scene.glplot.aspect[1]
-            );
-
-            expect(
-                gd._fullLayout.scene2.aspectratio.z
-            ).toEqual(
-                gd._fullLayout.scene2._scene.glplot.aspect[2]
-            );
-
             _assertAndReset(2);
         })
         .catch(failTest)