Skip to content

Commit b6d2e45

Browse files
bsekachevnmanovic
bsekachev
authored and
nmanovic
committed
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
1 parent d24dd74 commit b6d2e45

File tree

3 files changed

+44
-25
lines changed

3 files changed

+44
-25
lines changed

‎cvat/apps/engine/static/engine/js/polyshapeEditor.js

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ class PolyshapeEditorView {
124124
this._data = null;
125125

126126
this._frameContent = SVG.adopt($('#frameContent')[0]);
127-
this._autoBorderingCheckbox = $('#autoBorderingCheckbox');
127+
this._commonBordersCheckbox = $('#commonBordersCheckbox');
128128
this._originalShapePointsGroup = null;
129129
this._originalShapePoints = [];
130130
this._originalShape = null;
@@ -134,11 +134,13 @@ class PolyshapeEditorView {
134134
this._scale = window.cvat.player.geometry.scale;
135135
this._frame = window.cvat.player.frames.current;
136136

137-
this._autoBorderingCheckbox.on('change.shapeEditor', (e) => {
137+
this._commonBordersCheckbox.on('change.shapeEditor', (e) => {
138138
if (this._correctLine) {
139139
if (!e.target.checked) {
140-
this._borderSticker.disable();
141-
this._borderSticker = null;
140+
if (this._borderSticker) {
141+
this._borderSticker.disable();
142+
this._borderSticker = null;
143+
}
142144
} else {
143145
this._borderSticker = new BorderSticker(this._correctLine, this._frameContent,
144146
this._controller.currentShapes
@@ -311,7 +313,11 @@ class PolyshapeEditorView {
311313
x: e.detail.event.clientX,
312314
y: e.detail.event.clientY
313315
};
316+
314317
this._rescaleDrawPoints();
318+
if (this._borderSticker) {
319+
this._borderSticker.reset();
320+
}
315321
});
316322

317323
this._correctLine.on('drawstart', () => this._rescaleDrawPoints());
@@ -400,11 +406,12 @@ class PolyshapeEditorView {
400406
});
401407
}
402408

403-
this._autoBorderingCheckbox[0].disabled = false;
409+
this._commonBordersCheckbox.css('display', '').trigger('change.shapeEditor');
410+
this._commonBordersCheckbox.parent().css('display', '');
404411
$('body').on('keydown.shapeEditor', (e) => {
405412
if (e.ctrlKey && e.keyCode === 17) {
406-
this._autoBorderingCheckbox[0].checked = !this._borderSticker;
407-
this._autoBorderingCheckbox.trigger('change.shapeEditor');
413+
this._commonBordersCheckbox.prop('checked', !this._borderSticker);
414+
this._commonBordersCheckbox.trigger('change.shapeEditor');
408415
}
409416
});
410417
}
@@ -432,8 +439,8 @@ class PolyshapeEditorView {
432439
this._frameContent.off('contextmenu.polyshapeEditor');
433440

434441
$('body').off('keydown.shapeEditor');
435-
this._autoBorderingCheckbox[0].checked = false;
436-
this._autoBorderingCheckbox[0].disabled = true;
442+
this._commonBordersCheckbox.css('display', 'none');
443+
this._commonBordersCheckbox.parent().css('display', 'none');
437444
if (this._borderSticker) {
438445
this._borderSticker.disable();
439446
this._borderSticker = null;

‎cvat/apps/engine/static/engine/js/shapeCreator.js

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -194,9 +194,9 @@ class ShapeCreatorView {
194194
this._modeSelector = $('#shapeModeSelector');
195195
this._typeSelector = $('#shapeTypeSelector');
196196
this._polyShapeSizeInput = $('#polyShapeSize');
197-
this._autoBorderingCheckbox = $('#autoBorderingCheckbox');
197+
this._commonBordersCheckbox = $('#commonBordersCheckbox');
198198
this._frameContent = SVG.adopt($('#frameContent')[0]);
199-
this._frameText = SVG.adopt($("#frameText")[0]);
199+
this._frameText = SVG.adopt($('#frameText')[0]);
200200
this._playerFrame = $('#playerFrame');
201201
this._createButton.on('click', () => this._controller.switchCreateMode(false));
202202
this._drawInstance = null;
@@ -297,11 +297,13 @@ class ShapeCreatorView {
297297
}
298298
});
299299

300-
this._autoBorderingCheckbox.on('change.shapeCreator', (e) => {
300+
this._commonBordersCheckbox.on('change.shapeCreator', (e) => {
301301
if (this._drawInstance) {
302302
if (!e.target.checked) {
303-
this._borderSticker.disable();
304-
this._borderSticker = null;
303+
if (this._borderSticker) {
304+
this._borderSticker.disable();
305+
this._borderSticker = null;
306+
}
305307
} else {
306308
this._borderSticker = new BorderSticker(this._drawInstance, this._frameContent,
307309
this._controller.currentShapes, this._scale);
@@ -322,15 +324,16 @@ class ShapeCreatorView {
322324

323325
if (this._polyShapeSize) {
324326
let size = this._polyShapeSize;
325-
let sizeDecrement = function() {
326-
if (!--size) {
327+
const sizeDecrement = function sizeDecrement() {
328+
size -= 1;
329+
if (!size) {
327330
numberOfPoints = this._polyShapeSize;
328331
this._drawInstance.draw('done');
329332
}
330333
}.bind(this);
331334

332-
let sizeIncrement = function() {
333-
size ++;
335+
const sizeIncrement = function sizeIncrement() {
336+
size += 1;
334337
};
335338

336339
this._drawInstance.on('drawstart', sizeDecrement);
@@ -339,6 +342,12 @@ class ShapeCreatorView {
339342
}
340343
// Otherwise draw will stop by Ctrl + N press
341344

345+
this._drawInstance.on('drawpoint', () => {
346+
if (this._borderSticker) {
347+
this._borderSticker.reset();
348+
}
349+
});
350+
342351
// Callbacks for point scale
343352
this._drawInstance.on('drawstart', this._rescaleDrawPoints.bind(this));
344353
this._drawInstance.on('drawpoint', this._rescaleDrawPoints.bind(this));
@@ -359,11 +368,12 @@ class ShapeCreatorView {
359368
numberOfPoints ++;
360369
});
361370

362-
this._autoBorderingCheckbox[0].disabled = false;
371+
this._commonBordersCheckbox.css('display', '').trigger('change.shapeCreator');
372+
this._commonBordersCheckbox.parent().css('display', '');
363373
$('body').on('keydown.shapeCreator', (e) => {
364374
if (e.ctrlKey && e.keyCode === 17) {
365-
this._autoBorderingCheckbox[0].checked = !this._borderSticker;
366-
this._autoBorderingCheckbox.trigger('change.shapeCreator');
375+
this._commonBordersCheckbox.prop('checked', !this._borderSticker);
376+
this._commonBordersCheckbox.trigger('change.shapeCreator');
367377
}
368378
});
369379

@@ -403,8 +413,8 @@ class ShapeCreatorView {
403413
this._drawInstance.on('drawstop', () => {
404414
this._frameContent.off('mousedown.shapeCreator');
405415
this._frameContent.off('mousemove.shapeCreator');
406-
this._autoBorderingCheckbox[0].disabled = true;
407-
this._autoBorderingCheckbox[0].checked = false;
416+
this._commonBordersCheckbox.css('display', 'none');
417+
this._commonBordersCheckbox.parent().css('display', 'none');
408418
$('body').off('keydown.shapeCreator');
409419
if (this._borderSticker) {
410420
this._borderSticker.disable();

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,8 +193,10 @@
193193
<input type="radio" name="colorByRadio" id="colorByLabelRadio" class="settingsBox"/>
194194
</div>
195195
<div style="float: left; margin-left: 50px;" title="Press Ctrl to switch">
196-
<label style="margin-right: 10px;" for="autoBorderingCheckbox"> Auto bordering </label>
197-
<input type="checkbox" id="autoBorderingCheckbox" class="settingsBox" disabled/>
196+
<label style="display: none;">
197+
Common borders
198+
<input type="checkbox" id="commonBordersCheckbox" class="settingsBox" style="margin-left: 10px; display: none;"/>
199+
</label>
198200
</div>
199201
</td>
200202
</tr>

0 commit comments

Comments
 (0)