1 |
|
2 |
|
3 |
|
4 |
|
5 | import {Overlay} from './common.js';
|
6 |
|
7 | const darkGridColor = 'rgba(0 0 0 / 0.7)';
|
8 | const gridBackgroundColor = 'rgba(255 255 255 / 0.8)';
|
9 |
|
10 | function formatNumber(n: number): string {
|
11 | return n % 1 ? n.toFixed(2) : String(n);
|
12 | }
|
13 |
|
14 | export class ViewportSizeOverlay extends Overlay {
|
15 | install() {
|
16 | this.document.body.classList.add('fill');
|
17 | const canvas = this.document.createElement('canvas');
|
18 | canvas.id = 'canvas';
|
19 | canvas.classList.add('fill');
|
20 | this.document.body.append(canvas);
|
21 | this.setCanvas(canvas);
|
22 | super.install();
|
23 | }
|
24 |
|
25 | uninstall() {
|
26 | this.document.body.classList.remove('fill');
|
27 | this.document.body.innerHTML = '';
|
28 | super.uninstall();
|
29 | }
|
30 |
|
31 | drawViewSize() {
|
32 | const viewportSize = this.viewportSizeForMediaQueries || this.viewportSize;
|
33 | const text = `${formatNumber(viewportSize.width)}px \xD7 ${formatNumber(viewportSize.height)}px`;
|
34 | const canvasWidth = this.canvasWidth || 0;
|
35 | this.context.save();
|
36 | this.context.font = `14px ${this.window.getComputedStyle(document.body).fontFamily}`;
|
37 | const textWidth = this.context.measureText(text).width;
|
38 | this.context.fillStyle = gridBackgroundColor;
|
39 | this.context.fillRect(canvasWidth - textWidth - 12, 0, canvasWidth, 25);
|
40 | this.context.fillStyle = darkGridColor;
|
41 | this.context.fillText(text, canvasWidth - textWidth - 6, 18);
|
42 | this.context.restore();
|
43 | }
|
44 | }
|