Staring to implement mouse handlers.

This commit is contained in:
Eric van der Vlist 2022-09-06 19:24:30 +02:00
parent af226285be
commit ec48c63667
3 changed files with 107 additions and 29 deletions

View File

@ -1,5 +1,5 @@
import _, { round } from 'lodash';
import react, { useState, useEffect, useMemo } from 'react';
import react, { useState, useEffect, useMemo, useRef } from 'react';
import Tile from './tile';
@ -28,6 +28,8 @@ const lat2tile = (lat: number, zoom: number) => {
};
const Map: react.FC = () => {
console.log('Log - Rendering <Map />');
const initialCenter: [number, number] = [43.57029965, 3.94242897];
const initialZoom: number = 17;
const [center, setCenter] = useState(initialCenter);
@ -38,46 +40,116 @@ const Map: react.FC = () => {
width: window.innerWidth,
});
const handleResize = () => {
const resizeHandler = () => {
setDimensions({
height: window.innerHeight,
width: window.innerWidth,
});
};
const debouncedEventHandler = useMemo(
() => _.debounce(handleResize, 300)
, [dimensions, zoom, center]);
const debouncedResizeHandler = useMemo(
() => _.debounce(resizeHandler, 300),
[dimensions, zoom, center]
);
useEffect(() => {
window.addEventListener('resize', debouncedEventHandler);
});
window.addEventListener('resize', debouncedResizeHandler);
}, []);
const nbTilesY = _.ceil(dimensions.height / tileSize) + 2;
const nbTilesX = _.ceil(dimensions.width / tileSize) + 2;
const nbTilesY = _.ceil(dimensions.height / tileSize) + 4;
const nbTilesX = _.ceil(dimensions.width / tileSize) + 4;
const [tileCenterY, reminderY] = lat2tile(center[0], zoom);
const [tileCenterX, reminderX] = lon2tile(center[1], zoom);
const firstTileY = tileCenterY - _.ceil(nbTilesY / 2);
const firstTileX = tileCenterX - _.ceil(nbTilesX / 2);
const locationY = ((tileCenterY + reminderY - firstTileY ) * tileSize) ;
const locationX = ((tileCenterX + reminderX - firstTileX ) * tileSize) ;
const firstTileY = tileCenterY - _.round(nbTilesY / 2);
const firstTileX = tileCenterX - _.round(nbTilesX / 2);
const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
const targetLocationY = dimensions.height / 2;
const targetLocationX = dimensions.width / 2;
const deltaY = -targetLocationY + locationY;
const deltaX = -targetLocationX + locationX;
const [delta, setDelta] = useState({ X: deltaX, Y: deltaY });
const genericHandler = (event: any) => {
console.log('Log - Event: ' + event.type);
};
const initialMouseState = {
down: false,
starting: { x: -1, y: -1 },
};
const mouseState = useRef(initialMouseState);
const mouseDownHandler = (event: any) => {
event.preventDefault();
mouseState.current = {
down: true,
starting: { x: event.pageX, y: event.pageY },
};
genericHandler(event);
};
const mouseUpHandler = (event: any) => {
event.preventDefault();
console.log('Log - Up, now do something ! ');
mouseState.current = initialMouseState;
genericHandler(event);
};
const mouseMoveHandler = (event: any) => {
if (mouseState.current.down) {
event.preventDefault();
console.log('Log - Moving...' + event.pageX);
setDelta({
X: deltaX + mouseState.current.starting.x - event.pageX,
Y: deltaY + mouseState.current.starting.y - event.pageY,
});
genericHandler(event);
}
};
const debouncedMouseMoveHandler = useMemo(
() => _.throttle(mouseMoveHandler, 100),
[]
);
const pointerDownHandler = (event: any) => {
event.preventDefault();
console.log('PointerDown');
};
const pointerUpHandler = (event: any) => {
event.preventDefault();
console.log('PointerUp');
};
const pointerMoveHandler = (event: any) => {
event.preventDefault();
console.log('PointerMove');
};
return (
<div className='tiles'>
<div
className='tiles'
onMouseDown={mouseDownHandler}
onMouseMove={debouncedMouseMoveHandler}
onMouseUp={mouseUpHandler}
onTouchStart={genericHandler}
onTouchMove={genericHandler}
onTouchCancel={genericHandler}
onTouchEnd={genericHandler}
>
{_.range(nbTilesY).map((iy) => (
<div key={'y' + iy} className='tilesRow'>
{_.range(nbTilesX).map((ix) => (
<Tile
key={'x' + ix}
key={'x' + ix + 'y' + iy}
iy={iy}
ix={ix}
x={firstTileX + ix}
y={firstTileY + iy}
deltaX={deltaX}
deltaY={deltaY}
delta={delta}
zoom={zoom}
/>
))}

View File

@ -9,16 +9,14 @@ const Tile: React.FC<{
iy: number;
x: number;
y: number;
deltaX: number;
deltaY: number;
delta: any;
zoom: number;
}> = (props: {
ix: number;
iy: number;
x: number;
y: number;
deltaX: number;
deltaY: number;
delta: any;
zoom: number;
}) => {
const style = {
@ -26,9 +24,9 @@ const Tile: React.FC<{
height: tileSize + 'px',
transform:
'translate3d(' +
(props.ix * tileSize - props.deltaX) +
(props.ix * tileSize - props.delta.X) +
'px, ' +
(props.iy * tileSize - props.deltaY) +
(props.iy * tileSize - props.delta.Y) +
'px, 0px)',
};
return (

View File

@ -1,9 +1,17 @@
.tiles {
position: absolute;
position: relative;
width: 100%;
height: 100%;
}
.tiles p {
z-index: 20;
position: relative;
width: 100%;
height: 100%;
}
.tiles img {
max-width: none;
position: absolute;
}