add range move

app.py

@@ -105,7 +105,13 @@ To export the pose data, click "Save" and "Copy to clipboard" of "Json" section.
     with gr.Column(scale=2):
       html = gr.HTML(html_text)
       saveBtn = gr.Button(value="Save")
-      gr.HTML("<ul><li>ctrl + drag to scale</li><li>alt + drag to translate</li><li>shift + drag to rotate(move right first, then up or down)</li></ul>")
+      gr.Markdown("""
+- "ctrl + drag" to scale
+- "alt + drag" to translate
+- "shift + drag" to rotate(move right first, then up or down)
+- "space + drag" to move within range
+- "[", "]" to shrink or expand range
+""")
 
   source.change(
     fn = image_changed,

static/poseEditor.js

@@ -32,6 +32,10 @@ let subset = [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 33.
 
 let candidate = candidateSource.map(point => [point[0], point[1] - 70]);  
 
+// ドラッグ中の各キーが押されているかどうかのフラグ
+var keyDownFlags = {};
+// マウスカーソル
+var mouseCursor = [0, 0];
 
 function clearCanvas() {
   var w = canvas.width;
@@ -93,6 +97,21 @@ function drawBodyPose(candidate, subset) {
     }
 }
 
+function drawUI() {
+  if (keyDownFlags['Space'] || keyDownFlags['BracketLeft'] || keyDownFlags['BracketRight']) {
+    ctx.beginPath();
+    ctx.arc(mouseCursor[0], mouseCursor[1], dragRange, 0, 2 * Math.PI);
+    ctx.strokeStyle = 'rgb(255,255,255)';
+    ctx.stroke();
+  }
+}
+
+function Redraw() {
+  clearCanvas();
+  drawBodyPose(candidate, subset);
+  drawUI();
+}
+
 function getNearestCandidate(x, y) {
     let minDist = Infinity;
     let minIndex = -1;
@@ -106,6 +125,8 @@ function getNearestCandidate(x, y) {
     return [minIndex,minDist];
 }
 
+let dragRange = 64;
+
 // ドラッグ中に座標を保持するための変数
 let isDragging = false;
 let dragIndex = -1;
@@ -113,6 +134,7 @@ let dragStartX = 0;
 let dragStartY = 0;
 let draggingCandidate = null;
 let dragPersonIndex = -1;
+let dragMarks = [];
 
 function getCanvasPosition(event) {
   const rect = canvas.getBoundingClientRect();
@@ -121,30 +143,6 @@ function getCanvasPosition(event) {
   return [x, y];
 }
 
-// Canvas要素上でマウスが押された場合に呼び出される関数
-function handleMouseDown(event) {
-  const [x, y] = getCanvasPosition(event);
-  const [index, minDist] = getNearestCandidate(x, y);
-
-  // ドラッグ処理の開始
-  if (event.altKey || event.ctrlKey || event.shiftKey || minDist < 16) {
-    isDragging = true;
-    dragIndex = index;
-    dragStartX = x;
-    dragStartY = y;
-    draggingCandidate = JSON.parse(JSON.stringify(candidate))
-
-    // indexが含まれる人間を探す
-    for (let i = 0; i < subset.length; i++) {
-      var found = subset[i].indexOf(index);
-      if (found != -1 && found < 18) {
-        dragPersonIndex = i;
-        break;
-      }
-    }
-  }
-}
-
 function forEachCandidateOfPerson(personIndex, callback) {
   if (personIndex === -1) { return; }
 
@@ -157,55 +155,116 @@ function forEachCandidateOfPerson(personIndex, callback) {
   }
 }
 
-// Canvas要素上でマウスが動いた場合に呼び出される関数
-function handleMouseMove(event) {
-  if (!isDragging) {
-    return;
+function forEachMarkedCandidate(callback) {
+  for (let i = 0; i < dragMarks.length; i++) {
+    if (dragMarks[i]) {
+      callback(i);
+    }
   }
+}
 
+// Canvas要素上でマウスが押された場合に呼び出される関数
+function handleMouseDown(event) {
   const [x, y] = getCanvasPosition(event);
+  const [index, minDist] = getNearestCandidate(x, y);
 
-  const dragOffsetX = x - dragStartX;
-  const dragOffsetY = y - dragStartY;
+  // ドラッグ処理の開始
+  dragIndex = index;
+  dragStartX = x;
+  dragStartY = y;
+  draggingCandidate = JSON.parse(JSON.stringify(candidate))
+  dragMarks = new Array(candidate.length).fill(false);
 
-  if (event.ctrlKey) {
-    // 拡大縮小（人間ごと）
-    let xScale = 1 + dragOffsetX / canvas.width;
-    let yScale = 1 + dragOffsetY / canvas.height;
-    forEachCandidateOfPerson(dragPersonIndex, (index) => {
-      candidate[index][0] = (draggingCandidate[index][0] - dragStartX) * xScale + dragStartX;
-      candidate[index][1] = (draggingCandidate[index][1] - dragStartY) * yScale + dragStartY;
-    });
-  } else if (event.shiftKey) {
-    // 回転（人間ごと）
-    let angle = Math.atan2(dragOffsetY, dragOffsetX);
-    forEachCandidateOfPerson(dragPersonIndex, (index) => {
-      let x = draggingCandidate[index][0] - dragStartX;
-      let y = draggingCandidate[index][1] - dragStartY;
-      candidate[index][0] = x * Math.cos(angle) - y * Math.sin(angle) + dragStartX;
-      candidate[index][1] = x * Math.sin(angle) + y * Math.cos(angle) + dragStartY;
+  // indexが含まれる人間を探す
+  for (let i = 0; i < subset.length; i++) {
+    var found = subset[i].indexOf(index);
+    if (found != -1 && found < 18) {
+      dragPersonIndex = i;
+      break;
+    }
+  }
+
+  if (event.altKey || event.ctrlKey || event.shiftKe) {
+    forEachCandidateOfPerson(dragPersonIndex, (i) => {
+      dragMarks[i] = true;
     });
-  } else if (event.altKey) {
-    // 全体移動(人間ごと
-    forEachCandidateOfPerson(dragPersonIndex, (index) => {
-      candidate[index][0] = draggingCandidate[index][0] + dragOffsetX;
-      candidate[index][1] = draggingCandidate[index][1] + dragOffsetY;
+    isDragging = true;
+  } else if (keyDownFlags["Space"]) {
+    var markCount = 0;
+    forEachCandidateOfPerson(dragPersonIndex, (i) => {
+      // dragRangeの範囲内のものだけマーク
+      let distSq = (candidate[i][0] - x) ** 2 + (candidate[i][1] - y) ** 2;
+      if (distSq < dragRange ** 2) {
+        dragMarks[i] = true;
+        markCount++;
+      }
     });
-  } else {
-    // 個別移動
-    candidate[dragIndex][0] = draggingCandidate[dragIndex][0] + dragOffsetX;
-    candidate[dragIndex][1] = draggingCandidate[dragIndex][1] + dragOffsetY;
+    isDragging = 0 < markCount;
+  } else if (minDist < 16) {
+    dragMarks[index] = true;
+    isDragging = true;
   }
-
-  clearCanvas();
-  drawBodyPose(candidate, subset);
 }
 
-// Canvas要素上でマウスが離された場合に呼び出される関数
-function handleMouseUp(event) {
-  isDragging = false;
+// Canvas要素上でマウスが動いた場合に呼び出される関数
+function handleMouseMove(event) {
+  mouseCursor = getCanvasPosition(event);
+  if (isDragging) {
+    const [x, y] = getCanvasPosition(event);
+
+    const dragOffsetX = x - dragStartX;
+    const dragOffsetY = y - dragStartY;
+
+    if (event.ctrlKey) {
+      // 拡大縮小（人間ごと）
+      let xScale = 1 + dragOffsetX / canvas.width;
+      let yScale = 1 + dragOffsetY / canvas.height;
+      forEachMarkedCandidate((index) => {
+        candidate[index][0] = (draggingCandidate[index][0] - dragStartX) * xScale + dragStartX;
+        candidate[index][1] = (draggingCandidate[index][1] - dragStartY) * yScale + dragStartY;
+      });
+    } else if (event.shiftKey) {
+      // 回転（人間ごと）
+      let angle = Math.atan2(dragOffsetY, dragOffsetX);
+      forEachMarkedCandidate((index) => {
+        let x = draggingCandidate[index][0] - dragStartX;
+        let y = draggingCandidate[index][1] - dragStartY;
+        candidate[index][0] = x * Math.cos(angle) - y * Math.sin(angle) + dragStartX;
+        candidate[index][1] = x * Math.sin(angle) + y * Math.cos(angle) + dragStartY;
+      });
+    } else if (event.altKey) {
+      // 全体移動(人間ごと
+      forEachCandidateOfPerson(dragPersonIndex, (index) => {
+        candidate[index][0] = draggingCandidate[index][0] + dragOffsetX;
+        candidate[index][1] = draggingCandidate[index][1] + dragOffsetY;
+      });
+    } else {
+      // 個別移動
+      forEachMarkedCandidate((index) => {
+        if (dragMarks[index]) {
+          candidate[index][0] = draggingCandidate[index][0] + dragOffsetX;
+          candidate[index][1] = draggingCandidate[index][1] + dragOffsetY;
+        }
+      });
+    }
+  }
+
+  Redraw();
 }
 
+function handleMouseUp(event) { isDragging = false; }
+
+document.addEventListener("keydown", (event) => { 
+  if (event.code == "BracketLeft") {dragRange = Math.max(1, dragRange - 8);}
+  if (event.code == "BracketRight") {dragRange = Math.min(256, dragRange + 8);}
+  keyDownFlags[event.code] = true; 
+  Redraw();
+});
+document.addEventListener("keyup", (event) => { 
+  keyDownFlags[event.code] = false; 
+  Redraw();
+});
+
 function initializePose(jsonData,w,h) {
   console.log("initializePose");
   if (jsonData != null) {