fix(editor): Resolve button initialization errors

Restructured script.js to move all button element declarations and their event listeners to the top of the script, immediately after global constants. This resolves the 'Uncaught ReferenceError: Cannot access 'button' before initialization' errors by ensuring elements are initialized before being accessed.

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
+}