Object snap demo
I always wanted to implement an object snap, and there's no time like the present.
This obviously isn't close to a fully functional drawing system, but essentially:
-
Random lines and circles are drawn (or a test pattern), and their parameters are addded to a small lookup dictionary.
-
When the mouse moves, depending on snap options, the app iterates through all endpoints, midpoints, etc. and checks if their distance is less than or equal to the current snap range radius. If it is, that snap point is highlighted. If not, the snap point highlight is erased.
-
Use the currently selected item list to allow for more efficient erasing of highlights when the mouse moves out of range (and also allow for app to list/analyze current selections)
-
Support drawing new lines and rubber-banding endpoints to snap-points.
-
Support for snap to perpendicular, parallel, and tangent.
-
Use standard coordinates (+y = up) rather than canvas coordinates.
-
Use of a search library to look for snap candidates, such as https://github.com/mourner/rbush
Are there libraries that do this already? Of course -- this is just for fun.
yarn start -> http://localhost:8080/snap
Uses protractor and webdriver-manager, see src/test