Adding a component to take care of translations and scalings around `<TileSet>` components (not used yeti but should simplify `<LayerStack>`).
This commit is contained in:
parent
7322e5f5c4
commit
ef35ffca32
|
|
@ -0,0 +1,165 @@
|
|||
import { renderHook, act, render, screen } from '@testing-library/react';
|
||||
import { useAtom } from 'jotai';
|
||||
import LayerStack from './LayerStack';
|
||||
import { coordinateSystemAtom, relativeCoordinateSystemAtom } from './Map';
|
||||
import TiledLayer from './TiledLayer';
|
||||
|
||||
describe('The TiledLayer component', () => {
|
||||
beforeEach(() => {
|
||||
globalThis.cacheForTileSet = new Map();
|
||||
});
|
||||
|
||||
test('generates an empty layer if inactive', () => {
|
||||
// const { result } = renderHook(() => useAtom(tiledLayersAtom));
|
||||
render(
|
||||
<svg data-testid='tiled-layer'>
|
||||
<TiledLayer
|
||||
keyObject={{ provider: 'fake', zoomLevel: 5, x: 2, y: 3 }}
|
||||
shift={{ x: 0.5, y: 0.25 }}
|
||||
zoom={4}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
const svg = screen.getByTestId('tiled-layer');
|
||||
expect(svg).toMatchInlineSnapshot(`
|
||||
<svg
|
||||
data-testid="tiled-layer"
|
||||
>
|
||||
<g
|
||||
transform="scale(4) translate(0.5, 0.25)"
|
||||
/>
|
||||
</svg>
|
||||
`);
|
||||
});
|
||||
test('generates a populated layer if active', () => {
|
||||
// const { result } = renderHook(() => useAtom(tiledLayersAtom));
|
||||
render(
|
||||
<svg data-testid='tiled-layer'>
|
||||
<TiledLayer
|
||||
keyObject={{ provider: 'fake', zoomLevel: 5, x: 2, y: 3 }}
|
||||
shift={{ x: 0, y: 0 }}
|
||||
zoom={1}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
const svg = screen.getByTestId('tiled-layer');
|
||||
expect(svg).toMatchInlineSnapshot(`
|
||||
<svg
|
||||
data-testid="tiled-layer"
|
||||
>
|
||||
<g
|
||||
transform="scale(1) translate(0, 0)"
|
||||
>
|
||||
<g
|
||||
transform="translate(2, 3)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/2/3.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(3, 3)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/3/3.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(4, 3)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/4/3.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(5, 3)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/5/3.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(2, 4)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/2/4.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(3, 4)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/3/4.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(4, 4)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/4/4.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(5, 4)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/5/4.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(2, 5)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/2/5.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(3, 5)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/3/5.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(4, 5)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/4/5.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(5, 5)"
|
||||
>
|
||||
<image
|
||||
height="1"
|
||||
href="https://fakeurl/5/5/5.png"
|
||||
width="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { useAtom } from 'jotai';
|
||||
import react from 'react';
|
||||
import TileSet from './TileSet';
|
||||
import { Point, TileKeyObject } from './types';
|
||||
import { coordinateSystemAtom } from './Map';
|
||||
|
||||
export interface TiledLayerProperties {
|
||||
/**
|
||||
* A key identifying the top left tile
|
||||
*/
|
||||
keyObject: TileKeyObject;
|
||||
/**
|
||||
* A flag to indicate if the layer is active and should add tiles which are in its viewport or if it is "only" a backup.
|
||||
*/
|
||||
shift: Point;
|
||||
/**
|
||||
* The zoom to apply. If equal to 1, the layer is considered active and should add tiles which are in its viewport
|
||||
*/
|
||||
zoom: number;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param props
|
||||
* @returns A layer of tiles.
|
||||
* This component wraps a `<TileSet>` in an SVG `<g>` element taking care of the scale and translation.
|
||||
*
|
||||
*/
|
||||
export const TiledLayer: react.FC<TiledLayerProperties> = (
|
||||
props: TiledLayerProperties
|
||||
) => {
|
||||
const [coordinateSystem] = useAtom(coordinateSystemAtom);
|
||||
const viewPort =
|
||||
props.zoom === 1
|
||||
? {
|
||||
topLeft: {
|
||||
x:
|
||||
props.keyObject.x +
|
||||
Math.floor(
|
||||
-coordinateSystem.shift.x / coordinateSystem.zoom / 256
|
||||
),
|
||||
y:
|
||||
props.keyObject.y +
|
||||
Math.floor(
|
||||
-coordinateSystem.shift.y / coordinateSystem.zoom / 256
|
||||
),
|
||||
},
|
||||
bottomRight: {
|
||||
x:
|
||||
props.keyObject.x +
|
||||
Math.ceil(
|
||||
(-coordinateSystem.shift.x + window.innerWidth) /
|
||||
coordinateSystem.zoom /
|
||||
256
|
||||
) -
|
||||
1,
|
||||
y:
|
||||
props.keyObject.y +
|
||||
Math.ceil(
|
||||
(-coordinateSystem.shift.y + window.innerHeight) /
|
||||
coordinateSystem.zoom /
|
||||
256
|
||||
) -
|
||||
1,
|
||||
},
|
||||
}
|
||||
: undefined;
|
||||
return (
|
||||
<g
|
||||
transform={`scale(${props.zoom}) translate(${props.shift.x}, ${props.shift.y})`}
|
||||
>
|
||||
<TileSet
|
||||
keyObject={{
|
||||
provider: props.keyObject.provider,
|
||||
zoomLevel: props.keyObject.zoomLevel,
|
||||
x: 0,
|
||||
y: 0,
|
||||
}}
|
||||
viewPort={viewPort}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
|
||||
export default TiledLayer;
|
||||
Loading…
Reference in New Issue