Now we store virtual URL instead of update it in the browser address bar (#112)

* Copy URL, Frame URL and object URL functionality in a context menu
* Shift key in order to don't select any objects

cvat/apps/engine/static/engine/js/annotationUI.js

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-/* exported callAnnotationUI translateSVGPos blurAllElements drawBoxSize */
+/* exported callAnnotationUI translateSVGPos blurAllElements drawBoxSize copyToClipboard */
 "use strict";
 
 function callAnnotationUI(jid) {
@@ -55,8 +55,46 @@ function buildAnnotationUI(job, shapeData, loadJobEvent) {
             z_order: job.z_order,
             id: job.jobid
         },
+        search: {
+            value: window.location.search,
+
+            set: function(name, value) {
+                let searchParams = new URLSearchParams(this.value);
+
+                if (typeof value === 'undefined' || value === null) {
+                    if (searchParams.has(name)) {
+                        searchParams.delete(name);
+                    }
+                }
+                else searchParams.set(name, value);
+                this.value = `${searchParams.toString()}`;
+            },
+
+            get: function(name) {
+                try {
+                    let decodedURI = decodeURIComponent(this.value);
+                    let urlSearchParams = new URLSearchParams(decodedURI);
+                    if (urlSearchParams.has(name)) {
+                        return urlSearchParams.get(name);
+                    }
+                    else return null;
+                }
+                catch (error) {
+                    showMessage('Bad URL has been found');
+                    this.value = window.location.href;
+                    return null;
+                }
+            },
+
+            toString: function() {
+                return `${window.location.origin}/?${this.value}`;
+            }
+        }
     };
 
+    // Remove external search parameters from url
+    window.history.replaceState(null, null, `${window.location.origin}/?id=${job.jobid}`);
+
     window.cvat.config = new Config();
 
     // Setup components
@@ -137,7 +175,7 @@ function buildAnnotationUI(job, shapeData, loadJobEvent) {
     playerModel.subscribe(shapeBufferView);
     playerModel.subscribe(shapeGrouperView);
     playerModel.subscribe(polyshapeEditorView);
-    playerModel.shift(getURISearchParameter('frame') || 0, true);
+    playerModel.shift(window.cvat.search.get('frame') || 0, true);
 
     let shortkeys = window.cvat.config.shortkeys;
 
@@ -185,6 +223,16 @@ function buildAnnotationUI(job, shapeData, loadJobEvent) {
     });
 }
 
+
+function copyToClipboard(text) {
+    let tempInput = $("<input>");
+    $("body").append(tempInput);
+    tempInput.prop('value', text).select();
+    document.execCommand("copy");
+    tempInput.remove();
+}
+
+
 function setupFrameFilters() {
     let brightnessRange = $('#playerBrightnessRange');
     let contrastRange = $('#playerContrastRange');

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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-/* exported confirm showMessage showOverlay dumpAnnotationRequest getURISearchParameter setURISearchParameter */
+/* exported confirm showMessage showOverlay dumpAnnotationRequest */
 "use strict";
 
 Math.clamp = function(x, min, max) {
@@ -160,45 +160,6 @@ function dumpAnnotationRequest(dumpButton, taskID) {
     }
 }
 
-
-function setURISearchParameter(name, value) {
-    let searchParams = new URLSearchParams(window.location.search);
-    if (typeof value === 'undefined' || value === null) {
-        if (searchParams.has(name)) {
-            searchParams.delete(name);
-        }
-    }
-    else searchParams.set(name, value);
-
-    window.history.replaceState(null, null, `?${searchParams.toString()}`);
-}
-
-
-function resetURISearchParameters() {
-    let searchParams = new URLSearchParams();
-    searchParams.set('id', window.cvat.job.id);
-    window.history.replaceState(null, null, `?${searchParams.toString()}`);
-}
-
-
-function getURISearchParameter(name) {
-    let decodedURI = '';
-    try {
-        decodedURI = decodeURIComponent(window.location.search);
-    }
-    catch (error) {
-        showMessage('Bad URL has been found');
-        resetURISearchParameters();
-    }
-
-    let urlSearchParams = new URLSearchParams(decodedURI);
-    if (urlSearchParams.has(name)) {
-        return urlSearchParams.get(name);
-    }
-    else return null;
-}
-
-
 /* These HTTP methods do not require CSRF protection */
 function csrfSafeMethod(method) {
     return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));

cvat/apps/engine/static/engine/js/player.js

@@ -647,6 +647,7 @@ class PlayerView {
         this._frameNumber = $('#frameNumber');
         this._playerGridPattern = $('#playerGridPattern');
         this._playerGridPath = $('#playerGridPath');
+        this._contextMenuUI = $('#playerContextMenu');
 
         $('*').on('mouseup', () => this._controller.frameMouseUp());
         this._playerUI.on('wheel', (e) => this._controller.zoom(e));
@@ -763,6 +764,38 @@ class PlayerView {
         this._multiplePrevButtonUI.find('polygon').append($(document.createElementNS('http://www.w3.org/2000/svg', 'title'))
             .html(`${shortkeys['backward_frame'].view_value} - ${shortkeys['backward_frame'].description}`));
 
+
+        this._contextMenuUI.click((e) => {
+            $('.custom-menu').hide(100);
+            switch($(e.target).attr("action")) {
+            case "job_url": {
+                window.cvat.search.set('frame', null);
+                window.cvat.search.set('filter', null);
+                copyToClipboard(window.cvat.search.toString());
+                break;
+            }
+            case "frame_url":
+                window.cvat.search.set('frame', window.cvat.player.frames.current);
+                window.cvat.search.set('filter', null);
+                copyToClipboard(window.cvat.search.toString());
+                window.cvat.search.set('frame', null);
+                break;
+            }
+        });
+
+        this._playerContentUI.on('contextmenu.playerContextMenu', (e) => {
+            $('.custom-menu').hide(100);
+            this._contextMenuUI.finish().show(100).offset({
+                top: e.pageY - 10,
+                left: e.pageX - 10,
+            });
+            e.preventDefault();
+        });
+
+        this._playerContentUI.on('mousedown.playerContextMenu', () => {
+            $('.custom-menu').hide(100);
+        });
+
         playerModel.subscribe(this);
     }
 
@@ -780,7 +813,6 @@ class PlayerView {
         this._loadingUI.addClass('hidden');
         if (this._playerBackgroundUI.css('background-image').slice(5,-2) != image.src) {
             this._playerBackgroundUI.css('background-image', 'url(' + '"' + image.src + '"' + ')');
-            setURISearchParameter('frame', frames.current);
         }
 
         if (model.playing) {

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

@@ -988,6 +988,10 @@ class ShapeCollectionController {
     get filterController() {
         return this._filterController;
     }
+
+    get activeShape() {
+        return this._model.activeShape;
+    }
 }
 
 class ShapeCollectionView {
@@ -1103,7 +1107,10 @@ class ShapeCollectionView {
         });
 
         this._frameContent.on('mousemove', function(e) {
-            if (e.ctrlKey || e.which === 2 || e.target.classList.contains('svg_select_points')) {
+            if (e.ctrlKey || e.shiftKey || e.which === 2 || e.target.classList.contains('svg_select_points')) {
+                if (e.shiftKey) {
+                    this._controller.resetActive();
+                }
                 return;
             }
 
@@ -1117,9 +1124,20 @@ class ShapeCollectionView {
 
         $('#shapeContextMenu li').click((e) => {
             let menu = $('#shapeContextMenu');
-            menu.hide(100);
+            $('.custom-menu').hide(100);
 
             switch($(e.target).attr("action")) {
+            case "object_url": {
+                let active = this._controller.activeShape;
+                if (active) {
+                    window.cvat.search.set('frame', window.cvat.player.frames.current);
+                    window.cvat.search.set('filter', `*[id="${active.id}"]`);
+                    copyToClipboard(window.cvat.search.toString());
+                    window.cvat.search.set('frame', null);
+                    window.cvat.search.set('filter', null);
+                }
+                break;
+            }
             case "change_color":
                 this._controller.switchActiveColor();
                 break;
@@ -1162,7 +1180,7 @@ class ShapeCollectionView {
         $('#pointContextMenu li').click((e) => {
             let menu = $('#pointContextMenu');
             let idx = +menu.attr('point_idx');
-            menu.hide(100);
+            $('.custom-menu').hide(100);
 
             switch($(e.target).attr("action")) {
             case "remove_point":

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

@@ -113,11 +113,10 @@ class FilterView {
             let value = $.trim(e.target.value);
             if (this._controller.updateFilter(value, false)) {
                 this._filterString.css('color', 'green');
-                setURISearchParameter('filter', value || null);
             }
             else {
                 this._filterString.css('color', 'red');
-                setURISearchParameter('filter', null);
+                this._controller.updateFilter('', false);
             }
         });
 
@@ -129,17 +128,15 @@ class FilterView {
         this._resetFilterButton.on('click', () => {
             this._filterString.prop('value', '');
             this._controller.updateFilter('', false);
-            setURISearchParameter('filter', null);
         });
 
-        if (getURISearchParameter('filter')) {
-            let value = getURISearchParameter('filter');
-            this._filterString.prop('value', value);
-            if (this._controller.updateFilter(value, true)) {
+        let initialFilter = window.cvat.search.get('filter');
+        if (initialFilter) {
+            this._filterString.prop('value', initialFilter);
+            if (this._controller.updateFilter(initialFilter, true)) {
                 this._filterString.css('color', 'green');
             }
             else {
-                setURISearchParameter('filter', null);
                 this._filterString.prop('value', '');
                 this._filterString.css('color', 'red');
             }

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

@@ -1492,8 +1492,7 @@ class ShapeView extends Listener {
             // Setup context menu
             this._uis.shape.on('mousedown.contextMenu', (e) => {
                 if (e.which === 1) {
-                    this._shapeContextMenu.hide(100);
-                    this._pointContextMenu.hide(100);
+                    $('.custom-menu').hide(100);
                 }
                 if (e.which === 3) {
                     e.stopPropagation();
@@ -1501,7 +1500,7 @@ class ShapeView extends Listener {
             });
 
             this._uis.shape.on('contextmenu.contextMenu', (e) => {
-                this._pointContextMenu.hide(100);
+                $('.custom-menu').hide(100);
                 let type = this._controller.type.split('_');
                 if (type[0] === 'interpolation') {
                     this._shapeContextMenu.find('.interpolationItem').removeClass('hidden');
@@ -1553,8 +1552,7 @@ class ShapeView extends Listener {
             this._flags.editable = false;
         }
 
-        this._pointContextMenu.hide(100);
-        this._shapeContextMenu.hide(100);
+        $('.custom-menu').hide(100);
     }
 
 
@@ -2829,7 +2827,7 @@ class PolyShapeView extends ShapeView {
                 point = $(point);
 
                 point.on('contextmenu.contextMenu', (e) => {
-                    this._shapeContextMenu.hide(100);
+                    $('.custom-menu').hide(100);
                     this._pointContextMenu.attr('point_idx', point.index());
                     this._pointContextMenu.attr('dom_point_id', point.attr('id'));
 

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

@@ -77,7 +77,9 @@
                 </defs>
                 <rect width="100%" height="100%" fill="url(#playerGridPattern)" />
             </svg>
+
             <ul id="shapeContextMenu" class='custom-menu' oncontextmenu="return false;">
+                <li action="object_url"> Copy Object URL </li>
                 <li action="change_color"> Change Color </li>
                 <li action="remove_shape"> Remove Shape </li>
                 <li action="switch_occluded"> Switch Occluded </li>
@@ -86,6 +88,11 @@
                 <li class="polygonItem" action="drag_polygon"> Enable Dragging </li>
             </ul>
 
+            <ul id="playerContextMenu" class='custom-menu' oncontextmenu="return false;">
+                <li action="job_url"> Copy Job URL </li>
+                <li action="frame_url"> Copy Frame URL </li>
+            </ul>
+
             <ul id="pointContextMenu" class='custom-menu' oncontextmenu="return false;">
                 <li action="remove_point"> Remove </li>
             </ul>

tests/eslintrc.conf.js

@@ -44,13 +44,12 @@ module.exports = {
         'translateSVGPos': true,
         'blurAllElements': true,
         'drawBoxSize': true,
+        'copyToClipboard': true,
         // from base.js
         'showMessage': true,
         'showOverlay': true,
         'confirm': true,
         'dumpAnnotationRequest': true,
-        'getURISearchParameter': true,
-        'setURISearchParameter': true,
         // from shapeCollection.js
         'ShapeCollectionModel': true,
         'ShapeCollectionController': true,