Making throttling work (at last)
This commit is contained in:
parent
2caf590a21
commit
0fb7f47207
|
@ -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
|
||||
|
|
|
@ -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 (
|
||||
|
|
Loading…
Reference in New Issue