Refactoring

This commit is contained in:
Eric van der Vlist 2022-10-15 11:58:02 +02:00
parent 268d2378bd
commit 7670dce370
4 changed files with 61 additions and 77 deletions

View File

@ -68,55 +68,52 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
/> />
</SingleTouchHandler> </SingleTouchHandler>
</MouseHandler> </MouseHandler>
<SlippyBoard <SlippyBoard boardSize={boardSize} shift={shift} zoom={zoom}>
boardSize={boardSize} <>
shift={shift}
zoom={zoom}
layers={[
{
key: 'background',
content: (
<rect <rect
key='background'
x='0' x='0'
y='0' y='0'
width={boardSize} width={boardSize}
height={boardSize} height={boardSize}
fill='red' fill='red'
/> />
),
},
{
key: 'tiles1',
content: (
<TiledLayer <TiledLayer
key='tile1'
height={props.height} height={props.height}
width={props.width} width={props.width}
shift={shift} shift={shift}
zoom={zoom} zoom={zoom}
layerZoom={1}
tileSize={256} tileSize={256}
nbTiles={nbTiles} nbTiles={nbTiles}
active={zoom < 2} active={zoom < 1.5}
/> />
),
},
{
key: 'tiles2',
transform: 'scale(.5)',
content: (
<TiledLayer <TiledLayer
key='tile2'
height={props.height * 2} height={props.height * 2}
width={props.width * 2} width={props.width * 2}
shift={{ x: shift.x * 2, y: shift.y * 2 }} shift={{ x: shift.x * 2, y: shift.y * 2 }}
zoom={zoom} zoom={zoom}
layerZoom={0.5}
tileSize={256} tileSize={256}
nbTiles={nbTiles * 2} nbTiles={nbTiles * 2}
active={zoom >= 2} active={zoom >= Math.SQRT2 && zoom < 2 * Math.SQRT2}
/> />
), <TiledLayer
}, key='tile3'
{ key: 'circle', content: <circle cx='50' cy='50' r='50' /> }, height={props.height * 4}
]} width={props.width * 4}
shift={{ x: shift.x * 4, y: shift.y * 4 }}
zoom={zoom}
layerZoom={0.25}
tileSize={256}
nbTiles={nbTiles * 4}
active={zoom >= 2 * Math.SQRT2}
/> />
<circle key='circle' cx='50' cy='50' r='50' />,
</>
</SlippyBoard>
</div> </div>
</IonContent> </IonContent>
); );

View File

@ -4,11 +4,7 @@ interface SlippyBoardProperties {
boardSize: number; boardSize: number;
shift: { x: number; y: number }; shift: { x: number; y: number };
zoom: number; zoom: number;
layers?: { children: any;
key: string;
transform?: string;
content: ReactElement | ReactNode | ReactElement[] | ReactElement[][];
}[];
} }
const SlippyBoard: react.FC<SlippyBoardProperties> = ( const SlippyBoard: react.FC<SlippyBoardProperties> = (
@ -19,17 +15,7 @@ const SlippyBoard: react.FC<SlippyBoardProperties> = (
<g <g
transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`} transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
> >
{props.layers {props.children}
? props.layers.map((layer) => (
<g
className='layer'
key={layer.key}
transform={layer.transform === undefined ? '' : layer.transform}
>
{layer.content}
</g>
))
: null}
</g> </g>
</svg> </svg>
); );

View File

@ -12,6 +12,7 @@ interface TiledLayerProperties {
width: number; width: number;
shift: Point; shift: Point;
zoom: number; zoom: number;
layerZoom: number;
tileSize: number; tileSize: number;
nbTiles: number; nbTiles: number;
active: boolean; active: boolean;
@ -20,16 +21,16 @@ interface TiledLayerProperties {
const TiledLayer: react.FC<TiledLayerProperties> = ( const TiledLayer: react.FC<TiledLayerProperties> = (
props: TiledLayerProperties props: TiledLayerProperties
) => { ) => {
var initialTiledLayer: any[][] = []; var initialTiles: any[][] = [];
for (let row = 0; row < props.nbTiles; row++) { for (let row = 0; row < props.nbTiles; row++) {
let tileRow = []; let tileRow = [];
for (let col = 0; col < props.nbTiles; col++) { for (let col = 0; col < props.nbTiles; col++) {
tileRow.push(<g key={`${row}/${col}`} />); tileRow.push(<g key={`${row}/${col}`} />);
} }
initialTiledLayer.push(tileRow); initialTiles.push(tileRow);
} }
const [tiledLayer, setTiledLayer] = useState(initialTiledLayer); const [tiles, setTiles] = useState(initialTiles);
useEffect(() => { useEffect(() => {
if (props.active) { if (props.active) {
@ -63,13 +64,13 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
firstVisibleTiles firstVisibleTiles
)}/${JSON.stringify(lastVisibleTiles)}.` )}/${JSON.stringify(lastVisibleTiles)}.`
); );
const newTiledLayer: any[][] = []; const newTiles: any[][] = [];
for (let row = 0; row < props.nbTiles; row++) { for (let row = 0; row < props.nbTiles; row++) {
let tileRow = []; let tileRow = [];
for (let col = 0; col < props.nbTiles; col++) { for (let col = 0; col < props.nbTiles; col++) {
const key = `${row}/${col}`; const key = `${row}/${col}`;
if ( if (
tiledLayer[row][col].type === 'g' && tiles[row][col].type === 'g' &&
row >= firstVisibleTiles.y && row >= firstVisibleTiles.y &&
row <= lastVisibleTiles.y && row <= lastVisibleTiles.y &&
col >= firstVisibleTiles.x && col >= firstVisibleTiles.x &&
@ -87,13 +88,13 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
/> />
); );
} else { } else {
tileRow.push(tiledLayer[row][col]); tileRow.push(tiles[row][col]);
} }
} }
newTiledLayer.push(tileRow); newTiles.push(tileRow);
} }
setTiledLayer(newTiledLayer); setTiles(newTiles);
} }
}, [ }, [
props.shift, props.shift,
@ -105,7 +106,7 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
props.tileSize, props.tileSize,
]); ]);
return <>{tiledLayer}</>; return <g transform={`scale(${props.layerZoom})`}>{tiles}</g>;
}; };
export default TiledLayer; export default TiledLayer;

View File

@ -1,9 +1,9 @@
import react from 'react'; import react from 'react';
interface MapProperties {} interface TemplateProperties {}
const Map: react.FC<MapProperties> = (props: MapProperties) => { const Template: react.FC<TemplateProperties> = (props: TemplateProperties) => {
return <></>; return <></>;
}; };
export default Map; export default Template;