react-spatial 1.5.3 → 1.5.5

package/src/components/LayerTree/index.js

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

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.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>;
-```

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

@@ -1,117 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NorthArrow should match snapshot rotated. 1`] = `
-<div
-  className="rs-north-arrow"
-  style={
-    {
-      "transform": "rotate(45deg)",
-    }
-  }
->
-  <svg
-    data-file-name="SvgNorthArrow"
-  />
-</div>
-`;
-
-exports[`NorthArrow should match snapshot with children. 1`] = `
-<div
-  className="rs-north-arrow"
-  style={
-    {
-      "transform": "rotate(0deg)",
-    }
-  }
->
-  <svg
-    baseProfile="tiny"
-    fill="currentColor"
-    height="1em"
-    stroke="currentColor"
-    strokeWidth="0"
-    style={
-      {
-        "color": undefined,
-      }
-    }
-    version="1.2"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="8.5"
-      cy="8.5"
-      r="2.5"
-    />
-    <path
-      d="M16 10c-2 0-3 3-4.5 3s-1.499-1-3.5-1c-2 0-3.001 4-3.001 4h14.001s-1-6-3-6zM20 3h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2v-12c0-1.103-.897-2-2-2zm0 14h-16v-12h16v12z"
-    />
-  </svg>
-</div>
-`;
-
-exports[`NorthArrow should match snapshot with circle. 1`] = `
-<div
-  className="rs-north-arrow"
-  style={
-    {
-      "transform": "rotate(0deg)",
-    }
-  }
->
-  <svg
-    data-file-name="SvgNorthArrowCircle"
-  />
-</div>
-`;
-
-exports[`NorthArrow should match snapshot with custom attributes. 1`] = `
-<div
-  className="test-class"
-  style={
-    {
-      "transform": "rotate(0deg)",
-    }
-  }
-  tabIndex={0}
->
-  <svg
-    data-file-name="SvgNorthArrow"
-  />
-</div>
-`;
-
-exports[`NorthArrow should match snapshot with default value. 1`] = `
-<div
-  className="rs-north-arrow"
-  style={
-    {
-      "transform": "rotate(0deg)",
-    }
-  }
->
-  <svg
-    data-file-name="SvgNorthArrow"
-  />
-</div>
-`;
-
-exports[`NorthArrow should react on view rotation (transform: \`rotate(20deg)\`) 1`] = `
-<div class="rs-north-arrow"
-     style="transform: rotate(20deg);"
->
-  <svg data-file-name="SvgNorthArrow">
-  </svg>
-</div>
-`;
-
-exports[`NorthArrow should react on view rotation with offset (transform: \`rotate(10deg)\`) 1`] = `
-<div class="rs-north-arrow"
-     style="transform: rotate(10deg);"
->
-  <svg data-file-name="SvgNorthArrow">
-  </svg>
-</div>
-`;

package/src/components/NorthArrow/index.js

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

package/src/components/Overlay/Overlay.test.js

@@ -1,149 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { act } from 'react-dom/test-utils';
-import { configure, mount } from 'enzyme';
-import renderer from 'react-test-renderer';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import ResizeObserver from 'resize-observer-polyfill';
-import { Resizable } from 're-resizable';
-import Overlay from './Overlay';
-
-jest.mock('resize-observer-polyfill');
-
-configure({ adapter: new Adapter() });
-
-const propTypes = {
-  isMobileResizable: PropTypes.bool,
-  thresholdWidthForMobile: PropTypes.number,
-};
-
-const defaultProps = {
-  isMobileResizable: undefined,
-  thresholdWidthForMobile: undefined,
-};
-
-const BasicComponent = ({ thresholdWidthForMobile, isMobileResizable }) => {
-  const [ref, setRef] = useState(null);
-
-  return (
-    <>
-      <div
-        ref={(node) => {
-          if (node !== ref) {
-            setRef(node);
-          }
-        }}
-        className="observer"
-      />
-      <Overlay
-        observe={ref}
-        thresholdWidthForMobile={thresholdWidthForMobile}
-        isMobileResizable={isMobileResizable}
-      >
-        Test content
-      </Overlay>
-    </>
-  );
-};
-BasicComponent.propTypes = propTypes;
-BasicComponent.defaultProps = defaultProps;
-
-describe('Overlay', () => {
-  test('should match snapshot.', () => {
-    const component = renderer.create(<Overlay>Test content</Overlay>);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should react on observe resize.', () => {
-    const wrapper = mount(<BasicComponent />);
-    const target = wrapper.find('.observer').getDOMNode();
-
-    act(() => {
-      // The mock class set the onResize property, we just have to run it to
-      // simulate a resize
-      ResizeObserver.onResize([
-        {
-          target,
-          contentRect: {
-            width: 200,
-            height: 200,
-          },
-        },
-      ]);
-    });
-    wrapper.update();
-
-    expect(wrapper.find('.tm-overlay').length > 0).toBe(false);
-    expect(wrapper.find('.tm-overlay-mobile').length > 0).toBe(true);
-  });
-
-  test('should force mobile overlay display on big screen.', () => {
-    const wrapper = mount(
-      <BasicComponent thresholdWidthForMobile={Infinity} />,
-    );
-    const target = wrapper.find('.observer').getDOMNode();
-
-    act(() => {
-      ResizeObserver.onResize([
-        {
-          target,
-          contentRect: {
-            width: 1200,
-            height: 200,
-          },
-        },
-      ]);
-    });
-    wrapper.update();
-
-    expect(wrapper.find('.tm-overlay').length > 0).toBe(false);
-    expect(wrapper.find('.tm-overlay-mobile').length > 0).toBe(true);
-  });
-
-  test('should allow resizing with top handler on mobile.', () => {
-    const wrapper = mount(<BasicComponent />);
-    const target = wrapper.find('.observer').getDOMNode();
-
-    // Force resize to make it mobile.
-    act(() => {
-      ResizeObserver.onResize([
-        {
-          target,
-          contentRect: {
-            width: 200,
-            height: 200,
-          },
-        },
-      ]);
-    });
-    wrapper.update();
-
-    const resizableProps = wrapper.find(Resizable).props();
-
-    expect(resizableProps.enable.top).toBe(true);
-  });
-
-  test('should not allow resizing with top handler on mobile.', () => {
-    const wrapper = mount(<BasicComponent isMobileResizable={false} />);
-    const target = wrapper.find('.observer').getDOMNode();
-
-    // Force resize to make it mobile.
-    act(() => {
-      ResizeObserver.onResize([
-        {
-          target,
-          contentRect: {
-            width: 200,
-            height: 200,
-          },
-        },
-      ]);
-    });
-    wrapper.update();
-
-    const resizableProps = wrapper.find(Resizable).props();
-
-    expect(resizableProps.enable.top).toBe(false);
-  });
-});