Improving Keyboard Shortcuts form

Packages/ohif-hotkeys/client/components/form.js

@@ -33,7 +33,16 @@ Template.hotkeysForm.onCreated(() => {
     };
 
     const rg = (start, end) => _.range(start, end + 1);
-    instance.allowedKeys = _.union(rg(32, 40), rg(48, 57), rg(65, 90), rg(112, 121), [123]);
+    instance.allowedKeys = _.union(
+        [8, 13, 27, 32, 46], // BACKSPACE, ENTER, ESCAPE, SPACE, DELETE
+        [12, 106, 107, 109, 110, 111], // Numpad keys
+        rg(219, 221), // [\]
+        rg(186, 191), // ;=,-./
+        rg(112, 130), // F1-F19
+        rg(33, 40), // arrow keys, home/end, pg dn/up
+        rg(48, 57), // 0-9
+        rg(65, 90) // A-Z
+    );
 
     instance.updateInputText = (event, displayPressedKey=false) => {
         const $target = $(event.currentTarget);
@@ -41,7 +50,7 @@ Template.hotkeysForm.onCreated(() => {
 
         if (displayPressedKey) {
             const specialKeyName = jQuery.hotkeys.specialKeys[event.which];
-            const keyName = specialKeyName || event.key;
+            const keyName = specialKeyName || String.fromCharCode(event.keyCode) || event.key;
             keysPressedArray.push(keyName.toUpperCase());
         }
 
@@ -91,6 +100,11 @@ Template.hotkeysForm.onCreated(() => {
 
 Template.hotkeysForm.events({
     'keydown .hotkey'(event, instance) {
+        // Prevent ESC key from propagating and closing the modal
+        if (event.keyCode === 27) {
+            event.stopPropagation();
+        }
+
         if (instance.allowedKeys.indexOf(event.keyCode) > -1) {
             instance.updateInputText(event, true);
             $(event.currentTarget).trigger('hotkeyChange');

Packages/ohif-viewerbase/client/lib/hotkeyUtils.js

@@ -35,7 +35,6 @@ Meteor.startup(function() {
         dragProbe: '',
         ellipticalRoi: '',
         rectangleRoi: '',
-        spine: '',
 
         // Viewport hotkeys
         flipH: 'H',
@@ -111,14 +110,13 @@ Meteor.startup(function() {
         zoom: 'Zoom',
         angle: 'Angle Measurement',
         dragProbe: 'Pixel Probe',
-        ellipticalRoi: 'Elliptical Probe',
-        rectangleRoi: 'Rectangle',
+        ellipticalRoi: 'Elliptical ROI',
+        rectangleRoi: 'Rectangle ROI',
         magnify: 'Magnify',
         annotate: 'Annotate',
         stackScroll: 'Scroll Stack',
         pan: 'Pan',
         length: 'Length Measurement',
-        spine: 'Spine Labels',
         wwwcRegion: 'W/L by Region'
     });