Refactoring (creating a component for tiled layers).

svgmap/src/components/map/Map.tsx

@@ -4,10 +4,9 @@ import react, { useEffect, useState } from 'react';
 import './Map.css';
 import MouseHandler from './MouseHandler';
 import SlippyBoard from './SlippyBoard';
-import Tile from './Tile';
-import fakeTile from './FakeTile.svg';
 import SingleTouchHandler from './SingleTouchHandler';
 import DoubleTouchHandler from './DoubleTouchHandler';
+import TiledLayer from './TiledLayer';
 
 interface MapProperties {
   height: number;
@@ -40,72 +39,6 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
 
   console.log(`Rendering Map, zoom:${zoom}, shift:${JSON.stringify(shift)}`);
 
-  var initialTiledLayer: any[][] = [];
-  for (let row = 0; row < nbTiles; row++) {
-    let tileRow = [];
-    for (let col = 0; col < nbTiles; col++) {
-      tileRow.push(<g key={`${row}/${col}`} />);
-    }
-    initialTiledLayer.push(tileRow);
-  }
-
-  const [tiledLayer, setTiledLayer] = useState(initialTiledLayer);
-
-  useEffect(() => {
-    const firstVisibleTiles = {
-      x: Math.max(Math.floor(-shift.x / 256 / zoom), 0),
-      y: Math.max(Math.floor(-shift.y / 256 / zoom), 0),
-    };
-
-    const lastVisibleTiles = {
-      x: Math.min(
-        Math.ceil(firstVisibleTiles.x + props.width / 256 / zoom),
-        nbTiles - 1
-      ),
-      y: Math.min(
-        Math.ceil(firstVisibleTiles.y + props.height / 256 / zoom),
-        nbTiles - 1
-      ),
-    };
-    console.log(
-      `Adding new tiles if needed for  ${JSON.stringify(
-        firstVisibleTiles
-      )}/${JSON.stringify(lastVisibleTiles)}.`
-    );
-    const newTiledLayer: any[][] = [];
-    for (let row = 0; row < nbTiles; row++) {
-      let tileRow = [];
-      for (let col = 0; col < nbTiles; col++) {
-        const key = `${row}/${col}`;
-        if (
-          tiledLayer[row][col].type === 'g' &&
-          row >= firstVisibleTiles.y &&
-          row <= lastVisibleTiles.y &&
-          col >= firstVisibleTiles.x &&
-          col <= lastVisibleTiles.x
-        ) {
-          console.log(`Adding tile ${row}/${col}`);
-          tileRow.push(
-            <Tile
-              key={key}
-              href={fakeTile}
-              x={col * 256}
-              y={row * 256}
-              delay={1000}
-            />
-          );
-        } else {
-          tileRow.push(tiledLayer[row][col]);
-        }
-      }
-      newTiledLayer.push(tileRow);
-    }
-
-    setTiledLayer(newTiledLayer);
-  }, [shift, zoom, nbTiles, props.height, props.width]);
-
-  //  console.log(`tiledLayer: ${JSON.stringify(tiledLayer)}`);
-
   return (
     <IonContent fullscreen={true}>
       <div
@@ -152,7 +85,17 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
                 />
               ),
             },
-            { key: 'tiles', content: tiledLayer },
+            {
+              key: 'tiles',
+              content: (
+                <TiledLayer
+                  height={props.height}
+                  width={props.width}
+                  shift={shift}
+                  zoom={zoom}
+                />
+              ),
+            },
             { key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
           ]}
         />

svgmap/src/components/map/SlippyBoard.tsx

@@ -1,4 +1,5 @@
-import react, { ReactElement } from 'react';
+import { ReactComponentOrElement } from '@ionic/react';
+import react, { ReactComponentElement, ReactElement, ReactNode } from 'react';
 
 interface SlippyBoardProperties {
   boardSize: number;
@@ -6,7 +7,7 @@ interface SlippyBoardProperties {
   zoom: number;
   layers?: {
     key: string;
-    content: ReactElement | ReactElement[] | ReactElement[][];
+    content: ReactElement|ReactNode | ReactElement[] | ReactElement[][];
   }[];
 }
 

svgmap/src/components/map/TiledLayer.tsx

@@ -0,0 +1,90 @@
+import react, { useEffect, useState } from 'react';
+import Tile from './Tile';
+import fakeTile from './FakeTile.svg';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface TiledLayerProperties {
+  height: number;
+  width: number;
+  shift: Point;
+  zoom: number;
+}
+
+const TiledLayer: react.FC<TiledLayerProperties> = (
+  props: TiledLayerProperties
+) => {
+  const nbTiles =
+    Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
+
+  var initialTiledLayer: any[][] = [];
+  for (let row = 0; row < nbTiles; row++) {
+    let tileRow = [];
+    for (let col = 0; col < nbTiles; col++) {
+      tileRow.push(<g key={`${row}/${col}`} />);
+    }
+    initialTiledLayer.push(tileRow);
+  }
+
+  const [tiledLayer, setTiledLayer] = useState(initialTiledLayer);
+
+  useEffect(() => {
+    const firstVisibleTiles = {
+      x: Math.max(Math.floor(-props.shift.x / 256 / props.zoom), 0),
+      y: Math.max(Math.floor(-props.shift.y / 256 / props.zoom), 0),
+    };
+
+    const lastVisibleTiles = {
+      x: Math.min(
+        Math.ceil(firstVisibleTiles.x + props.width / 256 / props.zoom),
+        nbTiles - 1
+      ),
+      y: Math.min(
+        Math.ceil(firstVisibleTiles.y + props.height / 256 / props.zoom),
+        nbTiles - 1
+      ),
+    };
+    console.log(
+      `Adding new tiles if needed for  ${JSON.stringify(
+        firstVisibleTiles
+      )}/${JSON.stringify(lastVisibleTiles)}.`
+    );
+    const newTiledLayer: any[][] = [];
+    for (let row = 0; row < nbTiles; row++) {
+      let tileRow = [];
+      for (let col = 0; col < nbTiles; col++) {
+        const key = `${row}/${col}`;
+        if (
+          tiledLayer[row][col].type === 'g' &&
+          row >= firstVisibleTiles.y &&
+          row <= lastVisibleTiles.y &&
+          col >= firstVisibleTiles.x &&
+          col <= lastVisibleTiles.x
+        ) {
+          console.log(`Adding tile ${row}/${col}`);
+          tileRow.push(
+            <Tile
+              key={key}
+              href={fakeTile}
+              x={col * 256}
+              y={row * 256}
+              delay={1000}
+            />
+          );
+        } else {
+          tileRow.push(tiledLayer[row][col]);
+        }
+      }
+      newTiledLayer.push(tileRow);
+    }
+
+    setTiledLayer(newTiledLayer);
+  }, [props.shift, props.zoom, nbTiles, props.height, props.width]);
+
+  return <>{tiledLayer}</>;
+};
+
+export default TiledLayer;