Fix dasharrays, add custom size PNG export

src/UI/DownloadFlow/DownloadPanel.svelte

@@ -8,6 +8,10 @@
   import { SvgToPdf } from "../../Utils/svgToPdf"
   import ThemeViewState from "../../Models/ThemeViewState"
   import DownloadPdf from "./DownloadPdf.svelte"
+  import { PngMapCreator } from "../../Utils/pngMapCreator"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import ValidatedInput from "../InputElement/ValidatedInput.svelte"
+  import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource"
 
   export let state: ThemeViewState
   let isLoading = state.dataIsLoading
@@ -34,9 +38,21 @@
       mapExtent: state.mapProperties.bounds.data,
       width: maindiv.offsetWidth,
       height: maindiv.offsetHeight,
-      noSelfIntersectingLines,
+      noSelfIntersectingLines
     })
   }
+
+  let customWidth = LocalStorageSource.Get("custom-png-width", "20")
+  let customHeight = LocalStorageSource.Get("custom-png-height", "20")
+
+  async function offerCustomPng(): Promise<Blob> {
+    console.log("Creating a custom size png with dimensions", customWidth.data + "mm *", customHeight.data + "mm")
+    const creator = new PngMapCreator(state, {
+      height: Number(customHeight.data), width: Number(customWidth.data)
+    })
+    return await creator.CreatePng("belowmap")
+  }
+
 </script>
 
 {#if $isLoading}
@@ -107,5 +123,26 @@
     {/each}
   </div>
 
+  <div class="low-interaction p-2 mt-4">
+    <h3 class="m-0 mb-2">
+      <Tr t={t.custom.title}/></h3>
+        <div class="flex">
+          <Tr t={t.custom.width} />
+          <ValidatedInput {state} type="pnat" value={customWidth} />
+        </div>
+        <div class="flex">
+          <Tr t={t.custom.height} />
+          <ValidatedInput {state} type="pnat" value={customHeight} />
+        </div>
+        <DownloadButton
+          mainText={t.custom.download.Subs({width: $customWidth, height: $customHeight})}
+          helperText={t.custom.downloadHelper}
+          extension="png"
+          construct={() => offerCustomPng()}
+          {state}
+          mimetype="image/png"
+        />
+  </div>
+
   <Tr cls="link-underline" t={t.licenseInfo} />
 {/if}

src/UI/Map/MapLibreAdaptor.ts

@@ -357,7 +357,8 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         const targetW = Math.max(element.getBoundingClientRect().width * 4,
             ...labels.map(l => l.getBoundingClientRect().width))
         const targetH = element.getBoundingClientRect().height +
-            Math.max(...labels.map(l => l.getBoundingClientRect().height))
+            Math.max(...labels.map(l => l.getBoundingClientRect().height * 2 /* A bit of buffer to catch eventual 'margin-top'*/))
+
         // Force a wider view for icon badges
         element.style.width = targetW + "px"
         // Force more height to include labels

src/UI/Map/ShowDataLayer.ts

@@ -351,7 +351,8 @@ class LineRenderingLayer {
                         "line-color": ["feature-state", "color"],
                         "line-opacity": ["feature-state", "color-opacity"],
                         "line-width": ["feature-state", "width"],
-                        "line-offset": ["feature-state", "offset"]
+                        "line-offset": ["feature-state", "offset"],
+                        "line-dasharray": this._config.dashArray?.split(" ")?.map(s => Number(s))
                     },
                     layout: {
                         "line-cap": "round"