Merge pull request #12697 from PolygonalSun/context-menu-fix

Engine: Add event listener to disable right-click menu when there's a canvas element

packages/dev/core/src/Engines/engine.ts

@@ -395,6 +395,11 @@ export class Engine extends ThinEngine {
      **/
     public disableManifestCheck = false;
 
+    /**
+     * Gets or sets a boolean to enable/disable the context menu (right-click) from appearing on the main canvas
+     */
+    public disableContextMenu: boolean = true;
+
     /**
      * Gets the list of created scenes
      */
@@ -532,6 +537,7 @@ export class Engine extends ThinEngine {
     private _onCanvasPointerOut: (event: PointerEvent) => void;
     private _onCanvasBlur: () => void;
     private _onCanvasFocus: () => void;
+    private _onCanvasContextMenu: (evt: Event) => void;
 
     private _onFullscreenChange: () => void;
     private _onPointerLockChange: () => void;
@@ -671,8 +677,15 @@ export class Engine extends ThinEngine {
             this.onCanvasBlurObservable.notifyObservers(this);
         };
 
+        this._onCanvasContextMenu = (evt: Event) => {
+            if (this.disableContextMenu) {
+                evt.preventDefault();
+            }
+        };
+
         canvas.addEventListener("focus", this._onCanvasFocus);
         canvas.addEventListener("blur", this._onCanvasBlur);
+        canvas.addEventListener("contextmenu", this._onCanvasContextMenu);
 
         this._onBlur = () => {
             if (this.disablePerformanceMonitorInBackground) {
@@ -1933,6 +1946,7 @@ export class Engine extends ThinEngine {
                 this._renderingCanvas.removeEventListener("focus", this._onCanvasFocus);
                 this._renderingCanvas.removeEventListener("blur", this._onCanvasBlur);
                 this._renderingCanvas.removeEventListener("pointerout", this._onCanvasPointerOut);
+                this._renderingCanvas.removeEventListener("contextmenu", this._onCanvasContextMenu);
             }
 
             if (IsDocumentAvailable()) {