Refactoring (creating a component for tiled layers).

This commit is contained in:
Eric van der Vlist 2022-10-14 23:15:18 +02:00
parent 25e50a2b9c
commit ca2907d886
3 changed files with 105 additions and 71 deletions

View File

@ -4,10 +4,9 @@ import react, { useEffect, useState } from 'react';
import './Map.css'; import './Map.css';
import MouseHandler from './MouseHandler'; import MouseHandler from './MouseHandler';
import SlippyBoard from './SlippyBoard'; import SlippyBoard from './SlippyBoard';
import Tile from './Tile';
import fakeTile from './FakeTile.svg';
import SingleTouchHandler from './SingleTouchHandler'; import SingleTouchHandler from './SingleTouchHandler';
import DoubleTouchHandler from './DoubleTouchHandler'; import DoubleTouchHandler from './DoubleTouchHandler';
import TiledLayer from './TiledLayer';
interface MapProperties { interface MapProperties {
height: number; height: number;
@ -40,72 +39,6 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
console.log(`Rendering Map, zoom:${zoom}, shift:${JSON.stringify(shift)}`); 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++) {
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 / zoom), 0),
y: Math.max(Math.floor(-shift.y / 256 / zoom), 0),
};
const lastVisibleTiles = {
x: Math.min(
Math.ceil(firstVisibleTiles.x + props.width / 256 / zoom),
nbTiles - 1
),
y: Math.min(
Math.ceil(firstVisibleTiles.y + props.height / 256 / zoom),
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
) {
console.log(`Adding tile ${row}/${col}`);
tileRow.push(
<Tile
key={key}
href={fakeTile}
x={col * 256}
y={row * 256}
delay={1000}
/>
);
} else {
tileRow.push(tiledLayer[row][col]);
}
}
newTiledLayer.push(tileRow);
}
setTiledLayer(newTiledLayer);
}, [shift, zoom, nbTiles, props.height, props.width]);
// console.log(`tiledLayer: ${JSON.stringify(tiledLayer)}`);
return ( return (
<IonContent fullscreen={true}> <IonContent fullscreen={true}>
<div <div
@ -152,7 +85,17 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
/> />
), ),
}, },
{ key: 'tiles', content: tiledLayer }, {
key: 'tiles',
content: (
<TiledLayer
height={props.height}
width={props.width}
shift={shift}
zoom={zoom}
/>
),
},
{ key: 'circle', content: <circle cx='50' cy='50' r='50' /> }, { key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
]} ]}
/> />

View File

@ -1,4 +1,5 @@
import react, { ReactElement } from 'react'; import { ReactComponentOrElement } from '@ionic/react';
import react, { ReactComponentElement, ReactElement, ReactNode } from 'react';
interface SlippyBoardProperties { interface SlippyBoardProperties {
boardSize: number; boardSize: number;
@ -6,7 +7,7 @@ interface SlippyBoardProperties {
zoom: number; zoom: number;
layers?: { layers?: {
key: string; key: string;
content: ReactElement | ReactElement[] | ReactElement[][]; content: ReactElement|ReactNode | ReactElement[] | ReactElement[][];
}[]; }[];
} }

View File

@ -0,0 +1,90 @@
import react, { useEffect, useState } from 'react';
import Tile from './Tile';
import fakeTile from './FakeTile.svg';
interface Point {
x: number;
y: number;
}
interface TiledLayerProperties {
height: number;
width: number;
shift: Point;
zoom: number;
}
const TiledLayer: react.FC<TiledLayerProperties> = (
props: TiledLayerProperties
) => {
const nbTiles =
Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
var initialTiledLayer: any[][] = [];
for (let row = 0; row < nbTiles; row++) {
let tileRow = [];
for (let col = 0; col < nbTiles; col++) {
tileRow.push(<g key={`${row}/${col}`} />);
}
initialTiledLayer.push(tileRow);
}
const [tiledLayer, setTiledLayer] = useState(initialTiledLayer);
useEffect(() => {
const firstVisibleTiles = {
x: Math.max(Math.floor(-props.shift.x / 256 / props.zoom), 0),
y: Math.max(Math.floor(-props.shift.y / 256 / props.zoom), 0),
};
const lastVisibleTiles = {
x: Math.min(
Math.ceil(firstVisibleTiles.x + props.width / 256 / props.zoom),
nbTiles - 1
),
y: Math.min(
Math.ceil(firstVisibleTiles.y + props.height / 256 / props.zoom),
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
) {
console.log(`Adding tile ${row}/${col}`);
tileRow.push(
<Tile
key={key}
href={fakeTile}
x={col * 256}
y={row * 256}
delay={1000}
/>
);
} else {
tileRow.push(tiledLayer[row][col]);
}
}
newTiledLayer.push(tileRow);
}
setTiledLayer(newTiledLayer);
}, [props.shift, props.zoom, nbTiles, props.height, props.width]);
return <>{tiledLayer}</>;
};
export default TiledLayer;