fix: avoid memory leak

Author: bclswl0827

example/index.ts

@@ -76,6 +76,8 @@ const main = async () => {
         spectrogram.setData(ring.toArray());
         await new Promise((resolve) => setTimeout(resolve, 100));
     }
+
+    spectrogram.destroy();
 };
 
 main();

src/core/DataChunk.ts

@@ -115,4 +115,8 @@ export class ChunkProcessor {
 
         return imgData;
     }
+
+    dispose() {
+        this.fft.dispose();
+    }
 }

src/core/SpectrogramModel.ts

@@ -22,6 +22,8 @@ export type TimestampedData = Array<[number, number]>; // [timestamp, value]
 export class SpectrogramModel {
     config: SpectrogramConfig;
     data: SpectrogramData | null = null;
+
+    showRealTimeScale: boolean = false;
     startTime: number = 0;
 
     // Derived properties
@@ -36,7 +38,10 @@ export class SpectrogramModel {
     }
 
     setData(data: SpectrogramData | TimestampedData) {
-        if (this.isTimestamped(data)) {
+        const isTimestamped = this.isTimestamped(data);
+        this.showRealTimeScale = isTimestamped;
+
+        if (isTimestamped) {
             if (data.length === 0) {
                 this.data = new Float32Array(0);
                 return;

src/render/AxisRenderer.ts

@@ -77,12 +77,16 @@ export class AxisRenderer {
 
             // Draw Label
             const totalSeconds = startTimeStamp + timeRel * 1000;
-            const date = new Date(totalSeconds);
-
-            const hh = date.getHours().toString().padStart(2, '0');
-            const mm = date.getMinutes().toString().padStart(2, '0');
-            const ss = date.getSeconds().toString().padStart(2, '0');
-            const label = `${hh}:${mm}:${ss}`;
+            let label = '';
+            if (this.model.showRealTimeScale) {
+                const date = new Date(totalSeconds);
+                const hh = date.getHours().toString().padStart(2, '0');
+                const mm = date.getMinutes().toString().padStart(2, '0');
+                const ss = date.getSeconds().toString().padStart(2, '0');
+                label = `${hh}:${mm}:${ss}`;
+            } else if (totalSeconds >= 0) {
+                label = `${Math.floor(tEnd - totalSeconds / 1000)}s`;
+            }
 
             // Adjust label position
             ctx.textAlign = 'center';

src/render/CanvasRenderer.ts

@@ -44,6 +44,16 @@ export class CanvasRenderer {
         this.offscreenHelpers.clear();
     }
 
+    dispose() {
+        this.clearCache();
+
+        this.offscreenCanvas = null;
+        this.offscreenCtx = null;
+        this.ctx = null;
+
+        this.processor.dispose();
+    }
+
     setupHiDPICanvas(canvas: HTMLCanvasElement, cssWidth: number, cssHeight: number) {
         const dpr = window.devicePixelRatio || 1;
 

src/spectrogram.ts

@@ -24,6 +24,10 @@ export class Spectrogram {
         this.renderer.clearCache();
     }
 
+    destroy() {
+        this.renderer.dispose();
+    }
+
     render(options: Omit<RenderOptions, 'freqRange'> & { freqRange?: [number, number] }) {
         // Default freq range to [0, Nyquist] if not provided
         const nyquist = this.model.config.sampleRate / 2;