UX+Refactoring: use side-drawer for menu, reorder menu structure

This commit is contained in:
Pieter Vander Vennet 2024-08-29 02:46:51 +02:00
parent 8465b59c7f
commit 124e816abe
25 changed files with 645 additions and 1059 deletions

View file

@ -5,7 +5,7 @@ import { Store, UIEventSource } from "../Logic/UIEventSource"
import {
FeatureSource,
IndexedFeatureSource,
WritableFeatureSource,
WritableFeatureSource
} from "../Logic/FeatureSource/FeatureSource"
import { OsmConnection } from "../Logic/Osm/OsmConnection"
import { ExportableMap, MapProperties } from "./MapProperties"
@ -51,7 +51,7 @@ import SaveFeatureSourceToLocalStorage from "../Logic/FeatureSource/Actors/SaveF
import BBoxFeatureSource from "../Logic/FeatureSource/Sources/TouchesBboxFeatureSource"
import ThemeViewStateHashActor from "../Logic/Web/ThemeViewStateHashActor"
import NoElementsInViewDetector, {
FeatureViewState,
FeatureViewState
} from "../Logic/Actors/NoElementsInViewDetector"
import FilteredLayer from "./FilteredLayer"
import { PreferredRasterLayerSelector } from "../Logic/Actors/PreferredRasterLayerSelector"
@ -64,7 +64,7 @@ import { GeolocationControlState } from "../UI/BigComponents/GeolocationControl"
import Zoomcontrol from "../UI/Zoomcontrol"
import {
SummaryTileSource,
SummaryTileSourceRewriter,
SummaryTileSourceRewriter
} from "../Logic/FeatureSource/TiledFeatureSource/SummaryTileSource"
import summaryLayer from "../assets/generated/layers/summary.json"
import last_click_layerconfig from "../assets/generated/layers/last_click.json"
@ -178,7 +178,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
"oauth_token",
undefined,
"Used to complete the login"
),
)
})
this.userRelatedState = new UserRelatedState(
this.osmConnection,
@ -257,8 +257,8 @@ export default class ThemeViewState implements SpecialVisualizationState {
bbox.asGeoJson({
zoom: this.mapProperties.zoom.data,
...this.mapProperties.location.data,
id: "current_view_" + currentViewIndex,
}),
id: "current_view_" + currentViewIndex
})
]
})
)
@ -275,10 +275,10 @@ export default class ThemeViewState implements SpecialVisualizationState {
featurePropertiesStore: this.featureProperties,
osmConnection: this.osmConnection,
historicalUserLocations: this.geolocation.historicalUserLocations,
featureSwitches: this.featureSwitches,
featureSwitches: this.featureSwitches
},
layout?.isLeftRightSensitive() ?? false,
(e, extraMsg) => this.reportError(e, extraMsg),
(e, extraMsg) => this.reportError(e, extraMsg)
)
this.historicalUserLocations = this.geolocation.historicalUserLocations
this.newFeatures = new NewGeometryFromChangesFeatureSource(
@ -303,7 +303,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
"leftover features, such as",
features[0].properties
)
},
}
}
)
this.perLayer = perLayer.perLayer
@ -359,7 +359,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
{
currentZoom: this.mapProperties.zoom,
layerState: this.layerState,
bounds: this.visualFeedbackViewportBounds,
bounds: this.visualFeedbackViewportBounds
}
)
this.hasDataInView = new NoElementsInViewDetector(this).hasFeatureInView
@ -391,7 +391,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
public focusOnMap() {
if (this.map.data) {
this.map.data.getCanvas().focus()
console.log("Focused on map")
return
}
this.map.addCallbackAndRunD((map) => {
@ -454,7 +453,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
doShowLayer,
metaTags: this.userRelatedState.preferencesAsTags,
selectedElement: this.selectedElement,
fetchStore: (id) => this.featureProperties.getStore(id),
fetchStore: (id) => this.featureProperties.getStore(id)
})
})
return filteringFeatureSource
@ -481,7 +480,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
doShowLayer: flayerGps.isDisplayed,
layer: flayerGps.layerDef,
metaTags: this.userRelatedState.preferencesAsTags,
selectedElement: this.selectedElement,
selectedElement: this.selectedElement
})
}
@ -527,8 +526,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
/**
* Selects the feature that is 'i' closest to the map center
* @param i
* @private
*/
private selectClosestAtCenter(i: number = 0) {
if (this.userRelatedState.a11y.data !== "never") {
@ -557,23 +554,22 @@ export default class ThemeViewState implements SpecialVisualizationState {
this.previewedImage.setData(undefined)
return
}
this.selectedElement.setData(undefined)
this.guistate.closeAll()
if (!this.guistate.isSomethingOpen()) {
Zoomcontrol.resetzoom()
this.focusOnMap()
if(this.guistate.closeAll()){
return
}
this.selectedElement.setData(undefined)
Zoomcontrol.resetzoom()
this.focusOnMap()
})
Hotkeys.RegisterHotkey({ nomod: "f" }, docs.selectFavourites, () => {
this.guistate.menuViewTab.setData("favourites")
this.guistate.menuIsOpened.setData(true)
this.guistate.pageStates.favourites.set(true)
})
Hotkeys.RegisterHotkey(
{
nomod: " ",
onUp: true,
onUp: true
},
docs.selectItem,
() => {
@ -581,8 +577,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
return false
}
if (
this.guistate.menuIsOpened.data ||
this.guistate.themeIsOpened.data ||
this.guistate.isSomethingOpen() ||
this.previewedImage.data !== undefined
) {
return
@ -603,7 +598,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
Hotkeys.RegisterHotkey(
{
nomod: "" + i,
onUp: true,
onUp: true
},
doc,
() => this.selectClosestAtCenter(i - 1)
@ -616,22 +611,21 @@ export default class ThemeViewState implements SpecialVisualizationState {
}
Hotkeys.RegisterHotkey(
{
nomod: "b",
nomod: "b"
},
docs.openLayersPanel,
() => {
if (this.featureSwitches.featureSwitchBackgroundSelection.data) {
this.guistate.backgroundLayerSelectionIsOpened.setData(true)
this.guistate.pageStates.background.setData(true)
}
}
)
Hotkeys.RegisterHotkey(
{
nomod: "s",
nomod: "s"
},
Translations.t.hotkeyDocumentation.openFilterPanel,
() => {
console.log("S pressed")
if (this.featureSwitches.featureSwitchFilter.data) {
this.guistate.openFilterView()
}
@ -650,7 +644,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
available,
category,
current.data,
skipLayers,
skipLayers
)
if (!best) {
return
@ -706,7 +700,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
Hotkeys.RegisterHotkey(
{
shift: "T",
shift: "T"
},
Translations.t.hotkeyDocumentation.translationMode,
() => {
@ -738,7 +732,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
this.mapProperties.zoom.map((z) => Math.max(Math.floor(z), 0)),
this.mapProperties,
{
isActive: this.mapProperties.zoom.map((z) => z < maxzoom),
isActive: this.mapProperties.zoom.map((z) => z < maxzoom)
}
)
@ -770,7 +764,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
current_view: this.currentView,
favourite: this.favourites,
summary: this.featureSummary,
last_click: this.lastClickObject,
last_click: this.lastClickObject
}
this.closestFeatures.registerSource(specialLayers.favourite, "favourite")
@ -825,7 +819,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
doShowLayer: flayer.isDisplayed,
layer: flayer.layerDef,
metaTags: this.userRelatedState.preferencesAsTags,
selectedElement: this.selectedElement,
selectedElement: this.selectedElement
})
})
const summaryLayerConfig = new LayerConfig(<LayerConfigJson>summaryLayer, "summaryLayer")
@ -833,7 +827,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
features: specialLayers.summary,
layer: summaryLayerConfig,
// doShowLayer: this.mapProperties.zoom.map((z) => z < maxzoom),
selectedElement: this.selectedElement,
selectedElement: this.selectedElement
})
const lastClickLayerConfig = new LayerConfig(
@ -844,28 +838,27 @@ export default class ThemeViewState implements SpecialVisualizationState {
lastClickLayerConfig.isShown === undefined
? specialLayers.last_click
: specialLayers.last_click.features.mapD((fs) =>
fs.filter((f) => {
const matches = lastClickLayerConfig.isShown.matchesProperties(
f.properties
)
console.debug("LastClick ", f, "matches", matches)
return matches
})
)
fs.filter((f) => {
const matches = lastClickLayerConfig.isShown.matchesProperties(
f.properties
)
console.debug("LastClick ", f, "matches", matches)
return matches
})
)
new ShowDataLayer(this.map, {
features: new StaticFeatureSource(lastClickFiltered),
layer: lastClickLayerConfig,
onClick: (feature) => {
console.log("Last click was clicked", feature)
if (this.mapProperties.zoom.data >= Constants.minZoomLevelToAddNewPoint) {
this.selectedElement.setData(feature)
return
}
this.map.data.flyTo({
zoom: Constants.minZoomLevelToAddNewPoint,
center: GeoOperations.centerpointCoordinates(feature),
center: GeoOperations.centerpointCoordinates(feature)
})
},
}
})
}
@ -880,10 +873,12 @@ export default class ThemeViewState implements SpecialVisualizationState {
this.lastClickObject.clear()
}
})
this.guistate.allToggles.forEach((toggle) => {
toggle.toggle.addCallbackD((isOpened) => {
Object.values(this.guistate.pageStates).forEach((toggle) => {
toggle.addCallbackD((isOpened) => {
if (!isOpened) {
this.focusOnMap()
if (!this.guistate.isSomethingOpen()) {
this.focusOnMap()
}
}
})
})
@ -950,8 +945,8 @@ export default class ThemeViewState implements SpecialVisualizationState {
userid: this.osmConnection.userDetails.data?.uid,
pendingChanges: this.changes.pendingChanges.data,
previousChanges: this.changes.allChanges.data,
changeRewrites: Utils.MapToObj(this.changes._changesetHandler._remappings),
}),
changeRewrites: Utils.MapToObj(this.changes._changesetHandler._remappings)
})
})
} catch (e) {
console.error("Could not upload an error report")