Studio: first working version for basic layer properties

UI/Studio/TagExpression.svelte

@@ -5,10 +5,8 @@
 import {UIEventSource} from "../../Logic/UIEventSource";
 import type {TagConfigJson} from "../../Models/ThemeConfig/Json/TagConfigJson";
 import BasicTagInput from "./TagInput/BasicTagInput.svelte";
-import {onDestroy} from "svelte";
-import TagInfoStats from "./TagInfoStats.svelte";
 import TagInput from "./TagInput/TagInput.svelte";
-import exp from "constants";
+import {TrashIcon} from "@babeard/svelte-heroicons/mini";
 
 export let tag: UIEventSource<TagConfigJson>
 let mode: "and" | "or" = "and"
@@ -39,20 +37,44 @@ function update(_) {
         }
         tags.push(t)
     }
-    config[mode] = tags
-    tag.setData(config)
+    if (tags.length === 1) {
+        tag.setData(tags[0])
+    } else {
+        config[mode] = tags
+        tag.setData(config)
+    }
 }
 
 
-function addBasicTag() {
-    const src = new UIEventSource(undefined)
+function addBasicTag(value?: string) {
+    const src = new UIEventSource(value)
     basicTags.data.push(src);
     basicTags.ping()
     src.addCallbackAndRunD(_ => update(_))
 }
 
-function addExpression() {
-    const src = new UIEventSource(undefined)
+function removeTag(basicTag: UIEventSource<any>) {
+    const index = basicTags.data.indexOf(basicTag)
+    console.log("Removing", index, basicTag)
+    if (index >= 0) {
+        basicTag.setData(undefined)
+        basicTags.data.splice(index, 1)
+        basicTags.ping()
+    }
+}
+
+function removeExpression(expr: UIEventSource<any>) {
+    const index = expressions.data.indexOf(expr)
+    if (index >= 0) {
+        expr.setData(undefined)
+        expressions.data.splice(index, 1)
+        expressions.ping()
+    }
+}
+
+
+function addExpression(expr?: TagConfigJson) {
+    const src = new UIEventSource(expr)
     expressions.data.push(src);
     expressions.ping()
     src.addCallbackAndRunD(_ => update(_))
@@ -60,9 +82,40 @@ function addExpression() {
 
 
 $: update(mode)
+expressions.addCallback(_ => update(_))
+basicTags.addCallback(_ => update(_))
 
+let initialTag: TagConfigJson = tag.data
+
+function initWith(initialTag: TagConfigJson) {
+    if (typeof initialTag === "string") {
+        addBasicTag(initialTag)
+        return
+    }
+    mode = <"or" | "and">Object.keys(initialTag)[0]
+    const subExprs = (<TagConfigJson[]>initialTag[mode])
+    if (subExprs.length == 0) {
+        return
+    }
+    if (subExprs.length == 1) {
+        initWith(subExprs[0])
+        return;
+    }
+    for (const subExpr of subExprs) {
+        if (typeof subExpr === "string") {
+            addBasicTag(subExpr)
+        } else {
+            addExpression(subExpr)
+        }
+    }
+}
+
+if (!initialTag) {
+    addBasicTag()
+} else {
+    initWith(initialTag)
+}
 
-addBasicTag()
 
 </script>
 
@@ -76,19 +129,30 @@ addBasicTag()
         {/if}
     </select>
     <div class="border-l-4 border-black flex flex-col ml-1 pl-1">
-        {#each $basicTags as basicTag}
-            <BasicTagInput {overpassSupportNeeded} {uploadableOnly} tag={basicTag}/>
+        {#each $basicTags as basicTag (basicTag)}
+            <div class="flex">
+                <BasicTagInput {overpassSupportNeeded} {uploadableOnly} tag={basicTag}/>
+                <button class="border border-black rounded-full w-fit h-fit p-0" on:click={() => removeTag(basicTag)}>
+                    <TrashIcon class="w-4 h-4 p-1"/>
+                </button>
+            </div>
         {/each}
         {#each $expressions as expression}
-            <TagInput {overpassSupportNeeded} {uploadableOnly} tag={expression}/>
+            <TagInput {overpassSupportNeeded} {uploadableOnly} tag={expression}>
+                <button slot="delete" on:click={() => removeExpression(expression)}>
+                    <TrashIcon class="w-4 h-4 p-1"/>
+                    Delete subexpression
+                </button>
+            </TagInput>
         {/each}
         <div class="flex">
-            <button class="primary w-fit" on:click={addBasicTag}>
+            <button class="w-fit" on:click={() => addBasicTag()}>
                 Add a tag
             </button>
-            <button class="w-fit" on:click={addExpression}>
+            <button class="w-fit" on:click={() => addExpression()}>
                 Add an expression
             </button>
+            <slot name="delete"/>
         </div>
     </div>