[Layout Engine] Alignment: Snap to Grid

[kibanamachine]

Original comment by @alexfrancoeur:

Right now we only have a graphical grid in Canvas accessible by the keyboard shortcut alt+G. In order to provide the a very basic alignment experience, we should add support for snap to grid. Most presentation have this feature but it is normally trumped by Snap to Guides. I believe Snap to Grid will likely be prerequisite for Snap to Guides (LINK REDACTED).

[kibanamachine]

Original comment by @monfera:

I reclassified it from small to large as the snapping is somewhat involved to get right, even though we now have some of the machinery involved, and we have snap lines already (the magenta lines). Snapping is planned to have these features:

Translation (drag&drop) snapping:

• Snap to the edge or center of some other element, with the edge or the center (ie. a center can snap with an edge as well)
• Temporarily deactivate snapping with a modifier key, such as Shift, to enable pixel level accuracy
• Snap to the edge or the centerlines of the page (asked by @alexfrancoeur)

Resize snapping:

• Be able to do the translation snapping, but of course during resizing a side or a corner

Rotation snapping:

• As other design software, snap to key rotation degrees, specifically, multiples of 45 degrees. It's super important, because 1. many designs use these rotations; 2. rotating somewhere, then trying to right the element horizontally or vertically is currently very hard to impossible
• Show degrees
• Enable discrete rotation in 15 degree increments with a modifier key
• (optional) Deactivate snap range with a modifier key

[kibanamachine]

Original comment by @monfera:

@alexfrancoeur I just took a look at Google Slides, and to clarify, the rotation is free range without a modifier key, but it still snaps to 45 degree increments when one is nearby (in a few degrees' distance). So, while it seemed that way when initially reading LINK REDACTED it is probably just a misunderstanding due to probably how I worded things. So, in conclusion, all tested comparable software (Adobe Illustrator, Sketch, Google Slides and iirc PowerPoint) rotates freely without a modifier key except the proximity snapping at 45 degree increments, and this is what we do now as LINK REDACTED is merged.

Coming up: In mainstream software, using a modifier key enables discrete rotation that you describe, eg. Google Slides at 15 degree intervals, which we're planning to add based on your feedback (I'll add it to the checklist above). We may add another modifier key which would disable the current proximity snapping, so a rotation of eg. 1 degree would be possible. With this, the basic behavior is free range rotation with 45deg snapping, and with modifier keys, the user will be able to relax (inhibit snapping) or constrain (discrete angles at a 15-degree cadence). This plus showing the angle (adding it to the list too in a moment).

@cqliu1 I have some self-doubt about the snapping tolerance or might have misunderstood and gone overboard. Upon more use and also playing with Google Slides etc the +/-5 degree feels too large, even though it felt "right" on a quick initial try. So I'm planning to make it a range of 5 degrees ie. +/- 2.5 degrees which is about what Google Slides does, and more than what we had when you tested before your comment. Adobe Illustrator is even less pronounced, in our usual rectangle size, the effect is +/- 0.8 (!) degrees, but for a web based app we should err toward Google Slides (high-paying Ai - ie. pro - users may be more meticulous and feature-aware than our users among who casual users, or users with lesser quality pointer devices may be a higher proportion).

@cqliu1 @alexfrancoeur having said this, it's interesting what Ai does - the farther away you're from the center of rotation with your mouse, the smaller the snap suck-in zone. It's the most scalable behavior because:

1. Grabbing the rotation handle, and rotating a default (likely average) sized element, it gives a nice snap (we could of course shoot for the +/- 2.5deg rather than Adobe's +/- 0.8deg, see above) ie. it aids feature discovery and the default snap suck-in range is pronounced yet not overbearingly wide
2. If the element is very small, or the user rotates such a way that the mouse is closer to the rotation center, then naturally, each pixel passed with the mouse will result in a larger and larger arc, ie. the snap angle should be increased if we want to help users to right their elements.
3. If the (likely pro-ish) user rotates farther away from the center, then Ai snaps respectively smaller and smaller angles. On a MBP with an average Ai canvas, the snap could be as tight as +/- 0.3deg! Yet the effect is noticeable as it still occurs that moving the mouse a few pixels will not further rotate the elment.

I wanted to mention a super subtle effect in Ai that we don't have yet, but it's noticeable once you rotate an element with the mouse cursor really close to the rotation origin. We (and the not too refined Google Slides) currently just set the angle so that the element direction complies with the pointer. With a rotation a few pixels away from the center, it results in wild, immediate orientation jumps, the extreme of which is eg. from 0 to 180deg. Meanwhile, Ai has an incredibly fast tweening (a few 1/60sec frames) that is still clearly nicer. Adding temporal behavior (tweening) is something for the future though.

cc @snide

[kibanamachine]

Original comment by @monfera:

@alexfrancoeur as you asked for showing the rotation degree, I assume we want width/height and maybe position for resizing, and position for drag and drop? And ofc eventually showing distance from other objects, or from ones that are linked with the magenta snap line as Sketch does nicely :-)

[kibanamachine]

Original comment by @monfera:

@rayafratkina I might need a Microsoft PowerPoint license to include it in our watch too

[kibanamachine]

Original comment by @alexfrancoeur:

@monfera thanks for the detailed info! Your proposal overall sounds good to me. A few questions / comments around some of the specifics.

Upon more use and also playing with Google Slides etc the +/-5 degree feels too large, even though it felt "right" on a quick initial try.

Agreed, 5 degrees seemed a bit much to me

In mainstream software, using a modifier key enables discrete rotation that you describe, eg. Google Slides at 15 degree intervals, which we're planning to add based on your feedback (I'll add it to the checklist above)

++ I really like this experience

having said this, it's interesting what Ai does - the farther away you're from the center of rotation with your mouse, the smaller the snap suck-in zone

I'd be interested in seeing a gif of this, any chance you could share?

as you asked for showing the rotation degree, I assume we want width/height and maybe position for resizing, and position for drag and drop? And ofc eventually showing distance from other objects, or from ones that are linked with the magenta snap line as Sketch does nicely :-)

I agree that Sketch does this nicely and would like to see these labels where appropriate. What do you think @rashidkpc?

I might need a Microsoft PowerPoint license to include it in our watch too

IT should be able to handle that, we have a bunch lying around

[kibanamachine]

Original comment by @monfera:

@alexfrancoeur here's a gif with the effect:

1. Shows rotation snap, around +/-0.8deg, at our default / normal element size
2. Same, but closer to the center of rotation - larger snap degree
3. Same, but further away from the center of rotation - smaller snap degree

To me looks sensible because snapping is a function of a pixel distance traveled with the mouse, and not angle. Consider how much the mouse needs to travel if the user rotates far away from the shape center, even if we use a smaller value eg. +/-2.5deg. Also, users can this way tweak snap distance, yet get a reassuring snap even with fine, fractional degrees.

[kibanamachine]

Original comment by @alexfrancoeur:

Interesting, I like this concept @monfera!

[rashidkpc]

I'm going to close this as we now have snapping/alignment of elements.