Adding the notion of TileFactory
This commit is contained in:
parent
cf50675077
commit
a5dc279e4e
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue