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> </svg>
); );
screen.debug(); // screen.debug();
expect(baseElement).toMatchInlineSnapshot(` expect(baseElement).toMatchInlineSnapshot(`
<body> <body>
<div> <div>
<svg> <svg>
<g <g
id="tile/osm/10/7/6" transform="translate(1, 2)"
/> />
<g <g
id="tile/osm/10/7/7" transform="translate(2, 2)"
/> />
<g <g
id="tile/osm/10/7/8" transform="translate(3, 2)"
/> />
</svg> </svg>
</div> </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. * 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 * 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. * 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> = ( export const TiledLayer: react.FC<TiledLayerProperties> = (
props: TiledLayerProperties props: TiledLayerProperties
@ -36,7 +40,9 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
y: props.keyObject.x + col, y: props.keyObject.x + col,
}); });
if (!Object.hasOwn(tiles.current, key)) { if (!Object.hasOwn(tiles.current, key)) {
tiles.current[key] = <g key={key} id={key} />; tiles.current[key] = (
<g key={key} transform={`translate(${col}, ${row})`} />
);
} }
} }
); );