From 261554a5d998909692b5ebb282c8206fefd9a337 Mon Sep 17 00:00:00 2001 From: LiamSimons Date: Tue, 27 Jul 2021 12:12:58 +0200 Subject: [PATCH] PDF export added - not working --- InitUiElements.ts | 11 ++++++++++- Logic/Actors/ExportPDF.ts | 34 ++++++++++++++++++++++++++++++++++ Logic/Actors/PDFLayout.ts | 26 ++++++++++++++++++++++++++ 3 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 Logic/Actors/ExportPDF.ts create mode 100644 Logic/Actors/PDFLayout.ts diff --git a/InitUiElements.ts b/InitUiElements.ts index bc804a2294..102c4fd3fe 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -40,6 +40,7 @@ import FeatureSource from "./Logic/FeatureSource/FeatureSource"; import AllKnownLayers from "./Customizations/AllKnownLayers"; import LayerConfig from "./Customizations/JSON/LayerConfig"; import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers"; +import ExportPDF from "./Logic/Actors/ExportPDF"; export class InitUiElements { @@ -189,7 +190,15 @@ export class InitUiElements { State.state.locationControl.ping(); }) - new Combine([plus, min, geolocationButton].map(el => el.SetClass("m-0.5 md:m-1"))) + const screenshot = new MapControlButton( + new FixedUiElement( + Img.AsImageElement(Svg.bug, "", "width:1.25rem;height:1.25rem") + ) + ).onClick(() => { + let createdPDF = new ExportPDF("Screenshot", "natuurpunt"); + }) + + new Combine([plus, min, geolocationButton, screenshot].map(el => el.SetClass("m-0.5 md:m-1"))) .SetClass("flex flex-col") .AttachTo("bottom-right"); diff --git a/Logic/Actors/ExportPDF.ts b/Logic/Actors/ExportPDF.ts new file mode 100644 index 0000000000..3eb3fa4d4b --- /dev/null +++ b/Logic/Actors/ExportPDF.ts @@ -0,0 +1,34 @@ +/** + * Creates screenshoter to take png screenshot + * Creates jspdf and downloads it + * - landscape pdf + * + * To add new layout: + * - add new possible layout name in constructor + * - add new layout in "PDFLayout" + * -> in there are more instructions + */ + + import jsPDF from "jspdf"; + import { SimpleMapScreenshoter } from "leaflet-simple-map-screenshoter"; + import State from "../../State"; + import { PDFLayout } from "./PDFLayout"; + + export default class ExportPDF { + constructor( + name: string, + layout: "natuurpunt" + ){ + const screenshotter = new SimpleMapScreenshoter(); + //minimap op index.html -> hidden daar alles op doen en dan weg + //minimap - leaflet map ophalen - boundaries ophalen - State.state.featurePipeline + screenshotter.addTo(State.state.leafletMap.data); + let doc = new jsPDF('l'); + screenshotter.takeScreen('image').then(image => { + let file = new PDFLayout(); + file.AddLayout(layout, doc, image); + console.log("SCREENSHOTTER"); + doc.save(name); + }) + } + } \ No newline at end of file diff --git a/Logic/Actors/PDFLayout.ts b/Logic/Actors/PDFLayout.ts new file mode 100644 index 0000000000..2478fb1183 --- /dev/null +++ b/Logic/Actors/PDFLayout.ts @@ -0,0 +1,26 @@ +/** + * Adds a theme to the pdf + * + * To add new layout: (first check ExportPDF.ts) + * - in AddLayout() -> add new name for your layout + * AddLayout(layout: "natuurpunt" ...) => AddLayout(layout: "natuurpunt" | "newlayout" ...) + * - add if statement that checks which layout you want + * - add new function to change the pdf layout + */ + + import jsPDF from "jspdf"; + + export class PDFLayout { + public AddLayout(layout: "natuurpunt", doc: jsPDF, image: Blob){ + if(layout === "natuurpunt") this.AddNatuurpuntLayout(doc, image); + } + public AddNatuurpuntLayout(doc: jsPDF, image: Blob){ + // Add Natuurpunt layout + const screenRatio = screen.width/screen.height; + let img = document.createElement('img'); + img.src = './assets/themes/natuurpunt/natuurpunt.png'; + doc.addImage(img, 'PNG', 15, 5, 20, 20); + doc.addImage(image, 'PNG', 15, 30, 150*screenRatio, 150); + return doc; + } + } \ No newline at end of file