Mercurial > code > home > repos > light9

annotate web/Light9CursorCanvas.ts @ 2405:69ca2b2fc133

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
overcomplicated attempt at persisting the pane layout in the rdf graph this was hard because we have to somehow wait for the graph to load before config'ing the panes
author drewp@bigasterisk.com
date Fri, 17 May 2024 16:58:26 -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 }