78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import react, { useMemo, useState } from 'react';
|
|
|
|
import _ from 'lodash';
|
|
|
|
import Background from './background';
|
|
|
|
import '../theme/viewport.css';
|
|
|
|
const Viewport: react.FC<{}> = (props: {}) => {
|
|
console.log('rendering viewport');
|
|
const [shift, setShift] = useState({ x: 1000, y: 1000 });
|
|
|
|
const initialMouseState = {
|
|
down: false,
|
|
starting: { x: -1, y: -1 },
|
|
};
|
|
const [mouseState, setMouseState] = useState(initialMouseState);
|
|
|
|
console.log('mouseState: ' + JSON.stringify(mouseState));
|
|
|
|
const genericHandler = (event: any) => {
|
|
console.log('Log - Event: ' + event.type);
|
|
};
|
|
|
|
const mouseDownHandler = (event: any) => {
|
|
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);
|
|
};
|
|
|
|
const mouseMoveHandler = (event: any) => {
|
|
event.preventDefault();
|
|
if (mouseState.down) {
|
|
console.log('Log - Moving...' + event.pageX);
|
|
genericHandler(event);
|
|
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,
|
|
},
|
|
}));
|
|
}
|
|
};
|
|
|
|
const throtteledMouseMoveHandler = useMemo(
|
|
() => _.throttle(mouseMoveHandler, 100),
|
|
undefined
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className='viewport'
|
|
onMouseDown={mouseDownHandler}
|
|
onMouseMove={throtteledMouseMoveHandler}
|
|
onMouseUp={mouseUpHandler}
|
|
>
|
|
<Background shift={shift} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Viewport;
|