From 0c98c830b382d66c420524ff395e12164a566dd8 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Fri, 6 Feb 2026 22:53:29 +0100
Subject: feat(spectral_editor): Add cursor-centered zoom and pan with mouse
 wheel

Implemented zoom and pan system for the spectral editor:

Core Features:
- Viewport offset system (viewportOffsetX, viewportOffsetY) for panning
- Three wheel interaction modes:
  * Ctrl/Cmd + wheel: Cursor-centered zoom (both axes)
  * Shift + wheel: Horizontal pan
  * Normal wheel: Vertical pan
- Zoom range: 0.5-20.0x horizontal, 0.1-5.0x vertical
- Zoom factor: 0.9/1.1 per wheel notch (10% change)

Technical Implementation:
- Calculate data position under cursor before zoom
- Apply zoom to pixelsPerFrame and pixelsPerBin
- Adjust viewport offsets to keep cursor position stable
- Clamp offsets to valid ranges (0 to max content size)
- Updated all coordinate conversion functions (screenToSpectrogram, spectrogramToScreen)
- Updated playhead rendering with visibility check
- Reset viewport offsets on file load

Algorithm (cursor-centered zoom):
1. Calculate frame and frequency under cursor: pos = (screen + offset) / scale
2. Apply zoom: scale *= zoomFactor
3. Adjust offset: offset = pos * scale - screen
4. Clamp offset to [0, maxOffset]

This matches the zoom behavior of the timeline editor, adapted for 2D spectrogram display.

handoff(Claude): Spectral editor zoom implementation complete
---
 tools/editor/style.css | 79 --------------------------------------------------
 1 file changed, 79 deletions(-)
 delete mode 100644 tools/editor/style.css

(limited to 'tools/editor/style.css')

diff --git a/tools/editor/style.css b/tools/editor/style.css
deleted file mode 100644
index e0014cf..0000000
--- a/tools/editor/style.css
+++ /dev/null
@@ -1,79 +0,0 @@
-body {
-  font-family: sans-serif;
-  margin: 20px;
-  background-color: #f4f4f4;
-}
-
-h1, h2 {
-  color: #333;
-}
-
-#editorContainer {
-  display: flex;
-  margin-top: 20px;
-}
-
-#spectrogramCanvas {
-  border: 1px solid #ccc;
-  background-color: #fff;
-  margin-right: 20px;
-}
-
-#controls {
-  border: 1px solid #ccc;
-  padding: 15px;
-  background-color: #eee;
-  min-width: 200px;
-}
-
-#controls button {
-  display: block;
-  width: 100%;
-  margin-bottom: 10px;
-  padding: 10px;
-  cursor: pointer;
-}
-
-#undoButton {
-  background-color: #d9534f;
-  color: white;
-  border: none;
-  border-radius: 4px;
-}
-
-#undoButton:hover {
-  background-color: #c9302c;
-}
-
-#redoButton {
-  background-color: #5cb85c;
-  color: white;
-  border: none;
-  border-radius: 4px;
-}
-
-#redoButton:hover {
-  background-color: #4cae4c;
-}
-
-/* New styles for playback buttons */
-#listenOriginalButton,
-#listenGeneratedButton {
-  background-color: #5bc0de;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  margin-top: 5px;
-}
-
-#listenOriginalButton:hover,
-#listenGeneratedButton:hover {
-  background-color: #31b0d5;
-}
-
-hr {
-  border: 0;
-  height: 1px;
-  background-color: #ccc;
-  margin: 20px 0;
-}
-- 
cgit v1.2.3