From 373e5aab0c16af3644eb54963de89813b179260f Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Fri, 14 Oct 2022 11:04:24 +0200
Subject: [PATCH] Playing with images, trying to make them cacheable...

---
 svgmap/src/components/map/Map.tsx  |  4 ++--
 svgmap/src/components/map/Tile.tsx | 29 +++++++++++++++++++++--------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/svgmap/src/components/map/Map.tsx b/svgmap/src/components/map/Map.tsx
index 5bacb23..6e4e81d 100644
--- a/svgmap/src/components/map/Map.tsx
+++ b/svgmap/src/components/map/Map.tsx
@@ -26,12 +26,12 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
     addShift({
       x: (shift.x - center.x) * (zoomFactor - 1),
       y: (shift.y - center.y) * (zoomFactor - 1),
-    }); 
+    });
     setZoom(zoom * zoomFactor);
   };
 
   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 (
     <IonContent fullscreen={true}>
diff --git a/svgmap/src/components/map/Tile.tsx b/svgmap/src/components/map/Tile.tsx
index ede3a27..b0a9959 100644
--- a/svgmap/src/components/map/Tile.tsx
+++ b/svgmap/src/components/map/Tile.tsx
@@ -1,12 +1,14 @@
-import react, { useEffect, useState } from 'react';
+import react, { useEffect, useRef, useState } from 'react';
 
 interface TileProperties {
   href: string;
+  x: number;
+  y: number;
   delay?: number;
 }
 
 const Tile: react.FC<TileProperties> = (props: TileProperties) => {
-  const [ready, setReady] = useState(false);
+  const g = useRef<SVGGElement>(null);
 
   const timeout = (ms: number) => {
     return new Promise((resolve) => setTimeout(resolve, ms));
@@ -16,23 +18,34 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
     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';
-      image.src = props.href;
+      image.setAttribute('href', props.href);
       if (!image.complete) {
         await image.decode();
       }
       if (props.delay !== undefined) {
         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();
   });
 
-  return ready ? (
-    <image width={256} height={256} href={props.href} x={0} y={0} />
-  ) : (
-    <></>
+  return (
+    <>
+      <g ref={g} transform={`translate(${props.x},${props.y})`} />
+    </>
   );
 };