react-spatial 1.11.0 → 1.11.1-beta.1
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 -62
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map +2 -2
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.scss +1 -0
- package/components/Zoom/Zoom.js +27 -19
- package/components/Zoom/Zoom.js.map +2 -2
- package/package.json +1 -1
|
@@ -37,21 +37,22 @@ const propTypes = {
|
|
|
37
37
|
* Translation function.
|
|
38
38
|
* @param {function} Translation function returning the translated string.
|
|
39
39
|
*/
|
|
40
|
-
t: PropTypes.func
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
40
|
+
t: PropTypes.func,
|
|
41
|
+
/**
|
|
42
|
+
* Callback function on close button click.
|
|
43
|
+
* @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.
|
|
44
|
+
*/
|
|
45
|
+
onCloseButtonClick: PropTypes.func,
|
|
46
|
+
/**
|
|
47
|
+
* Callback function on layer button click.
|
|
48
|
+
* @param {function} Callback function triggered when a switcher button is clicked. Takes the event and the layer as arguments.
|
|
49
|
+
*/
|
|
50
|
+
onLayerButtonClick: PropTypes.func,
|
|
51
|
+
/**
|
|
52
|
+
* Callback function on main switcher button click.
|
|
53
|
+
* @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.
|
|
54
|
+
*/
|
|
55
|
+
onSwitcherButtonClick: PropTypes.func
|
|
55
56
|
};
|
|
56
57
|
const getVisibleLayer = (layers) => {
|
|
57
58
|
return layers.find((layer) => {
|
|
@@ -75,32 +76,55 @@ const getImageStyle = (url) => {
|
|
|
75
76
|
backgroundPosition: "center"
|
|
76
77
|
} : null;
|
|
77
78
|
};
|
|
79
|
+
function CloseButton({ onClick, tabIndex, title, children }) {
|
|
80
|
+
return /* @__PURE__ */ React.createElement(
|
|
81
|
+
"div",
|
|
82
|
+
{
|
|
83
|
+
className: "rs-base-layer-switcher-close-btn",
|
|
84
|
+
role: "button",
|
|
85
|
+
onClick,
|
|
86
|
+
onKeyPress: (e) => {
|
|
87
|
+
return e.which === 13 && onClick();
|
|
88
|
+
},
|
|
89
|
+
tabIndex,
|
|
90
|
+
"aria-label": title,
|
|
91
|
+
title
|
|
92
|
+
},
|
|
93
|
+
children
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
CloseButton.propTypes = {
|
|
97
|
+
onClick: PropTypes.func.isRequired,
|
|
98
|
+
tabIndex: PropTypes.string.isRequired,
|
|
99
|
+
title: PropTypes.string.isRequired,
|
|
100
|
+
children: PropTypes.node.isRequired
|
|
101
|
+
};
|
|
78
102
|
function BaseLayerSwitcher({
|
|
79
103
|
layers,
|
|
80
|
-
layerImages,
|
|
81
|
-
className,
|
|
82
|
-
altText,
|
|
83
|
-
titles
|
|
84
|
-
|
|
85
|
-
|
|
104
|
+
layerImages = void 0,
|
|
105
|
+
className = "rs-base-layer-switcher",
|
|
106
|
+
altText = "Source not found",
|
|
107
|
+
titles = {
|
|
108
|
+
button: "Base layers",
|
|
109
|
+
openSwitcher: "Open Baselayer-Switcher",
|
|
110
|
+
closeSwitcher: "Close Baselayer-Switcher"
|
|
111
|
+
},
|
|
112
|
+
closeButtonImage = /* @__PURE__ */ React.createElement(FaChevronLeft, null),
|
|
113
|
+
onCloseButtonClick = () => {
|
|
114
|
+
},
|
|
115
|
+
onLayerButtonClick = () => {
|
|
116
|
+
},
|
|
117
|
+
onSwitcherButtonClick = () => {
|
|
118
|
+
},
|
|
119
|
+
t = (s) => {
|
|
120
|
+
return s;
|
|
121
|
+
}
|
|
86
122
|
}) {
|
|
87
123
|
const [switcherOpen, setSwitcherOpen] = useState(false);
|
|
88
124
|
const [isClosed, setIsClosed] = useState(true);
|
|
89
125
|
const [currentLayer, setCurrentLayer] = useState(
|
|
90
126
|
getVisibleLayer(layers) || layers[0]
|
|
91
127
|
);
|
|
92
|
-
useEffect(() => {
|
|
93
|
-
const olKeys = (layers || []).map((layer) => {
|
|
94
|
-
return layer.on("change:visible", (evt) => {
|
|
95
|
-
if (evt.target.visible && currentLayer !== evt.target) {
|
|
96
|
-
setCurrentLayer(evt.target);
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
});
|
|
100
|
-
return () => {
|
|
101
|
-
unByKey(olKeys);
|
|
102
|
-
};
|
|
103
|
-
}, [currentLayer, layers]);
|
|
104
128
|
const images = layerImages ? Object.keys(layerImages).map((layerImage) => {
|
|
105
129
|
return layerImages[layerImage];
|
|
106
130
|
}) : layers.map((layer) => {
|
|
@@ -108,11 +132,13 @@ function BaseLayerSwitcher({
|
|
|
108
132
|
});
|
|
109
133
|
const openClass = switcherOpen ? " rs-open" : "";
|
|
110
134
|
const hiddenStyle = switcherOpen && !isClosed ? "visible" : "hidden";
|
|
111
|
-
const handleSwitcherClick = () => {
|
|
135
|
+
const handleSwitcherClick = (evt) => {
|
|
136
|
+
const nextLayer = layers.find((layer) => {
|
|
137
|
+
return !layer.visible;
|
|
138
|
+
});
|
|
139
|
+
const onButtonClick = layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;
|
|
140
|
+
onButtonClick(evt, nextLayer);
|
|
112
141
|
if (layers.length === 2) {
|
|
113
|
-
const nextLayer = layers.find((layer) => {
|
|
114
|
-
return !layer.visible;
|
|
115
|
-
});
|
|
116
142
|
if (currentLayer.setVisible) {
|
|
117
143
|
currentLayer.setVisible(false);
|
|
118
144
|
} else {
|
|
@@ -128,7 +154,8 @@ function BaseLayerSwitcher({
|
|
|
128
154
|
}
|
|
129
155
|
return setSwitcherOpen(true) && setIsClosed(false);
|
|
130
156
|
};
|
|
131
|
-
const onLayerSelect = (layer) => {
|
|
157
|
+
const onLayerSelect = (layer, evt) => {
|
|
158
|
+
onLayerButtonClick(evt, layer);
|
|
132
159
|
if (!switcherOpen) {
|
|
133
160
|
setSwitcherOpen(true);
|
|
134
161
|
return;
|
|
@@ -171,26 +198,21 @@ function BaseLayerSwitcher({
|
|
|
171
198
|
return clearTimeout(timeout);
|
|
172
199
|
};
|
|
173
200
|
}, [switcherOpen]);
|
|
201
|
+
useEffect(() => {
|
|
202
|
+
const olKeys = (layers || []).map((layer) => {
|
|
203
|
+
return layer.on("change:visible", (evt) => {
|
|
204
|
+
if (evt.target.visible && currentLayer !== evt.target) {
|
|
205
|
+
setCurrentLayer(evt.target);
|
|
206
|
+
}
|
|
207
|
+
});
|
|
208
|
+
});
|
|
209
|
+
return () => {
|
|
210
|
+
unByKey(olKeys);
|
|
211
|
+
};
|
|
212
|
+
}, [currentLayer, layers]);
|
|
174
213
|
if (!layers || layers.length < 2 || !currentLayer) {
|
|
175
214
|
return null;
|
|
176
215
|
}
|
|
177
|
-
const toggleBtn = /* @__PURE__ */ React.createElement("div", { className: "rs-base-layer-switcher-btn-wrapper" }, /* @__PURE__ */ React.createElement(
|
|
178
|
-
"div",
|
|
179
|
-
{
|
|
180
|
-
className: "rs-base-layer-switcher-close-btn",
|
|
181
|
-
role: "button",
|
|
182
|
-
onClick: () => {
|
|
183
|
-
return setSwitcherOpen(false);
|
|
184
|
-
},
|
|
185
|
-
onKeyPress: (e) => {
|
|
186
|
-
return e.which === 13 && setSwitcherOpen(false);
|
|
187
|
-
},
|
|
188
|
-
tabIndex: switcherOpen ? "0" : "-1",
|
|
189
|
-
"aria-label": titles.closeSwitcher,
|
|
190
|
-
title: titles.closeSwitcher
|
|
191
|
-
},
|
|
192
|
-
closeButtonImage
|
|
193
|
-
));
|
|
194
216
|
return /* @__PURE__ */ React.createElement("div", { className: `${className}${openClass}` }, /* @__PURE__ */ React.createElement(
|
|
195
217
|
"div",
|
|
196
218
|
{
|
|
@@ -240,12 +262,12 @@ function BaseLayerSwitcher({
|
|
|
240
262
|
role: "button",
|
|
241
263
|
title: t(layerName),
|
|
242
264
|
"aria-label": t(layerName),
|
|
243
|
-
onClick: () => {
|
|
244
|
-
return onLayerSelect(layer);
|
|
265
|
+
onClick: (evt) => {
|
|
266
|
+
return onLayerSelect(layer, evt);
|
|
245
267
|
},
|
|
246
|
-
onKeyPress: (
|
|
247
|
-
if (
|
|
248
|
-
onLayerSelect(layer);
|
|
268
|
+
onKeyPress: (evt) => {
|
|
269
|
+
if (evt.which === 13) {
|
|
270
|
+
onLayerSelect(layer, evt);
|
|
249
271
|
}
|
|
250
272
|
},
|
|
251
273
|
style: imageStyle,
|
|
@@ -255,8 +277,18 @@ function BaseLayerSwitcher({
|
|
|
255
277
|
imageStyle ? null : /* @__PURE__ */ React.createElement("span", { className: "rs-alt-text" }, t(altText))
|
|
256
278
|
)
|
|
257
279
|
);
|
|
258
|
-
}),
|
|
280
|
+
}), /* @__PURE__ */ React.createElement(
|
|
281
|
+
CloseButton,
|
|
282
|
+
{
|
|
283
|
+
onClick: (evt) => {
|
|
284
|
+
onCloseButtonClick(evt);
|
|
285
|
+
setSwitcherOpen(false);
|
|
286
|
+
},
|
|
287
|
+
tabIndex: switcherOpen ? "0" : "-1",
|
|
288
|
+
title: titles.closeSwitcher
|
|
289
|
+
},
|
|
290
|
+
closeButtonImage
|
|
291
|
+
));
|
|
259
292
|
}
|
|
260
293
|
BaseLayerSwitcher.propTypes = propTypes;
|
|
261
|
-
BaseLayerSwitcher.defaultProps = defaultProps;
|
|
262
294
|
export default BaseLayerSwitcher;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/BaseLayerSwitcher/BaseLayerSwitcher.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/interactive-supports-focus */\nimport React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FaChevronLeft } from \"react-icons/fa\";\nimport { Layer } from \"mobility-toolbox-js/ol\";\nimport { unByKey } from \"ol/Observable\";\n\nconst propTypes = {\n /**\n * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,\n\n /**\n * Object containing relative paths to the base layer images. Object\n * keys need to correspond to layer keys\n */\n layerImages: PropTypes.objectOf(PropTypes.string),\n\n /**\n * CSS class to apply on the container.\n */\n className: PropTypes.string,\n\n /**\n * Alternative text rendered if layer images can't be loaded\n */\n altText: PropTypes.string,\n\n /**\n * Button titles.\n */\n titles: PropTypes.shape({\n button: PropTypes.string,\n openSwitcher: PropTypes.string,\n closeSwitcher: PropTypes.string,\n }),\n\n /**\n * Image (node) rendered in the switcher close button.\n */\n closeButtonImage: PropTypes.node,\n\n /**\n * Translation function.\n * @param {function} Translation function returning the translated string.\n */\n t: PropTypes.func,\n};\n\nconst defaultProps = {\n className: \"rs-base-layer-switcher\",\n altText: \"Source not found\",\n titles: {\n button: \"Base layers\",\n openSwitcher: \"Open Baselayer-Switcher\",\n closeSwitcher: \"Close Baselayer-Switcher\",\n },\n closeButtonImage: <FaChevronLeft />,\n layerImages: undefined,\n t: (s) => {\n return s;\n },\n};\n\nconst getVisibleLayer = (layers) => {\n return layers.find((layer) => {\n return layer.visible;\n });\n};\n\nconst getNextImage = (currentLayer, layers, layerImages) => {\n const currentIndex = layers.indexOf(\n layers.find((layer) => {\n return layer === currentLayer;\n }),\n );\n const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;\n return layerImages[nextIndex];\n};\n\nconst getImageStyle = (url) => {\n return url\n ? {\n backgroundImage: `url(${url})`,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"center\",\n }\n : null;\n};\n\n/**\n * The BaseLayerSwitcher component renders a button interface for switching the visible\n * [mobility-toolbox-js layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * when defined as base layer.\n */\n\nfunction BaseLayerSwitcher({\n layers,\n layerImages,\n className,\n altText,\n titles,\n closeButtonImage,\n t,\n}) {\n const [switcherOpen, setSwitcherOpen] = useState(false);\n const [isClosed, setIsClosed] = useState(true);\n const [currentLayer, setCurrentLayer] = useState(\n getVisibleLayer(layers) || layers[0],\n );\n\n useEffect(() => {\n // Update the layer selected when a visibility changes.\n const olKeys = (layers || []).map((layer) => {\n return layer.on(\"change:visible\", (evt) => {\n if (evt.target.visible && currentLayer !== evt.target) {\n setCurrentLayer(evt.target);\n }\n });\n });\n return () => {\n unByKey(olKeys);\n };\n }, [currentLayer, layers]);\n\n /* Images are loaded from props if provided, fallback from layer */\n const images = layerImages\n ? Object.keys(layerImages).map((layerImage) => {\n return layerImages[layerImage];\n })\n : layers.map((layer) => {\n return layer.get(\"previewImage\");\n });\n\n const openClass = switcherOpen ? \" rs-open\" : \"\";\n const hiddenStyle = switcherOpen && !isClosed ? \"visible\" : \"hidden\";\n\n const handleSwitcherClick = () => {\n if (layers.length === 2) {\n /* On only two layer options the opener becomes a layer toggle button */\n const nextLayer = layers.find((layer) => {\n return !layer.visible;\n });\n if (currentLayer.setVisible) {\n currentLayer.setVisible(false);\n } else {\n currentLayer.visible = false;\n }\n setCurrentLayer(nextLayer);\n if (nextLayer.setVisible) {\n nextLayer.setVisible(true);\n } else {\n nextLayer.visible = true;\n }\n return;\n }\n // eslint-disable-next-line consistent-return\n return setSwitcherOpen(true) && setIsClosed(false);\n };\n\n const onLayerSelect = (layer) => {\n if (!switcherOpen) {\n setSwitcherOpen(true);\n return;\n }\n setCurrentLayer(layer);\n if (layer.setVisible) {\n layer.setVisible(true);\n } else {\n // eslint-disable-next-line no-param-reassign\n layer.visible = true;\n }\n layers\n .filter((l) => {\n return l !== layer;\n })\n .forEach((l) => {\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 setSwitcherOpen(false);\n };\n\n /* Get next image for closed button */\n const nextImage = getNextImage(currentLayer, layers, images);\n\n useEffect(() => {\n /* Ensure correct layer is active on app load */\n if (currentLayer !== getVisibleLayer(layers)) {\n setCurrentLayer(getVisibleLayer(layers) || layers[0]);\n }\n }, [currentLayer, layers]);\n\n useEffect(() => {\n /* Used for correct layer image render with animation */\n let timeout;\n if (!switcherOpen) {\n timeout = setTimeout(() => {\n setIsClosed(true);\n }, 200);\n } else {\n timeout = setTimeout(() => {\n setIsClosed(false);\n }, 800);\n }\n return () => {\n return clearTimeout(timeout);\n };\n }, [switcherOpen]);\n\n if (!layers || layers.length < 2 || !currentLayer) {\n return null;\n }\n\n const toggleBtn = (\n <div className=\"rs-base-layer-switcher-btn-wrapper\">\n <div\n className=\"rs-base-layer-switcher-close-btn\"\n role=\"button\"\n onClick={() => {\n return setSwitcherOpen(false);\n }}\n onKeyPress={(e) => {\n return e.which === 13 && setSwitcherOpen(false);\n }}\n tabIndex={switcherOpen ? \"0\" : \"-1\"}\n aria-label={titles.closeSwitcher}\n title={titles.closeSwitcher}\n >\n {closeButtonImage}\n </div>\n </div>\n );\n\n return (\n <div className={`${className}${openClass}`}>\n <div\n className={`rs-base-layer-switcher-button rs-opener${openClass}`}\n role=\"button\"\n title={titles.openSwitcher}\n aria-label={titles.openSwitcher}\n onClick={handleSwitcherClick}\n onKeyPress={(e) => {\n if (e.which === 13) {\n handleSwitcherClick();\n }\n }}\n style={getImageStyle(nextImage)}\n tabIndex=\"0\"\n >\n <div className=\"rs-base-layer-switcher-title\">\n {layers.length !== 2\n ? titles.button\n : layers.find((layer) => {\n return !layer.visible;\n }) &&\n t(\n layers.find((layer) => {\n return !layer.visible;\n }).name,\n )}\n </div>\n {nextImage ? null : <span className=\"rs-alt-text\">{t(altText)}</span>}\n </div>\n {layers.map((layer, idx) => {\n const layerName = layer.name;\n const activeClass = layerName === currentLayer.name ? \" rs-active\" : \"\";\n const imageStyle = getImageStyle(\n layerImages ? layerImages[`${layer.key}`] : layer.get(\"previewImage\"),\n );\n return (\n <div\n key={layer.key}\n className=\"rs-base-layer-switcher-btn-wrapper\"\n style={{\n /* stylelint-disable-next-line value-keyword-case */\n overflow: hiddenStyle,\n /* stylelint-disable-next-line value-keyword-case */\n zIndex: layers.length - idx,\n }}\n >\n <div\n className={`rs-base-layer-switcher-button${openClass}`}\n role=\"button\"\n title={t(layerName)}\n aria-label={t(layerName)}\n onClick={() => {\n return onLayerSelect(layer);\n }}\n onKeyPress={(e) => {\n if (e.which === 13) {\n onLayerSelect(layer);\n }\n }}\n style={imageStyle}\n tabIndex={switcherOpen ? \"0\" : \"-1\"}\n >\n <div className={`rs-base-layer-switcher-title${activeClass}`}>\n {t(layerName)}\n </div>\n {imageStyle ? null : (\n <span className=\"rs-alt-text\">{t(altText)}</span>\n )}\n </div>\n </div>\n );\n })}\n {toggleBtn}\n </div>\n );\n}\n\nBaseLayerSwitcher.propTypes = propTypes;\nBaseLayerSwitcher.defaultProps = defaultProps;\n\nexport default BaseLayerSwitcher;\n"],
|
|
5
|
-
"mappings": "AACA,OAAO,SAAS,UAAU,iBAAiB;AAC3C,OAAO,eAAe;AACtB,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,eAAe;AAExB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,EAIhB,QAAQ,UAAU,QAAQ,UAAU,WAAW,KAAK,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMvD,aAAa,UAAU,SAAS,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA,EAKhD,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,EAKrB,SAAS,UAAU;AAAA;AAAA;AAAA;AAAA,EAKnB,QAAQ,UAAU,MAAM;AAAA,IACtB,QAAQ,UAAU;AAAA,IAClB,cAAc,UAAU;AAAA,IACxB,eAAe,UAAU;AAAA,EAC3B,CAAC;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAM5B,GAAG,UAAU;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable jsx-a11y/interactive-supports-focus */\nimport React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FaChevronLeft } from \"react-icons/fa\";\nimport { Layer } from \"mobility-toolbox-js/ol\";\nimport { unByKey } from \"ol/Observable\";\n\nconst propTypes = {\n /**\n * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,\n\n /**\n * Object containing relative paths to the base layer images. Object\n * keys need to correspond to layer keys\n */\n layerImages: PropTypes.objectOf(PropTypes.string),\n\n /**\n * CSS class to apply on the container.\n */\n className: PropTypes.string,\n\n /**\n * Alternative text rendered if layer images can't be loaded\n */\n altText: PropTypes.string,\n\n /**\n * Button titles.\n */\n titles: PropTypes.shape({\n button: PropTypes.string,\n openSwitcher: PropTypes.string,\n closeSwitcher: PropTypes.string,\n }),\n\n /**\n * Image (node) rendered in the switcher close button.\n */\n closeButtonImage: PropTypes.node,\n\n /**\n * Translation function.\n * @param {function} Translation function returning the translated string.\n */\n t: PropTypes.func,\n\n /**\n * Callback function on close button click.\n * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n */\n onCloseButtonClick: PropTypes.func,\n\n /**\n * Callback function on layer button click.\n * @param {function} Callback function triggered when a switcher button is clicked. Takes the event and the layer as arguments.\n */\n onLayerButtonClick: PropTypes.func,\n\n /**\n * Callback function on main switcher button click.\n * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n */\n onSwitcherButtonClick: PropTypes.func,\n};\n\nconst getVisibleLayer = (layers) => {\n return layers.find((layer) => {\n return layer.visible;\n });\n};\n\nconst getNextImage = (currentLayer, layers, layerImages) => {\n const currentIndex = layers.indexOf(\n layers.find((layer) => {\n return layer === currentLayer;\n }),\n );\n const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;\n return layerImages[nextIndex];\n};\n\nconst getImageStyle = (url) => {\n return url\n ? {\n backgroundImage: `url(${url})`,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"center\",\n }\n : null;\n};\n\nfunction CloseButton({ onClick, tabIndex, title, children }) {\n return (\n <div\n className=\"rs-base-layer-switcher-close-btn\"\n role=\"button\"\n onClick={onClick}\n onKeyPress={(e) => {\n return e.which === 13 && onClick();\n }}\n tabIndex={tabIndex}\n aria-label={title}\n title={title}\n >\n {children}\n </div>\n );\n}\n\nCloseButton.propTypes = {\n onClick: PropTypes.func.isRequired,\n tabIndex: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n children: PropTypes.node.isRequired,\n};\n\n/**\n * The BaseLayerSwitcher component renders a button interface for switching the visible\n * [mobility-toolbox-js layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * when defined as base layer.\n */\n\nfunction BaseLayerSwitcher({\n layers,\n layerImages = undefined,\n className = \"rs-base-layer-switcher\",\n altText = \"Source not found\",\n titles = {\n button: \"Base layers\",\n openSwitcher: \"Open Baselayer-Switcher\",\n closeSwitcher: \"Close Baselayer-Switcher\",\n },\n closeButtonImage = <FaChevronLeft />,\n onCloseButtonClick = () => {},\n onLayerButtonClick = () => {},\n onSwitcherButtonClick = () => {},\n t = (s) => {\n return s;\n },\n}) {\n const [switcherOpen, setSwitcherOpen] = useState(false);\n const [isClosed, setIsClosed] = useState(true);\n const [currentLayer, setCurrentLayer] = useState(\n getVisibleLayer(layers) || layers[0],\n );\n\n /* Images are loaded from props if provided, fallback from layer */\n const images = layerImages\n ? Object.keys(layerImages).map((layerImage) => {\n return layerImages[layerImage];\n })\n : layers.map((layer) => {\n return layer.get(\"previewImage\");\n });\n\n const openClass = switcherOpen ? \" rs-open\" : \"\";\n const hiddenStyle = switcherOpen && !isClosed ? \"visible\" : \"hidden\";\n\n const handleSwitcherClick = (evt) => {\n const nextLayer = layers.find((layer) => {\n return !layer.visible;\n });\n const onButtonClick =\n layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;\n onButtonClick(evt, nextLayer);\n if (layers.length === 2) {\n /* On only two layer options the opener becomes a layer toggle button */\n if (currentLayer.setVisible) {\n currentLayer.setVisible(false);\n } else {\n currentLayer.visible = false;\n }\n setCurrentLayer(nextLayer);\n if (nextLayer.setVisible) {\n nextLayer.setVisible(true);\n } else {\n nextLayer.visible = true;\n }\n return;\n }\n // eslint-disable-next-line consistent-return\n return setSwitcherOpen(true) && setIsClosed(false);\n };\n\n const onLayerSelect = (layer, evt) => {\n onLayerButtonClick(evt, layer);\n if (!switcherOpen) {\n setSwitcherOpen(true);\n return;\n }\n setCurrentLayer(layer);\n if (layer.setVisible) {\n layer.setVisible(true);\n } else {\n // eslint-disable-next-line no-param-reassign\n layer.visible = true;\n }\n layers\n .filter((l) => {\n return l !== layer;\n })\n .forEach((l) => {\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 setSwitcherOpen(false);\n };\n\n /* Get next image for closed button */\n const nextImage = getNextImage(currentLayer, layers, images);\n\n useEffect(() => {\n /* Ensure correct layer is active on app load */\n if (currentLayer !== getVisibleLayer(layers)) {\n setCurrentLayer(getVisibleLayer(layers) || layers[0]);\n }\n }, [currentLayer, layers]);\n\n useEffect(() => {\n /* Used for correct layer image render with animation */\n let timeout;\n if (!switcherOpen) {\n timeout = setTimeout(() => {\n setIsClosed(true);\n }, 200);\n } else {\n timeout = setTimeout(() => {\n setIsClosed(false);\n }, 800);\n }\n return () => {\n return clearTimeout(timeout);\n };\n }, [switcherOpen]);\n\n useEffect(() => {\n // Update the layer selected when a visibility changes.\n const olKeys = (layers || []).map((layer) => {\n return layer.on(\"change:visible\", (evt) => {\n if (evt.target.visible && currentLayer !== evt.target) {\n setCurrentLayer(evt.target);\n }\n });\n });\n return () => {\n unByKey(olKeys);\n };\n }, [currentLayer, layers]);\n\n if (!layers || layers.length < 2 || !currentLayer) {\n return null;\n }\n\n return (\n <div className={`${className}${openClass}`}>\n <div\n className={`rs-base-layer-switcher-button rs-opener${openClass}`}\n role=\"button\"\n title={titles.openSwitcher}\n aria-label={titles.openSwitcher}\n onClick={handleSwitcherClick}\n onKeyPress={(e) => {\n if (e.which === 13) {\n handleSwitcherClick();\n }\n }}\n style={getImageStyle(nextImage)}\n tabIndex=\"0\"\n >\n <div className=\"rs-base-layer-switcher-title\">\n {layers.length !== 2\n ? titles.button\n : layers.find((layer) => {\n return !layer.visible;\n }) &&\n t(\n layers.find((layer) => {\n return !layer.visible;\n }).name,\n )}\n </div>\n {nextImage ? null : <span className=\"rs-alt-text\">{t(altText)}</span>}\n </div>\n {layers.map((layer, idx) => {\n const layerName = layer.name;\n const activeClass = layerName === currentLayer.name ? \" rs-active\" : \"\";\n const imageStyle = getImageStyle(\n layerImages ? layerImages[`${layer.key}`] : layer.get(\"previewImage\"),\n );\n return (\n <div\n key={layer.key}\n className=\"rs-base-layer-switcher-btn-wrapper\"\n style={{\n /* stylelint-disable-next-line value-keyword-case */\n overflow: hiddenStyle,\n /* stylelint-disable-next-line value-keyword-case */\n zIndex: layers.length - idx,\n }}\n >\n <div\n className={`rs-base-layer-switcher-button${openClass}`}\n role=\"button\"\n title={t(layerName)}\n aria-label={t(layerName)}\n onClick={(evt) => {\n return onLayerSelect(layer, evt);\n }}\n onKeyPress={(evt) => {\n if (evt.which === 13) {\n onLayerSelect(layer, evt);\n }\n }}\n style={imageStyle}\n tabIndex={switcherOpen ? \"0\" : \"-1\"}\n >\n <div className={`rs-base-layer-switcher-title${activeClass}`}>\n {t(layerName)}\n </div>\n {imageStyle ? null : (\n <span className=\"rs-alt-text\">{t(altText)}</span>\n )}\n </div>\n </div>\n );\n })}\n <CloseButton\n onClick={(evt) => {\n onCloseButtonClick(evt);\n setSwitcherOpen(false);\n }}\n tabIndex={switcherOpen ? \"0\" : \"-1\"}\n title={titles.closeSwitcher}\n >\n {closeButtonImage}\n </CloseButton>\n </div>\n );\n}\n\nBaseLayerSwitcher.propTypes = propTypes;\n\nexport default BaseLayerSwitcher;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/components/Zoom/Zoom.js
CHANGED
|
@@ -38,17 +38,17 @@ const propTypes = {
|
|
|
38
38
|
/**
|
|
39
39
|
* Display a slider to zoom.
|
|
40
40
|
*/
|
|
41
|
-
zoomSlider: PropTypes.bool
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
41
|
+
zoomSlider: PropTypes.bool,
|
|
42
|
+
/**
|
|
43
|
+
* Callback function on zoom-in button click.
|
|
44
|
+
* @param {function} Callback function triggered when zoom-in button is clicked. Takes the event as argument.
|
|
45
|
+
*/
|
|
46
|
+
onZoomInButtonClick: PropTypes.func,
|
|
47
|
+
/**
|
|
48
|
+
* Callback function on zoom-out button click.
|
|
49
|
+
* @param {function} Callback function triggered when the zoom-out button is clicked. Takes the event as argument.
|
|
50
|
+
*/
|
|
51
|
+
onZoomOutButtonClick: PropTypes.func
|
|
52
52
|
};
|
|
53
53
|
const updateZoom = (map, delta) => {
|
|
54
54
|
const view = map.getView();
|
|
@@ -66,30 +66,39 @@ const updateZoom = (map, delta) => {
|
|
|
66
66
|
};
|
|
67
67
|
function Zoom({
|
|
68
68
|
map,
|
|
69
|
-
titles
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
titles = {
|
|
70
|
+
zoomIn: "Zoom in",
|
|
71
|
+
zoomOut: "Zoom out"
|
|
72
|
+
},
|
|
73
|
+
zoomInChildren = /* @__PURE__ */ React.createElement(FaPlus, { focusable: false }),
|
|
74
|
+
zoomOutChildren = /* @__PURE__ */ React.createElement(FaMinus, { focusable: false }),
|
|
75
|
+
zoomSlider = false,
|
|
76
|
+
onZoomInButtonClick = () => {
|
|
77
|
+
},
|
|
78
|
+
onZoomOutButtonClick = () => {
|
|
79
|
+
},
|
|
80
|
+
delta = 1,
|
|
74
81
|
...other
|
|
75
82
|
}) {
|
|
76
83
|
const ref = useRef();
|
|
77
84
|
const [currentZoom, setZoom] = useState();
|
|
78
85
|
const zoomIn = useCallback(
|
|
79
86
|
(evt) => {
|
|
87
|
+
onZoomInButtonClick(evt);
|
|
80
88
|
if (!evt.which || evt.which === 13) {
|
|
81
89
|
updateZoom(map, delta);
|
|
82
90
|
}
|
|
83
91
|
},
|
|
84
|
-
[delta, map]
|
|
92
|
+
[delta, map, onZoomInButtonClick]
|
|
85
93
|
);
|
|
86
94
|
const zoomOut = useCallback(
|
|
87
95
|
(evt) => {
|
|
96
|
+
onZoomOutButtonClick(evt);
|
|
88
97
|
if (!evt.which || evt.which === 13) {
|
|
89
98
|
updateZoom(map, -delta);
|
|
90
99
|
}
|
|
91
100
|
},
|
|
92
|
-
[delta, map]
|
|
101
|
+
[delta, map, onZoomOutButtonClick]
|
|
93
102
|
);
|
|
94
103
|
const zoomInDisabled = useMemo(() => {
|
|
95
104
|
return currentZoom >= map.getView().getConstrainedZoom(map.getView().getMaxZoom());
|
|
@@ -145,5 +154,4 @@ function Zoom({
|
|
|
145
154
|
);
|
|
146
155
|
}
|
|
147
156
|
Zoom.propTypes = propTypes;
|
|
148
|
-
Zoom.defaultProps = defaultProps;
|
|
149
157
|
export default React.memo(Zoom);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Zoom/Zoom.js"],
|
|
4
|
-
"sourcesContent": ["import React, {\n useEffect,\n useRef,\n useCallback,\n useState,\n useMemo,\n} from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FaPlus, FaMinus } from \"react-icons/fa\";\nimport { ZoomSlider } from \"ol/control\";\nimport OLMap from \"ol/Map\";\nimport { easeOut } from \"ol/easing\";\nimport { unByKey } from \"ol/Observable\";\n\nconst propTypes = {\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 * The zoom delta applied on each click.\n */\n delta: PropTypes.number,\n\n /**\n * Titles HTML attribtues for button.\n */\n titles: PropTypes.shape({\n zoomIn: PropTypes.string,\n zoomOut: PropTypes.string,\n }),\n\n /**\n * Children content of the zoom in button.\n */\n zoomInChildren: PropTypes.node,\n\n /**\n * Children content of the zoom out button.\n */\n zoomOutChildren: PropTypes.node,\n\n /**\n * Display a slider to zoom.\n */\n zoomSlider: PropTypes.bool,\n
|
|
5
|
-
"mappings": "AAAA,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,eAAe;AACtB,SAAS,QAAQ,eAAe;AAChC,SAAS,kBAAkB;AAC3B,OAAO,WAAW;AAClB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,EAIhB,KAAK,UAAU,WAAW,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA,EAKjC,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,EAKjB,QAAQ,UAAU,MAAM;AAAA,IACtB,QAAQ,UAAU;AAAA,IAClB,SAAS,UAAU;AAAA,EACrB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKD,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA,EAK1B,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA,EAK3B,YAAY,UAAU;
|
|
4
|
+
"sourcesContent": ["import React, {\n useEffect,\n useRef,\n useCallback,\n useState,\n useMemo,\n} from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FaPlus, FaMinus } from \"react-icons/fa\";\nimport { ZoomSlider } from \"ol/control\";\nimport OLMap from \"ol/Map\";\nimport { easeOut } from \"ol/easing\";\nimport { unByKey } from \"ol/Observable\";\n\nconst propTypes = {\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 * The zoom delta applied on each click.\n */\n delta: PropTypes.number,\n\n /**\n * Titles HTML attribtues for button.\n */\n titles: PropTypes.shape({\n zoomIn: PropTypes.string,\n zoomOut: PropTypes.string,\n }),\n\n /**\n * Children content of the zoom in button.\n */\n zoomInChildren: PropTypes.node,\n\n /**\n * Children content of the zoom out button.\n */\n zoomOutChildren: PropTypes.node,\n\n /**\n * Display a slider to zoom.\n */\n zoomSlider: PropTypes.bool,\n\n /**\n * Callback function on zoom-in button click.\n * @param {function} Callback function triggered when zoom-in button is clicked. Takes the event as argument.\n */\n onZoomInButtonClick: PropTypes.func,\n\n /**\n * Callback function on zoom-out button click.\n * @param {function} Callback function triggered when the zoom-out button is clicked. Takes the event as argument.\n */\n onZoomOutButtonClick: PropTypes.func,\n};\n\nconst updateZoom = (map, delta) => {\n const view = map.getView();\n const currentZoom = view.getZoom();\n const newZoom = currentZoom + delta;\n const constrainedZoom = view.getConstrainedZoom(newZoom);\n if (view.getAnimating()) {\n view.cancelAnimations();\n }\n view.animate({\n zoom: constrainedZoom,\n duration: 250,\n easing: easeOut,\n });\n};\n\n/**\n * The Zoom component creates a zoom wrapper containing zoom-in and zoom-out buttons\n * and an optional [ol/ZoomSlider](https://openlayers.org/en/latest/apidoc/module-ol_control_ZoomSlider-ZoomSlider.html).\n */\nfunction Zoom({\n map,\n titles = {\n zoomIn: \"Zoom in\",\n zoomOut: \"Zoom out\",\n },\n zoomInChildren = <FaPlus focusable={false} />,\n zoomOutChildren = <FaMinus focusable={false} />,\n zoomSlider = false,\n onZoomInButtonClick = () => {},\n onZoomOutButtonClick = () => {},\n delta = 1,\n ...other\n}) {\n const ref = useRef();\n const [currentZoom, setZoom] = useState();\n\n const zoomIn = useCallback(\n (evt) => {\n onZoomInButtonClick(evt);\n if (!evt.which || evt.which === 13) {\n updateZoom(map, delta);\n }\n },\n [delta, map, onZoomInButtonClick],\n );\n\n const zoomOut = useCallback(\n (evt) => {\n onZoomOutButtonClick(evt);\n if (!evt.which || evt.which === 13) {\n updateZoom(map, -delta);\n }\n },\n [delta, map, onZoomOutButtonClick],\n );\n\n const zoomInDisabled = useMemo(() => {\n return (\n currentZoom >=\n map.getView().getConstrainedZoom(map.getView().getMaxZoom())\n );\n }, [currentZoom, map]);\n\n const zoomOutDisabled = useMemo(() => {\n return (\n currentZoom <=\n map.getView().getConstrainedZoom(map.getView().getMinZoom())\n );\n }, [currentZoom, map]);\n\n useEffect(() => {\n // Trigger zoom update to disable zooms on max and min\n const listenerKey = map.on(\"moveend\", () => {\n setZoom(map.getView().getZoom());\n });\n\n let control;\n if (zoomSlider && ref.current) {\n control = new ZoomSlider();\n // We don't want to navigate to the zoom slider using TAB navigation.\n control.element.firstElementChild.tabIndex = -1;\n // Set the zoom slider in the custom control wrapper.\n control.setTarget(ref.current);\n map.addControl(control);\n }\n return () => {\n unByKey(listenerKey);\n if (control) {\n map.removeControl(control);\n }\n };\n }, [map, zoomSlider]);\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <div className=\"rs-zooms-bar\" {...other}>\n <button\n type=\"button\"\n tabIndex={0}\n className=\"rs-zoom-in\"\n title={titles.zoomIn}\n onClick={zoomIn}\n onKeyPress={zoomIn}\n disabled={zoomInDisabled}\n >\n {zoomInChildren}\n </button>\n {zoomSlider ? <div className=\"rs-zoomslider-wrapper\" ref={ref} /> : null}\n <button\n type=\"button\"\n tabIndex={0}\n className=\"rs-zoom-out\"\n title={titles.zoomOut}\n onClick={zoomOut}\n onKeyPress={zoomOut}\n disabled={zoomOutDisabled}\n >\n {zoomOutChildren}\n </button>\n </div>\n );\n}\n\nZoom.propTypes = propTypes;\n\nexport default React.memo(Zoom);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED