Limit pan in network visualization (#18) #27
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
✅ Deploy Preview for molevolvr ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixing the #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:
For small graphs that fit viewport:
For large graphs that exceed viewport:
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.