Fix: decent PDF-export

UI/DownloadFlow/DownloadButton.svelte

@@ -10,12 +10,13 @@
     import DownloadHelper from "./DownloadHelper";
     import {Utils} from "../../Utils";
     import type {PriviligedLayerType} from "../../Models/Constants";
+    import {UIEventSource} from "../../Logic/UIEventSource";
 
     export let state: SpecialVisualizationState
 
     export let extension: string
     export let mimetype: string
-    export let construct: (geojsonCleaned: FeatureCollection) => (Blob | string) | Promise<void>
+    export let construct: (geojsonCleaned: FeatureCollection, title: string) => (Blob | string) | Promise<void>
     export let mainText: Translation
     export let helperText: Translation
     export let metaIsIncluded: boolean
@@ -26,51 +27,63 @@
     let isExporting = false
     let isError = false
 
+    let status: UIEventSource<string> = new UIEventSource<string>(undefined)
+
     async function clicked() {
         isExporting = true
         const gpsLayer = state.layerState.filteredLayers.get(
             <PriviligedLayerType>"gps_location"
         )
         state.lastClickObject.features.setData([])
-        
+
         const gpsIsDisplayed = gpsLayer.isDisplayed.data
         try {
             gpsLayer.isDisplayed.setData(false)
             const geojson: FeatureCollection = downloadHelper.getCleanGeoJson(metaIsIncluded)
             const name = state.layout.id
 
-            const promise = construct(geojson)
+            const title = `MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.${extension}`
+            const promise = construct(geojson, title)
             let data: Blob | string
             if (typeof promise === "string") {
                 data = promise
             } else if (typeof promise["then"] === "function") {
-                data = await <Promise<Blob | string>> promise
+                data = await <Promise<Blob | string>>promise
             } else {
                 data = <Blob>promise
             }
+            if (!data) {
+                return
+            }
             console.log("Got data", data)
             Utils.offerContentsAsDownloadableFile(
                 data,
-                `MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.${extension}`,
+                title,
                 {
                     mimetype,
                 }
             )
         } catch (e) {
             isError = true
+            console.error(e)
+        } finally {
+            isExporting = false
+            gpsLayer.isDisplayed.setData(gpsIsDisplayed)
         }
-        gpsLayer.isDisplayed.setData(gpsIsDisplayed)
 
-        isExporting = false
     }
 
 </script>
 
 {#if isError}
-    <Tr cls="alert" t={Translations.t.error}/>
+    <Tr cls="alert" t={Translations.t.general.error}/>
 {:else if isExporting}
     <Loading>
-        <Tr t={t.exporting}/>
+        {#if $status}
+            {$status}
+        {:else}
+            <Tr t={t.exporting}/>
+        {/if}
     </Loading>
 {:else}
     <button class="flex w-full" on:click={clicked}>

UI/DownloadFlow/DownloadPanel.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
 
-    import type {SpecialVisualizationState} from "../SpecialVisualization";
     import Loading from "../Base/Loading.svelte";
     import Translations from "../i18n/Translations";
     import Tr from "../Base/Tr.svelte";
     import DownloadHelper from "./DownloadHelper";
     import DownloadButton from "./DownloadButton.svelte";
     import {GeoOperations} from "../../Logic/GeoOperations";
+    import {SvgToPdf} from "../../Utils/svgToPdf";
+    import Locale from "../i18n/Locale";
+    import ThemeViewState from "../../Models/ThemeViewState";
+    import {Utils} from "../../Utils";
+    import Constants from "../../Models/Constants";
+    import {Translation} from "../i18n/Translation";
+    import {AvailableRasterLayers} from "../../Models/RasterLayers";
+    import {UIEventSource} from "../../Logic/UIEventSource";
 
-    export let state: SpecialVisualizationState
+    export let state: ThemeViewState
     let isLoading = state.dataIsLoading
 
     const t = Translations.t.general.download
@@ -30,6 +37,30 @@
         })
     }
 
+    async function constructPdf(_, title: string, status: UIEventSource<string>) {
+        const templateUrls = SvgToPdf.templates["current_view_a3"].pages
+        const templates: string[] = await Promise.all(templateUrls.map(url => Utils.download(url)))
+        console.log("Templates are", templates)
+        const bg = state.mapProperties.rasterLayer.data ?? AvailableRasterLayers.maplibre
+        const creator = new SvgToPdf(title, templates, {
+            state,
+            freeComponentId: "belowmap",
+            textSubstitutions: <Record<string, string>> {
+                "layout.title": state.layout.title,
+                title: state.layout.title,
+                layoutImg: state.layout.icon,
+                version: Constants.vNumber,
+                date: new Date().toISOString().substring(0,16),
+                background: new Translation(bg.properties.name).txt
+            }
+        })
+        
+        const unsub = creator.status.addCallbackAndRunD(s => status?.setData(s))
+        await creator.ExportPdf(Locale.language.data)
+        unsub()
+        return undefined
+    }
+
 </script>
 
 
@@ -85,7 +116,7 @@
                     extension="pdf"
                     mainText={t.downloadAsPdf}
                     helperText={t.downloadAsPdfHelper}
-                    construct={_ => state.mapProperties.exportAsPng(4)}
+                    construct={constructPdf}
     />