mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-12 14:18:36 +00:00
4 lines
9.6 KiB
JavaScript
4 lines
9.6 KiB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t=require("react"),ee=require("@uiw/react-codemirror"),E=require("@codemirror/view"),A=require("@codemirror/state"),te=require("@codemirror/lang-javascript"),l=require("@lezer/highlight"),ae=require("@uiw/codemirror-themes"),re=require("react-hook-inview"),oe=require("@strudel.cycles/eval"),p=require("@strudel.cycles/tone"),B=require("@strudel.cycles/core"),se=require("@strudel.cycles/webaudio"),M=require("@strudel.cycles/midi");function U(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var d=U(t),ne=U(ee),ce=ae.createTheme({theme:"dark",settings:{background:"#222",foreground:"#75baff",caret:"#ffcc00",selection:"rgba(128, 203, 196, 0.5)",selectionMatch:"#036dd626",lineHighlight:"#8a91991a",gutterBackground:"transparent",gutterForeground:"#676e95"},styles:[{tag:l.tags.keyword,color:"#c792ea"},{tag:l.tags.operator,color:"#89ddff"},{tag:l.tags.special(l.tags.variableName),color:"#eeffff"},{tag:l.tags.typeName,color:"#f07178"},{tag:l.tags.atom,color:"#f78c6c"},{tag:l.tags.number,color:"#ff5370"},{tag:l.tags.definition(l.tags.variableName),color:"#82aaff"},{tag:l.tags.string,color:"#c3e88d"},{tag:l.tags.special(l.tags.string),color:"#f07178"},{tag:l.tags.comment,color:"#7d8799"},{tag:l.tags.variableName,color:"#f07178"},{tag:l.tags.tagName,color:"#ff5370"},{tag:l.tags.bracket,color:"#a2a1a4"},{tag:l.tags.meta,color:"#ffcb6b"},{tag:l.tags.attributeName,color:"#c792ea"},{tag:l.tags.propertyName,color:"#c792ea"},{tag:l.tags.className,color:"#decb6b"},{tag:l.tags.invalid,color:"#ffffff"}]});const O=A.StateEffect.define(),ie=A.StateField.define({create(){return E.Decoration.none},update(e,o){try{for(let s of o.effects)if(s.is(O))if(s.value){const i=E.Decoration.mark({attributes:{style:"background-color: #FFCA2880"}});e=E.Decoration.set([i.range(0,o.newDoc.length)])}else e=E.Decoration.set([]);return e}catch(s){return console.warn("flash error",s),e}},provide:e=>E.EditorView.decorations.from(e)}),$=e=>{e.dispatch({effects:O.of(!0)}),setTimeout(()=>{e.dispatch({effects:O.of(!1)})},200)},L=A.StateEffect.define(),le=A.StateField.define({create(){return E.Decoration.none},update(e,o){try{for(let s of o.effects)if(s.is(L)){const i=s.value.map(u=>(u.context.locations||[]).map(({start:n,end:m})=>{const a=u.context.color||"#FFCA28";let f=o.newDoc.line(n.line).from+n.column,r=o.newDoc.line(m.line).from+m.column;const v=o.newDoc.length;return f>v||r>v?void 0:E.Decoration.mark({attributes:{style:`outline: 1.5px solid ${a};`}}).range(f,r)})).flat().filter(Boolean)||[];e=E.Decoration.set(i,!0)}return e}catch{return E.Decoration.set([])}},provide:e=>E.EditorView.decorations.from(e)}),ue=[te.javascript(),ce,le,ie];function K({value:e,onChange:o,onViewChanged:s,onSelectionChange:i,options:u,editorDidMount:n}){const m=t.useCallback(r=>{o?.(r)},[o]),a=t.useCallback(r=>{s?.(r)},[s]),f=t.useCallback(r=>{r.selectionSet&&i&&i?.(r.state.selection)},[i]);return d.default.createElement(d.default.Fragment,null,d.default.createElement(ne.default,{value:e,onChange:m,onCreateEditor:a,onUpdate:f,extensions:ue}))}function Q(e){const{onEvent:o,onQuery:s,onSchedule:i,ready:u=!0,onDraw:n}=e,[m,a]=t.useState(!1),f=1,r=()=>Math.floor(p.Tone.getTransport().seconds/f),v=(w=r())=>{const R=new B.TimeSpan(w,w+1),k=s?.(new B.State(R))||[];i?.(k,w);const T=R.begin.valueOf();p.Tone.getTransport().cancel(T);const N=(w+1)*f-.5,C=Math.max(p.Tone.getTransport().seconds,N)+.1;p.Tone.getTransport().schedule(()=>{v(w+1)},C),k?.filter(h=>h.part.begin.equals(h.whole?.begin)).forEach(h=>{p.Tone.getTransport().schedule(S=>{o(S,h,p.Tone.getContext().currentTime),p.Tone.Draw.schedule(()=>{n?.(S,h)},S)},h.part.begin.valueOf())})};t.useEffect(()=>{u&&v()},[o,i,s,n,u]);const y=async()=>{a(!0),await p.Tone.start(),p.Tone.getTransport().start("+0.1")},b=()=>{p.Tone.getTransport().pause(),a(!1)};return{start:y,stop:b,onEvent:o,started:m,setStarted:a,toggle:()=>m?b():y(),query:v,activeCycle:r}}function J(e){return t.useEffect(()=>(window.addEventListener("message",e),()=>window.removeEventListener("message",e)),[e]),t.useCallback(o=>window.postMessage(o,"*"),[])}let de=()=>Math.floor((1+Math.random())*65536).toString(16).substring(1);const fe=e=>encodeURIComponent(btoa(e));function G({tune:e,autolink:o=!0,onEvent:s,onDraw:i}){const u=t.useMemo(()=>de(),[]),[n,m]=t.useState(e),[a,f]=t.useState(),[r,v]=t.useState(""),[y,b]=t.useState(),[W,w]=t.useState(!1),[R,k]=t.useState(""),[T,N]=t.useState(),C=t.useMemo(()=>n!==a||y,[n,a,y]),h=t.useCallback(g=>v(c=>c+`${c?`
|
|
|
|
`:""}${g}`),[]),S=t.useMemo(()=>{if(a&&!a.includes("strudel disable-highlighting"))return(g,c)=>i?.(g,c,a)},[a,i]),H=t.useMemo(()=>a&&a.includes("strudel hide-header"),[a]),_=t.useMemo(()=>a&&a.includes("strudel hide-console"),[a]),q=Q({onDraw:S,onEvent:t.useCallback((g,c,Z)=>{try{s?.(c),c.context.logs?.length&&c.context.logs.forEach(h);const{onTrigger:x=se.webaudioOutputTrigger}=c.context;x(g,c,Z,1)}catch(x){console.warn(x),x.message="unplayable event: "+x?.message,h(x.message)}},[s,h]),onQuery:t.useCallback(g=>{try{return T?.query(g)||[]}catch(c){return console.warn(c),c.message="query error: "+c.message,b(c),[]}},[T]),onSchedule:t.useCallback((g,c)=>Y(g),[]),ready:!!T&&!!a}),z=J(({data:{from:g,type:c}})=>{c==="start"&&g!==u&&(q.setStarted(!1),f(void 0))}),V=t.useCallback(async(g=n)=>{if(a&&!C){b(void 0),q.start();return}try{w(!0);const c=await oe.evaluate(g);q.start(),z({type:"start",from:u}),N(()=>c.pattern),o&&(window.location.hash="#"+encodeURIComponent(btoa(n))),k(fe(n)),b(void 0),f(g),w(!1)}catch(c){c.message="evaluation error: "+c.message,console.warn(c),b(c)}},[a,C,n,q,o,u,z]),Y=(g,c)=>{g.length};return{hideHeader:H,hideConsole:_,pending:W,code:n,setCode:m,pattern:T,error:y,cycle:q,setPattern:N,dirty:C,log:r,togglePlay:()=>{q.started?q.stop():V()},setActiveCode:f,activateCode:V,activeCode:a,pushLog:h,hash:R}}function P(...e){return e.filter(Boolean).join(" ")}let F=[],j;function X({view:e,pattern:o,active:s}){t.useEffect(()=>{if(e)if(o&&s){let u=function(){try{const n=p.Tone.getTransport().seconds,a=[Math.max(j||n,n-1/10),n+1/60];j=n+1/60,F=F.filter(r=>r.whole.end>n);const f=o.queryArc(...a).filter(r=>r.hasOnset());F=F.concat(f),e.dispatch({effects:L.of(F)})}catch{e.dispatch({effects:L.of([])})}i=requestAnimationFrame(u)},i=requestAnimationFrame(u);return()=>{cancelAnimationFrame(i)}}else F=[],e.dispatch({effects:L.of([])})},[o,s,e])}const ge="_container_3i85k_1",me="_header_3i85k_5",he="_buttons_3i85k_9",be="_button_3i85k_9",pe="_buttonDisabled_3i85k_17",ve="_error_3i85k_21",ye="_body_3i85k_25";var D={container:ge,header:me,buttons:he,button:be,buttonDisabled:pe,error:ve,body:ye};function I({type:e}){return d.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",className:"sc-h-5 sc-w-5",viewBox:"0 0 20 20",fill:"currentColor"},{refresh:d.default.createElement("path",{fillRule:"evenodd",d:"M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z",clipRule:"evenodd"}),play:d.default.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",clipRule:"evenodd"}),pause:d.default.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z",clipRule:"evenodd"})}[e])}function we({tune:e,hideOutsideView:o=!1,init:s,onEvent:i,enableKeyboard:u}){const{code:n,setCode:m,pattern:a,activeCode:f,activateCode:r,evaluateOnly:v,error:y,cycle:b,dirty:W,togglePlay:w,stop:R}=G({tune:e,autolink:!1,onEvent:i});t.useEffect(()=>{s&&v()},[e,s]);const[k,T]=t.useState(),[N,C]=re.useInView({threshold:.01}),h=t.useRef(),S=t.useMemo(()=>((C||!o)&&(h.current=!0),C||h.current),[C,o]);return X({view:k,pattern:a,active:b.started&&!f?.includes("strudel disable-highlighting")}),t.useLayoutEffect(()=>{if(u){const H=async _=>{(_.ctrlKey||_.altKey)&&(_.code==="Enter"?(_.preventDefault(),$(k),await r()):_.code==="Period"&&(b.stop(),_.preventDefault()))};return window.addEventListener("keydown",H,!0),()=>window.removeEventListener("keydown",H,!0)}},[u,a,n,r,b,k]),d.default.createElement("div",{className:D.container,ref:N},d.default.createElement("div",{className:D.header},d.default.createElement("div",{className:D.buttons},d.default.createElement("button",{className:P(D.button,b.started?"sc-animate-pulse":""),onClick:()=>w()},d.default.createElement(I,{type:b.started?"pause":"play"})),d.default.createElement("button",{className:P(W?D.button:D.buttonDisabled),onClick:()=>r()},d.default.createElement(I,{type:"refresh"}))),y&&d.default.createElement("div",{className:D.error},y.message)),d.default.createElement("div",{className:D.body},S&&d.default.createElement(K,{value:n,onChange:m,onViewChanged:T})))}function Me(e){const{ready:o,connected:s,disconnected:i}=e,[u,n]=t.useState(!0),[m,a]=t.useState(M.WebMidi?.outputs||[]);return t.useEffect(()=>{M.enableWebMidi().then(()=>{M.WebMidi.addListener("connected",r=>{a([...M.WebMidi.outputs]),s?.(M.WebMidi,r)}),M.WebMidi.addListener("disconnected",r=>{a([...M.WebMidi.outputs]),i?.(M.WebMidi,r)}),o?.(M.WebMidi),n(!1)}).catch(r=>{if(r){console.error(r),console.warn("Web Midi could not be enabled..");return}})},[o,s,i,m]),{loading:u,outputs:m,outputByName:r=>M.WebMidi.getOutputByName(r)}}exports.CodeMirror=K;exports.MiniRepl=we;exports.cx=P;exports.flash=$;exports.useCycle=Q;exports.useHighlighting=X;exports.usePostMessage=J;exports.useRepl=G;exports.useWebMidi=Me;
|