Studio: UX improvements, fix crash

This commit is contained in:
Pieter Vander Vennet 2024-08-10 12:50:55 +02:00
parent 2b13fa61e2
commit 30fe39ef0d
3 changed files with 49 additions and 35 deletions

View file

@ -4,7 +4,7 @@
* The questions can either be shown all at once or one at a time (in which case they can be skipped) * The questions can either be shown all at once or one at a time (in which case they can be skipped)
*/ */
import TagRenderingConfig from "../../../Models/ThemeConfig/TagRenderingConfig" import TagRenderingConfig from "../../../Models/ThemeConfig/TagRenderingConfig"
import { UIEventSource } from "../../../Logic/UIEventSource" import { ImmutableStore, Store, UIEventSource } from "../../../Logic/UIEventSource"
import type { Feature } from "geojson" import type { Feature } from "geojson"
import type { SpecialVisualizationState } from "../../SpecialVisualization" import type { SpecialVisualizationState } from "../../SpecialVisualization"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig" import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
@ -31,7 +31,7 @@
*/ */
export let notForLabels: string[] | undefined = undefined export let notForLabels: string[] | undefined = undefined
const _notForLabels = new Set(notForLabels) const _notForLabels = new Set(notForLabels)
let showAllQuestionsAtOnce = state.userRelatedState.showAllQuestionsAtOnce let showAllQuestionsAtOnce : Store<boolean>= state.userRelatedState?.showAllQuestionsAtOnce ?? new ImmutableStore(false)
function allowed(labels: string[]) { function allowed(labels: string[]) {
if (onlyForLabels?.length > 0 && !labels.some((l) => _onlyForLabels.has(l))) { if (onlyForLabels?.length > 0 && !labels.some((l) => _onlyForLabels.has(l))) {
@ -42,7 +42,7 @@
} }
return true return true
} }
const baseQuestions = (layer.tagRenderings ?? [])?.filter( const baseQuestions = (layer?.tagRenderings ?? [])?.filter(
(tr) => allowed(tr.labels) && tr.question !== undefined (tr) => allowed(tr.labels) && tr.question !== undefined
) )

View file

@ -19,6 +19,7 @@
import RawEditor from "./RawEditor.svelte" import RawEditor from "./RawEditor.svelte"
import DeleteButton from "./DeleteButton.svelte" import DeleteButton from "./DeleteButton.svelte"
import StudioHashSetter from "./StudioHashSetter" import StudioHashSetter from "./StudioHashSetter"
import TitledPanel from "../Base/TitledPanel.svelte"
const layerSchema: ConfigMeta[] = <any>layerSchemaRaw const layerSchema: ConfigMeta[] = <any>layerSchemaRaw
@ -203,9 +204,11 @@
</div> </div>
{#if $highlightedItem !== undefined} {#if $highlightedItem !== undefined}
<FloatOver on:close={() => highlightedItem.setData(undefined)}> <FloatOver on:close={() => highlightedItem.setData(undefined)}>
<div> <TitledPanel>
<h3 slot="title">Select a builtin question below</h3>
<TagRenderingInput path={$highlightedItem.path} {state} /> <TagRenderingInput path={$highlightedItem.path} {state} />
</div> </TitledPanel>
</FloatOver> </FloatOver>
{/if} {/if}
{/if} {/if}

View file

@ -29,7 +29,7 @@
const store = state.getStoreFor(path) const store = state.getStoreFor(path)
let value = store.data let value = store.data
let hasSeenIntro = UIEventSource.asBoolean( let hasSeenIntro = UIEventSource.asBoolean(
LocalStorageSource.Get("studio-seen-tagrendering-tutorial", "false") LocalStorageSource.Get("studio-seen-tagrendering-tutorial", "false"),
) )
onMount(() => { onMount(() => {
if (!hasSeenIntro.data) { if (!hasSeenIntro.data) {
@ -42,16 +42,26 @@
* Should only be enabled for 'tagrenderings' in the theme, if the source is OSM * Should only be enabled for 'tagrenderings' in the theme, if the source is OSM
*/ */
let allowQuestions: Store<boolean> = state.configuration.mapD( let allowQuestions: Store<boolean> = state.configuration.mapD(
(config) => path.at(0) === "tagRenderings" && config.source?.["geoJson"] === undefined (config) => path.at(0) === "tagRenderings" && config.source?.["geoJson"] === undefined,
) )
let mappingsBuiltin: MappingConfigJson[] = [] let mappingsBuiltin: MappingConfigJson[] = []
let perLabel: Record<string, MappingConfigJson> = {} let perLabel: Record<string, MappingConfigJson> = {}
{ // Build the list of options that one can choose for builtin questions
const forbidden = new Set( ["ignore_docs","all_tags"])
for (const tr of questions.tagRenderings) { for (const tr of questions.tagRenderings) {
if(forbidden.has(tr.id)){
continue
}
let description = tr["description"] ?? tr["question"] ?? "No description available" let description = tr["description"] ?? tr["question"] ?? "No description available"
description = description["en"] ?? description description = description["en"] ?? description
if (tr["labels"]) { if (tr["labels"]) {
const labels: string[] = tr["labels"] const labels: string[] = tr["labels"]
if(labels.some(l => forbidden.has(l))){
continue
}
for (const label of labels) { for (const label of labels) {
let labelMapping: MappingConfigJson = perLabel[label] let labelMapping: MappingConfigJson = perLabel[label]
@ -76,6 +86,7 @@
}, },
}) })
} }
}
const configBuiltin = new TagRenderingConfig(<QuestionableTagRenderingConfigJson>{ const configBuiltin = new TagRenderingConfig(<QuestionableTagRenderingConfigJson>{
question: "Which builtin element should be shown?", question: "Which builtin element should be shown?",
@ -118,7 +129,7 @@
const freeformSchemaAll = <ConfigMeta[]>( const freeformSchemaAll = <ConfigMeta[]>(
questionableTagRenderingSchemaRaw.filter( questionableTagRenderingSchemaRaw.filter(
(schema) => schema.path.length == 2 && schema.path[0] === "freeform" && $allowQuestions (schema) => schema.path.length == 2 && schema.path[0] === "freeform" && $allowQuestions,
) )
) )
let freeformSchema = $expertMode let freeformSchema = $expertMode
@ -127,7 +138,7 @@
const missing: string[] = questionableTagRenderingSchemaRaw const missing: string[] = questionableTagRenderingSchemaRaw
.filter( .filter(
(schema) => (schema) =>
schema.path.length >= 1 && !items.has(schema.path[0]) && !ignored.has(schema.path[0]) schema.path.length >= 1 && !items.has(schema.path[0]) && !ignored.has(schema.path[0]),
) )
.map((schema) => schema.path.join(".")) .map((schema) => schema.path.join("."))
console.log({ state }) console.log({ state })
@ -135,7 +146,7 @@
{#if typeof $store === "string"} {#if typeof $store === "string"}
<div class="low-interaction flex"> <div class="low-interaction flex">
<TagRenderingEditable config={configBuiltin} selectedElement={undefined} {state} {tags} /> <TagRenderingEditable config={configBuiltin} selectedElement={undefined} {state} {tags} editMode={true} clss="w-full" />
<slot name="upper-right" /> <slot name="upper-right" />
</div> </div>
{:else} {:else}