From 4790a10cb6d304424303d2e507e881713001eacb Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sun, 22 Aug 2021 20:10:19 +0200 Subject: [PATCH] Add spinning animation while exporting the pdf --- UI/Base/Minimap.ts | 1 + UI/BigComponents/AllDownloads.ts | 32 ++++++++++++---- UI/ExportPDF.ts | 15 +++++--- assets/svg/loading.svg | 64 ++++++++++++++++++++++++++++++++ index.css | 15 +------- 5 files changed, 101 insertions(+), 26 deletions(-) create mode 100644 assets/svg/loading.svg diff --git a/UI/Base/Minimap.ts b/UI/Base/Minimap.ts index 871a14021c..c030812ce2 100644 --- a/UI/Base/Minimap.ts +++ b/UI/Base/Minimap.ts @@ -24,6 +24,7 @@ export default class Minimap extends BaseUIElement { location?: UIEventSource, allowMoving?: boolean, leafletOptions?: any, + onFullyLoaded?: (leaflet: L.Map) => void } ) { diff --git a/UI/BigComponents/AllDownloads.ts b/UI/BigComponents/AllDownloads.ts index 063fea9fb4..141c67dc09 100644 --- a/UI/BigComponents/AllDownloads.ts +++ b/UI/BigComponents/AllDownloads.ts @@ -9,6 +9,9 @@ import {DownloadPanel} from "./DownloadPanel"; import {SubtleButton} from "../Base/SubtleButton"; import Svg from "../../Svg"; import ExportPDF from "../ExportPDF"; +import {Browser} from "leaflet"; +import ie = Browser.ie; +import {FixedUiElement} from "../Base/FixedUiElement"; export default class AllDownloads extends ScrollableFullScreen { @@ -23,7 +26,9 @@ export default class AllDownloads extends ScrollableFullScreen { } private static GeneratePanel(): BaseUIElement { + const isExporting = new UIEventSource(false, "Pdf-is-exporting") const generatePdf = () => { + isExporting.setData(true) new ExportPDF( { freeDivId: "belowmap", @@ -31,21 +36,34 @@ export default class AllDownloads extends ScrollableFullScreen { location: State.state.locationControl, features: State.state.featurePipeline.features, layout: State.state.layoutToUse, - }) + }).isRunning.addCallbackAndRun(isRunning => isExporting.setData(isRunning)) } + const loading = Svg.loading_svg().SetClass("animate-rotate"); + + const icon = new Toggle(loading, Svg.floppy_ui(), isExporting); + const text = new Toggle( + new FixedUiElement("Exporting..."), + + new Combine([ + Translations.t.general.download.downloadAsPdf.Clone().SetClass("font-bold"), + Translations.t.general.download.downloadAsPdfHelper.Clone()] + ).SetClass("flex flex-col") + .onClick(() => { + generatePdf() + }), + isExporting); + const pdf = new Toggle( - new SubtleButton(Svg.floppy_ui(), - new Combine([Translations.t.general.download.downloadAsPdf.Clone().SetClass("font-bold"), - Translations.t.general.download.downloadAsPdfHelper.Clone()] - ).SetClass("flex flex-col")) - .onClick(generatePdf), + new SubtleButton( + icon, + text), undefined, State.state.featureSwitchExportAsPdf ) - const exportPanel = new Toggle( + const exportPanel = new Toggle( new DownloadPanel(), undefined, State.state.featureSwitchEnableExport diff --git a/UI/ExportPDF.ts b/UI/ExportPDF.ts index 42da3b90fa..a2bf6c784e 100644 --- a/UI/ExportPDF.ts +++ b/UI/ExportPDF.ts @@ -33,6 +33,9 @@ export default class ExportPDF { private readonly _layout: UIEventSource; private _screenhotTaken = false; + public isRunning = new UIEventSource(true) + public loadedTiles = new UIEventSource(0) + constructor( options: { freeDivId: string, @@ -60,6 +63,8 @@ export default class ExportPDF { location: new UIEventSource(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: leaflet => window.setTimeout(() => { if (self._screenhotTaken) { return; @@ -137,7 +142,7 @@ export default class ExportPDF { doc.text(t.generatedWith.txt, 40, 23, { maxWidth: 125 }) - const backgroundLayer : BaseLayer = State.state.backgroundLayer.data + const backgroundLayer: BaseLayer = State.state.backgroundLayer.data const attribution = new FixedUiElement(backgroundLayer.layer().getAttribution() ?? backgroundLayer.name).ConstructElement().innerText doc.textWithLink(t.attr.txt, 40, 26.5, { maxWidth: 125, @@ -148,8 +153,8 @@ export default class ExportPDF { background: attribution }).txt, 40, 30) - let date = new Date().toISOString().substr(0,16) - + let date = new Date().toISOString().substr(0, 16) + doc.setFontSize(7) doc.text(t.versionInfo.Subs({ version: Constants.vNumber, @@ -157,7 +162,7 @@ export default class ExportPDF { }).txt, 40, 34, { maxWidth: 125 }) - + // Add the logo of the layout let img = document.createElement('img'); const imgSource = layout.icon @@ -188,6 +193,6 @@ export default class ExportPDF { doc.save(`MapComplete_${layout.title.txt}_${date}.pdf`); - + this.isRunning.setData(false) } } diff --git a/assets/svg/loading.svg b/assets/svg/loading.svg new file mode 100644 index 0000000000..767c0efdeb --- /dev/null +++ b/assets/svg/loading.svg @@ -0,0 +1,64 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/index.css b/index.css index c9eade2bf6..ee84202877 100644 --- a/index.css +++ b/index.css @@ -331,20 +331,7 @@ li::marker { width: 40em; max-height: calc(100vh - 15em); overflow-y: auto; - border-top-right-radius: 1em; - border-bottom-right-radius: 1em; - background-color: var(--background-color); - color: var(--foreground-color); -} - - -#messagesbox { - /*Only shown on big screens*/ - position: relative; - padding: 0; - pointer-events: all; - box-shadow: 0 0 10px var(--shadow-color); - width: min-content; + border-radius: 1em; background-color: var(--background-color); color: var(--foreground-color); }