Merge pull request #31 from Bubobubobubobubo/29-fixing-doc

New documentation playback mechanism

src/API.ts

@@ -75,19 +75,45 @@ export class UserAPI {
   };
 
   _playDocExample = (code?: string) => {
-    this.play();
-    console.log("Executing documentation example: " + this.app.selectedExample);
-    this.app.universes[this.app.selected_universe as string].global.candidate =
-      code ? code : (this.app.selectedExample as string);
-    tryEvaluate(
-      this.app,
-      this.app.universes[this.app.selected_universe as string].global
-    );
+    /**
+     * Play an example from the documentation. The example is going
+     * to be stored in the example buffer belonging to the universe.
+     * This buffer is going to be cleaned everytime the user press
+     * pause or leaves the documentation window.
+     *
+     * @param code - The code example to play (identifier)
+     */
+
+    let current_universe = this.app.universes[this.app.selected_universe];
+    this.app.exampleIsPlaying = true;
+    if (!current_universe.example) {
+      current_universe.example = {
+        candidate: "",
+        committed: "",
+        evaluations: 0,
+      };
+      current_universe.example.candidate! = code
+        ? code
+        : (this.app.selectedExample as string);
+    } else {
+      current_universe.example.candidate! = code
+        ? code
+        : (this.app.selectedExample as string);
+    }
+  };
+
+  _stopDocExample = () => {
+    let current_universe = this.app.universes[this.app.selected_universe];
+    if (current_universe?.example !== undefined) {
+      this.app.exampleIsPlaying = false;
+      current_universe.example.candidate! = "";
+      current_universe.example.committed! = "";
+    }
   };
 
   _playDocExampleOnce = (code?: string) => {
     this.play();
-    console.log("Executing documentation example: " + this.app.selectedExample);
+    this.app.exampleIsPlaying = true;
     evaluateOnce(this.app, code as string);
   };
 
@@ -406,7 +432,7 @@ export class UserAPI {
 
     player.updateLastCallTime();
 
-    if(id !== "") {
+    if (id !== "") {
       // Sync named patterns to z0 by default
       player.sync("z0");
     }
@@ -1050,7 +1076,7 @@ export class UserAPI {
     return final_pulses.some((p) => p == true);
   };
 
-  oneuclid = (pulses: number, length: number, rotate: number=0): boolean => {
+  oneuclid = (pulses: number, length: number, rotate: number = 0): boolean => {
     /**
      * Returns true if the current beat is in the given euclid sequence.
      * @param pulses - The number of pulses in the cycle
@@ -1059,7 +1085,10 @@ export class UserAPI {
      * @returns True if the current beat is in the given euclid sequence
      */
     const cycle = this._euclidean_cycle(pulses, length, rotate);
-    const beats = cycle.reduce((acc:number[], x:boolean, i:number) => { if(x) acc.push(i+1); return acc; }, []);
+    const beats = cycle.reduce((acc: number[], x: boolean, i: number) => {
+      if (x) acc.push(i + 1);
+      return acc;
+    }, []);
     return this.oncount(beats, length);
   };
 

src/AppSettings.ts

@@ -15,6 +15,7 @@ export interface Universe {
   locals: { [key: number]: File };
   init: File;
   notes: File;
+  example?: File;
 }
 
 export interface File {

src/Documentation.ts

@@ -33,7 +33,7 @@ export const makeExampleFactory = (application: Editor): Function => {
 <details ${open ? "open" : ""}>
   <summary >${description}
     <button class="py-1 align-top text-base rounded-lg pl-2 pr-2 hover:bg-green-700 bg-green-600 inline-block" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
-    <button class="py-1 text-base rounded-lg pl-2 pr-2 hover:bg-neutral-600 bg-neutral-500 inline-block pl-2" onclick="stop()">&#x23f8;&#xFE0F; Pause</button>
+    <button class="py-1 text-base rounded-lg pl-2 pr-2 hover:bg-neutral-600 bg-neutral-500 inline-block pl-2" onclick="app.api._stopDocExample()">&#x23f8;&#xFE0F; Pause</button>
     <button class="py-1 text-base rounded-lg pl-2 pr-2 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
   </summary>
   \`\`\`javascript

src/TransportNode.js

@@ -21,7 +21,11 @@ export class TransportNode extends AudioWorkletNode {
             const futureTimeStamp = this.app.clock.convertTicksToTimeposition(this.app.clock.tick);
             
             this.app.clock.time_position = futureTimeStamp;
-            tryEvaluate(this.app, this.app.global_buffer);
+            if (this.app.exampleIsPlaying) {
+                tryEvaluate(this.app, this.app.example_buffer);
+            } else {
+                tryEvaluate(this.app, this.app.global_buffer);
+            }
               
         }
     };

src/main.ts

@@ -73,6 +73,7 @@ export class Editor {
   chosenLanguage: Compartment;
   currentDocumentationPane: string = "introduction";
   exampleCounter: number = 0;
+  exampleIsPlaying: boolean = false;
 
   settings = new AppSettings();
   editorExtensions: Extension[] = [];
@@ -680,6 +681,10 @@ export class Editor {
     return this.universes[this.selected_universe.toString()].notes;
   }
 
+  get example_buffer() {
+    return this.universes[this.selected_universe.toString()].example;
+  }
+
   get global_buffer() {
     return this.universes[this.selected_universe.toString()].global;
   }
@@ -746,10 +751,10 @@ export class Editor {
     if (document.getElementById("app")?.classList.contains("hidden")) {
       document.getElementById("app")?.classList.remove("hidden");
       document.getElementById("documentation")?.classList.add("hidden");
+      this.exampleIsPlaying = false;
     } else {
       document.getElementById("app")?.classList.add("hidden");
       document.getElementById("documentation")?.classList.remove("hidden");
-
       // Load and convert Markdown content from the documentation file
       this.updateDocumentationContent();
     }