All Articles

Week 4 - OnCanvas Alignment Guides

Image

Adding Distribution Snapping

This week I worked on adding distribuiton snapping. The inspiration for this feature comes from UI design programs like Figma and Penpot. At its core, distribution snapping indicates that certain objects are equidistant from each other in either Horizontal or Vertical direction. OnCanvas Distribuiton Guides have enormous potential to increase workflow speeds. This feature will provide a much faster way to space objects than the currently existing Distribution options in the Align and Distribute objects dialog box.

At its current state, Distribution snapping in Inkscape works for most intents and purposes but it’s behaviour is limited if compared with something like Figma. Most of these limitations are a direct consequence of how this feature is implemented in code. I am not really sure of how much it is possible to replicate other programs without making some radical changes to how Inkscape handles snapping.

Bug Fixes

With a new features come a lot of new bugs ;)

It took a lot of time to make sure that alignment snapping works well with the previously implemented alignment snapping which is also a part of this project. There were quite a few bugs I encountered while implementing snap indicators for distribution snapping. Also taking overlapping objects into account while looking for equidistant objects was a bit of a challenge.

Image

Snap Distance

Both Distribution and Alignment snapping now show the snap distance. For alignment snapping, this inspiration was taken from Affinity Designer which does something similar. This feature however can be turned off from Preferences in the snapping page in case you feel that showing distances causes unnecessary clutter.

Image

Next Up

Distribution snapping needs some more testing. I think at its current state it is pretty functional but it can always be improved. I also have plans to make the alignment and distribution indicators appear more fluid using fade-in and fade-out animations.

Also Alignment and Distribution snapping will likely be merged into just one feature that will have a nice name (smart snapping, intelligent snapping, big brain snapping, etc.)