Refactor code structure for improved readability and maintainability

app.py

@@ -68,7 +68,7 @@ def main():
                 # ポーズ描画キャンバス
                 pose_canvas = gr.HTML(
                     elem_id="pose_canvas_container",
-                    value='<canvas id="pose_canvas" width="640" height="640" style="border: 1px solid #ccc; cursor: crosshair;"></canvas>'
+                    value='<canvas id="pose_canvas" width="640" height="640" style="border: 1px solid #ccc;"></canvas>'
                 )
                 
                 # キャンバス設定（超コンパクトなグループ）
@@ -180,8 +180,12 @@ def main():
         
         def on_display_settings_change(draw_hand, draw_face, edit_mode):
             """表示設定変更時"""
-            # JavaScript側で再描画
-            js_code = f"if(poseData) drawPose(poseData, {str(draw_hand).lower()}, {str(draw_face).lower()});"
+            # 🔧 JavaScript設定更新機能を呼び出し
+            js_code = f"""
+            if (window.updateDisplaySettings) {{
+                window.updateDisplaySettings({str(draw_hand).lower()}, {str(draw_face).lower()}, '{edit_mode}');
+            }}
+            """
             return gr.update(value=js_code)
         
         def load_template_pose(template_name):

static/pose_editor.js

@@ -5,7 +5,18 @@ window.poseEditorGlobals = {
     canvas: null,
     ctx: null,
     poseData: null, // 追加！
-    isUpdating: false
+    isUpdating: false,
+    // 🔧 表示・編集設定
+    enableHands: true,
+    enableFace: true,
+    editMode: "簡易モード",  // "簡易モード" or "詳細モード"
+    // 🔧 矩形編集状態（refs互換）
+    rectEditMode: null,        // 'leftHand', 'rightHand', 'face', null
+    rectEditModeActive: false, // 矩形編集モード状態
+    currentRects: { leftHand: null, rightHand: null, face: null },
+    draggedRectControl: null,  // ドラッグ中のコントロールポイント
+    draggedRect: null,         // ドラッグ中の矩形
+    dragStartPos: { x: 0, y: 0 }
 };
 
 let canvas = null;
@@ -83,6 +94,9 @@ function initializePoseEditor() {
     // 初期描画
     clearCanvas();
     
+    // 🔧 デフォルトカーソル設定
+    canvas.style.cursor = 'default';
+    
     isInitialized = true;
     debugLog("Canvas initialized successfully");
     notifyCanvasStateChange('initialized');
@@ -227,7 +241,7 @@ function findNearestKeypoint(mouseX, mouseY, maxDistance = 20) {
     return nearestIndex; // 🔧 refs互換：インデックス数値を返す
 }
 
-// マウスダウン処理（refs互換）
+// マウスダウン処理（refs互換 + 矩形編集対応）
 function handleMouseDown(event) {
     debugLog(`handleMouseDown called: ${event.type}`);
     
@@ -239,78 +253,241 @@ function handleMouseDown(event) {
     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;
+    // 🔧 簡易モードでの矩形編集優先処理
+    if (window.poseEditorGlobals.editMode === "簡易モード") {
+        
+        // 矩形編集モード中の処理
+        if (window.poseEditorGlobals.rectEditModeActive) {
+            const controlPoint = findNearestRectControlPoint(mousePos.x, mousePos.y);
+            debugLog(`Control point search result: ${controlPoint ? JSON.stringify(controlPoint) : 'null'}`);
+            
+            if (controlPoint) {
+                // 🔧 元の矩形座標を保存（重要！）
+                const rectType = window.poseEditorGlobals.rectEditMode;
+                const currentRect = window.poseEditorGlobals.currentRects[rectType];
+                if (currentRect) {
+                    window.poseEditorGlobals.originalRect = { ...currentRect };
+                    debugLog(`🔧 Original rect saved for resize: ${JSON.stringify(window.poseEditorGlobals.originalRect)}`);
+                    
+                    // 🔧 キーポイントの元座標も保存（refs互換）
+                    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+                    if (currentPoseData) {
+                        window.poseEditorGlobals.originalKeypoints = JSON.parse(JSON.stringify(currentPoseData));
+                        debugLog(`🔧 Original keypoints saved for ${rectType}`);
+                    }
+                    
+                    // 🔧 rectEditInfo初期化（キーポイントインデックス情報）
+                    if (!window.poseEditorGlobals.rectEditInfo) {
+                        window.poseEditorGlobals.rectEditInfo = {};
+                    }
+                    
+                    // 矩形タイプごとのキーポイントインデックスを設定
+                    window.poseEditorGlobals.rectEditInfo[rectType] = {
+                        originalRect: { ...currentRect },
+                        keypointIndices: getRectKeypointIndices(rectType)
+                    };
+                    
+                    debugLog(`🔧 rectEditInfo initialized for ${rectType}:`, window.poseEditorGlobals.rectEditInfo[rectType]);
+                }
                 
-                dragOffset = {
-                    x: mousePos.x - keypointX,
-                    y: mousePos.y - keypointY
-                };
+                // コントロールポイントドラッグ（リサイズ）
+                window.poseEditorGlobals.draggedRectControl = controlPoint;
+                window.poseEditorGlobals.dragStartPos = { x: mousePos.x, y: mousePos.y };
+                isDragging = true;
+                debugLog(`Control point drag started: ${controlPoint.type} ${controlPoint.position}`);
+                return;
+            }
+            
+            // 矩形内ドラッグ（移動）
+            const rectType = findRectContaining(mousePos.x, mousePos.y);
+            if (rectType === window.poseEditorGlobals.rectEditMode) {
+                // 🔧 矩形移動時もrectEditInfo初期化
+                const currentRect = window.poseEditorGlobals.currentRects[rectType];
+                if (currentRect) {
+                    if (!window.poseEditorGlobals.rectEditInfo) {
+                        window.poseEditorGlobals.rectEditInfo = {};
+                    }
+                    
+                    window.poseEditorGlobals.rectEditInfo[rectType] = {
+                        originalRect: { ...currentRect },
+                        keypointIndices: getRectKeypointIndices(rectType)
+                    };
+                    
+                    debugLog(`🔧 rectEditInfo initialized for move: ${rectType}`);
+                }
                 
-                debugLog(`Drag offset calculated: (${dragOffset.x.toFixed(1)}, ${dragOffset.y.toFixed(1)})`);
+                window.poseEditorGlobals.draggedRect = rectType;
+                window.poseEditorGlobals.dragStartPos = { x: mousePos.x, y: mousePos.y };
+                isDragging = true;
+                debugLog(`Rectangle move drag started: ${rectType}`);
+                return;
+            }
+            
+            // 他の矩形クリック → 切り替え
+            if (rectType && rectType !== window.poseEditorGlobals.rectEditMode) {
+                window.poseEditorGlobals.rectEditMode = rectType;
+                debugLog(`Switched to rectangle edit mode: ${rectType}`);
+                // 再描画で新しい矩形のコントロールポイントを表示
+                const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+                if (currentPoseData) {
+                    drawPose(currentPoseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace);
+                }
+                return;
+            }
+            
+            // 矩形外クリック → 編集モード終了
+            debugLog("Clicked outside rectangles, exiting edit mode");
+            window.poseEditorGlobals.rectEditModeActive = false;
+            window.poseEditorGlobals.rectEditMode = null;
+            
+            // 再描画でコントロールポイントを非表示
+            const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+            if (currentPoseData) {
+                drawPose(currentPoseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace);
+            }
+            return;
+        }
+        
+        // 矩形編集モードでない場合の矩形クリック → 編集モード開始
+        const rectType = findRectContaining(mousePos.x, mousePos.y);
+        if (rectType) {
+            window.poseEditorGlobals.rectEditModeActive = true;
+            window.poseEditorGlobals.rectEditMode = rectType;
+            debugLog(`Entered rectangle edit mode: ${rectType}`);
+            
+            // 🔧 rectEditInfo全体を初期化（全矩形タイプ対応）
+            initializeRectEditInfo();
+            
+            // 再描画でコントロールポイントを表示
+            const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+            if (currentPoseData) {
+                drawPose(currentPoseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace);
             }
+            return;
         }
+    }
+    
+    // 🔧 詳細モードまたは矩形編集モードでない場合：通常のキーポイント編集
+    if (window.poseEditorGlobals.editMode === "詳細モード" || !window.poseEditorGlobals.rectEditModeActive) {
         
-        debugLog(`Drag started: keypoint ${keypointIndex} at (${mousePos.x}, ${mousePos.y})`);
+        const keypointIndex = findNearestKeypoint(mousePos.x, mousePos.y);
+        debugLog(`Found keypoint index: ${keypointIndex}`);
         
-        // カーソルを変更
-        canvas.style.cursor = 'grabbing';
-    } else {
-        debugLog("No keypoint found near mouse position");
+        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互換）
+// マウス移動処理（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)})`);
+    if (isDragging) {
+        // 🔧 矩形コントロールポイントドラッグ処理
+        if (window.poseEditorGlobals.draggedRectControl) {
+            updateRectControlDrag(mousePos.x, mousePos.y);
+            return;
+        }
         
-        // ドラッグ中の座標更新（オフセット適用済み座標で）
-        updateKeypointPosition(draggedKeypoint, newX, newY);
+        // 🔧 矩形移動ドラッグ処理
+        if (window.poseEditorGlobals.draggedRect) {
+            updateRectMoveDrag(mousePos.x, mousePos.y);
+            return;
+        }
         
-        // リアルタイム再描画（ハイライト付き）- グローバルposeDataを使用
-        const currentPoseData = window.poseEditorGlobals.poseData || poseData;
-        drawPose(currentPoseData, true, true, draggedKeypoint);
+        // 🔧 通常のキーポイントドラッグ処理
+        if (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, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace, draggedKeypoint);
+        }
         
     } else {
-        // ホバー時のカーソル変更
-        const keypointIndex = findNearestKeypoint(mousePos.x, mousePos.y);
-        canvas.style.cursor = keypointIndex >= 0 ? 'grab' : 'default';
+        // 🔧 ホバー時のカーソル変更（編集モードに応じて）
+        if (window.poseEditorGlobals.editMode === "簡易モード" && window.poseEditorGlobals.rectEditModeActive) {
+            // 矩形編集モード中：コントロールポイントまたは矩形内でカーソル変更
+            const controlPoint = findNearestRectControlPoint(mousePos.x, mousePos.y);
+            if (controlPoint) {
+                canvas.style.cursor = getControlPointCursor(controlPoint.position);
+            } else {
+                const rectType = findRectContaining(mousePos.x, mousePos.y);
+                canvas.style.cursor = rectType === window.poseEditorGlobals.rectEditMode ? 'move' : 'default';
+            }
+        } else {
+            // 通常モード：キーポイント近くでカーソル変更
+            const keypointIndex = findNearestKeypoint(mousePos.x, mousePos.y);
+            canvas.style.cursor = keypointIndex >= 0 ? 'grab' : 'default';
+        }
     }
 }
 
-// マウスアップ処理（refs互換）
+// 🔧 コントロールポイント位置に応じたカーソル取得
+function getControlPointCursor(position) {
+    const cursors = {
+        'tl': 'nw-resize', 'tr': 'ne-resize', 'bl': 'sw-resize', 'br': 'se-resize',
+        't': 'n-resize', 'r': 'e-resize', 'b': 's-resize', 'l': 'w-resize'
+    };
+    return cursors[position] || 'pointer';
+}
+
+// マウスアップ処理（refs互換 + 矩形編集対応）
 function handleMouseUp(event) {
     if (isDragging) {
-        debugLog(`Drag ended: keypoint ${draggedKeypoint}`);
+        if (window.poseEditorGlobals.draggedRectControl) {
+            debugLog(`Control point drag ended: ${window.poseEditorGlobals.draggedRectControl.position}`);
+            window.poseEditorGlobals.draggedRectControl = null;
+            window.poseEditorGlobals.originalRect = null; // 🔧 元の矩形情報をクリア
+        } else if (window.poseEditorGlobals.draggedRect) {
+            debugLog(`Rectangle move drag ended: ${window.poseEditorGlobals.draggedRect}`);
+            window.poseEditorGlobals.draggedRect = null;
+        } else if (draggedKeypoint >= 0) {
+            debugLog(`Keypoint drag ended: ${draggedKeypoint}`);
+            draggedKeypoint = -1;
+        }
         
         isDragging = false;
-        draggedKeypoint = -1;
         canvas.style.cursor = 'default';
         
         // Gradioに更新データを送信
@@ -398,32 +575,85 @@ function isCanvasReady() {
     return ready;
 }
 
-// ポーズ全体の描画（ハイライト対応）
+// ポーズ全体の描画（ハイライト対応・設定制御）
 function drawPose(poseData, enableHands = true, enableFace = true, highlightIndex = -1) {
     if (!isCanvasReady() || !poseData) return;
     
+    // 🚀 refs互換：常に最新の編集済みデータを使用
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    
     const canvas = window.poseEditorGlobals.canvas;
     const ctx = window.poseEditorGlobals.ctx;
     
     // キャンバスクリア
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     
+    // 🔧 矩形編集モード中でない場合のみ矩形を再計算
+    if (window.poseEditorGlobals.editMode === "簡易モード" && !window.poseEditorGlobals.rectEditModeActive) {
+        window.poseEditorGlobals.currentRects = { leftHand: null, rightHand: null, face: null };
+    }
+    
     // 📐 解像度情報の取得（手と顔描画のため）
-    const originalRes = poseData.resolution || [512, 512];
+    const originalRes = currentPoseData.resolution || [512, 512];
     const scaleX = canvas.width / originalRes[0];
     const scaleY = canvas.height / originalRes[1];
     
-    // ボディの描画（ハイライト対応）
-    drawBody(poseData, highlightIndex);
+    debugLog(`Drawing pose: hands=${enableHands}, face=${enableFace}, highlight=${highlightIndex}`);
     
-    // 手の描画（座標変換パラメータ付き）
-    if (enableHands && poseData.hands) {
-        drawHands(poseData.hands, originalRes, scaleX, scaleY);
+    // ボディの描画（ハイライト対応）
+    drawBody(currentPoseData, highlightIndex);
+    
+    // 手の描画（設定制御・座標変換パラメータ付き）
+    if (enableHands && currentPoseData.hands) {
+        debugLog(`Drawing hands: ${currentPoseData.hands.length} hand(s)`);
+        // 🚀 refs互換：編集済みのhand_keypoints_2dを優先使用
+        const handsDataForDrawing = currentPoseData.people && currentPoseData.people[0] 
+            ? [
+                currentPoseData.people[0].hand_left_keypoints_2d || (currentPoseData.hands && currentPoseData.hands[0]),
+                currentPoseData.people[0].hand_right_keypoints_2d || (currentPoseData.hands && currentPoseData.hands[1])
+              ]
+            : currentPoseData.hands;
+        drawHands(handsDataForDrawing, originalRes, scaleX, scaleY);
+        
+        // 🔧 簡易モード：手の矩形描画（編集モード中は再計算しない）
+        if (window.poseEditorGlobals.editMode === "簡易モード") {
+            if (!window.poseEditorGlobals.rectEditModeActive) {
+                // 通常時：矩形を新規計算して描画
+                drawHandRectangles(currentPoseData.hands, originalRes, scaleX, scaleY);
+            } else {
+                // 編集モード中：既存の矩形を描画（再計算しない）
+                drawExistingRectangles(['leftHand', 'rightHand']);
+            }
+        }
+    } else if (!enableHands) {
+        debugLog("Hand drawing disabled by setting");
+    } else {
+        debugLog("No hand data available");
     }
     
-    // 顔の描画（座標変換パラメータ付き）
-    if (enableFace && poseData.faces) {
-        drawFaces(poseData.faces, originalRes, scaleX, scaleY);
+    // 顔の描画（設定制御・座標変換パラメータ付き）
+    if (enableFace && currentPoseData.faces) {
+        debugLog(`Drawing faces: ${currentPoseData.faces.length} face(s)`);
+        // 🚀 refs互換：編集済みのface_keypoints_2dを優先使用
+        const facesDataForDrawing = currentPoseData.people && currentPoseData.people[0] && currentPoseData.people[0].face_keypoints_2d 
+            ? [currentPoseData.people[0].face_keypoints_2d] 
+            : currentPoseData.faces;
+        drawFaces(facesDataForDrawing, originalRes, scaleX, scaleY);
+        
+        // 🔧 簡易モード：顔の矩形描画（編集モード中は再計算しない）
+        if (window.poseEditorGlobals.editMode === "簡易モード") {
+            if (!window.poseEditorGlobals.rectEditModeActive) {
+                // 通常時：矩形を新規計算して描画
+                drawFaceRectangles(currentPoseData.faces, originalRes, scaleX, scaleY);
+            } else {
+                // 編集モード中：既存の矩形を描画（再計算しない）
+                drawExistingRectangles(['face']);
+            }
+        }
+    } else if (!enableFace) {
+        debugLog("Face drawing disabled by setting");
+    } else {
+        debugLog("No face data available");
     }
 }
 
@@ -812,9 +1042,13 @@ window.gradioCanvasUpdate = function(pose_json_str) {
         const ctx = window.poseEditorGlobals.ctx;
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         
-        // ポーズ描画
+        // 🔧 グローバル設定で描画（手・顔表示設定を反映）
         if (poseData && Object.keys(poseData).length > 0) {
-            drawPose(poseData, true, true);
+            drawPose(
+                poseData, 
+                window.poseEditorGlobals.enableHands, 
+                window.poseEditorGlobals.enableFace
+            );
         }
         
     } catch (error) {
@@ -848,6 +1082,24 @@ window.getPoseData = function() {
     return poseData;
 };
 
+// 🔧 Gradio設定更新用（新機能）
+window.updateDisplaySettings = function(enableHands, enableFace, editMode) {
+    debugLog(`Settings update: hands=${enableHands}, face=${enableFace}, mode=${editMode}`);
+    
+    // グローバル設定を更新
+    window.poseEditorGlobals.enableHands = enableHands;
+    window.poseEditorGlobals.enableFace = enableFace;
+    window.poseEditorGlobals.editMode = editMode;
+    
+    // 既存データがあれば再描画
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (currentPoseData && Object.keys(currentPoseData).length > 0) {
+        drawPose(currentPoseData, enableHands, enableFace);
+    }
+    
+    debugLog(`Settings updated successfully - Mode: ${editMode}`);
+};
+
 // Gradioトースト通知のトリガー
 window.showToast = function(type, message) {
     debugLog(`Showing toast: ${type} - ${message}`);
@@ -918,6 +1170,968 @@ function safeCanvasOperation(operation) {
 }
 
 
+// 🔧 簡易モード：手の矩形描画（refs互換）
+function drawHandRectangles(handsData, originalRes, scaleX, scaleY) {
+    if (!handsData || handsData.length === 0) return;
+    
+    const ctx = window.poseEditorGlobals.ctx;
+    
+    // 矩形の色定義（refs互換）
+    const HAND_RECT_COLORS = ['rgb(255,165,0)', 'rgb(255,69,0)']; // オレンジ系
+    const HAND_TYPES = ['leftHand', 'rightHand'];
+    
+    handsData.forEach((hand, handIndex) => {
+        if (hand && hand.length > 0) {
+            const rect = calculateHandRect(hand, originalRes, scaleX, scaleY);
+            if (rect) {
+                const handType = HAND_TYPES[handIndex] || `hand_${handIndex}`;
+                
+                // 🔧 グローバルに矩形情報保存
+                window.poseEditorGlobals.currentRects[handType] = rect;
+                
+                drawEditableRect(ctx, rect, HAND_RECT_COLORS[handIndex % 2], handType);
+                debugLog(`Hand ${handIndex} (${handType}) rectangle: ${JSON.stringify(rect)}`);
+            }
+        }
+    });
+}
+
+// 🔧 簡易モード：顔の矩形描画（refs互換）
+function drawFaceRectangles(facesData, originalRes, scaleX, scaleY) {
+    if (!facesData || facesData.length === 0) return;
+    
+    const ctx = window.poseEditorGlobals.ctx;
+    
+    // 矩形の色定義（refs互換）
+    const FACE_RECT_COLOR = 'rgb(34,139,34)'; // 緑
+    
+    const face = facesData[0]; // 最初の顔のみ（編集済みデータ）
+    if (face && face.length > 0) {
+        const rect = calculateFaceRect(face, originalRes, scaleX, scaleY);
+        if (rect) {
+            // 🔧 グローバルに矩形情報保存
+            window.poseEditorGlobals.currentRects.face = rect;
+            
+            drawEditableRect(ctx, rect, FACE_RECT_COLOR, 'face');
+            debugLog(`Face rectangle: ${JSON.stringify(rect)}`);
+        }
+    }
+}
+
+// 🔧 キーポイントから矩形を計算（refs互換）
+function calculateHandRect(handData, originalRes, scaleX, scaleY) {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    let validPointCount = 0;
+    
+    // 3要素ごとに処理（x, y, confidence）
+    for (let i = 0; i < handData.length; i += 3) {
+        const x = handData[i];
+        const y = handData[i + 1];
+        const confidence = handData[i + 2];
+        
+        if (confidence > 0.3) { // refs互換の閾値
+            const scaledX = x * scaleX;
+            const scaledY = y * scaleY;
+            
+            minX = Math.min(minX, scaledX);
+            minY = Math.min(minY, scaledY);
+            maxX = Math.max(maxX, scaledX);
+            maxY = Math.max(maxY, scaledY);
+            validPointCount++;
+        }
+    }
+    
+    if (validPointCount < 3) return null; // 有効ポイントが少なすぎる
+    
+    // 10px余白付きで矩形返却（refs互換）
+    const margin = 10;
+    return {
+        x: minX - margin,
+        y: minY - margin,
+        width: (maxX - minX) + (margin * 2),
+        height: (maxY - minY) + (margin * 2)
+    };
+}
+
+// 🔧 顔キーポイントから矩形を計算（refs互換）
+function calculateFaceRect(faceData, originalRes, scaleX, scaleY) {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    let validPointCount = 0;
+    
+    // 3要素ごとに処理（x, y, confidence）
+    for (let i = 0; i < faceData.length; i += 3) {
+        const x = faceData[i];
+        const y = faceData[i + 1];
+        const confidence = faceData[i + 2];
+        
+        if (confidence > 0.3) { // refs互換の閾値
+            const scaledX = x * scaleX;
+            const scaledY = y * scaleY;
+            
+            minX = Math.min(minX, scaledX);
+            minY = Math.min(minY, scaledY);
+            maxX = Math.max(maxX, scaledX);
+            maxY = Math.max(maxY, scaledY);
+            validPointCount++;
+        }
+    }
+    
+    if (validPointCount < 10) return null; // 顔は多めのポイントが必要
+    
+    // 15px余白付きで矩形返却（顔は少し大きめ）
+    const margin = 15;
+    return {
+        x: minX - margin,
+        y: minY - margin,
+        width: (maxX - minX) + (margin * 2),
+        height: (maxY - minY) + (margin * 2)
+    };
+}
+
+// 🔧 編集可能矩形の描画（refs互換）
+function drawEditableRect(ctx, rect, color, id) {
+    if (!rect) return;
+    
+    // 太め破線で矩形描画（refs互換）
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 3;
+    ctx.setLineDash([8, 8]); // 破線パターン
+    
+    ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    
+    // 🔧 編集モード時のみコントロールポイントを表示（refs互換）
+    if (window.poseEditorGlobals.rectEditModeActive && 
+        window.poseEditorGlobals.rectEditMode === id) {
+        
+        drawRectControlPoints(ctx, rect, color);
+    } else {
+        // 通常時は角のポイントのみ（小さめ）
+        const controlSize = 6;
+        ctx.fillStyle = color;
+        ctx.setLineDash([]); // 実線に戻す
+        
+        // 4角のコントロールポイント
+        const corners = [
+            { x: rect.x, y: rect.y }, // 左上
+            { x: rect.x + rect.width, y: rect.y }, // 右上
+            { x: rect.x, y: rect.y + rect.height }, // 左下
+            { x: rect.x + rect.width, y: rect.y + rect.height } // 右下
+        ];
+        
+        corners.forEach(corner => {
+            ctx.fillRect(corner.x - controlSize/2, corner.y - controlSize/2, controlSize, controlSize);
+        });
+    }
+}
+
+// 🔧 既存の矩形を描画（編集モード中用）
+function drawExistingRectangles(rectTypes) {
+    const ctx = window.poseEditorGlobals.ctx;
+    const colorMap = {
+        'leftHand': 'rgb(255,165,0)',   // オレンジ
+        'rightHand': 'rgb(255,69,0)',   // 濃いオレンジ
+        'face': 'rgb(34,139,34)'        // 緑
+    };
+    
+    rectTypes.forEach(rectType => {
+        const rect = window.poseEditorGlobals.currentRects[rectType];
+        if (rect) {
+            const color = colorMap[rectType] || 'rgb(255,165,0)';
+            drawEditableRect(ctx, rect, color, rectType);
+            debugLog(`Drew existing rectangle: ${rectType}`);
+        }
+    });
+}
+
+// 🔧 矩形再計算なしの描画（編集中専用）
+function redrawPoseWithoutRecalculation() {
+    if (!isCanvasReady()) return;
+    
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (!currentPoseData) return;
+    
+    const canvas = window.poseEditorGlobals.canvas;
+    const ctx = window.poseEditorGlobals.ctx;
+    
+    // キャンバスクリア
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // 📐 解像度情報の取得
+    const originalRes = currentPoseData.resolution || [512, 512];
+    const scaleX = canvas.width / originalRes[0];
+    const scaleY = canvas.height / originalRes[1];
+    
+    // ボディの描画（ハイライトなし）
+    drawBody(currentPoseData, -1);
+    
+    // 手の描画（設定制御・座標変換パラメータ付き）
+    if (window.poseEditorGlobals.enableHands && currentPoseData.hands) {
+        drawHands(currentPoseData.hands, originalRes, scaleX, scaleY);
+    }
+    
+    // 顔の描画（設定制御・座標変換パラメータ付き）
+    if (window.poseEditorGlobals.enableFace && currentPoseData.faces) {
+        drawFaces(currentPoseData.faces, originalRes, scaleX, scaleY);
+    }
+    
+    // 🔧 既存の���形のみ描画（再計算なし）
+    if (window.poseEditorGlobals.editMode === "簡易モード") {
+        const allRectTypes = ['leftHand', 'rightHand', 'face'];
+        drawExistingRectangles(allRectTypes);
+    }
+    
+    debugLog("Redraw completed without rectangle recalculation");
+}
+
+// 🔧 矩形コントロールポイント描画（編集モード時）
+function drawRectControlPoints(ctx, rect, color) {
+    const controlSize = 10;
+    ctx.fillStyle = color;
+    ctx.strokeStyle = 'white';
+    ctx.lineWidth = 2;
+    ctx.setLineDash([]); // 実線
+    
+    // 8つのコントロールポイント（4角 + 4辺の中央）
+    const controlPoints = [
+        { x: rect.x, y: rect.y, type: 'corner', position: 'tl' },                    // 左上
+        { x: rect.x + rect.width, y: rect.y, type: 'corner', position: 'tr' },      // 右上
+        { x: rect.x, y: rect.y + rect.height, type: 'corner', position: 'bl' },     // 左下
+        { x: rect.x + rect.width, y: rect.y + rect.height, type: 'corner', position: 'br' }, // 右下
+        { x: rect.x + rect.width / 2, y: rect.y, type: 'edge', position: 't' },     // 上辺
+        { x: rect.x + rect.width, y: rect.y + rect.height / 2, type: 'edge', position: 'r' }, // 右辺
+        { x: rect.x + rect.width / 2, y: rect.y + rect.height, type: 'edge', position: 'b' }, // 下辺
+        { x: rect.x, y: rect.y + rect.height / 2, type: 'edge', position: 'l' }     // 左辺
+    ];
+    
+    controlPoints.forEach(point => {
+        // 白い枠付きの四角形
+        ctx.fillRect(point.x - controlSize/2, point.y - controlSize/2, controlSize, controlSize);
+        ctx.strokeRect(point.x - controlSize/2, point.y - controlSize/2, controlSize, controlSize);
+    });
+}
+
+// 🔧 点が矩形内にあるかチェック（refs互換）
+function isPointInRect(x, y, rect) {
+    if (!rect) return false;
+    return x >= rect.x && x <= rect.x + rect.width &&
+           y >= rect.y && y <= rect.y + rect.height;
+}
+
+// 🔧 どの矩形にクリックが含まれてるか探す（refs互換）
+function findRectContaining(x, y) {
+    const rects = window.poseEditorGlobals.currentRects;
+    
+    if (rects.leftHand && isPointInRect(x, y, rects.leftHand)) {
+        return 'leftHand';
+    }
+    if (rects.rightHand && isPointInRect(x, y, rects.rightHand)) {
+        return 'rightHand';
+    }
+    if (rects.face && isPointInRect(x, y, rects.face)) {
+        return 'face';
+    }
+    
+    return null;
+}
+
+// 🔧 矩形コントロールポイント検出（refs互換）
+function findNearestRectControlPoint(x, y) {
+    const rectType = window.poseEditorGlobals.rectEditMode;
+    debugLog(`findNearestRectControlPoint: rectType=${rectType}, mouse=(${x.toFixed(1)}, ${y.toFixed(1)})`);
+    
+    if (!rectType) {
+        debugLog("No rectEditMode active");
+        return null;
+    }
+    
+    const rect = window.poseEditorGlobals.currentRects[rectType];
+    if (!rect) {
+        debugLog(`No rect found for ${rectType}`);
+        return null;
+    }
+    
+    debugLog(`Target rect: ${JSON.stringify(rect)}`);
+    
+    const threshold = 15; // クリック判定の閾値
+    
+    // 8つのコントロールポイント
+    const controlPoints = [
+        { x: rect.x, y: rect.y, type: 'corner', position: 'tl' },                    // 左上
+        { x: rect.x + rect.width, y: rect.y, type: 'corner', position: 'tr' },      // 右上
+        { x: rect.x, y: rect.y + rect.height, type: 'corner', position: 'bl' },     // 左下
+        { x: rect.x + rect.width, y: rect.y + rect.height, type: 'corner', position: 'br' }, // 右下
+        { x: rect.x + rect.width / 2, y: rect.y, type: 'edge', position: 't' },     // 上辺
+        { x: rect.x + rect.width, y: rect.y + rect.height / 2, type: 'edge', position: 'r' }, // 右辺
+        { x: rect.x + rect.width / 2, y: rect.y + rect.height, type: 'edge', position: 'b' }, // 下辺
+        { x: rect.x, y: rect.y + rect.height / 2, type: 'edge', position: 'l' }     // 左辺
+    ];
+    
+    // 最も近いコントロールポイントを探す
+    let nearestPoint = null;
+    let minDistance = Infinity;
+    
+    debugLog(`Checking ${controlPoints.length} control points with threshold=${threshold}`);
+    
+    for (const point of controlPoints) {
+        const distance = Math.sqrt((x - point.x) ** 2 + (y - point.y) ** 2);
+        debugLog(`Control point ${point.position}: (${point.x.toFixed(1)}, ${point.y.toFixed(1)}) distance=${distance.toFixed(1)}`);
+        
+        if (distance < threshold && distance < minDistance) {
+            minDistance = distance;
+            nearestPoint = point;
+            debugLog(`New nearest point: ${point.position} at distance ${distance.toFixed(1)}`);
+        }
+    }
+    
+    if (nearestPoint) {
+        debugLog(`Found control point: ${nearestPoint.position}`);
+    } else {
+        debugLog(`No control point found within threshold ${threshold}`);
+    }
+    
+    return nearestPoint;
+}
+
+// 🔧 矩形コントロールポイ���トドラッグ処理（refs互換・絶対座標計算）
+function updateRectControlDrag(mouseX, mouseY) {
+    const controlPoint = window.poseEditorGlobals.draggedRectControl;
+    const rectType = window.poseEditorGlobals.rectEditMode;
+    
+    debugLog(`updateRectControlDrag called: mouse=(${mouseX.toFixed(1)}, ${mouseY.toFixed(1)}), control=${controlPoint ? controlPoint.position : 'null'}, rectType=${rectType}`);
+    
+    if (!controlPoint) {
+        debugLog("No draggedRectControl found");
+        return;
+    }
+    
+    if (!rectType) {
+        debugLog("No rectEditMode found");
+        return;
+    }
+    
+    // 🔧 元の矩形座標を取得（初回保存済み）
+    const originalRect = window.poseEditorGlobals.originalRect;
+    if (!originalRect) {
+        debugLog("Original rect not found");
+        return;
+    }
+    
+    debugLog(`Original rect: ${JSON.stringify(originalRect)}`);
+    
+    // 🔧 絶対座標で新しい矩形を計算（refs互換）
+    let newRect = { ...originalRect };
+    
+    // コントロールポイントの位置に応じて絶対座標で計算
+    switch (controlPoint.position) {
+        case 'tl': // 左上
+            newRect.width = originalRect.width + (originalRect.x - mouseX);
+            newRect.height = originalRect.height + (originalRect.y - mouseY);
+            newRect.x = mouseX;
+            newRect.y = mouseY;
+            break;
+        case 'tr': // 右上
+            newRect.width = mouseX - originalRect.x;
+            newRect.height = originalRect.height + (originalRect.y - mouseY);
+            newRect.y = mouseY;
+            break;
+        case 'bl': // 左下
+            newRect.width = originalRect.width + (originalRect.x - mouseX);
+            newRect.height = mouseY - originalRect.y;
+            newRect.x = mouseX;
+            break;
+        case 'br': // 右下
+            newRect.width = mouseX - originalRect.x;
+            newRect.height = mouseY - originalRect.y;
+            break;
+        case 't': // 上辺
+            newRect.y = mouseY;
+            newRect.height = originalRect.height + (originalRect.y - mouseY);
+            break;
+        case 'r': // 右辺
+            newRect.width = mouseX - originalRect.x;
+            break;
+        case 'b': // 下辺
+            newRect.height = mouseY - originalRect.y;
+            break;
+        case 'l': // 左辺
+            newRect.x = mouseX;
+            newRect.width = originalRect.width + (originalRect.x - mouseX);
+            break;
+    }
+    
+    // 🔧 最小サイズ制限（refs互換）
+    const minSize = 20;
+    if (newRect.width < minSize) {
+        if (controlPoint.position.includes('l')) {
+            newRect.x = newRect.x + newRect.width - minSize;
+        }
+        newRect.width = minSize;
+    }
+    if (newRect.height < minSize) {
+        if (controlPoint.position.includes('t')) {
+            newRect.y = newRect.y + newRect.height - minSize;
+        }
+        newRect.height = minSize;
+    }
+    
+    // 🔧 矩形を更新（累積変形防止のため直接設定）
+    window.poseEditorGlobals.currentRects[rectType] = newRect;
+    
+    // debugLog(`Rect control drag: ${rectType} ${controlPoint.position} -> ${newRect.x.toFixed(1)},${newRect.y.toFixed(1)} ${newRect.width.toFixed(1)}x${newRect.height.toFixed(1)}`);
+    
+    // 🔧 手・顔キーポイントの座標も更新（refs互換シンプル版）
+    updateKeypointsByRectSimple(rectType, newRect);
+    
+    // 🚀 refs互換：編集中もリアルタイム描画
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (currentPoseData) {
+        drawPose(
+            currentPoseData, 
+            window.poseEditorGlobals.enableHands, 
+            window.poseEditorGlobals.enableFace
+        );
+    }
+}
+
+// 🔧 rectEditInfo全体初期化（矩形編集モード開始時）
+function initializeRectEditInfo() {
+    debugLog('🚀 Initializing rectEditInfo for all rect types');
+    
+    if (!window.poseEditorGlobals.rectEditInfo) {
+        window.poseEditorGlobals.rectEditInfo = {};
+    }
+    
+    const rectTypes = ['face', 'leftHand', 'rightHand'];
+    
+    for (const rectType of rectTypes) {
+        const currentRect = window.poseEditorGlobals.currentRects[rectType];
+        if (currentRect) {
+            window.poseEditorGlobals.rectEditInfo[rectType] = {
+                originalRect: { ...currentRect },
+                keypointIndices: getRectKeypointIndices(rectType)
+            };
+            debugLog(`🔧 rectEditInfo initialized: ${rectType}`, window.poseEditorGlobals.rectEditInfo[rectType]);
+        }
+    }
+    
+    // 元のキーポイントも保存
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (currentPoseData) {
+        window.poseEditorGlobals.originalKeypoints = JSON.parse(JSON.stringify(currentPoseData));
+        debugLog('🔧 Original keypoints saved for all rect types');
+    }
+}
+
+// 🔧 矩形タイプに対応するキーポ���ントインデックスを取得（refs互換：詳細キーポイントのみ）
+function getRectKeypointIndices(rectType) {
+    // 🔧 refs互換：矩形編集では体のキーポイントは編集しない、詳細キーポイントのみ
+    // 体のキーポイント（pose_keypoints_2d）は触らずに、詳細キーポイントのみを編集
+    return [];  // 空配列を返して体のキーポイント編集を無効化
+}
+
+// 🔧 refs互換のシンプル矩形キーポイント更新
+// 🚀 refs互換：シンプル矩形編集（detail keypointsのみ）
+function updateKeypointsByRectSimple(rectType, newRect) {
+    debugLog(`🚀 updateKeypointsByRectSimple for ${rectType}`);
+    
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (!currentPoseData || !currentPoseData.people || !currentPoseData.people[0]) {
+        debugLog('❌ No pose data');
+        return;
+    }
+    
+    const person = currentPoseData.people[0];
+    const originalRect = window.poseEditorGlobals.originalRect;
+    
+    if (!originalRect) {
+        debugLog('❌ No original rect saved');
+        return;
+    }
+    
+    // 🚀 refs互換：detail keypointsを直接リサイズ
+    updateDetailKeypointsByRect(rectType, originalRect, newRect);
+    
+    debugLog(`✅ Updated keypoints for ${rectType}`);
+}
+
+// 🚀 refs互換：シンプル矩形移動（detail keypointsのみ）
+function moveKeypointsByRectSimple(rectType, deltaX, deltaY) {
+    debugLog(`🚀 moveKeypointsByRectSimple for ${rectType}: delta=(${deltaX.toFixed(1)}, ${deltaY.toFixed(1)})`);
+    
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (!currentPoseData || !currentPoseData.people || !currentPoseData.people[0]) {
+        debugLog('❌ No pose data');
+        return;
+    }
+    
+    const person = currentPoseData.people[0];
+    
+    // 🚀 refs互換：detail keypointsを直接移動
+    if (rectType === 'leftHand' && person.hand_left_keypoints_2d) {
+        moveKeypointsArray(person.hand_left_keypoints_2d, deltaX, deltaY, 'left_hand');
+    } else if (rectType === 'rightHand' && person.hand_right_keypoints_2d) {
+        moveKeypointsArray(person.hand_right_keypoints_2d, deltaX, deltaY, 'right_hand');
+    } else if (rectType === 'face' && person.face_keypoints_2d) {
+        moveKeypointsArray(person.face_keypoints_2d, deltaX, deltaY, 'face');
+    }
+    
+    debugLog(`✅ Moved keypoints for ${rectType}`);
+}
+
+// 🚀 refs互換：detail keypointsをリサイズ（originalKeypointsから復元）
+function updateDetailKeypointsByRect(rectType, originalRect, newRect) {
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    const originalKeypoints = window.poseEditorGlobals.originalKeypoints;
+    
+    if (!currentPoseData || !originalKeypoints || 
+        !currentPoseData.people || !originalKeypoints.people ||
+        !currentPoseData.people[0] || !originalKeypoints.people[0]) {
+        debugLog('❌ No pose data available for detail rect update');
+        return;
+    }
+    
+    const person = currentPoseData.people[0];
+    const originalPerson = originalKeypoints.people[0];
+    
+    if (rectType === 'leftHand' && person.hand_left_keypoints_2d && originalPerson.hand_left_keypoints_2d) {
+        updateKeypointsArrayByRect(person.hand_left_keypoints_2d, originalPerson.hand_left_keypoints_2d, originalRect, newRect, 'left_hand');
+    } else if (rectType === 'rightHand' && person.hand_right_keypoints_2d && originalPerson.hand_right_keypoints_2d) {
+        updateKeypointsArrayByRect(person.hand_right_keypoints_2d, originalPerson.hand_right_keypoints_2d, originalRect, newRect, 'right_hand');
+    } else if (rectType === 'face' && person.face_keypoints_2d && originalPerson.face_keypoints_2d) {
+        updateKeypointsArrayByRect(person.face_keypoints_2d, originalPerson.face_keypoints_2d, originalRect, newRect, 'face');
+    }
+}
+
+// 🔧 キーポイント配列をリサイズ（3要素ずつ）
+function updateKeypointsArrayByRect(keypointsArray, originalKeypointsArray, originalRect, newRect, label) {
+    let updatedCount = 0;
+    
+    for (let i = 0; i < keypointsArray.length; i += 3) {
+        if (i + 2 < keypointsArray.length && i + 2 < originalKeypointsArray.length) {
+            const confidence = originalKeypointsArray[i + 2];
+            if (confidence > 0.1) {  // 有効なキーポイントのみ
+                const origX = originalKeypointsArray[i];
+                const origY = originalKeypointsArray[i + 1];
+                
+                if (origX > 0 && origY > 0) {
+                    // 🚀 座標変換：表示座標→データ座標（シンプル版）
+                    const scaleX = 640 / 512; // 1.25
+                    const scaleY = 640 / 512; // 1.25
+                    
+                    const origRectDataX = originalRect.x / scaleX;
+                    const origRectDataY = originalRect.y / scaleY;
+                    const newRectDataX = newRect.x / scaleX;
+                    const newRectDataY = newRect.y / scaleY;
+                    const origRectWidthData = originalRect.width / scaleX;
+                    const origRectHeightData = originalRect.height / scaleY;
+                    const newRectWidthData = newRect.width / scaleX;
+                    const newRectHeightData = newRect.height / scaleY;
+                    
+                    // 元矩形内の相対位置を計算
+                    const relativeX = (origX - origRectDataX) / origRectWidthData;
+                    const relativeY = (origY - origRectDataY) / origRectHeightData;
+                    
+                    // 新矩形での絶対位置を計算（データ座標）
+                    const newX = newRectDataX + (relativeX * newRectWidthData);
+                    const newY = newRectDataY + (relativeY * newRectHeightData);
+                    
+                    // キーポイント更新（512x512にクランプ）
+                    keypointsArray[i] = Math.max(0, Math.min(512, newX));
+                    keypointsArray[i + 1] = Math.max(0, Math.min(512, newY));
+                    
+                    updatedCount++;
+                }
+            }
+        }
+    }
+    
+    debugLog(`Updated ${updatedCount} ${label} detail keypoints by rect transform`);
+}
+
+// 🔧 手と顔の詳細キーポイントを移動（refs互換）
+function moveDetailKeypoints(rectType, deltaX, deltaY) {
+    debugLog(`🎯 moveDetailKeypoints called: ${rectType}, delta=(${deltaX.toFixed(1)}, ${deltaY.toFixed(1)})`);
+    
+    const person = window.poseEditorGlobals.poseData.people[0];
+    
+    if (rectType === 'leftHand' && person.hand_left_keypoints_2d) {
+        debugLog(`🔧 Moving left hand keypoints: ${person.hand_left_keypoints_2d.length} elements`);
+        moveKeypointsArray(person.hand_left_keypoints_2d, deltaX, deltaY, 'left_hand');
+    } else if (rectType === 'rightHand' && person.hand_right_keypoints_2d) {
+        debugLog(`🔧 Moving right hand keypoints: ${person.hand_right_keypoints_2d.length} elements`);
+        moveKeypointsArray(person.hand_right_keypoints_2d, deltaX, deltaY, 'right_hand');
+    } else if (rectType === 'face' && person.face_keypoints_2d) {
+        debugLog(`🔧 Moving face keypoints: ${person.face_keypoints_2d.length} elements`);
+        moveKeypointsArray(person.face_keypoints_2d, deltaX, deltaY, 'face');
+    } else {
+        debugLog(`❌ No matching detail keypoints for ${rectType}:`, {
+            hasLeftHand: !!person.hand_left_keypoints_2d,
+            hasRightHand: !!person.hand_right_keypoints_2d,
+            hasFace: !!person.face_keypoints_2d
+        });
+    }
+}
+
+// 🔧 キーポイント配列を移動（3要素ずつ）
+function moveKeypointsArray(keypointsArray, deltaX, deltaY, label) {
+    let movedCount = 0;
+    
+    for (let i = 0; i < keypointsArray.length; i += 3) {
+        if (i + 2 < keypointsArray.length) {
+            const confidence = keypointsArray[i + 2];
+            if (confidence > 0.1) {  // 有効なキーポイントのみ
+                const currentX = keypointsArray[i];
+                const currentY = keypointsArray[i + 1];
+                
+                // 🚀 座標変換：表示座標の移動量→データ座標の移動量（シンプル版）
+                const scaleX = 640 / 512; // 1.25
+                const scaleY = 640 / 512; // 1.25
+                const dataDeltaX = deltaX / scaleX;
+                const dataDeltaY = deltaY / scaleY;
+                
+                // 移動（512x512にクランプ）
+                const newX = Math.max(0, Math.min(512, currentX + dataDeltaX));
+                const newY = Math.max(0, Math.min(512, currentY + dataDeltaY));
+                
+                keypointsArray[i] = newX;
+                keypointsArray[i + 1] = newY;
+                
+                movedCount++;
+            }
+        }
+    }
+    
+    debugLog(`Moved ${movedCount} ${label} detail keypoints by (${deltaX.toFixed(1)}, ${deltaY.toFixed(1)})`);
+}
+
+// 🔧 矩形移動ドラッグ処理（refs互換）
+function updateRectMoveDrag(mouseX, mouseY) {
+    const rectType = window.poseEditorGlobals.draggedRect;
+    if (!rectType) return;
+    
+    const rect = window.poseEditorGlobals.currentRects[rectType];
+    if (!rect) return;
+    
+    // ドラッグ量を計算
+    const deltaX = mouseX - window.poseEditorGlobals.dragStartPos.x;
+    const deltaY = mouseY - window.poseEditorGlobals.dragStartPos.y;
+    
+    // 開始位置を更新（連続ドラッグ対応）
+    window.poseEditorGlobals.dragStartPos.x = mouseX;
+    window.poseEditorGlobals.dragStartPos.y = mouseY;
+    
+    // 矩形位置を移動
+    rect.x += deltaX;
+    rect.y += deltaY;
+    
+    // Canvas境界制限
+    const canvas = window.poseEditorGlobals.canvas;
+    rect.x = Math.max(0, Math.min(canvas.width - rect.width, rect.x));
+    rect.y = Math.max(0, Math.min(canvas.height - rect.height, rect.y));
+    
+    // 矩形を更新
+    window.poseEditorGlobals.currentRects[rectType] = rect;
+    
+    debugLog(`Rect move drag: ${rectType} moved by (${deltaX.toFixed(1)}, ${deltaY.toFixed(1)})`);
+    
+    // 手・顔キーポイントの座標も移動（refs互換シンプル版）
+    moveKeypointsByRectSimple(rectType, deltaX, deltaY);
+    
+    // 🚀 refs互換：編集中もリアルタイム描画
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (currentPoseData) {
+        drawPose(
+            currentPoseData, 
+            window.poseEditorGlobals.enableHands, 
+            window.poseEditorGlobals.enableFace
+        );
+    }
+}
+
+// 🔧 矩形タイプに応じた色取得
+function getColorForRectType(rectType) {
+    const colors = {
+        'leftHand': 'rgb(255,165,0)',   // オレンジ
+        'rightHand': 'rgb(255,69,0)',   // 濃いオレンジ
+        'face': 'rgb(34,139,34)'        // 緑
+    };
+    return colors[rectType] || 'rgb(255,165,0)';
+}
+
+// 🔧 矩形リサイズに合わせてキーポイント更新（refs互換）
+function updateKeypointsByRect(rectType, newRect) {
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (!currentPoseData) return;
+    
+    // 元矩形情報を取得
+    const originalRect = window.poseEditorGlobals.originalRect;
+    if (!originalRect) return;
+    
+    debugLog(`🔧 Updating ${rectType} keypoints: original=${JSON.stringify(originalRect)}, new=${JSON.stringify(newRect)}`);
+    
+    // 最小サイズ制限（refs互換）
+    const minSize = 20;
+    if (newRect.width < minSize || newRect.height < minSize) {
+        debugLog(`Rectangle too small, skipping update`);
+        return;
+    }
+    
+    // 変換比率を計算
+    const scaleX = newRect.width / originalRect.width;
+    const scaleY = newRect.height / originalRect.height;
+    
+    debugLog(`Transform ratios: scaleX=${scaleX.toFixed(3)}, scaleY=${scaleY.toFixed(3)}`);
+    
+    // 対象キーポイントデータを取得（refs互換の構造もサポート）
+    let targetKeypoints = null;
+    let fieldName = null;
+    
+    // まず新しい構造（people[0].xxx_keypoints_2d）をチェック
+    if (currentPoseData.people && currentPoseData.people[0]) {
+        const person = currentPoseData.people[0];
+        if (rectType === 'leftHand' && person.hand_left_keypoints_2d) {
+            targetKeypoints = person.hand_left_keypoints_2d;
+            fieldName = 'hand_left_keypoints_2d';
+        } else if (rectType === 'rightHand' && person.hand_right_keypoints_2d) {
+            targetKeypoints = person.hand_right_keypoints_2d;
+            fieldName = 'hand_right_keypoints_2d';
+        } else if (rectType === 'face' && person.face_keypoints_2d) {
+            targetKeypoints = person.face_keypoints_2d;
+            fieldName = 'face_keypoints_2d';
+        }
+    }
+    
+    // 古い構造（hands[], faces[]）にフォールバック
+    if (!targetKeypoints) {
+        if (rectType === 'leftHand' && currentPoseData.hands && currentPoseData.hands[0]) {
+            targetKeypoints = currentPoseData.hands[0];
+        } else if (rectType === 'rightHand' && currentPoseData.hands && currentPoseData.hands[1]) {
+            targetKeypoints = currentPoseData.hands[1];
+        } else if (rectType === 'face' && currentPoseData.faces && currentPoseData.faces[0]) {
+            targetKeypoints = currentPoseData.faces[0];
+        }
+    }
+    
+    if (!targetKeypoints) {
+        debugLog(`No keypoints found for ${rectType}`);
+        return;
+    }
+    
+    // 📐 解像度情報の取得（refs互換）
+    let dataResolutionWidth = 512;  // デフォルト値
+    let dataResolutionHeight = 512;
+    
+    // metadata.resolutionをチェック（refs形式）
+    if (currentPoseData.metadata && 
+        currentPoseData.metadata.resolution &&
+        Array.isArray(currentPoseData.metadata.resolution) &&
+        currentPoseData.metadata.resolution.length >= 2) {
+        dataResolutionWidth = currentPoseData.metadata.resolution[0];
+        dataResolutionHeight = currentPoseData.metadata.resolution[1];
+    } else if (currentPoseData.resolution) {
+        // 通常のresolutionフィールド
+        dataResolutionWidth = currentPoseData.resolution[0];
+        dataResolutionHeight = currentPoseData.resolution[1];
+    }
+    
+    const coordScaleX = canvas.width / dataResolutionWidth;
+    const coordScaleY = canvas.height / dataResolutionHeight;
+    
+    // 正規化座標かピクセル座標かを判定（refs互換）
+    let isNormalized = false;
+    if (targetKeypoints.length > 0) {
+        for (let i = 0; i < targetKeypoints.length; i += 3) {
+            if (i + 2 < targetKeypoints.length && targetKeypoints[i + 2] > 0) {
+                const x = targetKeypoints[i];
+                const y = targetKeypoints[i + 1];
+                isNormalized = (x >= 0 && x <= 1 && y >= 0 && y <= 1);
+                break;
+            }
+        }
+    }
+    
+    debugLog(`Coordinate system: ${isNormalized ? 'Normalized' : 'Pixel'}, fieldName: ${fieldName || 'legacy'}, dataRes: ${dataResolutionWidth}x${dataResolutionHeight}`);
+    
+    let updatedCount = 0;
+    
+    // 各キーポイントを変換（3要素ずつ：x, y, confidence）
+    for (let i = 0; i < targetKeypoints.length; i += 3) {
+        if (i + 2 < targetKeypoints.length) {
+            const confidence = targetKeypoints[i + 2];
+            if (confidence > 0.1) { // refs互換の閾値
+                let x = targetKeypoints[i];
+                let y = targetKeypoints[i + 1];
+                
+                // データ座標→Canvas座標
+                let canvasX, canvasY;
+                if (isNormalized) {
+                    canvasX = (x * dataResolutionWidth) * coordScaleX;
+                    canvasY = (y * dataResolutionHeight) * coordScaleY;
+                } else {
+                    canvasX = x * coordScaleX;
+                    canvasY = y * coordScaleY;
+                }
+                
+                // 🔧 元矩形内での相対位置を計算（refs互換・安全範囲チェック）
+                let relativeX = (canvasX - originalRect.x) / originalRect.width;
+                let relativeY = (canvasY - originalRect.y) / originalRect.height;
+                
+                // 🔧 相対位置を0-1の範囲内にクランプ（refs互換）
+                relativeX = Math.max(0, Math.min(1, relativeX));
+                relativeY = Math.max(0, Math.min(1, relativeY));
+                
+                // 🔧 新矩形での新しい位置を計算
+                const newCanvasX = newRect.x + (relativeX * newRect.width);
+                const newCanvasY = newRect.y + (relativeY * newRect.height);
+                
+                // 🔧 Canvas座標→データ座標に戻す（refs互換・範囲制限付き）
+                if (isNormalized) {
+                    const dataX = newCanvasX / coordScaleX;
+                    const dataY = newCanvasY / coordScaleY;
+                    let newNormX = dataX / dataResolutionWidth;
+                    let newNormY = dataY / dataResolutionHeight;
+                    
+                    // 正規化座標の範囲制限（0-1）
+                    newNormX = Math.max(0, Math.min(1, newNormX));
+                    newNormY = Math.max(0, Math.min(1, newNormY));
+                    
+                    targetKeypoints[i] = newNormX;
+                    targetKeypoints[i + 1] = newNormY;
+                } else {
+                    let newDataX = newCanvasX / coordScaleX;
+                    let newDataY = newCanvasY / coordScaleY;
+                    
+                    // ピクセル座標の範囲制限
+                    newDataX = Math.max(0, Math.min(dataResolutionWidth, newDataX));
+                    newDataY = Math.max(0, Math.min(dataResolutionHeight, newDataY));
+                    
+                    targetKeypoints[i] = newDataX;
+                    targetKeypoints[i + 1] = newDataY;
+                }
+                
+                updatedCount++;
+                
+                // 🔧 デバッグログ（最初の3つのキーポイントのみ）
+                if (updatedCount <= 3) {
+                    debugLog(`Keypoint ${updatedCount}: (${x.toFixed(3)}, ${y.toFixed(3)}) -> canvas(${canvasX.toFixed(1)}, ${canvasY.toFixed(1)}) -> rel(${relativeX.toFixed(3)}, ${relativeY.toFixed(3)}) -> new(${targetKeypoints[i].toFixed(3)}, ${targetKeypoints[i + 1].toFixed(3)})`);
+                }
+            }
+        }
+    }
+    
+    debugLog(`Updated ${updatedCount} keypoints for ${rectType} [${isNormalized ? 'normalized' : 'pixel'} coordinates]`);
+    
+    // 矩形情報を更新（refs互換）
+    if (window.poseEditorGlobals.rects) {
+        window.poseEditorGlobals.rects[rectType] = newRect;
+    }
+}
+
+// 🔧 矩形移動に合わせてキーポイント移動（refs互換）
+function moveKeypointsByRect(rectType, deltaX, deltaY) {
+    const currentPoseData = window.poseEditorGlobals.poseData || poseData;
+    if (!currentPoseData) return;
+    
+    debugLog(`Moving ${rectType} keypoints by (${deltaX.toFixed(1)}, ${deltaY.toFixed(1)})`);
+    
+    // 対象キーポイントデータを取得（refs互換の構造もサポート）
+    let targetKeypoints = null;
+    let fieldName = null;
+    
+    // まず新しい構造（people[0].xxx_keypoints_2d）をチェック
+    if (currentPoseData.people && currentPoseData.people[0]) {
+        const person = currentPoseData.people[0];
+        if (rectType === 'leftHand' && person.hand_left_keypoints_2d) {
+            targetKeypoints = person.hand_left_keypoints_2d;
+            fieldName = 'hand_left_keypoints_2d';
+        } else if (rectType === 'rightHand' && person.hand_right_keypoints_2d) {
+            targetKeypoints = person.hand_right_keypoints_2d;
+            fieldName = 'hand_right_keypoints_2d';
+        } else if (rectType === 'face' && person.face_keypoints_2d) {
+            targetKeypoints = person.face_keypoints_2d;
+            fieldName = 'face_keypoints_2d';
+        }
+    }
+    
+    // 古い構造（hands[], faces[]）にフォールバック
+    if (!targetKeypoints) {
+        if (rectType === 'leftHand' && currentPoseData.hands && currentPoseData.hands[0]) {
+            targetKeypoints = currentPoseData.hands[0];
+        } else if (rectType === 'rightHand' && currentPoseData.hands && currentPoseData.hands[1]) {
+            targetKeypoints = currentPoseData.hands[1];
+        } else if (rectType === 'face' && currentPoseData.faces && currentPoseData.faces[0]) {
+            targetKeypoints = currentPoseData.faces[0];
+        }
+    }
+    
+    if (!targetKeypoints) {
+        debugLog(`No keypoints found for ${rectType}`);
+        return;
+    }
+    
+    // 📐 解像度情報の取得（refs互換）
+    let dataResolutionWidth = 512;  // デフォルト値
+    let dataResolutionHeight = 512;
+    
+    // metadata.resolutionをチェック（refs形式）
+    if (currentPoseData.metadata && 
+        currentPoseData.metadata.resolution &&
+        Array.isArray(currentPoseData.metadata.resolution) &&
+        currentPoseData.metadata.resolution.length >= 2) {
+        dataResolutionWidth = currentPoseData.metadata.resolution[0];
+        dataResolutionHeight = currentPoseData.metadata.resolution[1];
+    } else if (currentPoseData.resolution) {
+        // 通常のresolutionフィールド
+        dataResolutionWidth = currentPoseData.resolution[0];
+        dataResolutionHeight = currentPoseData.resolution[1];
+    }
+    
+    const coordScaleX = canvas.width / dataResolutionWidth;
+    const coordScaleY = canvas.height / dataResolutionHeight;
+    
+    // 正規化座標かピクセル座標かを判定（refs互換）
+    let isNormalized = false;
+    if (targetKeypoints.length > 0) {
+        for (let i = 0; i < targetKeypoints.length; i += 3) {
+            if (i + 2 < targetKeypoints.length && targetKeypoints[i + 2] > 0) {
+                const x = targetKeypoints[i];
+                const y = targetKeypoints[i + 1];
+                isNormalized = (x >= 0 && x <= 1 && y >= 0 && y <= 1);
+                break;
+            }
+        }
+    }
+    
+    // Canvas座標での移動量をデータ座標での移動量に変換
+    const dataDeltaX = deltaX / coordScaleX;
+    const dataDeltaY = deltaY / coordScaleY;
+    
+    debugLog(`Coordinate system: ${isNormalized ? 'Normalized' : 'Pixel'}, move in data coords: (${dataDeltaX.toFixed(3)}, ${dataDeltaY.toFixed(3)})`);
+    
+    let movedCount = 0;
+    
+    // 各キーポイントを移動（3要素ずつ：x, y, confidence）
+    for (let i = 0; i < targetKeypoints.length; i += 3) {
+        if (i + 2 < targetKeypoints.length) {
+            const confidence = targetKeypoints[i + 2];
+            if (confidence > 0.1) { // refs互換の閾値
+                if (isNormalized) {
+                    // 正規化座標の場合
+                    targetKeypoints[i] += dataDeltaX / dataResolutionWidth;
+                    targetKeypoints[i + 1] += dataDeltaY / dataResolutionHeight;
+                } else {
+                    // ピクセル座標の場合
+                    targetKeypoints[i] += dataDeltaX;
+                    targetKeypoints[i + 1] += dataDeltaY;
+                }
+                movedCount++;
+            }
+        }
+    }
+    
+    debugLog(`Moved ${movedCount} keypoints for ${rectType}`);
+}
+
 // 🎨 推定接続の描画（少ないキーポイント用の補間機能）
 function drawEstimatedConnections(candidates, originalRes, scaleX, scaleY) {
     const ctx = window.poseEditorGlobals.ctx;