@grame/faust-web-component 0.2.7 → 0.2.9

package/README.md

@@ -76,7 +76,7 @@ to get a polyphonic clarinet instrument with 16 voices and a global reverb effec
 
 ## NPM package 
 
- A [npm package](https://www.npmjs.com/package/@grame/faust-web-component) can be used with the CDN link: https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.2.6/dist/faust-web-component.js (possibly update the version number).
+ A [npm package](https://www.npmjs.com/package/@grame/faust-web-component) can be used with the CDN link: https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.2.8/dist/faust-web-component.js (possibly update the version number).
  
  Here is an HTML example using this model:
  
@@ -95,7 +95,7 @@ process = vgroup("Oscillator", os.osc(freq1) * vol, os.osc(freq2) * vol);
 -->
 </faust-editor>
 
-<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.2.6/dist/faust-web-component.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.2.8/dist/faust-web-component.js"></script>
 ```
 
 ## Demo

package/dist/faust-web-component.js

@@ -1826,7 +1826,7 @@ const dependencies = {
 
     ${ko}
 </style>
-`;class Jl extends HTMLElement{constructor(){super()}connectedCallback(){const A=this.innerHTML.replace("<!--","").replace("-->","").trim();this.attachShadow({mode:"open"}).appendChild(zL.content.cloneNode(!0));const g=this.shadowRoot.querySelector("#ide");g.onfocus=()=>{const U=new URLSearchParams;U.set("inline",btoa(C.state.doc.toString()).replace("+","-").replace("/","_")),g.href=`https://faustide.grame.fr/?${U.toString()}`};const B=this.shadowRoot.querySelector("#editor"),C=nl(B,A),Q=this.shadowRoot.querySelector("#run"),E=this.shadowRoot.querySelector("#stop"),N=this.shadowRoot.querySelector("#faust-ui"),D=this.shadowRoot.querySelector("#faust-diagram"),o=this.shadowRoot.querySelector("#sidebar"),M=this.shadowRoot.querySelector("#sidebar-content"),G=[...this.shadowRoot.querySelectorAll(".tab")],i=[...M.querySelectorAll("div")],L=Kc([B,o],{sizes:[100,0],minSize:[0,20],gutterSize:7,snapOffset:150,onDragEnd:()=>{y==null||y.onResize(),S==null||S.onResize()}});aC.then(()=>Q.disabled=!1);const Y=[70,30];let w=!1;const t=()=>{w||L.setSizes(Y),w=!0};let K,a,Z,y,S,c=!1,k=-1;Q.onclick=async()=>{$A.state==="suspended"&&await $A.resume(),await aC;const U=C.state.doc.toString();let e=null;try{await hC.compile(sI,"main",U,"");const z=hC.getMeta();let{midi:x,nvoices:V}=uo(z);c=x,k=V,e=V>0?xo():po(),await e.compile(sI,"main",U,"")}catch(z){Wl(C,z);return}Ol(C),K!==void 0&&K.disconnect(),k>0?K=await e.createNode($A,k):K=await e.createNode($A),K.numberOfInputs>0?(h.disabled=!1,H(await Wo()),await R()):(h.disabled=!0,h.innerHTML="<option>Audio input</option>"),K.connect($A.destination),E.disabled=!1;for(const z of G)z.disabled=!1;c&&Oo(Jo(K)).then(()=>{console.log("Successfully connected to the MIDI device.")}).catch(z=>{console.error("Error accessing MIDI device:",z.message)}),t();for(const z of i)for(;z.lastChild;)z.lastChild.remove();Z=new AnalyserNode($A,{fftSize:Math.pow(2,11),minDecibels:-96,maxDecibels:0,smoothingTimeConstant:.85}),K.connect(Z),y=new TL(i[2]),S=new TL(i[3]);const j=K.getUI();l(j.length>1||j[0].items.length>0?0:3);const p=new lo.FaustUI({ui:j,root:N});p.paramChangeByUI=(z,x)=>K==null?void 0:K.setParamValue(z,x),K.setOutputParamHandler((z,x)=>p.paramChangeByDSP(z,x)),T(mo.from("main",U,"")["process.svg"])};const T=U=>{D.innerHTML=U;for(const e of D.querySelectorAll("a"))e.onclick=j=>{j.preventDefault();const p=e.href.baseVal,z=sI.fs().readFile("main-svg/"+p,{encoding:"utf8"});T(z)}};let d;const b=()=>{y.renderScope([{analyser:Z,style:"rgb(212, 100, 100)",edgeThreshold:.09}]),d=requestAnimationFrame(b)},s=()=>{S.renderSpectrum(Z),d=requestAnimationFrame(s)},l=U=>{for(const[e,j]of G.entries())U===e?(j.classList.add("active"),i[e].classList.add("active")):(j.classList.remove("active"),i[e].classList.remove("active"));U===2?(y.onResize(),d!==void 0&&cancelAnimationFrame(d),d=requestAnimationFrame(b)):U===3?(S.onResize(),d!==void 0&&cancelAnimationFrame(d),d=requestAnimationFrame(s)):d!==void 0&&(cancelAnimationFrame(d),d=void 0)};for(const[U,e]of G.entries())e.onclick=()=>l(U);E.onclick=()=>{K!==void 0&&(K.disconnect(),K.destroy(),K=void 0,E.disabled=!0)};const h=this.shadowRoot.querySelector("#audio-input"),H=U=>{if(!h.disabled){for(;h.lastChild;)h.lastChild.remove();for(const e of U)e.kind==="audioinput"&&h.appendChild(new Option(e.label||e.deviceId,e.deviceId))}};kE.push(H);const R=async()=>{const U=h.value,e=await navigator.mediaDevices.getUserMedia({audio:{deviceId:U,echoCancellation:!1,noiseSuppression:!1,autoGainControl:!1}});a&&(a.disconnect(),a=void 0),K&&K.numberOfInputs>0&&(a=$A.createMediaStreamSource(e),a.connect(K))};h.onchange=R}}const FL=document.createElement("template");FL.innerHTML=`
+`;class Jl extends HTMLElement{constructor(){super()}connectedCallback(){const A=this.innerHTML.replace("<!--","").replace("-->","").trim();this.attachShadow({mode:"open"}).appendChild(zL.content.cloneNode(!0));const g=this.shadowRoot.querySelector("#ide");g.onfocus=()=>{const U=new URLSearchParams;U.set("inline",btoa(C.state.doc.toString()).replace("+","-").replace("/","_")),g.href=`https://faustide.grame.fr/?${U.toString()}`};const B=this.shadowRoot.querySelector("#editor"),C=nl(B,A),Q=this.shadowRoot.querySelector("#run"),E=this.shadowRoot.querySelector("#stop"),N=this.shadowRoot.querySelector("#faust-ui"),D=this.shadowRoot.querySelector("#faust-diagram"),o=this.shadowRoot.querySelector("#sidebar"),M=this.shadowRoot.querySelector("#sidebar-content"),G=[...this.shadowRoot.querySelectorAll(".tab")],i=[...M.querySelectorAll("div")],L=Kc([B,o],{sizes:[100,0],minSize:[0,20],gutterSize:7,snapOffset:150,onDragEnd:()=>{y==null||y.onResize(),S==null||S.onResize()}});aC.then(()=>Q.disabled=!1);const Y=[70,30];let w=!1;const t=()=>{w||L.setSizes(Y),w=!0};let K,a,Z,y,S,c=!1,k=-1;Q.onclick=async()=>{$A.state==="suspended"&&await $A.resume(),await aC;const U=C.state.doc.toString();let e=null;try{await hC.compile(sI,"main",U,"");const z=hC.getMeta();let{midi:x,nvoices:V}=uo(z);c=x,k=V,e=V>0?xo():po(),await e.compile(sI,"main",U,"")}catch(z){Wl(C,z);return}Ol(C),K!==void 0&&K.disconnect(),k>0?K=await e.createNode($A,k):K=await e.createNode($A),K.numberOfInputs>0?(h.disabled=!1,H(await Wo()),await R()):(h.disabled=!0,h.innerHTML="<option>Audio input</option>"),K.connect($A.destination),E.disabled=!1;for(const z of G)z.disabled=!1;c&&Oo(Jo(K)).then(()=>{console.log("Successfully connected to the MIDI device.")}).catch(z=>{console.error("Error accessing MIDI device:",z.message)}),t();for(const z of i)for(;z.lastChild;)z.lastChild.remove();Z=new AnalyserNode($A,{fftSize:Math.pow(2,11),minDecibels:-96,maxDecibels:0,smoothingTimeConstant:.85}),K.connect(Z),y=new TL(i[2]),S=new TL(i[3]);const j=K.getUI();l(j.length>1||j[0].items.length>0?0:3);const p=new lo.FaustUI({ui:j,root:N});p.paramChangeByUI=(z,x)=>K==null?void 0:K.setParamValue(z,x),K.setOutputParamHandler((z,x)=>p.paramChangeByDSP(z,x)),T(mo.from("main",U,"")["process.svg"]),B.style.height=`${Math.max(125,p.minHeight)}px`,N.style.width=p.minWidth*1.25+"px",N.style.height=p.minHeight*1.25+"px"};const T=U=>{D.innerHTML=U;for(const e of D.querySelectorAll("a"))e.onclick=j=>{j.preventDefault();const p=e.href.baseVal,z=sI.fs().readFile("main-svg/"+p,{encoding:"utf8"});T(z)}};let d;const b=()=>{y.renderScope([{analyser:Z,style:"rgb(212, 100, 100)",edgeThreshold:.09}]),d=requestAnimationFrame(b)},s=()=>{S.renderSpectrum(Z),d=requestAnimationFrame(s)},l=U=>{for(const[e,j]of G.entries())U===e?(j.classList.add("active"),i[e].classList.add("active")):(j.classList.remove("active"),i[e].classList.remove("active"));U===2?(y.onResize(),d!==void 0&&cancelAnimationFrame(d),d=requestAnimationFrame(b)):U===3?(S.onResize(),d!==void 0&&cancelAnimationFrame(d),d=requestAnimationFrame(s)):d!==void 0&&(cancelAnimationFrame(d),d=void 0)};for(const[U,e]of G.entries())e.onclick=()=>l(U);E.onclick=()=>{K!==void 0&&(K.disconnect(),K.destroy(),K=void 0,E.disabled=!0)};const h=this.shadowRoot.querySelector("#audio-input"),H=U=>{if(!h.disabled){for(;h.lastChild;)h.lastChild.remove();for(const e of U)e.kind==="audioinput"&&h.appendChild(new Option(e.label||e.deviceId,e.deviceId))}};kE.push(H);const R=async()=>{const U=h.value,e=await navigator.mediaDevices.getUserMedia({audio:{deviceId:U,echoCancellation:!1,noiseSuppression:!1,autoGainControl:!1}});a&&(a.disconnect(),a=void 0),K&&K.numberOfInputs>0&&(a=$A.createMediaStreamSource(e),a.connect(K))};h.onchange=R}}const FL=document.createElement("template");FL.innerHTML=`
 <div id="root">
     <div id="controls">
         <button title="On/off" class="button" id="power" disabled>${_g({prefix:"fas",iconName:"power-off"}).html[0]}</button>

package/package.json

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

package/src/faust-editor.ts

@@ -352,6 +352,11 @@ export default class FaustEditor extends HTMLElement {
 
             // 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"
+            faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px"
         }
 
         const setSVG = (svgString: string) => {