react-spatial 1.4.0 → 1.4.1

package/src/components/CanvasSaveButton/CanvasSaveButton.test.js

@@ -0,0 +1,148 @@
+import 'jest-canvas-mock';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { configure, shallow } from 'enzyme';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import { TiImage } from 'react-icons/ti';
+import RenderEvent from 'ol/render/Event';
+import CanvasSaveButton from './CanvasSaveButton';
+
+configure({ adapter: new Adapter() });
+
+describe('CanvasSaveButton', () => {
+  let olMap;
+  const conf = {
+    title: 'Karte als Bild speichern.',
+    icon: <TiImage focusable={false} />,
+    className: 'ta-example',
+    saveFormat: 'image/jpeg',
+  };
+
+  beforeEach(() => {
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+    target.style.width = '100px';
+    target.style.height = '100px';
+    olMap = new Map({
+      target,
+      controls: [],
+      view: new View({
+        center: [0, 0],
+        zoom: 0,
+      }),
+    });
+    olMap.getView().setCenter([1000, 1000]);
+  });
+
+  afterEach(() => {
+    if (olMap.getTargetElement()) {
+      document.body.removeChild(olMap.getTargetElement());
+    }
+    olMap.setTarget(null);
+  });
+
+  test('should match snapshot.', () => {
+    const component = renderer.create(
+      <CanvasSaveButton format={conf.saveFormat} map={olMap}>
+        {conf.icon}
+      </CanvasSaveButton>,
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('should match snapshot with a different attributes', () => {
+    const component = renderer.create(
+      // eslint-disable-next-line jsx-a11y/tabindex-no-positive
+      <CanvasSaveButton title={conf.title} className="foo" tabIndex="1">
+        {conf.icon}
+      </CanvasSaveButton>,
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('should call onSaveBefore then download then onSaveEnd function on click.', async () => {
+    const saveStart = jest.fn((m) => {
+      return Promise.resolve(m);
+    });
+    const saveEnd = jest.fn();
+    const wrapper = shallow(
+      <CanvasSaveButton
+        className="ta-example"
+        map={olMap}
+        format={conf.saveFormat}
+        onSaveStart={saveStart}
+        onSaveEnd={saveEnd}
+        extraData={{
+          copyright: {
+            text: () => {
+              return (
+                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
+                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
+                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
+                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
+                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
+                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
+                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)'
+              );
+            },
+          },
+        }}
+      >
+        {conf.icon}
+      </CanvasSaveButton>,
+    );
+    const link = document.createElement('a');
+    link.click = jest.fn();
+    const div = document.createElement('div');
+    const canvas = document.createElement('canvas');
+    canvas.toBlob = jest.fn((callback) => {
+      return callback();
+    });
+    global.URL.createObjectURL = jest.fn(() => {
+      return 'fooblob';
+    });
+    // We use a spy here to be able to correctly restore the initial function
+    const spy3 = jest
+      .spyOn(global.document, 'createElement')
+      .mockImplementation((elt) => {
+        if (elt === 'canvas') {
+          return canvas;
+        }
+        if (elt === 'div') {
+          return div;
+        }
+        if (elt === 'a') {
+          return link;
+        }
+        return {};
+      });
+    const spy = jest.spyOn(CanvasSaveButton.prototype, 'createCanvasImage');
+    const spy2 = jest.spyOn(CanvasSaveButton.prototype, 'downloadCanvasImage');
+    jest
+      .spyOn(olMap.getTargetElement(), 'getElementsByTagName')
+      .mockReturnValue([canvas]);
+    await wrapper.find('.ta-example').simulate('click');
+    await olMap.dispatchEvent(
+      new RenderEvent('rendercomplete', undefined, undefined, {
+        canvas,
+      }),
+    );
+    await window.setTimeout(() => {
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(saveStart).toHaveBeenCalledTimes(1);
+      expect(saveEnd).toHaveBeenCalledTimes(1);
+      expect(spy2.mock.calls[0][0]).toBe(canvas);
+      expect(spy2.mock.calls[0][0].toBlob).toHaveBeenCalledTimes(1);
+      expect(link.href).toBe('http://localhost/fooblob');
+      expect(link.download).toBe('.jpg');
+      expect(link.click).toHaveBeenCalledTimes(1);
+      spy.mockRestore();
+      spy2.mockRestore();
+      spy3.mockRestore();
+    });
+  });
+});

package/src/components/CanvasSaveButton/README.md

@@ -0,0 +1,76 @@
+The following example demonstrates the use of CanvasSaveButton.
+
+```jsx
+import React from 'react';
+import { TiImage } from 'react-icons/ti';
+import { geopsTheme, Header, Footer } from '@geops/geops-ui';
+import { ThemeProvider } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import { Layer } from 'mobility-toolbox-js/ol';
+import Tile from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import Map from 'ol/Map';
+import { toDegrees } from 'ol/math';
+import CanvasSaveButton from 'react-spatial/components/CanvasSaveButton';
+import BasicMap from 'react-spatial/components/BasicMap';
+import geopsLogo from 'react-spatial/images/geops_logo.png';
+import qrCode from 'react-spatial/images/geops_qr.png';
+
+const map = new Map({ controls: [] });
+
+const layers = [
+  new Layer({
+    olLayer: new Tile({
+      source: new OSM(),
+    }),
+    copyrights: '© layer-copyright',
+  }),
+];
+
+function CanvasSaveButtonExample() {
+  return (
+    <ThemeProvider theme={geopsTheme}>
+      <div className="rs-canvas-save-button-example">
+        <BasicMap
+          map={map}
+          layers={layers}
+          center={[874105.13, 6106172.77]}
+          zoom={10}
+          tabIndex={0}
+        />
+        <CanvasSaveButton
+          map={map}
+          extraData={{
+            copyright: {
+              text: () => {
+                return layers[0].copyrights;
+              },
+              background: true,
+            },
+            northArrow: {
+              rotation: () => {
+                return toDegrees(map.getView().getRotation());
+              },
+              circled: true,
+            },
+            logo: {
+              src: geopsLogo,
+              height: 22,
+              width: 84,
+            },
+            qrCode: {
+              src: qrCode,
+              height: 50,
+              width: 50,
+            },
+          }}
+        >
+          <Button>Export Map</Button>
+        </CanvasSaveButton>
+      </div>
+    </ThemeProvider>
+  );
+}
+
+<CanvasSaveButtonExample />;
+```

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

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CanvasSaveButton should match snapshot with a different attributes 1`] = `
+<div
+  className="foo"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex="1"
+  title="Karte als Bild speichern."
+>
+  <svg
+    baseProfile="tiny"
+    fill="currentColor"
+    focusable={false}
+    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[`CanvasSaveButton should match snapshot. 1`] = `
+<div
+  className="rs-canvas-save-button"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
+>
+  <svg
+    baseProfile="tiny"
+    fill="currentColor"
+    focusable={false}
+    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>
+`;

package/src/components/CanvasSaveButton/index.js

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

package/src/components/Copyright/Copyright.js

@@ -0,0 +1,89 @@
+import React, { useMemo, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Map } from 'ol';
+import { CopyrightControl } from 'mobility-toolbox-js/ol';
+
+const propTypes = {
+  /**
+   * A map.
+   */
+  map: PropTypes.instanceOf(Map).isRequired,
+
+  /**
+   * Format function. Called with an array of copyrights from visible layers
+   * and returns the copyright.
+   */
+  format: PropTypes.func,
+
+  /**
+   * CSS class of th root element
+   */
+  className: PropTypes.string,
+};
+
+const defaultProps = {
+  format: (copyrights) => {
+    return copyrights.join(' | ');
+  },
+  className: 'rs-copyright',
+};
+
+/**
+ * The Copyright component uses the
+ * [mobility-toolbox-js CopyrightControl](https://mobility-toolbox-js.geops.io/api/class/src/mapbox/controls/CopyrightControl%20js~CopyrightControl%20html-offset-anchor)
+ * to render the layer copyrights.
+ */
+function Copyright({ map, format, ...other }) {
+  const [copyrights, setCopyrights] = useState([]);
+
+  const control = useMemo(
+    () => {
+      return new CopyrightControl({
+        target: document.createElement('div'),
+        element: document.createElement('div'),
+        render() {
+          // eslint-disable-next-line react/no-this-in-sfc
+          const newCopyrights = this.getCopyrights();
+          if (copyrights.toString() !== newCopyrights.toString()) {
+            setCopyrights(newCopyrights);
+          }
+        },
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  // Ensure the control is not associated to the wrong map
+  useEffect(() => {
+    if (!control) {
+      return () => {};
+    }
+
+    control.map = map;
+
+    return () => {
+      control.map = null;
+    };
+  }, [map, control]);
+
+  if (!control || !control.getCopyrights().length) {
+    return null;
+  }
+
+  return (
+    <div
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...other}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: format(copyrights) || '',
+      }}
+    />
+  );
+}
+
+Copyright.propTypes = propTypes;
+Copyright.defaultProps = defaultProps;
+
+export default React.memo(Copyright);

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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,36 @@
+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

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

package/src/components/FeatureExportButton/FeatureExportButton.js

@@ -0,0 +1,118 @@
+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;