New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard shortcuts for the tools #54

Closed
Viza74 opened this Issue Jul 30, 2018 · 17 comments

Comments

Projects
None yet
3 participants
@Viza74

Viza74 commented Jul 30, 2018

what the title says. :)

Primarily for the draw and colorize tools.

@nurpax nurpax added the keyboard label Jul 30, 2018

@nurpax

This comment has been minimized.

Show comment
Hide comment
@nurpax

nurpax Jul 30, 2018

Owner

Marking this with "keyboard" label. There are many keyboard shortcut related issues.

I added a wiki for designing keyboard shortcuts: https://github.com/nurpax/petmate/wiki/Keyboard-shortcut-design

Should try to design all the shortcuts comprehensively so that they feel consistent. If we add them one by one, it might get messy and inconsistent.

Owner

nurpax commented Jul 30, 2018

Marking this with "keyboard" label. There are many keyboard shortcut related issues.

I added a wiki for designing keyboard shortcuts: https://github.com/nurpax/petmate/wiki/Keyboard-shortcut-design

Should try to design all the shortcuts comprehensively so that they feel consistent. If we add them one by one, it might get messy and inconsistent.

@Esshahn Esshahn added this to the 0.3 milestone Aug 4, 2018

@Viza74

This comment has been minimized.

Show comment
Hide comment
@Viza74

Viza74 Aug 6, 2018

Suggestions:
wasd - move in character palette
qe - move in color palette

For the tools one simple possibility to simply use the number keys (TIC80 and I think maybe Pico8 does this). Conviniently close to wasd hand position, and don't have think too much. :)
1 - draw
2 - colorize
3 - change char only (ok, this is not a tool yet, but should be :) )
4 - brush
Some alternatives:
For draw: "p" as pen. That is a bit too far away from wasd though. Could be "b" as brush. The placement of this is ok, but needs renaming the current brush tool to avoid confusion.
For brush: Obviously "b". If "b" used for the re-named draw, then "c" as in "Clone stamp", or "v" - I don't have a name for it, but it nicely sits between "b" and "c" :)
For colorize: Obviously "c". If "c" is used for the re-named brush, then "r" as in "Recolor"
For change char only: "x" as in "eXchange char" - a bit far-fetched name, but the hotkey is close to the natural resting pos of the hand... And also because "c" as in "change" or as in "char" is probably already taken. :)

I would not add a hotkey for the clear canvas tool to prevent accidental activation, and because it is a very rarely used function anyway - or if I really must assign something then some two- or even three key combination like cmd+shift+del.

Oh, and for the mouse:
right click for pick in whatever primary mode is the program in (=if right clicked in draw mode, then pick char and color too, if right clicked in colorize mode then picks only color, if right clicked in char only mode picks only char. Hmm, maybe it doesn't even matter, and can always pick everything - if the program is in an another mode, it still effectivly acts as only picking that part...)
If the right lick detection is problematic (I guess it is probably just some small thing preventing from working, as it is sounds it shouldn't be problematic, but I don't really know js/react whatever it is used for this) alt+ left click could work the same.
Maybe pick could even got its own icon in the toolbar as a pipetta/eyedropper. That also can use the alt key as a momentary toggle, or can get it's own hotkey. "i" is the default in photoshop and I guess in other drawing programs. But I never use it actually (only the alt+left click variation).

Viza74 commented Aug 6, 2018

Suggestions:
wasd - move in character palette
qe - move in color palette

For the tools one simple possibility to simply use the number keys (TIC80 and I think maybe Pico8 does this). Conviniently close to wasd hand position, and don't have think too much. :)
1 - draw
2 - colorize
3 - change char only (ok, this is not a tool yet, but should be :) )
4 - brush
Some alternatives:
For draw: "p" as pen. That is a bit too far away from wasd though. Could be "b" as brush. The placement of this is ok, but needs renaming the current brush tool to avoid confusion.
For brush: Obviously "b". If "b" used for the re-named draw, then "c" as in "Clone stamp", or "v" - I don't have a name for it, but it nicely sits between "b" and "c" :)
For colorize: Obviously "c". If "c" is used for the re-named brush, then "r" as in "Recolor"
For change char only: "x" as in "eXchange char" - a bit far-fetched name, but the hotkey is close to the natural resting pos of the hand... And also because "c" as in "change" or as in "char" is probably already taken. :)

I would not add a hotkey for the clear canvas tool to prevent accidental activation, and because it is a very rarely used function anyway - or if I really must assign something then some two- or even three key combination like cmd+shift+del.

Oh, and for the mouse:
right click for pick in whatever primary mode is the program in (=if right clicked in draw mode, then pick char and color too, if right clicked in colorize mode then picks only color, if right clicked in char only mode picks only char. Hmm, maybe it doesn't even matter, and can always pick everything - if the program is in an another mode, it still effectivly acts as only picking that part...)
If the right lick detection is problematic (I guess it is probably just some small thing preventing from working, as it is sounds it shouldn't be problematic, but I don't really know js/react whatever it is used for this) alt+ left click could work the same.
Maybe pick could even got its own icon in the toolbar as a pipetta/eyedropper. That also can use the alt key as a momentary toggle, or can get it's own hotkey. "i" is the default in photoshop and I guess in other drawing programs. But I never use it actually (only the alt+left click variation).

@Viza74

This comment has been minimized.

Show comment
Hide comment
@Viza74

Viza74 Aug 6, 2018

Ohh, one more thing: the current "brush" tool functionality could be very naturally moved to right mouse too, because it is actualy some kind of "pick up". Like "shift + right mouse drag" selects brush, and automatically swiches to brush mode. And as I mentioned in some other issue, I would like to see a "move" version of the brush tool, which clears the area of the original selection, that could be "cmd+right mouse drag"

Viza74 commented Aug 6, 2018

Ohh, one more thing: the current "brush" tool functionality could be very naturally moved to right mouse too, because it is actualy some kind of "pick up". Like "shift + right mouse drag" selects brush, and automatically swiches to brush mode. And as I mentioned in some other issue, I would like to see a "move" version of the brush tool, which clears the area of the original selection, that could be "cmd+right mouse drag"

@nurpax

This comment has been minimized.

Show comment
Hide comment
@nurpax

nurpax Aug 6, 2018

Owner

I was going to suggest:

  • 'b' - brush (select brush, draw with brush) (I don't understand why this would renaming the brush tool)
  • 'c' - colorize
  • 'x' - for draw (because 'd' is taken.. but hey, 'x' marks the spot, e.g. draw :))

Agreed that clear canvas doesn't need a shortcut. In fact I will most likely replace it with "clear rect" to fill a rectangle.

Suggestions:
wasd - move in character palette
qe - move in color palette

For the record, the above are the way it works in Git HEAD (IIRC in 0.2.0 too for wasd).

Owner

nurpax commented Aug 6, 2018

I was going to suggest:

  • 'b' - brush (select brush, draw with brush) (I don't understand why this would renaming the brush tool)
  • 'c' - colorize
  • 'x' - for draw (because 'd' is taken.. but hey, 'x' marks the spot, e.g. draw :))

Agreed that clear canvas doesn't need a shortcut. In fact I will most likely replace it with "clear rect" to fill a rectangle.

Suggestions:
wasd - move in character palette
qe - move in color palette

For the record, the above are the way it works in Git HEAD (IIRC in 0.2.0 too for wasd).

@Esshahn

This comment has been minimized.

Show comment
Hide comment
@Esshahn

Esshahn Aug 6, 2018

Collaborator

Agreed that clear canvas doesn't need a shortcut.

But it deserves an entry in the menu

Collaborator

Esshahn commented Aug 6, 2018

Agreed that clear canvas doesn't need a shortcut.

But it deserves an entry in the menu

@Viza74

This comment has been minimized.

Show comment
Hide comment
@Viza74

Viza74 Aug 6, 2018

(I don't understand why this would renaming the brush tool)
Because IMO what is called "draw" in petmate is called "brush" in every other drawing program. At least the functionality maps best for "brush" in other programs.
What is called "brush" in petmate is "clone", or "copy-paste" in other programs IMO. Maybe when there will be a brush palette to store and choose multiple brushes from the canvas it will deserve the "brush" name, but right now it is closer to copy-paste.
But there is definitely a gray area here in overlapping functionality, so it doesn't really matter...

Agreed that clear canvas doesn't need a shortcut.
But it deserves an entry in the menu

You two seems to be strangely attached to that clear canvas tool... :) I don't really understand why, though.
IMO thats a very rarely used option (maybe usefull during program testing, but in real world use?)
I can't recall any drawing program that's show an instant "clear canvas" functionality this prominently.
But anyway, I don't want to take away your favorite tool :) I do not mind if thats sit there, I just think it is way less important than top spot in the toolbar...

Viza74 commented Aug 6, 2018

(I don't understand why this would renaming the brush tool)
Because IMO what is called "draw" in petmate is called "brush" in every other drawing program. At least the functionality maps best for "brush" in other programs.
What is called "brush" in petmate is "clone", or "copy-paste" in other programs IMO. Maybe when there will be a brush palette to store and choose multiple brushes from the canvas it will deserve the "brush" name, but right now it is closer to copy-paste.
But there is definitely a gray area here in overlapping functionality, so it doesn't really matter...

Agreed that clear canvas doesn't need a shortcut.
But it deserves an entry in the menu

You two seems to be strangely attached to that clear canvas tool... :) I don't really understand why, though.
IMO thats a very rarely used option (maybe usefull during program testing, but in real world use?)
I can't recall any drawing program that's show an instant "clear canvas" functionality this prominently.
But anyway, I don't want to take away your favorite tool :) I do not mind if thats sit there, I just think it is way less important than top spot in the toolbar...

@Esshahn

This comment has been minimized.

Show comment
Hide comment
@Esshahn

Esshahn Aug 6, 2018

Collaborator

Not toolbar. The menu.

Collaborator

Esshahn commented Aug 6, 2018

Not toolbar. The menu.

@Viza74

This comment has been minimized.

Show comment
Hide comment
@Viza74

Viza74 Aug 6, 2018

Ohh, ok, I misunderstood.
The menu could be ok.
In the "edit" menu.
But IMO the right click menu of the screen thumbnails would be the most natural place to put the clear canvas function (as it is a screen-wide function). But the edit menu is also retty good

(Somewhat off-topic here, but the thumbnail right-click menu is a bit too hidden - i think the best would be a small drop-down arrow on thumbnail hover to access that menu.)

Viza74 commented Aug 6, 2018

Ohh, ok, I misunderstood.
The menu could be ok.
In the "edit" menu.
But IMO the right click menu of the screen thumbnails would be the most natural place to put the clear canvas function (as it is a screen-wide function). But the edit menu is also retty good

(Somewhat off-topic here, but the thumbnail right-click menu is a bit too hidden - i think the best would be a small drop-down arrow on thumbnail hover to access that menu.)

@nurpax

This comment has been minimized.

Show comment
Hide comment
@nurpax

nurpax Aug 6, 2018

Owner

I guess it never occurred to me that 'brush' might not be the best name for that feature. We can try to come up with a better name for it.

However, I have several good changes lined up for the next release, so I'll go ahead and implement shortcuts as in my above reply. We can change them then once this discussion concludes. It's better we have the shortcuts in there -- other use patterns depend on them.

Owner

nurpax commented Aug 6, 2018

I guess it never occurred to me that 'brush' might not be the best name for that feature. We can try to come up with a better name for it.

However, I have several good changes lined up for the next release, so I'll go ahead and implement shortcuts as in my above reply. We can change them then once this discussion concludes. It's better we have the shortcuts in there -- other use patterns depend on them.

nurpax added a commit that referenced this issue Aug 6, 2018

Add keyboard shortcuts for selecting the current painting tool (#54)
Now uses

'x' - draw
'c' - colorize
'b' - select brush

But '1', '2', '3', '4' might feel better for these actually.
@nurpax

This comment has been minimized.

Show comment
Hide comment
@nurpax

nurpax Aug 6, 2018

Owner

I added two sets for tool selection:

  • 'x', 'c', 'b'
  • '1', '2', '3'

Both do the same. Give it a try and see which feels better. I'll make a build in the next 10 mins.

Unfortunately I still couldn't get right click to work reliably on Electron. I can attach an event handler for "context menu" and get the events.. but a right click also issues a left-click (!), at least on my Mac where I need to press ctrl-left-click to pop the context menu. Not sure if this would work with a real mouse and/or on Windows.

Would it be a totally bad idea to use say COMMAND-leftclick instead of right click?

Owner

nurpax commented Aug 6, 2018

I added two sets for tool selection:

  • 'x', 'c', 'b'
  • '1', '2', '3'

Both do the same. Give it a try and see which feels better. I'll make a build in the next 10 mins.

Unfortunately I still couldn't get right click to work reliably on Electron. I can attach an event handler for "context menu" and get the events.. but a right click also issues a left-click (!), at least on my Mac where I need to press ctrl-left-click to pop the context menu. Not sure if this would work with a real mouse and/or on Windows.

Would it be a totally bad idea to use say COMMAND-leftclick instead of right click?

@nurpax

This comment has been minimized.

Show comment
Hide comment
@nurpax

nurpax Aug 6, 2018

Owner

0.2.3 contains the shortcuts. Up in the usual location.

Owner

nurpax commented Aug 6, 2018

0.2.3 contains the shortcuts. Up in the usual location.

@Viza74

This comment has been minimized.

Show comment
Hide comment
@Viza74

Viza74 Aug 7, 2018

I suggested alt+left click, because thats the color picker in Photoshop.

Viza74 commented Aug 7, 2018

I suggested alt+left click, because thats the color picker in Photoshop.

@nurpax

This comment has been minimized.

Show comment
Hide comment
@nurpax

nurpax Aug 7, 2018

Owner

So alt-left to pick char and color under cursor?

Also add a picker icon in the left menu bar, selectable with a shortcut ('i' and maybe '4' if I'm reading right from above)?

The icon probably wouldn't be used much as alt-left would be quicker, but I'd like these features to be somehow visible in the UI. Easier to get started this way rather than rely only on invisible keyboard shortcuts.

Owner

nurpax commented Aug 7, 2018

So alt-left to pick char and color under cursor?

Also add a picker icon in the left menu bar, selectable with a shortcut ('i' and maybe '4' if I'm reading right from above)?

The icon probably wouldn't be used much as alt-left would be quicker, but I'd like these features to be somehow visible in the UI. Easier to get started this way rather than rely only on invisible keyboard shortcuts.

@Viza74

This comment has been minimized.

Show comment
Hide comment
@Viza74

Viza74 Aug 7, 2018

Yes.

In other news: I tried 0.2.3 and happy to report that the hotkeys made the program approximately 1.493 bazillion times more useable. :)

Also, I just realized that I can "abuse" the brush tool to simulate "pick" behaviour (with the somewhat strange shortcut -> "Esc" to pick) which added another 0.793 bazillion to the useablity multiplier. :)

Viza74 commented Aug 7, 2018

Yes.

In other news: I tried 0.2.3 and happy to report that the hotkeys made the program approximately 1.493 bazillion times more useable. :)

Also, I just realized that I can "abuse" the brush tool to simulate "pick" behaviour (with the somewhat strange shortcut -> "Esc" to pick) which added another 0.793 bazillion to the useablity multiplier. :)

@nurpax

This comment has been minimized.

Show comment
Hide comment
@nurpax

nurpax Aug 7, 2018

Owner

Alt-left-click is in 0.2.4. This should be another c*bazillion productivity improvement :)

Owner

nurpax commented Aug 7, 2018

Alt-left-click is in 0.2.4. This should be another c*bazillion productivity improvement :)

@Viza74

This comment has been minimized.

Show comment
Hide comment
@Viza74

Viza74 Aug 8, 2018

Yepp, helps a lot too.

One small issue: if in brush mode, and alt-click pick a character, the app should switch back to draw mode (as it does when selecting from the character palette in brush mode).
Also it should switch to draw mode from colorize mode too if selecting something from the character palette. But not on alt-pick.

Viza74 commented Aug 8, 2018

Yepp, helps a lot too.

One small issue: if in brush mode, and alt-click pick a character, the app should switch back to draw mode (as it does when selecting from the character palette in brush mode).
Also it should switch to draw mode from colorize mode too if selecting something from the character palette. But not on alt-pick.

@nurpax nurpax closed this in 40e67e9 Aug 8, 2018

@nurpax

This comment has been minimized.

Show comment
Hide comment
@nurpax

nurpax Aug 8, 2018

Owner

Implemented @Viza74 's last suggestion too

Owner

nurpax commented Aug 8, 2018

Implemented @Viza74 's last suggestion too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment