Mercurial > gemma
changeset 1312:3c37017f5eb8
fixed cross profile diagram after switching to to admin context and back and it's responsive behavior
The recalculation of the available space (scaleFairwayProfile) needs to be done after removing the current diagram (in drawDiagram).
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 23 Nov 2018 13:57:31 +0100 |
parents | d5eda9f79610 |
children | e4e35fb2d995 |
files | client/src/components/map/Main.vue client/src/components/map/fairway/Fairwayprofile.vue |
diffstat | 2 files changed, 23 insertions(+), 30 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/Main.vue Fri Nov 23 13:52:34 2018 +0100 +++ b/client/src/components/map/Main.vue Fri Nov 23 13:57:31 2018 +0100 @@ -3,8 +3,6 @@ <Maplayer :split="showSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> <FairwayProfile :additionalSurveys="additionalSurveys" - :height="height" - :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" @@ -32,7 +30,6 @@ import Maplayer from "./Maplayer"; import FairwayProfile from "./fairway/Fairwayprofile"; import { mapState } from "vuex"; -import debounce from "debounce"; export default { name: "mainview", @@ -97,30 +94,6 @@ y: this.totalLength }; } - }, - created() { - window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100); - window.addEventListener("onbeforeprint", this.test); - }, - updated() { - this.scaleFairwayProfile(); - }, - destroyed() { - window.removeEventListener("resize", debounce(this.scaleFairwayProfile)); - }, - methods: { - test(evt) { - console.log("test: ", evt); - }, - scaleFairwayProfile() { - if (!document.querySelector(".fairwayprofile")) return; - const clientHeight = document.querySelector(".fairwayprofile") - .clientHeight; - const clientWidth = document.querySelector(".fairwayprofile").clientWidth; - if (!clientHeight || !clientWidth) return; - this.height = clientHeight; - this.width = clientWidth; - } } }; </script>
--- a/client/src/components/map/fairway/Fairwayprofile.vue Fri Nov 23 13:52:34 2018 +0100 +++ b/client/src/components/map/fairway/Fairwayprofile.vue Fri Nov 23 13:57:31 2018 +0100 @@ -155,14 +155,13 @@ import { displayError, displayInfo } from "../../../lib/errors.js"; import Feature from "ol/Feature"; import LineString from "ol/geom/LineString"; +import debounce from "debounce"; const GROUND_COLOR = "#4A2F06"; export default { name: "fairwayprofile", props: [ - "width", - "height", "xScale", "yScaleLeft", "yScaleRight", @@ -175,7 +174,9 @@ coordinatesInput: "", coordinatesSelect: null, cutLabel: "", - showLabelInput: false + showLabelInput: false, + width: null, + height: null }; }, computed: { @@ -304,6 +305,7 @@ this.coordinatesSelect = null; const chartDiv = document.querySelector(".fairwayprofile"); d3.select(".fairwayprofile svg").remove(); + this.scaleFairwayProfile(); let svg = d3.select(chartDiv).append("svg"); svg.attr("width", this.width); svg.attr("height", this.height); @@ -514,6 +516,15 @@ .attr("d", profileLine); } }, + scaleFairwayProfile() { + if (!document.querySelector(".fairwayprofile")) return; + const clientHeight = document.querySelector(".fairwayprofile") + .clientHeight; + const clientWidth = document.querySelector(".fairwayprofile").clientWidth; + if (!clientHeight || !clientWidth) return; + this.height = clientHeight; + this.width = clientWidth; + }, onCopyCoordinates() { displayInfo({ title: "Success", @@ -580,8 +591,17 @@ }); } }, + created() { + window.addEventListener("resize", debounce(this.drawDiagram), 100); + }, mounted() { this.drawDiagram(); + }, + updated() { + this.scaleFairwayProfile(); + }, + destroyed() { + window.removeEventListener("resize", debounce(this.drawDiagram)); } }; </script>