|
649
|
1 <template>
|
|
|
2 <div @click="drawLine" class="ui-element d-flex shadow drawtool">
|
|
|
3 <i :class="icon"></i>
|
|
|
4 </div>
|
|
|
5 </template>
|
|
|
6
|
|
|
7 <style lang="scss">
|
|
|
8 .drawtool {
|
|
|
9 position: absolute;
|
|
|
10 bottom: 0;
|
|
|
11 right: 0;
|
|
|
12 background-color: white;
|
|
|
13 padding: $small-offset;
|
|
|
14 border-radius: $border-radius;
|
|
|
15 margin-left: $offset;
|
|
|
16 height: $icon-width;
|
|
|
17 width: $icon-height;
|
|
|
18 margin-bottom: $offset;
|
|
|
19 margin-right: $offset;
|
|
|
20 z-index: 2;
|
|
|
21 }
|
|
|
22 </style>
|
|
|
23
|
|
|
24 <script>
|
|
|
25 import { mapGetters } from "vuex";
|
|
|
26
|
|
|
27 export default {
|
|
|
28 name: "linetool",
|
|
|
29 methods: {
|
|
|
30 drawLine() {
|
|
|
31 this.$store.commit("application/toggleDrawModeLine");
|
|
|
32 }
|
|
|
33 },
|
|
|
34 computed: {
|
|
|
35 ...mapGetters("application", ["drawMode"]),
|
|
|
36 icon() {
|
|
|
37 return {
|
|
|
38 fa: true,
|
|
|
39 "fa-pencil": !this.drawMode,
|
|
|
40 "fa-pencil-square": this.drawMode
|
|
|
41 };
|
|
|
42 }
|
|
|
43 }
|
|
|
44 };
|
|
|
45 </script>
|
