Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Making sure TiledLaer's are reinitialized if their keyObject change.s

This commit is contained in:
Eric van der Vlist 2022-10-17 20:52:10 +02:00
parent ffa58ee303
commit f6a0eb8963
2 changed files with 57 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/map/TiledLayer.test.tsx
View File

@ -118,6 +118,56 @@ describe('The TiledLayer component ', () => {
</svg> </svg>
</div> </div>
</body> </body>
`);
});
test('is reinitialized if its key isObject updated', () => {
const { baseElement, rerender } = render(
<svg>
<TiledLayer
keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
tileFactory={fakeTileFactory}
/>
</svg>
);
rerender(
<svg>
<TiledLayer
keyObject={{ provider: 'osm', zoomLevel: 11, x: 5, y: 8 }}
viewPort={{ topLeft: { x: 5, y: 0 }, bottomRight: { x: 5, y: 2 } }}
tileFactory={fakeTileFactory}
/>
</svg>
);
// screen.debug();
expect(baseElement).toMatchInlineSnapshot(`
<body>
<div>
<svg>
<g
transform="translate(5, 0)"
>
<text>
{"provider":"osm","zoomLevel":11,"x":10,"y":5}
</text>
</g>
<g
transform="translate(5, 1)"
>
<text>
{"provider":"osm","zoomLevel":11,"x":10,"y":6}
</text>
</g>
<g
transform="translate(5, 2)"
>
<text>
{"provider":"osm","zoomLevel":11,"x":10,"y":7}
</text>
</g>
</svg>
</div>
</body>
`); `);
}); });
}); });

9
src/components/map/TiledLayer.tsx
View File

@ -1,5 +1,5 @@
import react, { useRef } from 'react'; import react, { useEffect, useRef } from 'react';
import { range } from 'lodash'; import { range, isEqual } from 'lodash';
import { Rectangle, TileFactory, TileKeyObject } from './types'; import { Rectangle, TileFactory, TileKeyObject } from './types';
import tileUri from './uris'; import tileUri from './uris';
@ -30,6 +30,11 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
) => { ) => {
console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`); console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
const tiles = useRef<any>({}); const tiles = useRef<any>({});
const previousKeyObject = useRef<TileKeyObject>(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( range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).map(
(row) => { (row) => {