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,21 +37,74 @@ 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(
-        <Tile
-          key={`${row}/${col}`}
-          href={fakeTile}
-          x={col * 256}
-          y={row * 256}
-          delay={20 * col * row}
-        />
-      );
+      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={key}
+              href={fakeTile}
+              x={col * 256}
+              y={row * 256}
+              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}>
       <div

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,32 +16,36 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
   };
 
   useEffect(() => {
-    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';
-      image.setAttribute('href', props.href);
-      if (!image.complete) {
-        await image.decode();
-      }
-      if (props.delay !== undefined) {
-        await timeout(props.delay);
-      }
-      const svgImage = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'image'
-      ) as unknown as SVGImageElement;
-      svgImage.setAttribute('width', '256');
-      svgImage.setAttribute('height', '256');
-      svgImage.setAttribute('href', props.href);
-      // svgImage.setAttribute('x', '0');
-      // svgImage.setAttribute('y', '0');
-      g.current?.replaceChildren(svgImage);
-    };
-    loadImage();
-  }, []);
+    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();
+        }
+        if (props.delay !== undefined) {
+          await timeout(props.delay);
+        }
+        const svgImage = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'image'
+        ) 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 <>
-  <g ref={g} transform={`translate(${props.x},${props.y})`} />
-</>;
+  return (
+    <>
+      <g ref={g} transform={`translate(${props.x},${props.y})`} />
+    </>
+  );
 };
 
 export default Tile;