react-spatial 1.5.3 → 1.5.5

package/src/components/Copyright/Copyright.test.js

@@ -1,134 +0,0 @@
-import 'jest-canvas-mock';
-import React from 'react';
-import { configure, mount } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import { act } from 'react-dom/test-utils';
-import { Map, View } from 'ol';
-import Tile from 'ol/Tile';
-import TileLayer from 'ol/layer/Tile';
-import TileSource from 'ol/source/Tile';
-import { createXYZ } from 'ol/tilegrid';
-import { Layer } from 'mobility-toolbox-js/ol';
-import Copyright from './Copyright';
-
-configure({ adapter: new Adapter() });
-
-const image = new Image();
-image.width = 256;
-image.height = 256;
-
-const tileLoadFunction = () => {
-  const tile = new Tile([0, 0, -1], 2 /* LOADED */);
-  tile.getImage = () => {
-    return image;
-  };
-  return tile;
-};
-
-const getOLTileLayer = () => {
-  const layer = new TileLayer({
-    source: new TileSource({
-      projection: 'EPSG:3857',
-      tileGrid: createXYZ(),
-    }),
-  });
-  layer.getSource().getTile = tileLoadFunction;
-  return layer;
-};
-
-const getLayer = (copyrights, visible = true) => {
-  return new Layer({
-    visible,
-    copyrights,
-    olLayer: getOLTileLayer(),
-  });
-};
-
-let layers;
-let map;
-
-describe('Copyright', () => {
-  beforeEach(() => {
-    const target = document.createElement('div');
-    document.body.appendChild(target);
-    layers = [getLayer('bar'), getLayer('foo', false)];
-    map = new Map({
-      target,
-      view: new View({
-        center: [0, 0],
-        zoom: 0,
-      }),
-      layers: layers.map((layer) => {
-        return layer.olLayer;
-      }),
-    });
-    map.setSize([200, 200]);
-    layers.forEach((layer) => {
-      layer.attachToMap(map);
-    });
-    act(() => {
-      map.renderSync();
-    });
-  });
-
-  afterEach(() => {
-    layers.forEach((layer) => {
-      layer.detachFromMap(map);
-    });
-    map.setTarget(null);
-    map = null;
-  });
-
-  test('is empty if no layers are visible', () => {
-    const component = mount(<Copyright map={map} />);
-    expect(component.html()).toBe(null);
-  });
-
-  test('displays one copyright', () => {
-    const wrapper = mount(<Copyright map={map} />);
-    act(() => {
-      map.renderSync();
-    });
-    wrapper.update();
-    expect(wrapper.text()).toBe('bar');
-  });
-
-  test('displays 2 copyrights', () => {
-    const wrapper = mount(<Copyright map={map} />);
-    layers[0].visible = true;
-    layers[1].visible = true;
-    act(() => {
-      map.renderSync();
-    });
-    wrapper.update();
-    expect(wrapper.text()).toBe('bar | foo');
-  });
-
-  test('displays a copyright using a custom format', () => {
-    const wrapper = mount(
-      <Copyright
-        map={map}
-        format={(copyrights) => {
-          return `Number of copyrights: ${copyrights.length}`;
-        }}
-      />,
-    );
-
-    act(() => {
-      map.renderSync();
-    });
-    wrapper.update();
-
-    expect(wrapper.text()).toBe('Number of copyrights: 1');
-  });
-
-  test('set a custom className', () => {
-    const wrapper = mount(<Copyright map={map} className="foo" />);
-    expect(wrapper.find('.foo').length).toBe(1);
-  });
-
-  test('set a custom attribute to the root element', () => {
-    const wrapper = mount(<Copyright map={map} foo="bar" />);
-    expect(wrapper.find('[foo]').length).toBe(1);
-  });
-});

package/src/components/Copyright/README.md

@@ -1,36 +0,0 @@
-The following example demonstrates the use of Copyright.
-
-```js
-import React from 'react';
-import Map from 'ol/Map';
-import Tile from 'ol/layer/Tile';
-import OSM from 'ol/source/OSM';
-import { defaults } from 'ol/control';
-import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol';
-import BasicMap from 'react-spatial/components/BasicMap';
-import Copyright from 'react-spatial/components/Copyright';
-
-const map = new Map({
-  controls: defaults({
-    attribution: false,
-  }),
-});
-
-const layers = [
-  new MapboxLayer({
-    url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${window.apiKey}`,
-  }),
-  new Layer({
-    copyrights: '© My custom copyright for OSM Contributors',
-    olLayer: new Tile({
-      source: new OSM(),
-    }),
-  }),
-];
-window.layers = layers;
-
-<div className="rs-copyright-example">
-  <BasicMap map={map} layers={layers} tabIndex={0} />
-  <Copyright map={map} />
-</div>;
-```

package/src/components/Copyright/index.js

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

package/src/components/FeatureExportButton/FeatureExportButton.js

@@ -1,118 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import KMLFormat from 'ol/format/KML';
-import { Layer } from 'mobility-toolbox-js/ol';
-import KML from '../../utils/KML';
-
-const propTypes = {
-  /**
-   *  Children content of the Feature export button.
-   */
-  children: PropTypes.node,
-
-  /**
-   * Format to export features (function).
-   * Supported formats: https://openlayers.org/en/latest/apidoc/module-ol_format_Feature-FeatureFormat.html
-   */
-  format: PropTypes.func,
-
-  /**
-   * An existing [mobility-toolbox-js Layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers),
-   * using a valid [ol/source/Vector](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector.html)
-   */
-  layer: PropTypes.instanceOf(Layer).isRequired,
-
-  /**
-   * Map projection.
-   */
-  projection: PropTypes.string,
-};
-
-const defaultProps = {
-  children: null,
-  format: KMLFormat,
-  projection: 'EPSG:3857',
-};
-
-/**
- * The FeatureExportButton component creates a button that exports feature geometries
- * from a [[mobility-toolbox-js Layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)]
- * containing an [ol/layer/Vector](https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html)
- * with a [ol/source/Vector](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector.html) on click.<br>
- * The default export format is KML, which supports the features' style export.<br>
- * Other formats do not always support style export (See specific format specs).
- */
-class FeatureExportButton extends PureComponent {
-  static createFeatureString(layer, projection, format) {
-    if (format === KMLFormat) {
-      return KML.writeFeatures(layer, projection);
-    }
-
-    // eslint-disable-next-line new-cap
-    return new format().writeFeatures(layer.olLayer.getSource().getFeatures(), {
-      featureProjection: projection,
-    });
-  }
-
-  static exportFeatures(layer, projection, format) {
-    const now = new Date()
-      .toJSON()
-      .slice(0, 20)
-      .replace(/[.:T-]+/g, '');
-    const featString = this.createFeatureString(layer, projection, format);
-
-    const formatString = featString
-      ? featString.match(/<(\w+)\s+\w+.*?>/)[1]
-      : 'xml';
-
-    const fileName = `exported_features_${now}.${formatString}`;
-    const charset = document.characterSet || 'UTF-8';
-    const type = `${
-      formatString === 'kml'
-        ? 'data:application/vnd.google-earth.kml+xml'
-        : 'data:text/xml'
-    };charset=${charset}`;
-
-    if (featString) {
-      if (window.navigator.msSaveBlob) {
-        // ie 11 and higher
-        window.navigator.msSaveBlob(new Blob([featString], { type }), fileName);
-      } else {
-        const link = document.createElement('a');
-        link.download = fileName;
-        link.href = `${type},${encodeURIComponent(featString)}`;
-        link.click();
-      }
-    }
-  }
-
-  render() {
-    const { children, layer, projection, format, ...other } = this.props;
-
-    return (
-      <div
-        role="button"
-        className="rs-feature-export-button"
-        tabIndex={0}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...other}
-        onClick={() => {
-          return FeatureExportButton.exportFeatures(layer, projection, format);
-        }}
-        onKeyPress={(evt) => {
-          return (
-            evt.which === 13 &&
-            FeatureExportButton.exportFeatures(layer, projection, format)
-          );
-        }}
-      >
-        {children}
-      </div>
-    );
-  }
-}
-
-FeatureExportButton.propTypes = propTypes;
-FeatureExportButton.defaultProps = defaultProps;
-
-export default FeatureExportButton;

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);
-        });
-      });
-    });
-  });
-});