add modifier key guide

app.py

@@ -109,6 +109,10 @@ with gr.Blocks(css="""button { min-width: 80px; }""") as demo:
         json = gr.JSON(label="Json")
         jsonInput = gr.Textbox(label="Json source", lines=10)
         jsonInputBtn = gr.Button(value="Import Json")
+      with gr.Accordion(label="Notes", open=False):
+        gr.Markdown("""
+Points to note for pseudo-3D rotation: When performing pseudo-3D rotation on the X and Y axes, the projection is converted to 2D and Z-axis information is lost when the mouse button is released. This means that if you finish dragging while the shape is collapsed, you may not be able to restore it to its original state. In such a case, please use the "undo" function.
+""")
     with gr.Column(scale=2):
       html = gr.HTML(html_text)
       with gr.Row():
@@ -116,18 +120,19 @@ with gr.Blocks(css="""button { min-width: 80px; }""") as demo:
           saveBtn = gr.Button(value="Save")
         with gr.Column(scale=7):
           gr.Markdown("""
-- "ctrl + drag" to scale
-- "alt + drag" to translate
-- "shift + drag" to rotate(move right first, release shift, then up or down)
-- "space + drag" to move within range
-- "[", "]" or mouse wheel to shrink or expand range
-- "ctrl + z", "shift + ctrl + z" to undo, redo
-- "a" add new person
-- "q + click" to delete person
-- "x + drag" to x-axis pseudo-3D rotation
-- "c + drag" to y-axis pseudo-3D rotation
-- "r + click" to repair
-Points to note for pseudo-3D rotation: When performing pseudo-3D rotation on the X and Y axes, the projection is converted to 2D and Z-axis information is lost when the mouse button is released. This means that if you finish dragging while the shape is collapsed, you may not be able to restore it to its original state. In such a case, please use the "undo" function.
+- "ctrl + drag" to **scale**
+- "alt + drag" to **move**
+- "shift + drag" to **rotate** (move right first, release shift, then up or down)
+- "space + drag" to **range-move**
+- "[", "]" or mouse wheel to shrink or expand **range**
+- "ctrl + z", "shift + ctrl + z" to **undo**, **redo**
+- "ctrl + N" **add** new person
+- "Q + click" to **delete** person
+- "X + drag" to **x-axis** pseudo-3D rotation
+- "C + drag" to **y-axis** pseudo-3D rotation
+- "R + click" to **repair**
+
+When using Q, X, C, R, pressing and dont release until the operation is complete.
 """)
 
   width.change(fn=None, inputs=[width], _js="(w) => { resizeCanvas(w,null); }")

static/poseEditor.js

@@ -2,6 +2,8 @@ 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], // 左腕
@@ -258,7 +260,7 @@ let lastWheeling = 0;
 
 function drawUI() {
   if (keyDownFlags['Space'] || keyDownFlags['BracketLeft'] || keyDownFlags['BracketRight'] || 
-      new Date().getTime() - lastWheeling < 100) {
+      new Date().getTime() - lastWheeling < wheelDisplayTime) {
     ctx.beginPath();
     ctx.arc(mouseCursor[0], mouseCursor[1], dragRange, 0, 2 * Math.PI);
     ctx.strokeStyle = 'rgb(255,255,255)';
@@ -273,6 +275,29 @@ function drawUI() {
     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() {
@@ -480,23 +505,25 @@ function handleMouseUp(event) {
 function ModifyDragRange(delta) { dragRange = Math.max(dragRangeDelta, Math.min(512, dragRange + delta)); }
 
 document.addEventListener('wheel', function(event) {
+  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(); }, 100);
-}, {passive: true});
+  window.setTimeout(function() { Redraw(); }, wheelDisplayTime+10);
+}, {passive: false});
 
 document.addEventListener("keydown", (event) => { 
   if (event.code == "BracketLeft") { ModifyDragRange(-dragRangeDelta); }
   if (event.code == "BracketRight") { ModifyDragRange(dragRangeDelta); }
   keyDownFlags[event.code] = true; 
   Redraw();
+  event.preventDefault();
 });
 document.addEventListener("keyup", (event) => { 
   keyDownFlags[event.code] = false; 
-  if (event.code == "KeyA") {
+  if (event.ctrlKey && event.code == "KeyN") {
     addPerson();
   }
   if (event.ctrlKey && event.code == "KeyZ") {
@@ -507,6 +534,7 @@ document.addEventListener("keyup", (event) => {
     }
   }
   Redraw();
+  event.preventDefault();
 });
 
 function initializeEditor() {