preserve aspectratio & aspectmode changes by orthographic scroll zoom…

… for restyle interactions
plotly · Feb 12, 2020 · e29aceb · e29aceb
1 parent 9ba5c96
commit e29aceb
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 1 deletion.
diff --git a/src/plots/gl3d/scene.js b/src/plots/gl3d/scene.js
@@ -246,6 +246,7 @@ proto.initializeGLPlot = function() {
                     y: s * o.y,
                     z: s * o.z
                 });
+                scene._aspectmode = 'manual';
             }
 
             relayoutCallback(scene);
@@ -729,7 +730,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
      * Dynamically set the aspect ratio depending on the users aspect settings
      */
     var aspectRatio;
-    var aspectmode = fullSceneLayout.aspectmode;
+    var aspectmode = scene._aspectmode || fullSceneLayout.aspectmode;
     if(aspectmode === 'cube') {
         aspectRatio = [1, 1, 1];
     } else if(aspectmode === 'manual') {
@@ -762,6 +763,7 @@ proto.plot = function(sceneData, fullLayout, layout) {
     } else {
         throw new Error('scene.js aspectRatio was not one of the enumerated types');
     }
+    scene._aspectmode = aspectmode;
 
     /*
      * Write aspect Ratio back to user data and fullLayout so that it is modifies as user

diff --git a/test/jasmine/tests/gl3d_plot_interact_test.js b/test/jasmine/tests/gl3d_plot_interact_test.js
@@ -1384,6 +1384,98 @@ describe('Test gl3d drag and wheel interactions', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('@gl should preserve aspectratio values when orthographic scroll zoom i.e. after restyle', function(done) {
+        var coords = {
+            x: [1, 2, 10, 4, 5],
+            y: [10, 2, 4, 4, 2],
+            z: [10, 2, 4, 8, 16],
+        };
+
+        var mock = {
+            data: [{
+                type: 'scatter3d',
+                x: coords.x,
+                y: coords.y,
+                z: coords.z,
+                mode: 'markers',
+                marker: {
+                    color: 'red',
+                    size: 16,
+                }
+            }, {
+                type: 'scatter3d',
+                x: [coords.x[0]],
+                y: [coords.y[0]],
+                z: [coords.z[0]],
+                mode: 'markers',
+                marker: {
+                    color: 'blue',
+                    size: 32,
+                }
+            }],
+            layout: {
+                width: 400,
+                height: 400,
+                scene: {
+                    camera: {
+                        projection: {
+                            type: 'orthographic'
+                        }
+                    },
+                }
+            }
+        };
+
+        var sceneTarget;
+        var relayoutEvent;
+        var relayoutCnt = 0;
+
+        Plotly.plot(gd, mock)
+        .then(function() {
+            gd.on('plotly_relayout', function(e) {
+                relayoutCnt++;
+                relayoutEvent = e;
+            });
+
+            sceneTarget = gd.querySelector('.svg-container .gl-container #scene canvas');
+        })
+        .then(function() {
+            var aspectratio = gd._fullLayout.scene.aspectratio;
+            expect(aspectratio.x).toBeCloseTo(0.898, 3, 'aspectratio.x');
+            expect(aspectratio.y).toBeCloseTo(0.798, 3, 'aspectratio.y');
+            expect(aspectratio.z).toBeCloseTo(1.396, 3, 'aspectratio.z');
+        })
+        .then(function() {
+            return scroll(sceneTarget);
+        })
+        .then(function() {
+            expect(relayoutCnt).toEqual(1);
+
+            var aspectratio = relayoutEvent['scene.aspectratio'];
+            expect(aspectratio.x).toBeCloseTo(0.816, 3, 'aspectratio.x');
+            expect(aspectratio.y).toBeCloseTo(0.725, 3, 'aspectratio.y');
+            expect(aspectratio.z).toBeCloseTo(1.269, 3, 'aspectratio.z');
+        })
+        .then(function() {
+            // select a point
+            var i = 2;
+
+            return Plotly.restyle(gd, {
+                x: [[coords.x[i]]],
+                y: [[coords.y[i]]],
+                z: [[coords.z[i]]],
+            }, 1);
+        })
+        .then(function() {
+            var aspectratio = gd._fullLayout.scene.aspectratio;
+            expect(aspectratio.x).toBeCloseTo(0.816, 3, 'aspectratio.x');
+            expect(aspectratio.y).toBeCloseTo(0.725, 3, 'aspectratio.y');
+            expect(aspectratio.z).toBeCloseTo(1.269, 3, 'aspectratio.z');
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('Test gl3d relayout calls', function() {