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();