136 lines
3.2 KiB
TypeScript
136 lines
3.2 KiB
TypeScript
import react, { useState } from 'react';
|
|
import './Map.css';
|
|
|
|
interface Point {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
interface MouseHandlerProperties {
|
|
boardSize: number;
|
|
shift: Point;
|
|
addShift: (shift: Point) => void;
|
|
zoom: number;
|
|
addZoom: (zoomFactor: number, center: Point) => void;
|
|
}
|
|
|
|
const MouseHandler: react.FC<MouseHandlerProperties> = (
|
|
props: MouseHandlerProperties
|
|
) => {
|
|
const initialMouseState = {
|
|
down: false,
|
|
starting: { x: -1, y: -1 },
|
|
timestamp: 0,
|
|
};
|
|
|
|
const [mouseState, setMouseState] = useState(initialMouseState);
|
|
|
|
// console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
|
|
// console.log(
|
|
// 'MouseHandler, shift: ' +
|
|
// JSON.stringify(props.shift) +
|
|
// ', zoom:' +
|
|
// props.zoom
|
|
// );
|
|
|
|
const genericHandler = (event: any) => {
|
|
// console.log(`Log - Event: ${event.type}`);
|
|
// if (event.pageX !== undefined) {
|
|
// console.log(
|
|
// `Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}`
|
|
// );
|
|
// console.log(
|
|
// `mouseState: ' ${JSON.stringify(mouseState)} (+${
|
|
// Date.now() - mouseState.timestamp
|
|
// }ms) `
|
|
// );
|
|
// return;
|
|
//}
|
|
};
|
|
|
|
const mouseLeaveHandler = (event: any) => {
|
|
genericHandler(event);
|
|
setMouseState(initialMouseState);
|
|
};
|
|
|
|
const mouseDownHandler = (event: any) => {
|
|
genericHandler(event);
|
|
setMouseState({
|
|
down: true,
|
|
starting: { x: event.pageX, y: event.pageY },
|
|
timestamp: Date.now(),
|
|
});
|
|
};
|
|
|
|
const mouseUpHandler = (event: any) => {
|
|
genericHandler(event);
|
|
setMouseState(initialMouseState);
|
|
};
|
|
|
|
const mouseMoveHandler = (event: any) => {
|
|
if (mouseState.down && Date.now() - mouseState.timestamp > 5) {
|
|
genericHandler(event);
|
|
//console.log(
|
|
// `dispatch ${JSON.stringify({
|
|
// x: event.pageX - mouseState.starting.x,
|
|
// y: event.pageY - mouseState.starting.y,
|
|
// })}`
|
|
// );
|
|
props.addShift({
|
|
x: event.pageX - mouseState.starting.x,
|
|
y: event.pageY - mouseState.starting.y,
|
|
});
|
|
setMouseState({
|
|
down: true,
|
|
starting: {
|
|
x: event.pageX,
|
|
y: event.pageY,
|
|
},
|
|
timestamp: Date.now(),
|
|
});
|
|
}
|
|
};
|
|
|
|
const doubleClickHandler = (event: any) => {
|
|
genericHandler(event);
|
|
props.addZoom(Math.SQRT2, { x: event.pageX, y: event.pageY });
|
|
};
|
|
|
|
const initialWheelState = {
|
|
timestamp: 0,
|
|
};
|
|
|
|
const [wheelState, setWheelState] = useState(initialWheelState);
|
|
|
|
const wheelEventHandler = (event: any) => {
|
|
genericHandler(event);
|
|
if (
|
|
event.deltaMode === WheelEvent.DOM_DELTA_PIXEL &&
|
|
Date.now() - wheelState.timestamp > 100
|
|
) {
|
|
props.addZoom(event.deltaY < 0 ? Math.SQRT2 : Math.SQRT1_2, {
|
|
x: event.pageX,
|
|
y: event.pageY,
|
|
});
|
|
|
|
setWheelState({
|
|
timestamp: Date.now(),
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className='handler'
|
|
onMouseDown={mouseDownHandler}
|
|
onMouseMove={mouseMoveHandler}
|
|
onMouseUp={mouseUpHandler}
|
|
onMouseLeave={mouseLeaveHandler}
|
|
onDoubleClick={doubleClickHandler}
|
|
onWheel={wheelEventHandler}
|
|
></div>
|
|
);
|
|
};
|
|
|
|
export default MouseHandler;
|