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

src/API.ts

@@ -1,4 +1,3 @@
-import { EditorView } from "@codemirror/view";
 import { sendToServer, type OSCMessage, oscMessages } from "./IO/OSC";
 import { getAllScaleNotes, nearScales, seededRandom } from "zifferjs";
 import colorschemes from "./colors.json";
@@ -104,8 +103,11 @@ export class UserAPI {
   constructor(public app: Editor) {
     this.MidiConnection = new MidiConnection(this, app.settings);
     this.global = {};
+    this.g = this.global;
   }
 
+  public g: any;
+
   _loadUniverseFromInterface = (universe: string) => {
     this.app.selected_universe = universe.trim();
     this.app.settings.selected_universe = universe.trim();
@@ -504,6 +506,7 @@ export class UserAPI {
      */
     this.MidiConnection.sendMidiControlChange(control, value, channel);
   };
+  public cc = this.control_change;
 
   public midi_panic = (): void => {
     /**
@@ -1418,10 +1421,6 @@ export class UserAPI {
     return this.beat(nums.dur(...nums));
   };
 
-  // =============================================================
-  // Modulo based time filters
-  // =============================================================
-
   // =============================================================
   // Other core temporal functions
   // =============================================================
@@ -1952,38 +1951,6 @@ export class UserAPI {
     // would be 1.0, which is the current rate (very speedy).
   };
 
-  // =============================================================
-  // Legacy functions
-  // =============================================================
-
-  public divseq = (...args: any): any => {
-    const chunk_size = args[0]; // Get the first argument (chunk size)
-    const elements = args.slice(1); // Get the rest of the arguments as an array
-    const timepos = this.app.clock.pulses_since_origin;
-    const slice_count = Math.floor(
-      timepos / Math.floor(chunk_size * this.ppqn()),
-    );
-    return elements[slice_count % elements.length];
-  };
-
-  public seqbeat = <T>(...array: T[]): T => {
-    /**
-     * Returns an element from an array based on the current beat.
-     *
-     * @param array - The array of values to pick from
-     */
-    return array[this.app.clock.time_position.beat % array.length];
-  };
-
-  public seqbar = <T>(...array: T[]): T => {
-    /**
-     * Returns an element from an array based on the current bar.
-     *
-     * @param array - The array of values to pick from
-     */
-    return array[(this.app.clock.time_position.bar + 1) % array.length];
-  };
-
   // =============================================================
   // High Order Functions
   // =============================================================
@@ -2080,27 +2047,6 @@ export class UserAPI {
     };
   };
 
-  // =============================================================
-  // Ralt144mi section
-  // =============================================================
-
-  raltfont = (mainFont: string, commentFont: string): void => {
-    this.app.view.dispatch({
-      effects: this.app.fontSize.reconfigure(
-        EditorView.theme({
-          "&": { fontFamily: mainFont },
-          ".cm-gutters": { fontFamily: mainFont },
-          ".cm-content": {
-            fontFamily: mainFont,
-          },
-          ".cm-comment": {
-            fontFamily: commentFont,
-          },
-        }),
-      ),
-    });
-  };
-
   // =============================================================
   // Resolution
   // =============================================================
@@ -2706,5 +2652,4 @@ export class UserAPI {
   public getThemes = (): string[] => {
     return Object.keys(colorschemes);
   }
-
 }

src/EditorSetup.ts

@@ -123,7 +123,7 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
 
       ".cm-foldPlaceholder": {
         border: "none",
-        color: `${blue}`,
+        color: `${brightwhite}`,
       },
       ".cm-tooltip": {
         border: "none",
@@ -137,7 +137,7 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
       ".cm-tooltip-autocomplete": {
         "& > ul > li[aria-selected]": {
           backgroundColor: background,
-          color: background,
+          color: brightwhite,
         },
       },
     },
@@ -201,39 +201,57 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
       tag: [t.contentSeparator],
       color: green,
     },
-    { tag: t.invalid, color: red, borderBottom: `1px dotted ${red}` },
+    {
+      tag: [t.content],
+      color: brightwhite
+    },
+    { 
+      tag: t.invalid, 
+      color: red, 
+      borderBottom: `1px dotted ${red}` 
+    },
+    {
+      tag: t.null,
+      color: brightwhite,
+    }
   ]);
   return [ toposTheme, syntaxHighlighting(toposHighlightStyle),
 ]
 }
 
-// const debugTheme = EditorView.theme({
+const debugTheme = EditorView.theme({
-//   ".cm-line span": {
+  ".cm-line span": {
-//     position: "relative",
+    position: "relative",
-//   },
+  },
-//   ".cm-line span:hover::after": {
+  ".cm-line span:hover::after": {
-//     position: "absolute",
+    position: "absolute",
-//     bottom: "100%",
+    bottom: "100%",
-//     left: 0,
+    left: 0,
-//     background: "black",
+    background: "black",
-//     color: "white",
+    color: "white",
-//     border: "solid 2px",
+    border: "solid 2px",
-//     borderRadius: "5px",
+    borderRadius: "5px",
-//     content: "var(--tags)",
+    content: "var(--tags)",
-//     width: `max-content`,
+    width: `max-content`,
-//     padding: "1px 4px",
+    padding: "1px 4px",
-//     zIndex: 10,
+    zIndex: 10,
-//     pointerEvents: "none",
+    pointerEvents: "none",
-//   },
+  },
-// });
+});
-// 
+
-// const debugHighlightStyle = HighlightStyle.define(
+const debugHighlightStyle = HighlightStyle.define(
-//   // @ts-ignore
+  // @ts-ignore
-//   Object.entries(t).map(([key, value]) => {
+  Object.entries(t).map(([key, value]) => {
-//     return { tag: value, "--tags": `"tag.${key}"` };
+    return { tag: value, "--tags": `"tag.${key}"` };
-//   })
+  })
-// );
+);
-// const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
+const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
+
+export const switchToDebugTheme = (app: Editor) => {
+  app.view.dispatch({
+    effects: app.themeCompartment.reconfigure(debug),
+  });
+}
 
 
 export const jsCompletions = javascriptLanguage.data.of({

src/documentation/inlineHelp.ts

@@ -733,8 +733,8 @@ const completionDatabase: CompletionDatabase = {
   midi: {
     name: "midi",
     category: "midi",
-    description: "Send a MIDI message",
+    description: "Send a MIDI message (note, velocity, channel)",
-    example: "midi(144, 60, 100)",
+    example: "midi(144, 60, 1)",
   },
   control_change: {
     name: "control_change",
@@ -742,6 +742,12 @@ const completionDatabase: CompletionDatabase = {
     description: "Send a MIDI control change message",
     example: "control_change({control: 1, value: 60, channel: 10})",
   },
+  cc: {
+    name: "cc",
+    category: "midi",
+    description: "Send a MIDI control change message",
+    example: "cc({control: 1, value: 60, channel: 10})",
+  },
   program_change: {
     name: "program_change",
     category: "midi",
@@ -808,11 +814,17 @@ const completionDatabase: CompletionDatabase = {
     description: "Wraps (or not) of the drunk walk (boolean)",
     example: "drunk_wrap(true)",
   },
-  v: {
+  global: {
-    name: "v",
+    name: "global",
     category: "variable",
     description: "Global Variable setter or getter",
-    example: "v('my_var', 10) // Sets global variable 'my_var' to 10",
+    example: "global.my_var = 10; // Sets global variable 'my_var' to 10",
+  },
+  g: {
+    name: "g",
+    category: "variable",
+    description: "Global Variable setter or getter",
+    example: "g.my_var = 10; // Sets global variable 'my_var' to 10",
   },
   delete_variable: {
     name: "delete_variable",
@@ -953,12 +965,12 @@ export const inlineHoveringTips = hoverTooltip(
         let completion =
           completionDatabase[text.slice(start - from, end - from)] || {};
         let divContent = `
-      <h1 class="text-orange-300 text-base pb-1">${completion.name} [<em class="text-white">${completion.category}</em>]</h1>
+      <h1 class="text-brightwhite text-base pb-1">${completion.name} [<em class="text-white">${completion.category}</em>]</h1>
       <p class="text-base pl-4">${completion.description}</p>
       <pre class="-mt-2"><code class="pl-4 text-base">${completion.example}</code></pre></div>
       `;
         let dom = document.createElement("div");
-        dom.classList.add("px-4", "py-2", "bg-neutral-700", "rounded-lg");
+        dom.classList.add("px-4", "py-2", "bg-background", "rounded-lg");
         dom.innerHTML = divContent;
         return { dom };
       },
@@ -978,7 +990,7 @@ export const toposCompletions = (context: CompletionContext) => {
         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>
+      <h1 class="text-brightwhite 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>
       `;

src/main.ts

@@ -5,7 +5,7 @@ import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
 import { Extension } from "@codemirror/state";
 import { outputSocket } from "./IO/OSC";
-import { getCodeMirrorTheme } from "./EditorSetup";
+import { getCodeMirrorTheme, switchToDebugTheme } from "./EditorSetup";
 import {
   initializeSelectedUniverse,
   AppSettings,
@@ -629,6 +629,10 @@ export class Editor {
 
   readTheme(theme_name: string): void {
     // Check if the theme exists in colors.json
+    if (theme_name == "debug") {
+      switchToDebugTheme(this);
+      return
+    }
     let themes: Record<string, { [key: string]: any }> = colors;
     let selected_theme = themes[theme_name];
     if (selected_theme) {