static/poseEditor.js

console.log("hello from poseEditor.js")
var canvas = null;
var ctx = null;

const wheelDisplayTime = 500;

const limbSeq = [
  [1, 2], [2, 3], [3, 4], // 右腕
  [1, 5], [5, 6], [6, 7], // 左腕
  [1, 8], [8, 9], [9, 10],  // 右胴→右脚
  [1, 11], [11, 12], [12, 13], // 左胴→左脚
  [1, 0], // 首
  [0, 14], [14, 16], // 右目
  [0, 15], [15, 17] // 左目
];

function findParentNodeIndex(nodeIndex) {
  // limbSeqの各要素の2番目の要素がjointIndexの場合、その要素の1番目の要素を返す
  // 見つからないばあいは-1を返す
  limbIndex = limbSeq.findIndex((limb) => limb[1] === nodeIndex);
  return limbIndex === -1 ? -1 : limbSeq[limbIndex][0];
}

function repairPose(sourcePose) {
  // TODO: ループには対応してないかも
  var pose = sourcePose;
  var newPose = new Array(18)
  for (var k = 0; k < 3; k++) {
    var processed = 0; // イテレーション用
    for (let i = 0; i < 18; i++) {
      if (pose[i] == null) {
        let parent = findParentNodeIndex(i);
        if (parent === -1) {continue;} // あり得ない
        if (pose[parent] == null) {
          console.log(`repair failed(A): ${i} -> parent loss`);
          continue;
        }

        // サンプルデータから引っ張ってくる
        var v = sampleCandidateSource[i].map((x, j) => x - sampleCandidateSource[parent][j]);
        newPose[i] = pose[parent].map((x, j) => x + v[j]);
        console.log(`repaired: ${i} -> ${newPose[newPose.length - 1]}`);
        processed++;
      } else {
        newPose[i] = pose[i].map(x => x);
      }
    }
    if (processed === 0) {break;}
    pose = newPose;
  }
  return newPose;
}

function deepCopy(arr) {
  return JSON.parse(JSON.stringify(arr));
}

function distSq(p0, p1) {
  return (p0[0] - p1[0]) ** 2 + (p0[1] - p1[1]) ** 2;
}

// poseDataの形式：[[[x1, y1], [x2, y2], ...],[[x3, y3], [x4, y4], ...], ...]
// 各要素が人間
// 人間の各要素が関節

function poseDataToCandidateAndSubset(poseData) {
  let candidate = [];
  let subset = [];
  for (let i = 0; i < poseData.length; i++) {
    let person = poseData[i];
    let subsetElement = [];
    for (let j = 0; j < person.length; j++) {
      candidate.push(person[j]);
      subsetElement.push(candidate.length - 1);
    }
    subset.push(subsetElement);
  }
  return [candidate, subset];
}

// サンプルデータ  
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]];
// 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++) {
    let i = subsetElement[j];
    pose.push(i < 0 ? null : candidate[i].map((x)=>x));
  }
  return pose;
}

function makePoseDataFromCandidateAndSubset(candidate, subset) {
  return subset.map(subsetElement => makePoseFromCandidateAndSubsetElement(candidate, subsetElement));
}

function addPerson() {
  var dx = Math.random() * 100;
  var dy = Math.random() * 100;

  poseData.push(
    makePoseFromCandidateAndSubsetElement(
      sampleCandidateSource.map(point => [point[0] + dx, point[1] + dy]),
      sampleSubsetElementSource));

  addHistory();    
  Redraw();
}

function removePerson(personIndex) {
  poseData.splice(personIndex, 1);
  addHistory();
  Redraw();
}

function repairPerson(personIndex) {
  poseData[personIndex] = repairPose(poseData[personIndex]);
  addHistory();
  Redraw();
}

// ドラッグ中の各キーが押されているかどうかのフラグ
var keyDownFlags = {};
// マウスカーソル
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;
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, w, h);
}

function resizeCanvas(width, height) {
  canvas.width = width ? width : canvas.width;
  canvas.height = height ? height : canvas.height;
  Redraw();
}

function calculateCenter(shape) {
  var center = shape.reduce(function(acc, point) {
    if (point === null) {
      acc[0] += point[0];
      acc[1] += point[1];
    }
    return acc;
  }, [0, 0]);
  center[0] /= shape.length;
  center[1] /= shape.length;
  return center;
}

// v2d -> v3d
function rotateX(vector, angle) {
  var x = vector[0];
  var y = vector[1];
  var z = 0;

  // X軸に対して回転する
  var x1 = x;
  var y1 = y * Math.cos(angle) - z * Math.sin(angle);
  var z1 = y * Math.sin(angle) + z * Math.cos(angle);

  return [x1, y1, z1];
}

// v2d -> v3d
function rotateY(vector, angle) {
  var x = vector[0];
  var y = vector[1];
  var z = 0;

  // Y軸に対して回転する
  var x1 = x * Math.cos(angle) + z * Math.sin(angle);
  var y1 = y;
  var z1 = -x * Math.sin(angle) + z * Math.cos(angle);

  return [x1, y1, z1];  
}

// v3d -> v2d
function perspectiveProjection(vector, cameraDistance) {
  var x = vector[0];
  var y = vector[1];
  var z = vector[2];

  if (z === 0) {
    return [x, y];
  }

  var scale = cameraDistance / (cameraDistance - z);
  var x1 = x * scale;
  var y1 = y * scale;

  return [x1, y1];
}  

// v2d -> v3d
function rotateAndProject(f, p, c, angle) {
  var v = [p[0] - c[0], p[1] - c[1]];
  var v1 = f(v, angle);
  var v2 = perspectiveProjection(v1, 500);
  return [v2[0] + c[0], v2[1] + c[1]];
}

function drawBodyPose() {
  const stickWidth = 6;

  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;

  for (let i = 0; i < poseData.length; i++) {
    const pose = poseData[i];

    // edge
    for (let j = 0; j < 17; j++) {
      const p = pose[limbSeq[j][0]];
      const q = pose[limbSeq[j][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(',')})`;
      ctx.moveTo(X0, Y0);
      ctx.lineTo(X1, Y1);
      ctx.stroke();
    }

    // node
    ctx.font = '12px serif';
    for (let j = 0; j < 18; 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(',')})`;
      ctx.fill();
      // ctx.fillStyle = 'rgb(255,255,255)'
      // ctx.fillText(j, x-3, y+4);
    }
  }

  ctx.globalAlpha = 1.0;
}

let lastWheeling = 0;

function drawUI() {
  if (keyDownFlags['Space'] || keyDownFlags['BracketLeft'] || keyDownFlags['BracketRight'] || 
      new Date().getTime() - lastWheeling < wheelDisplayTime) {
    ctx.beginPath();
    ctx.arc(mouseCursor[0], mouseCursor[1], dragRange, 0, 2 * Math.PI);
    ctx.strokeStyle = 'rgb(255,255,255)';
    ctx.stroke();
  }

  if (isDragging && (dragMode == "rotate" || dragMode == "rotate2")) {
    ctx.beginPath();
    ctx.lineWidth=1;
    ctx.strokeStyle = 'rgb(255,255,255)';
    ctx.moveTo(dragStart[0], dragStart[1]);
    ctx.lineTo(dragStart[0]+rotateBaseVector[0], dragStart[1]+rotateBaseVector[1]);
    ctx.stroke();
  }

  let operationTextFlags = {
    "Space": "Range Move",
    "AltLeft": "Body Move",
    "AltRight": "Body Move",
    "ControlLeft": "Scale",
    "ControlRight": "Scale",
    "ShiftLeft": "Rotate",
    "ShiftRight": "Rotate",
    "KeyQ": "Delete",
    "KeyX": "X-Axis",
    "KeyC": "Y-Axis",
    "KeyR": "Repair",
  }

  // operationTextFlagsに含まれるものがkeyDownFlagsに含まれるばあい、そのキーの文字列を取得
  let activeOperations = Object.keys(operationTextFlags).filter(key => keyDownFlags[key]);
  if (activeOperations.length > 0) {
    // 左上に表示
    ctx.font = '20px serif';
    ctx.fillStyle = 'rgb(255,255,255)';
    ctx.fillText(operationTextFlags[activeOperations[0]], 10, 30);
  }
}

function Redraw() {
  clearCanvas();
  drawBodyPose();
  drawUI();
}

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 q = pose[j];
        if (q == null) continue;
        const d = distSq(p, q);
        if (d < minDistSq) {
          minDistSq = d;
          personIndex = i;
          nodeIndex = j;
        }
      }
    }
    return [personIndex, nodeIndex, Math.sqrt(minDistSq)];
}

let dragRange = 64;
let dragRangeDelta = 16;

// ドラッグ中に座標を保持するための変数
let isDragging = false;
let dragStart = [0, 0];
let dragPersonIndex = -1;
let dragMarks = [];
let dragMode = "";
let rotateBaseVector = null;
let history = [];
let historyIndex = 0;

function clearHistory() {
  history = [];
  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();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  return [x, y];
}

function forEachMarkedNodes(fn) {
  for (let i = 0; i < dragMarks.length; 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 p = getCanvasPosition(event);
  const [personIndex, nodeIndex, minDist] = getNearestNode(p);

  if (keyDownFlags["KeyQ"]) {removePerson(personIndex);return;}
  if (keyDownFlags["KeyR"]) {repairPerson(personIndex);return;}

  // ドラッグ処理の開始
  dragStart = p;
  dragMarks = poseData.map(pose => pose.map(node => false));

  if (event.altKey || event.ctrlKey || event.shiftKey ||
      keyDownFlags["KeyX"] || keyDownFlags["KeyC"]) {
    // dragMarksを設定
    dragMarks[personIndex] = 
      poseData[personIndex].map((node) => node != null);
      isDragging = true;
    if (event.altKey) {
      dragMode = "move";
    } else if (event.ctrlKey) {
      dragMode = "scale";
    } else if (event.shiftKey) {
      dragMode = "rotate";
      rotateBaseVector = [0, 0];
    } else if (keyDownFlags["KeyX"]) {
      dragMode = "rotateX";
    } else if (keyDownFlags["KeyC"]) {
      dragMode = "rotateY";
    }
  } else if (keyDownFlags["Space"]) {
    dragMarks[personIndex] = 
      poseData[personIndex].map(
        (node) => node != null && distSq(p, node) < dragRange ** 2);
    isDragging = dragMarks[personIndex].some((mark) => mark);
    dragMode = "move";
  } else if (minDist < 16) {
    dragMarks[personIndex][nodeIndex] = true;
    isDragging = true;
    dragMode = "move";
  }
}

// Canvas要素上でマウスが動いた場合に呼び出される関数
function handleMouseMove(event) {
  mouseCursor = getCanvasPosition(event);
  if (isDragging) {
    const p = getCanvasPosition(event);
    const dragOffset = [p[0] - dragStart[0], p[1] - dragStart[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 = latestPoseData[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 = dragOffset;
      if (!event.shiftKey) {
        dragMode = "rotate2";
      }
    } else if (dragMode == "rotate2") {
      // 回転
      let angle = directedAngleTo(rotateBaseVector, dragOffset);
      forEachMarkedNodes((i, j, node) => {
        const lp = latestPoseData[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 == "rotateX") {
      const center = dragStart;
      const angle = dragOffset[1] / -40;
      forEachMarkedNodes((i, j, node) => {
        const lp = latestPoseData[i][j];
        const np = rotateAndProject(rotateX, lp, center, angle);
        node[0] = np[0];
        node[1] = np[1];
      });
    } else if (dragMode == "rotateY") {
      const center = dragStart;
      const angle = dragOffset[0] / 40;
      forEachMarkedNodes((i, j, node) => {
        const lp = latestPoseData[i][j];
        const np = rotateAndProject(rotateY, lp, center, angle);
        node[0] = np[0];
        node[1] = np[1];
      });
    } else if (dragMode == "move") {
      // 移動
      forEachMarkedNodes((i, j, node) => {
        const lp = latestPoseData[i][j];
        node[0] = lp[0] + dragOffset[0];
        node[1] = lp[1] + dragOffset[1];
      });
    }
  }

  Redraw();
}

function handleMouseUp(event) {
  isDragging = false; 
  addHistory();
  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()) {return;}
  if (!event.altKey) {return;}

  event.preventDefault();
  const deltaY = event.deltaY;
  if (deltaY < 0) {ModifyDragRange(-dragRangeDelta);}
  if (0 < deltaY) {ModifyDragRange(dragRangeDelta);}
  lastWheeling = new Date().getTime();
  Redraw();
  window.setTimeout(function() { Redraw(); }, wheelDisplayTime+10);
}, {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; 
  Redraw();
  event.preventDefault();
});
document.addEventListener("keyup", (event) => { 
  if (!isMouseOnCanvas()) {return;}

  keyDownFlags[event.code] = false; 
  if (event.ctrlKey && event.code == "KeyE") {
    addPerson();
  } else if (event.ctrlKey && event.code == "KeyZ") {
    if (event.shiftKey) {
      redo();
    } else {
      undo();
    }
  }
  Redraw();
  event.preventDefault();
});

function initializeEditor() {
  console.log("initializeEditor");

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  canvas.addEventListener('mousedown', handleMouseDown);
  canvas.addEventListener('mousemove', handleMouseMove);
  canvas.addEventListener('mouseup', handleMouseUp);
  canvas.addEventListener('mouseleave', handleMouseLeave);
  poseData = [];
  clearHistory();
}

function importPose(jsonData) {
  if (jsonData != null) {
    newPoseData = makePoseDataFromCandidateAndSubset(jsonData.candidate, jsonData.subset);
  } else {
    newPoseData = makePoseDataFromCandidateAndSubset(sampleCandidateSource, [sampleSubsetElementSource]);
  }
  poseData = poseData.concat(newPoseData);
  addHistory();
  Redraw();
}

function savePose() {
  const canvasUrl = canvas.toDataURL();

  const createEl = document.createElement('a');
  createEl.href = canvasUrl;

  // This is the name of our downloaded file
  createEl.download = "pose.png";

  createEl.click();
  createEl.remove();

  var [candidate, subset] = poseDataToCandidateAndSubset(poseData);
  return {candidate: candidate, subset: subset};
}