Seeing how we can simulate slow tiles.

This commit is contained in:
Eric van der Vlist 2022-10-13 21:27:27 +02:00
parent e5d5f61267
commit 2e17dd9c8c
5 changed files with 51 additions and 18 deletions

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect x="0" y="0" width="256" height="256" fill="lightblue" stroke="black" stroke-width="2" />
</svg>

After

Width:  |  Height:  |  Size: 169 B

View File

@ -4,7 +4,8 @@ import react, { 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 TiledLayer from './TiledLayer'; import Tile from './Tile';
import fakeTile from './FakeTile.svg';
interface MapProperties { interface MapProperties {
height: number; height: number;
@ -25,10 +26,13 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
addShift({ addShift({
x: (shift.x - center.x) * (zoomFactor - 1), x: (shift.x - center.x) * (zoomFactor - 1),
y: (shift.y - center.y) * (zoomFactor - 1), y: (shift.y - center.y) * (zoomFactor - 1),
}); });
setZoom(zoom * zoomFactor); setZoom(zoom * zoomFactor);
}; };
var tiledLayer: any[] = [];
tiledLayer.push(<Tile key='tile' href={fakeTile} delay={2000} />);
return ( return (
<IonContent fullscreen={true}> <IonContent fullscreen={true}>
<div <div
@ -47,7 +51,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
shift={shift} shift={shift}
zoom={zoom} zoom={zoom}
layers={[ layers={[
{ key: 'tiles', content: <TiledLayer /> }, { key: 'tiles', content: tiledLayer },
{ key: 'circle', content: <circle cx='50' cy='50' r='50' /> }, { key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
]} ]}
/> />

View File

@ -4,7 +4,7 @@ interface SlippyBoardProperties {
boardSize: number; boardSize: number;
shift: { x: number; y: number }; shift: { x: number; y: number };
zoom: number; zoom: number;
layers?: { key: string; content: ReactElement }[]; layers?: { key: string; content: ReactElement | ReactElement[] }[];
} }
const SlippyBoard: react.FC<SlippyBoardProperties> = ( const SlippyBoard: react.FC<SlippyBoardProperties> = (
@ -16,9 +16,7 @@ const SlippyBoard: react.FC<SlippyBoardProperties> = (
transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`} transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
> >
{props.layers {props.layers
? props.layers.map((layer) => ( ? props.layers.map((layer) => <g key={layer.key}>{layer.content}</g>)
<Fragment key={layer.key}>{layer.content}</Fragment>
))
: null} : null}
</g> </g>
</svg> </svg>

View File

@ -0,0 +1,39 @@
import react, { useEffect, useState } from 'react';
interface TileProperties {
href: string;
delay?: number;
}
const Tile: react.FC<TileProperties> = (props: TileProperties) => {
const [ready, setReady] = useState(false);
const timeout = (ms: number) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
useEffect(() => {
const loadImage = async () => {
console.log(`Pre loading: ${JSON.stringify(props.href)}`);
const image = new Image(256, 256);
image.loading = 'eager';
image.src = props.href;
if (!image.complete) {
await image.decode();
}
if (props.delay !== undefined) {
await timeout(props.delay);
}
setReady(true);
};
loadImage();
});
return ready ? (
<image width={256} height={256} href={props.href} x={0} y={0} />
) : (
<></>
);
};
export default Tile;

View File

@ -1,11 +0,0 @@
import react from 'react';
interface TiledLayerProperties {}
const TiledLayer: react.FC<TiledLayerProperties> = (
props: TiledLayerProperties
) => {
return <g></g>;
};
export default TiledLayer;