From 7bad3dc237d3597757f6a93c1b3e2e7e78159390 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <40690378+bsekachev@users.noreply.github.com>
Date: Fri, 14 Dec 2018 01:12:35 +0300
Subject: [PATCH] A context menu can be invisible in some cases (#235)

---
 cvat/apps/engine/static/engine/js/player.js | 11 ++++++++---
 cvat/apps/engine/static/engine/js/shapes.js | 19 +++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/cvat/apps/engine/static/engine/js/player.js b/cvat/apps/engine/static/engine/js/player.js
index a3b57c3e..2f445647 100644
--- a/cvat/apps/engine/static/engine/js/player.js
+++ b/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({
-                    top: e.pageY - 10,
-                    left: e.pageX - 10,
+                this._contextMenuUI.finish().show(100);
+                let x = Math.min(e.pageX, this._playerUI[0].offsetWidth -
+                    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();
             }
diff --git a/cvat/apps/engine/static/engine/js/shapes.js b/cvat/apps/engine/static/engine/js/shapes.js
index 4d6c79d7..b15df209 100644
--- a/cvat/apps/engine/static/engine/js/shapes.js
+++ b/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({
-                    top: e.pageY - 10,
-                    left: e.pageX - 10,
+                this._shapeContextMenu.finish().show(100);
+                let x = Math.min(e.pageX, this._rightBorderFrame - this._shapeContextMenu[0].scrollWidth);
+                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({
-                        top: e.pageY - 20,
-                        left: e.pageX - 20,
+                    this._pointContextMenu.finish().show(100);
+                    let x = Math.min(e.pageX, this._rightBorderFrame - this._pointContextMenu[0].scrollWidth);
+                    let y = Math.min(e.pageY, this._bottomBorderFrame - this._pointContextMenu[0].scrollHeight);
+                    this._pointContextMenu.offset({
+                        left: x,
+                        top: y,
                     });
 
                     e.preventDefault();