Mercurial > gemma

annotate client/src/drawtool/Drawtool.vue @ 1217:ba8cd80d68b6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
made more use of bootstrap classes instead of custom css
author Markus Kottlaender <markus@intevation.de>
date Mon, 19 Nov 2018 15:20:22 +0100
parents 9d93968db2cd
children 74562dc29e10
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">
1217
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
3 <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 </div>
1217
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
6 <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 </div>
1217
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
9 <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey">
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i>
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", [
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
50 "drawMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
51 "drawTool",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
52 "cutMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
53 "cutTool",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
54 "openLayersMap"
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
55 ]),
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 ...mapState("bottlenecks", ["selectedSurvey"])
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 methods: {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 toggleLineMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 this.disableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 this.disableCutTool();
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
62 this.$store.commit(
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
63 "map/drawMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
64 this.drawMode !== "LineString" ? "LineString" : null
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
65 );
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 this.$store.commit("map/cutMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 if (this.drawMode) this.enableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 togglePolygonMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 this.disableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 this.disableCutTool();
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
72 this.$store.commit(
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
73 "map/drawMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
74 this.drawMode !== "Polygon" ? "Polygon" : null
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
75 );
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 this.$store.commit("map/cutMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 if (this.drawMode) this.enableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 toggleCutMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 this.disableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 this.disableDrawTool();
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
82 this.$store.commit("map/cutMode", !this.cutMode);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 this.$store.commit("map/drawMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 if (this.cutMode) this.enableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 enableDrawTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 drawVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 const drawTool = new Draw({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 source: drawVectorSrc,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 type: this.drawMode,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 maxPoints: this.drawMode === "LineString" ? 2 : 50
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 drawTool.on("drawstart", () => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 drawVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 this.$store.commit("map/setCurrentMeasurement", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 // we are not setting an id here, to avoid the regular identify to
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 // pick it up
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 // event.feature.setId("drawn.1"); // unique id for new feature
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 drawTool.on("drawend", this.drawEnd);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 this.$store.commit("map/drawTool", drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 this.openLayersMap.addInteraction(drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 disableDrawTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 this.$store.commit("map/setCurrentMeasurement", null);
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
107 this.getLayerByName("Draw Tool")
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
108 .data.getSource()
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
109 .clear();
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 this.openLayersMap.removeInteraction(this.drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 this.$store.commit("map/drawTool", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 drawEnd(event) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 if (this.drawMode === "Polygon") {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 const areaSize = getArea(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 // also place the a rounded areaSize in a property,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 // so identify will show it
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 quantity: "Area",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 unitSymbol: areaSize > 100000 ? "km²" : "m²",
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
121 value:
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
122 areaSize > 100000
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
123 ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
124 : Math.round(areaSize)
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 if (this.drawMode === "LineString") {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 const length = getLength(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 quantity: "Length",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 unitSymbol: "m",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 value: Math.round(length * 10) / 10
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 }
1175
2014711330dd Show identified window after measurement
Thomas Junk <thomas.junk@intevation.de>
parents: 1174
diff changeset
135 this.$store.commit("application/showIdentify", true);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 enableCutTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 const cutTool = new Draw({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 source: cutVectorSrc,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 type: "LineString",
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
142 maxPoints: 2,
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
143 style: new Style({
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
144 stroke: new Stroke({
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
145 color: "#444",
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
146 width: 2,
1204
ddfdf440da24 made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents: 1197
diff changeset
147 lineDash: [7, 7]
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
148 }),
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
149 image: new Circle({
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
150 fill: new Fill({ color: "#333" }),
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
151 stroke: new Stroke({ color: "#fff", width: 1.5 }),
1204
ddfdf440da24 made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents: 1197
diff changeset
152 radius: 6
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
153 })
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
154 })
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
155 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
156 cutTool.on("drawstart", () => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 cutVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 // we are not setting an id here, to avoid the regular identify to
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
159 // pick it up
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 // event.feature.setId("drawn.1"); // unique id for new feature
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);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166 disableCutTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 this.$store.commit("map/setCurrentMeasurement", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 this.openLayersMap.removeInteraction(this.cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 this.$store.commit("map/cutTool", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 cutEnd(event) {
1165
a44ac5193b38 fixed code duplication
Markus Kottlaender <markus@intevation.de>
parents: 1164
diff changeset
172 this.$store.dispatch("fairwayprofile/cut", event.feature);
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
173 }
1153
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
174 },
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
175 mounted() {
1156
9bef99a4a15f linting
Markus Kottlaender <markus@intevation.de>
parents: 1155
diff changeset
176 window.addEventListener("keydown", e => {
1153
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
177 // Escape
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
178 if (e.keyCode === 27) {
1155
a297793e5868 fixed bug with toggling draw tools
Markus Kottlaender <markus@intevation.de>
parents: 1154
diff changeset
179 this.$store.commit("map/drawMode", null);
a297793e5868 fixed bug with toggling draw tools
Markus Kottlaender <markus@intevation.de>
parents: 1154
diff changeset
180 this.$store.commit("map/cutMode", false);
1153
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
181 this.disableDrawTool();
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
182 this.disableCutTool();
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
183 }
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
184 });
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
185 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
186 };
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
187 </script>