react-spatial 2.0.0-beta.1 → 2.0.0-beta.2

package/components/BaseLayerSwitcher/BaseLayerSwitcher.scss

@@ -4,7 +4,8 @@
   transition: 800ms width;
   overflow: hidden;
   display: flex;
-  padding: 2px 2px;
+  align-items: center;
+  padding: 2px;
   pointer-events: none;
 
   &.rs-open {
@@ -20,15 +21,15 @@
     width: 100px;
     min-width: 100px;
     margin-right: 4px;
-    background-color: rgb(197, 197, 197);
+    background-color: rgb(197 197 197);
     border: 2px solid white;
     box-sizing: border-box;
     pointer-events: auto;
 
     &.rs-opener {
       position: absolute;
-      top: 2px;       // For IE
-      left: 2px;        // For IE
+      top: 2px;       /* For IE */
+      left: 2px;      /* For IE */
       opacity: 1;
       z-index: 100;
       transition: 700ms opacity, 1000ms z-index;
@@ -81,7 +82,7 @@
     font-size: 10px;
     padding: 2px 0;
     color: white;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgb(0 0 0 / 70%);
     text-align: center;
 
     &.rs-active {

package/components/BaseLayerSwitcher/index.js

@@ -1,3 +1 @@
-export { default } from './BaseLayerSwitcher';
-
-//# sourceMappingURL=index.js.map
+export { default } from "./BaseLayerSwitcher";

package/components/BaseLayerSwitcher/index.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/BaseLayerSwitcher/index.js"],"sourcesContent":["export { default } from './BaseLayerSwitcher';\n"],"names":[],"mappings":"AAAA,SAAS,OAAO,QAAQ,qBAAqB,CAAC;"}
+{
+  "version": 3,
+  "sources": ["../../../src/components/BaseLayerSwitcher/index.js"],
+  "sourcesContent": ["export { default } from \"./BaseLayerSwitcher\";\n"],
+  "mappings": "AAAA,SAAS,eAAe;",
+  "names": []
+}

package/components/BasicMap/BasicMap.js

@@ -1,416 +1,296 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { defaults as defaultInteractions } from 'ol/interaction';
-import { equals } from 'ol/extent';
-import OLMap from 'ol/Map';
-import OLCollection from 'ol/Collection';
-import View from 'ol/View';
-import { unByKey } from 'ol/Observable';
-import Interaction from 'ol/interaction/Interaction';
-import { Layer } from 'mobility-toolbox-js/ol';
-import ResizeHandler from '../ResizeHandler';
-
-var propTypes = {
+import OLCollection from "ol/Collection";
+import { equals } from "ol/extent";
+import { defaults as defaultInteractions } from "ol/interaction";
+import Interaction from "ol/interaction/Interaction";
+import Layer from "ol/layer/Layer";
+import OLMap from "ol/Map";
+import { unByKey } from "ol/Observable";
+import View from "ol/View";
+import PropTypes from "prop-types";
+import React, { PureComponent } from "react";
+const propTypes = {
   /** Map animation options */
   animationOptions: PropTypes.shape({
     center: PropTypes.arrayOf(PropTypes.number),
     resolution: PropTypes.number,
-    zoom: PropTypes.number,
+    zoom: PropTypes.number
   }),
-
+  /** HTML aria-label. */
+  ariaLabel: PropTypes.string,
   /** Center of the [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html). */
   center: PropTypes.arrayOf(PropTypes.number),
-
   /** Class name of the map container */
   className: PropTypes.string,
-
   /** Map extent */
   extent: PropTypes.arrayOf(PropTypes.number),
-
+  /**
+   * Optional options to pass on feature click. Passed to ol's 'getFeaturesAtPixel' method.
+   * https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#getFeaturesAtPixel
+   */
+  featuresClickOptions: PropTypes.shape({
+    checkWrapped: PropTypes.bool,
+    hitTolerance: PropTypes.number,
+    layerFilter: PropTypes.func
+  }),
   /** Openlayers [fit options](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit) when extent is updated */
   fitOptions: PropTypes.object,
-
   /** Array of [ol/interaction](https://openlayers.org/en/latest/apidoc/module-ol_interaction_Interaction-Interaction.html). */
   interactions: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.instanceOf(Interaction)),
-    PropTypes.instanceOf(OLCollection) ]),
-
-  /** Array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers) to display. */
+    PropTypes.instanceOf(OLCollection)
+  ]),
+  /** Array of Openlayers layers */
   layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),
-
   /** An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html). */
   map: PropTypes.instanceOf(OLMap),
-
   /**
    * Callback when a [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) is clicked.
    * @param {OLFeature[]} features An array of [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).
    * @param {ol.MapBrowserEvent} event The singleclick [ol/MapBrowserEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:singleclick).
    */
   onFeaturesClick: PropTypes.func,
-
-  /**
-   * Optional options to pass on feature click. Passed to ol's 'getFeaturesAtPixel' method.
-   * https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#getFeaturesAtPixel
-   */
-  featuresClickOptions: PropTypes.shape({
-    layerFilter: PropTypes.func,
-    hitTolerance: PropTypes.number,
-    checkWrapped: PropTypes.bool,
-  }),
-
   /**
    * Callback when a [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) is hovered.
    * @param {OLFeature[]} features An array of [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).
    * @param {ol.MapBrowserEvent} event The pointermove [ol/MapBrowserEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:pointermove).
    */
   onFeaturesHover: PropTypes.func,
-
   /**
    * Callback when the map was moved.
    * @param {ol.MapEvent} event The movend [ol/MapEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:moveend).
    */
   onMapMoved: PropTypes.func,
-
   /** Map resolution */
   resolution: PropTypes.number,
-
-  /** The tabIndex of the map. */
-  tabIndex: PropTypes.number,
-
   /** The style of the map. */
   style: PropTypes.object,
-
-  /** HTML aria-label. */
-  ariaLabel: PropTypes.string,
-
+  /** The tabIndex of the map. */
+  tabIndex: PropTypes.number,
   /** [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html) constructor options */
   viewOptions: PropTypes.shape({
-    minZoom: PropTypes.number,
-    maxZoom: PropTypes.number,
     extent: PropTypes.array,
-    projection: PropTypes.string,
+    maxZoom: PropTypes.number,
+    minZoom: PropTypes.number,
+    projection: PropTypes.string
   }),
-
   /** Map zoom level */
-  zoom: PropTypes.number,
+  zoom: PropTypes.number
 };
-
-var defaultProps = {
-  animationOptions: undefined,
+const defaultProps = {
+  animationOptions: void 0,
+  ariaLabel: "map",
   center: [0, 0],
-  className: 'rs-map',
-  extent: undefined,
+  className: "rs-map",
+  extent: void 0,
+  featuresClickOptions: {
+    hitTolerance: 0
+  },
   fitOptions: {
-    duration: 1000,
-    padding: [20, 20, 20, 20],
+    duration: 1e3,
     maxZoom: 23,
+    padding: [20, 20, 20, 20]
   },
-  style: undefined,
   interactions: null,
   layers: [],
   map: null,
-  onFeaturesClick: undefined,
-  featuresClickOptions: {
-    hitTolerance: 0,
-  },
-  onFeaturesHover: undefined,
-  onMapMoved: undefined,
-  resolution: undefined,
-  tabIndex: undefined,
-  ariaLabel: 'map',
+  onFeaturesClick: void 0,
+  onFeaturesHover: void 0,
+  onMapMoved: void 0,
+  resolution: void 0,
+  style: void 0,
+  tabIndex: void 0,
   viewOptions: {
-    minZoom: 0,
+    extent: void 0,
     maxZoom: 22,
-    extent: undefined,
-    projection: 'EPSG:3857',
+    minZoom: 0,
+    projection: "EPSG:3857"
   },
-  zoom: 1,
+  zoom: 1
 };
-
-/**
- * The BasicMap component renders an [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
- *
- * The map's view is created with the following parameters for the view:
- *  - projection: 'EPSG:3857'
- *  - zoom: 0
- *  - minZoom: 0
- *  - maxZoom: 22
- *
- * These options can be overridden using the viewOptions property.
- */
-var BasicMap = /*@__PURE__*/(function (PureComponent) {
-  function BasicMap(props) {
-    PureComponent.call(this, props);
-    var ref = this.props;
-    var map = ref.map;
-    var interactions = ref.interactions;
-
-    this.map =
-      map ||
-      new OLMap({
-        controls: [],
-        interactions:
-          interactions ||
-          defaultInteractions({
-            altShiftDragRotate: false,
-            pinchRotate: false,
-          }),
-      });
-
+class BasicMap extends PureComponent {
+  constructor(props) {
+    super(props);
+    const { interactions, map } = this.props;
+    this.map = map || new OLMap({
+      controls: [],
+      interactions: interactions || defaultInteractions({
+        altShiftDragRotate: false,
+        pinchRotate: false
+      })
+    });
     this.state = {
-      node: null,
+      node: null
     };
-
-    this.layers = [];
     this.moveEndRef = null;
     this.singleClickRef = null;
     this.pointerMoveRef = null;
     this.setNode = this.setNode.bind(this);
   }
-
-  if ( PureComponent ) BasicMap.__proto__ = PureComponent;
-  BasicMap.prototype = Object.create( PureComponent && PureComponent.prototype );
-  BasicMap.prototype.constructor = BasicMap;
-
-  BasicMap.prototype.componentDidMount = function componentDidMount () {
-    var ref =
-      this.props;
-    var layers = ref.layers;
-    var extent = ref.extent;
-    var viewOptions = ref.viewOptions;
-    var center = ref.center;
-    var zoom = ref.zoom;
-    var resolution = ref.resolution;
-    var ref$1 = this.state;
-    var node = ref$1.node;
+  componentDidMount() {
+    const { center, extent, layers, resolution, viewOptions, zoom } = this.props;
+    const { node } = this.state;
     this.map.setTarget(node);
-
-    // We set the view here otherwise the map is not correctly zoomed.
-    this.map.setView(new View(Object.assign({}, viewOptions, {center: center, zoom: zoom, resolution: resolution})));
-
-    // // Since ol 6.1.0 touch-action is set to auto and creates a bad navigation experience on mobile,
-    // // so we have to force it to none for mobile.
-    // // https://github.com/openlayers/openlayers/pull/10187/files
-    var viewPort = this.map.getViewport();
-    viewPort.style.touchAction = 'none';
-    viewPort.style.msTouchAction = 'none';
-    viewPort.setAttribute('touch-action', 'none');
-
-    // Fit only work if the map has a size.
+    this.map.setView(new View({ ...viewOptions, center, resolution, zoom }));
+    const viewPort = this.map.getViewport();
+    viewPort.style.touchAction = "none";
+    viewPort.style.msTouchAction = "none";
+    viewPort.setAttribute("touch-action", "none");
     if (this.map.getSize() && extent) {
       this.map.getView().fit(extent);
     }
-
     this.setLayers(layers);
     this.listenMoveEnd();
     this.listenSingleClick();
     this.listenPointerMove();
-  };
-
-  BasicMap.prototype.componentDidUpdate = function componentDidUpdate (prevProps, prevState) {
-    var ref = this.props;
-    var animationOptions = ref.animationOptions;
-    var center = ref.center;
-    var extent = ref.extent;
-    var fitOptions = ref.fitOptions;
-    var layers = ref.layers;
-    var resolution = ref.resolution;
-    var viewOptions = ref.viewOptions;
-    var zoom = ref.zoom;
-    var onMapMoved = ref.onMapMoved;
-    var onFeaturesClick = ref.onFeaturesClick;
-    var onFeaturesHover = ref.onFeaturesHover;
-    var ref$1 = this.state;
-    var node = ref$1.node;
-
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      animationOptions,
+      center,
+      extent,
+      fitOptions,
+      layers,
+      onFeaturesClick,
+      onFeaturesHover,
+      onMapMoved,
+      resolution,
+      viewOptions,
+      zoom
+    } = this.props;
+    const { node } = this.state;
     if (prevState.node !== node) {
+      if (zoom) {
+        this.map.getView().setZoom(zoom);
+      }
+      if (resolution) {
+        this.map.getView().setResolution(resolution);
+      }
       this.map.setTarget(node);
-
-      // When the node is set we reinitialize the extent with the extent property.
       if (!prevState.node && node && extent) {
         this.map.getView().fit(extent);
       }
     }
-
     if (prevProps.layers !== layers) {
       this.setLayers(layers, prevProps.layers);
     }
-
-    // Creates a new view if necessary before updating the others prop.
-    if (
-      viewOptions &&
-      JSON.stringify(viewOptions) !== JSON.stringify(prevProps.viewOptions)
-    ) {
-      // Re-create a view, ol doesn't provide any method to setExtent of view.
+    if (viewOptions && JSON.stringify(viewOptions) !== JSON.stringify(prevProps.viewOptions)) {
       this.map.setView(
-        new View(Object.assign({}, viewOptions,
-          {center: center,
-          resolution: resolution,
-          zoom: zoom}))
+        new View({
+          ...viewOptions,
+          center,
+          resolution,
+          zoom
+        })
       );
     }
-
-    var view = this.map.getView();
-
+    const view = this.map.getView();
     if (animationOptions && prevProps.animationOptions !== animationOptions) {
       view.animate(animationOptions);
     }
-
     if (prevProps.center !== center) {
       view.setCenter(center);
     }
-
     if (zoom !== prevProps.zoom) {
       view.setZoom(zoom);
     }
-
     if (resolution !== prevProps.resolution) {
       view.setResolution(resolution);
     }
-
     if (extent && !equals(extent, prevProps.extent || [])) {
       view.fit(extent, fitOptions);
     }
-
     if (onMapMoved !== prevProps.onMapMoved) {
       this.listenMoveEnd();
     }
-
     if (onFeaturesClick !== prevProps.onFeaturesClick) {
       this.listenSingleClick();
     }
-
     if (onFeaturesHover !== prevProps.onFeaturesHover) {
       this.listenPointerMove();
     }
-  };
-
-  BasicMap.prototype.componentWillUnmount = function componentWillUnmount () {
+  }
+  componentWillUnmount() {
     unByKey([this.moveEndRef, this.singleClickRef, this.pointerMoveRef]);
-  };
-
-  BasicMap.prototype.setNode = function setNode (node) {
-    this.setState({ node: node });
-  };
-
-  BasicMap.prototype.setLayers = function setLayers (layers, prevLayers) {
-    if ( layers === void 0 ) layers = [];
-    if ( prevLayers === void 0 ) prevLayers = [];
-
-    for (var i = 0; i < prevLayers.length; i += 1) {
-      this.terminateLayer(prevLayers[i]);
-    }
-    for (var i$1 = 0; i$1 < layers.length; i$1 += 1) {
-      this.initLayer(layers[i$1]);
-    }
-    this.layers = layers;
-  };
-
-  BasicMap.prototype.initLayer = function initLayer (layer) {
-    layer.init(this.map);
-    if (
-      layer.olLayer &&
-      this.map.getLayers() &&
-      !this.map.getLayers().getArray().includes(layer.olLayer)
-    ) {
-      this.map.addLayer(layer.olLayer);
+  }
+  initLayer(layer) {
+    if (!this.map?.getLayers()?.getArray()?.includes(layer)) {
+      this.map.addLayer(layer);
     }
-    var layers = layer.children || [];
-    for (var i = 0; i < layers.length; i += 1) {
+    const layers = layer.get("children") || layer.children || [];
+    for (let i = 0; i < layers.length; i += 1) {
       this.initLayer(layers[i]);
     }
-  };
-
-  BasicMap.prototype.terminateLayer = function terminateLayer (layer) {
-    if (
-      layer.olLayer &&
-      this.map.getLayers() &&
-      this.map.getLayers().getArray().includes(layer.olLayer)
-    ) {
-      this.map.removeLayer(layer.olLayer);
-    }
-    layer.terminate(this.map);
-    var layers = layer.children || [];
-    for (var i = 0; i < layers.length; i += 1) {
-      this.terminateLayer(layers[i]);
-    }
-  };
-
-  BasicMap.prototype.listenMoveEnd = function listenMoveEnd () {
-    var ref = this.props;
-    var onMapMoved = ref.onMapMoved;
+  }
+  listenMoveEnd() {
+    const { onMapMoved } = this.props;
     unByKey(this.moveEndRef);
-
     if (!onMapMoved) {
       return;
     }
-
-    this.moveEndRef = this.map.on('moveend', function (evt) {
+    this.moveEndRef = this.map.on("moveend", (evt) => {
       return onMapMoved(evt);
     });
-  };
-
-  BasicMap.prototype.listenSingleClick = function listenSingleClick () {
-    var ref = this.props;
-    var onFeaturesClick = ref.onFeaturesClick;
-    var featuresClickOptions = ref.featuresClickOptions;
+  }
+  listenPointerMove() {
+    const { onFeaturesHover } = this.props;
+    unByKey(this.pointerMoveRef);
+    if (!onFeaturesHover) {
+      return;
+    }
+    this.pointerMoveRef = this.map.on("pointermove", (evt) => {
+      const features = evt.map.getFeaturesAtPixel(evt.pixel);
+      onFeaturesHover(features || [], evt);
+    });
+  }
+  listenSingleClick() {
+    const { featuresClickOptions, onFeaturesClick } = this.props;
     unByKey(this.singleClickRef);
-
     if (!onFeaturesClick) {
       return;
     }
-
-    this.singleClickRef = this.map.on('singleclick', function (evt) {
-      var features = evt.map.getFeaturesAtPixel(
+    this.singleClickRef = this.map.on("singleclick", (evt) => {
+      const features = evt.map.getFeaturesAtPixel(
         evt.pixel,
         featuresClickOptions
       );
       onFeaturesClick(features || [], evt);
     });
-  };
-
-  BasicMap.prototype.listenPointerMove = function listenPointerMove () {
-    var ref = this.props;
-    var onFeaturesHover = ref.onFeaturesHover;
-    unByKey(this.pointerMoveRef);
-
-    if (!onFeaturesHover) {
-      return;
-    }
-
-    this.pointerMoveRef = this.map.on('pointermove', function (evt) {
-      var features = evt.map.getFeaturesAtPixel(evt.pixel);
-      onFeaturesHover(features || [], evt);
-    });
-  };
-
-  BasicMap.prototype.render = function render () {
-    var this$1 = this;
-
-    var ref = this.props;
-    var className = ref.className;
-    var tabIndex = ref.tabIndex;
-    var ariaLabel = ref.ariaLabel;
-    var style = ref.style;
-    var ref$1 = this.state;
-    var node = ref$1.node;
-    return (
-      React.createElement( 'div', {
-        className: className, ref: this.setNode, role: "presentation", 'aria-label': ariaLabel, tabIndex: tabIndex, style: style },
-        React.createElement( ResizeHandler, {
-          maxHeightBrkpts: null, maxWidthBrkpts: null, observe: node, onResize: function () {
-            this$1.map.updateSize();
-          } })
-      )
+  }
+  render() {
+    const { ariaLabel, className, style, tabIndex } = this.props;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        className,
+        ref: this.setNode,
+        role: "presentation",
+        style,
+        tabIndex
+      }
     );
-  };
-
-  return BasicMap;
-}(PureComponent));
-
+  }
+  setLayers(layers = [], prevLayers = []) {
+    for (let i = 0; i < prevLayers.length; i += 1) {
+      this.terminateLayer(prevLayers[i]);
+    }
+    for (let i = 0; i < layers.length; i += 1) {
+      this.initLayer(layers[i]);
+    }
+  }
+  setNode(node) {
+    this.setState({ node });
+  }
+  terminateLayer(layer) {
+    const layers = layer.get("children") || layer.children || [];
+    for (let i = 0; i < layers.length; i += 1) {
+      this.terminateLayer(layers[i]);
+    }
+    if (this.map?.getLayers()?.getArray()?.includes(layer)) {
+      this.map.removeLayer(layer);
+    }
+  }
+}
 BasicMap.propTypes = propTypes;
 BasicMap.defaultProps = defaultProps;
-
 export default BasicMap;
-
-//# sourceMappingURL=BasicMap.js.map