Mercurial > gemma

changeset 1247:c14353e2cdb9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
repositioning of buttons (issue225)
author Markus Kottlaender <markus@intevation.de>
date Wed, 21 Nov 2018 08:15:28 +0100
parents a45fa8943254
children 9f37424f0cfa
files client/src/App.vue client/src/drawtool/Drawtool.vue client/src/identify/Identify.vue client/src/layers/Layers.vue client/src/morphtool/Morphtool.vue client/src/pdftool/Pdftool.vue client/src/store/map.js client/src/toolbar/Toolbar.vue client/src/toolbar/buttons/Cuttool.vue client/src/toolbar/buttons/Identify.vue client/src/toolbar/buttons/Layers.vue client/src/toolbar/buttons/Linetool.vue client/src/toolbar/buttons/Pdftool.vue client/src/toolbar/buttons/Polygontool.vue
diffstat 14 files changed, 427 insertions(+), 268 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Tue Nov 20 18:05:19 2018 +0100
+++ b/client/src/App.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -12,13 +12,13 @@
                 <div class="ml-auto d-flex">
                     <Layers v-if="routeName == 'mainview'"></Layers>
                     <Identify v-if="routeName == 'mainview'"></Identify>
+                    <Pdftool v-if="routeName == 'mainview'"></Pdftool>
+                    <Toolbar v-if="routeName == 'mainview'"></Toolbar>
                 </div>
             </div>
             <div class="flex-fill"></div>
             <div class="d-flex flex-row align-items-end">
                 <Morphtool v-if="routeName == 'mainview'"></Morphtool>
-                <Pdftool v-if="routeName == 'mainview'"></Pdftool>
-                <Drawtool v-if="routeName == 'mainview'"></Drawtool>
             </div>
             <Zoom v-if="routeName == 'mainview'"></Zoom>
         </div>
@@ -80,7 +80,6 @@
     }
   },
   components: {
-    Drawtool: () => import("./drawtool/Drawtool"),
     Morphtool: () => import("./morphtool/Morphtool"),
     Pdftool: () => import("./pdftool/Pdftool"),
     Zoom: () => import("./zoom/zoom"),
@@ -88,7 +87,8 @@
     Layers: () => import("./layers/Layers"),
     Sidebar: () => import("./application/Sidebar"),
     Search: () => import("./application/Search"),
-    Contextbox: () => import("./application/Contextbox")
+    Contextbox: () => import("./application/Contextbox"),
+    Toolbar: () => import("./toolbar/Toolbar")
   }
 };
 </script>
--- a/client/src/drawtool/Drawtool.vue	Tue Nov 20 18:05:19 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,179 +0,0 @@
-<template>
-    <div class="d-flex flex-column">
-        <div @click="toggleLineTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
-            <i :class="['fa fa-pencil', {inverted: lineTool && lineTool.getActive()}]"></i>
-        </div>
-        <div @click="togglePolygonTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
-            <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i>
-        </div>
-        <div @click="toggleCutTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey">
-            <i :class="['fa fa-area-chart', {inverted: cutTool && cutTool.getActive()}]"></i>
-        </div>
-    </div>
-</template>
-
-<style lang="sass" scoped>
-.drawtool
-  height: $icon-width
-  width: $icon-height
-  z-index: 2
-
-.inverted
-  color: #0077ff
-</style>
-
-<script>
-/* This is Free Software under GNU Affero General Public License v >= 3.0
- * without warranty, see README.md and license for details.
- *
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * License-Filename: LICENSES/AGPL-3.0.txt
- *
- * Copyright (C) 2018 by via donau
- *   – Österreichische Wasserstraßen-Gesellschaft mbH
- * Software engineering by Intevation GmbH
- *
- * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
- * Markus Kottländer <markus.kottlaender@intevation.de>
- */
-import { mapState, mapGetters } from "vuex";
-import { getLength, getArea } from "ol/sphere.js";
-import Draw from "ol/interaction/Draw.js";
-import { Stroke, Style, Circle, Fill } from "ol/style.js";
-
-export default {
-  name: "drawtool",
-  computed: {
-    ...mapGetters("map", ["getLayerByName"]),
-    ...mapState("map", ["lineTool", "polygonTool", "cutTool", "openLayersMap"]),
-    ...mapState("bottlenecks", ["selectedSurvey"])
-  },
-  methods: {
-    toggleLineTool() {
-      this.lineTool.setActive(!this.lineTool.getActive());
-      this.polygonTool.setActive(false);
-      this.cutTool.setActive(false);
-      this.$store.commit("map/setCurrentMeasurement", null);
-      this.getLayerByName("Draw Tool")
-        .data.getSource()
-        .clear();
-    },
-    togglePolygonTool() {
-      this.polygonTool.setActive(!this.polygonTool.getActive());
-      this.lineTool.setActive(false);
-      this.cutTool.setActive(false);
-      this.$store.commit("map/setCurrentMeasurement", null);
-      this.getLayerByName("Draw Tool")
-        .data.getSource()
-        .clear();
-    },
-    toggleCutTool() {
-      this.cutTool.setActive(!this.cutTool.getActive());
-      this.lineTool.setActive(false);
-      this.polygonTool.setActive(false);
-      this.$store.commit("map/setCurrentMeasurement", null);
-    },
-    lineEnd(event) {
-      const length = getLength(event.feature.getGeometry());
-      this.$store.commit("map/setCurrentMeasurement", {
-        quantity: "Length",
-        unitSymbol: "m",
-        value: Math.round(length * 10) / 10
-      });
-      this.$store.commit("application/showIdentify", true);
-    },
-    polygonEnd(event) {
-      const areaSize = getArea(event.feature.getGeometry());
-      this.$store.commit("map/setCurrentMeasurement", {
-        quantity: "Area",
-        unitSymbol: areaSize > 100000 ? "km²" : "m²",
-        value:
-          areaSize > 100000
-            ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
-            : Math.round(areaSize)
-      });
-      this.$store.commit("application/showIdentify", true);
-    },
-    cutEnd(event) {
-      this.$store.dispatch("fairwayprofile/cut", event.feature);
-    }
-  },
-  created() {
-    if (!this.lineTool) {
-      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
-      const lineTool = new Draw({
-        source: drawVectorSrc,
-        type: "LineString",
-        maxPoints: 2
-      });
-      lineTool.setActive(false);
-      lineTool.on("drawstart", () => {
-        drawVectorSrc.clear();
-        this.$store.commit("map/setCurrentMeasurement", null);
-      });
-      lineTool.on("drawend", this.lineEnd);
-      this.$store.commit("map/lineTool", lineTool);
-      this.openLayersMap.addInteraction(lineTool);
-    }
-
-    if (!this.polygonTool) {
-      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
-      const polygonTool = new Draw({
-        source: drawVectorSrc,
-        type: "Polygon",
-        maxPoints: 50
-      });
-      polygonTool.setActive(false);
-      polygonTool.on("drawstart", () => {
-        drawVectorSrc.clear();
-        this.$store.commit("map/setCurrentMeasurement", null);
-      });
-      polygonTool.on("drawend", this.polygonEnd);
-      this.$store.commit("map/polygonTool", polygonTool);
-      this.openLayersMap.addInteraction(polygonTool);
-    }
-
-    if (!this.cutTool) {
-      const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
-      const cutTool = new Draw({
-        source: cutVectorSrc,
-        type: "LineString",
-        maxPoints: 2,
-        style: new Style({
-          stroke: new Stroke({
-            color: "#444",
-            width: 2,
-            lineDash: [7, 7]
-          }),
-          image: new Circle({
-            fill: new Fill({ color: "#333" }),
-            stroke: new Stroke({ color: "#fff", width: 1.5 }),
-            radius: 6
-          })
-        })
-      });
-      cutTool.setActive(false);
-      cutTool.on("drawstart", () => {
-        cutVectorSrc.clear();
-      });
-      cutTool.on("drawend", this.cutEnd);
-      this.$store.commit("map/cutTool", cutTool);
-      this.openLayersMap.addInteraction(cutTool);
-    }
-  },
-  mounted() {
-    window.addEventListener("keydown", e => {
-      // Escape
-      if (e.keyCode === 27) {
-        this.lineTool.setActive(false);
-        this.polygonTool.setActive(false);
-        this.cutTool.setActive(false);
-        this.getLayerByName("Draw Tool")
-          .data.getSource()
-          .clear();
-      }
-    });
-  }
-};
-</script>
--- a/client/src/identify/Identify.vue	Tue Nov 20 18:05:19 2018 +0100
+++ b/client/src/identify/Identify.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -1,20 +1,9 @@
 <template>
-    <div class="position-relative ml-3">
-        <div
-            @click="$store.commit('application/showIdentify', !showIdentify)"
-            class="d-flex flex-column ui-element minimizer mt-1"
-        >
-            <div :class="infoStyle">
-                <i class="fa fa-info"></i>
-            </div>
-        </div>
-        <div :class="identifyStyle">
-            <div v-if="showIdentify" class="card-body">
-                <div class="headline">
-                    <h4>Identified</h4>
-                </div>
-                <hr>
-                <div class="d-flex flex-column features">
+    <div class="position-relative mx-2">
+        <div :class="style">
+            <div v-if="showIdentify" class="p-3 d-flex flex-column">
+                <h4 class="pb-3 border-bottom">Identified</h4>
+                <div class="d-flex flex-column features flex-grow-1">
                     <small v-if="currentMeasurement">
                         <b>
                           {{ currentMeasurement.quantity }}
@@ -33,9 +22,12 @@
                             </small>
                         </div>
                     </div>
+                    <div v-if="!currentMeasurement && !identifiedFeatures.length" class="text-muted small text-center my-auto">
+                        No features identified.
+                    </div>
                 </div>
-                <div class="versioninfo">
-                    <hr>gemma
+                <div class="versioninfo border-top pt-1 mt-3">
+                    gemma
                     <a href="https://hg.intevation.de/gemma/file/tip">source-code</a>
                     {{ versionStr }}
                     <br>Some data ©
@@ -58,19 +50,13 @@
   opacity: $slight-transparent
 
 .identifycollapsed
-  min-height: $icon-height
-  width: $icon-width
+  min-height: 0
+  width: 0
   transition: $transition-fast
 
 .identifyexpanded
+  min-height: $identify-height
   width: $identify-width
-
-.minimizer
-  position: absolute
-  z-index: 2
-  right: 0
-  height: $icon-width
-  width: $icon-height
 </style>
 
 <script>
@@ -96,21 +82,14 @@
     ...mapGetters("application", ["versionStr"]),
     ...mapState("application", ["showIdentify"]),
     ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
-    identifyStyle() {
+    style() {
       return [
-        "ui-element rounded identify shadow bg-white text-left",
+        "ui-element rounded identify shadow bg-white text-left d-flex",
         {
           identifyexpanded: this.showIdentify,
           identifycollapsed: !this.showIdentify
         }
       ];
-    },
-    infoStyle() {
-      return {
-        info: true,
-        "text-info":
-          this.identifiedFeatures && this.identifiedFeatures.length > 0
-      };
     }
   },
   methods: {
--- a/client/src/layers/Layers.vue	Tue Nov 20 18:05:19 2018 +0100
+++ b/client/src/layers/Layers.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -1,18 +1,17 @@
 <template>
-    <div class="position-relative ml-auto">
-        <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer position-absolute mt-1">
-            <div>
-                <i class="fa fa-th-list"></i>
-            </div>
-        </div>
-        <div :class="layerSelectStyle">
-            <div v-if="showLayers" class="p-3 border-0 layers">
-                <div class="headline">
-                    <h4>Layers</h4>
-                </div>
-                <hr>
+    <div class="position-relative mx-2">
+        <div :class="style">
+            <div v-if="showLayers" class="p-3">
+                <h4 class="pb-3 border-bottom">Layers</h4>
                 <div class="d-flex flex-column">
-                    <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layersForLegend" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
+                    <Layerselect
+                        v-for="(layer, index) in layersForLegend"
+                        :layerindex="index"
+                        :layername="layer.name"
+                        :key="layer.name"
+                        :isVisible="layer.isVisible"
+                        @visibilityToggled="visibilityToggled"
+                    ></Layerselect>
                 </div>
             </div>
         </div>
@@ -24,19 +23,13 @@
   opacity: $slight-transparent
 
 .layerselectioncollapsed
-  min-height: $icon-height
-  width: $icon-width
+  min-height: 0
+  width: 0
   transition: $transition-fast
 
 .layerselectionexpanded
   min-height: $layerselect-height
   width: $layerselect-width
-
-.minimizer
-  z-index: 2
-  right: 0
-  height: $icon-width
-  width: $icon-height
 </style>
 
 <script>
@@ -64,7 +57,7 @@
   computed: {
     ...mapGetters("map", ["layersForLegend"]),
     ...mapState("application", ["showLayers"]),
-    layerSelectStyle() {
+    style() {
       return [
         "ui-element rounded layerselection bg-white shadow",
         {
--- a/client/src/morphtool/Morphtool.vue	Tue Nov 20 18:05:19 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -1,5 +1,5 @@
 <template>
-    <div class="mb-3 ml-auto rounded position-relative">
+    <div class="mb-3 mr-3 ml-auto rounded position-relative">
         <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow">
             <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4>
             <hr>
--- a/client/src/pdftool/Pdftool.vue	Tue Nov 20 18:05:19 2018 +0100
+++ b/client/src/pdftool/Pdftool.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -1,16 +1,9 @@
 <template>
-    <div class="pdftool position-absolute mr-3 mb-3" :style="selectedSurvey ? 'bottom: 140px' : ''">
-        <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="d-flex flex-column ui-element minimizer position-absolute mt-1">
-            <i :class="['fa', 'mt-1', {'fa-file-pdf-o': !showPdfTool}, {'fa-close': showPdfTool}]"></i>
-        </div>
+    <div class="position-relative mx-2">
         <div :class="style">
-            <div v-if="showPdfTool" class="card-body">
-                <div class="headline">
-                    <h4>Generate PDF</h4>
-                </div>
-                <hr>
+            <div v-if="showPdfTool" class="p-3 d-flex flex-column">
+                <h4 class="pb-3 border-bottom">Generate PDF</h4>
                 <b>Chose format:</b>
-                <br>
                 <select v-model="form.format" class="d-block w-100">
                     <option>landscape</option>
                     <option>portrait</option>
@@ -44,26 +37,16 @@
 
 <style lang="sass" scoped>
 .pdftool
-  bottom: 96px
-  right: 0
-
-.inner
   opacity: $slight-transparent
 
 .pdftoolcollapsed
-  min-height: $icon-height
-  width: $icon-width
+  min-height: 0
+  width: 0
   transition: $transition-fast
 
 .pdftoolexpanded
-  width: $identify-width
-
-.minimizer
-  z-index: 2
-  right: 0
-  top: 0
-  height: $icon-width
-  width: $icon-height
+  min-height: 204px
+  width: 16rem
 </style>
 
 <script>
@@ -99,7 +82,7 @@
     ...mapState("bottlenecks", ["selectedSurvey"]),
     style() {
       return [
-        "ui-element rounded inner ml-2 bg-white text-left shadow",
+        "ui-element rounded pdftool bg-white shadow",
         {
           pdftoolexpanded: this.showPdfTool,
           pdftoolcollapsed: !this.showPdfTool
--- a/client/src/store/map.js	Tue Nov 20 18:05:19 2018 +0100
+++ b/client/src/store/map.js	Wed Nov 21 08:15:28 2018 +0100
@@ -37,7 +37,7 @@
   state: {
     openLayersMap: null,
     identifiedFeatures: [], // map features identified by clicking on the map
-    currentMeasurement: null, // distance or area from drawTool
+    currentMeasurement: null, // distance or area from line-/polygon-/cutTool
     lineTool: null, // open layers interaction object (Draw)
     polygonTool: null, // open layers interaction object (Draw)
     cutTool: null, // open layers interaction object (Draw)
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/toolbar/Toolbar.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -0,0 +1,77 @@
+<template>
+    <div class="ml-3">
+        <Identify></Identify>
+        <Layers></Layers>
+        <Linetool></Linetool>
+        <Polygontool></Polygontool>
+        <Cuttool></Cuttool>
+        <Pdftool></Pdftool>
+    </div>
+</template>
+
+<style lang="sass">
+// not scoped to affect nested components
+.toolbar-button
+  height: $icon-width
+  width: $icon-height
+  align-items: center
+  justify-content: center
+  display: flex
+  background: #fff
+  margin-bottom: $offset
+  border-radius: $border-radius
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
+  z-index: 2
+  pointer-events: auto
+  .inverted
+    color: #07f
+  .grey
+    color: #ddd
+</style>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState, mapGetters } from "vuex";
+
+export default {
+  name: "toolbar",
+  components: {
+    Identify: () => import("./buttons/Identify.vue"),
+    Layers: () => import("./buttons/Layers.vue"),
+    Linetool: () => import("./buttons/Linetool.vue"),
+    Polygontool: () => import("./buttons/Polygontool.vue"),
+    Cuttool: () => import("./buttons/Cuttool.vue"),
+    Pdftool: () => import("./buttons/Pdftool.vue")
+  },
+  computed: {
+    ...mapGetters("map", ["getLayerByName"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"])
+  },
+  mounted() {
+    window.addEventListener("keydown", e => {
+      // Escape
+      if (e.keyCode === 27) {
+        this.lineTool.setActive(false);
+        this.polygonTool.setActive(false);
+        this.cutTool.setActive(false);
+        this.$store.commit("map/setCurrentMeasurement", null);
+        this.getLayerByName("Draw Tool")
+          .data.getSource()
+          .clear();
+      }
+    });
+  }
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/toolbar/buttons/Cuttool.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -0,0 +1,76 @@
+<template>
+  <div @click="toggleCutTool" class="toolbar-button">
+      <i :class="['fa fa-area-chart', { inverted: cutTool && cutTool.getActive(), grey: !selectedSurvey }]"></i>
+  </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState, mapGetters } from "vuex";
+import Draw from "ol/interaction/Draw.js";
+import { Stroke, Style, Circle, Fill } from "ol/style.js";
+
+export default {
+  name: "cuttool",
+  computed: {
+    ...mapGetters("map", ["getLayerByName"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool", "openLayersMap"]),
+    ...mapState("bottlenecks", ["selectedSurvey"])
+  },
+  methods: {
+    toggleCutTool() {
+      console.log(this.selectedSurvey);
+      if (this.selectedSurvey) {
+        this.cutTool.setActive(!this.cutTool.getActive());
+        this.lineTool.setActive(false);
+        this.polygonTool.setActive(false);
+        this.$store.commit("map/setCurrentMeasurement", null);
+      }
+    },
+    cutEnd(event) {
+      this.$store.dispatch("fairwayprofile/cut", event.feature);
+    }
+  },
+  created() {
+    if (!this.cutTool) {
+      const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
+      const cutTool = new Draw({
+        source: cutVectorSrc,
+        type: "LineString",
+        maxPoints: 2,
+        style: new Style({
+          stroke: new Stroke({
+            color: "#444",
+            width: 2,
+            lineDash: [7, 7]
+          }),
+          image: new Circle({
+            fill: new Fill({ color: "#333" }),
+            stroke: new Stroke({ color: "#fff", width: 1.5 }),
+            radius: 6
+          })
+        })
+      });
+      cutTool.setActive(false);
+      cutTool.on("drawstart", () => {
+        cutVectorSrc.clear();
+      });
+      cutTool.on("drawend", this.cutEnd);
+      this.$store.commit("map/cutTool", cutTool);
+      this.openLayersMap.addInteraction(cutTool);
+    }
+  }
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/toolbar/buttons/Identify.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -0,0 +1,29 @@
+<template>
+    <div @click="$store.commit('application/showLayers', !showLayers)" class="toolbar-button">
+        <i :class="['fa fa-th-list', {inverted: showLayers}]"></i>
+    </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+
+export default {
+  name: "layers",
+  computed: {
+    ...mapState("application", ["showLayers"])
+  }
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/toolbar/buttons/Layers.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -0,0 +1,29 @@
+<template>
+    <div @click="$store.commit('application/showIdentify', !showIdentify)" class="toolbar-button">
+        <i :class="['fa fa-info', {inverted: showIdentify}]"></i>
+    </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+
+export default {
+  name: "identify",
+  computed: {
+    ...mapState("application", ["showIdentify"])
+  }
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/toolbar/buttons/Linetool.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -0,0 +1,70 @@
+<template>
+    <div @click="toggleLineTool" class="toolbar-button">
+        <i :class="['fa fa-pencil', {inverted: lineTool && lineTool.getActive()}]"></i>
+    </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState, mapGetters } from "vuex";
+import { getLength } from "ol/sphere.js";
+import Draw from "ol/interaction/Draw.js";
+
+export default {
+  name: "linetool",
+  computed: {
+    ...mapGetters("map", ["getLayerByName"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool", "openLayersMap"])
+  },
+  methods: {
+    toggleLineTool() {
+      this.lineTool.setActive(!this.lineTool.getActive());
+      this.polygonTool.setActive(false);
+      this.cutTool.setActive(false);
+      this.$store.commit("map/setCurrentMeasurement", null);
+      this.getLayerByName("Draw Tool")
+        .data.getSource()
+        .clear();
+    },
+    lineEnd(event) {
+      const length = getLength(event.feature.getGeometry());
+      this.$store.commit("map/setCurrentMeasurement", {
+        quantity: "Length",
+        unitSymbol: "m",
+        value: Math.round(length * 10) / 10
+      });
+      this.$store.commit("application/showIdentify", true);
+    }
+  },
+  created() {
+    if (!this.lineTool) {
+      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
+      const lineTool = new Draw({
+        source: drawVectorSrc,
+        type: "LineString",
+        maxPoints: 2
+      });
+      lineTool.setActive(false);
+      lineTool.on("drawstart", () => {
+        drawVectorSrc.clear();
+        this.$store.commit("map/setCurrentMeasurement", null);
+      });
+      lineTool.on("drawend", this.lineEnd);
+      this.$store.commit("map/lineTool", lineTool);
+      this.openLayersMap.addInteraction(lineTool);
+    }
+  }
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/toolbar/buttons/Pdftool.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -0,0 +1,29 @@
+<template>
+    <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="toolbar-button">
+        <i :class="['fa fa-file-pdf-o', {inverted: showPdfTool}]"></i>
+    </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+
+export default {
+  name: "pdftool",
+  computed: {
+    ...mapState("application", ["showPdfTool"])
+  }
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/toolbar/buttons/Polygontool.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -0,0 +1,73 @@
+<template>
+    <div @click="togglePolygonTool" class="toolbar-button">
+        <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i>
+    </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState, mapGetters } from "vuex";
+import { getArea } from "ol/sphere.js";
+import Draw from "ol/interaction/Draw.js";
+
+export default {
+  name: "polygontool",
+  computed: {
+    ...mapGetters("map", ["getLayerByName"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool", "openLayersMap"])
+  },
+  methods: {
+    togglePolygonTool() {
+      this.polygonTool.setActive(!this.polygonTool.getActive());
+      this.lineTool.setActive(false);
+      this.cutTool.setActive(false);
+      this.$store.commit("map/setCurrentMeasurement", null);
+      this.getLayerByName("Draw Tool")
+        .data.getSource()
+        .clear();
+    },
+    polygonEnd(event) {
+      const areaSize = getArea(event.feature.getGeometry());
+      this.$store.commit("map/setCurrentMeasurement", {
+        quantity: "Area",
+        unitSymbol: areaSize > 100000 ? "km²" : "m²",
+        value:
+          areaSize > 100000
+            ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
+            : Math.round(areaSize)
+      });
+      this.$store.commit("application/showIdentify", true);
+    }
+  },
+  created() {
+    if (!this.polygonTool) {
+      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
+      const polygonTool = new Draw({
+        source: drawVectorSrc,
+        type: "Polygon",
+        maxPoints: 50
+      });
+      polygonTool.setActive(false);
+      polygonTool.on("drawstart", () => {
+        drawVectorSrc.clear();
+        this.$store.commit("map/setCurrentMeasurement", null);
+      });
+      polygonTool.on("drawend", this.polygonEnd);
+      this.$store.commit("map/polygonTool", polygonTool);
+      this.openLayersMap.addInteraction(polygonTool);
+    }
+  }
+};
+</script>