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

Add binoculars theme, auto reformat everything

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-09-09 00:05:51 +02:00
parent 38dea806c5
commit 78d6482c88
586 changed files with 115573 additions and 111842 deletions
Download patch file Download diff file Expand all files Collapse all files

6
UI/Input/Checkboxes.ts
View file

@ -1,6 +1,6 @@
import { InputElement } from "./InputElement";
import { UIEventSource } from "../../Logic/UIEventSource";
import { Utils } from "../../Utils";
import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils";
import BaseUIElement from "../BaseUIElement";
/**

26
UI/Input/ColorPicker.ts
View file

@ -3,41 +3,41 @@ import {UIEventSource} from "../../Logic/UIEventSource";
export default class ColorPicker extends InputElement<string> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<string>
private readonly _element : HTMLElement
private readonly _element: HTMLElement
constructor(
value: UIEventSource<string> = new UIEventSource<string>(undefined)
) {
super();
this.value = value ;
this.value = value;
const el = document.createElement("input")
this._element = el;
el.type = "color"
this.value.addCallbackAndRunD(v => {
el.value =v
el.value = v
});
el.oninput = () => {
const hex = el.value;
value.setData(hex);
}
}
protected InnerConstructElement(): HTMLElement {
return this._element;
}
GetValue(): UIEventSource<string> {
return this.value;
}
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
IsValid(t: string): boolean {
return false;
}
protected InnerConstructElement(): HTMLElement {
return this._element;
}
}

9
UI/Input/DirectionInput.ts
View file

@ -13,13 +13,12 @@ import Loc from "../../Models/Loc";
*/
export default class DirectionInput extends InputElement<string> {
public static constructMinimap: ((any) => BaseUIElement);
private readonly _location: UIEventSource<Loc>;
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _location: UIEventSource<Loc>;
private readonly value: UIEventSource<string>;
private background;
constructor(mapBackground: UIEventSource<any>,
constructor(mapBackground: UIEventSource<any>,
location: UIEventSource<Loc>,
value?: UIEventSource<string>) {
super();
@ -49,10 +48,10 @@ export default class DirectionInput extends InputElement<string> {
}
const element = new Combine([
Svg.direction_stroke_svg().SetStyle(
Svg.direction_stroke_svg().SetStyle(
`position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform:rotate(${this.value.data ?? 0}deg);`)
.SetClass("direction-svg relative")
.SetStyle("z-index: 1000"),
.SetStyle("z-index: 1000"),
map.SetStyle(
`position: absolute;top: 0;left: 0;width: 100%;height: 100%;`)

24
UI/Input/FixedInputElement.ts
View file

@ -4,15 +4,15 @@ import Translations from "../i18n/Translations";
import BaseUIElement from "../BaseUIElement";
export class FixedInputElement<T> extends InputElement<T> {
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<T>;
public readonly IsSelected : UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _comparator: (t0: T, t1: T) => boolean;
private readonly _el : HTMLElement;
constructor(rendering: BaseUIElement | string,
private readonly _el: HTMLElement;
constructor(rendering: BaseUIElement | string,
value: T,
comparator: ((t0: T, t1: T) => boolean ) = undefined) {
comparator: ((t0: T, t1: T) => boolean) = undefined) {
super();
this._comparator = comparator ?? ((t0, t1) => t0 == t1);
this.value = new UIEventSource<T>(value);
@ -21,19 +21,15 @@ export class FixedInputElement<T> extends InputElement<T> {
this._el = document.createElement("span")
this._el.addEventListener("mouseout", () => selected.setData(false))
const e = Translations.W(rendering)?.ConstructElement()
if(e){
this._el.appendChild( e)
if (e) {
this._el.appendChild(e)
}
this.onClick(() => {
selected.setData(true)
})
}
protected InnerConstructElement(): HTMLElement {
return this._el;
}
GetValue(): UIEventSource<T> {
return this.value;
}
@ -42,5 +38,9 @@ export class FixedInputElement<T> extends InputElement<T> {
return this._comparator(t, this.value.data);
}
protected InnerConstructElement(): HTMLElement {
return this._el;
}
}

12
UI/Input/InputElement.ts
View file

@ -1,11 +1,13 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
export abstract class InputElement<T> extends BaseUIElement{
abstract GetValue() : UIEventSource<T>;
export abstract class InputElement<T> extends BaseUIElement {
abstract IsSelected: UIEventSource<boolean>;
abstract IsValid(t: T) : boolean;
abstract GetValue(): UIEventSource<T>;
abstract IsValid(t: T): boolean;
}

13
UI/Input/LengthInput.ts
View file

@ -6,17 +6,14 @@ import {Utils} from "../../Utils";
import Loc from "../../Models/Loc";
import {GeoOperations} from "../../Logic/GeoOperations";
import DirectionInput from "./DirectionInput";
import {RadioButton} from "./RadioButton";
import {FixedInputElement} from "./FixedInputElement";
/**
* Selects a length after clicking on the minimap, in meters
*/
export default class LengthInput extends InputElement<string> {
private readonly _location: UIEventSource<Loc>;
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _location: UIEventSource<Loc>;
private readonly value: UIEventSource<string>;
private background;
@ -68,8 +65,8 @@ export default class LengthInput extends InputElement<string> {
this.RegisterTriggers(element, map?.leafletMap)
element.style.overflow = "hidden"
element.style.display = "block"
return element
return element
}
private RegisterTriggers(htmlElement: HTMLElement, leafletMap: UIEventSource<L.Map>) {
@ -77,7 +74,7 @@ export default class LengthInput extends InputElement<string> {
let firstClickXY: [number, number] = undefined
let lastClickXY: [number, number] = undefined
const self = this;
function onPosChange(x: number, y: number, isDown: boolean, isUp?: boolean) {
if (x === undefined || y === undefined) {
@ -115,7 +112,7 @@ export default class LengthInput extends InputElement<string> {
const measurementCrosshair = htmlElement.getElementsByClassName("length-crosshair-svg")[0] as HTMLElement
const measurementCrosshairInner: HTMLElement = <HTMLElement>measurementCrosshair.firstChild
if (firstClickXY === undefined) {
measurementCrosshair.style.visibility = "hidden"

41
UI/Input/LocationInput.ts
View file

@ -14,7 +14,27 @@ import * as L from "leaflet";
export default class LocationInput extends InputElement<Loc> {
private static readonly matchLayout = new UIEventSource(new LayoutConfig({
description: "Matchpoint style",
icon: "./assets/svg/crosshair-empty.svg",
id: "matchpoint",
language: ["en"],
layers: [{
id: "matchpoint", source: {
osmTags: {and: []}
},
icon: "./assets/svg/crosshair-empty.svg"
}],
maintainer: "MapComplete",
startLat: 0,
startLon: 0,
startZoom: 0,
title: "Location input",
version: "0"
}));
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
public readonly snappedOnto: UIEventSource<any> = new UIEventSource<any>(undefined)
private _centerLocation: UIEventSource<Loc>;
private readonly mapBackground: UIEventSource<BaseLayer>;
private readonly _snapTo: UIEventSource<{ feature: any }[]>
@ -22,7 +42,6 @@ export default class LocationInput extends InputElement<Loc> {
private readonly _snappedPoint: UIEventSource<any>
private readonly _maxSnapDistance: number
private readonly _snappedPointTags: any;
public readonly snappedOnto: UIEventSource<any> = new UIEventSource<any>(undefined)
constructor(options: {
mapBackground?: UIEventSource<BaseLayer>,
@ -229,24 +248,4 @@ export default class LocationInput extends InputElement<Loc> {
}
}
private static readonly matchLayout = new UIEventSource(new LayoutConfig({
description: "Matchpoint style",
icon: "./assets/svg/crosshair-empty.svg",
id: "matchpoint",
language: ["en"],
layers: [{
id: "matchpoint", source: {
osmTags: {and: []}
},
icon: "./assets/svg/crosshair-empty.svg"
}],
maintainer: "MapComplete",
startLat: 0,
startLon: 0,
startZoom: 0,
title: "Location input",
version: "0"
}));
}

26
UI/Input/RadioButton.ts
View file

@ -25,6 +25,19 @@ export class RadioButton<T> extends InputElement<T> {
this._dontStyle = options.dontStyle ?? false
}
IsValid(t: T): boolean {
for (const inputElement of this._elements) {
if (inputElement.IsValid(t)) {
return true;
}
}
return false;
}
GetValue(): UIEventSource<T> {
return this.value;
}
protected InnerConstructElement(): HTMLElement {
const elements = this._elements;
const selectFirstAsDefault = this._selectFirstAsDefault;
@ -166,19 +179,6 @@ export class RadioButton<T> extends InputElement<T> {
return form;
}
IsValid(t: T): boolean {
for (const inputElement of this._elements) {
if (inputElement.IsValid(t)) {
return true;
}
}
return false;
}
GetValue(): UIEventSource<T> {
return this.value;
}
/*
public ShowValue(t: T): boolean {
if (t === undefined) {

15
UI/Input/SimpleDatePicker.ts
View file

@ -3,17 +3,17 @@ import {UIEventSource} from "../../Logic/UIEventSource";
export default class SimpleDatePicker extends InputElement<string> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<string>
private readonly _element: HTMLElement;
constructor(
value?: UIEventSource<string>
) {
super();
this.value = value ?? new UIEventSource<string>(undefined);
const self = this;
const el = document.createElement("input")
this._element = el;
el.type = "date"
@ -30,17 +30,16 @@ export default class SimpleDatePicker extends InputElement<string> {
}
protected InnerConstructElement(): HTMLElement {
return this._element
}
GetValue(): UIEventSource<string> {
return this.value;
}
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
IsValid(t: string): boolean {
return false;
}
protected InnerConstructElement(): HTMLElement {
return this._element
}
}

2
UI/Input/TextField.ts
View file

@ -66,7 +66,7 @@ export class TextField extends InputElement<string> {
this.value.addCallbackAndRunD(value => {
// We leave the textfield as is in the case of undefined or null (handled by addCallbackAndRunD) - make sure we do not erase it!
// We leave the textfield as is in the case of undefined or null (handled by addCallbackAndRunD) - make sure we do not erase it!
field["value"] = value;
if (self.IsValid(value)) {
self.RemoveClass("invalid")

8
UI/Input/Toggle.ts
View file

@ -6,7 +6,7 @@ import {VariableUiElement} from "../Base/VariableUIElement";
* The 'Toggle' is a UIElement showing either one of two elements, depending on the state.
* It can be used to implement e.g. checkboxes or collapsible elements
*/
export default class Toggle extends VariableUiElement{
export default class Toggle extends VariableUiElement {
public readonly isEnabled: UIEventSource<boolean>;
@ -16,11 +16,11 @@ export default class Toggle extends VariableUiElement{
);
this.isEnabled = isEnabled
}
public ToggleOnClick(): Toggle{
public ToggleOnClick(): Toggle {
const self = this;
this.onClick(() => {
self. isEnabled.setData(!self.isEnabled.data);
self.isEnabled.setData(!self.isEnabled.data);
})
return this;
}

8
UI/Input/ValidatedTextField.ts
View file

@ -118,15 +118,15 @@ export default class ValidatedTextField {
throw "Invalid zoom level for argument at 'length'-input"
}
}
// Bit of a hack: we project the centerpoint to the closes point on the road - if available
if(options.feature !== undefined && options.feature.geometry.type !== "Point"){
if (options.feature !== undefined && options.feature.geometry.type !== "Point") {
const lonlat: [number, number] = [...options.location]
lonlat.reverse()
options.location = <[number,number]> GeoOperations.nearestPoint(options.feature, lonlat).geometry.coordinates
options.location = <[number, number]>GeoOperations.nearestPoint(options.feature, lonlat).geometry.coordinates
options.location.reverse()
}
const location = new UIEventSource<Loc>({
lat: options.location[0],
lon: options.location[1],