Mercurial > gemma
changeset 3688:af06045e87c9
client: diagrams: wait (longer) for legend child component to render before rendering diagram (see comments for explanation)
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 18 Jun 2019 16:40:04 +0200 |
| parents | 23ff3f48c0f9 |
| children | 268348a58c9c |
| files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
| diffstat | 5 files changed, 37 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Tue Jun 18 16:23:00 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue Jun 18 16:40:04 2019 +0200 @@ -155,7 +155,15 @@ window.removeEventListener("resize", this.resizeListenerFunction); }, mounted() { - this.drawDiagram(); + // Nasty but necessary if we don't want to use the updated hook to re-draw + // the diagram because this would re-draw it also for irrelevant reasons. + // In this case we need to wait for the child component (DiagramLegend) to + // render. According to the docs (https://vuejs.org/v2/api/#mounted) this + // should be possible with $nextTick() but it doesn't work because it does + // not guarantee that the DOM is not only updated but also re-painted on the + // screen. + setTimeout(this.drawDiagram, 150); + this.templates[0] = this.defaultTemplate; this.form.template = this.templates[0]; this.templateData = this.form.template;
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Tue Jun 18 16:23:00 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Tue Jun 18 16:40:04 2019 +0200 @@ -146,7 +146,15 @@ window.removeEventListener("resize", this.resizeListenerFunction); }, mounted() { - this.drawDiagram(); + // Nasty but necessary if we don't want to use the updated hook to re-draw + // the diagram because this would re-draw it also for irrelevant reasons. + // In this case we need to wait for the child component (DiagramLegend) to + // render. According to the docs (https://vuejs.org/v2/api/#mounted) this + // should be possible with $nextTick() but it doesn't work because it does + // not guarantee that the DOM is not only updated but also re-painted on the + // screen. + setTimeout(this.drawDiagram, 150); + this.templates[0] = this.defaultTemplate; this.form.template = this.templates[0]; this.templateData = this.form.template;
--- a/client/src/components/fairway/Fairwayprofile.vue Tue Jun 18 16:23:00 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Tue Jun 18 16:40:04 2019 +0200 @@ -807,7 +807,15 @@ window.addEventListener("resize", this.resizeListenerFunction); }, mounted() { - this.drawDiagram(); + // Nasty but necessary if we don't want to use the updated hook to re-draw + // the diagram because this would re-draw it also for irrelevant reasons. + // In this case we need to wait for the child component (DiagramLegend) to + // render. According to the docs (https://vuejs.org/v2/api/#mounted) this + // should be possible with $nextTick() but it doesn't work because it does + // not guarantee that the DOM is not only updated but also re-painted on the + // screen. + setTimeout(this.drawDiagram, 150); + this.templates[0] = this.defaultTemplate; this.form.template = this.templates[0]; this.templateData = this.form.template;
--- a/client/src/components/gauge/HydrologicalConditions.vue Tue Jun 18 16:23:00 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Tue Jun 18 16:40:04 2019 +0200 @@ -1121,7 +1121,15 @@ window.addEventListener("resize", this.resizeListenerFunction); }, mounted() { - this.drawDiagram(); + // Nasty but necessary if we don't want to use the updated hook to re-draw + // the diagram because this would re-draw it also for irrelevant reasons. + // In this case we need to wait for the child component (DiagramLegend) to + // render. According to the docs (https://vuejs.org/v2/api/#mounted) this + // should be possible with $nextTick() but it doesn't work because it does + // not guarantee that the DOM is not only updated but also re-painted on the + // screen. + setTimeout(this.drawDiagram, 150); + this.templates[0] = this.defaultTemplate; this.form.template = this.templates[0]; this.templateData = this.form.template;
--- a/client/src/components/gauge/Waterlevel.vue Tue Jun 18 16:23:00 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Tue Jun 18 16:40:04 2019 +0200 @@ -1269,7 +1269,7 @@ // should be possible with $nextTick() but it doesn't work because it does // not guarantee that the DOM is not only updated but also re-painted on the // screen. - setTimeout(this.drawDiagram, 50); + setTimeout(this.drawDiagram, 150); this.templates[0] = this.defaultTemplate; this.form.template = this.templates[0];