Shortcut to focus the "find label" input field

resources/assets/js/annotations/annotatorContainer.vue

@@ -87,6 +87,7 @@ export default {
             userUpdatedVolareResolution: false,
             userId: null,
             crossOriginError: false,
+            focusInputFindlabel: false,
         };
     },
     computed: {
@@ -596,7 +597,18 @@ export default {
         selectLastAnnotation() {
             let lastAnnotation = this.annotations.reduce((lastAnnotated, a) => a.id > lastAnnotated.id ? a : lastAnnotated, { id: 0 });
             this.handleSelectAnnotation(lastAnnotation);
+        },
+        openSidebarLabels() { 
+            this.$refs.sidebar.$emit('open', 'labels');
+           this.setFocusInputFindLabel()
+        },
+        setFocusInputFindLabel(){
+            this.focusInputFindlabel = false;
+            this.$nextTick(() => {
+                this.focusInputFindlabel = true;
+            });
         }
+
     },
     watch: {
         async imageId(id) {
@@ -747,6 +759,8 @@ export default {
                 this.openTab = openTab;
             }
         }
+
+        Keyboard.on('control+k', this.openSidebarLabels, 0, this.listenerSet);
 
         Keyboard.on('C', this.selectLastAnnotation, 0, this.listenerSet);
     },

resources/assets/js/annotations/components/labelsTab.vue

@@ -25,6 +25,12 @@ export default {
             selectedLabel: null,
         };
     },
+    props: {
+        focusInput:{
+            type: Boolean,
+            default: false,
+        }
+    },
     computed: {
         plugins() {
             return plugins;

resources/assets/js/label-trees/components/labelTrees.vue

@@ -2,7 +2,7 @@
     <div class="label-trees">
         <div v-if="typeahead || clearable" class="label-trees__head">
             <button v-if="clearable" @click="clear" class="btn btn-default" title="Clear selected labels" type="button"><span class="fa fa-times fa-fw" aria-hidden="true"></span></button>
-            <typeahead v-if="typeahead" :items="labels" more-info="tree.versionedName" @select="handleSelect" placeholder="Find label"></typeahead>
+            <typeahead ref="typeaheadInput" v-if="typeahead" :items="labels" more-info="tree.versionedName" @select="handleSelect" placeholder="Find label"></typeahead>
         </div>
         <div class="label-trees__body">
             <label-tree v-if="hasFavourites" name="Favourites" :labels="favourites" :show-favourites="showFavourites" :flat="true" :showFavouriteShortcuts="true" :collapsible="collapsible" @select="handleSelect" @deselect="handleDeselect" @remove-favourite="handleRemoveFavourite"></label-tree>
@@ -15,6 +15,7 @@
 import Keyboard from '../../core/keyboard';
 import LabelTree from './labelTree';
 import Typeahead from './labelTypeahead';
+import Events from '../../core/events';
 
 /**
  * A component that displays a list of label trees.
@@ -73,6 +74,10 @@ export default {
             type: String,
             default: 'default',
         },
+        focusInput:{
+            type: Boolean,
+            default: false,
+        }
     },
     computed: {
         localeCompareSupportsLocales() {
@@ -192,7 +197,14 @@ export default {
                 });
             },
         },
+        focusInput(){
+            if(this.focusInput){
+                this.$refs.typeaheadInput.$el.querySelector('input').focus();
+            }
+        }
+
     },
+
     mounted() {
         if (this.showFavourites) {
             let favouriteIds = JSON.parse(localStorage.getItem(this.favouriteStorageKey));
@@ -222,6 +234,9 @@ export default {
             }
             bindFavouriteKey('0', 9);
         }
+        Events.$on('callFunctionFocustypeahead', () => {
+            this.focusTypeahead();
+        });        
     },
 };
 </script>

resources/assets/js/videos/videoContainer.vue

@@ -99,6 +99,7 @@ export default {
             swappingLabel: false,
             disableJobTracking: false,
             supportsJumpByFrame: false,
+            focusInputFindlabel: false,
         };
     },
     computed: {
@@ -677,6 +678,16 @@ export default {
         selectLastAnnotation() {
             let lastAnnotation = this.annotations.reduce((lastAnnotated, a) => a.id > lastAnnotated.id ? a : lastAnnotated, { id: 0 });
             this.selectAnnotations([lastAnnotation], this.selectedAnnotations, lastAnnotation.startFrame);
+        },
+        openSidebarLabels() {
+            this.$refs.sidebar.$emit('open', 'labels');
+            this.setFocusInputFindLabel()
+        },
+        setFocusInputFindLabel(){
+            this.focusInputFindlabel = false;
+            this.$nextTick(() => {
+                this.focusInputFindlabel = true;
+            });
         }
     },
     watch: {
@@ -742,6 +753,17 @@ export default {
         if ("requestVideoFrameCallback" in HTMLVideoElement.prototype) {
             this.supportsJumpByFrame = true;
         }
+
+        Events.$on('focusTypeaheadEvent', () => {
+            this.focusInputFindlabel = false;
+            this.$nextTick(() => {
+                this.focusInputFindlabel = true;
+            });
+            this.focusInputFindlabel = false;
+        });
+
+        Keyboard.on('control+k', this.openSidebarLabels, 0, this.listenerSet);
+
     },
     mounted() {
         // Wait for the sub-components to register their event listeners before

resources/views/annotations/show.blade.php

@@ -105,6 +105,7 @@
         ref="sidebar"
         :open-tab="openTab"
         :toggle-on-keyboard="true"
+        :focus-input="focusInputFindlabel"
         v-on:open="handleOpenedTab"
         v-on:close="handleClosedTab"
         v-cloak>

resources/views/annotations/show/tabs/labels.blade.php

@@ -1,8 +1,8 @@
 <sidebar-tab name="labels" icon="tags" title="Label trees">
-    <labels-tab v-on:select="handleSelectedLabel" v-cloak inline-template>
+    <labels-tab v-on:select="handleSelectedLabel" :focus-input="focusInputFindlabel" v-cloak inline-template>
         <div class="labels-tab">
             <div class="labels-tab__trees">
-                <label-trees :trees="labelTrees" :show-favourites="true" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
+                <label-trees :trees="labelTrees" :show-favourites="true" :focus-input="focusInput" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
             </div>
             <div class="labels-tab__plugins">
                 @mixin('annotationsLabelsTab')

resources/views/manual/tutorials/annotations/shortcuts.blade.php

@@ -127,6 +127,10 @@
                     <td><kbd>c</kbd></td>
                     <td>Select last created annotation</td>
                 </tr>
+                <tr>
+                    <td><kbd>Ctrl</kbd>+<kbd>k</kbd></td>
+                    <td>Open label trees sidebar and focus the find label input field</td>
+                </tr>
             </tbody>
         </table>
 

resources/views/manual/tutorials/videos/shortcuts.blade.php

@@ -119,6 +119,10 @@
                     <td><kbd>c</kbd></td>
                     <td>Select last created annotation</td>
                 </tr>
+                <tr>
+                    <td><kbd>Ctrl</kbd>+<kbd>k</kbd></td>
+                    <td>Open label trees sidebar and focus the find label input field</td>
+                </tr>
             </tbody>
         </table>
 

resources/views/videos/show/sidebar-labels.blade.php

@@ -1,7 +1,7 @@
 <sidebar-tab name="labels" icon="tags" title="Label trees">
     <div class="labels-tab">
         <div class="labels-tab__trees">
-            <label-trees :trees="labelTrees" :show-favourites="true" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
+            <label-trees :trees="labelTrees" :focus-input="focusInputFindlabel" :show-favourites="true" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
         </div>
     </div>
 </sidebar-tab>