feat: add RotationButton

Author: TreffN

src/Button/RotationButton/RotationButton.example.md

@@ -0,0 +1,59 @@
+This demonstrates the use of the RotationButton
+
+```jsx
+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 OlVectorLayer from 'ol/layer/Vector';
+import OlVectorSource from 'ol/source/Vector';
+import OlFormatGeoJSON from 'ol/format/GeoJSON';
+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';
+
+const RotationButtonExample = () => {
+
+  const [map, setMap] = useState();
+
+  useEffect(() => {
+
+    setMap(new OlMap({
+      layers: [
+        new OlLayerTile({
+          name: 'OSM',
+          source: new OlSourceOsm()
+        })
+      ],
+      view: new OlView({
+        center: fromLonLat([8, 50]),
+        zoom: 4
+      })
+    }));
+  },[] );
+
+  if (!map) {
+    return null;
+  }
+
+  return (
+    <div>
+      <MapContext.Provider value={map}>
+        <MapComponent
+          map={map}
+          style={{
+            height: '400px'
+          }}
+        />
+        <RotationButton/>
+      </MapContext.Provider>
+    </div>
+  );
+}
+
+<RotationButtonExample />
+```

src/Button/RotationButton/RotationButton.spec.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { within } from '@testing-library/react';
+
+import OlMap from 'ol/Map';
+import OlView from 'ol/View';
+import OlSourceOsm from 'ol/source/OSM';
+import OlLayerTile from 'ol/layer/Tile';
+
+import { renderInMapContext } from '../../Util/rtlTestUtils';
+import RotationButton from './RotationButton';
+
+describe('<RotationButton />', () => {
+
+  const coord = [829729, 6708850];
+  let map: OlMap;
+  let layer: OlLayerTile<OlSourceOsm>;
+
+  beforeEach(() => {
+
+    layer = new OlLayerTile({
+      source: new OlSourceOsm()
+    });
+
+    map = new OlMap({
+      view: new OlView({
+        center: coord,
+        zoom: 10
+      }),
+      controls: [],
+      layers: [
+        layer
+      ]
+    });
+  });
+
+  describe('#Basics', () => {
+
+    it('is defined', () => {
+      expect(RotationButton).not.toBeUndefined();
+    });
+
+    it('can be rendered', () => {
+      const { container } = renderInMapContext(map, <RotationButton />);
+
+      const button = within(container).getByRole('button');
+      expect(button).toBeVisible();
+    });
+  });
+});

src/Button/RotationButton/RotationButton.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { DragRotateAndZoom } from 'ol/interaction.js';
+
+import { useMap } from '../../Hook/useMap';
+import ToggleButton, {
+  ToggleButtonProps
+} from '../ToggleButton/ToggleButton';
+
+
+export type RotationButtonProps =  Partial<ToggleButtonProps>;
+
+export const RotationButton: React.FC<RotationButtonProps> = ({
+  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);
+    }
+  };
+
+  return (
+    <ToggleButton
+      tooltip={'Shift + Drag to rotate and zoom the map around its center'}
+      icon={<FontAwesomeIcon icon={faArrowsRotate} />}
+      pressedIcon={<FontAwesomeIcon icon={faArrowsRotate} />}
+      onToggle={onToggle}
+      tooltipProps={tooltipProps}
+      {...passThroughProps}
+    />
+  );
+};
+export default RotationButton;