diff options
| author | skal <pascal.massimino@gmail.com> | 2026-02-06 22:53:29 +0100 |
|---|---|---|
| committer | skal <pascal.massimino@gmail.com> | 2026-02-06 22:53:29 +0100 |
| commit | 0c98c830b382d66c420524ff395e12164a566dd8 (patch) | |
| tree | dc80376bd0f0a492b7a74037ae84a926af18bf15 /tools/editor/index.html | |
| parent | 64145080cddbc0fe9fec7159e9ffdedca48ae9be (diff) | |
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
Diffstat (limited to 'tools/editor/index.html')
| -rw-r--r-- | tools/editor/index.html | 36 |
1 files changed, 0 insertions, 36 deletions
diff --git a/tools/editor/index.html b/tools/editor/index.html deleted file mode 100644 index 82a11ce..0000000 --- a/tools/editor/index.html +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Spectrogram Editor</title> - <link rel="stylesheet" href="style.css"> -</head> -<body> - <h1>Spectrogram Editor</h1> - - <input type="file" id="specFileInput" accept=".spec"> - <label for="specFileInput">Load SPEC File</label> - - <div id="editorContainer"> - <canvas id="spectrogramCanvas"></canvas> - <div id="controls"> - <h2>Tools</h2> - <button id="lineTool">Line</button> - <button id="ellipseTool">Ellipse</button> - <button id="noiseTool">Noise</button> - <button id="undoButton">Undo</button> - <button id="redoButton">Redo</button> - <hr> - <h2>Playback</h2> - <button id="listenOriginalButton">Listen Original</button> - <button id="listenGeneratedButton">Listen Generated</button> - <!-- Add more tool controls later --> - </div> - </div> - - <script src="sdf.js"></script> - <script src="dct.js"></script> - <script src="script.js"></script> -</body> -</html> |