BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Raphaël Forment
2023-10-31 01:59:12 +01:00
parent 98d594ca13 2adf071b8d
commit 1f50d78450
8 changed files with 113 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -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>

47
src/AudioVisualisation.ts
View File

@ -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();
};

15
src/DomElements.ts
View File

@ -1,12 +1,12 @@
export type ElementMap = {
[key: string]:
| HTMLElement
| HTMLButtonElement
| HTMLDivElement
| HTMLInputElement
| HTMLSelectElement
| HTMLCanvasElement
| HTMLFormElement;
| HTMLElement
| HTMLButtonElement
| HTMLDivElement
| HTMLInputElement
| HTMLSelectElement
| HTMLCanvasElement
| 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",

10
src/EditorSetup.ts
View File

@ -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()),

9
src/FileManagement.ts
View File

@ -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;

15
src/InterfaceLogic.ts
View File

@ -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

32
src/documentation/inlineHelp.ts
View File

@ -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
}
}))
}
}
}

3
src/main.ts
View File

@ -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,