noisymime
/
hyper-tuner-cloud
mirror of https://github.com/noisymime/hyper-tuner-cloud.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix zoom flicker

This commit is contained in:
Piotr Rogowski 2021-03-28 19:39:11 +02:00
parent 4f01067d85
commit bf213ce000
No known key found for this signature in database
GPG Key ID: F40F61D5587F5673
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Log/Canvas.tsx
View File

@ -50,16 +50,18 @@ const Canvas = ({ data }: { data: LogEntry[] }) => {
const maxTime = lastEntry.Time / (zoom < 1 ? 1 : zoom); const maxTime = lastEntry.Time / (zoom < 1 ? 1 : zoom);
const xScale = canvas.width / maxTime; const xScale = canvas.width / maxTime;
const firstEntry = data[0]; const firstEntry = data[0];
const scaledLength = canvas.width * zoom / 1; const scaledWidth = canvas.width * zoom / 1;
setRightBoundary(-(scaledLength - canvas.width)); const start = pan;
let start = pan; setRightBoundary(-(scaledWidth - canvas.width));
if (pan > leftBoundary) { if (zoom < 1) {
start = leftBoundary; setZoom(1);
setPan(0);
return;
} }
if (pan < rightBoundary) { if (pan > leftBoundary || pan < rightBoundary) {
start = rightBoundary; return;
} }
const plotEntry = (field: string, yScale: number, color: string) => { const plotEntry = (field: string, yScale: number, color: string) => {
@ -69,6 +71,7 @@ const Canvas = ({ data }: { data: LogEntry[] }) => {
// initial value // initial value
ctx.moveTo(start + firstEntry.Time, canvas.height - (firstEntry[field] * yScale)); ctx.moveTo(start + firstEntry.Time, canvas.height - (firstEntry[field] * yScale));
// TODO: slice array according to the visible part
data.forEach((entry) => { data.forEach((entry) => {
const time = entry.Time * xScale; // scale time to max width const time = entry.Time * xScale; // scale time to max width
const value = canvas.height - (entry[field] * yScale); // scale the value const value = canvas.height - (entry[field] * yScale); // scale the value
@ -103,7 +106,13 @@ const Canvas = ({ data }: { data: LogEntry[] }) => {
const onWheel = (e: WheelEvent) => { const onWheel = (e: WheelEvent) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) { if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
setZoom((current) => current < 1 ? 1 : current - e.deltaY / 100); setZoom((current) => {
if (current < 1) {
setPan(0);
return 1;
}
return current - e.deltaY / 100;
});
} }
if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) { if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
setPan((current) => checkPan(current, current - e.deltaX)); setPan((current) => checkPan(current, current - e.deltaX));
@ -112,7 +121,6 @@ const Canvas = ({ data }: { data: LogEntry[] }) => {
const onMouseMove = (e: MouseEvent) => { const onMouseMove = (e: MouseEvent) => {
setIndicatorPos(e.nativeEvent.offsetX); setIndicatorPos(e.nativeEvent.offsetX);
if (isMouseDown) { if (isMouseDown) {
setPan((current) => checkPan(current, current + e.movementX)); setPan((current) => checkPan(current, current + e.movementX));
} }