Trying to simplify...

This commit is contained in:
Eric van der Vlist 2022-10-13 17:30:05 +02:00
parent 8f347fadac
commit e5d5f61267
3 changed files with 51 additions and 3 deletions

View File

@ -3,7 +3,8 @@ import react, { useState } from 'react';
import './Map.css'; import './Map.css';
import MouseHandler from './MouseHandler'; import MouseHandler from './MouseHandler';
import ResizeableBoard from './ResizeableBoard'; import SlippyBoard from './SlippyBoard';
import TiledLayer from './TiledLayer';
interface MapProperties { interface MapProperties {
height: number; height: number;
@ -21,7 +22,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
}; };
const addZoom = (zoomFactor: number, center: { x: number; y: number }) => { const addZoom = (zoomFactor: number, center: { x: number; y: number }) => {
setShift({ addShift({
x: (shift.x - center.x) * (zoomFactor - 1), x: (shift.x - center.x) * (zoomFactor - 1),
y: (shift.y - center.y) * (zoomFactor - 1), y: (shift.y - center.y) * (zoomFactor - 1),
}); });
@ -41,7 +42,15 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
addZoom={addZoom} addZoom={addZoom}
boardSize={boardSize} boardSize={boardSize}
/> />
<ResizeableBoard boardSize={boardSize} shift={shift} zoom={zoom} /> <SlippyBoard
boardSize={boardSize}
shift={shift}
zoom={zoom}
layers={[
{ key: 'tiles', content: <TiledLayer /> },
{ key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
]}
/>
</div> </div>
</IonContent> </IonContent>
); );

View File

@ -0,0 +1,28 @@
import react, { Fragment, ReactElement, ReactSVGElement } from 'react';
interface SlippyBoardProperties {
boardSize: number;
shift: { x: number; y: number };
zoom: number;
layers?: { key: string; content: ReactElement }[];
}
const SlippyBoard: react.FC<SlippyBoardProperties> = (
props: SlippyBoardProperties
) => {
return (
<svg height={props.boardSize} width={props.boardSize}>
<g
transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
>
{props.layers
? props.layers.map((layer) => (
<Fragment key={layer.key}>{layer.content}</Fragment>
))
: null}
</g>
</svg>
);
};
export default SlippyBoard;

View File

@ -0,0 +1,11 @@
import react from 'react';
interface TiledLayerProperties {}
const TiledLayer: react.FC<TiledLayerProperties> = (
props: TiledLayerProperties
) => {
return <g></g>;
};
export default TiledLayer;