forked from MapComplete/MapComplete
Reformat all files with prettier
This commit is contained in:
parent
e22d189376
commit
b541d3eab4
382 changed files with 50893 additions and 35566 deletions
187
UI/ExportPDF.ts
187
UI/ExportPDF.ts
|
|
@ -1,16 +1,16 @@
|
|||
import jsPDF from "jspdf";
|
||||
import {UIEventSource} from "../Logic/UIEventSource";
|
||||
import Minimap, {MinimapObj} from "./Base/Minimap";
|
||||
import Loc from "../Models/Loc";
|
||||
import BaseLayer from "../Models/BaseLayer";
|
||||
import {FixedUiElement} from "./Base/FixedUiElement";
|
||||
import Translations from "./i18n/Translations";
|
||||
import State from "../State";
|
||||
import Constants from "../Models/Constants";
|
||||
import LayoutConfig from "../Models/ThemeConfig/LayoutConfig";
|
||||
import FeaturePipeline from "../Logic/FeatureSource/FeaturePipeline";
|
||||
import ShowDataLayer from "./ShowDataLayer/ShowDataLayer";
|
||||
import {BBox} from "../Logic/BBox";
|
||||
import jsPDF from "jspdf"
|
||||
import { UIEventSource } from "../Logic/UIEventSource"
|
||||
import Minimap, { MinimapObj } from "./Base/Minimap"
|
||||
import Loc from "../Models/Loc"
|
||||
import BaseLayer from "../Models/BaseLayer"
|
||||
import { FixedUiElement } from "./Base/FixedUiElement"
|
||||
import Translations from "./i18n/Translations"
|
||||
import State from "../State"
|
||||
import Constants from "../Models/Constants"
|
||||
import LayoutConfig from "../Models/ThemeConfig/LayoutConfig"
|
||||
import FeaturePipeline from "../Logic/FeatureSource/FeaturePipeline"
|
||||
import ShowDataLayer from "./ShowDataLayer/ShowDataLayer"
|
||||
import { BBox } from "../Logic/BBox"
|
||||
|
||||
/**
|
||||
* Creates screenshoter to take png screenshot
|
||||
|
|
@ -26,81 +26,77 @@ export default class ExportPDF {
|
|||
// dimensions of the map in milimeter
|
||||
public isRunning = new UIEventSource(true)
|
||||
// A4: 297 * 210mm
|
||||
private readonly mapW = 297;
|
||||
private readonly mapH = 210;
|
||||
private readonly mapW = 297
|
||||
private readonly mapH = 210
|
||||
private readonly scaling = 2
|
||||
private readonly freeDivId: string;
|
||||
private readonly _layout: LayoutConfig;
|
||||
private _screenhotTaken = false;
|
||||
private readonly freeDivId: string
|
||||
private readonly _layout: LayoutConfig
|
||||
private _screenhotTaken = false
|
||||
|
||||
constructor(
|
||||
options: {
|
||||
freeDivId: string,
|
||||
location: UIEventSource<Loc>,
|
||||
background?: UIEventSource<BaseLayer>
|
||||
features: FeaturePipeline,
|
||||
layout: LayoutConfig
|
||||
}
|
||||
) {
|
||||
|
||||
this.freeDivId = options.freeDivId;
|
||||
this._layout = options.layout;
|
||||
const self = this;
|
||||
constructor(options: {
|
||||
freeDivId: string
|
||||
location: UIEventSource<Loc>
|
||||
background?: UIEventSource<BaseLayer>
|
||||
features: FeaturePipeline
|
||||
layout: LayoutConfig
|
||||
}) {
|
||||
this.freeDivId = options.freeDivId
|
||||
this._layout = options.layout
|
||||
const self = this
|
||||
|
||||
// We create a minimap at the given location and attach it to the given 'hidden' element
|
||||
|
||||
const l = options.location.data;
|
||||
const l = options.location.data
|
||||
const loc = {
|
||||
lat: l.lat,
|
||||
lon: l.lon,
|
||||
zoom: l.zoom + 1
|
||||
zoom: l.zoom + 1,
|
||||
}
|
||||
|
||||
const minimap = Minimap.createMiniMap({
|
||||
location: new UIEventSource<Loc>(loc), // We remove the link between the old and the new UI-event source as moving the map while the export is running fucks up the screenshot
|
||||
background: options.background,
|
||||
allowMoving: false,
|
||||
onFullyLoaded: _ => window.setTimeout(() => {
|
||||
if (self._screenhotTaken) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
self.CreatePdf(minimap)
|
||||
.then(() => self.cleanup())
|
||||
.catch(() => self.cleanup())
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
self.cleanup()
|
||||
}
|
||||
|
||||
}, 500)
|
||||
onFullyLoaded: (_) =>
|
||||
window.setTimeout(() => {
|
||||
if (self._screenhotTaken) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
self.CreatePdf(minimap)
|
||||
.then(() => self.cleanup())
|
||||
.catch(() => self.cleanup())
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
self.cleanup()
|
||||
}
|
||||
}, 500),
|
||||
})
|
||||
|
||||
minimap.SetStyle(`width: ${this.mapW * this.scaling}mm; height: ${this.mapH * this.scaling}mm;`)
|
||||
minimap.SetStyle(
|
||||
`width: ${this.mapW * this.scaling}mm; height: ${this.mapH * this.scaling}mm;`
|
||||
)
|
||||
minimap.AttachTo(options.freeDivId)
|
||||
|
||||
// Next: we prepare the features. Only fully contained features are shown
|
||||
minimap.leafletMap.addCallbackAndRunD(leaflet => {
|
||||
minimap.leafletMap.addCallbackAndRunD((leaflet) => {
|
||||
const bounds = BBox.fromLeafletBounds(leaflet.getBounds().pad(0.2))
|
||||
options.features.GetTilesPerLayerWithin(bounds, tile => {
|
||||
options.features.GetTilesPerLayerWithin(bounds, (tile) => {
|
||||
if (tile.layer.layerDef.minzoom > l.zoom) {
|
||||
return
|
||||
}
|
||||
if(tile.layer.layerDef.id.startsWith("note_import")){
|
||||
if (tile.layer.layerDef.id.startsWith("note_import")) {
|
||||
// Don't export notes to import
|
||||
return;
|
||||
return
|
||||
}
|
||||
new ShowDataLayer(
|
||||
{
|
||||
features: tile,
|
||||
leafletMap: minimap.leafletMap,
|
||||
layerToShow: tile.layer.layerDef,
|
||||
doShowLayer: tile.layer.isDisplayed,
|
||||
state: undefined
|
||||
}
|
||||
)
|
||||
new ShowDataLayer({
|
||||
features: tile,
|
||||
leafletMap: minimap.leafletMap,
|
||||
layerToShow: tile.layer.layerDef,
|
||||
doShowLayer: tile.layer.isDisplayed,
|
||||
state: undefined,
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
State.state.AddAllOverlaysToMap(minimap.leafletMap)
|
||||
|
|
@ -108,85 +104,92 @@ export default class ExportPDF {
|
|||
|
||||
private cleanup() {
|
||||
new FixedUiElement("Screenshot taken!").AttachTo(this.freeDivId)
|
||||
this._screenhotTaken = true;
|
||||
this._screenhotTaken = true
|
||||
}
|
||||
|
||||
private async CreatePdf(minimap: MinimapObj) {
|
||||
|
||||
|
||||
console.log("PDF creation started")
|
||||
const t = Translations.t.general.pdf;
|
||||
const t = Translations.t.general.pdf
|
||||
const layout = this._layout
|
||||
|
||||
let doc = new jsPDF('landscape');
|
||||
let doc = new jsPDF("landscape")
|
||||
|
||||
const image = await minimap.TakeScreenshot()
|
||||
// @ts-ignore
|
||||
doc.addImage(image, 'PNG', 0, 0, this.mapW, this.mapH);
|
||||
|
||||
doc.addImage(image, "PNG", 0, 0, this.mapW, this.mapH)
|
||||
|
||||
doc.setDrawColor(255, 255, 255)
|
||||
doc.setFillColor(255, 255, 255)
|
||||
doc.roundedRect(12, 10, 145, 25, 5, 5, 'FD')
|
||||
doc.roundedRect(12, 10, 145, 25, 5, 5, "FD")
|
||||
|
||||
doc.setFontSize(20)
|
||||
doc.textWithLink(layout.title.txt, 40, 18.5, {
|
||||
maxWidth: 125,
|
||||
url: window.location.href
|
||||
url: window.location.href,
|
||||
})
|
||||
doc.setFontSize(10)
|
||||
doc.text(t.generatedWith.txt, 40, 23, {
|
||||
maxWidth: 125
|
||||
maxWidth: 125,
|
||||
})
|
||||
const backgroundLayer: BaseLayer = State.state.backgroundLayer.data
|
||||
const attribution = new FixedUiElement(backgroundLayer.layer().getAttribution() ?? backgroundLayer.name).ConstructElement().textContent
|
||||
const attribution = new FixedUiElement(
|
||||
backgroundLayer.layer().getAttribution() ?? backgroundLayer.name
|
||||
).ConstructElement().textContent
|
||||
doc.textWithLink(t.attr.txt, 40, 26.5, {
|
||||
maxWidth: 125,
|
||||
url: "https://www.openstreetmap.org/copyright"
|
||||
url: "https://www.openstreetmap.org/copyright",
|
||||
})
|
||||
|
||||
doc.text(t.attrBackground.Subs({
|
||||
background: attribution
|
||||
}).txt, 40, 30)
|
||||
doc.text(
|
||||
t.attrBackground.Subs({
|
||||
background: attribution,
|
||||
}).txt,
|
||||
40,
|
||||
30
|
||||
)
|
||||
|
||||
let date = new Date().toISOString().substr(0, 16)
|
||||
|
||||
doc.setFontSize(7)
|
||||
doc.text(t.versionInfo.Subs({
|
||||
version: Constants.vNumber,
|
||||
date: date
|
||||
}).txt, 40, 34, {
|
||||
maxWidth: 125
|
||||
})
|
||||
doc.text(
|
||||
t.versionInfo.Subs({
|
||||
version: Constants.vNumber,
|
||||
date: date,
|
||||
}).txt,
|
||||
40,
|
||||
34,
|
||||
{
|
||||
maxWidth: 125,
|
||||
}
|
||||
)
|
||||
|
||||
// Add the logo of the layout
|
||||
let img = document.createElement('img');
|
||||
let img = document.createElement("img")
|
||||
const imgSource = layout.icon
|
||||
const imgType = imgSource.substr(imgSource.lastIndexOf(".") + 1);
|
||||
const imgType = imgSource.substr(imgSource.lastIndexOf(".") + 1)
|
||||
img.src = imgSource
|
||||
if (imgType.toLowerCase() === "svg") {
|
||||
new FixedUiElement("").AttachTo(this.freeDivId)
|
||||
|
||||
// This is an svg image, we use the canvas to convert it to a png
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d');
|
||||
const canvas = document.createElement("canvas")
|
||||
const ctx = canvas.getContext("2d")
|
||||
canvas.width = 500
|
||||
canvas.height = 500
|
||||
img.style.width = "100%"
|
||||
img.style.height = "100%"
|
||||
ctx.drawImage(img, 0, 0, 500, 500);
|
||||
ctx.drawImage(img, 0, 0, 500, 500)
|
||||
const base64img = canvas.toDataURL("image/png")
|
||||
doc.addImage(base64img, 'png', 15, 12, 20, 20);
|
||||
|
||||
doc.addImage(base64img, "png", 15, 12, 20, 20)
|
||||
} else {
|
||||
try {
|
||||
doc.addImage(img, imgType, 15, 12, 20, 20);
|
||||
doc.addImage(img, imgType, 15, 12, 20, 20)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
doc.save(`MapComplete_${layout.title.txt}_${date}.pdf`);
|
||||
doc.save(`MapComplete_${layout.title.txt}_${date}.pdf`)
|
||||
|
||||
this.isRunning.setData(false)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue