This commit is contained in:
Eric van der Vlist 2022-10-16 14:59:09 +02:00
parent 26630439a4
commit adb3ceaa81
4 changed files with 14 additions and 14 deletions

View File

@ -8,7 +8,7 @@ import SingleTouchHandler from './SingleTouchHandler';
import DoubleTouchHandler from './DoubleTouchHandler'; import DoubleTouchHandler from './DoubleTouchHandler';
import TiledLayersStack from './TiledLayersStack'; import TiledLayersStack from './TiledLayersStack';
export interface TiledLayerKey { export interface TileKey {
provider: string; provider: string;
zoomLevel: number; zoomLevel: number;
x: number; x: number;
@ -20,8 +20,8 @@ interface MapProperties {
width: number; width: number;
} }
export const tiledLayerKeyToString = (tiledLayerKey: TiledLayerKey) => { export const tileKeyToString = (tileKey: TileKey) => {
return `${tiledLayerKey.provider}/${tiledLayerKey.zoomLevel}/${tiledLayerKey.x}/${tiledLayerKey.y}`; return `${tileKey.provider}/${tileKey.zoomLevel}/${tileKey.x}/${tileKey.y}`;
}; };
const Map: react.FC<MapProperties> = (props: MapProperties) => { const Map: react.FC<MapProperties> = (props: MapProperties) => {

View File

@ -1,5 +1,5 @@
import react, { useEffect, useRef } from 'react'; import react, { useEffect, useRef } from 'react';
import { TiledLayerKey } from './Map'; import { TileKey } from './Map';
interface TileProperties { interface TileProperties {
href?: string; href?: string;
@ -7,7 +7,7 @@ interface TileProperties {
y: number; y: number;
tileSize: number; tileSize: number;
delay?: number; delay?: number;
tileKey: TiledLayerKey; tileKey: TileKey;
} }
const Tile: react.FC<TileProperties> = (props: TileProperties) => { const Tile: react.FC<TileProperties> = (props: TileProperties) => {

View File

@ -1,7 +1,7 @@
import react, { useEffect, useState } from 'react'; import react, { useEffect, useState } from 'react';
import Tile from './Tile'; import Tile from './Tile';
import fakeTile from './FakeTile.svg'; import fakeTile from './FakeTile.svg';
import { TiledLayerKey, tiledLayerKeyToString } from './Map'; import { TileKey, tileKeyToString } from './Map';
interface Point { interface Point {
x: number; x: number;
@ -17,7 +17,7 @@ interface TiledLayerProperties {
tileSize: number; tileSize: number;
nbTiles: number; nbTiles: number;
active: boolean; active: boolean;
tiledLayerKey: TiledLayerKey; tiledLayerKey: TileKey;
} }
const TiledLayer: react.FC<TiledLayerProperties> = ( const TiledLayer: react.FC<TiledLayerProperties> = (
@ -27,13 +27,13 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
for (let row = 0; row < props.nbTiles; row++) { for (let row = 0; row < props.nbTiles; row++) {
let tileRow = []; let tileRow = [];
for (let col = 0; col < props.nbTiles; col++) { for (let col = 0; col < props.nbTiles; col++) {
const tileKey: TiledLayerKey = { const tileKey: TileKey = {
provider: props.tiledLayerKey.provider, provider: props.tiledLayerKey.provider,
zoomLevel: props.tiledLayerKey.zoomLevel, zoomLevel: props.tiledLayerKey.zoomLevel,
x: props.tiledLayerKey.x + col, x: props.tiledLayerKey.x + col,
y: props.tiledLayerKey.y + row, y: props.tiledLayerKey.y + row,
}; };
tileRow.push(<g key={tiledLayerKeyToString(tileKey)} />); tileRow.push(<g key={tileKeyToString(tileKey)} />);
} }
initialTiles.push(tileRow); initialTiles.push(tileRow);
} }
@ -76,7 +76,7 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
for (let row = 0; row < props.nbTiles; row++) { for (let row = 0; row < props.nbTiles; row++) {
let tileRow = []; let tileRow = [];
for (let col = 0; col < props.nbTiles; col++) { for (let col = 0; col < props.nbTiles; col++) {
const tileKey: TiledLayerKey = { const tileKey: TileKey = {
provider: props.tiledLayerKey.provider, provider: props.tiledLayerKey.provider,
zoomLevel: props.tiledLayerKey.zoomLevel, zoomLevel: props.tiledLayerKey.zoomLevel,
x: props.tiledLayerKey.x + col, x: props.tiledLayerKey.x + col,
@ -92,7 +92,7 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
console.log(`Adding tile ${row}/${col}`); console.log(`Adding tile ${row}/${col}`);
tileRow.push( tileRow.push(
<Tile <Tile
key={tiledLayerKeyToString(tileKey)} key={tileKeyToString(tileKey)}
tileKey={tileKey} tileKey={tileKey}
href={fakeTile} href={fakeTile}
x={col * props.tileSize} x={col * props.tileSize}

View File

@ -1,6 +1,6 @@
import react from 'react'; import react from 'react';
import TiledLayer from './TiledLayer'; import TiledLayer from './TiledLayer';
import { TiledLayerKey, tiledLayerKeyToString } from './Map'; import { TileKey, tileKeyToString } from './Map';
interface Point { interface Point {
x: number; x: number;
@ -14,7 +14,7 @@ interface TiledLayersStackProperties {
zoom: number; zoom: number;
tileSize: number; tileSize: number;
numberOfZoomLevels?: number; numberOfZoomLevels?: number;
tiledLayerKeyState: [TiledLayerKey, (tiledLayerKey: TiledLayerKey) => void]; tiledLayerKeyState: [TileKey, (tiledLayerKey: TileKey) => void];
} }
const TiledLayersStack: react.FC<TiledLayersStackProperties> = ( const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
@ -55,7 +55,7 @@ const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
}; };
return ( return (
<TiledLayer <TiledLayer
key={tiledLayerKeyToString(currentTiledLayerKey)} key={tileKeyToString(currentTiledLayerKey)}
tiledLayerKey={currentTiledLayerKey} tiledLayerKey={currentTiledLayerKey}
height={props.height * zoom} height={props.height * zoom}
width={props.width * zoom} width={props.width * zoom}