forked from MapComplete/MapComplete
		
	Studio: UX improvements, fix crash
This commit is contained in:
		
							parent
							
								
									222656d050
								
							
						
					
					
						commit
						3ec957e1e5
					
				
					 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…
	
	Add table
		Add a link
		
	
		Reference in a new issue