mirror/strudel
1
0
Fork 0
mirror of https://codeberg.org/uzu/strudel synced 2026-07-21 20:55:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

repl: hard stop

Browse Source
This commit is contained in:
Felix Roos
2022-06-06 19:10:23 +02:00
parent 1a9b57e66c
commit a93d6e884d
7 changed files with 68 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/dist/index.cjs.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
packages/react/dist/index.es.js
Vendored
+25 -4
View File
@@ -256,8 +256,13 @@ function useCycle(props) {
await Tone.start();
Tone.getTransport().start('+0.1');
};
const stop = () => {
Tone.getTransport().pause();
const stop = (setZero = false) => {
if (setZero) {
Tone.getTransport().cancel();
Tone.getTransport().stop();
} else {
Tone.getTransport().pause();
}
setStarted(false);
};
const toggle = () => (started ? stop() : start());
@@ -423,12 +428,17 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
}
};
const stop = () => {
cycle.stop(true);
setActiveCode(undefined);
};
const evaluateOnly = () => {
activateCode(code, true);
};
useEffect(() => {
return () => cycle.stop();
return () => stop();
}, []);
return {
@@ -442,6 +452,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
dirty,
log,
togglePlay,
stop,
setActiveCode,
activateCode,
evaluateOnly,
@@ -543,12 +554,17 @@ function Icon({ type }) {
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__ */ React.createElement("path", {
fillRule: "evenodd",
d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z",
clipRule: "evenodd"
})
}[type]);
}
function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, init }) {
const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay } = useRepl({
const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } = useRepl({
tune,
defaultSynth,
autolink: false
@@ -585,6 +601,11 @@ function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, init })
onClick: () => activateCode()
}, /* @__PURE__ */ React.createElement(Icon, {
type: "refresh"
})), /* @__PURE__ */ React.createElement("button", {
className: cx(styles.button),
onClick: () => stop(true)
}, /* @__PURE__ */ React.createElement(Icon, {
type: "stop"
}))), error && /* @__PURE__ */ React.createElement("div", {
className: styles.error
}, error.message)), /* @__PURE__ */ React.createElement("div", {
packages/react/src/components/Icon.tsx
+7
View File
@@ -26,6 +26,13 @@ export function Icon({ type }) {
clipRule="evenodd"
/>
),
stop: (
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z"
clipRule="evenodd"
/>
),
}[type]
}
</svg>
packages/react/src/components/MiniRepl.jsx
+9 -5
View File
@@ -10,11 +10,12 @@ import styles from './MiniRepl.module.css';
import { Icon } from './Icon';
export function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, init }) {
const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay } = useRepl({
tune,
defaultSynth,
autolink: false,
});
const { code, setCode, pattern, activeCode, activateCode, evaluateOnly, error, cycle, dirty, togglePlay, stop } =
useRepl({
tune,
defaultSynth,
autolink: false,
});
useEffect(() => {
init && evaluateOnly();
}, [tune, init]);
@@ -40,6 +41,9 @@ export function MiniRepl({ tune, defaultSynth, hideOutsideView = false, theme, i
<button className={cx(dirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
<Icon type="refresh" />
</button>
<button className={cx(styles.button)} onClick={() => stop(true)}>
<Icon type="stop" />
</button>
</div>
{error && <div className={styles.error}>{error.message}</div>}
</div>
packages/react/src/hooks/useCycle.mjs
+7 -2
View File
@@ -66,8 +66,13 @@ function useCycle(props) {
await Tone.start();
Tone.getTransport().start('+0.1');
};
const stop = () => {
Tone.getTransport().pause();
const stop = (setZero = false) => {
if (setZero) {
Tone.getTransport().cancel();
Tone.getTransport().stop();
} else {
Tone.getTransport().pause();
}
setStarted(false);
};
const toggle = () => (started ? stop() : start());
packages/react/src/hooks/useRepl.mjs
+7 -1
View File
@@ -142,12 +142,17 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
}
};
const stop = () => {
cycle.stop(true);
setActiveCode(undefined);
};
const evaluateOnly = () => {
activateCode(code, true);
};
useEffect(() => {
return () => cycle.stop();
return () => stop();
}, []);
return {
@@ -161,6 +166,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
dirty,
log,
togglePlay,
stop,
setActiveCode,
activateCode,
evaluateOnly,
packages/tone/pianoroll.mjs
+11 -12
View File
@@ -51,9 +51,6 @@ Pattern.prototype.pianoroll = function ({
let foldValues = [];
flipTime && timeRange.reverse();
flipValues && valueRange.reverse();
// duration to px (on timeAxis)
const playheadPosition = scale(-from / timeExtent, ...timeRange);
this.draw(
(ctx, events, t) => {
ctx.fillStyle = background;
@@ -66,15 +63,6 @@ Pattern.prototype.pianoroll = function ({
ctx.fillStyle = event.context?.color || inactive;
ctx.strokeStyle = event.context?.color || active;
ctx.globalAlpha = event.context.velocity ?? 1;
ctx.beginPath();
if (vertical) {
ctx.moveTo(0, playheadPosition);
ctx.lineTo(valueAxis, playheadPosition);
} else {
ctx.moveTo(playheadPosition, 0);
ctx.lineTo(playheadPosition, valueAxis);
}
ctx.stroke();
const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
@@ -104,6 +92,17 @@ Pattern.prototype.pianoroll = function ({
}
isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
});
const playheadPosition = scale(-from / timeExtent, ...timeRange);
// draw playhead
ctx.beginPath();
if (vertical) {
ctx.moveTo(0, playheadPosition);
ctx.lineTo(valueAxis, playheadPosition);
} else {
ctx.moveTo(playheadPosition, 0);
ctx.lineTo(playheadPosition, valueAxis);
}
ctx.stroke();
},
{
from: from - overscan,