Mercurial > code > home > repos > light9

comparison 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
comparison
equal deleted inserted replaced
2445:af83aeef8b0a 2446:e7e03c203c99
19 zoomedTimeY: () => number; // not what you think- it's the zone in between 19 zoomedTimeY: () => number; // not what you think- it's the zone in between
20 zoomedTimeH: () => number; 20 zoomedTimeH: () => number;
21 mouse: { pos: () => Vector }; 21 mouse: { pos: () => Vector };
22 } 22 }
23 23
24 export interface PlainerViewState {
25 zoomSpec: { t1: number; t2: number };
26 fullZoomX: (t: number) => number;
27 zoomInX: (t: number) => number;
28 cursor: { t: number };
29 audioY: number;
30 audioH: number;
31 zoomedTimeY: number; // not what you think- it's the zone in between
32 zoomedTimeH: number;
33 mouse: { pos: Vector };
34 }
24 // For cases where you have a zoomed-out view on top of a zoomed-in view, 35 // For cases where you have a zoomed-out view on top of a zoomed-in view,
25 // overlay this element and it'll draw a time cursor on both views. 36 // overlay this element and it'll draw a time cursor on both views.
26 @customElement("light9-cursor-canvas") 37 @customElement("light9-cursor-canvas")
27 export class Light9CursorCanvas extends LitElement { 38 export class Light9CursorCanvas extends LitElement {
28 cursorPath: null | { 39 cursorPath: null | {
37 } = null; 48 } = null;
38 canvasEl!: HTMLCanvasElement; 49 canvasEl!: HTMLCanvasElement;
39 ctx!: CanvasRenderingContext2D; 50 ctx!: CanvasRenderingContext2D;
40 offsetWidth: any; 51 offsetWidth: any;
41 offsetHeight: any; 52 offsetHeight: any;
42 @property() viewState: PlainViewState | null = null; 53 @property() viewState: PlainerViewState | null = null;
43 static styles = [ 54 static styles = [
44 css` 55 css`
45 :host { 56 :host {
46 display: inline-block; 57 display: inline-block;
47 } 58 }
59 canvas {
60 width: 100%;
61 height: 100%;
62
63 }
48 `, 64 `,
49 ]; 65 ];
66 resizeObserver!: ResizeObserver;
50 render() { 67 render() {
51 return html`<canvas></canvas>`; 68 return html`<canvas></canvas>`;
52 } 69 }
53 70
54 updated(changedProperties: PropertyValues) { 71 updated(changedProperties: PropertyValues) {
56 this.redrawCursor(); 73 this.redrawCursor();
57 } 74 }
58 } 75 }
59 connectedCallback() { 76 connectedCallback() {
60 super.connectedCallback(); 77 super.connectedCallback();
61 window.addEventListener("resize", this.onResize); 78 this.resizeObserver = new ResizeObserver(this.onResize.bind(this));
62 this.onResize(); 79 this.resizeObserver.observe(this);
63 } 80 }
64 81
65 firstUpdated() { 82 firstUpdated() {
66 this.canvasEl = this.shadowRoot!.firstElementChild as HTMLCanvasElement; 83 this.canvasEl = this.shadowRoot!.firstElementChild as HTMLCanvasElement;
67 this.onResize();
68 this.ctx = this.canvasEl.getContext("2d")!; 84 this.ctx = this.canvasEl.getContext("2d")!;
69 } 85 }
70 86
71 disconnectedCallback() { 87 disconnectedCallback() {
72 window.removeEventListener("resize", this.onResize); 88 this.resizeObserver.unobserve(this);
73 super.disconnectedCallback();
74 } 89 }
75 90
76 // onViewState() {
77 // ko.computed(this.redrawCursor.bind(this));
78 // }
79
80 onResize() { 91 onResize() {
92 log('onResize', this.clientWidth, this.clientHeight);
81 if (!this.canvasEl) { 93 if (!this.canvasEl) {
82 return; 94 return;
83 } 95 }
84 this.canvasEl.width = this.offsetWidth; 96 this.canvasEl.width = this.clientWidth;
85 this.canvasEl.height = this.offsetHeight; 97 this.canvasEl.height = this.clientHeight;
86 this.redrawCursor(); 98 this.redrawCursor();
87 } 99 }
88 100
89 redrawCursor() { 101 redrawCursor() {
90 const vs = this.viewState; 102 const vs = this.viewState;
91 if (!vs) { 103 if (!vs) {
92 return; 104 return;
93 } 105 }
94 const dependOn = [vs.zoomSpec.t1(), vs.zoomSpec.t2()]; 106 const xZoomedOut = vs.fullZoomX(vs.cursor.t);
95 const xZoomedOut = vs.fullZoomX(vs.cursor.t()); 107 const xZoomedIn = vs.zoomInX(vs.cursor.t);
96 const xZoomedIn = vs.zoomInX(vs.cursor.t());
97 108
98 this.cursorPath = { 109 this.cursorPath = {
99 top0: $V([xZoomedOut, vs.audioY()]), 110 top0: $V([xZoomedOut, vs.audioY]),
100 top1: $V([xZoomedOut, vs.audioY() + vs.audioH()]), 111 top1: $V([xZoomedOut, vs.audioY + vs.audioH]),
101 mid0: $V([xZoomedIn + 2, vs.zoomedTimeY() + vs.zoomedTimeH()]), 112 mid0: $V([xZoomedIn + 2, vs.zoomedTimeY + vs.zoomedTimeH]),
102 mid1: $V([xZoomedIn - 2, vs.zoomedTimeY() + vs.zoomedTimeH()]), 113 mid1: $V([xZoomedIn - 2, vs.zoomedTimeY + vs.zoomedTimeH]),
103 mid2: $V([xZoomedOut - 1, vs.audioY() + vs.audioH()]), 114 mid2: $V([xZoomedOut - 1, vs.audioY + vs.audioH]),
104 mid3: $V([xZoomedOut + 1, vs.audioY() + vs.audioH()]), 115 mid3: $V([xZoomedOut + 1, vs.audioY + vs.audioH]),
105 bot0: $V([xZoomedIn, vs.zoomedTimeY() + vs.zoomedTimeH()]), 116 bot0: $V([xZoomedIn, vs.zoomedTimeY + vs.zoomedTimeH]),
106 bot1: $V([xZoomedIn, this.offsetHeight]), 117 bot1: $V([xZoomedIn, this.offsetHeight]),
107 }; 118 };
108 this.redraw(); 119 this.redraw();
109 } 120 }
110 121
115 this.ctx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height); 126 this.ctx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
116 127
117 this.ctx.strokeStyle = "#fff"; 128 this.ctx.strokeStyle = "#fff";
118 this.ctx.lineWidth = 0.5; 129 this.ctx.lineWidth = 0.5;
119 this.ctx.beginPath(); 130 this.ctx.beginPath();
120 const mouse = this.viewState.mouse.pos(); 131 const mouse = this.viewState.mouse.pos;
121 line(this.ctx, $V([0, mouse.e(2)]), $V([this.canvasEl.width, mouse.e(2)])); 132 line(this.ctx, $V([0, mouse.e(2)]), $V([this.canvasEl.width, mouse.e(2)]));
122 line(this.ctx, $V([mouse.e(1), 0]), $V([mouse.e(1), this.canvasEl.height])); 133 line(this.ctx, $V([mouse.e(1), 0]), $V([mouse.e(1), this.canvasEl.height]));
123 this.ctx.stroke(); 134 this.ctx.stroke();
124 135
125 if (this.cursorPath) { 136 if (this.cursorPath) {