<template>
    <div class="ml-2">
        <Identify></Identify>
        <Layers></Layers>
        <Cuttool></Cuttool>
        <Linetool></Linetool>
        <Polygontool></Polygontool>
        <Pdftool></Pdftool>
    </div>
</template>

<style lang="sass">
// not scoped to affect nested components
// doen't work when put in application/assets/application.sass... why??? o_O
.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: $shadow-xs
  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>