Add on-demand rendering for more tabs (#204)

src/shared/renderers/JoysticksRenderer.ts

@@ -10,6 +10,8 @@ export default class JoysticksRenderer implements TabRenderer {
   private BLACK_COLOR = "#222222";
   private WHITE_COLOR = "#eeeeee";
 
+  private lastRenderState = "";
+
   constructor(root: HTMLElement) {
     this.CANVAS = root.getElementsByTagName("canvas")[0] as HTMLCanvasElement;
     for (let i = 0; i < 6; i++) {
@@ -33,11 +35,21 @@ export default class JoysticksRenderer implements TabRenderer {
     let context = this.CANVAS.getContext("2d") as CanvasRenderingContext2D;
     let canvasWidth = this.CANVAS.clientWidth;
     let canvasHeight = this.CANVAS.clientHeight;
+    let isLight = !window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    // Exit if render state unchanged
+    let renderState: any[] = [canvasWidth, canvasHeight, isLight, window.devicePixelRatio, command];
+    let renderStateString = JSON.stringify(renderState);
+    if (renderStateString === this.lastRenderState) {
+      return;
+    }
+    this.lastRenderState = renderStateString;
+
+    // Apply setup and scaling
     this.CANVAS.width = canvasWidth * window.devicePixelRatio;
     this.CANVAS.height = canvasHeight * window.devicePixelRatio;
     context.scale(window.devicePixelRatio, window.devicePixelRatio);
     context.clearRect(0, 0, canvasWidth, canvasHeight);
-    let isLight = !window.matchMedia("(prefers-color-scheme: dark)").matches;
 
     // Iterate over joysticks
     command.forEach((joystick, index) => {

src/shared/renderers/LineGraphRenderer.ts

@@ -14,6 +14,7 @@ export default class LineGraphRenderer implements TabRenderer {
 
   private hasController: boolean;
   private scrollSensor: ScrollSensor;
+  private lastRenderState = "";
   private mouseDownX = 0;
   private grabZoomActive = false;
   private grabZoomStartTime = 0;
@@ -94,6 +95,16 @@ export default class LineGraphRenderer implements TabRenderer {
     let width = this.CANVAS.clientWidth;
     let height = this.CANVAS.clientHeight;
     let light = !window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    // Exit if render state unchanged
+    let renderState: any[] = [width, height, light, devicePixelRatio, command, this.lastCursorX];
+    let renderStateString = JSON.stringify(renderState);
+    if (renderStateString === this.lastRenderState) {
+      return;
+    }
+    this.lastRenderState = renderStateString;
+
+    // Apply setup and scaling
     this.CANVAS.width = width * devicePixelRatio;
     this.CANVAS.height = height * devicePixelRatio;
     context.scale(devicePixelRatio, devicePixelRatio);

src/shared/renderers/OdometryRenderer.ts

@@ -13,13 +13,16 @@ export default class OdometryRenderer implements TabRenderer {
   private heatmap: Heatmap;
   private lastImageSource = "";
   private aspectRatio = 1;
+  private lastRenderState = "";
+  private imageLoadCount = 0;
 
   constructor(root: HTMLElement) {
     this.CONTAINER = root.getElementsByClassName("odometry-canvas-container")[0] as HTMLElement;
     this.CANVAS = root.getElementsByClassName("odometry-canvas")[0] as HTMLCanvasElement;
     this.IMAGE = document.createElement("img");
     this.HEATMAP_CONTAINER = root.getElementsByClassName("odometry-heatmap-container")[0] as HTMLElement;
     this.heatmap = new Heatmap(this.HEATMAP_CONTAINER);
+    this.IMAGE.addEventListener("load", () => this.imageLoadCount++);
   }
 
   saveState(): unknown {
@@ -33,11 +36,21 @@ export default class OdometryRenderer implements TabRenderer {
   }
 
   render(command: OdometryRendererCommand): void {
-    // Set up canvas
+    // Get setup
     let context = this.CANVAS.getContext("2d") as CanvasRenderingContext2D;
     let isVertical = command.orientation === Orientation.DEG_90 || command.orientation === Orientation.DEG_270;
     let width = isVertical ? this.CONTAINER.clientHeight : this.CONTAINER.clientWidth;
     let height = isVertical ? this.CONTAINER.clientWidth : this.CONTAINER.clientHeight;
+
+    // Exit if render state unchanged
+    let renderState: any[] = [width, height, window.devicePixelRatio, command, this.imageLoadCount];
+    let renderStateString = JSON.stringify(renderState);
+    if (renderStateString === this.lastRenderState) {
+      return;
+    }
+    this.lastRenderState = renderStateString;
+
+    // Set up canvas
     this.CANVAS.style.width = width.toString() + "px";
     this.CANVAS.style.height = height.toString() + "px";
     this.CANVAS.width = width * window.devicePixelRatio;
@@ -70,7 +83,6 @@ export default class OdometryRenderer implements TabRenderer {
       this.lastImageSource = gameData.path;
       this.IMAGE.src = gameData.path;
     }
-    if (!(this.IMAGE.width > 0 && this.IMAGE.height > 0)) return;
 
     // Determine if objects are flipped
     let objectsFlipped = command.origin === "red";

src/shared/renderers/SwerveRenderer.ts

@@ -9,6 +9,8 @@ export default class SwerveRenderer implements TabRenderer {
   private BLACK_COLOR = "#222222";
   private WHITE_COLOR = "#eeeeee";
 
+  private lastRenderState = "";
+
   constructor(root: HTMLElement) {
     this.CONTAINER = root.firstElementChild as HTMLElement;
     this.CANVAS = this.CONTAINER.firstElementChild as HTMLCanvasElement;
@@ -25,6 +27,20 @@ export default class SwerveRenderer implements TabRenderer {
   }
 
   render(command: SwerveRendererCommand): void {
+    // Exit if render state unchanged
+    let renderState: any[] = [
+      this.CONTAINER.clientWidth,
+      this.CONTAINER.clientHeight,
+      window.matchMedia("(prefers-color-scheme: dark)").matches,
+      window.devicePixelRatio,
+      command
+    ];
+    let renderStateString = JSON.stringify(renderState);
+    if (renderStateString === this.lastRenderState) {
+      return;
+    }
+    this.lastRenderState = renderStateString;
+
     // Update canvas size
     let context = this.CANVAS.getContext("2d") as CanvasRenderingContext2D;
     let size = Math.min(this.CONTAINER.clientWidth, this.CONTAINER.clientHeight);