From 74dbff2d23acab2199d3a1a911a3e4451393d3ba Mon Sep 17 00:00:00 2001 From: evlist Date: Thu, 3 Nov 2022 22:20:14 +0100 Subject: [PATCH] Fixing a bug (the `` element wasn't always available as ref.current in TiledLayer), using a useEffect seems to do the trick. --- src/components/map/CurrentLocation.tsx | 4 + src/components/map/LayerStack.tsx | 6 ++ src/components/map/LiveMap.tsx | 13 ++- src/components/map/Map.tsx | 6 ++ src/components/map/Marker.tsx | 2 + src/components/map/TiledLayer.tsx | 117 +++++++++++++++---------- 6 files changed, 99 insertions(+), 49 deletions(-) diff --git a/src/components/map/CurrentLocation.tsx b/src/components/map/CurrentLocation.tsx index 6212bc0..5a1ac3c 100644 --- a/src/components/map/CurrentLocation.tsx +++ b/src/components/map/CurrentLocation.tsx @@ -16,6 +16,10 @@ export const CurrentLocation: react.FC = ( props: CurrentLocationProperties ) => { const [location] = useAtom(locationAtom); + console.log( + `Rendering CurrentLocation, location:${JSON.stringify(location)}` + ); + return location !== null ? ( = ( props: LayerStackProperties ) => { + console.log( + `LayerStack rendering, coordinateSystem: ${JSON.stringify( + props.coordinateSystem + )}, slippyGraphics: ${props.slippyGraphics}` + ); + const numberOfTiledLayers = props.numberOfTiledLayers === undefined ? 1 : props.numberOfTiledLayers; diff --git a/src/components/map/LiveMap.tsx b/src/components/map/LiveMap.tsx index e6e490c..fbc7153 100644 --- a/src/components/map/LiveMap.tsx +++ b/src/components/map/LiveMap.tsx @@ -1,4 +1,9 @@ -import react, { JSXElementConstructor, ReactElement, useEffect, useState } from 'react'; +import react, { + JSXElementConstructor, + ReactElement, + useEffect, + useState, +} from 'react'; import useDimensions from 'react-cool-dimensions'; import { MapScope, Point } from './types'; @@ -61,7 +66,11 @@ export const LiveMap: react.FC = ( useEffect(() => { setScope(props.scope); }, [props.scope]); - console.log(`LiveMap rendering: ${JSON.stringify(scope)}`); + console.log( + `LiveMap rendering, scope: ${JSON.stringify(scope)}, slippyGraphics: ${ + props.slippyGraphics + }` + ); const { observe, width, height } = useDimensions(); const transform = (t: Transformation) => { const deltaZoom = t.deltaZoom === null ? 1 : t.deltaZoom; diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 9568b52..e82a441 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -25,6 +25,12 @@ export interface MapProperties { * */ export const Map: react.FC = (props: MapProperties) => { + console.log( + `Map rendering, scope: ${JSON.stringify(props.scope)}, slippyGraphics: ${ + props.slippyGraphics + }` + ); + const { observe, width, height } = useDimensions(); const tileProvider = tileProviders[props.scope.tileProvider]; diff --git a/src/components/map/Marker.tsx b/src/components/map/Marker.tsx index 6c5d9e4..48fac9f 100644 --- a/src/components/map/Marker.tsx +++ b/src/components/map/Marker.tsx @@ -11,6 +11,8 @@ export interface MarkerProperties { } export const Marker: react.FC = (props: MarkerProperties) => { + console.log(`Rendering Marker`); + if ( props.keyObject === undefined || props.zoom === undefined || diff --git a/src/components/map/TiledLayer.tsx b/src/components/map/TiledLayer.tsx index f10ade8..680ff10 100644 --- a/src/components/map/TiledLayer.tsx +++ b/src/components/map/TiledLayer.tsx @@ -2,10 +2,12 @@ import react, { cloneElement, JSXElementConstructor, ReactElement, + useEffect, useRef, + useState, } from 'react'; import TileSet from './TileSet'; -import { Point, TileKeyObject } from './types'; +import { Point, Rectangle, TileKeyObject } from './types'; import { CoordinateSystem } from './LiveMap'; export interface TiledLayerProperties { @@ -40,47 +42,65 @@ export const TiledLayer: react.FC = ( props: TiledLayerProperties ) => { const g = useRef(null); - var viewPort: any = undefined; - if ( - props.zoom === 256 && - g.current !== null && - g.current.ownerSVGElement !== null && - g.current.ownerSVGElement.parentElement !== null - ) { - const nearerHTMLParent = g.current.ownerSVGElement.parentElement; - viewPort = { - topLeft: { - x: - props.keyObject.x + - Math.floor( - -props.coordinateSystem.shift.x / props.coordinateSystem.zoom / 256 - ), - y: - props.keyObject.y + - Math.floor( - -props.coordinateSystem.shift.y / props.coordinateSystem.zoom / 256 - ), - }, - bottomRight: { - x: - props.keyObject.x + - Math.ceil( - (-props.coordinateSystem.shift.x + nearerHTMLParent.offsetWidth) / - props.coordinateSystem.zoom / - 256 - ) - - 1, - y: - props.keyObject.y + - Math.ceil( - (-props.coordinateSystem.shift.y + nearerHTMLParent.offsetHeight) / - props.coordinateSystem.zoom / - 256 - ) - - 1, - }, - }; - } + + const [viewPort, setViewPort] = useState(); + + useEffect(() => { + console.log( + `TiledLayer zoom: ${props.zoom}, useEffect, g.current: ${g.current}` + ); + if ( + props.zoom === 256 && + g.current !== null && + g.current.ownerSVGElement !== null && + g.current.ownerSVGElement.parentElement !== null + ) { + const nearerHTMLParent = g.current.ownerSVGElement.parentElement; + setViewPort({ + topLeft: { + x: + props.keyObject.x + + Math.floor( + -props.coordinateSystem.shift.x / + props.coordinateSystem.zoom / + 256 + ), + y: + props.keyObject.y + + Math.floor( + -props.coordinateSystem.shift.y / + props.coordinateSystem.zoom / + 256 + ), + }, + bottomRight: { + x: + props.keyObject.x + + Math.ceil( + (-props.coordinateSystem.shift.x + nearerHTMLParent.offsetWidth) / + props.coordinateSystem.zoom / + 256 + ) - + 1, + y: + props.keyObject.y + + Math.ceil( + (-props.coordinateSystem.shift.y + + nearerHTMLParent.offsetHeight) / + props.coordinateSystem.zoom / + 256 + ) - + 1, + }, + }); + } + }, [props]); + + console.log( + `Rendering TiledLayer, zoom: ${props.zoom}, viewPort: ${JSON.stringify( + viewPort + )}, slippyGraphics: ${props.slippyGraphics}` + ); return ( <> = ( }} viewPort={viewPort} /> - {props.slippyGraphics !== undefined && viewPort !== undefined - ? // Slippy graphics (if needed) - props.slippyGraphics.map((slippyGraphic) => + {props.slippyGraphics !== undefined && viewPort !== undefined ? ( + // Slippy graphics (if needed) + <> + {props.slippyGraphics.map((slippyGraphic) => cloneElement(slippyGraphic, { keyObject: props.keyObject, zoom: props.coordinateSystem.zoom, viewPort: viewPort, }) - ) - : null} + )} + {console.log('TiledLayer: adding slippyGraphics')}, + + ) : null} );