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

Further work on the move flow

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-13 03:09:37 +02:00
parent 11d5ccf93f
commit 95867635e0
10 changed files with 763 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

1
UI/BigComponents/SimpleAddUI.ts
View file

@ -150,6 +150,7 @@ export default class SimpleAddUI extends Toggle {
maxSnapDistance: preset.preciseInput.maxSnapDistance,
bounds: mapBounds
})
preciseInput.installBounds(0.15, true)
preciseInput.SetClass("h-32 rounded-xl overflow-hidden border border-gray").SetStyle("height: 12rem;")

16
UI/Input/LocationInput.ts
View file

@ -43,9 +43,13 @@ export default class LocationInput extends InputElement<Loc> implements MinimapO
private readonly _bounds: UIEventSource<BBox>;
public readonly _matching_layer: LayerConfig;
private readonly map: BaseUIElement & MinimapObj;
public readonly leafletMap: UIEventSource<any>
private readonly clickLocation: UIEventSource<Loc>;
private readonly _minZoom: number;
constructor(options: {
minZoom?: number,
mapBackground?: UIEventSource<BaseLayer>,
snapTo?: UIEventSource<{ feature: any }[]>,
maxSnapDistance?: number,
@ -60,6 +64,7 @@ export default class LocationInput extends InputElement<Loc> implements MinimapO
this._centerLocation = options.centerLocation;
this._snappedPointTags = options.snappedPointTags
this._bounds = options.bounds;
this._minZoom = options.minZoom
if (this._snapTo === undefined) {
this._value = this._centerLocation;
} else {
@ -142,6 +147,7 @@ export default class LocationInput extends InputElement<Loc> implements MinimapO
bounds: this._bounds
}
)
this.leafletMap = this.map.leafletMap
}
GetValue(): UIEventSource<Loc> {
@ -154,10 +160,9 @@ export default class LocationInput extends InputElement<Loc> implements MinimapO
protected InnerConstructElement(): HTMLElement {
try {
const self = this;
this.clickLocation.addCallbackAndRunD(location => this._centerLocation.setData(location))
this.map.installBounds(0.15, true);
if (this._snapTo !== undefined) {
if (this._snapTo !== undefined) {
// Show the lines to snap to
new ShowDataMultiLayer({
@ -191,7 +196,7 @@ export default class LocationInput extends InputElement<Loc> implements MinimapO
}
leaflet.setMaxZoom(layer.max_zoom)
leaflet.setMinZoom(layer.max_zoom - 2)
leaflet.setMinZoom(self._minZoom ?? layer.max_zoom - 2)
leaflet.setZoom(layer.max_zoom - 1)
}, [this.map.leafletMap])
@ -223,8 +228,7 @@ export default class LocationInput extends InputElement<Loc> implements MinimapO
}
}
readonly leafletMap: UIEventSource<any> = this.map.leafletMap
installBounds(factor: number | BBox, showRange?: boolean): void {
this.map.installBounds(factor, showRange)
}

177
UI/Popup/MoveWizard.ts
View file

@ -11,45 +11,47 @@ import BaseUIElement from "../BaseUIElement";
import LocationInput from "../Input/LocationInput";
import Loc from "../../Models/Loc";
import {GeoOperations} from "../../Logic/GeoOperations";
import {OsmObject} from "../../Logic/Osm/OsmObject";
import {Changes} from "../../Logic/Osm/Changes";
import ChangeLocationAction from "../../Logic/Osm/Actions/ChangeLocationAction";
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
interface MoveReason {text: Translation | string,
interface MoveReason {
text: Translation | string,
icon: string | BaseUIElement,
changesetCommentValue: string,
lockBounds: true | boolean,
background: undefined | "map" | "photo",
startZoom: number}
startZoom: number,
minZoom: number
}
export default class MoveWizard extends Toggle {
/**
* The UI-element which helps moving a point
*/
constructor(
featureToMove : any,
featureToMove: any,
state: {
osmConnection: OsmConnection,
featureSwitchUserbadge: UIEventSource<boolean>
},options?: {
reasons?: {text: Translation | string,
icon: string | BaseUIElement,
changesetCommentValue: string,
lockBounds?: true | boolean,
background?: undefined | "map" | "photo",
startZoom?: number | 15
}[]
disableDefaultReasons?: false | boolean
}) {
//State.state.featureSwitchUserbadge
// state = State.state
osmConnection: OsmConnection,
featureSwitchUserbadge: UIEventSource<boolean>,
changes: Changes,
layoutToUse: LayoutConfig
}, options?: {
reasons?: MoveReason[]
disableDefaultReasons?: false | boolean
}) {
options = options ?? {}
const t = Translations.t.move
const t = Translations.t.move
const loginButton = new Toggle(
t.loginToMove.Clone() .SetClass("btn").onClick(() => state.osmConnection.AttemptLogin()),
t.loginToMove.Clone().SetClass("btn").onClick(() => state.osmConnection.AttemptLogin()),
undefined,
state.featureSwitchUserbadge
)
const currentStep = new UIEventSource<"start" | "reason" | "pick_location">("start")
const currentStep = new UIEventSource<"start" | "reason" | "pick_location" | "moved">("start")
const moveReason = new UIEventSource<MoveReason>(undefined)
const moveButton = new SubtleButton(
Svg.move_ui(),
@ -57,26 +59,35 @@ export default class MoveWizard extends Toggle {
).onClick(() => {
currentStep.setData("reason")
})
const reasons : MoveReason[] = []
if(!options.disableDefaultReasons){
const moveAgainButton = new SubtleButton(
Svg.move_ui(),
t.inviteToMoveAgain.Clone()
).onClick(() => {
currentStep.setData("reason")
})
const reasons: MoveReason[] = []
if (!options.disableDefaultReasons) {
reasons.push({
text: t.reasonRelocation.Clone(),
icon: Svg.relocation_svg(),
changesetCommentValue: "relocated",
lockBounds: false,
background: undefined,
startZoom: 12
startZoom: 12,
minZoom: 6
})
reasons.push({
text: t.reasonInaccurate.Clone(),
icon: Svg.crosshair_svg(),
changesetCommentValue: "improve_accuracy",
lockBounds: true,
background: "photo",
startZoom: 17
startZoom: 17,
minZoom: 16
})
}
for (const reason of options.reasons ?? []) {
@ -86,46 +97,112 @@ export default class MoveWizard extends Toggle {
changesetCommentValue: reason.changesetCommentValue,
lockBounds: reason.lockBounds ?? true,
background: reason.background,
startZoom: reason.startZoom ?? 15
startZoom: reason.startZoom ?? 15,
minZoom: reason.minZoom
})
}
const selectReason = new Combine(reasons.map(r => new SubtleButton(r.icon, r.text).onClick(() => {
moveReason.setData(r)
currentStep.setData("pick_location")
})))
const cancelButton = new SubtleButton(Svg.close_svg(), t.cancel).onClick(() => currentStep.setData("start"))
const [lon, lat] = GeoOperations.centerpointCoordinates(featureToMove)
const locationInput = new LocationInput({
centerLocation: new UIEventSource<Loc>({
const locationInput = moveReason.map(reason => {
if (reason === undefined) {
return undefined
}
const loc = new UIEventSource<Loc>({
lon: lon,
lat: lat,
zoom: moveReason.data.startZoom
}),
})
locationInput.SetStyle("height: 25rem")
super(
zoom: reason?.startZoom ?? 16
})
const locationInput = new LocationInput({
minZoom: reason.minZoom,
centerLocation: loc
})
if (reason.lockBounds) {
locationInput.installBounds(0.05, true)
}
locationInput.SetStyle("height: 17.5rem")
const confirmMove = new SubtleButton(Svg.move_confirm_svg(), t.confirmMove)
confirmMove.onClick(() => {
state.changes.applyAction(new ChangeLocationAction(featureToMove.properties.id, [locationInput.GetValue().data.lon, locationInput.GetValue().data.lat], {
reason: Translations.WT(reason.text).textFor("en"),
theme: state.layoutToUse.icon
}))
currentStep.setData("moved")
})
const zoomInFurhter = t.zoomInFurther.Clone().SetClass("alert block m-6")
return new Combine([
locationInput,
new Toggle(confirmMove, zoomInFurhter, locationInput.GetValue().map(l => l.zoom >= 19))
]).SetClass("flex flex-col")
});
const dialogClasses = "p-2 md:p-4 m-2 border border-gray-400 rounded-xl flex flex-col"
const moveFlow = new Toggle(
new VariableUiElement(currentStep.map(currentStep => {
switch (currentStep){
switch (currentStep) {
case "start":
return moveButton;
case "reason":
return new Combine([selectReason, cancelButton]);
return new Combine([t.whyMove.Clone().SetClass("text-lg font-bold"), selectReason, cancelButton]).SetClass(dialogClasses);
case "pick_location":
return new Combine([locationInput])
return new Combine([t.moveTitle.Clone().SetClass("text-lg font-bold"), new VariableUiElement(locationInput), cancelButton]).SetClass(dialogClasses)
case "moved":
return new Combine([t.pointIsMoved.Clone().SetClass("thanks"), moveAgainButton]).SetClass("flex flex-col");
}
})),
loginButton,
state.osmConnection.isLoggedIn
)
let id = featureToMove.properties.id
const backend = state.osmConnection._oauth_config.url
if (id.startsWith(backend)) {
id = id.substring(backend.length)
}
const moveDisallowedReason = new UIEventSource<BaseUIElement>(undefined)
if (id.startsWith("way")) {
moveDisallowedReason.setData(t.isWay.Clone())
} else if (id.startsWith("relation")) {
moveDisallowedReason.setData(t.isRelation.Clone())
} else {
OsmObject.DownloadReferencingWays(id).then(referencing => {
if (referencing.length > 0) {
console.log("Got a referencing way, move not allowed")
moveDisallowedReason.setData(t.partOfAWay.Clone())
}
})
OsmObject.DownloadReferencingRelations(id).then(partOf => {
if(partOf.length > 0){
moveDisallowedReason.setData(t.partOfRelation.Clone())
}
})
}
super(
moveFlow,
new Combine([
Svg.move_not_allowed_svg().SetStyle("height: 2rem"),
new Combine([t.cannotBeMoved.Clone(),
new VariableUiElement(moveDisallowedReason).SetClass("subtle")
]).SetClass("flex flex-col")
]).SetClass("flex"),
moveDisallowedReason.map(r => r === undefined)
)
}
}