react-spatial 1.12.0 → 1.12.1

package/components/Permalink/Permalink.js

@@ -1,9 +1,13 @@
-import { PureComponent } from "react";
-import PropTypes from "prop-types";
+import { getLayersAsFlatArray, Layer } from "mobility-toolbox-js/ol";
 import OLMap from "ol/Map";
 import { unByKey } from "ol/Observable";
-import { Layer, getLayersAsFlatArray } from "mobility-toolbox-js/ol";
+import PropTypes from "prop-types";
+import { PureComponent } from "react";
 const propTypes = {
+  /**
+   * Maximum number of decimals allowed for coordinates.
+   */
+  coordinateDecimals: PropTypes.number,
   /**
    * Either 'react-router' history object:
    * https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md<br>
@@ -14,21 +18,13 @@ const propTypes = {
     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.
+   * 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
    */
-  coordinateDecimals: PropTypes.number,
+  isBaseLayer: PropTypes.func,
   /**
    * Determine if the layer is hidden in the permalink or not.
    *
@@ -38,13 +34,17 @@ const propTypes = {
    */
   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
+   * Layers provider.
    */
-  isBaseLayer: PropTypes.func,
+  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,
   /**
    * Custom function to be called when the permalink is updated.
    * This property has priority over the history parameter and window.history.replaceState calls.
@@ -52,18 +52,18 @@ const propTypes = {
   replace: PropTypes.func
 };
 const defaultProps = {
-  history: null,
-  replace: null,
-  layers: [],
-  map: null,
-  params: {},
   coordinateDecimals: 2,
+  history: null,
+  isBaseLayer: (layer) => {
+    return layer.get("isBaseLayer");
+  },
   isLayerHidden: () => {
     return false;
   },
-  isBaseLayer: (layer) => {
-    return layer.get("isBaseLayer");
-  }
+  layers: [],
+  map: null,
+  params: {},
+  replace: null
 };
 class Permalink extends PureComponent {
   constructor(props) {
@@ -72,7 +72,7 @@ class Permalink extends PureComponent {
     this.onPropertyChangeKeys = [];
   }
   componentDidMount() {
-    const { map, layers, isLayerHidden, isBaseLayer } = this.props;
+    const { isBaseLayer, isLayerHidden, layers, map } = this.props;
     if (map) {
       this.moveEndRef = map.on("moveend", () => {
         this.onMapMoved();
@@ -117,7 +117,7 @@ class Permalink extends PureComponent {
     }
   }
   componentDidUpdate(prevProps, prevState) {
-    const { map, layers } = this.props;
+    const { layers, map } = this.props;
     const { revision } = this.state;
     if (layers !== prevProps.layers || revision !== prevState.revision) {
       this.updateLayers();
@@ -153,12 +153,46 @@ class Permalink extends PureComponent {
       z: +`${Math.round(`${parseFloat(mapView.getZoom())}e+2`)}e-2`
     });
   }
+  render() {
+    return null;
+  }
   roundCoord(val) {
     const { coordinateDecimals } = this.props;
     return parseFloat(val.toFixed(coordinateDecimals));
   }
+  updateHistory() {
+    const { history, params, replace } = this.props;
+    const oldParams = new URLSearchParams(window.location.search);
+    const parameters = {
+      ...Object.fromEntries(oldParams.entries()),
+      ...this.state,
+      ...params
+    };
+    delete parameters.revision;
+    Object.entries(parameters).forEach(([key, value]) => {
+      if (value === void 0 || value === null) {
+        delete parameters[key];
+      }
+    });
+    const qStr = new URLSearchParams(parameters).toString().replace(/%2C/g, ",");
+    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(
+          void 0,
+          void 0,
+          `${search}${hash || ""}`
+        );
+      }
+    }
+  }
   updateLayers() {
-    const { layers, isLayerHidden, isBaseLayer } = this.props;
+    const { isBaseLayer, isLayerHidden, layers } = this.props;
     const { revision } = this.state;
     unByKey(this.onPropertyChangeKeys);
     this.onPropertyChangeKeys = getLayersAsFlatArray(layers).map((layer) => {
@@ -203,43 +237,9 @@ class Permalink extends PureComponent {
       }).join();
     }
     this.setState({
-      layers: layersParam,
-      baselayers: baseLayersParam
-    });
-  }
-  updateHistory() {
-    const { params, history, replace } = this.props;
-    const oldParams = new URLSearchParams(window.location.search);
-    const parameters = {
-      ...Object.fromEntries(oldParams.entries()),
-      ...this.state,
-      ...params
-    };
-    delete parameters.revision;
-    Object.entries(parameters).forEach(([key, value]) => {
-      if (value === void 0 || value === null) {
-        delete parameters[key];
-      }
+      baselayers: baseLayersParam,
+      layers: layersParam
     });
-    const qStr = new URLSearchParams(parameters).toString().replace(/%2C/g, ",");
-    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(
-          void 0,
-          void 0,
-          `${search}${hash || ""}`
-        );
-      }
-    }
-  }
-  render() {
-    return null;
   }
 }
 Permalink.propTypes = propTypes;

package/components/Permalink/Permalink.js.map

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

package/components/Popup/Popup.js

@@ -1,19 +1,19 @@
-import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
-import { MdClose } from "react-icons/md";
-import OLMap from "ol/Map";
-import Feature from "ol/Feature";
 import { getCenter } from "ol/extent";
+import Feature from "ol/Feature";
+import OLMap from "ol/Map";
 import { unByKey } from "ol/Observable";
+import PropTypes from "prop-types";
+import React, { PureComponent } from "react";
+import { MdClose } from "react-icons/md";
 const propTypes = {
   /**
    * React Children.
    */
   children: PropTypes.node.isRequired,
   /**
-   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+   * Class name of the popup.
    */
-  map: PropTypes.instanceOf(OLMap).isRequired,
+  className: PropTypes.string,
   /**
    * An [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).
    */
@@ -22,6 +22,14 @@ const propTypes = {
    * Popup title.
    */
   header: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  /**
+   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+   */
+  map: PropTypes.instanceOf(OLMap).isRequired,
+  /**
+   * Function triggered on close button click.
+   */
+  onCloseClick: PropTypes.func,
   /**
    * If true, the popup is panned in the map's viewport.
    */
@@ -36,85 +44,77 @@ const propTypes = {
    */
   popupCoordinate: PropTypes.arrayOf(PropTypes.number),
   /**
-   * Class name of the popup.
-   */
-  className: PropTypes.string,
-  /**
-   * Title HTML attributes.
-   */
-  titles: PropTypes.shape({
-    closeButton: PropTypes.string
-  }),
-  /**
-   * Function triggered on close button click.
+   * Render the close button
    */
-  onCloseClick: PropTypes.func,
+  renderCloseButton: PropTypes.func,
   /**
-   * HTML tabIndex attribute.
+   * Render the footer
    */
-  tabIndex: PropTypes.string,
+  renderFooter: PropTypes.func,
   /**
    * Render the header
    */
   renderHeader: PropTypes.func,
   /**
-   * Render the close button
+   * HTML tabIndex attribute.
    */
-  renderCloseButton: PropTypes.func,
+  tabIndex: PropTypes.string,
   /**
-   * Render the footer
+   * Title HTML attributes.
    */
-  renderFooter: PropTypes.func
+  titles: PropTypes.shape({
+    closeButton: PropTypes.string
+  })
 };
 const defaultProps = {
-  header: null,
+  className: "rs-popup",
   feature: null,
+  header: null,
+  onCloseClick: () => {
+  },
   panIntoView: false,
   panRect: null,
   popupCoordinate: null,
-  className: "rs-popup",
-  tabIndex: "",
-  titles: { closeButton: "Close" },
-  onCloseClick: () => {
-  },
-  renderHeader: null,
   renderCloseButton: null,
   renderFooter: () => {
     return null;
-  }
+  },
+  renderHeader: null,
+  tabIndex: "",
+  titles: { closeButton: "Close" }
 };
 class Popup extends PureComponent {
-  static renderHeader(props) {
-    const { header, renderCloseButton } = props;
-    return /* @__PURE__ */ React.createElement("div", { className: "rs-popup-header" }, header, (renderCloseButton || Popup.renderCloseButton)(props));
+  constructor(props) {
+    super(props);
+    this.state = {
+      left: 0,
+      popupElement: null,
+      top: 0
+    };
+    this.postrenderKey = null;
   }
   static renderCloseButton({ onCloseClick, titles }) {
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        role: "button",
-        tabIndex: 0,
-        className: "rs-popup-close-bt",
-        title: titles.closeButton,
         "aria-label": titles.closeButton,
+        className: "rs-popup-close-bt",
         onClick: () => {
           return onCloseClick();
         },
         onKeyPress: (evt) => {
           return evt.which === 13 && onCloseClick();
-        }
+        },
+        role: "button",
+        tabIndex: 0,
+        title: titles.closeButton
       },
       /* @__PURE__ */ React.createElement(MdClose, { focusable: false })
     );
   }
-  constructor(props) {
-    super(props);
-    this.state = {
-      popupElement: null,
-      top: 0,
-      left: 0
-    };
-    this.postrenderKey = null;
+  static renderHeader(props) {
+    const { header, renderCloseButton } = props;
+    return /* @__PURE__ */ React.createElement("div", { className: "rs-popup-header" }, header, (renderCloseButton || Popup.renderCloseButton)(props));
   }
   componentDidMount() {
     const { map } = this.props;
@@ -160,32 +160,16 @@ class Popup extends PureComponent {
       map.getView().animate({ center: newCenter, duration: 500 });
     }
   }
-  updatePixelPosition() {
-    const { map, feature, popupCoordinate } = this.props;
-    let coord = popupCoordinate;
-    if (feature && !coord) {
-      coord = getCenter(feature.getGeometry().getExtent());
-    }
-    if (coord) {
-      const pos = map.getPixelFromCoordinate(coord);
-      if (pos && pos.length === 2) {
-        this.setState({
-          left: pos[0],
-          top: pos[1]
-        });
-      }
-    }
-  }
   render() {
     const {
-      feature,
-      popupCoordinate,
       children,
+      feature,
       header,
-      titles,
-      tabIndex,
-      renderHeader,
+      popupCoordinate,
       renderFooter,
+      renderHeader,
+      tabIndex,
+      titles,
       ...other
     } = this.props;
     if (!feature && !popupCoordinate) {
@@ -197,7 +181,7 @@ class Popup extends PureComponent {
     delete other.header;
     delete other.onCloseClick;
     delete other.renderCloseButton;
-    const { top, left } = this.state;
+    const { left, top } = this.state;
     const key = feature ? feature.getId() : popupCoordinate.join();
     return /* @__PURE__ */ React.createElement(
       "div",
@@ -213,11 +197,11 @@ class Popup extends PureComponent {
         "div",
         {
           className: "rs-popup-container",
-          tabIndex,
           key,
           ref: (popupElement) => {
             this.setState({ popupElement });
-          }
+          },
+          tabIndex
         },
         (renderHeader || Popup.renderHeader)(this.props),
         /* @__PURE__ */ React.createElement("div", { className: "rs-popup-body" }, children),
@@ -225,6 +209,22 @@ class Popup extends PureComponent {
       )
     );
   }
+  updatePixelPosition() {
+    const { feature, map, popupCoordinate } = this.props;
+    let coord = popupCoordinate;
+    if (feature && !coord) {
+      coord = getCenter(feature.getGeometry().getExtent());
+    }
+    if (coord) {
+      const pos = map.getPixelFromCoordinate(coord);
+      if (pos && pos.length === 2) {
+        this.setState({
+          left: pos[0],
+          top: pos[1]
+        });
+      }
+    }
+  }
 }
 Popup.propTypes = propTypes;
 Popup.defaultProps = defaultProps;

package/components/Popup/Popup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Popup/Popup.js"],
-  "sourcesContent": ["import React, { PureComponent } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { MdClose } from \"react-icons/md\";\nimport OLMap from \"ol/Map\";\nimport Feature from \"ol/Feature\";\nimport { getCenter } from \"ol/extent\";\nimport { unByKey } from \"ol/Observable\";\n\nconst propTypes = {\n  /**\n   * React Children.\n   */\n  children: PropTypes.node.isRequired,\n\n  /**\n   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n   */\n  map: PropTypes.instanceOf(OLMap).isRequired,\n\n  /**\n   * An [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).\n   */\n  feature: PropTypes.instanceOf(Feature),\n\n  /**\n   * Popup title.\n   */\n  header: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n\n  /**\n   * If true, the popup is panned in the map's viewport.\n   */\n  panIntoView: PropTypes.bool,\n\n  /**\n   * Custom BoundingClientRect to fit popup into.\n   * Use if panIntoView is true. Default is the map's BoundingClientRect.\n   */\n  panRect: PropTypes.objectOf(PropTypes.number),\n\n  /**\n   * Coordinate position of the popup.\n   */\n  popupCoordinate: PropTypes.arrayOf(PropTypes.number),\n\n  /**\n   * Class name of the popup.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Title HTML attributes.\n   */\n  titles: PropTypes.shape({\n    closeButton: PropTypes.string,\n  }),\n\n  /**\n   * Function triggered on close button click.\n   */\n  onCloseClick: PropTypes.func,\n\n  /**\n   * HTML tabIndex attribute.\n   */\n  tabIndex: PropTypes.string,\n\n  /**\n   * Render the header\n   */\n  renderHeader: PropTypes.func,\n\n  /**\n   * Render the close button\n   */\n  renderCloseButton: PropTypes.func,\n\n  /**\n   * Render the footer\n   */\n  renderFooter: PropTypes.func,\n};\n\nconst defaultProps = {\n  header: null,\n  feature: null,\n  panIntoView: false,\n  panRect: null,\n  popupCoordinate: null,\n  className: \"rs-popup\",\n  tabIndex: \"\",\n  titles: { closeButton: \"Close\" },\n  onCloseClick: () => {},\n  renderHeader: null,\n  renderCloseButton: null,\n  renderFooter: () => {\n    return null;\n  },\n};\n\n/**\n * The Popup component renders a popup over an\n * [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html)\n * on click.\n */\nclass Popup extends PureComponent {\n  static renderHeader(props) {\n    const { header, renderCloseButton } = props;\n    return (\n      <div className=\"rs-popup-header\">\n        {header}\n        {(renderCloseButton || Popup.renderCloseButton)(props)}\n      </div>\n    );\n  }\n\n  static renderCloseButton({ onCloseClick, titles }) {\n    return (\n      <div\n        role=\"button\"\n        tabIndex={0}\n        className=\"rs-popup-close-bt\"\n        title={titles.closeButton}\n        aria-label={titles.closeButton}\n        onClick={() => {\n          return onCloseClick();\n        }}\n        onKeyPress={(evt) => {\n          return evt.which === 13 && onCloseClick();\n        }}\n      >\n        <MdClose focusable={false} />\n      </div>\n    );\n  }\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      popupElement: null,\n      top: 0,\n      left: 0,\n    };\n    this.postrenderKey = null;\n  }\n\n  componentDidMount() {\n    const { map } = this.props;\n    this.updatePixelPosition();\n\n    this.postrenderKey = map.on(\"postrender\", () => {\n      this.updatePixelPosition();\n    });\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    const { feature, panIntoView, popupCoordinate } = this.props;\n    const { popupElement } = this.state;\n    if (\n      feature !== prevProps.feature ||\n      popupCoordinate !== prevProps.popupCoordinate\n    ) {\n      this.updatePixelPosition();\n    }\n\n    if (\n      panIntoView &&\n      popupElement &&\n      popupElement !== prevState.popupElement\n    ) {\n      this.panIntoView();\n    }\n  }\n\n  componentWillUnmount() {\n    unByKey(this.postrenderKey);\n  }\n\n  panIntoView() {\n    const { map, panRect } = this.props;\n    const { popupElement } = this.state;\n\n    const mapRect = panRect || map.getTarget().getBoundingClientRect();\n    const popupRect = popupElement.getBoundingClientRect();\n    const [x, y] = map.getView().getCenter();\n    const res = map.getView().getResolution();\n    const newCenter = [x, y];\n\n    if (mapRect.top > popupRect.top) {\n      newCenter[1] = y + (mapRect.top - popupRect.top) * res;\n    }\n\n    if (mapRect.left > popupRect.left) {\n      newCenter[0] = x - (mapRect.left - popupRect.left) * res;\n    }\n\n    if (mapRect.right < popupRect.right) {\n      newCenter[0] = x + (popupRect.right - mapRect.right) * res;\n    }\n\n    if (mapRect.bottom < popupRect.bottom) {\n      newCenter[1] = y - (popupRect.bottom - mapRect.bottom) * res;\n    }\n\n    if (newCenter[0] !== x || newCenter[1] !== y) {\n      map.getView().animate({ center: newCenter, duration: 500 });\n    }\n  }\n\n  updatePixelPosition() {\n    const { map, feature, popupCoordinate } = this.props;\n    let coord = popupCoordinate;\n\n    if (feature && !coord) {\n      coord = getCenter(feature.getGeometry().getExtent());\n    }\n\n    if (coord) {\n      const pos = map.getPixelFromCoordinate(coord);\n\n      if (pos && pos.length === 2) {\n        this.setState({\n          left: pos[0],\n          top: pos[1],\n        });\n      }\n    }\n  }\n\n  render() {\n    const {\n      feature,\n      popupCoordinate,\n      children,\n      header,\n      titles,\n      tabIndex,\n      renderHeader,\n      renderFooter,\n      ...other\n    } = this.props;\n\n    if (!feature && !popupCoordinate) {\n      return null;\n    }\n\n    delete other.panIntoView;\n    delete other.panRect;\n    delete other.map;\n    delete other.header;\n    delete other.onCloseClick;\n    delete other.renderCloseButton;\n\n    const { top, left } = this.state;\n\n    // force re-render if the feature or the coordinate changes.\n    // this is needed to update the popupElement ref\n    const key = feature ? feature.getId() : popupCoordinate.join();\n    return (\n      <div\n        className=\"rs-popup\"\n        style={{\n          left,\n          top,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...other}\n      >\n        <div\n          className=\"rs-popup-container\"\n          tabIndex={tabIndex}\n          key={key}\n          ref={(popupElement) => {\n            this.setState({ popupElement });\n          }}\n        >\n          {(renderHeader || Popup.renderHeader)(this.props)}\n          <div className=\"rs-popup-body\">{children}</div>\n          {renderFooter(this.props)}\n        </div>\n      </div>\n    );\n  }\n}\n\nPopup.propTypes = propTypes;\nPopup.defaultProps = defaultProps;\n\nexport default Popup;\n"],
-  "mappings": "AAAA,OAAO,SAAS,qBAAqB;AACrC,OAAO,eAAe;AAEtB,SAAS,eAAe;AACxB,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAExB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,EAIhB,UAAU,UAAU,KAAK;AAAA;AAAA;AAAA;AAAA,EAKzB,KAAK,UAAU,WAAW,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA,EAKjC,SAAS,UAAU,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA,EAKrC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAKjE,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAMvB,SAAS,UAAU,SAAS,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA,EAK5C,iBAAiB,UAAU,QAAQ,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA,EAKnD,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,EAKrB,QAAQ,UAAU,MAAM;AAAA,IACtB,aAAa,UAAU;AAAA,EACzB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKD,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAKxB,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,EAKpB,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAKxB,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA,EAK7B,cAAc,UAAU;AAC1B;AAEA,MAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ,EAAE,aAAa,QAAQ;AAAA,EAC/B,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,cAAc,MAAM;AAClB,WAAO;AAAA,EACT;AACF;AAOA,MAAM,cAAc,cAAc;AAAA,EAChC,OAAO,aAAa,OAAO;AACzB,UAAM,EAAE,QAAQ,kBAAkB,IAAI;AACtC,WACE,oCAAC,SAAI,WAAU,qBACZ,SACC,qBAAqB,MAAM,mBAAmB,KAAK,CACvD;AAAA,EAEJ;AAAA,EAEA,OAAO,kBAAkB,EAAE,cAAc,OAAO,GAAG;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAU;AAAA,QACV,OAAO,OAAO;AAAA,QACd,cAAY,OAAO;AAAA,QACnB,SAAS,MAAM;AACb,iBAAO,aAAa;AAAA,QACtB;AAAA,QACA,YAAY,CAAC,QAAQ;AACnB,iBAAO,IAAI,UAAU,MAAM,aAAa;AAAA,QAC1C;AAAA;AAAA,MAEA,oCAAC,WAAQ,WAAW,OAAO;AAAA,IAC7B;AAAA,EAEJ;AAAA,EAEA,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,QAAQ;AAAA,MACX,cAAc;AAAA,MACd,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AACA,SAAK,gBAAgB;AAAA,EACvB;AAAA,EAEA,oBAAoB;AAClB,UAAM,EAAE,IAAI,IAAI,KAAK;AACrB,SAAK,oBAAoB;AAEzB,SAAK,gBAAgB,IAAI,GAAG,cAAc,MAAM;AAC9C,WAAK,oBAAoB;AAAA,IAC3B,CAAC;AAAA,EACH;AAAA,EAEA,mBAAmB,WAAW,WAAW;AACvC,UAAM,EAAE,SAAS,aAAa,gBAAgB,IAAI,KAAK;AACvD,UAAM,EAAE,aAAa,IAAI,KAAK;AAC9B,QACE,YAAY,UAAU,WACtB,oBAAoB,UAAU,iBAC9B;AACA,WAAK,oBAAoB;AAAA,IAC3B;AAEA,QACE,eACA,gBACA,iBAAiB,UAAU,cAC3B;AACA,WAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,uBAAuB;AACrB,YAAQ,KAAK,aAAa;AAAA,EAC5B;AAAA,EAEA,cAAc;AACZ,UAAM,EAAE,KAAK,QAAQ,IAAI,KAAK;AAC9B,UAAM,EAAE,aAAa,IAAI,KAAK;AAE9B,UAAM,UAAU,WAAW,IAAI,UAAU,EAAE,sBAAsB;AACjE,UAAM,YAAY,aAAa,sBAAsB;AACrD,UAAM,CAAC,GAAG,CAAC,IAAI,IAAI,QAAQ,EAAE,UAAU;AACvC,UAAM,MAAM,IAAI,QAAQ,EAAE,cAAc;AACxC,UAAM,YAAY,CAAC,GAAG,CAAC;AAEvB,QAAI,QAAQ,MAAM,UAAU,KAAK;AAC/B,gBAAU,CAAC,IAAI,KAAK,QAAQ,MAAM,UAAU,OAAO;AAAA,IACrD;AAEA,QAAI,QAAQ,OAAO,UAAU,MAAM;AACjC,gBAAU,CAAC,IAAI,KAAK,QAAQ,OAAO,UAAU,QAAQ;AAAA,IACvD;AAEA,QAAI,QAAQ,QAAQ,UAAU,OAAO;AACnC,gBAAU,CAAC,IAAI,KAAK,UAAU,QAAQ,QAAQ,SAAS;AAAA,IACzD;AAEA,QAAI,QAAQ,SAAS,UAAU,QAAQ;AACrC,gBAAU,CAAC,IAAI,KAAK,UAAU,SAAS,QAAQ,UAAU;AAAA,IAC3D;AAEA,QAAI,UAAU,CAAC,MAAM,KAAK,UAAU,CAAC,MAAM,GAAG;AAC5C,UAAI,QAAQ,EAAE,QAAQ,EAAE,QAAQ,WAAW,UAAU,IAAI,CAAC;AAAA,IAC5D;AAAA,EACF;AAAA,EAEA,sBAAsB;AACpB,UAAM,EAAE,KAAK,SAAS,gBAAgB,IAAI,KAAK;AAC/C,QAAI,QAAQ;AAEZ,QAAI,WAAW,CAAC,OAAO;AACrB,cAAQ,UAAU,QAAQ,YAAY,EAAE,UAAU,CAAC;AAAA,IACrD;AAEA,QAAI,OAAO;AACT,YAAM,MAAM,IAAI,uBAAuB,KAAK;AAE5C,UAAI,OAAO,IAAI,WAAW,GAAG;AAC3B,aAAK,SAAS;AAAA,UACZ,MAAM,IAAI,CAAC;AAAA,UACX,KAAK,IAAI,CAAC;AAAA,QACZ,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AAET,QAAI,CAAC,WAAW,CAAC,iBAAiB;AAChC,aAAO;AAAA,IACT;AAEA,WAAO,MAAM;AACb,WAAO,MAAM;AACb,WAAO,MAAM;AACb,WAAO,MAAM;AACb,WAAO,MAAM;AACb,WAAO,MAAM;AAEb,UAAM,EAAE,KAAK,KAAK,IAAI,KAAK;AAI3B,UAAM,MAAM,UAAU,QAAQ,MAAM,IAAI,gBAAgB,KAAK;AAC7D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA,QAEC,GAAG;AAAA;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,KAAK,CAAC,iBAAiB;AACrB,iBAAK,SAAS,EAAE,aAAa,CAAC;AAAA,UAChC;AAAA;AAAA,SAEE,gBAAgB,MAAM,cAAc,KAAK,KAAK;AAAA,QAChD,oCAAC,SAAI,WAAU,mBAAiB,QAAS;AAAA,QACxC,aAAa,KAAK,KAAK;AAAA,MAC1B;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,MAAM,YAAY;AAClB,MAAM,eAAe;AAErB,eAAe;",
+  "sourcesContent": ["import { getCenter } from \"ol/extent\";\nimport Feature from \"ol/Feature\";\nimport OLMap from \"ol/Map\";\nimport { unByKey } from \"ol/Observable\";\nimport PropTypes from \"prop-types\";\nimport React, { PureComponent } from \"react\";\nimport { MdClose } from \"react-icons/md\";\n\nconst propTypes = {\n  /**\n   * React Children.\n   */\n  children: PropTypes.node.isRequired,\n\n  /**\n   * Class name of the popup.\n   */\n  className: PropTypes.string,\n\n  /**\n   * An [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).\n   */\n  feature: PropTypes.instanceOf(Feature),\n\n  /**\n   * Popup title.\n   */\n  header: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n\n  /**\n   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n   */\n  map: PropTypes.instanceOf(OLMap).isRequired,\n\n  /**\n   * Function triggered on close button click.\n   */\n  onCloseClick: PropTypes.func,\n\n  /**\n   * If true, the popup is panned in the map's viewport.\n   */\n  panIntoView: PropTypes.bool,\n\n  /**\n   * Custom BoundingClientRect to fit popup into.\n   * Use if panIntoView is true. Default is the map's BoundingClientRect.\n   */\n  panRect: PropTypes.objectOf(PropTypes.number),\n\n  /**\n   * Coordinate position of the popup.\n   */\n  popupCoordinate: PropTypes.arrayOf(PropTypes.number),\n\n  /**\n   * Render the close button\n   */\n  renderCloseButton: PropTypes.func,\n\n  /**\n   * Render the footer\n   */\n  renderFooter: PropTypes.func,\n\n  /**\n   * Render the header\n   */\n  renderHeader: PropTypes.func,\n\n  /**\n   * HTML tabIndex attribute.\n   */\n  tabIndex: PropTypes.string,\n\n  /**\n   * Title HTML attributes.\n   */\n  titles: PropTypes.shape({\n    closeButton: PropTypes.string,\n  }),\n};\n\nconst defaultProps = {\n  className: \"rs-popup\",\n  feature: null,\n  header: null,\n  onCloseClick: () => {},\n  panIntoView: false,\n  panRect: null,\n  popupCoordinate: null,\n  renderCloseButton: null,\n  renderFooter: () => {\n    return null;\n  },\n  renderHeader: null,\n  tabIndex: \"\",\n  titles: { closeButton: \"Close\" },\n};\n\n/**\n * The Popup component renders a popup over an\n * [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html)\n * on click.\n */\nclass Popup extends PureComponent {\n  constructor(props) {\n    super(props);\n    this.state = {\n      left: 0,\n      popupElement: null,\n      top: 0,\n    };\n    this.postrenderKey = null;\n  }\n\n  static renderCloseButton({ onCloseClick, titles }) {\n    return (\n      <div\n        aria-label={titles.closeButton}\n        className=\"rs-popup-close-bt\"\n        onClick={() => {\n          return onCloseClick();\n        }}\n        onKeyPress={(evt) => {\n          return evt.which === 13 && onCloseClick();\n        }}\n        role=\"button\"\n        tabIndex={0}\n        title={titles.closeButton}\n      >\n        <MdClose focusable={false} />\n      </div>\n    );\n  }\n\n  static renderHeader(props) {\n    const { header, renderCloseButton } = props;\n    return (\n      <div className=\"rs-popup-header\">\n        {header}\n        {(renderCloseButton || Popup.renderCloseButton)(props)}\n      </div>\n    );\n  }\n\n  componentDidMount() {\n    const { map } = this.props;\n    this.updatePixelPosition();\n\n    this.postrenderKey = map.on(\"postrender\", () => {\n      this.updatePixelPosition();\n    });\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    const { feature, panIntoView, popupCoordinate } = this.props;\n    const { popupElement } = this.state;\n    if (\n      feature !== prevProps.feature ||\n      popupCoordinate !== prevProps.popupCoordinate\n    ) {\n      this.updatePixelPosition();\n    }\n\n    if (\n      panIntoView &&\n      popupElement &&\n      popupElement !== prevState.popupElement\n    ) {\n      this.panIntoView();\n    }\n  }\n\n  componentWillUnmount() {\n    unByKey(this.postrenderKey);\n  }\n\n  panIntoView() {\n    const { map, panRect } = this.props;\n    const { popupElement } = this.state;\n\n    const mapRect = panRect || map.getTarget().getBoundingClientRect();\n    const popupRect = popupElement.getBoundingClientRect();\n    const [x, y] = map.getView().getCenter();\n    const res = map.getView().getResolution();\n    const newCenter = [x, y];\n\n    if (mapRect.top > popupRect.top) {\n      newCenter[1] = y + (mapRect.top - popupRect.top) * res;\n    }\n\n    if (mapRect.left > popupRect.left) {\n      newCenter[0] = x - (mapRect.left - popupRect.left) * res;\n    }\n\n    if (mapRect.right < popupRect.right) {\n      newCenter[0] = x + (popupRect.right - mapRect.right) * res;\n    }\n\n    if (mapRect.bottom < popupRect.bottom) {\n      newCenter[1] = y - (popupRect.bottom - mapRect.bottom) * res;\n    }\n\n    if (newCenter[0] !== x || newCenter[1] !== y) {\n      map.getView().animate({ center: newCenter, duration: 500 });\n    }\n  }\n\n  render() {\n    const {\n      children,\n      feature,\n      header,\n      popupCoordinate,\n      renderFooter,\n      renderHeader,\n      tabIndex,\n      titles,\n      ...other\n    } = this.props;\n\n    if (!feature && !popupCoordinate) {\n      return null;\n    }\n\n    delete other.panIntoView;\n    delete other.panRect;\n    delete other.map;\n    delete other.header;\n    delete other.onCloseClick;\n    delete other.renderCloseButton;\n\n    const { left, top } = this.state;\n\n    // force re-render if the feature or the coordinate changes.\n    // this is needed to update the popupElement ref\n    const key = feature ? feature.getId() : popupCoordinate.join();\n    return (\n      <div\n        className=\"rs-popup\"\n        style={{\n          left,\n          top,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...other}\n      >\n        <div\n          className=\"rs-popup-container\"\n          key={key}\n          ref={(popupElement) => {\n            this.setState({ popupElement });\n          }}\n          tabIndex={tabIndex}\n        >\n          {(renderHeader || Popup.renderHeader)(this.props)}\n          <div className=\"rs-popup-body\">{children}</div>\n          {renderFooter(this.props)}\n        </div>\n      </div>\n    );\n  }\n\n  updatePixelPosition() {\n    const { feature, map, popupCoordinate } = this.props;\n    let coord = popupCoordinate;\n\n    if (feature && !coord) {\n      coord = getCenter(feature.getGeometry().getExtent());\n    }\n\n    if (coord) {\n      const pos = map.getPixelFromCoordinate(coord);\n\n      if (pos && pos.length === 2) {\n        this.setState({\n          left: pos[0],\n          top: pos[1],\n        });\n      }\n    }\n  }\n}\n\nPopup.propTypes = propTypes;\nPopup.defaultProps = defaultProps;\n\nexport default Popup;\n"],
+  "mappings": "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",
   "names": []
 }