midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add precise input method, enabled for public bookcases

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-07-14 00:17:15 +02:00
parent 42d0071b26
commit 315e2f7fd1
10 changed files with 318 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

95
UI/BigComponents/SimpleAddUI.ts
View file

@ -16,6 +16,9 @@ import {VariableUiElement} from "../Base/VariableUIElement";
import Toggle from "../Input/Toggle";
import UserDetails from "../../Logic/Osm/OsmConnection";
import {Translation} from "../i18n/Translation";
import LocationInput from "../Input/LocationInput";
import {InputElement} from "../Input/InputElement";
import Loc from "../../Models/Loc";
/*
* The SimpleAddUI is a single panel, which can have multiple states:
@ -25,14 +28,18 @@ import {Translation} from "../i18n/Translation";
* - A 'read your unread messages before adding a point'
*/
/*private*/
interface PresetInfo {
description: string | Translation,
name: string | BaseUIElement,
icon: BaseUIElement,
icon: () => BaseUIElement,
tags: Tag[],
layerToAddTo: {
layerDef: LayerConfig,
isDisplayed: UIEventSource<boolean>
},
preciseInput?: {
preferredBackground?: string
}
}
@ -48,18 +55,16 @@ export default class SimpleAddUI extends Toggle {
new SubtleButton(Svg.envelope_ui(),
Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false})
]);
const selectedPreset = new UIEventSource<PresetInfo>(undefined);
isShown.addCallback(_ => selectedPreset.setData(undefined)) // Clear preset selection when the UI is closed/opened
function createNewPoint(tags: any[]){
const loc = State.state.LastClickLocation.data;
let feature = State.state.changes.createElement(tags, loc.lat, loc.lon);
function createNewPoint(tags: any[], location: { lat: number, lon: number }) {
let feature = State.state.changes.createElement(tags, location.lat, location.lon);
State.state.selectedElement.setData(feature);
}
const presetsOverview = SimpleAddUI.CreateAllPresetsPanel(selectedPreset)
const addUi = new VariableUiElement(
@ -68,8 +73,8 @@ export default class SimpleAddUI extends Toggle {
return presetsOverview
}
return SimpleAddUI.CreateConfirmButton(preset,
tags => {
createNewPoint(tags)
(tags, location) => {
createNewPoint(tags, location)
selectedPreset.setData(undefined)
}, () => {
selectedPreset.setData(undefined)
@ -86,7 +91,7 @@ export default class SimpleAddUI extends Toggle {
addUi,
State.state.layerUpdater.runningQuery
),
Translations.t.general.add.zoomInFurther.Clone().SetClass("alert") ,
Translations.t.general.add.zoomInFurther.Clone().SetClass("alert"),
State.state.locationControl.map(loc => loc.zoom >= Constants.userJourney.minZoomLevelToAddNewPoints)
),
readYourMessages,
@ -103,22 +108,41 @@ export default class SimpleAddUI extends Toggle {
}
private static CreateConfirmButton(preset: PresetInfo,
confirm: (tags: any[]) => void,
confirm: (tags: any[], location: { lat: number, lon: number }) => void,
cancel: () => void): BaseUIElement {
let location = State.state.LastClickLocation;
let preciseInput: InputElement<Loc> = undefined
if (preset.preciseInput !== undefined) {
preciseInput = new LocationInput({
preferCategory: preset.preciseInput.preferredBackground ?? State.state.backgroundLayer,
centerLocation:
new UIEventSource({
lat: location.data.lat,
lon: location.data.lon,
zoom: 19
})
})
preciseInput.SetClass("h-32 rounded-xl overflow-hidden border border-gray").SetStyle("height: 12rem;")
}
const confirmButton = new SubtleButton(preset.icon,
let confirmButton: BaseUIElement = new SubtleButton(preset.icon(),
new Combine([
Translations.t.general.add.addNew.Subs({category: preset.name}),
Translations.t.general.add.warnVisibleForEveryone.Clone().SetClass("alert")
]).SetClass("flex flex-col")
).SetClass("font-bold break-words")
.onClick(() => confirm(preset.tags));
.onClick(() => {
confirm(preset.tags, (preciseInput?.GetValue() ?? location).data);
});
if (preciseInput !== undefined) {
confirmButton = new Combine([preciseInput, confirmButton])
}
const openLayerControl =
const openLayerControl =
new SubtleButton(
Svg.layers_ui(),
new Combine([
@ -128,9 +152,9 @@ export default class SimpleAddUI extends Toggle {
Translations.t.general.add.openLayerControl
])
)
.onClick(() => State.state.layerControlIsOpened.setData(true))
.onClick(() => State.state.layerControlIsOpened.setData(true))
const openLayerOrConfirm = new Toggle(
confirmButton,
openLayerControl,
@ -140,12 +164,12 @@ export default class SimpleAddUI extends Toggle {
const cancelButton = new SubtleButton(Svg.close_ui(),
Translations.t.general.cancel
).onClick(cancel )
).onClick(cancel)
return new Combine([
Translations.t.general.add.confirmIntro.Subs({title: preset.name}),
State.state.osmConnection.userDetails.data.dryRun ?
Translations.t.general.testing.Clone().SetClass("alert") : undefined ,
State.state.osmConnection.userDetails.data.dryRun ?
Translations.t.general.testing.Clone().SetClass("alert") : undefined,
openLayerOrConfirm,
cancelButton,
preset.description,
@ -180,11 +204,11 @@ export default class SimpleAddUI extends Toggle {
}
private static CreatePresetSelectButton(preset: PresetInfo){
private static CreatePresetSelectButton(preset: PresetInfo) {
const tagInfo =SimpleAddUI.CreateTagInfoFor(preset, false);
const tagInfo = SimpleAddUI.CreateTagInfoFor(preset, false);
return new SubtleButton(
preset.icon,
preset.icon(),
new Combine([
Translations.t.general.add.addNew.Subs({
category: preset.name
@ -194,29 +218,30 @@ export default class SimpleAddUI extends Toggle {
]).SetClass("flex flex-col")
)
}
/*
* Generates the list with all the buttons.*/
/*
* Generates the list with all the buttons.*/
private static CreatePresetButtons(selectedPreset: UIEventSource<PresetInfo>): BaseUIElement {
const allButtons = [];
for (const layer of State.state.filteredLayers.data) {
if(layer.isDisplayed.data === false && State.state.featureSwitchLayers){
if (layer.isDisplayed.data === false && State.state.featureSwitchLayers) {
continue;
}
const presets = layer.layerDef.presets;
for (const preset of presets) {
const tags = TagUtils.KVtoProperties(preset.tags ?? []);
let icon: BaseUIElement = layer.layerDef.GenerateLeafletStyle(new UIEventSource<any>(tags), false).icon.html
let icon:() => BaseUIElement = () => layer.layerDef.GenerateLeafletStyle(new UIEventSource<any>(tags), false).icon.html
.SetClass("w-12 h-12 block relative");
const presetInfo: PresetInfo = {
tags: preset.tags,
layerToAddTo: layer,
name: preset.title,
description: preset.description,
icon: icon
icon: icon,
preciseInput: preset.preciseInput
}
const button = SimpleAddUI.CreatePresetSelectButton(presetInfo);

112
UI/Input/LocationInput.ts Normal file
View file

@ -0,0 +1,112 @@
import {InputElement} from "./InputElement";
import Loc from "../../Models/Loc";
import {UIEventSource} from "../../Logic/UIEventSource";
import Minimap from "../Base/Minimap";
import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers";
import BaseLayer from "../../Models/BaseLayer";
import Combine from "../Base/Combine";
import Svg from "../../Svg";
export default class LocationInput extends InputElement<Loc> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private _centerLocation: UIEventSource<Loc>;
private readonly preferCategory;
constructor(options?: {
centerLocation?: UIEventSource<Loc>,
preferCategory?: string | UIEventSource<string>,
}) {
super();
options = options ?? {}
options.centerLocation = options.centerLocation ?? new UIEventSource<Loc>({lat: 0, lon: 0, zoom: 1})
this._centerLocation = options.centerLocation;
if(typeof options.preferCategory === "string"){
options.preferCategory = new UIEventSource<string>(options.preferCategory);
}
this.preferCategory = options.preferCategory ?? new UIEventSource<string>(undefined)
this.SetClass("block h-full")
}
GetValue(): UIEventSource<Loc> {
return this._centerLocation;
}
IsValid(t: Loc): boolean {
return t !== undefined;
}
protected InnerConstructElement(): HTMLElement {
const layer: UIEventSource<BaseLayer> = new AvailableBaseLayers(this._centerLocation).availableEditorLayers.map(allLayers => {
// First float all 'best layers' to the top
allLayers.sort((a, b) => {
if (a.isBest && b.isBest) {
return 0;
}
if (!a.isBest) {
return 1
}
return -1;
}
)
if (this.preferCategory) {
const self = this;
//Then sort all 'photo'-layers to the top. Stability of the sorting will force a 'best' photo layer on top
allLayers.sort((a, b) => {
const preferred = self.preferCategory.data
if (a.category === preferred && b.category === preferred) {
return 0;
}
if (a.category !== preferred) {
return 1
}
return -1;
}
)
}
return allLayers[0]
}, [this.preferCategory]
)
layer.addCallbackAndRunD(layer => console.log(layer))
const map = new Minimap(
{
location: this._centerLocation,
background: layer
}
)
map.leafletMap.addCallbackAndRunD(leaflet => {
console.log(leaflet.getBounds(), leaflet.getBounds().pad(0.15))
leaflet.setMaxBounds(
leaflet.getBounds().pad(0.15)
)
})
layer.map(layer => {
const leaflet = map.leafletMap.data
if (leaflet === undefined || layer === undefined) {
return;
}
leaflet.setMaxZoom(layer.max_zoom)
leaflet.setMinZoom(layer.max_zoom - 3)
leaflet.setZoom(layer.max_zoom - 1)
}, [map.leafletMap])
return new Combine([
new Combine([
Svg.crosshair_empty_ui()
.SetClass("block relative")
.SetStyle("left: -1.25rem; top: -1.25rem; width: 2.5rem; height: 2.5rem")
]).SetClass("block w-0 h-0 z-10 relative")
.SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%"),
map
.SetClass("z-0 relative block w-full h-full bg-gray-100")
]).ConstructElement();
}
}