Adding some Costume Editor Keyboard Shortcuts - #8000
Conversation
…o the main tools in the paint editor.
| isInitialized = true; | ||
| document.addEventListener("keydown", handleKeyDown); | ||
| document.addEventListener("focusin", userStartedTyping); | ||
| document.addEventListener("focusout", userStoppedTyping); |
There was a problem hiding this comment.
I haven't tested my suggestion but I think if you add the listeners to an element in the costume editor you won't have to clean them up since Scratch will remove the elements when switching tabs anyway.
There was a problem hiding this comment.
I tried this initially, but had issues getting anything to fire when the handlers were attached to any of the costume editor divs (no matter where I clicked). Probably user error, but document just worked.
Here's an example of what I tried:
// var gui = await addon.tab.waitForElement("[class*='gui_tab-panel']");
// var gui = await addon.tab.waitForElement("[class*='paint-editor_editor-container']");
var gui = await addon.tab.waitForElement("#react-tabs-3");
gui.addEventListener("keydown", handleKeyDown);
gui.addEventListener("focusin", userStartedTyping);
gui.addEventListener("focusout", userStoppedTyping);
I also wondered if there'd be an advantage to using document to not interrupt the workflow (when you're toggling between your game and costume editing). For example, if you eye dropped something on the game view or stage, your costume shortcuts would still work.
4d1d62a to
aeac759
Compare
…namicDisable/Enable
aeac759 to
2d2350b
Compare
|
TurboWarp has this with the only differences being the key indicators are in the tooltips and the line tool is selected with L instead of D. |
Ideally we should match TurboWarp I think |
|
Updated to match TurboWarp: turbowarp.demo.2.mp4scratch.demo.2.mp4Tested in Chrome and Firefox. Since scratch is for kids, I liked the idea of making the shortcuts obvious, but, agreed, it makes the most sense to match TurboWarp. Thanks for pointing out their implementation (now I'm a little confused why Scratch doesn't already have this feature 🤔) |
1246a4e to
109e4ca
Compare
…made shortcuts display on hover.
109e4ca to
6f0614a
Compare
c54e149 to
c53875e
Compare
d4b458a to
7fa2153
Compare
7fa2153 to
e548e9a
Compare
| ], | ||
| "versionAdded": "1.41.0", | ||
| "tags": ["editor", "costumeEditor"], | ||
| "enabledByDefault": false |
There was a problem hiding this comment.
| "enabledByDefault": false | |
| "enabledByDefault": true |
This one will need some discussion.
There was a problem hiding this comment.
Hmm... This is a tough one
There was a problem hiding this comment.
Since it's a new addon, it seems safer to me to not enable it by default until it's proven itself stable, and then maybe enable by default in a future release?
|
Another thing: If you still want the shortcut labels on the buttons it could be made a setting if you think it's worth it. |
Co-authored-by: Samq64 <81489795+Samq64@users.noreply.github.com>
Yea, I wondered about that. I showed my son the PR at Christmas (he was also surprised to learn TurboWarp had this feature already) and he said: "I've been painting in Scratch for 3 years without shortcuts. I'm not going to hover over a button for 3 seconds to see what the new shortcut is." 😄 He's only a sample size of 1, but I kinda want to see how he adopts it before making further changes. |
There was a problem hiding this comment.
It's good enough now
Potential things to do next (or maybe never!)
- Adding a setting to always show the keyboard shortcuts on the screen would be interesting
- dynamicEnable & dynamicDisable (includes adding support for the case where the addon is toggled on while the user is already at the costume editor)
- It's likely other addons also have their own checks for
isUserTyping, and we're not reusing that code. It's also possible we're missing some edge cases as there's multiple places the user can be typing (e.g. Sign Up flow while costume editor open on the background)
|
Do you know if we addressed bitmap mode here? (I didn't check that yet) |
|
Yes, bitmap mode is considered |
|
Suggestion: #8335 |
Adding a "costume-editor-shortcuts" add-on which adds keyboard shortcuts to the main tools in the paint editor.
Hi, first timer here 👋
My son does a lot of scratch, and he thought it'd be useful to have keyboard shortcuts in the costume editor.
Anyways, I thought I'd attempt it as a Christmas present 🎄
Resolves #3414
Changes
shortcuts.demo.mp4
Reason for changes
Keyboard shortcuts can help make switching between paint tools easier and is pretty standard in most modern painting programs.
Tests
Tested in both Chrome and Firefox.