Mercurial > code > home > repos > light9

annotate web/Light9CursorCanvas.ts @ 2446:e7e03c203c99

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
resize cursor canvas for 400px tall spectros. fix canvas resolution code
author drewp@bigasterisk.com
date Sat, 01 Jun 2024 13:32:58 -0700
parents 06da5db2fafe
children
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
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
24 export interface PlainerViewState {
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
25 zoomSpec: { t1: number; t2: number };
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
26 fullZoomX: (t: number) => number;
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
27 zoomInX: (t: number) => number;
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
28 cursor: { t: number };
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
29 audioY: number;
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
30 audioH: number;
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
31 zoomedTimeY: number; // not what you think- it's the zone in between
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
32 zoomedTimeH: number;
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
33 mouse: { pos: Vector };
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
34 }
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
35 // 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
36 // 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
37 @customElement("light9-cursor-canvas")
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
38 export class Light9CursorCanvas extends LitElement {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
39 cursorPath: null | {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
40 top0: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
41 top1: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
42 mid0: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
43 mid1: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
44 mid2: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
45 mid3: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
46 bot0: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
47 bot1: Vector;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
48 } = null;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
49 canvasEl!: HTMLCanvasElement;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
50 ctx!: CanvasRenderingContext2D;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
51 offsetWidth: any;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
52 offsetHeight: any;
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
53 @property() viewState: PlainerViewState | null = null;
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
54 static styles = [
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
55 css`
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
56 :host {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
57 display: inline-block;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
58 }
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
59 canvas {
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
60 width: 100%;
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
61 height: 100%;
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
62
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
63 }
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
64 `,
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
65 ];
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
66 resizeObserver!: ResizeObserver;
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
67 render() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
68 return html`<canvas></canvas>`;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
69 }
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
70
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
71 updated(changedProperties: PropertyValues) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
72 if (changedProperties.has("viewState")) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
73 this.redrawCursor();
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 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
76 connectedCallback() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
77 super.connectedCallback();
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
78 this.resizeObserver = new ResizeObserver(this.onResize.bind(this));
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
79 this.resizeObserver.observe(this);
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
80 }
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
81
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
82 firstUpdated() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
83 this.canvasEl = this.shadowRoot!.firstElementChild as HTMLCanvasElement;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
84 this.ctx = this.canvasEl.getContext("2d")!;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
85 }
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 disconnectedCallback() {
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
88 this.resizeObserver.unobserve(this);
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
89 }
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
90
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
91 onResize() {
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
92 log('onResize', this.clientWidth, this.clientHeight);
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
93 if (!this.canvasEl) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
94 return;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
95 }
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
96 this.canvasEl.width = this.clientWidth;
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
97 this.canvasEl.height = this.clientHeight;
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
98 this.redrawCursor();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
99 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
100
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
101 redrawCursor() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
102 const vs = this.viewState;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
103 if (!vs) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
104 return;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
105 }
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
106 const xZoomedOut = vs.fullZoomX(vs.cursor.t);
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
107 const xZoomedIn = vs.zoomInX(vs.cursor.t);
1702
c8543026d609 extract cursor-canvas code
Drew Perttula <drewp@bigasterisk.com>
parents:
diff changeset
108
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
109 this.cursorPath = {
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
110 top0: $V([xZoomedOut, vs.audioY]),
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
111 top1: $V([xZoomedOut, vs.audioY + vs.audioH]),
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
112 mid0: $V([xZoomedIn + 2, vs.zoomedTimeY + vs.zoomedTimeH]),
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
113 mid1: $V([xZoomedIn - 2, vs.zoomedTimeY + vs.zoomedTimeH]),
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
114 mid2: $V([xZoomedOut - 1, vs.audioY + vs.audioH]),
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
115 mid3: $V([xZoomedOut + 1, vs.audioY + vs.audioH]),
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
116 bot0: $V([xZoomedIn, vs.zoomedTimeY + vs.zoomedTimeH]),
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
117 bot1: $V([xZoomedIn, this.offsetHeight]),
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
118 };
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
119 this.redraw();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
120 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
121
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
122 redraw() {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
123 if (!this.ctx || !this.viewState) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
124 return;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
125 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
126 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
127
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
128 this.ctx.strokeStyle = "#fff";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
129 this.ctx.lineWidth = 0.5;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
130 this.ctx.beginPath();
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
131 const mouse = this.viewState.mouse.pos;
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
132 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
133 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
134 this.ctx.stroke();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
135
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
136 if (this.cursorPath) {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
137 this.ctx.strokeStyle = "#ff0303";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
138 this.ctx.lineWidth = 1.5;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
139 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
140 line(this.ctx, this.cursorPath.top0, this.cursorPath.top1);
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
141 this.ctx.stroke();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
142
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
143 this.ctx.fillStyle = "#9c0303";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
144 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
145 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
146 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
147 this.ctx.lineTo(p.e(1), p.e(2));
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
148 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
149 this.ctx.fill();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
150
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
151 this.ctx.strokeStyle = "#ff0303";
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
152 this.ctx.lineWidth = 3;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
153 this.ctx.beginPath();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
154 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
155 this.ctx.stroke();
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
156 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
157 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 1734
diff changeset
158 }