From 3609a50dd2dceb01eca048f9292a7bf5d7cc3ed3 Mon Sep 17 00:00:00 2001
From: joren <joren@ai-c-s.my.domain>
Date: Mon, 30 Mar 2026 01:22:30 +0200
Subject: [PATCH] fix: volume slider click position using element
 getBoundingClientRect

- Rewrote applyVolumeAtMouse to use hitarea element's screen rect directly
- Works correctly regardless of zoom/pan level
- Made hitarea taller (18px) for easier grabbing
---
 frontend/src/components/GraphCanvas.svelte | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/GraphCanvas.svelte b/frontend/src/components/GraphCanvas.svelte
index 391bf72..85532cb 100644
--- a/frontend/src/components/GraphCanvas.svelte
+++ b/frontend/src/components/GraphCanvas.svelte
@@ -236,12 +236,14 @@
   function applyVolumeAtMouse(e: MouseEvent, nodeId: number) {
     const nd = graphNodes.find(n => n.id === nodeId);
     if (!nd || !svgEl) return;
-    const volX = nd.x + 8;
-    const volW = nd.width - 36;
-    const svgRect = svgEl.getBoundingClientRect();
-    // Convert mouse X to SVG coordinate
-    const mouseSvgX = viewBox.x + (e.clientX - svgRect.left) * viewBox.w / svgRect.width;
-    const ratio = (mouseSvgX - volX) / volW;
+
+    // Get the hitarea SVG element's screen rect directly
+    const hitarea = svgEl.querySelector(`.node-group[data-node-id="${nodeId}"] .vol-hitarea`);
+    if (!hitarea) return;
+    const rect = (hitarea as SVGElement).getBoundingClientRect();
+
+    // Ratio from left edge of hitarea
+    const ratio = (e.clientX - rect.left) / rect.width;
     const clamped = Math.max(0, Math.min(1, ratio));
     setNodeVolume(nodeId, clamped);
   }
@@ -656,7 +658,7 @@
         <!-- Volume bar fill (visual only, clamped to 1.0) -->
         <rect x={nd.x + 8} y={nd.y + nd.height - 12} width={(nd.width - 36) * Math.max(0, Math.min(1, nd.volume))} height="4" rx="2" fill={nd.mute ? '#666' : '#4a9'} />
         <!-- Volume click/drag hit area (tall transparent rect over the whole slider) -->
-        <rect class="vol-hitarea" x={nd.x + 8} y={nd.y + nd.height - 18} width={nd.width - 36} height="14" fill="transparent" />
+        <rect class="vol-hitarea" x={nd.x + 8} y={nd.y + nd.height - 20} width={nd.width - 36} height="18" fill="transparent" />
         <!-- Volume handle circle -->
         <circle class="vol-handle" cx={nd.x + 8 + (nd.width - 36) * Math.max(0, Math.min(1, nd.volume))} cy={nd.y + nd.height - 10} r="3.5" fill={nd.mute ? '#888' : '#6cb'} stroke="#fff" stroke-width="1" />
         <!-- Volume % label -->