Adding widget for time position visualisation

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

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>) => 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");
     }
 
-}
+}

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({

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": {