PathFinding.js
PathFinding.js copied to clipboard
allow linking to a certain configuration
Make a way to save the layout of walls, start position, end position, selected algorithm, and algorithm settings in the URL. If someone visits that URL, the pathfinder is preconfigured with those settings, ready for the user to click Start Search. That way, people can share links to configurations with interesting behavior. For instance, they can show someone situations where a certain algorithm finds a suboptimal path.
To get the link, the user might click a button or link somewhere on the page that would display and select the URL for the current layout, so the user can just hit Command/Ctrl-C to copy it. Or possibly, the current URL could continuously get updated with whatever the user is setting, but I think it would be bad for the user to see the URL to the page turn ugly and long as he changes things.
This is cool, and I thought about it before.
The major issue that prevented me from implementing it is the dynamic size of the map. Currently, the size of the map is determined by browser's window size. Larger the display, more the nodes the user will see. So it will be a problem when a user with a large display shares a large map to the users with a small display.
Possible solutions for if a small-window user visits a large map
- Just show the user as much of the map as you can, and let the rest be off-screen. That user is out of luck and can't see the whole map. Maybe this situation is rare enough that that's okay.
- Allow scrolling.
- I found out that the site already supports scrolling with the arrow keys, at least in Firefox. If I make a big map and then make the window smaller, I can use the arrow keys to scroll. Though it may not be obvious enough that this is possible.
- Show scroll bars if both the grid is larger than the screen AND the grid cannot be shrunk without delete walls or moving the start or end point. Otherwise leave it without scroll bars.
- Allow panning.
- Arrow buttons grouped together one corner of the screen, or one at each side of the screen.
- When the mouse nears the edge of the screen, it scrolls. Might be annoying.
- Add a button that toggles between a black square and a hand. When you click the hand, your cursor turns into a hand, and dragging on the grid pans instead of painting walls.
- Zoom out to show more. Though this would only delay the problem, because there would have to be a minimum zoom level. If the zoom level is unconstrained and the map is big enough, everything might be so small that the user couldn't see anything.
- Another technique to delay the problem: always center the maze in the screen. If someone draws a small maze in the bottom-right corner of a big map, and a small-window user views that map, you can just move the maze to the area that the user can see. Even if the small-window user actually can see all of the maze, it looks nicer to move the maze to the center anyway. Moving the whole maze and the start and endpoints does not change the path-finding result, so it's safe.
Conclusion
I think it's safe to leave the problem of scrolling for later. Most people will probably share small maps that anyone can view. The problem of big screens can be solved after you have sharing working - it will be no harder to implement it then than to implement it now. And a sharing feature that breaks on small screens is better than no sharing feature. Finally, if they really need to, people can already use the arrow keys to scroll. So it's okay to implement sharing now, without worrying about the size of the map.
@roryokane Really appreciate all your suggestions. I finally decided to enable the scrollbar and allow panning when displaying a large map.