julien/meadows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(editor): align the playhead with the chart's left gutter

Browse Source 
valToPos returns CSS pixels relative to the plot area, but the overlay
sits on the canvas, so the playhead was short by the y-axis width and
started before x=0.
This commit is contained in:
Julien Calixte
2026-06-20 15:01:21 +02:00
parent 2c7ec6a6ec
commit d570425402
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/SimChart.vue
View File

@@ -57,7 +57,9 @@ function syncMarker(): void {
} }
// bbox is in device pixels; the overlay is laid out in CSS pixels. // bbox is in device pixels; the overlay is laid out in CSS pixels.
const ratio = window.devicePixelRatio || 1 const ratio = window.devicePixelRatio || 1
markerX.value = plot.valToPos(props.marker, "x") // valToPos (CSS px) is relative to the plot area's left edge, but the overlay
// is positioned against the canvas, so add the left gutter (the y-axis width).
markerX.value = plot.bbox.left / ratio + plot.valToPos(props.marker, "x")
markerTop.value = plot.bbox.top / ratio markerTop.value = plot.bbox.top / ratio
markerHeight.value = plot.bbox.height / ratio markerHeight.value = plot.bbox.height / ratio
} }