Merge "[ui] Pass canvas size into Track.render() functions." into main
diff --git a/ui/src/common/track_adapter.ts b/ui/src/common/track_adapter.ts
index 9afa02b..35fe5db 100644
--- a/ui/src/common/track_adapter.ts
+++ b/ui/src/common/track_adapter.ts
@@ -17,6 +17,7 @@
import {assertExists} from '../base/logging';
import {duration, time} from '../base/time';
+import {PanelSize} from '../frontend/panel';
import {NewTrackArgs} from '../frontend/track';
import {SliceRect} from '../public';
import {EngineProxy} from '../trace_processor/engine';
@@ -100,8 +101,8 @@
return await this.controller.onBoundsChange(start, end, resolution);
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
- this.track.renderCanvas(ctx);
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
+ this.track.renderCanvas(ctx, size);
}
}
@@ -133,7 +134,7 @@
this.trackKey = args.trackKey;
}
- abstract renderCanvas(ctx: CanvasRenderingContext2D): void;
+ abstract renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void;
getSliceRect(_tStart: time, _tEnd: time, _depth: number): SliceRect
|undefined {
diff --git a/ui/src/common/track_helper.ts b/ui/src/common/track_helper.ts
index f634627..8990a44 100644
--- a/ui/src/common/track_helper.ts
+++ b/ui/src/common/track_helper.ts
@@ -17,6 +17,7 @@
import {duration, Time, time} from '../base/time';
import {raf} from '../core/raf_scheduler';
import {globals} from '../frontend/globals';
+import {PanelSize} from '../frontend/panel';
import {SliceRect, Track, TrackContext} from '../public';
import {TrackData} from './track_data';
@@ -89,14 +90,14 @@
abstract onBoundsChange(start: time, end: time, resolution: duration):
Promise<Data>;
- abstract renderCanvas(ctx: CanvasRenderingContext2D): void;
+ abstract renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void;
- render(ctx: CanvasRenderingContext2D): void {
+ render(ctx: CanvasRenderingContext2D, size: PanelSize): void {
if (this.shouldLoadNewData()) {
this.loadData();
}
- this.renderCanvas(ctx);
+ this.renderCanvas(ctx, size);
}
private loadData(): void {
diff --git a/ui/src/frontend/base_counter_track.ts b/ui/src/frontend/base_counter_track.ts
index ae7145d..5081cb7 100644
--- a/ui/src/frontend/base_counter_track.ts
+++ b/ui/src/frontend/base_counter_track.ts
@@ -29,6 +29,7 @@
import {checkerboardExcept} from './checkerboard';
import {globals} from './globals';
+import {PanelSize} from './panel';
import {constraintsToQuerySuffix} from './sql_utils';
import {NewTrackArgs, TrackBase} from './track';
import {CacheKey, TrackCache} from './track_cache';
@@ -175,11 +176,10 @@
];
}
- renderCanvas(ctx: CanvasRenderingContext2D) {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
const {
visibleTimeScale: timeScale,
visibleWindowTime: vizTime,
- windowSpan,
} = globals.frontendLocalState;
{
@@ -237,7 +237,7 @@
}
const effectiveHeight = this.getHeight() - MARGIN_TOP;
- const endPx = windowSpan.end;
+ const endPx = size.width;
const zeroY = MARGIN_TOP + effectiveHeight / (minimumValue < 0 ? 2 : 1);
// Quantize the Y axis to quarters of powers of tens (7.5K, 10K, 12.5K).
@@ -373,8 +373,8 @@
checkerboardExcept(
ctx,
this.getHeight(),
- windowSpan.start,
- windowSpan.end,
+ 0,
+ size.width,
timeScale.timeToPx(this.countersKey.start),
timeScale.timeToPx(this.countersKey.end));
}
diff --git a/ui/src/frontend/base_slice_track.ts b/ui/src/frontend/base_slice_track.ts
index 2c873da..95855cf 100644
--- a/ui/src/frontend/base_slice_track.ts
+++ b/ui/src/frontend/base_slice_track.ts
@@ -36,6 +36,7 @@
import {checkerboardExcept} from './checkerboard';
import {globals} from './globals';
+import {PanelSize} from './panel';
import {DEFAULT_SLICE_LAYOUT, SliceLayout} from './slice_layout';
import {constraintsToQuerySuffix} from './sql_utils';
import {NewTrackArgs, TrackBase} from './track';
@@ -325,7 +326,7 @@
return `${size}px Roboto Condensed`;
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
// TODO(hjd): fonts and colors should come from the CSS and not hardcoded
// here.
const {
@@ -545,8 +546,8 @@
checkerboardExcept(
ctx,
this.getHeight(),
- timeScale.hpTimeToPx(vizTime.start),
- timeScale.hpTimeToPx(vizTime.end),
+ 0,
+ size.width,
timeScale.timeToPx(this.slicesKey.start),
timeScale.timeToPx(this.slicesKey.end));
diff --git a/ui/src/frontend/notes_panel.ts b/ui/src/frontend/notes_panel.ts
index 1904f32..1d7589c 100644
--- a/ui/src/frontend/notes_panel.ts
+++ b/ui/src/frontend/notes_panel.ts
@@ -215,7 +215,7 @@
ctx.strokeStyle = color;
const topOffset = 10;
// Don't draw in the track shell section.
- if (x >= globals.frontendLocalState.windowSpan.start + TRACK_SHELL_WIDTH) {
+ if (x >= TRACK_SHELL_WIDTH) {
// Draw left triangle.
ctx.beginPath();
ctx.moveTo(x, topOffset);
@@ -235,8 +235,7 @@
ctx.stroke();
// Start line after track shell section, join triangles.
- const startDraw = Math.max(
- x, globals.frontendLocalState.windowSpan.start + TRACK_SHELL_WIDTH);
+ const startDraw = Math.max(x, TRACK_SHELL_WIDTH);
ctx.beginPath();
ctx.moveTo(startDraw, topOffset);
ctx.lineTo(xEnd, topOffset);
diff --git a/ui/src/frontend/slice_track.ts b/ui/src/frontend/slice_track.ts
index 0264d07..685ff8c 100644
--- a/ui/src/frontend/slice_track.ts
+++ b/ui/src/frontend/slice_track.ts
@@ -24,6 +24,7 @@
import {CROP_INCOMPLETE_SLICE_FLAG} from './base_slice_track';
import {checkerboardExcept} from './checkerboard';
import {globals} from './globals';
+import {PanelSize} from './panel';
export const SLICE_TRACK_KIND = 'ChromeSliceTrack';
const SLICE_HEIGHT = 18;
@@ -76,21 +77,20 @@
return '12px Roboto Condensed';
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
// TODO: fonts and colors should come from the CSS and not hardcoded here.
const data = this.data;
if (data === undefined) return; // Can't possibly draw anything.
- const {visibleTimeSpan, visibleWindowTime, visibleTimeScale, windowSpan} =
- globals.frontendLocalState;
+ const {visibleTimeSpan, visibleTimeScale} = globals.frontendLocalState;
// If the cached trace slices don't fully cover the visible time range,
// show a gray rectangle with a "Loading..." label.
checkerboardExcept(
ctx,
this.getHeight(),
- visibleTimeScale.hpTimeToPx(visibleWindowTime.start),
- visibleTimeScale.hpTimeToPx(visibleWindowTime.end),
+ 0,
+ size.width,
visibleTimeScale.timeToPx(data.start),
visibleTimeScale.timeToPx(data.end),
);
@@ -125,7 +125,7 @@
continue;
}
- const pxEnd = windowSpan.end;
+ const pxEnd = size.width;
const left = Math.max(visibleTimeScale.timeToPx(tStart), 0);
const right = Math.min(visibleTimeScale.timeToPx(tEnd), pxEnd);
diff --git a/ui/src/frontend/track.ts b/ui/src/frontend/track.ts
index 7fcce0b..3cc79f1 100644
--- a/ui/src/frontend/track.ts
+++ b/ui/src/frontend/track.ts
@@ -18,6 +18,7 @@
import {SliceRect, Track, TrackContext} from '../public';
import {EngineProxy} from '../trace_processor/engine';
+import {PanelSize} from './panel';
// Args passed to the track constructors when creating a new track.
export interface NewTrackArgs {
trackKey: string;
@@ -40,7 +41,8 @@
// this object is removed.
onDestroy() {}
- protected abstract renderCanvas(ctx: CanvasRenderingContext2D): void;
+ protected abstract renderCanvas(
+ ctx: CanvasRenderingContext2D, size: PanelSize): void;
getHeight(): number {
return 40;
@@ -62,8 +64,8 @@
onFullRedraw(): void {}
- render(ctx: CanvasRenderingContext2D) {
- this.renderCanvas(ctx);
+ render(ctx: CanvasRenderingContext2D, size: PanelSize) {
+ this.renderCanvas(ctx, size);
}
// Returns a place where a given slice should be drawn. Should be implemented
diff --git a/ui/src/frontend/track_group_panel.ts b/ui/src/frontend/track_group_panel.ts
index ec6e7e6..6b69607 100644
--- a/ui/src/frontend/track_group_panel.ts
+++ b/ui/src/frontend/track_group_panel.ts
@@ -237,7 +237,8 @@
ctx.save();
ctx.translate(this.shellWidth, 0);
if (this.summaryTrack) {
- this.summaryTrack.render(ctx);
+ const trackSize = {...size, width: size.width - this.shellWidth};
+ this.summaryTrack.render(ctx, trackSize);
}
ctx.restore();
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index dec3a65..afd58c6 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -444,7 +444,8 @@
ctx.translate(TRACK_SHELL_WIDTH, 0);
if (this.track !== undefined) {
- this.track.render(ctx);
+ const trackSize = {...size, width: size.width - TRACK_SHELL_WIDTH};
+ this.track.render(ctx, trackSize);
} else {
checkerboard(ctx, size.height, 0, size.width - TRACK_SHELL_WIDTH);
}
diff --git a/ui/src/public/index.ts b/ui/src/public/index.ts
index 81f9225..7a2aaf2 100644
--- a/ui/src/public/index.ts
+++ b/ui/src/public/index.ts
@@ -17,6 +17,7 @@
import {Hotkey} from '../base/hotkeys';
import {duration, time} from '../base/time';
import {ColorScheme} from '../common/colorizer';
+import {PanelSize} from '../frontend/panel';
import {Store} from '../frontend/store';
import {EngineProxy} from '../trace_processor/engine';
@@ -172,7 +173,7 @@
export interface Track {
onCreate(ctx: TrackContext): void;
- render(ctx: CanvasRenderingContext2D): void;
+ render(ctx: CanvasRenderingContext2D, size: PanelSize): void;
onFullRedraw(): void;
getSliceRect(tStart: time, tEnd: time, depth: number): SliceRect|undefined;
getHeight(): number;
diff --git a/ui/src/tracks/android_log/index.ts b/ui/src/tracks/android_log/index.ts
index 2f78a57..04237b6 100644
--- a/ui/src/tracks/android_log/index.ts
+++ b/ui/src/tracks/android_log/index.ts
@@ -21,6 +21,7 @@
import {LIMIT, TrackData} from '../../common/track_data';
import {checkerboardExcept} from '../../frontend/checkerboard';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {NewTrackArgs} from '../../frontend/track';
import {
Plugin,
@@ -107,8 +108,8 @@
super(args);
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
- const {visibleTimeScale, windowSpan} = globals.frontendLocalState;
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
+ const {visibleTimeScale} = globals.frontendLocalState;
const data = this.data();
@@ -116,16 +117,9 @@
const dataStartPx = visibleTimeScale.timeToPx(data.start);
const dataEndPx = visibleTimeScale.timeToPx(data.end);
- const visibleStartPx = windowSpan.start;
- const visibleEndPx = windowSpan.end;
checkerboardExcept(
- ctx,
- this.getHeight(),
- visibleStartPx,
- visibleEndPx,
- dataStartPx,
- dataEndPx);
+ ctx, this.getHeight(), 0, size.width, dataStartPx, dataEndPx);
const quantWidth =
Math.max(EVT_PX, visibleTimeScale.durationToPx(data.resolution));
diff --git a/ui/src/tracks/counter/index.ts b/ui/src/tracks/counter/index.ts
index 4f2b7f4..f9b61a5 100644
--- a/ui/src/tracks/counter/index.ts
+++ b/ui/src/tracks/counter/index.ts
@@ -29,6 +29,7 @@
} from '../../common/track_helper';
import {checkerboardExcept} from '../../frontend/checkerboard';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {
EngineProxy,
LONG,
@@ -348,11 +349,10 @@
);
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
// TODO: fonts and colors should come from the CSS and not hardcoded here.
const {
visibleTimeScale: timeScale,
- windowSpan,
} = globals.frontendLocalState;
const data = this.data;
@@ -389,7 +389,7 @@
minimumValue = data.minimumRate;
}
- const endPx = windowSpan.end;
+ const endPx = size.width;
const zeroY = MARGIN_TOP + RECT_HEIGHT / (minimumValue < 0 ? 2 : 1);
// Quantize the Y axis to quarters of powers of tens (7.5K, 10K, 12.5K).
@@ -550,8 +550,8 @@
checkerboardExcept(
ctx,
this.getHeight(),
- windowSpan.start,
- windowSpan.end,
+ 0,
+ size.width,
timeScale.timeToPx(data.start),
timeScale.timeToPx(data.end));
}
diff --git a/ui/src/tracks/cpu_freq/index.ts b/ui/src/tracks/cpu_freq/index.ts
index aa421f6..06f3087 100644
--- a/ui/src/tracks/cpu_freq/index.ts
+++ b/ui/src/tracks/cpu_freq/index.ts
@@ -27,6 +27,7 @@
import {TrackData} from '../../common/track_data';
import {checkerboardExcept} from '../../frontend/checkerboard';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {NewTrackArgs} from '../../frontend/track';
import {
Plugin,
@@ -288,12 +289,11 @@
return MARGIN_TOP + RECT_HEIGHT;
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
// TODO: fonts and colors should come from the CSS and not hardcoded here.
const {
visibleTimeScale,
visibleWindowTime,
- windowSpan,
} = globals.frontendLocalState;
const data = this.data();
@@ -307,7 +307,7 @@
assertTrue(data.timestamps.length === data.maxFreqKHz.length);
assertTrue(data.timestamps.length === data.lastIdleValues.length);
- const endPx = windowSpan.end;
+ const endPx = size.width;
const zeroY = MARGIN_TOP + RECT_HEIGHT;
// Quantize the Y axis to quarters of powers of tens (7.5K, 10K, 12.5K).
@@ -456,8 +456,8 @@
checkerboardExcept(
ctx,
this.getHeight(),
- windowSpan.start,
- windowSpan.end,
+ 0,
+ size.width,
visibleTimeScale.timeToPx(data.start),
visibleTimeScale.timeToPx(data.end));
}
diff --git a/ui/src/tracks/cpu_profile/index.ts b/ui/src/tracks/cpu_profile/index.ts
index 59ad373..df0916b 100644
--- a/ui/src/tracks/cpu_profile/index.ts
+++ b/ui/src/tracks/cpu_profile/index.ts
@@ -24,6 +24,7 @@
} from '../../common/track_adapter';
import {TrackData} from '../../common/track_data';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {TimeScale} from '../../frontend/time_scale';
import {NewTrackArgs} from '../../frontend/track';
import {
@@ -102,7 +103,7 @@
return MARGIN_TOP + RECT_HEIGHT - 1;
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, _size: PanelSize): void {
const {
visibleTimeScale: timeScale,
} = globals.frontendLocalState;
diff --git a/ui/src/tracks/cpu_slices/index.ts b/ui/src/tracks/cpu_slices/index.ts
index 0e9c470..f4b2830 100644
--- a/ui/src/tracks/cpu_slices/index.ts
+++ b/ui/src/tracks/cpu_slices/index.ts
@@ -34,6 +34,7 @@
import {TrackData} from '../../common/track_data';
import {checkerboardExcept} from '../../frontend/checkerboard';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {NewTrackArgs} from '../../frontend/track';
import {
EngineProxy,
@@ -217,9 +218,9 @@
return TRACK_HEIGHT;
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
// TODO: fonts and colors should come from the CSS and not hardcoded here.
- const {visibleTimeScale, windowSpan} = globals.frontendLocalState;
+ const {visibleTimeScale} = globals.frontendLocalState;
const data = this.data();
if (data === undefined) return; // Can't possibly draw anything.
@@ -229,8 +230,8 @@
checkerboardExcept(
ctx,
this.getHeight(),
- windowSpan.start,
- windowSpan.end,
+ 0,
+ size.width,
visibleTimeScale.timeToPx(data.start),
visibleTimeScale.timeToPx(data.end));
diff --git a/ui/src/tracks/ftrace/index.ts b/ui/src/tracks/ftrace/index.ts
index 75c741e..6ae8474 100644
--- a/ui/src/tracks/ftrace/index.ts
+++ b/ui/src/tracks/ftrace/index.ts
@@ -18,6 +18,7 @@
import {TrackHelperLEGACY} from '../../common/track_helper';
import {checkerboardExcept} from '../../frontend/checkerboard';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {
EngineProxy,
Plugin,
@@ -89,10 +90,9 @@
return result;
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
const {
visibleTimeScale,
- windowSpan,
} = globals.frontendLocalState;
const data = this.data;
@@ -101,16 +101,9 @@
const dataStartPx = visibleTimeScale.timeToPx(data.start);
const dataEndPx = visibleTimeScale.timeToPx(data.end);
- const visibleStartPx = windowSpan.start;
- const visibleEndPx = windowSpan.end;
checkerboardExcept(
- ctx,
- this.getHeight(),
- visibleStartPx,
- visibleEndPx,
- dataStartPx,
- dataEndPx);
+ ctx, this.getHeight(), 0, size.width, dataStartPx, dataEndPx);
const diamondSideLen = RECT_HEIGHT / Math.sqrt(2);
diff --git a/ui/src/tracks/perf_samples_profile/index.ts b/ui/src/tracks/perf_samples_profile/index.ts
index dd30045..a78e36d 100644
--- a/ui/src/tracks/perf_samples_profile/index.ts
+++ b/ui/src/tracks/perf_samples_profile/index.ts
@@ -24,6 +24,7 @@
import {TrackData} from '../../common/track_data';
import {FLAMEGRAPH_HOVERED_COLOR} from '../../frontend/flamegraph';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {TimeScale} from '../../frontend/time_scale';
import {NewTrackArgs} from '../../frontend/track';
import {
@@ -99,7 +100,7 @@
return MARGIN_TOP + RECT_HEIGHT - 1;
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, _size: PanelSize): void {
const {
visibleTimeScale,
} = globals.frontendLocalState;
diff --git a/ui/src/tracks/process_summary/process_scheduling_track.ts b/ui/src/tracks/process_summary/process_scheduling_track.ts
index a955278..455cac5 100644
--- a/ui/src/tracks/process_summary/process_scheduling_track.ts
+++ b/ui/src/tracks/process_summary/process_scheduling_track.ts
@@ -28,6 +28,7 @@
import {TrackData} from '../../common/track_data';
import {checkerboardExcept} from '../../frontend/checkerboard';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {NewTrackArgs} from '../../frontend/track';
import {
LONG,
@@ -200,11 +201,10 @@
return TRACK_HEIGHT;
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
// TODO: fonts and colors should come from the CSS and not hardcoded here.
const {
visibleTimeScale,
- visibleWindowTime,
visibleTimeSpan,
} = globals.frontendLocalState;
const data = this.data();
@@ -216,8 +216,8 @@
checkerboardExcept(
ctx,
this.getHeight(),
- visibleTimeScale.hpTimeToPx(visibleWindowTime.start),
- visibleTimeScale.hpTimeToPx(visibleWindowTime.end),
+ 0,
+ size.width,
visibleTimeScale.timeToPx(data.start),
visibleTimeScale.timeToPx(data.end));
diff --git a/ui/src/tracks/process_summary/process_summary_track.ts b/ui/src/tracks/process_summary/process_summary_track.ts
index ee0bcc8..383dcb3 100644
--- a/ui/src/tracks/process_summary/process_summary_track.ts
+++ b/ui/src/tracks/process_summary/process_summary_track.ts
@@ -20,6 +20,7 @@
import {LIMIT, TrackData} from '../../common/track_data';
import {checkerboardExcept} from '../../frontend/checkerboard';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {NewTrackArgs} from '../../frontend/track';
import {NUM} from '../../trace_processor/query_result';
@@ -150,10 +151,9 @@
return TRACK_HEIGHT;
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
const {
visibleTimeScale,
- windowSpan,
} = globals.frontendLocalState;
const data = this.data();
if (data === undefined) return; // Can't possibly draw anything.
@@ -161,8 +161,8 @@
checkerboardExcept(
ctx,
this.getHeight(),
- windowSpan.start,
- windowSpan.end,
+ 0,
+ size.width,
visibleTimeScale.timeToPx(data.start),
visibleTimeScale.timeToPx(data.end));
@@ -171,8 +171,8 @@
// TODO(dproy): Dedup with CPU slices.
renderSummary(ctx: CanvasRenderingContext2D, data: Data): void {
- const {visibleTimeScale, windowSpan} = globals.frontendLocalState;
- const startPx = windowSpan.start;
+ const {visibleTimeScale} = globals.frontendLocalState;
+ const startPx = 0;
const bottomY = TRACK_HEIGHT;
let lastX = startPx;
diff --git a/ui/src/tracks/thread_state/index.ts b/ui/src/tracks/thread_state/index.ts
index 7544ddb..074025e 100644
--- a/ui/src/tracks/thread_state/index.ts
+++ b/ui/src/tracks/thread_state/index.ts
@@ -28,6 +28,7 @@
import {TrackData} from '../../common/track_data';
import {checkerboardExcept} from '../../frontend/checkerboard';
import {globals} from '../../frontend/globals';
+import {PanelSize} from '../../frontend/panel';
import {NewTrackArgs} from '../../frontend/track';
import {
Plugin,
@@ -187,11 +188,10 @@
return 2 * MARGIN_TOP + RECT_HEIGHT;
}
- renderCanvas(ctx: CanvasRenderingContext2D): void {
+ renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): void {
const {
visibleTimeScale: timeScale,
visibleTimeSpan,
- windowSpan,
} = globals.frontendLocalState;
const data = this.data();
const charWidth = ctx.measureText('dbpqaouk').width / 8;
@@ -205,8 +205,8 @@
checkerboardExcept(
ctx,
this.getHeight(),
- windowSpan.start,
- windowSpan.end,
+ 0,
+ size.width,
timeScale.timeToPx(data.start),
timeScale.timeToPx(data.end),
);
@@ -257,7 +257,7 @@
const rectStart =
Math.max(0 - EXCESS_WIDTH, timeScale.timeToPx(tStart));
const rectEnd =
- Math.min(windowSpan.end + EXCESS_WIDTH, timeScale.timeToPx(tEnd));
+ Math.min(size.width + EXCESS_WIDTH, timeScale.timeToPx(tEnd));
ctx.strokeStyle = colorScheme.base.cssString;
ctx.beginPath();
ctx.lineWidth = 3;
