Adding the notion of TileFactory

This commit is contained in:
Eric van der Vlist 2022-10-17 18:17:13 +02:00
parent cf50675077
commit a5dc279e4e
3 changed files with 15 additions and 1 deletions

View File

@ -1,5 +1,8 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import TiledLayer from './TiledLayer'; import TiledLayer from './TiledLayer';
import { TileFactory } from './types';
const fakeTileFactory: TileFactory = (keyObject) => <></>;
describe('The TiledLayer component ', () => { describe('The TiledLayer component ', () => {
test('exposes the tiles needed per its viewport', () => { test('exposes the tiles needed per its viewport', () => {
@ -8,6 +11,7 @@ describe('The TiledLayer component ', () => {
<TiledLayer <TiledLayer
keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }} keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }} viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
tileFactory={fakeTileFactory}
/> />
</svg> </svg>
); );
@ -37,6 +41,7 @@ describe('The TiledLayer component ', () => {
<TiledLayer <TiledLayer
keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }} keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }} viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
tileFactory={fakeTileFactory}
/> />
</svg> </svg>
); );
@ -45,6 +50,7 @@ describe('The TiledLayer component ', () => {
<TiledLayer <TiledLayer
keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }} keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
viewPort={{ topLeft: { x: 5, y: 0 }, bottomRight: { x: 5, y: 2 } }} viewPort={{ topLeft: { x: 5, y: 0 }, bottomRight: { x: 5, y: 2 } }}
tileFactory={fakeTileFactory}
/> />
</svg> </svg>
); );

View File

@ -1,7 +1,7 @@
import react, { useRef } from 'react'; import react, { useRef } from 'react';
import { range } from 'lodash'; import { range } from 'lodash';
import { Rectangle, TileKeyObject } from './types'; import { Rectangle, TileFactory, TileKeyObject } from './types';
import tileUri from './uris'; import tileUri from './uris';
export interface TiledLayerProperties { export interface TiledLayerProperties {
@ -9,6 +9,8 @@ export interface TiledLayerProperties {
keyObject: TileKeyObject; keyObject: TileKeyObject;
/** The current viewport expressed in tiles coordinates */ /** The current viewport expressed in tiles coordinates */
viewPort: Rectangle; viewPort: Rectangle;
/** The factory to create tiles */
tileFactory: TileFactory;
} }
/** /**

View File

@ -29,3 +29,9 @@ export interface Rectangle {
topLeft: Point; topLeft: Point;
bottomRight: Point; bottomRight: Point;
} }
/**
* A function which creates tiles
* @param keyObject - the {@link TileKeyObject} identifying the tile.
*/
export type TileFactory = (keyObject: TileKeyObject) => any;