From e206d905b73526fd38221ba8f487d35949ec13a0 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sat, 8 Oct 2022 20:31:29 +0200
Subject: [PATCH] Expermienting a reticle.

---
 src/components/map/Reticle.tsx    | 34 +++++++++++++++++++++++++++++++
 src/components/map/map.tsx        |  5 +++--
 src/components/map/whiteboard.tsx |  8 +++++++-
 3 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/components/map/Reticle.tsx

diff --git a/src/components/map/Reticle.tsx b/src/components/map/Reticle.tsx
new file mode 100644
index 0000000..0023710
--- /dev/null
+++ b/src/components/map/Reticle.tsx
@@ -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;
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 741169e..84a9f01 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -26,6 +26,7 @@ import TileServerChooserButton from './TileServerChooserButton';
 import TileServerChooserDialog from './TileServerChooserDialog';
 import TrackBrowser from './TracksBrowser';
 import Settings from './Settings';
+import Reticle from './Reticle';
 
 const Map: react.FC<{}> = () => {
   const dispatch = useDispatch();
@@ -53,7 +54,7 @@ const Map: react.FC<{}> = () => {
         <IonApp>
           <TileServerChooserDialog />
           <Slippy>
-            <Whiteboard>
+            <Whiteboard fixedChildren={<Reticle />}>
               <CurrentLocation />
               dbReady && <Gpxes />
             </Whiteboard>
@@ -66,7 +67,7 @@ const Map: react.FC<{}> = () => {
       <IonHeader className='ion-no-border' translucent={true}>
         <IonToolbar>
           <IonButtons slot='end'>
-            <TrackBrowser/>
+            <TrackBrowser />
             <GpxRecord />
             <TileServerChooserButton />
             <Settings />
diff --git a/src/components/map/whiteboard.tsx b/src/components/map/whiteboard.tsx
index 5a04915..a347e38 100644
--- a/src/components/map/whiteboard.tsx
+++ b/src/components/map/whiteboard.tsx
@@ -4,6 +4,7 @@ import { MapState } from '../../store/map';
 
 interface WhiteboardProps {
   children?: any;
+  fixedChildren?: any;
 }
 
 const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
@@ -12,7 +13,12 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
   );
 
   return (
-    <svg width={window.innerWidth} height={window.innerHeight} className="whiteboard">
+    <svg
+      width={window.innerWidth}
+      height={window.innerHeight}
+      className='whiteboard'
+    >
+      {props.fixedChildren}
       <g
         transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`}
       >