Editor: Added a new panel for editing key bindings #12612
Conversation
All input handling is now in Sidebar.Controls. In addition, changed from using event.keyCode to event.key. This may cause browser compatibility issues, but is more maintainable and easier to read.
This prevents the user from unknowingly having keyboard focus on an input field after changing a key binding.
When changing key bindings, will now check that the key entered is valid. If not, then revert back to the key stored in config.
|
Looking good! |
editor/js/Config.js
Outdated
| 'settings/history': false | ||
| 'settings/history': false, | ||
|
|
||
| 'controls/translate': 'w', |
There was a problem hiding this comment.
Do you mind renaming these to settings/controls/translate...?
editor/js/Sidebar.Controls.js
Outdated
|
|
||
| break; | ||
|
|
||
| case editor.config.getKey( 'controls/undo' ).toLowerCase(): // Register Ctrl/Command-Z for Undo and Ctrl/Command-Shift-Z for Redo |
There was a problem hiding this comment.
I bet having caps locked messes with this...
There was a problem hiding this comment.
Ahh good call, I haven't tested how caps lock affects the controls. There is currently weird behavior where pressing CTRL+SHIFT+Z results in the key being 'Z' on Chrome and 'z' on Safari and Firefox hence why I'm checking for both upper and lower case for undo/redo. I'll test out caps lock and let you know what behavior I see.
|
So with the current implementation, having caps lock pressed will result in the translate/rotate/scale controls not being registered. This is because those controls are case sensitive. Undo/redo is not case sensitive, so it is unaffected by having caps lock pressed, and in addition, you still need to hold shift for a redo to be triggered instead of undo. This is mostly a design decision whether we want to keep it like this or not. By allowing things like translate/rotate/scale to be case sensitive, it lets users bind those commands to SHIFT+ without much extra work. However, we could make bindings case insensitive if we felt that was more intuitive or a more consistent experience. |
|
Hmm, okay. I'll merge and experiment with this. |
|
Thanks! |
|
Ended up making it case-insensitive (forced to lowercase). |
|
Also, this makes it work in Safari. |
|
Ah, perfect! I'm glad you were able to find a way to make that consistent between browsers. And forcing to lowercase seems pretty smart to me. In the future it may make sense to add the ability to bind certain modifier keys such as shift or alt. However, keeping everything lowercase for now seems like it will cause the least issues. Thanks for merging that in! |
|
🙌 |
By adding this panel, users now have the ability to edit key bindings for the translate, rotate, scale, and undo buttons. This could be useful for those with different keyboard configurations and also allows more key bindings to be easily added without cluttering index.html. Currently, I called the panel 'CONTROLS' and didn't allow for the binding of modifier keys such as Command/Control.
Here is an image of what the panel looks like:
There are a bunch of changes that can be made with this, so definitely let me know your thoughts. Hopefully we can leverage this to add more commands to the editor in the future.