support undetected nodes

app.py

@@ -95,7 +95,7 @@ with gr.Blocks() as demo:
 | Import | Paste json to "Json source" and click "Import Json", edit the width/height, then click "Start edit". |
 | Export | click "Save" and "Copy to clipboard" of "Json" section.                                             |
 """)
-        json = gr.JSON(label="Json", lines=10)
+        json = gr.JSON(label="Json")
         jsonInput = gr.Textbox(label="Json source", lines=10)
         jsonInputBtn = gr.Button(value="Import Json")
     with gr.Column(scale=2):

static/poseEditor.js

@@ -25,7 +25,8 @@ const sampleSubsetElementSource = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,
 function makePoseFromCandidateAndSubsetElement(candidate, subsetElement) {
   var pose = [];
   for (let j = 0 ; j < 18; j++) {
-    pose.push(candidate[subsetElement[j]]);
+    let i = subsetElement[j];
+    pose.push(i < 0 ? null : candidate[i]);
   }
   return pose;
 }
@@ -93,8 +94,11 @@ function drawBodyPose() {
 
     // edge
     for (let j = 0; j < 17; j++) {
-      const [X0, Y0] = pose[limbSeq[j][0]-1];
-      const [X1, Y1] = pose[limbSeq[j][1]-1];
+      const p = pose[limbSeq[j][0]-1];
+      const q = pose[limbSeq[j][1]-1];
+      if (p == null || q == null) continue;
+      const [X0, Y0] = p;
+      const [X1, Y1] = q;
       ctx.beginPath();
       ctx.lineWidth=stickWidth;
       ctx.strokeStyle = `rgb(${colors[j].join(',')})`;
@@ -106,7 +110,9 @@ function drawBodyPose() {
     // node
     ctx.font = '12px serif';
     for (let j = 0; j < 18; j++) {
-      const [x, y] = pose[j];
+      const p = pose[j];
+      if (p == null) continue;
+      const [x, y] = p;
       ctx.beginPath();
       ctx.arc(x, y, stickWidth*1.2, 0, 2 * Math.PI);
       ctx.fillStyle = `rgb(${colors[j].join(',')})`;
@@ -150,7 +156,9 @@ function getNearestNode(p) {
     for (let i = 0; i < poseData.length; i++) {
       const pose = poseData[i];
       for (let j = 0; j < pose.length; j++) {
-        const d = distSq(p, pose[j]);
+        const q = pose[j];
+        if (q == null) continue;
+        const d = distSq(p, q);
         if (d < minDistSq) {
           minDistSq = d;
           personIndex = i;
@@ -233,8 +241,9 @@ function handleMouseDown(event) {
 
   if (event.altKey || event.ctrlKey || event.shiftKey) {
     // dragMarksを設定
-    dragMarks[personIndex] = dragMarks[personIndex].map((node) => true);
-    isDragging = true;
+    dragMarks[personIndex] = 
+      poseData[personIndex].map((node) => node != null);
+      isDragging = true;
     if (event.altKey) {
       dragMode = "move";
     } else if (event.ctrlKey) {
@@ -245,8 +254,8 @@ function handleMouseDown(event) {
     }
   } else if (keyDownFlags["Space"]) {
     dragMarks[personIndex] = 
-      dragMarks[personIndex].map(
-        (node) => distSq(p, node) < dragRange ** 2);
+      poseData[personIndex].map(
+        (node) => node != null && distSq(p, node) < dragRange ** 2);
     isDragging = dragMarks[personIndex].some((mark) => mark);
     dragMode = "move";
   } else if (minDist < 16) {
@@ -277,9 +286,7 @@ function handleMouseMove(event) {
       rotateBaseVector = dragOffset;
       if (!event.shiftKey) {
         dragMode = "rotate2";
-        console.log("rotate2");
       }
-      console.log("!");
     } else if (dragMode == "rotate2") {
       // 回転
       let angle = directedAngleTo(rotateBaseVector, dragOffset);