Add keyboard shortcuts for creating annotation + selecting type

Author: mvandenburgh

histomicsui/web_client/templates/panels/annotationSelector.pug

@@ -76,6 +76,7 @@ block content
       input#h-toggle-interactive(type='checkbox', checked=interactiveMode)
       | Interactive
     if accessLevel >= writeAccessLevel
-      button.btn.btn-sm.btn-primary.h-create-annotation
-        | #[span.icon-plus-squared] New
+      label(title='Create a new annotation. Keyboard shortcut: n')
+        button.btn.btn-sm.btn-primary.h-create-annotation
+          | #[span.icon-plus-squared] New
     .clearfix

histomicsui/web_client/templates/panels/drawWidget.pug

@@ -15,27 +15,27 @@ block content
   .btn-group.btn-justified.btn-group-sm.h-draw-tools
     .btn-group.btn-group-sm
       button.h-draw.btn.btn-default(
-        type='button', data-type='point', data-toggle='tooltip', title='Draw a new point', class=drawingType === 'point' ? 'active' : null)
+        type='button', data-type='point', data-toggle='tooltip', title='Draw a new point (keyboard shortcut: o)', class=drawingType === 'point' ? 'active' : null)
         | #[span.icon-circle]Point
     .btn-group.btn-group-sm
       button.h-draw.btn.btn-default(
-        type='button', data-type='rectangle', data-toggle='tooltip', title='Draw a new rectangle', class=drawingType === 'rectangle' ? 'active' : null)
+        type='button', data-type='rectangle', data-toggle='tooltip', title='Draw a new rectangle (keyboard shortcut: r)', class=drawingType === 'rectangle' ? 'active' : null)
         | #[span.icon-check-empty]Rectangle
     .btn-group.btn-group-sm
       button.h-draw.btn.btn-default(
-        type='button', data-type='ellipse', data-toggle='tooltip', title='Draw a new ellipse', class=drawingType === 'ellipse' ? 'active' : null)
+        type='button', data-type='ellipse', data-toggle='tooltip', title='Draw a new ellipse (keyboard shortcut: i)', class=drawingType === 'ellipse' ? 'active' : null)
         | #[span.icon-circle-empty.flattenicon]Ellipse
     .btn-group.btn-group-sm
       button.h-draw.btn.btn-default(
-        type='button', data-type='circle', data-toggle='tooltip', title='Draw a new circle', class=drawingType === 'circle' ? 'active' : null)
+        type='button', data-type='circle', data-toggle='tooltip', title='Draw a new circle (keyboard shortcut: c)', class=drawingType === 'circle' ? 'active' : null)
         | #[span.icon-circle-empty]Circle
     .btn-group.btn-group-sm
       button.h-draw.btn.btn-default(
-        type='button', data-type='polygon', data-toggle='tooltip', title='Draw a new polygon', class=drawingType === 'polygon' ? 'active' : null)
+        type='button', data-type='polygon', data-toggle='tooltip', title='Draw a new polygon (keyboard shortcut: p)', class=drawingType === 'polygon' ? 'active' : null)
         | #[span.icon-draw-polygon]Polygon
     .btn-group.btn-group-sm
       button.h-draw.btn.btn-default(
-        type='button', data-type='line', data-toggle='tooltip', title='Draw a new line', class=drawingType === 'line' ? 'active' : null)
+        type='button', data-type='line', data-toggle='tooltip', title='Draw a new line (keyboard shortcut: l)', class=drawingType === 'line' ? 'active' : null)
         | #[span.icon-pencil]Line
 
   if elements.length

histomicsui/web_client/views/body/ImageView.js

@@ -1103,6 +1103,65 @@ var ImageView = View.extend({
             case 's':
                 this.annotationSelector.selectAnnotationByRegion();
                 break;
+            case 'n':
+                if (!this.annotationSelector._activeAnnotation) {
+                    this.annotationSelector.createAnnotation();
+                }
+                break;
+            case 'o':
+                if (this.annotationSelector._activeAnnotation) {
+                    if (this.drawWidget._drawingType === 'point') {
+                        this.drawWidget.cancelDrawMode();
+                    } else {
+                        this.drawWidget.drawElement(undefined, 'point');
+                    }
+                }
+                break;
+            case 'r':
+                if (this.annotationSelector._activeAnnotation) {
+                    if (this.drawWidget._drawingType === 'rectangle') {
+                        this.drawWidget.cancelDrawMode();
+                    } else {
+                        this.drawWidget.drawElement(undefined, 'rectangle');
+                    }
+                }
+                break;
+            case 'i':
+                if (this.annotationSelector._activeAnnotation) {
+                    if (this.drawWidget._drawingType === 'ellipse') {
+                        this.drawWidget.cancelDrawMode();
+                    } else {
+                        this.drawWidget.drawElement(undefined, 'ellipse');
+                    }
+                }
+                break;
+            case 'c':
+                if (this.annotationSelector._activeAnnotation) {
+                    if (this.drawWidget._drawingType === 'circle') {
+                        this.drawWidget.cancelDrawMode();
+                    } else {
+                        this.drawWidget.drawElement(undefined, 'circle');
+                    }
+                }
+                break;
+            case 'p':
+                if (this.annotationSelector._activeAnnotation) {
+                    if (this.drawWidget._drawingType === 'polygon') {
+                        this.drawWidget.cancelDrawMode();
+                    } else {
+                        this.drawWidget.drawElement(undefined, 'polygon');
+                    }
+                }
+                break;
+            case 'l':
+                if (this.annotationSelector._activeAnnotation) {
+                    if (this.drawWidget._drawingType === 'line') {
+                        this.drawWidget.cancelDrawMode();
+                    } else {
+                        this.drawWidget.drawElement(undefined, 'line');
+                    }
+                }
+                break;
         }
     },