midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactoring: more fixes, first attempt at tagRenderingAnswer

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-03-30 04:51:56 +02:00
parent aaaaf1948d
commit 29372c465e
24 changed files with 278 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Logic/FeatureSource/PerLayerFeatureSourceSplitter.ts
View file

@ -4,6 +4,7 @@ import SimpleFeatureSource from "./Sources/SimpleFeatureSource"
import { Feature } from "geojson"
import { Utils } from "../../Utils"
import { UIEventSource } from "../UIEventSource"
import { feature } from "@turf/turf"
/**
* In some rare cases, some elements are shown on multiple layers (when 'passthrough' is enabled)
@ -19,7 +20,7 @@ export default class PerLayerFeatureSourceSplitter<
upstream: FeatureSource,
options?: {
constructStore?: (features: UIEventSource<Feature[]>, layer: FilteredLayer) => T
handleLeftovers?: (featuresWithoutLayer: any[]) => void
handleLeftovers?: (featuresWithoutLayer: Feature[]) => void
}
) {
const knownLayers = new Map<string, T>()
@ -35,9 +36,6 @@ export default class PerLayerFeatureSourceSplitter<
}
upstream.features.addCallbackAndRunD((features) => {
if (features === undefined) {
return
}
if (layers === undefined) {
return
}
@ -82,7 +80,7 @@ export default class PerLayerFeatureSourceSplitter<
const src = layerSources.get(id)
if (Utils.sameList(src.data, features)) {
return
continue
}
src.setData(features)
}

11
Logic/FeatureSource/Sources/FeatureSourceMerger.ts
View file

@ -1,6 +1,7 @@
import { Store, UIEventSource } from "../../UIEventSource"
import FeatureSource, { IndexedFeatureSource } from "../FeatureSource"
import { Feature } from "geojson"
import { Utils } from "../../../Utils"
/**
*
@ -35,20 +36,21 @@ export default class FeatureSourceMerger implements IndexedFeatureSource {
}
protected addData(featuress: Feature[][]) {
featuress = Utils.NoNull(featuress)
let somethingChanged = false
const all: Map<string, Feature> = new Map()
const unseen = new Set<string>()
// We seed the dictionary with the previously loaded features
const oldValues = this.features.data ?? []
for (const oldValue of oldValues) {
all.set(oldValue.properties.id, oldValue)
unseen.add(oldValue.properties.id)
}
for (const features of featuress) {
if (features === undefined) {
continue
}
for (const f of features) {
const id = f.properties.id
unseen.delete(id)
if (!all.has(id)) {
// This is a new feature
somethingChanged = true
@ -67,6 +69,9 @@ export default class FeatureSourceMerger implements IndexedFeatureSource {
}
}
somethingChanged ||= unseen.size > 0
unseen.forEach((id) => all.delete(id))
if (!somethingChanged) {
// We don't bother triggering an update
return

5
Logic/FeatureSource/Sources/LayoutSource.ts
View file

@ -27,7 +27,7 @@ export default class LayoutSource extends FeatureSourceMerger {
) {
const { bounds, zoom } = mapProperties
// remove all 'special' layers
layers = layers.filter((flayer) => flayer.source !== null)
layers = layers.filter((layer) => layer.source !== null && layer.source !== undefined)
const geojsonlayers = layers.filter((layer) => layer.source.geojsonSource !== undefined)
const osmLayers = layers.filter((layer) => layer.source.geojsonSource === undefined)
@ -122,7 +122,8 @@ export default class LayoutSource extends FeatureSourceMerger {
{
zoom,
bounds,
layoutToUse: featureSwitches.layoutToUse,
layers: osmLayers,
widenFactor: featureSwitches.layoutToUse.widenFactor,
overpassUrl: featureSwitches.overpassUrl,
overpassTimeout: featureSwitches.overpassTimeout,
overpassMaxZoom: featureSwitches.overpassMaxZoom,

20
Logic/FeatureSource/Sources/OverpassFeatureSource.ts
View file

@ -3,7 +3,6 @@ import FeatureSource from "../FeatureSource"
import { ImmutableStore, Store, UIEventSource } from "../../UIEventSource"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import { Or } from "../../Tags/Or"
import LayoutConfig from "../../../Models/ThemeConfig/LayoutConfig"
import { Overpass } from "../../Osm/Overpass"
import { Utils } from "../../../Utils"
import { TagsFilter } from "../../Tags/TagsFilter"
@ -26,7 +25,8 @@ export default class OverpassFeatureSource implements FeatureSource {
private readonly state: {
readonly zoom: Store<number>
readonly layoutToUse: LayoutConfig
readonly layers: LayerConfig[]
readonly widenFactor: number
readonly overpassUrl: Store<string[]>
readonly overpassTimeout: Store<number>
readonly bounds: Store<BBox>
@ -37,7 +37,8 @@ export default class OverpassFeatureSource implements FeatureSource {
constructor(
state: {
readonly layoutToUse: LayoutConfig
readonly layers: LayerConfig[]
readonly widenFactor: number
readonly zoom: Store<number>
readonly overpassUrl: Store<string[]>
readonly overpassTimeout: Store<number>
@ -117,7 +118,7 @@ export default class OverpassFeatureSource implements FeatureSource {
let lastUsed = 0
const layersToDownload = []
for (const layer of this.state.layoutToUse.layers) {
for (const layer of this.state.layers) {
if (typeof layer === "string") {
throw "A layer was not expanded!"
}
@ -130,6 +131,14 @@ export default class OverpassFeatureSource implements FeatureSource {
if (layer.doNotDownload) {
continue
}
if (layer.source === null) {
// This is a special layer. Should not have been here
console.warn(
"OverpassFeatureSource received a layer for which the source is null:",
layer.id
)
continue
}
if (layer.source.geojsonSource !== undefined) {
// Not our responsibility to download this layer!
continue
@ -151,7 +160,7 @@ export default class OverpassFeatureSource implements FeatureSource {
do {
try {
bounds = this.state.bounds.data
?.pad(this.state.layoutToUse.widenFactor)
?.pad(this.state.widenFactor)
?.expandToTileBounds(this.padToZoomLevel?.data)
if (bounds === undefined) {
@ -195,6 +204,7 @@ export default class OverpassFeatureSource implements FeatureSource {
// Some metatags are delivered by overpass _without_ underscore-prefix; we fix them below
// TODO FIXME re-enable this data.features.forEach((f) => SimpleMetaTaggers.objectMetaInfo.applyMetaTagsOnFeature(f))
console.log("Overpass returned", data.features.length, "features")
self.features.setData(data.features)
return [bounds, date, layersToDownload]
} catch (e) {

6
Logic/UIEventSource.ts
View file

@ -263,7 +263,11 @@ export abstract class Store<T> implements Readable<T> {
public subscribe(run: Subscriber<T> & ((value: T) => void), invalidate?): Unsubscriber {
// We don't need to do anything with 'invalidate', see
// https://github.com/sveltejs/svelte/issues/3859
return this.addCallbackAndRun(run)
// Note: run is wrapped in an anonymous function. 'Run' returns the value. If this value happens to be true, it would unsubscribe
return this.addCallbackAndRun((v) => {
run(v)
})
}
}

11
Models/ThemeConfig/Conversion/Validation.ts
View file

@ -3,7 +3,7 @@ import { LayerConfigJson } from "../Json/LayerConfigJson"
import LayerConfig from "../LayerConfig"
import { Utils } from "../../../Utils"
import Constants from "../../Constants"
import { Translation, TypedTranslation } from "../../../UI/i18n/Translation"
import { Translation } from "../../../UI/i18n/Translation"
import { LayoutConfigJson } from "../Json/LayoutConfigJson"
import LayoutConfig from "../LayoutConfig"
import { TagRenderingConfigJson } from "../Json/TagRenderingConfigJson"
@ -16,7 +16,6 @@ import FilterConfigJson from "../Json/FilterConfigJson"
import DeleteConfig from "../DeleteConfig"
import { QuestionableTagRenderingConfigJson } from "../Json/QuestionableTagRenderingConfigJson"
import Validators from "../../../UI/InputElement/Validators"
import xml2js from "xml2js"
class ValidateLanguageCompleteness extends DesugaringStep<any> {
private readonly _languages: string[]
@ -631,14 +630,14 @@ class MiscTagRenderingChecks extends DesugaringStep<TagRenderingConfigJson> {
}
const freeformType = json["freeform"]?.["type"]
if (freeformType) {
if (Validators.AvailableTypes().indexOf(freeformType) < 0) {
if (Validators.availableTypes.indexOf(freeformType) < 0) {
throw (
"At " +
context +
".freeform.type is an unknown type: " +
freeformType +
"; try one of " +
Validators.AvailableTypes().join(", ")
Validators.availableTypes.join(", ")
)
}
}
@ -943,9 +942,9 @@ export class ValidateFilter extends DesugaringStep<FilterConfigJson> {
for (let i = 0; i < option.fields.length; i++) {
const field = option.fields[i]
const type = field.type ?? "string"
if (Validators.AvailableTypes().find((t) => t === type) === undefined) {
if (Validators.availableTypes.find((t) => t === type) === undefined) {
const err = `Invalid filter: ${type} is not a valid textfield type (at ${context}.fields[${i}])\n\tTry one of ${Array.from(
Validators.AvailableTypes()
Validators.availableTypes
).join(",")}`
errors.push(err)
}

23
Models/ThemeViewState.ts
View file

@ -119,10 +119,20 @@ export default class ThemeViewState implements SpecialVisualizationState {
const indexedElements = this.indexedFeatures
this.featureProperties = new FeaturePropertiesStore(indexedElements)
const perLayer = new PerLayerFeatureSourceSplitter(
Array.from(this.layerState.filteredLayers.values()),
Array.from(this.layerState.filteredLayers.values()).filter(
(l) => l.layerDef.source !== null
),
indexedElements,
{
constructStore: (features, layer) => new GeoIndexedStoreForLayer(features, layer),
handleLeftovers: (features) => {
console.warn(
"Got ",
features.length,
"leftover features, such as",
features[0].properties
)
},
}
)
this.perLayer = perLayer.perLayer
@ -141,16 +151,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
(fs.layer.isDisplayed?.data ?? true) && z >= (fs.layer.layerDef?.minzoom ?? 0),
[fs.layer.isDisplayed]
)
doShowLayer.addCallbackAndRunD((doShow) =>
console.log(
"Layer",
fs.layer.layerDef.id,
"is",
doShow,
this.mapProperties.zoom.data,
fs.layer.layerDef.minzoom
)
)
new ShowDataLayer(this.map, {
layer: fs.layer.layerDef,
features: filtered,

2
UI/Base/Tr.svelte
View file

@ -9,7 +9,7 @@
import FromHtml from "./FromHtml.svelte";
export let t: Translation;
export let tags: Record<string, string> | undefined;
export let tags: Record<string, string> | undefined = undefined;
// Text for the current language
let txt: string | undefined;

1
UI/BigComponents/Geosearch.svelte
View file

@ -78,6 +78,7 @@
</div>
{:else }
<input
type="search"
bind:this={inputElement}
on:keypress={keypr => keypr.key === "Enter" ? performSearch() : undefined}

5
UI/BigComponents/LeftControls.ts
View file

@ -83,9 +83,6 @@ export default class LeftControls extends Combine {
"filters",
guiState.filterViewIsOpened
)
const toggledFilter = new MapControlButton(Svg.layers_svg()).onClick(() =>
guiState.filterViewIsOpened.setData(true)
)
state.featureSwitchFilter.addCallbackAndRun((f) => {
Hotkeys.RegisterHotkey(
{ nomod: "B" },
@ -96,8 +93,6 @@ export default class LeftControls extends Combine {
)
})
const filterButton = new Toggle(toggledFilter, undefined, state.featureSwitchFilter)
const mapSwitch = new Toggle(
new BackgroundMapSwitch(state, state.backgroundLayer, { enableHotkeys: true }),
undefined,

9
UI/BigComponents/SelectedElementView.svelte
View file

@ -4,6 +4,7 @@
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import type { SpecialVisualizationState } from "../SpecialVisualization";
import TagRenderingAnswer from "../Popup/TagRenderingAnswer.svelte";
import TagRenderingQuestion from "../Popup/TagRenderingQuestion.svelte";
export let selectedElement: Feature;
export let layer: LayerConfig;
@ -41,7 +42,7 @@
<div class="flex flex-col sm:flex-row flex-grow justify-between">
<!-- Title element-->
<h3>
<TagRenderingAnswer config={layer.title} {tags} {selectedElement}></TagRenderingAnswer>
<TagRenderingAnswer config={layer.title} {selectedElement} {tags}></TagRenderingAnswer>
</h3>
<div class="flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2">
@ -57,7 +58,11 @@
<div class="flex flex-col">
{#each layer.tagRenderings as config (config.id)}
<TagRenderingAnswer {tags} {config} {state}></TagRenderingAnswer>
{#if config.IsKnown($tags)}
<TagRenderingAnswer {tags} {config} {state}></TagRenderingAnswer>
{:else}
<TagRenderingQuestion {config} {tags} {state}></TagRenderingQuestion>
{/if}
{/each}
</div>

43
UI/InputElement/ValidatedInput.svelte Normal file
View file

@ -0,0 +1,43 @@
<script lang="ts">
import { Store, UIEventSource } from "../../Logic/UIEventSource";
import type { ValidatorType } from "./Validators";
import Validators from "./Validators";
import { ExclamationIcon } from "@rgossiaux/svelte-heroicons/solid";
import { Translation } from "../i18n/Translation";
export let value: UIEventSource<string>;
// Internal state, only copied to 'value' so that no invalid values leak outside
let _value = new UIEventSource(value.data ?? "")
export let type: ValidatorType;
let validator = Validators.get(type);
export let feedback: UIEventSource<Translation> | undefined = undefined
_value.addCallbackAndRun(v => {
if(validator.isValid(v)){
feedback?.setData(undefined)
value.setData(v)
return
}
value.setData(undefined)
feedback?.setData(validator.getFeedback(v));
})
if (validator === undefined) {
throw "Not a valid type for a validator:" + type;
}
const isValid = _value.map(v => validator.isValid(v));
</script>
{#if validator.textArea}
<textarea bind:value={$_value} inputmode={validator.inputmode ?? "text"}></textarea>
{:else }
<div class="flex">
<input bind:value={$_value} inputmode={validator.inputmode ?? "text"}>
{#if !$isValid}
<ExclamationIcon class="h-6 w-6 -ml-6"></ExclamationIcon>
{/if}
</div>
{/if}

11
UI/InputElement/Validator.ts
View file

@ -17,10 +17,17 @@ export abstract class Validator {
* What HTML-inputmode to use
*/
public readonly inputmode?: string
public readonly textArea: boolean
constructor(name: string, explanation: string | BaseUIElement, inputmode?: string) {
constructor(
name: string,
explanation: string | BaseUIElement,
inputmode?: string,
textArea?: false | boolean
) {
this.name = name
this.inputmode = inputmode
this.textArea = textArea ?? false
if (this.name.endsWith("textfield")) {
this.name = this.name.substr(0, this.name.length - "TextField".length)
}
@ -46,7 +53,7 @@ export abstract class Validator {
}
}
public isValid(string: string, requestCountry: () => string): boolean {
public isValid(string: string, requestCountry?: () => string): boolean {
return true
}

45
UI/InputElement/Validators.ts
View file

@ -19,8 +19,29 @@ import BaseUIElement from "../BaseUIElement"
import Combine from "../Base/Combine"
import Title from "../Base/Title"
export type ValidatorType = typeof Validators.availableTypes[number]
export default class Validators {
private static readonly AllValidators: ReadonlyArray<Validator> = [
public static readonly availableTypes = [
"string",
"text",
"date",
"nat",
"int",
"distance",
"direction",
"wikidata",
"pnat",
"float",
"pfloat",
"email",
"url",
"phone",
"opening_hours",
"color",
] as const
public static readonly AllValidators: ReadonlyArray<Validator> = [
new StringValidator(),
new TextValidator(),
new DateValidator(),
@ -38,8 +59,16 @@ export default class Validators {
new OpeningHoursValidator(),
new ColorValidator(),
]
public static allTypes: Map<string, Validator> = Validators.allTypesDict()
private static _byType = Validators._byTypeConstructor()
private static _byTypeConstructor(): Map<ValidatorType, Validator> {
const map = new Map<ValidatorType, Validator>()
for (const validator of Validators.AllValidators) {
map.set(<ValidatorType>validator.name, validator)
}
return map
}
public static HelpText(): BaseUIElement {
const explanations: BaseUIElement[] = Validators.AllValidators.map((type) =>
new Combine([new Title(type.name, 3), type.explanation]).SetClass("flex flex-col")
@ -51,15 +80,7 @@ export default class Validators {
]).SetClass("flex flex-col")
}
public static AvailableTypes(): string[] {
return Validators.AllValidators.map((tp) => tp.name)
}
private static allTypesDict(): Map<string, Validator> {
const types = new Map<string, Validator>()
for (const tp of Validators.AllValidators) {
types.set(tp.name, tp)
}
return types
static get(type: ValidatorType): Validator {
return Validators._byType.get(type)
}
}

10
UI/InputElement/Validators/DirectionValidator.ts
View file

@ -9,7 +9,17 @@ export default class DirectionValidator extends IntValidator {
)
}
isValid(str): boolean {
if (str.endsWith("°")) {
str = str.substring(0, str.length - 1)
}
return super.isValid(str)
}
reformat(str): string {
if (str.endsWith("°")) {
str = str.substring(0, str.length - 1)
}
const n = Number(str) % 360
return "" + n
}

2
UI/InputElement/Validators/TextValidator.ts
View file

@ -2,6 +2,6 @@ import { Validator } from "../Validator"
export default class TextValidator extends Validator {
constructor() {
super("text", "A longer piece of text. Uses an textArea instead of a textField", "text")
super("text", "A longer piece of text. Uses an textArea instead of a textField", "text", true)
}
}

14
UI/Map/ShowDataLayer.ts
View file

@ -245,8 +245,17 @@ class LineRenderingLayer {
})
this._visibility?.addCallbackAndRunD((visible) => {
map.setLayoutProperty(linelayer, "visibility", visible ? "visible" : "none")
map.setLayoutProperty(polylayer, "visibility", visible ? "visible" : "none")
try {
map.setLayoutProperty(linelayer, "visibility", visible ? "visible" : "none")
map.setLayoutProperty(polylayer, "visibility", visible ? "visible" : "none")
} catch (e) {
console.warn(
"Error while setting visiblity of layers ",
linelayer,
polylayer,
e
)
}
})
} else {
src.setData({
@ -323,6 +332,7 @@ export default class ShowDataLayer {
})
})
}
public static showRange(
map: Store<MlMap>,
features: FeatureSource,

14
UI/Popup/TagExplanation.svelte Normal file
View file

@ -0,0 +1,14 @@
<script lang="ts">/**
* Shows an explanation about the given TagsFilter.
*/
import { TagsFilter } from "../../Logic/Tags/TagsFilter";
import FromHtml from "../Base/FromHtml.svelte";
export let tagsFilter: TagsFilter;
export let properties: Record<string, string> | undefined = {};
export let linkToWiki: boolean = false;
</script>
{#if tagsFilter !== undefined}
<FromHtml src={tagsFilter.asHumanString(linkToWiki, false, properties)} />
{/if}

53
UI/Popup/TagRenderingQuestion.svelte Normal file
View file

@ -0,0 +1,53 @@
<script lang="ts">
import { UIEventSource } from "../../Logic/UIEventSource";
import type { SpecialVisualizationState } from "../SpecialVisualization";
import Tr from "../Base/Tr.svelte";
import If from "../Base/If.svelte";
import ValidatedInput from "../InputElement/ValidatedInput.svelte";
import TagRenderingMapping from "./TagRenderingMapping.svelte";
import type { Feature } from "geojson";
import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig";
export let config: TagRenderingConfig;
export let tags: UIEventSource<Record<string, string>>;
export let selectedElement: Feature;
export let state: SpecialVisualizationState;
state.featureSwitchIsTesting;
let freeformInput = new UIEventSource<string>(undefined);
</script>
{#if config.question !== undefined}
<div class="border border-black subtle-background">
<If condition={state.featureSwitchIsTesting}>
<div class="flex justify-between">
<Tr t={config.question}></Tr>
{config.id}
</div>
<Tr slot="else" t={config.question}></Tr>
</If>
{#if config.questionhint}
<div class="subtle">
<Tr t={config.question}></Tr>
</div>
{/if}
{#if config.freeform?.key && !(config.mappings?.length > 0)}
<!-- There are no options to choose from, simply show the input element: fill out the text field -->
<ValidatedInput type={config.freeform.type} value={freeformInput}></ValidatedInput>
{/if}
{#if config.mappings !== undefined}
<div class="flex flex-col">
{#each config.mappings as mapping}
{#if mapping.hideInAnswer === true || !(mapping.hideInAnswer) || (console.log(tags) || true) || !(mapping.hideInAnswer?.matchesProperties($tags)) }
<TagRenderingMapping {mapping} {tags} {state} {selectedElement}></TagRenderingMapping>
{/if}
{/each}
</div>
{/if}
</div>
{/if}

11
UI/ThemeViewGUI.svelte
View file

@ -41,7 +41,7 @@
<div class="h-screen w-screen absolute top-0 left-0 flex">
<MaplibreMap class="w-full h-full border border-black" map={maplibremap}></MaplibreMap>
<MaplibreMap map={maplibremap}></MaplibreMap>
</div>
<div class="absolute top-0 left-0 mt-2 ml-2">
@ -64,7 +64,7 @@
<div class="absolute bottom-0 right-0 mb-4 mr-4">
<MapControlButton on:click={() => mapproperties.zoom.update(z => z+1)}>
<ToSvelte class="w-7 h-7 block" construct={Svg.plus_ui}></ToSvelte>
<ToSvelte construct={Svg.plus_ui}></ToSvelte>
</MapControlButton>
<MapControlButton on:click={() => mapproperties.zoom.update(z => z-1)}>
<ToSvelte class="w-7 h-7 block" construct={Svg.min_ui}></ToSvelte>
@ -81,7 +81,7 @@
<If condition={state.featureSwitches.featureSwitchSearch}>
<Geosearch bounds={state.mapProperties.bounds} layout={state.layout} location={state.mapProperties.location}
{selectedElement} {selectedLayer}
zoom={state.mapProperties.zoom}></Geosearch>
></Geosearch>
</If>
</div>
@ -168,11 +168,14 @@
</If>
{#if $selectedElement !== undefined && $selectedLayer !== undefined}
<div class="absolute top-0 right-0 normal-background">
<div class="absolute top-0 right-0 w-screen h-screen" style="background-color: #00000088">
<div class="w-full m-8 normal-background rounded overflow-auto">
<SelectedElementView layer={$selectedLayer} selectedElement={$selectedElement}
tags={$selectedElementTags} state={state}></SelectedElementView>
</div>
</div>
{/if}
<style>

4
css/index-tailwind-output.css
View file

@ -947,6 +947,10 @@ video {
margin-right: 0px;
}
.-ml-6 {
margin-left: -1.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}

20
scripts/BuildMeta.ts Normal file
View file

@ -0,0 +1,20 @@
import Script from "./Script"
import Validators from "../UI/InputElement/Validators"
export default class BuildMeta extends Script {
constructor() {
super(
"Prints meta information about the mapcomplete codebase. Used to automate some things"
)
}
async main(args: string[]): Promise<void> {
const types = Validators.AllValidators.map((v) => v.name)
.map((s) => `"${s}"`)
.join(", ")
console.log("public static readonly availableTypes = [ " + types + " ] as const")
return
}
}
new BuildMeta().run()

17
test.ts
View file

@ -5,11 +5,11 @@ import LayoutConfig from "./Models/ThemeConfig/LayoutConfig"
import * as benches from "./assets/generated/themes/cyclofix.json"
import { UIEventSource } from "./Logic/UIEventSource"
import ThemeViewState from "./Models/ThemeViewState"
import { SpecialVisualization, SpecialVisualizationState } from "./UI/SpecialVisualization"
import { Feature } from "geojson"
import Combine from "./UI/Base/Combine"
import SpecialVisualizations from "./UI/SpecialVisualizations"
import BaseUIElement from "./UI/BaseUIElement"
import ValidatedInput from "./UI/InputElement/ValidatedInput.svelte"
import { VariableUiElement } from "./UI/Base/VariableUIElement"
import { Translation } from "./UI/i18n/Translation"
async function main() {
new FixedUiElement("").AttachTo("extradiv")
@ -18,7 +18,7 @@ async function main() {
main.AttachTo("maindiv")
}
async function test() {
async function testspecial() {
const layout = new LayoutConfig(<any>benches, true) // qp.data === "" ? : new AllKnownLayoutsLazy().get(qp.data)
const state = new ThemeViewState(layout)
@ -27,5 +27,12 @@ async function test() {
)
new Combine(all).AttachTo("maindiv")
}
// test().then((_) => {}) /*/
async function test() {
const value = new UIEventSource("Hello world!")
const feedback = new UIEventSource<Translation>(undefined)
new SvelteUIElement(ValidatedInput, { type: "direction", value, feedback }).AttachTo("maindiv")
new VariableUiElement(feedback).AttachTo("extradiv")
}
/*
test().then((_) => {}) /*/
main().then((_) => {}) //*/

46
test/UI/Popup/TagRenderingQuestion.spec.ts
View file

@ -1,46 +0,0 @@
import { TagRenderingConfigJson } from "../../../Models/ThemeConfig/Json/TagRenderingConfigJson"
import TagRenderingConfig from "../../../Models/ThemeConfig/TagRenderingConfig"
import TagRenderingQuestion from "../../../UI/Popup/TagRenderingQuestion"
import { UIEventSource } from "../../../Logic/UIEventSource"
import { describe, expect, it } from "vitest"
describe("TagRenderingQuestion", () => {
it("should have a freeform text field with the user defined placeholder", () => {
const configJson = <TagRenderingConfigJson>{
id: "test-tag-rendering",
question: "Question?",
render: "Rendering {capacity}",
freeform: {
key: "capacity",
type: "pnat",
placeholder: "Some user defined placeholder",
},
}
const config = new TagRenderingConfig(configJson, "test")
const ui = new TagRenderingQuestion(new UIEventSource<any>({}), config)
const html = ui.ConstructElement()
expect(html.getElementsByTagName("input")[0]["placeholder"]).toBe(
"Some user defined placeholder"
)
}) //*/
/*
it("should have a freeform text field with a type explanation", () => {
Locale.language.setData("en")
const configJson = <TagRenderingConfigJson>{
id: "test-tag-rendering",
question: "Question?",
render: "Rendering {capacity}",
freeform: {
key: "capacity",
type: "pnat",
},
}
const config = new TagRenderingConfig(configJson, "test")
const ui = new TagRenderingQuestion(new UIEventSource<any>({}), config)
const html = ui.ConstructElement()
expect(html.getElementsByTagName("input")[0]["placeholder"]).toBe(
"capacity (a positive, whole number)"
)
})//*/
})