react-spatial 1.3.1 → 1.3.2
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 +13 -0
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map +2 -2
- package/components/Permalink/Permalink.js +50 -51
- package/components/Permalink/Permalink.js.map +2 -2
- package/package.json +1 -1
- package/themes/default/examples.scss +1 -1
- package/themes/default/variables.scss +8 -8
|
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
|
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import { FaChevronLeft } from "react-icons/fa";
|
|
4
4
|
import { Layer } from "mobility-toolbox-js/ol";
|
|
5
|
+
import { unByKey } from "ol/Observable";
|
|
5
6
|
const propTypes = {
|
|
6
7
|
layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,
|
|
7
8
|
layerImages: PropTypes.objectOf(PropTypes.string),
|
|
@@ -65,6 +66,18 @@ function BaseLayerSwitcher({
|
|
|
65
66
|
const [currentLayer, setCurrentLayer] = useState(
|
|
66
67
|
getVisibleLayer(layers) || layers[0]
|
|
67
68
|
);
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
const olKeys = (layers || []).map((layer) => {
|
|
71
|
+
return layer.on("change:visible", (evt) => {
|
|
72
|
+
if (evt.target.visible && currentLayer !== evt.target) {
|
|
73
|
+
setCurrentLayer(evt.target);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
return () => {
|
|
78
|
+
unByKey(olKeys);
|
|
79
|
+
};
|
|
80
|
+
}, [currentLayer, layers]);
|
|
68
81
|
const images = layerImages ? Object.keys(layerImages).map((layerImage) => {
|
|
69
82
|
return layerImages[layerImage];
|
|
70
83
|
}) : layers.map((layer) => {
|
|
@@ -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';\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 /* 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;
|
|
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,EAIhB,QAAQ,UAAU,QAAQ,UAAU,WAAW,KAAK,CAAC,EAAE;AAAA,EAMvD,aAAa,UAAU,SAAS,UAAU,MAAM;AAAA,EAKhD,WAAW,UAAU;AAAA,EAKrB,SAAS,UAAU;AAAA,EAKnB,QAAQ,UAAU,MAAM;AAAA,IACtB,QAAQ,UAAU;AAAA,IAClB,cAAc,UAAU;AAAA,IACxB,eAAe,UAAU;AAAA,EAC3B,CAAC;AAAA,EAKD,kBAAkB,UAAU;AAAA,EAM5B,GAAG,UAAU;AACf;AAEA,MAAM,eAAe;AAAA,EACnB,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,kBAAkB,oCAAC,mBAAc;AAAA,EACjC,aAAa;AAAA,EACb,GAAG,CAAC,MAAM;AACR,WAAO;AAAA,EACT;AACF;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;AACrB;AAEA,MAAM,gBAAgB,CAAC,QAAQ;AAC7B,SAAO,MACH;AAAA,IACE,iBAAiB,OAAO;AAAA,IACxB,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,EACtB,IACA;AACN;AAQA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAC7C,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,gBAAgB,MAAM,KAAK,OAAO;AAAA,EACpC;AAEA,YAAU,MAAM;AAEd,UAAM,UAAU,UAAU,CAAC,GAAG,IAAI,CAAC,UAAU;AAC3C,aAAO,MAAM,GAAG,kBAAkB,CAAC,QAAQ;AACzC,YAAI,IAAI,OAAO,WAAW,iBAAiB,IAAI,QAAQ;AACrD,0BAAgB,IAAI,MAAM;AAAA,QAC5B;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,WAAO,MAAM;AACX,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,MAAM,CAAC;AAGzB,QAAM,SAAS,cACX,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,eAAe;AAC3C,WAAO,YAAY;AAAA,EACrB,CAAC,IACD,OAAO,IAAI,CAAC,UAAU;AACpB,WAAO,MAAM,IAAI,cAAc;AAAA,EACjC,CAAC;AAEL,QAAM,YAAY,eAAe,aAAa;AAC9C,QAAM,cAAc,gBAAgB,CAAC,WAAW,YAAY;AAE5D,QAAM,sBAAsB,MAAM;AAChC,QAAI,OAAO,WAAW,GAAG;AAEvB,YAAM,YAAY,OAAO,KAAK,CAAC,UAAU;AACvC,eAAO,CAAC,MAAM;AAAA,MAChB,CAAC;AACD,UAAI,aAAa,YAAY;AAC3B,qBAAa,WAAW,KAAK;AAAA,MAC/B,OAAO;AACL,qBAAa,UAAU;AAAA,MACzB;AACA,sBAAgB,SAAS;AACzB,UAAI,UAAU,YAAY;AACxB,kBAAU,WAAW,IAAI;AAAA,MAC3B,OAAO;AACL,kBAAU,UAAU;AAAA,MACtB;AACA;AAAA,IACF;AAEA,WAAO,gBAAgB,IAAI,KAAK,YAAY,KAAK;AAAA,EACnD;AAEA,QAAM,gBAAgB,CAAC,UAAU;AAC/B,QAAI,CAAC,cAAc;AACjB,sBAAgB,IAAI;AACpB;AAAA,IACF;AACA,oBAAgB,KAAK;AACrB,QAAI,MAAM,YAAY;AACpB,YAAM,WAAW,IAAI;AAAA,IACvB,OAAO;AAEL,YAAM,UAAU;AAAA,IAClB;AACA,WACG,OAAO,CAAC,MAAM;AACb,aAAO,MAAM;AAAA,IACf,CAAC,EACA,QAAQ,CAAC,MAAM;AACd,UAAI,EAAE,YAAY;AAChB,UAAE,WAAW,KAAK;AAAA,MACpB,OAAO;AAEL,UAAE,UAAU;AAAA,MACd;AAAA,IACF,CAAC;AACH,oBAAgB,KAAK;AAAA,EACvB;AAGA,QAAM,YAAY,aAAa,cAAc,QAAQ,MAAM;AAE3D,YAAU,MAAM;AAEd,QAAI,iBAAiB,gBAAgB,MAAM,GAAG;AAC5C,sBAAgB,gBAAgB,MAAM,KAAK,OAAO,EAAE;AAAA,IACtD;AAAA,EACF,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,YAAU,MAAM;AAEd,QAAI;AACJ,QAAI,CAAC,cAAc;AACjB,gBAAU,WAAW,MAAM;AACzB,oBAAY,IAAI;AAAA,MAClB,GAAG,GAAG;AAAA,IACR,OAAO;AACL,gBAAU,WAAW,MAAM;AACzB,oBAAY,KAAK;AAAA,MACnB,GAAG,GAAG;AAAA,IACR;AACA,WAAO,MAAM;AACX,aAAO,aAAa,OAAO;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,UAAU,OAAO,SAAS,KAAK,CAAC,cAAc;AACjD,WAAO;AAAA,EACT;AAEA,QAAM,YACJ,oCAAC;AAAA,IAAI,WAAU;AAAA,KACb,oCAAC;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAS,MAAM;AACb,aAAO,gBAAgB,KAAK;AAAA,IAC9B;AAAA,IACA,YAAY,CAAC,MAAM;AACjB,aAAO,EAAE,UAAU,MAAM,gBAAgB,KAAK;AAAA,IAChD;AAAA,IACA,UAAU,eAAe,MAAM;AAAA,IAC/B,cAAY,OAAO;AAAA,IACnB,OAAO,OAAO;AAAA,KAEb,gBACH,CACF;AAGF,SACE,oCAAC;AAAA,IAAI,WAAW,GAAG,YAAY;AAAA,KAC7B,oCAAC;AAAA,IACC,WAAW,0CAA0C;AAAA,IACrD,MAAK;AAAA,IACL,OAAO,OAAO;AAAA,IACd,cAAY,OAAO;AAAA,IACnB,SAAS;AAAA,IACT,YAAY,CAAC,MAAM;AACjB,UAAI,EAAE,UAAU,IAAI;AAClB,4BAAoB;AAAA,MACtB;AAAA,IACF;AAAA,IACA,OAAO,cAAc,SAAS;AAAA,IAC9B,UAAS;AAAA,KAET,oCAAC;AAAA,IAAI,WAAU;AAAA,KACZ,OAAO,WAAW,IACf,OAAO,SACP,OAAO,KAAK,CAAC,UAAU;AACrB,WAAO,CAAC,MAAM;AAAA,EAChB,CAAC,KACD;AAAA,IACE,OAAO,KAAK,CAAC,UAAU;AACrB,aAAO,CAAC,MAAM;AAAA,IAChB,CAAC,EAAE;AAAA,EACL,CACN,GACC,YAAY,OAAO,oCAAC;AAAA,IAAK,WAAU;AAAA,KAAe,EAAE,OAAO,CAAE,CAChE,GACC,OAAO,IAAI,CAAC,OAAO,QAAQ;AAC1B,UAAM,YAAY,MAAM;AACxB,UAAM,cAAc,cAAc,aAAa,OAAO,eAAe;AACrE,UAAM,aAAa;AAAA,MACjB,cAAc,YAAY,GAAG,MAAM,SAAS,MAAM,IAAI,cAAc;AAAA,IACtE;AACA,WACE,oCAAC;AAAA,MACC,KAAK,MAAM;AAAA,MACX,WAAU;AAAA,MACV,OAAO;AAAA,QAEL,UAAU;AAAA,QAEV,QAAQ,OAAO,SAAS;AAAA,MAC1B;AAAA,OAEA,oCAAC;AAAA,MACC,WAAW,gCAAgC;AAAA,MAC3C,MAAK;AAAA,MACL,OAAO,EAAE,SAAS;AAAA,MAClB,cAAY,EAAE,SAAS;AAAA,MACvB,SAAS,MAAM;AACb,eAAO,cAAc,KAAK;AAAA,MAC5B;AAAA,MACA,YAAY,CAAC,MAAM;AACjB,YAAI,EAAE,UAAU,IAAI;AAClB,wBAAc,KAAK;AAAA,QACrB;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,UAAU,eAAe,MAAM;AAAA,OAE/B,oCAAC;AAAA,MAAI,WAAW,+BAA+B;AAAA,OAC5C,EAAE,SAAS,CACd,GACC,aAAa,OACZ,oCAAC;AAAA,MAAK,WAAU;AAAA,OAAe,EAAE,OAAO,CAAE,CAE9C,CACF;AAAA,EAEJ,CAAC,GACA,SACH;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,eAAe;AAEjC,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -66,16 +66,17 @@ class Permalink extends PureComponent {
|
|
|
66
66
|
}
|
|
67
67
|
});
|
|
68
68
|
}
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
const visibleBaseLayer = (urlParams.baselayers || "").split(",")[0];
|
|
70
|
+
if (visibleBaseLayer) {
|
|
71
|
+
getLayersAsFlatArray(layers).filter(isBaseLayer).forEach((baseLayer) => {
|
|
72
|
+
const visible = baseLayer.key === visibleBaseLayer;
|
|
72
73
|
if (baseLayer.setVisible) {
|
|
73
|
-
baseLayer.setVisible(
|
|
74
|
+
baseLayer.setVisible(visible);
|
|
74
75
|
} else {
|
|
75
|
-
baseLayer.visible =
|
|
76
|
+
baseLayer.visible = visible;
|
|
76
77
|
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
78
|
+
});
|
|
79
|
+
}
|
|
79
80
|
this.updateLayers();
|
|
80
81
|
}
|
|
81
82
|
}
|
|
@@ -122,54 +123,52 @@ class Permalink extends PureComponent {
|
|
|
122
123
|
updateLayers() {
|
|
123
124
|
const { layers, isLayerHidden, isBaseLayer } = this.props;
|
|
124
125
|
const { revision } = this.state;
|
|
125
|
-
const rootLayer = new Layer({ children: layers });
|
|
126
126
|
unByKey(this.onPropertyChangeKeys);
|
|
127
|
-
getLayersAsFlatArray(
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
this.setState({ revision: revision + 1 });
|
|
131
|
-
})
|
|
132
|
-
);
|
|
133
|
-
});
|
|
134
|
-
const baseLayers = getLayersAsFlatArray(rootLayer).filter(isBaseLayer);
|
|
135
|
-
const idx = baseLayers.findIndex((l) => {
|
|
136
|
-
return l.visible;
|
|
137
|
-
});
|
|
138
|
-
if (idx !== -1) {
|
|
139
|
-
const baseLayerVisible = baseLayers.splice(idx, 1);
|
|
140
|
-
baseLayers.unshift(baseLayerVisible[0]);
|
|
141
|
-
}
|
|
142
|
-
const layersParam = getLayersAsFlatArray(layers).filter((l) => {
|
|
143
|
-
const children = l.children || [];
|
|
144
|
-
const allChildrenHidden = children.every((child) => {
|
|
145
|
-
return isLayerHidden(child);
|
|
127
|
+
this.onPropertyChangeKeys = getLayersAsFlatArray(layers).map((layer) => {
|
|
128
|
+
return layer.on("change:visible", () => {
|
|
129
|
+
this.setState({ revision: revision + 1 });
|
|
146
130
|
});
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
}).map((l) => {
|
|
163
|
-
return l.key;
|
|
164
|
-
}).join() : void 0;
|
|
165
|
-
const state = {};
|
|
166
|
-
if (layers?.length) {
|
|
167
|
-
state.layers = layersParam;
|
|
131
|
+
});
|
|
132
|
+
let layersParam;
|
|
133
|
+
if (layers.length) {
|
|
134
|
+
layersParam = getLayersAsFlatArray(layers).filter((l) => {
|
|
135
|
+
const children = l.children || [];
|
|
136
|
+
const allChildrenHidden = children.every((child) => {
|
|
137
|
+
return isLayerHidden(child);
|
|
138
|
+
});
|
|
139
|
+
const hasVisibleChildren = children.some((child) => {
|
|
140
|
+
return child.visible;
|
|
141
|
+
});
|
|
142
|
+
return !isBaseLayer(l) && !isLayerHidden(l) && l.visible && (!hasVisibleChildren || allChildrenHidden);
|
|
143
|
+
}).map((l) => {
|
|
144
|
+
return l.key;
|
|
145
|
+
}).join();
|
|
168
146
|
}
|
|
169
|
-
|
|
170
|
-
|
|
147
|
+
let baseLayersParam;
|
|
148
|
+
const baseLayers = getLayersAsFlatArray(layers).filter(isBaseLayer);
|
|
149
|
+
if (baseLayers.length) {
|
|
150
|
+
const visibleBaseLayers = (baseLayers.filter((l) => {
|
|
151
|
+
return l.visible;
|
|
152
|
+
}) || []).reverse();
|
|
153
|
+
const nonVisibleBaseLayers = baseLayers.filter((l) => {
|
|
154
|
+
return !l.visible;
|
|
155
|
+
}) || [];
|
|
156
|
+
baseLayersParam = [...visibleBaseLayers, ...nonVisibleBaseLayers].sort((a, b) => {
|
|
157
|
+
if (a.visible === b.visible) {
|
|
158
|
+
return 0;
|
|
159
|
+
}
|
|
160
|
+
if (a.visible && !b.visible) {
|
|
161
|
+
return -1;
|
|
162
|
+
}
|
|
163
|
+
return 1;
|
|
164
|
+
}).map((l) => {
|
|
165
|
+
return l.key;
|
|
166
|
+
}).join();
|
|
171
167
|
}
|
|
172
|
-
this.setState(
|
|
168
|
+
this.setState({
|
|
169
|
+
layers: layersParam,
|
|
170
|
+
baselayers: baseLayersParam
|
|
171
|
+
});
|
|
173
172
|
}
|
|
174
173
|
updateHistory() {
|
|
175
174
|
const { params, history, replace } = this.props;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Permalink/Permalink.js"],
|
|
4
|
-
"sourcesContent": ["import { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport qs from 'query-string';\nimport OLMap from 'ol/Map';\nimport { unByKey } from 'ol/Observable';\nimport { Layer, getLayersAsFlatArray } from 'mobility-toolbox-js/ol';\n\nconst propTypes = {\n /**\n * Either 'react-router' history object:\n * https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md<br>\n * or default fallback as HTML5 History:\n * https://developer.mozilla.org/en-US/docs/Web/API/History\n */\n history: PropTypes.shape({\n replace: PropTypes.func,\n }),\n\n /**\n * Layers provider.\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n /**\n * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n */\n map: PropTypes.instanceOf(OLMap),\n\n /**\n * Params to be written in url.\n */\n params: PropTypes.object,\n\n /**\n * Maximum number of decimals allowed for coordinates.\n */\n coordinateDecimals: PropTypes.number,\n\n /**\n * Determine if the layer is hidden in the permalink or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the permalink\n */\n isLayerHidden: PropTypes.func,\n\n /**\n * Determine if the layer appears in the baselayers permalink parameter or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the baselayers permalink parameter\n */\n isBaseLayer: PropTypes.func,\n\n /**\n * Custom function to be called when the permalink is updated.\n * This property has priority over the history parameter and window.history.replaceState calls.\n */\n replace: PropTypes.func,\n};\n\nconst defaultProps = {\n history: null,\n replace: null,\n layers: [],\n map: null,\n params: {},\n coordinateDecimals: 2,\n isLayerHidden: () => {\n return false;\n },\n isBaseLayer: (layer) => {\n return layer.get('isBaseLayer');\n },\n};\n\n/**\n * This component handles permalink logic. Injecting an\n * __[ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)__\n * will add the *map center* (x, y) and the *zoom* (z) parameters to the permalink.\n * Injecting layers will add the *baselayers* and/or *layers* parameters. Further parameters can\n * be added using __params__.\n */\nclass Permalink extends PureComponent {\n constructor(props) {\n super(props);\n this.state = { revision: 0 };\n this.onMoveEndRef = null;\n this.onPropertyChangeKeys = [];\n }\n\n componentDidMount() {\n const { map, layers, isLayerHidden, isBaseLayer } = this.props;\n if (map) {\n this.moveEndRef = map.on('moveend', () => {\n this.onMapMoved();\n });\n }\n\n if (layers) {\n // set layer visibility based on 'layers' parameter.\n const urlParams = qs.parse(window.location.search);\n\n if (urlParams.layers) {\n const visibleLayers = urlParams.layers.split(',');\n getLayersAsFlatArray(layers).forEach((l) => {\n if (visibleLayers.includes(l.key)) {\n if (l.setVisible) {\n l.setVisible(true);\n } else {\n // eslint-disable-next-line no-param-reassign\n l.visible = true;\n }\n } else if (\n !isBaseLayer(l) &&\n !isLayerHidden(l) &&\n !l.children.some((ll) => {\n return ll.visible;\n })\n ) {\n if (l.setVisible) {\n l.setVisible(false);\n } else {\n // eslint-disable-next-line no-param-reassign\n l.visible = false;\n }\n }\n });\n }\n\n // Set baser layer visibility based on 'baseLayers' parameter.\n const
|
|
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;
|
|
4
|
+
"sourcesContent": ["import { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport qs from 'query-string';\nimport OLMap from 'ol/Map';\nimport { unByKey } from 'ol/Observable';\nimport { Layer, getLayersAsFlatArray } from 'mobility-toolbox-js/ol';\n\nconst propTypes = {\n /**\n * Either 'react-router' history object:\n * https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md<br>\n * or default fallback as HTML5 History:\n * https://developer.mozilla.org/en-US/docs/Web/API/History\n */\n history: PropTypes.shape({\n replace: PropTypes.func,\n }),\n\n /**\n * Layers provider.\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n /**\n * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n */\n map: PropTypes.instanceOf(OLMap),\n\n /**\n * Params to be written in url.\n */\n params: PropTypes.object,\n\n /**\n * Maximum number of decimals allowed for coordinates.\n */\n coordinateDecimals: PropTypes.number,\n\n /**\n * Determine if the layer is hidden in the permalink or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the permalink\n */\n isLayerHidden: PropTypes.func,\n\n /**\n * Determine if the layer appears in the baselayers permalink parameter or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the baselayers permalink parameter\n */\n isBaseLayer: PropTypes.func,\n\n /**\n * Custom function to be called when the permalink is updated.\n * This property has priority over the history parameter and window.history.replaceState calls.\n */\n replace: PropTypes.func,\n};\n\nconst defaultProps = {\n history: null,\n replace: null,\n layers: [],\n map: null,\n params: {},\n coordinateDecimals: 2,\n isLayerHidden: () => {\n return false;\n },\n isBaseLayer: (layer) => {\n return layer.get('isBaseLayer');\n },\n};\n\n/**\n * This component handles permalink logic. Injecting an\n * __[ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)__\n * will add the *map center* (x, y) and the *zoom* (z) parameters to the permalink.\n * Injecting layers will add the *baselayers* and/or *layers* parameters. Further parameters can\n * be added using __params__.\n */\nclass Permalink extends PureComponent {\n constructor(props) {\n super(props);\n this.state = { revision: 0 };\n this.onMoveEndRef = null;\n this.onPropertyChangeKeys = [];\n }\n\n componentDidMount() {\n const { map, layers, isLayerHidden, isBaseLayer } = this.props;\n if (map) {\n this.moveEndRef = map.on('moveend', () => {\n this.onMapMoved();\n });\n }\n\n if (layers) {\n // set layer visibility based on 'layers' parameter.\n const urlParams = qs.parse(window.location.search);\n\n if (urlParams.layers) {\n const visibleLayers = urlParams.layers.split(',');\n getLayersAsFlatArray(layers).forEach((l) => {\n if (visibleLayers.includes(l.key)) {\n if (l.setVisible) {\n l.setVisible(true);\n } else {\n // eslint-disable-next-line no-param-reassign\n l.visible = true;\n }\n } else if (\n !isBaseLayer(l) &&\n !isLayerHidden(l) &&\n !l.children.some((ll) => {\n return ll.visible;\n })\n ) {\n if (l.setVisible) {\n l.setVisible(false);\n } else {\n // eslint-disable-next-line no-param-reassign\n l.visible = false;\n }\n }\n });\n }\n\n // Set baser layer visibility based on 'baseLayers' parameter.\n // Show the first of the list then hide the others\n const visibleBaseLayer = (urlParams.baselayers || '').split(',')[0];\n if (visibleBaseLayer) {\n getLayersAsFlatArray(layers)\n .filter(isBaseLayer)\n .forEach((baseLayer) => {\n const visible = baseLayer.key === visibleBaseLayer;\n if (baseLayer.setVisible) {\n baseLayer.setVisible(visible);\n } else {\n // eslint-disable-next-line no-param-reassign\n baseLayer.visible = visible;\n }\n });\n }\n this.updateLayers();\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { map, layers } = this.props;\n const { revision } = this.state;\n\n if (layers !== prevProps.layers || revision !== prevState.revision) {\n this.updateLayers();\n }\n\n if (map !== prevProps.map) {\n unByKey(this.moveEndRef);\n this.moveEndRef = map.on('moveend', () => {\n return this.onMapMoved();\n });\n }\n\n this.updateHistory();\n }\n\n componentWillUnmount() {\n const { map } = this.props;\n\n if (map) {\n unByKey(this.moveEndRef);\n }\n unByKey(this.onPropertyChangeKeys);\n this.onPropertyChangeKeys = [];\n }\n\n onMapMoved() {\n const { map } = this.props;\n const mapView = map.getView();\n const center = mapView.getCenter();\n const params = {};\n\n if (\n center !== undefined &&\n center[0] !== undefined &&\n center[1] !== undefined\n ) {\n params.x = this.roundCoord(center[0]);\n params.y = this.roundCoord(center[1]);\n }\n\n this.setState({\n ...params,\n // rounds zoom to two digits max.\n z: +`${Math.round(`${parseFloat(mapView.getZoom())}e+2`)}e-2`,\n });\n }\n\n roundCoord(val) {\n const { coordinateDecimals } = this.props;\n return parseFloat(val.toFixed(coordinateDecimals));\n }\n\n updateLayers() {\n const { layers, isLayerHidden, isBaseLayer } = this.props;\n const { revision } = this.state;\n\n unByKey(this.onPropertyChangeKeys);\n this.onPropertyChangeKeys = getLayersAsFlatArray(layers).map((layer) => {\n return layer.on('change:visible', () => {\n this.setState({ revision: revision + 1 });\n });\n });\n\n // layers param\n let layersParam;\n if (layers.length) {\n layersParam = getLayersAsFlatArray(layers)\n .filter((l) => {\n const children = l.children || [];\n const allChildrenHidden = children.every((child) => {\n return isLayerHidden(child);\n });\n const hasVisibleChildren = children.some((child) => {\n return child.visible;\n });\n return (\n !isBaseLayer(l) &&\n !isLayerHidden(l) &&\n l.visible &&\n (!hasVisibleChildren || allChildrenHidden)\n );\n })\n .map((l) => {\n return l.key;\n })\n .join();\n }\n\n // baselayers param\n let baseLayersParam;\n const baseLayers = getLayersAsFlatArray(layers).filter(isBaseLayer);\n if (baseLayers.length) {\n // First baselayers in order of visibility, top layer is first\n const visibleBaseLayers = (\n baseLayers.filter((l) => {\n return l.visible;\n }) || []\n ).reverse();\n const nonVisibleBaseLayers =\n baseLayers.filter((l) => {\n return !l.visible;\n }) || [];\n baseLayersParam = [...visibleBaseLayers, ...nonVisibleBaseLayers]\n .sort((a, b) => {\n if (a.visible === b.visible) {\n return 0;\n }\n if (a.visible && !b.visible) {\n return -1;\n }\n return 1;\n })\n .map((l) => {\n return l.key;\n })\n .join();\n }\n\n // Only add parameters if there is actually some layers added.\n this.setState({\n layers: layersParam,\n baselayers: baseLayersParam,\n });\n }\n\n updateHistory() {\n const { params, history, replace } = this.props;\n const oldParams = qs.parse(window.location.search);\n const parameters = { ...oldParams, ...this.state, ...params };\n\n delete parameters.revision;\n\n // Remove parameters that are undefined or null\n Object.entries(parameters).forEach(([key, value]) => {\n if (value === undefined || value === null) {\n delete parameters[key];\n }\n });\n\n // encodeURI to encode spaces, accents, etc. but not characters like ;,/?:@&=+$-_.!~*'()\n const qStr = encodeURI(qs.stringify(parameters, { encode: false }));\n const search = qStr ? `?${qStr}` : '';\n\n if (\n (!qStr && window.location.search) ||\n (qStr && search !== window.location.search)\n ) {\n if (replace) {\n replace({ parameters, search });\n } else if (history) {\n history.replace({ search });\n } else {\n const { hash } = window.location;\n window.history.replaceState(\n undefined,\n undefined,\n `${search}${hash || ''}`,\n );\n }\n }\n }\n\n render() {\n return null;\n }\n}\n\nPermalink.propTypes = propTypes;\nPermalink.defaultProps = defaultProps;\n\nexport default Permalink;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* This file defines variables.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
/* Color */
|
|
6
6
|
$brand-primary: #eb0000;
|
|
7
7
|
$brand-secondary: #003d85;
|
|
8
8
|
$gray-base: #000;
|
|
@@ -12,29 +12,29 @@ $gray: lighten($gray-base, 33.5%);
|
|
|
12
12
|
$gray-dark: lighten($gray-base, 20%);
|
|
13
13
|
$gray-darker: lighten($gray-base, 13.5%);
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
/* Text */
|
|
16
16
|
$font-family: arial, sans-serif;
|
|
17
17
|
$font-family-bold: arial, sans-serif;
|
|
18
18
|
$font-size-base: 15px;
|
|
19
19
|
$font-size-small: ceil($font-size-base * 0.85);
|
|
20
20
|
$font-size-large: ceil($font-size-base * 1.25);
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
/* Shadow */
|
|
23
23
|
$box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
/* Padding */
|
|
26
26
|
$padding-base: 5px;
|
|
27
27
|
$padding-base-vertical: 5px;
|
|
28
28
|
$padding-base-horizontal: 5px;
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
/* Link */
|
|
31
31
|
$link-color: $brand-primary;
|
|
32
32
|
$link-color-hover: darken($brand-primary, 10%);
|
|
33
33
|
$link-color-active: darken($brand-primary, 5%);
|
|
34
34
|
$link-decoration: none;
|
|
35
35
|
$link-decoration-hover: underline;
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
/* Buttons */
|
|
38
38
|
$btn-primary-color: $brand-primary;
|
|
39
39
|
$btn-primary-color-hover: darken($brand-primary, 10%);
|
|
40
40
|
$btn-primary-color-active: darken($brand-primary, 5%);
|
|
@@ -45,14 +45,14 @@ $btn-size-base: 50px;
|
|
|
45
45
|
$btn-size-small: ceil($btn-size-base * 0.85);
|
|
46
46
|
$btn-size-large: ceil($btn-size-base * 1.25);
|
|
47
47
|
|
|
48
|
-
|
|
48
|
+
/* Z-index */
|
|
49
49
|
$zindex-base: 0;
|
|
50
50
|
$zindex-lower: 200;
|
|
51
51
|
$zindex-low: 400;
|
|
52
52
|
$zindex-high: 600;
|
|
53
53
|
$zindex-higher: 800;
|
|
54
54
|
|
|
55
|
-
|
|
55
|
+
/* Others */
|
|
56
56
|
$header-height: 55px;
|
|
57
57
|
$footer-height: 25px;
|
|
58
58
|
$sidebar-open-width: 200px;
|