Loading new tiles when shift requires...

This commit is contained in:
Eric van der Vlist 2022-10-14 20:52:24 +02:00
parent 07551a887e
commit 2362ff2938
3 changed files with 110 additions and 43 deletions

View File

@ -1,5 +1,10 @@
import { IonContent } from '@ionic/react';
import react, { useState } from 'react';
import { IonContent, ReactComponentOrElement } from '@ionic/react';
import react, {
ReactComponentElement,
useEffect,
useRef,
useState,
} from 'react';
import './Map.css';
import MouseHandler from './MouseHandler';
@ -32,20 +37,73 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
setZoom(zoom * zoomFactor);
};
var tiledLayer: any[] = [];
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++) {
tiledLayer.push(
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), 0),
y: Math.max(Math.floor(-shift.y / 256), 0),
};
const lastVisibleTiles = {
x: Math.min(
Math.ceil(firstVisibleTiles.x + props.width / 256),
nbTiles - 1
),
y: Math.min(
Math.ceil(firstVisibleTiles.y + props.height / 256),
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
) {
tileRow.push(
<Tile
key={`${row}/${col}`}
key={key}
href={fakeTile}
x={col * 256}
y={row * 256}
delay={20 * col * row}
delay={1000}
/>
);
} else {
// tileRow.push(<g key={key} />);
tileRow.push(tiledLayer[row][col]);
}
}
newTiledLayer.push(tileRow);
}
setTiledLayer(newTiledLayer);
}, [shift, zoom, nbTiles]);
// console.log(`tiledLayer: ${JSON.stringify(tiledLayer)}`);
return (
<IonContent fullscreen={true}>

View File

@ -4,7 +4,10 @@ interface SlippyBoardProperties {
boardSize: number;
shift: { x: number; y: number };
zoom: number;
layers?: { key: string; content: ReactElement | ReactElement[] }[];
layers?: {
key: string;
content: ReactElement | ReactElement[] | ReactElement[][];
}[];
}
const SlippyBoard: react.FC<SlippyBoardProperties> = (

View File

@ -1,7 +1,7 @@
import react, { useEffect, useMemo, useRef, useState } from 'react';
interface TileProperties {
href: string;
href?: string;
x: number;
y: number;
delay?: number;
@ -16,12 +16,14 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
};
useEffect(() => {
if (props.href !== undefined) {
const loadImage = async () => {
console.log(`Pre loading: ${JSON.stringify(props.href)}`);
const image = new Image(256, 256);
// const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
// const image = new SVGImageElement();
image.loading = 'eager';
// @ts-ignore
image.setAttribute('href', props.href);
if (!image.complete) {
await image.decode();
@ -35,13 +37,15 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
) as unknown as SVGImageElement;
svgImage.setAttribute('width', '256');
svgImage.setAttribute('height', '256');
// @ts-ignore
svgImage.setAttribute('href', props.href);
// svgImage.setAttribute('x', '0');
// svgImage.setAttribute('y', '0');
g.current?.replaceChildren(svgImage);
};
loadImage();
}, []);
}
}, [props.href]);
// const children = useMemo(
// () => (
@ -52,9 +56,11 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
// []
// );
return <>
return (
<>
<g ref={g} transform={`translate(${props.x},${props.y})`} />
</>;
</>
);
};
export default Tile;