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}