fix: made use of olInteraction hook

terrestris · Mar 22, 2024 · 39c29ab · 39c29ab
1 parent 683685d
commit 39c29ab
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 46 deletions.
diff --git a/src/Button/RotationButton/RotationButton.example.md b/src/Button/RotationButton/RotationButton.example.md
@@ -1,37 +1,38 @@
 This demonstrates the use of the RotationButton
 
 ```jsx
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
-import OlMap from 'ol/Map';
-import OlView from 'ol/View';
-import OlLayerTile from 'ol/layer/Tile';
-import OlSourceOsm from 'ol/source/OSM';
-import { fromLonLat } from 'ol/proj';
+import OlMap from "ol/Map";
+import OlView from "ol/View";
+import OlLayerTile from "ol/layer/Tile";
+import OlSourceOsm from "ol/source/OSM";
+import { fromLonLat } from "ol/proj";
 
-import MapContext from '@terrestris/react-geo/dist/Context/MapContext/MapContext'
-import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent';
-import RotationButton from '@terrestris/react-geo/dist/Button/RotationButton/RotationButton';
+import MapComponent from "@terrestris/react-util/dist/Components/MapComponent/MapComponent";
+import MapContext from "@terrestris/react-util/dist/Context/MapContext/MapContext";
+import RotationButton from "@terrestris/react-geo/dist/Button/RotationButton/RotationButton";
 
 const RotationButtonExample = () => {
-
   const [map, setMap] = useState();
+  const [pressed, setPressed] = useState(false);
 
   useEffect(() => {
-
-    setMap(new OlMap({
-      layers: [
-        new OlLayerTile({
-          name: 'OSM',
-          source: new OlSourceOsm()
-        })
-      ],
-      view: new OlView({
-        center: fromLonLat([8, 50]),
-        zoom: 4
+    setMap(
+      new OlMap({
+        layers: [
+          new OlLayerTile({
+            name: "OSM",
+            source: new OlSourceOsm(),
+          }),
+        ],
+        view: new OlView({
+          center: fromLonLat([8, 50]),
+          zoom: 4,
+        }),
       })
-    }));
-  },[] );
+    );
+  }, []);
 
   if (!map) {
     return null;
@@ -43,14 +44,17 @@ const RotationButtonExample = () => {
         <MapComponent
           map={map}
           style={{
-            height: '400px'
+            height: "400px",
           }}
         />
-        <RotationButton/>
+        <RotationButton
+          onChange={() => setPressed(!pressed)}
+          pressed={pressed}
+        />
       </MapContext.Provider>
     </div>
   );
-}
+};
 
-<RotationButtonExample />
+<RotationButtonExample />;
 ```
diff --git a/src/Button/RotationButton/RotationButton.spec.tsx b/src/Button/RotationButton/RotationButton.spec.tsx
@@ -1,12 +1,11 @@
-import * as React from 'react';
+import { renderInMapContext } from '@terrestris/react-util/dist/Util/rtlTestUtils';
 import { within } from '@testing-library/react';
-
+import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
-import OlView from 'ol/View';
 import OlSourceOsm from 'ol/source/OSM';
-import OlLayerTile from 'ol/layer/Tile';
+import OlView from 'ol/View';
+import * as React from 'react';
 
-import { renderInMapContext } from '../../Util/rtlTestUtils';
 import RotationButton from './RotationButton';
 
 describe('<RotationButton />', () => {

diff --git a/src/Button/RotationButton/RotationButton.tsx b/src/Button/RotationButton/RotationButton.tsx
@@ -5,39 +5,33 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { DragRotateAndZoom } from 'ol/interaction.js';
 
-import { useMap } from '../../Hook/useMap';
+import { useOlInteraction } from '@terrestris/react-util/';
 import ToggleButton, {
   ToggleButtonProps
 } from '../ToggleButton/ToggleButton';
 
 export type RotationButtonProps =  Partial<ToggleButtonProps>;
 
 export const RotationButton: React.FC<RotationButtonProps> = ({
+  pressed = false,
   tooltip = 'Shift + Drag to rotate and zoom the map around its center',
   pressedIcon = <FontAwesomeIcon icon={faArrowsRotate} />,
   tooltipProps,
   ...passThroughProps}
 ) => {
-  const map = useMap();
 
-  if (!map) {
-    return <></>;
-  }
-  let action = new DragRotateAndZoom();
-  const onToggle = (pressed: boolean) => {
-    if (pressed) {
-      map.addInteraction(action);
-    } else {
-      map.removeInteraction(action);
-    }
-  };
+  useOlInteraction(() => {
+    return (
+      new DragRotateAndZoom()
+    );
+  }, [], pressed);
 
   return (
     <ToggleButton
       tooltip={'Shift + Drag to rotate and zoom the map around its center'}
       icon={<FontAwesomeIcon icon={faArrowsRotate} />}
       pressedIcon={<FontAwesomeIcon icon={faArrowsRotate} />}
-      onToggle={onToggle}
+      pressed={pressed}
       tooltipProps={tooltipProps}
       {...passThroughProps}
     />