Merge pull request #92 from Bubobubobubobubo/opti

Small optimisations before gig

src/AudioVisualisation.ts

@@ -93,26 +93,29 @@ export const blinkScript = (
           (app.interface.feedback as HTMLCanvasElement).width,
           (app.interface.feedback as HTMLCanvasElement).height
         );
-      drawEmptyBlinkers(app);
     }, blinkDuration);
   }
 };
 
 /**
- * Draws a series of 9 white circles.
+ * Manages animation updates using requestAnimationFrame.
  * @param app - The Editor application context.
  */
-export const drawEmptyBlinkers = (app: Editor) => {
-  for (let no = 1; no <= 9; no++) {
-    const shiftAmount = no * 25;
-    drawCircle(
-      app,
-      50 + shiftAmount,
-      app.interface.feedback.clientHeight - 15,
-      8,
-      "white"
-    );
-  }
+export const scriptBlinkers = () => {
+  let lastFrameTime = Date.now();
+  const frameRate = 10;
+  const minFrameDelay = 1000 / frameRate;
+
+  const update = () => {
+    const now = Date.now();
+    const timeSinceLastFrame = now - lastFrameTime;
+
+    if (timeSinceLastFrame >= minFrameDelay) {
+      lastFrameTime = now;
+    }
+    requestAnimationFrame(update);
+  };
+  requestAnimationFrame(update);
 };
 
 export interface OscilloscopeConfig {
@@ -175,7 +178,7 @@ export const runOscilloscope = (
       app.osc.orientation === "horizontal" ? width / numBars : height / numBars;
     let barHeight;
     let x = 0,
-        y = 0;
+      y = 0;
 
     canvasCtx.fillStyle = app.osc.color || `rgb(255, 255, 255)`;
 

src/EditorSetup.ts

@@ -2,7 +2,6 @@ import { Prec } from "@codemirror/state";
 import { indentWithTab } from "@codemirror/commands";
 import {
   keymap,
-  ViewUpdate,
   lineNumbers,
   highlightSpecialChars,
   drawSelection,
@@ -100,9 +99,6 @@ export const installEditor = (app: Editor) => {
     editorSetup,
     toposTheme,
     app.chosenLanguage.of(javascript()),
-    EditorView.updateListener.of((v: ViewUpdate) => {
-      v;
-    }),
   ];
   app.dynamicPlugins = new Compartment();
   app.state = EditorState.create({

src/KeyActions.ts

@@ -135,10 +135,8 @@ export const registerOnKeyDown = (app: Editor) => {
       if (event.keyCode === keycode) {
         event.preventDefault();
         if (event.ctrlKey) {
-          event.preventDefault();
           app.api.script(keycode - 111);
         } else {
-          event.preventDefault();
           app.changeModeFromInterface("local");
           app.changeToLocalBuffer(index);
           hideDocumentation();

src/TransportNode.js

@@ -12,9 +12,9 @@ export class TransportNode extends AudioWorkletNode {
 
   /** @type {(this: MessagePort, ev: MessageEvent<any>) => any} */
   handleMessage = (message) => {
-    if(message.data) {
+    if (message.data) {
       if (message.data.type === "bang") {
-        if(this.app.clock.running) {
+        if (this.app.clock.running) {
           if (this.app.settings.send_clock) {
             this.app.api.MidiConnection.sendMidiClock();
           }
@@ -22,8 +22,10 @@ export class TransportNode extends AudioWorkletNode {
             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 (futureTimeStamp.pulse % this.app.clock.ppqn == 0) {
+            this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${futureTimeStamp.beat + 1
+              } / ${this.app.clock.bpm}`;
+          }
           if (this.app.exampleIsPlaying) {
             tryEvaluate(this.app, this.app.example_buffer);
           } else {
@@ -60,6 +62,6 @@ export class TransportNode extends AudioWorkletNode {
   }
 
   stop() {
-    this.port.postMessage({type: "stop" });
+    this.port.postMessage({ type: "stop" });
   }
 }

src/main.ts

@@ -1,4 +1,4 @@
-import { OscilloscopeConfig, runOscilloscope } from "./AudioVisualisation";
+import { OscilloscopeConfig, runOscilloscope, scriptBlinkers } from "./AudioVisualisation";
 import { EditorState, Compartment } from "@codemirror/state";
 import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
@@ -27,7 +27,6 @@ import showdown from "showdown";
 import { makeStringExtensions } from "./extensions/StringExtensions";
 import { installInterfaceLogic } from "./InterfaceLogic";
 import { installWindowBehaviors } from "./WindowBehavior";
-import { drawEmptyBlinkers } from "./AudioVisualisation";
 import { makeNumberExtensions } from "./extensions/NumberExtensions";
 // @ts-ignore
 import { registerSW } from "virtual:pwa-register";
@@ -170,7 +169,7 @@ export class Editor {
     registerFillKeys(this);
     registerOnKeyDown(this);
     installInterfaceLogic(this);
-    drawEmptyBlinkers(this);
+    scriptBlinkers();
 
     // ================================================================================
     // Building CodeMirror Editor

vite.config.js

@@ -12,7 +12,7 @@ const vitePWAconfiguration = {
     sourcemap: false,
     cleanupOutdatedCaches: true,
     globPatterns: [
-      "**/*.{js,css,html,gif,png,json,woff,json,ogg,wav,mp3,ico,png,svg}",
+      "**/*.{js,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
     ],
     // Thanks Froos :)
     runtimeCaching: [