@grame/faust-web-component 0.3.8 → 0.4.0

package/index.html

@@ -8,11 +8,14 @@
 
     <faust-editor>
         <!--
+declare name "Vocal FOF MIDI";
+declare description "MIDI-controllable FOF vocal synthesizer.";
+declare license "MIT";
+declare copyright "(c)Mike Olsen, CCRMA (Stanford University)";
+
 import("stdfaust.lib");
-ctFreq = hslider("cutoffFrequency",500,50,10000,0.01);
-q = hslider("q",5,1,30,0.1);
-gain = hslider("gain",1,0,1,0.01);
-process = no.noise : fi.resonlp(ctFreq,q,gain);
+
+process = pm.SFFormantModelFofSmooth_ui_MIDI <: _,_;
 -->
     </faust-editor>
     <center>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@grame/faust-web-component",
     "description": "Web component embedding the Faust Compiler",
-    "version": "0.3.8",
+    "version": "0.4.0",
     "module": "dist/faust-web-component.js",
     "files": [
         "src/",

package/src/faust-editor.ts

@@ -279,14 +279,14 @@ export default class FaustEditor extends HTMLElement {
             let generator = null
             try {
                 // Compile Faust code to access JSON metadata
-                await default_generator.compile(compiler, "main", code, "")
+                await default_generator.compile(compiler, "main", code, "-ftz 2")
                 const json = default_generator.getMeta()
                 let { midi, nvoices } = extractMidiAndNvoices(json);
                 gmidi = midi;
                 gnvoices = nvoices;
 
-                // Build the generator
-                generator = nvoices > 0 ? get_poly_generator() : get_mono_generator();
+                // Build the generator (possibly reusing default_generator which is a FaustMonoDspGenerator) 
+                generator = nvoices > 0 ? get_poly_generator() : default_generator;
                 await generator.compile(compiler, "main", code, "-ftz 2");
 
             } catch (e: any) {
@@ -350,9 +350,6 @@ export default class FaustEditor extends HTMLElement {
             faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value)
             node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value))
 
-            // Create SVG block diagram
-            setSVG(svgDiagrams.from("main", code, "")["process.svg"])
-
             // Set editor size to fit UI size
             editorEl.style.height = `${Math.max(125, faustUI.minHeight)}px`;
             faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px"
@@ -373,6 +370,7 @@ export default class FaustEditor extends HTMLElement {
         }
 
         let animPlot: number | undefined
+
         const drawScope = () => {
             scope!.renderScope([{
                 analyser: analyser!,
@@ -397,7 +395,20 @@ export default class FaustEditor extends HTMLElement {
                     tabContents[j].classList.remove("active")
                 }
             }
-            if (i === 2) {
+            // Check if the clicked tab is the "Block Diagram" tab (index 1)
+            if (i === 1) {
+                // Only set the SVG if it hasn't been set before (avoiding multiple loads)
+                if (faustDiagram.innerHTML.trim() === "") {
+
+                    // Display a "Computing SVG..." message while the SVG is being generated
+                    faustDiagram.innerHTML = "<p><center>Computing SVG...</center></p>";
+
+                    // Use setTimeout to defer the SVG rendering to a separate task
+                    setTimeout(() => {
+                        setSVG(svgDiagrams.from("main", code, "")["process.svg"]);
+                    }, 0);
+                }
+            } else if (i === 2) {
                 scope!.onResize()
                 if (animPlot !== undefined) cancelAnimationFrame(animPlot)
                 animPlot = requestAnimationFrame(drawScope)

package/src/faust-widget.ts

@@ -121,15 +121,16 @@ export default class FaustWidget extends HTMLElement {
 
         const setup = async () => {
             await faustPromise
-            // Compile Faust code to access JSON metadata
-            await default_generator.compile(compiler, "main", code, "")
+            // Compile Faust code to access JSON metadata 
+            await default_generator.compile(compiler, "main", code, "-ftz 2")
             const json = default_generator.getMeta()
             let { midi, nvoices } = extractMidiAndNvoices(json);
             gmidi = midi;
             gnvoices = nvoices;
 
-            // Build the generator and generate UI
-            generator = nvoices > 0 ? get_poly_generator() : get_mono_generator();
+            // Build the generator (possibly reusing default_generator which is a FaustMonoDspGenerator) 
+            // and generate UI
+            generator = nvoices > 0 ? get_poly_generator() : default_generator;
             await generator.compile(compiler, "main", code, "-ftz 2");
             const ui = generator.getUI();
 
@@ -249,7 +250,12 @@ export default class FaustWidget extends HTMLElement {
 
         audioInputSelector.onchange = connectInput
 
-        setup()
+        setTimeout(() => {
+            // Display a "Compiling..." message while Faust is compiling
+            faustUIRoot.innerHTML = "<p><center>Compiling...</center></p>";
+            setup();
+        }, 0);
+
     }
 }