From 8ba0c366ead79cd113790c7716f7ba6e2312530f Mon Sep 17 00:00:00 2001 From: Grammostola Date: Wed, 1 Feb 2023 09:47:42 +0100 Subject: [PATCH 1/2] fix: really disable print buttons while print preview map is loading --- scss/_print.scss | 5 +++++ src/controls/print/print-component.js | 25 +++++++++++++++++++------ src/controls/print/print-toolbar.js | 13 +++++++++++-- 3 files changed, 35 insertions(+), 8 deletions(-) diff --git a/scss/_print.scss b/scss/_print.scss index 5e759a1b7..fa0207767 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -16,6 +16,11 @@ $print-scale-line-font-size: $font-size-smallest; overflow: hidden; } +// for print buttons while print preview map is loading +.print-button-disable { + pointer-events: none; +} + // scale-line .print-scale-line { background: $print-control-bg-color; diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js index df1ada5a3..cadec0939 100644 --- a/src/controls/print/print-component.js +++ b/src/controls/print/print-component.js @@ -1,5 +1,6 @@ import olAttribution from 'ol/control/Attribution'; import olScaleLine from 'ol/control/ScaleLine'; +import { unByKey } from 'ol/Observable'; import { getPointResolution } from 'ol/proj'; import TileImage from 'ol/source/TileImage'; import TileWMSSource from 'ol/source/TileWMS'; @@ -326,12 +327,16 @@ const PrintComponent = function PrintComponent(options = {}) { const printInteractionToggle = PrintInteractionToggle({ map, target, mapInteractionsActive, pageSettings: viewer.getViewerOptions().pageSettings }); const printToolbar = PrintToolbar(); - map.getAllLayers().forEach((l) => { - // if we begin loading any data we want to disable the print buttons... - l.getSource().on(['tileloadstart', 'imageloadstart'], () => printToolbar.setDisabled(true)); - }); - // ...they then get re-enabled when the map has finished rendering - map.on('rendercomplete', () => printToolbar.setDisabled(false)); + + let mapLoadListenRefs; + + function disablePrintToolbar() { + printToolbar.setDisabled(true); + } + + function enablePrintToolbar() { + printToolbar.setDisabled(false); + } return Component({ name: 'printComponent', @@ -455,6 +460,8 @@ const PrintComponent = function PrintComponent(options = {}) { printMapComponent.dispatch('change:togglePrintLegend', { showPrintLegend }); }, close() { + unByKey(mapLoadListenRefs[0]); + unByKey(mapLoadListenRefs[1]); // GH-1537: remove layers temporarily added for print and unhide layers hidden for print viewer.getLayersByProperty('added-for-print', true).forEach((l) => viewer.removeLayer(l)); viewer.getLayersByProperty('hidden-for-print', true).forEach((l) => { @@ -554,6 +561,12 @@ const PrintComponent = function PrintComponent(options = {}) { })); }, async onRender() { + function addMapLoadListeners() { + const startEvRef = map.on('loadstart', disablePrintToolbar); + const endEvRef = map.on('loadend', enablePrintToolbar); + return [startEvRef, endEvRef]; + } + mapLoadListenRefs = addMapLoadListeners(); printScale = 0; today = new Date(Date.now()); viewerMapTarget = map.getTarget(); diff --git a/src/controls/print/print-toolbar.js b/src/controls/print/print-toolbar.js index 771ec5ae5..e87317a30 100644 --- a/src/controls/print/print-toolbar.js +++ b/src/controls/print/print-toolbar.js @@ -37,8 +37,17 @@ const PrintToolbar = function PrintToolbar() { `; }, setDisabled(disabled) { - pngButton.setState(disabled ? 'disabled' : 'initial'); - pdfButton.setState(disabled ? 'disabled' : 'initial'); + if (disabled) { + pngButton.setState('disabled'); + document.getElementById(pngButton.getId()).classList.add('print-button-disable'); + pdfButton.setState('disabled'); + document.getElementById(pdfButton.getId()).classList.add('print-button-disable'); + } else { + pngButton.setState('initial'); + document.getElementById(pngButton.getId()).classList.remove('print-button-disable'); + pdfButton.setState('initial'); + document.getElementById(pdfButton.getId()).classList.remove('print-button-disable'); + } } }); }; From aeb8ec2d68f5e8dec630628b2dfa94a211644eab Mon Sep 17 00:00:00 2001 From: Grammostola Date: Wed, 1 Feb 2023 14:12:11 +0100 Subject: [PATCH 2/2] fix: revise button event disabling after suggestion --- scss/_print.scss | 5 ----- src/controls/print/print-toolbar.js | 8 ++------ 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/scss/_print.scss b/scss/_print.scss index fa0207767..5e759a1b7 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -16,11 +16,6 @@ $print-scale-line-font-size: $font-size-smallest; overflow: hidden; } -// for print buttons while print preview map is loading -.print-button-disable { - pointer-events: none; -} - // scale-line .print-scale-line { background: $print-control-bg-color; diff --git a/src/controls/print/print-toolbar.js b/src/controls/print/print-toolbar.js index e87317a30..8f772e04e 100644 --- a/src/controls/print/print-toolbar.js +++ b/src/controls/print/print-toolbar.js @@ -18,10 +18,10 @@ const PrintToolbar = function PrintToolbar() { pdfButton.on('click', this.dispatchPrint.bind(this)); }, dispatchExport() { - this.dispatch('PNG'); + if (pngButton.getState() !== 'disabled') this.dispatch('PNG'); }, dispatchPrint() { - this.dispatch('PDF'); + if (pdfButton.getState() !== 'disabled') this.dispatch('PDF'); }, onRender() { this.dispatch('render'); @@ -39,14 +39,10 @@ const PrintToolbar = function PrintToolbar() { setDisabled(disabled) { if (disabled) { pngButton.setState('disabled'); - document.getElementById(pngButton.getId()).classList.add('print-button-disable'); pdfButton.setState('disabled'); - document.getElementById(pdfButton.getId()).classList.add('print-button-disable'); } else { pngButton.setState('initial'); - document.getElementById(pngButton.getId()).classList.remove('print-button-disable'); pdfButton.setState('initial'); - document.getElementById(pdfButton.getId()).classList.remove('print-button-disable'); } } });