react-spatial 1.5.4 → 1.5.5
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 +94 -63
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map +1 -1
- package/components/BaseLayerSwitcher/index.js.map +1 -1
- package/components/BasicMap/BasicMap.js +60 -15
- package/components/BasicMap/BasicMap.js.map +2 -2
- package/components/BasicMap/index.js.map +1 -1
- package/components/CanvasSaveButton/CanvasSaveButton.js +93 -11
- package/components/CanvasSaveButton/CanvasSaveButton.js.map +1 -1
- package/components/CanvasSaveButton/index.js.map +1 -1
- package/components/Copyright/Copyright.js +19 -5
- package/components/Copyright/Copyright.js.map +1 -1
- package/components/Copyright/index.js.map +1 -1
- package/components/FeatureExportButton/FeatureExportButton.js +30 -12
- package/components/FeatureExportButton/FeatureExportButton.js.map +1 -1
- package/components/FeatureExportButton/index.js.map +1 -1
- package/components/FitExtent/FitExtent.js +24 -8
- package/components/FitExtent/FitExtent.js.map +1 -1
- package/components/FitExtent/index.js.map +1 -1
- package/components/Geolocation/Geolocation.js +47 -14
- package/components/Geolocation/Geolocation.js.map +1 -1
- package/components/Geolocation/index.js.map +1 -1
- package/components/LayerTree/LayerTree.js +155 -46
- package/components/LayerTree/LayerTree.js.map +1 -1
- package/components/LayerTree/index.js.map +1 -1
- package/components/MousePosition/MousePosition.js +48 -16
- package/components/MousePosition/MousePosition.js.map +1 -1
- package/components/MousePosition/index.js.map +1 -1
- package/components/NorthArrow/NorthArrow.js +21 -5
- package/components/NorthArrow/NorthArrow.js.map +1 -1
- package/components/NorthArrow/index.js.map +1 -1
- package/components/Overlay/Overlay.js +72 -44
- package/components/Overlay/Overlay.js.map +1 -1
- package/components/Overlay/index.js.map +1 -1
- package/components/Permalink/Permalink.js +37 -0
- package/components/Permalink/Permalink.js.map +1 -1
- package/components/Permalink/index.js.map +1 -1
- package/components/Popup/Popup.js +84 -33
- package/components/Popup/Popup.js.map +1 -1
- package/components/Popup/index.js.map +1 -1
- package/components/ResizeHandler/ResizeHandler.js +1 -0
- package/components/ResizeHandler/ResizeHandler.js.map +1 -1
- package/components/ResizeHandler/index.js.map +1 -1
- package/components/RouteSchedule/RouteSchedule.js +121 -76
- package/components/RouteSchedule/RouteSchedule.js.map +2 -2
- package/components/RouteSchedule/index.js.map +1 -1
- package/components/ScaleLine/ScaleLine.js +8 -5
- package/components/ScaleLine/ScaleLine.js.map +1 -1
- package/components/ScaleLine/index.js.map +1 -1
- package/components/StopsFinder/StopsFinder.js +96 -51
- package/components/StopsFinder/StopsFinder.js.map +1 -1
- package/components/StopsFinder/StopsFinderOption.js +2 -9
- package/components/StopsFinder/StopsFinderOption.js.map +1 -1
- package/components/StopsFinder/index.js.map +1 -1
- package/components/Zoom/Zoom.js +48 -29
- package/components/Zoom/Zoom.js.map +1 -1
- package/components/Zoom/index.js.map +1 -1
- package/package.json +32 -31
- package/propTypes.js +19 -1
- package/propTypes.js.map +2 -2
- package/utils/KML.js +8 -0
- package/utils/KML.js.map +1 -1
- package/utils/KMLFormat.js +32 -4
- package/utils/KMLFormat.js.map +1 -1
- package/utils/getPolygonPattern.js.map +1 -1
- package/utils/timeUtils.js.map +1 -1
|
@@ -3,8 +3,17 @@ import PropTypes from "prop-types";
|
|
|
3
3
|
import { Resizable } from "re-resizable";
|
|
4
4
|
import ResizeHandler from "../ResizeHandler";
|
|
5
5
|
const propTypes = {
|
|
6
|
+
/**
|
|
7
|
+
* CSS class added to container.
|
|
8
|
+
*/
|
|
6
9
|
className: PropTypes.string,
|
|
10
|
+
/**
|
|
11
|
+
* Children content of the overlay.
|
|
12
|
+
*/
|
|
7
13
|
children: PropTypes.node,
|
|
14
|
+
/**
|
|
15
|
+
* Observed element to define screen size.
|
|
16
|
+
*/
|
|
8
17
|
observe: PropTypes.oneOfType([
|
|
9
18
|
PropTypes.string,
|
|
10
19
|
PropTypes.node,
|
|
@@ -12,7 +21,17 @@ const propTypes = {
|
|
|
12
21
|
PropTypes.shape({ current: PropTypes.node }),
|
|
13
22
|
PropTypes.shape({ current: PropTypes.instanceOf(Component) })
|
|
14
23
|
]),
|
|
24
|
+
/**
|
|
25
|
+
* Deactivate the ability to resize the overlay on mobile.
|
|
26
|
+
* /!\ This prop is only used if isMobile (observer width < 768px).
|
|
27
|
+
*/
|
|
15
28
|
isMobileResizable: PropTypes.bool,
|
|
29
|
+
/**
|
|
30
|
+
* Size parameters to the Resizable component on mobile.
|
|
31
|
+
* Pass following prop to re-resizable component: 'size', 'defaultSize', 'minHeight' & 'maxHeight'
|
|
32
|
+
* (https://github.com/bokuweb/re-resizable)
|
|
33
|
+
* /!\ This prop is only used if isMobile (observer width < 768px).
|
|
34
|
+
*/
|
|
16
35
|
mobileSize: PropTypes.shape({
|
|
17
36
|
minimalHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
18
37
|
maximalHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
@@ -25,8 +44,22 @@ const propTypes = {
|
|
|
25
44
|
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
|
26
45
|
})
|
|
27
46
|
}),
|
|
47
|
+
/**
|
|
48
|
+
* Minimal width to consider the observed as mobile.
|
|
49
|
+
* Default is 768px.
|
|
50
|
+
*/
|
|
28
51
|
thresholdWidthForMobile: PropTypes.number,
|
|
52
|
+
/**
|
|
53
|
+
* Callback when stop resizing
|
|
54
|
+
* Pass following prop to re-resizable component
|
|
55
|
+
* (https://github.com/bokuweb/re-resizable)
|
|
56
|
+
*/
|
|
29
57
|
onResizeStop: PropTypes.func,
|
|
58
|
+
/**
|
|
59
|
+
* Callback when start resizing
|
|
60
|
+
* Pass following prop to re-resizable component
|
|
61
|
+
* (https://github.com/bokuweb/re-resizable)
|
|
62
|
+
*/
|
|
30
63
|
onResizeStart: PropTypes.func
|
|
31
64
|
};
|
|
32
65
|
const defaultMobileSize = {
|
|
@@ -71,51 +104,46 @@ const Overlay = ({
|
|
|
71
104
|
if (mobileSize) {
|
|
72
105
|
resizableMobileSize = { ...defaultMobileSize, ...mobileSize };
|
|
73
106
|
}
|
|
74
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, observe ? /* @__PURE__ */ React.createElement(ResizeHandler, {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
107
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, observe ? /* @__PURE__ */ React.createElement(ResizeHandler, { observe, onResize }) : null, isMobile ? /* @__PURE__ */ React.createElement(
|
|
108
|
+
Resizable,
|
|
109
|
+
{
|
|
110
|
+
style: {
|
|
111
|
+
position: "absolute"
|
|
112
|
+
},
|
|
113
|
+
enable: {
|
|
114
|
+
top: isMobileResizable,
|
|
115
|
+
right: false,
|
|
116
|
+
bottom: false,
|
|
117
|
+
left: false,
|
|
118
|
+
topRight: false,
|
|
119
|
+
bottomRight: false,
|
|
120
|
+
bottomLeft: false,
|
|
121
|
+
topLeft: false
|
|
122
|
+
},
|
|
123
|
+
maxHeight: mobileSize && resizableMobileSize.maximalHeight,
|
|
124
|
+
minHeight: mobileSize && resizableMobileSize.minimalHeight,
|
|
125
|
+
handleComponent: {
|
|
126
|
+
top: /* @__PURE__ */ React.createElement("div", { className: "tm-overlay-handler" }, "\u2014")
|
|
127
|
+
},
|
|
128
|
+
onResizeStart,
|
|
129
|
+
onResizeStop,
|
|
130
|
+
handleStyles: {
|
|
131
|
+
top: {
|
|
132
|
+
top: "-20px",
|
|
133
|
+
height: "20px",
|
|
134
|
+
padding: "20px 0",
|
|
135
|
+
width: "100%",
|
|
136
|
+
display: "flex",
|
|
137
|
+
alignItems: "center",
|
|
138
|
+
justifyContent: "center"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
size: resizableMobileSize.size,
|
|
142
|
+
defaultSize: mobileSize && resizableMobileSize.defaultSize,
|
|
143
|
+
className: `tm-overlay-mobile${className ? ` ${className}` : ""}`
|
|
80
144
|
},
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
right: false,
|
|
84
|
-
bottom: false,
|
|
85
|
-
left: false,
|
|
86
|
-
topRight: false,
|
|
87
|
-
bottomRight: false,
|
|
88
|
-
bottomLeft: false,
|
|
89
|
-
topLeft: false
|
|
90
|
-
},
|
|
91
|
-
maxHeight: mobileSize && resizableMobileSize.maximalHeight,
|
|
92
|
-
minHeight: mobileSize && resizableMobileSize.minimalHeight,
|
|
93
|
-
handleComponent: {
|
|
94
|
-
top: /* @__PURE__ */ React.createElement("div", {
|
|
95
|
-
className: "tm-overlay-handler"
|
|
96
|
-
}, "\u2014")
|
|
97
|
-
},
|
|
98
|
-
onResizeStart,
|
|
99
|
-
onResizeStop,
|
|
100
|
-
handleStyles: {
|
|
101
|
-
top: {
|
|
102
|
-
top: "-20px",
|
|
103
|
-
height: "20px",
|
|
104
|
-
padding: "20px 0",
|
|
105
|
-
width: "100%",
|
|
106
|
-
display: "flex",
|
|
107
|
-
alignItems: "center",
|
|
108
|
-
justifyContent: "center"
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
size: resizableMobileSize.size,
|
|
112
|
-
defaultSize: mobileSize && resizableMobileSize.defaultSize,
|
|
113
|
-
className: `tm-overlay-mobile${className ? ` ${className}` : ""}`
|
|
114
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
115
|
-
className: "tm-overlay-mobile-content"
|
|
116
|
-
}, children)) : /* @__PURE__ */ React.createElement("div", {
|
|
117
|
-
className: `tm-overlay${className ? ` ${className}` : ""}`
|
|
118
|
-
}, children));
|
|
145
|
+
/* @__PURE__ */ React.createElement("div", { className: "tm-overlay-mobile-content" }, children)
|
|
146
|
+
) : /* @__PURE__ */ React.createElement("div", { className: `tm-overlay${className ? ` ${className}` : ""}` }, children));
|
|
119
147
|
};
|
|
120
148
|
Overlay.propTypes = propTypes;
|
|
121
149
|
Overlay.defaultProps = defaultProps;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Overlay/Overlay.js"],
|
|
4
4
|
"sourcesContent": ["import React, { Component, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Resizable } from 're-resizable';\nimport ResizeHandler from '../ResizeHandler';\n\nconst propTypes = {\n /**\n * CSS class added to container.\n */\n className: PropTypes.string,\n\n /**\n * Children content of the overlay.\n */\n children: PropTypes.node,\n\n /**\n * Observed element to define screen size.\n */\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\n /**\n * Deactivate the ability to resize the overlay on mobile.\n * /!\\ This prop is only used if isMobile (observer width < 768px).\n */\n isMobileResizable: PropTypes.bool,\n\n /**\n * Size parameters to the Resizable component on mobile.\n * Pass following prop to re-resizable component: 'size', 'defaultSize', 'minHeight' & 'maxHeight'\n * (https://github.com/bokuweb/re-resizable)\n * /!\\ This prop is only used if isMobile (observer width < 768px).\n */\n mobileSize: PropTypes.shape({\n minimalHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n maximalHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n defaultSize: PropTypes.shape({\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n }),\n size: PropTypes.shape({\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n }),\n }),\n\n /**\n * Minimal width to consider the observed as mobile.\n * Default is 768px.\n */\n thresholdWidthForMobile: PropTypes.number,\n\n /**\n * Callback when stop resizing\n * Pass following prop to re-resizable component\n * (https://github.com/bokuweb/re-resizable)\n */\n onResizeStop: PropTypes.func,\n\n /**\n * Callback when start resizing\n * Pass following prop to re-resizable component\n * (https://github.com/bokuweb/re-resizable)\n */\n onResizeStart: PropTypes.func,\n};\n\nconst defaultMobileSize = {\n defaultSize: {\n width: '100%',\n height: '25%',\n },\n size: undefined,\n maximalHeight: '100%',\n minimalHeight: '25%',\n};\n\nconst defaultProps = {\n className: null,\n children: null,\n observe: null,\n isMobileResizable: true,\n mobileSize: defaultMobileSize,\n thresholdWidthForMobile: 768,\n onResizeStop: () => {},\n onResizeStart: () => {},\n};\n\n/**\n * The Overlay component creates a resizable, swipable overlay <div\\>\n */\nconst Overlay = ({\n observe,\n className,\n children,\n isMobileResizable,\n mobileSize,\n onResizeStop,\n onResizeStart,\n thresholdWidthForMobile,\n}) => {\n const [isMobile, setIsMobile] = useState();\n\n const onResize = (entries) => {\n for (let i = 0; i < entries.length; i += 1) {\n const { width } = entries[i].contentRect;\n setIsMobile(width <= thresholdWidthForMobile);\n }\n };\n\n let resizableMobileSize;\n if (mobileSize) {\n resizableMobileSize = { ...defaultMobileSize, ...mobileSize };\n }\n\n return (\n <>\n {observe ? <ResizeHandler observe={observe} onResize={onResize} /> : null}\n {isMobile ? (\n <Resizable\n style={{\n position: 'absolute',\n }}\n enable={{\n top: isMobileResizable,\n right: false,\n bottom: false,\n left: false,\n topRight: false,\n bottomRight: false,\n bottomLeft: false,\n topLeft: false,\n }}\n maxHeight={mobileSize && resizableMobileSize.maximalHeight}\n minHeight={mobileSize && resizableMobileSize.minimalHeight}\n handleComponent={{\n top: <div className=\"tm-overlay-handler\">—</div>,\n }}\n onResizeStart={onResizeStart}\n onResizeStop={onResizeStop}\n handleStyles={{\n top: {\n top: '-20px',\n height: '20px',\n padding: '20px 0',\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n size={resizableMobileSize.size}\n defaultSize={mobileSize && resizableMobileSize.defaultSize}\n className={`tm-overlay-mobile${className ? ` ${className}` : ''}`}\n >\n <div className=\"tm-overlay-mobile-content\">{children}</div>\n </Resizable>\n ) : (\n <div className={`tm-overlay${className ? ` ${className}` : ''}`}>\n {children}\n </div>\n )}\n </>\n );\n};\n\nOverlay.propTypes = propTypes;\nOverlay.defaultProps = defaultProps;\n\nexport default Overlay;\n"],
|
|
5
|
-
"mappings": "AAAA,OAAO,SAAS,WAAW,gBAAgB;AAC3C,OAAO,eAAe;AACtB,SAAS,iBAAiB;AAC1B,OAAO,mBAAmB;AAE1B,MAAM,YAAY;AAAA,EAIhB,WAAW,UAAU;AAAA,EAKrB,UAAU,UAAU;AAAA,EAKpB,SAAS,UAAU,UAAU;AAAA,IAC3B,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU,WAAW,SAAS;AAAA,IAC9B,UAAU,MAAM,EAAE,SAAS,UAAU,KAAK,CAAC;AAAA,IAC3C,UAAU,MAAM,EAAE,SAAS,UAAU,WAAW,SAAS,EAAE,CAAC;AAAA,EAC9D,CAAC;AAAA,EAMD,mBAAmB,UAAU;AAAA,EAQ7B,YAAY,UAAU,MAAM;AAAA,IAC1B,eAAe,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,IACvE,eAAe,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,IACvE,aAAa,UAAU,MAAM;AAAA,MAC3B,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,MAChE,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,IACjE,CAAC;AAAA,IACD,MAAM,UAAU,MAAM;AAAA,MACpB,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,MAChE,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,IACjE,CAAC;AAAA,EACH,CAAC;AAAA,EAMD,yBAAyB,UAAU;AAAA,EAOnC,cAAc,UAAU;AAAA,EAOxB,eAAe,UAAU;AAC3B;AAEA,MAAM,oBAAoB;AAAA,EACxB,aAAa;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,EACN,eAAe;AAAA,EACf,eAAe;AACjB;AAEA,MAAM,eAAe;AAAA,EACnB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,yBAAyB;AAAA,EACzB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,eAAe,MAAM;AAAA,EAAC;AACxB;AAKA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS;AAEzC,QAAM,WAAW,CAAC,YAAY;AAC5B,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;AAC1C,YAAM,EAAE,MAAM,IAAI,QAAQ,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,15 +5,51 @@ import OLMap from "ol/Map";
|
|
|
5
5
|
import { unByKey } from "ol/Observable";
|
|
6
6
|
import { Layer, getLayersAsFlatArray } from "mobility-toolbox-js/ol";
|
|
7
7
|
const propTypes = {
|
|
8
|
+
/**
|
|
9
|
+
* Either 'react-router' history object:
|
|
10
|
+
* https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md<br>
|
|
11
|
+
* or default fallback as HTML5 History:
|
|
12
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/History
|
|
13
|
+
*/
|
|
8
14
|
history: PropTypes.shape({
|
|
9
15
|
replace: PropTypes.func
|
|
10
16
|
}),
|
|
17
|
+
/**
|
|
18
|
+
* Layers provider.
|
|
19
|
+
*/
|
|
11
20
|
layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),
|
|
21
|
+
/**
|
|
22
|
+
* An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
|
|
23
|
+
*/
|
|
12
24
|
map: PropTypes.instanceOf(OLMap),
|
|
25
|
+
/**
|
|
26
|
+
* Params to be written in url.
|
|
27
|
+
*/
|
|
13
28
|
params: PropTypes.object,
|
|
29
|
+
/**
|
|
30
|
+
* Maximum number of decimals allowed for coordinates.
|
|
31
|
+
*/
|
|
14
32
|
coordinateDecimals: PropTypes.number,
|
|
33
|
+
/**
|
|
34
|
+
* Determine if the layer is hidden in the permalink or not.
|
|
35
|
+
*
|
|
36
|
+
* @param {object} item The item to hide or not.
|
|
37
|
+
*
|
|
38
|
+
* @return {bool} true if the item is not displayed in the permalink
|
|
39
|
+
*/
|
|
15
40
|
isLayerHidden: PropTypes.func,
|
|
41
|
+
/**
|
|
42
|
+
* Determine if the layer appears in the baselayers permalink parameter or not.
|
|
43
|
+
*
|
|
44
|
+
* @param {object} item The item to hide or not.
|
|
45
|
+
*
|
|
46
|
+
* @return {bool} true if the item is not displayed in the baselayers permalink parameter
|
|
47
|
+
*/
|
|
16
48
|
isBaseLayer: PropTypes.func,
|
|
49
|
+
/**
|
|
50
|
+
* Custom function to be called when the permalink is updated.
|
|
51
|
+
* This property has priority over the history parameter and window.history.replaceState calls.
|
|
52
|
+
*/
|
|
17
53
|
replace: PropTypes.func
|
|
18
54
|
};
|
|
19
55
|
const defaultProps = {
|
|
@@ -113,6 +149,7 @@ class Permalink extends PureComponent {
|
|
|
113
149
|
}
|
|
114
150
|
this.setState({
|
|
115
151
|
...params,
|
|
152
|
+
// rounds zoom to two digits max.
|
|
116
153
|
z: +`${Math.round(`${parseFloat(mapView.getZoom())}e+2`)}e-2`
|
|
117
154
|
});
|
|
118
155
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Permalink/Permalink.js"],
|
|
4
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": "AAAA,SAAS,qBAAqB;AAC9B,OAAO,eAAe;AACtB,OAAO,QAAQ;AACf,OAAO,WAAW;AAClB,SAAS,eAAe;AACxB,SAAS,OAAO,4BAA4B;AAE5C,MAAM,YAAY;AAAA,EAOhB,SAAS,UAAU,MAAM;AAAA,IACvB,SAAS,UAAU;AAAA,EACrB,CAAC;AAAA,EAKD,QAAQ,UAAU,QAAQ,UAAU,WAAW,KAAK,CAAC;AAAA,EAKrD,KAAK,UAAU,WAAW,KAAK;AAAA,EAK/B,QAAQ,UAAU;AAAA,EAKlB,oBAAoB,UAAU;AAAA,EAS9B,eAAe,UAAU;AAAA,EASzB,aAAa,UAAU;AAAA,EAMvB,SAAS,UAAU;AACrB;AAEA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,KAAK;AAAA,EACL,QAAQ,CAAC;AAAA,EACT,oBAAoB;AAAA,EACpB,eAAe,MAAM;AACnB,WAAO;AAAA,EACT;AAAA,EACA,aAAa,CAAC,UAAU;AACtB,WAAO,MAAM,IAAI,aAAa;AAAA,EAChC;AACF;AASA,MAAM,kBAAkB,cAAc;AAAA,EACpC,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,QAAQ,EAAE,UAAU,EAAE;AAC3B,SAAK,eAAe;AACpB,SAAK,uBAAuB,CAAC;AAAA,EAC/B;AAAA,EAEA,oBAAoB;AAClB,UAAM,EAAE,KAAK,QAAQ,eAAe,YAAY,IAAI,KAAK;AACzD,QAAI,KAAK;AACP,WAAK,aAAa,IAAI,GAAG,WAAW,MAAM;AACxC,aAAK,WAAW;AAAA,MAClB,CAAC;AAAA,IACH;AAEA,QAAI,QAAQ;AAEV,YAAM,YAAY,GAAG,MAAM,OAAO,SAAS,MAAM;AAEjD,UAAI,UAAU,QAAQ;AACpB,cAAM,gBAAgB,UAAU,OAAO,MAAM,GAAG;AAChD,6BAAqB,MAAM,EAAE,QAAQ,CAAC,MAAM;AAC1C,cAAI,cAAc,SAAS,EAAE,GAAG,GAAG;AACjC,gBAAI,EAAE,YAAY;AAChB,gBAAE,WAAW,IAAI;AAAA,YACnB,OAAO;AAEL,gBAAE,UAAU;AAAA,YACd;AAAA,UACF,WACE,CAAC,YAAY,CAAC,KACd,CAAC,cAAc,CAAC,KAChB,CAAC,EAAE,SAAS,KAAK,CAAC,OAAO;AACvB,mBAAO,GAAG;AAAA,UACZ,CAAC,GACD;AACA,gBAAI,EAAE,YAAY;AAChB,gBAAE,WAAW,KAAK;AAAA,YACpB,OAAO;AAEL,gBAAE,UAAU;AAAA,YACd;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAIA,YAAM,oBAAoB,UAAU,cAAc,IAAI,MAAM,GAAG,EAAE;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,21 +6,64 @@ import Feature from "ol/Feature";
|
|
|
6
6
|
import { getCenter } from "ol/extent";
|
|
7
7
|
import { unByKey } from "ol/Observable";
|
|
8
8
|
const propTypes = {
|
|
9
|
+
/**
|
|
10
|
+
* React Children.
|
|
11
|
+
*/
|
|
9
12
|
children: PropTypes.node.isRequired,
|
|
13
|
+
/**
|
|
14
|
+
* An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
|
|
15
|
+
*/
|
|
10
16
|
map: PropTypes.instanceOf(OLMap).isRequired,
|
|
17
|
+
/**
|
|
18
|
+
* An [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).
|
|
19
|
+
*/
|
|
11
20
|
feature: PropTypes.instanceOf(Feature),
|
|
21
|
+
/**
|
|
22
|
+
* Popup title.
|
|
23
|
+
*/
|
|
12
24
|
header: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
25
|
+
/**
|
|
26
|
+
* If true, the popup is panned in the map's viewport.
|
|
27
|
+
*/
|
|
13
28
|
panIntoView: PropTypes.bool,
|
|
29
|
+
/**
|
|
30
|
+
* Custom BoundingClientRect to fit popup into.
|
|
31
|
+
* Use if panIntoView is true. Default is the map's BoundingClientRect.
|
|
32
|
+
*/
|
|
14
33
|
panRect: PropTypes.objectOf(PropTypes.number),
|
|
34
|
+
/**
|
|
35
|
+
* Coordinate position of the popup.
|
|
36
|
+
*/
|
|
15
37
|
popupCoordinate: PropTypes.arrayOf(PropTypes.number),
|
|
38
|
+
/**
|
|
39
|
+
* Class name of the popup.
|
|
40
|
+
*/
|
|
16
41
|
className: PropTypes.string,
|
|
42
|
+
/**
|
|
43
|
+
* Title HTML attributes.
|
|
44
|
+
*/
|
|
17
45
|
titles: PropTypes.shape({
|
|
18
46
|
closeButton: PropTypes.string
|
|
19
47
|
}),
|
|
48
|
+
/**
|
|
49
|
+
* Function triggered on close button click.
|
|
50
|
+
*/
|
|
20
51
|
onCloseClick: PropTypes.func,
|
|
52
|
+
/**
|
|
53
|
+
* HTML tabIndex attribute.
|
|
54
|
+
*/
|
|
21
55
|
tabIndex: PropTypes.string,
|
|
56
|
+
/**
|
|
57
|
+
* Render the header
|
|
58
|
+
*/
|
|
22
59
|
renderHeader: PropTypes.func,
|
|
60
|
+
/**
|
|
61
|
+
* Render the close button
|
|
62
|
+
*/
|
|
23
63
|
renderCloseButton: PropTypes.func,
|
|
64
|
+
/**
|
|
65
|
+
* Render the footer
|
|
66
|
+
*/
|
|
24
67
|
renderFooter: PropTypes.func
|
|
25
68
|
};
|
|
26
69
|
const defaultProps = {
|
|
@@ -43,26 +86,26 @@ const defaultProps = {
|
|
|
43
86
|
class Popup extends PureComponent {
|
|
44
87
|
static renderHeader(props) {
|
|
45
88
|
const { header, renderCloseButton } = props;
|
|
46
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
47
|
-
className: "rs-popup-header"
|
|
48
|
-
}, header, (renderCloseButton || Popup.renderCloseButton)(props));
|
|
89
|
+
return /* @__PURE__ */ React.createElement("div", { className: "rs-popup-header" }, header, (renderCloseButton || Popup.renderCloseButton)(props));
|
|
49
90
|
}
|
|
50
91
|
static renderCloseButton({ onCloseClick, titles }) {
|
|
51
|
-
return /* @__PURE__ */ React.createElement(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
92
|
+
return /* @__PURE__ */ React.createElement(
|
|
93
|
+
"div",
|
|
94
|
+
{
|
|
95
|
+
role: "button",
|
|
96
|
+
tabIndex: 0,
|
|
97
|
+
className: "rs-popup-close-bt",
|
|
98
|
+
title: titles.closeButton,
|
|
99
|
+
"aria-label": titles.closeButton,
|
|
100
|
+
onClick: () => {
|
|
101
|
+
return onCloseClick();
|
|
102
|
+
},
|
|
103
|
+
onKeyPress: (evt) => {
|
|
104
|
+
return evt.which === 13 && onCloseClick();
|
|
105
|
+
}
|
|
59
106
|
},
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
}, /* @__PURE__ */ React.createElement(MdClose, {
|
|
64
|
-
focusable: false
|
|
65
|
-
}));
|
|
107
|
+
/* @__PURE__ */ React.createElement(MdClose, { focusable: false })
|
|
108
|
+
);
|
|
66
109
|
}
|
|
67
110
|
constructor(props) {
|
|
68
111
|
super(props);
|
|
@@ -156,23 +199,31 @@ class Popup extends PureComponent {
|
|
|
156
199
|
delete other.renderCloseButton;
|
|
157
200
|
const { top, left } = this.state;
|
|
158
201
|
const key = feature ? feature.getId() : popupCoordinate.join();
|
|
159
|
-
return /* @__PURE__ */ React.createElement(
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
202
|
+
return /* @__PURE__ */ React.createElement(
|
|
203
|
+
"div",
|
|
204
|
+
{
|
|
205
|
+
className: "rs-popup",
|
|
206
|
+
style: {
|
|
207
|
+
left,
|
|
208
|
+
top
|
|
209
|
+
},
|
|
210
|
+
...other
|
|
164
211
|
},
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
212
|
+
/* @__PURE__ */ React.createElement(
|
|
213
|
+
"div",
|
|
214
|
+
{
|
|
215
|
+
className: "rs-popup-container",
|
|
216
|
+
tabIndex,
|
|
217
|
+
key,
|
|
218
|
+
ref: (popupElement) => {
|
|
219
|
+
this.setState({ popupElement });
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
(renderHeader || Popup.renderHeader)(this.props),
|
|
223
|
+
/* @__PURE__ */ React.createElement("div", { className: "rs-popup-body" }, children),
|
|
224
|
+
renderFooter(this.props)
|
|
225
|
+
)
|
|
226
|
+
);
|
|
176
227
|
}
|
|
177
228
|
}
|
|
178
229
|
Popup.propTypes = propTypes;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Popup/Popup.js"],
|
|
4
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": "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,EAIhB,UAAU,UAAU,KAAK;AAAA,EAKzB,KAAK,UAAU,WAAW,KAAK,EAAE;AAAA,EAKjC,SAAS,UAAU,WAAW,OAAO;AAAA,EAKrC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC;AAAA,EAKjE,aAAa,UAAU;AAAA,EAMvB,SAAS,UAAU,SAAS,UAAU,MAAM;AAAA,EAK5C,iBAAiB,UAAU,QAAQ,UAAU,MAAM;AAAA,EAKnD,WAAW,UAAU;AAAA,EAKrB,QAAQ,UAAU,MAAM;AAAA,IACtB,aAAa,UAAU;AAAA,EACzB,CAAC;AAAA,EAKD,cAAc,UAAU;AAAA,EAKxB,UAAU,UAAU;AAAA,EAKpB,cAAc,UAAU;AAAA,EAKxB,mBAAmB,UAAU;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
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,6 +14,7 @@ const propTypes = {
|
|
|
14
14
|
maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),
|
|
15
15
|
stylePropHeight: PropTypes.string,
|
|
16
16
|
onResize: PropTypes.func,
|
|
17
|
+
// This property is used to re-apply the classes, for example when the className of the observed node changes.
|
|
17
18
|
forceUpdate: PropTypes.oneOfType([
|
|
18
19
|
PropTypes.string,
|
|
19
20
|
PropTypes.number,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/ResizeHandler/ResizeHandler.js"],
|
|
4
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": "AAAA,OAAO,cAAc;AACrB,SAAS,eAAe,iBAAiB;AACzC,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAE3B,MAAM,YAAY;AAAA,EAChB,SAAS,UAAU,UAAU;AAAA,IAC3B,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU,WAAW,SAAS;AAAA,IAC9B,UAAU,MAAM,EAAE,SAAS,UAAU,KAAK,CAAC;AAAA,IAC3C,UAAU,MAAM,EAAE,SAAS,UAAU,WAAW,SAAS,EAAE,CAAC;AAAA,EAC9D,CAAC;AAAA,EACD,iBAAiB,UAAU,SAAS,UAAU,MAAM;AAAA,EACpD,gBAAgB,UAAU,SAAS,UAAU,MAAM;AAAA,EACnD,iBAAiB,UAAU;AAAA,EAC3B,UAAU,UAAU;AAAA,EAGpB,aAAa,UAAU,UAAU;AAAA,IAC/B,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,CAAC;AACH;AAGA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AAAA,IACf,IAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,IAAI;AAAA,EACN;AAAA,EACA,gBAAgB;AAAA,IACd,IAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,IAAI;AAAA,EACN;AAAA,EACA,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,aAAa;AACf;AAIA,MAAM,sBAAsB,cAAc;AAAA,EACxC,OAAO,iBAAiB,OAAO,aAAa,MAAM,WAAW;AAC3D,QAAI,QAAQ;AACZ,QAAI;AACJ,WAAO,QAAQ,WAAW,EAAE,QAAQ,CAAC,UAAU;AAC7C,YAAM,WAAW,MAAM,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|