light9 Changeset - e7e03c203c99

Changeset - e7e03c203c99

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

drewp@bigasterisk.com - 8 months ago 2024-06-01 20:32:58
drewp@bigasterisk.com

resize cursor canvas for 400px tall spectros. fix canvas resolution code

3 files changed with 49 insertions and 34 deletions:

web/Light9CursorCanvas.ts

web/ascoltami/Light9AscoltamiTimeline.ts

web/light9-timeline-audio.ts

0 comments (0 inline, 0 general)

web/Light9CursorCanvas.ts

➞

Show inline comments

@@ @@ -21,6 +21,17 @@ export interface PlainViewState { @@
   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 @@ export class Light9CursorCanvas extends @@
   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 @@ export class Light9CursorCanvas extends @@
+  }
   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 @@ export class Light9CursorCanvas extends @@
     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 @@ export class Light9CursorCanvas extends @@
     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();

web/ascoltami/Light9AscoltamiTimeline.ts

➞

Show inline comments

@@ @@ -2,7 +2,7 @@ import { css, html, LitElement, Property @@
 import { customElement, property, state } from "lit/decorators.js";
 import Sylvester from "sylvester";
 import { Zoom } from "../light9-timeline-audio";
 import { PlainViewState } from "../Light9CursorCanvas";
+import { PlainerViewState, PlainViewState } from "../Light9CursorCanvas";
 import { getTopGraph } from "../RdfdbSyncedGraph";
 import { show } from "../show_specific";
 import { SyncedGraph } from "../SyncedGraph";
@@ @@ -31,11 +31,11 @@ export class Light9AscoltamiTimeline ext @@
         position: relative;
+      }
       #overview {
-        height: 60px;
+        height: 400px;
+      }
       #zoomed {
         margin-top: 40px;
-        height: 80px;
+        height: 400px;
+      }
       #cursor {
         position: absolute;
@@ @@ -44,6 +44,9 @@ export class Light9AscoltamiTimeline ext @@
         width: 100%;
         height: 100%;
+      }
       #timeSlider {
         height: 0;
+      }
     `,
   ];
   graph!: SyncedGraph;
@@ @@ -58,7 +61,7 @@ export class Light9AscoltamiTimeline ext @@
   @property() playerTime: number = 0;
   @state() zoom: Zoom;
   @state() overviewZoom: Zoom;
-  @state() viewState: PlainViewState | null = null;
+  @state() viewState: PlainerViewState | null = null;
   constructor() {
     super();
     getTopGraph().then((g) => {
@@ @@ -87,15 +90,15 @@ export class Light9AscoltamiTimeline ext @@
     this.zoom = { duration: duration, t1, t2 };
     const w = timeRow.offsetWidth;
     this.viewState = {
       zoomSpec: { t1: () => t1, t2: () => t2 },
       cursor: { t: () => t },
       audioY: () => 0,
       audioH: () => 60,
       zoomedTimeY: () => 60,
       zoomedTimeH: () => 40,
       zoomSpec: { t1: t1, t2: t2 },
       cursor: { t: t },
       audioY: 0,
       audioH: 400,
       zoomedTimeY: 400,
       zoomedTimeH: 40,
       fullZoomX: (sec: number) => (sec / duration) * w,
       zoomInX: (sec: number) => ((sec - t1) / (t2 - t1)) * w,
-      mouse: { pos: () => $V([0, 0]) },
       mouse: { pos: $V([0, 0]) },
     };
+  }

web/light9-timeline-audio.ts

➞

Show inline comments

@@ @@ -36,6 +36,7 @@ export class Light9TimelineAudio extends @@
           /* shouldn't be seen, but black is correct for 'no
          audio'. Maybe loading stripes would be better */
           background: #202322;
           outline: 1px solid #333;
+        }
         div {
           width: 100%;

0 comments (0 inline, 0 general)