react-spatial 1.5.3 → 1.5.4

package/src/components/LayerTree/index.js

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

package/src/components/MousePosition/MousePosition.js

@@ -1,175 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import OLMap from 'ol/Map';
-import { createStringXY } from 'ol/coordinate';
-import OLMousePosition from 'ol/control/MousePosition';
-
-const propTypes = {
-  /**
-   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
-   */
-  map: PropTypes.instanceOf(OLMap).isRequired,
-
-  /**
-   * List of projections to display.
-   */
-  projections: PropTypes.arrayOf(
-    PropTypes.shape({
-      /**
-       * The label to display in the select box.
-       */
-      label: PropTypes.string.isRequired,
-
-      /**
-       * The value used to create the options´s projection of the MousePosition control.
-       * See [doc](https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition.html).
-       */
-      value: PropTypes.string.isRequired,
-
-      /**
-       * A function following the  [CoordinateFormat](https://openlayers.org/en/latest/apidoc/module-ol_coordinate.html#~CoordinateFormat).
-       */
-      format: PropTypes.func,
-    }),
-  ),
-
-  /**
-   * The initially selected projection
-   */
-  projectionValue: PropTypes.shape({
-    /**
-     * The label to display in the select box.
-     */
-    label: PropTypes.string.isRequired,
-
-    /**
-     * The value used to create the options´s projection of the MousePosition control.
-     * See [doc](https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition.html).
-     */
-    value: PropTypes.string.isRequired,
-
-    /**
-     * A function following the  [CoordinateFormat](https://openlayers.org/en/latest/apidoc/module-ol_coordinate.html#~CoordinateFormat).
-     */
-    format: PropTypes.func,
-  }),
-
-  /**
-   * Function triggered on projection's change event.
-   * @param {Event} event The change event object.
-   * @param {Object} projection The selected projection object.
-   */
-  onChange: PropTypes.func,
-};
-
-const defaultProps = {
-  onChange: () => {},
-  projections: [
-    {
-      label: 'EPSG:4326',
-      value: 'EPSG:4326',
-    },
-    {
-      label: 'EPSG:3857',
-      value: 'EPSG:3857',
-    },
-  ],
-  projectionValue: null,
-};
-
-/**
- * The MousePosition component renders a select box with map projection options
- * and the cursor position in coordinates using the selected projection.
- */
-function MousePosition({
-  map,
-  projections,
-  projectionValue,
-  onChange,
-  ...other
-}) {
-  const [projection, setProjection] = useState(
-    projections &&
-      ((projectionValue &&
-        projections.find((p) => {
-          return p.value === projectionValue.value;
-        })) ||
-        projections[0]),
-  );
-  const [control, setControl] = useState();
-  const ref = useRef();
-
-  useEffect(() => {
-    const mousePosition = new OLMousePosition({
-      target: ref.current,
-      undefinedHTML: ' ',
-      className: '',
-    });
-    map.addControl(mousePosition);
-    setControl(mousePosition);
-
-    return () => {
-      map.removeControl(mousePosition);
-    };
-  }, [map]);
-
-  useEffect(() => {
-    if (!projection || !control) {
-      return;
-    }
-    control.setProjection(projection.value);
-    control.setCoordinateFormat(projection.format || createStringXY(4));
-  }, [projection, control]);
-
-  useEffect(() => {
-    if (projections) {
-      const proj =
-        (projectionValue &&
-          projections.find((p) => {
-            return p.value === projectionValue.value;
-          })) ||
-        projections[0];
-      setProjection(proj);
-    }
-  }, [projections, projectionValue]);
-
-  const onChangeCb = useCallback(
-    (evt) => {
-      const newProj = projections.find((opt) => {
-        return evt.target.value === opt.value;
-      });
-      setProjection(newProj);
-      onChange(evt, newProj);
-    },
-    [onChange, projections],
-  );
-
-  if (!projection || !projections || !projections.length) {
-    return null;
-  }
-
-  return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <div className="rs-mouse-position" {...other}>
-      <select
-        className="rs-select"
-        value={projection.value}
-        onChange={onChangeCb}
-      >
-        {projections.map((option) => {
-          return (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          );
-        })}
-      </select>
-      <span ref={ref} className="rs-coordinates" />
-    </div>
-  );
-}
-
-MousePosition.propTypes = propTypes;
-MousePosition.defaultProps = defaultProps;
-
-export default React.memo(MousePosition);

package/src/components/MousePosition/MousePosition.test.js

@@ -1,132 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { configure, mount } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import 'jest-canvas-mock';
-import OLMap from 'ol/Map';
-import OLMousePosition from 'ol/control/MousePosition';
-import MousePosition from './MousePosition';
-
-configure({ adapter: new Adapter() });
-const expectSnapshot = (props) => {
-  const map = new OLMap({});
-  const component = renderer.create(<MousePosition map={map} {...props} />);
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
-};
-
-describe('MousePosition', () => {
-  describe('matches snapshots', () => {
-    test('using default values.', () => {
-      expectSnapshot({});
-    });
-
-    test('using no projections.', () => {
-      expectSnapshot({
-        projections: [],
-      });
-    });
-
-    test('using only one projection', () => {
-      expectSnapshot({
-        projections: [{ label: 'foo', value: 'foo' }],
-      });
-    });
-
-    test('using multiple projections.', () => {
-      expectSnapshot({
-        projections: [
-          { label: 'foo', value: 'foo' },
-          { label: 'bar', value: 'bar' },
-        ],
-      });
-    });
-  });
-
-  test('add MousePosition control to the map.', () => {
-    const map = new OLMap({});
-    const spy = jest.spyOn(map, 'removeControl');
-    const spy2 = jest.spyOn(map, 'addControl');
-    const fn = jest.fn();
-    mount(
-      <MousePosition
-        map={map}
-        projections={[
-          {
-            label: 'EPSG:4326',
-            value: 'EPSG:4326',
-            format: fn,
-          },
-        ]}
-      />,
-    );
-    const ctrl = spy2.mock.calls[0][0];
-    expect(spy).toHaveBeenCalledTimes(0);
-    expect(spy2).toHaveBeenCalledTimes(1);
-    expect(ctrl).toBeInstanceOf(OLMousePosition);
-    expect(ctrl.getProjection().getCode()).toBe('EPSG:4326');
-    expect(ctrl.getCoordinateFormat()).toBe(fn);
-  });
-
-  test('add/remove MousePosition control on mount/unmount.', () => {
-    const map = new OLMap({});
-    const spy = jest.spyOn(map, 'removeControl');
-    const spy2 = jest.spyOn(map, 'addControl');
-    const wrapper = mount(<MousePosition map={map} />);
-    expect(spy).toHaveBeenCalledTimes(0);
-    expect(spy2).toHaveBeenCalledTimes(1);
-    wrapper.unmount();
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy.mock.calls[0][0]).toBe(spy2.mock.calls[0][0]);
-  });
-
-  test('triggers onChange when select projection.', () => {
-    const map = new OLMap({});
-    const onChange = jest.fn(() => {});
-    const wrapper = mount(
-      <MousePosition
-        map={map}
-        onChange={onChange}
-        projections={[
-          {
-            label: 'EPSG:4326',
-            value: 'EPSG:4326',
-            format: jest.fn(),
-          },
-        ]}
-      />,
-    );
-    // onChange triggered on instantiation.
-    expect(onChange).toHaveBeenCalledTimes(0);
-    wrapper.find('select').simulate('change', {});
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-
-  test('applies new format and value when we select a new projection.', () => {
-    const map = new OLMap({});
-    const spy = jest.spyOn(map, 'addControl');
-    const projs = [
-      {
-        label: 'EPSG:4326',
-        value: 'EPSG:4326',
-        format: jest.fn(),
-      },
-      {
-        label: 'EPSG:3857',
-        value: 'EPSG:3857',
-        format: jest.fn(),
-      },
-    ];
-    const wrapper = mount(<MousePosition map={map} projections={projs} />);
-
-    const ctrl = spy.mock.calls[0][0];
-    expect(ctrl.getProjection().getCode()).toBe(projs[0].value);
-    expect(ctrl.getCoordinateFormat()).toBe(projs[0].format);
-    wrapper
-      .find('select')
-      .simulate('change', { target: { value: 'EPSG:3857' } });
-    expect(ctrl.getProjection().getCode()).toBe(projs[1].value);
-    expect(ctrl.getCoordinateFormat()).toBe(projs[1].format);
-  });
-});

package/src/components/MousePosition/README.md

@@ -1,50 +0,0 @@
-
-The following example demonstrates the use of MousePosition.
-
-```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 BasicMap from 'react-spatial/components/BasicMap';
-import MousePosition from 'react-spatial/components/MousePosition';
-
-const map = new Map({ controls: [] });
-
-const layers = [
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
-  }),
-];
-
-<div className="rs-mouse-position-example">
-  <BasicMap map={map} center={[1149722.7037660484, 6618091.313553318]} zoom={6} layers={layers} tabIndex={0} />
-  <MousePosition
-    map={map}
-    projections={[
-      {
-        label: 'World Geodetic System 1984',
-        value: 'EPSG:4326',
-      },
-      {
-        label: 'Web mercator with custom output',
-        value: 'EPSG:3857',
-        format: coordinates => {
-          const decimals = 4;
-          const text = [];
-          coordinates.forEach(input => {
-            const coord =
-              Math.round(parseFloat(input) * 10 ** decimals) /
-              10 ** decimals;
-            const parts = coord.toString().split('.');
-            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, "'");
-            text.push(parts.join());
-          });
-          return `Coordinates: ${text.join(' ')}`;
-        },
-      },
-    ]}
-  />
-</div>
-```

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

@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MousePosition matches snapshots using default values. 1`] = `
-<div
-  className="rs-mouse-position"
->
-  <select
-    className="rs-select"
-    onChange={[Function]}
-    value="EPSG:4326"
-  >
-    <option
-      value="EPSG:4326"
-    >
-      EPSG:4326
-    </option>
-    <option
-      value="EPSG:3857"
-    >
-      EPSG:3857
-    </option>
-  </select>
-  <span
-    className="rs-coordinates"
-  />
-</div>
-`;
-
-exports[`MousePosition matches snapshots using multiple projections. 1`] = `
-<div
-  className="rs-mouse-position"
->
-  <select
-    className="rs-select"
-    onChange={[Function]}
-    value="foo"
-  >
-    <option
-      value="foo"
-    >
-      foo
-    </option>
-    <option
-      value="bar"
-    >
-      bar
-    </option>
-  </select>
-  <span
-    className="rs-coordinates"
-  />
-</div>
-`;
-
-exports[`MousePosition matches snapshots using no projections. 1`] = `null`;
-
-exports[`MousePosition matches snapshots using only one projection 1`] = `
-<div
-  className="rs-mouse-position"
->
-  <select
-    className="rs-select"
-    onChange={[Function]}
-    value="foo"
-  >
-    <option
-      value="foo"
-    >
-      foo
-    </option>
-  </select>
-  <span
-    className="rs-coordinates"
-  />
-</div>
-`;

package/src/components/MousePosition/index.js

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

package/src/components/NorthArrow/NorthArrow.js

@@ -1,75 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import OLMap from 'ol/Map';
-import { unByKey } from 'ol/Observable';
-import { toDegrees } from 'ol/math';
-import NorthArrowSimple from '../../images/northArrow.svg';
-import NorthArrowCircle from '../../images/northArrowCircle.svg';
-
-const propTypes = {
-  /**
-   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
-   */
-  map: PropTypes.instanceOf(OLMap).isRequired,
-
-  /**
-   * Rotation of the north arrow in degrees.
-   */
-  rotationOffset: PropTypes.number,
-
-  /**
-   * Display circle around the north arrow. Not used if pass children.
-   */
-  circled: PropTypes.bool,
-
-  /**
-   *  Children content of the north arrow.
-   */
-  children: PropTypes.node,
-};
-
-const defaultProps = {
-  rotationOffset: 0,
-  circled: false,
-  children: null,
-};
-
-const getRotation = (map, rotationOffset) => {
-  return toDegrees(map.getView().getRotation()) + rotationOffset;
-};
-
-/**
- * This NorthArrow component inserts an arrow pointing north into an
- * [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
- */
-function NorthArrow({ map, rotationOffset, circled, children, ...other }) {
-  const [rotation, setRotation] = useState(rotationOffset);
-
-  useEffect(() => {
-    if (!map) {
-      return null;
-    }
-    const key = map.on('postrender', () => {
-      setRotation(getRotation(map, rotationOffset));
-    });
-    return () => {
-      unByKey(key);
-    };
-  }, [map, rotationOffset]);
-
-  return (
-    <div
-      className="rs-north-arrow"
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...other}
-      style={{ transform: `rotate(${rotation}deg)` }}
-    >
-      {children || (circled ? <NorthArrowCircle /> : <NorthArrowSimple />)}
-    </div>
-  );
-}
-
-NorthArrow.propTypes = propTypes;
-NorthArrow.defaultProps = defaultProps;
-
-export default React.memo(NorthArrow);

package/src/components/NorthArrow/NorthArrow.test.js

@@ -1,104 +0,0 @@
-import 'jest-canvas-mock';
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { act } from 'react-dom/test-utils';
-import { configure, mount } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import MapEvent from 'ol/MapEvent';
-import OLMap from 'ol/Map';
-import OLView from 'ol/View';
-import { TiImage } from 'react-icons/ti';
-import NorthArrow from './NorthArrow';
-
-configure({ adapter: new Adapter() });
-let olView;
-let olMap;
-
-describe('NorthArrow', () => {
-  beforeEach(() => {
-    olView = new OLView();
-    olMap = new OLMap({ view: olView });
-  });
-
-  test('should match snapshot with default value.', () => {
-    let component;
-    renderer.act(() => {
-      component = renderer.create(<NorthArrow map={olMap} />);
-    });
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should match snapshot with custom attributes.', () => {
-    let component;
-    renderer.act(() => {
-      component = renderer.create(
-        <NorthArrow map={olMap} className="test-class" tabIndex={0} />,
-      );
-    });
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should match snapshot with children.', () => {
-    let component;
-    renderer.act(() => {
-      component = renderer.create(
-        <NorthArrow map={olMap}>
-          <TiImage />
-        </NorthArrow>,
-      );
-    });
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should match snapshot rotated.', () => {
-    let component;
-    renderer.act(() => {
-      component = renderer.create(
-        <NorthArrow map={olMap} rotationOffset={45} />,
-      );
-    });
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should match snapshot with circle.', () => {
-    let component;
-    renderer.act(() => {
-      component = renderer.create(<NorthArrow circled map={olMap} />);
-    });
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should react on view rotation (transform: `rotate(20deg)`)', () => {
-    const wrapper = mount(<NorthArrow map={olMap} />);
-    // Trigger view rotation
-    olMap.getView().setRotation(0.3490658503988659);
-    act(() => {
-      olMap.dispatchEvent(new MapEvent('postrender', olMap));
-      // 20 degrees = 0.3490658503988659 radians
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  test('should react on view rotation with offset (transform: `rotate(10deg)`)', () => {
-    const wrapper = mount(<NorthArrow map={olMap} rotationOffset={-10} />);
-    olMap.getView().setRotation(0.3490658503988659);
-    act(() => {
-      olMap.dispatchEvent(new MapEvent('postrender', olMap));
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  test('should remove post render event on unmount', () => {
-    const wrapper = mount(<NorthArrow map={olMap} rotationOffset={-10} />);
-    // eslint-disable-next-line no-underscore-dangle
-    expect(olMap.listeners_.postrender.length).toBe(4);
-    wrapper.unmount();
-    // eslint-disable-next-line no-underscore-dangle
-    expect(olMap.listeners_.postrender.length).toBe(3);
-  });
-});

package/src/components/NorthArrow/README.md

@@ -1,59 +0,0 @@
-
-The following example demonstrates the use of NorthArrowExample (Alt + Shift + click to rotate).
-
-```jsx
-import React from 'react';
-import { Layer } from 'mobility-toolbox-js/ol';
-import Map from 'ol/Map';
-import { DragRotate, defaults } from 'ol/interaction';
-import Tile from 'ol/layer/Tile';
-import TileGrid from 'ol/tilegrid/TileGrid';
-import TileImageSource from 'ol/source/TileImage';
-import { getCenter} from 'ol/extent';
-import BasicMap from 'react-spatial/components/BasicMap';
-import NorthArrow from 'react-spatial/components/NorthArrow';
-
-const extent = [599500, 199309, 600714, 200002];
-
-const map = new Map({ controls: [] });
-
-const layers = [
-  new Layer({
-    olLayer: new Tile({
-      extent,
-      source: new TileImageSource({
-        tileUrlFunction: c =>
-          '//plans.trafimage.ch/static/tiles/' +
-          `bern_aussenplan/${c[0]}/${c[1]}/${-c[2]-1}.png`,
-        tileGrid: new TileGrid({
-          origin: [extent[0], extent[1]],
-          resolutions: [
-            6.927661,
-            3.4638305,
-            1.73191525,
-            0.865957625,
-            0.4329788125,
-            0.21648940625,
-            0.108244703125,
-          ],
-        }),
-      }),
-    }),
-  }),
-];
-
-<div style={{position:'relative'}}>
-  <BasicMap
-    map={map}
-    center={getCenter(extent)}
-    zoom={17}
-    layers={layers}
-    tabIndex={0}
-  />
-  <NorthArrow
-    map={map}
-    rotationOffset={20}
-    circled
-  />
-</div>;
-```