react-spatial 1.5.3 → 1.5.4

package/src/components/FeatureExportButton/FeatureExportButton.test.js

@@ -1,417 +0,0 @@
-import 'jest-canvas-mock';
-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 { Layer } from 'mobility-toolbox-js/ol';
-import GPX from 'ol/format/GPX';
-import VectorSource from 'ol/source/Vector';
-import Style from 'ol/style/Style';
-import Icon from 'ol/style/Icon';
-import Text from 'ol/style/Text';
-import Fill from 'ol/style/Fill';
-import Stroke from 'ol/style/Stroke';
-import Circle from 'ol/geom/Circle';
-import Point from 'ol/geom/Point';
-import LineString from 'ol/geom/LineString';
-import Feature from 'ol/Feature';
-import VectorLayer from 'ol/layer/Vector';
-
-import FeatureExportButton from '.';
-
-configure({ adapter: new Adapter() });
-
-const layer = new Layer({
-  name: 'Sample layer',
-  olLayer: new VectorLayer({
-    source: new VectorSource({
-      features: [
-        new Feature({
-          geometry: new Point([819103.972418, 6120013.078324]),
-        }),
-      ],
-    }),
-  }),
-});
-
-describe('FeatureExportButton', () => {
-  describe('should match snapshot', () => {
-    test('with default attributes.', () => {
-      const component = renderer.create(<FeatureExportButton layer={layer} />);
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    test('should match snapshot with cutom attributes.', () => {
-      const component = renderer.create(
-        <FeatureExportButton
-          layer={layer}
-          className="foo"
-          title="bar"
-          // eslint-disable-next-line jsx-a11y/tabindex-no-positive
-          tabIndex={2}
-        />,
-      );
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    test('should match snapshot with children passed.', () => {
-      const component = renderer.create(
-        <FeatureExportButton layer={layer}>
-          <div>Foo</div>
-        </FeatureExportButton>,
-      );
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('triggers onClick', () => {
-    // Use library 'jest-environment-jsdom-fourteen'
-    // to allow jest test of format.writeFeatures(feats).
-    const renderLayer = (featNumbers) => {
-      const featsArray = [];
-      for (let i = 0; i < featNumbers; i += 1) {
-        featsArray.push(
-          new Feature({
-            geometry: new Point([819103.972418, 6120013.078324]),
-          }),
-        );
-      }
-
-      return new Layer({
-        name: 'ExportLayer',
-        olLayer: new VectorLayer({
-          source: new VectorSource({
-            features: featsArray,
-          }),
-        }),
-      });
-    };
-
-    const iconLayer = renderLayer(1);
-
-    const textStyle = new Style({
-      text: new Text({
-        text: 'text name',
-        font: 'normal 16px Helvetica',
-        stroke: new Stroke({
-          color: [255, 255, 255, 1],
-          width: 3,
-        }),
-      }),
-    });
-
-    test('should be trigger click function.', () => {
-      const wrapper = shallow(<FeatureExportButton layer={iconLayer} />);
-      const spy = jest.spyOn(FeatureExportButton, 'exportFeatures');
-      wrapper.find('.rs-feature-export-button').simulate('click');
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-
-    test('should use attributes for parsing', () => {
-      const wrapper = mount(
-        <FeatureExportButton
-          format={GPX}
-          projection="EPSG:4326"
-          layer={iconLayer}
-        />,
-      );
-      const spy = jest.spyOn(FeatureExportButton, 'exportFeatures');
-      wrapper.find('.rs-feature-export-button').simulate('click');
-      expect(spy).toHaveBeenCalledWith(iconLayer, 'EPSG:4326', GPX);
-    });
-
-    describe('#createFeatureString()', () => {
-      describe('using KMLFormat', () => {
-        test('should export kml by default.', () => {
-          const exportString = FeatureExportButton.createFeatureString(
-            iconLayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-          expect(exportString).toMatchSnapshot();
-        });
-
-        const iconStyle = new Style({
-          image: new Icon({
-            anchor: [0.5, 46],
-            anchorXUnits: 'fraction',
-            anchorYUnits: 'pixels',
-            src: 'https://openlayers.org/en/latest/examples/data/icon.png',
-          }),
-        });
-
-        iconLayer.olLayer.getSource().forEachFeature((f) => {
-          f.setStyle(iconStyle);
-        });
-
-        test('should export icon style in kml.', () => {
-          const exportString = FeatureExportButton.createFeatureString(
-            iconLayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-          const expectedString =
-            '<Style><IconStyle><scale>2</scale><Icon><href>' +
-            'https://openlayers.org/en/latest/examples/data/icon.png' +
-            '</href></Icon></IconStyle></Style>';
-          expect(exportString.match(/<Style>(.*?)<\/Style>/g)[0]).toBe(
-            expectedString,
-          );
-        });
-
-        test('should export with layer name.', () => {
-          const namedlayer = renderLayer(1);
-          const exportString = FeatureExportButton.createFeatureString(
-            namedlayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-          const expectedname = '<name>ExportLayer</name>';
-          expect(exportString.match(/<name>(.*?)<\/name>/g)[0]).toBe(
-            expectedname,
-          );
-        });
-
-        test('should export without layer name.', () => {
-          const unnamedlayer = renderLayer(1);
-          const exportString = FeatureExportButton.createFeatureString(
-            unnamedlayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-          expect(
-            /<document><name>ExportLayer<\/name>/g.test(exportString),
-          ).toBe(false);
-        });
-
-        test('should export text style in kml.', () => {
-          const textlayer = renderLayer(2);
-
-          textlayer.olLayer.getSource().forEachFeature((f) => {
-            f.setStyle(textStyle);
-          });
-          const exportString = FeatureExportButton.createFeatureString(
-            textlayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-          const expectedStyle =
-            '<Style><IconStyle><scale>0</scale></IconStyle>' +
-            '<LabelStyle><color>ff333333</color></LabelStyle></Style>';
-          expect(exportString.match(/<Style>(.*?)<\/Style>/g)[0]).toBe(
-            expectedStyle,
-          );
-        });
-
-        test('should only export none-empty text style in kml.', () => {
-          const textlayer = renderLayer(2);
-
-          textlayer.olLayer.getSource().forEachFeature((f) => {
-            f.setStyle(textStyle);
-          });
-          const exportString1 = FeatureExportButton.createFeatureString(
-            textlayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-
-          expect(
-            exportString1.match(/<Placemark>(.*?)<\/Placemark>/g).length,
-          ).toBe(2);
-
-          const newStyle = new Style({
-            text: new Text({
-              text: '',
-              font: 'normal 16px Helvetica',
-              stroke: new Stroke({
-                color: [255, 255, 255, 1],
-                width: 3,
-              }),
-            }),
-          });
-          // Set empty string as name for first feature
-          textlayer.olLayer.getSource().getFeatures()[0].setStyle(newStyle);
-
-          const exportString2 = FeatureExportButton.createFeatureString(
-            textlayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-
-          expect(
-            exportString2.match(/<Placemark>(.*?)<\/Placemark>/g).length,
-          ).toBe(1);
-        });
-
-        test("should not export 'Cirle geom' (kml unsupported).", () => {
-          const circleLayer = new Layer({
-            name: 'ExportLayer',
-            olLayer: new VectorLayer({
-              source: new VectorSource({
-                features: [
-                  new Feature({
-                    geometry: new Circle({
-                      center: [843119.531243, 6111943.000197],
-                      radius: 1000,
-                    }),
-                  }),
-                ],
-              }),
-            }),
-          });
-
-          const circleStyle = new Style({
-            stroke: new Stroke({
-              color: 'red',
-              width: 3,
-            }),
-            fill: new Fill({
-              color: 'rgba(255, 0, 0, 0.1)',
-            }),
-          });
-
-          circleLayer.olLayer.getSource().forEachFeature((f) => {
-            f.setStyle(circleStyle);
-          });
-          const exportString = FeatureExportButton.createFeatureString(
-            circleLayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-          expect(exportString).toBe(undefined);
-        });
-
-        test('should export extended data.', () => {
-          const extendedLayer = renderLayer(1);
-
-          const style = new Style({
-            stroke: new Stroke({
-              color: [0, 0, 0, 1],
-              lineDash: [40, 40],
-            }),
-            text: new Text({
-              text: 'text name',
-              font: 'normal 18px Arial',
-              rotation: 0.5,
-              backgroundFill: new Fill({
-                color: 'rgba(255,255,255,0.01)',
-              }),
-            }),
-          });
-
-          extendedLayer.olLayer.getSource().forEachFeature((f) => {
-            f.setStyle(style);
-          });
-          const exportString = FeatureExportButton.createFeatureString(
-            extendedLayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-          const expectedStyle =
-            '<ExtendedData><Data name="lineDash"><value>40,40</value></Data>' +
-            '<Data name="textBackgroundFillColor"><value>rgba(255,255,255,0.01)</value></Data>' +
-            '<Data name="textFont"><value>normal 18px Arial</value></Data>' +
-            '<Data name="textRotation"><value>0.5</value></Data></ExtendedData>';
-          expect(
-            exportString.match(/<ExtendedData>(.*?)<\/ExtendedData>/g)[0],
-          ).toBe(expectedStyle);
-        });
-
-        test('should not export others extended data than style.', () => {
-          const extendedLayer = renderLayer(1);
-
-          const style = new Style({
-            stroke: new Stroke({
-              color: [0, 0, 0, 1],
-              lineDash: [40, 40],
-            }),
-            text: new Text({
-              text: 'text name',
-              font: 'normal 18px Arial',
-              rotation: 0.5,
-              backgroundFill: new Fill({
-                color: 'rgba(255,255,255,0.01)',
-              }),
-            }),
-          });
-
-          extendedLayer.olLayer.getSource().forEachFeature((f) => {
-            f.setStyle(style);
-            f.set('foo', 'bar');
-          });
-          const exportString = FeatureExportButton.createFeatureString(
-            extendedLayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-          const expectedStyle =
-            '<ExtendedData><Data name="lineDash"><value>40,40</value></Data>' +
-            '<Data name="textBackgroundFillColor"><value>rgba(255,255,255,0.01)</value></Data>' +
-            '<Data name="textFont"><value>normal 18px Arial</value></Data>' +
-            '<Data name="textRotation"><value>0.5</value></Data></ExtendedData>';
-          expect(
-            exportString.match(/<ExtendedData>(.*?)<\/ExtendedData>/g)[0],
-          ).toBe(expectedStyle);
-        });
-
-        test('should export lineStartIcon and lineEndIcon style.', () => {
-          const extendedLayer = renderLayer(1);
-          const line = new Feature({
-            geometry: new LineString([
-              [0, 1],
-              [2, 3],
-              [4, 5],
-            ]),
-          });
-          extendedLayer.olLayer.getSource().addFeatures([line]);
-
-          const style = [
-            new Style({
-              stroke: new Stroke({
-                color: [0, 0, 0, 1],
-                lineDash: [40, 40],
-              }),
-            }),
-            new Style({
-              geometry: () => {
-                return new Point([4, 5]);
-              },
-              image: new Icon({
-                src: 'fooarrowend.png',
-              }),
-            }),
-            new Style({
-              geometry: () => {
-                return new Point([0, 1]);
-              },
-              image: new Icon({
-                src: 'fooarrowstart.png',
-              }),
-            }),
-          ];
-          line.setStyle(style);
-
-          const exportString = FeatureExportButton.createFeatureString(
-            extendedLayer,
-            FeatureExportButton.defaultProps.projection,
-            FeatureExportButton.defaultProps.format,
-          );
-          const expectedStyle =
-            '<ExtendedData><Data name="lineDash"><value>40,40</value></Data>' +
-            '<Data name="lineEndIcon">' +
-            '<value>{"url":"fooarrowend.png","scale":1,"size":null}</value></Data>' +
-            '<Data name="lineStartIcon">' +
-            '<value>{"url":"fooarrowstart.png","scale":1,"size":null}</value></Data>' +
-            '</ExtendedData>';
-
-          expect(
-            exportString.match(/<ExtendedData>(.*?)<\/ExtendedData>/g)[0],
-          ).toBe(expectedStyle);
-        });
-      });
-    });
-  });
-});

package/src/components/FeatureExportButton/README.md

@@ -1,76 +0,0 @@
-
-The following example demonstrates the use of FeatureExportButton.
-
-```jsx
-import React from 'react';
-import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import Feature from 'ol/Feature';
-import Point from 'ol/geom/Point';
-import { Icon, Style } from 'ol/style';
-import GPX from 'ol/format/GPX';
-import { geopsTheme, Header, Footer } from '@geops/geops-ui';
-import { ThemeProvider } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import BasicMap from 'react-spatial/components/BasicMap';
-import FeatureExportButton from 'react-spatial/components/FeatureExportButton';
-
-
-const vectorLayer = new Layer({
-  olLayer: new VectorLayer({
-    style: new Style({
-      image: new Icon({
-        anchor: [0.5, 46],
-        anchorXUnits: 'fraction',
-        anchorYUnits: 'pixels',
-        src: 'https://openlayers.org/en/latest/examples/data/icon.png',
-        imgSize: [32, 48]
-      })
-    }),
-    source: new VectorSource({
-      features: [
-        new Feature({
-          geometry: new Point([819103.972418, 6120013.078324]),
-        }),
-        new Feature({
-          geometry: new Point([873838.856313, 6106009.575876]),
-        }),
-      ],
-    }),
-  }),
-});
-
-const layers = [
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
-  }),
-  vectorLayer,
-];
-
-<ThemeProvider theme={geopsTheme}>
-  <div className="rs-feature-export-example">
-    <BasicMap
-      center={[843119.531243, 6111943.000197]}
-      zoom={9}
-      layers={layers}
-      tabIndex={0}
-    />
-    <div className="rs-feature-export-example-btns">
-      <FeatureExportButton layer={vectorLayer}>
-        <Button>
-          Export as KML
-        </Button>
-      </FeatureExportButton>
-      <FeatureExportButton
-        format={GPX}
-        layer={vectorLayer}
-      >
-        <Button>
-          Export as GPX
-        </Button>
-      </FeatureExportButton>
-    </div>
-  </div>
-</ThemeProvider>
-```

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

@@ -1,67 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FeatureExportButton should match snapshot should match snapshot with children passed. 1`] = `
-<div
-  className="rs-feature-export-button"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={0}
->
-  <div>
-    Foo
-  </div>
-</div>
-`;
-
-exports[`FeatureExportButton should match snapshot should match snapshot with cutom attributes. 1`] = `
-<div
-  className="foo"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={2}
-  title="bar"
-/>
-`;
-
-exports[`FeatureExportButton should match snapshot with default attributes. 1`] = `
-<div
-  className="rs-feature-export-button"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={0}
-/>
-`;
-
-exports[`FeatureExportButton triggers onClick #createFeatureString() using KMLFormat should export kml by default. 1`] = `
-<kml xmlns="http://www.opengis.net/kml/2.2"
-     xmlns:gx="http://www.google.com/kml/ext/2.2"
-     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-     xsi:schemalocation="http://www.opengis.net/kml/2.2 https://developers.google.com/kml/schema/kml22gx.xsd"
->
-  <Document>
-    <name>
-      ExportLayer
-    </name>
-    <Placemark>
-      <Style>
-        <IconStyle>
-        <scale>2
-        </scale>
-        <Icon>
-        <href>https://openlayers.org/en/latest/examples/data/icon.png
-        </href>
-        </Icon>
-        </IconStyle>
-      </Style>
-      <Point>
-        <coordinates>
-          7.358136177061042,48.07903229472336
-        </coordinates>
-      </Point>
-    </Placemark>
-  </Document>
-</kml>
-`;

package/src/components/FeatureExportButton/index.js

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

package/src/components/FitExtent/FitExtent.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import OLMap from 'ol/Map';
-
-const propTypes = {
-  /**
-   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
-   */
-  map: PropTypes.instanceOf(OLMap).isRequired,
-
-  /**
-   * The extent to be zoomed.
-   */
-  extent: PropTypes.arrayOf(PropTypes.number).isRequired,
-
-  /**
-   * CSS class  for the fitExtent button.
-   */
-  className: PropTypes.string,
-
-  /**
-   * Button content.
-   */
-  children: PropTypes.node.isRequired,
-};
-
-const defaultProps = {
-  className: 'rs-fit-extent',
-};
-
-/**
- * The FitExtent component creates a button that updates the current extent of
- * an [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
- */
-function FitExtent({ map, extent, className, children, ...other }) {
-  const fit = (evt) => {
-    if (evt.which && evt.which !== 13) {
-      return;
-    }
-    map.getView().cancelAnimations();
-    map.getView().fit(extent, map.getSize());
-  };
-
-  return (
-    <div
-      className={className}
-      role="button"
-      tabIndex="0"
-      onClick={fit}
-      onKeyPress={fit}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...other}
-    >
-      {children}
-    </div>
-  );
-}
-
-FitExtent.propTypes = propTypes;
-FitExtent.defaultProps = defaultProps;
-
-export default FitExtent;

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { configure, shallow } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import OLView from 'ol/View';
-import OLMap from 'ol/Map';
-import FitExtent from './FitExtent';
-
-configure({ adapter: new Adapter() });
-
-const extent = [1, 2, 3, 4];
-
-test('Button should match snapshot.', () => {
-  const map = new OLMap({});
-  const component = renderer.create(
-    <FitExtent map={map} extent={extent}>
-      FitExtent
-    </FitExtent>,
-  );
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
-});
-
-test('Should fit the extent.', () => {
-  const map = new OLMap({ view: new OLView({ zoom: 7, center: [0, 0] }) });
-  const wrapper = shallow(
-    <FitExtent map={map} extent={extent} className="fit-ext">
-      FitExtent
-    </FitExtent>,
-  );
-  wrapper.find('.fit-ext').first().simulate('click', {});
-  const calculatedExtent = map.getView().calculateExtent(map.getSize());
-
-  expect(calculatedExtent).toStrictEqual([1, 2, 3, 4]);
-});
-
-test('Should fit the extent on return.', () => {
-  const map = new OLMap({ view: new OLView({ zoom: 7, center: [0, 0] }) });
-  const wrapper = shallow(
-    <FitExtent map={map} extent={extent} className="fit-ext">
-      FitExtent
-    </FitExtent>,
-  );
-  wrapper.find('.fit-ext').first().simulate('click', { which: 13 });
-  const calculatedExtent = map.getView().calculateExtent(map.getSize());
-
-  expect(calculatedExtent).toStrictEqual([1, 2, 3, 4]);
-});