feat: adds useGetFitPadding hook

Author: KaiVolland

Diff for: src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx

@@ -43,6 +43,7 @@ import {
 
 import useAppDispatch from '../../../hooks/useAppDispatch';
 import useAppSelector from '../../../hooks/useAppSelector';
+import useGetFitPadding from '../../../hooks/useGetFitPadding';
 
 import {
   setFormDirty
@@ -74,6 +75,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
 
   const map = useMap();
   const dispatch = useAppDispatch();
+  const getFitPadding = useGetFitPadding();
 
   const [editLayer, setEditLayer] = useState<OlLayerVector<OlSourceVector>>();
   const [, setRevision] = useState<number>(0);
@@ -124,11 +126,11 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
 
       if (!isEmptyOlExtent(source.getExtent())) {
         map?.getView().fit(source.getExtent(), {
-          padding: [50, 50, 50, 50]
+          padding: getFitPadding(true)
         });
       }
     }
-  }, [feature, editLayer, gjFormat, map]);
+  }, [feature, editLayer, gjFormat, map, getFitPadding]);
 
   const undoEdit = () => {
 

Diff for: src/components/MultiSearch/index.tsx

@@ -56,6 +56,7 @@ import {
 
 import './index.less';
 import useAppDispatch from '../../hooks/useAppDispatch';
+import useGetFitPadding from '../../hooks/useGetFitPadding';
 import { setSearchResultState } from '../../store/searchResult';
 
 export type SearchEngineFunction = (value: string, viewBox?: OlExtent) => Promise<ResultCategory[] | undefined>;
@@ -99,6 +100,7 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
   const [resultsVisible, setResultsVisible] = useState<boolean>(false);
   const [settingsVisible, setSettingsVisible] = useState<boolean>(false);
   const [searchResults, setSearchResults] = useState<ResultCategory[]>([]);
+  const getFitPadding = useGetFitPadding();
 
   useEffect(() => {
     window.addEventListener('mousedown', handleClickAway);
@@ -334,22 +336,11 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
 
     const zoomOffsetOnClick = (item: Item) => {
       const extent = item.feature.getGeometry()?.getExtent();
-      const toolMenuElement = document.querySelector('.tool-menu');
-      const toolMenuWidth = toolMenuElement?.clientWidth ?? 0;
-
-      let drawerWidth = 0;
-      if (ClientConfiguration.search?.searchResultDrawer) {
-        drawerWidth = Number(
-          getComputedStyle(document.body).getPropertyValue('--drawerWidth').replace('px', '')
-        ) || 450;
-      }
-
-      const padding = [0, drawerWidth, 0, toolMenuWidth];
 
       if (extent) {
         map?.getView().fit(extent, {
           size: map.getSize(),
-          padding
+          padding: getFitPadding(ClientConfiguration.search?.searchResultDrawer)
         });
       }
     };

Diff for: src/components/ToolMenu/FeatureInfo/PaginationToolbar/index.tsx

@@ -45,6 +45,7 @@ import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';
 
 import useAppDispatch from '../../../../hooks/useAppDispatch';
 import useAppSelector from '../../../../hooks/useAppSelector';
+import useGetFitPadding from '../../../../hooks/useGetFitPadding';
 import {
   setLayerId,
   setFeature
@@ -76,6 +77,7 @@ export const PaginationToolbar: React.FC<PaginationToolbarProps> = ({
   } = useTranslation();
   const dispatch = useAppDispatch();
   const map = useMap();
+  const getFitPadding = useGetFitPadding();
 
   const activeCopyTools = useAppSelector(state => state.featureInfo.activeCopyTools);
 
@@ -152,7 +154,7 @@ export const PaginationToolbar: React.FC<PaginationToolbarProps> = ({
       }
 
       map.getView().fit(source.getExtent(), {
-        padding: [150, 150, 150, 150]
+        padding: getFitPadding()
       });
       dispatch(setLayerId(getUid(layer)));
       dispatch(setFeature(geojsonFeature));

Diff for: src/components/ToolMenu/LayerTree/LayerTreeContextMenu/index.tsx

@@ -62,6 +62,7 @@ import {
 
 import useAppDispatch from '../../../../hooks/useAppDispatch';
 import useAppSelector from '../../../../hooks/useAppSelector';
+import useGetFitPadding from '../../../../hooks/useGetFitPadding';
 import useSHOGunAPIClient from '../../../../hooks/useSHOGunAPIClient';
 
 import {
@@ -96,6 +97,7 @@ export const LayerTreeContextMenu: React.FC<LayerTreeContextMenuProps> = ({
   const dispatch = useAppDispatch();
   const client = useSHOGunAPIClient();
   const map = useMap();
+  const getFitPadding = useGetFitPadding();
   const {
     t
   } = useTranslation();
@@ -158,7 +160,9 @@ export const LayerTreeContextMenu: React.FC<LayerTreeContextMenuProps> = ({
         } : {}
       });
       extent = transformExtent(extent, 'EPSG:4326', map.getView().getProjection());
-      map.getView().fit(extent);
+      map.getView().fit(extent, {
+        padding: getFitPadding()
+      });
     } catch (error) {
       Logger.error(error);
       notification.error({

Diff for: src/hooks/useGetFitPadding.ts

@@ -0,0 +1,48 @@
+/**
+ * This hook returns a function to calculate padding for the fit method
+ * of an ol.View. It considers the menu width, header height, footer height
+ * and drawer width if drawerOpen is set to true.
+ *
+ * It takes a boolean to determine if the drawer is open.
+ *
+ * The returned function (getFitPadding) computes an array consisting of:
+ *   - header height (using the '--headerHeight' CSS property, defaults to 50px if undefined)
+ *   - drawer width (using the '--drawerWidth' CSS property, defaults to 450px if undefined and if the drawer is open)
+ *   - footer height (using the '--footerHeight' CSS property, defaults to 40px if undefined)
+ *   - tool menu width (derived from the width of the element with the 'tool-menu' class)
+ *
+ * @returns (drawerOpen: boolean) => [number, number, number, number]
+ */
+export const useGetFitPadding = () => {
+
+  const getCssPropertyValue = (value: string, fallback: number) => {
+    return Number(
+      getComputedStyle(document.body).getPropertyValue(value).replace('px', '')
+    ) || fallback;
+  };
+
+  /**
+   * This function calculates the padding for the fit method of an ol.View.
+   *
+   * @param drawerOpen Include the drawer width in the calculation
+   * @returns [topPadding, rightPadding, bottomPadding, leftPadding]
+   */
+  function getFitPadding(drawerOpen = false) {
+    const toolMenuElement = document.querySelector('.tool-menu');
+    const toolMenuWidth = toolMenuElement?.clientWidth ?? 0;
+
+    const headerHeight = getCssPropertyValue('--headerHeight', 50);
+    const footerHeight = getCssPropertyValue('--footerHeight', 40);
+
+    let drawerWidth = 0;
+    if (drawerOpen) {
+      drawerWidth = getCssPropertyValue('--drawerWidth', 450);
+    }
+
+    return [headerHeight, drawerWidth, footerHeight, toolMenuWidth];
+  };
+
+  return getFitPadding;
+};
+
+export default useGetFitPadding;