From 56be8f9b25098ab5479abfb956730f7bddf4f127 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sun, 19 Jun 2022 19:10:56 +0200 Subject: [PATCH] Add quickswitch for lengthinput --- UI/Input/LengthInput.ts | 20 +++++++++++--------- UI/Input/ValidatedTextField.ts | 15 +++++++++++---- UI/Popup/TagRenderingQuestion.ts | 6 +++--- 3 files changed, 25 insertions(+), 16 deletions(-) diff --git a/UI/Input/LengthInput.ts b/UI/Input/LengthInput.ts index a6941082b3..c108e7e7fd 100644 --- a/UI/Input/LengthInput.ts +++ b/UI/Input/LengthInput.ts @@ -8,6 +8,7 @@ import {GeoOperations} from "../../Logic/GeoOperations"; import Minimap, {MinimapObj} from "../Base/Minimap"; import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch"; import BaseUIElement from "../BaseUIElement"; +import CR = Mocha.reporters.Base.cursor.CR; /** @@ -61,27 +62,28 @@ export default class LengthInput extends InputElement { }) } + const crosshair = 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; visibility: hidden") + const element = new Combine([ - 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; visibility: hidden"), + crosshair, layerControl?.SetStyle("position: absolute; bottom: 0.25rem; left: 0.25rem; z-index: 1000"), 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") + .SetClass("relative block bg-white border border-black rounded-xl overflow-hidden") .ConstructElement() - this.RegisterTriggers(element, map?.leafletMap) + this.RegisterTriggers(map?.ConstructElement(), map?.leafletMap, crosshair.ConstructElement()) element.style.overflow = "hidden" element.style.display = "block" return element } - private RegisterTriggers(htmlElement: HTMLElement, leafletMap: UIEventSource) { + private RegisterTriggers(htmlElement: HTMLElement, leafletMap: UIEventSource, measurementCrosshair: HTMLElement) { let firstClickXY: [number, number] = undefined let lastClickXY: [number, number] = undefined @@ -123,7 +125,7 @@ export default class LengthInput extends InputElement { } - const measurementCrosshair = htmlElement.getElementsByClassName("length-crosshair-svg")[0] as HTMLElement + // const measurementCrosshair = htmlElement.getElementsByClassName("length-crosshair-svg")[0] as HTMLElement const measurementCrosshairInner: HTMLElement = measurementCrosshair.firstChild if (firstClickXY === undefined) { diff --git a/UI/Input/ValidatedTextField.ts b/UI/Input/ValidatedTextField.ts index 184bbc5c4b..048c86dec2 100644 --- a/UI/Input/ValidatedTextField.ts +++ b/UI/Input/ValidatedTextField.ts @@ -3,7 +3,7 @@ import * as EmailValidator from "email-validator"; import {parsePhoneNumberFromString} from "libphonenumber-js"; import {InputElement} from "./InputElement"; import {TextField} from "./TextField"; -import {UIEventSource} from "../../Logic/UIEventSource"; +import {Store, UIEventSource} from "../../Logic/UIEventSource"; import CombinedInputElement from "./CombinedInputElement"; import SimpleDatePicker from "./SimpleDatePicker"; import OpeningHoursInput from "../OpeningHours/OpeningHoursInput"; @@ -556,7 +556,8 @@ class LengthTextField extends TextFieldDef { return !isNaN(t) } - inputHelper = (value, options) => { + inputHelper = (value: UIEventSource, options: + { location?: [number,number]; args?: string[]; feature?: any; mapBackgroundLayer?: Store; }) => { options = options ?? {} options.location = options.location ?? [0, 0] @@ -590,7 +591,8 @@ class LengthTextField extends TextFieldDef { location, new UIEventSource(args[1].split(",")) ) } - const li = new LengthInput(options?.mapBackgroundLayer, location, value) + const background = options?.mapBackgroundLayer + const li = new LengthInput(new UIEventSource(background.data), location, value) li.SetStyle("height: 20rem;") return li; } @@ -864,7 +866,12 @@ export default class ValidatedTextField { ] public static allTypes: Map = ValidatedTextField.allTypesDict(); public static ForType(type: string = "string"): TextFieldDef { - return ValidatedTextField.allTypes.get(type) + const def = ValidatedTextField.allTypes.get(type) + if(def === undefined){ + console.warn("Something tried to load a validated text field named",type, "but this type does not exist") + return this.ForType() + } + return def } public static HelpText(): BaseUIElement { diff --git a/UI/Popup/TagRenderingQuestion.ts b/UI/Popup/TagRenderingQuestion.ts index 0180829c0b..9b2c1454f3 100644 --- a/UI/Popup/TagRenderingQuestion.ts +++ b/UI/Popup/TagRenderingQuestion.ts @@ -413,7 +413,7 @@ export default class TagRenderingQuestion extends Combine { const tagsData = tags.data; const feature = state?.allElements?.ContainingFeatures?.get(tagsData.id) const center = feature != undefined ? GeoOperations.centerpointCoordinates(feature) : [0,0] - const input: InputElement = ValidatedTextField.ForType(configuration.freeform.type).ConstructInputElement({ + const input: InputElement = ValidatedTextField.ForType(configuration.freeform.type)?.ConstructInputElement({ country: () => tagsData._country, location: [center[1], center[0]], mapBackgroundLayer: state?.backgroundLayer, @@ -425,10 +425,10 @@ export default class TagRenderingQuestion extends Combine { }); // Init with correct value - input.GetValue().setData(tagsData[freeform.key] ?? freeform.default); + input?.GetValue().setData(tagsData[freeform.key] ?? freeform.default); // Add a length check - input.GetValue().addCallbackD((v : string | undefined) => { + input?.GetValue().addCallbackD((v : string | undefined) => { if(v?.length >= 255){ feedback.setData(Translations.t.validation.tooLong.Subs({count: v.length})) }