@web-noise/core 0.0.14 → 0.0.15-alpha
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 +68 -84
- package/dist/cjs/components.js.map +1 -1
- package/dist/esm/components.js +121 -137
- package/dist/esm/components.js.map +1 -1
- package/dist/main.js +72 -88
- package/dist/main.js.map +1 -1
- package/dist/module.js +140 -156
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +21 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
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 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{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"reactflow/dist/style.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;i?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];"audio"===n.type?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,r=(t=+new Date+Math.floor(1e3*Math.random()),o?.type?`${o.type}-${t}`:t.toString());return{nodes:[...e.nodes,{...o,id:r,position:{x:o.position.x-h,y:o.position.y-g},selected:!0}],mapping:{...e.mapping,[o.id]:r}}},{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,i,l,a=(i=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)}),l=t(),(e,o)=>{e.currentFileIndex!==o.currentFileIndex&&t().history.clear(),clearTimeout(n),l||(l=o),n=setTimeout(()=>{let o=i.diff(l,e);l=null,o&&t().history.push(o)},500)});return r.subscribe(a),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`
|
|
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 b,MdDragHandle as y,MdSettings as x,MdInfoOutline as w}from"react-icons/md";import{registerFetcher as C}from"@web-noise/fetch";import $,{getConnectedEdges as k,addEdge as P,applyNodeChanges as N,applyEdgeChanges as z,Controls as E,useOnViewportChange as F,Background as j,BackgroundVariant as D,MiniMap as M,ReactFlowProvider as T,useReactFlow as S,Position as A,Handle as I,ControlButton as _,getBezierPath as H}from"reactflow";import{create as L}from"zustand";import{setAudioNodeTypes as R,createPatch as W}from"@web-noise/patch";import{reverse as O,patch as B,create as U}from"jsondiffpatch";import{injectGlobal as V}from"@emotion/css";import"reactflow/dist/style.css";import{useContextMenu as G,Item as X,Menu as Y,Separator as J}from"react-contexify";import"react-contexify/dist/ReactContexify.css";import Z from"hotkeys-js";import{createPortal as q}from"react-dom";import{FileDrop as K}from"react-file-drop";import{FaFileUpload as Q,FaQuestion as ee,FaVolumeOff as eo,FaMap as et,FaRegMap as er}from"react-icons/fa";import{Resizable as en}from"re-resizable";import ei from"react-grid-layout";import"react-grid-layout/css/styles.css";import{AiFillLock as el,AiFillUnlock as ea}from"react-icons/ai";import{RxDashboard as es}from"react-icons/rx";import ed from"react-modern-drawer";import"react-modern-drawer/dist/index.css";import{marked as ec}from"marked";let ep="web-noise-drag-handle",eh=`.${ep}`,eg=10;(eb=ey||(ey={})).Gate="gate",eb.Number="number",eb.Audio="audio",eb.Any="any";let eu=e=>JSON.parse(JSON.stringify(e)),em=(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))}},ef=e=>!("type"in e)||"patch"===e.type,ev=e=>"audio"===e.type;var eb,ey,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:eh,...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;i?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=O(s);d&&e({...B(eu({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(eu({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:W(),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];ev(i)||r(t,{...i,file:e()})},syncEditorWithCurrentFile:()=>{let{currentFileIndex:e,setEditorState:t,project:r}=o(),n=r.files[e];"audio"===n.type?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:Math.max(0,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}),{});R(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,r=(t=+new Date+Math.floor(1e3*Math.random()),o?.type?`${o.type}-${t}`:t.toString());return{nodes:[...e.nodes,{...o,id:r,position:{x:o.position.x-h,y:o.position.y-g},selected:!0}],mapping:{...e.mapping,[o.id]:r}}},{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/eg}:{}};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,i,l,a=(i=U({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)}),l=t(),(e,o)=>{e.currentFileIndex!==o.currentFileIndex&&t().history.clear(),clearTimeout(n),l||(l=o),n=setTimeout(()=>{let o=i.diff(l,e);l=null,o&&t().history.push(o)},500)});return r.subscribe(a),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=em(i.nodes,a.nodes),d=em(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)})),ew={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: ${ew.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: ${ew.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 ${ew.colors.accent2};
|
|
33
|
+
box-shadow: 0 0 0 0.5px #${ew.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 #${ew.colors.accent2};
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
/* .react-flow__minimap-mask {
|
|
41
|
-
fill: ${
|
|
41
|
+
fill: ${ew.colors.elevation1}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.react-flow__minimap-node {
|
|
45
|
-
fill:${
|
|
45
|
+
fill:${ew.colors.accent2}
|
|
46
46
|
} */
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
`;var
|
|
49
|
+
`;var eC=()=>{let e=d();return{...ew,...e}};let e$=c(X)``,ek=c(Y)`
|
|
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
|
+
`,eP="editor-edge-menu";var eN=()=>{let e=eC(),o=ex(e=>e.removeEdges);return t(n,{children:t(ek,{id:eP,animation:!1,colors:e.colors,children:t(e$,{onClick:e=>o([e.props.edge]),children:"Delete Edge (DEL)"})})})};let ez=c.div`
|
|
63
63
|
position: fixed;
|
|
64
64
|
z-index: ${({theme:e})=>e.zIndex.modal};
|
|
65
65
|
width: 100%;
|
|
@@ -78,19 +78,70 @@ 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
|
+
|
|
82
|
+
h1,
|
|
83
|
+
h2,
|
|
84
|
+
h3,
|
|
85
|
+
h4,
|
|
86
|
+
h5,
|
|
87
|
+
h6 {
|
|
88
|
+
display: block;
|
|
89
|
+
margin-block-start: 1em;
|
|
90
|
+
margin-block-end: 1em;
|
|
91
|
+
margin-inline-start: 0px;
|
|
92
|
+
margin-inline-end: 0px;
|
|
93
|
+
font-weight: bold;
|
|
94
|
+
unicode-bidi: isolate;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
h1 {
|
|
98
|
+
font-size: 2em;
|
|
99
|
+
margin-block-start: 0.67em;
|
|
100
|
+
margin-block-end: 0.67em;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
h2 {
|
|
104
|
+
font-size: 1.5em;
|
|
105
|
+
margin-block-start: 0.83em;
|
|
106
|
+
margin-block-end: 0.83em;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
h3 {
|
|
110
|
+
font-size: 1.17em;
|
|
111
|
+
margin-block-start: 1em;
|
|
112
|
+
margin-block-end: 1em;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
ul {
|
|
116
|
+
display: block;
|
|
117
|
+
list-style-type: disc;
|
|
118
|
+
margin-block-start: 1em;
|
|
119
|
+
margin-block-end: 1em;
|
|
120
|
+
padding-inline-start: 40px;
|
|
121
|
+
unicode-bidi: isolate;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
p {
|
|
125
|
+
display: block;
|
|
126
|
+
margin-block-start: 1em;
|
|
127
|
+
margin-block-end: 1em;
|
|
128
|
+
margin-inline-start: 0px;
|
|
129
|
+
margin-inline-end: 0px;
|
|
130
|
+
unicode-bidi: isolate;
|
|
131
|
+
}
|
|
132
|
+
`,eF=c(b)`
|
|
82
133
|
position: absolute;
|
|
83
134
|
top: 0.2rem;
|
|
84
135
|
right: 0.2rem;
|
|
85
136
|
cursor: pointer;
|
|
86
|
-
`;var
|
|
137
|
+
`;var ej=({children:e,onClose:o,...n})=>{let i=eC();return g(()=>{let e=e=>{"Escape"===e.key&&o?.()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[o]),q(t(ez,{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 eD=i(c.div`
|
|
87
138
|
width: 100%;
|
|
88
|
-
`),
|
|
139
|
+
`),eM=i(c.div`
|
|
89
140
|
padding: 1rem;
|
|
90
141
|
display: flex;
|
|
91
142
|
flex-direction: column;
|
|
92
143
|
gap: 1rem;
|
|
93
|
-
`),
|
|
144
|
+
`),eT=i(c.ul`
|
|
94
145
|
list-style: none;
|
|
95
146
|
margin: 0;
|
|
96
147
|
padding: 0;
|
|
@@ -111,18 +162,18 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
111
162
|
cursor: pointer;
|
|
112
163
|
}
|
|
113
164
|
}
|
|
114
|
-
`),
|
|
165
|
+
`),eS=i(c.div`
|
|
115
166
|
white-space: nowrap;
|
|
116
167
|
overflow: hidden;
|
|
117
168
|
text-overflow: ellipsis;
|
|
118
|
-
`),
|
|
169
|
+
`),eA=i(c.div`
|
|
119
170
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
120
171
|
font-size: 12px;
|
|
121
|
-
`),
|
|
172
|
+
`),eI=i(c.div`
|
|
122
173
|
display: flex;
|
|
123
174
|
gap: 0.2rem;
|
|
124
175
|
flex-wrap: wrap;
|
|
125
|
-
`),
|
|
176
|
+
`),e_=i(c.span`
|
|
126
177
|
cursor: pointer;
|
|
127
178
|
font-size: 10px;
|
|
128
179
|
background: ${({theme:e,isActive:o})=>o?e.colors.highlight1:e.colors.elevation3};
|
|
@@ -133,17 +184,17 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
133
184
|
&:hover {
|
|
134
185
|
border-color: ${({theme:e})=>e.colors.accent2};
|
|
135
186
|
}
|
|
136
|
-
`),
|
|
187
|
+
`),eH=i(c.div``),eL=i(c.div`
|
|
137
188
|
font-size: 1.1rem;
|
|
138
189
|
padding: 0.25rem 0;
|
|
139
190
|
color: ${({theme:e})=>e.colors.highlight3};
|
|
140
191
|
`),eR=i(c.div`
|
|
141
192
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
142
193
|
font-size: 12px;
|
|
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(
|
|
194
|
+
`);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(eD,{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(eM,{children:[r(eH,{children:[t(eL,{children:o}),t(eR,{children:n})]}),t(eT,{children:a.sort((e,o)=>e.type.toLowerCase()>o.type.toLowerCase()?1:-1).map((o,n)=>r("li",{onClick:()=>e(o),children:[t(eS,{children:o.name||o.type}),o.description&&t(eA,{children:o.description}),t(eI,{children:o.tags?.map((e,o)=>t(e_,{isActive:i?.includes(e),onClickCapture:o=>{o.stopPropagation(),l(e)},children:e},o))})]},n))})]},s):null)})};let eO=c.div`
|
|
144
195
|
display: flex;
|
|
145
196
|
position: relative;
|
|
146
|
-
`,
|
|
197
|
+
`,eB=c.input`
|
|
147
198
|
padding-right: 2rem;
|
|
148
199
|
padding-left: 0.3rem;
|
|
149
200
|
width: 100%;
|
|
@@ -174,14 +225,14 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
174
225
|
-webkit-appearance: none;
|
|
175
226
|
margin-right: 1rem;
|
|
176
227
|
}
|
|
177
|
-
`,
|
|
228
|
+
`,eU=c.div`
|
|
178
229
|
display: flex;
|
|
179
230
|
flex-direction: column;
|
|
180
231
|
padding: 0.6rem;
|
|
181
232
|
gap: 0.6rem;
|
|
182
233
|
border-right: 1px solid ${({theme:e})=>e.colors.elevation3};
|
|
183
234
|
min-width: 14rem;
|
|
184
|
-
`,
|
|
235
|
+
`,eV=c.label`
|
|
185
236
|
user-select: none;
|
|
186
237
|
input {
|
|
187
238
|
display: none;
|
|
@@ -193,7 +244,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
193
244
|
color: ${({theme:e})=>e.colors.accent3};
|
|
194
245
|
cursor: pointer;
|
|
195
246
|
}
|
|
196
|
-
`,
|
|
247
|
+
`,eG=i(c(e_)`
|
|
197
248
|
font-size: 12px;
|
|
198
249
|
padding: 0.2rem 0.4rem;
|
|
199
250
|
&:hover {
|
|
@@ -202,16 +253,16 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
202
253
|
content: "×";
|
|
203
254
|
margin-left: 0.4rem;
|
|
204
255
|
}
|
|
205
|
-
`);var eX=({onChange:e,value:o})=>{let n=
|
|
256
|
+
`);var eX=({onChange:e,value:o})=>{let n=eC(),i=ex(({plugins:e})=>e),l=f(null);return g(()=>{l.current&&l.current.focus()},[l]),r(eU,{theme:n,children:[t(eO,{children:t(eB,{ref:l,theme:n,value:o.search||"",placeholder:"search...",onChange:t=>e({...o,search:t.target.value})})}),t(eI,{children:o.tags?.map((r,n)=>t(eG,{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(eV,{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
257
|
height: 100%;
|
|
207
258
|
width: 100%;
|
|
208
259
|
display: flex;
|
|
209
260
|
gap: 1rem;
|
|
210
|
-
`,
|
|
261
|
+
`,eJ=c.div`
|
|
211
262
|
flex-grow: 1;
|
|
212
263
|
height: 100%;
|
|
213
264
|
overflow-y: scroll;
|
|
214
|
-
`;var
|
|
265
|
+
`;var eZ=({isOpen:e,closeMenu:o,mousePosition:n})=>{let i=eC(),{screenToFlowPosition:l}=S(),{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(ej,{onClose:()=>{o(),d({})},children:r(eY,{theme:i,children:[t(eX,{onChange:d,value:s}),t(eJ,{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=e=>new Promise((o,t)=>{let r=new FileReader;r.readAsDataURL(e),r.onload=()=>o(r.result?.toString()||""),r.onerror=e=>t(e)}),eK=c.div`
|
|
215
266
|
display: flex;
|
|
216
267
|
align-items: center;
|
|
217
268
|
justify-content: center;
|
|
@@ -237,95 +288,19 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
237
288
|
.drop-zone-drag-over {
|
|
238
289
|
opacity: 1;
|
|
239
290
|
}
|
|
240
|
-
`,
|
|
291
|
+
`,eQ=c.div`
|
|
241
292
|
display: flex;
|
|
242
293
|
flex-wrap: wrap;
|
|
243
294
|
align-items: center;
|
|
244
295
|
justify-content: center;
|
|
245
296
|
height: 100%;
|
|
246
297
|
width: 100%;
|
|
247
|
-
`,e0=c(
|
|
298
|
+
`,e0=c(Q)`
|
|
248
299
|
width: 100%;
|
|
249
300
|
height: 8rem;
|
|
250
301
|
`,e1=c.div`
|
|
251
302
|
font-size: 2rem;
|
|
252
|
-
`;var e2=({isOpen:e,closeMenu:o})=>{let n=
|
|
253
|
-
display: flex;
|
|
254
|
-
align-items: center;
|
|
255
|
-
justify-content: center;
|
|
256
|
-
height: 100%;
|
|
257
|
-
width: 100%;
|
|
258
|
-
|
|
259
|
-
.drop-zone-wrapper {
|
|
260
|
-
width: 80%;
|
|
261
|
-
height: 80%;
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
.drop-zone {
|
|
265
|
-
height: 100%;
|
|
266
|
-
width: 100%;
|
|
267
|
-
border-style: dashed;
|
|
268
|
-
border-width: 2px;
|
|
269
|
-
border-color: ${({theme:e})=>e.colors.highlight2};
|
|
270
|
-
opacity: 0.5;
|
|
271
|
-
cursor: pointer;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
.drop-zone:hover,
|
|
275
|
-
.drop-zone-drag-over {
|
|
276
|
-
opacity: 1;
|
|
277
|
-
}
|
|
278
|
-
`,e8=c.div`
|
|
279
|
-
display: flex;
|
|
280
|
-
flex-wrap: wrap;
|
|
281
|
-
align-items: center;
|
|
282
|
-
justify-content: center;
|
|
283
|
-
height: 100%;
|
|
284
|
-
width: 100%;
|
|
285
|
-
`,e9=c(ee)`
|
|
286
|
-
width: 100%;
|
|
287
|
-
height: 8rem;
|
|
288
|
-
`,e5=c.div`
|
|
289
|
-
font-size: 2rem;
|
|
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
|
-
display: flex;
|
|
292
|
-
align-items: center;
|
|
293
|
-
justify-content: center;
|
|
294
|
-
height: 100%;
|
|
295
|
-
width: 100%;
|
|
296
|
-
|
|
297
|
-
.drop-zone-wrapper {
|
|
298
|
-
width: 80%;
|
|
299
|
-
height: 80%;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
.drop-zone {
|
|
303
|
-
height: 100%;
|
|
304
|
-
width: 100%;
|
|
305
|
-
border-style: dashed;
|
|
306
|
-
border-width: 2px;
|
|
307
|
-
border-color: ${({theme:e})=>e.colors.highlight2};
|
|
308
|
-
opacity: 0.5;
|
|
309
|
-
cursor: pointer;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
.drop-zone:hover,
|
|
313
|
-
.drop-zone-drag-over {
|
|
314
|
-
opacity: 1;
|
|
315
|
-
}
|
|
316
|
-
`,oe=c.div`
|
|
317
|
-
display: flex;
|
|
318
|
-
flex-wrap: wrap;
|
|
319
|
-
align-items: center;
|
|
320
|
-
justify-content: center;
|
|
321
|
-
height: 100%;
|
|
322
|
-
width: 100%;
|
|
323
|
-
`,oo=c(ee)`
|
|
324
|
-
width: 100%;
|
|
325
|
-
height: 8rem;
|
|
326
|
-
`,ot=c.div`
|
|
327
|
-
font-size: 2rem;
|
|
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);return{updateNodeValues:m(t=>o(e,{values:t}),[e,o]),updateNodeConfig:m(t=>o(e,{config:t}),[e,o]),updateNodeLabel:m(t=>o(e,{label:t}),[e,o])}};let oc=c.input`
|
|
303
|
+
`;var e2=({isOpen:e,closeMenu:o})=>{let n=eC();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 eq(t);i({type:"audio",id:`audio-file-${+new Date}`,name:t.name,file:r}),o()},[i,o]);return e?t(ej,{onClose:o,children:r(eK,{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(K,{className:"drop-zone-wrapper",targetClassName:"drop-zone",draggingOverTargetClassName:"drop-zone-drag-over",onTargetClick:()=>{l.current?.click()},onDrop:e=>a(e),children:r(eQ,{theme:n,children:[t(e0,{}),t(e1,{children:"click or drop file here"})]})})]})}):null};let e3="editor-menu";var e9=({editorContextMenu:e=[]})=>{let o=eC(),[i,l]=h({x:0,y:0}),[a,s]=h(!1),[d,c]=h(!1),p=m((e,o)=>{l({x:e,y:o}),s(!0)},[s]),f=ex(e=>e.pasteBuffer),{screenToFlowPosition:v}=S(),b=m(e=>{let{x:o,y:t}=v(e);f(o,t)},[s,v]),y=ex(({clearGraph:e})=>e),x=m(()=>{y()},[y]),w=ex(e=>e.toggleHelp),C=ex(e=>e.history.back),$=ex(e=>e.history.forward),k=ex(e=>e.history.pointer),P=ex(e=>e.history.buffer),N=ex(e=>e.copySelectedItems),z=ex(e=>e.nodes),E=u(()=>z.filter(({selected:e})=>e),[z]),F=ex(e=>e.copyBuffer);return S(),g(()=>(Z("command+shift+a",()=>(p(200,50),!1)),Z("shift+/",()=>(w(),!1)),Z("command+z",()=>(C(),!1)),Z("command+shift+z",()=>($(),!1)),Z("command+c",()=>(N(),!1)),Z("command+v",()=>(b({x:200,y:50}),!1)),()=>{Z.unbind()}),[p,b]),r(n,{children:[t(eZ,{isOpen:a,closeMenu:()=>s(!1),mousePosition:i}),t(e2,{isOpen:d,closeMenu:()=>c(!1)}),r(ek,{id:e3,animation:!1,colors:o.colors,children:[t(e$,{onClick:({triggerEvent:{clientX:e,clientY:o}})=>p(e,o),children:"Add Node (⌘+⇧+A)"}),t(J,{}),t(e$,{onClick:x,children:"Delete All"}),t(J,{}),t(e$,{onClick:()=>c(!0),children:"Upload Audio File"}),t(J,{}),t(e$,{disabled:0===k,onClick:C,children:"Undo (⌘+z)"}),t(e$,{disabled:k===P.length,onClick:$,children:"Redo (⌘+⇧+Z)"}),t(J,{}),t(e$,{disabled:!E.length,onClick:N,children:"Copy Selected (⌘+c)"}),t(e$,{disabled:!F.nodes.length,onClick:({triggerEvent:{clientX:e,clientY:o}})=>b({x:e,y:o}),children:"Paste (⌘+v)"}),t(J,{}),e.map((e,o)=>null===e?t(J,{},o):t(e$,{children:e},o)),t(J,{}),t(e$,{onClick:w,children:"Help (⇧+?)"})]})]})};let e7="editor-node-menu";var e8=e=>{let o=eC(),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(ek,{id:e7,animation:!1,colors:o.colors,children:[t(e$,{onClick:e=>i([e.props.node]),children:"Delete Node (DEL)"}),t(e$,{hidden:(...e)=>!h(...e)||p(...e),onClick:e=>l(e.props.node),children:"Add To Control Panel"}),t(e$,{hidden:(...e)=>!h(...e)||!p(...e),onClick:e=>a(e.props.node),children:"Remove From Control Panel"}),t(e$,{onClick:e=>s({nodes:[e.props.node],edges:[]}),children:"Copy (⌘+c)"})]})})},e6=e=>ex(({patch:e})=>e).audioNodes.get(e),e5=e=>{let o=ex(({updateNodeData:e})=>e);return{updateNodeValues:m(t=>o(e,{values:t}),[e,o]),updateNodeConfig:m(t=>o(e,{config:t}),[e,o]),updateNodeLabel:m(t=>o(e,{label:t}),[e,o])}};let e4=c.input`
|
|
329
304
|
width: 100%;
|
|
330
305
|
background: none;
|
|
331
306
|
border: none;
|
|
@@ -354,7 +329,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
354
329
|
padding: 0.3rem;
|
|
355
330
|
border-radius: 0.2rem;
|
|
356
331
|
}
|
|
357
|
-
`;var
|
|
332
|
+
`;var oe=({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(e4,{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 oo=i(c.div`
|
|
358
333
|
height: 100%;
|
|
359
334
|
width: 100%;
|
|
360
335
|
overflow: scroll;
|
|
@@ -382,13 +357,13 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
382
357
|
a {
|
|
383
358
|
color: ${({theme:e})=>e.colors.accent1};
|
|
384
359
|
}
|
|
385
|
-
`);var
|
|
360
|
+
`);var ot=({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(ej,{onClose:o,children:t(oo,{dangerouslySetInnerHTML:{__html:ec((i||"")+"\n\n"+a||"")}})}):null};let or=c.div`
|
|
386
361
|
background-color: var(--leva-colors-elevation1);
|
|
387
|
-
`,
|
|
362
|
+
`,on=c(or)`
|
|
388
363
|
padding: 2rem 5rem;
|
|
389
|
-
`,
|
|
364
|
+
`,oi=c(or)`
|
|
390
365
|
padding: 1rem 2rem;
|
|
391
|
-
`,
|
|
366
|
+
`,ol=c(x)`
|
|
392
367
|
font-size: 1.2rem;
|
|
393
368
|
opacity: 0.4;
|
|
394
369
|
width: 1rem;
|
|
@@ -396,7 +371,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
396
371
|
opacity: 1;
|
|
397
372
|
cursor: pointer;
|
|
398
373
|
}
|
|
399
|
-
`,
|
|
374
|
+
`,oa=c(w)`
|
|
400
375
|
font-size: 1.2rem;
|
|
401
376
|
opacity: 0.4;
|
|
402
377
|
width: 1rem;
|
|
@@ -404,12 +379,12 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
404
379
|
opacity: 1;
|
|
405
380
|
cursor: pointer;
|
|
406
381
|
}
|
|
407
|
-
`,
|
|
382
|
+
`,os=c.div`
|
|
408
383
|
position: relative;
|
|
409
384
|
font-family: var(--leva-fonts-mono);
|
|
410
385
|
font-size: var(--leva-fontSizes-root);
|
|
411
386
|
background-color: var(--leva-colors-elevation1);
|
|
412
|
-
`,
|
|
387
|
+
`,od=c(os)`
|
|
413
388
|
display: flex;
|
|
414
389
|
height: var(--leva-sizes-titleBarHeight);
|
|
415
390
|
touch-action: none;
|
|
@@ -419,38 +394,38 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
419
394
|
color: var(--leva-colors-highlight1);
|
|
420
395
|
padding: 0 0.4rem;
|
|
421
396
|
gap: 0.3rem;
|
|
422
|
-
`,
|
|
397
|
+
`,oc=c(os)(({theme:e})=>`
|
|
423
398
|
display: grid;
|
|
424
399
|
grid-template-areas: "inputs outputs";
|
|
425
400
|
background: ${e.colors.elevation2};
|
|
426
401
|
border-bottom: 1px solid ${e.colors.elevation1};
|
|
427
402
|
color: ${e.colors.highlight3};
|
|
428
403
|
font-size: 0.6rem;
|
|
429
|
-
`),
|
|
404
|
+
`),op=c.div`
|
|
430
405
|
grid-area: inputs;
|
|
431
406
|
text-align: left;
|
|
432
|
-
`,
|
|
407
|
+
`,oh=c.div`
|
|
433
408
|
grid-area: outputs;
|
|
434
409
|
text-align: right;
|
|
435
|
-
`,
|
|
410
|
+
`,og=c.div`
|
|
436
411
|
position: relative;
|
|
437
412
|
padding: 5px 10px;
|
|
438
|
-
`,
|
|
439
|
-
--port-color: ${e=>{if(!e.portType)return e.theme.colors.highlight2;if(!Array.isArray(e.portType))return
|
|
413
|
+
`,ou={[ey.Audio]:"#4ade80",[ey.Gate]:"#c084fc",[ey.Number]:"#38bdf8",[ey.Any]:"#ffffff"},om=i(c(I,{shouldForwardProp:e=>"portType"!==e})`
|
|
414
|
+
--port-color: ${e=>{if(!e.portType)return e.theme.colors.highlight2;if(!Array.isArray(e.portType))return ou[e.portType];{let o=e.portType.map(e=>ou[e]);return`linear-gradient(0.25turn, ${o.join(", ")});`}}};
|
|
440
415
|
border-color: var(--port-color);
|
|
441
416
|
background: var(--port-color);
|
|
442
417
|
box-shadow: 0px 0px 0px 1px ${({theme:e})=>e.colors.elevation2} inset;
|
|
443
|
-
`),
|
|
418
|
+
`),of=i(c(om)`
|
|
444
419
|
left: -3px;
|
|
445
|
-
`),
|
|
420
|
+
`),ov=({...e})=>t(of,{...e,type:"target",position:A.Left}),ob=i(c(om)`
|
|
446
421
|
right: -3px;
|
|
447
|
-
`),
|
|
422
|
+
`),oy=e=>t(ob,{...e,type:"source",position:A.Right}),ox=({className:e,...o})=>t(od,{...o,className:[e,ep].join(" ")}),ow=e=>ex(o=>o.nodesConfiguration[e]),oC=e=>{let{id:o,children:n,selected:i,...l}=e,a=eC(),s=ex(({getNode:e})=>e),d=ex(e=>e.nodesConfiguration),[c,p]=h(!1),{info:g}=ow(e.type),m=u(()=>d[e.type].resizable??!1,[d,e.type]),{updateNodeLabel:f,updateNodeConfig:v}=e5(o),{data:b}=s(o)||{},y=e6(o),{ConfigNode:x}=(e=>{let{configNode:o}=ow(e);return{ConfigNode:o}})(l.type),[w,C]=h(!1);if(!y)return t(on,{className:ep,children:"can't find audio node"});if(y.loading)return t(on,{className:ep,children:"loading"});if(y.error)return r(oi,{className:ep,children:["error: ",y.error.toString()]});if(!y.node)return t(on,{className:ep,children:"can't find audio node"});let $=b?.config?.size,{node:{inputs:k,outputs:P}}=y;return r(or,{children:[r(ox,{children:[g&&t(oa,{onClickCapture:()=>p(!0)}),t(oe,{value:b?.label??"No Name",onChange:f}),x&&t(ol,{onClickCapture:()=>C(e=>!e)})]}),r(oc,{theme:a,children:[t(op,{children:k?Object.keys(k).map((e,o)=>r(og,{children:[t(ov,{id:e,portType:k[e].type}),t("span",{children:e})]},o)):null}),t(oh,{children:P?Object.keys(P).map((e,o)=>r(og,{children:[t(oy,{id:e,portType:P[e].type}),t("span",{children:e})]},o)):null})]}),x&&w&&i?t(x,{...e}):m?t(en,{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({...b?.config,size:n})},children:n}):n,t(ot,{isOpen:c,type:e.type,onClose:()=>p(!1),node:y.node})]})},o$=c.div`
|
|
448
423
|
width: 100%;
|
|
449
424
|
padding: 0.4rem 0;
|
|
450
425
|
white-space: nowrap;
|
|
451
426
|
overflow: hidden;
|
|
452
427
|
text-overflow: ellipsis;
|
|
453
|
-
`,
|
|
428
|
+
`,ok=c(ox)`
|
|
454
429
|
display: flex;
|
|
455
430
|
gap: 0.1rem;
|
|
456
431
|
padding: 0 0.4rem;
|
|
@@ -458,13 +433,13 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
458
433
|
font-size: 0.6rem;
|
|
459
434
|
height: auto;
|
|
460
435
|
min-width: 0;
|
|
461
|
-
`,
|
|
436
|
+
`,oP=c.div`
|
|
462
437
|
display: flex;
|
|
463
438
|
align-items: center;
|
|
464
439
|
height: 70%;
|
|
465
440
|
width: auto;
|
|
466
441
|
gap: 0.4rem;
|
|
467
|
-
`,
|
|
442
|
+
`,oN=c.span`
|
|
468
443
|
width: auto;
|
|
469
444
|
height: 100%;
|
|
470
445
|
cursor: pointer;
|
|
@@ -476,11 +451,11 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
476
451
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
477
452
|
cursor: pointer;
|
|
478
453
|
}
|
|
479
|
-
`,
|
|
454
|
+
`,oz=c.div`
|
|
480
455
|
height: 100%;
|
|
481
456
|
display: grid;
|
|
482
457
|
grid-template-rows: auto 1fr;
|
|
483
|
-
`,
|
|
458
|
+
`,oE=e=>{let{node:o}=e,r=ex(e=>e.getControlPanelNode),n=u(()=>r(o),[o]);return n?t(n,{...e}):null};var oF=e=>{let{node:o,showControls:n,onDelete:i}=e,l=eC(),{id:a}=o,{node:s}=e6(a)||{},{updateNodeValues:d}=e5(a);return r(oz,{theme:l,children:[r(ok,{theme:l,children:[t(o$,{children:o.data.label}),n&&r(oP,{children:[t(oN,{theme:l,children:t(y,{className:"grid-item-handle"})}),t(oN,{theme:l,children:t(b,{onClick:()=>i(o)})})]})]}),t(oE,{node:o,audioNode:s,updateNodeValues:d})]})};let oj=c.div`
|
|
484
459
|
position: fixed;
|
|
485
460
|
z-index: 5;
|
|
486
461
|
box-shadow: 0px 1px 2px ${({theme:e})=>e.colors.elevation2};
|
|
@@ -500,34 +475,34 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
500
475
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
501
476
|
cursor: pointer;
|
|
502
477
|
}
|
|
503
|
-
`,
|
|
478
|
+
`,oD=c(oP)`
|
|
504
479
|
height: 80%;
|
|
505
|
-
`,
|
|
480
|
+
`,oM=c(oN)`
|
|
506
481
|
font-size: 1rem;
|
|
507
482
|
display: flex;
|
|
508
483
|
align-items: center;
|
|
509
|
-
`,
|
|
484
|
+
`,oT=c(ok)`
|
|
510
485
|
grid-template-columns: 1fr auto;
|
|
511
486
|
border-bottom: 1px solid ${({theme:e})=>e.colors.elevation3};
|
|
512
487
|
font-size: 0.7rem;
|
|
513
|
-
`,
|
|
488
|
+
`,oS=c(o$)`
|
|
514
489
|
text-align: center;
|
|
515
|
-
`,
|
|
490
|
+
`,oA=c.div`
|
|
516
491
|
height: 100%;
|
|
517
492
|
width: 100%;
|
|
518
493
|
padding: 0.3rem 0.4rem;
|
|
519
494
|
box-sizing: border-box;
|
|
520
|
-
`,
|
|
495
|
+
`,oI=c.div`
|
|
521
496
|
height: auto;
|
|
522
497
|
padding: 0;
|
|
523
498
|
max-height: 95vh;
|
|
524
499
|
overflow-y: scroll;
|
|
525
500
|
border: 1px solid ${({theme:e})=>e.colors.elevation3};
|
|
526
|
-
`,
|
|
501
|
+
`,o_=c.div`
|
|
527
502
|
padding: 1rem 0;
|
|
528
503
|
font-family: var(--leva-fonts-mono);
|
|
529
504
|
font-size: 0.8rem;
|
|
530
|
-
`,
|
|
505
|
+
`,oH=c.div`
|
|
531
506
|
display: flex;
|
|
532
507
|
align-items: center;
|
|
533
508
|
gap: 0.5rem;
|
|
@@ -536,7 +511,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
536
511
|
&:hover {
|
|
537
512
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
538
513
|
}
|
|
539
|
-
`,
|
|
514
|
+
`,oL=c.div`
|
|
540
515
|
position: absolute;
|
|
541
516
|
height: 1rem;
|
|
542
517
|
top: 0;
|
|
@@ -544,14 +519,14 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
544
519
|
margin: auto;
|
|
545
520
|
left: 0.5rem;
|
|
546
521
|
border-right: 1px solid ${({theme:e})=>e.colors.whitePrimary};
|
|
547
|
-
`,
|
|
522
|
+
`,oR=c.div`
|
|
548
523
|
box-sizing: border-box;
|
|
549
524
|
overflow: hidden;
|
|
550
525
|
.react-resizable-handle:after {
|
|
551
526
|
border-color: ${({theme:e})=>e.colors.whitePrimary};
|
|
552
527
|
border-width: 1px;
|
|
553
528
|
}
|
|
554
|
-
`;var
|
|
529
|
+
`;var oW=()=>{let e=eC(),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),y=ex(e=>e.setControlPanelSize),x=ex(e=>e.removeNodeFromControlPanel),[w,C]=h(!0),$=u(()=>{let e=a.reduce((e,{height:o=eg,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(oj,{theme:e,ref:o,onClick:g,children:t(es,{})}),r(ed,{open:l,onClose:m,direction:"left",className:"",size:"auto",enableOverlay:!1,style:{background:e.colors.elevation1,position:"absolute"},children:[r(oT,{theme:e,children:[t(oS,{children:"Control Panel"}),t(oD,{children:t(oM,{onClick:m,theme:e,children:t(b,{})})})]}),r(oA,{children:[t(o_,{children:w?r(oH,{theme:e,onClick:()=>C(!1),children:[t(el,{}),"Unlock grid"]}):r(oH,{theme:e,onClick:()=>C(!0),children:[t(ea,{}),"Lock grid"]})}),t(en,{enable:{top:!1,right:!w,bottom:!1,left:!1,topRight:!1,bottomRight:!1,bottomLeft:!1,topLeft:!1},handleComponent:{right:t(oL,{theme:e})},minWidth:120,size:{width:d,height:"auto"},onResizeStop:(e,o,t,r)=>{y({width:d+r.width,height:c+r.height})},children:t(oI,{theme:e,children:t(ei,{layout:$,className:"layout",cols:4,rowHeight:eg,width:d,margin:[0,0],isResizable:!w,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(oR,{theme:e,children:t(oF,{node:o,showControls:!w,onDelete:x})},o.id))})})})]})]})]}):null},oO={};oO="# 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## Rename node\n - Doubleclick the node title\n\n<br/>\n\n## Undo/Redo\n - `CMD+Z` to Undo / `CMD+SHIFT+Z` to Redo\n - Select **'Undo'**/**'Redo'** from the Edit menu\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<br/>\n\n## Rename file in the project\n - Doubleclick the tab title\n\n\n";let oB=i(c.div`
|
|
555
530
|
font-family: var(--leva-fonts-mono);
|
|
556
531
|
font-size: 0.7rem;
|
|
557
532
|
box-sizing: border-box;
|
|
@@ -565,13 +540,13 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
565
540
|
color: ${({theme:e})=>e.colors.accent3};
|
|
566
541
|
filter: hue-rotate(180deg);
|
|
567
542
|
}
|
|
568
|
-
`),
|
|
543
|
+
`),oU=i(c.div`
|
|
569
544
|
padding: 1rem;
|
|
570
545
|
height: 100%;
|
|
571
546
|
width: 100%;
|
|
572
547
|
box-sizing: border-box;
|
|
573
548
|
overflow: hidden;
|
|
574
|
-
`);var
|
|
549
|
+
`);var oV=()=>{var e;let o=ex(e=>e.isHelpShown),r=ex(e=>e.toggleHelp);return o?t(ej,{onClose:()=>{r()},children:t(oU,{children:t(oB,{dangerouslySetInnerHTML:{__html:ec((e=oO)&&e.__esModule?e.default:e)},onWheelCapture:e=>e.stopPropagation()})})}):null};let oG=()=>t(n,{children:t(_,{onClick:ex(e=>e.toggleHelp),children:t(ee,{})})}),oX=c.div`
|
|
575
550
|
position: fixed;
|
|
576
551
|
z-index: ${({theme:e})=>e.zIndex.resumeContextLayout};
|
|
577
552
|
width: 100%;
|
|
@@ -585,23 +560,32 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
585
560
|
justify-content: center;
|
|
586
561
|
color: ${({theme:e})=>e.colors.whitePrimary};
|
|
587
562
|
cursor: pointer;
|
|
588
|
-
`,
|
|
563
|
+
`,oY=c.div`
|
|
589
564
|
display: flex;
|
|
590
565
|
width: 100%;
|
|
591
566
|
align-items: center;
|
|
592
567
|
justify-content: center;
|
|
593
|
-
`,
|
|
568
|
+
`,oJ=c.div`
|
|
594
569
|
font-family: var(--leva-fonts-mono);
|
|
595
570
|
font-size: 2rem;
|
|
596
|
-
`,
|
|
571
|
+
`,oZ=c(eo)`
|
|
597
572
|
width: 7rem;
|
|
598
573
|
height: 7rem;
|
|
599
|
-
`;var
|
|
574
|
+
`;var oq=()=>{let e=eC(),o=ex(({patch:e})=>e).audioContext,[n,i]=h("running"===o.state);return n?null:r(oX,{theme:e,onClick:()=>{o.resume(),i(!0)},children:[t(oY,{children:t(oJ,{theme:e,children:"Click anywhere to resume audio context"})}),t(oY,{children:t(oZ,{})})]})},oK=()=>{let e=ex(({setConfig:e})=>e),{showMinimap:o}=ex(({config:e})=>e);return t(_,{onClick:()=>e({showMinimap:!o}),children:o?t(et,{}):t(er,{})})},oQ=({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:b,selected:y})=>{let x=eC(),w=ex(({getNode:e})=>e),C=w(m),$=w(f),k=C?.selected||$?.selected;g(()=>{if(v&&b)return console.log(`connected ${m} to ${f}`),()=>{console.log(`disconnected ${m} from ${f}`)}},[m,v,f,b]);let[P]=H({targetX:l,targetY:a,targetPosition:d,sourceX:o,sourceY:i,sourcePosition:s});return r(n,{children:[t("path",{id:e,style:{...c,stroke:y?x.colors.accent2:k?x.colors.highlight3:x.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 o0=i(c(E)`
|
|
575
|
+
&.bottom {
|
|
576
|
+
right: 1rem;
|
|
577
|
+
bottom: 40%;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
svg {
|
|
581
|
+
color: ${({theme:e})=>e.colors.elevation2};
|
|
582
|
+
}
|
|
583
|
+
`),o1=(e,o)=>console.log("drag stop",o),o2=(e,o)=>console.log("click",o),o3=[20,20],o9=({editorState:e,plugins:o=[],editorContextMenu:n=[],onChange:i=()=>{},...l})=>{let a=u(()=>({wire:oQ}),[]),{nodes:s,edges:d,controlPanel:c,onNodesChange:p,onNodesDelete:f,onEdgesChange:v,onEdgesDelete:b,onConnect:y,setPlugins:x,setViewport:w,viewport:C}=ex(),k=ex(({config:e})=>e),P=ex(({nodeTypes:e})=>e);g(()=>{x(o)},[o]);let[N,z]=h(null);g(()=>{N&&i({nodes:s,edges:d,controlPanel:c,viewport:C})},[s,d,c,C]);let E=m(e=>{N||(z(e),console.log("flow loaded:",e))},[N]),{onContextMenu:T}=(()=>{let{show:e}=G({id:e3});return{onContextMenu:e}})(),{onContextMenu:S}=(()=>{let{show:e}=G({id:e7});return{onContextMenu:m((o,t)=>{o.stopPropagation(),e(o,{props:{node:t}})},[])}})(),{onContextMenu:A}=(()=>{let{show:e}=G({id:eP});return{onContextMenu:m((o,t)=>{o.stopPropagation(),e(o,{props:{edge:t}})},[e])}})();return g(()=>{C&&N?.setViewport(C)},[C,N]),F({onEnd:w}),r($,{nodes:s,edges:d,onNodesChange:p,onNodesDelete:f,onEdgesChange:v,onConnect:y,onNodeDragStop:o1,onEdgesDelete:b,onInit:E,onNodeClick:o2,onContextMenu:T,onNodeContextMenu:S,onEdgeContextMenu:A,nodeTypes:P,edgeTypes:a,snapGrid:o3,defaultViewport:e?.viewport,defaultEdgeOptions:{type:"wire"},snapToGrid:!0,fitView:!0,disableKeyboardA11y:!0,children:[t(j,{variant:D.Dots,gap:12}),k.showMinimap?t(M,{}):null,r(o0,{showInteractive:!1,position:"bottom-right",children:[t(oK,{}),t(oG,{})]}),t(oq,{}),t(oW,{}),t(oV,{}),t(e9,{editorContextMenu:n}),t(e8,{}),t(eN,{})]})},o7=e=>t(T,{children:t(o9,{...e})}),o8={nodes:[],edges:[],controlPanel:{nodes:[],show:!1,size:{width:200,height:100}},viewport:{x:0,y:0,zoom:1.5}},o6=i(c.div`
|
|
600
584
|
display: flex;
|
|
601
585
|
flex-direction: column;
|
|
602
586
|
height: 100%;
|
|
603
587
|
width: 100%;
|
|
604
|
-
`),
|
|
588
|
+
`),o5=i(c.div`
|
|
605
589
|
position: fixed;
|
|
606
590
|
height: 100%;
|
|
607
591
|
width: 100%;
|
|
@@ -611,18 +595,18 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
611
595
|
justify-content: center;
|
|
612
596
|
align-items: center;
|
|
613
597
|
font-size: 2rem;
|
|
614
|
-
`),
|
|
598
|
+
`),o4=i(c.div`
|
|
615
599
|
height: 100%;
|
|
616
600
|
width: 100%;
|
|
617
601
|
display: flex;
|
|
618
602
|
position: relative;
|
|
619
|
-
`),
|
|
603
|
+
`),te=i(c.div`
|
|
620
604
|
display: flex;
|
|
621
605
|
flex: 1;
|
|
622
606
|
align-items: center;
|
|
623
607
|
justify-content: center;
|
|
624
608
|
background: ${({theme:e})=>e.colors.elevation3};
|
|
625
|
-
`),
|
|
609
|
+
`),to=i(c.div`
|
|
626
610
|
background: ${({theme:e})=>e.colors.elevation2};
|
|
627
611
|
opacity: 0.7;
|
|
628
612
|
position: absolute;
|
|
@@ -637,12 +621,12 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
637
621
|
align-items: center;
|
|
638
622
|
justify-content: center;
|
|
639
623
|
font-size: 6rem;
|
|
640
|
-
`),
|
|
624
|
+
`),tt=e=>{let o=ex(e=>e.pullEditorChanges),i=ex(e=>e.currentFileIndex),l=ex(e=>e.project),[a,s]=h(!0);g(()=>{e.onChange?.(l)},[l,e.onChange]),g(()=>{s(!0),setTimeout(()=>{s(!1)},1600)},[i]);let{file:d}=e;return d?"audio"===d.type?t(te,{children:t("audio",{src:d.file,controls:!0})}):r(n,{children:[t(o7,{...e,onChange:e=>{o()},editorState:d.file||o8}),t(to,{show:a,children:"Loading..."})]}):null},tr=i(c.div`
|
|
641
625
|
height: 2rem;
|
|
642
626
|
display: flex;
|
|
643
627
|
align-items: center;
|
|
644
628
|
background: ${({theme:e})=>e.colors.elevation2};
|
|
645
|
-
`),
|
|
629
|
+
`),tn=i(c.div`
|
|
646
630
|
display: flex;
|
|
647
631
|
align-items: center;
|
|
648
632
|
cursor: pointer;
|
|
@@ -659,7 +643,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
659
643
|
background-color: ${({theme:e})=>e.colors.elevation1};
|
|
660
644
|
}
|
|
661
645
|
}
|
|
662
|
-
`),
|
|
646
|
+
`),ti=i(c.div`
|
|
663
647
|
display: flex;
|
|
664
648
|
align-items: center;
|
|
665
649
|
height: 100%;
|
|
@@ -670,10 +654,10 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
670
654
|
&:hover {
|
|
671
655
|
color: ${({theme:e})=>e.colors.whitePrimary};
|
|
672
656
|
}
|
|
673
|
-
`),
|
|
657
|
+
`),tl=i(c(v)`
|
|
674
658
|
height: 40%;
|
|
675
659
|
width: auto;
|
|
676
|
-
`),
|
|
660
|
+
`),ta=i(c(b)`
|
|
677
661
|
height: 70%;
|
|
678
662
|
width: auto;
|
|
679
663
|
cursor: pointer;
|
|
@@ -681,7 +665,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
681
665
|
&:hover {
|
|
682
666
|
color: ${({theme:e})=>e.colors.whitePrimary};
|
|
683
667
|
}
|
|
684
|
-
`),
|
|
668
|
+
`),ts=()=>({file:o8,name:"Unnamed",type:"patch",id:p()});var td=({...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),b=ex(e=>e.deleteFile),y=ex(e=>e.syncEditorWithCurrentFile),x=ex(e=>e.setEditorState);ex(e=>e.pullEditorChanges);let[w,$]=h(!1);return g(()=>{u(o||{files:[ts()]});let e=o?.files[0];e?.file&&e?.type!=="audio"&&x(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?ef(n)?new Response(JSON.stringify(n.file??null)):ev(n)?fetch(n.file):new Response(null):new Response(`File not found: ${o.url}`,{status:404})}),()=>{}),[m]),g(()=>{y()},[i,y]),r(l,{theme:n||ew,children:[t(a,{styles:s`
|
|
685
669
|
:root {
|
|
686
670
|
--leva-colors-elevation1: #292d39;
|
|
687
671
|
--leva-colors-elevation2: #181c20;
|
|
@@ -738,5 +722,5 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
738
722
|
--leva-fontWeights-folder: normal;
|
|
739
723
|
--leva-fontWeights-button: normal;
|
|
740
724
|
}
|
|
741
|
-
`}),r(
|
|
725
|
+
`}),r(o6,{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),y();return}v({...ts(),file:{...o,controlPanel:{...o8.controlPanel,...o.controlPanel}},name:e.name},e.name);return}if(e.type.match(/^audio\//)){let o=await eq(e);v({type:"audio",id:`audio-file-${+new Date}`,name:e.name,file:o});return}console.error("Unsupported file type",e)})},children:[r(tr,{children:[p.files.map((e,o)=>r(tn,{onClick:()=>{c(o)},active:o===i,children:[t(oe,{onChange:e=>f(o,e),value:e.name||"Unnamed"}),t(ta,{onClick:e=>{e.stopPropagation(),window.confirm("Do you really want to delete this file?")&&(b(o),1===p.files.length&&(v(ts()),c(0),y()))}})]},o)),t(ti,{onClick:()=>{v(ts()),c(p.files.length)},children:t(tl,{})})]}),t(o4,{children:t(tt,{file:d,...e})}),w&&t(o5,{children:"Drop file(s) to upload to the project"})]})]})};export{td as Editor,o8 as EDITOR_DEFAULTS,oQ as Wire,oC as WNNode,ox as TitleBar,oc as PortsPanel,oh as OutputPorts,oy as OutputHandle,op as InputPorts,ov as InputHandle,og as Port,ej as Modal,oe as EditableLabel,e6 as useAudioNode,e5 as useNode,eC as useTheme,ex as useStore,ew as theme,ev as isAudio,ef as isPatch,ey as PortType};
|
|
742
726
|
//# sourceMappingURL=module.js.map
|