mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 21:58:37 +00:00
fix: another dependency array
This commit is contained in:
Felix Roos
parent
88684d6d9e
commit
2732d64beb
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
413
packages/react/dist/index.es.js
vendored
413
packages/react/dist/index.es.js
vendored
@ -1,9 +1,9 @@
|
||||
import d, { useCallback as w, useRef as N, useEffect as k, useMemo as G, useState as M, useLayoutEffect as T } from "react";
|
||||
import l, { useCallback as y, useRef as N, useEffect as k, useMemo as J, useState as M, useLayoutEffect as te } from "react";
|
||||
import le from "@uiw/react-codemirror";
|
||||
import { Decoration as A, EditorView as ee } from "@codemirror/view";
|
||||
import { StateEffect as te, StateField as re } from "@codemirror/state";
|
||||
import { Decoration as A, EditorView as re } from "@codemirror/view";
|
||||
import { StateEffect as ne, StateField as oe } from "@codemirror/state";
|
||||
import { javascript as ue } from "@codemirror/lang-javascript";
|
||||
import { tags as u } from "@lezer/highlight";
|
||||
import { tags as i } from "@lezer/highlight";
|
||||
import { createTheme as de } from "@uiw/codemirror-themes";
|
||||
import { webaudioOutput as fe, getAudioContext as me } from "@strudel.cycles/webaudio";
|
||||
import { useInView as he } from "react-hook-inview";
|
||||
@ -22,34 +22,34 @@ const be = de({
|
||||
gutterForeground: "#8a919966"
|
||||
},
|
||||
styles: [
|
||||
{ tag: u.keyword, color: "#c792ea" },
|
||||
{ tag: u.operator, color: "#89ddff" },
|
||||
{ tag: u.special(u.variableName), color: "#eeffff" },
|
||||
{ tag: u.typeName, color: "#c3e88d" },
|
||||
{ tag: u.atom, color: "#f78c6c" },
|
||||
{ tag: u.number, color: "#c3e88d" },
|
||||
{ tag: u.definition(u.variableName), color: "#82aaff" },
|
||||
{ tag: u.string, color: "#c3e88d" },
|
||||
{ tag: u.special(u.string), color: "#c3e88d" },
|
||||
{ tag: u.comment, color: "#7d8799" },
|
||||
{ tag: u.variableName, color: "#c792ea" },
|
||||
{ tag: u.tagName, color: "#c3e88d" },
|
||||
{ tag: u.bracket, color: "#525154" },
|
||||
{ tag: u.meta, color: "#ffcb6b" },
|
||||
{ tag: u.attributeName, color: "#c792ea" },
|
||||
{ tag: u.propertyName, color: "#c792ea" },
|
||||
{ tag: u.className, color: "#decb6b" },
|
||||
{ tag: u.invalid, color: "#ffffff" }
|
||||
{ tag: i.keyword, color: "#c792ea" },
|
||||
{ tag: i.operator, color: "#89ddff" },
|
||||
{ tag: i.special(i.variableName), color: "#eeffff" },
|
||||
{ tag: i.typeName, color: "#c3e88d" },
|
||||
{ tag: i.atom, color: "#f78c6c" },
|
||||
{ tag: i.number, color: "#c3e88d" },
|
||||
{ tag: i.definition(i.variableName), color: "#82aaff" },
|
||||
{ tag: i.string, color: "#c3e88d" },
|
||||
{ tag: i.special(i.string), color: "#c3e88d" },
|
||||
{ tag: i.comment, color: "#7d8799" },
|
||||
{ tag: i.variableName, color: "#c792ea" },
|
||||
{ tag: i.tagName, color: "#c3e88d" },
|
||||
{ tag: i.bracket, color: "#525154" },
|
||||
{ tag: i.meta, color: "#ffcb6b" },
|
||||
{ tag: i.attributeName, color: "#c792ea" },
|
||||
{ tag: i.propertyName, color: "#c792ea" },
|
||||
{ tag: i.className, color: "#decb6b" },
|
||||
{ tag: i.invalid, color: "#ffffff" }
|
||||
]
|
||||
});
|
||||
const J = te.define(), Ee = re.define({
|
||||
const Q = ne.define(), Ee = oe.define({
|
||||
create() {
|
||||
return A.none;
|
||||
},
|
||||
update(e, r) {
|
||||
try {
|
||||
for (let t of r.effects)
|
||||
if (t.is(J))
|
||||
if (t.is(Q))
|
||||
if (t.value) {
|
||||
const n = A.mark({ attributes: { style: "background-color: #FFCA2880" } });
|
||||
e = A.set([n.range(0, r.newDoc.length)]);
|
||||
@ -60,25 +60,25 @@ const J = te.define(), Ee = re.define({
|
||||
return console.warn("flash error", t), e;
|
||||
}
|
||||
},
|
||||
provide: (e) => ee.decorations.from(e)
|
||||
provide: (e) => re.decorations.from(e)
|
||||
}), ye = (e) => {
|
||||
e.dispatch({ effects: J.of(!0) }), setTimeout(() => {
|
||||
e.dispatch({ effects: J.of(!1) });
|
||||
e.dispatch({ effects: Q.of(!0) }), setTimeout(() => {
|
||||
e.dispatch({ effects: Q.of(!1) });
|
||||
}, 200);
|
||||
}, B = te.define(), we = re.define({
|
||||
}, I = ne.define(), we = oe.define({
|
||||
create() {
|
||||
return A.none;
|
||||
},
|
||||
update(e, r) {
|
||||
try {
|
||||
for (let t of r.effects)
|
||||
if (t.is(B)) {
|
||||
if (t.is(I)) {
|
||||
const n = t.value.map(
|
||||
(c) => (c.context.locations || []).map(({ start: m, end: s }) => {
|
||||
const a = c.context.color || "#FFCA28";
|
||||
let i = r.newDoc.line(m.line).from + m.column, g = r.newDoc.line(s.line).from + s.column;
|
||||
(s) => (s.context.locations || []).map(({ start: m, end: u }) => {
|
||||
const o = s.context.color || "#FFCA28";
|
||||
let c = r.newDoc.line(m.line).from + m.column, g = r.newDoc.line(u.line).from + u.column;
|
||||
const b = r.newDoc.length;
|
||||
return i > b || g > b ? void 0 : A.mark({ attributes: { style: `outline: 1.5px solid ${a};` } }).range(i, g);
|
||||
return c > b || g > b ? void 0 : A.mark({ attributes: { style: `outline: 1.5px solid ${o};` } }).range(c, g);
|
||||
})
|
||||
).flat().filter(Boolean) || [];
|
||||
e = A.set(n, !0);
|
||||
@ -88,236 +88,236 @@ const J = te.define(), Ee = re.define({
|
||||
return A.set([]);
|
||||
}
|
||||
},
|
||||
provide: (e) => ee.decorations.from(e)
|
||||
provide: (e) => re.decorations.from(e)
|
||||
}), ke = [ue(), be, we, Ee];
|
||||
function Fe({ value: e, onChange: r, onViewChanged: t, onSelectionChange: n, options: c, editorDidMount: m }) {
|
||||
const s = w(
|
||||
function Fe({ value: e, onChange: r, onViewChanged: t, onSelectionChange: n, options: s, editorDidMount: m }) {
|
||||
const u = y(
|
||||
(g) => {
|
||||
r?.(g);
|
||||
},
|
||||
[r]
|
||||
), a = w(
|
||||
), o = y(
|
||||
(g) => {
|
||||
t?.(g);
|
||||
},
|
||||
[t]
|
||||
), i = w(
|
||||
), c = y(
|
||||
(g) => {
|
||||
g.selectionSet && n && n?.(g.state.selection);
|
||||
},
|
||||
[n]
|
||||
);
|
||||
return /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement(le, {
|
||||
return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(le, {
|
||||
value: e,
|
||||
onChange: s,
|
||||
onCreateEditor: a,
|
||||
onUpdate: i,
|
||||
onChange: u,
|
||||
onCreateEditor: o,
|
||||
onUpdate: c,
|
||||
extensions: ke
|
||||
}));
|
||||
}
|
||||
function Y(...e) {
|
||||
function T(...e) {
|
||||
return e.filter(Boolean).join(" ");
|
||||
}
|
||||
function _e({ view: e, pattern: r, active: t, getTime: n }) {
|
||||
const c = N([]), m = N(0);
|
||||
const s = N([]), m = N(0);
|
||||
k(() => {
|
||||
if (e)
|
||||
if (r && t) {
|
||||
m.current = 0;
|
||||
let s = requestAnimationFrame(function a() {
|
||||
let u = requestAnimationFrame(function o() {
|
||||
try {
|
||||
const i = n(), b = [Math.max(m.current ?? i, i - 1 / 10, -0.01), i + 1 / 60];
|
||||
m.current = b[1], c.current = c.current.filter((h) => h.whole.end > i);
|
||||
const l = r.queryArc(...b).filter((h) => h.hasOnset());
|
||||
c.current = c.current.concat(l), e.dispatch({ effects: B.of(c.current) });
|
||||
const c = n(), b = [Math.max(m.current ?? c, c - 1 / 10, -0.01), c + 1 / 60];
|
||||
m.current = b[1], s.current = s.current.filter((h) => h.whole.end > c);
|
||||
const a = r.queryArc(...b).filter((h) => h.hasOnset());
|
||||
s.current = s.current.concat(a), e.dispatch({ effects: I.of(s.current) });
|
||||
} catch {
|
||||
e.dispatch({ effects: B.of([]) });
|
||||
e.dispatch({ effects: I.of([]) });
|
||||
}
|
||||
s = requestAnimationFrame(a);
|
||||
u = requestAnimationFrame(o);
|
||||
});
|
||||
return () => {
|
||||
cancelAnimationFrame(s);
|
||||
cancelAnimationFrame(u);
|
||||
};
|
||||
} else
|
||||
c.current = [], e.dispatch({ effects: B.of([]) });
|
||||
s.current = [], e.dispatch({ effects: I.of([]) });
|
||||
}, [r, t, e]);
|
||||
}
|
||||
function Me(e, r = !1) {
|
||||
const t = N(), n = N(), c = (a) => {
|
||||
const t = N(), n = N(), s = (o) => {
|
||||
if (n.current !== void 0) {
|
||||
const i = a - n.current;
|
||||
e(a, i);
|
||||
const c = o - n.current;
|
||||
e(o, c);
|
||||
}
|
||||
n.current = a, t.current = requestAnimationFrame(c);
|
||||
n.current = o, t.current = requestAnimationFrame(s);
|
||||
}, m = () => {
|
||||
t.current = requestAnimationFrame(c);
|
||||
}, s = () => {
|
||||
t.current = requestAnimationFrame(s);
|
||||
}, u = () => {
|
||||
t.current && cancelAnimationFrame(t.current), delete t.current;
|
||||
};
|
||||
return k(() => {
|
||||
t.current && (s(), m());
|
||||
}, [e]), k(() => (r && m(), s), []), {
|
||||
t.current && (u(), m());
|
||||
}, [e]), k(() => (r && m(), u), []), {
|
||||
start: m,
|
||||
stop: s
|
||||
stop: u
|
||||
};
|
||||
}
|
||||
function Ae({ pattern: e, started: r, getTime: t, onDraw: n, drawTime: c = [-2, 2] }) {
|
||||
let [m, s] = c;
|
||||
function Ae({ pattern: e, started: r, getTime: t, onDraw: n, drawTime: s = [-2, 2] }) {
|
||||
let [m, u] = s;
|
||||
m = Math.abs(m);
|
||||
let a = N([]), i = N(null);
|
||||
let o = N([]), c = N(null);
|
||||
k(() => {
|
||||
if (e) {
|
||||
const l = t(), h = e.queryArc(Math.max(l, 0), l + s + 0.1);
|
||||
a.current = a.current.filter((v) => v.whole.begin < l), a.current = a.current.concat(h);
|
||||
const a = t(), h = e.queryArc(Math.max(a, 0), a + u + 0.1);
|
||||
o.current = o.current.filter((v) => v.whole.begin < a), o.current = o.current.concat(h);
|
||||
}
|
||||
}, [e]);
|
||||
const { start: g, stop: b } = Me(
|
||||
w(() => {
|
||||
const l = t() + s;
|
||||
if (i.current === null) {
|
||||
i.current = l;
|
||||
y(() => {
|
||||
const a = t() + u;
|
||||
if (c.current === null) {
|
||||
c.current = a;
|
||||
return;
|
||||
}
|
||||
const h = e.queryArc(Math.max(i.current, l - 1 / 10), l);
|
||||
i.current = l, a.current = (a.current || []).filter((v) => v.whole.end >= l - m - s).concat(h.filter((v) => v.hasOnset())), n(e, l - s, a.current, c);
|
||||
const h = e.queryArc(Math.max(c.current, a - 1 / 10), a);
|
||||
c.current = a, o.current = (o.current || []).filter((v) => v.whole.end >= a - m - u).concat(h.filter((v) => v.hasOnset())), n(e, a - u, o.current, s);
|
||||
}, [e])
|
||||
);
|
||||
return k(() => {
|
||||
r ? g() : (a.current = [], b());
|
||||
r ? g() : (o.current = [], b());
|
||||
}, [r]), {
|
||||
clear: () => {
|
||||
a.current = [];
|
||||
o.current = [];
|
||||
}
|
||||
};
|
||||
}
|
||||
function Ne(e) {
|
||||
return k(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), w((r) => window.postMessage(r, "*"), []);
|
||||
return k(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), y((r) => window.postMessage(r, "*"), []);
|
||||
}
|
||||
function De({
|
||||
defaultOutput: e,
|
||||
interval: r,
|
||||
getTime: t,
|
||||
evalOnMount: n = !1,
|
||||
initialCode: c = "",
|
||||
initialCode: s = "",
|
||||
autolink: m = !1,
|
||||
beforeEval: s,
|
||||
editPattern: a,
|
||||
afterEval: i,
|
||||
beforeEval: u,
|
||||
afterEval: o,
|
||||
editPattern: c,
|
||||
onEvalError: g,
|
||||
onToggle: b,
|
||||
canvasId: l,
|
||||
canvasId: a,
|
||||
drawContext: h,
|
||||
drawTime: v = [-2, 2]
|
||||
}) {
|
||||
const F = G(() => Ce(), []);
|
||||
l = l || `canvas-${F}`;
|
||||
const [q, z] = M(), [R, H] = M(), [E, C] = M(c), [P, I] = M(), [D, S] = M(), [x, V] = M(!1), K = E !== P, { scheduler: o, evaluate: p, start: Q, stop: O, pause: ne } = G(
|
||||
const R = J(() => Ce(), []);
|
||||
a = a || `canvas-${R}`;
|
||||
const [L, x] = M(), [H, P] = M(), [E, S] = M(s), [V, q] = M(), [z, K] = M(), [D, O] = M(!1), j = E !== V, { scheduler: F, evaluate: C, start: d, stop: p, pause: X } = J(
|
||||
() => ge({
|
||||
interval: r,
|
||||
defaultOutput: e,
|
||||
onSchedulerError: z,
|
||||
onSchedulerError: x,
|
||||
onEvalError: (f) => {
|
||||
H(f), g?.(f);
|
||||
P(f), g?.(f);
|
||||
},
|
||||
getTime: t,
|
||||
drawContext: h,
|
||||
transpiler: ve,
|
||||
editPattern: a,
|
||||
editPattern: c,
|
||||
beforeEval: ({ code: f }) => {
|
||||
C(f), s?.();
|
||||
S(f), u?.();
|
||||
},
|
||||
afterEval: ({ pattern: f, code: y }) => {
|
||||
I(y), S(f), H(), z(), m && (window.location.hash = "#" + encodeURIComponent(btoa(y))), i?.();
|
||||
afterEval: ({ pattern: f, code: w }) => {
|
||||
q(w), K(f), P(), x(), m && (window.location.hash = "#" + encodeURIComponent(btoa(w))), o?.();
|
||||
},
|
||||
onToggle: (f) => {
|
||||
V(f), b?.(f);
|
||||
O(f), b?.(f);
|
||||
}
|
||||
}),
|
||||
[e, r, t]
|
||||
), oe = Ne(({ data: { from: f, type: y } }) => {
|
||||
y === "start" && f !== F && O();
|
||||
}), j = w(
|
||||
), U = Ne(({ data: { from: f, type: w } }) => {
|
||||
w === "start" && f !== R && p();
|
||||
}), Y = y(
|
||||
async (f = !0) => {
|
||||
const y = await p(E, f);
|
||||
return oe({ type: "start", from: F }), y;
|
||||
const w = await C(E, f);
|
||||
return U({ type: "start", from: R }), w;
|
||||
},
|
||||
[p, E]
|
||||
), L = w(
|
||||
(f, y, W, $) => {
|
||||
const { onPaint: se } = f.context || {}, ie = typeof h == "function" ? h(l) : h;
|
||||
se?.(ie, y, W, $);
|
||||
[C, E]
|
||||
), B = y(
|
||||
(f, w, $, G) => {
|
||||
const { onPaint: se } = f.context || {}, ie = typeof h == "function" ? h(a) : h;
|
||||
se?.(ie, w, $, G);
|
||||
},
|
||||
[h, l]
|
||||
), U = w(
|
||||
[h, a]
|
||||
), W = y(
|
||||
(f) => {
|
||||
if (h && L) {
|
||||
const [y, W] = v, $ = f.queryArc(0, W);
|
||||
L(f, -1e-3, $, v);
|
||||
if (h && B) {
|
||||
const [w, $] = v, G = f.queryArc(0, $);
|
||||
B(f, -1e-3, G, v);
|
||||
}
|
||||
},
|
||||
[v, L]
|
||||
), X = N();
|
||||
[h, v, B]
|
||||
), Z = N();
|
||||
k(() => {
|
||||
!X.current && h && L && n && E && (X.current = !0, p(E, !1).then((f) => U(f)));
|
||||
}, [j, n, E, U]), k(() => () => {
|
||||
o.stop();
|
||||
}, [o]);
|
||||
const ae = async () => {
|
||||
x ? (o.stop(), U(D)) : await j();
|
||||
}, ce = q || R;
|
||||
!Z.current && n && E && (Z.current = !0, C(E, !1).then((f) => W(f)));
|
||||
}, [n, E, C, W]), k(() => () => {
|
||||
F.stop();
|
||||
}, [F]);
|
||||
const ce = async () => {
|
||||
D ? (F.stop(), W(z)) : await Y();
|
||||
}, ae = L || H;
|
||||
return Ae({
|
||||
pattern: D,
|
||||
started: h && x,
|
||||
getTime: () => o.now(),
|
||||
pattern: z,
|
||||
started: h && D,
|
||||
getTime: () => F.now(),
|
||||
drawTime: v,
|
||||
onDraw: L
|
||||
onDraw: B
|
||||
}), {
|
||||
id: F,
|
||||
canvasId: l,
|
||||
id: R,
|
||||
canvasId: a,
|
||||
code: E,
|
||||
setCode: C,
|
||||
error: ce,
|
||||
schedulerError: q,
|
||||
scheduler: o,
|
||||
evalError: R,
|
||||
evaluate: p,
|
||||
activateCode: j,
|
||||
activeCode: P,
|
||||
isDirty: K,
|
||||
pattern: D,
|
||||
started: x,
|
||||
start: Q,
|
||||
stop: O,
|
||||
pause: ne,
|
||||
togglePlay: ae
|
||||
setCode: S,
|
||||
error: ae,
|
||||
schedulerError: L,
|
||||
scheduler: F,
|
||||
evalError: H,
|
||||
evaluate: C,
|
||||
activateCode: Y,
|
||||
activeCode: V,
|
||||
isDirty: j,
|
||||
pattern: z,
|
||||
started: D,
|
||||
start: d,
|
||||
stop: p,
|
||||
pause: X,
|
||||
togglePlay: ce
|
||||
};
|
||||
}
|
||||
function Ce() {
|
||||
return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
|
||||
}
|
||||
function Z({ type: e }) {
|
||||
return /* @__PURE__ */ d.createElement("svg", {
|
||||
function ee({ type: e }) {
|
||||
return /* @__PURE__ */ l.createElement("svg", {
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
className: "sc-h-5 sc-w-5",
|
||||
viewBox: "0 0 20 20",
|
||||
fill: "currentColor"
|
||||
}, {
|
||||
refresh: /* @__PURE__ */ d.createElement("path", {
|
||||
refresh: /* @__PURE__ */ l.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: /* @__PURE__ */ d.createElement("path", {
|
||||
play: /* @__PURE__ */ l.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: /* @__PURE__ */ d.createElement("path", {
|
||||
pause: /* @__PURE__ */ l.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"
|
||||
}),
|
||||
stop: /* @__PURE__ */ d.createElement("path", {
|
||||
stop: /* @__PURE__ */ l.createElement("path", {
|
||||
fillRule: "evenodd",
|
||||
d: "M2 10a8 8 0 1116 0 8 8 0 01-16 0zm5-2.25A.75.75 0 017.75 7h4.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-4.5z",
|
||||
clipRule: "evenodd"
|
||||
@ -333,90 +333,93 @@ const Re = "_container_3i85k_1", xe = "_header_3i85k_5", Le = "_buttons_3i85k_9"
|
||||
error: He,
|
||||
body: Pe
|
||||
}, Se = () => me().currentTime;
|
||||
function Ye({ tune: e, hideOutsideView: r = !1, enableKeyboard: t, drawTime: n, punchcard: c, canvasHeight: m = 200 }) {
|
||||
n = n || (c ? [0, 4] : void 0);
|
||||
const {
|
||||
code: s,
|
||||
setCode: a,
|
||||
evaluate: i,
|
||||
activateCode: g,
|
||||
error: b,
|
||||
isDirty: l,
|
||||
activeCode: h,
|
||||
pattern: v,
|
||||
started: F,
|
||||
scheduler: q,
|
||||
togglePlay: z,
|
||||
stop: R,
|
||||
canvasId: H,
|
||||
id: E
|
||||
function Ye({ tune: e, hideOutsideView: r = !1, enableKeyboard: t, drawTime: n, punchcard: s, canvasHeight: m = 200 }) {
|
||||
n = n || (s ? [0, 4] : void 0);
|
||||
const u = !!n, o = y(
|
||||
n ? (d) => document.querySelector("#" + d)?.getContext("2d") : null,
|
||||
[n]
|
||||
), {
|
||||
code: c,
|
||||
setCode: g,
|
||||
evaluate: b,
|
||||
activateCode: a,
|
||||
error: h,
|
||||
isDirty: v,
|
||||
activeCode: R,
|
||||
pattern: L,
|
||||
started: x,
|
||||
scheduler: H,
|
||||
togglePlay: P,
|
||||
stop: E,
|
||||
canvasId: S,
|
||||
id: V
|
||||
} = De({
|
||||
initialCode: e,
|
||||
defaultOutput: fe,
|
||||
editPattern: (o) => c ? o.punchcard() : o,
|
||||
editPattern: (d) => s ? d.punchcard() : d,
|
||||
getTime: Se,
|
||||
evalOnMount: !!n,
|
||||
drawContext: n ? (o) => document.querySelector("#" + o)?.getContext("2d") : null,
|
||||
evalOnMount: u,
|
||||
drawContext: o,
|
||||
drawTime: n
|
||||
}), [C, P] = M(), [I, D] = he({
|
||||
}), [q, z] = M(), [K, D] = he({
|
||||
threshold: 0.01
|
||||
}), S = N(), x = G(() => ((D || !r) && (S.current = !0), D || S.current), [D, r]);
|
||||
}), O = N(), j = J(() => ((D || !r) && (O.current = !0), D || O.current), [D, r]);
|
||||
_e({
|
||||
view: C,
|
||||
pattern: v,
|
||||
active: F && !h?.includes("strudel disable-highlighting"),
|
||||
getTime: () => q.now()
|
||||
}), T(() => {
|
||||
view: q,
|
||||
pattern: L,
|
||||
active: x && !R?.includes("strudel disable-highlighting"),
|
||||
getTime: () => H.now()
|
||||
}), te(() => {
|
||||
if (t) {
|
||||
const o = async (p) => {
|
||||
(p.ctrlKey || p.altKey) && (p.code === "Enter" ? (p.preventDefault(), ye(C), await g()) : p.code === "Period" && (R(), p.preventDefault()));
|
||||
const d = async (p) => {
|
||||
(p.ctrlKey || p.altKey) && (p.code === "Enter" ? (p.preventDefault(), ye(q), await a()) : p.code === "Period" && (E(), p.preventDefault()));
|
||||
};
|
||||
return window.addEventListener("keydown", o, !0), () => window.removeEventListener("keydown", o, !0);
|
||||
return window.addEventListener("keydown", d, !0), () => window.removeEventListener("keydown", d, !0);
|
||||
}
|
||||
}, [t, v, s, i, R, C]);
|
||||
const [V, K] = M([]);
|
||||
}, [t, L, c, b, E, q]);
|
||||
const [F, C] = M([]);
|
||||
return Ve(
|
||||
w((o) => {
|
||||
const { data: p } = o.detail;
|
||||
p?.hap?.context?.id === E && K((O) => O.concat([o.detail]).slice(-10));
|
||||
y((d) => {
|
||||
const { data: p } = d.detail;
|
||||
p?.hap?.context?.id === V && C((U) => U.concat([d.detail]).slice(-10));
|
||||
}, [])
|
||||
), /* @__PURE__ */ d.createElement("div", {
|
||||
), /* @__PURE__ */ l.createElement("div", {
|
||||
className: _.container,
|
||||
ref: I
|
||||
}, /* @__PURE__ */ d.createElement("div", {
|
||||
ref: K
|
||||
}, /* @__PURE__ */ l.createElement("div", {
|
||||
className: _.header
|
||||
}, /* @__PURE__ */ d.createElement("div", {
|
||||
}, /* @__PURE__ */ l.createElement("div", {
|
||||
className: _.buttons
|
||||
}, /* @__PURE__ */ d.createElement("button", {
|
||||
className: Y(_.button, F ? "sc-animate-pulse" : ""),
|
||||
onClick: () => z()
|
||||
}, /* @__PURE__ */ d.createElement(Z, {
|
||||
type: F ? "stop" : "play"
|
||||
})), /* @__PURE__ */ d.createElement("button", {
|
||||
className: Y(l ? _.button : _.buttonDisabled),
|
||||
onClick: () => g()
|
||||
}, /* @__PURE__ */ d.createElement(Z, {
|
||||
}, /* @__PURE__ */ l.createElement("button", {
|
||||
className: T(_.button, x ? "sc-animate-pulse" : ""),
|
||||
onClick: () => P()
|
||||
}, /* @__PURE__ */ l.createElement(ee, {
|
||||
type: x ? "stop" : "play"
|
||||
})), /* @__PURE__ */ l.createElement("button", {
|
||||
className: T(v ? _.button : _.buttonDisabled),
|
||||
onClick: () => a()
|
||||
}, /* @__PURE__ */ l.createElement(ee, {
|
||||
type: "refresh"
|
||||
}))), b && /* @__PURE__ */ d.createElement("div", {
|
||||
}))), h && /* @__PURE__ */ l.createElement("div", {
|
||||
className: _.error
|
||||
}, b.message)), /* @__PURE__ */ d.createElement("div", {
|
||||
}, h.message)), /* @__PURE__ */ l.createElement("div", {
|
||||
className: _.body
|
||||
}, x && /* @__PURE__ */ d.createElement(Fe, {
|
||||
value: s,
|
||||
onChange: a,
|
||||
onViewChanged: P
|
||||
})), n && /* @__PURE__ */ d.createElement("canvas", {
|
||||
id: H,
|
||||
}, j && /* @__PURE__ */ l.createElement(Fe, {
|
||||
value: c,
|
||||
onChange: g,
|
||||
onViewChanged: z
|
||||
})), n && /* @__PURE__ */ l.createElement("canvas", {
|
||||
id: S,
|
||||
className: "w-full pointer-events-none",
|
||||
height: m,
|
||||
ref: (o) => {
|
||||
o && o.width !== o.clientWidth && (o.width = o.clientWidth);
|
||||
ref: (d) => {
|
||||
d && d.width !== d.clientWidth && (d.width = d.clientWidth);
|
||||
}
|
||||
}), !!V.length && /* @__PURE__ */ d.createElement("div", {
|
||||
}), !!F.length && /* @__PURE__ */ l.createElement("div", {
|
||||
className: "sc-bg-gray-800 sc-rounded-md sc-p-2"
|
||||
}, V.map(({ message: o }, p) => /* @__PURE__ */ d.createElement("div", {
|
||||
}, F.map(({ message: d }, p) => /* @__PURE__ */ l.createElement("div", {
|
||||
key: p
|
||||
}, o))));
|
||||
}, d))));
|
||||
}
|
||||
function Ve(e) {
|
||||
Oe(pe.key, e);
|
||||
@ -426,11 +429,11 @@ function Oe(e, r, t = !1) {
|
||||
document.removeEventListener(e, r, t);
|
||||
}), [r]);
|
||||
}
|
||||
const Ze = (e) => T(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
|
||||
const Ze = (e) => te(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
|
||||
export {
|
||||
Fe as CodeMirror,
|
||||
Ye as MiniRepl,
|
||||
Y as cx,
|
||||
T as cx,
|
||||
ye as flash,
|
||||
_e as useHighlighting,
|
||||
Ze as useKeydown,
|
||||
|
||||
@ -15,6 +15,11 @@ const getTime = () => getAudioContext().currentTime;
|
||||
|
||||
export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTime, punchcard, canvasHeight = 200 }) {
|
||||
drawTime = drawTime || (punchcard ? [0, 4] : undefined);
|
||||
const evalOnMount = !!drawTime;
|
||||
const drawContext = useCallback(
|
||||
!!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
|
||||
[drawTime],
|
||||
);
|
||||
const {
|
||||
code,
|
||||
setCode,
|
||||
@ -35,8 +40,8 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
|
||||
defaultOutput: webaudioOutput,
|
||||
editPattern: (pat) => (punchcard ? pat.punchcard() : pat),
|
||||
getTime,
|
||||
evalOnMount: !!drawTime,
|
||||
drawContext: !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
|
||||
evalOnMount,
|
||||
drawContext,
|
||||
drawTime,
|
||||
});
|
||||
|
||||
|
||||
@ -100,7 +100,7 @@ function useStrudel({
|
||||
onDraw(pat, -0.001, haps, drawTime);
|
||||
}
|
||||
},
|
||||
[drawTime, onDraw],
|
||||
[drawContext, drawTime, onDraw],
|
||||
);
|
||||
|
||||
const inited = useRef();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user