Joren/pwweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: click-to-jump on volume slider

Browse Source 
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.
This commit is contained in:
joren
2026-03-29 23:34:52 +02:00
parent 0b50400f69
commit 37e7834269
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/GraphCanvas.svelte
View File

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