rewrite internal data structure

static/poseEditor.js

@@ -2,50 +2,45 @@ console.log("hello from poseEditor.js")
 var canvas = null;
 var ctx = null;
 
-// candidateの形式：[[x1, y1, score1], [x2, y2, score2], ...]
-let candidateSource = [
-    [235, 158, 0.93167633],
-    [234, 220, 0.97106987],
-    [193, 222, 0.93366587],
-    [138, 263, 0.87655306],
-    [89, 308, 0.8868227],
-    [276, 220, 0.9038924],
-    [325, 264, 0.92930061],
-    [375, 309, 0.9217211],
-    [207, 347, 0.86410147],
-    [203, 433, 0.86538297],
-    [199, 523, 0.95236528],
-    [261, 347, 0.88489777],
-    [262, 430, 0.90848708],
-    [261, 522, 0.94749999],
-    [227, 148, 0.94189668],
-    [245, 148, 0.93967074],
-    [208, 158, 0.92053992],
-    [258, 154, 0.73533273]
-];
-
 function deepCopy(arr) {
-    return JSON.parse(JSON.stringify(arr));
+  return JSON.parse(JSON.stringify(arr));
+}
+
+function distSq(p0, p1) {
+  return (p0[0] - p1[0]) ** 2 + (p0[1] - p1[1]) ** 2;
 }
 
-// subsetの形式：[[index1, index2, ..., -1], [index1, index2, ..., -1], ...]
-let subsetSource = [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]];
-let subset = deepCopy(subsetSource);
+// poseDataの形式：[[x1, y1], [x2, y2], ...]
+let poseData = [];
+
+// サンプルデータ  
+const sampleCandidateSource = [[235, 158],[234, 220],[193, 222],[138, 263],[89, 308],[276, 220],[325, 264],[375, 309],[207, 347],[203, 433],[199, 523],[261, 347],[262, 430],[261, 522],[227, 148],[245, 148],[208, 158],[258, 154]];
+const sampleSubsetElementSource = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];
 
-// const candidateSource = [[618.00, 0.00], [618.00, 44.00], [304.00, 81.00], [482.00, 96.00], [66.00, 270.00], [171.00, 280.00], [618.00, 82.00], [307.00, 112.00], [460.00, 143.00], [0.00, 301.00], [65.00, 301.00], [172.00, 303.00], [584.00, 86.00], [275.00, 119.00], [420.00, 139.00], [0.00, 301.00], [41.00, 301.00], [144.00, 303.00], [544.00, 131.00], [348.00, 139.00], [262.00, 160.00], [0.00, 337.00], [52.00, 339.00], [130.00, 348.00], [570.00, 175.00], [283.00, 177.00], [78.00, 338.00], [172.00, 380.00], [651.00, 78.00], [338.00, 111.00], [505.00, 144.00], [92.00, 301.00], [198.00, 305.00], [661.00, 132.00], [349.00, 156.00], [541.00, 179.00], [106.00, 336.00], [203.00, 348.00], [305.00, 159.00], [665.00, 160.00], [563.00, 192.00], [80.00, 343.00], [181.00, 385.00], [614.00, 205.00], [291.00, 220.00], [432.00, 320.00], [152.00, 372.00], [43.00, 380.00], [0.00, 386.00], [623.00, 281.00], [306.00, 290.00], [92.00, 357.00], [509.00, 434.00], [304.00, 357.00], [622.00, 368.00], [47.00, 394.00], [0.00, 395.00], [142.00, 405.00], [535.00, 565.00], [655.00, 200.00], [337.00, 217.00], [467.00, 322.00], [191.00, 372.00], [83.00, 375.00], [344.00, 282.00], [655.00, 282.00], [103.00, 343.00], [237.00, 368.00], [22.00, 377.00], [0.00, 379.00], [460.00, 459.00], [305.00, 352.00], [638.00, 355.00], [0.00, 401.00], [110.00, 412.00], [411.00, 570.00], [608.00, 0.00], [608.00, 40.00], [297.00, 75.00], [469.00, 84.00], [0.00, 261.00], [58.00, 263.00], [165.00, 275.00], [625.00, 0.00], [625.00, 39.00], [309.00, 74.00], [486.00, 83.00], [71.00, 264.00], [180.00, 276.00], [599.00, 0.00], [599.00, 44.00], [284.00, 80.00], [440.00, 93.00], [48.00, 271.00], [0.00, 272.00], [157.00, 277.00], [634.00, 0.00], [633.00, 41.00], [319.00, 77.00], [79.00, 269.00], [190.00, 277.00]];
-// const subset = [[1.00,6.00,12.00,18.00,24.00,28.00,33.00,39.00,43.00,49.00,54.00,59.00,65.00,72.00,77.00,84.00,90.00,97.00,32.98,18.00],[5.00,11.00,17.00,23.00,27.00,32.00,37.00,42.00,46.00,-1.00,-1.00,62.00,67.00,-1.00,82.00,88.00,95.00,100.00,25.45,15.00],[4.00,10.00,16.00,22.00,26.00,31.00,36.00,41.00,47.00,51.00,57.00,63.00,66.00,74.00,81.00,87.00,93.00,99.00,26.97,18.00],[3.00,8.00,14.00,19.00,25.00,30.00,35.00,40.00,45.00,52.00,58.00,61.00,70.00,75.00,79.00,86.00,92.00,-1.00,30.45,17.00],[2.00,7.00,13.00,20.00,-1.00,29.00,34.00,38.00,44.00,50.00,53.00,60.00,64.00,71.00,78.00,85.00,91.00,98.00,27.89,17.00],[0.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,76.00,83.00,-1.00,96.00,3.33,4.00]];
+// const sampleCandidateSource = [[618.00, 0.00], [618.00, 44.00], [304.00, 81.00], [482.00, 96.00], [66.00, 270.00], [171.00, 280.00], [618.00, 82.00], [307.00, 112.00], [460.00, 143.00], [0.00, 301.00], [65.00, 301.00], [172.00, 303.00], [584.00, 86.00], [275.00, 119.00], [420.00, 139.00], [0.00, 301.00], [41.00, 301.00], [144.00, 303.00], [544.00, 131.00], [348.00, 139.00], [262.00, 160.00], [0.00, 337.00], [52.00, 339.00], [130.00, 348.00], [570.00, 175.00], [283.00, 177.00], [78.00, 338.00], [172.00, 380.00], [651.00, 78.00], [338.00, 111.00], [505.00, 144.00], [92.00, 301.00], [198.00, 305.00], [661.00, 132.00], [349.00, 156.00], [541.00, 179.00], [106.00, 336.00], [203.00, 348.00], [305.00, 159.00], [665.00, 160.00], [563.00, 192.00], [80.00, 343.00], [181.00, 385.00], [614.00, 205.00], [291.00, 220.00], [432.00, 320.00], [152.00, 372.00], [43.00, 380.00], [0.00, 386.00], [623.00, 281.00], [306.00, 290.00], [92.00, 357.00], [509.00, 434.00], [304.00, 357.00], [622.00, 368.00], [47.00, 394.00], [0.00, 395.00], [142.00, 405.00], [535.00, 565.00], [655.00, 200.00], [337.00, 217.00], [467.00, 322.00], [191.00, 372.00], [83.00, 375.00], [344.00, 282.00], [655.00, 282.00], [103.00, 343.00], [237.00, 368.00], [22.00, 377.00], [0.00, 379.00], [460.00, 459.00], [305.00, 352.00], [638.00, 355.00], [0.00, 401.00], [110.00, 412.00], [411.00, 570.00], [608.00, 0.00], [608.00, 40.00], [297.00, 75.00], [469.00, 84.00], [0.00, 261.00], [58.00, 263.00], [165.00, 275.00], [625.00, 0.00], [625.00, 39.00], [309.00, 74.00], [486.00, 83.00], [71.00, 264.00], [180.00, 276.00], [599.00, 0.00], [599.00, 44.00], [284.00, 80.00], [440.00, 93.00], [48.00, 271.00], [0.00, 272.00], [157.00, 277.00], [634.00, 0.00], [633.00, 41.00], [319.00, 77.00], [79.00, 269.00], [190.00, 277.00]];
+// const sampleSubsetElementSource = [1.00,6.00,12.00,18.00,24.00,28.00,33.00,39.00,43.00,49.00,54.00,59.00,65.00,72.00,77.00,84.00,90.00,97.00,32.98,18.00],[5.00,11.00,17.00,23.00,27.00,32.00,37.00,42.00,46.00,-1.00,-1.00,62.00,67.00,-1.00,82.00,88.00,95.00,100.00,25.45,15.00],[4.00,10.00,16.00,22.00,26.00,31.00,36.00,41.00,47.00,51.00,57.00,63.00,66.00,74.00,81.00,87.00,93.00,99.00,26.97,18.00],[3.00,8.00,14.00,19.00,25.00,30.00,35.00,40.00,45.00,52.00,58.00,61.00,70.00,75.00,79.00,86.00,92.00,-1.00,30.45,17.00],[2.00,7.00,13.00,20.00,-1.00,29.00,34.00,38.00,44.00,50.00,53.00,60.00,64.00,71.00,78.00,85.00,91.00,98.00,27.89,17.00],[0.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,76.00,83.00,-1.00,96.00,3.33,4.00];
+
+function makePoseFromCandidateAndSubsetElement(candidate, subsetElement) {
+  var pose = [];
+  for (let j = 0 ; j < 18; j++) {
+    pose.push(candidate[subsetElement[j]]);
+  }
+  return pose;
+}
 
-let candidate = candidateSource.map(point => [point[0], point[1] - 70]);  
+function makePoseDataFromCandidateAndSubset(candidate, subset) {
+  return subset.map(subsetElement => makePoseFromCandidateAndSubsetElement(candidate, subsetElement));
+}
 
 function addPerson() {
   var dx = Math.random() * 100;
   var dy = Math.random() * 100;
 
-  newFirst = candidate.length;
-  candidate = candidate.concat(candidateSource.map(point => [point[0] + dx, point[1] + dy]));
-  subset.push(subsetSource[0].map((x, i) => x + newFirst));
-  console.log(candidate);
-  console.log(subset);
+  poseData.push(
+    makePoseFromCandidateAndSubsetElement(
+      sampleCandidateSource.map(point => [point[0] + dx, point[1] + dy]),
+      sampleSubsetElementSource));
+
   Redraw();
 }
 
@@ -69,59 +64,50 @@ function resizeCanvas(width, height) {
   canvas.width = width ? width : canvas.width;
   canvas.height = height ? height : canvas.height;
   clearCanvas();
-  drawBodyPose(candidate, subset);
+  drawBodyPose();
 }
 
-function drawBodyPose(candidate, subset) {
-    const stickWidth = 6;
-    const limbSeq = [[2, 3], [2, 6], [3, 4], [4, 5], [6, 7], [7, 8], [2, 9], [9, 10],
-                 [10, 11], [2, 12], [12, 13], [13, 14], [2, 1], [1, 15], [15, 17],
-                 [1, 16], [16, 18], [3, 17], [6, 18]];
-  
-    const colors = [[255, 0, 0], [255, 85, 0], [255, 170, 0], [255, 255, 0], [170, 255, 0], [85, 255, 0], [0, 255, 0],
-                [0, 255, 85], [0, 255, 170], [0, 255, 255], [0, 170, 255], [0, 85, 255], [0, 0, 255], [85, 0, 255],
-                [170, 0, 255], [255, 0, 255], [255, 0, 170], [255, 0, 85]];
+function drawBodyPose() {
+  const stickWidth = 6;
+  const limbSeq = [[2, 3], [2, 6], [3, 4], [4, 5], [6, 7], [7, 8], [2, 9], [9, 10],
+                [10, 11], [2, 12], [12, 13], [13, 14], [2, 1], [1, 15], [15, 17],
+                [1, 16], [16, 18], [3, 17], [6, 18]];
+
+  const colors = [[255, 0, 0], [255, 85, 0], [255, 170, 0], [255, 255, 0], [170, 255, 0], [85, 255, 0], [0, 255, 0],
+              [0, 255, 85], [0, 255, 170], [0, 255, 255], [0, 170, 255], [0, 85, 255], [0, 0, 255], [85, 0, 255],
+              [170, 0, 255], [255, 0, 255], [255, 0, 170], [255, 0, 85]];
+
+  ctx.globalAlpha = 0.7;
 
-    ctx.globalAlpha = 0.7;
+  for (let i = 0; i < poseData.length; i++) {
+    const pose = poseData[i];
 
     // edge
-    for (let i = 0; i < 17; i++) {
-      for (let n = 0; n < subset.length; n++) {
-        const index0 = subset[n][limbSeq[i][0]-1];
-        const index1 = subset[n][limbSeq[i][1]-1];
-        if (index0 === -1 || index1 === -1) {
-          continue;
-        }
-        const [X0, Y0] = candidate[index0].slice(0, 2);
-        const [X1, Y1] = candidate[index1].slice(0, 2);
-        ctx.beginPath();
-        ctx.lineWidth=stickWidth;
-        ctx.strokeStyle = `rgb(${colors[i].join(',')})`;
-        ctx.moveTo(X0, Y0);
-        ctx.lineTo(X1, Y1);
-        ctx.stroke();
-      }
+    for (let j = 0; j < 17; j++) {
+      const [X0, Y0] = pose[limbSeq[j][0]-1];
+      const [X1, Y1] = pose[limbSeq[j][1]-1];
+      ctx.beginPath();
+      ctx.lineWidth=stickWidth;
+      ctx.strokeStyle = `rgb(${colors[j].join(',')})`;
+      ctx.moveTo(X0, Y0);
+      ctx.lineTo(X1, Y1);
+      ctx.stroke();
     }
 
     // node
     ctx.font = '12px serif';
-    for (let i = 0; i < 18; i++) {
-      for (let n = 0; n < subset.length; n++) {
-        const index = subset[n][i];
-        if (index === -1) {
-          continue;
-        }
-        const [x, y] = candidate[index].slice(0, 2);
-        ctx.beginPath();
-        ctx.arc(x, y, stickWidth*1.2, 0, 2 * Math.PI);
-        ctx.fillStyle = `rgb(${colors[i].join(',')})`;
-        ctx.fill();
-        ctx.fillStyle = 'rgb(255,255,255)'
-        // ctx.fillText(index, x-3, y+4);
-      }
+    for (let j = 0; j < 18; j++) {
+      const [x, y] = pose[j];
+      ctx.beginPath();
+      ctx.arc(x, y, stickWidth*1.2, 0, 2 * Math.PI);
+      ctx.fillStyle = `rgb(${colors[j].join(',')})`;
+      ctx.fill();
+      // ctx.fillStyle = 'rgb(255,255,255)'
+      // ctx.fillText(j, x-3, y+4);
     }
+  }
 
-    ctx.globalAlpha = 1.0;
+  ctx.globalAlpha = 1.0;
 }
 
 function drawUI() {
@@ -136,29 +122,34 @@ function drawUI() {
     ctx.beginPath();
     ctx.lineWidth=1;
     ctx.strokeStyle = 'rgb(255,255,255)';
-    ctx.moveTo(dragStartX, dragStartY);
-    ctx.lineTo(dragStartX+rotateBaseVector[0], dragStartY+rotateBaseVector[1]);
+    ctx.moveTo(dragStart[0], dragStart[1]);
+    ctx.lineTo(dragStart[0]+rotateBaseVector[0], dragStart[1]+rotateBaseVector[1]);
     ctx.stroke();
   }
 }
 
 function Redraw() {
   clearCanvas();
-  drawBodyPose(candidate, subset);
+  drawBodyPose();
   drawUI();
 }
 
-function getNearestCandidate(x, y) {
-    let minDist = Infinity;
-    let minIndex = -1;
-    for (let i = 0; i < candidate.length; i++) {
-      const dist = Math.sqrt((x - candidate[i][0]) ** 2 + (y - candidate[i][1]) ** 2);
-      if (dist < minDist) {
-        minDist = dist;
-        minIndex = i;
+function getNearestNode(p) {
+    let minDistSq = Infinity;
+    let personIndex = -1;
+    let nodeIndex = -1;
+    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]);
+        if (d < minDistSq) {
+          minDistSq = d;
+          personIndex = i;
+          nodeIndex = j;
+        }
       }
     }
-    return [minIndex,minDist];
+    return [personIndex, nodeIndex, Math.sqrt(minDistSq)];
 }
 
 let dragRange = 64;
@@ -166,14 +157,12 @@ let dragRangeDelta = 16;
 
 // ドラッグ中に座標を保持するための変数
 let isDragging = false;
-let dragIndex = -1;
-let dragStartX = 0;
-let dragStartY = 0;
-let draggingCandidate = null;
+let dragStart = [0, 0];
 let dragPersonIndex = -1;
 let dragMarks = [];
 let dragMode = "";
 let rotateBaseVector = null;
+let history = [];
 
 function getCanvasPosition(event) {
   const rect = canvas.getBoundingClientRect();
@@ -182,51 +171,28 @@ function getCanvasPosition(event) {
   return [x, y];
 }
 
-function forEachCandidateOfPerson(personIndex, callback) {
-  if (personIndex === -1) { return; }
-
-  for (let i = 0; i < 18; i++) {
-    const index = subset[personIndex][i];
-    if (index === -1) {
-      continue;
-    }
-    callback(index);
-  }
-}
-
-function forEachMarkedCandidate(callback) {
+function forEachMarkedNodes(fn) {
   for (let i = 0; i < dragMarks.length; i++) {
-    if (dragMarks[i]) {
-      callback(i);
+    for (let j = 0; j < dragMarks[i].length; j++) {
+      if (dragMarks[i][j]) {
+        fn(i, j, poseData[i][j]);
+      }
     }
   }
 }
 
 // Canvas要素上でマウスが押された場合に呼び出される関数
 function handleMouseDown(event) {
-  const [x, y] = getCanvasPosition(event);
-  const [index, minDist] = getNearestCandidate(x, y);
+  const p = getCanvasPosition(event);
+  const [personIndex, nodeIndex, minDist] = getNearestNode(p);
 
   // ドラッグ処理の開始
-  dragIndex = index;
-  dragStartX = x;
-  dragStartY = y;
-  draggingCandidate = JSON.parse(JSON.stringify(candidate))
-  dragMarks = new Array(candidate.length).fill(false);
-
-  // indexが含まれる人間を探す
-  for (let i = 0; i < subset.length; i++) {
-    var found = subset[i].indexOf(index);
-    if (found != -1 && found < 18) {
-      dragPersonIndex = i;
-      break;
-    }
-  }
+  dragStart = p;
+  dragMarks = poseData.map(pose => pose.map(node => false));
 
   if (event.altKey || event.ctrlKey || event.shiftKey) {
-    forEachCandidateOfPerson(dragPersonIndex, (i) => {
-      dragMarks[i] = true;
-    });
+    // dragMarksを設定
+    dragMarks[personIndex] = dragMarks[personIndex].map((node) => true);
     isDragging = true;
     if (event.altKey) {
       dragMode = "move";
@@ -238,19 +204,13 @@ function handleMouseDown(event) {
     }
     console.log(dragMode);
   } 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++;
-      }
-    });
-    isDragging = 0 < markCount;
+    dragMarks[personIndex] = 
+      dragMarks[personIndex].map(
+        (node) => distSq(p, node) < dragRange ** 2);
+    isDragging = dragMarks[personIndex].some((mark) => mark);
     dragMode = "move";
   } else if (minDist < 16) {
-    dragMarks[index] = true;
+    dragMarks[personIndex][nodeIndex] = true;
     isDragging = true;
     dragMode = "move";
   }
@@ -260,21 +220,21 @@ function handleMouseDown(event) {
 function handleMouseMove(event) {
   mouseCursor = getCanvasPosition(event);
   if (isDragging) {
-    const [x, y] = getCanvasPosition(event);
-
-    const dragOffsetX = x - dragStartX;
-    const dragOffsetY = y - dragStartY;
+    const p = getCanvasPosition(event);
+    const dragOffset = [p[0] - dragStart[0], p[1] - dragStart[1]];
+    const lastPoseData = history[history.length - 1];
 
     if (dragMode == "scale") {
       // 拡大縮小
-      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;
+      let xScale = 1 + dragOffset[0] / canvas.width;
+      let yScale = 1 + dragOffset[0] / canvas.height;
+      forEachMarkedNodes((i, j, node) => {
+        const lp = lastPoseData[i][j];
+        node[0] = (lp[0] - dragStart[0]) * xScale + dragStart[0];
+        node[1] = (lp[1] - dragStart[1]) * yScale + dragStart[1];
       });
     } else if (dragMode == "rotate") {
-      rotateBaseVector = [dragOffsetX, dragOffsetY];
+      rotateBaseVector = dragOffset;
       if (!event.shiftKey) {
         dragMode = "rotate2";
         console.log("rotate2");
@@ -282,20 +242,22 @@ function handleMouseMove(event) {
       console.log("!");
     } else if (dragMode == "rotate2") {
       // 回転
-      let angle = directedAngleTo(rotateBaseVector, [dragOffsetX, dragOffsetY]);
-      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;
+      let angle = directedAngleTo(rotateBaseVector, dragOffset);
+      forEachMarkedNodes((i, j, node) => {
+        const lp = lastPoseData[i][j];
+        let x = lp[0] - dragStart[0];
+        let y = lp[1] - dragStart[1];
+        let sin = Math.sin(angle);
+        let cos = Math.cos(angle);
+        node[0] = x * cos - y * sin + dragStart[0];
+        node[1] = x * sin + y * cos + dragStart[1];
       });
     } else if (dragMode == "move") {
       // 移動
-      forEachMarkedCandidate((index) => {
-        if (dragMarks[index]) {
-          candidate[index][0] = draggingCandidate[index][0] + dragOffsetX;
-          candidate[index][1] = draggingCandidate[index][1] + dragOffsetY;
-        }
+      forEachMarkedNodes((i, j, node) => {
+        const lp = lastPoseData[i][j];
+        node[0] = lp[0] + dragOffset[0];
+        node[1] = lp[1] + dragOffset[1];
       });
     }
   }
@@ -305,6 +267,7 @@ function handleMouseMove(event) {
 
 function handleMouseUp(event) {
    isDragging = false; 
+   history.push(JSON.parse(JSON.stringify(poseData)));
    Redraw();
 }
 
@@ -335,9 +298,11 @@ document.addEventListener("keyup", (event) => {
 function initializePose(jsonData,w,h) {
   console.log("initializePose");
   if (jsonData != null) {
-    candidate = jsonData.candidate;
-    subset = jsonData.subset;
+    poseData = makePoseDataFromCandidateAndSubset(jsonData.candidate, jsonData.subset);
+  } else {
+    poseData = makePoseDataFromCandidateAndSubset(sampleCandidateSource, [sampleSubsetElementSource]);
   }
+  history.push(JSON.parse(JSON.stringify(poseData)));
 
   canvas = document.getElementById('canvas');
   ctx = canvas.getContext('2d');