From b49b1c98aed05f0e408320e2e78fa96a5102cebe Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 2 Nov 2023 17:14:59 +0100 Subject: [PATCH] make play and update buttons work --- packages/codemirror/codemirror.mjs | 23 +++++++++++++++++------ packages/core/repl.mjs | 9 +++++++-- website/src/repl/Repl.jsx | 7 ++++--- website/src/repl/vanillarepl.mjs | 5 +---- website/src/repl/webrepl.mjs | 3 ++- 5 files changed, 31 insertions(+), 16 deletions(-) diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs index 6c89a2053..d05c61a32 100644 --- a/packages/codemirror/codemirror.mjs +++ b/packages/codemirror/codemirror.mjs @@ -59,7 +59,7 @@ export class StrudelMirror { if (!onDraw) { return; } - const { scheduler, evaluate } = await this.repl; + const { scheduler, evaluate } = this.repl; // draw first frame instantly prebaked.then(async () => { await evaluate(this.code, false); @@ -70,9 +70,9 @@ export class StrudelMirror { this.repl = repl({ ...replOptions, - onToggle: async (started) => { + onToggle: (started) => { replOptions?.onToggle?.(started); - const { scheduler } = await this.repl; + const { scheduler } = this.repl; if (started) { this.drawer.start(scheduler); } else { @@ -93,21 +93,32 @@ export class StrudelMirror { theme, initialCode, onChange: (v) => { - this.code = v.state.doc.toString(); + if (v.docChanged) { + this.code = v.state.doc.toString(); + this.repl.setCode(this.code); + } }, onEvaluate: () => this.evaluate(), onStop: () => this.stop(), }); } async evaluate() { - const { evaluate } = await this.repl; + const { evaluate } = this.repl; this.flash(); await evaluate(this.code); } async stop() { - const { scheduler } = await this.repl; + const { scheduler } = this.repl; scheduler.stop(); } + async toggle() { + const { scheduler } = this.repl; + if (scheduler.started) { + scheduler.stop(); + } else { + this.evaluate(); + } + } flash(ms) { flash(this.editor, ms); } diff --git a/packages/core/repl.mjs b/packages/core/repl.mjs index b11cb5933..0c25874ae 100644 --- a/packages/core/repl.mjs +++ b/packages/core/repl.mjs @@ -4,7 +4,7 @@ import { logger } from './logger.mjs'; import { setTime } from './time.mjs'; import { evalScope } from './evaluate.mjs'; import { register } from './pattern.mjs'; -import { atom } from 'nanostores'; +import { atom, computed } from 'nanostores'; export const $replstate = atom({ schedulerError: undefined, @@ -15,7 +15,10 @@ export const $replstate = atom({ miniLocations: [], widgets: [], pending: true, + started: false, }); +export const $repldirty = computed($replstate, (s) => s.code !== s.activeCode); + export const setReplState = (key, value) => $replstate.set({ ...$replstate.get(), [key]: value }); export function repl({ @@ -81,6 +84,7 @@ export function repl({ const stop = () => scheduler.stop(); const start = () => scheduler.start(); const pause = () => scheduler.pause(); + const toggle = () => scheduler.toggle(); const setCps = (cps) => scheduler.setCps(cps); const setCpm = (cpm) => scheduler.setCps(cpm / 60); @@ -114,7 +118,8 @@ export function repl({ setcpm: setCpm, }); - return { scheduler, evaluate, start, stop, pause, setCps, setPattern }; + const setCode = (c) => setReplState('code', c); + return { scheduler, evaluate, start, stop, pause, setCps, setPattern, setCode, toggle }; } export const getTrigger = diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx index a4a70319d..f2aec277e 100644 --- a/website/src/repl/Repl.jsx +++ b/website/src/repl/Repl.jsx @@ -5,7 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th */ import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; -import { getDrawContext, logger, $replstate } from '@strudel.cycles/core'; +import { getDrawContext, logger, $replstate, $repldirty } from '@strudel.cycles/core'; import { cx } from '@strudel.cycles/react'; import { getAudioContext } from '@strudel.cycles/webaudio'; import { writeText } from '@tauri-apps/api/clipboard'; @@ -34,13 +34,13 @@ export function Repl({ embedded = false }) { const [lastShared, setLastShared] = useState(); const { panelPosition, isZen } = useSettings(); const replState = useStore($replstate); + const isDirty = useStore($repldirty); // // UI Actions // const handleTogglePlay = async () => { - console.log('toggle.'); window.postMessage('strudel-toggle-play'); /* await getAudioContext().resume(); // fixes no sound in ios webkit if (!started) { @@ -97,12 +97,13 @@ export function Repl({ embedded = false }) { const pending = false; const error = undefined; const { started, activeCode } = replState; + const context = { // scheduler, embedded, started, pending, - isDirty: false, + isDirty, lastShared, activeCode, // handleChangeCode: codemirror.handleChangeCode, diff --git a/website/src/repl/vanillarepl.mjs b/website/src/repl/vanillarepl.mjs index b73f24d4a..42c5ebc08 100644 --- a/website/src/repl/vanillarepl.mjs +++ b/website/src/repl/vanillarepl.mjs @@ -138,10 +138,7 @@ const drawTime = [-2, 2]; */ } }); - onEvent('strudel-toggle-play', () => { - console.log('toggle-play'); - editor.evaluate(); - }); + onEvent('strudel-toggle-play', () => editor.toggle()); // const isEmbedded = embedded || window.location !== window.parent.location; } diff --git a/website/src/repl/webrepl.mjs b/website/src/repl/webrepl.mjs index 00f1d92a6..af5b6ff44 100644 --- a/website/src/repl/webrepl.mjs +++ b/website/src/repl/webrepl.mjs @@ -1,4 +1,4 @@ -import { cleanupDraw, cleanupUi, repl, getDrawContext, silence } from '@strudel.cycles/core'; +/* import { cleanupDraw, cleanupUi, repl, getDrawContext, silence } from '@strudel.cycles/core'; import { webaudioOutput, getAudioContext } from '@strudel.cycles/webaudio'; import { transpiler } from '@strudel.cycles/transpiler'; import { prebake } from './prebake.mjs'; @@ -75,3 +75,4 @@ export function webrepl({ beforeEval, onEvalError, afterEval, editPattern } = {} }); return instance; } + */ \ No newline at end of file