Studio: more fixes

src/UI/Studio/EditLayer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 
-  import { LayerStateSender } from "./EditLayerState";
+  import EditLayerState, { LayerStateSender } from "./EditLayerState";
   import layerSchemaRaw from "../../assets/schemas/layerconfigmeta.json";
   import Region from "./Region.svelte";
   import TabbedGroup from "../Base/TabbedGroup.svelte";
@@ -8,11 +8,13 @@
   import type { ConfigMeta } from "./configMeta";
   import { Utils } from "../../Utils";
   import type { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson";
+  import type { ConversionMessage } from "../../Models/ThemeConfig/Conversion/Conversion";
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
 
-  export let state;
+  export let state: EditLayerState;
   const messages = state.messages;
+  const hasErrors = messages.map((m: ConversionMessage[]) => m.filter(m => m.level === "error").length);
   export let initialLayerConfig: Partial<LayerConfigJson> = {};
   state.configuration.setData(initialLayerConfig);
   const configuration = state.configuration;
@@ -37,9 +39,18 @@
   }
   const leftoverRegions: string[] = allNames.filter(r => regionBlacklist.indexOf(r) < 0 && baselayerRegions.indexOf(r) < 0);
   const title: Store<string> = state.getStoreFor(["id"]);
+  const wl = window.location
+  const baseUrl = wl.protocol+"//"+wl.host+"/theme.html?userlayout="
 </script>
 
-<h3>Editing layer {$title}</h3>
+<div class="w-full flex justify-between">
+  <h3>Editing layer {$title}</h3>
+  {#if $hasErrors > 0}
+    <div class="alert">{$hasErrors} errors detected</div>
+  {:else}
+    <a class="primary button" href={baseUrl+state.server.layerUrl(title.data)} target="_blank" rel="noopener">Try it out</a>
+  {/if}
+</div>
 <div class="m4">
   <TabbedGroup tab={new UIEventSource(2)}>
     <div slot="title0">General properties</div>

src/UI/Studio/EditLayerState.ts

@@ -177,7 +177,12 @@ export default class EditLayerState {
             }
             entry = entry[breadcrumb]
         }
-        if (v !== undefined && v !== null && v !== "") {
+        if (
+            v !== undefined &&
+            v !== null &&
+            v !== "" &&
+            !(typeof v === "object" && Object.keys({}).length === 0)
+        ) {
             entry[path.at(-1)] = v
         } else if (entry) {
             delete entry[path.at(-1)]

src/UI/Studio/SchemaBasedField.svelte

@@ -16,7 +16,7 @@
     export let state: EditLayerState
     export let path: (string | number)[] = []
     export let schema: ConfigMeta
-    let value = new UIEventSource<string>(undefined)
+    let value = new UIEventSource<string | any>(undefined)
     
     const isTranslation = schema.hints.typehint === "translation" || schema.hints.typehint === "rendered" || ConfigMetaUtils.isTranslation(schema)
     let type = schema.hints.typehint ?? "string"
@@ -122,7 +122,7 @@
                 }
                 return Number(v)
             }
-            if (isTranslation) {
+            if (isTranslation && typeof v === "string") {
                 if (v === "") {
                     return {}
                 }

src/UI/Studio/StudioServer.ts

@@ -22,9 +22,7 @@ export default class StudioServer {
 
     async fetchLayer(layerId: string): Promise<LayerConfigJson> {
         try {
-            return await Utils.downloadJson(
-                this.url + "/layers/" + layerId + "/" + layerId + ".json"
-            )
+            return await Utils.downloadJson(this.layerUrl(layerId))
         } catch (e) {
             return undefined
         }
@@ -35,7 +33,7 @@ export default class StudioServer {
         if (id === undefined || id === "") {
             return
         }
-        await fetch(`${this.url}/layers/${id}/${id}.json`, {
+        await fetch(this.layerUrl(id), {
             method: "POST",
             headers: {
                 "Content-Type": "application/json;charset=utf-8",
@@ -43,4 +41,8 @@ export default class StudioServer {
             body: JSON.stringify(config, null, "  "),
         })
     }
+
+    public layerUrl(id: string) {
+        return `${this.url}/layers/${id}/${id}.json`
+    }
 }