localize draw logic

website/src/docs/MiniRepl.jsx

@@ -22,7 +22,7 @@ if (typeof window !== 'undefined') {
   prebake();
 }
 
-export function MiniRepl({ tune, withCanvas }) {
+export function MiniRepl({ tune, drawTime }) {
   const [Repl, setRepl] = useState();
   useEffect(() => {
     // we have to load this package on the client
@@ -31,5 +31,5 @@ export function MiniRepl({ tune, withCanvas }) {
       setRepl(() => res.MiniRepl);
     });
   }, []);
-  return Repl ? <Repl tune={tune} hideOutsideView={true} withCanvas={withCanvas} /> : <pre>{tune}</pre>;
+  return Repl ? <Repl tune={tune} hideOutsideView={true} drawTime={drawTime} /> : <pre>{tune}</pre>;
 }

website/src/pages/learn/getting-started.mdx

@@ -28,7 +28,7 @@ Strudel however runs directly in your web browser, does not require any custom s
 The main place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/) ([what is a REPL?](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop)), but in these pages you will also encounter interactive "MiniREPLs" where you can listen to and edit Strudel patterns.
 Try clicking the play icon below:
 
-<MiniRepl client:idle tune={`s("bd sd")`} />
+<MiniRepl client:idle tune={`s("bd sd").noteroll()`} drawTime={[0, 2]} />
 
 Then edit the text so it reads `s("bd sd cp hh")` and click the refresh icon.
 Congratulations, you have now live coded your first Strudel pattern!

website/src/pages/learn/mini-notation.mdx

@@ -51,12 +51,12 @@ If you do just want to get a regular string that is _not_ parsed as mini-notatio
 
 We can play more notes by separating them with spaces:
 
-<MiniRepl client:idle tune={`note("e5 b4 d5 c5")`} withCanvas />
+<MiniRepl client:idle tune={`note("c e g").noteroll()`} drawTime={[0, 4]} />
 
 Here, those four notes are squashed into one cycle, so each note is a quarter second long.
 Try adding or removing notes and notice how the tempo changes!
 
-<MiniRepl client:idle tune={`note("e5 b4 d5 c5 e5 b4 d5 c5")`} withCanvas />
+<MiniRepl client:idle tune={`note("c d e f g a b").noteroll()`} drawTime={[0, 4]} />
 
 Note that the overall duration of time does not change, and instead each note length descreases.
 This is a key idea, as it illustrates the 'Cycle' in TidalCycles!

website/src/pages/technical-manual/docs.mdx

@@ -29,7 +29,11 @@ add a mini repl with
 
 - `client:idle` is required to tell astro that the repl should be interactive, see [Client Directive](https://docs.astro.build/en/reference/directives-reference/#client-directives)
 - `tune`: be any valid pattern code
-- `withCanvas`: If set, a canvas will be rendered below that shows a pianoroll (WIP)
+- `drawTime`: time window for drawing. Use together with `.noteroll()`. Example:
+
+```jsx
+<MiniRepl client:idle tune={`note("a3 c#4 e4 a4").noteroll()`} drawTime={[0, 2]} />
+```
 
 ## In-Source Documentation
 

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, controls, evalScope, logger } from '@strudel.cycles/core';
+import { cleanupDraw, cleanupUi, controls, evalScope, getDrawContext, logger } from '@strudel.cycles/core';
 import { CodeMirror, cx, flash, useHighlighting, useStrudel } from '@strudel.cycles/react';
 import {
   getAudioContext,
@@ -54,6 +54,11 @@ evalScope(
 export let loadedSamples = [];
 const presets = prebake();
 
+let drawContext;
+if (typeof window !== 'undefined') {
+  drawContext = getDrawContext();
+}
+
 Promise.all([...modules, presets]).then((data) => {
   // console.log('modules and sample registry loade', data);
   loadedSamples = Object.entries(getLoadedSamples() || {});
@@ -125,6 +130,7 @@ export function Repl({ embedded = false }) {
         setPending(false);
       },
       onToggle: (play) => !play && cleanupDraw(false),
+      drawContext,
     });
 
   // init code
@@ -167,7 +173,7 @@ export function Repl({ embedded = false }) {
     view,
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => scheduler.getPhase(),
+    getTime: () => scheduler.now(),
   });
 
   //