react-spatial 1.5.2 → 1.5.3

package/src/components/Permalink/Permalink.js

@@ -0,0 +1,326 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import qs from 'query-string';
+import OLMap from 'ol/Map';
+import { unByKey } from 'ol/Observable';
+import { Layer, getLayersAsFlatArray } from 'mobility-toolbox-js/ol';
+
+const propTypes = {
+  /**
+   * Either 'react-router' history object:
+   * https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md<br>
+   * or default fallback as HTML5 History:
+   * https://developer.mozilla.org/en-US/docs/Web/API/History
+   */
+  history: PropTypes.shape({
+    replace: PropTypes.func,
+  }),
+
+  /**
+   * Layers provider.
+   */
+  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),
+
+  /**
+   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+   */
+  map: PropTypes.instanceOf(OLMap),
+
+  /**
+   * Params to be written in url.
+   */
+  params: PropTypes.object,
+
+  /**
+   * Maximum number of decimals allowed for coordinates.
+   */
+  coordinateDecimals: PropTypes.number,
+
+  /**
+   * Determine if the layer is hidden in the permalink or not.
+   *
+   * @param {object} item The item to hide or not.
+   *
+   * @return {bool} true if the item is not displayed in the permalink
+   */
+  isLayerHidden: PropTypes.func,
+
+  /**
+   * Determine if the layer appears in the baselayers permalink parameter or not.
+   *
+   * @param {object} item The item to hide or not.
+   *
+   * @return {bool} true if the item is not displayed in the baselayers permalink parameter
+   */
+  isBaseLayer: PropTypes.func,
+
+  /**
+   * Custom function to be called when the permalink is updated.
+   * This property has priority over the history parameter and window.history.replaceState calls.
+   */
+  replace: PropTypes.func,
+};
+
+const defaultProps = {
+  history: null,
+  replace: null,
+  layers: [],
+  map: null,
+  params: {},
+  coordinateDecimals: 2,
+  isLayerHidden: () => {
+    return false;
+  },
+  isBaseLayer: (layer) => {
+    return layer.get('isBaseLayer');
+  },
+};
+
+/**
+ * This component handles permalink logic. Injecting an
+ * __[ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)__
+ * will add the *map center* (x, y) and the *zoom* (z) parameters to the permalink.
+ * Injecting layers will add the *baselayers* and/or *layers* parameters. Further parameters can
+ * be added using __params__.
+ */
+class Permalink extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { revision: 0 };
+    this.onMoveEndRef = null;
+    this.onPropertyChangeKeys = [];
+  }
+
+  componentDidMount() {
+    const { map, layers, isLayerHidden, isBaseLayer } = this.props;
+    if (map) {
+      this.moveEndRef = map.on('moveend', () => {
+        this.onMapMoved();
+      });
+    }
+
+    if (layers) {
+      // set layer visibility based on 'layers' parameter.
+      const urlParams = qs.parse(window.location.search);
+
+      if (urlParams.layers) {
+        const visibleLayers = urlParams.layers.split(',');
+        getLayersAsFlatArray(layers).forEach((l) => {
+          if (visibleLayers.includes(l.key)) {
+            if (l.setVisible) {
+              l.setVisible(true);
+            } else {
+              // eslint-disable-next-line no-param-reassign
+              l.visible = true;
+            }
+          } else if (
+            !isBaseLayer(l) &&
+            !isLayerHidden(l) &&
+            !l.children.some((ll) => {
+              return ll.visible;
+            })
+          ) {
+            if (l.setVisible) {
+              l.setVisible(false);
+            } else {
+              // eslint-disable-next-line no-param-reassign
+              l.visible = false;
+            }
+          }
+        });
+      }
+
+      // Set baser layer visibility based on 'baseLayers' parameter.
+      // Show the first of the list then hide the others
+      const visibleBaseLayer = (urlParams.baselayers || '').split(',')[0];
+      if (visibleBaseLayer) {
+        getLayersAsFlatArray(layers)
+          .filter(isBaseLayer)
+          .forEach((baseLayer) => {
+            const visible = baseLayer.key === visibleBaseLayer;
+            if (baseLayer.setVisible) {
+              baseLayer.setVisible(visible);
+            } else {
+              // eslint-disable-next-line no-param-reassign
+              baseLayer.visible = visible;
+            }
+          });
+      }
+      this.updateLayers();
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { map, layers } = this.props;
+    const { revision } = this.state;
+
+    if (layers !== prevProps.layers || revision !== prevState.revision) {
+      this.updateLayers();
+    }
+
+    if (map !== prevProps.map) {
+      unByKey(this.moveEndRef);
+      this.moveEndRef = map.on('moveend', () => {
+        return this.onMapMoved();
+      });
+    }
+
+    this.updateHistory();
+  }
+
+  componentWillUnmount() {
+    const { map } = this.props;
+
+    if (map) {
+      unByKey(this.moveEndRef);
+    }
+    unByKey(this.onPropertyChangeKeys);
+    this.onPropertyChangeKeys = [];
+  }
+
+  onMapMoved() {
+    const { map } = this.props;
+    const mapView = map.getView();
+    const center = mapView.getCenter();
+    const params = {};
+
+    if (
+      center !== undefined &&
+      center[0] !== undefined &&
+      center[1] !== undefined
+    ) {
+      params.x = this.roundCoord(center[0]);
+      params.y = this.roundCoord(center[1]);
+    }
+
+    this.setState({
+      ...params,
+      // rounds zoom to two digits max.
+      z: +`${Math.round(`${parseFloat(mapView.getZoom())}e+2`)}e-2`,
+    });
+  }
+
+  roundCoord(val) {
+    const { coordinateDecimals } = this.props;
+    return parseFloat(val.toFixed(coordinateDecimals));
+  }
+
+  updateLayers() {
+    const { layers, isLayerHidden, isBaseLayer } = this.props;
+    const { revision } = this.state;
+
+    unByKey(this.onPropertyChangeKeys);
+    this.onPropertyChangeKeys = getLayersAsFlatArray(layers).map((layer) => {
+      return layer.on('change:visible', () => {
+        this.setState({ revision: revision + 1 });
+      });
+    });
+
+    // layers param
+    let layersParam;
+    if (layers.length) {
+      layersParam = getLayersAsFlatArray(layers)
+        .filter((l) => {
+          const children = l.children || [];
+          const allChildrenHidden = children.every((child) => {
+            return isLayerHidden(child);
+          });
+          const hasVisibleChildren = children.some((child) => {
+            return child.visible;
+          });
+          return (
+            !isBaseLayer(l) &&
+            !isLayerHidden(l) &&
+            l.visible &&
+            (!hasVisibleChildren || allChildrenHidden)
+          );
+        })
+        .map((l) => {
+          return l.key;
+        })
+        .join();
+    }
+
+    // baselayers param
+    let baseLayersParam;
+    const baseLayers = getLayersAsFlatArray(layers).filter(isBaseLayer);
+    if (baseLayers.length) {
+      // First baselayers in order of visibility, top layer is first
+      const visibleBaseLayers = (
+        baseLayers.filter((l) => {
+          return l.visible;
+        }) || []
+      ).reverse();
+      const nonVisibleBaseLayers =
+        baseLayers.filter((l) => {
+          return !l.visible;
+        }) || [];
+      baseLayersParam = [...visibleBaseLayers, ...nonVisibleBaseLayers]
+        .sort((a, b) => {
+          if (a.visible === b.visible) {
+            return 0;
+          }
+          if (a.visible && !b.visible) {
+            return -1;
+          }
+          return 1;
+        })
+        .map((l) => {
+          return l.key;
+        })
+        .join();
+    }
+
+    // Only add parameters if there is actually some layers added.
+    this.setState({
+      layers: layersParam,
+      baselayers: baseLayersParam,
+    });
+  }
+
+  updateHistory() {
+    const { params, history, replace } = this.props;
+    const oldParams = qs.parse(window.location.search);
+    const parameters = { ...oldParams, ...this.state, ...params };
+
+    delete parameters.revision;
+
+    // Remove parameters that are undefined or null
+    Object.entries(parameters).forEach(([key, value]) => {
+      if (value === undefined || value === null) {
+        delete parameters[key];
+      }
+    });
+
+    // encodeURI to encode spaces, accents, etc. but not characters like ;,/?:@&=+$-_.!~*'()
+    const qStr = encodeURI(qs.stringify(parameters, { encode: false }));
+    const search = qStr ? `?${qStr}` : '';
+
+    if (
+      (!qStr && window.location.search) ||
+      (qStr && search !== window.location.search)
+    ) {
+      if (replace) {
+        replace({ parameters, search });
+      } else if (history) {
+        history.replace({ search });
+      } else {
+        const { hash } = window.location;
+        window.history.replaceState(
+          undefined,
+          undefined,
+          `${search}${hash || ''}`,
+        );
+      }
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+Permalink.propTypes = propTypes;
+Permalink.defaultProps = defaultProps;
+
+export default Permalink;

package/src/components/Permalink/Permalink.test.js

@@ -0,0 +1,285 @@
+import 'jest-canvas-mock';
+import React from 'react';
+import MapEvent from 'ol/MapEvent';
+import OLMap from 'ol/Map';
+import View from 'ol/View';
+import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol';
+import { act, render } from '@testing-library/react';
+import Permalink from './Permalink';
+
+const defaultIsLayerHidden = (l) => {
+  let isParentHidden = false;
+  let { parent } = l;
+  while (!isParentHidden && parent) {
+    isParentHidden = parent.get('hideInLegend');
+    parent = parent.parent;
+  }
+
+  return l.get('hideInLegend') || isParentHidden;
+};
+
+describe('Permalink', () => {
+  let layers;
+  beforeEach(() => {
+    // Ensure default empty url.
+    window.history.pushState({}, undefined, '/');
+    layers = [
+      new Layer({
+        name: 'Ultimate layer',
+        key: 'ultimate.layer',
+        visible: true,
+        properties: {
+          hideInLegend: true,
+        },
+      }),
+      new Layer({
+        name: 'Swiss boundaries',
+        key: 'swiss.boundaries',
+        visible: false,
+        properties: {
+          hideInLegend: true,
+        },
+      }),
+      new MapboxLayer({
+        name: 'Base - Bright',
+        key: 'basebright.baselayer',
+        group: 'baseLayer',
+        properties: {
+          isBaseLayer: true,
+        },
+      }),
+      new MapboxLayer({
+        name: 'Base - Dark',
+        key: 'basedark.baselayer',
+        visible: false,
+        group: 'baseLayer',
+        properties: {
+          isBaseLayer: true,
+        },
+      }),
+      new Layer({
+        name: 'Layer with children that are hidden',
+        key: 'children.hidden.layer',
+        visible: true,
+        children: [
+          new Layer({
+            name: 'Child 1 hidden',
+            key: 'child.hidden.1',
+            visible: true,
+            properties: {
+              hideInLegend: true,
+            },
+          }),
+          new Layer({
+            name: 'Childr 2 hidden',
+            key: 'child.hidden.2',
+            visible: false,
+            properties: {
+              hideInLegend: true,
+            },
+          }),
+        ],
+      }),
+    ];
+  });
+
+  test('should initialize x, y & z with history.', () => {
+    const history = {
+      replace: jest.fn((v) => {
+        return v;
+      }),
+    };
+
+    const params = {
+      x: 1000,
+      y: 1000,
+      z: 7,
+    };
+
+    const { rerender } = render(
+      <Permalink params={params} history={history} />,
+    );
+
+    act(() => {
+      rerender(
+        <Permalink
+          params={{
+            x: 1001,
+            y: 1002,
+            z: 7,
+          }}
+          history={history}
+        />,
+      );
+    });
+    const search = '?x=1001&y=1002&z=7';
+
+    expect(history.replace.mock.results[1].value.search).toEqual(search);
+  });
+
+  test('should initialize x, y & z Permalink without history.', () => {
+    const params = {
+      x: 1000,
+      y: 1000,
+      z: 7,
+    };
+
+    const { rerender } = render(<Permalink params={params} />);
+    act(() => {
+      rerender(
+        <Permalink
+          params={{
+            x: 1001,
+            y: 1002,
+            z: 7,
+          }}
+        />,
+      );
+    });
+    const search = '?x=1001&y=1002&z=7';
+
+    expect(window.location.search).toEqual(search);
+  });
+
+  test('should initialize Permalink with layers.', () => {
+    expect(window.location.search).toEqual('');
+    render(<Permalink layers={layers} />);
+    const search =
+      '?baselayers=basebright.baselayer,basedark.baselayer&layers=ultimate.layer,child.hidden.1';
+    expect(window.location.search).toEqual(search);
+  });
+
+  test('should initialize Permalink with isLayerHidden.', () => {
+    expect(window.location.search).toEqual('');
+    render(<Permalink layers={layers} isLayerHidden={defaultIsLayerHidden} />);
+    const search =
+      '?baselayers=basebright.baselayer,basedark.baselayer&layers=children.hidden.layer';
+    expect(window.location.search).toEqual(search);
+  });
+
+  test('should initialize Permalink with map.', () => {
+    expect(window.location.search).toEqual('');
+    const olMap = new OLMap({
+      controls: [],
+      view: new View({
+        center: [1001, 1002],
+        zoom: 5,
+      }),
+    });
+    render(<Permalink map={olMap} />);
+    act(() => {
+      olMap.dispatchEvent(new MapEvent('moveend', olMap));
+    });
+    const search = '?x=1001&y=1002&z=5';
+
+    expect(window.location.search).toEqual(search);
+  });
+
+  test('should limit 2 decimals by default for x, y.', () => {
+    expect(window.location.search).toEqual('');
+    const olMap = new OLMap({
+      controls: [],
+      view: new View({
+        center: [10010.555555, 10010.5555555],
+        zoom: 5,
+      }),
+    });
+    render(<Permalink map={olMap} />);
+
+    act(() => {
+      olMap.dispatchEvent(new MapEvent('moveend', olMap));
+    });
+
+    const search = '?x=10010.56&y=10010.56&z=5';
+
+    expect(window.location.search).toEqual(search);
+  });
+
+  test('should round values x & y ".00" for readability.', () => {
+    expect(window.location.search).toEqual('');
+    const olMap = new OLMap({
+      controls: [],
+      view: new View({
+        center: [10010.99999, 1001.000001],
+        zoom: 5,
+      }),
+    });
+    render(<Permalink map={olMap} />);
+    act(() => {
+      olMap.dispatchEvent(new MapEvent('moveend', olMap));
+    });
+    expect(window.location.search).toEqual('?x=10011&y=1001&z=5');
+  });
+
+  test('should limit 4 decimals with props "coordinateDecimals".', () => {
+    expect(window.location.search).toEqual('');
+    const olMap = new OLMap({
+      controls: [],
+      view: new View({
+        center: [10010.555555, 10010.5555555],
+        zoom: 5,
+      }),
+    });
+    render(<Permalink map={olMap} coordinateDecimals={4} />);
+    act(() => {
+      olMap.dispatchEvent(new MapEvent('moveend', olMap));
+    });
+
+    expect(window.location.search).toEqual('?x=10010.5556&y=10010.5556&z=5');
+  });
+
+  test('should react on layers change.', () => {
+    expect(window.location.search).toEqual('');
+    const { rerender } = render(<Permalink layers={layers} />);
+    let layersParam = new URLSearchParams(window.location.search).get('layers');
+    expect(layersParam).toBe('ultimate.layer,child.hidden.1');
+    rerender(
+      <Permalink
+        layers={[
+          new Layer({
+            name: 'foo',
+            key: 'foo.layer',
+          }),
+        ]}
+      />,
+    );
+
+    layersParam = new URLSearchParams(window.location.search).get('layers');
+    expect(layersParam).toBe('foo.layer');
+  });
+
+  test('should react on layer visiblity change.', () => {
+    expect(window.location.search).toEqual('');
+    render(<Permalink layers={layers} />);
+    let layersParam = new URLSearchParams(window.location.search).get('layers');
+    expect(layersParam).toBe('ultimate.layer,child.hidden.1');
+
+    act(() => {
+      layers.find((l) => {
+        return l.name === 'Swiss boundaries';
+      }).visible = true;
+    });
+
+    layersParam = new URLSearchParams(window.location.search).get('layers');
+    expect(layersParam).toBe('ultimate.layer,swiss.boundaries,child.hidden.1');
+  });
+
+  test('should react on base layer visiblity change.', () => {
+    expect(window.location.search).toEqual('');
+    render(<Permalink layers={layers} />);
+
+    let baseLayers = new URLSearchParams(window.location.search).get(
+      'baselayers',
+    );
+    expect(baseLayers).toBe('basebright.baselayer,basedark.baselayer');
+
+    act(() => {
+      layers.find((l) => {
+        return l.name === 'Base - Dark';
+      }).visible = true;
+    });
+
+    baseLayers = new URLSearchParams(window.location.search).get('baselayers');
+    expect(baseLayers).toBe('basedark.baselayer,basebright.baselayer');
+  });
+});

package/src/components/Permalink/README.md

@@ -0,0 +1,105 @@
+
+The following example demonstrates the use of Permalink.
+
+```jsx
+import React from 'react';
+import VectorSource from 'ol/source/Vector';
+import VectorLayer from 'ol/layer/Vector';
+import { Style, Circle, Stroke, Fill } from 'ol/style';
+import GeoJSONFormat from 'ol/format/GeoJSON';
+import { Layer, MapboxLayer } from 'mobility-toolbox-js/ol';
+import Button from '@material-ui/core/Button';
+import Permalink from 'react-spatial/components/Permalink';
+import BasicMap from 'react-spatial/components/BasicMap';
+import Map from 'ol/Map';
+
+const map = new Map({ controls: [] });
+
+const swissBoundries = new Layer({
+  name: 'Swiss boundaries',
+  key: 'swiss.boundaries',
+  visible: true,
+  olLayer: new VectorLayer({
+    source: new VectorSource({
+      url: 'https://raw.githubusercontent.com/openlayers/openlayers/' +
+            '3c64018b3754cf605ea19cbbe4c8813304da2539/examples/data/geojson/' +
+            'switzerland.geojson',
+      format: new GeoJSONFormat(),
+    }),
+    style: new Style({
+      image: new Circle({
+        radius: 5,
+        fill: new Fill({
+          color: '#ff0000',
+        }),
+      }),
+      stroke: new Stroke({
+          color: '#ffcc33',
+          width: 2,
+        }),
+      }),
+    })
+});
+
+const baseLayers = [
+  new MapboxLayer({
+    url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${apiKey}`,
+    name: 'Base - Bright',
+    key: 'basebright.baselayer',
+  }),
+  new MapboxLayer({
+    url: `https://maps.geops.io/styles/base_dark_v2/style.json?key=${apiKey}`,
+    name: 'Base - Dark',
+    key: 'basedark.baselayer',
+    visible: false,
+  }),
+];
+
+const layers = [...baseLayers, swissBoundries];
+
+<div className="rs-permalink-example">
+  <BasicMap center={[876887.69, 5928515.41]} map={map} layers={layers} tabIndex={0} zoom={5} />
+  <Permalink
+    map={map}
+    layers={layers}
+    params={{
+      mode: 'custom',
+    }}
+    isBaseLayer={l=>{
+      return baseLayers.includes(l);
+    }}
+    isLayerHidden={l => {
+        let hasParentHidden = false;
+        let { parent } = l;
+        while (!hasParentHidden && parent) {
+          hasParentHidden = parent.get('hideInLegend');
+          parent = parent.parent;
+        }        
+        return l.get('hideInLegend') || hasParentHidden;
+    }}
+  />
+  <div className="rs-permalink-example-btns">
+    <Button
+      onClick={() => {
+        swissBoundries.visible = !swissBoundries.visible;
+      }}
+    >
+      Toggle Switzerland layer
+    </Button>
+    <Button
+      onClick={() => {
+      if (baseLayers[1].visible) {
+        baseLayers[0].visible = true;
+        baseLayers[1].visible = false;
+      } else {
+        baseLayers[0].visible = false;
+        baseLayers[1].visible = true;
+      }
+      map.updateSize();
+    }}
+    >
+      Change base layer
+    </Button>
+  </div>
+</div>;
+```

package/src/components/Permalink/index.js

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