Skip to content

Switch hide/lock property for all object with specified label #116

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 1 commit into from
Oct 4, 2018
Merged

Switch hide/lock property for all object with specified label #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
164 changes: 136 additions & 28 deletions cvat/apps/engine/static/engine/js/shapeCollection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -614,10 +614,12 @@ class ShapeCollectionModel extends Listener {
}
}

switchAllLock() {
switchObjectsLock(labelId) {
this.resetActive();
let value = true;
for (let shape of this._currentShapes) {

let shapes = Number.isInteger(labelId) ? this._currentShapes.filter((el) => el.model.label === labelId) : this._currentShapes;
for (let shape of shapes) {
if (shape.model.removed) continue;
value = value && shape.model.lock;
if (!value) break;
Expand All @@ -628,7 +630,7 @@ class ShapeCollectionModel extends Listener {
value: !value,
});

for (let shape of this._currentShapes) {
for (let shape of shapes) {
if (shape.model.removed) continue;
if (shape.model.lock === value) {
shape.model.switchLock();
Expand Down Expand Up @@ -664,12 +666,13 @@ class ShapeCollectionModel extends Listener {
}
}

switchAllHide() {
switchObjectsHide(labelId) {
this.resetActive();
let hiddenShape = true;
let hiddenText = true;

for (let shape of this._shapes) {
let shapes = Number.isInteger(labelId) ? this._shapes.filter((el) => el.label === labelId) : this._shapes;
for (let shape of shapes) {
if (shape.removed) continue;
hiddenShape = hiddenShape && shape.hiddenShape;

Expand All @@ -680,7 +683,7 @@ class ShapeCollectionModel extends Listener {

if (!hiddenShape) {
// any shape visible
for (let shape of this._shapes) {
for (let shape of shapes) {
if (shape.removed) continue;
hiddenText = hiddenText && shape.hiddenText;

Expand All @@ -691,7 +694,7 @@ class ShapeCollectionModel extends Listener {

if (!hiddenText) {
// any shape text visible
for (let shape of this._shapes) {
for (let shape of shapes) {
if (shape.removed) continue;
while (shape.hiddenShape || !shape.hiddenText) {
shape.switchHide();
Expand All @@ -700,7 +703,7 @@ class ShapeCollectionModel extends Listener {
}
else {
// all shape text invisible
for (let shape of this._shapes) {
for (let shape of shapes) {
if (shape.removed) continue;
while (!shape.hiddenShape) {
shape.switchHide();
Expand All @@ -710,7 +713,7 @@ class ShapeCollectionModel extends Listener {
}
else {
// all shapes invisible
for (let shape of this._shapes) {
for (let shape of shapes) {
if (shape.removed) continue;
while (shape.hiddenShape || shape.hiddenText) {
shape.switchHide();
Expand All @@ -719,6 +722,8 @@ class ShapeCollectionModel extends Listener {
}
}



removePointFromActiveShape(idx) {
if (this._activeShape && !this._activeShape.lock) {
this._activeShape.removePoint(idx);
Expand Down Expand Up @@ -823,15 +828,11 @@ class ShapeCollectionController {
}.bind(this));

let switchHideHandler = Logger.shortkeyLogDecorator(function() {
if (!window.cvat.mode || window.cvat.mode === 'aam') {
this._model.switchActiveHide();
}
this.switchActiveHide();
}.bind(this));

let switchAllHideHandler = Logger.shortkeyLogDecorator(function() {
if (!window.cvat.mode || window.cvat.mode === 'aam') {
this._model.switchAllHide();
}
this.switchAllHide();
}.bind(this));

let removeActiveHandler = Logger.shortkeyLogDecorator(function(e) {
Expand Down Expand Up @@ -904,7 +905,13 @@ class ShapeCollectionController {

switchAllLock() {
if (!window.cvat.mode || window.cvat.mode === 'aam') {
this._model.switchAllLock();
this._model.switchObjectsLock();
}
}

switchLabelLock(labelId) {
if (!window.cvat.mode || window.cvat.mode === 'aam') {
this._model.switchObjectsLock(labelId);
}
}

Expand All @@ -914,6 +921,24 @@ class ShapeCollectionController {
}
}

switchAllHide() {
if (!window.cvat.mode || window.cvat.mode === 'aam') {
this._model.switchObjectsHide();
}
}

switchLabelHide(lableId) {
if (!window.cvat.mode || window.cvat.mode === 'aam') {
this._model.switchObjectsHide(lableId);
}
}

switchActiveHide() {
if (!window.cvat.mode || window.cvat.mode === 'aam') {
this._model.switchActiveHide();
}
}

switchActiveColor() {
let colorByInstanceInput = $('#colorByInstanceRadio');
let colorByGroupInput = $('#colorByGroupRadio');
Expand Down Expand Up @@ -1191,18 +1216,88 @@ class ShapeCollectionView {

let labels = window.cvat.labelsInfo.labels();
for (let labelId in labels) {
let div = $('<div></div>').addClass('labelContentElement h2 regular hidden').css({
'background-color': collectionController.colorsByGroup(+window.cvat.labelsInfo.labelColorIdx(+labelId)),
}).attr({
'label_id': labelId,
}).on('mouseover mouseup', () => {
div.addClass('highlightedUI');
collectionModel.selectAllWithLabel(+labelId);
}).on('mouseout mousedown', () => {
div.removeClass('highlightedUI');
collectionModel.deselectAll();
}).append( $(`<label> ${labels[labelId]} </label>`) );
div.appendTo(this._labelsContent);
let lockButton = $(`<button> </button>`)
.addClass('graphicButton lockButton')
.attr('title', 'Switch lock for all object with same label')
.on('click', () => {
this._controller.switchLabelLock(+labelId);
});

lockButton[0].updateState = function(button, labelId) {
let models = this._currentModels.filter((el) => el.label === labelId);
let locked = true;
for (let model of models) {
locked = locked && model.lock;
if (!locked) {
break;
}
}

if (!locked) {
button.removeClass('locked');
}
else {
button.addClass('locked');
}
}.bind(this, lockButton, +labelId);

let hiddenButton = $(`<button> </button>`)
.addClass('graphicButton hiddenButton')
.attr('title', 'Switch hide for all object with same label')
.on('click', () => {
this._controller.switchLabelHide(+labelId);
});

hiddenButton[0].updateState = function(button, labelId) {
let models = this._currentModels.filter((el) => el.label === labelId);
let hiddenShape = true;
let hiddenText = true;
for (let model of models) {
hiddenShape = hiddenShape && model.hiddenShape;
hiddenText = hiddenText && model.hiddenText;
if (!hiddenShape && !hiddenText) {
break;
}
}

if (hiddenShape) {
button.removeClass('hiddenText');
button.addClass('hiddenShape');
}
else if (hiddenText) {
button.addClass('hiddenText');
button.removeClass('hiddenShape');
}
else {
button.removeClass('hiddenText hiddenShape');
}
}.bind(this, hiddenButton, +labelId);

let buttonBlock = $('<center> </center>')
.append(lockButton).append(hiddenButton)
.addClass('buttonBlockOfLabelUI');

let title = $(`<label> ${labels[labelId]} </label>`);

let mainDiv = $('<div> </div>').addClass('labelContentElement h2 regular hidden')
.css({
'background-color': collectionController.colorsByGroup(+window.cvat.labelsInfo.labelColorIdx(+labelId)),
}).attr({
'label_id': labelId,
}).on('mouseover mouseup', () => {
mainDiv.addClass('highlightedUI');
collectionModel.selectAllWithLabel(+labelId);
}).on('mouseout mousedown', () => {
mainDiv.removeClass('highlightedUI');
collectionModel.deselectAll();
}).append(title).append(buttonBlock);

mainDiv[0].updateState = function() {
lockButton[0].updateState();
hiddenButton[0].updateState();
}

this._labelsContent.append(mainDiv);
}

let sidePanelObjectsButton = $('#sidePanelObjectsButton');
Expand All @@ -1229,6 +1324,13 @@ class ShapeCollectionView {
for (let label of labels) {
this._labelsContent.find(`.labelContentElement[label_id="${label}"]`).removeClass('hidden');
}
this._updateLabelUIsState();
}

_updateLabelUIsState() {
for (let labelUI of this._labelsContent.find('.labelContentElement:not(.hidden)')) {
labelUI.updateState();
}
}

onCollectionUpdate(collection) {
Expand Down Expand Up @@ -1361,6 +1463,12 @@ class ShapeCollectionView {
this._updateLabelUIs();
break;
}
case 'lock':
this._updateLabelUIsState();
break;
case 'hidden':
this._updateLabelUIsState();
break;
}
}

Expand Down
2 changes: 2 additions & 0 deletions cvat/apps/engine/static/engine/js/shapes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2473,6 +2473,7 @@ class ShapeView extends Listener {

this._setupLockedUI(locked);
this._updateButtonsBlock(interpolation.position);
this.notify('lock');
break;
}
case 'occluded':
Expand All @@ -2482,6 +2483,7 @@ class ShapeView extends Listener {
case 'hidden':
setupHidden.call(this, hiddenShape, hiddenText, activeAAM, model.active, interpolation);
this._updateButtonsBlock(interpolation.position);
this.notify('hidden');
break;
case 'remove':
if (model.removed) {
Expand Down
7 changes: 7 additions & 0 deletions cvat/apps/engine/static/engine/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,13 @@
padding: 0;
}

.buttonBlockOfLabelUI {
margin: 5px;
padding: 5px;
border: 1px solid black;
border-radius: 2px;
}

/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
Expand Down