1 files changed, 36 insertions, 41 deletions

diff --git a/tools/editor/script.js b/tools/editor/script.js
index d7c91e6..48baa2e 100644
--- a/tools/editor/script.js
+++ b/tools/editor/script.js
@@ -26,6 +26,40 @@ const MIN_FREQ = 20; // Lower bound for log scale visualization
 
 const SDF_FALLOFF_FACTOR = 10.0; // Adjust this value to control the softness of SDF edges.
 
+// --- Button Element Declarations ---
+const specFileInput = document.getElementById('specFileInput');
+const lineToolButton = document.getElementById('lineTool');
+const ellipseToolButton = document.getElementById('ellipseTool');
+const noiseToolButton = document.getElementById('noiseTool');
+const undoButton = document.getElementById('undoButton');
+const redoButton = document.getElementById('redoButton'); 
+const listenOriginalButton = document.getElementById('listenOriginalButton');
+const listenGeneratedButton = document.getElementById('listenGeneratedButton');
+
+// --- Event Listeners ---
+specFileInput.addEventListener('change', handleFileSelect);
+lineToolButton.addEventListener('click', () => { activeTool = 'line'; console.log('Line tool selected'); });
+ellipseToolButton.addEventListener('click', () => { activeTool = 'ellipse'; console.log('Ellipse tool selected'); });
+noiseToolButton.addEventListener('click', () => { activeTool = 'noise'; console.log('Noise tool selected'); });
+undoButton.addEventListener('click', handleUndo);
+redoButton.addEventListener('click', handleRedo);
+listenOriginalButton.addEventListener('click', () => {
+    if (originalSpecData) {
+        playSpectrogramData(originalSpecData);
+    } else {
+        alert("No original SPEC data loaded.");
+    }
+});
+listenGeneratedButton.addEventListener('click', () => {
+    if (currentSpecData) {
+        redrawCanvas(); // Ensure currentSpecData reflects all shapes before playing
+        playSpectrogramData(currentSpecData);
+    } else {
+        alert("No generated SPEC data to play.");
+    }
+});
+
+
 // --- Utility Functions for Audio Processing ---
 // JavaScript equivalent of C++ idct_512
 function javascript_idct_512(input) {
@@ -165,33 +199,7 @@ function canvasDeltaYToFreqDeltaLog(canvasDeltaY, canvasHeight) {
     return Math.abs(freqAtCenterPlusDelta - freqAtCenter);
 }
 
-// Initial setup for canvas size (can be updated on window resize)
-window.addEventListener('resize', () => {
-    if (originalSpecData) {
-        canvas.width = window.innerWidth * 0.7;
-        canvas.height = 400; // Fixed height
-        redrawCanvas();
-    }
-});
-
-// Initial call to set button states
-updateUndoRedoButtons();
-
-// --- Utility for sizeof(float) in JS context ---
-// This is a workaround since typeof(float) is not directly available.
-// Float32Array.BYTES_PER_ELEMENT is used in handleFileSelect.
-function sizeof(type) {
-    if (type === 'float') {
-        return Float32Array.BYTES_PER_ELEMENT;
-    }
-    return 0; 
-}
-
-
-// --- File Handling ---
-const specFileInput = document.getElementById('specFileInput');
-specFileInput.addEventListener('change', handleFileSelect);
-
+// --- File Handling Functions ---
 async function handleFileSelect(event) {
     const file = event.target.files[0];
     if (!file) {
@@ -575,19 +583,6 @@ function applyShapeToSpectrogram(shape, targetSpecData) {
     }
 }
 
-// --- Tool Interactions (Button Clicks) ---
-const lineToolButton = document.getElementById('lineTool');
-const ellipseToolButton = document.getElementById('ellipseTool');
-const noiseToolButton = document.getElementById('noiseTool');
-const undoButton = document.getElementById('undoButton');
-const redoButton = document.getElementById('redoButton'); 
-const listenOriginalButton = document.getElementById('listenOriginalButton');
-const listenGeneratedButton = document.getElementById('listenGeneratedButton');
-
-lineToolButton.addEventListener('click', () => { activeTool = 'line'; console.log('Line tool selected'); });
-ellipseToolButton.addEventListener('click', () => { activeTool = 'ellipse'; console.log('Ellipse tool selected'); });
-noiseToolButton.addEventListener('click', () => { activeTool = 'noise'; console.log('Noise tool selected'); });
-
 // --- Undo/Redo Logic ---
 function addAction(action) {
     undoStack.push(action);
@@ -646,4 +641,4 @@ function redrawCanvas() {
 function updateUndoRedoButtons() {
     undoButton.disabled = undoStack.length === 0;
     redoButton.disabled = redoStack.length === 0; 
-}
\ No newline at end of file
+}