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

2023-12-20 16:22:44 +02:00
parent 5fc7ce3c12 d4fed334ab
commit 4e2ec4e08b
4 changed files with 77 additions and 98 deletions
--- a/src/API.ts
+++ b/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);
  }
-
 }
--- a/src/EditorSetup.ts
+++ b/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({
-//   ".cm-line span": {
-//     position: "relative",
-//   },
-//   ".cm-line span:hover::after": {
-//     position: "absolute",
-//     bottom: "100%",
-//     left: 0,
-//     background: "black",
-//     color: "white",
-//     border: "solid 2px",
-//     borderRadius: "5px",
-//     content: "var(--tags)",
-//     width: `max-content`,
-//     padding: "1px 4px",
-//     zIndex: 10,
-//     pointerEvents: "none",
-//   },
-// });
-// 
-// const debugHighlightStyle = HighlightStyle.define(
-//   // @ts-ignore
-//   Object.entries(t).map(([key, value]) => {
-//     return { tag: value, "--tags": `"tag.${key}"` };
-//   })
-// );
-// const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
+const debugTheme = EditorView.theme({
+  ".cm-line span": {
+    position: "relative",
+  },
+  ".cm-line span:hover::after": {
+    position: "absolute",
+    bottom: "100%",
+    left: 0,
+    background: "black",
+    color: "white",
+    border: "solid 2px",
+    borderRadius: "5px",
+    content: "var(--tags)",
+    width: `max-content`,
+    padding: "1px 4px",
+    zIndex: 10,
+    pointerEvents: "none",
+  },
+});
+
+const debugHighlightStyle = HighlightStyle.define(
+  // @ts-ignore
+  Object.entries(t).map(([key, value]) => {
+    return { tag: value, "--tags": `"tag.${key}"` };
+  })
+);
+const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
+
+export const switchToDebugTheme = (app: Editor) => {
+  app.view.dispatch({
+    effects: app.themeCompartment.reconfigure(debug),
+  });
+}


 export const jsCompletions = javascriptLanguage.data.of({
--- a/src/documentation/inlineHelp.ts
+++ b/src/documentation/inlineHelp.ts
@ -733,8 +733,8 @@ const completionDatabase: CompletionDatabase = {
  midi: {
    name: "midi",
    category: "midi",
-    description: "Send a MIDI message",
-    example: "midi(144, 60, 100)",
+    description: "Send a MIDI message (note, velocity, channel)",
+    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: {
-    name: "v",
+  global: {
+    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>
      `;
--- a/src/main.ts
+++ b/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) {