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