Staring to implement mouse handlers.

src/components/map.tsx

@@ -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(
+  const debouncedResizeHandler = useMemo(
-    () => _.debounce(handleResize, 300)
+    () => _.debounce(resizeHandler, 300),
-  , [dimensions, zoom, center]);
+    [dimensions, zoom, center]
+  );
 
   useEffect(() => {
-    window.addEventListener('resize', debouncedEventHandler);
+    window.addEventListener('resize', debouncedResizeHandler);
-  });
+  }, []);
 
-  const nbTilesY = _.ceil(dimensions.height / tileSize) + 2;
+  const nbTilesY = _.ceil(dimensions.height / tileSize) + 4;
-  const nbTilesX = _.ceil(dimensions.width / tileSize) + 2;
+  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 firstTileY = tileCenterY - _.round(nbTilesY / 2);
-  const firstTileX = tileCenterX - _.ceil(nbTilesX / 2);
+  const firstTileX = tileCenterX - _.round(nbTilesX / 2);
-  const locationY = ((tileCenterY + reminderY - firstTileY ) * tileSize) ;
+  const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
-  const locationX = ((tileCenterX + reminderX - firstTileX ) * tileSize) ;
+  const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
   const targetLocationY = dimensions.height / 2;
   const targetLocationX = dimensions.width / 2;
-  const deltaY = - targetLocationY + locationY;
+  const deltaY = -targetLocationY + locationY;
-  const deltaX = - targetLocationX + locationX;
+  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}
+              delta={delta}
-              deltaY={deltaY}
               zoom={zoom}
             />
           ))}

src/components/tile.tsx

@@ -9,16 +9,14 @@ const Tile: React.FC<{
   iy: number;
   x: number;
   y: number;
-  deltaX: number;
+  delta: any;
-  deltaY: number;
   zoom: number;
 }> = (props: {
   ix: number;
   iy: number;
   x: number;
   y: number;
-  deltaX: number;
+  delta: any;
-  deltaY: number;
   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 (

src/theme/map.css

@@ -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;
+  max-width: none;
-    position: absolute;
+  position: absolute;
 }
-