ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Fix: improve PDF-output functionality

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-06-07 00:14:20 +02:00
parent c6283ac720
commit 215286a5af
22 changed files with 363 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

6
UI/DownloadFlow/DownloadButton.svelte
View file

@ -16,7 +16,7 @@
export let extension: string
export let mimetype: string
export let construct: (geojsonCleaned: FeatureCollection, title: string) => (Blob | string) | Promise<void>
export let construct: (geojsonCleaned: FeatureCollection, title: string, status?: UIEventSource<string>) => (Blob | string) | Promise<void>
export let mainText: Translation
export let helperText: Translation
export let metaIsIncluded: boolean
@ -43,7 +43,7 @@
const name = state.layout.id
const title = `MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.${extension}`
const promise = construct(geojson, title)
const promise = construct(geojson, title, status)
let data: Blob | string
if (typeof promise === "string") {
data = promise
@ -88,7 +88,7 @@
{:else}
<button class="flex w-full" on:click={clicked}>
<slot name="image">
<ArrowDownTrayIcon class="w-12 h-12 mr-2"/>
<ArrowDownTrayIcon class="w-12 h-12 mr-2 shrink-0"/>
</slot>
<span class="flex flex-col items-start">
<Tr t={mainText}/>

22
UI/DownloadFlow/DownloadHelper.ts
View file

@ -48,7 +48,7 @@ export default class DownloadHelper {
public getCleanGeoJson(
includeMetaData: boolean
): string | FeatureCollection {
): FeatureCollection {
const featuresPerLayer = this.getCleanGeoJsonPerLayer(includeMetaData)
const features = [].concat(...Array.from(featuresPerLayer.values()))
return {
@ -179,4 +179,24 @@ export default class DownloadHelper {
return featuresPerLayer
}
/**
* Creates an image for the given key.
* @param key
* @param width (in mm)
* @param height (in mm)
*/
createImage(key: string, width: string, height: string): HTMLImageElement {
const img = document.createElement("img")
const sources = {
"layouticon":this._state.layout.icon
}
img.src = sources[key]
if(!img.src){
throw "Invalid key for 'createImage': "+key+"; try one of: "+Object.keys(sources).join(", ")
}
img.style.width = width
img.style.height = height
console.log("Fetching an image with src", img.src)
return img;
}
}

2
UI/DownloadFlow/DownloadPanel.svelte
View file

@ -87,7 +87,7 @@
<div class="flex flex-col">
{#each Object.keys(SvgToPdf.templates) as key}
{#if SvgToPdf.templates[key].isPublic}
<DownloadPdf {state} templateName={key}></DownloadPdf>
<DownloadPdf {state} templateName={key}/>
{/if}
{/each}
</div>

74
UI/DownloadFlow/DownloadPdf.svelte
View file

@ -3,6 +3,7 @@
import DownloadButton from "./DownloadButton.svelte";
import ThemeViewState from "../../Models/ThemeViewState";
import {SvgToPdf} from "../../Utils/svgToPdf";
import type {PdfTemplateInfo} from "../../Utils/svgToPdf";
import Translations from "../i18n/Translations";
import {Translation} from "../i18n/Translation";
import {Utils} from "../../Utils";
@ -13,45 +14,50 @@
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
export let state: ThemeViewState
const template: PdfTemplateInfo = 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
}
async function constructPdf(_, title: string, status: UIEventSource<string>) {
title=title.substring(0, title.length - 4)+"_"+template.format+"_"+template.orientation
const templateUrls = SvgToPdf.templates[templateName].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",
createImage: (key: string, width: string, height: string) => downloadHelper.createImage(key, width, height),
textSubstitutions: <Record<string, string>>{
"layout.title": state.layout.title,
layoutid: state.layout.id,
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 => {
console.log("SVG creator status:", s)
status?.setData(s);
})
await creator.ExportPdf(Locale.language.data)
unsub()
return undefined
}
</script>
<DownloadButton {state}
mimetype="application/pdf"
<DownloadButton construct={constructPdf}
extension="pdf"
{mainText}
helperText={t.downloadAsPdfHelper}
construct={constructPdf}
metaIsIncluded={false}
{mainText}
mimetype="application/pdf"
{state}
/>