forked from MapComplete/MapComplete
32 lines
1 KiB
Svelte
32 lines
1 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* Shows a 'floorSelector' and maps the selected floor onto a global filter
|
|
*/
|
|
import LayerState from "../../Logic/State/LayerState"
|
|
import FloorSelector from "../InputElement/Helpers/FloorSelector.svelte"
|
|
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
|
|
|
export let layerState: LayerState
|
|
export let floors: Store<string[]>
|
|
export let zoom: Store<number>
|
|
const maxZoom = 16
|
|
|
|
let selectedFloor: UIEventSource<string> = new UIEventSource<string>(undefined)
|
|
|
|
selectedFloor.stabilized(5).map(
|
|
(floor) => {
|
|
if (floors.data === undefined || floors.data.length <= 1 || zoom.data < maxZoom) {
|
|
// Only a single floor is visible -> disable the 'level' global filter
|
|
// OR we might have zoomed out to much ant want to show all
|
|
layerState.setLevelFilter(undefined)
|
|
} else {
|
|
layerState.setLevelFilter(floor)
|
|
}
|
|
},
|
|
[floors, zoom]
|
|
)
|
|
</script>
|
|
|
|
{#if $zoom >= maxZoom}
|
|
<FloorSelector {floors} value={selectedFloor} />
|
|
{/if}
|