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

Refactoring: fix most of the custom input elements, support right click/long tap/double click to add a new element

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-04-16 03:42:26 +02:00
parent b0052d3a36
commit 1123a72c5e
25 changed files with 390 additions and 531 deletions
Download patch file Download diff file Expand all files Collapse all files

12
UI/InputElement/Helpers/ColorInput.svelte Normal file
View file

@ -0,0 +1,12 @@
<script lang="ts">
/**
* Simple wrapper around the HTML-color field.
*/
import { UIEventSource } from "../../../Logic/UIEventSource";
export let value: UIEventSource<undefined | string>;
</script>
<input bind:value={$value} type="color">

12
UI/InputElement/Helpers/DateInput.svelte Normal file
View file

@ -0,0 +1,12 @@
<script lang="ts">
/**
* Simple wrapper around the HTML-date field.
*/
import { UIEventSource } from "../../../Logic/UIEventSource";
export let value: UIEventSource<undefined | string>;
</script>
<input bind:value={$value} type="date">

9
UI/InputElement/Helpers/DirectionInput.svelte
View file

@ -8,9 +8,9 @@
import Svg from "../../../Svg.js";
/**
* A visualisation to pick a direction on a map background
* A visualisation to pick a direction on a map background.
*/
export let value: UIEventSource<undefined | number>;
export let value: UIEventSource<undefined | string>;
export let mapProperties: Partial<MapProperties> & { readonly location: UIEventSource<{ lon: number; lat: number }> };
let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined);
let mla = new MapLibreAdaptor(map, mapProperties);
@ -18,7 +18,6 @@
mla.allowZooming.setData(false)
let directionElem: HTMLElement | undefined;
$: value.addCallbackAndRunD(degrees => {
console.log("Degrees are", degrees, directionElem);
if (directionElem === undefined) {
return;
}
@ -32,7 +31,7 @@
const dy = (rect.top + rect.bottom) / 2 - y;
const angle = (180 * Math.atan2(dy, dx)) / Math.PI;
const angleGeo = Math.floor((450 - angle) % 360);
value.setData(angleGeo);
value.setData(""+angleGeo);
}
let isDown = false;
@ -61,7 +60,7 @@
<MaplibreMap {map} attribution={false}></MaplibreMap>
</div>
<div bind:this={directionElem} class="absolute w-full h-full top-0 left-0 border border-red-500">
<div bind:this={directionElem} class="absolute w-full h-full top-0 left-0">
<ToSvelte construct={ Svg.direction_stroke_svg}>