Studio: UX improvements, fix crash
This commit is contained in:
parent
2b13fa61e2
commit
30fe39ef0d
3 changed files with 49 additions and 35 deletions
|
@ -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
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in a new issue