handle shuffle

packages/codemirror/codemirror.mjs

@@ -5,7 +5,7 @@ import { javascript } from '@codemirror/lang-javascript';
 import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, EditorState } from '@codemirror/state';
 import { EditorView, highlightActiveLineGutter, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';
-import { Drawer, repl } from '@strudel.cycles/core';
+import { Drawer, repl, cleanupDraw } from '@strudel.cycles/core';
 import { isAutoCompletionEnabled } from './Autocomplete';
 import { flash, isFlashEnabled } from './flash.mjs';
 import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
@@ -116,10 +116,13 @@ export class StrudelMirror {
           this.drawer.start(this.repl.scheduler);
         } else {
           this.drawer.stop();
+          cleanupDraw(false);
         }
       },
       beforeEval: async () => {
+        cleanupDraw();
         await prebaked;
+        await replOptions?.beforeEval?.();
       },
       afterEval: (options) => {
         // remember for when highlighting is toggled on

website/src/repl/Repl.jsx

@@ -4,7 +4,7 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { cleanupDraw, cleanupUi, getDrawContext, logger } from '@strudel.cycles/core';
+import { cleanupDraw, cleanupUi, logger, getDrawContext } from '@strudel.cycles/core';
 import { CodeMirror, cx, flash, useHighlighting, useStrudel } from '@strudel.cycles/react';
 import { getAudioContext, initAudioOnFirstClick, webaudioOutput } from '@strudel.cycles/webaudio';
 import { createClient } from '@supabase/supabase-js';
@@ -36,12 +36,6 @@ const supabase = createClient(
 
 const init = prebake();
 
-let drawContext, clearCanvas;
-if (typeof window !== 'undefined') {
-  drawContext = getDrawContext();
-  clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
-}
-
 const getTime = () => getAudioContext().currentTime;
 
 async function initCode() {
@@ -133,7 +127,7 @@ export function Repl({ embedded = false }) {
           window.postMessage('strudel-start');
         }
       },
-      drawContext,
+      drawContext: getDrawContext(),
       // drawTime: [0, 6],
       paintOptions,
     });
@@ -199,7 +193,7 @@ export function Repl({ embedded = false }) {
   const handleShuffle = async () => {
     const { code, name } = getRandomTune();
     logger(`[repl] ✨ loading random tune "${name}"`);
-    clearCanvas();
+    cleanupDraw();
     await resetSounds();
     scheduler.setCps(1);
     await evaluate(code, false);

website/src/repl/Repl2.jsx

@@ -19,12 +19,7 @@ import Loader from './Loader';
 import './Repl.css';
 import { resetSounds } from './prebake.mjs';
 import { useStore } from '@nanostores/react';
-
-let clearCanvas;
-if (typeof window !== 'undefined') {
-  const drawContext = getDrawContext();
-  clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
-}
+import { getRandomTune } from './helpers.mjs';
 
 export const ReplContext = createContext(null);
 
@@ -57,12 +52,7 @@ export function Repl({ embedded = false }) {
   };
 
   const handleShuffle = async () => {
-    const { code, name } = getRandomTune();
-    logger(`[repl] ✨ loading random tune "${name}"`);
-    clearCanvas();
-    await resetSounds();
-    // scheduler.setCps(1);
-    await evaluate(code, false);
+    window.postMessage('strudel-shuffle');
   };
 
   const handleShare = async () => {

website/src/repl/helpers.mjs

@@ -1,3 +1,5 @@
+import * as tunes from './tunes.mjs';
+
 export function unicodeToBase64(text) {
   const utf8Bytes = new TextEncoder().encode(text);
   const base64String = btoa(String.fromCharCode(...utf8Bytes));
@@ -23,3 +25,10 @@ export function hash2code(hash) {
   return base64ToUnicode(decodeURIComponent(hash));
   //return atob(decodeURIComponent(codeParam || ''));
 }
+
+export function getRandomTune() {
+  const allTunes = Object.entries(tunes);
+  const randomItem = (arr) => arr[Math.floor(Math.random() * arr.length)];
+  const [name, code] = randomItem(allTunes);
+  return { name, code };
+}

website/src/repl/vanillarepl.mjs

@@ -1,12 +1,13 @@
+import { logger, cleanupDraw } from '@strudel.cycles/core';
 import { StrudelMirror } from '@strudel/codemirror';
 import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
 import { transpiler } from '@strudel.cycles/transpiler';
-import { prebake } from './prebake.mjs';
+import { prebake, resetSounds } from './prebake.mjs';
 import { settingsMap } from '@src/settings.mjs';
 import { setLatestCode } from '../settings.mjs';
 import { hash2code, code2hash } from './helpers.mjs';
 import { createClient } from '@supabase/supabase-js';
-import * as tunes from './tunes.mjs';
+import { getRandomTune } from './helpers.mjs';
 
 const supabase = createClient(
   'https://pidxdsxphlhzjnzmifth.supabase.co',
@@ -51,12 +52,6 @@ async function run() {
     return;
   }
 
-  /* let clearCanvas;
-if (typeof window !== 'undefined') {
-  const drawContext = getDrawContext();
-  clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
-} */
-
   // Create a single supabase client for interacting with your database
 
   const settings = settingsMap.get();
@@ -103,6 +98,15 @@ const drawTime = [-2, 2]; */
   settingsMap.listen((settings, key) => editor.changeSetting(key, settings[key]));
 
   onEvent('strudel-toggle-play', () => editor.toggle());
+  onEvent('strudel-shuffle', async () => {
+    const { code, name } = getRandomTune();
+    logger(`[repl] ✨ loading random tune "${name}"`);
+    console.log(code);
+    editor.setCode(code);
+    await resetSounds();
+    editor.repl.setCps(1);
+    editor.repl.evaluate(code, false);
+  });
 
   // const isEmbedded = embedded || window.location !== window.parent.location;
 }
@@ -124,10 +128,3 @@ function onEvent(key, callback) {
   window.addEventListener('message', listener);
   return () => window.removeEventListener('message', listener);
 }
-
-function getRandomTune() {
-  const allTunes = Object.entries(tunes);
-  const randomItem = (arr) => arr[Math.floor(Math.random() * arr.length)];
-  const [name, code] = randomItem(allTunes);
-  return { name, code };
-}