Skip to content

Improved feature: common borders #1016

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 30, 2019
Merged

Improved feature: common borders #1016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e6a6e7
Auto borders -> common borders, invisible when do not edit or draw, d…
bsekachev Dec 30, 2019
067305d
Reset sticker after clicking outside
bsekachev Dec 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 16 additions & 9 deletions cvat/apps/engine/static/engine/js/polyshapeEditor.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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