@yuebai008/cli/dist/cli-server/client/front_end/panels/web_audio/WebAudioView.js

Command line interface for rapid qg-minigame development

import webAudioStyles from"./webAudio.css.js";import*as i18n from"../../core/i18n/i18n.js";import*as SDK from"../../core/sdk/sdk.js";import*as UI from"../../ui/legacy/legacy.js";import*as GraphVisualizer from"./graph_visualizer/graph_visualizer.js";import{ContextDetailBuilder,ContextSummaryBuilder}from"./AudioContextContentBuilder.js";import{AudioContextSelector}from"./AudioContextSelector.js";import{WebAudioModel}from"./WebAudioModel.js";const UIStrings={openAPageThatUsesWebAudioApiTo:"Open a page that uses Web Audio API to start monitoring."},str_=i18n.i18n.registerUIStrings("panels/web_audio/WebAudioView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let webAudioViewInstance;export class WebAudioView extends UI.ThrottledWidget.ThrottledWidget{contextSelector;contentContainer;detailViewContainer;graphManager;landingPage;summaryBarContainer;constructor(){super(!0,1e3),this.element.classList.add("web-audio-drawer");const e=this.contentElement.createChild("div","web-audio-toolbar-container vbox");this.contextSelector=new AudioContextSelector;const t=new UI.Toolbar.Toolbar("web-audio-toolbar",e);t.appendToolbarItem(UI.Toolbar.Toolbar.createActionButtonForId("components.collect-garbage")),t.appendSeparator(),t.appendToolbarItem(this.contextSelector.toolbarItem()),this.contentContainer=this.contentElement.createChild("div","web-audio-content-container vbox flex-auto"),this.detailViewContainer=this.contentContainer.createChild("div","web-audio-details-container vbox flex-auto"),this.graphManager=new GraphVisualizer.GraphManager.GraphManager,this.landingPage=new UI.Widget.VBox,this.landingPage.contentElement.classList.add("web-audio-landing-page","fill"),this.landingPage.contentElement.appendChild(UI.Fragment.html`
  <div>
  <p>${i18nString(UIStrings.openAPageThatUsesWebAudioApiTo)}</p>
  </div>
  `),this.landingPage.show(this.detailViewContainer),this.summaryBarContainer=this.contentContainer.createChild("div","web-audio-summary-container"),this.contextSelector.addEventListener("ContextSelected",(e=>{const t=e.data;t&&this.updateDetailView(t),this.doUpdate()})),SDK.TargetManager.TargetManager.instance().observeModels(WebAudioModel,this)}static instance(e={forceNew:null}){const{forceNew:t}=e;return webAudioViewInstance&&!t||(webAudioViewInstance=new WebAudioView),webAudioViewInstance}wasShown(){super.wasShown(),this.registerCSSFiles([webAudioStyles]);for(const e of SDK.TargetManager.TargetManager.instance().models(WebAudioModel))this.addEventListeners(e)}willHide(){for(const e of SDK.TargetManager.TargetManager.instance().models(WebAudioModel))this.removeEventListeners(e)}modelAdded(e){this.isShowing()&&this.addEventListeners(e)}modelRemoved(e){this.removeEventListeners(e)}async doUpdate(){await this.pollRealtimeData(),this.update()}addEventListeners(e){e.ensureEnabled(),e.addEventListener("ContextCreated",this.contextCreated,this),e.addEventListener("ContextDestroyed",this.contextDestroyed,this),e.addEventListener("ContextChanged",this.contextChanged,this),e.addEventListener("ModelReset",this.reset,this),e.addEventListener("ModelSuspend",this.suspendModel,this),e.addEventListener("AudioListenerCreated",this.audioListenerCreated,this),e.addEventListener("AudioListenerWillBeDestroyed",this.audioListenerWillBeDestroyed,this),e.addEventListener("AudioNodeCreated",this.audioNodeCreated,this),e.addEventListener("AudioNodeWillBeDestroyed",this.audioNodeWillBeDestroyed,this),e.addEventListener("AudioParamCreated",this.audioParamCreated,this),e.addEventListener("AudioParamWillBeDestroyed",this.audioParamWillBeDestroyed,this),e.addEventListener("NodesConnected",this.nodesConnected,this),e.addEventListener("NodesDisconnected",this.nodesDisconnected,this),e.addEventListener("NodeParamConnected",this.nodeParamConnected,this),e.addEventListener("NodeParamDisconnected",this.nodeParamDisconnected,this)}removeEventListeners(e){e.removeEventListener("ContextCreated",this.contextCreated,this),e.removeEventListener("ContextDestroyed",this.contextDestroyed,this),e.removeEventListener("ContextChanged",this.contextChanged,this),e.removeEventListener("ModelReset",this.reset,this),e.removeEventListener("ModelSuspend",this.suspendModel,this),e.removeEventListener("AudioListenerCreated",this.audioListenerCreated,this),e.removeEventListener("AudioListenerWillBeDestroyed",this.audioListenerWillBeDestroyed,this),e.removeEventListener("AudioNodeCreated",this.audioNodeCreated,this),e.removeEventListener("AudioNodeWillBeDestroyed",this.audioNodeWillBeDestroyed,this),e.removeEventListener("AudioParamCreated",this.audioParamCreated,this),e.removeEventListener("AudioParamWillBeDestroyed",this.audioParamWillBeDestroyed,this),e.removeEventListener("NodesConnected",this.nodesConnected,this),e.removeEventListener("NodesDisconnected",this.nodesDisconnected,this),e.removeEventListener("NodeParamConnected",this.nodeParamConnected,this),e.removeEventListener("NodeParamDisconnected",this.nodeParamDisconnected,this)}contextCreated(e){const t=e.data;this.graphManager.createContext(t.contextId),this.contextSelector.contextCreated(e)}contextDestroyed(e){const t=e.data;this.graphManager.destroyContext(t),this.contextSelector.contextDestroyed(e)}contextChanged(e){const t=e.data;this.graphManager.hasContext(t.contextId)&&this.contextSelector.contextChanged(e)}reset(){this.landingPage.isShowing()&&this.landingPage.detach(),this.contextSelector.reset(),this.detailViewContainer.removeChildren(),this.landingPage.show(this.detailViewContainer),this.graphManager.clearGraphs()}suspendModel(){this.graphManager.clearGraphs()}audioListenerCreated(e){const t=e.data,n=this.graphManager.getGraph(t.contextId);n&&n.addNode({nodeId:t.listenerId,nodeType:"Listener",numberOfInputs:0,numberOfOutputs:0})}audioListenerWillBeDestroyed(e){const{contextId:t,listenerId:n}=e.data,a=this.graphManager.getGraph(t);a&&a.removeNode(n)}audioNodeCreated(e){const t=e.data,n=this.graphManager.getGraph(t.contextId);n&&n.addNode({nodeId:t.nodeId,nodeType:t.nodeType,numberOfInputs:t.numberOfInputs,numberOfOutputs:t.numberOfOutputs})}audioNodeWillBeDestroyed(e){const{contextId:t,nodeId:n}=e.data,a=this.graphManager.getGraph(t);a&&a.removeNode(n)}audioParamCreated(e){const t=e.data,n=this.graphManager.getGraph(t.contextId);n&&n.addParam({paramId:t.paramId,paramType:t.paramType,nodeId:t.nodeId})}audioParamWillBeDestroyed(e){const{contextId:t,paramId:n}=e.data,a=this.graphManager.getGraph(t);a&&a.removeParam(n)}nodesConnected(e){const{contextId:t,sourceId:n,destinationId:a,sourceOutputIndex:o,destinationInputIndex:i}=e.data,d=this.graphManager.getGraph(t);d&&d.addNodeToNodeConnection({sourceId:n,destinationId:a,sourceOutputIndex:o,destinationInputIndex:i})}nodesDisconnected(e){const{contextId:t,sourceId:n,destinationId:a,sourceOutputIndex:o,destinationInputIndex:i}=e.data,d=this.graphManager.getGraph(t);d&&d.removeNodeToNodeConnection({sourceId:n,destinationId:a,sourceOutputIndex:o,destinationInputIndex:i})}nodeParamConnected(e){const{contextId:t,sourceId:n,destinationId:a,sourceOutputIndex:o}=e.data,i=this.graphManager.getGraph(t);if(!i)return;const d=i.getNodeIdByParamId(a);d&&i.addNodeToParamConnection({sourceId:n,destinationId:d,sourceOutputIndex:o,destinationParamId:a})}nodeParamDisconnected(e){const{contextId:t,sourceId:n,destinationId:a,sourceOutputIndex:o}=e.data,i=this.graphManager.getGraph(t);if(!i)return;const d=i.getNodeIdByParamId(a);d&&i.removeNodeToParamConnection({sourceId:n,destinationId:d,sourceOutputIndex:o,destinationParamId:a})}updateDetailView(e){this.landingPage.isShowing()&&this.landingPage.detach();const t=new ContextDetailBuilder(e);this.detailViewContainer.removeChildren(),this.detailViewContainer.appendChild(t.getFragment())}updateSummaryBar(e,t){const n=new ContextSummaryBuilder(e,t);this.summaryBarContainer.removeChildren(),this.summaryBarContainer.appendChild(n.getFragment())}clearSummaryBar(){this.summaryBarContainer.removeChildren()}async pollRealtimeData(){const e=this.contextSelector.selectedContext();if(e)for(const t of SDK.TargetManager.TargetManager.instance().models(WebAudioModel))if("realtime"===e.contextType){if(!this.graphManager.hasContext(e.contextId))continue;const n=await t.requestRealtimeData(e.contextId);n&&this.updateSummaryBar(e.contextId,n)}else this.clearSummaryBar();else this.clearSummaryBar()}}