Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Making TiledLayer more generic.

This commit is contained in:
Eric van der Vlist 2022-10-17 17:48:30 +02:00
parent b3e1e4de73
commit 36418a3e3c
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/map/TiledLayer.test.tsx
View File

@ -20,19 +20,19 @@ describe('The TiledLayer component ', () => {
/>
</svg>
);
screen.debug();
// screen.debug();
expect(baseElement).toMatchInlineSnapshot(`
<body>
<div>
<svg>
<g
id="tile/osm/10/7/6"
transform="translate(1, 2)"
/>
<g
id="tile/osm/10/7/7"
transform="translate(2, 2)"
/>
<g
id="tile/osm/10/7/8"
transform="translate(3, 2)"
/>
</svg>
</div>

10
src/components/map/TiledLayer.tsx
View File

@ -12,12 +12,16 @@ export interface TiledLayerProperties {
}
/**
* A lazily loaded square layer of tiles.
* A lazily loaded layer of tiles.
*
* This component is rather dumb and is mainly a sparse array of tiles.
*
* New tiles are added to the array when the viewport is updated and they stay in the array until
* the component is destroyed or its number of tiles is updated.
*
* 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)
*
*/
export const TiledLayer: react.FC<TiledLayerProperties> = (
props: TiledLayerProperties
@ -36,7 +40,9 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
y: props.keyObject.x + col,
});
if (!Object.hasOwn(tiles.current, key)) {
tiles.current[key] = <g key={key} id={key} />;
tiles.current[key] = (
<g key={key} transform={`translate(${col}, ${row})`} />
);
}
}
);