Mercurial > code > home > repos > light9

annotate web/Light9CursorCanvas.ts @ 2445:af83aeef8b0a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fancier spectrograms
author drewp@bigasterisk.com
date Sat, 01 Jun 2024 12:58:25 -0700
parents 06da5db2fafe
children e7e03c203c99
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
1 import debug from "debug";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
2 import { css, html, LitElement, PropertyValues } from "lit";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
3 import { customElement, property } from "lit/decorators.js";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
4 import Sylvester from "sylvester";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
5 import { line } from "./drawing";
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
6 import { Vector } from "./lib/sylvester";
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
7
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
8 const $V = Sylvester.Vector.create;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
9
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
10 const log = debug("cursor");
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
11
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
12 export interface PlainViewState {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
13 zoomSpec: { t1: () => number; t2: () => number };
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
14 fullZoomX: (t: number) => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
15 zoomInX: (t: number) => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
16 cursor: { t: () => number };
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
17 audioY: () => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
18 audioH: () => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
19 zoomedTimeY: () => number; // not what you think- it's the zone in between
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
20 zoomedTimeH: () => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
21 mouse: { pos: () => Vector };
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
22 }
1730
7d2d20f06d1d cleanup viewstate change notifications. Use ko.computed more.
Drew Perttula <drewp@bigasterisk.com>
parents: 1727
diff changeset
23
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
24 // For cases where you have a zoomed-out view on top of a zoomed-in view,
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
25 // overlay this element and it'll draw a time cursor on both views.
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
26 @customElement("light9-cursor-canvas")
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
27 export class Light9CursorCanvas extends LitElement {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
28 cursorPath: null | {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
29 top0: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
30 top1: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
31 mid0: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
32 mid1: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
33 mid2: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
34 mid3: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
35 bot0: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
36 bot1: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
37 } = null;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
38 canvasEl!: HTMLCanvasElement;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
39 ctx!: CanvasRenderingContext2D;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
40 offsetWidth: any;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
41 offsetHeight: any;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
42 @property() viewState: PlainViewState | null = null;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
43 static styles = [
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
44 css`
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
45 :host {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
46 display: inline-block;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
47 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
48 `,
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
49 ];
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
50 render() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
51 return html`<canvas></canvas>`;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
52 }
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
53
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
54 updated(changedProperties: PropertyValues) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
55 if (changedProperties.has("viewState")) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
56 this.redrawCursor();
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
57 }
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
58 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
59 connectedCallback() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
60 super.connectedCallback();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
61 window.addEventListener("resize", this.onResize);
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
62 this.onResize();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
63 }
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
64
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
65 firstUpdated() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
66 this.canvasEl = this.shadowRoot!.firstElementChild as HTMLCanvasElement;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
67 this.onResize();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
68 this.ctx = this.canvasEl.getContext("2d")!;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
69 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
70
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
71 disconnectedCallback() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
72 window.removeEventListener("resize", this.onResize);
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
73 super.disconnectedCallback();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
74 }
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
75
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
76 // onViewState() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
77 // ko.computed(this.redrawCursor.bind(this));
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
78 // }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
79
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
80 onResize() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
81 if (!this.canvasEl) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
82 return;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
83 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
84 this.canvasEl.width = this.offsetWidth;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
85 this.canvasEl.height = this.offsetHeight;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
86 this.redrawCursor();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
87 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
88
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
89 redrawCursor() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
90 const vs = this.viewState;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
91 if (!vs) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
92 return;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
93 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
94 const dependOn = [vs.zoomSpec.t1(), vs.zoomSpec.t2()];
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
95 const xZoomedOut = vs.fullZoomX(vs.cursor.t());
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
96 const xZoomedIn = vs.zoomInX(vs.cursor.t());
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
97
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
98 this.cursorPath = {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
99 top0: $V([xZoomedOut, vs.audioY()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
100 top1: $V([xZoomedOut, vs.audioY() + vs.audioH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
101 mid0: $V([xZoomedIn + 2, vs.zoomedTimeY() + vs.zoomedTimeH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
102 mid1: $V([xZoomedIn - 2, vs.zoomedTimeY() + vs.zoomedTimeH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
103 mid2: $V([xZoomedOut - 1, vs.audioY() + vs.audioH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
104 mid3: $V([xZoomedOut + 1, vs.audioY() + vs.audioH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
105 bot0: $V([xZoomedIn, vs.zoomedTimeY() + vs.zoomedTimeH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
106 bot1: $V([xZoomedIn, this.offsetHeight]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
107 };
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
108 this.redraw();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
109 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
110
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
111 redraw() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
112 if (!this.ctx || !this.viewState) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
113 return;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
114 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
115 this.ctx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
116
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
117 this.ctx.strokeStyle = "#fff";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
118 this.ctx.lineWidth = 0.5;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
119 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
120 const mouse = this.viewState.mouse.pos();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
121 line(this.ctx, $V([0, mouse.e(2)]), $V([this.canvasEl.width, mouse.e(2)]));
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
122 line(this.ctx, $V([mouse.e(1), 0]), $V([mouse.e(1), this.canvasEl.height]));
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
123 this.ctx.stroke();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
124
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
125 if (this.cursorPath) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
126 this.ctx.strokeStyle = "#ff0303";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
127 this.ctx.lineWidth = 1.5;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
128 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
129 line(this.ctx, this.cursorPath.top0, this.cursorPath.top1);
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
130 this.ctx.stroke();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
131
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
132 this.ctx.fillStyle = "#9c0303";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
133 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
134 this.ctx.moveTo(this.cursorPath.mid0.e(1), this.cursorPath.mid0.e(2));
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
135 for (let p of [this.cursorPath.mid1, this.cursorPath.mid2, this.cursorPath.mid3]) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
136 this.ctx.lineTo(p.e(1), p.e(2));
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
137 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
138 this.ctx.fill();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
139
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
140 this.ctx.strokeStyle = "#ff0303";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
141 this.ctx.lineWidth = 3;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
142 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
143 line(this.ctx, this.cursorPath.bot0, this.cursorPath.bot1, "#ff0303", "3px");
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
144 this.ctx.stroke();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
145 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
146 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
147 }