plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
17.14k stars 1.87k forks source link

3D surface plotly_relayout does not trigger with touch drag. Scroll zoom reports older camera vector. #5698

Open Apivan opened 3 years ago

Apivan commented 3 years ago

This is probably similar to https://github.com/plotly/plotly.js/issues/134 The plotly_relayout do trigger with mouse drag correctly. However, this is not the case for touch drag.

To reproduce the problem please try open https://plotly.com/javascript/3d-surface-plots/ and execute document.getElementById("myDiv_1").on('plotly_relayout',()=>{console.log("relayout")}); you can see that the console doesn’t log when using touch emulator.

I also tested with https://cdn.plot.ly/plotly-latest. The problem is still reproducible.

plotly2

Another problem is mouse scroll zoom. The plotly report older camera vector. After subscribe to plotly_relayout, please then do mouse scroll zoom and execute

Plotly.relayout(document.getElementById("myDiv_1"), document.getElementById("myDiv_1")._fullLayout.scene.camera );

You will notice this the camera position is not always current. This is not problem when pan (right click drag) or rotate view.

Apivan commented 3 years ago

Here is my quick fix.

diff --git a/src/plots/gl3d/scene.js b/src/plots/gl3d/scene.js
index b7ee38712..f34f1a869 100644
--- a/src/plots/gl3d/scene.js
+++ b/src/plots/gl3d/scene.js
@@ -241,6 +241,10 @@ proto.initializeGLPlot = function() {
             relayoutCallback(scene);
         });

+        scene.glplot.canvas.addEventListener('touchend', function() {
+            relayoutCallback(scene);
+        });
+
         scene.glplot.canvas.addEventListener('wheel', function(e) {
             if(gd._context._scrollZoom.gl3d) {
                 if(scene.camera._ortho) {
@@ -253,7 +257,8 @@ proto.initializeGLPlot = function() {
                     });
                 }

-                relayoutCallback(scene);
+                setTimeout(()=>{ relayoutCallback(scene)},1000);
+               
             }
         }, passiveSupported ? {passive: false} : false);