Add keyboard support for pan and zoom actions #58
Conversation
…ring new listener comments, code style consistency
pocka
left a comment
There was a problem hiding this comment.
The pan and zoom actions all occur when drag mode is enabled (spacebar is held down)...
Why require space key? I checked Figma on macOS Chrome and they don't require space key to pan / zoom. Does it conflict with other shortcuts?
src/math.ts
Outdated
|
|
||
| export function nextPowerOfTwo(num: number): number { | ||
| const nearest = nearestPowerOfTwo(num); | ||
| return Math.min(MAX_SCALE, nearest > num ? nearest : nearest * 2); |
There was a problem hiding this comment.
Min/max in nextPowerOfTwo, previousPowerOfTwo and nearestPowerOfTwo should be done at caller or these functions should take min/max parameter. math.nextPowerOfTwo internally using MAX_SCALE feels not right.
There was a problem hiding this comment.
Fair point, updated them to take an options argument and moved MIN_SCALE / MAX_SCALE to FrameCanvas, per above
I'm not sure why I thought it was necessary! Just tested again and see that it allows it regardless of whether spacebar is held down or not, I'll update this. |
|
@pocka Just realized that this prevents the user from scrolling with the arrow keys, because we are not checking for focus or hover like the solution here: #55 I'm wondering if perhaps we should do something similar, the only issue right now is there is no way for the canvas to have focus (until something like #59 is implemented allowing kb users to focus within the canvas) |
|
This is difficult problem as figspec being a component meant to be embedded. We can't rely on "common sense" because there is not much prior arts thus no established commons... I believe in our case making the canvas (or the custom element itself) focusable is the right approach.
|
This PR adds support for keyboard pan/zoom actions. The keybindings here reflect Figma's behavior in the browser. The pan and zoom actions
all occur when drag mode is enabled (spacebar is held down)and are supressed if the control key is pressed.I did my best to replicate Figma's keyboard scaling behavior, which as far as I can tell changes the scale to the next (zoom in) or previous (zoom out) power of 2 including negative powers. Figma does not center keyboard scaling to the cursor, instead just keeps the position the same and scales.
Similarly, I tried to replicate Figma's keyboard panning behavior. Again, as far as I can tell, Figma will pan ~65px in regardless of scale. I based the panning on the pan speed setting in this case, but this could be hardcoded instead.
I've also added
MAX_SCALEandMIN_SCALEconstants to clamp scaling/zooming, again I tried to replicate what the max and min seems to be in Figma on the browser.