Shortcuts patch (#117)

* Common escape button for exit from creating/groupping/merging/pasting/aam
* Switch outside/keyframe shortkeys

cvat/apps/engine/static/engine/js/annotationUI.js

@@ -183,7 +183,13 @@ function buildAnnotationUI(job, shapeData, loadJobEvent) {
     setupSettingsWindow();
     setupMenu(job, shapeCollectionModel, annotationParser, aamModel, playerModel, historyModel);
     setupFrameFilters();
-    setupShortkeys(shortkeys);
+    setupShortkeys(shortkeys, {
+        aam: aamModel,
+        shapeCreator: shapeCreatorModel,
+        shapeMerger: shapeMergerModel,
+        shapeGrouper: shapeGrouperModel,
+        shapeBuffer: shapeBufferModel
+    });
 
     $(window).on('click', function(event) {
         Logger.updateUserActivityTimer();
@@ -304,7 +310,7 @@ function setupFrameFilters() {
 }
 
 
-function setupShortkeys(shortkeys) {
+function setupShortkeys(shortkeys, models) {
     let annotationMenu = $('#annotationMenu');
     let settingsWindow = $('#settingsWindow');
     let helpWindow = $('#helpWindow');
@@ -347,9 +353,30 @@ function setupShortkeys(shortkeys) {
         return false;
     });
 
+    let cancelModeHandler = Logger.shortkeyLogDecorator(function() {
+        switch (window.cvat.mode) {
+        case 'aam':
+            models.aam.switchAAMMode();
+            break;
+        case 'creation':
+            models.shapeCreator.switchCreateMode(true);
+            break;
+        case 'merge':
+            models.shapeMerger.cancel();
+            break;
+        case 'groupping':
+            models.shapeGrouper.cancel();
+            break
+        case 'paste':
+            models.shapeBuffer.switchPaste();
+        }
+        return false;
+    });
+
     Mousetrap.bind(shortkeys["open_help"].value, openHelpHandler, 'keydown');
     Mousetrap.bind(shortkeys["open_settings"].value, openSettingsHandler, 'keydown');
     Mousetrap.bind(shortkeys["save_work"].value, saveHandler, 'keydown');
+    Mousetrap.bind(shortkeys["cancel_mode"].value, cancelModeHandler, 'keydown');
 }
 
 

cvat/apps/engine/static/engine/js/shapeCollection.js

@@ -146,6 +146,22 @@ class ShapeCollectionModel extends Listener {
         }
     }
 
+    // Common code for switchActiveOccluded(), switchActiveKeyframe(), switchActiveLock() and switchActiveOutside()
+    _selectActive() {
+        let shape = null;
+        if (this._activeAAMShape) {
+            shape = this._activeAAMShape;
+        }
+        else {
+            this.selectShape(this._lastPos, false);
+            if (this._activeShape) {
+                shape = this._activeShape;
+            }
+        }
+
+        return shape;
+    }
+
     colorsByGroup(groupId) {
         // If group id of shape is 0 (default value), then shape not contained in a group
         if (!groupId) {
@@ -594,16 +610,7 @@ class ShapeCollectionModel extends Listener {
     }
 
     switchActiveLock() {
-        let shape = null;
+        let shape = this._selectActive();
-        if (this._activeAAMShape) {
-            shape = this._activeAAMShape;
-        }
-        else {
-            this.selectShape(this._lastPos, false);
-            if (this._activeShape) {
-                shape = this._activeShape;
-            }
-        }
 
         if (shape) {
             shape.switchLock();
@@ -637,30 +644,30 @@ class ShapeCollectionModel extends Listener {
     }
 
     switchActiveOccluded() {
-        let shape = null;
+        let shape = this._selectActive();
-        if (this._activeAAMShape) {
+        if (shape && !shape.lock) {
-            shape = this._activeAAMShape;
+            shape.switchOccluded(window.cvat.player.frames.current);
-        }
-        else {
-            this.selectShape(this._lastPos, false);
-            if (this._activeShape && !this._activeShape.lock) {
-                shape = this._activeShape;
-            }
         }
+    }
 
-        if (shape) {
+    switchActiveKeyframe() {
-            shape.switchOccluded(window.cvat.player.frames.current);
+        let shape = this._selectActive();
+        if (shape && shape.type === 'interpolation_box' && !shape.lock) {
+            shape.switchKeyFrame(window.cvat.player.frames.current);
         }
     }
 
-    switchActiveHide() {
+    switchActiveOutside() {
-        if (this._activeAAMShape) {
+        let shape = this._selectActive();
-            return;
+        if (shape && shape.type === 'interpolation_box' && !shape.lock) {
+            shape.switchOutside(window.cvat.player.frames.current);
         }
+    }
 
-        this.selectShape(this._lastPos, false);
+    switchActiveHide() {
-        if (this._activeShape) {
+        let shape = this._selectActive();
-            this._activeShape.switchHide();
+        if (shape) {
+            shape.switchHide();
         }
     }
 
@@ -822,6 +829,14 @@ class ShapeCollectionController {
                 this.switchActiveOccluded();
             }.bind(this));
 
+            let switchActiveKeyframeHandler = Logger.shortkeyLogDecorator(function() {
+                this.switchActiveKeyframe();
+            }.bind(this));
+
+            let switchActiveOutsideHandler = Logger.shortkeyLogDecorator(function() {
+                this.switchActiveOutside();
+            }.bind(this));
+
             let switchHideHandler = Logger.shortkeyLogDecorator(function() {
                 if (!window.cvat.mode || window.cvat.mode === 'aam') {
                     this._model.switchActiveHide();
@@ -882,6 +897,8 @@ class ShapeCollectionController {
             Mousetrap.bind(shortkeys["switch_lock_property"].value, switchLockHandler.bind(this), 'keydown');
             Mousetrap.bind(shortkeys["switch_all_lock_property"].value, switchAllLockHandler.bind(this), 'keydown');
             Mousetrap.bind(shortkeys["switch_occluded_property"].value, switchOccludedHandler.bind(this), 'keydown');
+            Mousetrap.bind(shortkeys["switch_active_keyframe"].value, switchActiveKeyframeHandler.bind(this), 'keydown');
+            Mousetrap.bind(shortkeys["switch_active_outside"].value, switchActiveOutsideHandler.bind(this), 'keydown');
             Mousetrap.bind(shortkeys["switch_hide_mode"].value, switchHideHandler.bind(this), 'keydown');
             Mousetrap.bind(shortkeys["switch_all_hide_mode"].value, switchAllHideHandler.bind(this), 'keydown');
             Mousetrap.bind(shortkeys["change_default_label"].value, switchDefaultLabelHandler.bind(this), 'keydown');
@@ -902,6 +919,18 @@ class ShapeCollectionController {
         }
     }
 
+    switchActiveKeyframe() {
+        if (!window.cvat.mode) {
+            this._model.switchActiveKeyframe();
+        }
+    }
+
+    switchActiveOutside() {
+        if (!window.cvat.mode) {
+            this._model.switchActiveOutside();
+        }
+    }
+
     switchAllLock() {
         if (!window.cvat.mode || window.cvat.mode === 'aam') {
             this._model.switchAllLock();

cvat/apps/engine/static/engine/js/shapeCreator.js

@@ -136,15 +136,7 @@ class ShapeCreatorController {
                 this.switchCreateMode(false);
             }.bind(this));
 
-            let closeDrawHandler = Logger.shortkeyLogDecorator(function(e) {
-                e.preventDefault();
-                if (this._model.createMode) {
-                    this.switchCreateMode(true);
-                }
-            }.bind(this));
-
             Mousetrap.bind(shortkeys["switch_draw_mode"].value, switchDrawHandler.bind(this), 'keydown');
-            Mousetrap.bind(shortkeys["cancel_draw_mode"].value, closeDrawHandler.bind(this), 'keydown');
         }
     }
 
@@ -195,8 +187,7 @@ class ShapeCreatorView {
 
         let shortkeys = window.cvat.config.shortkeys;
         this._createButton.attr('title', `
-            ${shortkeys['switch_draw_mode'].view_value} - ${shortkeys['switch_draw_mode'].description}` + `\n` +
+            ${shortkeys['switch_draw_mode'].view_value} - ${shortkeys['switch_draw_mode'].description}`);
-            `${shortkeys['cancel_draw_mode'].view_value} - ${shortkeys['cancel_draw_mode'].description}`);
 
         this._labelSelector.attr('title', `
             ${shortkeys['change_default_label'].view_value} - ${shortkeys['change_default_label'].description}`);

cvat/apps/engine/static/engine/js/shapeGrouper.js

@@ -109,12 +109,6 @@ class ShapeGrouperController {
                 this.switch();
             }.bind(this));
 
-            let cancelGrouperHandler = Logger.shortkeyLogDecorator(function() {
-                if (this._model.active) {
-                    this._model.cancel();
-                }
-            }.bind(this));
-
             let resetGroupHandler = Logger.shortkeyLogDecorator(function() {
                 if (this._model.active) {
                     this._model.reset();
@@ -124,7 +118,6 @@ class ShapeGrouperController {
             }.bind(this));
 
             Mousetrap.bind(shortkeys["switch_group_mode"].value, switchGrouperHandler.bind(this), 'keydown');
-            Mousetrap.bind(shortkeys["cancel_group_mode"].value, cancelGrouperHandler.bind(this), 'keydown');
             Mousetrap.bind(shortkeys["reset_group"].value, resetGroupHandler.bind(this), 'keydown');
         }
     }
@@ -160,7 +153,6 @@ class ShapeGrouperView {
 
         this._groupShapesButton.attr('title', `
             ${shortkeys['switch_group_mode'].view_value} - ${shortkeys['switch_group_mode'].description}` + `\n` +
-            `${shortkeys['cancel_group_mode'].view_value} - ${shortkeys['cancel_group_mode'].description}` + `\n` +
             `${shortkeys['reset_group'].view_value} - ${shortkeys['reset_group'].description}`);
 
         grouperModel.subscribe(this);

cvat/apps/engine/static/engine/js/shapeMerger.js

@@ -35,7 +35,6 @@ class ShapeMergerModel extends Listener {
         }
     }
 
-
     start() {
         if (!window.cvat.mode) {
             window.cvat.mode = 'merge';
@@ -225,14 +224,7 @@ class ShapeMergerController {
                 this.switch();
             }.bind(this));
 
-            let cancelMergeHandler = Logger.shortkeyLogDecorator(function() {
-                if (this._model.mergeMode) {
-                    this._model.cancel();
-                }
-            }.bind(this));
-
             Mousetrap.bind(shortkeys["switch_merge_mode"].value, switchMergeHandler.bind(this), 'keydown');
-            Mousetrap.bind(shortkeys["cancel_merge_mode"].value, cancelMergeHandler.bind(this), 'keydown');
         }
     }
 
@@ -259,8 +251,7 @@ class ShapeMergerView {
 
         let shortkeys = window.cvat.config.shortkeys;
         this._mergeButton.attr('title', `
-            ${shortkeys['switch_merge_mode'].view_value} - ${shortkeys['switch_merge_mode'].description}` + `\n` +
+            ${shortkeys['switch_merge_mode'].view_value} - ${shortkeys['switch_merge_mode'].description}`);
-            `${shortkeys['cancel_merge_mode'].view_value} - ${shortkeys['cancel_merge_mode'].description}`);
 
         model.subscribe(this);
     }

cvat/apps/engine/static/engine/js/userConfig.js

@@ -36,36 +36,18 @@ class Config {
                 description: "start draw / stop draw"
             },
 
-            cancel_draw_mode: {
-                value: "alt+n",
-                view_value: "Alt + N",
-                description: "close draw mode without create"
-            },
-
             switch_merge_mode: {
                 value: "m",
                 view_value: "M",
                 description: "start merge / apply changes"
             },
 
-            cancel_merge_mode: {
-                value: "alt+m",
-                view_value: "Alt + M",
-                description: "close merge mode without apply the merge"
-            },
-
             switch_group_mode: {
                 value: "g",
                 view_value: "G",
                 description: "start group / apply changes"
             },
 
-            cancel_group_mode: {
-                value: "alt+g",
-                view_value: "Alt + G",
-                description: "close group mode without changes"
-            },
-
             reset_group: {
                 value: "shift+g",
                 view_value: "Shift + G",
@@ -114,6 +96,18 @@ class Config {
                 description: "switch hide mode for active shape"
             },
 
+            switch_active_keyframe: {
+                value: "k",
+                view_value: "K",
+                description: "switch keyframe property for active shape"
+            },
+
+            switch_active_outside: {
+                value: "o",
+                view_value: "O",
+                description: "switch outside property for active shape"
+            },
+
             switch_all_hide_mode: {
                 value: "t h",
                 view_value: "T + H",
@@ -281,6 +275,12 @@ class Config {
                 view_value: "Ctrl + Shift + Z / Ctrl + Y",
                 description: "redo"
             },
+
+            cancel_mode: {
+                value: 'esc',
+                view_value: "Esc",
+                description: "cancel active mode"
+            }
         };
 
         if (window.cvat && window.cvat.job && window.cvat.job.z_order) {