Refactoring

svgmap/src/components/map/Map.tsx

@@ -68,55 +68,52 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
             />
           </SingleTouchHandler>
         </MouseHandler>
-        <SlippyBoard
-          boardSize={boardSize}
-          shift={shift}
-          zoom={zoom}
-          layers={[
-            {
-              key: 'background',
-              content: (
+        <SlippyBoard boardSize={boardSize} shift={shift} zoom={zoom}>
+          <>
             <rect
+              key='background'
               x='0'
               y='0'
               width={boardSize}
               height={boardSize}
               fill='red'
             />
-              ),
-            },
-            {
-              key: 'tiles1',
-              content: (
             <TiledLayer
+              key='tile1'
               height={props.height}
               width={props.width}
               shift={shift}
               zoom={zoom}
+              layerZoom={1}
               tileSize={256}
               nbTiles={nbTiles}
-                  active={zoom < 2}
+              active={zoom < 1.5}
             />
-              ),
-            },
-            {
-              key: 'tiles2',
-              transform: 'scale(.5)',
-              content: (
             <TiledLayer
+              key='tile2'
               height={props.height * 2}
               width={props.width * 2}
               shift={{ x: shift.x * 2, y: shift.y * 2 }}
               zoom={zoom}
+              layerZoom={0.5}
               tileSize={256}
               nbTiles={nbTiles * 2}
-                  active={zoom >= 2}
+              active={zoom >= Math.SQRT2 && zoom < 2 * Math.SQRT2}
             />
-              ),
-            },
-            { key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
-          ]}
+            <TiledLayer
+              key='tile3'
+              height={props.height * 4}
+              width={props.width * 4}
+              shift={{ x: shift.x * 4, y: shift.y * 4 }}
+              zoom={zoom}
+              layerZoom={0.25}
+              tileSize={256}
+              nbTiles={nbTiles * 4}
+              active={zoom >= 2 * Math.SQRT2}
             />
+            <circle key='circle' cx='50' cy='50' r='50' />,
+          </>
+        </SlippyBoard>
       </div>
     </IonContent>
   );

svgmap/src/components/map/SlippyBoard.tsx

@@ -4,11 +4,7 @@ interface SlippyBoardProperties {
   boardSize: number;
   shift: { x: number; y: number };
   zoom: number;
-  layers?: {
-    key: string;
-    transform?: string;
-    content: ReactElement | ReactNode | ReactElement[] | ReactElement[][];
-  }[];
+  children: any;
 }
 
 const SlippyBoard: react.FC<SlippyBoardProperties> = (
@@ -19,17 +15,7 @@ const SlippyBoard: react.FC<SlippyBoardProperties> = (
       <g
         transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
       >
-        {props.layers
-          ? props.layers.map((layer) => (
-              <g
-                className='layer'
-                key={layer.key}
-                transform={layer.transform === undefined ? '' : layer.transform}
-              >
-                {layer.content}
-              </g>
-            ))
-          : null}
+        {props.children}
       </g>
     </svg>
   );

svgmap/src/components/map/TiledLayer.tsx

@@ -12,6 +12,7 @@ interface TiledLayerProperties {
   width: number;
   shift: Point;
   zoom: number;
+  layerZoom: number;
   tileSize: number;
   nbTiles: number;
   active: boolean;
@@ -20,16 +21,16 @@ interface TiledLayerProperties {
 const TiledLayer: react.FC<TiledLayerProperties> = (
   props: TiledLayerProperties
 ) => {
-  var initialTiledLayer: any[][] = [];
+  var initialTiles: any[][] = [];
   for (let row = 0; row < props.nbTiles; row++) {
     let tileRow = [];
     for (let col = 0; col < props.nbTiles; col++) {
       tileRow.push(<g key={`${row}/${col}`} />);
     }
-    initialTiledLayer.push(tileRow);
+    initialTiles.push(tileRow);
   }
 
-  const [tiledLayer, setTiledLayer] = useState(initialTiledLayer);
+  const [tiles, setTiles] = useState(initialTiles);
 
   useEffect(() => {
     if (props.active) {
@@ -63,13 +64,13 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
           firstVisibleTiles
         )}/${JSON.stringify(lastVisibleTiles)}.`
       );
-      const newTiledLayer: any[][] = [];
+      const newTiles: any[][] = [];
       for (let row = 0; row < props.nbTiles; row++) {
         let tileRow = [];
         for (let col = 0; col < props.nbTiles; col++) {
           const key = `${row}/${col}`;
           if (
-            tiledLayer[row][col].type === 'g' &&
+            tiles[row][col].type === 'g' &&
             row >= firstVisibleTiles.y &&
             row <= lastVisibleTiles.y &&
             col >= firstVisibleTiles.x &&
@@ -87,13 +88,13 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
               />
             );
           } else {
-            tileRow.push(tiledLayer[row][col]);
+            tileRow.push(tiles[row][col]);
           }
         }
-        newTiledLayer.push(tileRow);
+        newTiles.push(tileRow);
       }
 
-      setTiledLayer(newTiledLayer);
+      setTiles(newTiles);
     }
   }, [
     props.shift,
@@ -105,7 +106,7 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
     props.tileSize,
   ]);
 
-  return <>{tiledLayer}</>;
+  return <g transform={`scale(${props.layerZoom})`}>{tiles}</g>;
 };
 
 export default TiledLayer;

svgmap/templates/Template.tsx

@@ -1,9 +1,9 @@
 import react from 'react';
 
-interface MapProperties {}
+interface TemplateProperties {}
 
-const Map: react.FC<MapProperties> = (props: MapProperties) => {
+const Template: react.FC<TemplateProperties> = (props: TemplateProperties) => {
   return <></>;
 };
 
-export default Map;
+export default Template;