Expermienting a reticle.

This commit is contained in:
Eric van der Vlist 2022-10-08 20:31:29 +02:00
parent 5822198f92
commit e206d905b7
3 changed files with 44 additions and 3 deletions

View File

@ -0,0 +1,34 @@
import React from 'react';
import { Point } from '../../lib/geo';
const Reticle: React.FC<{}> = () => {
const center: Point = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
const radius = Math.min(window.innerWidth, window.innerHeight) / 8;
return (
<g>
<circle
cx={center.x}
cy={center.y}
r={radius}
fill='transparent'
stroke='black'
strokeWidth={2}
/>
<path
d={`M ${center.x - radius},${center.y}
h ${radius - 3}
m ${6},0
h ${radius - 3}
M ${center.x},${center.y - radius}
v ${radius - 3}
m 0,${6}
v ${radius - 3}`}
strokeWidth={1}
stroke='red'
/>
</g>
);
};
export default Reticle;

View File

@ -26,6 +26,7 @@ import TileServerChooserButton from './TileServerChooserButton';
import TileServerChooserDialog from './TileServerChooserDialog'; import TileServerChooserDialog from './TileServerChooserDialog';
import TrackBrowser from './TracksBrowser'; import TrackBrowser from './TracksBrowser';
import Settings from './Settings'; import Settings from './Settings';
import Reticle from './Reticle';
const Map: react.FC<{}> = () => { const Map: react.FC<{}> = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -53,7 +54,7 @@ const Map: react.FC<{}> = () => {
<IonApp> <IonApp>
<TileServerChooserDialog /> <TileServerChooserDialog />
<Slippy> <Slippy>
<Whiteboard> <Whiteboard fixedChildren={<Reticle />}>
<CurrentLocation /> <CurrentLocation />
dbReady && <Gpxes /> dbReady && <Gpxes />
</Whiteboard> </Whiteboard>

View File

@ -4,6 +4,7 @@ import { MapState } from '../../store/map';
interface WhiteboardProps { interface WhiteboardProps {
children?: any; children?: any;
fixedChildren?: any;
} }
const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => { const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
@ -12,7 +13,12 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
); );
return ( return (
<svg width={window.innerWidth} height={window.innerHeight} className="whiteboard"> <svg
width={window.innerWidth}
height={window.innerHeight}
className='whiteboard'
>
{props.fixedChildren}
<g <g
transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`} transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`}
> >