From 93eaaf7fdb70bb34a374886e17fb35f66788530e Mon Sep 17 00:00:00 2001
From: Boris Sekachev <40690378+bsekachev@users.noreply.github.com>
Date: Fri, 21 Sep 2018 17:23:11 +0300
Subject: [PATCH] Ability to change an opacity for selected shapes (#77)

* Feature has been implemented: ability to change selected opacity for shapes
* Floats used in ranges
---
 cvat/apps/engine/static/engine/js/base.js         |  2 +-
 .../engine/static/engine/js/shapeCollection.js    | 15 +++++++++++++--
 cvat/apps/engine/static/engine/js/shapeFilter.js  |  8 --------
 cvat/apps/engine/static/engine/js/shapes.js       |  6 +++++-
 cvat/apps/engine/templates/engine/annotation.html | 11 ++++++-----
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/cvat/apps/engine/static/engine/js/base.js b/cvat/apps/engine/static/engine/js/base.js
index e5d59c99d..a164e3cd6 100644
--- a/cvat/apps/engine/static/engine/js/base.js
+++ b/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'
     });
 });
diff --git a/cvat/apps/engine/static/engine/js/shapeCollection.js b/cvat/apps/engine/static/engine/js/shapeCollection.js
index 67cbc9ee4..d9132b9de 100644
--- a/cvat/apps/engine/static/engine/js/shapeCollection.js
+++ b/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,7 +1030,7 @@ 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);
@@ -1037,6 +1038,16 @@ class ShapeCollectionView {
             }
         });
 
+        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;
 
diff --git a/cvat/apps/engine/static/engine/js/shapeFilter.js b/cvat/apps/engine/static/engine/js/shapeFilter.js
index eeb67066d..36d86d2c6 100644
--- a/cvat/apps/engine/static/engine/js/shapeFilter.js
+++ b/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;
-    }
 }
 
 
diff --git a/cvat/apps/engine/static/engine/js/shapes.js b/cvat/apps/engine/static/engine/js/shapes.js
index 5f85904a1..9c61f930d 100644
--- a/cvat/apps/engine/static/engine/js/shapes.js
+++ b/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';
         }
diff --git a/cvat/apps/engine/templates/engine/annotation.html b/cvat/apps/engine/templates/engine/annotation.html
index 33dea2ad4..0042b798f 100644
--- a/cvat/apps/engine/templates/engine/annotation.html
+++ b/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>
-- 
GitLab