2022-10-14 19:17:13 +00:00
|
|
|
import { IonContent } from '@ionic/react';
|
2022-10-14 22:03:35 +00:00
|
|
|
import react, { useState } from 'react';
|
2022-10-12 17:51:49 +00:00
|
|
|
|
|
|
|
import './Map.css';
|
|
|
|
import MouseHandler from './MouseHandler';
|
2022-10-13 15:30:05 +00:00
|
|
|
import SlippyBoard from './SlippyBoard';
|
2022-10-14 20:08:47 +00:00
|
|
|
import SingleTouchHandler from './SingleTouchHandler';
|
|
|
|
import DoubleTouchHandler from './DoubleTouchHandler';
|
2022-10-16 09:53:05 +00:00
|
|
|
import TiledLayersStack from './TiledLayersStack';
|
2022-10-12 17:51:49 +00:00
|
|
|
|
|
|
|
interface MapProperties {
|
|
|
|
height: number;
|
|
|
|
width: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
const Map: react.FC<MapProperties> = (props: MapProperties) => {
|
2022-10-14 15:48:00 +00:00
|
|
|
const nbTiles =
|
|
|
|
Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
|
|
|
|
const boardSize = nbTiles * 256;
|
2022-10-12 17:51:49 +00:00
|
|
|
|
2022-10-14 19:08:42 +00:00
|
|
|
const [shift, setShift] = useState({ x: -boardSize / 2, y: -boardSize / 2 });
|
2022-10-13 12:39:03 +00:00
|
|
|
const [zoom, setZoom] = useState(1);
|
|
|
|
|
|
|
|
const addShift = (deltaShift: { x: number; y: number }) => {
|
|
|
|
setShift({ x: shift.x + deltaShift.x, y: shift.y + deltaShift.y });
|
|
|
|
};
|
|
|
|
|
2022-10-14 20:21:58 +00:00
|
|
|
const addZoom = (
|
|
|
|
zoomFactor: number,
|
|
|
|
center: { x: number; y: number },
|
|
|
|
deltaShift: { x: number; y: number } = { x: 0, y: 0 }
|
|
|
|
) => {
|
2022-10-13 15:30:05 +00:00
|
|
|
addShift({
|
2022-10-14 20:21:58 +00:00
|
|
|
x: (shift.x - center.x) * (zoomFactor - 1) + deltaShift.x,
|
|
|
|
y: (shift.y - center.y) * (zoomFactor - 1) + deltaShift.y,
|
2022-10-14 09:04:24 +00:00
|
|
|
});
|
2022-10-13 12:39:03 +00:00
|
|
|
setZoom(zoom * zoomFactor);
|
|
|
|
};
|
|
|
|
|
2022-10-15 15:43:49 +00:00
|
|
|
const [baseZoomLevel, setBaseZoomLevel] = useState(10);
|
|
|
|
|
2022-10-14 18:52:24 +00:00
|
|
|
console.log(`Rendering Map, zoom:${zoom}, shift:${JSON.stringify(shift)}`);
|
|
|
|
|
2022-10-12 17:51:49 +00:00
|
|
|
return (
|
|
|
|
<IonContent fullscreen={true}>
|
|
|
|
<div
|
|
|
|
className='map'
|
|
|
|
style={{ width: props.width + 'px', height: props.height + 'px' }}
|
|
|
|
>
|
2022-10-13 12:39:03 +00:00
|
|
|
<MouseHandler
|
|
|
|
shift={shift}
|
|
|
|
addShift={addShift}
|
|
|
|
zoom={zoom}
|
|
|
|
addZoom={addZoom}
|
|
|
|
boardSize={boardSize}
|
2022-10-14 20:08:47 +00:00
|
|
|
>
|
|
|
|
<SingleTouchHandler
|
|
|
|
shift={shift}
|
|
|
|
addShift={addShift}
|
|
|
|
zoom={zoom}
|
|
|
|
addZoom={addZoom}
|
|
|
|
boardSize={boardSize}
|
|
|
|
>
|
|
|
|
<DoubleTouchHandler
|
|
|
|
shift={shift}
|
|
|
|
addShift={addShift}
|
|
|
|
zoom={zoom}
|
|
|
|
addZoom={addZoom}
|
|
|
|
boardSize={boardSize}
|
|
|
|
/>
|
|
|
|
</SingleTouchHandler>
|
|
|
|
</MouseHandler>
|
2022-10-15 09:58:02 +00:00
|
|
|
<SlippyBoard boardSize={boardSize} shift={shift} zoom={zoom}>
|
|
|
|
<>
|
|
|
|
<rect
|
|
|
|
key='background'
|
|
|
|
x='0'
|
|
|
|
y='0'
|
|
|
|
width={boardSize}
|
|
|
|
height={boardSize}
|
|
|
|
fill='red'
|
|
|
|
/>
|
2022-10-16 09:53:05 +00:00
|
|
|
<TiledLayersStack
|
2022-10-15 09:58:02 +00:00
|
|
|
height={props.height}
|
|
|
|
width={props.width}
|
|
|
|
shift={shift}
|
|
|
|
zoom={zoom}
|
|
|
|
tileSize={256}
|
2022-10-15 10:04:18 +00:00
|
|
|
key='tiled-layers'
|
2022-10-15 15:32:52 +00:00
|
|
|
numberOfZoomLevels={5}
|
2022-10-15 15:43:49 +00:00
|
|
|
baseZoomLevel={baseZoomLevel}
|
|
|
|
setBaseZoomLevel={setBaseZoomLevel}
|
2022-10-15 09:58:02 +00:00
|
|
|
/>
|
|
|
|
<circle key='circle' cx='50' cy='50' r='50' />,
|
|
|
|
</>
|
|
|
|
</SlippyBoard>
|
2022-10-12 17:51:49 +00:00
|
|
|
</div>
|
|
|
|
</IonContent>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Map;
|