From b5d02dad47fbbe0260f85da9ccd62ba5f0905fe8 Mon Sep 17 00:00:00 2001
From: Erik Timmers <e.timmers@gmail.com>
Date: Sun, 18 Mar 2018 12:20:51 +0100
Subject: [PATCH] Fix freeze on export PDF example

The PDF was only generated AFTER requesting new tiles. When no new tiles where needed,
the callback never completed. Also fixed fitting the correct extent.

Fixes #7830.
---
 examples/export-pdf.js | 67 ++++++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/examples/export-pdf.js b/examples/export-pdf.js
index 6b89e5a2d8..205a3134c5 100644
--- a/examples/export-pdf.js
+++ b/examples/export-pdf.js
@@ -5,6 +5,7 @@ import {defaults as defaultControls} from '../src/ol/control.js';
 import WKT from '../src/ol/format/WKT.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
+import {unByKey} from '../src/ol/Observable.js';
 import OSM from '../src/ol/source/OSM.js';
 import VectorSource from '../src/ol/source/Vector.js';
 
@@ -74,37 +75,51 @@ exportButton.addEventListener('click', function() {
     ++loading;
   };
 
-  function tileLoadEnd() {
-    ++loaded;
-    if (loading === loaded) {
-      const canvas = this;
-      window.setTimeout(function() {
-        loading = 0;
-        loaded = 0;
-        const data = canvas.toDataURL('image/png');
-        const pdf = new jsPDF('landscape', undefined, format);
-        pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
-        pdf.save('map.pdf');
-        source.un('tileloadstart', tileLoadStart);
-        source.un('tileloadend', tileLoadEnd, canvas);
-        source.un('tileloaderror', tileLoadEnd, canvas);
-        map.setSize(size);
-        map.getView().fit(extent);
-        map.renderSync();
-        exportButton.disabled = false;
-        document.body.style.cursor = 'auto';
-      }, 100);
-    }
+  let timer;
+  let keys = [];
+
+  function tileLoadEndFactory(canvas) {
+    return () => {
+      ++loaded;
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      if (loading === loaded) {
+        timer = window.setTimeout(() => {
+          loading = 0;
+          loaded = 0;
+          const data = canvas.toDataURL('image/jpeg');
+          const pdf = new jsPDF('landscape', undefined, format);
+          pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
+          pdf.save('map.pdf');
+          keys.forEach(unByKey);
+          keys = [];
+          map.setSize(size);
+          map.getView().fit(extent, {size});
+          map.renderSync();
+          exportButton.disabled = false;
+          document.body.style.cursor = 'auto';
+        }, 500);
+      }
+    };
   }
 
   map.once('postcompose', function(event) {
-    source.on('tileloadstart', tileLoadStart);
-    source.on('tileloadend', tileLoadEnd, event.context.canvas);
-    source.on('tileloaderror', tileLoadEnd, event.context.canvas);
+    const canvas = event.context.canvas;
+    const tileLoadEnd = tileLoadEndFactory(canvas);
+    keys = [
+      source.on('tileloadstart', tileLoadStart),
+      source.on('tileloadend', tileLoadEnd),
+      source.on('tileloaderror', tileLoadEnd)
+    ];
+    tileLoadEnd();
   });
 
-  map.setSize([width, height]);
-  map.getView().fit(extent);
+  const printSize = [width, height];
+  map.setSize(printSize);
+  map.getView().fit(extent, {size: printSize});
+  loaded = -1;
   map.renderSync();
 
 }, false);