Playing with multiple tiled layers.

This commit is contained in:
Eric van der Vlist 2022-10-15 00:03:35 +02:00
parent ca2907d886
commit 268d2378bd
4 changed files with 110 additions and 62 deletions

View File

@ -1,5 +1,5 @@
import { IonContent } from '@ionic/react';
import react, { useEffect, useState } from 'react';
import react, { useState } from 'react';
import './Map.css';
import MouseHandler from './MouseHandler';
@ -86,13 +86,31 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
),
},
{
key: 'tiles',
key: 'tiles1',
content: (
<TiledLayer
height={props.height}
width={props.width}
shift={shift}
zoom={zoom}
tileSize={256}
nbTiles={nbTiles}
active={zoom < 2}
/>
),
},
{
key: 'tiles2',
transform: 'scale(.5)',
content: (
<TiledLayer
height={props.height * 2}
width={props.width * 2}
shift={{ x: shift.x * 2, y: shift.y * 2 }}
zoom={zoom}
tileSize={256}
nbTiles={nbTiles * 2}
active={zoom >= 2}
/>
),
},

View File

@ -1,5 +1,4 @@
import { ReactComponentOrElement } from '@ionic/react';
import react, { ReactComponentElement, ReactElement, ReactNode } from 'react';
import react, { ReactElement, ReactNode } from 'react';
interface SlippyBoardProperties {
boardSize: number;
@ -7,7 +6,8 @@ interface SlippyBoardProperties {
zoom: number;
layers?: {
key: string;
content: ReactElement|ReactNode | ReactElement[] | ReactElement[][];
transform?: string;
content: ReactElement | ReactNode | ReactElement[] | ReactElement[][];
}[];
}
@ -20,7 +20,15 @@ const SlippyBoard: react.FC<SlippyBoardProperties> = (
transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
>
{props.layers
? props.layers.map((layer) => <g key={layer.key}>{layer.content}</g>)
? props.layers.map((layer) => (
<g
className='layer'
key={layer.key}
transform={layer.transform === undefined ? '' : layer.transform}
>
{layer.content}
</g>
))
: null}
</g>
</svg>

View File

@ -4,6 +4,7 @@ interface TileProperties {
href?: string;
x: number;
y: number;
tileSize: number;
delay?: number;
}
@ -19,7 +20,7 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
if (props.href !== undefined) {
const loadImage = async () => {
console.log(`Pre loading: ${JSON.stringify(props.href)}`);
const image = new Image(256, 256);
const image = new Image(props.tileSize, props.tileSize);
// const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
// const image = new SVGImageElement();
image.loading = 'eager';
@ -35,8 +36,8 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
'http://www.w3.org/2000/svg',
'image'
) as unknown as SVGImageElement;
svgImage.setAttribute('width', '256');
svgImage.setAttribute('height', '256');
svgImage.setAttribute('width', props.tileSize.toString());
svgImage.setAttribute('height', props.tileSize.toString());
// @ts-ignore
svgImage.setAttribute('href', props.href);
// svgImage.setAttribute('x', '0');
@ -45,7 +46,7 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
};
loadImage();
}
}, [props.href, props.delay]);
}, [props.href, props.delay, props.tileSize]);
// const children = useMemo(
// () => (

View File

@ -12,18 +12,18 @@ interface TiledLayerProperties {
width: number;
shift: Point;
zoom: number;
tileSize: number;
nbTiles: number;
active: boolean;
}
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++) {
for (let row = 0; row < props.nbTiles; row++) {
let tileRow = [];
for (let col = 0; col < nbTiles; col++) {
for (let col = 0; col < props.nbTiles; col++) {
tileRow.push(<g key={`${row}/${col}`} />);
}
initialTiledLayer.push(tileRow);
@ -32,57 +32,78 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
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),
};
if (props.active) {
const firstVisibleTiles = {
x: Math.max(
Math.floor(-props.shift.x / props.tileSize / props.zoom),
0
),
y: Math.max(
Math.floor(-props.shift.y / props.tileSize / 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]);
const lastVisibleTiles = {
x: Math.min(
Math.ceil(
firstVisibleTiles.x + props.width / props.tileSize / props.zoom
),
props.nbTiles - 1
),
y: Math.min(
Math.ceil(
firstVisibleTiles.y + props.height / props.tileSize / props.zoom
),
props.nbTiles - 1
),
};
console.log(
`Adding new tiles if needed for ${JSON.stringify(
firstVisibleTiles
)}/${JSON.stringify(lastVisibleTiles)}.`
);
const newTiledLayer: 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' &&
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 * props.tileSize}
y={row * props.tileSize}
tileSize={props.tileSize}
delay={1000}
/>
);
} else {
tileRow.push(tiledLayer[row][col]);
}
}
newTiledLayer.push(tileRow);
}
newTiledLayer.push(tileRow);
}
setTiledLayer(newTiledLayer);
}, [props.shift, props.zoom, nbTiles, props.height, props.width]);
setTiledLayer(newTiledLayer);
}
}, [
props.shift,
props.zoom,
props.nbTiles,
props.height,
props.width,
props.active,
props.tileSize,
]);
return <>{tiledLayer}</>;
};