steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 16:52:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix profile overlay size and glitch when dragging

Browse Source
This commit is contained in:
vcoppe
2024-07-15 11:37:22 +02:00
parent 111eb5c4df
commit 339ecc1c87
1 changed files with 59 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
website/src/lib/components/ElevationProfile.svelte
View File

@@ -179,9 +179,8 @@
} }
}, },
stacked: false, stacked: false,
onResize: function (chart, size) { onResize: function () {
overlay.width = size.width; updateOverlay();
overlay.height = size.height;
updateShowAdditionalScales(); updateShowAdditionalScales();
} }
}; };
@@ -280,10 +279,6 @@
updateShowAdditionalScales(); updateShowAdditionalScales();
// Overlay canvas to create a selection rectangle
overlay.width = canvas.width;
overlay.height = canvas.height;
let startIndex = 0; let startIndex = 0;
let endIndex = 0; let endIndex = 0;
function getIndex(evt) { function getIndex(evt) {
@@ -295,13 +290,18 @@
}, },
true true
); );
const rect = canvas.getBoundingClientRect();
if (points.length === 0) { if (points.length === 0) {
return evt.x - rect.left <= chart.chartArea.left const rect = canvas.getBoundingClientRect();
? 0 if (evt.x - rect.left <= chart.chartArea.left) {
: $gpxStatistics.local.points.length - 1; return 0;
} else if (evt.x - rect.left >= chart.chartArea.right) {
return $gpxStatistics.local.points.length - 1;
} else {
return undefined;
}
} }
let point = points.find((point) => point.element.raw); let point = points.find((point) => point.element.raw);
if (point) { if (point) {
return point.element.raw.index; return point.element.raw.index;
@@ -320,12 +320,16 @@
if (dragStarted) { if (dragStarted) {
dragging = true; dragging = true;
endIndex = getIndex(evt); endIndex = getIndex(evt);
if (startIndex !== endIndex) { if (endIndex !== undefined) {
$slicedGPXStatistics = [ if (startIndex === undefined) {
$gpxStatistics.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)), startIndex = endIndex;
Math.min(startIndex, endIndex), } else if (startIndex !== endIndex) {
Math.max(startIndex, endIndex) $slicedGPXStatistics = [
]; $gpxStatistics.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)),
Math.min(startIndex, endIndex),
Math.max(startIndex, endIndex)
];
}
} }
} }
} }
@@ -506,37 +510,48 @@
chart.update(); chart.update();
} }
$: if ($slicedGPXStatistics) { function updateOverlay() {
let startIndex = $slicedGPXStatistics[1]; if (!canvas) {
let endIndex = $slicedGPXStatistics[2]; return;
// Draw selection rectangle
let selectionContext = overlay.getContext('2d');
if (selectionContext) {
selectionContext.globalAlpha = 0.1;
selectionContext.clearRect(0, 0, overlay.width, overlay.height);
let startPixel = chart.scales.x.getPixelForValue(
getConvertedDistance($gpxStatistics.local.distance.total[startIndex])
);
let endPixel = chart.scales.x.getPixelForValue(
getConvertedDistance($gpxStatistics.local.distance.total[endIndex])
);
selectionContext.fillRect(
startPixel,
chart.chartArea.top,
endPixel - startPixel,
chart.chartArea.bottom - chart.chartArea.top
);
} }
} else if (overlay) {
let selectionContext = overlay.getContext('2d'); overlay.width = canvas.width / window.devicePixelRatio;
if (selectionContext) { overlay.height = canvas.height / window.devicePixelRatio;
selectionContext.clearRect(0, 0, overlay.width, overlay.height);
if ($slicedGPXStatistics) {
let startIndex = $slicedGPXStatistics[1];
let endIndex = $slicedGPXStatistics[2];
// Draw selection rectangle
let selectionContext = overlay.getContext('2d');
if (selectionContext) {
selectionContext.globalAlpha = 0.1;
selectionContext.clearRect(0, 0, overlay.width, overlay.height);
let startPixel = chart.scales.x.getPixelForValue(
getConvertedDistance($gpxStatistics.local.distance.total[startIndex])
);
let endPixel = chart.scales.x.getPixelForValue(
getConvertedDistance($gpxStatistics.local.distance.total[endIndex])
);
selectionContext.fillRect(
startPixel,
chart.chartArea.top,
endPixel - startPixel,
chart.chartArea.bottom - chart.chartArea.top
);
}
} else if (overlay) {
let selectionContext = overlay.getContext('2d');
if (selectionContext) {
selectionContext.clearRect(0, 0, overlay.width, overlay.height);
}
} }
} }
$: $slicedGPXStatistics, updateOverlay();
onDestroy(() => { onDestroy(() => {
if (chart) { if (chart) {
chart.destroy(); chart.destroy();