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

Playing with images, trying to make them cacheable...

This commit is contained in:
Eric van der Vlist 2022-10-14 11:04:24 +02:00
parent 2e17dd9c8c
commit 373e5aab0c
2 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
}; };
var tiledLayer: any[] = []; var tiledLayer: any[] = [];
tiledLayer.push(<Tile key='tile' href={fakeTile} delay={2000} />); tiledLayer.push(<Tile key='tile' href={fakeTile} x={0} y={0} delay={2000} />);
return ( return (
<IonContent fullscreen={true}> <IonContent fullscreen={true}>

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

@ -1,12 +1,14 @@
import react, { useEffect, useState } from 'react'; import react, { useEffect, useRef, useState } from 'react';
interface TileProperties { interface TileProperties {
href: string; href: string;
x: number;
y: number;
delay?: number; delay?: number;
} }
const Tile: react.FC<TileProperties> = (props: TileProperties) => { const Tile: react.FC<TileProperties> = (props: TileProperties) => {
const [ready, setReady] = useState(false); const g = useRef<SVGGElement>(null);
const timeout = (ms: number) => { const timeout = (ms: number) => {
return new Promise((resolve) => setTimeout(resolve, ms)); return new Promise((resolve) => setTimeout(resolve, ms));
@ -16,23 +18,34 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
const loadImage = async () => { const loadImage = async () => {
console.log(`Pre loading: ${JSON.stringify(props.href)}`); console.log(`Pre loading: ${JSON.stringify(props.href)}`);
const image = new Image(256, 256); const image = new Image(256, 256);
// const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
// const image = new SVGImageElement();
image.loading = 'eager'; image.loading = 'eager';
image.src = props.href; image.setAttribute('href', props.href);
if (!image.complete) { if (!image.complete) {
await image.decode(); await image.decode();
} }
if (props.delay !== undefined) { if (props.delay !== undefined) {
await timeout(props.delay); await timeout(props.delay);
} }
setReady(true); const svgImage = document.createElementNS(
'http://www.w3.org/2000/svg',
'image'
) as unknown as SVGImageElement;
svgImage.setAttribute('width', '256');
svgImage.setAttribute('height', '256');
svgImage.setAttribute('href', props.href);
// svgImage.setAttribute('x', '0');
// svgImage.setAttribute('y', '0');
g.current?.replaceChildren(svgImage);
}; };
loadImage(); loadImage();
}); });
return ready ? ( return (
<image width={256} height={256} href={props.href} x={0} y={0} /> <>
) : ( <g ref={g} transform={`translate(${props.x},${props.y})`} />
<></> </>
); );
}; };