From 37e78342699399e758dc4b1245e55a63d64d165a Mon Sep 17 00:00:00 2001
From: joren <joren@ai-c-s.my.domain>
Date: Sun, 29 Mar 2026 23:34:52 +0200
Subject: [PATCH] fix: click-to-jump on volume slider

Added transparent hitarea rect over the full slider area (14px tall).
Handle is pointer-events:none so clicks pass through to hitarea.
Clicking anywhere on the slider bar now jumps volume there.
---
 frontend/src/components/GraphCanvas.svelte | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/GraphCanvas.svelte b/frontend/src/components/GraphCanvas.svelte
index f8f408f..c09fbc2 100644
--- a/frontend/src/components/GraphCanvas.svelte
+++ b/frontend/src/components/GraphCanvas.svelte
@@ -237,8 +237,8 @@
     const pt = svgPoint(e);
     const target = e.target as HTMLElement;
 
-    // Volume slider handle - highest priority
-    if (target.classList.contains('vol-handle') || target.classList.contains('vol-bar') || target.classList.contains('vol-bg')) {
+    // Volume slider - high priority
+    if (target.classList.contains('vol-handle') || target.classList.contains('vol-hitarea')) {
       const nodeEl = target.closest('.node-group');
       if (nodeEl) {
         const nodeId = Number((nodeEl as HTMLElement).dataset.nodeId);
@@ -542,10 +542,12 @@
           text-anchor="middle"
         >{nd.mute ? 'M' : 'm'}</text>
 
-        <!-- Volume bar background -->
-        <rect class="vol-bg" x={nd.x + 8} y={nd.y + nd.height - 12} width={nd.width - 36} height="4" rx="2" fill="#333" />
-        <!-- Volume bar fill (clamped to 1.0 for display) -->
-        <rect class="vol-bar" 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 bar background (visual only) -->
+        <rect x={nd.x + 8} y={nd.y + nd.height - 12} width={nd.width - 36} height="4" rx="2" fill="#333" />
+        <!-- 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" />
         <!-- 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 -->
@@ -798,6 +800,7 @@
   .mute-text { pointer-events: none; }
   .vol-bg { pointer-events: none; }
   .vol-bar { pointer-events: none; }
-  .vol-handle { cursor: ew-resize; }
+  .vol-hitarea { cursor: pointer; }
+  .vol-handle { cursor: ew-resize; pointer-events: none; }
   .vol-handle:hover { filter: brightness(1.3); }
 </style>