Use KeyboardEvent#code in camera-fly.ts

[abstrakt8]

Fixes #1451 specifically

What has changed?

• Using KeyboardEvent#code (MDN ) for orbit control, so that the physical keys get recognised instead of their values

• Good tool to check the different keyboard codes: https://www.toptal.com/developers/keycode

• I confirm I have read the contributing guidelines

[abstrakt8]

List of all PlayCanvas editor hotkeys

Hotkey	Name
Space	viewport:expand
F	viewport:focus
Ctrl + B	lightmapper:bake
1	gizmo:translate
2	gizmo:rotate
3	gizmo:scale
4	gizmo:resize
L	gizmo:world
Ctrl + I	code-editor
Ctrl + Enter	launch
Shift + ?	help:controls
Ctrl + Space	help:howdoi
Ctrl + Z	history:undo
Ctrl + Shift + Z	history:redo
Ctrl + Y	history:redo:y
Ctrl + E	entity:new
Ctrl + D	entity:duplicate
Delete	entity:delete
Ctrl + Backspace	entity:delete
Ctrl + C	entity:copy
Ctrl + V	entity:paste
Shift + Z	selector:return
N	assets:rename-select
F2	assets:rename-select:f2
Ctrl + A	asset:select-all
Backspace	assets:fs:up
Ctrl + C	asset:copy
Ctrl + V	asset:paste
Ctrl + Shift + V	asset:paste:keepFolderStructure
Ctrl + P	go-to-file
Ctrl + Alt + .	next-tab
Ctrl + Alt + ,	prev-tab
Ctrl + S	save
Alt + W	close-selected
Alt + Shift + W	close-all
Ctrl + Z	undo
Ctrl + Y	redo
Ctrl + Shift + Z	redo-2
F2	entities:rename:f2
Escape	sceneSettings:priorityScripts:close
Enter	version-control-enter-*
Ctrl + S	new-checkpoint
F	sprite-editor-focus
Escape	sprite-editor-esc
T	sprite-editor-trim
Enter	sprite-editor-add-frames
Delete	sprite-editor-delete
Delete	asset:delete
Ctrl + Backspace	asset:delete
Escape	picker:assets:close
Escape	picker:color:close
Escape	picker:curve:close
Delete	curve-anchor:delete
Ctrl + Backspace	curve-anchor:delete
Escape	picker:entity:close
Escape	picker:gradient:close
Delete	gradient-anchor:delete
Ctrl + Backspace	gradient-anchor:delete
Escape	picker:node:close
Escape	search-close
Delete	delete-files
Ctrl + Backspace	delete-files-2

[abstrakt8]

Testing

Potentially affecting all hotkeys containing the letters ZQSDAE

From local testing

Hotkey	Name	Works as expected
Shift + Z	selector:return	⚠️ Gets activated at the same time as moving the camera forward (quickly)
Ctrl + Z	history:undo	✅
Ctrl + Shift + Z	history:redo	✅
Ctrl + E	entity:new	✅
Ctrl + D	entity:duplicate	✅
Ctrl + A	asset:select-all	✅
Ctrl + S	save	✅
Ctrl + Z	undo	✅
Ctrl + Shift + Z	redo-2	✅
Ctrl + S	new-checkpoint	✅

All the ones with Ctrl work as expected because we don't perform any orbital movements when the ctrlKey is pressed:

editor/src/editor/viewport/camera/camera-fly.ts

Lines 74 to 76 in a3f4963

	if (isInputOrTextarea(evt.target) || evt.ctrlKey || evt.metaKey || evt.altKey) {
	return;
	}

[abstrakt8]

So it seems like the Shift + Z shortcut has an almost decade long history: https://github.com/playcanvas/editor-ui/commit/c5b1cede34324b79c4d97d8d123db951407a9ecc and is also documented in various places (Help popup and PC Dev Docs)

So I see the following options:

Option 1: Keep the Shift + Z shortcut

• (-) French and Belgium users with AZERTY layout would experience this conflict between "Move the camera forward quickly" and "Previous selection"

Option 2: Rebind the shortcut Shift + Z to something else

• (-) Users used to Shift + Z would have to relearn their muscle memory
• Have to update the docs as well

Option 3: Do not merge this change in

• (-) French and Belgium users would have to use a unintuitive way to control the camera and this was requested in Azerty layout issue: ZQSD vs WASD #1451

Of course long term we should have custom keybindings that have been long requested (e.g. #344 and #408 ) to avoid such conflicts in the first place. This PR is a short term solution to give AZERTY users a better experience in the meanwhile.

[abstrakt8]

Chose for Option 2 and used Shift + X:

• x is close enough to the z key so that previous users can quickly adapt
• Shift+x is also a shortcut that can be used only with the left-hand for QWERTZ users. Shift + z is inconvenient with only one hand for German users.

[Maksims]

Why not use code for shift+Z also, so it keeps working in same position as in english layout and no conflict will be there?

Basically if code used everywhere, no problems should be?

[abstrakt8]

Why not use code for shift+Z also, so it keeps working in same position as in english layout and no conflict will be there?

Basically if code used everywhere, no problems should be?

So I cancelled this PR #1461 because from researching a little bit further, users using other layouts don't use the physical keys in most applications. So for a German user, their muscle memory would be to press Ctrl + Z (key) or Ctrl + KeyY (code) to undo.

The problem with having physical keys in the shortcut is that it's also hard to communicate with new users what keys they would have to press.

Having custom keybindings would solve all of this, but that requires more effort in the future.

[kpal81xd]

Looks good. Will be a breaking change to make sure to include when doing release notes