add undo/redo

static/poseEditor.js

@@ -10,11 +10,13 @@ function distSq(p0, p1) {
   return (p0[0] - p1[0]) ** 2 + (p0[1] - p1[1]) ** 2;
 }
 
-// poseDataの形式：[[x1, y1], [x2, y2], ...]
+// 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 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]].map((p) => [p[0], p[1] - 70]);
 const sampleSubsetElementSource = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];
 
 // 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]];
@@ -41,6 +43,13 @@ function addPerson() {
       sampleCandidateSource.map(point => [point[0] + dx, point[1] + dy]),
       sampleSubsetElementSource));
 
+  addHistory();    
+  Redraw();
+}
+
+function removePerson(personIndex) {
+  poseData.splice(personIndex, 1);
+  addHistory();
   Redraw();
 }
 
@@ -163,6 +172,33 @@ let dragMarks = [];
 let dragMode = "";
 let rotateBaseVector = null;
 let history = [];
+let historyIndex = 0;
+
+function addHistory() {
+  history = history.slice(0, historyIndex);
+  history.push(JSON.parse(JSON.stringify(poseData)));
+  historyIndex = history.length;
+}
+
+function undo() {
+  if (1 < historyIndex) {
+    historyIndex--;
+    poseData = deepCopy(history[historyIndex-1]);
+    Redraw();
+  }   
+}
+
+function redo() {
+  if (historyIndex < history.length) {
+    historyIndex++;
+    poseData = deepCopy(history[historyIndex-1]);
+    Redraw();
+  }   
+}
+
+function fetchLatestPoseData() {
+  return history[historyIndex-1];
+}
 
 function getCanvasPosition(event) {
   const rect = canvas.getBoundingClientRect();
@@ -186,6 +222,11 @@ function handleMouseDown(event) {
   const p = getCanvasPosition(event);
   const [personIndex, nodeIndex, minDist] = getNearestNode(p);
 
+  if (keyDownFlags["KeyQ"]) {
+    removePerson(personIndex);
+    return;
+  }
+
   // ドラッグ処理の開始
   dragStart = p;
   dragMarks = poseData.map(pose => pose.map(node => false));
@@ -202,7 +243,6 @@ function handleMouseDown(event) {
       dragMode = "rotate";
       rotateBaseVector = [0, 0];
     }
-    console.log(dragMode);
   } else if (keyDownFlags["Space"]) {
     dragMarks[personIndex] = 
       dragMarks[personIndex].map(
@@ -222,14 +262,14 @@ function handleMouseMove(event) {
   if (isDragging) {
     const p = getCanvasPosition(event);
     const dragOffset = [p[0] - dragStart[0], p[1] - dragStart[1]];
-    const lastPoseData = history[history.length - 1];
+    const latestPoseData = fetchLatestPoseData();
 
     if (dragMode == "scale") {
       // 拡大縮小
       let xScale = 1 + dragOffset[0] / canvas.width;
       let yScale = 1 + dragOffset[0] / canvas.height;
       forEachMarkedNodes((i, j, node) => {
-        const lp = lastPoseData[i][j];
+        const lp = latestPoseData[i][j];
         node[0] = (lp[0] - dragStart[0]) * xScale + dragStart[0];
         node[1] = (lp[1] - dragStart[1]) * yScale + dragStart[1];
       });
@@ -244,7 +284,7 @@ function handleMouseMove(event) {
       // 回転
       let angle = directedAngleTo(rotateBaseVector, dragOffset);
       forEachMarkedNodes((i, j, node) => {
-        const lp = lastPoseData[i][j];
+        const lp = latestPoseData[i][j];
         let x = lp[0] - dragStart[0];
         let y = lp[1] - dragStart[1];
         let sin = Math.sin(angle);
@@ -255,7 +295,7 @@ function handleMouseMove(event) {
     } else if (dragMode == "move") {
       // 移動
       forEachMarkedNodes((i, j, node) => {
-        const lp = lastPoseData[i][j];
+        const lp = latestPoseData[i][j];
         node[0] = lp[0] + dragOffset[0];
         node[1] = lp[1] + dragOffset[1];
       });
@@ -266,9 +306,9 @@ function handleMouseMove(event) {
 }
 
 function handleMouseUp(event) {
-   isDragging = false; 
-   history.push(JSON.parse(JSON.stringify(poseData)));
-   Redraw();
+  isDragging = false; 
+  addHistory();
+  Redraw();
 }
 
 function ModifyDragRange(delta) { dragRange = Math.max(dragRangeDelta, Math.min(512, dragRange + delta)); }
@@ -289,10 +329,17 @@ document.addEventListener("keydown", (event) => {
 });
 document.addEventListener("keyup", (event) => { 
   keyDownFlags[event.code] = false; 
-  Redraw();
   if (event.code == "KeyA") {
     addPerson();
   }
+  if (event.ctrlKey && event.code == "KeyZ") {
+    if (event.shiftKey) {
+      redo();
+    } else {
+      undo();
+    }
+  }
+  Redraw();
 });
 
 function initializePose(jsonData,w,h) {
@@ -302,7 +349,7 @@ function initializePose(jsonData,w,h) {
   } else {
     poseData = makePoseDataFromCandidateAndSubset(sampleCandidateSource, [sampleSubsetElementSource]);
   }
-  history.push(JSON.parse(JSON.stringify(poseData)));
+  addHistory();
 
   canvas = document.getElementById('canvas');
   ctx = canvas.getContext('2d');