Add loading from JSON in the custom generator, small clarifications

UI/CustomGenerator/GenerateEmpty.ts

@@ -9,7 +9,7 @@ export class GenerateEmpty {
             name: "Layer",
             minzoom: 12,
             overpassTags: {and: [""]},
-            title: "Layer",
+            title: {},
             description: {},
             tagRenderings: [],
             icon: {
@@ -18,7 +18,7 @@ export class GenerateEmpty {
             width: {
                 render: "8"
             },
-            iconSize:{
+            iconSize: {
                 render: "40,40,center"
             },
             color:{

UI/CustomGenerator/SavePanel.ts

@@ -5,10 +5,14 @@ import {LayoutConfigJson} from "../../Customizations/JSON/LayoutConfigJson";
 import Combine from "../Base/Combine";
 import {OsmConnection} from "../../Logic/Osm/OsmConnection";
 import {FixedUiElement} from "../Base/FixedUiElement";
+import {TextField} from "../Input/TextField";
+import {SubtleButton} from "../Base/SubtleButton";
+import {FromJSON} from "../../Customizations/JSON/FromJSON";
 
 export default class SavePanel extends UIElement {
     private json: UIElement;
     private lastSaveEl: UIElement;
+    private loadFromJson: UIElement;
 
     constructor(
         connection: OsmConnection,
@@ -16,7 +20,6 @@ export default class SavePanel extends UIElement {
         chronic: UIEventSource<Date>) {
         super();
 
-     
 
         this.lastSaveEl = new VariableUiElement(chronic
             .map(date => {
@@ -26,12 +29,25 @@ export default class SavePanel extends UIElement {
                 return "Your theme was last saved at " + date.toISOString()
             })).onClick(() => chronic.setData(new Date()));
 
-        this.json = new VariableUiElement(config.map(config => {
-            return JSON.stringify(config, null, 2)
-                .replace(/\n/g, "<br/>")
-                .replace(/ /g, "&nbsp;");
-        }))
-            .SetClass("literal-code");
+        const jsonStr = config.map(config =>
+            JSON.stringify(config, null, 2));
+
+
+       const jsonTextField = new TextField({
+            placeholder: "JSON Config",
+            fromString: str => str,
+            toString: str => str,
+            value: jsonStr,
+            startValidated: false,
+            textArea: true,
+            textAreaRows: 20
+        });
+        this.json = jsonTextField;
+        this.loadFromJson = new SubtleButton("./assets/reload.svg", "<b>Load the JSON file below</b>")
+            .onClick(() => {
+                const json = jsonTextField.GetValue().data;
+                config.setData(JSON.parse(json));
+            });
     }
 
     InnerRender(): string {
@@ -41,6 +57,8 @@ export default class SavePanel extends UIElement {
             "<h3>JSON configuration</h3>",
             "The url hash is actually no more then a BASE64-encoding of the below JSON. This json contains the full configuration of the theme.<br/>" +
             "This configuration is mainly useful for debugging",
+            "<br/>",
+            this.loadFromJson,
             this.json
         ]).SetClass("scrollable")
             .Render();

UI/Input/TextField.ts

@@ -56,7 +56,7 @@ export class ValidatedTextField {
 }
 
 export class TextField<T> extends InputElement<T> {
-
+   
     public static StringInput(textArea: boolean = false): TextField<string> {
         return new TextField<string>({
             toString: str => str,
@@ -111,6 +111,7 @@ export class TextField<T> extends InputElement<T> {
     private readonly startValidated: boolean;
     public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
     private readonly _isArea: boolean;
+    private _textAreaRows: number;
 
     constructor(options: {
         /**
@@ -131,7 +132,8 @@ export class TextField<T> extends InputElement<T> {
         fromString: (string: string) => T,
         value?: UIEventSource<T>,
         startValidated?: boolean,
-        textArea?: boolean
+        textArea?: boolean,
+        textAreaRows?: number
     }) {
         super(undefined);
         const self = this;
@@ -144,7 +146,7 @@ export class TextField<T> extends InputElement<T> {
         this._fromString = options.fromString ?? ((str) => (str))
         this.value.addCallback((str) => this.mappedValue.setData(options.fromString(str)));
         this.mappedValue.addCallback((t) => this.value.setData(options.toString(t)));
-
+        this._textAreaRows = options.textAreaRows;
 
         this._placeholder = Translations.W(options.placeholder ?? "");
         this.ListenTo(this._placeholder._source);
@@ -171,7 +173,7 @@ export class TextField<T> extends InputElement<T> {
     InnerRender(): string {
         
         if(this._isArea){
-            return `<textarea id="text-${this.id}" class="form-text-field" rows="4" cols="50" style="max-width: 100%;box-sizing: border-box"></textarea>`
+            return `<textarea id="text-${this.id}" class="form-text-field" rows="${this._textAreaRows}" cols="50" style="max-width: 100%; width: 100%; box-sizing: border-box"></textarea>`
         }
         
         return `<form onSubmit='return false' class='form-text-field'>` +