react-spatial 1.5.2 → 1.5.3

package/src/components/FitExtent/README.md

@@ -0,0 +1,34 @@
+
+The following example demonstrates the use of FitExtent.
+
+```jsx
+import React from 'react';
+import { MapboxLayer } from 'mobility-toolbox-js/ol';
+import Tile from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import Map from 'ol/Map';
+import { geopsTheme, Header, Footer } from '@geops/geops-ui';
+import { ThemeProvider } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import FitExtent from 'react-spatial/components/FitExtent';
+import BasicMap from 'react-spatial/components/BasicMap';
+
+const extent = [-15380353.1391, 2230738.2886, -6496535.908, 6927029.2369];
+
+const map = new Map({ controls: [] });
+
+const layers = [
+  new MapboxLayer({
+    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
+  }),
+];
+
+<ThemeProvider theme={geopsTheme}>
+  <BasicMap map={map} layers={layers} tabIndex={0} />
+  <FitExtent map={map} extent={extent}>
+    <Button>
+      Fit to US
+    </Button>
+  </FitExtent>
+</ThemeProvider>
+```

package/src/components/FitExtent/__snapshots__/FitExtent.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button should match snapshot. 1`] = `
+<div
+  className="rs-fit-extent"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex="0"
+>
+  FitExtent
+</div>
+`;

package/src/components/FitExtent/index.js

@@ -0,0 +1 @@
+export { default } from './FitExtent';

package/{components → src/components}/Geolocation/Geolocation.js

@@ -1,68 +1,119 @@
-import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
-import OLMap from "ol/Map";
-import { transform } from "ol/proj";
-import Point from "ol/geom/Point";
-import Feature from "ol/Feature";
-import { unByKey } from "ol/Observable";
-import Style from "ol/style/Style";
-import Circle from "ol/style/Circle";
-import Fill from "ol/style/Fill";
-import Stroke from "ol/style/Stroke";
-import VectorLayer from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector";
-import { FaRegDotCircle } from "react-icons/fa";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import OLMap from 'ol/Map';
+import { transform } from 'ol/proj';
+import Point from 'ol/geom/Point';
+import Feature from 'ol/Feature';
+import { unByKey } from 'ol/Observable';
+
+import Style from 'ol/style/Style';
+import Circle from 'ol/style/Circle';
+import Fill from 'ol/style/Fill';
+import Stroke from 'ol/style/Stroke';
+
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+
+import { FaRegDotCircle } from 'react-icons/fa';
+
 const propTypes = {
+  /**
+   * CSS class of the button.
+   */
   className: PropTypes.string,
+
+  /**
+   *  Children content of the Geolocation button.
+   */
   children: PropTypes.node,
+
+  /**
+   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+   */
   map: PropTypes.instanceOf(OLMap).isRequired,
+
+  /**
+   * Function triggered when geolocating is not successful.
+   */
   onError: PropTypes.func,
+
+  /**
+   * Function triggered after successful geoLocation calls. Takes the ol/map, the current lat/lon coordinate and the component instance as arguments.
+   */
   onSuccess: PropTypes.func,
+
+  /**
+   * Function triggered after the geolocation is activated. Takes the ol/map and the component instance as arguments.
+   */
   onActivate: PropTypes.func,
+
+  /**
+   * Function triggered after the geolocation is deactivated. Takes the ol/map and the component instance as arguments..
+   */
   onDeactivate: PropTypes.func,
+
+  /**
+   * If true, the map is not centered after it has been dragged once.
+   */
   noCenterAfterDrag: PropTypes.bool,
+
+  /**
+   * If true, the map will constantly recenter to the current Position
+   */
   alwaysRecenterToPosition: PropTypes.bool,
+
+  /**
+   * Color (Number array with rgb values) or style function.
+   * If a color is given, the style is animated.
+   */
   colorOrStyleFunc: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.number),
-    PropTypes.func
-  ])
+    PropTypes.func,
+  ]),
 };
+
 const defaultProps = {
-  className: "rs-geolocation",
-  children: /* @__PURE__ */ React.createElement(FaRegDotCircle, {
-    focusable: false
-  }),
-  onError: () => {
-  },
-  onSuccess: () => {
-  },
-  onActivate: () => {
-  },
-  onDeactivate: () => {
-  },
+  className: 'rs-geolocation',
+  children: <FaRegDotCircle focusable={false} />,
+  onError: () => {},
+  onSuccess: () => {},
+  onActivate: () => {},
+  onDeactivate: () => {},
   noCenterAfterDrag: false,
   alwaysRecenterToPosition: true,
-  colorOrStyleFunc: [235, 0, 0]
+  colorOrStyleFunc: [235, 0, 0],
 };
+
+/**
+ * The GeoLocation component creates a button to display the current device's location on an
+ * [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+ */
 class Geolocation extends PureComponent {
   constructor(props) {
     super(props);
+
     this.layer = new VectorLayer({
-      source: new VectorSource()
+      source: new VectorSource(),
     });
+
     this.isRecenteringToPosition = true;
+
     this.state = {
-      active: false
+      active: false,
     };
-    this.point = void 0;
+    this.point = undefined;
   }
+
   componentWillUnmount() {
     this.deactivate();
   }
+
   toggle() {
     const { active } = this.state;
     const { onError } = this.props;
-    const geolocation = "geolocation" in navigator;
+    const geolocation = 'geolocation' in navigator;
+
     if (!geolocation) {
       onError();
     } else if (!active) {
@@ -71,71 +122,89 @@ class Geolocation extends PureComponent {
       this.deactivate();
     }
   }
+
   error() {
     const { onError } = this.props;
+
     this.deactivate();
     onError();
   }
+
   deactivate() {
     const { map, onDeactivate } = this.props;
     window.clearInterval(this.interval);
     this.layer.setMap(null);
     navigator.geolocation.clearWatch(this.watch);
+
     this.setState({
-      active: false
+      active: false,
     });
+
     this.isRecenteringToPosition = true;
-    this.point = void 0;
+    this.point = undefined;
     onDeactivate(map, this);
     unByKey(this.dragListener);
   }
+
   activate() {
     const { map, noCenterAfterDrag, onActivate } = this.props;
+
     this.projection = map.getView().getProjection().getCode();
     this.point = new Point([0, 0]);
     this.highlight();
     this.layer.setMap(map);
     this.setState({ active: true });
+
     this.watch = navigator.geolocation.watchPosition(
       this.update.bind(this),
       this.error.bind(this),
       {
-        enableHighAccuracy: true
-      }
+        enableHighAccuracy: true,
+      },
     );
+
     if (noCenterAfterDrag) {
-      this.dragListener = map.on("pointerdrag", () => {
+      this.dragListener = map.on('pointerdrag', () => {
         this.isRecenteringToPosition = false;
       });
     }
+
     onActivate(map, this);
   }
+
   update({ coords: { latitude, longitude } }) {
     const { map, alwaysRecenterToPosition, onSuccess } = this.props;
+
     const position = transform(
       [longitude, latitude],
-      "EPSG:4326",
-      this.projection
+      'EPSG:4326',
+      this.projection,
     );
     this.point.setCoordinates(position);
+
     if (this.isRecenteringToPosition) {
       map.getView().setCenter(position);
       if (!alwaysRecenterToPosition) {
         this.isRecenteringToPosition = false;
       }
     }
+
     onSuccess(map, [latitude, longitude], this);
   }
+
   highlight() {
     const { colorOrStyleFunc } = this.props;
     const feature = new Feature({
-      geometry: this.point
+      geometry: this.point,
     });
+
     if (Array.isArray(colorOrStyleFunc)) {
       const color = colorOrStyleFunc;
+
       let decrease = true;
       let opacity = 0.5;
       let rotation = 0;
+
       window.clearInterval(this.interval);
       this.interval = window.setInterval(() => {
         rotation += 0.03;
@@ -146,60 +215,74 @@ class Geolocation extends PureComponent {
           feature.changed();
         }
       }, 50);
+
       feature.setStyle(() => {
         const circleStyle = new Style({
           image: new Circle({
             radius: 20,
             rotation,
             fill: new Fill({
-              color: "rgba(255, 255, 255, 0.01)"
+              color: 'rgba(255, 255, 255, 0.01)',
             }),
             stroke: new Stroke({
               lineDash: [30, 10],
               width: 6,
-              color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`
-            })
-          })
+              color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`,
+            }),
+          }),
         });
+
         circleStyle.getImage().setRotation(rotation);
+
         return [
           new Style({
             image: new Circle({
               radius: 10,
               fill: new Fill({
-                color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.5)`
-              })
-            })
+                color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.5)`,
+              }),
+            }),
           }),
-          circleStyle
+          circleStyle,
         ];
       });
     } else {
       feature.setStyle(colorOrStyleFunc);
     }
+
     this.layer.getSource().clear();
     this.layer.getSource().addFeature(feature);
   }
+
   render() {
     const { children, className } = this.props;
+    // Remove component props from other HTML props.
     const other = Object.entries(this.props).reduce((props, [key, value]) => {
       return propTypes[key] ? props : { ...props, [key]: value };
     }, {});
     const { active } = this.state;
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "button",
-      tabIndex: "0",
-      className: `${className} ${active ? "rs-active" : ""}`,
-      onClick: () => {
-        return this.toggle();
-      },
-      onKeyPress: (e) => {
-        return e.which === 13 && this.toggle();
-      },
-      ...other
-    }, children);
+
+    return (
+      <div
+        role="button"
+        tabIndex="0"
+        className={`${className} ${active ? 'rs-active' : ''}`}
+        onClick={() => {
+          return this.toggle();
+        }}
+        onKeyPress={(e) => {
+          return e.which === 13 && this.toggle();
+        }}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...other}
+      >
+        {children}
+      </div>
+    );
   }
 }
+
 Geolocation.propTypes = propTypes;
 Geolocation.defaultProps = defaultProps;
+
 export default Geolocation;

package/src/components/Geolocation/Geolocation.test.js

@@ -0,0 +1,267 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+
+import 'jest-canvas-mock';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import MapEvent from 'ol/MapEvent';
+import Geolocation from './Geolocation';
+
+configure({ adapter: new Adapter() });
+
+const geolocationBackup = global.navigator.geolocation;
+
+const mockGeolocation = () => {
+  const mock = {
+    clearWatch: jest.fn(),
+    getCurrentPosition: jest.fn(),
+    watchPosition: (onSuccess) => {
+      onSuccess({
+        coords: {
+          latitude: 47.9913611,
+          longitude: 7.84868,
+          accuracy: 55,
+        },
+        timestamp: 1552660077044,
+      });
+    },
+  };
+
+  global.navigator.geolocation = mock;
+};
+
+const mockMissingGeolocation = () => {
+  delete global.navigator.geolocation;
+};
+
+const restoreGeolocation = () => {
+  global.navigator.geolocation = geolocationBackup;
+};
+
+class CallbackHandler {
+  static onError() {}
+
+  static onSuccess() {}
+
+  static onActivate() {}
+
+  static onDeactivate() {}
+}
+
+describe('Geolocation', () => {
+  let map;
+
+  beforeEach(() => {
+    const target = document.createElement('div');
+    const { style } = target;
+    style.position = 'absolute';
+    style.left = '-1000px';
+    style.top = '-1000px';
+    style.width = '100px';
+    style.height = '100px';
+    document.body.appendChild(target);
+
+    map = new Map({
+      target,
+      view: new View({
+        center: [0, 0],
+        resolutions: [1],
+        zoom: 0,
+      }),
+    });
+    map.renderSync();
+  });
+
+  afterEach(() => {
+    const target = map.getTarget();
+    map.setTarget(null);
+    if (target && target.parentNode) {
+      target.parentNode.removeChild(target);
+    }
+    map.dispose();
+  });
+
+  describe('should match snapshot', () => {
+    test('minimum props', () => {
+      const component = renderer.create(<Geolocation map={map} />);
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    test('with title', () => {
+      const component = renderer.create(
+        <Geolocation map={map} title="Lokalisieren" />,
+      );
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    test('with class name', () => {
+      const component = renderer.create(
+        <Geolocation map={map} className="my-class-name" />,
+      );
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  test('should use children', () => {
+    mockGeolocation();
+
+    const wrapper = mount(<Geolocation map={map}>test</Geolocation>);
+
+    const text = wrapper.find('.rs-geolocation').first().text();
+
+    expect(text).toBe('test');
+
+    restoreGeolocation();
+  });
+
+  describe('button classes', () => {
+    test('class should be active', () => {
+      mockGeolocation();
+
+      const wrapper = mount(<Geolocation map={map} />);
+      const basic = wrapper.getDOMNode();
+
+      wrapper.find('.rs-geolocation').first().simulate('click');
+
+      expect(basic.className).toBe('rs-geolocation rs-active');
+
+      restoreGeolocation();
+    });
+
+    test('class should not be active', () => {
+      mockGeolocation();
+
+      const wrapper = mount(<Geolocation map={map} />);
+      const basic = wrapper.getDOMNode();
+
+      wrapper
+        .find('.rs-geolocation')
+        .first()
+        .simulate('click')
+        .simulate('click');
+
+      expect(basic.className).toBe('rs-geolocation ');
+
+      restoreGeolocation();
+    });
+  });
+
+  test(`highlight on first toggle`, () => {
+    mockGeolocation();
+
+    const component = shallow(<Geolocation map={map} />);
+    const instance = component.instance();
+    const spy = jest.spyOn(instance, 'highlight');
+    instance.toggle();
+    expect(spy).toHaveBeenCalled();
+
+    restoreGeolocation();
+  });
+
+  test(`success/activate/deactivate callback functions should be called`, () => {
+    mockGeolocation();
+    const spyOnSuccess = jest.spyOn(CallbackHandler, 'onSuccess');
+    const spyOnActivate = jest.spyOn(CallbackHandler, 'onActivate');
+    const spyOnDeactivate = jest.spyOn(CallbackHandler, 'onDeactivate');
+
+    const wrapper = mount(
+      <Geolocation
+        map={map}
+        onSuccess={() => {
+          return CallbackHandler.onSuccess();
+        }}
+        onActivate={() => {
+          return CallbackHandler.onActivate();
+        }}
+        onDeactivate={() => {
+          return CallbackHandler.onDeactivate();
+        }}
+      />,
+    );
+
+    wrapper.find('.rs-geolocation').first().simulate('click');
+
+    expect(spyOnActivate).toHaveBeenCalled();
+    expect(spyOnSuccess).toHaveBeenCalled();
+
+    wrapper.find('.rs-geolocation').first().simulate('click');
+
+    expect(spyOnDeactivate).toHaveBeenCalled();
+
+    restoreGeolocation();
+  });
+
+  test(`error function should be called`, () => {
+    mockMissingGeolocation();
+
+    const spy = jest.spyOn(CallbackHandler, 'onError');
+
+    const wrapper = mount(
+      <Geolocation
+        map={map}
+        onError={() => {
+          return CallbackHandler.onError();
+        }}
+      />,
+    );
+
+    wrapper.find('.rs-geolocation').first().simulate('click');
+
+    expect(spy).toHaveBeenCalled();
+
+    restoreGeolocation();
+  });
+
+  describe('map centering', () => {
+    test('centers map', () => {
+      mockGeolocation();
+
+      const center1 = [742952.8821531708, 6330118.608483334];
+      map.getView().setCenter(center1);
+
+      const component = shallow(<Geolocation map={map} />);
+      component.instance().toggle();
+
+      const center2 = map.getView().getCenter();
+      expect(center1).not.toEqual(center2);
+
+      restoreGeolocation();
+    });
+
+    test('sets isRecenteringToPosition=false after pointerdrag event with the noCenterAfterDrag prop', () => {
+      mockGeolocation();
+
+      const component = shallow(<Geolocation map={map} noCenterAfterDrag />);
+      component.instance().toggle();
+
+      expect(component.instance().isRecenteringToPosition).toEqual(true);
+
+      map.dispatchEvent(new MapEvent('pointerdrag', map));
+      expect(component.instance().isRecenteringToPosition).toEqual(false);
+
+      restoreGeolocation();
+    });
+  });
+
+  test('custom style function', () => {
+    mockGeolocation();
+
+    const styleFunc = jest.fn();
+
+    const component = shallow(
+      <Geolocation map={map} colorOrStyleFunc={styleFunc} />,
+    );
+    const instance = component.instance();
+    instance.toggle();
+    const style = instance.layer.getSource().getFeatures()[0].getStyle();
+
+    expect(style).toBe(styleFunc);
+
+    restoreGeolocation();
+  });
+});

package/src/components/Geolocation/README.md

@@ -0,0 +1,25 @@
+
+The following example demonstrates the use of Geolocation.
+
+```jsx
+import React from 'react';
+import { MapboxLayer } from 'mobility-toolbox-js/ol';
+import Tile from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import Map from 'ol/Map';
+import Geolocation from 'react-spatial/components/Geolocation';
+import BasicMap from 'react-spatial/components/BasicMap';
+
+const map = new Map({ controls: [] });
+
+const layers = [
+  new MapboxLayer({
+    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
+  }),
+];
+
+<div className="rs-geolocation-example">
+  <BasicMap map={map} layers={layers} tabIndex={0} />
+  <Geolocation map={map} />
+</div>
+```