fix non-physical keys support

CHANGELOG.md

@@ -7,6 +7,7 @@ Note that since we don't clearly distinguish between a public and private interf
 ## [Unreleased]
 
 - Don't rely solely on `chem_comp_atom` when detecting CCD files (#877)
+- Actually support non-physical keys in `Bindings.Trigger.code`
 
 ## [v3.38.1] - 2023-07-22
 

src/mol-canvas3d/controls/trackball.ts

@@ -638,45 +638,45 @@ namespace TrackballControls {
             Vec2.copy(_rotCurr, getMouseOnCircle(movementX + cx, movementY + cy));
         }
 
-        function onKeyDown({ modifiers, code, x, y }: KeyInput) {
+        function onKeyDown({ modifiers, code, key, x, y }: KeyInput) {
             if (outsideViewport(x, y)) return;
 
-            if (Binding.matchKey(b.keyMoveForward, code, modifiers)) {
+            if (Binding.matchKey(b.keyMoveForward, code, modifiers, key)) {
                 keyState.moveForward = 1;
-            } else if (Binding.matchKey(b.keyMoveBack, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyMoveBack, code, modifiers, key)) {
                 keyState.moveBack = 1;
-            } else if (Binding.matchKey(b.keyMoveLeft, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyMoveLeft, code, modifiers, key)) {
                 keyState.moveLeft = 1;
-            } else if (Binding.matchKey(b.keyMoveRight, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyMoveRight, code, modifiers, key)) {
                 keyState.moveRight = 1;
-            } else if (Binding.matchKey(b.keyMoveUp, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyMoveUp, code, modifiers, key)) {
                 keyState.moveUp = 1;
-            } else if (Binding.matchKey(b.keyMoveDown, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyMoveDown, code, modifiers, key)) {
                 keyState.moveDown = 1;
-            } else if (Binding.matchKey(b.keyRollLeft, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyRollLeft, code, modifiers, key)) {
                 keyState.rollLeft = 1;
-            } else if (Binding.matchKey(b.keyRollRight, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyRollRight, code, modifiers, key)) {
                 keyState.rollRight = 1;
-            } else if (Binding.matchKey(b.keyPitchUp, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyPitchUp, code, modifiers, key)) {
                 keyState.pitchUp = 1;
-            } else if (Binding.matchKey(b.keyPitchDown, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyPitchDown, code, modifiers, key)) {
                 keyState.pitchDown = 1;
-            } else if (Binding.matchKey(b.keyYawLeft, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyYawLeft, code, modifiers, key)) {
                 keyState.yawLeft = 1;
-            } else if (Binding.matchKey(b.keyYawRight, code, modifiers)) {
+            } else if (Binding.matchKey(b.keyYawRight, code, modifiers, key)) {
                 keyState.yawRight = 1;
             }
 
-            if (Binding.matchKey(b.boostMove, code, modifiers)) {
+            if (Binding.matchKey(b.boostMove, code, modifiers, key)) {
                 keyState.boostMove = 1;
             }
 
-            if (Binding.matchKey(b.enablePointerLock, code, modifiers)) {
+            if (Binding.matchKey(b.enablePointerLock, code, modifiers, key)) {
                 input.requestPointerLock(viewport);
             }
         }
 
-        function onKeyUp({ modifiers, code, x, y }: KeyInput) {
+        function onKeyUp({ modifiers, code, key, x, y }: KeyInput) {
             if (outsideViewport(x, y)) return;
 
             let isModifierCode = false;
@@ -715,34 +715,34 @@ namespace TrackballControls {
             }
 
             for (const code of codes) {
-                if (Binding.matchKey(b.keyMoveForward, code, modifiers)) {
+                if (Binding.matchKey(b.keyMoveForward, code, modifiers, key)) {
                     keyState.moveForward = 0;
-                } else if (Binding.matchKey(b.keyMoveBack, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyMoveBack, code, modifiers, key)) {
                     keyState.moveBack = 0;
-                } else if (Binding.matchKey(b.keyMoveLeft, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyMoveLeft, code, modifiers, key)) {
                     keyState.moveLeft = 0;
-                } else if (Binding.matchKey(b.keyMoveRight, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyMoveRight, code, modifiers, key)) {
                     keyState.moveRight = 0;
-                } else if (Binding.matchKey(b.keyMoveUp, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyMoveUp, code, modifiers, key)) {
                     keyState.moveUp = 0;
-                } else if (Binding.matchKey(b.keyMoveDown, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyMoveDown, code, modifiers, key)) {
                     keyState.moveDown = 0;
-                } else if (Binding.matchKey(b.keyRollLeft, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyRollLeft, code, modifiers, key)) {
                     keyState.rollLeft = 0;
-                } else if (Binding.matchKey(b.keyRollRight, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyRollRight, code, modifiers, key)) {
                     keyState.rollRight = 0;
-                } else if (Binding.matchKey(b.keyPitchUp, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyPitchUp, code, modifiers, key)) {
                     keyState.pitchUp = 0;
-                } else if (Binding.matchKey(b.keyPitchDown, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyPitchDown, code, modifiers, key)) {
                     keyState.pitchDown = 0;
-                } else if (Binding.matchKey(b.keyYawLeft, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyYawLeft, code, modifiers, key)) {
                     keyState.yawLeft = 0;
-                } else if (Binding.matchKey(b.keyYawRight, code, modifiers)) {
+                } else if (Binding.matchKey(b.keyYawRight, code, modifiers, key)) {
                     keyState.yawRight = 0;
                 }
             }
 
-            if (Binding.matchKey(b.boostMove, code, modifiers)) {
+            if (Binding.matchKey(b.boostMove, code, modifiers, key)) {
                 keyState.boostMove = 0;
             }
         }

src/mol-plugin/behavior/dynamic/camera.ts

@@ -169,14 +169,14 @@ export const CameraControls = PluginBehavior.create<CameraControlsProps>({
     category: 'interaction',
     ctor: class extends PluginBehavior.Handler<CameraControlsProps> {
         register(): void {
-            this.subscribeObservable(this.ctx.behaviors.interaction.key, ({ code, modifiers }) => {
+            this.subscribeObservable(this.ctx.behaviors.interaction.key, ({ code, key, modifiers }) => {
                 if (!this.ctx.canvas3d) return;
 
                 // include defaults for backwards state compatibility
                 const b = { ...DefaultCameraControlsBindings, ...this.params.bindings };
                 const p = this.ctx.canvas3d.props.trackball;
 
-                if (Binding.matchKey(b.keySpinAnimation, code, modifiers)) {
+                if (Binding.matchKey(b.keySpinAnimation, code, modifiers, key)) {
                     const name = p.animate.name !== 'spin' ? 'spin' : 'off';
                     if (name === 'off') {
                         this.ctx.canvas3d.setProps({
@@ -191,7 +191,7 @@ export const CameraControls = PluginBehavior.create<CameraControlsProps>({
                     }
                 }
 
-                if (Binding.matchKey(b.keyRockAnimation, code, modifiers)) {
+                if (Binding.matchKey(b.keyRockAnimation, code, modifiers, key)) {
                     const name = p.animate.name !== 'rock' ? 'rock' : 'off';
                     if (name === 'off') {
                         this.ctx.canvas3d.setProps({
@@ -206,7 +206,7 @@ export const CameraControls = PluginBehavior.create<CameraControlsProps>({
                     }
                 }
 
-                if (Binding.matchKey(b.keyToggleFlyMode, code, modifiers)) {
+                if (Binding.matchKey(b.keyToggleFlyMode, code, modifiers, key)) {
                     const flyMode = !p.flyMode;
 
                     this.ctx.canvas3d.setProps({
@@ -218,7 +218,7 @@ export const CameraControls = PluginBehavior.create<CameraControlsProps>({
                     }
                 }
 
-                if (Binding.matchKey(b.keyResetView, code, modifiers)) {
+                if (Binding.matchKey(b.keyResetView, code, modifiers, key)) {
                     PluginCommands.Camera.Reset(this.ctx, {});
                 }
             });

src/mol-util/binding.ts

@@ -38,8 +38,8 @@ namespace Binding {
         return binding.triggers.some(t => Trigger.match(t, buttons, modifiers));
     }
 
-    export function matchKey(binding: Binding, code: KeyCode, modifiers: ModifiersKeys) {
-        return binding.triggers.some(t => Trigger.matchKey(t, code, modifiers));
+    export function matchKey(binding: Binding, code: KeyCode, modifiers: ModifiersKeys, key: string) {
+        return binding.triggers.some(t => Trigger.matchKey(t, code, modifiers, key));
     }
 
     export function formatTriggers(binding: Binding) {
@@ -78,14 +78,15 @@ namespace Binding {
                 (!m || ModifiersKeys.areEqual(m, modifiers));
         }
 
-        export function matchKey(trigger: Trigger, code: KeyCode, modifiers: ModifiersKeys): boolean {
+        export function matchKey(trigger: Trigger, code: KeyCode, modifiers: ModifiersKeys, key: string): boolean {
             const { modifiers: m, code: c } = trigger;
             return c !== undefined &&
                 (c === code || (
                     c.length === 1 &&
                     code.length === 4 &&
                     code.startsWith('Key') &&
-                    code[3] === c.toUpperCase()
+                    !!key && key.length === 1 &&
+                    key.toUpperCase() === c.toUpperCase()
                 )) &&
                 (!m || ModifiersKeys.areEqual(m, modifiers));
         }