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

@@ -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() {
+  let timer;
-    ++loaded;
+  let keys = [];
-    if (loading === loaded) {
+
-      const canvas = this;
+  function tileLoadEndFactory(canvas) {
-      window.setTimeout(function() {
+    return () => {
-        loading = 0;
+      ++loaded;
-        loaded = 0;
+      if (timer) {
-        const data = canvas.toDataURL('image/png');
+        clearTimeout(timer);
-        const pdf = new jsPDF('landscape', undefined, format);
+        timer = null;
-        pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
+      }
-        pdf.save('map.pdf');
+      if (loading === loaded) {
-        source.un('tileloadstart', tileLoadStart);
+        timer = window.setTimeout(() => {
-        source.un('tileloadend', tileLoadEnd, canvas);
+          loading = 0;
-        source.un('tileloaderror', tileLoadEnd, canvas);
+          loaded = 0;
-        map.setSize(size);
+          const data = canvas.toDataURL('image/jpeg');
-        map.getView().fit(extent);
+          const pdf = new jsPDF('landscape', undefined, format);
-        map.renderSync();
+          pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
-        exportButton.disabled = false;
+          pdf.save('map.pdf');
-        document.body.style.cursor = 'auto';
+          keys.forEach(unByKey);
-      }, 100);
+          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);
+    const canvas = event.context.canvas;
-    source.on('tileloadend', tileLoadEnd, event.context.canvas);
+    const tileLoadEnd = tileLoadEndFactory(canvas);
-    source.on('tileloaderror', tileLoadEnd, event.context.canvas);
+    keys = [
+      source.on('tileloadstart', tileLoadStart),
+      source.on('tileloadend', tileLoadEnd),
+      source.on('tileloaderror', tileLoadEnd)
+    ];
+    tileLoadEnd();
   });
 
-  map.setSize([width, height]);
+  const printSize = [width, height];
-  map.getView().fit(extent);
+  map.setSize(printSize);
+  map.getView().fit(extent, {size: printSize});
+  loaded = -1;
   map.renderSync();
 
 }, false);