Loading new tiles when shift requires...

svgmap/src/components/map/Map.tsx

@@ -1,5 +1,10 @@
-import { IonContent } from '@ionic/react';
-import react, { useState } from 'react';
+import { IonContent, ReactComponentOrElement } from '@ionic/react';
+import react, {
+  ReactComponentElement,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import './Map.css';
 import MouseHandler from './MouseHandler';
@@ -32,20 +37,73 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
     setZoom(zoom * zoomFactor);
   };
 
-  var tiledLayer: any[] = [];
+  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++) {
-      tiledLayer.push(
+      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), 0),
+      y: Math.max(Math.floor(-shift.y / 256), 0),
+    };
+
+    const lastVisibleTiles = {
+      x: Math.min(
+        Math.ceil(firstVisibleTiles.x + props.width / 256),
+        nbTiles - 1
+      ),
+      y: Math.min(
+        Math.ceil(firstVisibleTiles.y + props.height / 256),
+        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
+        ) {
+          tileRow.push(
             <Tile
-          key={`${row}/${col}`}
+              key={key}
               href={fakeTile}
               x={col * 256}
               y={row * 256}
-          delay={20 * col * row}
+              delay={1000}
             />
           );
+        } else {
+          //          tileRow.push(<g key={key} />);
+          tileRow.push(tiledLayer[row][col]);
         }
       }
+      newTiledLayer.push(tileRow);
+    }
+
+    setTiledLayer(newTiledLayer);
+  }, [shift, zoom, nbTiles]);
+
+  //  console.log(`tiledLayer: ${JSON.stringify(tiledLayer)}`);
 
   return (
     <IonContent fullscreen={true}>

svgmap/src/components/map/SlippyBoard.tsx

@@ -4,7 +4,10 @@ interface SlippyBoardProperties {
   boardSize: number;
   shift: { x: number; y: number };
   zoom: number;
-  layers?: { key: string; content: ReactElement | ReactElement[] }[];
+  layers?: {
+    key: string;
+    content: ReactElement | ReactElement[] | ReactElement[][];
+  }[];
 }
 
 const SlippyBoard: react.FC<SlippyBoardProperties> = (

svgmap/src/components/map/Tile.tsx

@@ -1,7 +1,7 @@
 import react, { useEffect, useMemo, useRef, useState } from 'react';
 
 interface TileProperties {
-  href: string;
+  href?: string;
   x: number;
   y: number;
   delay?: number;
@@ -16,12 +16,14 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
   };
 
   useEffect(() => {
+    if (props.href !== undefined) {
       const loadImage = async () => {
         console.log(`Pre loading: ${JSON.stringify(props.href)}`);
         const image = new Image(256, 256);
         //      const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
         //      const image = new SVGImageElement();
         image.loading = 'eager';
+        // @ts-ignore
         image.setAttribute('href', props.href);
         if (!image.complete) {
           await image.decode();
@@ -35,13 +37,15 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
         ) as unknown as SVGImageElement;
         svgImage.setAttribute('width', '256');
         svgImage.setAttribute('height', '256');
+        // @ts-ignore 
         svgImage.setAttribute('href', props.href);
         // svgImage.setAttribute('x', '0');
         // svgImage.setAttribute('y', '0');
         g.current?.replaceChildren(svgImage);
       };
       loadImage();
-  }, []);
+    }
+  }, [props.href]);
 
   // const children = useMemo(
   //   () => (
@@ -52,9 +56,11 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
   //   []
   // );
 
-  return <>
+  return (
+    <>
       <g ref={g} transform={`translate(${props.x},${props.y})`} />
-</>;
+    </>
+  );
 };
 
 export default Tile;