From 05e715fd66ab01ce84beff30bdbdc5138bc895c9 Mon Sep 17 00:00:00 2001
From: asefubeierl <asefubeierl@terrestris.de>
Date: Fri, 8 Nov 2024 11:37:50 +0100
Subject: [PATCH 1/3] fix: geometry edit tools and styling

---
 src/bootstrap.tsx                               |  1 +
 .../EditFeatureGeometryToolbar/index.less       | 16 +++++++++-------
 .../EditFeatureGeometryToolbar/index.tsx        | 17 +++++++++++++----
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
index 71cb1b78a..50898d99e 100644
--- a/src/bootstrap.tsx
+++ b/src/bootstrap.tsx
@@ -766,6 +766,7 @@ const renderApp = async () => {
               <ConfigProvider
                 locale={getConfigLang(i18n.language)}
                 theme={{
+                  cssVar: true,
                   token: {
                     colorPrimary: Color(style['--primaryColor']).isLight() ?
                       Color(style['--primaryColor']).darken(0.5).hex() :
diff --git a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.less b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.less
index adb9f3ef4..18cebe11b 100644
--- a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.less
+++ b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.less
@@ -3,13 +3,15 @@
   left: -45px;
   top: 50%;
   transform: translateY(-50%);
-  button {
-      background: var(--secondaryColor);
-      border-color: var(--secondaryColor);
 
-      &:hover {
-        background: var(--ant-primary-color-hover);
-        border-color: var(--ant-primary-color-hover);
-      }
+  .ant-btn-variant-solid.react-geo-togglebutton {
+    background: var(--secondaryColor);
+  }
+
+  .ant-btn-variant-solid {
+    &:disabled {
+      background: #f5f5f5;
+      border-color: #d9d9d9
     }
+  }
 }
diff --git a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
index f26484fbe..ef757aa9e 100644
--- a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
+++ b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
@@ -34,7 +34,7 @@ import { DeleteButton } from '@terrestris/react-geo/dist/Button/DeleteButton/Del
 import DrawButton from '@terrestris/react-geo/dist/Button/DrawButton/DrawButton';
 import { ModifyButton } from '@terrestris/react-geo/dist/Button/ModifyButton/ModifyButton';
 import SimpleButton from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton';
-import { ToggleGroup } from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
+import ToggleGroup from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
 
 import { useMap } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import {
@@ -77,6 +77,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
 
   const [editLayer, setEditLayer] = useState<OlLayerVector<OlSourceVector>>();
   const [, setRevision] = useState<number>(0);
+  const [selected, setSelected] = useState<string | undefined>(undefined);
 
   const gjFormat = useMemo(() => new OlFormatGeoJson(), []);
 
@@ -104,8 +105,8 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
     if (isModified && !formDirty) {
       dispatch(setFormDirty(true));
     }
-  // we only want to change formDirty state when the editHistory changes
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // we only want to change formDirty state when the editHistory changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, editHistory.current.past]);
 
   useEffect(() => {
@@ -221,10 +222,16 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
         className="geometry-edit-tb"
         alignment="vertical"
       >
-        <ToggleGroup>
+        <ToggleGroup
+        selected={selected}
+        onChange={(_evt: any, value: string | undefined) => {
+          setSelected(value)
+        }}
+        >
           {
             allowedEditMode.includes('CREATE') ?
               <DrawButton
+                value="one"
                 icon={
                   <FontAwesomeIcon icon={faPencil} />
                 }
@@ -243,6 +250,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
           {
             allowedEditMode.includes('UPDATE') ?
               <ModifyButton
+                value="two"
                 icon={
                   <FontAwesomeIcon icon={faDrawPolygon} />
                 }
@@ -262,6 +270,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
           {
             allowedEditMode.includes('DELETE') ?
               <DeleteButton
+                value="three"
                 icon={
                   <FontAwesomeIcon icon={faTrash} />
                 }

From 465526c4f3651ad1920e00fb4cd2759218cd070b Mon Sep 17 00:00:00 2001
From: asefubeierl <asefubeierl@terrestris.de>
Date: Mon, 11 Nov 2024 09:26:14 +0100
Subject: [PATCH 2/3] fix: indentation and renaming of toolbar select values

---
 .../EditFeatureGeometryToolbar/index.tsx           | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
index ef757aa9e..0122989a2 100644
--- a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
+++ b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
@@ -223,15 +223,15 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
         alignment="vertical"
       >
         <ToggleGroup
-        selected={selected}
-        onChange={(_evt: any, value: string | undefined) => {
-          setSelected(value)
-        }}
+          selected={selected}
+          onChange={(_evt: any, value: string | undefined) => {
+            setSelected(value)
+          }}
         >
           {
             allowedEditMode.includes('CREATE') ?
               <DrawButton
-                value="one"
+                value="create"
                 icon={
                   <FontAwesomeIcon icon={faPencil} />
                 }
@@ -250,7 +250,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
           {
             allowedEditMode.includes('UPDATE') ?
               <ModifyButton
-                value="two"
+                value="update"
                 icon={
                   <FontAwesomeIcon icon={faDrawPolygon} />
                 }
@@ -270,7 +270,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
           {
             allowedEditMode.includes('DELETE') ?
               <DeleteButton
-                value="three"
+                value="delete"
                 icon={
                   <FontAwesomeIcon icon={faTrash} />
                 }

From 79e4495abcc94eadd3319cf6f34dd8e76ede65fb Mon Sep 17 00:00:00 2001
From: asefubeierl <asefubeierl@terrestris.de>
Date: Mon, 11 Nov 2024 10:44:43 +0100
Subject: [PATCH 3/3] fix: linting errors

---
 .../EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
index 0122989a2..ef45699ec 100644
--- a/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
+++ b/src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx
@@ -34,7 +34,7 @@ import { DeleteButton } from '@terrestris/react-geo/dist/Button/DeleteButton/Del
 import DrawButton from '@terrestris/react-geo/dist/Button/DrawButton/DrawButton';
 import { ModifyButton } from '@terrestris/react-geo/dist/Button/ModifyButton/ModifyButton';
 import SimpleButton from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton';
-import ToggleGroup from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
+import { ToggleGroup } from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
 
 import { useMap } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import {
@@ -225,7 +225,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
         <ToggleGroup
           selected={selected}
           onChange={(_evt: any, value: string | undefined) => {
-            setSelected(value)
+            setSelected(value);
           }}
         >
           {