perfetto-ui: Draw area selection as a box
Also change the color of the tracks as the user draws the box.
Change-Id: I932a3e8e2f3c9de267f12ab8e2c164b516fbd7a6
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index 098bd81..fb798b4 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -64,8 +64,9 @@
const dragClass = this.dragging ? `drag` : '';
const dropClass = this.dropping ? `drop-${this.dropping}` : '';
const selectedArea = globals.frontendLocalState.selectedArea.area;
- const markSelectedClass =
- selectedArea && selectedArea.tracks.includes(attrs.trackState.id) ?
+ const markSelectedClass = selectedArea &&
+ selectedArea.tracks.includes(attrs.trackState.id) &&
+ !globals.frontendLocalState.selectingArea ?
'selected' :
'';
return m(
@@ -253,8 +254,25 @@
return m(TrackComponent, {trackState: this.trackState, track: this.track});
}
+ highlightIfTrackSelected(ctx: CanvasRenderingContext2D, size: PanelSize) {
+ const localState = globals.frontendLocalState;
+ const area = localState.selectedArea.area;
+ if (area && area.tracks.includes(this.trackState.id)) {
+ const timeScale = localState.timeScale;
+ ctx.fillStyle = '#ebeef9';
+ ctx.fillRect(
+ timeScale.timeToPx(area.startSec) + TRACK_SHELL_WIDTH,
+ 0,
+ timeScale.deltaTimeToPx(area.endSec - area.startSec),
+ size.height);
+ }
+ }
+
renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
ctx.save();
+
+ this.highlightIfTrackSelected(ctx, size);
+
drawGridLines(
ctx,
globals.frontendLocalState.timeScale,
@@ -286,7 +304,8 @@
size.height,
`rgb(52,69,150)`);
}
- if (localState.selectedArea.area !== undefined) {
+ if (localState.selectedArea.area !== undefined &&
+ !globals.frontendLocalState.selectingArea) {
drawVerticalSelection(
ctx,
localState.timeScale,
