Add audio nodes to the patch bay

Also make the patch bay responsive.

www/bootstrap.js

@@ -1,8 +1,9 @@
 /**
  * bootstrap.js — ES module entry point.
  *
- * Imports the wasm-pack-generated glue, initialises the WASM binary, then
- * wires up Rust-exported types to the canvas elements in index.html.
+ * Initialises the WASM module, wires canvas elements to Rust-exported types,
+ * keeps canvas drawing buffers in sync with their CSS size, and provides a
+ * draggable resize handle for the patch bay panel.
  */
 
 import init, {
@@ -13,35 +14,98 @@ import init, {
     SynthParams,
 } from "./pkg/synth_visualiser.js";
 
+// ── Canvas buffer sizing ──────────────────────────────────────────────────────
+// A <canvas> has two independent sizes:
+//   - CSS display size  (width/height CSS properties) — how large it appears
+//   - Drawing buffer    (width/height HTML attributes) — actual pixel resolution
+//
+// We must keep them in sync; if the buffer is smaller than the display size the
+// browser stretches it and everything looks blurry / oversized.
+
+function fitCanvas(canvas) {
+    const w = Math.round(canvas.clientWidth);
+    const h = Math.round(canvas.clientHeight);
+    if (w > 0 && h > 0 && (canvas.width !== w || canvas.height !== h)) {
+        canvas.width  = w;
+        canvas.height = h;
+    }
+}
+
+// ── Resize handle ─────────────────────────────────────────────────────────────
+
+function initResizeHandle() {
+    const handle  = document.getElementById("resize-handle");
+    const panel   = document.getElementById("patchbay-panel");
+    let dragging  = false;
+    let startY    = 0;
+    let startH    = 0;
+
+    handle.addEventListener("pointerdown", e => {
+        dragging = true;
+        startY   = e.clientY;
+        startH   = panel.offsetHeight;
+        handle.setPointerCapture(e.pointerId);
+        handle.classList.add("active");
+    });
+
+    handle.addEventListener("pointermove", e => {
+        if (!dragging) return;
+        // Dragging up (negative dy) increases the panel height
+        const dy = e.clientY - startY;
+        const h  = Math.max(80, startH - dy);
+        panel.style.height = h + "px";
+    });
+
+    handle.addEventListener("pointerup",    () => { dragging = false; handle.classList.remove("active"); });
+    handle.addEventListener("pointercancel",() => { dragging = false; handle.classList.remove("active"); });
+}
+
+// ── Bootstrap ─────────────────────────────────────────────────────────────────
+
 const loader    = document.getElementById("loader");
 const status    = document.getElementById("status");
 const srLabel   = document.getElementById("sample-rate");
 const frameTime = document.getElementById("frame-time");
 
 async function bootstrap() {
+    initResizeHandle();
+
     try {
         await init();
 
         const engine = new AudioEngine();
         await engine.attach();
 
-        const analyser    = engine.analyser_node();
+        const analyser     = engine.analyser_node();
         const oscilloscope = new OscilloscopeView("oscilloscope-canvas", analyser);
         const spectrum     = new SpectrumView("spectrum-canvas", analyser);
         const patchbay     = new PatchBay("patchbay-canvas");
 
-        // Register module jacks (x, y coordinates relative to the canvas)
-        patchbay.register_jack("vco",    "out",    50,  60, true);
-        patchbay.register_jack("filter", "in",    150,  60, false);
-        patchbay.register_jack("filter", "out",   250,  60, true);
-        patchbay.register_jack("vca",    "in",    350,  60, false);
-        patchbay.register_jack("lfo",    "cv-out", 450, 60, true);
-        patchbay.register_jack("filter", "cv-in",  550, 60, false);
+        // Fit all canvas buffers to their current CSS layout size before we
+        // ask Rust for canvas.width() to position the default modules.
+        const pbCanvas   = document.getElementById("patchbay-canvas");
+        const oscCanvas  = document.getElementById("oscilloscope-canvas");
+        const specCanvas = document.getElementById("spectrum-canvas");
+        const allCanvases = [oscCanvas, specCanvas, pbCanvas];
 
-        const pbCanvas = document.getElementById("patchbay-canvas");
-        pbCanvas.addEventListener("pointerdown", e => patchbay.on_pointer_down(e.offsetX, e.offsetY));
-        pbCanvas.addEventListener("pointermove", e => patchbay.on_pointer_move(e.offsetX, e.offsetY));
-        pbCanvas.addEventListener("pointerup",   e => patchbay.on_pointer_up(e.offsetX, e.offsetY));
+        allCanvases.forEach(fitCanvas);
+
+        // Seed a default patch using the now-correct canvas width.
+        const cw = pbCanvas.width || pbCanvas.clientWidth || 800;
+        patchbay.add_module("vco",  cw * 0.12, 80);
+        patchbay.add_module("adsr", cw * 0.32, 80);
+        patchbay.add_module("svf",  cw * 0.55, 80);
+        patchbay.add_module("vca",  cw * 0.76, 80);
+
+        // Keep canvas buffers in sync whenever the panel is resized.
+        const ro = new ResizeObserver(() => allCanvases.forEach(fitCanvas));
+        allCanvases.forEach(c => ro.observe(c));
+
+        // Patch bay pointer events
+        pbCanvas.addEventListener("pointerdown",  e => patchbay.on_pointer_down(e.offsetX, e.offsetY));
+        pbCanvas.addEventListener("pointermove",  e => patchbay.on_pointer_move(e.offsetX, e.offsetY));
+        pbCanvas.addEventListener("pointerup",    e => patchbay.on_pointer_up(e.offsetX, e.offsetY));
+        pbCanvas.addEventListener("dblclick",     e => patchbay.on_double_click(e.offsetX, e.offsetY));
 
         const params = new SynthParams();
         engine.set_params(params.to_json());