From 281c630827dbb2dedd99ad965d517d4577b56ffc Mon Sep 17 00:00:00 2001 From: Raphael Forment Date: Thu, 7 Sep 2023 18:01:41 +0200 Subject: [PATCH] Adding widget for time position visualisation --- index.html | 21 +++++++++++++++------ src/AppSettings.ts | 5 +++++ src/TransportNode.js | 4 +++- src/main.ts | 15 +++++++++++++++ src/themes/toposTheme.ts | 15 +++++++++++---- 5 files changed, 49 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 42eb2e8..53d0141 100644 --- a/index.html +++ b/index.html @@ -47,15 +47,17 @@ width: 100%; height: 92vh; max-height: 100vh; + z-index: 0; } .cm-scroller { display: block !important; width: 100% !important; + z-index: 0; } - +
@@ -219,11 +221,17 @@ - -
- - -
+ +
+
+ + +
+
+ + +
+
@@ -328,4 +336,5 @@
+

diff --git a/src/AppSettings.ts b/src/AppSettings.ts index 72a4f51..9a2d483 100644 --- a/src/AppSettings.ts +++ b/src/AppSettings.ts @@ -50,6 +50,7 @@ export interface Settings { universes: Universes; selected_universe: string; line_numbers: boolean; + time_position: boolean; } export const template_universe = { @@ -113,6 +114,7 @@ export class AppSettings { public universes: Universes; public selected_universe: string = "Default"; public line_numbers: boolean = true; + public time_position: boolean = true; constructor() { const settingsFromStorage = JSON.parse( @@ -128,6 +130,7 @@ export class AppSettings { this.universes = settingsFromStorage.universes; this.selected_universe = settingsFromStorage.selected_universe; this.line_numbers = settingsFromStorage.line_numbers; + this.time_position = settingsFromStorage.time_position; } else { this.universes = template_universes; } @@ -149,6 +152,7 @@ export class AppSettings { universes: this.universes, selected_universe: this.selected_universe, line_numbers: this.line_numbers, + time_position: this.time_position }; } @@ -168,6 +172,7 @@ export class AppSettings { this.font_size = settings.font_size; this.selected_universe = settings.selected_universe; this.line_numbers = settings.line_numbers; + this.time_position = settings.time_position; localStorage.setItem("topos", JSON.stringify(this.data)); } } diff --git a/src/TransportNode.js b/src/TransportNode.js index 456cefd..0d3d1df 100644 --- a/src/TransportNode.js +++ b/src/TransportNode.js @@ -8,6 +8,7 @@ export class TransportNode extends AudioWorkletNode { this.app = application this.port.addEventListener("message", this.handleMessage); this.port.start(); + this.timeviewer = document.getElementById("timeviewer"); } /** @type {(this: MessagePort, ev: MessageEvent) => any} */ @@ -17,6 +18,7 @@ export class TransportNode extends AudioWorkletNode { this.app.clock.tick++ const futureTimeStamp = this.app.clock.convertTicksToTimeposition(this.app.clock.tick); this.app.clock.time_position = futureTimeStamp; + this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${futureTimeStamp.beat+1}:${zeroPad(futureTimeStamp.pulse, 2)}`; if (this.app.exampleIsPlaying) { tryEvaluate(this.app, this.app.example_buffer); @@ -48,4 +50,4 @@ export class TransportNode extends AudioWorkletNode { this.port.postMessage("stop"); } -} \ No newline at end of file +} diff --git a/src/main.ts b/src/main.ts index d9d52f1..b68590d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -180,6 +180,12 @@ export class Editor { "show-line-numbers" ) as HTMLInputElement; + // Time Position checkbox + time_position_checkbox: HTMLInputElement = document.getElementById( + "show-time-position" + ) as HTMLInputElement; + + // Editor mode selection normal_mode_button: HTMLButtonElement = document.getElementById( "normal-mode" @@ -523,6 +529,7 @@ export class Editor { `font-size: ${this.settings.font_size}px;` ); this.line_numbers_checkbox.checked = this.settings.line_numbers; + this.time_position_checkbox.checked = this.settings.time_position; let modal_settings = document.getElementById("modal-settings"); let editor = document.getElementById("editor"); modal_settings?.classList.remove("invisible"); @@ -581,6 +588,14 @@ export class Editor { }); }); + + this.time_position_checkbox.addEventListener("change", () => { + let timeviewer = document.getElementById("timeviewer") as HTMLElement; + let checked = this.time_position_checkbox.checked ? true : false; + this.settings.time_position = checked; + checked ? timeviewer.classList.remove('hidden') : timeviewer.classList.add('hidden'); + }); + this.vim_mode_button.addEventListener("click", () => { this.settings.vimMode = true; this.view.dispatch({ diff --git a/src/themes/toposTheme.ts b/src/themes/toposTheme.ts index 7adb017..3fbf239 100644 --- a/src/themes/toposTheme.ts +++ b/src/themes/toposTheme.ts @@ -42,10 +42,17 @@ export const toposDarkTheme = EditorView.theme( caretColor: cursor, fontFamily: "'Victor Mono', monospace", }, - ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor }, - "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": - { backgroundColor: base00, border: `0.5px solid ${base00}` }, - ".cm-panels": { backgroundColor: darkBackground, color: base05 }, + ".cm-cursor, .cm-dropCursor": { + borderLeftColor: cursor, + }, + "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": { + backgroundColor: base00, + border: `0.5px solid ${base00}`, + }, + ".cm-panels": { + backgroundColor: darkBackground, + color: base05, + }, ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, ".cm-searchMatch": {