Merge pull request #34 from Kitware/canvas-prevent-context-menu

prevent context menu on the canvas and focus when clicked, or mouse enters the canvas

Author: jspanchu

src/core/canvasEventListeners.js

@@ -0,0 +1,35 @@
+/**
+ * Prevent default context menu and focus canvas on click and mouseenter.
+ * @param {Event} event 
+ */
+function handleEvent(event) {
+  if (event.type === "contextmenu") {
+    event.preventDefault();
+  } else if (event.type === "click" || event.type === "mouseenter") {
+    event.currentTarget.focus();
+  }
+}
+
+const eventTypes = ["contextmenu", "click", "mouseenter"];
+
+/**
+ * Add event listeners to the canvas element to prevent default context menu and focus canvas on click and mouseenter.
+ * @param {HTMLCanvasElement} canvas 
+ */
+export function addCanvasEventListeners(canvas) {
+  if (!canvas) {
+    return;
+  }
+  eventTypes.forEach(eventType => canvas.addEventListener(eventType, handleEvent));
+}
+
+/**
+ * Remove event listeners that were installed in `addCanvasEventListeners`.
+ * @param {HTMLCanvasElement} canvas 
+ */
+export function removeCanvasEventListeners(canvas) {
+  if (!canvas) {
+    return;
+  }
+  eventTypes.forEach(eventType => canvas.removeEventListener(eventType, handleEvent));
+}

src/remote.js

@@ -2,6 +2,7 @@ import "./style.css";
 
 import { VtkWASMLoader } from "./wasmLoader";
 import { createVtkObjectProxy } from "./core/proxy";
+import { addCanvasEventListeners, removeCanvasEventListeners } from "./core/canvasEventListeners";
 
 // url => loader instance
 const WASM_LOADERS = {};
@@ -496,9 +497,7 @@ export class RemoteSession {
       canvas = document.createElement("canvas");
       canvas.setAttribute("class", canvasSelector.substring(1));
       canvas.setAttribute("tabindex", "0");
-      // @contextmenu.prevent
-      // @click="canvas.focus()"
-      // @mouseenter="canvas.focus()"
+      addCanvasEventListeners(canvas);
     }
 
     targetElement.appendChild(canvas);
@@ -514,6 +513,7 @@ export class RemoteSession {
     const canvasSelector = this.getCanvasSelector(renderWindowId);
     const canvas = document.querySelector(canvasSelector);
     if (canvas) {
+      removeCanvasEventListeners(canvas);
       this.offlineCanvasContainer.appendChild(canvas);
     }
   }