Limit pan in network visualization #18
Assignees
Labels
frontend
Frontend-related
Comments
|
This one looks exciting! |
daud99
pushed a commit
to daud99/molevolvr2.0
that referenced
this issue
Oct 6, 2024
Fixing the JRaviLab#18 Problem: Users could pan graphs infinitely in any direction, sometimes losing the graph completely from view. We needed different handling for small graphs (that fit viewport) vs large graphs (that exceed viewport). Solution: 1. For small graphs that fit viewport: - Keep graph fully visible at all times - Snap back with animation if user tries to pan outside bounds - Center graph if no valid position is found 2. For large graphs that exceed viewport: - Calculate graph's center and dimensions relative to viewport - Allow panning up to 10px beyond graph edges in any direction - Use center-based math to ensure uniform panning limits on all sides - Add smooth animations when bringing graph back into valid position - Fallback to centering if graph somehow gets completely hidden The solution ensures users never lose track of their graphs while still maintaining fluid pan interactions. The uniform 10px edge padding gives just enough peek space without letting users pan too far. Testing: Verified behavior with both small and large graphs at various zoom levels. Panning limits remain consistent in all directions.
daud99
pushed a commit
to daud99/molevolvr2.0
that referenced
this issue
Oct 6, 2024
Fixing the JRaviLab#18 Problem: Users could pan graphs infinitely in any direction, sometimes losing the graph completely from view. We needed different handling for small graphs (that fit viewport) vs large graphs (that exceed viewport). Solution: 1. For small graphs that fit viewport: - Keep graph fully visible at all times - Snap back with animation if user tries to pan outside bounds - Center graph if no valid position is found 2. For large graphs that exceed viewport: - Calculate graph's center and dimensions relative to viewport - Allow panning up to 10px beyond graph edges in any direction - Use center-based math to ensure uniform panning limits on all sides - Add smooth animations when bringing graph back into valid position - Fallback to centering if graph somehow gets completely hidden The solution ensures users never lose track of their graphs while still maintaining fluid pan interactions. The uniform 10px edge padding gives just enough peek space without letting users pan too far. Testing: Verified behavior with both small and large graphs at various zoom levels. Panning limits remain consistent in all directions.
daud99
pushed a commit
to daud99/molevolvr2.0
that referenced
this issue
Oct 6, 2024
Fixing the JRaviLab#18 Problem: Users could pan graphs infinitely in any direction, sometimes losing the graph completely from view. We needed different handling for small graphs (that fit viewport) vs large graphs (that exceed viewport). Solution: 1. For small graphs that fit viewport: - Keep graph fully visible at all times - Snap back with animation if user tries to pan outside bounds - Center graph if no valid position is found 2. For large graphs that exceed viewport: - Calculate graph's center and dimensions relative to viewport - Allow panning up to 10px beyond graph edges in any direction - Use center-based math to ensure uniform panning limits on all sides - Add smooth animations when bringing graph back into valid position - Fallback to centering if graph somehow gets completely hidden The solution ensures users never lose track of their graphs while still maintaining fluid pan interactions. The uniform 10px edge padding gives just enough peek space without letting users pan too far. Testing: Verified behavior with both small and large graphs at various zoom levels. Panning limits remain consistent in all directions.
daud99
pushed a commit
to daud99/molevolvr2.0
that referenced
this issue
Oct 6, 2024
Fixing the JRaviLab#18 Problem: Users could pan graphs infinitely in any direction, sometimes losing the graph completely from view. We needed different handling for small graphs (that fit viewport) vs large graphs (that exceed viewport). Solution: 1. For small graphs that fit viewport: - Keep graph fully visible at all times - Snap back with animation if user tries to pan outside bounds - Center graph if no valid position is found 2. For large graphs that exceed viewport: - Calculate graph's center and dimensions relative to viewport - Allow panning up to 10px beyond graph edges in any direction - Use center-based math to ensure uniform panning limits on all sides - Add smooth animations when bringing graph back into valid position - Fallback to centering if graph somehow gets completely hidden The solution ensures users never lose track of their graphs while still maintaining fluid pan interactions. The uniform 10px edge padding gives just enough peek space without letting users pan too far.
vincerubinetti
added a commit
that referenced
this issue
Oct 8, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
There is a limit to how far you can zoom in/out in the network component, but no limits for how far you can drag the view away from the content.
Add pan limits such that the user can't drag the view too far away from nodes/edges. This is not a built in feature in Cytoscape.js, the library we're using for the visualization:
cytoscape/cytoscape.js#1329
This will likely involve listening for the
viewportevent and limiting the pan accordingly.Reference:
https://stackoverflow.com/questions/55057075/how-to-check-if-my-cytoscape-js-graph-is-out-of-view-even-partially-after-pann
The text was updated successfully, but these errors were encountered: