Making throttling work (at last)

This commit is contained in:
Eric van der Vlist 2022-09-08 15:00:36 +02:00
parent 2caf590a21
commit 0fb7f47207
2 changed files with 31 additions and 16 deletions

View File

@ -5,7 +5,7 @@ import '../theme/background.css';
const Background: react.FC<{ shift: { x: number; y: number } }> = (props: {
shift: { x: number; y: number };
}) => {
console.log('rendering background');
console.log(`--- Rendering background, props: ${JSON.stringify(props)} ---`);
return (
<div

View File

@ -1,4 +1,4 @@
import react, { useMemo, useState } from 'react';
import react, { useCallback, useMemo, useState } from 'react';
import _ from 'lodash';
@ -7,7 +7,8 @@ import Background from './background';
import '../theme/viewport.css';
const Viewport: react.FC<{}> = (props: {}) => {
console.log('rendering viewport');
console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
const [shift, setShift] = useState({ x: 1000, y: 1000 });
const initialMouseState = {
@ -16,50 +17,64 @@ const Viewport: react.FC<{}> = (props: {}) => {
};
const [mouseState, setMouseState] = useState(initialMouseState);
console.log('mouseState: ' + JSON.stringify(mouseState));
console.log('viewport, mouseState: ' + JSON.stringify(mouseState));
const genericHandler = (event: any) => {
console.log('Log - Event: ' + event.type);
console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
console.log('mouseState: ' + JSON.stringify(mouseState));
};
// TODO: implement resize and focusout or blur events
// TODO: check boundaries
const mouseDownHandler = (event: any) => {
genericHandler(event);
event.preventDefault();
setMouseState({
down: true,
starting: { x: event.pageX, y: event.pageY },
});
genericHandler(event);
};
const mouseUpHandler = (event: any) => {
event.preventDefault();
console.log('Log - Up, now do something ! ');
setMouseState(initialMouseState);
genericHandler(event);
event.preventDefault();
setMouseState(initialMouseState);
};
const mouseMoveHandler = (event: any) => {
event.preventDefault();
if (mouseState.down) {
console.log('Log - Moving...' + event.pageX);
genericHandler(event);
setShift((shift) => ({
// setShift((shift) => ({
// x: shift.x + (mouseState.starting.x - event.pageX),
// y: shift.y + (mouseState.starting.y - event.pageY),
// }));
// setMouseState((mouseState) => ({
// down: true,
// starting: {
// x: event.pageX,
// y: event.pageY,
// },
// }));
setShift({
x: shift.x + (mouseState.starting.x - event.pageX),
y: shift.y + (mouseState.starting.y - event.pageY),
}));
setMouseState((mouseState) => ({
});
setMouseState({
down: true,
starting: {
x: event.pageX,
y: event.pageY,
},
}));
});
}
};
const throtteledMouseMoveHandler = useMemo(
() => _.throttle(mouseMoveHandler, 100),
undefined
const throtteledMouseMoveHandler = useCallback(
_.throttle(mouseMoveHandler, 50),
[mouseState.down]
);
return (