react-spatial 1.11.1-beta.1 → 1.11.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.
|
@@ -110,15 +110,10 @@ function BaseLayerSwitcher({
|
|
|
110
110
|
closeSwitcher: "Close Baselayer-Switcher"
|
|
111
111
|
},
|
|
112
112
|
closeButtonImage = /* @__PURE__ */ React.createElement(FaChevronLeft, null),
|
|
113
|
-
onCloseButtonClick =
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
onSwitcherButtonClick = () => {
|
|
118
|
-
},
|
|
119
|
-
t = (s) => {
|
|
120
|
-
return s;
|
|
121
|
-
}
|
|
113
|
+
onCloseButtonClick = null,
|
|
114
|
+
onLayerButtonClick = null,
|
|
115
|
+
onSwitcherButtonClick = null,
|
|
116
|
+
t = (s) => s
|
|
122
117
|
}) {
|
|
123
118
|
const [switcherOpen, setSwitcherOpen] = useState(false);
|
|
124
119
|
const [isClosed, setIsClosed] = useState(true);
|
|
@@ -137,7 +132,9 @@ function BaseLayerSwitcher({
|
|
|
137
132
|
return !layer.visible;
|
|
138
133
|
});
|
|
139
134
|
const onButtonClick = layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;
|
|
140
|
-
onButtonClick
|
|
135
|
+
if (onButtonClick) {
|
|
136
|
+
onButtonClick(evt, nextLayer);
|
|
137
|
+
}
|
|
141
138
|
if (layers.length === 2) {
|
|
142
139
|
if (currentLayer.setVisible) {
|
|
143
140
|
currentLayer.setVisible(false);
|
|
@@ -155,7 +152,9 @@ function BaseLayerSwitcher({
|
|
|
155
152
|
return setSwitcherOpen(true) && setIsClosed(false);
|
|
156
153
|
};
|
|
157
154
|
const onLayerSelect = (layer, evt) => {
|
|
158
|
-
onLayerButtonClick
|
|
155
|
+
if (onLayerButtonClick) {
|
|
156
|
+
onLayerButtonClick(evt, layer);
|
|
157
|
+
}
|
|
159
158
|
if (!switcherOpen) {
|
|
160
159
|
setSwitcherOpen(true);
|
|
161
160
|
return;
|
|
@@ -281,7 +280,9 @@ function BaseLayerSwitcher({
|
|
|
281
280
|
CloseButton,
|
|
282
281
|
{
|
|
283
282
|
onClick: (evt) => {
|
|
284
|
-
onCloseButtonClick
|
|
283
|
+
if (onCloseButtonClick) {
|
|
284
|
+
onCloseButtonClick(evt);
|
|
285
|
+
}
|
|
285
286
|
setSwitcherOpen(false);
|
|
286
287
|
},
|
|
287
288
|
tabIndex: switcherOpen ? "0" : "-1",
|
|
@@ -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 /**\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": "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;AAAA;AAAA;AAAA;AAAA;AAAA,EAMb,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAM9B,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAM9B,uBAAuB,UAAU;AACnC;AAEA,MAAM,kBAAkB,CAAC,WAAW;AAClC,SAAO,OAAO,KAAK,CAAC,UAAU;AAC5B,WAAO,MAAM;AAAA,EACf,CAAC;AACH;AAEA,MAAM,eAAe,CAAC,cAAc,QAAQ,gBAAgB;AAC1D,QAAM,eAAe,OAAO;AAAA,IAC1B,OAAO,KAAK,CAAC,UAAU;AACrB,aAAO,UAAU;AAAA,IACnB,CAAC;AAAA,EACH;AACA,QAAM,YAAY,eAAe,MAAM,OAAO,SAAS,IAAI,eAAe;AAC1E,SAAO,YAAY,SAAS;AAC9B;AAEA,MAAM,gBAAgB,CAAC,QAAQ;AAC7B,SAAO,MACH;AAAA,IACE,iBAAiB,OAAO,GAAG;AAAA,IAC3B,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,EACtB,IACA;AACN;AAEA,SAAS,YAAY,EAAE,SAAS,UAAU,OAAO,SAAS,GAAG;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,YAAY,CAAC,MAAM;AACjB,eAAO,EAAE,UAAU,MAAM,QAAQ;AAAA,MACnC;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ;AAAA;AAAA,IAEC;AAAA,EACH;AAEJ;AAEA,YAAY,YAAY;AAAA,EACtB,SAAS,UAAU,KAAK;AAAA,EACxB,UAAU,UAAU,OAAO;AAAA,EAC3B,OAAO,UAAU,OAAO;AAAA,EACxB,UAAU,UAAU,KAAK;AAC3B;AAQA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,mBAAmB,oCAAC,mBAAc;AAAA,EAClC,qBAAqB
|
|
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 = null,\n onLayerButtonClick = null,\n onSwitcherButtonClick = null,\n t = (s) => s,\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 if (onButtonClick) {\n onButtonClick(evt, nextLayer);\n }\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 if (onLayerButtonClick) {\n onLayerButtonClick(evt, layer);\n }\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 if (onCloseButtonClick) {\n onCloseButtonClick(evt);\n }\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
|
@@ -73,10 +73,8 @@ function Zoom({
|
|
|
73
73
|
zoomInChildren = /* @__PURE__ */ React.createElement(FaPlus, { focusable: false }),
|
|
74
74
|
zoomOutChildren = /* @__PURE__ */ React.createElement(FaMinus, { focusable: false }),
|
|
75
75
|
zoomSlider = false,
|
|
76
|
-
onZoomInButtonClick =
|
|
77
|
-
|
|
78
|
-
onZoomOutButtonClick = () => {
|
|
79
|
-
},
|
|
76
|
+
onZoomInButtonClick = null,
|
|
77
|
+
onZoomOutButtonClick = null,
|
|
80
78
|
delta = 1,
|
|
81
79
|
...other
|
|
82
80
|
}) {
|
|
@@ -84,7 +82,9 @@ function Zoom({
|
|
|
84
82
|
const [currentZoom, setZoom] = useState();
|
|
85
83
|
const zoomIn = useCallback(
|
|
86
84
|
(evt) => {
|
|
87
|
-
onZoomInButtonClick
|
|
85
|
+
if (onZoomInButtonClick) {
|
|
86
|
+
onZoomInButtonClick(evt);
|
|
87
|
+
}
|
|
88
88
|
if (!evt.which || evt.which === 13) {
|
|
89
89
|
updateZoom(map, delta);
|
|
90
90
|
}
|
|
@@ -93,7 +93,9 @@ function Zoom({
|
|
|
93
93
|
);
|
|
94
94
|
const zoomOut = useCallback(
|
|
95
95
|
(evt) => {
|
|
96
|
-
onZoomOutButtonClick
|
|
96
|
+
if (onZoomOutButtonClick) {
|
|
97
|
+
onZoomOutButtonClick(evt);
|
|
98
|
+
}
|
|
97
99
|
if (!evt.which || evt.which === 13) {
|
|
98
100
|
updateZoom(map, -delta);
|
|
99
101
|
}
|
|
@@ -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\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 =
|
|
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;AAAA;AAAA;AAAA;AAAA;AAAA,EAMtB,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAM/B,sBAAsB,UAAU;AAClC;AAEA,MAAM,aAAa,CAAC,KAAK,UAAU;AACjC,QAAM,OAAO,IAAI,QAAQ;AACzB,QAAM,cAAc,KAAK,QAAQ;AACjC,QAAM,UAAU,cAAc;AAC9B,QAAM,kBAAkB,KAAK,mBAAmB,OAAO;AACvD,MAAI,KAAK,aAAa,GAAG;AACvB,SAAK,iBAAiB;AAAA,EACxB;AACA,OAAK,QAAQ;AAAA,IACX,MAAM;AAAA,IACN,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AACH;AAMA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,iBAAiB,oCAAC,UAAO,WAAW,OAAO;AAAA,EAC3C,kBAAkB,oCAAC,WAAQ,WAAW,OAAO;AAAA,EAC7C,aAAa;AAAA,EACb,sBAAsB
|
|
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 = null,\n onZoomOutButtonClick = null,\n delta = 1,\n ...other\n}) {\n const ref = useRef();\n const [currentZoom, setZoom] = useState();\n\n const zoomIn = useCallback(\n (evt) => {\n if (onZoomInButtonClick) {\n onZoomInButtonClick(evt);\n }\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 if (onZoomOutButtonClick) {\n onZoomOutButtonClick(evt);\n }\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