build

docs/tutorial/index.790bf3f2.js

@@ -41928,6 +41928,7 @@ var _xenMjs = require("./xen.mjs");
 var _tuneMjs = require("./tune.mjs");
 var _pianorollMjs = require("./pianoroll.mjs");
 var _drawMjs = require("./draw.mjs");
+var _uiMjs = require("./ui.mjs");
 var _gistJs = require("./gist.js");
 var _gistJsDefault = parcelHelpers.interopDefault(_gistJs);
 var _shapeshifter = require("./shapeshifter");
@@ -41959,7 +41960,7 @@ hackLiteral(String, [
     'p'
 ], bootstrapped.pure); // comment out this line if you panic
 // this will add everything to global scope, which is accessed by eval
-Object.assign(globalThis, bootstrapped, _tone1, _tone, _voicings, _drawMjs, {
+Object.assign(globalThis, bootstrapped, _tone1, _tone, _voicings, _drawMjs, _uiMjs, {
     gist: _gistJsDefault.default
 });
 const evaluate = async (code)=>{
@@ -41984,7 +41985,7 @@ const evaluate = async (code)=>{
     };
 };
 
-},{"../../strudel.mjs":"ggZqJ","./tone":"aBpVm","./midi":"kToux","./voicings":"bexb4","./tonal.mjs":"j8DFK","./xen.mjs":"2MdCD","./tune.mjs":"ggPHE","./pianoroll.mjs":"6BZJ6","./draw.mjs":"dHJhg","./gist.js":"fYZxP","./shapeshifter":"67UCx","./parse":"dddDq","tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"ggZqJ":[function(require,module,exports) {
+},{"../../strudel.mjs":"ggZqJ","./tone":"aBpVm","./midi":"kToux","./voicings":"bexb4","./tonal.mjs":"j8DFK","./xen.mjs":"2MdCD","./tune.mjs":"ggPHE","./pianoroll.mjs":"6BZJ6","./draw.mjs":"dHJhg","./ui.mjs":"dezzj","./gist.js":"fYZxP","./shapeshifter":"67UCx","./parse":"dddDq","tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"ggZqJ":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "curry", ()=>curry
@@ -56755,7 +56756,7 @@ Pattern.prototype.tone = function(instrument) {
                     instrument.keyDown({
                         note,
                         time,
-                        velocity: 0.5
+                        velocity
                     });
                     instrument.keyUp({
                         note,
@@ -136276,7 +136277,52 @@ const cleanup = ()=>{
     if (window.strudelScheduler) clearInterval(window.strudelScheduler);
 };
 
-},{"tone":"2tCfN","../../strudel.mjs":"ggZqJ","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"fYZxP":[function(require,module,exports) {
+},{"tone":"2tCfN","../../strudel.mjs":"ggZqJ","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"dezzj":[function(require,module,exports) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+parcelHelpers.export(exports, "hideHeader", ()=>hideHeader
+);
+parcelHelpers.export(exports, "backgroundImage", ()=>backgroundImage
+);
+var _tone = require("tone");
+const hideHeader = ()=>{
+    document.getElementById('header').style = 'display:none';
+};
+function frame(callback) {
+    if (window.strudelAnimation) cancelAnimationFrame(window.strudelAnimation);
+    const animate = (animationTime)=>{
+        const toneTime = _tone.getTransport().seconds;
+        callback(animationTime, toneTime);
+        window.strudelAnimation = requestAnimationFrame(animate);
+    };
+    requestAnimationFrame(animate);
+}
+const backgroundImage = function(src, animateOptions) {
+    const container = document.getElementById('code');
+    const bg = 'background-image:url(' + src + ');background-size:contain;';
+    container.style = bg;
+    const { className: initialClassName  } = container;
+    const handleOption = (option, value)=>{
+        ({
+            style: ()=>container.style = bg + ';' + value
+            ,
+            className: ()=>container.className = value + ' ' + initialClassName
+        })[option]();
+    };
+    const funcOptions = Object.entries(animateOptions).filter(([_, v])=>typeof v === 'function'
+    );
+    const stringOptions = Object.entries(animateOptions).filter(([_, v])=>typeof v === 'string'
+    );
+    stringOptions.forEach(([option, value])=>handleOption(option, value)
+    );
+    if (funcOptions.length === 0) return;
+    frame((_, t)=>funcOptions.forEach(([option, value])=>{
+            handleOption(option, value(t));
+        })
+    );
+};
+
+},{"tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"fYZxP":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 exports.default = (route)=>fetch(`https://gist.githubusercontent.com/${route}?cachebust=${Date.now()}`).then((res)=>res.text()
@@ -171781,6 +171827,17 @@ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "markEvent", ()=>markEvent
 );
+parcelHelpers.export(exports, "markParens", ()=>markParens
+);
+// returns { line, ch } from absolute character offset
+parcelHelpers.export(exports, "offsetToPosition", ()=>offsetToPosition
+);
+// returns absolute character offset from { line, ch }
+parcelHelpers.export(exports, "positionToOffset", ()=>positionToOffset
+);
+// given code and caret position, the functions returns the indices of the parens we are in
+parcelHelpers.export(exports, "getCurrentParenArea", ()=>getCurrentParenArea
+);
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactDefault = parcelHelpers.interopDefault(_react);
@@ -171790,7 +171847,7 @@ var _pegjsJs = require("codemirror/mode/pegjs/pegjs.js");
 // import 'codemirror/theme/material.css';
 var _codemirrorCss = require("codemirror/lib/codemirror.css");
 var _materialCss = require("codemirror/theme/material.css");
-function CodeMirror({ value , onChange , options , editorDidMount  }) {
+function CodeMirror({ value , onChange , onCursor , options , editorDidMount  }) {
     options = options || {
         mode: 'javascript',
         theme: 'material',
@@ -171802,7 +171859,8 @@ function CodeMirror({ value , onChange , options , editorDidMount  }) {
         value: value,
         options: options,
         onBeforeChange: onChange,
-        editorDidMount: editorDidMount
+        editorDidMount: editorDidMount,
+        onCursor: (editor, data)=>onCursor?.(editor, data)
     }));
 }
 exports.default = CodeMirror;
@@ -171816,8 +171874,9 @@ const markEvent = (editor)=>(time, event)=>{
             }, {
                 line: end.line - 1,
                 ch: end.column
-            }, {
-                css: 'background-color: #FFCA28; color: black'
+            }, //{ css: 'background-color: #FFCA28; color: black' } // background-color is now used by parent marking
+            {
+                css: 'outline: 2px solid #FFCA28; box-sizing:border-box'
             })
         );
         //Tone.Transport.schedule(() => { // problem: this can be cleared by scheduler...
@@ -171825,13 +171884,67 @@ const markEvent = (editor)=>(time, event)=>{
             marks.forEach((mark)=>mark.clear()
             );
         // }, '+' + event.duration * 0.5);
-        }, event.duration * 900);
+        }, event.duration /* * 0.9 */  * 1000);
     }
-; // idea: to improve highlighting, all patterns that appear anywhere in the code could be queried seperately
- // the created events could then be used to highlight primitives as long as they are active
- // this would create a less flickery output, with no duplications
- // it would be seperated completely from the querying that happens to get the sound output
- // it would also allow highlighting primitives that don't even end up in the sounding events (just for visual purposes)
+;
+let parenMark;
+const markParens = (editor, data)=>{
+    const v = editor.getDoc().getValue();
+    const marked = getCurrentParenArea(v, data);
+    parenMark?.clear();
+    parenMark = editor.getDoc().markText(...marked, {
+        css: 'background-color: #0000dd20'
+    }); //
+};
+function offsetToPosition(offset, code) {
+    const lines = code.split('\n');
+    let line = 0;
+    let ch = 0;
+    for(let i = 0; i < offset; i++)if (ch === lines[line].length) {
+        line++;
+        ch = 0;
+    } else ch++;
+    return {
+        line,
+        ch
+    };
+}
+function positionToOffset(position, code) {
+    const lines = code.split('\n');
+    let offset = 0;
+    for(let i = 0; i < position.line; i++)offset += lines[i].length + 1;
+    offset += position.ch;
+    return offset;
+}
+function getCurrentParenArea(code, caretPosition) {
+    const caret = positionToOffset(caretPosition, code);
+    let open, i, begin, end;
+    // walk left
+    i = caret;
+    open = 0;
+    while(i > 0){
+        if (code[i - 1] === '(') open--;
+        else if (code[i - 1] === ')') open++;
+        if (open === -1) break;
+        i--;
+    }
+    begin = i;
+    // walk right
+    i = caret;
+    open = 0;
+    while(i < code.length){
+        if (code[i] === '(') open--;
+        else if (code[i] === ')') open++;
+        if (open === 1) break;
+        i++;
+    }
+    end = i;
+    return [
+        begin,
+        end
+    ].map((o)=>offsetToPosition(o, code)
+    );
+}
 
 },{"react/jsx-runtime":"6AEwr","react":"21dqq","react-codemirror2":"l8gGc","codemirror/mode/javascript/javascript.js":"6YWC8","codemirror/mode/pegjs/pegjs.js":"ishmS","codemirror/lib/codemirror.css":"4uIDj","codemirror/theme/material.css":"5kHRb","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"l8gGc":[function(require,module,exports) {
 'use strict';
@@ -183050,4 +183163,4 @@ exports.default = cx;
 
 },{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}]},["3uVTb"], "3uVTb", "parcelRequire94c2")
 
-//# sourceMappingURL=index.0eba8fed.js.map
+//# sourceMappingURL=index.790bf3f2.js.map

docs/tutorial/index.c844960c.css

@@ -851,6 +851,8 @@ Ensure the default browser behavior of the `hidden` attribute.
   opacity: 0;
 }.opacity-100 {
   opacity: 1;
+}.outline {
+  outline-style: solid;
 }.filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }.transition-opacity {
@@ -1361,4 +1363,4 @@ span.CodeMirror-selectedtext { background: none; }
   color: white !important;
 }
 
-/*# sourceMappingURL=index.4949a046.css.map */
+/*# sourceMappingURL=index.c844960c.css.map */

docs/tutorial/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <link rel="icon" href="/tutorial/favicon.e3ab9dd9.ico">
-    <link rel="stylesheet" type="text/css" href="/tutorial/index.4949a046.css">
+    <link rel="stylesheet" type="text/css" href="/tutorial/index.c844960c.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Strudel REPL">
     <title>Strudel Tutorial</title>
@@ -11,6 +11,6 @@
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script src="/tutorial/index.0eba8fed.js" defer=""></script>
+    <script src="/tutorial/index.790bf3f2.js" defer=""></script>
   </body>
 </html>