add new rotation method

app.py

@@ -83,8 +83,8 @@ with gr.Blocks() as demo:
   with gr.Row():
     with gr.Column(scale=1):
       startBtn = gr.Button(value="Start edit")
-      width = gr.Slider(label="Width", mininmum=512, maximum=1024, step=64, value=512, key="Width", interactive=True)
-      height = gr.Slider(label="Height", mininmum=512, maximum=1024, step=64, value=512, key="Height", interactive=True)
+      width = gr.Slider(label="Width", minimum=512, maximum=1024, step=64, value=512, interactive=True)
+      height = gr.Slider(label="Height", minimum=512, maximum=1024, step=64, value=512, interactive=True)
       with gr.Accordion(label="Pose estimation", open=False):
         source = gr.Image(type="pil")
         gr.Markdown("""push "Start edit" after estimation done.""")
@@ -107,9 +107,9 @@ with gr.Blocks() as demo:
           gr.Markdown("""
 - "ctrl + drag" to scale
 - "alt + drag" to translate
-- "shift + drag" to rotate(move right first, then up or down)
+- "shift + drag" to rotate(move right first, release shift, then up or down)
 - "space + drag" to move within range
-- "[", "]" to shrink or expand range
+- "[", "]" or mouse wheel to shrink or expand range
 """)
 
   source.change(

static/poseEditor.js

@@ -37,6 +37,10 @@ var keyDownFlags = {};
 // マウスカーソル
 var mouseCursor = [0, 0];
 
+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 clearCanvas() {
   var w = canvas.width;
   var h = canvas.height;
@@ -110,6 +114,15 @@ function drawUI() {
     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(dragStartX, dragStartY);
+    ctx.lineTo(dragStartX+rotateBaseVector[0], dragStartY+rotateBaseVector[1]);
+    ctx.stroke();
+  }
 }
 
 function Redraw() {
@@ -142,6 +155,8 @@ let dragStartY = 0;
 let draggingCandidate = null;
 let dragPersonIndex = -1;
 let dragMarks = [];
+let dragMode = "";
+let rotateBaseVector = null;
 
 function getCanvasPosition(event) {
   const rect = canvas.getBoundingClientRect();
@@ -191,11 +206,20 @@ function handleMouseDown(event) {
     }
   }
 
-  if (event.altKey || event.ctrlKey || event.shiftKe) {
+  if (event.altKey || event.ctrlKey || event.shiftKey) {
     forEachCandidateOfPerson(dragPersonIndex, (i) => {
       dragMarks[i] = true;
     });
     isDragging = true;
+    if (event.altKey) {
+      dragMode = "move";
+    } else if (event.ctrlKey) {
+      dragMode = "scale";
+    } else if (event.shiftKey) {
+      dragMode = "rotate";
+      rotateBaseVector = [0, 0];
+    }
+    console.log(dragMode);
   } else if (keyDownFlags["Space"]) {
     var markCount = 0;
     forEachCandidateOfPerson(dragPersonIndex, (i) => {
@@ -207,9 +231,11 @@ function handleMouseDown(event) {
       }
     });
     isDragging = 0 < markCount;
+    dragMode = "move";
   } else if (minDist < 16) {
     dragMarks[index] = true;
     isDragging = true;
+    dragMode = "move";
   }
 }
 
@@ -222,31 +248,32 @@ function handleMouseMove(event) {
     const dragOffsetX = x - dragStartX;
     const dragOffsetY = y - dragStartY;
 
-    if (event.ctrlKey) {
-      // 拡大縮小（人間ごと）
+    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;
       });
-    } else if (event.shiftKey) {
-      // 回転（人間ごと）
-      let angle = Math.atan2(dragOffsetY, dragOffsetX);
+    } else if (dragMode == "rotate") {
+      rotateBaseVector = [dragOffsetX, dragOffsetY];
+      if (!event.shiftKey) {
+        dragMode = "rotate2";
+        console.log("rotate2");
+      }
+      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;
       });
-    } else if (event.altKey) {
-      // 全体移動(人間ごと
-      forEachCandidateOfPerson(dragPersonIndex, (index) => {
-        candidate[index][0] = draggingCandidate[index][0] + dragOffsetX;
-        candidate[index][1] = draggingCandidate[index][1] + dragOffsetY;
-      });
-    } else {
-      // 個別移動
+    } else if (dragMode == "move") {
+      // 移動
       forEachMarkedCandidate((index) => {
         if (dragMarks[index]) {
           candidate[index][0] = draggingCandidate[index][0] + dragOffsetX;
@@ -259,11 +286,24 @@ function handleMouseMove(event) {
   Redraw();
 }
 
-function handleMouseUp(event) { isDragging = false; }
+function handleMouseUp(event) {
+   isDragging = false; 
+   Redraw();
+}
+
+function ModifyDragRange(delta) { dragRange = Math.max(dragRangeDelta, Math.min(512, dragRange + delta)); }
+
+document.addEventListener('wheel', function(event) {
+  const deltaY = event.deltaY;
+  if (deltaY < 0) {ModifyDragRange(dragRangeDelta);}
+  if (0 < deltaY) {ModifyDragRange(-dragRangeDelta);}
+  Redraw();
+  window.setTimeout(function() { Redraw(); }, 100);
+});
 
 document.addEventListener("keydown", (event) => { 
-  if (event.code == "BracketLeft") {dragRange = Math.max(dragRangeDelta, dragRange - dragRangeDelta);}
-  if (event.code == "BracketRight") {dragRange = Math.min(512, dragRange + dragRangeDelta);}
+  if (event.code == "BracketLeft") { ModifyDragRange(-dragRangeDelta); }
+  if (event.code == "BracketRight") { ModifyDragRange(dragRangeDelta); }
   keyDownFlags[event.code] = true; 
   Redraw();
 });