Scatter 3D dragmode turntable loses the camera.eye on JavaScript reload

Scatter 3D dragmode "orbit" and "turntable" moves camera.eye but it is not reflected to layout.schene.camera.eye of the frame. It will be saved just after mouse click event or wheel, through relayoutCallback > scene.saveLayout .

plotly.js/src/plots/gl3d/scene.js

Line 240 in 35fb5b9

scene.glplot.canvas.addEventListener('mouseup', function() {

If replot, react, animate and so on, happens during mouse move and mouse up, replot uses layout.schene.camera.eye saved BEFORE and overwrite.

It can reploduced in https://halueda.github.io/wavy-orbitals/ .
Its color is chaneged once a second and you can only rotate 3d-axis if mouse move is in 1 second, during color change.

To solve this, there seems two ways.

every mouse move event do scene.saveLayout. It may cause performance impact.
replot function do scene.saveLayout if the plot is 3d.

Perhaps more genral way should be used. For example, mouse moving event set into something like pending events and replot-api executes all pending events prior to real replot. As well as, scene.saveLayout clears the pending event.

This issue can be related to:
#5500
#5005
#5560

+1.

3D scene (like scatter3d) does not preserve its layout when data is updated during user interaction (like dragging) even if uirevision is set to be constant. This makes it really hard to interact with the figure when it updates frequently.

I think it occurs not only with "orbit" and "turntable" but also with "zoom" and "pan".

Reproduce: https://codepen.io/tknx/pen/GRBZRyw

I found tentative quick hack to solve this, until this issue will be solved. My repository has been applied this.

Call saveLayout() just before Plotly.update(), like following code.

      const gd = document.getElementById(div);
      const fullLayout = gd._fullLayout;
      const scene = fullLayout.scene._scene;
      const layout = scene.graphDiv.layout;
      scene.saveLayout(layout);

      Plotly.update(div,[trace1],lay1);

@halueda

@halueda Is there an equivalent hack on plotly for Python?

Sorry, I don't know.

fix(compass): paint live triad into sibling SVG layer; never relayout…

Navigation Menu

Repository navigation

Scatter 3D dragmode turntable loses the camera.eye on JavaScript reload #6359

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Scatter 3D dragmode turntable loses the camera.eye on JavaScript reload #6359

Description

Activity

tkntkn commented on Dec 29, 2022

halueda commented on Jan 2, 2023

rodrigo-pena commented on Jun 28, 2024

halueda commented on Jul 1, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions