Merge branch 'main' of https://github.com/Bubobubobubobubo/Topos
This commit is contained in:
63
src/API.ts
63
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user