mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 05:38:35 +00:00
proper draw cleanup
This commit is contained in:
Felix Roos
parent
aa76419eda
commit
8f31fbe275
2
packages/react/dist/index.cjs.js
vendored
2
packages/react/dist/index.cjs.js
vendored
File diff suppressed because one or more lines are too long
297
packages/react/dist/index.es.js
vendored
297
packages/react/dist/index.es.js
vendored
@ -1,15 +1,15 @@
|
||||
import n, { useCallback as C, useRef as P, useEffect as z, useState as E, useMemo as q, useLayoutEffect as I } from "react";
|
||||
import G from "@uiw/react-codemirror";
|
||||
import { Decoration as b, EditorView as K } from "@codemirror/view";
|
||||
import n, { useCallback as N, useRef as x, useEffect as R, useState as y, useMemo as q, useLayoutEffect as I } from "react";
|
||||
import J from "@uiw/react-codemirror";
|
||||
import { Decoration as E, EditorView as K } from "@codemirror/view";
|
||||
import { StateEffect as O, StateField as j } from "@codemirror/state";
|
||||
import { javascript as J } from "@codemirror/lang-javascript";
|
||||
import { javascript as Q } from "@codemirror/lang-javascript";
|
||||
import { tags as r } from "@lezer/highlight";
|
||||
import { createTheme as Q } from "@uiw/codemirror-themes";
|
||||
import { useInView as W } from "react-hook-inview";
|
||||
import { webaudioOutput as X, getAudioContext as Y } from "@strudel.cycles/webaudio";
|
||||
import { repl as Z } from "@strudel.cycles/core";
|
||||
import { transpiler as ee } from "@strudel.cycles/transpiler";
|
||||
const te = Q({
|
||||
import { createTheme as W } from "@uiw/codemirror-themes";
|
||||
import { useInView as X } from "react-hook-inview";
|
||||
import { webaudioOutput as Y, getAudioContext as Z } from "@strudel.cycles/webaudio";
|
||||
import { repl as ee } from "@strudel.cycles/core";
|
||||
import { transpiler as te } from "@strudel.cycles/transpiler";
|
||||
const re = W({
|
||||
theme: "dark",
|
||||
settings: {
|
||||
background: "#222",
|
||||
@ -42,113 +42,113 @@ const te = Q({
|
||||
{ tag: r.invalid, color: "#ffffff" }
|
||||
]
|
||||
});
|
||||
const L = O.define(), re = j.define({
|
||||
const L = O.define(), oe = j.define({
|
||||
create() {
|
||||
return b.none;
|
||||
return E.none;
|
||||
},
|
||||
update(e, t) {
|
||||
try {
|
||||
for (let o of t.effects)
|
||||
if (o.is(L))
|
||||
if (o.value) {
|
||||
const s = b.mark({ attributes: { style: "background-color: #FFCA2880" } });
|
||||
e = b.set([s.range(0, t.newDoc.length)]);
|
||||
const a = E.mark({ attributes: { style: "background-color: #FFCA2880" } });
|
||||
e = E.set([a.range(0, t.newDoc.length)]);
|
||||
} else
|
||||
e = b.set([]);
|
||||
e = E.set([]);
|
||||
return e;
|
||||
} catch (o) {
|
||||
return console.warn("flash error", o), e;
|
||||
}
|
||||
},
|
||||
provide: (e) => K.decorations.from(e)
|
||||
}), oe = (e) => {
|
||||
}), ne = (e) => {
|
||||
e.dispatch({ effects: L.of(!0) }), setTimeout(() => {
|
||||
e.dispatch({ effects: L.of(!1) });
|
||||
}, 200);
|
||||
}, R = O.define(), ne = j.define({
|
||||
}, A = O.define(), ae = j.define({
|
||||
create() {
|
||||
return b.none;
|
||||
return E.none;
|
||||
},
|
||||
update(e, t) {
|
||||
try {
|
||||
for (let o of t.effects)
|
||||
if (o.is(R)) {
|
||||
const s = o.value.map(
|
||||
(c) => (c.context.locations || []).map(({ start: f, end: d }) => {
|
||||
const u = c.context.color || "#FFCA28";
|
||||
let a = t.newDoc.line(f.line).from + f.column, i = t.newDoc.line(d.line).from + d.column;
|
||||
const m = t.newDoc.length;
|
||||
return a > m || i > m ? void 0 : b.mark({ attributes: { style: `outline: 1.5px solid ${u};` } }).range(a, i);
|
||||
if (o.is(A)) {
|
||||
const a = o.value.map(
|
||||
(s) => (s.context.locations || []).map(({ start: u, end: l }) => {
|
||||
const d = s.context.color || "#FFCA28";
|
||||
let c = t.newDoc.line(u.line).from + u.column, i = t.newDoc.line(l.line).from + l.column;
|
||||
const f = t.newDoc.length;
|
||||
return c > f || i > f ? void 0 : E.mark({ attributes: { style: `outline: 1.5px solid ${d};` } }).range(c, i);
|
||||
})
|
||||
).flat().filter(Boolean) || [];
|
||||
e = b.set(s, !0);
|
||||
e = E.set(a, !0);
|
||||
}
|
||||
return e;
|
||||
} catch {
|
||||
return b.set([]);
|
||||
return E.set([]);
|
||||
}
|
||||
},
|
||||
provide: (e) => K.decorations.from(e)
|
||||
}), ae = [J(), te, ne, re];
|
||||
function se({ value: e, onChange: t, onViewChanged: o, onSelectionChange: s, options: c, editorDidMount: f }) {
|
||||
const d = C(
|
||||
}), se = [Q(), re, ae, oe];
|
||||
function ce({ value: e, onChange: t, onViewChanged: o, onSelectionChange: a, options: s, editorDidMount: u }) {
|
||||
const l = N(
|
||||
(i) => {
|
||||
t?.(i);
|
||||
},
|
||||
[t]
|
||||
), u = C(
|
||||
), d = N(
|
||||
(i) => {
|
||||
o?.(i);
|
||||
},
|
||||
[o]
|
||||
), a = C(
|
||||
), c = N(
|
||||
(i) => {
|
||||
i.selectionSet && s && s?.(i.state.selection);
|
||||
i.selectionSet && a && a?.(i.state.selection);
|
||||
},
|
||||
[s]
|
||||
[a]
|
||||
);
|
||||
return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(G, {
|
||||
return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(J, {
|
||||
value: e,
|
||||
onChange: d,
|
||||
onCreateEditor: u,
|
||||
onUpdate: a,
|
||||
extensions: ae
|
||||
onChange: l,
|
||||
onCreateEditor: d,
|
||||
onUpdate: c,
|
||||
extensions: se
|
||||
}));
|
||||
}
|
||||
function S(...e) {
|
||||
return e.filter(Boolean).join(" ");
|
||||
}
|
||||
function ce({ view: e, pattern: t, active: o, getTime: s }) {
|
||||
const c = P([]), f = P();
|
||||
z(() => {
|
||||
function ie({ view: e, pattern: t, active: o, getTime: a }) {
|
||||
const s = x([]), u = x();
|
||||
R(() => {
|
||||
if (e)
|
||||
if (t && o) {
|
||||
let u = function() {
|
||||
let d = function() {
|
||||
try {
|
||||
const a = s(), m = [Math.max(f.current || a, a - 1 / 10, 0), a + 1 / 60];
|
||||
f.current = m[1], c.current = c.current.filter((l) => l.whole.end > a);
|
||||
const p = t.queryArc(...m).filter((l) => l.hasOnset());
|
||||
c.current = c.current.concat(p), e.dispatch({ effects: R.of(c.current) });
|
||||
const c = a(), f = [Math.max(u.current || c, c - 1 / 10, 0), c + 1 / 60];
|
||||
u.current = f[1], s.current = s.current.filter((m) => m.whole.end > c);
|
||||
const v = t.queryArc(...f).filter((m) => m.hasOnset());
|
||||
s.current = s.current.concat(v), e.dispatch({ effects: A.of(s.current) });
|
||||
} catch {
|
||||
e.dispatch({ effects: R.of([]) });
|
||||
e.dispatch({ effects: A.of([]) });
|
||||
}
|
||||
d = requestAnimationFrame(u);
|
||||
}, d = requestAnimationFrame(u);
|
||||
l = requestAnimationFrame(d);
|
||||
}, l = requestAnimationFrame(d);
|
||||
return () => {
|
||||
cancelAnimationFrame(d);
|
||||
cancelAnimationFrame(l);
|
||||
};
|
||||
} else
|
||||
c.current = [], e.dispatch({ effects: R.of([]) });
|
||||
s.current = [], e.dispatch({ effects: A.of([]) });
|
||||
}, [t, o, e]);
|
||||
}
|
||||
const ie = "_container_3i85k_1", le = "_header_3i85k_5", de = "_buttons_3i85k_9", ue = "_button_3i85k_9", fe = "_buttonDisabled_3i85k_17", me = "_error_3i85k_21", ge = "_body_3i85k_25", v = {
|
||||
container: ie,
|
||||
header: le,
|
||||
buttons: de,
|
||||
button: ue,
|
||||
buttonDisabled: fe,
|
||||
error: me,
|
||||
body: ge
|
||||
const le = "_container_3i85k_1", de = "_header_3i85k_5", ue = "_buttons_3i85k_9", fe = "_button_3i85k_9", me = "_buttonDisabled_3i85k_17", ge = "_error_3i85k_21", pe = "_body_3i85k_25", b = {
|
||||
container: le,
|
||||
header: de,
|
||||
buttons: ue,
|
||||
button: fe,
|
||||
buttonDisabled: me,
|
||||
error: ge,
|
||||
body: pe
|
||||
};
|
||||
function B({ type: e }) {
|
||||
return /* @__PURE__ */ n.createElement("svg", {
|
||||
@ -174,133 +174,134 @@ function B({ type: e }) {
|
||||
})
|
||||
}[e]);
|
||||
}
|
||||
function pe({
|
||||
function he({
|
||||
defaultOutput: e,
|
||||
interval: t,
|
||||
getTime: o,
|
||||
evalOnMount: s = !1,
|
||||
initialCode: c = "",
|
||||
autolink: f = !1,
|
||||
evalOnMount: a = !1,
|
||||
initialCode: s = "",
|
||||
autolink: u = !1,
|
||||
beforeEval: l,
|
||||
afterEval: d,
|
||||
onEvalError: u
|
||||
onEvalError: c
|
||||
}) {
|
||||
const [a, i] = E(), [m, p] = E(), [l, N] = E(c), [D, F] = E(l), [k, H] = E(), [M, _] = E(!1), A = l !== D, { scheduler: w, evaluate: y, start: h, stop: U, pause: $ } = q(
|
||||
() => Z({
|
||||
const [i, f] = y(), [v, m] = y(), [h, D] = y(s), [_, C] = y(h), [P, z] = y(), [k, F] = y(!1), H = h !== _, { scheduler: w, evaluate: g, start: U, stop: $, pause: G } = q(
|
||||
() => ee({
|
||||
interval: t,
|
||||
defaultOutput: e,
|
||||
onSchedulerError: i,
|
||||
onEvalError: (g) => {
|
||||
p(g), u?.(g);
|
||||
onSchedulerError: f,
|
||||
onEvalError: (p) => {
|
||||
m(p), c?.(p);
|
||||
},
|
||||
getTime: o,
|
||||
transpiler: ee,
|
||||
beforeEval: ({ code: g }) => {
|
||||
N(g);
|
||||
transpiler: te,
|
||||
beforeEval: ({ code: p }) => {
|
||||
D(p), l?.();
|
||||
},
|
||||
afterEval: ({ pattern: g, code: V }) => {
|
||||
F(V), H(g), p(), i(), f && (window.location.hash = "#" + encodeURIComponent(btoa(V))), d?.();
|
||||
afterEval: ({ pattern: p, code: V }) => {
|
||||
C(V), z(p), m(), f(), u && (window.location.hash = "#" + encodeURIComponent(btoa(V))), d?.();
|
||||
},
|
||||
onToggle: (g) => _(g)
|
||||
onToggle: (p) => F(p)
|
||||
}),
|
||||
[e, t, o]
|
||||
), x = C(async (g = !0) => y(l, g), [y, l]), T = P();
|
||||
return z(() => {
|
||||
!T.current && s && l && (T.current = !0, x());
|
||||
}, [x, s, l]), z(() => () => {
|
||||
), M = N(async (p = !0) => g(h, p), [g, h]), T = x();
|
||||
return R(() => {
|
||||
!T.current && a && h && (T.current = !0, M());
|
||||
}, [M, a, h]), R(() => () => {
|
||||
w.stop();
|
||||
}, [w]), {
|
||||
code: l,
|
||||
setCode: N,
|
||||
error: a || m,
|
||||
schedulerError: a,
|
||||
code: h,
|
||||
setCode: D,
|
||||
error: i || v,
|
||||
schedulerError: i,
|
||||
scheduler: w,
|
||||
evalError: m,
|
||||
evaluate: y,
|
||||
activateCode: x,
|
||||
activeCode: D,
|
||||
isDirty: A,
|
||||
pattern: k,
|
||||
started: M,
|
||||
start: h,
|
||||
stop: U,
|
||||
pause: $,
|
||||
evalError: v,
|
||||
evaluate: g,
|
||||
activateCode: M,
|
||||
activeCode: _,
|
||||
isDirty: H,
|
||||
pattern: P,
|
||||
started: k,
|
||||
start: U,
|
||||
stop: $,
|
||||
pause: G,
|
||||
togglePlay: async () => {
|
||||
M ? w.pause() : await x();
|
||||
k ? w.pause() : await M();
|
||||
}
|
||||
};
|
||||
}
|
||||
const he = () => Y().currentTime;
|
||||
function xe({ tune: e, hideOutsideView: t = !1, init: o, enableKeyboard: s }) {
|
||||
const ve = () => Z().currentTime;
|
||||
function Re({ tune: e, hideOutsideView: t = !1, init: o, enableKeyboard: a }) {
|
||||
const {
|
||||
code: c,
|
||||
setCode: f,
|
||||
evaluate: d,
|
||||
activateCode: u,
|
||||
error: a,
|
||||
code: s,
|
||||
setCode: u,
|
||||
evaluate: l,
|
||||
activateCode: d,
|
||||
error: c,
|
||||
isDirty: i,
|
||||
activeCode: m,
|
||||
pattern: p,
|
||||
started: l,
|
||||
scheduler: N,
|
||||
activeCode: f,
|
||||
pattern: v,
|
||||
started: m,
|
||||
scheduler: h,
|
||||
togglePlay: D,
|
||||
stop: F
|
||||
} = pe({
|
||||
stop: _
|
||||
} = he({
|
||||
initialCode: e,
|
||||
defaultOutput: X,
|
||||
getTime: he
|
||||
}), [k, H] = E(), [M, _] = W({
|
||||
defaultOutput: Y,
|
||||
getTime: ve
|
||||
}), [C, P] = y(), [z, k] = X({
|
||||
threshold: 0.01
|
||||
}), A = P(), w = q(() => ((_ || !t) && (A.current = !0), _ || A.current), [_, t]);
|
||||
return ce({
|
||||
view: k,
|
||||
pattern: p,
|
||||
active: l && !m?.includes("strudel disable-highlighting"),
|
||||
getTime: () => N.getPhase()
|
||||
}), F = x(), H = q(() => ((k || !t) && (F.current = !0), k || F.current), [k, t]);
|
||||
return ie({
|
||||
view: C,
|
||||
pattern: v,
|
||||
active: m && !f?.includes("strudel disable-highlighting"),
|
||||
getTime: () => h.getPhase()
|
||||
}), I(() => {
|
||||
if (s) {
|
||||
const y = async (h) => {
|
||||
(h.ctrlKey || h.altKey) && (h.code === "Enter" ? (h.preventDefault(), oe(k), await u()) : h.code === "Period" && (F(), h.preventDefault()));
|
||||
if (a) {
|
||||
const w = async (g) => {
|
||||
(g.ctrlKey || g.altKey) && (g.code === "Enter" ? (g.preventDefault(), ne(C), await d()) : g.code === "Period" && (_(), g.preventDefault()));
|
||||
};
|
||||
return window.addEventListener("keydown", y, !0), () => window.removeEventListener("keydown", y, !0);
|
||||
return window.addEventListener("keydown", w, !0), () => window.removeEventListener("keydown", w, !0);
|
||||
}
|
||||
}, [s, p, c, d, F, k]), /* @__PURE__ */ n.createElement("div", {
|
||||
className: v.container,
|
||||
ref: M
|
||||
}, [a, v, s, l, _, C]), /* @__PURE__ */ n.createElement("div", {
|
||||
className: b.container,
|
||||
ref: z
|
||||
}, /* @__PURE__ */ n.createElement("div", {
|
||||
className: v.header
|
||||
className: b.header
|
||||
}, /* @__PURE__ */ n.createElement("div", {
|
||||
className: v.buttons
|
||||
className: b.buttons
|
||||
}, /* @__PURE__ */ n.createElement("button", {
|
||||
className: S(v.button, l ? "sc-animate-pulse" : ""),
|
||||
className: S(b.button, m ? "sc-animate-pulse" : ""),
|
||||
onClick: () => D()
|
||||
}, /* @__PURE__ */ n.createElement(B, {
|
||||
type: l ? "pause" : "play"
|
||||
type: m ? "pause" : "play"
|
||||
})), /* @__PURE__ */ n.createElement("button", {
|
||||
className: S(i ? v.button : v.buttonDisabled),
|
||||
onClick: () => u()
|
||||
className: S(i ? b.button : b.buttonDisabled),
|
||||
onClick: () => d()
|
||||
}, /* @__PURE__ */ n.createElement(B, {
|
||||
type: "refresh"
|
||||
}))), a && /* @__PURE__ */ n.createElement("div", {
|
||||
className: v.error
|
||||
}, a.message)), /* @__PURE__ */ n.createElement("div", {
|
||||
className: v.body
|
||||
}, w && /* @__PURE__ */ n.createElement(se, {
|
||||
value: c,
|
||||
onChange: f,
|
||||
onViewChanged: H
|
||||
}))), c && /* @__PURE__ */ n.createElement("div", {
|
||||
className: b.error
|
||||
}, c.message)), /* @__PURE__ */ n.createElement("div", {
|
||||
className: b.body
|
||||
}, H && /* @__PURE__ */ n.createElement(ce, {
|
||||
value: s,
|
||||
onChange: u,
|
||||
onViewChanged: P
|
||||
})));
|
||||
}
|
||||
function Re(e) {
|
||||
return z(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), C((t) => window.postMessage(t, "*"), []);
|
||||
function Pe(e) {
|
||||
return R(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), N((t) => window.postMessage(t, "*"), []);
|
||||
}
|
||||
const Pe = (e) => I(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
|
||||
const ze = (e) => I(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
|
||||
export {
|
||||
se as CodeMirror,
|
||||
xe as MiniRepl,
|
||||
ce as CodeMirror,
|
||||
Re as MiniRepl,
|
||||
S as cx,
|
||||
oe as flash,
|
||||
ce as useHighlighting,
|
||||
Pe as useKeydown,
|
||||
Re as usePostMessage,
|
||||
pe as useStrudel
|
||||
ne as flash,
|
||||
ie as useHighlighting,
|
||||
ze as useKeydown,
|
||||
Pe as usePostMessage,
|
||||
he as useStrudel
|
||||
};
|
||||
|
||||
@ -9,6 +9,7 @@ function useStrudel({
|
||||
evalOnMount = false,
|
||||
initialCode = '',
|
||||
autolink = false,
|
||||
beforeEval,
|
||||
afterEval,
|
||||
onEvalError,
|
||||
}) {
|
||||
@ -36,6 +37,7 @@ function useStrudel({
|
||||
transpiler,
|
||||
beforeEval: ({ code }) => {
|
||||
setCode(code);
|
||||
beforeEval?.();
|
||||
},
|
||||
afterEval: ({ pattern: _pattern, code }) => {
|
||||
setActiveCode(code);
|
||||
|
||||
@ -47,4 +47,4 @@ currently broken / buggy:
|
||||
- [ ] find a way to display errors when console is closed / another tab selected
|
||||
- [x] scheduler.getPhase is quantized to clock interval
|
||||
- => draw was choppy + that also caused useHighlighting bugs
|
||||
- [ ] pianoroll keeps rolling when pressing stop
|
||||
- [ ] pianoroll keeps rolling when pressing stop
|
||||
|
||||
@ -114,6 +114,10 @@ function App() {
|
||||
defaultOutput: webaudioOutput,
|
||||
getTime,
|
||||
autolink: true,
|
||||
beforeEval: () => {
|
||||
cleanupUi();
|
||||
cleanupDraw();
|
||||
},
|
||||
});
|
||||
|
||||
// init code
|
||||
@ -175,7 +179,6 @@ function App() {
|
||||
} else {
|
||||
logger('[repl] stopped. tip: you can also stop by pressing ctrl+dot', 'highlight');
|
||||
stop();
|
||||
// cleanupDraw();
|
||||
}
|
||||
};
|
||||
const handleUpdate = () => {
|
||||
@ -186,9 +189,6 @@ function App() {
|
||||
const handleShuffle = async () => {
|
||||
const { code, name } = getRandomTune();
|
||||
logger(`[repl] ✨ loading random tune "${name}"`);
|
||||
|
||||
cleanupDraw();
|
||||
cleanupUi();
|
||||
resetLoadedSamples();
|
||||
await prebake(); // declare default samples
|
||||
await evaluate(code, false);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user