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

First steps for a move flow

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-11 00:54:35 +02:00
parent 950b979d83
commit 828102c547
9 changed files with 278 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

50
UI/Input/LocationInput.ts
View file

@ -1,7 +1,7 @@
import {InputElement} from "./InputElement";
import Loc from "../../Models/Loc";
import {UIEventSource} from "../../Logic/UIEventSource";
import Minimap from "../Base/Minimap";
import Minimap, {MinimapObj} from "../Base/Minimap";
import BaseLayer from "../../Models/BaseLayer";
import Combine from "../Base/Combine";
import Svg from "../../Svg";
@ -14,8 +14,9 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import {BBox} from "../../Logic/BBox";
import {FixedUiElement} from "../Base/FixedUiElement";
import ShowDataLayer from "../ShowDataLayer/ShowDataLayer";
import BaseUIElement from "../BaseUIElement";
export default class LocationInput extends InputElement<Loc> {
export default class LocationInput extends InputElement<Loc> implements MinimapObj {
private static readonly matchLayer = new LayerConfig(
{
@ -41,6 +42,8 @@ export default class LocationInput extends InputElement<Loc> {
private readonly _snappedPointTags: any;
private readonly _bounds: UIEventSource<BBox>;
public readonly _matching_layer: LayerConfig;
private readonly map: BaseUIElement & MinimapObj;
private readonly clickLocation: UIEventSource<Loc>;
constructor(options: {
mapBackground?: UIEventSource<BaseLayer>,
@ -127,6 +130,18 @@ export default class LocationInput extends InputElement<Loc> {
}
this.mapBackground = options.mapBackground ?? State.state?.backgroundLayer ?? new UIEventSource(AvailableBaseLayers.osmCarto)
this.SetClass("block h-full")
this.clickLocation = new UIEventSource<Loc>(undefined);
this.map = Minimap.createMiniMap(
{
location: this._centerLocation,
background: this.mapBackground,
attribution: this.mapBackground !== State.state?.backgroundLayer,
lastClickLocation: this.clickLocation,
bounds: this._bounds
}
)
}
GetValue(): UIEventSource<Loc> {
@ -139,19 +154,8 @@ export default class LocationInput extends InputElement<Loc> {
protected InnerConstructElement(): HTMLElement {
try {
const clickLocation = new UIEventSource<Loc>(undefined);
const map = Minimap.createMiniMap(
{
location: this._centerLocation,
background: this.mapBackground,
attribution: this.mapBackground !== State.state?.backgroundLayer,
lastClickLocation: clickLocation,
bounds: this._bounds
}
)
clickLocation.addCallbackAndRunD(location => this._centerLocation.setData(location))
map.installBounds(0.15, true);
this.clickLocation.addCallbackAndRunD(location => this._centerLocation.setData(location))
this.map.installBounds(0.15, true);
if (this._snapTo !== undefined) {
@ -160,7 +164,7 @@ export default class LocationInput extends InputElement<Loc> {
features: new StaticFeatureSource(this._snapTo, true),
enablePopups: false,
zoomToFeatures: false,
leafletMap: map.leafletMap,
leafletMap: this.map.leafletMap,
layers: State.state.filteredLayers
}
)
@ -175,13 +179,13 @@ export default class LocationInput extends InputElement<Loc> {
features: new StaticFeatureSource(matchPoint, true),
enablePopups: false,
zoomToFeatures: false,
leafletMap: map.leafletMap,
leafletMap: this.map.leafletMap,
layerToShow: this._matching_layer
})
}
this.mapBackground.map(layer => {
const leaflet = map.leafletMap.data
const leaflet = this.map.leafletMap.data
if (leaflet === undefined || layer === undefined) {
return;
}
@ -190,7 +194,7 @@ export default class LocationInput extends InputElement<Loc> {
leaflet.setMinZoom(layer.max_zoom - 2)
leaflet.setZoom(layer.max_zoom - 1)
}, [map.leafletMap])
}, [this.map.leafletMap])
const animatedHand = Svg.hand_ui()
.SetStyle("width: 2rem; height: unset;")
@ -209,7 +213,7 @@ export default class LocationInput extends InputElement<Loc> {
.SetClass("block w-0 h-0 z-10 relative")
.SetStyle("left: calc(50% + 3rem); top: calc(50% + 2rem); opacity: 0.7"),
map
this.map
.SetClass("z-0 relative block w-full h-full bg-gray-100")
]).ConstructElement();
@ -219,4 +223,10 @@ export default class LocationInput extends InputElement<Loc> {
}
}
readonly leafletMap: UIEventSource<any> = this.map.leafletMap
installBounds(factor: number | BBox, showRange?: boolean): void {
this.map.installBounds(factor, showRange)
}
}

131
UI/Popup/MoveWizard.ts Normal file
View file

@ -0,0 +1,131 @@
import {SubtleButton} from "../Base/SubtleButton";
import Combine from "../Base/Combine";
import Svg from "../../Svg";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import Toggle from "../Input/Toggle";
import {UIEventSource} from "../../Logic/UIEventSource";
import Translations from "../i18n/Translations";
import {VariableUiElement} from "../Base/VariableUIElement";
import {Translation} from "../i18n/Translation";
import BaseUIElement from "../BaseUIElement";
import LocationInput from "../Input/LocationInput";
import Loc from "../../Models/Loc";
import {GeoOperations} from "../../Logic/GeoOperations";
interface MoveReason {text: Translation | string,
icon: string | BaseUIElement,
changesetCommentValue: string,
lockBounds: true | boolean,
background: undefined | "map" | "photo",
startZoom: number}
export default class MoveWizard extends Toggle {
/**
* The UI-element which helps moving a point
*/
constructor(
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
options = options ?? {}
const t = Translations.t.move
const loginButton = new Toggle(
t.loginToMove.Clone() .SetClass("btn").onClick(() => state.osmConnection.AttemptLogin()),
undefined,
state.featureSwitchUserbadge
)
const currentStep = new UIEventSource<"start" | "reason" | "pick_location">("start")
const moveReason = new UIEventSource<MoveReason>(undefined)
const moveButton = new SubtleButton(
Svg.move_ui(),
t.inviteToMove.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
})
reasons.push({
text: t.reasonInaccurate.Clone(),
icon: Svg.crosshair_svg(),
changesetCommentValue: "improve_accuracy",
lockBounds: true,
background: "photo",
startZoom: 17
})
}
for (const reason of options.reasons ?? []) {
reasons.push({
text: reason.text,
icon: reason.icon,
changesetCommentValue: reason.changesetCommentValue,
lockBounds: reason.lockBounds ?? true,
background: reason.background,
startZoom: reason.startZoom ?? 15
})
}
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>({
lon: lon,
lat: lat,
zoom: moveReason.data.startZoom
}),
})
locationInput.SetStyle("height: 25rem")
super(
new VariableUiElement(currentStep.map(currentStep => {
switch (currentStep){
case "start":
return moveButton;
case "reason":
return new Combine([selectReason, cancelButton]);
case "pick_location":
return new Combine([locationInput])
}
})),
loginButton,
state.osmConnection.isLoggedIn
)
}
}