Inversion of logic

This commit is contained in:
Eric van der Vlist 2022-10-16 15:58:04 +02:00
parent cdf2ed2ea2
commit bc5dd365e1
2 changed files with 8 additions and 13 deletions

View File

@ -32,13 +32,6 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
const [shift, setShift] = useState({ x: -boardSize / 2, y: -boardSize / 2 }); const [shift, setShift] = useState({ x: -boardSize / 2, y: -boardSize / 2 });
const [zoom, setZoom] = useState(1); const [zoom, setZoom] = useState(1);
const [tiledLayerKey, setTiledLayerKey] = useState({
provider: 'osm',
zoomLevel: 16,
x: 33488,
y: 23939,
});
const addShift = (deltaShift: { x: number; y: number }) => { const addShift = (deltaShift: { x: number; y: number }) => {
setShift({ x: shift.x + deltaShift.x, y: shift.y + deltaShift.y }); setShift({ x: shift.x + deltaShift.x, y: shift.y + deltaShift.y });
}; };
@ -102,9 +95,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
shift={shift} shift={shift}
zoom={zoom} zoom={zoom}
tileSize={256} tileSize={256}
key='tiled-layers'
numberOfZoomLevels={5} numberOfZoomLevels={5}
tiledLayerKeyState={[tiledLayerKey, setTiledLayerKey]}
/> />
<circle key='circle' cx='50' cy='50' r='50' />, <circle key='circle' cx='50' cy='50' r='50' />,
</> </>

View File

@ -1,6 +1,6 @@
import react from 'react'; import react, { useState } from 'react';
import TiledLayer from './TiledLayer'; import TiledLayer from './TiledLayer';
import { TileKey, tileKeyToString } from './Map'; import { tileKeyToString } from './Map';
interface Point { interface Point {
x: number; x: number;
@ -14,7 +14,6 @@ interface TiledLayersStackProperties {
zoom: number; zoom: number;
tileSize: number; tileSize: number;
numberOfZoomLevels?: number; numberOfZoomLevels?: number;
tiledLayerKeyState: [TileKey, (tiledLayerKey: TileKey) => void];
} }
const TiledLayersStack: react.FC<TiledLayersStackProperties> = ( const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
@ -22,7 +21,12 @@ const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
) => { ) => {
console.log(`Rendering TiledLayersStack`); console.log(`Rendering TiledLayersStack`);
const [tiledLayerKey, setTiledLayerKey] = props.tiledLayerKeyState; const [tiledLayerKey, setTiledLayerKey] = useState({
provider: 'osm',
zoomLevel: 16,
x: 33488,
y: 23939,
});
const numberOfZoomLevels = const numberOfZoomLevels =
props.numberOfZoomLevels === undefined props.numberOfZoomLevels === undefined