Merge branch 'main' of github.com:Bubobubobubobubo/Topos

index.html

@@ -261,6 +261,10 @@
              	    <input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
              	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
              	  </div>
+             	  <div class="flex items-center mb-4 ml-5">
+             	    <input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+             	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Completions</label>
+             	  </div>
              	  <div class="flex items-center mb-4 ml-5">
              	    <input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
              	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>

src/AudioVisualisation.ts

@@ -125,6 +125,8 @@ export interface OscilloscopeConfig {
   size: number;
 }
 
+let lastZeroCrossingType: string | null = null;  // 'negToPos' or 'posToNeg'
+
 /**
  * Initializes and runs an oscilloscope using an AnalyzerNode.
  * @param {HTMLCanvasElement} canvas - The canvas element to draw the oscilloscope.
@@ -163,6 +165,8 @@ export const runOscilloscope = (
     }
 
     analyzer.getFloatTimeDomainData(dataArray);
+    canvasCtx.globalCompositeOperation = 'source-over';
+
 
     canvasCtx.fillStyle = "rgba(0, 0, 0, 0)";
     canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
@@ -179,40 +183,65 @@ export const runOscilloscope = (
     } else {
       canvasCtx.strokeStyle = app.osc.color;
     }
+    const remainingRefreshTime = app.clock.time_position.pulse % app.osc.refresh;
+    const opacityRatio = 1 - (remainingRefreshTime / app.osc.refresh);
+    canvasCtx.globalAlpha = opacityRatio;
     canvasCtx.beginPath();
 
-    // Drawing logic varies based on orientation and 3D setting
+
+    let startIndex = 0;
+    for (let i = 1; i < dataArray.length; ++i) {
+      let currentType = null;
+      if (dataArray[i] >= 0 && dataArray[i - 1] < 0) {
+        currentType = 'negToPos';
+      } else if (dataArray[i] < 0 && dataArray[i - 1] >= 0) {
+        currentType = 'posToNeg';
+      }
+
+      if (currentType) {
+        if (lastZeroCrossingType === null || currentType === lastZeroCrossingType) {
+          startIndex = i;
+          lastZeroCrossingType = currentType;
+          break;
+        }
+      }
+    }
+
+
     if (app.osc.is3D) {
-      for (let i = 0; i < dataArray.length; i += 2) {
+      for (let i = startIndex; i < dataArray.length; i += 2) {
         const x = (dataArray[i] * WIDTH * app.osc.size) / 2 + WIDTH / 4;
         const y = (dataArray[i + 1] * HEIGHT * app.osc.size) / 2 + HEIGHT / 4;
-        i === 0 ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
+        i === startIndex ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
       }
     } else if (app.osc.orientation === "horizontal") {
-      let x = 0;
       const sliceWidth = (WIDTH * 1.0) / dataArray.length;
       const yOffset = HEIGHT / 4;
-      for (let i = 0; i < dataArray.length; i++) {
+      let x = 0;
+      for (let i = startIndex; i < dataArray.length; i++) {
         const v = dataArray[i] * 0.5 * HEIGHT * app.osc.size;
         const y = v + yOffset;
-        i === 0 ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
+        i === startIndex ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
         x += sliceWidth;
       }
       canvasCtx.lineTo(WIDTH, yOffset);
     } else {
-      let y = 0;
       const sliceHeight = (HEIGHT * 1.0) / dataArray.length;
       const xOffset = WIDTH / 4;
-      for (let i = 0; i < dataArray.length; i++) {
+      let y = 0;
+      for (let i = startIndex; i < dataArray.length; i++) {
         const v = dataArray[i] * 0.5 * WIDTH * app.osc.size;
         const x = v + xOffset;
-        i === 0 ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
+        i === startIndex ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
         y += sliceHeight;
       }
       canvasCtx.lineTo(xOffset, HEIGHT);
     }
 
     canvasCtx.stroke();
+    canvasCtx.globalAlpha = 1.0;
   }
+
+
   draw();
 };

src/DomElements.ts

@@ -1,12 +1,12 @@
 export type ElementMap = {
   [key: string]:
-    | HTMLElement
+  | HTMLElement
-    | HTMLButtonElement
+  | HTMLButtonElement
-    | HTMLDivElement
+  | HTMLDivElement
-    | HTMLInputElement
+  | HTMLInputElement
-    | HTMLSelectElement
+  | HTMLSelectElement
-    | HTMLCanvasElement
+  | HTMLCanvasElement
-    | HTMLFormElement;
+  | HTMLFormElement;
 };
 
 export const singleElements = {
@@ -36,6 +36,7 @@ export const singleElements = {
   line_numbers_checkbox: "show-line-numbers",
   time_position_checkbox: "show-time-position",
   tips_checkbox: "show-tips",
+  completion_checkbox: "show-completions",
   midi_clock_checkbox: "send-midi-clock",
   midi_channels_scripts: "midi-channels-scripts",
   midi_clock_ppqn: "midi-clock-ppqn-input",

src/EditorSetup.ts

@@ -34,6 +34,12 @@ import { EditorView } from "codemirror";
 import { toposTheme } from "./themes/toposTheme";
 import { javascript } from "@codemirror/lang-javascript";
 import { inlineHoveringTips } from "./documentation/inlineHelp";
+import { toposCompletions } from "./documentation/inlineHelp";
+import { javascriptLanguage } from "@codemirror/lang-javascript"
+
+export const jsCompletions = javascriptLanguage.data.of({
+  autocomplete: toposCompletions
+})
 
 export const editorSetup: Extension = (() => [
   highlightActiveLineGutter(),
@@ -47,8 +53,6 @@ export const editorSetup: Extension = (() => [
   bracketMatching(),
   closeBrackets(),
   autocompletion(),
-  // rectangularSelection(),
-  // crosshairCursor(),
   highlightActiveLine(),
   highlightSelectionMatches(),
   keymap.of([
@@ -62,6 +66,7 @@ export const editorSetup: Extension = (() => [
 export const installEditor = (app: Editor) => {
   app.vimModeCompartment = new Compartment();
   app.hoveringCompartment = new Compartment();
+  app.completionsCompartment = new Compartment();
   app.withLineNumbers = new Compartment();
   app.chosenLanguage = new Compartment();
   app.fontSize = new Compartment();
@@ -86,6 +91,7 @@ export const installEditor = (app: Editor) => {
     app.withLineNumbers.of(lines),
     app.fontSize.of(fontModif),
     app.hoveringCompartment.of(app.settings.tips ? inlineHoveringTips : []),
+    app.completionsCompartment.of(app.settings.completions ? jsCompletions : []),
     editorSetup,
     toposTheme,
     app.chosenLanguage.of(javascript()),

src/FileManagement.ts

@@ -48,6 +48,7 @@ export interface Settings {
    * @param line_numbers - Whether or not to show line numbers
    * @param time_position - Whether or not to show time position
    * @param tips - Whether or not to show tips
+   * @param completions- Whether or not to show completions
    * @param send_clock - Whether or not to send midi clock
    * @param midi_channels_scripts - Whether midi input channels fires scripts
    * @param midi_clock_input - The name of the midi clock input
@@ -64,6 +65,7 @@ export interface Settings {
   time_position: boolean;
   load_demo_songs: boolean;
   tips: boolean;
+  completions: boolean;
   send_clock: boolean;
   midi_channels_scripts: boolean;
   midi_clock_input: string | undefined;
@@ -125,6 +127,7 @@ export class AppSettings {
    * @param line_numbers - Whether or not to show line numbers
    * @param time_position - Whether or not to show time position
    * @param tips - Whether or not to show tips
+   * @param completions - Whether or not to show completions
    * @param send_clock - Whether or not to send midi clock
    * @param midi_channels_scripts - Whether midi input channels fires scripts
    * @param midi_clock_input - The name of the midi clock input
@@ -140,7 +143,8 @@ export class AppSettings {
   public selected_universe: string = "Default";
   public line_numbers: boolean = true;
   public time_position: boolean = true;
-  public tips: boolean = true;
+  public tips: boolean = false;
+  public completions: boolean = false;
   public send_clock: boolean = false;
   public midi_channels_scripts: boolean = true;
   public midi_clock_input: string | undefined = undefined;
@@ -164,6 +168,7 @@ export class AppSettings {
       this.line_numbers = settingsFromStorage.line_numbers;
       this.time_position = settingsFromStorage.time_position;
       this.tips = settingsFromStorage.tips;
+      this.completions = settingsFromStorage.completions;
       this.send_clock = settingsFromStorage.send_clock;
       this.midi_channels_scripts = settingsFromStorage.midi_channels_scripts;
       this.midi_clock_input = settingsFromStorage.midi_clock_input;
@@ -193,6 +198,7 @@ export class AppSettings {
       line_numbers: this.line_numbers,
       time_position: this.time_position,
       tips: this.tips,
+      completions: this.completions,
       send_clock: this.send_clock,
       midi_channels_scripts: this.midi_channels_scripts,
       midi_clock_input: this.midi_clock_input,
@@ -220,6 +226,7 @@ export class AppSettings {
     this.line_numbers = settings.line_numbers;
     this.time_position = settings.time_position;
     this.tips = settings.tips;
+    this.completions = settings.completions;
     this.send_clock = settings.send_clock;
     this.midi_channels_scripts = settings.midi_channels_scripts;
     this.midi_clock_input = settings.midi_clock_input;

src/InterfaceLogic.ts

@@ -21,6 +21,7 @@ import { loadSamples } from "./API";
 import { tryEvaluate } from "./Evaluator";
 import { inlineHoveringTips } from "./documentation/inlineHelp";
 import { lineNumbers } from "@codemirror/view";
+import { jsCompletions } from "./EditorSetup";
 
 export const installInterfaceLogic = (app: Editor) => {
   (app.interface.line_numbers_checkbox as HTMLInputElement).checked =
@@ -28,6 +29,8 @@ export const installInterfaceLogic = (app: Editor) => {
   (app.interface.time_position_checkbox as HTMLInputElement).checked =
     app.settings.time_position;
   (app.interface.tips_checkbox as HTMLInputElement).checked = app.settings.tips;
+  (app.interface.completion_checkbox as HTMLInputElement).checked = app.settings.completions;
+
   (app.interface.midi_clock_checkbox as HTMLInputElement).checked =
     app.settings.send_clock;
   (app.interface.midi_channels_scripts as HTMLInputElement).checked =
@@ -378,6 +381,18 @@ export const installInterfaceLogic = (app: Editor) => {
     });
   });
 
+  app.interface.completion_checkbox.addEventListener("change", () => {
+    let checked = (app.interface.completion_checkbox as HTMLInputElement).checked
+      ? true
+      : false;
+    app.settings.completions = checked;
+    app.view.dispatch({
+      effects: app.completionsCompartment.reconfigure(
+        checked ? jsCompletions : []
+      ),
+    });
+  });
+
   app.interface.midi_clock_checkbox.addEventListener("change", () => {
     let checked = (app.interface.midi_clock_checkbox as HTMLInputElement)
       .checked

src/documentation/inlineHelp.ts

@@ -1,5 +1,7 @@
 import { hoverTooltip } from "@codemirror/view";
 import { type EditorView } from "@codemirror/view";
+import { CompletionContext } from "@codemirror/autocomplete"
+
 
 interface InlineCompletion {
   name: string;
@@ -23,7 +25,7 @@ const completionDatabase: CompletionDatabase = {
     name: "delayr",
     category: "time",
     description: "Delay a function <i>n</i> times by <i>t</i> ms",
-    example: "delayr(50, 3, () => beat(1) :: log('delayed'))",
+    example: "delayr(50,3,()=> beat(1)::log('hey!'))",
   },
   toss: {
     name: "toss",
@@ -35,7 +37,7 @@ const completionDatabase: CompletionDatabase = {
     name: "lpadsr",
     category: "synthesis",
     description: "Lowpass filter ADSR envelope",
-    example: "sound('sawtooth').lpadsr(2, 0, .1, 0, 0).out()",
+    example: "sound('sawtooth').lpadsr(2,0,.1,0,0).out()",
   },
   lpenv: {
     name: "lpenv",
@@ -968,3 +970,29 @@ export const inlineHoveringTips = hoverTooltip(
     };
   }
 );
+
+export const toposCompletions = (context: CompletionContext) => {
+  let word = context.matchBefore(/\w*/)
+  if (word) {
+    if (word.from == word.to && !context.explicit)
+      return null
+    return {
+      from: word.from,
+      options: Object.keys(completionDatabase).map((key) => ({
+        label: key,
+        type: completionDatabase[key].category,
+        info: () => {
+          let div = document.createElement('div');
+          div.innerHTML = `
+      <h1 class="text-orange-300 text-base pb-1">${completionDatabase[key].name} [<em class="text-white">${completionDatabase[key].category}</em>]</h1>
+      <p class="text-base pl-4">${completionDatabase[key].description}</p>
+      <div class="overflow-hidden overflow-scroll rounded px-2 ml-4 mt-2 bg-neutral-800"><code class="text-sm">${completionDatabase[key].example}</code></div>
+      `
+          div.classList.add("px-4", "py-2", "rounded-lg", "w-92");
+          return div
+        }
+      }))
+    }
+  }
+}
+

src/main.ts

@@ -42,6 +42,7 @@ export class Editor {
   withLineNumbers!: Compartment;
   vimModeCompartment!: Compartment;
   hoveringCompartment!: Compartment;
+  completionsCompartment!: Compartment;
   chosenLanguage!: Compartment;
   dynamicPlugins!: Compartment;
   currentDocumentationPane: string = "introduction";
@@ -64,7 +65,7 @@ export class Editor {
     color: "#fdba74",
     thickness: 4,
     refresh: 1,
-    fftSize: 256,
+    fftSize: 1024,
     orientation: "horizontal",
     is3D: false,
     size: 1,