Making sure TiledLaer's are reinitialized if their keyObject change.s
This commit is contained in:
parent
ffa58ee303
commit
f6a0eb8963
|
@ -118,6 +118,56 @@ describe('The TiledLayer component ', () => {
|
|||
</svg>
|
||||
</div>
|
||||
</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>
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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<TiledLayerProperties> = (
|
|||
) => {
|
||||
console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
|
||||
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(
|
||||
(row) => {
|
||||
|
|
Loading…
Reference in New Issue