Studio: Add deeplinks, fix #1926

src/UI/Studio/EditLayer.svelte

@@ -20,12 +20,16 @@
   import NextButton from "../Base/NextButton.svelte"
   import BackButton from "../Base/BackButton.svelte"
   import DeleteButton from "./DeleteButton.svelte"
+  import StudioHashSetter from "./StudioHashSetter"
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw
 
   export let state: EditLayerState
 
   export let backToStudio: () => void
+
+  new StudioHashSetter("layer", state.selectedTab, state.getStoreFor(["id"]))
+
   let messages = state.messages
   let hasErrors = messages.mapD(
     (m: ConversionMessage[]) => m.filter((m) => m.level === "error").length
@@ -127,7 +131,7 @@
     {/each}
   {:else}
     <div class="m4 h-full overflow-y-auto">
-      <TabbedGroup>
+      <TabbedGroup tab={state.selectedTab}>
         <div slot="title0" class="flex">
           General properties
           <ErrorIndicatorForRegion firstPaths={firstPathsFor("Basic")} {state} />

src/UI/Studio/EditLayerState.ts

@@ -42,6 +42,11 @@ export abstract class EditJsonState<T> {
     public readonly configuration: UIEventSource<Partial<T>> = new UIEventSource<Partial<T>>({})
     public readonly messages: Store<ConversionMessage[]>
 
+    /**
+     * The tab in the UI that is selected, used for deeplinks
+     */
+    public readonly selectedTab: UIEventSource<number> = new UIEventSource<number>(0)
+
     /**
      * The EditLayerUI shows a 'schemaBasedInput' for this path to pop advanced questions out
      */

src/UI/Studio/EditTheme.svelte

@@ -9,12 +9,15 @@
   import RawEditor from "./RawEditor.svelte"
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
   import DeleteButton from "./DeleteButton.svelte"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import StudioHashSetter from "./StudioHashSetter"
 
   export let state: EditThemeState
   export let osmConnection: OsmConnection
   export let backToStudio: () => void
 
   let schema: ConfigMeta[] = state.schema.filter((schema) => schema.path.length > 0)
+  new StudioHashSetter("theme", state.selectedTab, state.getStoreFor(["id"]))
 
   export let selfLayers: { owner: number; id: string }[]
   export let otherLayers: { owner: number; id: string }[]
@@ -94,7 +97,7 @@
 
   <div class="m4 h-full overflow-y-auto">
     <!-- {Object.keys(perRegion).join(";")} -->
-    <TabbedGroup>
+    <TabbedGroup tab={state.selectedTab}>
       <div slot="title0">Basic properties</div>
       <div slot="content0" class="mb-8">
         <Region configs={perRegion["basic"]} path={[]} {state} title="Basic properties" />

src/UI/Studio/StudioHashSetter.ts

@@ -0,0 +1,11 @@
+import { Store, UIEventSource } from "../../Logic/UIEventSource"
+import Hash from "../../Logic/Web/Hash"
+
+export default class StudioHashSetter {
+    constructor(mode: "layer" | "theme", tab: Store<number>, name: Store<string>) {
+        tab.mapD(tab => {
+                Hash.hash.setData(mode + "/" + name.data + "/" + tab)
+            }
+            , [name])
+    }
+}