Improved feature: common borders (#1016)

* Auto borders -> common borders, invisible when do not edit or draw, don't reset state

* Reset sticker after clicking outside

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();
+                    if (this._borderSticker) {
-                    this._borderSticker = null;
+                        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._commonBordersCheckbox.prop('checked', !this._borderSticker);
-                this._autoBorderingCheckbox.trigger('change.shapeEditor');
+                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._commonBordersCheckbox.css('display', 'none');
-        this._autoBorderingCheckbox[0].disabled = true;
+        this._commonBordersCheckbox.parent().css('display', 'none');
         if (this._borderSticker) {
             this._borderSticker.disable();
             this._borderSticker = null;

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();
+                    if (this._borderSticker) {
-                    this._borderSticker = null;
+                        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() {
+            const sizeDecrement = function sizeDecrement() {
-                if (!--size) {
+                size -= 1;
+                if (!size) {
                     numberOfPoints = this._polyShapeSize;
                     this._drawInstance.draw('done');
                 }
             }.bind(this);
 
-            let sizeIncrement = function() {
+            const sizeIncrement = function sizeIncrement() {
-                size ++;
+                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._commonBordersCheckbox.prop('checked', !this._borderSticker);
-                this._autoBorderingCheckbox.trigger('change.shapeCreator');
+                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._commonBordersCheckbox.css('display', 'none');
-            this._autoBorderingCheckbox[0].checked = false;
+            this._commonBordersCheckbox.parent().css('display', 'none');
             $('body').off('keydown.shapeCreator');
             if (this._borderSticker) {
                 this._borderSticker.disable();

cvat/apps/engine/templates/engine/annotation.html

@@ -193,8 +193,10 @@
                             <input type="radio" name="colorByRadio" id="colorByLabelRadio" class="settingsBox"/>
                         </div>
                         <div style="float: left; margin-left: 50px;" title="Press Ctrl to switch">
-                            <label style="margin-right: 10px;" for="autoBorderingCheckbox"> Auto bordering </label>
+                            <label style="display: none;">
-                            <input type="checkbox" id="autoBorderingCheckbox" class="settingsBox" disabled/>
+                                Common borders
+                                <input type="checkbox" id="commonBordersCheckbox" class="settingsBox" style="margin-left: 10px; display: none;"/>
+                            </label>
                         </div>
                     </td>
                 </tr>