Adding widget for time position visualisation

2023-09-07 18:01:41 +02:00
parent c9ec65a8aa
commit 281c630827
5 changed files with 49 additions and 11 deletions
--- 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;
    }

  </style>
-  <body class="bg-neutral-800 overflow-y-hidden">
+  <body class="z-0 bg-neutral-800 overflow-y-hidden">

 		<!-- The header is hidden on smaller devices -->
    <header class="py-2 block text-white bg-neutral-900">
@ -219,11 +221,17 @@
                  <label id="vim-mode" for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
                </div>
              </div>
-              <!-- Line Numbers  -->
-              <div class="flex items-center mb-4 ml-8">
-                  <input id="show-line-numbers" 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 Line Numbers</label>
-              </div>
+              <!-- Checkboxes  -->
+							<div class="flex flex-row">
+								<div class="flex items-center mb-4 ml-8">
+              	    <input id="show-line-numbers" 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 Line Numbers</label>
+              	</div>
+              	<div class="flex items-center mb-4 ml-8">
+              	    <input id="show-time-position" 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 Time Position</label>
+              	</div>
+							</div>
              <!-- Information card -->
              <div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">
                <a href="https://github.com/Bubobubobubobubo/Topos" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
@ -328,4 +336,5 @@
      </div>
      <script type="module" src="/src/main.ts"></script>
  </body>
+	<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
 </html>
--- 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));
  }
 }
--- 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>) => 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");
    }

-}
+}
--- 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({
--- 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": {