Add loading from JSON in the custom generator, small clarifications

Customizations/JSON/FromJSON.ts

@@ -264,7 +264,12 @@ export class FromJSON {
         const iconSize = FromJSON.TagRenderingWithDefault(json.iconSize, "iconSize", "40,40,center");
         const color = FromJSON.TagRenderingWithDefault(json.color, "layercolor", "#0000ff");
         const width = FromJSON.TagRenderingWithDefault(json.width, "layerwidth", "10");
-
+        if(json.title === "Layer"){
+            json.title = {};
+        }
+        let title=  FromJSON.TagRendering(json.title);
+        
+        
         let tagRenderingDefs = json.tagRenderings ?? [];
         let hasImageElement = false;
         for (const tagRenderingDef of tagRenderingDefs) {
@@ -338,7 +343,7 @@ export class FromJSON {
                 icon: icon.GetContent(renderTags).txt,
                 overpassFilter: overpassTags,
 
-                title: FromJSON.TagRendering(json.title),
+                title: title,
                 minzoom: json.minzoom,
                 presets: presets,
                 elementsToShow: tagRenderings,

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'>` +

assets/themes/cyclestreets/cyclestreets.json

@@ -2,7 +2,8 @@
   "id": "fietsstraten",
   "version": "2020-08-30",
   "title": "Fietsstraten",
-  "description": "Een fietsstraat is een straat waar <b>automobilisten geen fietsers mogen inhalen</b> en waar een maximumsnelheid van <b>30km/u</b> geldt.<br/><br/>Op deze open kaart kan je alle gekende fietsstraten zien en kan je ontbrekende fietsstraten aanduiden. Om de kaart aan te passen, moet je je aanmelden met OpenStreetMap en helemaal inzoomen tot straatniveau.",
+  "description": "Een fietsstraat is een straat waar <ul><li><b>automobilisten geen fietsers mogen inhalen</b></li><li>Er een maximumsnelheid van <b>30km/u</b> geldt</li><li>Fietsers gemotoriseerde voortuigen links mogen inhalen</li><li>Fietsers nog steeds voorrang aan rechts moeten verlenen - ook aan auto's en voetgangers op het zebrapad</li></ul><br/><br/>Op deze open kaart kan je alle gekende fietsstraten zien en kan je ontbrekende fietsstraten aanduiden. Om de kaart aan te passen, moet je je aanmelden met OpenStreetMap en helemaal inzoomen tot straatniveau.",
+  
   "icon": "./assets/themes/cyclestreets/F111.svg",
   "language": "nl",
   "startLat": 51.2095,