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

Usertest: See #1315, add a 'confirm'-button on top of the precise-input location if the map is tapped; fix: make sure the dragInvitation doesn't consume the first map interaction, get's hidden by a change in map location

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-06-14 23:21:19 +02:00
parent cc70e09e11
commit c5c6bba731
6 changed files with 429 additions and 387 deletions
Download patch file Download diff file Expand all files Collapse all files

9
UI/Base/DragInvitation.svelte
View file

@ -11,9 +11,14 @@
function hide() { function hide() {
mainElem.style.visibility = "hidden" mainElem.style.visibility = "hidden"
} }
let initTime = Date.now()
if (hideSignal) { if (hideSignal) {
onDestroy( onDestroy(
hideSignal.addCallbackD(() => { hideSignal.addCallbackD(() => {
if(initTime + 1000 > Date.now()){
console.log("Ignoring hide signal")
return
}
console.log("Received hide signal") console.log("Received hide signal")
hide() hide()
return true return true
@ -27,8 +32,8 @@
} }
</script> </script>
<div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full"> <div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full pointer-events-none">
<div id="hand-container" class="pointer-events-none"> <div id="hand-container">
<img src="./assets/svg/hand.svg" /> <img src="./assets/svg/hand.svg" />
</div> </div>
</div> </div>

4
UI/BigComponents/NewPointLocationInput.svelte
View file

@ -15,6 +15,7 @@
import FeatureSourceMerger from "../../Logic/FeatureSource/Sources/FeatureSourceMerger" import FeatureSourceMerger from "../../Logic/FeatureSource/Sources/FeatureSourceMerger"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig" import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import { Utils } from "../../Utils" import { Utils } from "../../Utils"
import {createEventDispatcher} from "svelte";
/** /**
* An advanced location input, which has support to: * An advanced location input, which has support to:
@ -43,6 +44,8 @@
lon: number lon: number
lat: number lat: number
}>(undefined) }>(undefined)
const dispatch = createEventDispatcher<{click: {lon: number, lat: number}}>()
const xyz = Tiles.embedded_tile(coordinate.lat, coordinate.lon, 16) const xyz = Tiles.embedded_tile(coordinate.lat, coordinate.lon, 16)
const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined) const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
@ -106,6 +109,7 @@
<LocationInput <LocationInput
{map} {map}
on:click={data => dispatch("click", data)}
mapProperties={initialMapProperties} mapProperties={initialMapProperties}
value={preciseLocation} value={preciseLocation}
initialCoordinate={coordinate} initialCoordinate={coordinate}

165
UI/InputElement/Helpers/LocationInput.svelte
View file

@ -1,91 +1,96 @@
<script lang="ts"> <script lang="ts">
import { Store, UIEventSource } from "../../../Logic/UIEventSource" import {Store, UIEventSource} from "../../../Logic/UIEventSource"
import type { MapProperties } from "../../../Models/MapProperties" import type {MapProperties} from "../../../Models/MapProperties"
import { Map as MlMap } from "maplibre-gl" import {Map as MlMap} from "maplibre-gl"
import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor" import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
import MaplibreMap from "../../Map/MaplibreMap.svelte" import MaplibreMap from "../../Map/MaplibreMap.svelte"
import DragInvitation from "../../Base/DragInvitation.svelte" import DragInvitation from "../../Base/DragInvitation.svelte"
import { GeoOperations } from "../../../Logic/GeoOperations" import {GeoOperations} from "../../../Logic/GeoOperations"
import ShowDataLayer from "../../Map/ShowDataLayer" import ShowDataLayer from "../../Map/ShowDataLayer"
import * as boundsdisplay from "../../../assets/layers/range/range.json" import * as boundsdisplay from "../../../assets/layers/range/range.json"
import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource" import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
import * as turf from "@turf/turf" import * as turf from "@turf/turf"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig" import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import { onDestroy } from "svelte" import {createEventDispatcher, onDestroy} from "svelte"
/** /**
* A visualisation to pick a location on a map background * A visualisation to pick a location on a map background
*/ */
export let value: UIEventSource<{ lon: number; lat: number }> export let value: UIEventSource<{ lon: number; lat: number }>
export let initialCoordinate: { lon: number; lat: number } export let initialCoordinate: { lon: number; lat: number }
initialCoordinate = initialCoordinate ?? value.data initialCoordinate = initialCoordinate ?? value.data
export let maxDistanceInMeters: number = undefined export let maxDistanceInMeters: number = undefined
export let mapProperties: Partial<MapProperties> & { export let mapProperties: Partial<MapProperties> & {
readonly location: UIEventSource<{ lon: number; lat: number }> readonly location: UIEventSource<{ lon: number; lat: number }>
} = undefined } = undefined
/** /**
* Called when setup is done, can be used to add more layers to the map * Called when setup is done, can be used to add more layers to the map
*/ */
export let onCreated: ( export let onCreated: (
value: Store<{ value: Store<{
lon: number lon: number
lat: number lat: number
}>, }>,
map: Store<MlMap>, map: Store<MlMap>,
mapProperties: MapProperties mapProperties: MapProperties
) => void = undefined ) => void = undefined
export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined) const dispatch = createEventDispatcher<{ click: { lon: number, lat: number } }>()
let mla = new MapLibreAdaptor(map, mapProperties)
mapProperties.location.syncWith(value)
if (onCreated) {
onCreated(value, map, mla)
}
let rangeIsShown = false export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
if (maxDistanceInMeters) { let mla = new MapLibreAdaptor(map, mapProperties)
onDestroy( mla.lastClickLocation.addCallbackAndRunD(lastClick => {
mla.location.addCallbackD((newLocation) => { dispatch("click", lastClick)
const l = [newLocation.lon, newLocation.lat] })
const c: [number, number] = [initialCoordinate.lon, initialCoordinate.lat] mapProperties.location.syncWith(value)
const d = GeoOperations.distanceBetween(l, c) if (onCreated) {
console.log("distance is", d, l, c) onCreated(value, map, mla)
if (d <= maxDistanceInMeters) { }
return
}
// This is too far away - let's move back
const correctLocation = GeoOperations.along(c, l, maxDistanceInMeters - 10)
window.setTimeout(() => {
mla.location.setData({ lon: correctLocation[0], lat: correctLocation[1] })
}, 25)
if (!rangeIsShown) { let rangeIsShown = false
new ShowDataLayer(map, { if (maxDistanceInMeters) {
layer: new LayerConfig(boundsdisplay), onDestroy(
features: new StaticFeatureSource([ mla.location.addCallbackD((newLocation) => {
turf.circle(c, maxDistanceInMeters, { const l = [newLocation.lon, newLocation.lat]
units: "meters", const c: [number, number] = [initialCoordinate.lon, initialCoordinate.lat]
properties: { range: "yes", id: "0" }, const d = GeoOperations.distanceBetween(l, c)
}), console.log("distance is", d, l, c)
]), if (d <= maxDistanceInMeters) {
}) return
rangeIsShown = true }
} // This is too far away - let's move back
}) const correctLocation = GeoOperations.along(c, l, maxDistanceInMeters - 10)
) window.setTimeout(() => {
} mla.location.setData({lon: correctLocation[0], lat: correctLocation[1]})
}, 25)
if (!rangeIsShown) {
new ShowDataLayer(map, {
layer: new LayerConfig(boundsdisplay),
features: new StaticFeatureSource([
turf.circle(c, maxDistanceInMeters, {
units: "meters",
properties: {range: "yes", id: "0"},
}),
]),
})
rangeIsShown = true
}
})
)
}
</script> </script>
<div class="min-h-32 relative h-full cursor-pointer overflow-hidden"> <div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
<div class="absolute top-0 left-0 h-full w-full cursor-pointer"> <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
<MaplibreMap {map} /> <MaplibreMap {map}/>
</div> </div>
<div <div
class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50" class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
> >
<img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" /> <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg"/>
</div> </div>
<DragInvitation hideSignal={mla.location.stabilized(3000)} /> <DragInvitation hideSignal={mla.location}/>
</div> </div>

8
UI/Map/MapLibreAdaptor.ts
View file

@ -83,7 +83,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
// Workaround, 'ShowPointLayer' sets this flag // Workaround, 'ShowPointLayer' sets this flag
return return
} }
console.log(e)
const lon = e.lngLat.lng const lon = e.lngLat.lng
const lat = e.lngLat.lat const lat = e.lngLat.lat
lastClickLocation.setData({ lon, lat }) lastClickLocation.setData({ lon, lat })
@ -321,10 +320,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
if (this.location.data === undefined) { if (this.location.data === undefined) {
this.location.setData({ lon: lng, lat }) this.location.setData({ lon: lng, lat })
} else if (!isSetup) { } else if (!isSetup) {
const dt = this.location.data const lon = map.getCenter().lng
dt.lon = map.getCenter().lng const lat = map.getCenter().lat
dt.lat = map.getCenter().lat this.location.setData({ lon, lat })
this.location.ping()
} }
this.zoom.setData(Math.round(map.getZoom() * 10) / 10) this.zoom.setData(Math.round(map.getZoom() * 10) / 10)
const bounds = map.getBounds() const bounds = map.getBounds()

596
UI/Popup/AddNewPoint/AddNewPoint.svelte
View file

@ -1,339 +1,353 @@
<script lang="ts"> <script lang="ts">
/** /**
* This component ties together all the steps that are needed to create a new point. * This component ties together all the steps that are needed to create a new point.
* There are many subcomponents which help with that * There are many subcomponents which help with that
*/ */
import type { SpecialVisualizationState } from "../../SpecialVisualization" import type {SpecialVisualizationState} from "../../SpecialVisualization"
import PresetList from "./PresetList.svelte" import PresetList from "./PresetList.svelte"
import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig" import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig" import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import Tr from "../../Base/Tr.svelte" import Tr from "../../Base/Tr.svelte"
import SubtleButton from "../../Base/SubtleButton.svelte" import SubtleButton from "../../Base/SubtleButton.svelte"
import FromHtml from "../../Base/FromHtml.svelte" import FromHtml from "../../Base/FromHtml.svelte"
import Translations from "../../i18n/Translations.js" import Translations from "../../i18n/Translations.js"
import TagHint from "../TagHint.svelte" import TagHint from "../TagHint.svelte"
import { And } from "../../../Logic/Tags/And.js" import {And} from "../../../Logic/Tags/And.js"
import LoginToggle from "../../Base/LoginToggle.svelte" import LoginToggle from "../../Base/LoginToggle.svelte"
import Constants from "../../../Models/Constants.js" import Constants from "../../../Models/Constants.js"
import FilteredLayer from "../../../Models/FilteredLayer" import FilteredLayer from "../../../Models/FilteredLayer"
import { Store, UIEventSource } from "../../../Logic/UIEventSource" import {Store, UIEventSource} from "../../../Logic/UIEventSource"
import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid" import {EyeIcon, EyeOffIcon} from "@rgossiaux/svelte-heroicons/solid"
import LoginButton from "../../Base/LoginButton.svelte" import LoginButton from "../../Base/LoginButton.svelte"
import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte" import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
import CreateNewNodeAction from "../../../Logic/Osm/Actions/CreateNewNodeAction" import CreateNewNodeAction from "../../../Logic/Osm/Actions/CreateNewNodeAction"
import { OsmWay } from "../../../Logic/Osm/OsmObject" import {OsmWay} from "../../../Logic/Osm/OsmObject"
import { Tag } from "../../../Logic/Tags/Tag" import {Tag} from "../../../Logic/Tags/Tag"
import type { WayId } from "../../../Models/OsmFeature" import type {WayId} from "../../../Models/OsmFeature"
import Loading from "../../Base/Loading.svelte" import Loading from "../../Base/Loading.svelte"
import type { GlobalFilter } from "../../../Models/GlobalFilter" import type {GlobalFilter} from "../../../Models/GlobalFilter"
import { onDestroy } from "svelte" import {onDestroy} from "svelte"
import NextButton from "../../Base/NextButton.svelte" import NextButton from "../../Base/NextButton.svelte"
import BackButton from "../../Base/BackButton.svelte" import BackButton from "../../Base/BackButton.svelte"
import ToSvelte from "../../Base/ToSvelte.svelte" import ToSvelte from "../../Base/ToSvelte.svelte"
import Svg from "../../../Svg" import Svg from "../../../Svg"
import MapControlButton from "../../Base/MapControlButton.svelte" import MapControlButton from "../../Base/MapControlButton.svelte"
import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid" import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid"
export let coordinate: { lon: number; lat: number } export let coordinate: { lon: number; lat: number }
export let state: SpecialVisualizationState export let state: SpecialVisualizationState
let selectedPreset: { let selectedPreset: {
preset: PresetConfig preset: PresetConfig
layer: LayerConfig layer: LayerConfig
icon: string icon: string
tags: Record<string, string> tags: Record<string, string>
} = undefined } = undefined
let checkedOfGlobalFilters: number = 0 let checkedOfGlobalFilters: number = 0
let confirmedCategory = false let confirmedCategory = false
$: if (selectedPreset === undefined) { $: if (selectedPreset === undefined) {
confirmedCategory = false confirmedCategory = false
creating = false creating = false
checkedOfGlobalFilters = 0 checkedOfGlobalFilters = 0
} }
let flayer: FilteredLayer = undefined let flayer: FilteredLayer = undefined
let layerIsDisplayed: UIEventSource<boolean> | undefined = undefined let layerIsDisplayed: UIEventSource<boolean> | undefined = undefined
let layerHasFilters: Store<boolean> | undefined = undefined let layerHasFilters: Store<boolean> | undefined = undefined
let globalFilter: UIEventSource<GlobalFilter[]> = state.layerState.globalFilters let globalFilter: UIEventSource<GlobalFilter[]> = state.layerState.globalFilters
let _globalFilter: GlobalFilter[] = [] let _globalFilter: GlobalFilter[] = []
onDestroy( onDestroy(
globalFilter.addCallbackAndRun((globalFilter) => { globalFilter.addCallbackAndRun((globalFilter) => {
console.log("Global filters are", globalFilter) console.log("Global filters are", globalFilter)
_globalFilter = globalFilter ?? [] _globalFilter = globalFilter ?? []
}) })
)
$: {
flayer = state.layerState.filteredLayers.get(selectedPreset?.layer?.id)
layerIsDisplayed = flayer?.isDisplayed
layerHasFilters = flayer?.hasFilter
}
const t = Translations.t.general.add
const zoom = state.mapProperties.zoom
const isLoading = state.dataIsLoading
let preciseCoordinate: UIEventSource<{ lon: number; lat: number }> = new UIEventSource(undefined)
let snappedToObject: UIEventSource<string> = new UIEventSource<string>(undefined)
let creating = false
/**
* Call when the user should restart the flow by clicking on the map, e.g. because they disabled filters.
* Will delete the lastclick-location
*/
function abort() {
state.selectedElement.setData(undefined)
// When aborted, we force the contributors to place the pin _again_
// This is because there might be a nearby object that was disabled; this forces them to re-evaluate the map
state.lastClickObject.features.setData([])
}
async function confirm() {
creating = true
const location: { lon: number; lat: number } = preciseCoordinate.data
const snapTo: WayId | undefined = <WayId>snappedToObject.data
const tags: Tag[] = selectedPreset.preset.tags.concat(
..._globalFilter.map((f) => f?.onNewPoint?.tags ?? [])
) )
console.log("Creating new point at", location, "snapped to", snapTo, "with tags", tags) $: {
flayer = state.layerState.filteredLayers.get(selectedPreset?.layer?.id)
layerIsDisplayed = flayer?.isDisplayed
layerHasFilters = flayer?.hasFilter
}
const t = Translations.t.general.add
let snapToWay: undefined | OsmWay = undefined const zoom = state.mapProperties.zoom
if (snapTo !== undefined) {
const downloaded = await state.osmObjectDownloader.DownloadObjectAsync(snapTo, 0) const isLoading = state.dataIsLoading
if (downloaded !== "deleted") { let preciseCoordinate: UIEventSource<{ lon: number; lat: number }> = new UIEventSource(undefined)
snapToWay = downloaded let snappedToObject: UIEventSource<string> = new UIEventSource<string>(undefined)
}
// Small helper variable: if the map is tapped, we should let the 'Next'-button grab some attention as users have to click _that_ to continue, not the map
let preciseInputIsTapped = false
let creating = false
/**
* Call when the user should restart the flow by clicking on the map, e.g. because they disabled filters.
* Will delete the lastclick-location
*/
function abort() {
state.selectedElement.setData(undefined)
// When aborted, we force the contributors to place the pin _again_
// This is because there might be a nearby object that was disabled; this forces them to re-evaluate the map
state.lastClickObject.features.setData([])
preciseInputIsTapped = false
} }
const newElementAction = new CreateNewNodeAction(tags, location.lat, location.lon, { async function confirm() {
theme: state.layout?.id ?? "unkown", creating = true
changeType: "create", const location: { lon: number; lat: number } = preciseCoordinate.data
snapOnto: snapToWay, const snapTo: WayId | undefined = <WayId>snappedToObject.data
}) const tags: Tag[] = selectedPreset.preset.tags.concat(
await state.changes.applyAction(newElementAction) ..._globalFilter.map((f) => f?.onNewPoint?.tags ?? [])
state.newFeatures.features.ping() )
// The 'changes' should have created a new point, which added this into the 'featureProperties' console.log("Creating new point at", location, "snapped to", snapTo, "with tags", tags)
const newId = newElementAction.newElementId
console.log("Applied pending changes, fetching store for", newId) let snapToWay: undefined | OsmWay = undefined
const tagsStore = state.featureProperties.getStore(newId) if (snapTo !== undefined) {
{ const downloaded = await state.osmObjectDownloader.DownloadObjectAsync(snapTo, 0)
// Set some metainfo if (downloaded !== "deleted") {
const properties = tagsStore.data snapToWay = downloaded
if (snapTo) { }
// metatags (starting with underscore) are not uploaded, so we can safely mark this }
delete properties["_referencing_ways"]
properties["_referencing_ways"] = `["${snapTo}"]` const newElementAction = new CreateNewNodeAction(tags, location.lat, location.lon, {
} theme: state.layout?.id ?? "unkown",
properties["_backend"] = state.osmConnection.Backend() changeType: "create",
properties["_last_edit:timestamp"] = new Date().toISOString() snapOnto: snapToWay,
const userdetails = state.osmConnection.userDetails.data })
properties["_last_edit:contributor"] = userdetails.name await state.changes.applyAction(newElementAction)
properties["_last_edit:uid"] = "" + userdetails.uid state.newFeatures.features.ping()
tagsStore.ping() // The 'changes' should have created a new point, which added this into the 'featureProperties'
const newId = newElementAction.newElementId
console.log("Applied pending changes, fetching store for", newId)
const tagsStore = state.featureProperties.getStore(newId)
{
// Set some metainfo
const properties = tagsStore.data
if (snapTo) {
// metatags (starting with underscore) are not uploaded, so we can safely mark this
delete properties["_referencing_ways"]
properties["_referencing_ways"] = `["${snapTo}"]`
}
properties["_backend"] = state.osmConnection.Backend()
properties["_last_edit:timestamp"] = new Date().toISOString()
const userdetails = state.osmConnection.userDetails.data
properties["_last_edit:contributor"] = userdetails.name
properties["_last_edit:uid"] = "" + userdetails.uid
tagsStore.ping()
}
const feature = state.indexedFeatures.featuresById.data.get(newId)
abort()
state.selectedLayer.setData(selectedPreset.layer)
state.selectedElement.setData(feature)
tagsStore.ping()
} }
const feature = state.indexedFeatures.featuresById.data.get(newId)
abort()
state.selectedLayer.setData(selectedPreset.layer)
state.selectedElement.setData(feature)
tagsStore.ping()
}
</script> </script>
<LoginToggle ignoreLoading={true} {state}> <LoginToggle ignoreLoading={true} {state}>
<!-- This component is basically one big if/then/else flow checking for many conditions and edge cases that (in some cases) have to be handled; <!-- This component is basically one big if/then/else flow checking for many conditions and edge cases that (in some cases) have to be handled;
1. the first (and outermost) is of course: are we logged in? 1. the first (and outermost) is of course: are we logged in?
2. What do we want to add? 2. What do we want to add?
3. Are all elements of this category visible? (i.e. there are no filters possibly hiding this, is the data still loading, ...) --> 3. Are all elements of this category visible? (i.e. there are no filters possibly hiding this, is the data still loading, ...) -->
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in"> <LoginButton osmConnection={state.osmConnection} slot="not-logged-in">
<Tr slot="message" t={Translations.t.general.add.pleaseLogin} /> <Tr slot="message" t={Translations.t.general.add.pleaseLogin}/>
</LoginButton> </LoginButton>
{#if $isLoading} {#if $isLoading}
<div class="alert"> <div class="alert">
<Loading> <Loading>
<Tr t={Translations.t.general.add.stillLoading} /> <Tr t={Translations.t.general.add.stillLoading}/>
</Loading> </Loading>
</div> </div>
{:else if $zoom < Constants.minZoomLevelToAddNewPoint} {:else if $zoom < Constants.minZoomLevelToAddNewPoint}
<div class="alert"> <div class="alert">
<Tr t={Translations.t.general.add.zoomInFurther} /> <Tr t={Translations.t.general.add.zoomInFurther}/>
</div> </div>
{:else if selectedPreset === undefined} {:else if selectedPreset === undefined}
<!-- First, select the correct preset --> <!-- First, select the correct preset -->
<PresetList <PresetList
{state} {state}
on:select={(event) => { on:select={(event) => {
selectedPreset = event.detail selectedPreset = event.detail
}} }}
/> />
{:else if !$layerIsDisplayed} {:else if !$layerIsDisplayed}
<!-- Check that the layer is enabled, so that we don't add a duplicate --> <!-- Check that the layer is enabled, so that we don't add a duplicate -->
<div class="alert flex items-center justify-center"> <div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8" /> <EyeOffIcon class="w-8"/>
<Tr <Tr
t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })} t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
/> />
</div> </div>
<div class="flex flex-wrap-reverse md:flex-nowrap"> <div class="flex flex-wrap-reverse md:flex-nowrap">
<button <button
class="flex w-full gap-x-1" class="flex w-full gap-x-1"
on:click={() => { on:click={() => {
abort() abort()
state.guistate.openFilterView(selectedPreset.layer) state.guistate.openFilterView(selectedPreset.layer)
}} }}
> >
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")} /> <ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
<Tr t={Translations.t.general.add.openLayerControl} /> <Tr t={Translations.t.general.add.openLayerControl}/>
</button> </button>
<button <button
class="primary flex w-full gap-x-1" class="primary flex w-full gap-x-1"
on:click={() => { on:click={() => {
layerIsDisplayed.setData(true) layerIsDisplayed.setData(true)
abort() abort()
}} }}
> >
<EyeIcon class="w-12" /> <EyeIcon class="w-12"/>
<Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })} /> <Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })}/>
</button> </button>
</div> </div>
{:else if $layerHasFilters} {:else if $layerHasFilters}
<!-- Some filters are enabled. The feature to add might already be mapped, but hidden --> <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
<div class="alert flex items-center justify-center"> <div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8" /> <EyeOffIcon class="w-8"/>
<Tr t={Translations.t.general.add.disableFiltersExplanation} /> <Tr t={Translations.t.general.add.disableFiltersExplanation}/>
</div> </div>
<div class="flex flex-wrap-reverse md:flex-nowrap"> <div class="flex flex-wrap-reverse md:flex-nowrap">
<button <button
class="primary flex w-full gap-x-1" class="primary flex w-full gap-x-1"
on:click={() => { on:click={() => {
abort() abort()
state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters() state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()
}} }}
> >
<EyeOffIcon class="w-12" /> <EyeOffIcon class="w-12"/>
<Tr t={Translations.t.general.add.disableFilters} /> <Tr t={Translations.t.general.add.disableFilters}/>
</button> </button>
<button <button
class="flex w-full gap-x-1" class="flex w-full gap-x-1"
on:click={() => { on:click={() => {
abort() abort()
state.guistate.openFilterView(selectedPreset.layer) state.guistate.openFilterView(selectedPreset.layer)
}} }}
> >
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")} /> <ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
<Tr t={Translations.t.general.add.openLayerControl} /> <Tr t={Translations.t.general.add.openLayerControl}/>
</button> </button>
</div> </div>
{:else if !confirmedCategory} {:else if !confirmedCategory}
<!-- Second, confirm the category --> <!-- Second, confirm the category -->
<h2 class="mr-12"> <h2 class="mr-12">
<Tr <Tr
t={Translations.t.general.add.confirmTitle.Subs({ title: selectedPreset.preset.title })} t={Translations.t.general.add.confirmTitle.Subs({ title: selectedPreset.preset.title })}
/> />
</h2> </h2>
<Tr t={Translations.t.general.add.confirmIntro} /> <Tr t={Translations.t.general.add.confirmIntro}/>
{#if selectedPreset.preset.description} {#if selectedPreset.preset.description}
<Tr t={selectedPreset.preset.description} /> <Tr t={selectedPreset.preset.description}/>
{/if}
{#if selectedPreset.preset.exampleImages}
<h3>
{#if selectedPreset.preset.exampleImages.length === 1}
<Tr t={Translations.t.general.example} />
{:else}
<Tr t={Translations.t.general.examples} />
{/if} {/if}
</h3>
<span class="flex flex-wrap items-stretch"> {#if selectedPreset.preset.exampleImages}
<h3>
{#if selectedPreset.preset.exampleImages.length === 1}
<Tr t={Translations.t.general.example}/>
{:else}
<Tr t={Translations.t.general.examples}/>
{/if}
</h3>
<span class="flex flex-wrap items-stretch">
{#each selectedPreset.preset.exampleImages as src} {#each selectedPreset.preset.exampleImages as src}
<img {src} class="m-1 h-64 w-auto rounded-lg" /> <img {src} class="m-1 h-64 w-auto rounded-lg"/>
{/each} {/each}
</span> </span>
{/if} {/if}
<TagHint <TagHint
embedIn={(tags) => t.presetInfo.Subs({ tags })} embedIn={(tags) => t.presetInfo.Subs({ tags })}
{state} {state}
tags={new And(selectedPreset.preset.tags)} tags={new And(selectedPreset.preset.tags)}
/> />
<div class="flex w-full flex-wrap-reverse md:flex-nowrap"> <div class="flex w-full flex-wrap-reverse md:flex-nowrap">
<BackButton on:click={() => (selectedPreset = undefined)} clss="w-full"> <BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
<Tr t={t.backToSelect} /> <Tr t={t.backToSelect}/>
</BackButton> </BackButton>
<NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full"> <NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
<div slot="image" class="relative"> <div slot="image" class="relative">
<FromHtml src={selectedPreset.icon} /> <FromHtml src={selectedPreset.icon}/>
<img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg" /> <img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg"/>
</div>
<div class="w-full">
<Tr t={selectedPreset.text}/>
</div>
</NextButton>
</div> </div>
<div class="w-full"> {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
<Tr t={selectedPreset.text} /> <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12"/>
</div> <SubtleButton
</NextButton> on:click={() => {
</div>
{:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
<Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12" />
<SubtleButton
on:click={() => {
checkedOfGlobalFilters = checkedOfGlobalFilters + 1 checkedOfGlobalFilters = checkedOfGlobalFilters + 1
}} }}
> >
<img <img
slot="image" slot="image"
src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"} src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
class="h-12 w-12" class="h-12 w-12"
/> />
<Tr <Tr
slot="message" slot="message"
t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({ t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({
preset: selectedPreset.preset, preset: selectedPreset.preset,
})} })}
/> />
</SubtleButton> </SubtleButton>
<SubtleButton <SubtleButton
on:click={() => { on:click={() => {
globalFilter.setData([]) globalFilter.setData([])
abort() abort()
}} }}
>
<img slot="image" src="./assets/svg/close.svg" class="h-8 w-8" />
<Tr slot="message" t={Translations.t.general.cancel} />
</SubtleButton>
{:else if !creating}
<div class="relative w-full p-1">
<div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
<NewPointLocationInput
value={preciseCoordinate}
snappedTo={snappedToObject}
{state}
{coordinate}
targetLayer={selectedPreset.layer}
snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}
/>
</div>
<div class="absolute bottom-0 left-0 p-4">
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
> >
<Square3Stack3dIcon class="h-6 w-6" /> <img slot="image" src="./assets/svg/close.svg" class="h-8 w-8"/>
</MapControlButton> <Tr slot="message" t={Translations.t.general.cancel}/>
</div> </SubtleButton>
</div> {:else if !creating}
<div class="flex flex-wrap-reverse md:flex-nowrap"> <div class="relative w-full p-1">
<BackButton on:click={() => (selectedPreset = undefined)} clss="w-full"> <div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
<Tr t={t.backToSelect} /> <NewPointLocationInput
</BackButton> on:click={() => {preciseInputIsTapped = true}}
value={preciseCoordinate}
snappedTo={snappedToObject}
{state}
{coordinate}
targetLayer={selectedPreset.layer}
snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}
/>
</div>
<NextButton on:click={confirm} clss="primary w-full"> <div class={(preciseInputIsTapped ? "" : "hidden") + " absolute top-4 flex justify-center w-full"}>
<div class="flex w-full justify-end gap-x-2"> <NextButton on:click={confirm} clss="primary w-fit ">
<Tr t={Translations.t.general.add.confirmLocation} /> <div class="flex w-full justify-end gap-x-2">
<Tr t={Translations.t.general.add.confirmLocation}/>
</div>
</NextButton>
</div>
<div class="absolute bottom-0 left-0 p-4">
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
>
<Square3Stack3dIcon class="h-6 w-6"/>
</MapControlButton>
</div>
</div> </div>
</NextButton> <div class="flex flex-wrap-reverse md:flex-nowrap">
</div> <BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
{:else} <Tr t={t.backToSelect}/>
<Loading>Creating point...</Loading> </BackButton>
{/if}
<NextButton on:click={confirm} clss={"primary w-full"}>
<div class="flex w-full justify-end gap-x-2">
<Tr t={Translations.t.general.add.confirmLocation}/>
</div>
</NextButton>
</div>
{:else}
<Loading>Creating point...</Loading>
{/if}
</LoginToggle> </LoginToggle>

34
public/css/index-tailwind-output.css
View file

@ -670,6 +670,10 @@ video {
position: fixed; position: fixed;
} }
.\!fixed {
position: fixed !important;
}
.absolute { .absolute {
position: absolute; position: absolute;
} }
@ -795,10 +799,6 @@ video {
margin: 1px; margin: 1px;
} }
.m-12 {
margin: 3rem;
}
.mx-1 { .mx-1 {
margin-left: 0.25rem; margin-left: 0.25rem;
margin-right: 0.25rem; margin-right: 0.25rem;
@ -1242,6 +1242,27 @@ video {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
} }
@-webkit-keyframes ping {
75%, 100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
@keyframes ping {
75%, 100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
.animate-ping {
-webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -1730,11 +1751,6 @@ video {
color: rgb(107 114 128 / var(--tw-text-opacity)); color: rgb(107 114 128 / var(--tw-text-opacity));
} }
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
.underline { .underline {
text-decoration-line: underline; text-decoration-line: underline;
} }