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,37 +2,38 @@ 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 (this.app.clock.running) {
+
         if (this.app.settings.send_clock) {
           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);
       }
     }
-    }
   };
 
   start() {

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