From f2eeee3a3d830ffd9b4b23e9aef9a343161badbe Mon Sep 17 00:00:00 2001 From: Mateusz Konieczny Date: Fri, 4 Oct 2024 14:48:06 +0200 Subject: [PATCH] Allow to hide editable buildings. fixes https://github.com/colouring-cities/colouring-britain/issues/359 --- .../frontend/displayPreferences-context.tsx | 34 +++++++++++++++++++ .../map/editable-buildings-switcher.tsx | 16 +++++++++ .../map/layers/building-base-layer.tsx | 9 +++-- .../map/layers/building-data-layer.tsx | 10 ++++-- app/src/frontend/map/map.tsx | 2 ++ 5 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 app/src/frontend/map/editable-buildings-switcher.tsx diff --git a/app/src/frontend/displayPreferences-context.tsx b/app/src/frontend/displayPreferences-context.tsx index 3bfcc1c31..5c40432f1 100644 --- a/app/src/frontend/displayPreferences-context.tsx +++ b/app/src/frontend/displayPreferences-context.tsx @@ -42,6 +42,10 @@ interface DisplayPreferencesContextState { historicMapSwitch: (e: React.FormEvent) => void; historicMapSwitchOnClick: React.MouseEventHandler; + editableBuildings: LayerEnablementState; + editableBuildingsSwitch: (e: React.FormEvent) => void; + editableBuildingsSwitchOnClick: React.MouseEventHandler; + darkLightTheme: MapTheme; darkLightThemeSwitch: (e: React.FormEvent) => void; darkLightThemeSwitchOnClick: React.MouseEventHandler; @@ -95,6 +99,10 @@ export const DisplayPreferencesContext = createContext = ({children}) => { const defaultConservation = 'disabled' const defaultHistoricData = 'disabled' const defaultHistoricMap = 'disabled' + const defaultEditableBuildings = 'enabled' const defaultShowLayerSelection = 'disabled' const [vista, setVista] = useState(defaultVista); const [flood, setFlood] = useState(defaultFlood); @@ -126,6 +135,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { const [conservation, setConservation] = useState(defaultConservation); const [historicData, setHistoricData] = useState(defaultHistoricData); const [historicMap, setHistoricMap] = useState(defaultHistoricMap); + const [editableBuildings, setEditableBuildings] = useState(defaultEditableBuildings); const [darkLightTheme, setDarkLightTheme] = useState('night'); const [showLayerSelection, setShowLayerSelection] = useState(defaultShowLayerSelection); @@ -147,6 +157,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { setConservation(defaultConservation); setHistoricData(defaultHistoricData); setHistoricMap(defaultHistoricMap); + setEditableBuildings(defaultEditableBuildings) setShowLayerSelection(defaultShowLayerSelection); // reset layers + hiding this panel is integrated into one action //setDarkLightTheme('night'); // reset only layers }, @@ -181,6 +192,10 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { if(historicMap != defaultHistoricMap) { return true; } + if(editableBuildings != defaultEditableBuildings) { + return true; + } + setEditableBuildings //darkLightTheme not handled here return false; } @@ -326,6 +341,21 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { setHistoricMap(newHistoric); } + const editableBuildingsSwitch = useCallback( + (e) => { + flipEditableBuildings(e) + }, + [editableBuildings], + ) + const editableBuildingsSwitchOnClick = (e) => { + flipEditableBuildings(e) + } + function flipEditableBuildings(e) { + e.preventDefault(); + const newValue = (editableBuildings === 'enabled')? 'disabled' : 'enabled'; + setEditableBuildings(newValue); + } + const darkLightThemeSwitch = useCallback( (e) => { flipDarkLightTheme(e) @@ -393,6 +423,10 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { historicMapSwitch, historicMapSwitchOnClick, + editableBuildings, + editableBuildingsSwitch, + editableBuildingsSwitchOnClick, + darkLightTheme, darkLightThemeSwitch, darkLightThemeSwitchOnClick, diff --git a/app/src/frontend/map/editable-buildings-switcher.tsx b/app/src/frontend/map/editable-buildings-switcher.tsx new file mode 100644 index 000000000..9ea6120f8 --- /dev/null +++ b/app/src/frontend/map/editable-buildings-switcher.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import './map-button.css'; +import { useDisplayPreferences } from '../displayPreferences-context'; + +export const EditableBuildingsSwitcher: React.FC<{}> = () => { + const { editableBuildings, editableBuildingsSwitch, darkLightTheme } = useDisplayPreferences(); + return ( +
+ +
+ ); +} diff --git a/app/src/frontend/map/layers/building-base-layer.tsx b/app/src/frontend/map/layers/building-base-layer.tsx index 7ab26b95b..aa6c435df 100644 --- a/app/src/frontend/map/layers/building-base-layer.tsx +++ b/app/src/frontend/map/layers/building-base-layer.tsx @@ -3,17 +3,22 @@ import { TileLayer } from 'react-leaflet'; import { MapTheme } from '../../config/map-config'; import { MapTileset } from '../../config/tileserver-config'; - +import { useDisplayPreferences } from '../../displayPreferences-context'; import {getTileLayerUrl } from './get-tile-layer-url'; export function BuildingBaseLayer({ theme }: {theme: MapTheme}) { const tileset = `base_${theme}` as const; + const { editableBuildings } = useDisplayPreferences(); - return ; + } else { + return
+ } } diff --git a/app/src/frontend/map/layers/building-data-layer.tsx b/app/src/frontend/map/layers/building-data-layer.tsx index f709a02e0..515592faf 100644 --- a/app/src/frontend/map/layers/building-data-layer.tsx +++ b/app/src/frontend/map/layers/building-data-layer.tsx @@ -2,15 +2,21 @@ import * as React from 'react'; import { TileLayer } from 'react-leaflet'; import { BuildingMapTileset } from '../../config/tileserver-config'; - +import { useDisplayPreferences } from '../../displayPreferences-context'; import {getTileLayerUrl } from './get-tile-layer-url'; export function BuildingDataLayer({tileset, revisionId} : { tileset: BuildingMapTileset, revisionId: string }) { - return ; + } else { + return
+ } } \ No newline at end of file diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx index bdd4d64fa..b30c51e10 100644 --- a/app/src/frontend/map/map.tsx +++ b/app/src/frontend/map/map.tsx @@ -39,6 +39,7 @@ import { HistoricMapSwitcher } from './historic-map-switcher'; import { VistaSwitcher } from './vista-switcher'; import { CreativeSwitcher } from './creative-switcher'; import { HousingSwitcher } from './housing-switcher'; +import { EditableBuildingsSwitcher } from './editable-buildings-switcher'; import { BuildingMapTileset } from '../config/tileserver-config'; import { useDisplayPreferences } from '../displayPreferences-context'; import { CategoryMapDefinition } from '../config/category-maps-config'; @@ -176,6 +177,7 @@ export const ColouringMap : FC = ({ + : <> }