search

reaviz / reagraph

🕸 WebGL Graph Visualizations for React. Maintained by @goodcodeus.
https://reagraph.dev
Apache License 2.0
689 stars 67 forks source link

Node drag versus canvas resize #279

Open direvus opened 1 month ago

direvus commented 1 month ago

Describe the bug

I have a reagraph component that users can toggle between two different sizes (normal and enlarged). This works fine except when repositioning nodes with draggable={true}.

Dragging nodes in the original size works as expected.

Flipping to the other size and dragging nodes causes the nodes to suddenly jump vertically by hundreds of pixels. They continue to drag correctly in the x-axis but remain massively offset from the cursor position in the y-axis.

Return to the original size, and everything is working as expected again.

It seems like the reagraph component is caching the height of the canvas internally and not updating its drag logic when that height changes.

I have tried forcing an update of the nodes state with a useEffect when the size of the graph is switched, but that didn't help.

Is there anything I can do to work around this?

Steps to Reproduce the Bug or Issue

  1. Create a React application with a reagraph component, enclosed in a div that can be resized by controlling a state variable.
  2. Enable draggable on the GraphCanvas
  3. Confirm that nodes can be repositioned by dragging in the normal size mode
  4. Change the size mode and try repositioning nodes again

Expected behavior

I expect that dragging nodes will work correctly after updating the size of the GraphCanvas.

Instead, after updating the size of the GraphCanvas, nodes get flung off to a distant y-value when I drag them.

Screenshots or Videos

No response

Platform

Your Example Website or App

No response

Additional context

I will try to work up a minimal example in Codesandbox and update this issue when it's ready.

direvus commented 1 month ago

Codesandbox example can be seen here: https://codesandbox.io/p/devbox/react-ts-9qputt

direvus commented 1 month ago

https://github.com/user-attachments/assets/f7c6ff70-be84-439f-8241-c4478c64ce50

Here's a screencast demonstrating the problem.

Somehow this minimal example is actually worse than my real application. The dragging is janked in both the original size and the enlarged size.