forked from MapComplete/MapComplete
UX: fix #1805, disable zoom-in and zoom-out buttons when maxrange reached
This commit is contained in:
parent
346f45cff8
commit
48159b25f7
13 changed files with 202 additions and 184 deletions
112
src/UI/Popup/SplitRoadWizard.svelte
Normal file
112
src/UI/Popup/SplitRoadWizard.svelte
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<script lang="ts">
|
||||
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import type { Feature, Point } from "geojson"
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import LoginToggle from "../Base/LoginToggle.svelte"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import Scissors from "../../assets/svg/Scissors.svelte"
|
||||
import WaySplitMap from "../BigComponents/WaySplitMap.svelte"
|
||||
import BackButton from "../Base/BackButton.svelte"
|
||||
import SplitAction from "../../Logic/Osm/Actions/SplitAction"
|
||||
import Translations from "../i18n/Translations"
|
||||
import NextButton from "../Base/NextButton.svelte"
|
||||
import Loading from "../Base/Loading.svelte"
|
||||
import { OsmWay } from "../../Logic/Osm/OsmObject"
|
||||
import type { WayId } from "../../Models/OsmFeature"
|
||||
import { Utils } from "../../Utils"
|
||||
|
||||
export let state: SpecialVisualizationState
|
||||
export let id: WayId
|
||||
const t = Translations.t.split
|
||||
let step: "initial" | "loading_way" | "splitting" | "applying_split" | "has_been_split" | "deleted" = "initial"
|
||||
// Contains the points on the road that are selected to split on - contains geojson points with extra properties such as 'location' with the distance along the linestring
|
||||
let splitPoints = new UIEventSource<Feature<
|
||||
Point,
|
||||
{
|
||||
id: number
|
||||
index: number
|
||||
dist: number
|
||||
location: number
|
||||
}
|
||||
>[]>([])
|
||||
let splitpointsNotEmpty = splitPoints.map(sp => sp.length > 0)
|
||||
|
||||
let osmWay: OsmWay
|
||||
|
||||
async function downloadWay() {
|
||||
step = "loading_way"
|
||||
const dloaded = await state.osmObjectDownloader.DownloadObjectAsync(id)
|
||||
if (dloaded === "deleted") {
|
||||
step = "deleted"
|
||||
return
|
||||
}
|
||||
osmWay = dloaded
|
||||
|
||||
step = "splitting"
|
||||
}
|
||||
|
||||
async function doSplit() {
|
||||
step = "applying_split"
|
||||
const splitAction = new SplitAction(
|
||||
id,
|
||||
splitPoints.data.map((ff) => <[number, number]>(<Point>ff.geometry).coordinates),
|
||||
{
|
||||
theme: state?.layout?.id,
|
||||
},
|
||||
5,
|
||||
)
|
||||
await state.changes?.applyAction(splitAction)
|
||||
// We throw away the old map and splitpoints, and create a new map from scratch
|
||||
splitPoints.setData([])
|
||||
|
||||
// Close the popup. The contributor has to select a segment again to make sure they continue editing the correct segment; see #1219
|
||||
state.selectedElement?.setData(undefined)
|
||||
step = "has_been_split"
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<LoginToggle ignoreLoading={true} {state}>
|
||||
<Tr slot="not-logged-in" t={t.loginToSplit} />
|
||||
|
||||
{#if step === "deleted"}
|
||||
<!-- Empty -->
|
||||
{:else if step === "initial"}
|
||||
<button on:click={() => downloadWay()}>
|
||||
<Scissors class="w-6 h-6 shrink-0" />
|
||||
<Tr t={t.inviteToSplit} />
|
||||
</button>
|
||||
{:else if step === "loading_way"}
|
||||
<Loading />
|
||||
|
||||
{:else if step === "splitting"}
|
||||
<div class="flex flex-col interactive border-interactive p-2">
|
||||
<div class="w-full h-80">
|
||||
<WaySplitMap {state} {splitPoints} {osmWay} />
|
||||
</div>
|
||||
<div class="flex flex-wrap-reverse md:flex-nowrap w-full">
|
||||
<BackButton clss="w-full" on:click={() => {
|
||||
splitPoints.set([])
|
||||
step = "initial"
|
||||
}}>
|
||||
<Tr t={Translations.t.general.cancel} />
|
||||
</BackButton>
|
||||
<NextButton clss={ ($splitpointsNotEmpty ? "": "disabled ") + "w-full primary"} on:click={() => doSplit()}>
|
||||
<Tr t={t.split} />
|
||||
</NextButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{:else if step === "has_been_split"}
|
||||
<Tr cls="thanks" t={ t.hasBeenSplit.Clone().SetClass("font-bold thanks block w-full")} />
|
||||
<button on:click={() => downloadWay()}>
|
||||
<Scissors class="w-6 h-6" />
|
||||
<Tr t={t.splitAgain} />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
</LoginToggle>
|
||||
|
||||
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
import Toggle from "../Input/Toggle"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import { SubtleButton } from "../Base/SubtleButton"
|
||||
import Combine from "../Base/Combine"
|
||||
import { Button } from "../Base/Button"
|
||||
import Translations from "../i18n/Translations"
|
||||
import SplitAction from "../../Logic/Osm/Actions/SplitAction"
|
||||
import Title from "../Base/Title"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
import { VariableUiElement } from "../Base/VariableUIElement"
|
||||
import { LoginToggle } from "./LoginButton"
|
||||
import SvelteUIElement from "../Base/SvelteUIElement"
|
||||
import WaySplitMap from "../BigComponents/WaySplitMap.svelte"
|
||||
import { Feature, Point } from "geojson"
|
||||
import { WayId } from "../../Models/OsmFeature"
|
||||
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
|
||||
import { Changes } from "../../Logic/Osm/Changes"
|
||||
import { IndexedFeatureSource } from "../../Logic/FeatureSource/FeatureSource"
|
||||
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
|
||||
import OsmObjectDownloader from "../../Logic/Osm/OsmObjectDownloader"
|
||||
import Scissors from "../../assets/svg/Scissors.svelte"
|
||||
|
||||
export default class SplitRoadWizard extends Combine {
|
||||
public dialogIsOpened: UIEventSource<boolean>
|
||||
|
||||
/**
|
||||
* A UI Element used for splitting roads
|
||||
*
|
||||
* @param id The id of the road to remove
|
||||
* @param state the state of the application
|
||||
*/
|
||||
constructor(
|
||||
id: WayId,
|
||||
state: {
|
||||
layout?: LayoutConfig
|
||||
osmConnection?: OsmConnection
|
||||
osmObjectDownloader?: OsmObjectDownloader
|
||||
changes?: Changes
|
||||
indexedFeatures?: IndexedFeatureSource
|
||||
selectedElement?: UIEventSource<Feature>
|
||||
}
|
||||
) {
|
||||
const t = Translations.t.split
|
||||
|
||||
// Contains the points on the road that are selected to split on - contains geojson points with extra properties such as 'location' with the distance along the linestring
|
||||
const splitPoints = new UIEventSource<Feature<Point>[]>([])
|
||||
|
||||
const hasBeenSplit = new UIEventSource(false)
|
||||
|
||||
// Toggle variable between show split button and map
|
||||
const splitClicked = new UIEventSource<boolean>(false)
|
||||
|
||||
const leafletMap = new UIEventSource<BaseUIElement>(undefined)
|
||||
|
||||
function initMap() {
|
||||
;(async function (
|
||||
id: WayId,
|
||||
splitPoints: UIEventSource<Feature[]>
|
||||
): Promise<BaseUIElement> {
|
||||
return new SvelteUIElement(WaySplitMap, {
|
||||
osmWay: await state.osmObjectDownloader.DownloadObjectAsync(id),
|
||||
splitPoints,
|
||||
})
|
||||
})(id, splitPoints).then((mapComponent) =>
|
||||
leafletMap.setData(mapComponent.SetClass("w-full h-80"))
|
||||
)
|
||||
}
|
||||
|
||||
// Toggle between splitmap
|
||||
const splitButton = new SubtleButton(
|
||||
new SvelteUIElement(Scissors).SetClass("h-6 w-6"),
|
||||
new Toggle(
|
||||
t.splitAgain.Clone().SetClass("text-lg font-bold"),
|
||||
t.inviteToSplit.Clone().SetClass("text-lg font-bold"),
|
||||
hasBeenSplit
|
||||
)
|
||||
)
|
||||
|
||||
const splitToggle = new LoginToggle(splitButton, t.loginToSplit.Clone(), state)
|
||||
|
||||
// Save button
|
||||
const saveButton = new Button(t.split.Clone(), async () => {
|
||||
hasBeenSplit.setData(true)
|
||||
splitClicked.setData(false)
|
||||
const splitAction = new SplitAction(
|
||||
id,
|
||||
splitPoints.data.map((ff) => <[number, number]>(<Point>ff.geometry).coordinates),
|
||||
{
|
||||
theme: state?.layout?.id,
|
||||
},
|
||||
5
|
||||
)
|
||||
await state.changes?.applyAction(splitAction)
|
||||
// We throw away the old map and splitpoints, and create a new map from scratch
|
||||
splitPoints.setData([])
|
||||
|
||||
// Close the popup. The contributor has to select a segment again to make sure they continue editing the correct segment; see #1219
|
||||
state.selectedElement?.setData(undefined)
|
||||
})
|
||||
|
||||
saveButton.SetClass("btn btn-primary mr-3")
|
||||
const disabledSaveButton = new Button(t.split.Clone(), undefined)
|
||||
disabledSaveButton.SetClass("btn btn-disabled mr-3")
|
||||
// Only show the save button if there are split points defined
|
||||
const saveToggle = new Toggle(
|
||||
disabledSaveButton,
|
||||
saveButton,
|
||||
splitPoints.map((data) => data.length === 0)
|
||||
)
|
||||
|
||||
const cancelButton = Translations.t.general.cancel
|
||||
.Clone() // Not using Button() element to prevent full width button
|
||||
.SetClass("btn btn-secondary mr-3")
|
||||
.onClick(() => {
|
||||
splitPoints.setData([])
|
||||
splitClicked.setData(false)
|
||||
})
|
||||
|
||||
cancelButton.SetClass("btn btn-secondary block")
|
||||
|
||||
const splitTitle = new Title(t.splitTitle)
|
||||
|
||||
const mapView = new Combine([
|
||||
splitTitle,
|
||||
new VariableUiElement(leafletMap),
|
||||
new Combine([cancelButton, saveToggle]).SetClass("flex flex-row"),
|
||||
])
|
||||
mapView.SetClass("question")
|
||||
super([
|
||||
Toggle.If(hasBeenSplit, () =>
|
||||
t.hasBeenSplit.Clone().SetClass("font-bold thanks block w-full")
|
||||
),
|
||||
new Toggle(mapView, splitToggle, splitClicked),
|
||||
])
|
||||
splitClicked.addCallback((view) => {
|
||||
if (view) {
|
||||
initMap()
|
||||
}
|
||||
})
|
||||
this.dialogIsOpened = splitClicked
|
||||
const self = this
|
||||
splitButton.onClick(() => {
|
||||
splitClicked.setData(true)
|
||||
self.ScrollIntoView()
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue