Remove timeviewer (too many DOM updates)

index.html

@@ -592,6 +592,5 @@
         </li>
       </template>
   </body>
-	<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold  cursor-textpointer-events-none select-none text-sm absolute bottom-2 right-2 bg-foreground text-background"></p>
 	<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold cursor-textpointer-events-none select-none text-sm absolute right-2 bottom-12 bg-foreground text-background">/////// Fill ///////</p>
 </html>

src/DOM/UILogic.ts

@@ -442,18 +442,6 @@ export const installInterfaceLogic = (app: Editor) => {
     });
   });
 
-  app.interface.time_position_checkbox.addEventListener("change", () => {
-    let timeviewer = document.getElementById("timeviewer") as HTMLElement;
-    let checked = (app.interface.time_position_checkbox as HTMLInputElement)
-      .checked
-      ? true
-      : false;
-    app.settings.time_position = checked;
-    checked
-      ? timeviewer.classList.remove("hidden")
-      : timeviewer.classList.add("hidden");
-  });
-
   app.interface.tips_checkbox.addEventListener("change", () => {
     let checked = (app.interface.tips_checkbox as HTMLInputElement).checked
       ? true

src/clock/ClockNode.js

@@ -2,35 +2,36 @@ import { tryEvaluate } from "../Evaluator";
 const zeroPad = (num, places) => String(num).padStart(places, "0");
 
 export class TransportNode extends AudioWorkletNode {
+
   constructor(context, options, application) {
     super(context, "transport", options);
-    this.app = application;
     this.port.addEventListener("message", this.handleMessage);
     this.port.start();
-    this.timeviewer = document.getElementById("timeviewer");
+    this.app = application;
+    this.domUpdateFrequency = this.app.clock.ppqn;
   }
 
   /** @type {(this: MessagePort, ev: MessageEvent<any>) => any} */
   handleMessage = (message) => {
-    if (message.data) {
+    if (message.data.type === "bang") {
-      if (message.data.type === "bang") {
+      if (this.app.clock.running) {
-        if (this.app.clock.running) {
+
-          if (this.app.settings.send_clock) {
+        if (this.app.settings.send_clock) {
-            this.app.api.MidiConnection.sendMidiClock();
+          this.app.api.MidiConnection.sendMidiClock();
-          }
-          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)} / ${this.app.clock.bpm}`;
-          if (this.app.exampleIsPlaying) {
-            tryEvaluate(this.app, this.app.example_buffer);
-          } else {
-            tryEvaluate(this.app, this.app.global_buffer);
-          }
-          this.app.clock.incrementTick(message.data.bpm);
         }
+
+        const futureTimeStamp = this.app.clock.convertTicksToTimeposition(
+          this.app.clock.tick
+        );
+        this.app.clock.time_position = futureTimeStamp;
+
+        if (this.app.exampleIsPlaying) {
+          tryEvaluate(this.app, this.app.example_buffer);
+        } else {
+          tryEvaluate(this.app, this.app.global_buffer);
+        }
+
+        this.app.clock.incrementTick(message.data.bpm);
       }
     }
   };

src/clock/ClockProcessor.js

@@ -30,7 +30,7 @@ class TransportProcessor extends AudioWorkletProcessor {
     }
   };
 
-  process(inputs, outputs, parameters) {
+  process() {
     if (this.started) {
       const adjustedCurrentTime = currentTime + this.nudge / 100;
       const beatNumber = adjustedCurrentTime / (60 / this.bpm);