forked from MapComplete/MapComplete
58 lines
1.9 KiB
Svelte
58 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import ImportFlow from "./ImportFlow.svelte"
|
|
import {PointImportFlowState} from "./PointImportFlowState"
|
|
import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
|
|
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
|
import {UIEventSource} from "../../../Logic/UIEventSource"
|
|
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
|
|
|
|
export let importFlow: PointImportFlowState
|
|
|
|
const state = importFlow.state
|
|
|
|
const args = importFlow.args
|
|
|
|
// The following variables are used for the map
|
|
const targetLayer: LayerConfig = state.layout.layers.find((l) => l.id === args.targetLayer)
|
|
const snapToLayers: string[] | undefined =
|
|
args.snap_onto_layers?.split(",")?.map((l) => l.trim()) ?? []
|
|
const maxSnapDistance: number = Number(args.max_snap_distance ?? 25) ?? 25
|
|
|
|
const snappedTo: UIEventSource<string | undefined> = new UIEventSource<string | undefined>(
|
|
undefined
|
|
)
|
|
|
|
const startCoordinate = {
|
|
lon: importFlow.startCoordinate[0],
|
|
lat: importFlow.startCoordinate[1],
|
|
}
|
|
const value: UIEventSource<{ lon: number; lat: number }> = new UIEventSource<{
|
|
lon: number
|
|
lat: number
|
|
}>(startCoordinate)
|
|
|
|
async function onConfirm(): Promise<void> {
|
|
const importedId = await importFlow.onConfirm(value.data, snappedTo.data)
|
|
state.selectedLayer.setData(targetLayer)
|
|
state.selectedElement.setData(state.indexedFeatures.featuresById.data.get(importedId))
|
|
}
|
|
</script>
|
|
|
|
<ImportFlow {importFlow} on:confirm={onConfirm}>
|
|
<div class="relative" slot="map">
|
|
<div class="h-32">
|
|
<NewPointLocationInput
|
|
coordinate={startCoordinate}
|
|
{maxSnapDistance}
|
|
{snapToLayers}
|
|
{snappedTo}
|
|
{state}
|
|
{targetLayer}
|
|
{value}
|
|
/>
|
|
</div>
|
|
<div class="absolute bottom-0">
|
|
<OpenBackgroundSelectorButton {state}/>
|
|
</div>
|
|
</div>
|
|
</ImportFlow>
|