From aa9045fd131a87e9ae77f9b9304a75d3ecc7b73f Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Tue, 20 Jul 2021 01:59:19 +0200 Subject: [PATCH] Automatically move the map onto the feature, add arguments to helpers --- Logic/GeoOperations.ts | 8 +++++ Svg.ts | 2 +- UI/Input/LengthInput.ts | 10 +++--- UI/Input/ValidatedTextField.ts | 4 +++ assets/svg/length-crosshair.svg | 56 ++++++++++++++++++++++++--------- 5 files changed, 58 insertions(+), 22 deletions(-) diff --git a/Logic/GeoOperations.ts b/Logic/GeoOperations.ts index 31cb88ad2d..768a5fe24b 100644 --- a/Logic/GeoOperations.ts +++ b/Logic/GeoOperations.ts @@ -273,6 +273,14 @@ export class GeoOperations { } return undefined; } + /** + * Generates the closest point on a way from a given point + * @param way The road on which you want to find a point + * @param point Point defined as [lon, lat] + */ + public static nearestPoint(way, point: [number, number]){ + return turf.nearestPointOnLine(way, point, {units: "kilometers"}); + } } diff --git a/Svg.ts b/Svg.ts index a3fe46cd7d..88e9216263 100644 --- a/Svg.ts +++ b/Svg.ts @@ -184,7 +184,7 @@ export default class Svg { public static layersAdd_svg() { return new Img(Svg.layersAdd, true);} public static layersAdd_ui() { return new FixedUiElement(Svg.layersAdd_img);} - public static length_crosshair = " Created by potrace 1.15, written by Peter Selinger 2001-2017 image/svg+xml " + public static length_crosshair = " Created by potrace 1.15, written by Peter Selinger 2001-2017 image/svg+xml " public static length_crosshair_img = Img.AsImageElement(Svg.length_crosshair) public static length_crosshair_svg() { return new Img(Svg.length_crosshair, true);} public static length_crosshair_ui() { return new FixedUiElement(Svg.length_crosshair_img);} diff --git a/UI/Input/LengthInput.ts b/UI/Input/LengthInput.ts index ea7530ce3e..0558069b29 100644 --- a/UI/Input/LengthInput.ts +++ b/UI/Input/LengthInput.ts @@ -58,11 +58,11 @@ export default class LengthInput extends InputElement { }) } const element = new Combine([ - new Combine([Svg.length_crosshair_ui().SetStyle( - `visibility: hidden; position: absolute;top: 0;left: 0;transform:rotate(${this.value.data ?? 0}deg);`) + new Combine([Svg.length_crosshair_svg().SetStyle( + `position: absolute;top: 0;left: 0;transform:rotate(${this.value.data ?? 0}deg);`) ]) .SetClass("block length-crosshair-svg relative") - .SetStyle("z-index: 1000"), + .SetStyle("z-index: 1000; visibility: hidden"), map?.SetClass("w-full h-full block absolute top-0 left-O overflow-hidden"), ]) .SetClass("relative block bg-white border border-black rounded-3xl overflow-hidden") @@ -119,6 +119,7 @@ export default class LengthInput extends InputElement { const measurementCrosshair = htmlElement.getElementsByClassName("length-crosshair-svg")[0] as HTMLElement + const measurementCrosshairInner: HTMLElement = measurementCrosshair.firstChild if (firstClickXY === undefined) { measurementCrosshair.style.visibility = "hidden" @@ -139,12 +140,9 @@ export default class LengthInput extends InputElement { const leaflet = leafletMap?.data if (leaflet) { - console.log(firstClickXY, [dx, dy], "pixel origin", leaflet.getPixelOrigin()) const first = leaflet.layerPointToLatLng(firstClickXY) const last = leaflet.layerPointToLatLng([dx, dy]) - console.log(first, last) const geoDist = Math.floor(GeoOperations.distanceBetween([first.lng, first.lat], [last.lng, last.lat]) * 100000) / 100 - console.log("First", first, "last", last, "d", geoDist) self.value.setData("" + geoDist) } diff --git a/UI/Input/ValidatedTextField.ts b/UI/Input/ValidatedTextField.ts index 809ff025fd..ec3aa62ce4 100644 --- a/UI/Input/ValidatedTextField.ts +++ b/UI/Input/ValidatedTextField.ts @@ -121,6 +121,10 @@ export default class ValidatedTextField { // Bit of a hack: we project the centerpoint to the closes point on the road - if available if(options.feature){ + const lonlat: [number, number] = [...options.location] + lonlat.reverse() + options.location = <[number,number]> GeoOperations.nearestPoint(options.feature, lonlat).geometry.coordinates + options.location.reverse() } options.feature diff --git a/assets/svg/length-crosshair.svg b/assets/svg/length-crosshair.svg index cb83789fb5..0446f22c4a 100644 --- a/assets/svg/length-crosshair.svg +++ b/assets/svg/length-crosshair.svg @@ -33,8 +33,8 @@ showguides="true" inkscape:guide-bbox="true" inkscape:zoom="0.5" - inkscape:cx="108.3764" - inkscape:cy="623.05359" + inkscape:cx="307.56567" + inkscape:cy="-35.669379" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" @@ -53,21 +53,26 @@ Created by potrace 1.15, written by Peter Selinger 2001-2017 - + @@ -75,15 +80,36 @@ Created by potrace 1.15, written by Peter Selinger 2001-2017 inkscape:connector-curvature="0" id="path814" d="M 429.76804,857.30628 V 428.78674" - style="fill:none;stroke:#000000;stroke-width:1.49999997;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:11.99999975,11.99999975;stroke-dashoffset:0" /> + style="fill:none;stroke:#000000;stroke-width:1.49999997;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:35.99999926,35.99999926;stroke-dashoffset:0" /> + d="M 857.32232,1.0332137 H 1.6833879 v 0" + style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:17.99999963, 17.99999963;stroke-dashoffset:0;stroke-opacity:1" /> + +