forked from facebook/react
-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
canvas.js
107 lines (88 loc) · 2.35 KB
/
canvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type {Data} from './index';
import type {Rect} from '../utils';
import type {NativeType} from '../../types';
const OUTLINE_COLOR = '#f0f0f0';
// Note these colors are in sync with DevTools Profiler chart colors.
const COLORS = [
'#37afa9',
'#63b19e',
'#80b393',
'#97b488',
'#abb67d',
'#beb771',
'#cfb965',
'#dfba57',
'#efbb49',
'#febc38',
];
let canvas: HTMLCanvasElement | null = null;
export function draw(nodeToData: Map<NativeType, Data>): void {
if (canvas === null) {
initialize();
}
const canvasFlow: HTMLCanvasElement = ((canvas: any): HTMLCanvasElement);
canvasFlow.width = window.innerWidth;
canvasFlow.height = window.innerHeight;
const context = canvasFlow.getContext('2d');
context.clearRect(0, 0, canvasFlow.width, canvasFlow.height);
nodeToData.forEach(({count, rect}) => {
if (rect !== null) {
const colorIndex = Math.min(COLORS.length - 1, count - 1);
const color = COLORS[colorIndex];
drawBorder(context, rect, color);
}
});
}
function drawBorder(
context: CanvasRenderingContext2D,
rect: Rect,
color: string,
): void {
const {height, left, top, width} = rect;
// outline
context.lineWidth = 1;
context.strokeStyle = OUTLINE_COLOR;
context.strokeRect(left - 1, top - 1, width + 2, height + 2);
// inset
context.lineWidth = 1;
context.strokeStyle = OUTLINE_COLOR;
context.strokeRect(left + 1, top + 1, width - 1, height - 1);
context.strokeStyle = color;
context.setLineDash([0]);
// border
context.lineWidth = 1;
context.strokeRect(left, top, width - 1, height - 1);
context.setLineDash([0]);
}
export function destroy(): void {
if (canvas !== null) {
if (canvas.parentNode != null) {
canvas.parentNode.removeChild(canvas);
}
canvas = null;
}
}
function initialize(): void {
canvas = window.document.createElement('canvas');
canvas.style.cssText = `
xx-background-color: red;
xx-opacity: 0.5;
bottom: 0;
left: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: 1000000000;
`;
const root = window.document.documentElement;
root.insertBefore(canvas, root.firstChild);
}