Dyomedea
/
sandbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding tiles when zoom requires.

This commit is contained in:
Eric van der Vlist 2022-10-14 21:08:42 +02:00
parent 2362ff2938
commit 2122d2e79b
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
svgmap/src/components/map/Map.tsx
View File

@ -22,7 +22,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2; Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
const boardSize = nbTiles * 256; const boardSize = nbTiles * 256;
const [shift, setShift] = useState({ x: 0, y: 0 }); const [shift, setShift] = useState({ x: -boardSize / 2, y: -boardSize / 2 });
const [zoom, setZoom] = useState(1); const [zoom, setZoom] = useState(1);
const addShift = (deltaShift: { x: number; y: number }) => { const addShift = (deltaShift: { x: number; y: number }) => {
@ -52,17 +52,17 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
useEffect(() => { useEffect(() => {
const firstVisibleTiles = { const firstVisibleTiles = {
x: Math.max(Math.floor(-shift.x / 256), 0), x: Math.max(Math.floor(-shift.x / 256 / zoom), 0),
y: Math.max(Math.floor(-shift.y / 256), 0), y: Math.max(Math.floor(-shift.y / 256 / zoom), 0),
}; };
const lastVisibleTiles = { const lastVisibleTiles = {
x: Math.min( x: Math.min(
Math.ceil(firstVisibleTiles.x + props.width / 256), Math.ceil(firstVisibleTiles.x + props.width / 256 / zoom),
nbTiles - 1 nbTiles - 1
), ),
y: Math.min( y: Math.min(
Math.ceil(firstVisibleTiles.y + props.height / 256), Math.ceil(firstVisibleTiles.y + props.height / 256 / zoom),
nbTiles - 1 nbTiles - 1
), ),
}; };
@ -83,6 +83,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
col >= firstVisibleTiles.x && col >= firstVisibleTiles.x &&
col <= lastVisibleTiles.x col <= lastVisibleTiles.x
) { ) {
console.log(`Adding tile ${row}/${col}`);
tileRow.push( tileRow.push(
<Tile <Tile
key={key} key={key}

2
svgmap/src/components/map/Tile.tsx
View File

@ -8,7 +8,7 @@ interface TileProperties {
} }
const Tile: react.FC<TileProperties> = (props: TileProperties) => { const Tile: react.FC<TileProperties> = (props: TileProperties) => {
console.log(`Rendering <Tile/>`); // console.log(`Rendering <Tile/>`);
const g = useRef<SVGGElement>(null); const g = useRef<SVGGElement>(null);
const timeout = (ms: number) => { const timeout = (ms: number) => {