diff --git a/src/Models/ThemeViewState/WithLayoutSourceState.ts b/src/Models/ThemeViewState/WithLayoutSourceState.ts index 0a35aca70..763a0d8e1 100644 --- a/src/Models/ThemeViewState/WithLayoutSourceState.ts +++ b/src/Models/ThemeViewState/WithLayoutSourceState.ts @@ -131,7 +131,9 @@ export class WithLayoutSourceState extends WithSelectedElementState { protected setSelectedElement(feature: Feature) { // The given feature might be a partial one from the cache - feature = this.indexedFeatures.featuresById.data?.get(feature.properties.id) ?? feature + if(feature !== undefined){ + feature = this.indexedFeatures.featuresById.data?.get(feature?.properties?.id) ?? feature + } super.setSelectedElement(feature) } } diff --git a/src/UI/BigComponents/GpsElementHelper.svelte b/src/UI/BigComponents/GpsElementHelper.svelte new file mode 100644 index 000000000..23f0f1e27 --- /dev/null +++ b/src/UI/BigComponents/GpsElementHelper.svelte @@ -0,0 +1,56 @@ + + + fade(e, {duration: 150})} bind:open> +
+ +
+
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte index 03ead9eaa..14a7670fa 100644 --- a/src/UI/ThemeViewGUI.svelte +++ b/src/UI/ThemeViewGUI.svelte @@ -43,7 +43,7 @@ import Hash from "../Logic/Web/Hash" import Searchbar from "./Base/Searchbar.svelte" import ChevronRight from "@babeard/svelte-heroicons/mini/ChevronRight" - import { Drawer } from "flowbite-svelte" + import { Drawer, Popover } from "flowbite-svelte" import { linear } from "svelte/easing" import DefaultIcon from "./Map/DefaultIcon.svelte" import Loading from "./Base/Loading.svelte" @@ -51,7 +51,8 @@ import TitleHandler from "../Logic/Actors/TitleHandler" import Popup from "./Base/Popup.svelte" import TagRenderingAnswer from "./Popup/TagRendering/TagRenderingAnswer.svelte" - + import GpsElementHelper from "./BigComponents/GpsElementHelper.svelte" + import { dragDetection } from "../Utils/dragDetection" export let state: WithSearchState new TitleHandler(state.selectedElement, state) @@ -176,12 +177,18 @@ } let apiState = state?.osmConnection?.apiIsOnline ?? new ImmutableStore("online") + + let mapIsDragged: UIEventSource = new UIEventSource(undefined) + function onMapDragged(){ + mapIsDragged.ping() + } +
-
+
onMapDragged()}>
@@ -294,7 +301,7 @@ -
+
{/if}
+
diff --git a/src/Utils/dragDetection.ts b/src/Utils/dragDetection.ts new file mode 100644 index 000000000..368c4b6e1 --- /dev/null +++ b/src/Utils/dragDetection.ts @@ -0,0 +1,36 @@ +export function dragDetection(htmlElement: HTMLElement, callback: () => {}) { + + let isDown = false + let threshold = 5 + let start = null + + htmlElement.addEventListener("pointerdown", (e) => { + isDown = true + start = { x: e.clientX, y: e.clientY } + }) + + htmlElement.addEventListener("pointermove", (e) => { + if (!isDown || !start) return + const dx = e.clientX - start.x + const dy = e.clientY - start.y + if (Math.hypot(dx, dy) > threshold) { + callback() + isDown = false + } + }) + + htmlElement.addEventListener("pointerup", () => { + isDown = false + start = null + }) + + htmlElement.addEventListener("pointerleave", () => { + isDown = false + start = null + }) + + return { + destroy: () => { + }, + } +}