Fix studio, add options for 'rotation' (see #2072)

src/UI/Studio/CollapsedTagRenderingPreview.svelte

@@ -39,8 +39,8 @@
     return sch
   }
 
-  function fusePath(i: number, subpartPath: string[]): (string | number)[] {
-    const newPath = [...path, i]
+  function fusePath(subpartPath: string[]): (string | number)[] {
+    const newPath = [...path]
     const toAdd = [...subpartPath]
     for (const part of path) {
       if (toAdd[0] === part) {
@@ -146,7 +146,7 @@
       <Tr cls="font-bold" t={Translations.T(value?.question ?? value?.render)} />
     {/if}
   </div>
-  <div class="normal-background p-2">
+  <div class="normal-background p-2 border border-gray-300">
     {#if isTagRenderingBlock}
       <QuestionPreview {state} {path} {schema}>
         <button
@@ -193,12 +193,13 @@
         {/if}
       </QuestionPreview>
     {:else if schema.hints.types}
-      <SchemaBasedMultiType {state} {path} schema={schemaForMultitype()} />
+      <SchemaBasedMultiType {state} path={[...path,i]} schema={schemaForMultitype()} />
     {:else}
       {#each subparts as subpart}
         <SchemaBasedInput
           {state}
-          {path}
+          path={fusePath(subpart.path)}
+          schema={subpart}
         />
       {/each}
     {/if}

src/UI/Studio/EditLayer.svelte

@@ -82,7 +82,7 @@
   let highlightedItem: UIEventSource<HighlightedTagRendering> = state.highlightedItem
 </script>
 
-<div class="flex h-screen flex-col">
+<div class="flex h-screen flex-col link-underline">
   <div class="my-2 flex w-full flex-wrap justify-between">
     <slot />
     {#if $title === undefined}

src/UI/Studio/RawEditor.svelte

@@ -5,6 +5,7 @@
   import type * as Monaco from "monaco-editor/esm/vs/editor/editor.api"
   import layerSchemaJSON from "../../../Docs/Schemas/LayerConfigJson.schema.json"
   import layoutSchemaJSON from "../../../Docs/Schemas/LayoutConfigJson.schema.json"
+  import Loading from "../Base/Loading.svelte"
 
   export let state: EditLayerState | EditThemeState
 
@@ -44,6 +45,7 @@
   })
 
   let useFallback = false
+  let isLoaded = false
   onMount(async () => {
     const monacoEditor = await import("monaco-editor")
     loader.config({
@@ -106,6 +108,7 @@
         save()
       }, 500)
     })
+    isLoaded = true
   })
 
   onDestroy(() => {
@@ -121,5 +124,11 @@
 {#if useFallback}
   <textarea class="w-full" rows="25" bind:value={$rawConfig} />
 {:else}
-  <div bind:this={container} class="h-full w-full" />
+  <div bind:this={container} class="h-full w-full">
+    {#if !isLoaded}
+      <div class="h-full w-full flex items-center align-center">
+        <Loading />
+      </div>
+    {/if}
+  </div>
 {/if}

src/UI/Studio/SchemaBasedInput.svelte

@@ -8,8 +8,7 @@
 
   export let state: EditJsonState<any>
   export let path: (string | number)[] = []
-  console.log("Fetched schema:", path, state.getSchema(<any> path))
-  let schema: ConfigMeta = state.getSchema(<any> path)[0]
+  export let schema: ConfigMeta = state.getSchema(<any> path)[0]
   let expertMode = state.expertMode
 </script>
 {#if schema === undefined}