Mercurial > code > home > repos > light9

annotate web/Light9CursorCanvas.ts @ 2408:7e7874fed2e3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
buttons to add panels to the layout
author drewp@bigasterisk.com
date Sat, 18 May 2024 21:02:32 -0700
parents 4556eebe5d73
children 06da5db2fafe
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";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
6
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
7 const $V = Sylvester.Vector.create;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
8
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
9 const log = debug("cursor");
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
10
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
11 export interface PlainViewState {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
12 zoomSpec: { t1: () => number; t2: () => number };
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
13 fullZoomX: (t: number) => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
14 zoomInX: (t: number) => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
15 cursor: { t: () => number };
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
16 audioY: () => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
17 audioH: () => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
18 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
19 zoomedTimeH: () => number;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
20 mouse: { pos: () => Vector };
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
21 }
1730
7d2d20f06d1d cleanup viewstate change notifications. Use ko.computed more.
Drew Perttula <drewp@bigasterisk.com>
parents: 1727
diff changeset
22
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
23 // 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
24 // 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
25 @customElement("light9-cursor-canvas")
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
26 export class Light9CursorCanvas extends LitElement {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
27 cursorPath: null | {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
28 top0: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
29 top1: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
30 mid0: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
31 mid1: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
32 mid2: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
33 mid3: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
34 bot0: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
35 bot1: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
36 } = null;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
37 canvasEl!: HTMLCanvasElement;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
38 ctx!: CanvasRenderingContext2D;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
39 offsetWidth: any;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
40 offsetHeight: any;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
41 @property() viewState: PlainViewState | null = null;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
42 static styles = [
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
43 css`
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
44 :host {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
45 display: inline-block;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
46 }
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 render() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
50 return html`<canvas></canvas>`;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
51 }
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
52
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
53 updated(changedProperties: PropertyValues) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
54 if (changedProperties.has("viewState")) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
55 this.redrawCursor();
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
56 }
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
57 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
58 connectedCallback() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
59 super.connectedCallback();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
60 window.addEventListener("resize", this.onResize);
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
61 this.onResize();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
62 }
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
63
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
64 firstUpdated() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
65 this.canvasEl = this.shadowRoot!.firstElementChild as HTMLCanvasElement;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
66 this.onResize();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
67 this.ctx = this.canvasEl.getContext("2d")!;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
68 }
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 disconnectedCallback() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
71 window.removeEventListener("resize", this.onResize);
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
72 super.disconnectedCallback();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
73 }
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
74
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
75 // onViewState() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
76 // ko.computed(this.redrawCursor.bind(this));
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
77 // }
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 onResize() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
80 if (!this.canvasEl) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
81 return;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
82 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
83 this.canvasEl.width = this.offsetWidth;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
84 this.canvasEl.height = this.offsetHeight;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
85 this.redrawCursor();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
86 }
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 redrawCursor() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
89 const vs = this.viewState;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
90 if (!vs) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
91 return;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
92 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
93 const dependOn = [vs.zoomSpec.t1(), vs.zoomSpec.t2()];
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
94 const xZoomedOut = vs.fullZoomX(vs.cursor.t());
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
95 const xZoomedIn = vs.zoomInX(vs.cursor.t());
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
96
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
97 this.cursorPath = {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
98 top0: $V([xZoomedOut, vs.audioY()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
99 top1: $V([xZoomedOut, vs.audioY() + vs.audioH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
100 mid0: $V([xZoomedIn + 2, vs.zoomedTimeY() + vs.zoomedTimeH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
101 mid1: $V([xZoomedIn - 2, vs.zoomedTimeY() + vs.zoomedTimeH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
102 mid2: $V([xZoomedOut - 1, vs.audioY() + vs.audioH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
103 mid3: $V([xZoomedOut + 1, vs.audioY() + vs.audioH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
104 bot0: $V([xZoomedIn, vs.zoomedTimeY() + vs.zoomedTimeH()]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
105 bot1: $V([xZoomedIn, this.offsetHeight]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
106 };
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
107 this.redraw();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
108 }
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 redraw() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
111 if (!this.ctx || !this.viewState) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
112 return;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
113 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
114 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
115
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
116 this.ctx.strokeStyle = "#fff";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
117 this.ctx.lineWidth = 0.5;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
118 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
119 const mouse = this.viewState.mouse.pos();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
120 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
121 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
122 this.ctx.stroke();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
123
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
124 if (this.cursorPath) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
125 this.ctx.strokeStyle = "#ff0303";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
126 this.ctx.lineWidth = 1.5;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
127 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
128 line(this.ctx, this.cursorPath.top0, this.cursorPath.top1);
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
129 this.ctx.stroke();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
130
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
131 this.ctx.fillStyle = "#9c0303";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
132 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
133 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
134 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
135 this.ctx.lineTo(p.e(1), p.e(2));
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
136 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
137 this.ctx.fill();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
138
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
139 this.ctx.strokeStyle = "#ff0303";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
140 this.ctx.lineWidth = 3;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
141 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
142 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
143 this.ctx.stroke();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
144 }
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 }