fix key reception sequence

static/poseEditor.js

@@ -126,12 +126,19 @@ function repairPerson(personIndex) {
 // ドラッグ中の各キーが押されているかどうかのフラグ
 var keyDownFlags = {};
 // マウスカーソル
-var mouseCursor = [0, 0];
+var mouseCursor = [-1, -1];
 
 function cross(lhs, rhs) {return lhs[0] * rhs[1] - lhs[1] * rhs[0];}
 function dot(lhs, rhs) {return lhs[0] * rhs[0] + lhs[1] * rhs[1];}
 function directedAngleTo(lhs, rhs) {return Math.atan2(cross(lhs, rhs), dot(lhs, rhs));}
 
+function isMouseOnCanvas() {
+  // mouseCursorがcanvasの範囲内にあるかどうかを判定
+  var rect = canvas.getBoundingClientRect();
+  var f = 0 <= mouseCursor[0] && mouseCursor[0] <= rect.width && 0 <= mouseCursor[1] && mouseCursor[1] <= rect.height;
+  return f;
+}
+
 function clearCanvas() {
   var w = canvas.width;
   var h = canvas.height;
@@ -377,13 +384,6 @@ 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++) {
@@ -477,7 +477,6 @@ function handleMouseMove(event) {
       forEachMarkedNodes((i, j, node) => {
         const lp = latestPoseData[i][j];
         const np = rotateAndProject(rotateX, lp, center, angle);
-        console.log(np);
         node[0] = np[0];
         node[1] = np[1];
       });
@@ -509,10 +508,14 @@ function handleMouseUp(event) {
   Redraw();
 }
 
+function handleMouseLeave(event) {
+  mouseCursor = [-1,-1];
+}
+
 function ModifyDragRange(delta) { dragRange = Math.max(dragRangeDelta, Math.min(512, dragRange + delta)); }
 
 document.addEventListener('wheel', function(event) {
-  if (!isMouseOnCanvas(event)) {return;}
+  if (!isMouseOnCanvas()) {return;}
   if (!event.altKey) {return;}
 
   event.preventDefault();
@@ -525,6 +528,8 @@ document.addEventListener('wheel', function(event) {
 }, {passive: false});
 
 document.addEventListener("keydown", (event) => { 
+  if (!isMouseOnCanvas()) {return;}
+
   if (event.code == "BracketLeft") { ModifyDragRange(-dragRangeDelta); }
   if (event.code == "BracketRight") { ModifyDragRange(dragRangeDelta); }
   keyDownFlags[event.code] = true; 
@@ -532,6 +537,8 @@ document.addEventListener("keydown", (event) => {
   event.preventDefault();
 });
 document.addEventListener("keyup", (event) => { 
+  if (!isMouseOnCanvas()) {return;}
+
   keyDownFlags[event.code] = false; 
   if (event.ctrlKey && event.code == "KeyE") {
     addPerson();
@@ -555,6 +562,7 @@ function initializeEditor() {
   canvas.addEventListener('mousedown', handleMouseDown);
   canvas.addEventListener('mousemove', handleMouseMove);
   canvas.addEventListener('mouseup', handleMouseUp);
+  canvas.addEventListener('mouseleave', handleMouseLeave);
   poseData = [];
   clearHistory();
 }