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

Add quickswitcher to length input

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-06-19 18:15:33 +02:00
parent 9bfbdf012a
commit e701dac274
2 changed files with 20 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
UI/BigComponents/BackgroundMapSwitch.ts
View file

@ -165,9 +165,13 @@ export default class BackgroundMapSwitch extends Combine {
backgroundLayer: UIEventSource<BaseLayer> backgroundLayer: UIEventSource<BaseLayer>
}, },
currentBackground: UIEventSource<BaseLayer>, currentBackground: UIEventSource<BaseLayer>,
preferredCategory?: string options?:{
preferredCategory?: string,
allowedCategories?: ("osmbasedmap" | "photo" | "map")[]
}
) { ) {
const allowedCategories = ["osmbasedmap", "photo", "map"] const allowedCategories = options?.allowedCategories ?? ["osmbasedmap", "photo", "map"]
const previousLayer = state.backgroundLayer.data const previousLayer = state.backgroundLayer.data
const buttons = [] const buttons = []
@ -188,7 +192,7 @@ export default class BackgroundMapSwitch extends Combine {
}) })
// Fall back to the first option: OSM // Fall back to the first option: OSM
activatePrevious = activatePrevious ?? button.activate activatePrevious = activatePrevious ?? button.activate
if (category === preferredCategory) { if (category === options?.preferredCategory) {
button.activate() button.activate()
} }
buttons.push(button) buttons.push(button)

16
UI/Input/LengthInput.ts
View file

@ -5,8 +5,9 @@ import Svg from "../../Svg";
import {Utils} from "../../Utils"; import {Utils} from "../../Utils";
import Loc from "../../Models/Loc"; import Loc from "../../Models/Loc";
import {GeoOperations} from "../../Logic/GeoOperations"; import {GeoOperations} from "../../Logic/GeoOperations";
import Minimap from "../Base/Minimap"; import Minimap, {MinimapObj} from "../Base/Minimap";
import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch"; import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch";
import BaseUIElement from "../BaseUIElement";
/** /**
@ -39,8 +40,8 @@ export default class LengthInput extends InputElement<string> {
} }
protected InnerConstructElement(): HTMLElement { protected InnerConstructElement(): HTMLElement {
// @ts-ignore let map : (BaseUIElement & MinimapObj) = undefined
let map = undefined let layerControl : BaseUIElement = undefined
if (!Utils.runningFromConsole) { if (!Utils.runningFromConsole) {
map = Minimap.createMiniMap({ map = Minimap.createMiniMap({
background: this.background, background: this.background,
@ -51,6 +52,14 @@ export default class LengthInput extends InputElement<string> {
tap: true tap: true
} }
}) })
layerControl = new BackgroundMapSwitch({
locationControl: this._location,
backgroundLayer: this.background,
}, this.background,{
allowedCategories: ["map","photo"]
})
} }
const element = new Combine([ const element = new Combine([
new Combine([Svg.length_crosshair_svg().SetStyle( new Combine([Svg.length_crosshair_svg().SetStyle(
@ -58,6 +67,7 @@ export default class LengthInput extends InputElement<string> {
]) ])
.SetClass("block length-crosshair-svg relative") .SetClass("block length-crosshair-svg relative")
.SetStyle("z-index: 1000; visibility: hidden"), .SetStyle("z-index: 1000; visibility: hidden"),
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"), 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-3xl overflow-hidden")