@@ -24,11 +24,12 @@ import {
24
24
rectEqualToRect ,
25
25
View ,
26
26
} from '../view-base' ;
27
- import { BORDER_SIZE , COLORS , SNAPSHOT_HEIGHT } from './constants' ;
27
+ import { BORDER_SIZE , COLORS , SNAPSHOT_SCRUBBER_SIZE } from './constants' ;
28
28
29
29
type OnHover = ( node : Snapshot | null ) => void ;
30
30
31
31
export class SnapshotsView extends View {
32
+ _hoverLocation : Point | null = null ;
32
33
_intrinsicSize : Size ;
33
34
_profilerData : ReactProfilerData ;
34
35
@@ -39,7 +40,7 @@ export class SnapshotsView extends View {
39
40
40
41
this . _intrinsicSize = {
41
42
width : profilerData . duration ,
42
- height : SNAPSHOT_HEIGHT ,
43
+ height : profilerData . snapshotHeight ,
43
44
} ;
44
45
this . _profilerData = profilerData ;
45
46
}
@@ -49,6 +50,7 @@ export class SnapshotsView extends View {
49
50
}
50
51
51
52
draw ( context : CanvasRenderingContext2D ) {
53
+ const snapshotHeight = this . _profilerData . snapshotHeight ;
52
54
const { visibleArea} = this ;
53
55
54
56
context . fillStyle = COLORS . BACKGROUND ;
@@ -72,8 +74,8 @@ export class SnapshotsView extends View {
72
74
break ;
73
75
}
74
76
75
- const scaledHeight = SNAPSHOT_HEIGHT ;
76
- const scaledWidth = ( snapshot . width * SNAPSHOT_HEIGHT ) / snapshot . height ;
77
+ const scaledHeight = snapshotHeight ;
78
+ const scaledWidth = ( snapshot . width * snapshotHeight ) / snapshot . height ;
77
79
78
80
const imageRect : Rect = {
79
81
origin : {
@@ -96,6 +98,28 @@ export class SnapshotsView extends View {
96
98
97
99
x += scaledWidth + BORDER_SIZE ;
98
100
}
101
+
102
+ const hoverLocation = this . _hoverLocation ;
103
+ if ( hoverLocation !== null ) {
104
+ const scrubberWidth = SNAPSHOT_SCRUBBER_SIZE + BORDER_SIZE * 2 ;
105
+ const scrubberOffset = scrubberWidth / 2 ;
106
+
107
+ context . fillStyle = COLORS . SCRUBBER_BORDER ;
108
+ context . fillRect (
109
+ hoverLocation . x - scrubberOffset ,
110
+ visibleArea . origin . y ,
111
+ scrubberWidth ,
112
+ visibleArea . size . height ,
113
+ ) ;
114
+
115
+ context . fillStyle = COLORS . SCRUBBER_BACKGROUND ;
116
+ context . fillRect (
117
+ hoverLocation . x - scrubberOffset + BORDER_SIZE ,
118
+ visibleArea . origin . y ,
119
+ SNAPSHOT_SCRUBBER_SIZE ,
120
+ visibleArea . size . height ,
121
+ ) ;
122
+ }
99
123
}
100
124
101
125
handleInteraction ( interaction : Interaction , viewRefs : ViewRefs ) {
@@ -208,15 +232,29 @@ export class SnapshotsView extends View {
208
232
}
209
233
210
234
if ( ! rectContainsPoint ( location , visibleArea ) ) {
235
+ if ( this . _hoverLocation !== null ) {
236
+ this . _hoverLocation = null ;
237
+
238
+ this . setNeedsDisplay ( ) ;
239
+ }
240
+
211
241
onHover ( null ) ;
212
242
return ;
213
243
}
214
244
215
245
const snapshot = this . _findClosestSnapshot ( location . x ) ;
216
246
if ( snapshot !== null ) {
247
+ this . _hoverLocation = location ;
248
+
217
249
onHover ( snapshot ) ;
218
250
} else {
251
+ this . _hoverLocation = null ;
252
+
219
253
onHover ( null ) ;
220
254
}
255
+
256
+ // Any time the mouse moves within the boundaries of this view, we need to re-render.
257
+ // This is because we draw a scrubbing bar that shows the location corresponding to the current tooltip.
258
+ this . setNeedsDisplay ( ) ;
221
259
}
222
260
}
0 commit comments