Start on a polygon button for release sites

src/Atlantis/src/Client/Mapster/drifters/Components.fs

@@ -45,12 +45,61 @@ let placingToggleButton (disabled: bool) (map: OlMap) (onPlace: Coordinate -> un
         </sp-action-button>
         """
 
+[<HookComponent>]
+let polygonButton (map: OlMap) =
+    let active, setActive = Hook.useState false
+
+    // TODO(simkir): Create layer and interaction on start up, and just add and remove from map? Instead of creating the
+    // objects over and over.
+    let mapLayer, setLayer = Hook.useState<Layer option> None
+    let interaction, setInteraction = Hook.useState<Interaction option> None
+
+    Hook.useEffectOnChange (
+        active,
+        fun isActive ->
+            if isActive then
+                // Add interaction
+                let source = Source.vectorSource []
+                let layer =
+                    Layer.vectorLayer [
+                        layer.source source
+                    ]
+                let drawInteraction =
+                    Interaction.draw [
+                        draw.source source
+                        draw.drawType Geometry.Polygon
+                    ]
+                do console.debug("[Drifter] Adding new layer to map %o", layer)
+                do map.addLayer layer
+                do setLayer (Some layer)
+                do console.debug("[Drifter] Adding new draw interaction to map %o", drawInteraction)
+                do map.addInteraction drawInteraction
+                do setInteraction (Some drawInteraction)
+                ()
+            else
+                // Remove interaction
+                if interaction.IsSome then
+                    do map.removeInteraction interaction.Value |> ignore
+                if mapLayer.IsSome then
+                    do map.removeLayer mapLayer.Value |> ignore
+                ()
+    )
+
+    html $"""
+        <sp-action-button
+            ?selected={active}
+            @click={fun () -> setActive (not active)}
+        >
+            <sp-icon-polygon slot="icon"></sp-icon-polygon>
+            Add polygon
+        </sp-action-button>
+    """
+
 [<HookComponent>]
 let releaseSitesControls dispatch (model: DrifterModel) =
     let isEditing, setIsEditing = Hook.useState<int option> None
     let defaultSite, setDefaultSite = Hook.useState ReleaseSite.empty
     let coordsString, setCoordsString = Hook.useState ""
-    console.debug ("[Drifters.SimControls] defaultSite :", defaultSite)
 
     let tryFence (site: ReleaseSite) : ReleaseSite option =
         match model.fence with
@@ -425,6 +474,8 @@ let releaseSitesControls dispatch (model: DrifterModel) =
         <div class="release-control-button-container">
             {placingToggleButton model.selectedSite.IsSome model.openLayersMap handleMapPlaceRelease}
 
+            {polygonButton model.openLayersMap}
+
             <sp-action-button
                 ?disabled={model.selectedSite.IsSome}
                 @click={Ev (fun _ -> handleAddSitesFromString ())}