From cf871943f80dc40671a5711e18f2ca04d5925767 Mon Sep 17 00:00:00 2001 From: mmarkelov Date: Thu, 12 Dec 2019 16:26:49 +0300 Subject: [PATCH 1/3] Impove UX with creating new shape by shortkey --- .../engine/static/engine/js/shapeCreator.js | 65 +++++++++++-------- 1 file changed, 37 insertions(+), 28 deletions(-) diff --git a/cvat/apps/engine/static/engine/js/shapeCreator.js b/cvat/apps/engine/static/engine/js/shapeCreator.js index 78d3b1558c4..de262573bf0 100644 --- a/cvat/apps/engine/static/engine/js/shapeCreator.js +++ b/cvat/apps/engine/static/engine/js/shapeCreator.js @@ -79,7 +79,8 @@ class ShapeCreatorModel extends Listener { this._shapeCollection.update(); } - switchCreateMode(forceClose) { + switchCreateMode(forceClose, usingShortkey) { + this._usingShortkey = usingShortkey; // if parameter force (bool) setup to true, current result will not save if (!forceClose) { this._createMode = !this._createMode && window.cvat.mode == null; @@ -146,15 +147,15 @@ class ShapeCreatorController { let shortkeys = window.cvat.config.shortkeys; let switchDrawHandler = Logger.shortkeyLogDecorator(function() { - this.switchCreateMode(false); + this.switchCreateMode(false, true); }.bind(this)); Mousetrap.bind(shortkeys["switch_draw_mode"].value, switchDrawHandler.bind(this), 'keydown'); } } - switchCreateMode(force) { - this._model.switchCreateMode(force); + switchCreateMode(force, usingShortkey) { + this._model.switchCreateMode(force, usingShortkey); } setDefaultShapeType(type) { @@ -261,6 +262,23 @@ class ShapeCreatorView { this._polyShapeSizeInput.on('keydown', function(e) { e.stopPropagation(); }); + + this._playerFrame.on('mousemove.shapeCreatorAIM', (e) => { + if (!['polygon', 'polyline', 'points'].includes(this._type)) { + this._aimCoord = window.cvat.translate.point.clientToCanvas(this._frameContent.node, e.clientX, e.clientY); + if (this._aim) { + this._aim.x.attr({ + y1: this._aimCoord.y, + y2: this._aimCoord.y, + }); + + this._aim.y.attr({ + x1: this._aimCoord.x, + x2: this._aimCoord.x, + }); + } + } + }); } @@ -324,7 +342,6 @@ class ShapeCreatorView { } }); - this._frameContent.on('mousemove.shapeCreator', (e) => { if (e.shiftKey && ['polygon', 'polyline'].includes(this._type)) { if (lastPoint.x === null || lastPoint.y === null) { @@ -388,8 +405,7 @@ class ShapeCreatorView { }.bind(this)); } - - _create() { + _create(usingShortkey) { let sizeUI = null; switch(this._type) { case 'box': @@ -425,7 +441,7 @@ class ShapeCreatorView { this._controller.finish(box, this._type); } - this._controller.switchCreateMode(true); + this._controller.switchCreateMode(true, usingShortkey); }.bind(this)).on('drawupdate', (e) => { sizeUI = drawBoxSize.call(sizeUI, this._frameContent, this._frameText, e.target.getBBox()); }).on('drawcancel', () => { @@ -517,34 +533,27 @@ class ShapeCreatorView { this._mode = model.defaultMode; if (!['polygon', 'polyline', 'points'].includes(this._type)) { + if (!model._usingShortkey) { + this._aimCoord = { + x: 0, + y: 0 + }; + } this._drawAim(); - this._playerFrame.on('mousemove.shapeCreatorAIM', (e) => { - this._aimCoord = window.cvat.translate.point.clientToCanvas(this._frameContent.node, e.clientX, e.clientY); - if (this._aim) { - this._aim.x.attr({ - y1: this._aimCoord.y, - y2: this._aimCoord.y, - }); - - this._aim.y.attr({ - x1: this._aimCoord.x, - x2: this._aimCoord.x, - }); - } - }); } this._createButton.text("Stop Creation"); document.oncontextmenu = () => false; - this._create(); + this._create(model._usingShortkey); + if (!model._usingShortkey) { + this._aimCoord = { + x: 0, + y: 0 + }; + } } else { - this._playerFrame.off('mousemove.shapeCreatorAIM'); this._removeAim(); - this._aimCoord = { - x: 0, - y: 0 - }; this._cancel = true; this._createButton.text("Create Shape"); document.oncontextmenu = null; From 091ed1dd0973a9b14cb7dfe6a25df6659df34ad4 Mon Sep 17 00:00:00 2001 From: mmarkelov Date: Fri, 13 Dec 2019 09:48:04 +0300 Subject: [PATCH 2/3] Review fixes --- .../apps/engine/static/engine/js/shapeCreator.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/cvat/apps/engine/static/engine/js/shapeCreator.js b/cvat/apps/engine/static/engine/js/shapeCreator.js index de262573bf0..8d2f07a99be 100644 --- a/cvat/apps/engine/static/engine/js/shapeCreator.js +++ b/cvat/apps/engine/static/engine/js/shapeCreator.js @@ -114,6 +114,10 @@ class ShapeCreatorModel extends Listener { return this._createMode; } + get usingShortkey() { + return this._usingShortkey; + } + get defaultType() { return this._defaultType; } @@ -154,7 +158,7 @@ class ShapeCreatorController { } } - switchCreateMode(force, usingShortkey) { + switchCreateMode(force, usingShortkey = false) { this._model.switchCreateMode(force, usingShortkey); } @@ -533,7 +537,7 @@ class ShapeCreatorView { this._mode = model.defaultMode; if (!['polygon', 'polyline', 'points'].includes(this._type)) { - if (!model._usingShortkey) { + if (!model.usingShortkey) { this._aimCoord = { x: 0, y: 0 @@ -544,13 +548,7 @@ class ShapeCreatorView { this._createButton.text("Stop Creation"); document.oncontextmenu = () => false; - this._create(model._usingShortkey); - if (!model._usingShortkey) { - this._aimCoord = { - x: 0, - y: 0 - }; - } + this._create(model.usingShortkey); } else { this._removeAim(); From bb371b619c37f16c867064a6b95a480d5ca2e051 Mon Sep 17 00:00:00 2001 From: mmarkelov Date: Fri, 13 Dec 2019 09:52:45 +0300 Subject: [PATCH 3/3] Review fixes removing unnecessary param passing --- cvat/apps/engine/static/engine/js/shapeCreator.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cvat/apps/engine/static/engine/js/shapeCreator.js b/cvat/apps/engine/static/engine/js/shapeCreator.js index 8d2f07a99be..e688476244c 100644 --- a/cvat/apps/engine/static/engine/js/shapeCreator.js +++ b/cvat/apps/engine/static/engine/js/shapeCreator.js @@ -409,7 +409,7 @@ class ShapeCreatorView { }.bind(this)); } - _create(usingShortkey) { + _create() { let sizeUI = null; switch(this._type) { case 'box': @@ -445,7 +445,7 @@ class ShapeCreatorView { this._controller.finish(box, this._type); } - this._controller.switchCreateMode(true, usingShortkey); + this._controller.switchCreateMode(true); }.bind(this)).on('drawupdate', (e) => { sizeUI = drawBoxSize.call(sizeUI, this._frameContent, this._frameText, e.target.getBBox()); }).on('drawcancel', () => { @@ -548,7 +548,7 @@ class ShapeCreatorView { this._createButton.text("Stop Creation"); document.oncontextmenu = () => false; - this._create(model.usingShortkey); + this._create(); } else { this._removeAim();