Skip to content

Commit

Permalink
Improved feature: common borders (cvat-ai#1016)
Browse files Browse the repository at this point in the history 
* Auto borders -> common borders, invisible when do not edit or draw, don't reset state

* Reset sticker after clicking outside
  • Loading branch information
@bsekachev
bsekachev authored and Chris Lee-Messer committed Mar 5, 2020
1 parent 91f2d95 commit 0170957
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 25 deletions.
25 changes: 16 additions & 9 deletions cvat/apps/engine/static/engine/js/polyshapeEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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());
Expand Down Expand Up @@ -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');
}
});
}
Expand Down Expand Up @@ -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;
Expand Down
38 changes: 24 additions & 14 deletions cvat/apps/engine/static/engine/js/shapeCreator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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));
Expand All @@ -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');
}
});

Expand Down Expand Up @@ -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();
Expand Down
6 changes: 4 additions & 2 deletions cvat/apps/engine/templates/engine/annotation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<input type="checkbox" id="autoBorderingCheckbox" class="settingsBox" disabled/>
<label style="display: none;">
Common borders
<input type="checkbox" id="commonBordersCheckbox" class="settingsBox" style="margin-left: 10px; display: none;"/>
</label>
</div>
</td>
</tr>
Expand Down

0 comments on commit 0170957

Please sign in to comment.