Mercurial > gemma
changeset 1078:2ed3b4eaaab4
merge
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Fri, 26 Oct 2018 14:06:13 +0200 |
| parents | c58608084c11 (current diff) e99b2b7d76a1 (diff) |
| children | 5979b63cce9d |
| files | |
| diffstat | 8 files changed, 98 insertions(+), 32 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Fri Oct 26 14:04:37 2018 +0200 +++ b/client/src/App.vue Fri Oct 26 14:06:13 2018 +0200 @@ -7,14 +7,11 @@ <div class="midcontainer d-flex flex-row"> <div class="leftcontainer"> <Sidebar></Sidebar> + <Zoom></Zoom> <Bottlenecks></Bottlenecks> </div> - <div class="middle"> - - </div> - <div class="rightcontainer"> - - </div> + <div class="middle"></div> + <div class="rightcontainer"></div> </div> <div class="bottomcontainer d-flex flex-row align-items-end"> <Userbar></Userbar> @@ -24,7 +21,7 @@ </div> </div> <div class="d-flex flex-column"> - <router-view /> + <router-view/> </div> </div> </template> @@ -110,6 +107,7 @@ import Linetool from "./linetool/Linetool"; import Morphtool from "./morphtool/Morphtool"; import Pdftool from "./pdftool/Pdftool"; +import Zoom from "./zoom/zoom"; export default { name: "app", @@ -127,7 +125,8 @@ Userbar, Linetool, Morphtool, - Pdftool + Pdftool, + Zoom } }; </script>
--- a/client/src/application/Main.vue Fri Oct 26 14:04:37 2018 +0200 +++ b/client/src/application/Main.vue Fri Oct 26 14:06:13 2018 +0200 @@ -1,11 +1,6 @@ <template> <div class="main d-flex flex-column"> - <Maplayer - :split="isSplitscreen" - :lat="6155376" - :long="1819178" - :zoom="11" - ></Maplayer> + <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> <div v-if="isSplitscreen" class="profile d-flex flex-row"> <FairwayProfile :additionalSurveys="additionalSurveys" @@ -48,6 +43,8 @@ import { mapGetters, mapState } from "vuex"; import debounce from "debounce"; +const DELTA = 0.2; + export default { name: "mainview", components: { @@ -93,7 +90,7 @@ return [this.yScaleLeft.lo, hi]; }, yAxisRight() { - return [-this.maxAlt, 0]; + return [this.maxAlt * 1 + DELTA, -DELTA]; }, margins() { return this.margin;
--- a/client/src/application/assets/application.scss Fri Oct 26 14:04:37 2018 +0200 +++ b/client/src/application/assets/application.scss Fri Oct 26 14:06:13 2018 +0200 @@ -34,6 +34,7 @@ $transition: 0.5s; $x-large-offset: 3rem; $x-small-offset: 0.25rem; +$zoombutton-container-height: 120px; .debug { border: 1px solid red;
--- a/client/src/fairway/Fairwayprofile.vue Fri Oct 26 14:04:37 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Fri Oct 26 14:06:13 2018 +0200 @@ -265,7 +265,7 @@ }); graph .append("path") - .datum([{ x: startPoint, y: -depth }, { x: endPoint, y: -depth }]) + .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) .attr("fill", "#002AFF") .attr("stroke-opacity", 0.65) .attr("fill-opacity", 0.65) @@ -365,7 +365,7 @@ return xScale(d.x); }) .y(d => { - return yScaleRight(-d.y); + return yScaleRight(d.y); }); let profileArea = d3 .area() @@ -374,7 +374,7 @@ }) .y0(height) .y1(function(d) { - return yScaleRight(-d.y); + return yScaleRight(d.y); }); graph .append("path")
--- a/client/src/identify/Identify.vue Fri Oct 26 14:04:37 2018 +0200 +++ b/client/src/identify/Identify.vue Fri Oct 26 14:06:13 2018 +0200 @@ -12,6 +12,11 @@ </div> <hr> <div class="d-flex flex-column features"> + <small v-if="currentMeasurement"> + {{ currentMeasurement.quantity }} + ({{ currentMeasurement.unitSymbol }}): + {{ currentMeasurement.value }} + </small> <div v-for="feature of identifiedFeatures" :key="feature.getId()"> <div v-if="feature.getId()"> {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}: @@ -104,7 +109,7 @@ }, computed: { ...mapGetters("application", ["versionStr"]), - ...mapState("identifystore", ["identifiedFeatures"]), + ...mapState("identifystore", ["identifiedFeatures", "currentMeasurement"]), identifyStyle() { return { "ui-element": true,
--- a/client/src/linetool/Linetool.vue Fri Oct 26 14:04:37 2018 +0200 +++ b/client/src/linetool/Linetool.vue Fri Oct 26 14:06:13 2018 +0200 @@ -59,11 +59,10 @@ icon() { return { fa: true, - "fa-pencil": !this.selectedMorph, - "fa-pencil inverted": - !this.selectedMorph && this.drawMode === "LineString", "fa-area-chart": this.selectedMorph, - "fa-edit inverted": this.drawMode === "Polygon" + "fa-edit": !this.selectedMorph && this.drawMode === "Polygon", + "fa-pencil": !this.selectedMorph && this.drawMode !== "Polygon", + inverted: this.drawMode }; } }
--- a/client/src/map/Maplayer.vue Fri Oct 26 14:04:37 2018 +0200 +++ b/client/src/map/Maplayer.vue Fri Oct 26 14:06:13 2018 +0200 @@ -139,6 +139,8 @@ }); }, removeCurrentInteraction() { + this.$store.commit("identifystore/setCurrentMeasurement", null); + this.vectorSource.clear(); this.openLayersMap.removeInteraction(this.interaction); this.interaction = null; }, @@ -149,10 +151,12 @@ type: drawMode, maxPoints: drawMode === "LineString" ? 2 : 50 }); - draw.on("drawstart", event => { + draw.on("drawstart", () => { this.vectorSource.clear(); this.$store.commit("identifystore/setCurrentMeasurement", null); - event.feature.setId("drawn.1"); // unique id for new feature + // we are not setting an id here, to avoid the regular identify to + // pick it up + // event.feature.setId("drawn.1"); // unique id for new feature }); draw.on("drawend", this.drawEnd); return draw; @@ -163,18 +167,27 @@ // also place the a rounded areaSize in a property, // so identify will show it if (areaSize > 100000) { - // convert into 1 km² == 1000*1000 m² and round to 1000 m² - event.feature.set("area (km²)", Math.round(areaSize / 1000) / 1000); + this.$store.commit("identifystore/setCurrentMeasurement", { + quantity: "Area", + unitSymbol: "km²", + // convert into 1 km² == 1000*1000 m² and round to 1000 m² + value: Math.round(areaSize / 1000) / 1000 + }); } else { - event.feature.set("area (m²)", Math.round(areaSize)); + this.$store.commit("identifystore/setCurrentMeasurement", { + quantity: "Area", + unitSymbol: "m²", + value: Math.round(areaSize) + }); } } if (this.drawMode === "LineString") { const length = getLength(event.feature.getGeometry()); - this.$store.commit("identifystore/setCurrentMeasurement", length); - // also place the a rounded length in a property, - // so identify will show it - event.feature.set("length (m)", Math.round(length * 10) / 10); + this.$store.commit("identifystore/setCurrentMeasurement", { + quantity: "Length", + unitSymbol: "m", + value: Math.round(length * 10) / 10 + }); } // if a survey has been selected, request a profile
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/zoom/zoom.vue Fri Oct 26 14:06:13 2018 +0200 @@ -0,0 +1,52 @@ +<template> + <div class="d-flex flex-column buttoncontainer align-content-between"> + <button class="zoomButton shadow ui-element" @click="zoomIn">+</button> + <button class="zoomButton shadow ui-element" @click="zoomOut">-</button> + </div> +</template> +<style lang="scss" scoped> +.buttoncontainer { + width: $icon-width; + height: $zoombutton-container-height; + margin-top: $sidebar-height; + margin-left: $offset; +} +.zoomButton { + position: relative; + background-color: white; + border-radius: $border-radius; + min-height: $icon-width; + min-width: $icon-width; + margin-right: $offset; + margin-bottom: auto; + z-index: 2; + outline: none; + border: 0px; +} +</style> +<script> +import { mapState } from "vuex"; + +export default { + name: "zoom", + computed: { + ...mapState("mapstore", ["openLayersMap"]), + zoomLevel: { + get() { + return this.openLayersMap.getView().getZoom(); + }, + set(value) { + this.openLayersMap.getView().animate({ zoom: value }, 700); + } + } + }, + methods: { + zoomIn() { + this.zoomLevel = this.zoomLevel + 1; + }, + zoomOut() { + this.zoomLevel = this.zoomLevel - 1; + } + } +}; +</script>