Addind wheel events support

This commit is contained in:
Eric van der Vlist 2022-10-12 20:00:22 +02:00
parent 95db69da23
commit 7f4c8fe591
1 changed files with 34 additions and 6 deletions

View File

@ -84,14 +84,41 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
} }
}; };
const doScale = (x: number, y: number, factor: number) => {
setShift({
x: shift.x + (shift.x - x) * (factor - 1),
y: shift.y + (shift.y - y) * (factor - 1),
});
setZoom(zoom * factor);
};
const doubleClickHandler = (event: any) => { const doubleClickHandler = (event: any) => {
genericHandler(event); genericHandler(event);
const newZoom = zoom * Math.SQRT2; doScale(event.pageX, event.pageY, Math.SQRT2);
setShift({ };
x: shift.x + (shift.x - event.pageX) * (newZoom / zoom - 1),
y: shift.y + (shift.y - event.pageY) * (newZoom / zoom - 1), const initialWheelState = {
}); timestamp: 0,
setZoom(newZoom); };
const [wheelState, setWheelState] = useState(initialWheelState);
const wheelEventHandler = (event: any) => {
genericHandler(event);
if (
event.deltaMode === WheelEvent.DOM_DELTA_PIXEL &&
Date.now() - wheelState.timestamp > 100
) {
doScale(
event.pageX,
event.pageY,
event.deltaY < 0 ? Math.SQRT2 : Math.SQRT1_2
);
setWheelState({
timestamp: Date.now(),
});
}
}; };
return ( return (
@ -101,6 +128,7 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
onMouseUp={mouseUpHandler} onMouseUp={mouseUpHandler}
onMouseLeave={mouseLeaveHandler} onMouseLeave={mouseLeaveHandler}
onDoubleClick={doubleClickHandler} onDoubleClick={doubleClickHandler}
onWheel={wheelEventHandler}
> >
<Viewport boardSize={props.boardSize} shift={shift} zoom={zoom} /> <Viewport boardSize={props.boardSize} shift={shift} zoom={zoom} />
</div> </div>