Studio: more work on studio

src/UI/Base/NextButton.svelte

@@ -20,6 +20,6 @@
   <slot name="image" slot="image" />
   <div class="flex w-full items-center justify-between" slot="message">
     <slot />
-    <ChevronRightIcon class="h-12 w-12 shrink-0" />
+    <ChevronRightIcon class={clss?.indexOf("small") >= 0?  "h-4 w-4 shrink-0": "h-12 w-12 shrink-0" }/>
   </div>
 </SubtleButton>

src/UI/InputElement/ValidatedInput.svelte

@@ -79,7 +79,7 @@
 
     onDestroy(_value.addCallbackAndRun((_) => setValues()))
     onDestroy(value.addCallbackAndRunD(fromUpstream => {
-        if(_value.data !== fromUpstream){
+        if(_value.data !== fromUpstream && fromUpstream !== ""){
             _value.setData(fromUpstream)
         }
     }))

src/UI/InputElement/Validators.ts

@@ -25,6 +25,7 @@ import TranslationValidator from "./Validators/TranslationValidator"
 import FediverseValidator from "./Validators/FediverseValidator"
 import IconValidator from "./Validators/IconValidator"
 import TagValidator from "./Validators/TagValidator"
+import IdValidator from "./Validators/IdValidator"
 
 export type ValidatorType = (typeof Validators.availableTypes)[number]
 
@@ -54,6 +55,7 @@ export default class Validators {
         "fediverse",
         "tag",
         "fediverse",
+        "id",
     ] as const
 
     public static readonly AllValidators: ReadonlyArray<Validator> = [
@@ -80,6 +82,7 @@ export default class Validators {
         new TranslationValidator(),
         new IconValidator(),
         new FediverseValidator(),
+        new IdValidator(),
     ]
 
     private static _byType = Validators._byTypeConstructor()

src/UI/InputElement/Validators/IconValidator.ts

@@ -11,7 +11,12 @@ export default class IconValidator extends Validator {
         super("icon", "Makes sure that a valid .svg-path is added")
     }
 
+    reformat(s: string, _?: () => string): string {
+        return s.trim()
+    }
+
     getFeedback(s: string, getCountry, sloppy?: boolean): Translation | undefined {
+        s = this.reformat(s)
         if (!s.startsWith("http")) {
             if (!IconValidator.allLicenses.has(s)) {
                 const close = sloppy

src/UI/InputElement/Validators/IdValidator.ts

@@ -0,0 +1,29 @@
+import { Translation } from "../../i18n/Translation"
+import { Validator } from "../Validator"
+import Translations from "../../i18n/Translations"
+
+export default class IdValidator extends Validator {
+    constructor() {
+        super(
+            "id",
+            "Checks for valid identifiers for layers, will automatically replace spaces and uppercase"
+        )
+    }
+    isValid(key: string, getCountry?: () => string): boolean {
+        return this.getFeedback(key, getCountry) === undefined
+    }
+
+    reformat(s: string, _?: () => string): string {
+        return s.replaceAll(" ", "_").toLowerCase()
+    }
+
+    getFeedback(s: string, _?: () => string): Translation | undefined {
+        if (s.length < 3) {
+            return Translations.t.validation.id.shouldBeLonger
+        }
+        if (!s.match(/^[a-zA-Z0-9_ ]+$/)) {
+            return Translations.t.validation.id.invalidCharacter
+        }
+        return undefined
+    }
+}

src/UI/Map/Marker.svelte

@@ -7,14 +7,15 @@
   /**
    * Renders a 'marker', which consists of multiple 'icons'
    */
-  export let config : PointRenderingConfig
+  export let config: PointRenderingConfig;
   let icons: IconConfig[] = config.marker;
   export let tags: Store<Record<string, string>>;
-  
-</script>
 
-<div class="relative w-full h-full">
-  {#each icons as icon}
-    <Icon {icon} {tags} />
-  {/each}
-</div>
+</script>
+{#if config !== undefined}
+  <div class="relative w-full h-full">
+    {#each icons as icon}
+      <Icon {icon} {tags} />
+    {/each}
+  </div>
+{/if}

src/UI/Studio/EditLayer.svelte

@@ -7,10 +7,12 @@
   import { Store, UIEventSource } from "../../Logic/UIEventSource";
   import type { ConfigMeta } from "./configMeta";
   import { Utils } from "../../Utils";
+  import type { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson";
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
   let state = new EditLayerState(layerSchema);
-  state.configuration.setData({});
+  export let initialLayerConfig: Partial<LayerConfigJson> = {}
+  state.configuration.setData(initialLayerConfig);
   const configuration = state.configuration;
   new LayerStateSender("http://localhost:1235", state);
   /**

src/UI/Studio/EditLayerState.ts

@@ -129,7 +129,7 @@ export default class EditLayerState {
             }
             entry = entry[breadcrumb]
         }
-        if (v) {
+        if (v !== undefined && v !== null && v !== "") {
             entry[path.at(-1)] = v
         } else if (entry) {
             delete entry[path.at(-1)]

src/UI/Studio/SchemaBasedField.svelte

@@ -72,11 +72,11 @@
         configJson.mappings.push(
             {
                 if: "value=true",
-                then: "Yes "+(schema.hints?.iftrue??"")
+                then: "Yes: "+(schema.hints?.iftrue??"")
             },
             {
                 if: "value=false",
-                then: "No "+(schema.hints?.iffalse??"")
+                then: "No: "+(schema.hints?.iffalse??"")
             }
         )
     }
@@ -106,6 +106,15 @@
             if (schema.type === "boolan") {
                 return v === "true" || v === "yes" || v === "1"
             }
+            if(mightBeBoolean(schema.type)){
+              if(v === "true" || v === "yes" || v === "1"){
+                return true
+              }
+              if(v === "false" || v === "no" || v === "0"){
+                console.log("Setting false...")
+                return false
+              }
+            }
             if (schema.type === "number") {
                 return Number(v)
             }

src/UI/Studio/SchemaBasedInput.svelte

@@ -4,9 +4,8 @@
   import EditLayerState from "./EditLayerState";
   import SchemaBasedArray from "./SchemaBasedArray.svelte";
   import SchemaBasedMultiType from "./SchemaBasedMultiType.svelte";
-  import SchemaBasedTranslationInput from "./SchemaBasedTranslationInput.svelte";
-  import { ConfigMetaUtils } from "./configMeta.ts"
   import ArrayMultiAnswer from "./ArrayMultiAnswer.svelte";
+
   export let schema: ConfigMeta;
   export let state: EditLayerState;
   export let path: (string | number)[] = [];

src/UI/Studio/SchemaBasedMultiType.svelte

@@ -13,6 +13,7 @@
   import type { JsonSchemaType } from "./jsonSchema";
   // @ts-ignore
   import nmd from "nano-markdown";
+  import { writable } from "svelte/store";
 
   /**
    * If 'types' is defined: allow the user to pick one of the types to input.
@@ -84,7 +85,7 @@
     );
   }
   const config = new TagRenderingConfig(configJson, "config based on " + schema.path.join("."));
-  let chosenOption: number = defaultOption;
+  let chosenOption: number = writable(defaultOption);
 
 
   const existingValue = state.getCurrentValueFor(path);
@@ -126,8 +127,11 @@
     }
     possibleTypes.sort((a, b) => b.optionalMatches - a.optionalMatches);
     possibleTypes.sort((a, b) => b.matchingPropertiesCount - a.matchingPropertiesCount);
+    console.log("Possible types are", possibleTypes)
     if (possibleTypes.length > 0) {
-      tags.setData({ chosen_type_index: "" + possibleTypes[0].index });
+      chosenOption = possibleTypes[0].index
+      tags.setData({ chosen_type_index: "" + chosenOption});
+      
     }
   } else if (defaultOption !== undefined) {
     tags.setData({ chosen_type_index: "" + defaultOption });
@@ -150,13 +154,14 @@
   let subSchemas: ConfigMeta[] = [];
 
   let subpath = path;
-  console.log("Initial chosen option is", chosenOption);
+  console.log("Initial chosen option for",path.join("."),"is", chosenOption);
   onDestroy(tags.addCallbackAndRun(tags => {
     if (tags["value"] !== "") {
       chosenOption = undefined;
       return;
     }
     const oldOption = chosenOption;
+    console.log("Updating chosenOption based on", tags, oldOption)
     chosenOption = tags["chosen_type_index"] ? Number(tags["chosen_type_index"]) : defaultOption;
     const type = schema.type[chosenOption];
     if (chosenOption !== oldOption) {
@@ -209,4 +214,5 @@
                         path={[...subpath, (subschema?.path?.at(-1) ?? "???")]}></SchemaBasedInput>
     {/each}
   {/if}
+  {chosenOption}
 </div>

src/UI/StudioGUI.svelte

@@ -1,7 +1,87 @@
 <script lang="ts">
-    
-    
-import EditLayer from "./Studio/EditLayer.svelte";
-</script>
 
-<EditLayer/>
+
+  import NextButton from "./Base/NextButton.svelte";
+  import { Utils } from "../Utils";
+  import { UIEventSource } from "../Logic/UIEventSource";
+  import Constants from "../Models/Constants";
+  import ValidatedInput from "./InputElement/ValidatedInput.svelte";
+  import EditLayerState from "./Studio/EditLayerState";
+  import EditLayer from "./Studio/EditLayer.svelte";
+  import Loading from "../assets/svg/Loading.svelte";
+
+
+  export let studioUrl = "http://127.0.0.1:1235";
+  let overview = UIEventSource.FromPromise<{ allFiles: string[] }>(Utils.downloadJson(studioUrl + "/overview"));
+  let layers = overview.map(overview => {
+    if (!overview) {
+      return [];
+    }
+    return overview.allFiles.filter(f => f.startsWith("layers/")
+    ).map(l => l.substring(l.lastIndexOf("/") + 1, l.length - ".json".length))
+      .filter(layerId => Constants.priviliged_layers.indexOf(layerId) < 0);
+  });
+  let state: undefined | "edit_layer" | "new_layer" | "edit_theme" | "new_theme" | "editing_layer" | "loading" = undefined;
+
+  let initialLayerConfig: undefined;
+  let newLayerId = new UIEventSource<string>("");
+  let layerIdFeedback = new UIEventSource<string>(undefined);
+  newLayerId.addCallbackD(layerId => {
+    if (layerId === "") {
+      return;
+    }
+    if (layers.data.indexOf(layerId) >= 0) {
+      layerIdFeedback.setData("This id is already used");
+    }
+  }, [layers]);
+
+
+  let editLayerState = new EditLayerState();
+
+</script>
+{#if state === undefined}
+  <h1>MapComplete Studio</h1>
+  <div class="w-full flex flex-col">
+
+    <NextButton on:click={() => state = "edit_layer"}>
+      Edit an existing layer
+    </NextButton>
+    <NextButton on:click={() => state = "new_layer"}>
+      Create a new layer
+    </NextButton>
+    <NextButton on:click={() => state = "edit_theme"}>
+      Edit a theme
+    </NextButton>
+    <NextButton on:click={() => state = "new_theme"}>
+      Create a new theme
+    </NextButton>
+  </div>
+{:else if state === "edit_layer"}
+  <div class="flex flex-wrap">
+    {#each $layers as layerId}
+      <NextButton clss="small" on:click={async () => {
+        console.log("Editing layer",layerId)
+        state = "loading"
+        initialLayerConfig = await Utils.downloadJson(studioUrl+"/layers/"+layerId+"/"+layerId+".json")
+        state = "editing_layer"
+       }}>
+        {layerId}
+      </NextButton>
+    {/each}
+  </div>
+{:else if state === "new_layer"}
+  <ValidatedInput type="id" value={newLayerId} feedback={layerIdFeedback} />
+  {#if $layerIdFeedback !== undefined}
+    <div class="alert">
+      {$layerIdFeedback}
+    </div>
+  {:else }
+    <NextButton on:click={() => {initialLayerConfig = ({id: newLayerId.data}); state = "editing_layer"}}>
+      Create this layer
+    </NextButton>
+  {/if}
+{:else if state === "loading"}
+  <Loading />
+{:else if state === "editing_layer"}
+  <EditLayer {initialLayerConfig} />
+{/if}