Ability to change an opacity for selected shapes (#77)

* Feature has been implemented: ability to change selected opacity for shapes
* Floats used in ranges

Author: bsekachev

cvat/apps/engine/static/engine/js/base.js

@@ -216,7 +216,7 @@ $.ajaxSetup({
 
 $(document).ready(function(){
     $('body').css({
-        width: window.screen.width * 0.95 + 'px',
+        width: window.screen.width + 'px',
         height: window.screen.height * 0.95 + 'px'
     });
 });

cvat/apps/engine/static/engine/js/shapeCollection.js

@@ -999,6 +999,7 @@ class ShapeCollectionView {
         this._labelsContent = $('#labelsContent');
         this._showAllInterpolationBox = $('#showAllInterBox');
         this._fillOpacityRange = $('#fillOpacityRange');
+        this._selectedFillOpacityRange = $('#selectedFillOpacityRange');
         this._blackStrokeCheckbox = $('#blackStrokeCheckbox');
         this._colorByInstanceRadio = $('#colorByInstanceRadio');
         this._colorByGroupRadio = $('#colorByGroupRadio');
@@ -1020,7 +1021,7 @@ class ShapeCollectionView {
             let value = Math.clamp(+e.target.value, +e.target.min, +e.target.max);
             e.target.value = value;
             if (value >= 0) {
-                this._colorSettings["fill-opacity"] = value / 5;
+                this._colorSettings["fill-opacity"] = value;
                 delete this._colorSettings['white-opacity'];
 
                 for (let view of this._currentViews) {
@@ -1029,14 +1030,24 @@ class ShapeCollectionView {
             }
             else {
                 value *= -1;
-                this._colorSettings["white-opacity"] = value / 5;
+                this._colorSettings["white-opacity"] = value;
 
                 for (let view of this._currentViews) {
                     view.updateColorSettings(this._colorSettings);
                 }
             }
         });
 
+        this._selectedFillOpacityRange.on('input', (e) => {
+            let value = Math.clamp(+e.target.value, +e.target.min, +e.target.max);
+            e.target.value = value;
+            this._colorSettings["selected-fill-opacity"] = value;
+
+            for (let view of this._currentViews) {
+                view.updateColorSettings(this._colorSettings);
+            }
+        });
+
         this._blackStrokeCheckbox.on('click', (e) => {
             this._colorSettings["black-stroke"] = e.target.checked;
 

cvat/apps/engine/static/engine/js/shapeFilter.js

@@ -70,10 +70,6 @@ class FilterModel {
             this._update();
         }
     }
-
-    get filterRow() {
-        return this._filter;
-    }
 }
 
 class FilterController {
@@ -102,10 +98,6 @@ class FilterController {
     deactivate() {
         this._model.active = false;
     }
-
-    get filterRow() {
-        return this._model.filterRow;
-    }
 }
 
 

cvat/apps/engine/static/engine/js/shapes.js

@@ -1400,7 +1400,7 @@ class ShapeView extends Listener {
         this._appearance = {
             colors: shapeModel.color,
             fillOpacity: 0,
-            selectedFillOpacity: 0.1,
+            selectedFillOpacity: 0.2,
         };
 
         this._flags = {
@@ -2645,6 +2645,10 @@ class ShapeView extends Listener {
             }
         }
 
+        if ('selected-fill-opacity' in settings) {
+            this._appearance.selectedFillOpacity = settings['selected-fill-opacity'];
+        }
+
         if (settings['black-stroke']) {
             this._appearance['stroke'] = 'black';
         }

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

@@ -142,16 +142,17 @@
             <hr>
             <table class="regular" cellpadding="20">
                 <tr>
-                    <td>
+                <td style="width: auto;">
                         <div style="float: left;"> <label class="semiBold"> Fill Opacity: </label> </div>
-                        <div style="float: left; margin-left: 1em;"> <input type="range" min="-5" max="5" value="0" id="fillOpacityRange"/> </div>
+                        <div style="float: left; margin-left: 1em;"> <input type="range" min="-1" max="1" step="0.2" value="0" id="fillOpacityRange"/> </div>
                     </td>
                     <td style="width: auto;">
-                        <div style="float: left;"> <label class="semiBold"> Black Stroke: </label> </div>
-                        <div style="float: left; margin-left: 1em;"> <input type="checkbox" id="blackStrokeCheckbox" class="settingsBox"/> </div>
+                        <div style="float: left;"> <label class="semiBold"> Selected Fill Opacity: </label> </div>
+                        <div style="float: left; margin-left: 1em;"> <input type="range" min="0" max="1" value="0.2" step="0.2" id="selectedFillOpacityRange"/> </div>
                     </td>
                     <td style="width: auto;">
-
+                        <div style="float: left;"> <label class="semiBold"> Black Stroke: </label> </div>
+                        <div style="float: left; margin-left: 1em;"> <input type="checkbox" id="blackStrokeCheckbox" class="settingsBox"/> </div>
                     </td>
                     <td style="width: auto;">
                         <div style="float: left;"> <label class="semiBold"> Color by: </label> </div>