Fix: Expose all templates

UI/DownloadFlow/DownloadHelper.ts

@@ -48,8 +48,7 @@ export default class DownloadHelper {
 
     public getCleanGeoJson(
         includeMetaData: boolean
-    ): FeatureCollection {
+    ): string | FeatureCollection {
-        const state = this._state
         const featuresPerLayer = this.getCleanGeoJsonPerLayer(includeMetaData)
         const features = [].concat(...Array.from(featuresPerLayer.values()))
         return {
@@ -133,8 +132,7 @@ export default class DownloadHelper {
             for (const feature of features) {
                 const stroke =
                     rendering?.color?.GetRenderValue(feature.properties)?.txt ?? "#ff0000"
-                const color = Utils.colorAsHex(Utils.color(stroke))
+                feature.properties.stroke = Utils.colorAsHex(Utils.color(stroke))
-                feature.properties.stroke = color
             }
 
             const groupPaths: string[] = converter.convert({type: "FeatureCollection", features})
@@ -151,8 +149,6 @@ export default class DownloadHelper {
         return header + "\n" + elements.join("\n") + "\n</svg>"
     }
 
-
-
     public getCleanGeoJsonPerLayer(
         includeMetaData: boolean
     ): Map<string, Feature[]> {

UI/DownloadFlow/DownloadPanel.svelte

@@ -7,13 +7,8 @@
     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 DownloadPdf from "./DownloadPdf.svelte";
-    import Constants from "../../Models/Constants";
-    import {Translation} from "../i18n/Translation";
-    import {AvailableRasterLayers} from "../../Models/RasterLayers";
-    import {UIEventSource} from "../../Logic/UIEventSource";
 
     export let state: ThemeViewState
     let isLoading = state.dataIsLoading
@@ -37,29 +32,6 @@
         })
     }
 
-    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>
 
@@ -111,13 +83,14 @@
                     construct={_ => state.mapProperties.exportAsPng(4)}
     />
 
-    <DownloadButton {state}
+
-                    mimetype="application/pdf"
+            <div class="flex flex-col">
-                    extension="pdf"
+                {#each Object.keys(SvgToPdf.templates) as key}
-                    mainText={t.downloadAsPdf}
+                    {#if SvgToPdf.templates[key].isPublic}
-                    helperText={t.downloadAsPdfHelper}
+                        <DownloadPdf {state} templateName={key}></DownloadPdf>
-                    construct={constructPdf}
+                    {/if}
-    />
+                {/each}
+            </div>
 
 
     <Tr cls="link-underline" t={t.licenseInfo}/>

UI/DownloadFlow/DownloadPdf.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+
+    import DownloadButton from "./DownloadButton.svelte";
+    import ThemeViewState from "../../Models/ThemeViewState";
+    import {SvgToPdf} from "../../Utils/svgToPdf";
+    import Translations from "../i18n/Translations";
+    import {Translation} from "../i18n/Translation";
+    import {Utils} from "../../Utils";
+    import {AvailableRasterLayers} from "../../Models/RasterLayers";
+    import Constants from "../../Models/Constants";
+    import Locale from "../i18n/Locale";
+    import {UIEventSource} from "../../Logic/UIEventSource";
+    import DownloadHelper from "./DownloadHelper";
+
+    export let templateName: string
+export let state: ThemeViewState
+const template = SvgToPdf.templates[templateName]
+console.log("template", template )
+let mainText: Translation = typeof template.description === "string" ? new Translation(template.description) : template.description
+let t = Translations.t.general.download
+    const downloadHelper = new DownloadHelper(state)
+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",
+        generateImage(key: string): HTMLImageElement {
+            downloadHelper.generateImage(key)
+        },
+        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>
+
+
+<DownloadButton {state}
+                mimetype="application/pdf"
+                extension="pdf"
+                {mainText}
+                helperText={t.downloadAsPdfHelper}
+                construct={constructPdf}
+/>

Utils/pngMapCreator.ts

@@ -29,8 +29,8 @@ export class PngMapCreator {
         div.id = "mapdiv-" + PngMapCreator.id
         div.style.width = this._options.width + "mm"
         div.style.height = this._options.height + "mm"
-
         PngMapCreator.id++
+        try {
             const layout = this._state.layout
 
             function setState(msg: string) {
@@ -56,6 +56,9 @@ export class PngMapCreator {
             mla.zoom.setData(settings.zoom.data)
             mla.location.setData(settings.location.data)
             mla.rasterLayer.setData(settings.rasterLayer.data)
+            mla.allowZooming.setData(false)
+            mla.allowMoving.setData(false)
+
 
             this._state?.showNormalDataOn(map)
             console.log("Creating a map with size", this._options.width, this._options.height)
@@ -72,8 +75,9 @@ export class PngMapCreator {
             setState("Exporting png")
             console.log("Loading for", this._state.layout.id, "is done")
             const png = await mla.exportAsPng(6)
-        div.parentElement.removeChild(div)
-        Utils.offerContentsAsDownloadableFile(png, "test.png")
             return png
+        } finally {
+            div.parentElement.removeChild(div)
+        }
     }
 }

Utils/svgToPdf.ts

@@ -302,6 +302,7 @@ class SvgToPdfInternals {
         return
     }
 
+
     private drawTspan(tspan: Element) {
         const txt = tspan.textContent
         if (txt == "") {
@@ -310,27 +311,18 @@ class SvgToPdfInternals {
         const x = SvgToPdfInternals.attrNumber(tspan, "x")
         const y = SvgToPdfInternals.attrNumber(tspan, "y")
 
-        const css = SvgToPdfInternals.css(tspan)
-        const imageMatch = txt.match(/\$img\(([^)])+\)/)
-        if (imageMatch) {
-            const [key, width, height] = imageMatch[1].split(",").map(s => s.trim())
-            const url = key.startsWith("http") ? key : this.extractTranslation("${" + key + "}")
-            const img = this._images[url]
-            console.log("Drawing an injected image", {key, url, img: img.src})
-            this.doc.addImage(
-                img.src
-                , x, y, Number(width), Number(height)
-            )
-            return
-        }
-
         let maxWidth: number = undefined
+        let maxHeight: number = undefined
+        const css = SvgToPdfInternals.css(tspan)
+
         if (css["shape-inside"]) {
             const matched = css["shape-inside"].match(/url\(#([a-zA-Z0-9-]+)\)/)
             if (matched !== null) {
                 const rectId = matched[1]
                 const rect = this._rects[rectId]
                 maxWidth = SvgToPdfInternals.attrNumber(rect, "width", false)
+                maxHeight = SvgToPdfInternals.attrNumber(rect, "height", false)
+
             }
         }
 
@@ -537,7 +529,7 @@ export interface SvgToPdfOptions {
     /**
      * Override all the maps to generate with this map
      */
-    state?: ThemeViewState
+    state?: ThemeViewState,
 }
 
 class SvgToPdfPage {
@@ -553,11 +545,10 @@ class SvgToPdfPage {
      */
     private readonly _state: UIEventSource<string>
     private _isPrepared = false
-    private state: UIEventSource<string>
 
-    constructor(page: string, state: UIEventSource<string>, options?: SvgToPdfOptions) {
+    constructor(page: string, state: UIEventSource<string>, options: SvgToPdfOptions) {
         this._state = state
-        this.options = options ?? <SvgToPdfOptions>{}
+        this.options = options
         const parser = new DOMParser()
         const xmlDoc = parser.parseFromString(page, "image/svg+xml")
         this._svgRoot = xmlDoc.getElementsByTagName("svg")[0]
@@ -613,13 +604,6 @@ class SvgToPdfPage {
         if (element.tagName === "tspan" && element.childElementCount == 0) {
             const specialValues = element.textContent.split(" ").filter((t) => t.startsWith("$"))
             for (let specialValue of specialValues) {
-                const imageMatch = element.textContent.match(/\$img\(([^)])+\)/)
-                if (imageMatch) {
-                    const key = imageMatch[1]
-                    const url = key.startsWith("http") ? key : this.extractTranslation("${" + key + "}", `en`, false)
-                    await this.loadImage(url)
-                    continue
-                }
 
                 const importMatch = element.textContent.match(
                     /\$import ([a-zA-Z-_0-9.? ]+) as ([a-zA-Z0-9]+)/
@@ -863,7 +847,7 @@ class SvgToPdfPage {
         if (this.options.state !== undefined) {
             png = await (new PngMapCreator(this.options.state, {
                 width, height,
-            }).CreatePng(this.options.freeComponentId))
+            }).CreatePng(this.options.freeComponentId, this._state))
         } else {
             const match = spec.match(/\$map\(([^)]*)\)$/)
             if (match === null) {
@@ -1005,12 +989,13 @@ export class SvgToPdf {
         },
         current_view_a4: {
             pages: ["./assets/templates/CurrentMapWithHeaderA4.svg"],
-            description: "Export a PDF (A4, landscape) of the current view",
+            description: Translations.t.general.download.pdf.current_view_a4,
+
             isPublic: true
         },
         current_view_a3: {
             pages: ["./assets/templates/CurrentMapWithHeaderA3.svg"],
-            description: "Export a PDF (A3, portrait) of the current view",
+            description: Translations.t.general.download.pdf.current_view_a3,
             isPublic: true
         }
     }
@@ -1019,16 +1004,13 @@ export class SvgToPdf {
     private readonly _title: string
     private readonly _pages: SvgToPdfPage[]
 
-    constructor(title: string, pages: string[], options?: SvgToPdfOptions) {
+    constructor(title: string, pages: string[], options) {
         this._title = title
-        options = options ?? <SvgToPdfOptions>{}
         options.textSubstitutions = options.textSubstitutions ?? {}
-        const mapCount =
+        options.textSubstitutions["mapCount"] = "" +
-            "" +
             Array.from(AllKnownLayouts.allKnownLayouts.values()).filter(
                 (th) => !th.hideFromOverview
             ).length
-        options.textSubstitutions["mapCount"] = mapCount
 
         const state = new UIEventSource<string>("Initializing...")
         this.status = state
@@ -1054,7 +1036,6 @@ export class SvgToPdf {
 
         const doc = new jsPDF(mode, undefined, [width, height])
         doc.advancedAPI((advancedApi) => {
-            const canvas = advancedApi.canvas
             for (let i = 0; i < this._pages.length; i++) {
                 console.log("Rendering page", i)
                 if (i > 0) {

langs/en.json

@@ -183,6 +183,10 @@
             "includeMetaData": "Include metadata (last editor, calculated values, …)",
             "licenseInfo": "<h3>Copyright notice</h3>The provided data is available under ODbL. Reusing it is gratis for any purpose, but <ul><li>the attribution <b>© OpenStreetMap contributors</b> must be shown<li><li>Any change must be published under the same license</li></ul> Please read the full <a href='https://www.openstreetmap.org/copyright' target='_blank'>copyright notice</a> for details.",
             "noDataLoaded": "No data is loaded yet. Download will be available soon",
+            "pdf": {
+                "current_view_a3": "Export a PDF (A3, portrait) of the current view",
+                "current_view_a4": "Export a PDF (A4, landscape) of the current view"
+            },
             "title": "Download",
             "uploadGpx": "Upload your track to OpenStreetMap"
         },

public/assets/templates/CurrentMapWithHeaderA4.svg

@@ -15,6 +15,12 @@
    xmlns:svg="http://www.w3.org/2000/svg">
   <defs
      id="defs33">
+    <rect
+       x="39.439771"
+       y="61.24773"
+       width="104.91111"
+       height="99.590532"
+       id="rect7785" />
     <rect
        x="41.547712"
        y="103.43336"
@@ -35,14 +41,14 @@
      borderopacity="1"
      inkscape:pageshadow="0"
      inkscape:pageopacity="1"
-     inkscape:pagecheckerboard="1"
+     inkscape:pagecheckerboard="true"
      inkscape:document-units="mm"
      showgrid="false"
      showguides="true"
      inkscape:guide-bbox="true"
-     inkscape:zoom="0.48119622"
+     inkscape:zoom="1.3296534"
-     inkscape:cx="338.73915"
+     inkscape:cx="4.5124542"
-     inkscape:cy="424.98255"
+     inkscape:cy="96.641727"
      inkscape:window-width="1920"
      inkscape:window-height="995"
      inkscape:window-x="0"
@@ -89,33 +95,33 @@
        style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect56707);display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-opacity:1"><tspan
          x="0"
          y="0"
-         id="tspan28903"><tspan
+         id="tspan2018"><tspan
            style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
-           id="tspan28901">$map(current)</tspan></tspan></text>
+           id="tspan2016">$map(current)</tspan></tspan></text>
     <text
        xml:space="preserve"
-       transform="matrix(0.26458333,0,0,0.26458333,12.08115,27.672609)"
+       transform="matrix(0.26458333,0,0,0.26458333,38.20272,27.672609)"
        id="text3510"
        style="font-style:normal;font-weight:normal;font-size:40px;line-height:0;font-family:sans-serif;white-space:pre;shape-inside:url(#rect3512);fill:#000000;fill-opacity:1;stroke:#000000;stroke-opacity:1"><tspan
          x="0"
          y="0"
-         id="tspan28907"><tspan
+         id="tspan2022"><tspan
            style="font-size:16px;line-height:1.05;-inkscape-font-specification:'sans-serif, Normal'"
-           id="tspan28905">$general.pdf.attr
+           id="tspan2020">$general.pdf.attr
 </tspan></tspan><tspan
          x="0"
          y="16.799999"
-         id="tspan28911"><tspan
+         id="tspan2026"><tspan
            style="font-size:16px;line-height:1.05;-inkscape-font-specification:'sans-serif, Normal'"
-           id="tspan28909">$general.pdf.attrBackground
+           id="tspan2024">$general.pdf.attrBackground
 </tspan></tspan><tspan
          x="0"
          y="35.692733"
-         id="tspan28917"><tspan
+         id="tspan2032"><tspan
            style="font-size:16px;line-height:1.05;-inkscape-font-specification:'sans-serif, Normal'"
-           id="tspan28913">$general.pdf.generatedWith</tspan><tspan
+           id="tspan2028">$general.pdf.generatedWith</tspan><tspan
            style="font-size:18.6667px;line-height:1.05;-inkscape-font-specification:'sans-serif, Normal'"
-           id="tspan28915">
+           id="tspan2030">
 </tspan></tspan></text>
     <text
        xml:space="preserve"
@@ -129,9 +135,21 @@
        style="font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;white-space:pre;shape-inside:url(#rect10143);fill:#000000;fill-opacity:0.914749;stroke:#ff0000;stroke-width:3.77953;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"><tspan
          x="1182.4844"
          y="871.91602"
-         id="tspan28921"><tspan
+         id="tspan2036"><tspan
            style="fill-opacity:1;stroke:none"
-           id="tspan28919">$general.pdf.versionInfo</tspan></tspan></text>
+           id="tspan2034">$general.pdf.versionInfo</tspan></tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26458333,0,0,0.26458333,-1.5395742,-2.3571711)"
+       id="text7783"
+       style="font-size:16px;line-height:1.05;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;white-space:pre;shape-inside:url(#rect7785);fill:#000000;stroke-width:3.77953;stroke-linecap:round;stroke-linejoin:round"
+       x="-98.273438"
+       y="0"><tspan
+         x="39.439453"
+         y="73.804296"
+         id="tspan2040"><tspan
+           style="font-size:8px"
+           id="tspan2038">$img(layouticon)</tspan></tspan></text>
   </g>
   <g
      inkscape:label="Layer 1"
@@ -161,14 +179,14 @@
        style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect81706);fill:#000000;fill-opacity:1;stroke:none" />
     <text
        xml:space="preserve"
-       transform="matrix(0.26458333,0,0,0.26458333,11.738978,20.267151)"
+       transform="matrix(0.26458333,0,0,0.26458333,37.860548,20.267151)"
        id="text135030"
        style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect135032);fill:#000000;fill-opacity:1;stroke:none"><tspan
          x="0"
          y="0"
-         id="tspan28925"><tspan
+         id="tspan2044"><tspan
            style="font-weight:bold;font-size:34.6667px;-inkscape-font-specification:'sans-serif, Bold'"
-           id="tspan28923">${title}</tspan></tspan></text>
+           id="tspan2042">${title}</tspan></tspan></text>
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"

theme.html

@@ -63,7 +63,7 @@
         </div>
     </div>
 </div>
-<div id="belowmap" style="z-index: -1">Below</div>
+<div id="belowmap" class="absolute top-0 left-0" style="z-index: -1;">Below</div>
 
 <script>