@web-noise/core 0.0.14 → 0.0.15-alpha.2
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 +119 -84
- package/dist/cjs/components.js.map +1 -1
- package/dist/esm/components.js +172 -137
- package/dist/esm/components.js.map +1 -1
- package/dist/main.js +123 -88
- package/dist/main.js.map +1 -1
- package/dist/module.js +191 -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 n,Fragment as r}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 m,useCallback as u,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 k,{getConnectedEdges as $,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 en}from"react-icons/fa";import{Resizable as er}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 em=e=>JSON.parse(JSON.stringify(e)),eu=(e,o)=>{let t=new Set(e.map(e=>e.id)),n=new Set(o.map(e=>e.id));return{added:o.filter(e=>!t.has(e.id)),removed:e.filter(e=>!n.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:n}=o(),{maxHistoryLength:r,skipCollect:i}=n;i?e({history:{...n,skipCollect:!1}}):e(({history:e})=>{if(!e)return{};let{buffer:o,pointer:n}=e,i=o.slice(Math.max(n-r+1,0),n);return{history:{...e,buffer:[...i,t],pointer:Math.min(n+1,r)}}})},back:()=>{let{nodes:t,edges:n,controlPanel:r,history:i}=o(),{buffer:l,pointer:a}=i,s=l[a-1];if(!s)return;let d=O(s);d&&e({...B(em({nodes:t,edges:n,controlPanel:r}),d),history:{...i,pointer:a-1,skipCollect:!0}})},forward:()=>{let{nodes:t,edges:n,controlPanel:r,history:i}=o(),{buffer:l,pointer:a}=i,s=l[a];s&&e({...B(em({nodes:t,edges:n,controlPanel:r}),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:n,project:r}=o(),i=r.files[t];ev(i)||n(t,{...i,file:e()})},syncEditorWithCurrentFile:()=>{let{currentFileIndex:e,setEditorState:t,project:n}=o(),r=n.files[e];"audio"===r.type?console.log("audio file. skipping"):t(r.file)},currentFileIndex:0,setCurrentFileIndex(t){let{currentFileIndex:n}=o();t!==n&&e({currentFileIndex:t})},updateFileContent(t,n){let{project:r}=o();e({project:{...r,files:r.files.map((e,o)=>o===t?{...e,...n}:e)}})},updateFileName(t,n){let{project:r}=o();e({project:{...r,files:r.files.map((e,o)=>o===t?{...e,name:n}:e)}})},addFile(t){let{project:n}=o(),r=[...n.files,t];e({project:{...n,files:r}})},deleteFile:t=>{let{project:n,currentFileIndex:r}=o();e({project:{...n,files:n.files.filter((e,o)=>t!==o)}}),t<=r&&e({currentFileIndex:Math.max(0,r-1)})}}))(...e),setGraph:async({nodes:e,edges:o})=>{let{patch:n,createNodes:r,createEdges:i,setNodesAndEdges:l,nodes:a,edges:s}=t();l({nodes:[],edges:[]}),await r(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:n}=t(),{type:r,id:i,data:l}=e;if(void 0===r)throw Error(`node type is not defined for node: ${i}`);o({...e,data:{...l,config:{...n[r]?.defaultConfig,...l?.config}}})},removeNode:e=>t().removeNodes([e]),removeNodes:e=>{let{edges:n,nodes:r,onNodesDelete:i,removeEdges:l,removeNodesFromControlPanel:a}=t(),s=e.map(({id:e})=>e),d=[...e,...r.filter(({parentNode:e})=>e&&s.includes(e))];a(d),l($(d,n)),i(d);let c=d.map(({id:e})=>e);o({nodes:r.filter(({id:e})=>!c.includes(e))})},removeEdges:e=>{let{edges:n,onEdgesDelete:r}=t(),i=e.map(({id:e})=>e);r(e),o({edges:n.filter(({id:e})=>!i.includes(e))})},createEdges:e=>{let{patch:o,edges:n,setEdges:r}=t();r(e)},onConnect:async e=>{let{edges:o,createEdges:n}=t();n(P(e,o))},onEdgesDelete:e=>{let{patch:o}=t()},onNodesDelete:async e=>{let{removeNodesFromControlPanel:o,patch:n}=t();o(e)},plugins:[],setPlugins:async e=>{let{setNodeTypes:n}=t();o({plugins:e});let r=e.reduce((e,o)=>({...e,...o.components.reduce((e,o)=>({...e,[o.type]:o}),{})}),{}),i=Object.keys(r).reduce((e,o)=>({...e,[o]:r[o].node}),{});R(Object.keys(r).reduce((e,o)=>({...e,[o]:r[o].audioNode}),{})),n(i),o(({nodesConfiguration:e})=>({nodesConfiguration:{...e,...r}}))},nodesConfiguration:{},config:{showMinimap:!1},setConfig:e=>{o(({config:o})=>({config:{...o,...e}}))},getEditorState:()=>{let{getNodesAndEdges:e,controlPanel:o,viewport:n}=t();return{...e(),controlPanel:o,viewport:n}},setEditorState:async({nodes:e,edges:n,controlPanel:r,viewport:i})=>{let{setGraph:l}=t();await l({nodes:e,edges:n}),await new Promise(e=>setTimeout(e,1e3)),o({controlPanel:r,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:n}=t(),r=e.filter(({selected:e})=>e),i=o.filter(({selected:e})=>e);r.length&&n({nodes:r,edges:i})},pasteBuffer:(e=0,n=0)=>{let{copyBuffer:r,createNodes:i,setEdges:l,nodes:a,edges:s}=t(),{nodes:d,edges:c}=r;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-n,{nodes:m,mapping:u}=d.reduce((e,o)=>{let t,n=(t=+new Date+Math.floor(1e3*Math.random()),o?.type?`${o.type}-${t}`:t.toString());return{nodes:[...e.nodes,{...o,id:n,position:{x:o.position.x-h,y:o.position.y-g},selected:!0}],mapping:{...e.mapping,[o.id]:n}}},{nodes:[],mapping:{}});i(m);let f=c.map(e=>{let o=u[e.source]||e.source,t=u[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:n}=e;if(!n)return null;let r=o[n]?.controlPanelNode;return r||(console.error(`could not find node for type ${n}`),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:n}=t(),r=e.type?n[e.type]?.defaultConfig:{},{height:i}=r?.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,n)=>{let r,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(r),l||(l=o),r=setTimeout(()=>{let o=i.diff(l,e);l=null,o&&t().history.push(o)},500)});return n.subscribe(a),e((...e)=>o(...e),t,n)},(e,t,n)=>{n.subscribe(async(e,o)=>{});let r=new Set,i={...t(),nodes:[],edges:[]};return o(async(...o)=>{let n=t(),[l]=o,a={...i,..."function"==typeof l?l({...i}):l},s=eu(i.nodes,a.nodes),d=eu(i.edges,a.edges);i=a;let c=s.added,p=d.added,h=d.removed,g=s.removed,{patch:m}=n;if(c.length){let e=m.registerAudioNodes(c);r.add(e),await e,r.delete(e)}if(!(p.length||h.length||g.length))return void e(...o);if(r.size)try{await Promise.all([...r.values()])}catch(e){console.log("some error",e)}p.length&&m.registerAudioConnections(p),h.length&&m.unregisterAudioConnections(h),g.length&&m.unregisterAudioNodes(g),e(...o)},t,n)})),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 ek=c(X)``,e$=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(r,{children:t(e$,{id:eP,animation:!1,colors:e.colors,children:t(ek,{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,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
|
-
`,eF=c(
|
|
81
|
+
`,eF=c(b)`
|
|
82
82
|
position: absolute;
|
|
83
83
|
top: 0.2rem;
|
|
84
84
|
right: 0.2rem;
|
|
85
85
|
cursor: pointer;
|
|
86
|
-
`;var
|
|
86
|
+
`;var ej=({children:e,onClose:o,...r})=>{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:n(eE,{...r,onClick:e=>{e.stopPropagation()},theme:i,children:[e,t(eF,{theme:i,onClick:o})]})}),document.body)};let eD=i(c.div`
|
|
87
87
|
width: 100%;
|
|
88
|
-
`),
|
|
88
|
+
`),eM=i(c.div`
|
|
89
89
|
padding: 1rem;
|
|
90
90
|
display: flex;
|
|
91
91
|
flex-direction: column;
|
|
92
92
|
gap: 1rem;
|
|
93
|
-
`),
|
|
93
|
+
`),eT=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
|
+
`),eS=i(c.div`
|
|
115
115
|
white-space: nowrap;
|
|
116
116
|
overflow: hidden;
|
|
117
117
|
text-overflow: ellipsis;
|
|
118
|
-
`),
|
|
118
|
+
`),eA=i(c.div`
|
|
119
119
|
color: ${({theme:e})=>e.colors.highlight2};
|
|
120
120
|
font-size: 12px;
|
|
121
|
-
`),
|
|
121
|
+
`),eI=i(c.div`
|
|
122
122
|
display: flex;
|
|
123
123
|
gap: 0.2rem;
|
|
124
124
|
flex-wrap: wrap;
|
|
125
|
-
`),
|
|
125
|
+
`),e_=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
|
+
`),eH=i(c.div``),eL=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 eW=({onComponentClick:e,filters:{plugin:o,search:
|
|
143
|
+
`);var eW=({onComponentClick:e,filters:{plugin:o,search:r="",tags:i},onTagClick:l})=>{let a=ex(({plugins:e})=>e),s=m(()=>o?a.filter(({name:e})=>e===o):a,[a,o]);return t(eD,{children:m(()=>r||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(r.toLocaleLowerCase())||o?.toLocaleLowerCase().includes(r.toLocaleLowerCase()))})):s,[s,r,i]).map(({name:o,description:r,components:a},s)=>a.length?n(eM,{children:[n(eH,{children:[t(eL,{children:o}),t(eR,{children:r})]}),t(eT,{children:a.sort((e,o)=>e.type.toLowerCase()>o.type.toLowerCase()?1:-1).map((o,r)=>n("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))})]},r))})]},s):null)})};let eO=c.div`
|
|
144
144
|
display: flex;
|
|
145
145
|
position: relative;
|
|
146
|
-
`,
|
|
146
|
+
`,eB=c.input`
|
|
147
147
|
padding-right: 2rem;
|
|
148
148
|
padding-left: 0.3rem;
|
|
149
149
|
width: 100%;
|
|
@@ -174,14 +174,14 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
174
174
|
-webkit-appearance: none;
|
|
175
175
|
margin-right: 1rem;
|
|
176
176
|
}
|
|
177
|
-
`,
|
|
177
|
+
`,eU=c.div`
|
|
178
178
|
display: flex;
|
|
179
179
|
flex-direction: column;
|
|
180
180
|
padding: 0.6rem;
|
|
181
181
|
gap: 0.6rem;
|
|
182
182
|
border-right: 1px solid ${({theme:e})=>e.colors.elevation3};
|
|
183
183
|
min-width: 14rem;
|
|
184
|
-
`,
|
|
184
|
+
`,eV=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
|
+
`,eG=i(c(e_)`
|
|
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 eX=({onChange:e,value:o})=>{let
|
|
205
|
+
`);var eX=({onChange:e,value:o})=>{let r=eC(),i=ex(({plugins:e})=>e),l=f(null);return g(()=>{l.current&&l.current.focus()},[l]),n(eU,{theme:r,children:[t(eO,{children:t(eB,{ref:l,theme:r,value:o.search||"",placeholder:"search...",onChange:t=>e({...o,search:t.target.value})})}),t(eI,{children:o.tags?.map((n,r)=>t(eG,{isActive:!0,onClick:()=>{let t=o.tags?.filter(e=>e!==n)||[];e({...o,tags:t})},children:n},r))}),i.map(({name:i,components:l},a)=>i?n(eV,{theme:r,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
|
+
`,eJ=c.div`
|
|
211
211
|
flex-grow: 1;
|
|
212
212
|
height: 100%;
|
|
213
213
|
overflow-y: scroll;
|
|
214
|
-
`;var
|
|
214
|
+
`;var eZ=({isOpen:e,closeMenu:o,mousePosition:r})=>{let i=eC(),{screenToFlowPosition:l}=S(),{createNode:a}=ex(({createNode:e})=>({createNode:e})),[s,d]=h({}),c=u(({type:e})=>{let{x:t,y:n}=l(r);a({id:`${e}-${+new Date}`,type:e,data:{label:e},position:{x:t,y:n},targetPosition:A.Left,sourcePosition:A.Right}),o()},[r,l,a,o,r]);return e?t(ej,{onClose:()=>{o(),d({})},children:n(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 n=new FileReader;n.readAsDataURL(e),n.onload=()=>o(n.result?.toString()||""),n.onerror=e=>t(e)}),eK=c.div`
|
|
215
215
|
display: flex;
|
|
216
216
|
align-items: center;
|
|
217
217
|
justify-content: center;
|
|
@@ -237,95 +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
|
+
`,eQ=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
|
-
`,e0=c(
|
|
247
|
+
`,e0=c(Q)`
|
|
248
248
|
width: 100%;
|
|
249
249
|
height: 8rem;
|
|
250
250
|
`,e1=c.div`
|
|
251
251
|
font-size: 2rem;
|
|
252
|
-
`;var e2=({isOpen:e,closeMenu:o})=>{let
|
|
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`
|
|
252
|
+
`;var e2=({isOpen:e,closeMenu:o})=>{let r=eC();ex(({setGraph:e})=>e),ex(e=>e.setEditorState);let i=ex(e=>e.addFile),l=f(null),a=u(async e=>{let[t]=e||[],n=await eq(t);i({type:"audio",id:`audio-file-${+new Date}`,name:t.name,file:n}),o()},[i,o]);return e?t(ej,{onClose:o,children:n(eK,{theme:r,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:n(eQ,{theme:r,children:[t(e0,{}),t(e1,{children:"click or drop file here"})]})})]})}):null};let e3="editor-menu";var e7=({editorContextMenu:e=[]})=>{let o=eC(),[i,l]=h({x:0,y:0}),[a,s]=h(!1),[d,c]=h(!1),p=u((e,o)=>{l({x:e,y:o}),s(!0)},[s]),f=ex(e=>e.pasteBuffer),{screenToFlowPosition:v}=S(),b=u(e=>{let{x:o,y:t}=v(e);f(o,t)},[s,v]),y=ex(({clearGraph:e})=>e),x=u(()=>{y()},[y]),w=ex(e=>e.toggleHelp),C=ex(e=>e.history.back),k=ex(e=>e.history.forward),$=ex(e=>e.history.pointer),P=ex(e=>e.history.buffer),N=ex(e=>e.copySelectedItems),z=ex(e=>e.nodes),E=m(()=>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",()=>(k(),!1)),Z("command+c",()=>(N(),!1)),Z("command+v",()=>(b({x:200,y:50}),!1)),()=>{Z.unbind()}),[p,b]),n(r,{children:[t(eZ,{isOpen:a,closeMenu:()=>s(!1),mousePosition:i}),t(e2,{isOpen:d,closeMenu:()=>c(!1)}),n(e$,{id:e3,animation:!1,colors:o.colors,children:[t(ek,{onClick:({triggerEvent:{clientX:e,clientY:o}})=>p(e,o),children:"Add Node (⌘+⇧+A)"}),t(J,{}),t(ek,{onClick:x,children:"Delete All"}),t(J,{}),t(ek,{onClick:()=>c(!0),children:"Upload Audio File"}),t(J,{}),t(ek,{disabled:0===$,onClick:C,children:"Undo (⌘+z)"}),t(ek,{disabled:$===P.length,onClick:k,children:"Redo (⌘+⇧+Z)"}),t(J,{}),t(ek,{disabled:!E.length,onClick:N,children:"Copy Selected (⌘+c)"}),t(ek,{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(ek,{children:e},o)),t(J,{}),t(ek,{onClick:w,children:"Help (⇧+?)"})]})]})};let e6="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=u(({props:e})=>!!e?.node.type&&!!c.find(({id:o})=>o===e.node.id),[c]),h=u(({props:e})=>{if(!e?.node.type)return!1;let o=d[e.node.type];return!!o?.controlPanelNode},[d]);return t(r,{children:n(e$,{id:e6,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)"})]})})},e9=e=>ex(({patch:e})=>e).audioNodes.get(e),e5=e=>{let o=ex(({updateNodeData:e})=>e);return{updateNodeValues:u(t=>o(e,{values:t}),[e,o]),updateNodeConfig:u(t=>o(e,{config:t}),[e,o]),updateNodeLabel:u(t=>o(e,{label:t}),[e,o])}};let e4=c.input`
|
|
329
253
|
width: 100%;
|
|
330
254
|
background: none;
|
|
331
255
|
border: none;
|
|
@@ -354,7 +278,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
354
278
|
padding: 0.3rem;
|
|
355
279
|
border-radius: 0.2rem;
|
|
356
280
|
}
|
|
357
|
-
`;var
|
|
281
|
+
`;var oe=({onChange:e,value:o="",className:n})=>{let r=f(null),[i,l]=h(!1),a=u(e=>{e.target?.select(),l(!0)},[l]),s=u(()=>{window.getSelection()?.collapseToEnd(),l(!1)},[l]),d=u(()=>{s(),r.current&&e(r.current.value)},[r,s,e]),c=u(()=>{s(),r.current&&o&&(r.current.value=o)},[r,s,o]);return g(()=>{r.current&&(r.current.value=o)},[o,r]),t(e4,{ref:r,type:"text",readOnly:!i,onDoubleClick:e=>a(e),onBlur:d,onKeyDown:e=>{switch(e.key){case"Escape":c();break;case"Enter":d()}},className:n})};let oo=i(c.div`
|
|
358
282
|
height: 100%;
|
|
359
283
|
width: 100%;
|
|
360
284
|
overflow: scroll;
|
|
@@ -382,13 +306,64 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
382
306
|
a {
|
|
383
307
|
color: ${({theme:e})=>e.colors.accent1};
|
|
384
308
|
}
|
|
385
|
-
|
|
309
|
+
|
|
310
|
+
h1,
|
|
311
|
+
h2,
|
|
312
|
+
h3,
|
|
313
|
+
h4,
|
|
314
|
+
h5,
|
|
315
|
+
h6 {
|
|
316
|
+
display: block;
|
|
317
|
+
margin-block-start: 1em;
|
|
318
|
+
margin-block-end: 1em;
|
|
319
|
+
margin-inline-start: 0px;
|
|
320
|
+
margin-inline-end: 0px;
|
|
321
|
+
font-weight: bold;
|
|
322
|
+
unicode-bidi: isolate;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
h1 {
|
|
326
|
+
font-size: 2em;
|
|
327
|
+
margin-block-start: 0.67em;
|
|
328
|
+
margin-block-end: 0.67em;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
h2 {
|
|
332
|
+
font-size: 1.5em;
|
|
333
|
+
margin-block-start: 0.83em;
|
|
334
|
+
margin-block-end: 0.83em;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
h3 {
|
|
338
|
+
font-size: 1.17em;
|
|
339
|
+
margin-block-start: 1em;
|
|
340
|
+
margin-block-end: 1em;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
ul {
|
|
344
|
+
display: block;
|
|
345
|
+
list-style-type: disc;
|
|
346
|
+
margin-block-start: 1em;
|
|
347
|
+
margin-block-end: 1em;
|
|
348
|
+
padding-inline-start: 40px;
|
|
349
|
+
unicode-bidi: isolate;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
p {
|
|
353
|
+
display: block;
|
|
354
|
+
margin-block-start: 1em;
|
|
355
|
+
margin-block-end: 1em;
|
|
356
|
+
margin-inline-start: 0px;
|
|
357
|
+
margin-inline-end: 0px;
|
|
358
|
+
unicode-bidi: isolate;
|
|
359
|
+
}
|
|
360
|
+
`);var ot=({isOpen:e,onClose:o,type:n,node:r})=>{let{info:i,portsDescription:l}=ex(e=>e.nodesConfiguration[n]),a=m(()=>{let e=[],o=r.inputs;if(o)for(let t in e.push("## Inputs"),o){let n=o[t];e.push(`### *${t}*`);let r=l?.inputs?.[t];r&&e.push(r),Array.isArray(n.type)?e.push(`**Types**: \`${n.type.join(", ")}\``):e.push(`**Type**: \`${n.type||"unknown"}\``),n.range&&e.push(`**Range**: \`[${n.range[0]}, ${n.range[1]}]\``),void 0!==n.defaultValue&&e.push(`**Default**: \`${n.defaultValue}\``)}let t=r.outputs;if(t)for(let o in e.push("## Outputs"),t){let n=t[o];e.push(`### *${o}*`);let r=l?.outputs?.[o];r&&e.push(r),Array.isArray(n.type)?e.push(`**Types**: \`${n.type.join(", ")}\``):e.push(`**Type**: \`${n.type||"unknown"}\``),n.range&&e.push(`**Range**: \`[${n.range[0]}, ${n.range[1]}]\``),void 0!==n.defaultValue&&e.push(`**Default**: \`${n.defaultValue}\``)}return e.join("\n\n")},[r,l]);return e?t(ej,{onClose:o,children:t(oo,{dangerouslySetInnerHTML:{__html:ec((i||"")+"\n\n"+a||"")}})}):null};let on=c.div`
|
|
386
361
|
background-color: var(--leva-colors-elevation1);
|
|
387
|
-
`,
|
|
362
|
+
`,or=c(on)`
|
|
388
363
|
padding: 2rem 5rem;
|
|
389
|
-
`,
|
|
364
|
+
`,oi=c(on)`
|
|
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
|
+
`,om={[ey.Audio]:"#4ade80",[ey.Gate]:"#c084fc",[ey.Number]:"#38bdf8",[ey.Any]:"#ffffff"},ou=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 om[e.portType];{let o=e.portType.map(e=>om[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(ou)`
|
|
444
419
|
left: -3px;
|
|
445
|
-
`),
|
|
420
|
+
`),ov=({...e})=>t(of,{...e,type:"target",position:A.Left}),ob=i(c(ou)`
|
|
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:r,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),u=m(()=>d[e.type].resizable??!1,[d,e.type]),{updateNodeLabel:f,updateNodeConfig:v}=e5(o),{data:b}=s(o)||{},y=e9(o),{ConfigNode:x}=(e=>{let{configNode:o}=ow(e);return{ConfigNode:o}})(l.type),[w,C]=h(!1);if(!y)return t(or,{className:ep,children:"can't find audio node"});if(y.loading)return t(or,{className:ep,children:"loading"});if(y.error)return n(oi,{className:ep,children:["error: ",y.error.toString()]});if(!y.node)return t(or,{className:ep,children:"can't find audio node"});let k=b?.config?.size,{node:{inputs:$,outputs:P}}=y;return n(on,{children:[n(ox,{children:[g&&t(oa,{onClickCapture:()=>p(!0)}),t(oe,{value:b?.label??"No Name",onChange:f}),x&&t(ol,{onClickCapture:()=>C(e=>!e)})]}),n(oc,{theme:a,children:[t(op,{children:$?Object.keys($).map((e,o)=>n(og,{children:[t(ov,{id:e,portType:$[e].type}),t("span",{children:e})]},o)):null}),t(oh,{children:P?Object.keys(P).map((e,o)=>n(og,{children:[t(oy,{id:e,portType:P[e].type}),t("span",{children:e})]},o)):null})]}),x&&w&&i?t(x,{...e}):u?t(er,{size:k,minWidth:180,minHeight:30,enable:{bottom:!0,bottomRight:!0,right:!0},onResizeStop:(e,o,t,n)=>{let r=k?{width:k.width+n.width,height:k.height+n.height}:t.getBoundingClientRect();v({...b?.config,size:r})},children:r}):r,t(ot,{isOpen:c,type:e.type,onClose:()=>p(!1),node:y.node})]})},ok=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
|
+
`,o$=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,n=ex(e=>e.getControlPanelNode),r=m(()=>n(o),[o]);return r?t(r,{...e}):null};var oF=e=>{let{node:o,showControls:r,onDelete:i}=e,l=eC(),{id:a}=o,{node:s}=e9(a)||{},{updateNodeValues:d}=e5(a);return n(oz,{theme:l,children:[n(o$,{theme:l,children:[t(ok,{children:o.data.label}),r&&n(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(o$)`
|
|
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(ok)`
|
|
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=m(()=>{let e=a.map(({id:e})=>e);return i.filter(({id:o})=>e.includes(o))},[i,a]),g=ex(e=>e.showControlPanel),u=ex(e=>e.hideControlPanel),v=ex(e=>e.setControlPanelNodes),y=ex(e=>e.setControlPanelSize),x=ex(e=>e.removeNodeFromControlPanel),[w,C]=h(!0),k=m(()=>{let e=a.reduce((e,{height:o=eg,x:t,y:n=0})=>{let r=n+o;return r>e?r:e},0);return a.map(({id:o,width:t,height:n,x:r,y:i})=>({i:o,w:t||4,h:n||6,x:r??0,y:i??e}))},[a]);return p.length?n(r,{children:[t(oj,{theme:e,ref:o,onClick:g,children:t(es,{})}),n(ed,{open:l,onClose:u,direction:"left",className:"",size:"auto",enableOverlay:!1,style:{background:e.colors.elevation1,position:"absolute"},children:[n(oT,{theme:e,children:[t(oS,{children:"Control Panel"}),t(oD,{children:t(oM,{onClick:u,theme:e,children:t(b,{})})})]}),n(oA,{children:[t(o_,{children:w?n(oH,{theme:e,onClick:()=>C(!1),children:[t(el,{}),"Unlock grid"]}):n(oH,{theme:e,onClick:()=>C(!0),children:[t(ea,{}),"Lock grid"]})}),t(er,{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,n)=>{y({width:d+n.width,height:c+n.height})},children:t(oI,{theme:e,children:t(ei,{layout:k,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:n,y:r})=>({id:e,width:o,height:t,x:n,y:r})))})},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,64 @@ 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
|
+
|
|
544
|
+
h1,
|
|
545
|
+
h2,
|
|
546
|
+
h3,
|
|
547
|
+
h4,
|
|
548
|
+
h5,
|
|
549
|
+
h6 {
|
|
550
|
+
display: block;
|
|
551
|
+
margin-block-start: 1em;
|
|
552
|
+
margin-block-end: 1em;
|
|
553
|
+
margin-inline-start: 0px;
|
|
554
|
+
margin-inline-end: 0px;
|
|
555
|
+
font-weight: bold;
|
|
556
|
+
unicode-bidi: isolate;
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
h1 {
|
|
560
|
+
font-size: 2em;
|
|
561
|
+
margin-block-start: 0.67em;
|
|
562
|
+
margin-block-end: 0.67em;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
h2 {
|
|
566
|
+
font-size: 1.5em;
|
|
567
|
+
margin-block-start: 0.83em;
|
|
568
|
+
margin-block-end: 0.83em;
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
h3 {
|
|
572
|
+
font-size: 1.17em;
|
|
573
|
+
margin-block-start: 1em;
|
|
574
|
+
margin-block-end: 1em;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
ul {
|
|
578
|
+
display: block;
|
|
579
|
+
list-style-type: disc;
|
|
580
|
+
margin-block-start: 1em;
|
|
581
|
+
margin-block-end: 1em;
|
|
582
|
+
padding-inline-start: 40px;
|
|
583
|
+
unicode-bidi: isolate;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
p {
|
|
587
|
+
display: block;
|
|
588
|
+
margin-block-start: 1em;
|
|
589
|
+
margin-block-end: 1em;
|
|
590
|
+
margin-inline-start: 0px;
|
|
591
|
+
margin-inline-end: 0px;
|
|
592
|
+
unicode-bidi: isolate;
|
|
593
|
+
}
|
|
594
|
+
`),oU=i(c.div`
|
|
569
595
|
padding: 1rem;
|
|
570
596
|
height: 100%;
|
|
571
597
|
width: 100%;
|
|
572
598
|
box-sizing: border-box;
|
|
573
599
|
overflow: hidden;
|
|
574
|
-
`);var
|
|
600
|
+
`);var oV=()=>{var e;let o=ex(e=>e.isHelpShown),n=ex(e=>e.toggleHelp);return o?t(ej,{onClose:()=>{n()},children:t(oU,{children:t(oB,{dangerouslySetInnerHTML:{__html:ec((e=oO)&&e.__esModule?e.default:e)},onWheelCapture:e=>e.stopPropagation()})})}):null};let oG=()=>t(r,{children:t(_,{onClick:ex(e=>e.toggleHelp),children:t(ee,{})})}),oX=c.div`
|
|
575
601
|
position: fixed;
|
|
576
602
|
z-index: ${({theme:e})=>e.zIndex.resumeContextLayout};
|
|
577
603
|
width: 100%;
|
|
@@ -585,23 +611,32 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
585
611
|
justify-content: center;
|
|
586
612
|
color: ${({theme:e})=>e.colors.whitePrimary};
|
|
587
613
|
cursor: pointer;
|
|
588
|
-
`,
|
|
614
|
+
`,oY=c.div`
|
|
589
615
|
display: flex;
|
|
590
616
|
width: 100%;
|
|
591
617
|
align-items: center;
|
|
592
618
|
justify-content: center;
|
|
593
|
-
`,
|
|
619
|
+
`,oJ=c.div`
|
|
594
620
|
font-family: var(--leva-fonts-mono);
|
|
595
621
|
font-size: 2rem;
|
|
596
|
-
`,
|
|
622
|
+
`,oZ=c(eo)`
|
|
597
623
|
width: 7rem;
|
|
598
624
|
height: 7rem;
|
|
599
|
-
`;var
|
|
625
|
+
`;var oq=()=>{let e=eC(),o=ex(({patch:e})=>e).audioContext,[r,i]=h("running"===o.state);return r?null:n(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(en,{})})},oQ=({id:e,sourceX:o,sourceY:i,targetX:l,targetY:a,sourcePosition:s,targetPosition:d,style:c={},data:p,markerStart:h,markerEnd:m,source:u,target:f,sourceHandleId:v,targetHandleId:b,selected:y})=>{let x=eC(),w=ex(({getNode:e})=>e),C=w(u),k=w(f),$=C?.selected||k?.selected;g(()=>{if(v&&b)return console.log(`connected ${u} to ${f}`),()=>{console.log(`disconnected ${u} from ${f}`)}},[u,v,f,b]);let[P]=H({targetX:l,targetY:a,targetPosition:d,sourceX:o,sourceY:i,sourcePosition:s});return n(r,{children:[t("path",{id:e,style:{...c,stroke:y?x.colors.accent2:$?x.colors.highlight3:x.colors.highlight2},className:"react-flow__edge-path Wire",d:P,markerEnd:m}),t("path",{style:{...c,strokeWidth:8,color:"transparent",opacity:0,cursor:"pointer"},d:P,markerEnd:m})]})};let o0=i(c(E)`
|
|
626
|
+
&.bottom {
|
|
627
|
+
right: 1rem;
|
|
628
|
+
bottom: 40%;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
svg {
|
|
632
|
+
color: ${({theme:e})=>e.colors.elevation2};
|
|
633
|
+
}
|
|
634
|
+
`),o1=(e,o)=>console.log("drag stop",o),o2=(e,o)=>console.log("click",o),o3=[20,20],o7=({editorState:e,plugins:o=[],editorContextMenu:r=[],onChange:i=()=>{},...l})=>{let a=m(()=>({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(),$=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=u(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:e6});return{onContextMenu:u((o,t)=>{o.stopPropagation(),e(o,{props:{node:t}})},[])}})(),{onContextMenu:A}=(()=>{let{show:e}=G({id:eP});return{onContextMenu:u((o,t)=>{o.stopPropagation(),e(o,{props:{edge:t}})},[e])}})();return g(()=>{C&&N?.setViewport(C)},[C,N]),F({onEnd:w}),n(k,{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}),$.showMinimap?t(M,{}):null,n(o0,{showInteractive:!1,position:"bottom-right",children:[t(oK,{}),t(oG,{})]}),t(oq,{}),t(oW,{}),t(oV,{}),t(e7,{editorContextMenu:r}),t(e8,{}),t(eN,{})]})},o6=e=>t(T,{children:t(o7,{...e})}),o8={nodes:[],edges:[],controlPanel:{nodes:[],show:!1,size:{width:200,height:100}},viewport:{x:0,y:0,zoom:1.5}},o9=i(c.div`
|
|
600
635
|
display: flex;
|
|
601
636
|
flex-direction: column;
|
|
602
637
|
height: 100%;
|
|
603
638
|
width: 100%;
|
|
604
|
-
`),
|
|
639
|
+
`),o5=i(c.div`
|
|
605
640
|
position: fixed;
|
|
606
641
|
height: 100%;
|
|
607
642
|
width: 100%;
|
|
@@ -611,18 +646,18 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
611
646
|
justify-content: center;
|
|
612
647
|
align-items: center;
|
|
613
648
|
font-size: 2rem;
|
|
614
|
-
`),
|
|
649
|
+
`),o4=i(c.div`
|
|
615
650
|
height: 100%;
|
|
616
651
|
width: 100%;
|
|
617
652
|
display: flex;
|
|
618
653
|
position: relative;
|
|
619
|
-
`),
|
|
654
|
+
`),te=i(c.div`
|
|
620
655
|
display: flex;
|
|
621
656
|
flex: 1;
|
|
622
657
|
align-items: center;
|
|
623
658
|
justify-content: center;
|
|
624
659
|
background: ${({theme:e})=>e.colors.elevation3};
|
|
625
|
-
`),
|
|
660
|
+
`),to=i(c.div`
|
|
626
661
|
background: ${({theme:e})=>e.colors.elevation2};
|
|
627
662
|
opacity: 0.7;
|
|
628
663
|
position: absolute;
|
|
@@ -637,12 +672,12 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
637
672
|
align-items: center;
|
|
638
673
|
justify-content: center;
|
|
639
674
|
font-size: 6rem;
|
|
640
|
-
`),
|
|
675
|
+
`),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})}):n(r,{children:[t(o6,{...e,onChange:e=>{o()},editorState:d.file||o8}),t(to,{show:a,children:"Loading..."})]}):null},tn=i(c.div`
|
|
641
676
|
height: 2rem;
|
|
642
677
|
display: flex;
|
|
643
678
|
align-items: center;
|
|
644
679
|
background: ${({theme:e})=>e.colors.elevation2};
|
|
645
|
-
`),
|
|
680
|
+
`),tr=i(c.div`
|
|
646
681
|
display: flex;
|
|
647
682
|
align-items: center;
|
|
648
683
|
cursor: pointer;
|
|
@@ -659,7 +694,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
659
694
|
background-color: ${({theme:e})=>e.colors.elevation1};
|
|
660
695
|
}
|
|
661
696
|
}
|
|
662
|
-
`),
|
|
697
|
+
`),ti=i(c.div`
|
|
663
698
|
display: flex;
|
|
664
699
|
align-items: center;
|
|
665
700
|
height: 100%;
|
|
@@ -670,10 +705,10 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
670
705
|
&:hover {
|
|
671
706
|
color: ${({theme:e})=>e.colors.whitePrimary};
|
|
672
707
|
}
|
|
673
|
-
`),
|
|
708
|
+
`),tl=i(c(v)`
|
|
674
709
|
height: 40%;
|
|
675
710
|
width: auto;
|
|
676
|
-
`),
|
|
711
|
+
`),ta=i(c(b)`
|
|
677
712
|
height: 70%;
|
|
678
713
|
width: auto;
|
|
679
714
|
cursor: pointer;
|
|
@@ -681,7 +716,7 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
681
716
|
&:hover {
|
|
682
717
|
color: ${({theme:e})=>e.colors.whitePrimary};
|
|
683
718
|
}
|
|
684
|
-
`),
|
|
719
|
+
`),ts=()=>({file:o8,name:"Unnamed",type:"patch",id:p()});var td=({...e})=>{let{projectState:o,theme:r}=e,i=ex(e=>e.currentFileIndex),d=ex(e=>e.project.files[e.currentFileIndex]),c=ex(e=>e.setCurrentFileIndex),p=ex(e=>e.project),m=ex(e=>e.setProject),u=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,k]=h(!1);return g(()=>{m(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=u().files,n=o.url.replace("project://",""),r=t.find(({id:e})=>e===n);return r?ef(r)?new Response(JSON.stringify(r.file??null)):ev(r)?fetch(r.file):new Response(null):new Response(`File not found: ${o.url}`,{status:404})}),()=>{}),[u]),g(()=>{y()},[i,y]),n(l,{theme:r||ew,children:[t(a,{styles:s`
|
|
685
720
|
:root {
|
|
686
721
|
--leva-colors-elevation1: #292d39;
|
|
687
722
|
--leva-colors-elevation2: #181c20;
|
|
@@ -738,5 +773,5 @@ let e,o;import{jsx as t,jsxs as r,Fragment as n}from"react/jsx-runtime";import{w
|
|
|
738
773
|
--leva-fontWeights-folder: normal;
|
|
739
774
|
--leva-fontWeights-button: normal;
|
|
740
775
|
}
|
|
741
|
-
`}),
|
|
776
|
+
`}),n(o9,{onDragOver:e=>{e.preventDefault(),e.stopPropagation(),k(!0)},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),k(!1)},onDrop:e=>{e.preventDefault(),e.stopPropagation(),k(!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;m(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:[n(tn,{children:[p.files.map((e,o)=>n(tr,{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,e9 as useAudioNode,e5 as useNode,eC as useTheme,ex as useStore,ew as theme,ev as isAudio,ef as isPatch,ey as PortType};
|
|
742
777
|
//# sourceMappingURL=module.js.map
|