A context menu can be invisible in some cases (#235)

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

@@ -798,9 +798,14 @@ class PlayerView {
         this._playerUI.on('contextmenu.playerContextMenu', (e) => {
             if (!window.cvat.mode) {
                 $('.custom-menu').hide(100);
-                this._contextMenuUI.finish().show(100).offset({
+                this._contextMenuUI.finish().show(100);
-                    top: e.pageY - 10,
+                let x = Math.min(e.pageX, this._playerUI[0].offsetWidth -
-                    left: e.pageX - 10,
+                    this._contextMenuUI[0].scrollWidth);
+                let y = Math.min(e.pageY, this._playerUI[0].offsetHeight -
+                    this._contextMenuUI[0].scrollHeight);
+                this._contextMenuUI.offset({
+                    left: x,
+                    top: y,
                 });
                 e.preventDefault();
             }

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

@@ -1432,6 +1432,7 @@ class ShapeView extends Listener {
         this._pointContextMenu = $('#pointContextMenu');
 
         this._rightBorderFrame = $('#playerFrame')[0].offsetWidth;
+        this._bottomBorderFrame = $('#playerFrame')[0].offsetHeight;
 
         shapeModel.subscribe(this);
     }
@@ -1550,9 +1551,12 @@ class ShapeView extends Listener {
                     dragPolyItem.addClass('hidden');
                 }
 
-                this._shapeContextMenu.finish().show(100).offset({
+                this._shapeContextMenu.finish().show(100);
-                    top: e.pageY - 10,
+                let x = Math.min(e.pageX, this._rightBorderFrame - this._shapeContextMenu[0].scrollWidth);
-                    left: e.pageX - 10,
+                let y = Math.min(e.pageY, this._bottomBorderFrame - this._shapeContextMenu[0].scrollHeight);
+                this._shapeContextMenu.offset({
+                    left: x,
+                    top: y,
                 });
 
                 e.preventDefault();
@@ -2898,9 +2902,12 @@ class PolyShapeView extends ShapeView {
                     this._pointContextMenu.attr('point_idx', point.index());
                     this._pointContextMenu.attr('dom_point_id', point.attr('id'));
 
-                    this._pointContextMenu.finish().show(100).offset({
+                    this._pointContextMenu.finish().show(100);
-                        top: e.pageY - 20,
+                    let x = Math.min(e.pageX, this._rightBorderFrame - this._pointContextMenu[0].scrollWidth);
-                        left: e.pageX - 20,
+                    let y = Math.min(e.pageY, this._bottomBorderFrame - this._pointContextMenu[0].scrollHeight);
+                    this._pointContextMenu.offset({
+                        left: x,
+                        top: y,
                     });
 
                     e.preventDefault();