ignore key and wheel event when cursor is not on the canvas

static/poseEditor.js

@@ -377,6 +377,13 @@ function getCanvasPosition(event) {
   return [x, y];
 }
 
+function isMouseOnCanvas(event) {
+  const rect = canvas.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  return 0 <= x && x <= canvas.width && 0 <= y && y <= canvas.height;
+}
+
 function forEachMarkedNodes(fn) {
   for (let i = 0; i < dragMarks.length; i++) {
     for (let j = 0; j < dragMarks[i].length; j++) {
@@ -505,6 +512,8 @@ function handleMouseUp(event) {
 function ModifyDragRange(delta) { dragRange = Math.max(dragRangeDelta, Math.min(512, dragRange + delta)); }
 
 document.addEventListener('wheel', function(event) {
+  if (!isMouseOnCanvas(event)) {return;}
+
   event.preventDefault();
   const deltaY = event.deltaY;
   if (deltaY < 0) {ModifyDragRange(-dragRangeDelta);}
@@ -515,6 +524,8 @@ document.addEventListener('wheel', function(event) {
 }, {passive: false});
 
 document.addEventListener("keydown", (event) => { 
+  if (!isMouseOnCanvas(event)) {return;}
+
   if (event.code == "BracketLeft") { ModifyDragRange(-dragRangeDelta); }
   if (event.code == "BracketRight") { ModifyDragRange(dragRangeDelta); }
   keyDownFlags[event.code] = true; 
@@ -522,6 +533,8 @@ document.addEventListener("keydown", (event) => {
   event.preventDefault();
 });
 document.addEventListener("keyup", (event) => { 
+  if (!isMouseOnCanvas(event)) {return;}
+
   keyDownFlags[event.code] = false; 
   if (event.ctrlKey && event.code == "KeyE") {
     addPerson();