Studio: first working version for basic layer properties

UI/Studio/RegisteredTagInput.svelte

@@ -3,16 +3,63 @@
     import {UIEventSource} from "../../Logic/UIEventSource";
     import type {TagConfigJson} from "../../Models/ThemeConfig/Json/TagConfigJson";
     import TagInput from "./TagInput/TagInput.svelte";
+    import type {ConfigMeta} from "./configMeta";
+    import {PencilAltIcon} from "@rgossiaux/svelte-heroicons/solid";
+    import { onDestroy } from "svelte";
 
     /**
      * Thin wrapper around 'TagInput' which registers the output with the state
      */
-    export let path : (string | number)[]
-    export let state : EditLayerState
-    
-    let tag: UIEventSource<TagConfigJson> = new UIEventSource<TagConfigJson>(undefined)
-    
-    state.register(path, tag)
+    export let path: (string | number)[]
+    export let state: EditLayerState
+
+    export let schema: ConfigMeta
+
+    const initialValue = state.getCurrentValueFor(path)
+    let tag: UIEventSource<TagConfigJson> = new UIEventSource<TagConfigJson>(initialValue)
+
+    onDestroy(state.register(path, tag))
+
+    let mode: "editing" | "set" = tag.data === undefined ? "editing" : "set"
+
+    function simplify(tag: TagConfigJson): string {
+        if (typeof tag === "string") {
+            return tag
+        }
+        if (tag["and"]) {
+            return "{ and: " + simplify(tag["and"].map(simplify).join(" ; ") + " }")
+        }
+        if (tag["or"]) {
+            return "{ or: " + simplify(tag["or"].map(simplify).join(" ; ") + " }")
+        }
+    }
+
 </script>
 
-<TagInput {tag} />
+{#if mode === "editing"}
+    <div class="interactive border-interactive">
+        <h3>{schema.hints.question ?? "What tags should be applied?"}</h3>
+        {schema.description}
+        <TagInput {tag}/>
+        <div class="flex justify-end">
+
+            <button class="primary w-fit" on:click={() => {mode = "set"}}>
+                Save
+            </button>
+        </div>
+    </div>
+{:else}
+    <div class="low-interaction flex justify-between">
+        <div>
+
+            {schema.path.at(-1)}
+            {simplify($tag)}
+        </div>
+        <button
+                on:click={() => {mode = "editing"}}
+                class="secondary h-8 w-8 shrink-0 self-start rounded-full p-1"
+        >
+            <PencilAltIcon/>
+        </button>
+    </div>
+{/if}