forked from MapComplete/MapComplete
UX+Refactoring: use side-drawer for menu, reorder menu structure
This commit is contained in:
parent
8465b59c7f
commit
124e816abe
25 changed files with 645 additions and 1059 deletions
|
|
@ -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")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue