diff --git a/CHANGELOG.md b/CHANGELOG.md index 60b113248..510b44df7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ - Moved form to add a borehole from modal to sidepanel. - Removed fields `Inclination` `InclinationDirection` and `QtInclinationDirectionId` from borehole. - Removed filter by map functionality. +- Moved icon to handle custom layers to sidebar. ### Fixed diff --git a/src/client/public/icons/layers.svg b/src/client/public/icons/layers.svg new file mode 100644 index 000000000..90e038d0f --- /dev/null +++ b/src/client/public/icons/layers.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/client/src/commons/map/layerSelectControl.jsx b/src/client/src/commons/map/layerSelectControl.jsx deleted file mode 100644 index 6b102cc7a..000000000 --- a/src/client/src/commons/map/layerSelectControl.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Button, Box } from "@mui/material"; -import LayersOutlinedIcon from "@mui/icons-material/LayersOutlined"; -import { theme } from "../../AppTheme"; - -const LayerSelectControl = ({ onShowLayerSelection, sidebarWidth }) => { - return ( - 0 ? sidebarWidth - 48 + "px" : "12px", - zIndex: "1", - backgroundColor: theme.palette.background.default, - boxShadow: "4px 4px 2px " + theme.palette.boxShadow, - borderRadius: "8px", - alignItems: "center", - }}> - - - ); -}; - -export default LayerSelectControl; diff --git a/src/client/src/commons/map/mapComponent.jsx b/src/client/src/commons/map/mapComponent.jsx index 0ca96f649..5ea180906 100644 --- a/src/client/src/commons/map/mapComponent.jsx +++ b/src/client/src/commons/map/mapComponent.jsx @@ -21,8 +21,6 @@ import proj4 from "proj4"; import { getGeojson } from "../../api-lib/index"; import { Box } from "@mui/material"; import ZoomControls from "./zoomControls"; -import LayerSelectControl from "./layerSelectControl"; -import Sidebar from "./sidebar"; import NamePopup from "./namePopup"; import { BasemapSelector } from "../../components/basemapSelector/basemapSelector"; import { getBasemap, swissExtent, updateBasemap } from "../../components/basemapSelector/basemaps"; @@ -37,9 +35,7 @@ class MapComponent extends React.Component { static contextType = BasemapContext; constructor(props) { super(props); - this.sidebarRef = React.createRef(); this.onSelected = this.onSelected.bind(this); - this.updateWidth = this.updateWidth.bind(this); this.setStateBound = this.setState.bind(this); this.fetchAndDisplayGeojson = this.fetchAndDisplayGeojson.bind(this); this.styleFunction = styleFunction.bind(this); @@ -50,7 +46,6 @@ class MapComponent extends React.Component { this.addWMTSLayer = this.addWMTSLayer.bind(this); this.addWMSLayer = this.addWMSLayer.bind(this); this.addUserLayers = this.addUserLayers.bind(this); - this.handleResize = this.handleResize.bind(this); this.handleHighlights = this.handleHighlights.bind(this); this.setFeatureHighlight = this.setFeatureHighlight.bind(this); this.clearFeatureHighlight = this.clearFeatureHighlight.bind(this); @@ -58,7 +53,6 @@ class MapComponent extends React.Component { this.onZoomIn = this.onZoomIn.bind(this); this.onZoomOut = this.onZoomOut.bind(this); this.onFitToExtent = this.onFitToExtent.bind(this); - this.onShowLayerSelection = this.onShowLayerSelection.bind(this); this.onHover = this.onHover.bind(this); this.onSelected = this.onSelected.bind(this); this.handleMapInteractions = this.handleMapInteractions.bind(this); @@ -80,8 +74,6 @@ class MapComponent extends React.Component { this.overlays = []; this.state = { hover: null, - sidebar: false, - sidebarWidth: 0, displayedBaseMap: null, drawActive: false, }; @@ -331,15 +323,6 @@ class MapComponent extends React.Component { }); } - handleResize() { - this.updateWidth(); - window.addEventListener("resize", this.updateWidth); - } - - updateWidth() { - this.setState({ sidebarWidth: this.sidebarRef?.current?.offsetWidth }); - } - handleHighlights(currentHighlights, hoverCallback, previousHighlights) { if (!this.points || _.isEqual(currentHighlights, previousHighlights)) { return; @@ -529,7 +512,6 @@ class MapComponent extends React.Component { // Load borehole points this.fetchAndDisplayGeojson(); - this.handleResize(); } componentDidUpdate(prevProps) { @@ -567,10 +549,6 @@ class MapComponent extends React.Component { } } - componentWillUnmount() { - window.removeEventListener("resize", this.updateWidth); - } - //////// Event handlers //////// onSelected(e) { const { selected } = this.props; @@ -649,18 +627,6 @@ class MapComponent extends React.Component { view.getResolution() < 1 && view.setResolution(1); }; - onShowLayerSelection = () => { - this.setState( - { - sidebar: !this.state.sidebar, - }, - () => { - this.map.updateSize(); - this.setState({ sidebarWidth: this.sidebarRef?.current?.offsetWidth }); - }, - ); - }; - render() { return ( - {Object.keys(this.props.layers).length !== 0 && ( - - )} - - {Object.values(layers) - .sort((a, b) => { - if (a.position < b.position) { - return 1; - } else if (a.position > b.position) { - return -1; - } - return 0; - }) - .map((layer, idx) => ( -
-
- { - toggleVisibility(layer); - }} - /> -
-
- ({layer.transparency}%) -
-
-
- { - const value = parseFloat(ev.target.value); - setTransparency(layer, value); - if (saveTransparency !== undefined) { - if (this.transparency) { - clearTimeout(this.transparency); - this.transparency = false; - } - this.transparency = setTimeout(() => { - saveTransparency(layer, value); - }, 1000); - } - }} - step="1" - type="range" - value={layer.transparency} - /> -
-
- - -
-
-
- ))} - - ); - } -} - -MapOverlayComponent.propTypes = { - isFetching: PropTypes.bool, - layers: PropTypes.object, - moveDown: PropTypes.func, - moveUp: PropTypes.func, - saveTransparency: PropTypes.func, - setSelectedLayer: PropTypes.func, - setTransparency: PropTypes.func, - toggleVisibility: PropTypes.func, -}; - -MapOverlayComponent.defaultProps = {}; - -export default MapOverlayComponent; diff --git a/src/client/src/commons/map/sidebar.jsx b/src/client/src/commons/map/sidebar.jsx deleted file mode 100644 index 4b9c45d7a..000000000 --- a/src/client/src/commons/map/sidebar.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import MapOverlay from "./overlay/mapOverlay"; -import { Box, Typography } from "@mui/material"; -import { useTranslation } from "react-i18next"; -import styled from "@mui/material/styles/styled"; -import { theme } from "../../AppTheme"; - -const Sidebar = ({ sidebarRef, state, setState, additionalMapLayers }) => { - const { t } = useTranslation(); - - const Title = styled(Typography)({ - fontWeight: "bold", - paddingBottom: "0.5em", - }); - - return ( - - - {Object.keys(additionalMapLayers).length !== 0 && ( - {t("common:overlay")} - )} - { - setState({ - selectedLayer: layer, - }); - }} - /> - - - ); -}; - -export default Sidebar; diff --git a/src/client/src/commons/menu/editor/customLayers/customLayersComponent.jsx b/src/client/src/commons/menu/editor/customLayers/customLayersComponent.jsx new file mode 100644 index 000000000..350f42ee4 --- /dev/null +++ b/src/client/src/commons/menu/editor/customLayers/customLayersComponent.jsx @@ -0,0 +1,95 @@ +import { Button, Checkbox, Icon } from "semantic-ui-react"; +import { SideDrawerHeader } from "../sideDrawerHeader.tsx"; +import { useTranslation } from "react-i18next"; +import { Box, Stack } from "@mui/material"; + +export const CustomLayersComponent = ({ + isFetching, + layers, + moveDown, + moveUp, + toggleDrawer, + saveTransparency, + toggleVisibility, +}) => { + const len = Object.values(layers).length - 1; + const { t } = useTranslation(); + + return ( + <> + + + {Object.values(layers) + .sort((a, b) => { + if (a.position < b.position) { + return 1; + } else if (a.position > b.position) { + return -1; + } + return 0; + }) + .map((layer, idx) => ( + + + { + toggleVisibility(layer); + }} + /> + + + {t("transparency")} ({layer.transparency}%) + + + + { + const updatedLayer = { ...layer, transparency: parseFloat(ev.target.value) }; + saveTransparency(updatedLayer); + }} + step="1" + type="range" + value={layer.transparency} + /> + + + + + + + + ))} + + + ); +}; diff --git a/src/client/src/commons/map/overlay/mapOverlay.jsx b/src/client/src/commons/menu/editor/customLayers/customLayersPanel.jsx similarity index 69% rename from src/client/src/commons/map/overlay/mapOverlay.jsx rename to src/client/src/commons/menu/editor/customLayers/customLayersPanel.jsx index 87691bad0..9d3355c47 100644 --- a/src/client/src/commons/map/overlay/mapOverlay.jsx +++ b/src/client/src/commons/menu/editor/customLayers/customLayersPanel.jsx @@ -1,31 +1,28 @@ import { connect } from "react-redux"; import PropTypes from "prop-types"; -import MapOverlayComponent from "./mapOverlayCmp"; +import { CustomLayersComponent } from "./customLayersComponent.jsx"; +import { patchSettings } from "../../../../api-lib/index.js"; -import { patchSettings } from "../../../api-lib/index"; - -const MapOverlay = props => { +const CustomLayersPanel = props => { return ( - ); }; -MapOverlay.propTypes = { +CustomLayersPanel.propTypes = { moveDown: PropTypes.func, moveUp: PropTypes.func, saveTransparency: PropTypes.func, setSelectedLayer: PropTypes.func, - setTransparency: PropTypes.func, setting: PropTypes.object, toggleVisibility: PropTypes.func, }; @@ -47,16 +44,6 @@ const mapDispatchToProps = dispatch => { ]), ); }, - setTransparency: (layer, value) => { - dispatch({ - disableFetching: true, - path: "/setting", - type: "PATCH", - tree: "map.explorer", - value: value, - key: [layer.Identifier, "transparency"], - }); - }, saveTransparency: layer => { dispatch( patchSettings("map.explorer", layer.transparency !== undefined ? layer.transparency : 0, [ @@ -84,5 +71,5 @@ const mapDispatchToProps = dispatch => { }; }; -const ConnectedMapOverlay = connect(mapStateToProps, mapDispatchToProps)(MapOverlay); -export default ConnectedMapOverlay; +const ConnectedCustomLayersPanel = connect(mapStateToProps, mapDispatchToProps)(CustomLayersPanel); +export default ConnectedCustomLayersPanel; diff --git a/src/client/src/commons/menu/editor/mainSideNav.tsx b/src/client/src/commons/menu/editor/mainSideNav.tsx index e7529b8cb..24b07444b 100644 --- a/src/client/src/commons/menu/editor/mainSideNav.tsx +++ b/src/client/src/commons/menu/editor/mainSideNav.tsx @@ -8,6 +8,7 @@ import AddIcon from "../../../../public/icons/add.svg?react"; import UploadIcon from "../../../../public/icons/upload.svg?react"; import SettingsIcon from "../../../../public/icons/settings.svg?react"; import HelpIcon from "../../../../public/icons/help.svg?react"; +import LayersIcon from "../../../../public/icons/layers.svg?react"; import { theme } from "../../../AppTheme"; import { styled } from "@mui/system"; import { ProfilePopup } from "../profilePopup"; @@ -75,6 +76,11 @@ const MainSideNav = ({ setSideDrawerContent(DrawerContentTypes.NewBorehole); }; + const handleToggleLayers = () => { + handleDrawer(DrawerContentTypes.CustomLayers); + setSideDrawerContent(DrawerContentTypes.CustomLayers); + }; + const handleDrawer = (buttonName: DrawerContentTypes) => { if (sideDrawerContent === buttonName) { toggleDrawer(!drawerOpen); @@ -85,6 +91,7 @@ const MainSideNav = ({ const isFilterPanelVisible = drawerOpen && sideDrawerContent === DrawerContentTypes.Filters; const isAddPanelVisible = drawerOpen && sideDrawerContent === DrawerContentTypes.NewBorehole; + const isLayersPanelVisible = drawerOpen && sideDrawerContent === DrawerContentTypes.CustomLayers; return ( + + + { setEnabledWorkgroups={setEnabledWorkgroups} /> ), + customLayers: , }; useEffect(() => { diff --git a/src/client/src/pages/editor/editorComponentInterfaces.ts b/src/client/src/pages/editor/editorComponentInterfaces.ts index b947fa607..a5c284e1e 100644 --- a/src/client/src/pages/editor/editorComponentInterfaces.ts +++ b/src/client/src/pages/editor/editorComponentInterfaces.ts @@ -1,4 +1,5 @@ export enum DrawerContentTypes { Filters = "filters", NewBorehole = "newBorehole", + CustomLayers = "customLayers", }