diff --git a/cvat/apps/engine/static/engine/js/polyshapeEditor.js b/cvat/apps/engine/static/engine/js/polyshapeEditor.js index 7a30a7c1..942d10cd 100644 --- a/cvat/apps/engine/static/engine/js/polyshapeEditor.js +++ b/cvat/apps/engine/static/engine/js/polyshapeEditor.js @@ -124,7 +124,7 @@ class PolyshapeEditorView { this._data = null; this._frameContent = SVG.adopt($('#frameContent')[0]); - this._autoBorderingCheckbox = $('#autoBorderingCheckbox'); + this._commonBordersCheckbox = $('#commonBordersCheckbox'); this._originalShapePointsGroup = null; this._originalShapePoints = []; this._originalShape = null; @@ -134,11 +134,13 @@ class PolyshapeEditorView { this._scale = window.cvat.player.geometry.scale; this._frame = window.cvat.player.frames.current; - this._autoBorderingCheckbox.on('change.shapeEditor', (e) => { + this._commonBordersCheckbox.on('change.shapeEditor', (e) => { if (this._correctLine) { if (!e.target.checked) { - this._borderSticker.disable(); - this._borderSticker = null; + if (this._borderSticker) { + this._borderSticker.disable(); + this._borderSticker = null; + } } else { this._borderSticker = new BorderSticker(this._correctLine, this._frameContent, this._controller.currentShapes @@ -311,7 +313,11 @@ class PolyshapeEditorView { x: e.detail.event.clientX, y: e.detail.event.clientY }; + this._rescaleDrawPoints(); + if (this._borderSticker) { + this._borderSticker.reset(); + } }); this._correctLine.on('drawstart', () => this._rescaleDrawPoints()); @@ -400,11 +406,12 @@ class PolyshapeEditorView { }); } - this._autoBorderingCheckbox[0].disabled = false; + this._commonBordersCheckbox.css('display', '').trigger('change.shapeEditor'); + this._commonBordersCheckbox.parent().css('display', ''); $('body').on('keydown.shapeEditor', (e) => { if (e.ctrlKey && e.keyCode === 17) { - this._autoBorderingCheckbox[0].checked = !this._borderSticker; - this._autoBorderingCheckbox.trigger('change.shapeEditor'); + this._commonBordersCheckbox.prop('checked', !this._borderSticker); + this._commonBordersCheckbox.trigger('change.shapeEditor'); } }); } @@ -432,8 +439,8 @@ class PolyshapeEditorView { this._frameContent.off('contextmenu.polyshapeEditor'); $('body').off('keydown.shapeEditor'); - this._autoBorderingCheckbox[0].checked = false; - this._autoBorderingCheckbox[0].disabled = true; + this._commonBordersCheckbox.css('display', 'none'); + this._commonBordersCheckbox.parent().css('display', 'none'); if (this._borderSticker) { this._borderSticker.disable(); this._borderSticker = null; diff --git a/cvat/apps/engine/static/engine/js/shapeCreator.js b/cvat/apps/engine/static/engine/js/shapeCreator.js index a2b58b4f..247aa785 100644 --- a/cvat/apps/engine/static/engine/js/shapeCreator.js +++ b/cvat/apps/engine/static/engine/js/shapeCreator.js @@ -194,9 +194,9 @@ class ShapeCreatorView { this._modeSelector = $('#shapeModeSelector'); this._typeSelector = $('#shapeTypeSelector'); this._polyShapeSizeInput = $('#polyShapeSize'); - this._autoBorderingCheckbox = $('#autoBorderingCheckbox'); + this._commonBordersCheckbox = $('#commonBordersCheckbox'); this._frameContent = SVG.adopt($('#frameContent')[0]); - this._frameText = SVG.adopt($("#frameText")[0]); + this._frameText = SVG.adopt($('#frameText')[0]); this._playerFrame = $('#playerFrame'); this._createButton.on('click', () => this._controller.switchCreateMode(false)); this._drawInstance = null; @@ -297,11 +297,13 @@ class ShapeCreatorView { } }); - this._autoBorderingCheckbox.on('change.shapeCreator', (e) => { + this._commonBordersCheckbox.on('change.shapeCreator', (e) => { if (this._drawInstance) { if (!e.target.checked) { - this._borderSticker.disable(); - this._borderSticker = null; + if (this._borderSticker) { + this._borderSticker.disable(); + this._borderSticker = null; + } } else { this._borderSticker = new BorderSticker(this._drawInstance, this._frameContent, this._controller.currentShapes, this._scale); @@ -322,15 +324,16 @@ class ShapeCreatorView { if (this._polyShapeSize) { let size = this._polyShapeSize; - let sizeDecrement = function() { - if (!--size) { + const sizeDecrement = function sizeDecrement() { + size -= 1; + if (!size) { numberOfPoints = this._polyShapeSize; this._drawInstance.draw('done'); } }.bind(this); - let sizeIncrement = function() { - size ++; + const sizeIncrement = function sizeIncrement() { + size += 1; }; this._drawInstance.on('drawstart', sizeDecrement); @@ -339,6 +342,12 @@ class ShapeCreatorView { } // Otherwise draw will stop by Ctrl + N press + this._drawInstance.on('drawpoint', () => { + if (this._borderSticker) { + this._borderSticker.reset(); + } + }); + // Callbacks for point scale this._drawInstance.on('drawstart', this._rescaleDrawPoints.bind(this)); this._drawInstance.on('drawpoint', this._rescaleDrawPoints.bind(this)); @@ -359,11 +368,12 @@ class ShapeCreatorView { numberOfPoints ++; }); - this._autoBorderingCheckbox[0].disabled = false; + this._commonBordersCheckbox.css('display', '').trigger('change.shapeCreator'); + this._commonBordersCheckbox.parent().css('display', ''); $('body').on('keydown.shapeCreator', (e) => { if (e.ctrlKey && e.keyCode === 17) { - this._autoBorderingCheckbox[0].checked = !this._borderSticker; - this._autoBorderingCheckbox.trigger('change.shapeCreator'); + this._commonBordersCheckbox.prop('checked', !this._borderSticker); + this._commonBordersCheckbox.trigger('change.shapeCreator'); } }); @@ -403,8 +413,8 @@ class ShapeCreatorView { this._drawInstance.on('drawstop', () => { this._frameContent.off('mousedown.shapeCreator'); this._frameContent.off('mousemove.shapeCreator'); - this._autoBorderingCheckbox[0].disabled = true; - this._autoBorderingCheckbox[0].checked = false; + this._commonBordersCheckbox.css('display', 'none'); + this._commonBordersCheckbox.parent().css('display', 'none'); $('body').off('keydown.shapeCreator'); if (this._borderSticker) { this._borderSticker.disable(); diff --git a/cvat/apps/engine/templates/engine/annotation.html b/cvat/apps/engine/templates/engine/annotation.html index f8fd6719..b437e38a 100644 --- a/cvat/apps/engine/templates/engine/annotation.html +++ b/cvat/apps/engine/templates/engine/annotation.html @@ -193,8 +193,10 @@