Mercurial > gemma
view client/src/application/Main.vue @ 691:d643ff60f607
Client: improve style of waterway axis.
* Add label and circle style to waterway axis via WFS.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 20 Sep 2018 14:33:34 +0200 |
parents | 83081ba6c9c1 |
children | badbc0207418 |
line wrap: on
line source
<template> <div class="main d-flex flex-column"> <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> <div v-if="isSplitscreen" class="profile d-flex flex-row"> <FairwayProfile :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins"></FairwayProfile> </div> </div> </template> <style lang="scss"> .profile { background-color: white; height: 50vh; } </style> <script> import Maplayer from "../map/Maplayer"; import FairwayProfile from "../fairway/Fairwayprofile"; import { mapGetters } from "vuex"; import debounce from "debounce"; export default { name: "mainview", components: { Maplayer, FairwayProfile }, data() { return { width: null, height: null, xScale: { x: 0, y: 300 }, yScaleLeft: { lo: 191, hi: 199 }, yScaleRight: { lo: -6, hi: 1 }, margin: { top: 20, right: 40, bottom: 20, left: 40 } }; }, computed: { ...mapGetters("application", ["isSplitscreen", "drawMode"]), ...mapGetters("fairwayprofile", ["currentProfile"]), xAxis() { return [this.xScale.x, this.xScale.y]; }, yAxisLeft() { return [this.yScaleLeft.lo, this.yScaleLeft.hi]; }, yAxisRight() { return [this.yScaleRight.lo, this.yScaleRight.hi]; }, margins() { return this.margin; } }, created() { window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100); }, updated() { if (!document.querySelector(".profile")) return; this.height = document.querySelector(".profile").clientHeight - 25; this.width = document.querySelector(".profile").clientWidth - 100; }, destroyed() { window.removeEventListener("resize", debounce(this.scaleFairwayProfile)); }, methods: { scaleFairwayProfile() { this.height = document.querySelector(".profile").clientHeight - 25; this.width = document.querySelector(".profile").clientWidth - 100; } } }; </script>