Mercurial > gemma

annotate client/src/drawtool/Drawtool.vue @ 1237:74562dc29e10

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refactored drawtool The map interactions (ol/interaction/Draw) were previously always removed and re-created. Now there are created and added to the map once and their active flag is used to toggle the tools. Results in cleaner code and easier separation of the buttons in the future.
author Markus Kottlaender <markus@intevation.de>
date Tue, 20 Nov 2018 13:03:24 +0100
parents ba8cd80d68b6
children 442399fc1b71
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
1154
0330a5a8480e removed test code
Markus Kottlaender <markus@intevation.de>
parents: 1153
diff changeset
2 <div class="d-flex flex-column">
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
3 <div @click="toggleLineTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
4 <i :class="['fa fa-pencil', {inverted: lineTool && lineTool.getActive()}]"></i>
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 </div>
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
6 <div @click="togglePolygonTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
7 <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i>
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 </div>
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
9 <div @click="toggleCutTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey">
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
10 <i :class="['fa fa-area-chart', {inverted: cutTool && cutTool.getActive()}]"></i>
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 </div>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 </div>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 </template>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 <style lang="sass" scoped>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 .drawtool
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 height: $icon-width
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 width: $icon-height
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 z-index: 2
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 .inverted
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 color: #0077ff
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 </style>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 <script>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 /* This is Free Software under GNU Affero General Public License v >= 3.0
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 * without warranty, see README.md and license for details.
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 *
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 * SPDX-License-Identifier: AGPL-3.0-or-later
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 * License-Filename: LICENSES/AGPL-3.0.txt
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 *
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 * Copyright (C) 2018 by via donau
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 * – Österreichische Wasserstraßen-Gesellschaft mbH
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 * Software engineering by Intevation GmbH
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 *
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 * Author(s):
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 * Thomas Junk <thomas.junk@intevation.de>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 * Markus Kottländer <markus.kottlaender@intevation.de>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 */
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 import { mapState, mapGetters } from "vuex";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 import { getLength, getArea } from "ol/sphere.js";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 import Draw from "ol/interaction/Draw.js";
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
43 import { Stroke, Style, Circle, Fill } from "ol/style.js";
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 export default {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 name: "drawtool",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 computed: {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 ...mapGetters("map", ["getLayerByName"]),
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
49 ...mapState("map", [
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
50 "lineTool",
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
51 "polygonTool",
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
52 "cutTool",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
53 "openLayersMap"
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
54 ]),
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 ...mapState("bottlenecks", ["selectedSurvey"])
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 methods: {
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
58 toggleLineTool() {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
59 this.lineTool.setActive(!this.lineTool.getActive());
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
60 this.polygonTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
61 this.cutTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
62 this.$store.commit("map/setCurrentMeasurement", null);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
63 this.getLayerByName("Draw Tool").data.getSource().clear();
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
64 },
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
65 togglePolygonTool() {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
66 this.polygonTool.setActive(!this.polygonTool.getActive());
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
67 this.lineTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
68 this.cutTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
69 this.$store.commit("map/setCurrentMeasurement", null);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
70 this.getLayerByName("Draw Tool").data.getSource().clear();
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
71 },
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
72 toggleCutTool() {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
73 this.cutTool.setActive(!this.cutTool.getActive());
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
74 this.lineTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
75 this.polygonTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
76 this.$store.commit("map/setCurrentMeasurement", null);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 },
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
78 lineEnd(event) {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
79 const length = getLength(event.feature.getGeometry());
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
80 this.$store.commit("map/setCurrentMeasurement", {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
81 quantity: "Length",
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
82 unitSymbol: "m",
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
83 value: Math.round(length * 10) / 10
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
84 });
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
85 this.$store.commit("application/showIdentify", true);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 },
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
87 polygonEnd(event) {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
88 const areaSize = getArea(event.feature.getGeometry());
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
89 this.$store.commit("map/setCurrentMeasurement", {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
90 quantity: "Area",
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
91 unitSymbol: areaSize > 100000 ? "km²" : "m²",
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
92 value:
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
93 areaSize > 100000
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
94 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
95 ? Math.round(areaSize / 1000) / 1000
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
96 : Math.round(areaSize)
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
97 });
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
98 this.$store.commit("application/showIdentify", true);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 },
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
100 cutEnd(event) {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
101 this.$store.dispatch("fairwayprofile/cut", event.feature);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
102 }
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
103 },
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
104 created() {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
105 if (!this.lineTool) {
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
107 const lineTool = new Draw({
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 source: drawVectorSrc,
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
109 type: "LineString",
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
110 maxPoints: 2
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 });
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
112 lineTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
113 lineTool.on("drawstart", () => {
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 drawVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 this.$store.commit("map/setCurrentMeasurement", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 });
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
117 lineTool.on("drawend", this.lineEnd);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
118 this.$store.commit("map/lineTool", lineTool);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
119 this.openLayersMap.addInteraction(lineTool);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
120 }
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
121
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
122 if (!this.polygonTool) {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
123 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
124 const polygonTool = new Draw({
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
125 source: drawVectorSrc,
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
126 type: "Polygon",
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
127 maxPoints: 50
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
128 });
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
129 polygonTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
130 polygonTool.on("drawstart", () => {
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
131 drawVectorSrc.clear();
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
132 this.$store.commit("map/setCurrentMeasurement", null);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
133 });
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
134 polygonTool.on("drawend", this.polygonEnd);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
135 this.$store.commit("map/polygonTool", polygonTool);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
136 this.openLayersMap.addInteraction(polygonTool);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
137 }
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
138
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
139 if (!this.cutTool) {
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 const cutTool = new Draw({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142 source: cutVectorSrc,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 type: "LineString",
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
144 maxPoints: 2,
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
145 style: new Style({
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
146 stroke: new Stroke({
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
147 color: "#444",
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
148 width: 2,
1204
ddfdf440da24 made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents: 1197
diff changeset
149 lineDash: [7, 7]
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
150 }),
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
151 image: new Circle({
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
152 fill: new Fill({ color: "#333" }),
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
153 stroke: new Stroke({ color: "#fff", width: 1.5 }),
1204
ddfdf440da24 made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents: 1197
diff changeset
154 radius: 6
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
155 })
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
156 })
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 });
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
158 cutTool.setActive(false);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
159 cutTool.on("drawstart", () => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 cutVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
161 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162 cutTool.on("drawend", this.cutEnd);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 this.$store.commit("map/cutTool", cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 this.openLayersMap.addInteraction(cutTool);
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
165 }
1153
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
166 },
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
167 mounted() {
1156
9bef99a4a15f linting
Markus Kottlaender <markus@intevation.de>
parents: 1155
diff changeset
168 window.addEventListener("keydown", e => {
1153
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
169 // Escape
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
170 if (e.keyCode === 27) {
1237
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
171 this.lineTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
172 this.polygonTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
173 this.cutTool.setActive(false);
74562dc29e10 refactored drawtool
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
174 this.getLayerByName("Draw Tool").data.getSource().clear();
1153
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
175 }
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
176 });
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
178 };
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
179 </script>