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

Reformat all files with prettier

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-09-08 21:40:48 +02:00
parent e22d189376
commit b541d3eab4
382 changed files with 50893 additions and 35566 deletions
Download patch file Download diff file Expand all files Collapse all files

241
UI/NewPoint/ConfirmLocationOfPoint.ts
View file

@ -1,56 +1,61 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline";
import BaseUIElement from "../BaseUIElement";
import LocationInput from "../Input/LocationInput";
import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers";
import {BBox} from "../../Logic/BBox";
import {TagUtils} from "../../Logic/Tags/TagUtils";
import {SubtleButton} from "../Base/SubtleButton";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import Svg from "../../Svg";
import Toggle from "../Input/Toggle";
import SimpleAddUI, {PresetInfo} from "../BigComponents/SimpleAddUI";
import BaseLayer from "../../Models/BaseLayer";
import Img from "../Base/Img";
import Title from "../Base/Title";
import {GlobalFilter} from "../../Logic/State/MapState";
import {VariableUiElement} from "../Base/VariableUIElement";
import {Tag} from "../../Logic/Tags/Tag";
import { UIEventSource } from "../../Logic/UIEventSource"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline"
import BaseUIElement from "../BaseUIElement"
import LocationInput from "../Input/LocationInput"
import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers"
import { BBox } from "../../Logic/BBox"
import { TagUtils } from "../../Logic/Tags/TagUtils"
import { SubtleButton } from "../Base/SubtleButton"
import Combine from "../Base/Combine"
import Translations from "../i18n/Translations"
import Svg from "../../Svg"
import Toggle from "../Input/Toggle"
import SimpleAddUI, { PresetInfo } from "../BigComponents/SimpleAddUI"
import BaseLayer from "../../Models/BaseLayer"
import Img from "../Base/Img"
import Title from "../Base/Title"
import { GlobalFilter } from "../../Logic/State/MapState"
import { VariableUiElement } from "../Base/VariableUIElement"
import { Tag } from "../../Logic/Tags/Tag"
export default class ConfirmLocationOfPoint extends Combine {
constructor(
state: {
globalFilters: UIEventSource<GlobalFilter[]>;
featureSwitchIsTesting: UIEventSource<boolean>;
osmConnection: OsmConnection,
featurePipeline: FeaturePipeline,
globalFilters: UIEventSource<GlobalFilter[]>
featureSwitchIsTesting: UIEventSource<boolean>
osmConnection: OsmConnection
featurePipeline: FeaturePipeline
backgroundLayer?: UIEventSource<BaseLayer>
},
filterViewIsOpened: UIEventSource<boolean>,
preset: PresetInfo,
confirmText: BaseUIElement,
loc: { lon: number, lat: number },
confirm: (tags: any[], location: { lat: number, lon: number }, snapOntoWayId: string) => void,
loc: { lon: number; lat: number },
confirm: (
tags: any[],
location: { lat: number; lon: number },
snapOntoWayId: string
) => void,
cancel: () => void,
closePopup: () => void
) {
let preciseInput: LocationInput = undefined
if (preset.preciseInput !== undefined) {
// Create location input
// We uncouple the event source
const zloc = {...loc, zoom: 19}
const locationSrc = new UIEventSource(zloc);
const zloc = { ...loc, zoom: 19 }
const locationSrc = new UIEventSource(zloc)
let backgroundLayer = new UIEventSource(state?.backgroundLayer?.data ?? AvailableBaseLayers.osmCarto);
let backgroundLayer = new UIEventSource(
state?.backgroundLayer?.data ?? AvailableBaseLayers.osmCarto
)
if (preset.preciseInput.preferredBackground) {
const defaultBackground = AvailableBaseLayers.SelectBestLayerAccordingTo(locationSrc, new UIEventSource<string | string[]>(preset.preciseInput.preferredBackground));
const defaultBackground = AvailableBaseLayers.SelectBestLayerAccordingTo(
locationSrc,
new UIEventSource<string | string[]>(preset.preciseInput.preferredBackground)
)
// Note that we _break the link_ here, as the minimap will take care of the switching!
backgroundLayer.setData(defaultBackground.data)
}
@ -62,77 +67,89 @@ export default class ConfirmLocationOfPoint extends Combine {
mapBounds = new UIEventSource<BBox>(undefined)
}
const tags = TagUtils.KVtoProperties(preset.tags ?? []);
const tags = TagUtils.KVtoProperties(preset.tags ?? [])
preciseInput = new LocationInput({
mapBackground: backgroundLayer,
centerLocation: locationSrc,
snapTo: snapToFeatures,
snappedPointTags: tags,
maxSnapDistance: preset.preciseInput.maxSnapDistance,
bounds: mapBounds
bounds: mapBounds,
})
preciseInput.installBounds(preset.boundsFactor ?? 0.25, true)
preciseInput.SetClass("rounded-xl overflow-hidden border border-gray").SetStyle("height: 18rem; max-height: 50vh")
preciseInput
.SetClass("rounded-xl overflow-hidden border border-gray")
.SetStyle("height: 18rem; max-height: 50vh")
if (preset.preciseInput.snapToLayers && preset.preciseInput.snapToLayers.length > 0) {
// We have to snap to certain layers.
// Lets fetch them
let loadedBbox: BBox = undefined
mapBounds?.addCallbackAndRunD(bbox => {
mapBounds?.addCallbackAndRunD((bbox) => {
if (loadedBbox !== undefined && bbox.isContainedIn(loadedBbox)) {
// All is already there
// return;
}
bbox = bbox.pad(Math.max(preset.boundsFactor ?? 0.25, 2), Math.max(preset.boundsFactor ?? 0.25, 2));
loadedBbox = bbox;
bbox = bbox.pad(
Math.max(preset.boundsFactor ?? 0.25, 2),
Math.max(preset.boundsFactor ?? 0.25, 2)
)
loadedBbox = bbox
const allFeatures: { feature: any }[] = []
preset.preciseInput.snapToLayers.forEach(layerId => {
preset.preciseInput.snapToLayers.forEach((layerId) => {
console.log("Snapping to", layerId)
state.featurePipeline.GetFeaturesWithin(layerId, bbox)?.forEach(feats => allFeatures.push(...feats.map(f => ({feature: f}))))
state.featurePipeline
.GetFeaturesWithin(layerId, bbox)
?.forEach((feats) =>
allFeatures.push(...feats.map((f) => ({ feature: f })))
)
})
console.log("Snapping to", allFeatures)
snapToFeatures.setData(allFeatures)
})
}
}
let confirmButton: BaseUIElement = new SubtleButton(preset.icon(),
let confirmButton: BaseUIElement = new SubtleButton(
preset.icon(),
new Combine([
confirmText,
Translations.t.general.add.warnVisibleForEveryone.Clone().SetClass("alert")
Translations.t.general.add.warnVisibleForEveryone.Clone().SetClass("alert"),
]).SetClass("flex flex-col")
).SetClass("font-bold break-words")
)
.SetClass("font-bold break-words")
.onClick(() => {
console.log("The confirmLocationPanel - precise input yielded ", preciseInput?.GetValue()?.data)
const globalFilterTagsToAdd: Tag[][] = state.globalFilters.data.filter(gf => gf.onNewPoint !== undefined)
.map(gf => gf.onNewPoint.tags)
const globalTags : Tag[] = [].concat(...globalFilterTagsToAdd)
console.log(
"The confirmLocationPanel - precise input yielded ",
preciseInput?.GetValue()?.data
)
const globalFilterTagsToAdd: Tag[][] = state.globalFilters.data
.filter((gf) => gf.onNewPoint !== undefined)
.map((gf) => gf.onNewPoint.tags)
const globalTags: Tag[] = [].concat(...globalFilterTagsToAdd)
console.log("Global tags to add are: ", globalTags)
confirm([...preset.tags, ...globalTags], preciseInput?.GetValue()?.data ?? loc, preciseInput?.snappedOnto?.data?.properties?.id);
});
confirm(
[...preset.tags, ...globalTags],
preciseInput?.GetValue()?.data ?? loc,
preciseInput?.snappedOnto?.data?.properties?.id
)
})
if (preciseInput !== undefined) {
confirmButton = new Combine([preciseInput, confirmButton])
}
const openLayerControl =
new SubtleButton(
Svg.layers_ui(),
new Combine([
Translations.t.general.add.layerNotEnabled
.Subs({layer: preset.layerToAddTo.layerDef.name})
.SetClass("alert"),
Translations.t.general.add.openLayerControl
])
)
.onClick(() => filterViewIsOpened.setData(true))
const openLayerControl = new SubtleButton(
Svg.layers_ui(),
new Combine([
Translations.t.general.add.layerNotEnabled
.Subs({ layer: preset.layerToAddTo.layerDef.name })
.SetClass("alert"),
Translations.t.general.add.openLayerControl,
])
).onClick(() => filterViewIsOpened.setData(true))
let openLayerOrConfirm = new Toggle(
confirmButton,
@ -143,73 +160,82 @@ export default class ConfirmLocationOfPoint extends Combine {
const disableFilter = new SubtleButton(
new Combine([
Svg.filter_ui().SetClass("absolute w-full"),
Svg.cross_bottom_right_svg().SetClass("absolute red-svg")
Svg.cross_bottom_right_svg().SetClass("absolute red-svg"),
]).SetClass("relative"),
new Combine(
[
Translations.t.general.add.disableFiltersExplanation.Clone(),
Translations.t.general.add.disableFilters.Clone().SetClass("text-xl")
]
).SetClass("flex flex-col")
new Combine([
Translations.t.general.add.disableFiltersExplanation.Clone(),
Translations.t.general.add.disableFilters.Clone().SetClass("text-xl"),
]).SetClass("flex flex-col")
).onClick(() => {
const appliedFilters = preset.layerToAddTo.appliedFilters;
const appliedFilters = preset.layerToAddTo.appliedFilters
appliedFilters.data.forEach((_, k) => appliedFilters.data.set(k, undefined))
appliedFilters.ping()
cancel()
closePopup()
})
// We assume the number of global filters won't change during the run of the program
for (let i = 0; i < state.globalFilters.data.length; i++) {
const hasBeenCheckedOf = new UIEventSource(false);
const hasBeenCheckedOf = new UIEventSource(false)
const filterConfirmPanel = new VariableUiElement(
state.globalFilters.map(gfs => {
const gf = gfs[i]
const confirm = gf.onNewPoint?.confirmAddNew?.Subs({preset: preset.title})
return new Combine([
gf.onNewPoint?.safetyCheck,
new SubtleButton(Svg.confirm_svg(), confirm).onClick(() => hasBeenCheckedOf.setData(true))
])
}
))
state.globalFilters.map((gfs) => {
const gf = gfs[i]
const confirm = gf.onNewPoint?.confirmAddNew?.Subs({ preset: preset.title })
return new Combine([
gf.onNewPoint?.safetyCheck,
new SubtleButton(Svg.confirm_svg(), confirm).onClick(() =>
hasBeenCheckedOf.setData(true)
),
])
})
)
openLayerOrConfirm = new Toggle(
openLayerOrConfirm, filterConfirmPanel,
state.globalFilters.map(f => hasBeenCheckedOf.data || f[i]?.onNewPoint === undefined, [hasBeenCheckedOf])
openLayerOrConfirm,
filterConfirmPanel,
state.globalFilters.map(
(f) => hasBeenCheckedOf.data || f[i]?.onNewPoint === undefined,
[hasBeenCheckedOf]
)
)
}
const hasActiveFilter = preset.layerToAddTo.appliedFilters
.map(appliedFilters => {
const activeFilters = Array.from(appliedFilters.values()).filter(f => f?.currentFilter !== undefined);
return activeFilters.length === 0;
})
const hasActiveFilter = preset.layerToAddTo.appliedFilters.map((appliedFilters) => {
const activeFilters = Array.from(appliedFilters.values()).filter(
(f) => f?.currentFilter !== undefined
)
return activeFilters.length === 0
})
// If at least one filter is active which _might_ hide a newly added item, this blocks the preset and requests the filter to be disabled
const disableFiltersOrConfirm = new Toggle(
openLayerOrConfirm,
disableFilter,
hasActiveFilter)
hasActiveFilter
)
const tagInfo = SimpleAddUI.CreateTagInfoFor(preset, state.osmConnection)
const tagInfo = SimpleAddUI.CreateTagInfoFor(preset, state.osmConnection);
const cancelButton = new SubtleButton(Svg.close_ui(),
const cancelButton = new SubtleButton(
Svg.close_ui(),
Translations.t.general.cancel
).onClick(cancel)
let examples: BaseUIElement = undefined;
let examples: BaseUIElement = undefined
if (preset.exampleImages !== undefined && preset.exampleImages.length > 0) {
examples = new Combine([
new Title(preset.exampleImages.length == 1 ? Translations.t.general.example : Translations.t.general.examples),
new Combine(preset.exampleImages.map(img => new Img(img).SetClass("h-64 m-1 w-auto rounded-lg"))).SetClass("flex flex-wrap items-stretch")
new Title(
preset.exampleImages.length == 1
? Translations.t.general.example
: Translations.t.general.examples
),
new Combine(
preset.exampleImages.map((img) =>
new Img(img).SetClass("h-64 m-1 w-auto rounded-lg")
)
).SetClass("flex flex-wrap items-stretch"),
])
}
super([
@ -222,12 +248,9 @@ export default class ConfirmLocationOfPoint extends Combine {
cancelButton,
preset.description,
examples,
tagInfo
tagInfo,
])
this.SetClass("flex flex-col")
}
}
}