Fixed tile assembly.

svgmap/src/components/map/Map.tsx

@@ -13,7 +13,9 @@ interface MapProperties {
 }
 
 const Map: react.FC<MapProperties> = (props: MapProperties) => {
-  const boardSize = Math.max(props.width, props.height) * 2;
+  const nbTiles =
+    Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
+  const boardSize = nbTiles * 256;
 
   const [shift, setShift] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
@@ -31,7 +33,19 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
   };
 
   var tiledLayer: any[] = [];
-  tiledLayer.push(<Tile key='tile' href={fakeTile} x={0} y={0} delay={2000} />);
+  for (let row = 0; row < nbTiles; row++) {
+    for (let col = 0; col < nbTiles; col++) {
+      tiledLayer.push(
+        <Tile
+          key={`${row}/${col}`}
+          href={fakeTile}
+          x={col * 256}
+          y={row * 256}
+          delay={20 * col * row}
+        />
+      );
+    }
+  }
 
   return (
     <IonContent fullscreen={true}>
@@ -51,6 +65,18 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
           shift={shift}
           zoom={zoom}
           layers={[
+            {
+              key: 'background',
+              content: (
+                <rect
+                  x='0'
+                  y='0'
+                  width={boardSize}
+                  height={boardSize}
+                  fill='red'
+                />
+              ),
+            },
             { key: 'tiles', content: tiledLayer },
             { key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
           ]}

svgmap/src/components/map/MouseHandler.tsx

@@ -25,27 +25,27 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
 
   const [mouseState, setMouseState] = useState(initialMouseState);
 
-  console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
-  console.log(
-    'MouseHandler, shift: ' +
-      JSON.stringify(props.shift) +
-      ', zoom:' +
-      props.zoom
-  );
+  // 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;
-    }
+    // 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) => {
@@ -70,12 +70,12 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
   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,
-        })}`
-      );
+      //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,
@@ -120,7 +120,8 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
   };
 
   return (
-    <div className='handler'
+    <div
+      className='handler'
       onMouseDown={mouseDownHandler}
       onMouseMove={mouseMoveHandler}
       onMouseUp={mouseUpHandler}

svgmap/src/components/map/Tile.tsx

@@ -1,4 +1,4 @@
-import react, { useEffect, useRef, useState } from 'react';
+import react, { useEffect, useMemo, useRef, useState } from 'react';
 
 interface TileProperties {
   href: string;
@@ -8,6 +8,7 @@ interface TileProperties {
 }
 
 const Tile: react.FC<TileProperties> = (props: TileProperties) => {
+  console.log(`Rendering <Tile/>`);
   const g = useRef<SVGGElement>(null);
 
   const timeout = (ms: number) => {
@@ -40,13 +41,20 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
       g.current?.replaceChildren(svgImage);
     };
     loadImage();
-  });
+  }, []);
 
-  return (
-    <>
+  // const children = useMemo(
+  //   () => (
+  //     <>
+  //       <g ref={g} transform={`translate(${props.x},${props.y})`} />
+  //     </>
+  //   ),
+  //   []
+  // );
+
+  return <>
   <g ref={g} transform={`translate(${props.x},${props.y})`} />
-    </>
-  );
+</>;
 };
 
 export default Tile;