feat: ドラッグ機能の追加とエラーハンドリングの改善

- poseEditorGlobalsにposeDataを追加
- ドラッグ状態の管理を改善し、draggedKeypointを使用
- setupDragEvents関数を実装し、マウスイベントを設定
- キーポイントの位置更新機能を強化
- drawPoseおよびdrawBody関数にハイライト機能を追加
- グローバルposeDataの更新を確実に行うよう修正

static/pose_editor.js

@@ -4,6 +4,7 @@
 window.poseEditorGlobals = {
     canvas: null,
     ctx: null,
+    poseData: null, // 追加！
     isUpdating: false
 };
 
@@ -40,9 +41,9 @@ const SKELETON_COLORS = [
 // キーポイント半径
 const KEYPOINT_RADIUS = 4;
 
-// ドラッグ状態
+// ドラッグ状態（refs互換）
 let isDragging = false;
-let draggedPoint = null;
+let draggedKeypoint = -1;
 let dragOffset = { x: 0, y: 0 };
 
 // デバッグログ関数
@@ -86,7 +87,7 @@ function initializePoseEditor() {
     debugLog("Canvas initialized successfully");
     notifyCanvasStateChange('initialized');
     
-    // ドラッグイベントを設定
+    // ドラッグイベントを設定（refs互換）
     setupDragEvents();
     
     debugLog(`Canvas ready check: canvas=${!!canvas}, ctx=${!!ctx}, isInitialized=${isInitialized}`);
@@ -137,6 +138,259 @@ function showCanvasError(message) {
     ctx.fillText(message, canvas.width / 2, canvas.height / 2);
 }
 
+// ドラッグイベント設定（refs互換）
+function setupDragEvents() {
+    debugLog("setupDragEvents called");
+    
+    if (!canvas) {
+        debugLog("Canvas not available for drag setup");
+        return;
+    }
+    
+    debugLog(`Setting up events on canvas: ${canvas.id}, width: ${canvas.width}, height: ${canvas.height}`);
+    
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+    canvas.addEventListener('mouseleave', handleMouseUp); // Canvas外ドラッグ対策
+    
+    // テスト用クリックイベント
+    canvas.addEventListener('click', function(event) {
+        debugLog(`Canvas clicked at: (${event.clientX}, ${event.clientY})`);
+    });
+    
+    debugLog("Drag events setup completed");
+}
+
+// マウス座標取得（refs互換）
+function getMousePos(event) {
+    const rect = canvas.getBoundingClientRect();
+    return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+    };
+}
+
+// 最寄りのキーポイントを検索（refs互換：戻り値はインデックス）
+function findNearestKeypoint(mouseX, mouseY, maxDistance = 20) {
+    debugLog(`findNearestKeypoint called: (${mouseX}, ${mouseY})`);
+    
+    // グローバルposeDataを参照
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    
+    if (!currentPoseData) {
+        debugLog("No poseData available (global or local)");
+        return -1;
+    }
+    
+    if (!currentPoseData.bodies) {
+        debugLog("No poseData.bodies available");
+        return -1;
+    }
+    
+    if (!currentPoseData.bodies.candidate) {
+        debugLog("No poseData.bodies.candidate available");
+        return -1;
+    }
+    
+    debugLog(`poseData.bodies.candidate length: ${currentPoseData.bodies.candidate.length}`);
+    
+    const candidates = currentPoseData.bodies.candidate;
+    let nearestIndex = -1;
+    let minDistance = maxDistance; // refs互換の閾値
+    
+    // 📐 解像度情報の取得
+    const originalRes = currentPoseData.resolution || [512, 512];
+    const scaleX = canvas.width / originalRes[0];
+    const scaleY = canvas.height / originalRes[1];
+    
+    for (let i = 0; i < Math.min(20, candidates.length); i++) { // つま先込み20個
+        const point = candidates[i];
+        
+        if (point && point[0] > 1 && point[1] > 1 && 
+            point[0] < originalRes[0] && point[1] < originalRes[1]) {
+            
+            // 座標変換を適用
+            const scaledX = point[0] * scaleX;
+            const scaledY = point[1] * scaleY;
+            
+            const distance = Math.sqrt((mouseX - scaledX) ** 2 + (mouseY - scaledY) ** 2);
+            
+            if (distance < minDistance) {
+                minDistance = distance;
+                nearestIndex = i;
+            }
+        }
+    }
+    
+    debugLog(`Nearest keypoint: index=${nearestIndex}, distance=${minDistance.toFixed(1)}`);
+    return nearestIndex; // 🔧 refs互換：インデックス数値を返す
+}
+
+// マウスダウン処理（refs互換）
+function handleMouseDown(event) {
+    debugLog(`handleMouseDown called: ${event.type}`);
+    
+    if (!isCanvasReady()) {
+        debugLog("Canvas not ready for mouse down");
+        return;
+    }
+    
+    const mousePos = getMousePos(event);
+    debugLog(`Mouse position: (${mousePos.x}, ${mousePos.y})`);
+    
+    const keypointIndex = findNearestKeypoint(mousePos.x, mousePos.y);
+    debugLog(`Found keypoint index: ${keypointIndex}`);
+    
+    if (keypointIndex >= 0) {
+        isDragging = true;
+        draggedKeypoint = keypointIndex;
+        
+        // 🔧 refs互換：ドラッグオフセット計算（キーポイントの正確な位置からのオフセット）
+        const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+        if (currentPoseData && currentPoseData.bodies && currentPoseData.bodies.candidate) {
+            const candidates = currentPoseData.bodies.candidate;
+            const originalRes = currentPoseData.resolution || [512, 512];
+            const scaleX = canvas.width / originalRes[0];
+            const scaleY = canvas.height / originalRes[1];
+            
+            const point = candidates[keypointIndex];
+            if (point) {
+                const keypointX = point[0] * scaleX;
+                const keypointY = point[1] * scaleY;
+                
+                dragOffset = {
+                    x: mousePos.x - keypointX,
+                    y: mousePos.y - keypointY
+                };
+                
+                debugLog(`Drag offset calculated: (${dragOffset.x.toFixed(1)}, ${dragOffset.y.toFixed(1)})`);
+            }
+        }
+        
+        debugLog(`Drag started: keypoint ${keypointIndex} at (${mousePos.x}, ${mousePos.y})`);
+        
+        // カーソルを変更
+        canvas.style.cursor = 'grabbing';
+    } else {
+        debugLog("No keypoint found near mouse position");
+    }
+}
+
+// マウス移動処理（refs互換）
+function handleMouseMove(event) {
+    if (!isCanvasReady()) return;
+    
+    const mousePos = getMousePos(event);
+    
+    if (isDragging && draggedKeypoint >= 0) {
+        // 🔧 refs互換：オフセット考慮の新座標計算
+        const newX = mousePos.x - dragOffset.x;
+        const newY = mousePos.y - dragOffset.y;
+        
+        debugLog(`Mouse move: raw(${mousePos.x}, ${mousePos.y}), offset(${dragOffset.x.toFixed(1)}, ${dragOffset.y.toFixed(1)}), new(${newX.toFixed(1)}, ${newY.toFixed(1)})`);
+        
+        // ドラッグ中の座標更新（オフセット適用済み座標で）
+        updateKeypointPosition(draggedKeypoint, newX, newY);
+        
+        // リアルタイム再描画（ハイライト付き）- グローバルposeDataを使用
+        const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+        drawPose(currentPoseData, true, true, draggedKeypoint);
+        
+    } else {
+        // ホバー時のカーソル変更
+        const keypointIndex = findNearestKeypoint(mousePos.x, mousePos.y);
+        canvas.style.cursor = keypointIndex >= 0 ? 'grab' : 'default';
+    }
+}
+
+// マウスアップ処理（refs互換）
+function handleMouseUp(event) {
+    if (isDragging) {
+        debugLog(`Drag ended: keypoint ${draggedKeypoint}`);
+        
+        isDragging = false;
+        draggedKeypoint = -1;
+        canvas.style.cursor = 'default';
+        
+        // Gradioに更新データを送信
+        sendPoseDataToGradio();
+    }
+}
+
+// キーポイント座標更新（refs互換）
+function updateKeypointPosition(keypointIndex, canvasX, canvasY) {
+    // グローバルposeDataを参照
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    
+    if (!currentPoseData || !currentPoseData.bodies || !currentPoseData.bodies.candidate) {
+        debugLog("No poseData available for keypoint update");
+        return;
+    }
+    
+    // 📐 解像度情報の取得
+    const originalRes = currentPoseData.resolution || [512, 512];
+    const scaleX = canvas.width / originalRes[0];
+    const scaleY = canvas.height / originalRes[1];
+    
+    // 🔧 refs互換：Canvas座標をデータ座標に変換してからクランプ
+    const dataX = canvasX / scaleX;
+    const dataY = canvasY / scaleY;
+    
+    // 🔧 refs互換：データ座標系でクランプ（0〜解像度内）
+    const clampedDataX = Math.max(0, Math.min(originalRes[0], dataX));
+    const clampedDataY = Math.max(0, Math.min(originalRes[1], dataY));
+    
+    // candidateリストを更新
+    const candidates = currentPoseData.bodies.candidate;
+    if (keypointIndex < candidates.length) {
+        candidates[keypointIndex][0] = clampedDataX;
+        candidates[keypointIndex][1] = clampedDataY;
+        
+        debugLog(`Updated keypoint ${keypointIndex}: canvas(${canvasX.toFixed(1)}, ${canvasY.toFixed(1)}) → data(${clampedDataX.toFixed(1)}, ${clampedDataY.toFixed(1)})`);
+        
+        // 🔧 ローカルposeDataも同期更新
+        if (poseData && poseData.bodies && poseData.bodies.candidate) {
+            poseData.bodies.candidate[keypointIndex][0] = clampedDataX;
+            poseData.bodies.candidate[keypointIndex][1] = clampedDataY;
+        }
+    }
+}
+
+// Gradioにデータ送信（refs互換）
+function sendPoseDataToGradio() {
+    // グローバルposeDataを参照
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    
+    if (!currentPoseData) {
+        debugLog("No poseData available for Gradio send");
+        return;
+    }
+    
+    try {
+        // JSON文字列化
+        const jsonString = JSON.stringify(currentPoseData);
+        
+        // Gradioのテキストボックスを探して更新
+        const textareas = document.querySelectorAll('textarea');
+        
+        for (const textarea of textareas) {
+            const currentValue = textarea.value || '';
+            if (currentValue.includes('bodies') || currentValue.includes('candidate') || currentValue.trim() === '') {
+                textarea.value = jsonString;
+                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                debugLog('Pose data sent to Gradio successfully');
+                return;
+            }
+        }
+        
+        debugLog('No suitable Gradio textarea found');
+        
+    } catch (error) {
+        debugLog(`Error sending data to Gradio: ${error.message}`);
+    }
+}
+
 // Canvas状態チェック（refs互換）
 function isCanvasReady() {
     const ready = window.poseEditorGlobals.canvas && window.poseEditorGlobals.ctx && isInitialized;
@@ -144,8 +398,8 @@ function isCanvasReady() {
     return ready;
 }
 
-// ポーズ全体の描画
-function drawPose(poseData, enableHands = true, enableFace = true) {
+// ポーズ全体の描画（ハイライト対応）
+function drawPose(poseData, enableHands = true, enableFace = true, highlightIndex = -1) {
     if (!isCanvasReady() || !poseData) return;
     
     const canvas = window.poseEditorGlobals.canvas;
@@ -159,8 +413,8 @@ function drawPose(poseData, enableHands = true, enableFace = true) {
     const scaleX = canvas.width / originalRes[0];
     const scaleY = canvas.height / originalRes[1];
     
-    // ボディの描画
-    drawBody(poseData);
+    // ボディの描画（ハイライト対応）
+    drawBody(poseData, highlightIndex);
     
     // 手の描画（座標変換パラメータ付き）
     if (enableHands && poseData.hands) {
@@ -173,8 +427,8 @@ function drawPose(poseData, enableHands = true, enableFace = true) {
     }
 }
 
-// ボディ描画
-function drawBody(poseData) {
+// ボディ描画（ハイライト対応）
+function drawBody(poseData, highlightIndex = -1) {
     if (!poseData.bodies || !poseData.bodies.candidate) {
         console.log(`[ERROR] 💥 No bodies data found!`);
         return;
@@ -266,9 +520,14 @@ function drawBody(poseData) {
             const scaledX = point[0] * scaleX;
             const scaledY = point[1] * scaleY;
             
-            // 🔧 refs互換: SKELETON_COLORSの配列ベース色分け
-            ctx.fillStyle = SKELETON_COLORS[i % SKELETON_COLORS.length];
-            drawKeypoint(scaledX, scaledY);
+            // 🔧 ハイライト対応: ドラッグ中のキーポイントを強調表示
+            if (i === highlightIndex) {
+                ctx.fillStyle = 'rgb(255,255,0)'; // 黄色でハイライト
+                drawKeypoint(scaledX, scaledY, KEYPOINT_RADIUS + 2); // 少し大きく
+            } else {
+                ctx.fillStyle = SKELETON_COLORS[i % SKELETON_COLORS.length];
+                drawKeypoint(scaledX, scaledY);
+            }
             drawnKeypoints++;
             
             if (i < 5) {  // 最初の5つのキーポイントをログ
@@ -532,6 +791,9 @@ window.gradioCanvasUpdate = function(pose_json_str) {
             poseData = pose_json_str;
         }
         
+        // 🔧 グローバルposeDataを必ず更新（ドラッグ機能のため）
+        window.poseEditorGlobals.poseData = poseData;
+        
         debugLog("gradioCanvasUpdate processing data", poseData);
         
         if (!isCanvasReady()) {
@@ -575,6 +837,9 @@ window.updatePoseData = function(data, enableHands = true, enableFace = true) {
     }
     
     poseData = data;
+    // 🔧 グローバルposeDataも更新（ドラッグ機能のため）
+    window.poseEditorGlobals.poseData = poseData;
+    
     drawPose(poseData, enableHands, enableFace);
 };
 
@@ -652,100 +917,6 @@ function safeCanvasOperation(operation) {
     return safeExecute(operation, "Canvas操作中にエラーが発生しました") !== null;
 }
 
-// ドラッグイベントの設定
-function setupDragEvents() {
-    if (!canvas) return;
-    
-    canvas.addEventListener('mousedown', onMouseDown);
-    canvas.addEventListener('mousemove', onMouseMove);
-    canvas.addEventListener('mouseup', onMouseUp);
-    canvas.addEventListener('mouseleave', onMouseUp);
-}
-
-// マウスイベントハンドラー
-function onMouseDown(event) {
-    if (!poseData) return;
-    
-    const rect = canvas.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-    
-    // 最も近いキーポイントを検索
-    const nearestPoint = findNearestKeypoint(x, y);
-    if (nearestPoint && nearestPoint.distance < KEYPOINT_RADIUS * 2) {
-        isDragging = true;
-        draggedPoint = nearestPoint;
-        dragOffset.x = x - nearestPoint.x;
-        dragOffset.y = y - nearestPoint.y;
-        canvas.style.cursor = 'grabbing';
-        notifyCanvasOperation('キーポイントをドラッグ中');
-    }
-}
-
-function onMouseMove(event) {
-    if (!isDragging || !draggedPoint) return;
-    
-    const rect = canvas.getBoundingClientRect();
-    const x = event.clientX - rect.left - dragOffset.x;
-    const y = event.clientY - rect.top - dragOffset.y;
-    
-    // キーポイントの位置を更新
-    updateKeypointPosition(draggedPoint, x, y);
-    
-    // 再描画
-    drawPose(poseData);
-}
-
-function onMouseUp(event) {
-    if (isDragging) {
-        isDragging = false;
-        draggedPoint = null;
-        canvas.style.cursor = 'crosshair';
-        notifyCanvasOperation('キーポイントの編集完了');
-    }
-}
-
-// 最も近いキーポイントを検索
-function findNearestKeypoint(x, y) {
-    if (!poseData || !poseData.bodies || !poseData.bodies.candidate) return null;
-    
-    let nearest = null;
-    let minDistance = Infinity;
-    
-    const candidates = poseData.bodies.candidate;
-    for (let i = 0; i < candidates.length; i++) {
-        const point = candidates[i];
-        if (point && point.length >= 2) {
-            const dx = x - point[0];
-            const dy = y - point[1];
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            
-            if (distance < minDistance) {
-                minDistance = distance;
-                nearest = {
-                    index: i,
-                    x: point[0],
-                    y: point[1],
-                    distance: distance,
-                    type: 'body'
-                };
-            }
-        }
-    }
-    
-    return nearest;
-}
-
-// キーポイント位置の更新
-function updateKeypointPosition(pointInfo, newX, newY) {
-    if (!poseData || !poseData.bodies || !poseData.bodies.candidate) return;
-    
-    const candidates = poseData.bodies.candidate;
-    if (pointInfo.index >= 0 && pointInfo.index < candidates.length) {
-        candidates[pointInfo.index][0] = newX;
-        candidates[pointInfo.index][1] = newY;
-    }
-}
 
 // 🎨 推定接続の描画（少ないキーポイント用の補間機能）
 function drawEstimatedConnections(candidates, originalRes, scaleX, scaleY) {