Studio: add more metainformation to layerConfig.json

UI/Studio/EditLayer.svelte

@@ -9,12 +9,11 @@
     import {Utils} from "../../Utils";
 
 
-    let state = new EditLayerState()
-    let layer = state.layer
 
     const layerSchema: ConfigMeta[] = layerSchemaRaw
+    let state = new EditLayerState(layerSchema)
     const regions = Utils.Dedup(layerSchema.map(meta => meta.hints.group))
-        .filter(region => region !== undefined)
+        .filter(region => region === "basic")
 
     const perRegion: Record<string, ConfigMeta[]> = {}
     for (const region of regions) {
@@ -23,7 +22,7 @@
     console.log({perRegion})
 </script>
 
-<h3>Edit layer {$layer?.id}</h3>
+<h3>Edit layer</h3>
 
 <TabbedGroup tab={new UIEventSource(0)}>
     <div slot="title0">General properties</div>

UI/Studio/EditLayerState.ts

@@ -1,8 +1,19 @@
 import { OsmConnection } from "../../Logic/Osm/OsmConnection"
+import { ConfigMeta } from "./configMeta"
 
 export default class EditLayerState {
     public readonly osmConnection: OsmConnection
-    constructor() {
+    public readonly schema: ConfigMeta[]
+
+    constructor(schema: ConfigMeta[]) {
+        this.schema = schema
         this.osmConnection = new OsmConnection({})
     }
+
+    public getSchemaStartingWith(path: string[]) {
+        return this.schema.filter(
+            (sch) =>
+                !path.some((part, i) => !(sch.path.length > path.length && sch.path[i] === part))
+        )
+    }
 }

UI/Studio/Region.svelte

@@ -2,11 +2,11 @@
  * A 'region' is a collection of properties that can be edited which are somewhat related.
  * They will typically be a subset of some properties
  */
-import SchemaBasedField from "./SchemaBasedField.svelte";
 import type {ConfigMeta} from "./configMeta";
 import EditLayerState from "./EditLayerState";
+import SchemaBasedInput from "./SchemaBasedInput.svelte";
 
-export let state : EditLayerState
+export let state: EditLayerState
 export let configs: ConfigMeta[]
 export let title: string
 
@@ -16,6 +16,6 @@ export let title: string
 <div class="pl-2 border border-black flex flex-col gap-y-1">
 
     {#each configs as config}
-        <SchemaBasedField {state} schema={config} title={config.path.at(-1)}></SchemaBasedField>
+        <SchemaBasedInput {state} path={config.path} schema={config}/>
     {/each}
 </div>

UI/Studio/SchemaBasedArray.svelte

@@ -1,6 +1,49 @@
 <script lang="ts">
-    export let title
-    export let description
-    
+    import EditLayerState from "./EditLayerState";
+    import type {ConfigMeta} from "./configMeta";
+    import {UIEventSource} from "../../Logic/UIEventSource";
+    import SchemaBasedInput from "./SchemaBasedInput.svelte";
+
+    export let state: EditLayerState
+    export let schema: ConfigMeta
+    export let path: (string | number)[] = []
+
+    const subparts = state.getSchemaStartingWith(schema.path)
+    console.log("Got array:", {schema, subparts})
+
+    let createdItems = 0
+    /**
+     * Keeps track of the items.
+     * We keep a single string (stringified 'createdItems') to make sure the order is corrects
+     */
+    export let values: UIEventSource<string[]> = new UIEventSource<string[]>([])
+
+    function createItem() {
+        values.data.push("" + createdItems)
+        createdItems++
+        values.ping()
+    }
+
 </script>
 
+
+<div class="pl-2">
+    <h3>{schema.path.at(-1)}</h3>
+
+    <span class="subtle">
+        {schema.description}
+    </span>
+
+    {#if $values.length === 0}
+        No values are defined
+    {:else}
+        {#each $values as value (value)}
+            <div class="border border-black">
+                {#each subparts as subpart}
+                    <SchemaBasedInput {state} path = {[...path, value, ...subpart.path]} schema={subpart}/>
+                {/each}
+            </div>
+        {/each}
+    {/if}
+    <button on:click={createItem}>Add an entry</button>
+</div>

UI/Studio/SchemaBasedField.svelte

@@ -12,20 +12,20 @@
 
 
     export let state: EditLayerState
+    export let path: (string | number)[] = []
     export let schema: ConfigMeta
-    export let title: string | undefined
-
     let value = new UIEventSource<string>(undefined)
     let feedback = new UIEventSource<Translation>(undefined)
 
     const configJson: QuestionableTagRenderingConfigJson = {
-        id: schema.path.join("."),
-        render: schema.path.at(-1) + ": <b>{value}</b>",
+        id: schema.path.join("_"),
+        render: schema.hints.inline ?? schema.path.at(-1) + ": <b>{value}</b>",
         question: schema.hints.question,
         questionHint: schema.description,
         freeform: {
             key: "value",
-            type: schema.hints.typehint ?? "string"
+            type: schema.hints.typehint ?? "string",
+            inline: schema.hints.inline !== undefined
         }
     }
 

UI/Studio/SchemaBasedInput.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type {ConfigMeta} from "./configMeta";
+    import SchemaBasedField from "./SchemaBasedField.svelte";
+    import EditLayerState from "./EditLayerState";
+    import SchemaBasedArray from "./SchemaBasedArray.svelte";
+
+    export let schema: ConfigMeta
+    export let state: EditLayerState
+    export let path : (string | number)[] = []
+
+</script>
+
+<span class="subtle">{path.join(".")}</span>
+{#if schema.type === "array"}
+    <SchemaBasedArray {path} {state} {schema}/>
+{:else}
+    <SchemaBasedField {path} {state} {schema}/>
+{/if}

UI/Studio/configMeta.ts

@@ -8,6 +8,7 @@ export interface ConfigMeta {
         typehint?: string
         question?: string
         ifunset?: string
+        inline?: string
     }
     required: boolean
     description: string