--- a/web/Light9CursorCanvas.ts	Sat Jun 01 12:58:25 2024 -0700
+++ b/web/Light9CursorCanvas.ts	Sat Jun 01 13:32:58 2024 -0700
@@ -21,6 +21,17 @@
   mouse: { pos: () => Vector };
 }
 
+export interface PlainerViewState {
+  zoomSpec: { t1: number; t2: number };
+  fullZoomX: (t: number) => number;
+  zoomInX: (t: number) => number;
+  cursor: { t: number };
+  audioY: number;
+  audioH: number;
+  zoomedTimeY: number; // not what you think- it's the zone in between
+  zoomedTimeH: number;
+  mouse: { pos: Vector };
+}
 // For cases where you have a zoomed-out view on top of a zoomed-in view,
 // overlay this element and it'll draw a time cursor on both views.
 @customElement("light9-cursor-canvas")
@@ -39,14 +50,20 @@
   ctx!: CanvasRenderingContext2D;
   offsetWidth: any;
   offsetHeight: any;
-  @property() viewState: PlainViewState | null = null;
+  @property() viewState: PlainerViewState | null = null;
   static styles = [
     css`
       :host {
         display: inline-block;
       }
+      canvas {
+        width: 100%;
+        height: 100%;
+        
+      }
     `,
   ];
+  resizeObserver!: ResizeObserver;
   render() {
     return html`<canvas></canvas>`;
   }
@@ -58,31 +75,26 @@
   }
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener("resize", this.onResize);
-    this.onResize();
+    this.resizeObserver = new ResizeObserver(this.onResize.bind(this));
+    this.resizeObserver.observe(this);
   }
 
   firstUpdated() {
     this.canvasEl = this.shadowRoot!.firstElementChild as HTMLCanvasElement;
-    this.onResize();
     this.ctx = this.canvasEl.getContext("2d")!;
   }
 
   disconnectedCallback() {
-    window.removeEventListener("resize", this.onResize);
-    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
   }
 
-  // onViewState() {
-  //   ko.computed(this.redrawCursor.bind(this));
-  // }
-
   onResize() {
+    log('onResize', this.clientWidth, this.clientHeight);
     if (!this.canvasEl) {
       return;
     }
-    this.canvasEl.width = this.offsetWidth;
-    this.canvasEl.height = this.offsetHeight;
+    this.canvasEl.width = this.clientWidth;
+    this.canvasEl.height = this.clientHeight;
     this.redrawCursor();
   }
 
@@ -91,18 +103,17 @@
     if (!vs) {
       return;
     }
-    const dependOn = [vs.zoomSpec.t1(), vs.zoomSpec.t2()];
-    const xZoomedOut = vs.fullZoomX(vs.cursor.t());
-    const xZoomedIn = vs.zoomInX(vs.cursor.t());
+    const xZoomedOut = vs.fullZoomX(vs.cursor.t);
+    const xZoomedIn = vs.zoomInX(vs.cursor.t);
 
     this.cursorPath = {
-      top0: $V([xZoomedOut, vs.audioY()]),
-      top1: $V([xZoomedOut, vs.audioY() + vs.audioH()]),
-      mid0: $V([xZoomedIn + 2, vs.zoomedTimeY() + vs.zoomedTimeH()]),
-      mid1: $V([xZoomedIn - 2, vs.zoomedTimeY() + vs.zoomedTimeH()]),
-      mid2: $V([xZoomedOut - 1, vs.audioY() + vs.audioH()]),
-      mid3: $V([xZoomedOut + 1, vs.audioY() + vs.audioH()]),
-      bot0: $V([xZoomedIn, vs.zoomedTimeY() + vs.zoomedTimeH()]),
+      top0: $V([xZoomedOut, vs.audioY]),
+      top1: $V([xZoomedOut, vs.audioY + vs.audioH]),
+      mid0: $V([xZoomedIn + 2, vs.zoomedTimeY + vs.zoomedTimeH]),
+      mid1: $V([xZoomedIn - 2, vs.zoomedTimeY + vs.zoomedTimeH]),
+      mid2: $V([xZoomedOut - 1, vs.audioY + vs.audioH]),
+      mid3: $V([xZoomedOut + 1, vs.audioY + vs.audioH]),
+      bot0: $V([xZoomedIn, vs.zoomedTimeY + vs.zoomedTimeH]),
       bot1: $V([xZoomedIn, this.offsetHeight]),
     };
     this.redraw();
@@ -117,7 +128,7 @@
     this.ctx.strokeStyle = "#fff";
     this.ctx.lineWidth = 0.5;
     this.ctx.beginPath();
-    const mouse = this.viewState.mouse.pos();
+    const mouse = this.viewState.mouse.pos;
     line(this.ctx, $V([0, mouse.e(2)]), $V([this.canvasEl.width, mouse.e(2)]));
     line(this.ctx, $V([mouse.e(1), 0]), $V([mouse.e(1), this.canvasEl.height]));
     this.ctx.stroke();