leanup

svgmap/src/components/map/Map.tsx

@@ -1,10 +1,5 @@
-import { IonContent, ReactComponentOrElement } from '@ionic/react';
+import { IonContent } from '@ionic/react';
-import react, {
+import react, { useEffect, useState } from 'react';
-  ReactComponentElement,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
 
 import './Map.css';
 import MouseHandler from './MouseHandler';
@@ -94,7 +89,6 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
             />
           );
         } else {
-          //          tileRow.push(<g key={key} />);
           tileRow.push(tiledLayer[row][col]);
         }
       }
@@ -102,7 +96,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
     }
 
     setTiledLayer(newTiledLayer);
-  }, [shift, zoom, nbTiles]);
+  }, [shift, zoom, nbTiles, props.height, props.width]);
 
   //  console.log(`tiledLayer: ${JSON.stringify(tiledLayer)}`);
 

svgmap/src/components/map/SlippyBoard.tsx

@@ -1,4 +1,4 @@
-import react, { Fragment, ReactElement, ReactSVGElement } from 'react';
+import react, { ReactElement } from 'react';
 
 interface SlippyBoardProperties {
   boardSize: number;

svgmap/src/components/map/Tile.tsx

@@ -1,4 +1,4 @@
-import react, { useEffect, useMemo, useRef, useState } from 'react';
+import react, { useEffect, useRef } from 'react';
 
 interface TileProperties {
   href?: string;
@@ -8,7 +8,7 @@ interface TileProperties {
 }
 
 const Tile: react.FC<TileProperties> = (props: TileProperties) => {
-//  console.log(`Rendering <Tile/>`);
+  //  console.log(`Rendering <Tile/>`);
   const g = useRef<SVGGElement>(null);
 
   const timeout = (ms: number) => {
@@ -45,7 +45,7 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
       };
       loadImage();
     }
-  }, [props.href]);
+  }, [props.href, props.delay]);
 
   // const children = useMemo(
   //   () => (