From f6a0eb8963258f2a6dd47f91c11828f350591c4e Mon Sep 17 00:00:00 2001 From: evlist Date: Mon, 17 Oct 2022 20:52:10 +0200 Subject: [PATCH] Making sure TiledLaer's are reinitialized if their keyObject change.s --- src/components/map/TiledLayer.test.tsx | 50 ++++++++++++++++++++++++++ src/components/map/TiledLayer.tsx | 9 +++-- 2 files changed, 57 insertions(+), 2 deletions(-) diff --git a/src/components/map/TiledLayer.test.tsx b/src/components/map/TiledLayer.test.tsx index ba02f58..edcd89f 100644 --- a/src/components/map/TiledLayer.test.tsx +++ b/src/components/map/TiledLayer.test.tsx @@ -118,6 +118,56 @@ describe('The TiledLayer component ', () => { +`); + }); + test('is reinitialized if its key isObject updated', () => { + const { baseElement, rerender } = render( + + + + ); + rerender( + + + + ); + // screen.debug(); + expect(baseElement).toMatchInlineSnapshot(` + +
+ + + + {"provider":"osm","zoomLevel":11,"x":10,"y":5} + + + + + {"provider":"osm","zoomLevel":11,"x":10,"y":6} + + + + + {"provider":"osm","zoomLevel":11,"x":10,"y":7} + + + +
+ `); }); }); diff --git a/src/components/map/TiledLayer.tsx b/src/components/map/TiledLayer.tsx index d672b8e..5de7820 100644 --- a/src/components/map/TiledLayer.tsx +++ b/src/components/map/TiledLayer.tsx @@ -1,5 +1,5 @@ -import react, { useRef } from 'react'; -import { range } from 'lodash'; +import react, { useEffect, useRef } from 'react'; +import { range, isEqual } from 'lodash'; import { Rectangle, TileFactory, TileKeyObject } from './types'; import tileUri from './uris'; @@ -30,6 +30,11 @@ export const TiledLayer: react.FC = ( ) => { console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`); const tiles = useRef({}); + const previousKeyObject = useRef(props.keyObject); + if (!isEqual(props.keyObject, previousKeyObject.current)) { + previousKeyObject.current = props.keyObject; + tiles.current = {}; + } range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).map( (row) => {