react-spatial 1.5.3 → 1.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js +231 -0
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map +7 -0
- package/components/BaseLayerSwitcher/index.js +1 -0
- package/components/BaseLayerSwitcher/index.js.map +7 -0
- package/components/BasicMap/BasicMap.js +278 -0
- package/components/BasicMap/BasicMap.js.map +7 -0
- package/components/BasicMap/index.js +1 -0
- package/components/BasicMap/index.js.map +7 -0
- package/{src/components → components}/CanvasSaveButton/CanvasSaveButton.js +93 -320
- package/components/CanvasSaveButton/CanvasSaveButton.js.map +7 -0
- package/components/CanvasSaveButton/index.js +1 -0
- package/components/CanvasSaveButton/index.js.map +7 -0
- package/components/Copyright/Copyright.js +55 -0
- package/components/Copyright/Copyright.js.map +7 -0
- package/components/Copyright/index.js +1 -0
- package/components/Copyright/index.js.map +7 -0
- package/components/FeatureExportButton/FeatureExportButton.js +62 -0
- package/components/FeatureExportButton/FeatureExportButton.js.map +7 -0
- package/components/FeatureExportButton/index.js +1 -0
- package/components/FeatureExportButton/index.js.map +7 -0
- package/components/FitExtent/FitExtent.js +32 -0
- package/components/FitExtent/FitExtent.js.map +7 -0
- package/components/FitExtent/index.js +1 -0
- package/components/FitExtent/index.js.map +7 -0
- package/{src/components → components}/Geolocation/Geolocation.js +61 -144
- package/components/Geolocation/Geolocation.js.map +7 -0
- package/components/Geolocation/index.js +1 -0
- package/components/Geolocation/index.js.map +7 -0
- package/components/LayerTree/LayerTree.js +278 -0
- package/components/LayerTree/LayerTree.js.map +7 -0
- package/components/LayerTree/index.js +1 -0
- package/components/LayerTree/index.js.map +7 -0
- package/components/MousePosition/MousePosition.js +110 -0
- package/components/MousePosition/MousePosition.js.map +7 -0
- package/components/MousePosition/index.js +1 -0
- package/components/MousePosition/index.js.map +7 -0
- package/components/NorthArrow/NorthArrow.js +43 -0
- package/components/NorthArrow/NorthArrow.js.map +7 -0
- package/components/NorthArrow/index.js +1 -0
- package/components/NorthArrow/index.js.map +7 -0
- package/components/Overlay/Overlay.js +122 -0
- package/components/Overlay/Overlay.js.map +7 -0
- package/components/Overlay/index.js +1 -0
- package/components/Overlay/index.js.map +7 -0
- package/components/Permalink/Permalink.js +206 -0
- package/components/Permalink/Permalink.js.map +7 -0
- package/components/Permalink/index.js +1 -0
- package/components/Permalink/index.js.map +7 -0
- package/{src/components → components}/Popup/Popup.js +55 -165
- package/components/Popup/Popup.js.map +7 -0
- package/components/Popup/index.js +1 -0
- package/components/Popup/index.js.map +7 -0
- package/{src/components → components}/ResizeHandler/ResizeHandler.js +15 -50
- package/components/ResizeHandler/ResizeHandler.js.map +7 -0
- package/components/ResizeHandler/index.js +1 -0
- package/components/ResizeHandler/index.js.map +7 -0
- package/components/RouteSchedule/RouteSchedule.js +223 -0
- package/components/RouteSchedule/RouteSchedule.js.map +7 -0
- package/components/RouteSchedule/index.js +1 -0
- package/components/RouteSchedule/index.js.map +7 -0
- package/components/ScaleLine/ScaleLine.js +32 -0
- package/components/ScaleLine/ScaleLine.js.map +7 -0
- package/components/ScaleLine/index.js +1 -0
- package/components/ScaleLine/index.js.map +7 -0
- package/components/StopsFinder/StopsFinder.js +210 -0
- package/components/StopsFinder/StopsFinder.js.map +7 -0
- package/components/StopsFinder/StopsFinderOption.js +51 -0
- package/components/StopsFinder/StopsFinderOption.js.map +7 -0
- package/components/StopsFinder/index.js +1 -0
- package/components/StopsFinder/index.js.map +7 -0
- package/components/Zoom/Zoom.js +130 -0
- package/components/Zoom/Zoom.js.map +7 -0
- package/components/Zoom/index.js +1 -0
- package/components/Zoom/index.js.map +7 -0
- package/package.json +1 -1
- package/{src/propTypes.js → propTypes.js} +12 -16
- package/propTypes.js.map +7 -0
- package/{src/setupTests.js → setupTests.js} +1 -1
- package/setupTests.js.map +7 -0
- package/utils/GlobalsForOle.js +94 -0
- package/utils/GlobalsForOle.js.map +7 -0
- package/utils/KML.js +412 -0
- package/utils/KML.js.map +7 -0
- package/utils/KMLFormat.js +69 -0
- package/utils/KMLFormat.js.map +7 -0
- package/{src/utils → utils}/Styles.js +14 -20
- package/utils/Styles.js.map +7 -0
- package/{src/utils → utils}/getPolygonPattern.js +6 -34
- package/utils/getPolygonPattern.js.map +7 -0
- package/{src/utils → utils}/timeUtils.js +5 -22
- package/utils/timeUtils.js.map +7 -0
- package/.github/workflows/conventional-pr-title.yml +0 -21
- package/.github/workflows/main.yml +0 -28
- package/.husky/commit-msg +0 -4
- package/.husky/post-checkout +0 -4
- package/.husky/post-merge +0 -4
- package/.husky/post-rebase +0 -4
- package/.husky/pre-commit +0 -4
- package/.nvmrc +0 -1
- package/.whitesource +0 -8
- package/CHANGELOG.md +0 -65
- package/DEVELOP.md +0 -113
- package/__mocks__/mapbox-gl.js +0 -11
- package/__mocks__/resize-observer-polyfill.js +0 -9
- package/babel.config.js +0 -3
- package/commitlint.config.js +0 -1
- package/data/topic1.js +0 -119
- package/data/topic2.js +0 -28
- package/doc/README.md +0 -21
- package/doc/doc-config.json +0 -4
- package/pull_request_template.md +0 -16
- package/renovate.json +0 -4
- package/scripts/read-pkg-json.js +0 -17
- package/src/components/BaseLayerSwitcher/BaseLayerSwitcher.js +0 -322
- package/src/components/BaseLayerSwitcher/BaseLayerSwitcher.test.js +0 -69
- package/src/components/BaseLayerSwitcher/README.md +0 -61
- package/src/components/BaseLayerSwitcher/__snapshots__/BaseLayerSwitcher.test.js.snap +0 -88
- package/src/components/BaseLayerSwitcher/index.js +0 -1
- package/src/components/BasicMap/BasicMap.js +0 -413
- package/src/components/BasicMap/BasicMap.test.js +0 -281
- package/src/components/BasicMap/README.md +0 -18
- package/src/components/BasicMap/index.js +0 -1
- package/src/components/CanvasSaveButton/CanvasSaveButton.test.js +0 -148
- package/src/components/CanvasSaveButton/README.md +0 -76
- package/src/components/CanvasSaveButton/__snapshots__/CanvasSaveButton.test.js.snap +0 -76
- package/src/components/CanvasSaveButton/index.js +0 -1
- package/src/components/Copyright/Copyright.js +0 -89
- package/src/components/Copyright/Copyright.test.js +0 -134
- package/src/components/Copyright/README.md +0 -36
- package/src/components/Copyright/index.js +0 -1
- package/src/components/FeatureExportButton/FeatureExportButton.js +0 -118
- package/src/components/FeatureExportButton/FeatureExportButton.test.js +0 -417
- package/src/components/FeatureExportButton/README.md +0 -76
- package/src/components/FeatureExportButton/__snapshots__/FeatureExportButton.test.js.snap +0 -67
- package/src/components/FeatureExportButton/index.js +0 -1
- package/src/components/FitExtent/FitExtent.js +0 -62
- package/src/components/FitExtent/FitExtent.test.js +0 -48
- package/src/components/FitExtent/README.md +0 -34
- package/src/components/FitExtent/__snapshots__/FitExtent.test.js.snap +0 -13
- package/src/components/FitExtent/index.js +0 -1
- package/src/components/Geolocation/Geolocation.test.js +0 -267
- package/src/components/Geolocation/README.md +0 -25
- package/src/components/Geolocation/__snapshots__/Geolocation.test.js.snap +0 -92
- package/src/components/Geolocation/index.js +0 -1
- package/src/components/LayerTree/LayerTree.js +0 -487
- package/src/components/LayerTree/LayerTree.test.js +0 -337
- package/src/components/LayerTree/README.md +0 -92
- package/src/components/LayerTree/__snapshots__/LayerTree.test.js.snap +0 -1746
- package/src/components/LayerTree/index.js +0 -1
- package/src/components/MousePosition/MousePosition.js +0 -175
- package/src/components/MousePosition/MousePosition.test.js +0 -132
- package/src/components/MousePosition/README.md +0 -50
- package/src/components/MousePosition/__snapshots__/MousePosition.test.js.snap +0 -76
- package/src/components/MousePosition/index.js +0 -1
- package/src/components/NorthArrow/NorthArrow.js +0 -75
- package/src/components/NorthArrow/NorthArrow.test.js +0 -104
- package/src/components/NorthArrow/README.md +0 -59
- package/src/components/NorthArrow/__snapshots__/NorthArrow.test.js.snap +0 -117
- package/src/components/NorthArrow/index.js +0 -1
- package/src/components/Overlay/Overlay.js +0 -176
- package/src/components/Overlay/Overlay.test.js +0 -149
- package/src/components/Overlay/README.md +0 -59
- package/src/components/Overlay/__snapshots__/Overlay.test.js.snap +0 -9
- package/src/components/Overlay/index.js +0 -1
- package/src/components/Permalink/Permalink.js +0 -326
- package/src/components/Permalink/Permalink.test.js +0 -285
- package/src/components/Permalink/README.md +0 -105
- package/src/components/Permalink/index.js +0 -1
- package/src/components/Popup/Popup.test.js +0 -307
- package/src/components/Popup/README.md +0 -93
- package/src/components/Popup/__snapshots__/Popup.test.js.snap +0 -180
- package/src/components/Popup/index.js +0 -1
- package/src/components/README.md +0 -41
- package/src/components/ResizeHandler/ResizeHandler.test.js +0 -344
- package/src/components/ResizeHandler/index.js +0 -1
- package/src/components/RouteSchedule/README.md +0 -118
- package/src/components/RouteSchedule/RouteSchedule.js +0 -370
- package/src/components/RouteSchedule/RouteSchedule.test.js +0 -113
- package/src/components/RouteSchedule/__snapshots__/RouteSchedule.test.js.snap +0 -248
- package/src/components/RouteSchedule/index.js +0 -1
- package/src/components/ScaleLine/README.md +0 -29
- package/src/components/ScaleLine/ScaleLine.js +0 -50
- package/src/components/ScaleLine/ScaleLine.test.js +0 -30
- package/src/components/ScaleLine/__snapshots__/ScaleLine.test.js.snap +0 -7
- package/src/components/ScaleLine/index.js +0 -1
- package/src/components/StopsFinder/README.md +0 -50
- package/src/components/StopsFinder/StopsFinder.js +0 -284
- package/src/components/StopsFinder/StopsFinder.test.js +0 -17
- package/src/components/StopsFinder/StopsFinderOption.js +0 -61
- package/src/components/StopsFinder/__snapshots__/StopsFinder.test.js.snap +0 -133
- package/src/components/StopsFinder/index.js +0 -1
- package/src/components/Zoom/README.md +0 -25
- package/src/components/Zoom/Zoom.js +0 -180
- package/src/components/Zoom/Zoom.test.js +0 -141
- package/src/components/Zoom/__snapshots__/Zoom.test.js.snap +0 -201
- package/src/components/Zoom/index.js +0 -1
- package/src/styleguidist/ComponentsList.js +0 -52
- package/src/styleguidist/StyleGuide.js +0 -277
- package/src/styleguidist/styleguidist.css +0 -38
- package/src/utils/GlobalsForOle.js +0 -99
- package/src/utils/KML.js +0 -594
- package/src/utils/KML.test.js +0 -337
- package/src/utils/KMLFormat.js +0 -100
- package/src/utils/KMLFormat.test.js +0 -50
- package/src/utils/__snapshots__/KML.test.js.snap.KML-readFeatures()-and-writeFeatures()-should-read-and-write-lineDash-and-fillPattern-style-for-polygon.canvas-image.png +0 -0
- package/src/utils/__snapshots__/getPolygonPattern.test.js.snap.getPolygonPattern()-render-pattern-2-(cross)-color-and-(light-blue)-opacity.canvas-image.png +0 -0
- package/src/utils/__snapshots__/getPolygonPattern.test.js.snap.getPolygonPattern()-render-pattern-3-(diagonal-line-from-bottom-left-tot-top-right)-with-color-(light-blue)-and-opacity.canvas-image.png +0 -0
- package/src/utils/__snapshots__/getPolygonPattern.test.js.snap.getPolygonPattern()-render-pattern-4-(diagonal-line-from-top-left-to-bottom-right)-with-color-(light-blue)-and-opacity.canvas-image.png +0 -0
- package/src/utils/getPolygonPattern.test.js +0 -61
- package/src/utils/timeUtils.test.js +0 -30
- package/styleguide.config.js +0 -251
- /package/{src/components → components}/BaseLayerSwitcher/BaseLayerSwitcher.md.scss +0 -0
- /package/{src/components → components}/BaseLayerSwitcher/BaseLayerSwitcher.scss +0 -0
- /package/{src/components → components}/BasicMap/BasicMap.md.scss +0 -0
- /package/{src/components → components}/CanvasSaveButton/CanvasSaveButton.md.scss +0 -0
- /package/{src/components → components}/Copyright/Copyright.md.scss +0 -0
- /package/{src/components → components}/FeatureExportButton/FeatureExportButton.md.scss +0 -0
- /package/{src/components → components}/FitExtent/FitExtent.md.scss +0 -0
- /package/{src/components → components}/Geolocation/Geolocation.md.scss +0 -0
- /package/{src/components → components}/Geolocation/Geolocation.scss +0 -0
- /package/{src/components → components}/LayerTree/LayerTree.md.scss +0 -0
- /package/{src/components → components}/LayerTree/LayerTree.scss +0 -0
- /package/{src/components → components}/MousePosition/MousePosition.md.scss +0 -0
- /package/{src/components → components}/NorthArrow/NorthArrow.scss +0 -0
- /package/{src/components → components}/Overlay/Overlay.md.scss +0 -0
- /package/{src/components → components}/Overlay/Overlay.scss +0 -0
- /package/{src/components → components}/Permalink/Permalink.md.scss +0 -0
- /package/{src/components → components}/Popup/Popup.md.scss +0 -0
- /package/{src/components → components}/Popup/Popup.scss +0 -0
- /package/{src/components → components}/RouteSchedule/RouteSchedule.md.scss +0 -0
- /package/{src/components → components}/RouteSchedule/RouteSchedule.scss +0 -0
- /package/{src/components → components}/ScaleLine/ScaleLine.scss +0 -0
- /package/{src/components → components}/Zoom/Zoom.md.scss +0 -0
- /package/{src/components → components}/Zoom/Zoom.scss +0 -0
- /package/{src/images → images}/RouteSchedule/firstStation.png +0 -0
- /package/{src/images → images}/RouteSchedule/lastStation.png +0 -0
- /package/{src/images → images}/RouteSchedule/line.png +0 -0
- /package/{src/images → images}/RouteSchedule/station.png +0 -0
- /package/{src/images → images}/baselayer/baselayer.basebright.png +0 -0
- /package/{src/images → images}/baselayer/baselayer.osm.png +0 -0
- /package/{src/images → images}/baselayer/baselayer.travic.png +0 -0
- /package/{src/images → images}/baselayer/open.topo.map.png +0 -0
- /package/{src/images → images}/baselayer/osm.baselayer.hot.png +0 -0
- /package/{src/images → images}/baselayer/osm.baselayer.png +0 -0
- /package/{src/images → images}/favicon.png +0 -0
- /package/{src/images → images}/geops_logo.png +0 -0
- /package/{src/images → images}/geops_logo.svg +0 -0
- /package/{src/images → images}/geops_qr.png +0 -0
- /package/{src/images → images}/mots/bus_poi-blue-01.svg +0 -0
- /package/{src/images → images}/mots/bus_poi-grey-01.svg +0 -0
- /package/{src/images → images}/mots/bus_round-blue-01.svg +0 -0
- /package/{src/images → images}/mots/bus_round-grey-01.svg +0 -0
- /package/{src/images → images}/mots/bus_square-blue-01.svg +0 -0
- /package/{src/images → images}/mots/bus_square-grey-01.svg +0 -0
- /package/{src/images → images}/mots/cable_car_poi-blue-01.svg +0 -0
- /package/{src/images → images}/mots/cable_car_poi-grey-01.svg +0 -0
- /package/{src/images → images}/mots/cable_car_round-blue-01.svg +0 -0
- /package/{src/images → images}/mots/cable_car_round-grey-01.svg +0 -0
- /package/{src/images → images}/mots/cable_car_square-blue-01.svg +0 -0
- /package/{src/images → images}/mots/cable_car_square-grey-01.svg +0 -0
- /package/{src/images → images}/mots/ferry_poi-blue-01.svg +0 -0
- /package/{src/images → images}/mots/ferry_poi-grey-01.svg +0 -0
- /package/{src/images → images}/mots/ferry_round-blue-01.svg +0 -0
- /package/{src/images → images}/mots/ferry_round-grey-01.svg +0 -0
- /package/{src/images → images}/mots/ferry_square-blue-01.svg +0 -0
- /package/{src/images → images}/mots/ferry_square-grey-01.svg +0 -0
- /package/{src/images → images}/mots/funicular_round-blue-01.svg +0 -0
- /package/{src/images → images}/mots/funicular_round-grey-01.svg +0 -0
- /package/{src/images → images}/mots/funicular_square-blue-01.svg +0 -0
- /package/{src/images → images}/mots/gondola_round-blue-01.svg +0 -0
- /package/{src/images → images}/mots/rail_poi-blue-01.svg +0 -0
- /package/{src/images → images}/mots/rail_poi-grey-01.svg +0 -0
- /package/{src/images → images}/mots/rail_round-blue-01.svg +0 -0
- /package/{src/images → images}/mots/rail_round-grey-01.svg +0 -0
- /package/{src/images → images}/mots/rail_square-blue-01.svg +0 -0
- /package/{src/images → images}/mots/rail_square-grey-01.svg +0 -0
- /package/{src/images → images}/mots/subway_round blue-01.svg +0 -0
- /package/{src/images → images}/mots/subway_round-blue-01.svg +0 -0
- /package/{src/images → images}/mots/tram_poi-blue-01.svg +0 -0
- /package/{src/images → images}/mots/tram_poi-grey-01.svg +0 -0
- /package/{src/images → images}/mots/tram_round-blue-01.svg +0 -0
- /package/{src/images → images}/mots/tram_round-grey-01.svg +0 -0
- /package/{src/images → images}/mots/tram_square-blue-01.svg +0 -0
- /package/{src/images → images}/mots/tram_square-grey-01.svg +0 -0
- /package/{src/images → images}/northArrow.svg +0 -0
- /package/{src/images → images}/northArrow.url.svg +0 -0
- /package/{src/images → images}/northArrowCircle.svg +0 -0
- /package/{src/images → images}/northArrowCircle.url.svg +0 -0
- /package/{src/themes → themes}/README.md +0 -0
- /package/{src/themes → themes}/default/components.scss +0 -0
- /package/{src/themes → themes}/default/examples.scss +0 -0
- /package/{src/themes → themes}/default/index.scss +0 -0
- /package/{src/themes → themes}/default/mixins.scss +0 -0
- /package/{src/themes → themes}/default/variables.scss +0 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/Permalink/Permalink.js"],
|
|
4
|
+
"sourcesContent": ["import { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport qs from 'query-string';\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.onMoveEndRef = null;\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 = qs.parse(window.location.search);\n\n if (urlParams.layers) {\n const visibleLayers = urlParams.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.baselayers || '').split(',')[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 = qs.parse(window.location.search);\n const parameters = { ...oldParams, ...this.state, ...params };\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 // encodeURI to encode spaces, accents, etc. but not characters like ;,/?:@&=+$-_.!~*'()\n const qStr = encodeURI(qs.stringify(parameters, { encode: false }));\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Permalink";
|
|
@@ -1,233 +1,138 @@
|
|
|
1
|
-
import React, { PureComponent } from
|
|
2
|
-
import PropTypes from
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import { unByKey } from 'ol/Observable';
|
|
9
|
-
|
|
1
|
+
import React, { PureComponent } from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import { MdClose } from "react-icons/md";
|
|
4
|
+
import OLMap from "ol/Map";
|
|
5
|
+
import Feature from "ol/Feature";
|
|
6
|
+
import { getCenter } from "ol/extent";
|
|
7
|
+
import { unByKey } from "ol/Observable";
|
|
10
8
|
const propTypes = {
|
|
11
|
-
/**
|
|
12
|
-
* React Children.
|
|
13
|
-
*/
|
|
14
9
|
children: PropTypes.node.isRequired,
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
|
|
18
|
-
*/
|
|
19
10
|
map: PropTypes.instanceOf(OLMap).isRequired,
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* An [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).
|
|
23
|
-
*/
|
|
24
11
|
feature: PropTypes.instanceOf(Feature),
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Popup title.
|
|
28
|
-
*/
|
|
29
12
|
header: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* If true, the popup is panned in the map's viewport.
|
|
33
|
-
*/
|
|
34
13
|
panIntoView: PropTypes.bool,
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Custom BoundingClientRect to fit popup into.
|
|
38
|
-
* Use if panIntoView is true. Default is the map's BoundingClientRect.
|
|
39
|
-
*/
|
|
40
14
|
panRect: PropTypes.objectOf(PropTypes.number),
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* Coordinate position of the popup.
|
|
44
|
-
*/
|
|
45
15
|
popupCoordinate: PropTypes.arrayOf(PropTypes.number),
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* Class name of the popup.
|
|
49
|
-
*/
|
|
50
16
|
className: PropTypes.string,
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* Title HTML attributes.
|
|
54
|
-
*/
|
|
55
17
|
titles: PropTypes.shape({
|
|
56
|
-
closeButton: PropTypes.string
|
|
18
|
+
closeButton: PropTypes.string
|
|
57
19
|
}),
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* Function triggered on close button click.
|
|
61
|
-
*/
|
|
62
20
|
onCloseClick: PropTypes.func,
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* HTML tabIndex attribute.
|
|
66
|
-
*/
|
|
67
21
|
tabIndex: PropTypes.string,
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Render the header
|
|
71
|
-
*/
|
|
72
22
|
renderHeader: PropTypes.func,
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* Render the close button
|
|
76
|
-
*/
|
|
77
23
|
renderCloseButton: PropTypes.func,
|
|
78
|
-
|
|
79
|
-
/**
|
|
80
|
-
* Render the footer
|
|
81
|
-
*/
|
|
82
|
-
renderFooter: PropTypes.func,
|
|
24
|
+
renderFooter: PropTypes.func
|
|
83
25
|
};
|
|
84
|
-
|
|
85
26
|
const defaultProps = {
|
|
86
27
|
header: null,
|
|
87
28
|
feature: null,
|
|
88
29
|
panIntoView: false,
|
|
89
30
|
panRect: null,
|
|
90
31
|
popupCoordinate: null,
|
|
91
|
-
className:
|
|
92
|
-
tabIndex:
|
|
93
|
-
titles: { closeButton:
|
|
94
|
-
onCloseClick: () => {
|
|
32
|
+
className: "rs-popup",
|
|
33
|
+
tabIndex: "",
|
|
34
|
+
titles: { closeButton: "Close" },
|
|
35
|
+
onCloseClick: () => {
|
|
36
|
+
},
|
|
95
37
|
renderHeader: null,
|
|
96
38
|
renderCloseButton: null,
|
|
97
39
|
renderFooter: () => {
|
|
98
40
|
return null;
|
|
99
|
-
}
|
|
41
|
+
}
|
|
100
42
|
};
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* The Popup component renders a popup over an
|
|
104
|
-
* [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html)
|
|
105
|
-
* on click.
|
|
106
|
-
*/
|
|
107
43
|
class Popup extends PureComponent {
|
|
108
44
|
static renderHeader(props) {
|
|
109
45
|
const { header, renderCloseButton } = props;
|
|
110
|
-
return (
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
{(renderCloseButton || Popup.renderCloseButton)(props)}
|
|
114
|
-
</div>
|
|
115
|
-
);
|
|
46
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
47
|
+
className: "rs-popup-header"
|
|
48
|
+
}, header, (renderCloseButton || Popup.renderCloseButton)(props));
|
|
116
49
|
}
|
|
117
|
-
|
|
118
50
|
static renderCloseButton({ onCloseClick, titles }) {
|
|
119
|
-
return (
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
</div>
|
|
135
|
-
);
|
|
51
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
52
|
+
role: "button",
|
|
53
|
+
tabIndex: 0,
|
|
54
|
+
className: "rs-popup-close-bt",
|
|
55
|
+
title: titles.closeButton,
|
|
56
|
+
"aria-label": titles.closeButton,
|
|
57
|
+
onClick: () => {
|
|
58
|
+
return onCloseClick();
|
|
59
|
+
},
|
|
60
|
+
onKeyPress: (evt) => {
|
|
61
|
+
return evt.which === 13 && onCloseClick();
|
|
62
|
+
}
|
|
63
|
+
}, /* @__PURE__ */ React.createElement(MdClose, {
|
|
64
|
+
focusable: false
|
|
65
|
+
}));
|
|
136
66
|
}
|
|
137
|
-
|
|
138
67
|
constructor(props) {
|
|
139
68
|
super(props);
|
|
140
69
|
this.state = {
|
|
141
70
|
popupElement: null,
|
|
142
71
|
top: 0,
|
|
143
|
-
left: 0
|
|
72
|
+
left: 0
|
|
144
73
|
};
|
|
145
74
|
this.postrenderKey = null;
|
|
146
75
|
}
|
|
147
|
-
|
|
148
76
|
componentDidMount() {
|
|
149
77
|
const { map } = this.props;
|
|
150
78
|
this.updatePixelPosition();
|
|
151
|
-
|
|
152
|
-
this.postrenderKey = map.on('postrender', () => {
|
|
79
|
+
this.postrenderKey = map.on("postrender", () => {
|
|
153
80
|
this.updatePixelPosition();
|
|
154
81
|
});
|
|
155
82
|
}
|
|
156
|
-
|
|
157
83
|
componentDidUpdate(prevProps, prevState) {
|
|
158
84
|
const { feature, panIntoView, popupCoordinate } = this.props;
|
|
159
85
|
const { popupElement } = this.state;
|
|
160
|
-
if (
|
|
161
|
-
feature !== prevProps.feature ||
|
|
162
|
-
popupCoordinate !== prevProps.popupCoordinate
|
|
163
|
-
) {
|
|
86
|
+
if (feature !== prevProps.feature || popupCoordinate !== prevProps.popupCoordinate) {
|
|
164
87
|
this.updatePixelPosition();
|
|
165
88
|
}
|
|
166
|
-
|
|
167
|
-
if (
|
|
168
|
-
panIntoView &&
|
|
169
|
-
popupElement &&
|
|
170
|
-
popupElement !== prevState.popupElement
|
|
171
|
-
) {
|
|
89
|
+
if (panIntoView && popupElement && popupElement !== prevState.popupElement) {
|
|
172
90
|
this.panIntoView();
|
|
173
91
|
}
|
|
174
92
|
}
|
|
175
|
-
|
|
176
93
|
componentWillUnmount() {
|
|
177
94
|
unByKey(this.postrenderKey);
|
|
178
95
|
}
|
|
179
|
-
|
|
180
96
|
panIntoView() {
|
|
181
97
|
const { map, panRect } = this.props;
|
|
182
98
|
const { popupElement } = this.state;
|
|
183
|
-
|
|
184
99
|
const mapRect = panRect || map.getTarget().getBoundingClientRect();
|
|
185
100
|
const popupRect = popupElement.getBoundingClientRect();
|
|
186
101
|
const [x, y] = map.getView().getCenter();
|
|
187
102
|
const res = map.getView().getResolution();
|
|
188
103
|
const newCenter = [x, y];
|
|
189
|
-
|
|
190
104
|
if (mapRect.top > popupRect.top) {
|
|
191
105
|
newCenter[1] = y + (mapRect.top - popupRect.top) * res;
|
|
192
106
|
}
|
|
193
|
-
|
|
194
107
|
if (mapRect.left > popupRect.left) {
|
|
195
108
|
newCenter[0] = x - (mapRect.left - popupRect.left) * res;
|
|
196
109
|
}
|
|
197
|
-
|
|
198
110
|
if (mapRect.right < popupRect.right) {
|
|
199
111
|
newCenter[0] = x + (popupRect.right - mapRect.right) * res;
|
|
200
112
|
}
|
|
201
|
-
|
|
202
113
|
if (mapRect.bottom < popupRect.bottom) {
|
|
203
114
|
newCenter[1] = y - (popupRect.bottom - mapRect.bottom) * res;
|
|
204
115
|
}
|
|
205
|
-
|
|
206
116
|
if (newCenter[0] !== x || newCenter[1] !== y) {
|
|
207
117
|
map.getView().animate({ center: newCenter, duration: 500 });
|
|
208
118
|
}
|
|
209
119
|
}
|
|
210
|
-
|
|
211
120
|
updatePixelPosition() {
|
|
212
121
|
const { map, feature, popupCoordinate } = this.props;
|
|
213
122
|
let coord = popupCoordinate;
|
|
214
|
-
|
|
215
123
|
if (feature && !coord) {
|
|
216
124
|
coord = getCenter(feature.getGeometry().getExtent());
|
|
217
125
|
}
|
|
218
|
-
|
|
219
126
|
if (coord) {
|
|
220
127
|
const pos = map.getPixelFromCoordinate(coord);
|
|
221
|
-
|
|
222
128
|
if (pos && pos.length === 2) {
|
|
223
129
|
this.setState({
|
|
224
130
|
left: pos[0],
|
|
225
|
-
top: pos[1]
|
|
131
|
+
top: pos[1]
|
|
226
132
|
});
|
|
227
133
|
}
|
|
228
134
|
}
|
|
229
135
|
}
|
|
230
|
-
|
|
231
136
|
render() {
|
|
232
137
|
const {
|
|
233
138
|
feature,
|
|
@@ -240,51 +145,36 @@ class Popup extends PureComponent {
|
|
|
240
145
|
renderFooter,
|
|
241
146
|
...other
|
|
242
147
|
} = this.props;
|
|
243
|
-
|
|
244
148
|
if (!feature && !popupCoordinate) {
|
|
245
149
|
return null;
|
|
246
150
|
}
|
|
247
|
-
|
|
248
151
|
delete other.panIntoView;
|
|
249
152
|
delete other.panRect;
|
|
250
153
|
delete other.map;
|
|
251
154
|
delete other.header;
|
|
252
155
|
delete other.onCloseClick;
|
|
253
156
|
delete other.renderCloseButton;
|
|
254
|
-
|
|
255
157
|
const { top, left } = this.state;
|
|
256
|
-
|
|
257
|
-
// force re-render if the feature or the coordinate changes.
|
|
258
|
-
// this is needed to update the popupElement ref
|
|
259
158
|
const key = feature ? feature.getId() : popupCoordinate.join();
|
|
260
|
-
return (
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
>
|
|
278
|
-
{(renderHeader || Popup.renderHeader)(this.props)}
|
|
279
|
-
<div className="rs-popup-body">{children}</div>
|
|
280
|
-
{renderFooter(this.props)}
|
|
281
|
-
</div>
|
|
282
|
-
</div>
|
|
283
|
-
);
|
|
159
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
160
|
+
className: "rs-popup",
|
|
161
|
+
style: {
|
|
162
|
+
left,
|
|
163
|
+
top
|
|
164
|
+
},
|
|
165
|
+
...other
|
|
166
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
167
|
+
className: "rs-popup-container",
|
|
168
|
+
tabIndex,
|
|
169
|
+
key,
|
|
170
|
+
ref: (popupElement) => {
|
|
171
|
+
this.setState({ popupElement });
|
|
172
|
+
}
|
|
173
|
+
}, (renderHeader || Popup.renderHeader)(this.props), /* @__PURE__ */ React.createElement("div", {
|
|
174
|
+
className: "rs-popup-body"
|
|
175
|
+
}, children), renderFooter(this.props)));
|
|
284
176
|
}
|
|
285
177
|
}
|
|
286
|
-
|
|
287
178
|
Popup.propTypes = propTypes;
|
|
288
179
|
Popup.defaultProps = defaultProps;
|
|
289
|
-
|
|
290
180
|
export default Popup;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/Popup/Popup.js"],
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Popup";
|
|
@@ -1,30 +1,25 @@
|
|
|
1
|
-
import ReactDOM from
|
|
2
|
-
import { PureComponent, Component } from
|
|
3
|
-
import PropTypes from
|
|
4
|
-
import ResizeObserver from
|
|
5
|
-
|
|
1
|
+
import ReactDOM from "react-dom";
|
|
2
|
+
import { PureComponent, Component } from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import ResizeObserver from "resize-observer-polyfill";
|
|
6
5
|
const propTypes = {
|
|
7
6
|
observe: PropTypes.oneOfType([
|
|
8
7
|
PropTypes.string,
|
|
9
8
|
PropTypes.node,
|
|
10
9
|
PropTypes.instanceOf(Component),
|
|
11
10
|
PropTypes.shape({ current: PropTypes.node }),
|
|
12
|
-
PropTypes.shape({ current: PropTypes.instanceOf(Component) })
|
|
11
|
+
PropTypes.shape({ current: PropTypes.instanceOf(Component) })
|
|
13
12
|
]),
|
|
14
13
|
maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),
|
|
15
14
|
maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),
|
|
16
15
|
stylePropHeight: PropTypes.string,
|
|
17
16
|
onResize: PropTypes.func,
|
|
18
|
-
|
|
19
|
-
// This property is used to re-apply the classes, for example when the className of the observed node changes.
|
|
20
17
|
forceUpdate: PropTypes.oneOfType([
|
|
21
18
|
PropTypes.string,
|
|
22
19
|
PropTypes.number,
|
|
23
|
-
PropTypes.bool
|
|
24
|
-
])
|
|
20
|
+
PropTypes.bool
|
|
21
|
+
])
|
|
25
22
|
};
|
|
26
|
-
|
|
27
|
-
// Same as bootstrap
|
|
28
23
|
const defaultProps = {
|
|
29
24
|
observe: null,
|
|
30
25
|
maxHeightBrkpts: {
|
|
@@ -32,22 +27,19 @@ const defaultProps = {
|
|
|
32
27
|
s: 768,
|
|
33
28
|
m: 992,
|
|
34
29
|
l: 1200,
|
|
35
|
-
xl: Infinity
|
|
30
|
+
xl: Infinity
|
|
36
31
|
},
|
|
37
32
|
maxWidthBrkpts: {
|
|
38
33
|
xs: 576,
|
|
39
34
|
s: 768,
|
|
40
35
|
m: 992,
|
|
41
36
|
l: 1200,
|
|
42
|
-
xl: Infinity
|
|
37
|
+
xl: Infinity
|
|
43
38
|
},
|
|
44
39
|
stylePropHeight: null,
|
|
45
40
|
onResize: null,
|
|
46
|
-
forceUpdate: null
|
|
41
|
+
forceUpdate: null
|
|
47
42
|
};
|
|
48
|
-
/**
|
|
49
|
-
* This component adds css class to an element depending on his size.
|
|
50
|
-
*/
|
|
51
43
|
class ResizeHandler extends PureComponent {
|
|
52
44
|
static applyBreakpoints(entry, breakpoints, size, direction) {
|
|
53
45
|
let found = false;
|
|
@@ -63,7 +55,6 @@ class ResizeHandler extends PureComponent {
|
|
|
63
55
|
});
|
|
64
56
|
return screenSize;
|
|
65
57
|
}
|
|
66
|
-
|
|
67
58
|
constructor(props) {
|
|
68
59
|
super(props);
|
|
69
60
|
this.observer = new ResizeObserver((entries) => {
|
|
@@ -71,54 +62,40 @@ class ResizeHandler extends PureComponent {
|
|
|
71
62
|
});
|
|
72
63
|
this.nodes = [];
|
|
73
64
|
}
|
|
74
|
-
|
|
75
65
|
componentDidMount() {
|
|
76
66
|
this.observe();
|
|
77
67
|
}
|
|
78
|
-
|
|
79
68
|
componentDidUpdate(prevProps) {
|
|
80
69
|
const { observe, forceUpdate } = this.props;
|
|
81
|
-
|
|
82
|
-
if (
|
|
83
|
-
observe !== prevProps.observe ||
|
|
84
|
-
forceUpdate !== prevProps.forceUpdate
|
|
85
|
-
) {
|
|
70
|
+
if (observe !== prevProps.observe || forceUpdate !== prevProps.forceUpdate) {
|
|
86
71
|
this.observe();
|
|
87
72
|
}
|
|
88
73
|
}
|
|
89
|
-
|
|
90
74
|
componentWillUnmount() {
|
|
91
75
|
this.observer.disconnect();
|
|
92
76
|
}
|
|
93
|
-
|
|
94
77
|
onResize(entries) {
|
|
95
|
-
const { maxHeightBrkpts, maxWidthBrkpts, stylePropHeight, onResize } =
|
|
96
|
-
this.props;
|
|
97
|
-
|
|
78
|
+
const { maxHeightBrkpts, maxWidthBrkpts, stylePropHeight, onResize } = this.props;
|
|
98
79
|
if (stylePropHeight) {
|
|
99
80
|
const vh = window.innerHeight * 0.01;
|
|
100
81
|
document.documentElement.style.setProperty(stylePropHeight, `${vh}px`);
|
|
101
82
|
}
|
|
102
|
-
|
|
103
83
|
if (!maxWidthBrkpts && !maxHeightBrkpts) {
|
|
104
84
|
onResize(entries);
|
|
105
85
|
return;
|
|
106
86
|
}
|
|
107
|
-
|
|
108
87
|
let newScreenWidth;
|
|
109
88
|
let newScreenHeight;
|
|
110
|
-
|
|
111
89
|
for (let i = 0; i < entries.length; i += 1) {
|
|
112
90
|
const entry = entries[i];
|
|
113
91
|
const rect = entry.contentRect;
|
|
114
92
|
const { height, width } = rect;
|
|
115
|
-
|
|
116
93
|
if (maxWidthBrkpts) {
|
|
117
94
|
newScreenWidth = ResizeHandler.applyBreakpoints(
|
|
118
95
|
entry,
|
|
119
96
|
maxWidthBrkpts,
|
|
120
97
|
width,
|
|
121
|
-
|
|
98
|
+
"w"
|
|
122
99
|
);
|
|
123
100
|
}
|
|
124
101
|
if (maxHeightBrkpts) {
|
|
@@ -126,53 +103,41 @@ class ResizeHandler extends PureComponent {
|
|
|
126
103
|
entry,
|
|
127
104
|
maxHeightBrkpts,
|
|
128
105
|
height,
|
|
129
|
-
|
|
106
|
+
"h"
|
|
130
107
|
);
|
|
131
108
|
}
|
|
132
109
|
}
|
|
133
|
-
|
|
134
110
|
if (onResize) {
|
|
135
111
|
onResize(entries, newScreenWidth, newScreenHeight);
|
|
136
112
|
}
|
|
137
113
|
}
|
|
138
|
-
|
|
139
114
|
observe() {
|
|
140
115
|
this.observer.disconnect();
|
|
141
116
|
const { observe } = this.props;
|
|
142
|
-
|
|
143
117
|
if (!observe) {
|
|
144
118
|
return;
|
|
145
119
|
}
|
|
146
|
-
|
|
147
|
-
if (typeof observe === 'string' || observe instanceof String) {
|
|
120
|
+
if (typeof observe === "string" || observe instanceof String) {
|
|
148
121
|
this.nodes = document.querySelectorAll(observe);
|
|
149
122
|
} else if (observe instanceof Component) {
|
|
150
|
-
// eslint-disable-next-line react/no-find-dom-node
|
|
151
123
|
this.nodes.push(ReactDOM.findDOMNode(observe));
|
|
152
124
|
} else if (observe instanceof Element) {
|
|
153
125
|
this.nodes.push(observe);
|
|
154
126
|
} else if (observe.current instanceof Element) {
|
|
155
|
-
// observe value created with React.createRef() on a html node.
|
|
156
127
|
this.nodes.push(observe.current);
|
|
157
128
|
} else if (observe.current instanceof Component) {
|
|
158
|
-
// observe value created with React.createRef() on a React component.
|
|
159
|
-
// eslint-disable-next-line react/no-find-dom-node
|
|
160
129
|
this.nodes.push(ReactDOM.findDOMNode(observe.current));
|
|
161
130
|
}
|
|
162
|
-
|
|
163
131
|
if (this.nodes.length) {
|
|
164
132
|
this.nodes.forEach((node) => {
|
|
165
133
|
return this.observer.observe(node);
|
|
166
134
|
});
|
|
167
135
|
}
|
|
168
136
|
}
|
|
169
|
-
|
|
170
137
|
render() {
|
|
171
138
|
return null;
|
|
172
139
|
}
|
|
173
140
|
}
|
|
174
|
-
|
|
175
141
|
ResizeHandler.propTypes = propTypes;
|
|
176
142
|
ResizeHandler.defaultProps = defaultProps;
|
|
177
|
-
|
|
178
143
|
export default ResizeHandler;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/ResizeHandler/ResizeHandler.js"],
|
|
4
|
+
"sourcesContent": ["import ReactDOM from 'react-dom';\nimport { PureComponent, Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst propTypes = {\n observe: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n PropTypes.instanceOf(Component),\n PropTypes.shape({ current: PropTypes.node }),\n PropTypes.shape({ current: PropTypes.instanceOf(Component) }),\n ]),\n maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),\n maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),\n stylePropHeight: PropTypes.string,\n onResize: PropTypes.func,\n\n // This property is used to re-apply the classes, for example when the className of the observed node changes.\n forceUpdate: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n PropTypes.bool,\n ]),\n};\n\n// Same as bootstrap\nconst defaultProps = {\n observe: null,\n maxHeightBrkpts: {\n xs: 576,\n s: 768,\n m: 992,\n l: 1200,\n xl: Infinity,\n },\n maxWidthBrkpts: {\n xs: 576,\n s: 768,\n m: 992,\n l: 1200,\n xl: Infinity,\n },\n stylePropHeight: null,\n onResize: null,\n forceUpdate: null,\n};\n/**\n * This component adds css class to an element depending on his size.\n */\nclass ResizeHandler extends PureComponent {\n static applyBreakpoints(entry, breakpoints, size, direction) {\n let found = false;\n let screenSize;\n Object.entries(breakpoints).forEach((brkpt) => {\n const cssClass = `rs-${direction}-${brkpt[0]}`;\n entry.target.classList.remove(cssClass);\n if (!found && size <= brkpt[1]) {\n found = true;\n [screenSize] = brkpt;\n entry.target.classList.add(cssClass);\n }\n });\n return screenSize;\n }\n\n constructor(props) {\n super(props);\n this.observer = new ResizeObserver((entries) => {\n return this.onResize(entries);\n });\n this.nodes = [];\n }\n\n componentDidMount() {\n this.observe();\n }\n\n componentDidUpdate(prevProps) {\n const { observe, forceUpdate } = this.props;\n\n if (\n observe !== prevProps.observe ||\n forceUpdate !== prevProps.forceUpdate\n ) {\n this.observe();\n }\n }\n\n componentWillUnmount() {\n this.observer.disconnect();\n }\n\n onResize(entries) {\n const { maxHeightBrkpts, maxWidthBrkpts, stylePropHeight, onResize } =\n this.props;\n\n if (stylePropHeight) {\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty(stylePropHeight, `${vh}px`);\n }\n\n if (!maxWidthBrkpts && !maxHeightBrkpts) {\n onResize(entries);\n return;\n }\n\n let newScreenWidth;\n let newScreenHeight;\n\n for (let i = 0; i < entries.length; i += 1) {\n const entry = entries[i];\n const rect = entry.contentRect;\n const { height, width } = rect;\n\n if (maxWidthBrkpts) {\n newScreenWidth = ResizeHandler.applyBreakpoints(\n entry,\n maxWidthBrkpts,\n width,\n 'w',\n );\n }\n if (maxHeightBrkpts) {\n newScreenHeight = ResizeHandler.applyBreakpoints(\n entry,\n maxHeightBrkpts,\n height,\n 'h',\n );\n }\n }\n\n if (onResize) {\n onResize(entries, newScreenWidth, newScreenHeight);\n }\n }\n\n observe() {\n this.observer.disconnect();\n const { observe } = this.props;\n\n if (!observe) {\n return;\n }\n\n if (typeof observe === 'string' || observe instanceof String) {\n this.nodes = document.querySelectorAll(observe);\n } else if (observe instanceof Component) {\n // eslint-disable-next-line react/no-find-dom-node\n this.nodes.push(ReactDOM.findDOMNode(observe));\n } else if (observe instanceof Element) {\n this.nodes.push(observe);\n } else if (observe.current instanceof Element) {\n // observe value created with React.createRef() on a html node.\n this.nodes.push(observe.current);\n } else if (observe.current instanceof Component) {\n // observe value created with React.createRef() on a React component.\n // eslint-disable-next-line react/no-find-dom-node\n this.nodes.push(ReactDOM.findDOMNode(observe.current));\n }\n\n if (this.nodes.length) {\n this.nodes.forEach((node) => {\n return this.observer.observe(node);\n });\n }\n }\n\n render() {\n return null;\n }\n}\n\nResizeHandler.propTypes = propTypes;\nResizeHandler.defaultProps = defaultProps;\n\nexport default ResizeHandler;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./ResizeHandler";
|