dyomedea/src/components/map/TiledLayer.tsx

95 lines
2.8 KiB
TypeScript
Raw Normal View History

import react, { memo, useRef } from 'react';
import { range, isEqual } from 'lodash';
2022-10-17 10:04:25 +00:00
2022-10-17 16:17:13 +00:00
import { Rectangle, TileFactory, TileKeyObject } from './types';
2022-10-17 15:15:24 +00:00
import tileUri from './uris';
2022-10-17 10:04:25 +00:00
export const thisIsAModule = true;
/**
* A cache to store tiles without being subject to re-initialization when components are unmounted/remounted.
*
* This cache is a map of map, the first key identifying the `<TiledLayer` and the second one for `<Tile>`s.
*
* Idea stolen [on the web](https://dev.to/tiagof/react-re-mounting-vs-re-rendering-lnh)
*
* TODO: housekeeping
*
*/
declare global {
var cacheForTiledLayer: any;
}
export {};
globalThis.cacheForTiledLayer = new Map();
2022-10-17 10:04:25 +00:00
export interface TiledLayerProperties {
/** The key of the first (ie top/left) tile */
2022-10-17 11:47:35 +00:00
keyObject: TileKeyObject;
/** The current viewport expressed in tiles coordinates */
viewPort?: Rectangle;
2022-10-17 16:17:13 +00:00
/** The factory to create tiles */
tileFactory: TileFactory;
2022-10-17 10:04:25 +00:00
}
/**
2022-10-17 15:48:30 +00:00
* A lazily loaded layer of tiles.
2022-10-17 11:47:35 +00:00
*
* This component is rather dumb and is mainly a sparse array of tiles.
2022-10-17 15:48:30 +00:00
*
2022-10-17 11:47:35 +00:00
* New tiles are added to the array when the viewport is updated and they stay in the array until
* the component is destroyed.
2022-10-17 10:04:25 +00:00
*
2022-10-17 15:48:30 +00:00
* This component has no need to know the number nor the size of its tiles: tiles can be added when needed and
* its unit is the tile size (the parent component needs to transform its enclosing SVG group to adapt its units)
*
* TODO: test tiles'X and Y boundaries.
* TODO: housekeeping
* TODO: remove tileFactory to facilitate memoisation.
2022-10-17 15:48:30 +00:00
*
2022-10-17 10:04:25 +00:00
*/
export const TiledLayer: react.FC<TiledLayerProperties> = (
props: TiledLayerProperties
) => {
// console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
const key = tileUri({
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
});
2022-10-17 15:15:24 +00:00
const tiles: any = globalThis.cacheForTiledLayer.get(key) ?? new Map();
if (props.viewPort !== undefined) {
range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).forEach(
(row) => {
range(
props.viewPort!.topLeft.x,
props.viewPort!.bottomRight.x + 1
).forEach((col) => {
const keyObject = {
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
x: props.keyObject.x + col,
y: props.keyObject.y + row,
};
const key = tileUri(keyObject);
if (!tiles.has(key)) {
tiles.set(
key,
<g key={key} transform={`translate(${col}, ${row})`}>
{props.tileFactory(keyObject)}
</g>
);
}
});
}
);
globalThis.cacheForTiledLayer.set(key, tiles);
}
2022-10-17 15:15:24 +00:00
return <>{Array.from(tiles.values())}</>;
};
2022-10-17 10:04:25 +00:00
export default TiledLayer;