@web-noise/core 0.0.9 → 0.0.10-fix2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components.js +1179 -0
- package/dist/cjs/components.js.map +1 -0
- package/dist/cjs/lib.js +2 -0
- package/dist/cjs/lib.js.map +1 -0
- package/dist/esm/components.js +1122 -0
- package/dist/esm/components.js.map +1 -0
- package/dist/esm/constants.js +2 -0
- package/dist/esm/constants.js.map +1 -0
- package/dist/esm/lib.js +2 -0
- package/dist/esm/lib.js.map +1 -0
- package/dist/main.js +91 -91
- package/dist/main.js.map +1 -1
- package/dist/module.js +83 -83
- package/dist/module.js.map +1 -1
- package/package.json +56 -23
- package/dist/components.css +0 -2
- package/dist/components.css.map +0 -1
- package/dist/components.js +0 -1195
- package/dist/components.js.map +0 -1
- package/dist/lib.js +0 -2
- package/dist/lib.js.map +0 -1
- /package/dist/{constants.js → cjs/constants.js} +0 -0
- /package/dist/{constants.js.map → cjs/constants.js.map} +0 -0
package/dist/module.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{withTheme as i,ThemeProvider as l,Global as a,css as d,useTheme as s}from"@emotion/react";import c from"@emotion/styled";import{nanoid as p}from"nanoid";import{useState as h,useEffect as u,useMemo as g,useCallback as f,useRef as m}from"react";import{FaPlus as v}from"react-icons/fa6";import{MdClose as y,MdDragHandle as w,MdSettings as b,MdInfoOutline as x}from"react-icons/md";import"reactflow/dist/style.css";import C,{getConnectedEdges as $,addEdge as k,applyNodeChanges as N,applyEdgeChanges as P,useOnViewportChange as z,Background as j,BackgroundVariant as A,MiniMap as E,Controls as D,ReactFlowProvider as F,useReactFlow as M,Position as S,Handle as T,ControlButton as O,getBezierPath as H}from"reactflow";import{create as L}from"zustand";import{reverse as _,patch as I,create as W}from"jsondiffpatch";import{injectGlobal as R}from"@emotion/css";import{useContextMenu as B,Item as G,Menu as U,Separator as V}from"react-contexify";import"react-contexify/dist/ReactContexify.css";import J from"js-file-download";import X from"hotkeys-js";import{createPortal as Y}from"react-dom";import{FileDrop as q}from"react-file-drop";import{FaFileUpload as K,FaQuestion as Q,FaVolumeOff as Z,FaMap as ee,FaRegMap as eo}from"react-icons/fa";import{Resizable as et}from"re-resizable";import er from"react-grid-layout";import"react-grid-layout/css/styles.css";import{AiFillLock as en,AiFillUnlock as ei}from"react-icons/ai";import{RxDashboard as el}from"react-icons/rx";import ea from"react-modern-drawer";import"react-modern-drawer/dist/index.css";import{marked as ed}from"marked";function es(e){return e&&e.__esModule?e.default:e}let ec=[],ep={};let eh=new URL(es("data:application/javascript,class%20e%20extends%20AudioWorkletProcessor%7Bprocess%28%29%7Breturn%210%7D%7DregisterProcessor%28%22dump-node-processor%22%2Ce%29%3Bexport%7Be%20as%20DumpNodeProcessor%7D%3B"),"file:///packages/patch/src/createPatch.ts"),eu="web-noise-drag-handle",eg=`.${eu}`,ef=10;(eb=ex||(ex={})).Gate="gate",eb.Number="number",eb.Audio="audio",eb.Any="any";let em=e=>JSON.parse(JSON.stringify(e)),ev=(e,o)=>{let t=new Set(e.map(e=>e.id)),r=new Set(o.map(e=>e.id));return{added:o.filter(e=>!t.has(e.id)),removed:e.filter(e=>!r.has(e.id))}},ey=e=>!("type"in e)||"patch"===e.type,ew=e=>"audio"===e.type;var eb,ex,eC=L((e=(...e)=>{let[o,t]=e;return{...((e,o)=>({nodes:[],edges:[],onNodesChange:o=>{e(({nodes:e})=>({nodes:N(o,e).map(e=>({dragHandle:eg,...e}))}))},onEdgesChange:o=>{e(({edges:e})=>({edges:P(o,e)}))},onConnect:o=>{e(({edges:e})=>({edges:k(o,e)}))},addNode:o=>{e(({nodes:e})=>({nodes:e.concat(o)}))},setNodes:o=>{e({nodes:o})},setEdges:o=>{e({edges:o})},setNodesAndEdges:({nodes:o,edges:t})=>{e({nodes:o,edges:t})},getNodesAndEdges:()=>{let{nodes:e,edges:t}=o();return{nodes:e,edges:t}},clearElements:()=>{e({nodes:[],edges:[]})},getNode:e=>{let{nodes:t}=o();return t.find(o=>o.id===e)||null},updateNodeData:(o,t)=>{e(({nodes:e})=>({nodes:e.map(e=>e.id===o?{...e,data:{...e.data,...t}}:e)}))},nodeTypes:{},setNodeTypes:o=>e({nodeTypes:o})}))(...e),...((e,o)=>({history:{maxHistoryLength:5,buffer:[],pointer:0,skipCollect:!1,push:t=>{let{history:r}=o(),{maxHistoryLength:n,skipCollect:i}=r;if(i)return void e({history:{...r,skipCollect:!1}});e(({history:e})=>{if(!e)return{};let{buffer:o,pointer:r}=e,i=o.slice(Math.max(r-n+1,0),r);return{history:{...e,buffer:[...i,t],pointer:Math.min(r+1,n)}}})},back:()=>{let{nodes:t,edges:r,controlPanel:n,history:i}=o(),{buffer:l,pointer:a}=i,d=l[a-1];if(!d)return;let s=_(d);s&&e({...I(em({nodes:t,edges:r,controlPanel:n}),s),history:{...i,pointer:a-1,skipCollect:!0}})},forward:()=>{let{nodes:t,edges:r,controlPanel:n,history:i}=o(),{buffer:l,pointer:a}=i,d=l[a];d&&e({...I(em({nodes:t,edges:r,controlPanel:n}),d),history:{...i,pointer:a+1,skipCollect:!0}})},clear:()=>{let{history:t}=o();e({history:{...t,buffer:[],pointer:0,skipCollect:!0}})}}}))(...e),...((e,o)=>({patch:((e=new AudioContext)=>{let o=e.audioWorklet.addModule(eh).then(()=>new AudioWorkletNode(e,"dump-node-processor")),t=new Map,r=new Map,n=async r=>{let{id:n,type:i,data:l}=r;if(!i)return void t.set(n,{loading:!1,error:Error(`Node: ${n} has no type`),node:null});let a=ep[i];if(!1!==a){if(!a)return void t.set(n,{loading:!1,error:Error(`Could not find handler for audio type ${i}`),node:null});t.set(n,{loading:!0,error:null,node:null});try{let r=await a(e,l),i=await o;t.set(n,{loading:!1,error:null,node:r}),Object.values(r.outputs||[]).forEach(({port:e})=>{i&&(e instanceof AudioWorkletNode&&e.connect(i),Array.isArray(e)&&e[0]instanceof AudioWorkletNode&&e[0].connect(i,e[1]))})}catch(e){t.set(n,{loading:!1,error:e,node:null})}}},i=async e=>Promise.all(e.map(n)),l=e=>{let{id:o,data:r}=e,n=t.get(o);if(!n)return void console.error(`Audio node #${o} does not exist`);let{loading:i,error:l,node:a}=n;return i?void console.error(`Audio node #${o} is yet not loaded`):l?void console.error(`Audio node #${o} is in error state: ${l.toString()}`):void(a.destroy&&a.destroy(),Object.values(a.inputs||{}).forEach(({port:e})=>e instanceof AudioNode&&e.disconnect&&e.disconnect()),Object.values(a.outputs||{}).forEach(({port:e})=>e instanceof AudioNode&&e.disconnect&&e.disconnect()),t.delete(o))},a=e=>{let{source:o,sourceHandle:n,target:i,targetHandle:l,id:a}=e,{node:d}=t.get(o)||{};if(!d)return void console.error(`can't find source node ${o}`);if(!n)return void console.error(`source handle is not defined in node ${o}`);let s=d.outputs?.[n],c=s?.port,{node:p}=t.get(i)||{};if(!p)return void console.error(`can't find target node ${p}`);if(!l)return void console.error(`source handle is not defined in node ${d}`);let h=p.inputs?.[l],u=h?.port;if(!c)return void console.error(`Can't find output port: ${o}:${n}`);if(!u)return void console.error(`Can't find input port: ${i}:${l}`);let g=u instanceof AudioNode,f=u instanceof AudioParam,m=u instanceof Array,v=g||f,y=c instanceof AudioNode,w=c instanceof Array;y&&v?c.connect(u):y&&m?c.connect(u[0],0,u[1]):w&&v?c[0].connect(u,c[1]):w&&m?c[0].connect(u[0],c[1],u[1]):(console.log(c,u),console.error("ports can be only AudioNode or AudioNodeChannel")),r.set(a,{output:s,input:h})},d=e=>{let{id:o,data:t}=e,n=r.get(o);if(!n)return void console.error(`can't find connection with id: ${o}`);let{input:{port:i},output:{port:l}}=n,a=i instanceof AudioNode,d=i instanceof AudioParam,s=i instanceof Array,c=a||d,p=l instanceof AudioNode,h=l instanceof Array;if(p&&c)l.disconnect(i);else if(p&&s)l.disconnect(i[0],0,i[1]);else if(h&&c)l[0].disconnect(i,l[1]);else if(h&&s)l[0].disconnect(i[0],l[1],i[1]);else throw console.log(l,i),Error("output port can not be only AudioNode or AudioNodeChannel");r.delete(o)};return{audioContext:e,audioNodes:t,registerAudioNode:n,registerAudioNodes:i,unregisterAudioNode:l,unregisterAudioNodes:e=>e.map(l),audioConnections:r,registerAudioConnection:a,registerAudioConnections:e=>e.map(a),unregisterAudioConnection:d,unregisterAudioConnections:e=>e.map(d)}})(),nodesState:{}}))(...e),...((e,o)=>({project:{files:[]},setProject(o){e({project:o,currentFileIndex:0})},getProject:()=>o().project,pullEditorChanges(){let{getEditorState:e,currentFileIndex:t,updateFileContent:r,project:n}=o(),i=n.files[t];ew(i)||r(t,{...i,file:e()})},syncEditorWithCurrentFile:()=>{let{currentFileIndex:e,setEditorState:t,project:r}=o(),n=r.files[e];if("audio"===n.type)return void console.log("audio file. skipping");t(n.file)},currentFileIndex:0,setCurrentFileIndex(t){let{currentFileIndex:r}=o();t!==r&&e({currentFileIndex:t})},updateFileContent(t,r){let{project:n}=o();e({project:{...n,files:n.files.map((e,o)=>o===t?{...e,...r}:e)}})},updateFileName(t,r){let{project:n}=o();e({project:{...n,files:n.files.map((e,o)=>o===t?{...e,name:r}:e)}})},addFile(t){let{project:r}=o(),n=[...r.files,t];e({project:{...r,files:n}})},deleteFile:t=>{let{project:r,currentFileIndex:n}=o();e({project:{...r,files:r.files.filter((e,o)=>t!==o)}}),t<=n&&e({currentFileIndex:n-1})}}))(...e),setGraph:async({nodes:e,edges:o})=>{let{patch:r,createNodes:n,createEdges:i,setNodesAndEdges:l,nodes:a,edges:d}=t();l({nodes:[],edges:[]}),await n(e),i(o)},clearGraph:()=>{let{setGraph:e}=t();e({nodes:[],edges:[]})},createNodes:async e=>{let{createNode:o}=t();await Promise.all(e.map(e=>o(e)))},createNode:e=>{let{addNode:o,nodesConfiguration:r}=t(),{type:n,id:i,data:l}=e;if(void 0===n)throw Error(`node type is not defined for node: ${i}`);o({...e,data:{...l,config:{...r[n]?.defaultConfig,...l?.config}}})},removeNode:e=>t().removeNodes([e]),removeNodes:e=>{let{edges:r,nodes:n,onNodesDelete:i,removeEdges:l,removeNodesFromControlPanel:a}=t(),d=e.map(({id:e})=>e),s=[...e,...n.filter(({parentNode:e})=>e&&d.includes(e))];a(s),l($(s,r)),i(s);let c=s.map(({id:e})=>e);o({nodes:n.filter(({id:e})=>!c.includes(e))})},removeEdges:e=>{let{edges:r,onEdgesDelete:n}=t(),i=e.map(({id:e})=>e);n(e),o({edges:r.filter(({id:e})=>!i.includes(e))})},createEdges:e=>{let{patch:o,edges:r,setEdges:n}=t();n(e)},onConnect:async e=>{let{edges:o,createEdges:r}=t();r(k(e,o))},onEdgesDelete:e=>{let{patch:o}=t()},onNodesDelete:async e=>{let{removeNodesFromControlPanel:o,patch:r}=t();o(e)},plugins:[],setPlugins:async e=>{let{setNodeTypes:r}=t();o({plugins:e});let n=e.reduce((e,o)=>({...e,...o.components.reduce((e,o)=>({...e,[o.type]:o}),{})}),{}),i=Object.keys(n).reduce((e,o)=>({...e,[o]:n[o].node}),{});Object.assign(ep,Object.keys(n).reduce((e,o)=>({...e,[o]:n[o].audioNode}),{})),r(i),o(({nodesConfiguration:e})=>({nodesConfiguration:{...e,...n}}))},nodesConfiguration:{},config:{showMinimap:!1},setConfig:e=>{o(({config:o})=>({config:{...o,...e}}))},getEditorState:()=>{let{getNodesAndEdges:e,controlPanel:o,viewport:r}=t();return{...e(),controlPanel:o,viewport:r}},setEditorState:async({nodes:e,edges:r,controlPanel:n,viewport:i})=>{let{setGraph:l}=t();await l({nodes:e,edges:r}),await new Promise(e=>setTimeout(e,1e3)),o({controlPanel:n,viewport:i})},isHelpShown:!1,toggleHelp:()=>{let{isHelpShown:e}=t();o({isHelpShown:!e})},copyBuffer:{nodes:[],edges:[]},copy:e=>{o({copyBuffer:e})},copySelectedItems:()=>{let{nodes:e,edges:o,copy:r}=t(),n=e.filter(({selected:e})=>e),i=o.filter(({selected:e})=>e);n.length&&r({nodes:n,edges:i})},pasteBuffer:(e=0,r=0)=>{let{copyBuffer:n,createNodes:i,setEdges:l,nodes:a,edges:d}=t(),{nodes:s,edges:c}=n;if(!s.length)return;o({nodes:a.map(e=>({...e,selected:!1}))});let p=s.reduce((e,o)=>!e||o.position.x<e.position.x&&o.position.y<e.position.y?o:e),h=p.position.x-e,u=p.position.y-r,{nodes:g,mapping:f}=s.reduce((e,o)=>{let t=(e=>{let o=+new Date+Math.floor(1e3*Math.random());return e?.type?`${e.type}-${o}`:o.toString()})(o);return{nodes:[...e.nodes,{...o,id:t,position:{x:o.position.x-h,y:o.position.y-u},selected:!0}],mapping:{...e.mapping,[o.id]:t}}},{nodes:[],mapping:{}});i(g);let m=c.map(e=>{let o=f[e.source]||e.source,t=f[e.target]||e.target;return{...e,id:e.id.replace(e.source,o).replace(e.target,t),source:o,target:t,selected:!0}});l([...d.map(e=>({...e,selected:!1})),...m])},getControlPanelNode:e=>{let{nodesConfiguration:o}=t(),{type:r}=e;if(!r)return null;let n=o[r]?.controlPanelNode;return n||(console.error(`could not find node for type ${r}`),null)},controlPanel:{show:!0,nodes:[],size:{width:200,height:100}},showControlPanel:()=>o(({controlPanel:e})=>({controlPanel:{...e,show:!0}})),hideControlPanel:()=>o(({controlPanel:e})=>({controlPanel:{...e,show:!1}})),addNodeToControlPanel:e=>{let{nodesConfiguration:r}=t(),n=e.type?r[e.type]?.defaultConfig:{},{height:i}=n?.size||{},l={id:e.id,...i?{height:i/ef}:{}};o(({controlPanel:e})=>({controlPanel:{...e,nodes:[...e.nodes,l]}}))},removeNodeFromControlPanel:e=>t().removeNodesFromControlPanel([e]),removeNodesFromControlPanel:e=>{let t=e.map(({id:e})=>e);o(({controlPanel:e})=>{let o=e.nodes.filter(({id:e})=>!t.includes(e));return{controlPanel:{...e,nodes:o}}})},setControlPanelNodes:e=>{o(({controlPanel:o})=>({controlPanel:{...o,nodes:e}}))},setControlPanelSize:e=>{o(({controlPanel:o})=>({controlPanel:{...o,size:e}}))},viewport:{x:0,y:0,zoom:1},setViewport:e=>o({viewport:e})}},o=(o,t,r)=>{let n=((e,o)=>{let t,r=W({propertyFilter:(e,o)=>!!(o.parent?.parent?.childName==="controlPanel"||["data","position","controlPanel"].includes(o.parent?.childName))||["controlPanel","size","edges","nodes","data","label","config","values","position","x","y"].includes(e)}),n=o();return(e,i)=>{e.currentFileIndex!==i.currentFileIndex&&o().history.clear(),clearTimeout(t),n||(n=i),t=setTimeout(()=>{let t=r.diff(n,e);n=null,t&&o().history.push(t)},500)}})(0,t);return r.subscribe(n),e((...e)=>o(...e),t,r)},(e,t,r)=>{r.subscribe(async(e,o)=>{});let n=new Set,i={...t(),nodes:[],edges:[]};return o(async(...o)=>{let r=t(),[l]=o,a={...i,..."function"==typeof l?l({...i}):l},d=ev(i.nodes,a.nodes),s=ev(i.edges,a.edges);i=a;let c=d.added,p=s.added,h=s.removed,u=d.removed,{patch:g}=r;if(c.length){let e=g.registerAudioNodes(c);n.add(e),await e,n.delete(e)}if(!(p.length||h.length||u.length))return void e(...o);if(n.size)try{await Promise.all([...n.values()])}catch(e){console.log("some error",e)}p.length&&g.registerAudioConnections(p),h.length&&g.unregisterAudioConnections(h),u.length&&g.unregisterAudioNodes(u),e(...o)},t,r)})),e$={colors:{elevation1:"#292d39",elevation2:"#181c20",elevation3:"#373c4b",accent1:"#0066dc",accent2:"#007bff",accent3:"#3c93ff",highlight1:"#535760",highlight2:"#8c92a4",highlight3:"#fefefe",vivid1:"#14df42",whitePrimary:"#ffffff",error:"#db5353"},zIndex:{modal:9998,controlPanel:9999,resumeContextLayout:10003}};R`
|
|
1
|
+
let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{withTheme as i,ThemeProvider as l,Global as a,css as s,useTheme as d}from"@emotion/react";import c from"@emotion/styled";import{nanoid as p}from"nanoid";import{useState as h,useEffect as g,useMemo as u,useCallback as m,useRef as f}from"react";import{FaPlus as v}from"react-icons/fa6";import{MdClose as y,MdDragHandle as b,MdSettings as w,MdInfoOutline as x}from"react-icons/md";import"reactflow/dist/style.css";import{registerFetcher as C}from"@web-noise/fetch";import $,{getConnectedEdges as k,addEdge as P,applyNodeChanges as N,applyEdgeChanges as z,useOnViewportChange as j,Background as E,BackgroundVariant as F,MiniMap as S,Controls as T,ReactFlowProvider as D,useReactFlow as M,Position as A,Handle as O,ControlButton as _,getBezierPath as I}from"reactflow";import{create as L}from"zustand";import{setAudioNodeTypes as H,createPatch as R}from"@web-noise/patch";import{reverse as W,patch as B,create as G}from"jsondiffpatch";import{injectGlobal as V}from"@emotion/css";import{useContextMenu as U,Item as J,Menu as X,Separator as Y}from"react-contexify";import"react-contexify/dist/ReactContexify.css";import q from"js-file-download";import K from"hotkeys-js";import{createPortal as Q}from"react-dom";import{FileDrop as Z}from"react-file-drop";import{FaFileUpload as ee,FaQuestion as eo,FaVolumeOff as et,FaMap as er,FaRegMap as en}from"react-icons/fa";import{Resizable as ei}from"re-resizable";import el from"react-grid-layout";import"react-grid-layout/css/styles.css";import{AiFillLock as ea,AiFillUnlock as es}from"react-icons/ai";import{RxDashboard as ed}from"react-icons/rx";import ec from"react-modern-drawer";import"react-modern-drawer/dist/index.css";import{marked as ep}from"marked";let eh="web-noise-drag-handle",eg=`.${eh}`,eu=10;(eb=ew||(ew={})).Gate="gate",eb.Number="number",eb.Audio="audio",eb.Any="any";let em=e=>JSON.parse(JSON.stringify(e)),ef=(e,o)=>{let t=new Set(e.map(e=>e.id)),r=new Set(o.map(e=>e.id));return{added:o.filter(e=>!t.has(e.id)),removed:e.filter(e=>!r.has(e.id))}},ev=e=>!("type"in e)||"patch"===e.type,ey=e=>"audio"===e.type;var eb,ew,ex=L((e=(...e)=>{let[o,t]=e;return{...((e,o)=>({nodes:[],edges:[],onNodesChange:o=>{e(({nodes:e})=>({nodes:N(o,e).map(e=>({dragHandle:eg,...e}))}))},onEdgesChange:o=>{e(({edges:e})=>({edges:z(o,e)}))},onConnect:o=>{e(({edges:e})=>({edges:P(o,e)}))},addNode:o=>{e(({nodes:e})=>({nodes:e.concat(o)}))},setNodes:o=>{e({nodes:o})},setEdges:o=>{e({edges:o})},setNodesAndEdges:({nodes:o,edges:t})=>{e({nodes:o,edges:t})},getNodesAndEdges:()=>{let{nodes:e,edges:t}=o();return{nodes:e,edges:t}},clearElements:()=>{e({nodes:[],edges:[]})},getNode:e=>{let{nodes:t}=o();return t.find(o=>o.id===e)||null},updateNodeData:(o,t)=>{e(({nodes:e})=>({nodes:e.map(e=>e.id===o?{...e,data:{...e.data,...t}}:e)}))},nodeTypes:{},setNodeTypes:o=>e({nodeTypes:o})}))(...e),...((e,o)=>({history:{maxHistoryLength:5,buffer:[],pointer:0,skipCollect:!1,push:t=>{let{history:r}=o(),{maxHistoryLength:n,skipCollect:i}=r;if(i)return void e({history:{...r,skipCollect:!1}});e(({history:e})=>{if(!e)return{};let{buffer:o,pointer:r}=e,i=o.slice(Math.max(r-n+1,0),r);return{history:{...e,buffer:[...i,t],pointer:Math.min(r+1,n)}}})},back:()=>{let{nodes:t,edges:r,controlPanel:n,history:i}=o(),{buffer:l,pointer:a}=i,s=l[a-1];if(!s)return;let d=W(s);d&&e({...B(em({nodes:t,edges:r,controlPanel:n}),d),history:{...i,pointer:a-1,skipCollect:!0}})},forward:()=>{let{nodes:t,edges:r,controlPanel:n,history:i}=o(),{buffer:l,pointer:a}=i,s=l[a];s&&e({...B(em({nodes:t,edges:r,controlPanel:n}),s),history:{...i,pointer:a+1,skipCollect:!0}})},clear:()=>{let{history:t}=o();e({history:{...t,buffer:[],pointer:0,skipCollect:!0}})}}}))(...e),...((e,o)=>({patch:R(),nodesState:{}}))(...e),...((e,o)=>({project:{files:[]},setProject(o){e({project:o,currentFileIndex:0})},getProject:()=>o().project,pullEditorChanges(){let{getEditorState:e,currentFileIndex:t,updateFileContent:r,project:n}=o(),i=n.files[t];ey(i)||r(t,{...i,file:e()})},syncEditorWithCurrentFile:()=>{let{currentFileIndex:e,setEditorState:t,project:r}=o(),n=r.files[e];if("audio"===n.type)return void console.log("audio file. skipping");t(n.file)},currentFileIndex:0,setCurrentFileIndex(t){let{currentFileIndex:r}=o();t!==r&&e({currentFileIndex:t})},updateFileContent(t,r){let{project:n}=o();e({project:{...n,files:n.files.map((e,o)=>o===t?{...e,...r}:e)}})},updateFileName(t,r){let{project:n}=o();e({project:{...n,files:n.files.map((e,o)=>o===t?{...e,name:r}:e)}})},addFile(t){let{project:r}=o(),n=[...r.files,t];e({project:{...r,files:n}})},deleteFile:t=>{let{project:r,currentFileIndex:n}=o();e({project:{...r,files:r.files.filter((e,o)=>t!==o)}}),t<=n&&e({currentFileIndex:n-1})}}))(...e),setGraph:async({nodes:e,edges:o})=>{let{patch:r,createNodes:n,createEdges:i,setNodesAndEdges:l,nodes:a,edges:s}=t();l({nodes:[],edges:[]}),await n(e),i(o)},clearGraph:()=>{let{setGraph:e}=t();e({nodes:[],edges:[]})},createNodes:async e=>{let{createNode:o}=t();await Promise.all(e.map(e=>o(e)))},createNode:e=>{let{addNode:o,nodesConfiguration:r}=t(),{type:n,id:i,data:l}=e;if(void 0===n)throw Error(`node type is not defined for node: ${i}`);o({...e,data:{...l,config:{...r[n]?.defaultConfig,...l?.config}}})},removeNode:e=>t().removeNodes([e]),removeNodes:e=>{let{edges:r,nodes:n,onNodesDelete:i,removeEdges:l,removeNodesFromControlPanel:a}=t(),s=e.map(({id:e})=>e),d=[...e,...n.filter(({parentNode:e})=>e&&s.includes(e))];a(d),l(k(d,r)),i(d);let c=d.map(({id:e})=>e);o({nodes:n.filter(({id:e})=>!c.includes(e))})},removeEdges:e=>{let{edges:r,onEdgesDelete:n}=t(),i=e.map(({id:e})=>e);n(e),o({edges:r.filter(({id:e})=>!i.includes(e))})},createEdges:e=>{let{patch:o,edges:r,setEdges:n}=t();n(e)},onConnect:async e=>{let{edges:o,createEdges:r}=t();r(P(e,o))},onEdgesDelete:e=>{let{patch:o}=t()},onNodesDelete:async e=>{let{removeNodesFromControlPanel:o,patch:r}=t();o(e)},plugins:[],setPlugins:async e=>{let{setNodeTypes:r}=t();o({plugins:e});let n=e.reduce((e,o)=>({...e,...o.components.reduce((e,o)=>({...e,[o.type]:o}),{})}),{}),i=Object.keys(n).reduce((e,o)=>({...e,[o]:n[o].node}),{});H(Object.keys(n).reduce((e,o)=>({...e,[o]:n[o].audioNode}),{})),r(i),o(({nodesConfiguration:e})=>({nodesConfiguration:{...e,...n}}))},nodesConfiguration:{},config:{showMinimap:!1},setConfig:e=>{o(({config:o})=>({config:{...o,...e}}))},getEditorState:()=>{let{getNodesAndEdges:e,controlPanel:o,viewport:r}=t();return{...e(),controlPanel:o,viewport:r}},setEditorState:async({nodes:e,edges:r,controlPanel:n,viewport:i})=>{let{setGraph:l}=t();await l({nodes:e,edges:r}),await new Promise(e=>setTimeout(e,1e3)),o({controlPanel:n,viewport:i})},isHelpShown:!1,toggleHelp:()=>{let{isHelpShown:e}=t();o({isHelpShown:!e})},copyBuffer:{nodes:[],edges:[]},copy:e=>{o({copyBuffer:e})},copySelectedItems:()=>{let{nodes:e,edges:o,copy:r}=t(),n=e.filter(({selected:e})=>e),i=o.filter(({selected:e})=>e);n.length&&r({nodes:n,edges:i})},pasteBuffer:(e=0,r=0)=>{let{copyBuffer:n,createNodes:i,setEdges:l,nodes:a,edges:s}=t(),{nodes:d,edges:c}=n;if(!d.length)return;o({nodes:a.map(e=>({...e,selected:!1}))});let p=d.reduce((e,o)=>!e||o.position.x<e.position.x&&o.position.y<e.position.y?o:e),h=p.position.x-e,g=p.position.y-r,{nodes:u,mapping:m}=d.reduce((e,o)=>{let t=(e=>{let o=+new Date+Math.floor(1e3*Math.random());return e?.type?`${e.type}-${o}`:o.toString()})(o);return{nodes:[...e.nodes,{...o,id:t,position:{x:o.position.x-h,y:o.position.y-g},selected:!0}],mapping:{...e.mapping,[o.id]:t}}},{nodes:[],mapping:{}});i(u);let f=c.map(e=>{let o=m[e.source]||e.source,t=m[e.target]||e.target;return{...e,id:e.id.replace(e.source,o).replace(e.target,t),source:o,target:t,selected:!0}});l([...s.map(e=>({...e,selected:!1})),...f])},getControlPanelNode:e=>{let{nodesConfiguration:o}=t(),{type:r}=e;if(!r)return null;let n=o[r]?.controlPanelNode;return n||(console.error(`could not find node for type ${r}`),null)},controlPanel:{show:!0,nodes:[],size:{width:200,height:100}},showControlPanel:()=>o(({controlPanel:e})=>({controlPanel:{...e,show:!0}})),hideControlPanel:()=>o(({controlPanel:e})=>({controlPanel:{...e,show:!1}})),addNodeToControlPanel:e=>{let{nodesConfiguration:r}=t(),n=e.type?r[e.type]?.defaultConfig:{},{height:i}=n?.size||{},l={id:e.id,...i?{height:i/eu}:{}};o(({controlPanel:e})=>({controlPanel:{...e,nodes:[...e.nodes,l]}}))},removeNodeFromControlPanel:e=>t().removeNodesFromControlPanel([e]),removeNodesFromControlPanel:e=>{let t=e.map(({id:e})=>e);o(({controlPanel:e})=>{let o=e.nodes.filter(({id:e})=>!t.includes(e));return{controlPanel:{...e,nodes:o}}})},setControlPanelNodes:e=>{o(({controlPanel:o})=>({controlPanel:{...o,nodes:e}}))},setControlPanelSize:e=>{o(({controlPanel:o})=>({controlPanel:{...o,size:e}}))},viewport:{x:0,y:0,zoom:1},setViewport:e=>o({viewport:e})}},o=(o,t,r)=>{let n=((e,o)=>{let t,r=G({propertyFilter:(e,o)=>!!(o.parent?.parent?.childName==="controlPanel"||["data","position","controlPanel"].includes(o.parent?.childName))||["controlPanel","size","edges","nodes","data","label","config","values","position","x","y"].includes(e)}),n=o();return(e,i)=>{e.currentFileIndex!==i.currentFileIndex&&o().history.clear(),clearTimeout(t),n||(n=i),t=setTimeout(()=>{let t=r.diff(n,e);n=null,t&&o().history.push(t)},500)}})(0,t);return r.subscribe(n),e((...e)=>o(...e),t,r)},(e,t,r)=>{r.subscribe(async(e,o)=>{});let n=new Set,i={...t(),nodes:[],edges:[]};return o(async(...o)=>{let r=t(),[l]=o,a={...i,..."function"==typeof l?l({...i}):l},s=ef(i.nodes,a.nodes),d=ef(i.edges,a.edges);i=a;let c=s.added,p=d.added,h=d.removed,g=s.removed,{patch:u}=r;if(c.length){let e=u.registerAudioNodes(c);n.add(e),await e,n.delete(e)}if(!(p.length||h.length||g.length))return void e(...o);if(n.size)try{await Promise.all([...n.values()])}catch(e){console.log("some error",e)}p.length&&u.registerAudioConnections(p),h.length&&u.unregisterAudioConnections(h),g.length&&u.unregisterAudioNodes(g),e(...o)},t,r)})),eC={colors:{elevation1:"#292d39",elevation2:"#181c20",elevation3:"#373c4b",accent1:"#0066dc",accent2:"#007bff",accent3:"#3c93ff",highlight1:"#535760",highlight2:"#8c92a4",highlight3:"#fefefe",vivid1:"#14df42",whitePrimary:"#ffffff",error:"#db5353"},zIndex:{modal:9998,controlPanel:9999,resumeContextLayout:10003}};V`
|
|
2
2
|
.react-flow {
|
|
3
3
|
.react-flow__pane {
|
|
4
4
|
/* background: rgb(106 106 106); */
|
|
5
5
|
/* background: "white"; */
|
|
6
6
|
// background: #292d39;
|
|
7
|
-
background: ${
|
|
7
|
+
background: ${eC.colors.elevation3};
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.react-flow__background {
|
|
@@ -25,28 +25,28 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.react-flow__edge-path {
|
|
28
|
-
stroke: ${
|
|
28
|
+
stroke: ${eC.colors.accent2};
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.react-flow__node.selected {
|
|
32
|
-
border: 1px solid ${
|
|
33
|
-
box-shadow: 0 0 0 0.5px #${
|
|
32
|
+
border: 1px solid ${eC.colors.accent2};
|
|
33
|
+
box-shadow: 0 0 0 0.5px #${eC.colors.accent2};
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.react-flow__node-default.selected, .react-flow__node-default.selected:hover {
|
|
37
|
-
box-shadow: 0 0 0 0.5px #${
|
|
37
|
+
box-shadow: 0 0 0 0.5px #${eC.colors.accent2};
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
/* .react-flow__minimap-mask {
|
|
41
|
-
fill: ${
|
|
41
|
+
fill: ${eC.colors.elevation1}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.react-flow__minimap-node {
|
|
45
|
-
fill:${
|
|
45
|
+
fill:${eC.colors.accent2}
|
|
46
46
|
} */
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
`;var
|
|
49
|
+
`;var e$=()=>d();let ek=c(J)``,eP=c(X)`
|
|
50
50
|
background: ${({colors:e})=>e.elevation2};
|
|
51
51
|
padding: 0;
|
|
52
52
|
border-radius: 0;
|
|
@@ -59,7 +59,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
59
59
|
background-color: ${({colors:e})=>e.elevation1};
|
|
60
60
|
margin: 0;
|
|
61
61
|
}
|
|
62
|
-
`,
|
|
62
|
+
`,eN="editor-edge-menu";var ez=()=>{let e=e$(),o=ex(e=>e.removeEdges);return t(n,{children:t(eP,{id:eN,animation:!1,colors:e.colors,children:t(ek,{onClick:e=>o([e.props.edge]),children:"Delete Edge (DEL)"})})})};let ej=c.div`
|
|
63
63
|
position: fixed;
|
|
64
64
|
z-index: ${({theme:e})=>e.zIndex.modal};
|
|
65
65
|
width: 100%;
|
|
@@ -78,19 +78,19 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
78
78
|
height: 80%;
|
|
79
79
|
overflow-y: scroll;
|
|
80
80
|
position: relative;
|
|
81
|
-
`,
|
|
81
|
+
`,eF=c(y)`
|
|
82
82
|
position: absolute;
|
|
83
83
|
top: 0.2rem;
|
|
84
84
|
right: 0.2rem;
|
|
85
85
|
cursor: pointer;
|
|
86
|
-
`;var
|
|
86
|
+
`;var eS=({children:e,onClose:o,...n})=>{let i=e$();return g(()=>{let e=e=>{"Escape"===e.key&&o?.()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[o]),Q(t(ej,{theme:i,onClick:o,children:r(eE,{...n,onClick:e=>{e.stopPropagation()},theme:i,children:[e,t(eF,{theme:i,onClick:o})]})}),document.body)};let eT=i(c.div`
|
|
87
87
|
width: 100%;
|
|
88
|
-
`),
|
|
88
|
+
`),eD=i(c.div`
|
|
89
89
|
padding: 1rem;
|
|
90
90
|
display: flex;
|
|
91
91
|
flex-direction: column;
|
|
92
92
|
gap: 1rem;
|
|
93
|
-
`),
|
|
93
|
+
`),eM=i(c.ul`
|
|
94
94
|
list-style: none;
|
|
95
95
|
margin: 0;
|
|
96
96
|
padding: 0;
|
|
@@ -111,18 +111,18 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
111
111
|
cursor: pointer;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
`),
|
|
114
|
+
`),eA=i(c.div`
|
|
115
115
|
white-space: nowrap;
|
|
116
116
|
overflow: hidden;
|
|
117
117
|
text-overflow: ellipsis;
|
|
118
|
-
`),
|
|
118
|
+
`),eO=i(c.div`
|
|
119
119
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
120
120
|
font-size: 12px;
|
|
121
|
-
`),
|
|
121
|
+
`),e_=i(c.div`
|
|
122
122
|
display: flex;
|
|
123
123
|
gap: 0.2rem;
|
|
124
124
|
flex-wrap: wrap;
|
|
125
|
-
`),
|
|
125
|
+
`),eI=i(c.span`
|
|
126
126
|
cursor: pointer;
|
|
127
127
|
font-size: 10px;
|
|
128
128
|
background: ${({theme:e,isActive:o})=>o?e.colors.highlight1:e.colors.elevation3};
|
|
@@ -133,17 +133,17 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
133
133
|
&:hover {
|
|
134
134
|
border-color: ${({theme:e})=>e.colors.accent2};
|
|
135
135
|
}
|
|
136
|
-
`),
|
|
136
|
+
`),eL=i(c.div``),eH=i(c.div`
|
|
137
137
|
font-size: 1.1rem;
|
|
138
138
|
padding: 0.25rem 0;
|
|
139
139
|
color: ${({theme:e})=>e.colors.highlight3};
|
|
140
140
|
`),eR=i(c.div`
|
|
141
141
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
142
142
|
font-size: 12px;
|
|
143
|
-
`);var
|
|
143
|
+
`);var eW=({onComponentClick:e,filters:{plugin:o,search:n="",tags:i},onTagClick:l})=>{let a=ex(({plugins:e})=>e),s=u(()=>o?a.filter(({name:e})=>e===o):a,[a,o]);return t(eT,{children:u(()=>n||i?.length?s.map(e=>({...e,components:i?.length?e.components.filter(e=>i?.every(o=>e.tags?.includes(o))):e.components})).map(e=>({...e,components:e.components.filter(({type:e,name:o})=>e.toLocaleLowerCase().includes(n.toLocaleLowerCase())||o?.toLocaleLowerCase().includes(n.toLocaleLowerCase()))})):s,[s,n,i]).map(({name:o,description:n,components:a},s)=>a.length?r(eD,{children:[r(eL,{children:[t(eH,{children:o}),t(eR,{children:n})]}),t(eM,{children:a.sort((e,o)=>e.type.toLowerCase()>o.type.toLowerCase()?1:-1).map((o,n)=>r("li",{onClick:()=>e(o),children:[t(eA,{children:o.name||o.type}),o.description&&t(eO,{children:o.description}),t(e_,{children:o.tags?.map((e,o)=>t(eI,{isActive:i?.includes(e),onClickCapture:o=>{o.stopPropagation(),l(e)},children:e},o))})]},n))})]},s):null)})};let eB=c.div`
|
|
144
144
|
display: flex;
|
|
145
145
|
position: relative;
|
|
146
|
-
`,
|
|
146
|
+
`,eG=c.input`
|
|
147
147
|
padding-right: 2rem;
|
|
148
148
|
padding-left: 0.3rem;
|
|
149
149
|
width: 100%;
|
|
@@ -181,7 +181,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
181
181
|
gap: 0.6rem;
|
|
182
182
|
border-right: 1px solid ${({theme:e})=>e.colors.elevation3};
|
|
183
183
|
min-width: 14rem;
|
|
184
|
-
`,
|
|
184
|
+
`,eU=c.label`
|
|
185
185
|
user-select: none;
|
|
186
186
|
input {
|
|
187
187
|
display: none;
|
|
@@ -193,7 +193,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
193
193
|
color: ${({theme:e})=>e.colors.accent3};
|
|
194
194
|
cursor: pointer;
|
|
195
195
|
}
|
|
196
|
-
`,
|
|
196
|
+
`,eJ=i(c(eI)`
|
|
197
197
|
font-size: 12px;
|
|
198
198
|
padding: 0.2rem 0.4rem;
|
|
199
199
|
&:hover {
|
|
@@ -202,16 +202,16 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
202
202
|
content: "×";
|
|
203
203
|
margin-left: 0.4rem;
|
|
204
204
|
}
|
|
205
|
-
`);var
|
|
205
|
+
`);var eX=({onChange:e,value:o})=>{let n=e$(),i=ex(({plugins:e})=>e),l=f(null);return g(()=>{l.current&&l.current.focus()},[l]),r(eV,{theme:n,children:[t(eB,{children:t(eG,{ref:l,theme:n,value:o.search||"",placeholder:"search...",onChange:t=>e({...o,search:t.target.value})})}),t(e_,{children:o.tags?.map((r,n)=>t(eJ,{isActive:!0,onClick:()=>{let t=o.tags?.filter(e=>e!==r)||[];e({...o,tags:t})},children:r},n))}),i.map(({name:i,components:l},a)=>i?r(eU,{theme:n,children:[t("input",{type:"checkbox",name:"plugin",value:i,checked:i===o.plugin,onChange:()=>{e({...o,plugin:i===o.plugin?null:i})}}),t("span",{children:i})]},a):null)]})};let eY=c.div`
|
|
206
206
|
height: 100%;
|
|
207
207
|
width: 100%;
|
|
208
208
|
display: flex;
|
|
209
209
|
gap: 1rem;
|
|
210
|
-
`,
|
|
210
|
+
`,eq=c.div`
|
|
211
211
|
flex-grow: 1;
|
|
212
212
|
height: 100%;
|
|
213
213
|
overflow-y: scroll;
|
|
214
|
-
`;var
|
|
214
|
+
`;var eK=({isOpen:e,closeMenu:o,mousePosition:n})=>{let i=e$(),{screenToFlowPosition:l}=M(),{createNode:a}=ex(({createNode:e})=>({createNode:e})),[s,d]=h({}),c=m(({type:e})=>{let{x:t,y:r}=l(n);a({id:`${e}-${+new Date}`,type:e,data:{label:e},position:{x:t,y:r},targetPosition:A.Left,sourcePosition:A.Right}),o()},[n,l,a,o,n]);return e?t(eS,{onClose:()=>{o(),d({})},children:r(eY,{theme:i,children:[t(eX,{onChange:d,value:s}),t(eq,{theme:i,children:t(eW,{filters:s,onTagClick:e=>{d(o=>({...o,tags:o.tags?.includes(e)?o.tags.filter(o=>o!==e):[...o.tags||[],e]}))},onComponentClick:e=>{c(e),d({})}})})]})}):null};let eQ=c.div`
|
|
215
215
|
display: flex;
|
|
216
216
|
align-items: center;
|
|
217
217
|
justify-content: center;
|
|
@@ -237,19 +237,19 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
237
237
|
.drop-zone-drag-over {
|
|
238
238
|
opacity: 1;
|
|
239
239
|
}
|
|
240
|
-
`,
|
|
240
|
+
`,eZ=c.div`
|
|
241
241
|
display: flex;
|
|
242
242
|
flex-wrap: wrap;
|
|
243
243
|
align-items: center;
|
|
244
244
|
justify-content: center;
|
|
245
245
|
height: 100%;
|
|
246
246
|
width: 100%;
|
|
247
|
-
`,
|
|
247
|
+
`,e0=c(ee)`
|
|
248
248
|
width: 100%;
|
|
249
249
|
height: 8rem;
|
|
250
|
-
`,
|
|
250
|
+
`,e1=c.div`
|
|
251
251
|
font-size: 2rem;
|
|
252
|
-
`;var
|
|
252
|
+
`;var e2=({isOpen:e,closeMenu:o})=>{let n=e$(),i=ex(({setGraph:e})=>e),l=ex(e=>e.setEditorState),a=f(null),s=m(e=>{let[t]=e||[];t.text().then(JSON.parse).then(e=>{l(e),o()}).catch(console.error)},[i,o]);return e?t(eS,{onClose:o,children:r(eQ,{theme:n,children:[t("input",{onChange:({target:{files:e}})=>s(e),ref:a,type:"file",className:"hidden",style:{display:"none"},accept:".json"}),t(Z,{className:"drop-zone-wrapper",targetClassName:"drop-zone",draggingOverTargetClassName:"drop-zone-drag-over",onTargetClick:()=>{a.current?.click()},onDrop:e=>s(e),children:r(eZ,{theme:n,children:[t(e0,{}),t(e1,{children:"click or drop file here"})]})})]})}):null};let e3=c.div`
|
|
253
253
|
display: flex;
|
|
254
254
|
align-items: center;
|
|
255
255
|
justify-content: center;
|
|
@@ -282,12 +282,12 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
282
282
|
justify-content: center;
|
|
283
283
|
height: 100%;
|
|
284
284
|
width: 100%;
|
|
285
|
-
`,
|
|
285
|
+
`,e9=c(ee)`
|
|
286
286
|
width: 100%;
|
|
287
287
|
height: 8rem;
|
|
288
|
-
`,
|
|
288
|
+
`,e5=c.div`
|
|
289
289
|
font-size: 2rem;
|
|
290
|
-
`;var
|
|
290
|
+
`;var e7=({isOpen:e,closeMenu:o})=>{let n=e$(),i=ex(e=>e.setProject),l=f(null),a=m(e=>{let[t]=e||[];t.text().then(JSON.parse).then(e=>{i(e),o()}).catch(console.error)},[i,o]);return e?t(eS,{onClose:o,children:r(e3,{theme:n,children:[t("input",{onChange:({target:{files:e}})=>a(e),ref:l,type:"file",className:"hidden",style:{display:"none"},accept:".json"}),t(Z,{className:"drop-zone-wrapper",targetClassName:"drop-zone",draggingOverTargetClassName:"drop-zone-drag-over",onTargetClick:()=>{l.current?.click()},onDrop:e=>a(e),children:r(e8,{theme:n,children:[t(e9,{}),t(e5,{children:"click or drop file here"})]})})]})}):null};let e6=e=>new Promise((o,t)=>{let r=new FileReader;r.readAsDataURL(e),r.onload=()=>o(r.result?.toString()||""),r.onerror=e=>t(e)}),e4=c.div`
|
|
291
291
|
display: flex;
|
|
292
292
|
align-items: center;
|
|
293
293
|
justify-content: center;
|
|
@@ -313,19 +313,19 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
313
313
|
.drop-zone-drag-over {
|
|
314
314
|
opacity: 1;
|
|
315
315
|
}
|
|
316
|
-
`,
|
|
316
|
+
`,oe=c.div`
|
|
317
317
|
display: flex;
|
|
318
318
|
flex-wrap: wrap;
|
|
319
319
|
align-items: center;
|
|
320
320
|
justify-content: center;
|
|
321
321
|
height: 100%;
|
|
322
322
|
width: 100%;
|
|
323
|
-
`,
|
|
323
|
+
`,oo=c(ee)`
|
|
324
324
|
width: 100%;
|
|
325
325
|
height: 8rem;
|
|
326
|
-
`,
|
|
326
|
+
`,ot=c.div`
|
|
327
327
|
font-size: 2rem;
|
|
328
|
-
`;var
|
|
328
|
+
`;var or=({isOpen:e,closeMenu:o})=>{let n=e$();ex(({setGraph:e})=>e),ex(e=>e.setEditorState);let i=ex(e=>e.addFile),l=f(null),a=m(async e=>{let[t]=e||[],r=await e6(t);i({type:"audio",id:`audio-file-${+new Date}`,name:t.name,file:r}),o()},[i,o]);return e?t(eS,{onClose:o,children:r(e4,{theme:n,children:[t("input",{onChange:({target:{files:e}})=>a(e),ref:l,type:"file",className:"hidden",style:{display:"none"},accept:".wav,.mp3,.ogg"}),t(Z,{className:"drop-zone-wrapper",targetClassName:"drop-zone",draggingOverTargetClassName:"drop-zone-drag-over",onTargetClick:()=>{l.current?.click()},onDrop:e=>a(e),children:r(oe,{theme:n,children:[t(oo,{}),t(ot,{children:"click or drop file here"})]})})]})}):null};let on="editor-menu";var oi=({editorContextMenu:e=[]})=>{let o=e$(),[i,l]=h({x:0,y:0}),[a,s]=h(!1),[d,c]=h(!1),[p,f]=h(!1),[v,y]=h(!1),b=m((e,o)=>{l({x:e,y:o}),s(!0)},[s]),w=ex(e=>e.pasteBuffer),{screenToFlowPosition:x}=M(),C=m(e=>{let{x:o,y:t}=x(e);w(o,t)},[s,x]),$=ex(({clearGraph:e})=>e),k=ex(e=>e.getEditorState),P=ex(e=>e.getProject),N=m(()=>{$()},[$]),z=ex(e=>e.toggleHelp),j=ex(e=>e.history.back),E=ex(e=>e.history.forward),F=ex(e=>e.history.pointer),S=ex(e=>e.history.buffer),T=ex(e=>e.copySelectedItems),D=ex(e=>e.nodes),A=u(()=>D.filter(({selected:e})=>e),[D]),O=ex(e=>e.copyBuffer),_=M(),I=m(()=>{q(JSON.stringify({...k()},null,2),"web-noise-patch.json")},[k,_]),L=m(()=>{q(JSON.stringify({...P()},null,2),"web-noise-project.json")},[k,_]);return g(()=>(K("command+shift+a",()=>(b(200,50),!1)),K("shift+/",()=>(z(),!1)),K("command+z",()=>(j(),!1)),K("command+shift+z",()=>(E(),!1)),K("command+c",()=>(T(),!1)),K("command+v",()=>(C({x:200,y:50}),!1)),()=>{K.unbind()}),[b,C]),r(n,{children:[t(eK,{isOpen:a,closeMenu:()=>s(!1),mousePosition:i}),t(e2,{isOpen:d,closeMenu:()=>c(!1)}),t(e7,{isOpen:p,closeMenu:()=>f(!1)}),t(or,{isOpen:v,closeMenu:()=>y(!1)}),r(eP,{id:on,animation:!1,colors:o.colors,children:[t(ek,{onClick:({triggerEvent:{clientX:e,clientY:o}})=>b(e,o),children:"Add Node (⌘+⇧+A)"}),t(Y,{}),t(ek,{onClick:N,children:"Delete All"}),t(Y,{}),t(ek,{onClick:I,children:"Download patch"}),t(ek,{onClick:()=>c(!0),children:"Upload patch"}),t(Y,{}),t(ek,{onClick:L,children:"Download project"}),t(ek,{onClick:()=>f(!0),children:"Upload project"}),t(Y,{}),t(ek,{onClick:()=>y(!0),children:"Upload Audio File"}),t(Y,{}),t(ek,{disabled:0===F,onClick:j,children:"Undo (⌘+z)"}),t(ek,{disabled:F===S.length,onClick:E,children:"Redo (⌘+⇧+Z)"}),t(Y,{}),t(ek,{disabled:!A.length,onClick:T,children:"Copy Selected (⌘+c)"}),t(ek,{disabled:!O.nodes.length,onClick:({triggerEvent:{clientX:e,clientY:o}})=>C({x:e,y:o}),children:"Paste (⌘+v)"}),t(Y,{}),e.map((e,o)=>t(ek,{children:e},o)),t(Y,{}),t(ek,{onClick:z,children:"Help (⇧+?)"})]})]})};let ol="editor-node-menu";var oa=e=>{let o=e$(),i=ex(e=>e.removeNodes),l=ex(e=>e.addNodeToControlPanel),a=ex(e=>e.removeNodeFromControlPanel),s=ex(e=>e.copy),d=ex(e=>e.nodesConfiguration),c=ex(e=>e.controlPanel.nodes),p=m(({props:e})=>!!e?.node.type&&!!c.find(({id:o})=>o===e.node.id),[c]),h=m(({props:e})=>{if(!e?.node.type)return!1;let o=d[e.node.type];return!!o?.controlPanelNode},[d]);return t(n,{children:r(eP,{id:ol,animation:!1,colors:o.colors,children:[t(ek,{onClick:e=>i([e.props.node]),children:"Delete Node (DEL)"}),t(ek,{hidden:(...e)=>!h(...e)||p(...e),onClick:e=>l(e.props.node),children:"Add To Control Panel"}),t(ek,{hidden:(...e)=>!h(...e)||!p(...e),onClick:e=>a(e.props.node),children:"Remove From Control Panel"}),t(ek,{onClick:e=>s({nodes:[e.props.node],edges:[]}),children:"Copy (⌘+c)"})]})})},os=e=>ex(({patch:e})=>e).audioNodes.get(e),od=e=>{let o=ex(({updateNodeData:e})=>e),t=m(t=>o(e,{values:t}),[e,o]);return{updateNodeValues:t,updateNodeConfig:m(t=>o(e,{config:t}),[e,o]),updateNodeLabel:m(t=>o(e,{label:t}),[e,o])}};let oc=c.input`
|
|
329
329
|
width: 100%;
|
|
330
330
|
background: none;
|
|
331
331
|
border: none;
|
|
@@ -354,7 +354,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
354
354
|
padding: 0.3rem;
|
|
355
355
|
border-radius: 0.2rem;
|
|
356
356
|
}
|
|
357
|
-
`;var
|
|
357
|
+
`;var op=({onChange:e,value:o="",className:r})=>{let n=f(null),[i,l]=h(!1),a=m(e=>{e.target?.select(),l(!0)},[l]),s=m(()=>{window.getSelection()?.collapseToEnd(),l(!1)},[l]),d=m(()=>{s(),n.current&&e(n.current.value)},[n,s,e]),c=m(()=>{s(),n.current&&o&&(n.current.value=o)},[n,s,o]);return g(()=>{n.current&&(n.current.value=o)},[o,n]),t(oc,{ref:n,type:"text",readOnly:!i,onDoubleClick:e=>a(e),onBlur:d,onKeyDown:e=>{switch(e.key){case"Escape":c();break;case"Enter":d()}},className:r})};let oh=i(c.div`
|
|
358
358
|
height: 100%;
|
|
359
359
|
width: 100%;
|
|
360
360
|
overflow: scroll;
|
|
@@ -382,13 +382,13 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
382
382
|
a {
|
|
383
383
|
color: ${({theme:e})=>e.colors.accent1};
|
|
384
384
|
}
|
|
385
|
-
`);var og=({isOpen:e,onClose:o,type:r,node:n})=>{let{info:i,portsDescription:l}=
|
|
385
|
+
`);var og=({isOpen:e,onClose:o,type:r,node:n})=>{let{info:i,portsDescription:l}=ex(e=>e.nodesConfiguration[r]),a=u(()=>{let e=[],o=n.inputs;if(o)for(let t in e.push("## Inputs"),o){let r=o[t];e.push(`### *${t}*`);let n=l?.inputs?.[t];n&&e.push(n),Array.isArray(r.type)?e.push(`**Types**: \`${r.type.join(", ")}\``):e.push(`**Type**: \`${r.type||"unknown"}\``),r.range&&e.push(`**Range**: \`[${r.range[0]}, ${r.range[1]}]\``),void 0!==r.defaultValue&&e.push(`**Default**: \`${r.defaultValue}\``)}let t=n.outputs;if(t)for(let o in e.push("## Outputs"),t){let r=t[o];e.push(`### *${o}*`);let n=l?.outputs?.[o];n&&e.push(n),Array.isArray(r.type)?e.push(`**Types**: \`${r.type.join(", ")}\``):e.push(`**Type**: \`${r.type||"unknown"}\``),r.range&&e.push(`**Range**: \`[${r.range[0]}, ${r.range[1]}]\``),void 0!==r.defaultValue&&e.push(`**Default**: \`${r.defaultValue}\``)}return e.join("\n\n")},[n,l]);return e?t(eS,{onClose:o,children:t(oh,{dangerouslySetInnerHTML:{__html:ep((i||"")+"\n\n"+a||"")}})}):null};let ou=c.div`
|
|
386
386
|
background-color: var(--leva-colors-elevation1);
|
|
387
|
-
`,om=c(
|
|
387
|
+
`,om=c(ou)`
|
|
388
388
|
padding: 2rem 5rem;
|
|
389
|
-
`,
|
|
389
|
+
`,of=c(ou)`
|
|
390
390
|
padding: 1rem 2rem;
|
|
391
|
-
`,
|
|
391
|
+
`,ov=c(w)`
|
|
392
392
|
font-size: 1.2rem;
|
|
393
393
|
opacity: 0.4;
|
|
394
394
|
width: 1rem;
|
|
@@ -396,7 +396,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
396
396
|
opacity: 1;
|
|
397
397
|
cursor: pointer;
|
|
398
398
|
}
|
|
399
|
-
`,
|
|
399
|
+
`,oy=c(x)`
|
|
400
400
|
font-size: 1.2rem;
|
|
401
401
|
opacity: 0.4;
|
|
402
402
|
width: 1rem;
|
|
@@ -409,7 +409,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
409
409
|
font-family: var(--leva-fonts-mono);
|
|
410
410
|
font-size: var(--leva-fontSizes-root);
|
|
411
411
|
background-color: var(--leva-colors-elevation1);
|
|
412
|
-
`,
|
|
412
|
+
`,ow=c(ob)`
|
|
413
413
|
display: flex;
|
|
414
414
|
height: var(--leva-sizes-titleBarHeight);
|
|
415
415
|
touch-action: none;
|
|
@@ -419,38 +419,38 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
419
419
|
color: var(--leva-colors-highlight1);
|
|
420
420
|
padding: 0 0.4rem;
|
|
421
421
|
gap: 0.3rem;
|
|
422
|
-
`,
|
|
422
|
+
`,ox=c(ob)(({theme:e})=>`
|
|
423
423
|
display: grid;
|
|
424
424
|
grid-template-areas: "inputs outputs";
|
|
425
425
|
background: ${e.colors.elevation2};
|
|
426
426
|
border-bottom: 1px solid ${e.colors.elevation1};
|
|
427
427
|
color: ${e.colors.highlight3};
|
|
428
428
|
font-size: 0.6rem;
|
|
429
|
-
`),
|
|
429
|
+
`),oC=c.div`
|
|
430
430
|
grid-area: inputs;
|
|
431
431
|
text-align: left;
|
|
432
|
-
`,
|
|
432
|
+
`,o$=c.div`
|
|
433
433
|
grid-area: outputs;
|
|
434
434
|
text-align: right;
|
|
435
|
-
`,
|
|
435
|
+
`,ok=c.div`
|
|
436
436
|
position: relative;
|
|
437
437
|
padding: 5px 10px;
|
|
438
|
-
`,oP={[
|
|
438
|
+
`,oP={[ew.Audio]:"#4ade80",[ew.Gate]:"#c084fc",[ew.Number]:"#38bdf8",[ew.Any]:"#ffffff"},oN=i(c(O,{shouldForwardProp:e=>"portType"!==e})`
|
|
439
439
|
--port-color: ${e=>{if(!e.portType)return e.theme.colors.highlight2;if(!Array.isArray(e.portType))return oP[e.portType];{let o=e.portType.map(e=>oP[e]);return`linear-gradient(0.25turn, ${o.join(", ")});`}}};
|
|
440
440
|
border-color: var(--port-color);
|
|
441
441
|
background: var(--port-color);
|
|
442
442
|
box-shadow: 0px 0px 0px 1px ${({theme:e})=>e.colors.elevation2} inset;
|
|
443
|
-
`),
|
|
443
|
+
`),oz=i(c(oN)`
|
|
444
444
|
left: -3px;
|
|
445
|
-
`),
|
|
445
|
+
`),oj=({...e})=>t(oz,{...e,type:"target",position:A.Left}),oE=i(c(oN)`
|
|
446
446
|
right: -3px;
|
|
447
|
-
`),
|
|
447
|
+
`),oF=e=>t(oE,{...e,type:"source",position:A.Right}),oS=({className:e,...o})=>t(ow,{...o,className:[e,eh].join(" ")}),oT=e=>ex(o=>o.nodesConfiguration[e]),oD=e=>{let{id:o,children:n,selected:i,...l}=e,a=e$(),s=ex(({getNode:e})=>e),d=ex(e=>e.nodesConfiguration),[c,p]=h(!1),{info:g}=oT(e.type),m=u(()=>d[e.type].resizable??!1,[d,e.type]),{updateNodeLabel:f,updateNodeConfig:v}=od(o),{data:y}=s(o)||{},b=os(o),{ConfigNode:w}=(e=>{let{configNode:o}=oT(e);return{ConfigNode:o}})(l.type),[x,C]=h(!1);if(!b)return t(om,{className:eh,children:"can't find audio node"});if(b.loading)return t(om,{className:eh,children:"loading"});if(b.error)return r(of,{className:eh,children:["error: ",b.error.toString()]});if(!b.node)return t(om,{className:eh,children:"can't find audio node"});let $=y?.config?.size,{node:{inputs:k,outputs:P}}=b;return r(ou,{children:[r(oS,{children:[g&&t(oy,{onClickCapture:()=>p(!0)}),t(op,{value:y?.label??"No Name",onChange:f}),w&&t(ov,{onClickCapture:()=>C(e=>!e)})]}),r(ox,{theme:a,children:[t(oC,{children:k?Object.keys(k).map((e,o)=>r(ok,{children:[t(oj,{id:e,portType:k[e].type}),t("span",{children:e})]},o)):null}),t(o$,{children:P?Object.keys(P).map((e,o)=>r(ok,{children:[t(oF,{id:e,portType:P[e].type}),t("span",{children:e})]},o)):null})]}),w&&x&&i?t(w,{...e}):m?t(ei,{size:$,minWidth:180,minHeight:30,enable:{bottom:!0,bottomRight:!0,right:!0},onResizeStop:(e,o,t,r)=>{let n=$?{width:$.width+r.width,height:$.height+r.height}:t.getBoundingClientRect();v({...y?.config,size:n})},children:n}):n,t(og,{isOpen:c,type:e.type,onClose:()=>p(!1),node:b.node})]})},oM=c.div`
|
|
448
448
|
width: 100%;
|
|
449
449
|
padding: 0.4rem 0;
|
|
450
450
|
white-space: nowrap;
|
|
451
451
|
overflow: hidden;
|
|
452
452
|
text-overflow: ellipsis;
|
|
453
|
-
`,
|
|
453
|
+
`,oA=c(oS)`
|
|
454
454
|
display: flex;
|
|
455
455
|
gap: 0.1rem;
|
|
456
456
|
padding: 0 0.4rem;
|
|
@@ -458,13 +458,13 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
458
458
|
font-size: 0.6rem;
|
|
459
459
|
height: auto;
|
|
460
460
|
min-width: 0;
|
|
461
|
-
`,
|
|
461
|
+
`,oO=c.div`
|
|
462
462
|
display: flex;
|
|
463
463
|
align-items: center;
|
|
464
464
|
height: 70%;
|
|
465
465
|
width: auto;
|
|
466
466
|
gap: 0.4rem;
|
|
467
|
-
`,
|
|
467
|
+
`,o_=c.span`
|
|
468
468
|
width: auto;
|
|
469
469
|
height: 100%;
|
|
470
470
|
cursor: pointer;
|
|
@@ -476,11 +476,11 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
476
476
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
477
477
|
cursor: pointer;
|
|
478
478
|
}
|
|
479
|
-
`,
|
|
479
|
+
`,oI=c.div`
|
|
480
480
|
height: 100%;
|
|
481
481
|
display: grid;
|
|
482
482
|
grid-template-rows: auto 1fr;
|
|
483
|
-
`,
|
|
483
|
+
`,oL=e=>{let{node:o}=e,r=ex(e=>e.getControlPanelNode),n=u(()=>r(o),[o]);return n?t(n,{...e}):null};var oH=e=>{let{node:o,showControls:n,onDelete:i}=e,l=e$(),{id:a}=o,{node:s}=os(a)||{},{updateNodeValues:d}=od(a);return r(oI,{theme:l,children:[r(oA,{theme:l,children:[t(oM,{children:o.data.label}),n&&r(oO,{children:[t(o_,{theme:l,children:t(b,{className:"grid-item-handle"})}),t(o_,{theme:l,children:t(y,{onClick:()=>i(o)})})]})]}),t(oL,{node:o,audioNode:s,updateNodeValues:d})]})};let oR=c.div`
|
|
484
484
|
position: fixed;
|
|
485
485
|
z-index: 5;
|
|
486
486
|
box-shadow: 0px 1px 2px ${({theme:e})=>e.colors.elevation2};
|
|
@@ -500,34 +500,34 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
500
500
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
501
501
|
cursor: pointer;
|
|
502
502
|
}
|
|
503
|
-
`,
|
|
503
|
+
`,oW=c(oO)`
|
|
504
504
|
height: 80%;
|
|
505
|
-
`,
|
|
505
|
+
`,oB=c(o_)`
|
|
506
506
|
font-size: 1rem;
|
|
507
507
|
display: flex;
|
|
508
508
|
align-items: center;
|
|
509
|
-
`,
|
|
509
|
+
`,oG=c(oA)`
|
|
510
510
|
grid-template-columns: 1fr auto;
|
|
511
511
|
border-bottom: 1px solid ${({theme:e})=>e.colors.elevation3};
|
|
512
512
|
font-size: 0.7rem;
|
|
513
|
-
`,oV=c(
|
|
513
|
+
`,oV=c(oM)`
|
|
514
514
|
text-align: center;
|
|
515
|
-
`,
|
|
515
|
+
`,oU=c.div`
|
|
516
516
|
height: 100%;
|
|
517
517
|
width: 100%;
|
|
518
518
|
padding: 0.3rem 0.4rem;
|
|
519
519
|
box-sizing: border-box;
|
|
520
|
-
`,
|
|
520
|
+
`,oJ=c.div`
|
|
521
521
|
height: auto;
|
|
522
522
|
padding: 0;
|
|
523
523
|
max-height: 95vh;
|
|
524
524
|
overflow-y: scroll;
|
|
525
525
|
border: 1px solid ${({theme:e})=>e.colors.elevation3};
|
|
526
|
-
`,
|
|
526
|
+
`,oX=c.div`
|
|
527
527
|
padding: 1rem 0;
|
|
528
528
|
font-family: var(--leva-fonts-mono);
|
|
529
529
|
font-size: 0.8rem;
|
|
530
|
-
`,
|
|
530
|
+
`,oY=c.div`
|
|
531
531
|
display: flex;
|
|
532
532
|
align-items: center;
|
|
533
533
|
gap: 0.5rem;
|
|
@@ -536,7 +536,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
536
536
|
&:hover {
|
|
537
537
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
538
538
|
}
|
|
539
|
-
`,
|
|
539
|
+
`,oq=c.div`
|
|
540
540
|
position: absolute;
|
|
541
541
|
height: 1rem;
|
|
542
542
|
top: 0;
|
|
@@ -544,14 +544,14 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
544
544
|
margin: auto;
|
|
545
545
|
left: 0.5rem;
|
|
546
546
|
border-right: 1px solid ${({theme:e})=>e.colors.whitePrimary};
|
|
547
|
-
`,
|
|
547
|
+
`,oK=c.div`
|
|
548
548
|
box-sizing: border-box;
|
|
549
549
|
overflow: hidden;
|
|
550
550
|
.react-resizable-handle:after {
|
|
551
551
|
border-color: ${({theme:e})=>e.colors.whitePrimary};
|
|
552
552
|
border-width: 1px;
|
|
553
553
|
}
|
|
554
|
-
`;var
|
|
554
|
+
`;var oQ=()=>{let e=e$(),o=f(null),i=ex(e=>e.nodes),{show:l,nodes:a,size:s}=ex(e=>e.controlPanel),{width:d=200,height:c}=s,p=u(()=>{let e=a.map(({id:e})=>e);return i.filter(({id:o})=>e.includes(o))},[i,a]),g=ex(e=>e.showControlPanel),m=ex(e=>e.hideControlPanel),v=ex(e=>e.setControlPanelNodes),b=ex(e=>e.setControlPanelSize),w=ex(e=>e.removeNodeFromControlPanel),[x,C]=h(!0),$=u(()=>{let e=a.reduce((e,{height:o=eu,x:t,y:r=0})=>{let n=r+o;return n>e?n:e},0);return a.map(({id:o,width:t,height:r,x:n,y:i})=>({i:o,w:t||4,h:r||6,x:n??0,y:i??e}))},[a]);return p.length?r(n,{children:[t(oR,{theme:e,ref:o,onClick:g,children:t(ed,{})}),r(ec,{open:l,onClose:m,direction:"left",className:"",size:"auto",enableOverlay:!1,style:{background:e.colors.elevation1,position:"absolute"},children:[r(oG,{theme:e,children:[t(oV,{children:"Control Panel"}),t(oW,{children:t(oB,{onClick:m,theme:e,children:t(y,{})})})]}),r(oU,{children:[t(oX,{children:x?r(oY,{theme:e,onClick:()=>C(!1),children:[t(ea,{}),"Unlock grid"]}):r(oY,{theme:e,onClick:()=>C(!0),children:[t(es,{}),"Lock grid"]})}),t(ei,{enable:{top:!1,right:!x,bottom:!1,left:!1,topRight:!1,bottomRight:!1,bottomLeft:!1,topLeft:!1},handleComponent:{right:t(oq,{theme:e})},minWidth:120,size:{width:d,height:"auto"},onResizeStop:(e,o,t,r)=>{b({width:d+r.width,height:c+r.height})},children:t(oJ,{theme:e,children:t(el,{layout:$,className:"layout",cols:4,rowHeight:eu,width:d,margin:[0,0],isResizable:!x,draggableHandle:".grid-item-handle",onLayoutChange:e=>{requestAnimationFrame(()=>{v(e.map(({i:e,w:o,h:t,x:r,y:n})=>({id:e,width:o,height:t,x:r,y:n})))})},children:p.map(o=>t(oK,{theme:e,children:t(oH,{node:o,showControls:!x,onDelete:w})},o.id))})})})]})]})]}):null},oZ={};oZ="# Quick start\n\n## Add node\n - Mouse right click\n - Select **'Add Node'** from context menu\n\n ### or\n\n - Press `CMD+SHIFT+A`\n\n<br/>\n\n## Connect nodes\n - Mouse left click and hold on source port\n - Drop on target port\n\n<br/>\n\n## Delete Node or Connection\n - Mouse right click on node/connection\n - Select **'Delete Node'**/**'Delete Connection'** from context menu\n\n ### or\n\n - Mouse left click on node/connection, then press `Backspace`\n\n<br/>\n\n\n## Move node\n - Drag and Drop\n\n<br/>\n\n## Upload file\n - Drag and drop audio or patch files onto the application\n - Uploaded file appears as a new tab in the tabs bar at the top\n - Click on the tab to view or edit the file\n\n\n";let o0=i(c.div`
|
|
555
555
|
font-family: var(--leva-fonts-mono);
|
|
556
556
|
font-size: 0.7rem;
|
|
557
557
|
box-sizing: border-box;
|
|
@@ -565,13 +565,13 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
565
565
|
color: ${({theme:e})=>e.colors.accent3};
|
|
566
566
|
filter: hue-rotate(180deg);
|
|
567
567
|
}
|
|
568
|
-
`),
|
|
568
|
+
`),o1=i(c.div`
|
|
569
569
|
padding: 1rem;
|
|
570
570
|
height: 100%;
|
|
571
571
|
width: 100%;
|
|
572
572
|
box-sizing: border-box;
|
|
573
573
|
overflow: hidden;
|
|
574
|
-
`);var
|
|
574
|
+
`);var o2=()=>{var e;let o=ex(e=>e.isHelpShown),r=ex(e=>e.toggleHelp);return o?t(eS,{onClose:()=>{r()},children:t(o1,{children:t(o0,{dangerouslySetInnerHTML:{__html:ep((e=oZ)&&e.__esModule?e.default:e)},onWheelCapture:e=>e.stopPropagation()})})}):null};let o3=()=>t(n,{children:t(_,{onClick:ex(e=>e.toggleHelp),children:t(eo,{})})}),o8=c.div`
|
|
575
575
|
position: fixed;
|
|
576
576
|
z-index: ${({theme:e})=>e.zIndex.resumeContextLayout};
|
|
577
577
|
width: 100%;
|
|
@@ -585,18 +585,18 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
585
585
|
justify-content: center;
|
|
586
586
|
color: ${({theme:e})=>e.colors.whitePrimary};
|
|
587
587
|
cursor: pointer;
|
|
588
|
-
`,
|
|
588
|
+
`,o9=c.div`
|
|
589
589
|
display: flex;
|
|
590
590
|
width: 100%;
|
|
591
591
|
align-items: center;
|
|
592
592
|
justify-content: center;
|
|
593
|
-
`,
|
|
593
|
+
`,o5=c.div`
|
|
594
594
|
font-family: var(--leva-fonts-mono);
|
|
595
595
|
font-size: 2rem;
|
|
596
|
-
`,
|
|
596
|
+
`,o7=c(et)`
|
|
597
597
|
width: 7rem;
|
|
598
598
|
height: 7rem;
|
|
599
|
-
`;var
|
|
599
|
+
`;var o6=()=>{let e=e$(),o=ex(({patch:e})=>e).audioContext,[n,i]=h("running"===o.state);return n?null:r(o8,{theme:e,onClick:()=>{o.resume(),i(!0)},children:[t(o9,{children:t(o5,{theme:e,children:"Click anywhere to resume audio context"})}),t(o9,{children:t(o7,{})})]})},o4=()=>{let e=ex(({setConfig:e})=>e),{showMinimap:o}=ex(({config:e})=>e);return t(_,{onClick:()=>e({showMinimap:!o}),children:o?t(er,{}):t(en,{})})},te=({id:e,sourceX:o,sourceY:i,targetX:l,targetY:a,sourcePosition:s,targetPosition:d,style:c={},data:p,markerStart:h,markerEnd:u,source:m,target:f,sourceHandleId:v,targetHandleId:y,selected:b})=>{let w=e$(),x=ex(({getNode:e})=>e),C=x(m),$=x(f),k=C?.selected||$?.selected;g(()=>{if(v&&y)return console.log(`connected ${m} to ${f}`),()=>{console.log(`disconnected ${m} from ${f}`)}},[m,v,f,y]);let[P]=I({targetX:l,targetY:a,targetPosition:d,sourceX:o,sourceY:i,sourcePosition:s});return r(n,{children:[t("path",{id:e,style:{...c,stroke:b?w.colors.accent2:k?w.colors.highlight3:w.colors.highlight2},className:"react-flow__edge-path Wire",d:P,markerEnd:u}),t("path",{style:{...c,strokeWidth:8,color:"transparent",opacity:0,cursor:"pointer"},d:P,markerEnd:u})]})};let to=(e,o)=>console.log("drag stop",o),tt=(e,o)=>console.log("click",o),tr=[20,20],tn=({editorState:e,plugins:o=[],editorContextMenu:n=[],onChange:i=()=>{},...l})=>{let a=u(()=>({wire:te}),[]),{nodes:s,edges:d,controlPanel:c,onNodesChange:p,onNodesDelete:f,onEdgesChange:v,onEdgesDelete:y,onConnect:b,setPlugins:w,setViewport:x,viewport:C}=ex(),k=ex(({config:e})=>e),P=ex(({nodeTypes:e})=>e);g(()=>{w(o)},[o]);let[N,z]=h(null);g(()=>{N&&i({nodes:s,edges:d,controlPanel:c,viewport:C})},[s,d,c,C]);let D=m(e=>{N||(z(e),console.log("flow loaded:",e))},[N]),{onContextMenu:M}=(()=>{let{show:e}=U({id:on});return{onContextMenu:e}})(),{onContextMenu:A}=(()=>{let{show:e}=U({id:ol});return{onContextMenu:m((o,t)=>{o.stopPropagation(),e(o,{props:{node:t}})},[])}})(),{onContextMenu:O}=(()=>{let{show:e}=U({id:eN});return{onContextMenu:m((o,t)=>{o.stopPropagation(),e(o,{props:{edge:t}})},[e])}})();return g(()=>{C&&N?.setViewport(C)},[C,N]),j({onEnd:x}),r($,{nodes:s,edges:d,onNodesChange:p,onNodesDelete:f,onEdgesChange:v,onConnect:b,onNodeDragStop:to,onEdgesDelete:y,onInit:D,onNodeClick:tt,onContextMenu:M,onNodeContextMenu:A,onEdgeContextMenu:O,nodeTypes:P,edgeTypes:a,snapGrid:tr,defaultViewport:e?.viewport,defaultEdgeOptions:{type:"wire"},snapToGrid:!0,fitView:!0,disableKeyboardA11y:!0,children:[t(E,{variant:F.Dots,gap:12}),k.showMinimap?t(S,{}):null,r(T,{style:{right:"1rem",left:"initial",bottom:"40%",top:"initial"},showInteractive:!1,children:[t(o4,{}),t(o3,{})]}),t(o6,{}),t(oQ,{}),t(o2,{}),t(oi,{editorContextMenu:n}),t(oa,{}),t(ez,{})]})},ti=e=>t(D,{children:t(tn,{...e})}),tl={nodes:[],edges:[],controlPanel:{nodes:[],show:!1,size:{width:200,height:100}},viewport:{x:0,y:0,zoom:1.5}},ta=i(c.div`
|
|
600
600
|
display: flex;
|
|
601
601
|
flex-direction: column;
|
|
602
602
|
height: 100%;
|
|
@@ -611,18 +611,18 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
611
611
|
justify-content: center;
|
|
612
612
|
align-items: center;
|
|
613
613
|
font-size: 2rem;
|
|
614
|
-
`),
|
|
614
|
+
`),td=i(c.div`
|
|
615
615
|
height: 100%;
|
|
616
616
|
width: 100%;
|
|
617
617
|
display: flex;
|
|
618
618
|
position: relative;
|
|
619
|
-
`),
|
|
619
|
+
`),tc=i(c.div`
|
|
620
620
|
display: flex;
|
|
621
621
|
flex: 1;
|
|
622
622
|
align-items: center;
|
|
623
623
|
justify-content: center;
|
|
624
624
|
background: ${({theme:e})=>e.colors.elevation3};
|
|
625
|
-
`),
|
|
625
|
+
`),tp=i(c.div`
|
|
626
626
|
background: ${({theme:e})=>e.colors.elevation2};
|
|
627
627
|
opacity: 0.7;
|
|
628
628
|
position: absolute;
|
|
@@ -637,12 +637,12 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
637
637
|
align-items: center;
|
|
638
638
|
justify-content: center;
|
|
639
639
|
font-size: 6rem;
|
|
640
|
-
`),
|
|
640
|
+
`),th=e=>{let o=ex(e=>e.pullEditorChanges),i=ex(e=>e.currentFileIndex),[l,a]=h(!0);g(()=>{a(!0),setTimeout(()=>{a(!1)},1600)},[i]);let{file:s}=e;return s?"audio"===s.type?t(tc,{children:t("audio",{src:s.file,controls:!0})}):r(n,{children:[t(ti,{...e,onChange:e=>{o()},editorState:s.file||tl}),t(tp,{show:l,children:"Loading..."})]}):null},tg=i(c.div`
|
|
641
641
|
height: 2rem;
|
|
642
642
|
display: flex;
|
|
643
643
|
align-items: center;
|
|
644
644
|
background: ${({theme:e})=>e.colors.elevation2};
|
|
645
|
-
`),
|
|
645
|
+
`),tu=i(c.div`
|
|
646
646
|
display: flex;
|
|
647
647
|
align-items: center;
|
|
648
648
|
cursor: pointer;
|
|
@@ -670,10 +670,10 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
670
670
|
&:hover {
|
|
671
671
|
color: ${({theme:e})=>e.colors.whitePrimary};
|
|
672
672
|
}
|
|
673
|
-
`),
|
|
673
|
+
`),tf=i(c(v)`
|
|
674
674
|
height: 40%;
|
|
675
675
|
width: auto;
|
|
676
|
-
`),
|
|
676
|
+
`),tv=i(c(y)`
|
|
677
677
|
height: 70%;
|
|
678
678
|
width: auto;
|
|
679
679
|
cursor: pointer;
|
|
@@ -681,7 +681,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
681
681
|
&:hover {
|
|
682
682
|
color: ${({theme:e})=>e.colors.whitePrimary};
|
|
683
683
|
}
|
|
684
|
-
`),
|
|
684
|
+
`),ty=()=>({file:tl,name:"Unnamed",type:"patch",id:p()});var tb=({...e})=>{let{projectState:o,theme:n}=e,i=ex(e=>e.currentFileIndex),d=ex(e=>e.project.files[e.currentFileIndex]),c=ex(e=>e.setCurrentFileIndex),p=ex(e=>e.project),u=ex(e=>e.setProject),m=ex(e=>e.getProject),f=ex(e=>e.updateFileName),v=ex(e=>e.addFile),y=ex(e=>e.deleteFile),b=ex(e=>e.syncEditorWithCurrentFile),w=ex(e=>e.setEditorState);ex(e=>e.pullEditorChanges);let[x,$]=h(!1);return g(()=>{u(o||{files:[ty()]});let e=o?.files[0];e?.file&&e?.type!=="audio"&&w(e.file)},[o]),g(()=>(C("project://*",async(...e)=>{let o=new Request(...e),t=m().files,r=o.url.replace("project://",""),n=t.find(({id:e})=>e===r);return n?ev(n)?new Response(JSON.stringify(n.file??null)):ey(n)?fetch(n.file):new Response(null):new Response(`File not found: ${o.url}`,{status:404})}),()=>{}),[m]),g(()=>{b()},[i,b]),r(l,{theme:n||eC,children:[t(a,{styles:s`
|
|
685
685
|
:root {
|
|
686
686
|
--leva-colors-elevation1: #292d39;
|
|
687
687
|
--leva-colors-elevation2: #181c20;
|
|
@@ -738,5 +738,5 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
738
738
|
--leva-fontWeights-folder: normal;
|
|
739
739
|
--leva-fontWeights-button: normal;
|
|
740
740
|
}
|
|
741
|
-
`}),r(
|
|
741
|
+
`}),r(ta,{onDragOver:e=>{e.preventDefault(),e.stopPropagation(),$(!0)},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),$(!1)},onDrop:e=>{e.preventDefault(),e.stopPropagation(),$(!1),Array.from(e.dataTransfer.files).forEach(async e=>{if("application/json"===e.type){let o=JSON.parse(await e.text());if(o.files&&o.files.length){if(!window.confirm("This action will replace your current project. Continue?"))return;u(o),c(0),b();return}v({...ty(),file:{...o,controlPanel:{...tl.controlPanel,...o.controlPanel}},name:e.name},e.name);return}if(e.type.match(/^audio\//)){let o=await e6(e);v({type:"audio",id:`audio-file-${+new Date}`,name:e.name,file:o});return}console.error("Unsupported file type",e)})},children:[r(tg,{children:[p.files.map((e,o)=>r(tu,{onClick:()=>{c(o)},active:o===i,children:[t(op,{onChange:e=>f(o,e),value:e.name||"Unnamed"}),t(tv,{onClick:e=>{e.stopPropagation(),window.confirm("Do you really want to delete this file?")&&y(o)}})]},o)),t(tm,{onClick:()=>{v(ty()),c(p.files.length)},children:t(tf,{})})]}),t(td,{children:t(th,{file:d,...e})}),x&&t(ts,{children:"Drop file(s) to upload to the project"})]})]})};export{tb as Editor,tl as EDITOR_DEFAULTS,te as Wire,oD as WNNode,oS as TitleBar,ox as PortsPanel,o$ as OutputPorts,oF as OutputHandle,oC as InputPorts,oj as InputHandle,ok as Port,eS as Modal,op as EditableLabel,os as useAudioNode,od as useNode,e$ as useTheme,ex as useStore,eC as theme,ey as isAudio,ev as isPatch,ew as PortType};
|
|
742
742
|
//# sourceMappingURL=module.js.map
|