Mercurial > gemma

annotate client/src/drawtool/Drawtool.vue @ 1213:9d93968db2cd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
replaced custom css with bootstrap classes
author Markus Kottlaender <markus@intevation.de>
date Mon, 19 Nov 2018 14:13:01 +0100
parents ddfdf440da24
children ba8cd80d68b6
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">
1213
9d93968db2cd replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents: 1204
diff changeset
3 <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool 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>
1213
9d93968db2cd replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents: 1204
diff changeset
6 <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool 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>
1213
9d93968db2cd replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents: 1204
diff changeset
9 <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool 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 background-color: white
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 padding: $small-offset
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 margin-left: $offset
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 height: $icon-width
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 width: $icon-height
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 margin-bottom: $offset
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 margin-right: $offset
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 z-index: 2
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 .inverted
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 color: #0077ff
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 </style>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 <script>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 /* 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
32 * 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
33 *
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 * SPDX-License-Identifier: AGPL-3.0-or-later
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 * License-Filename: LICENSES/AGPL-3.0.txt
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 *
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 * Copyright (C) 2018 by via donau
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 * – Österreichische Wasserstraßen-Gesellschaft mbH
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 * Software engineering by Intevation GmbH
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 *
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 * Author(s):
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 * Thomas Junk <thomas.junk@intevation.de>
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 * Markus Kottländer <markus.kottlaender@intevation.de>
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 import { mapState, mapGetters } from "vuex";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 import { getLength, getArea } from "ol/sphere.js";
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 import Draw from "ol/interaction/Draw.js";
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
48 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
49
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 export default {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 name: "drawtool",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 computed: {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 ...mapGetters("map", ["getLayerByName"]),
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
54 ...mapState("map", [
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
55 "drawMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
56 "drawTool",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
57 "cutMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
58 "cutTool",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
59 "openLayersMap"
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
60 ]),
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 ...mapState("bottlenecks", ["selectedSurvey"])
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 methods: {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 toggleLineMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 this.disableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 this.disableCutTool();
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
67 this.$store.commit(
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
68 "map/drawMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
69 this.drawMode !== "LineString" ? "LineString" : null
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
70 );
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 this.$store.commit("map/cutMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 if (this.drawMode) this.enableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 togglePolygonMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 this.disableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 this.disableCutTool();
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
77 this.$store.commit(
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
78 "map/drawMode",
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
79 this.drawMode !== "Polygon" ? "Polygon" : null
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
80 );
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 this.$store.commit("map/cutMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 if (this.drawMode) this.enableDrawTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 toggleCutMode() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 this.disableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 this.disableDrawTool();
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
87 this.$store.commit("map/cutMode", !this.cutMode);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 this.$store.commit("map/drawMode", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 if (this.cutMode) this.enableCutTool();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 enableDrawTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 drawVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 const drawTool = new Draw({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 source: drawVectorSrc,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 type: this.drawMode,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 maxPoints: this.drawMode === "LineString" ? 2 : 50
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 drawTool.on("drawstart", () => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 drawVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 this.$store.commit("map/setCurrentMeasurement", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 // 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
103 // pick it up
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 // 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
105 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 drawTool.on("drawend", this.drawEnd);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 this.$store.commit("map/drawTool", drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 this.openLayersMap.addInteraction(drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 disableDrawTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 this.$store.commit("map/setCurrentMeasurement", null);
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
112 this.getLayerByName("Draw Tool")
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
113 .data.getSource()
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
114 .clear();
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 this.openLayersMap.removeInteraction(this.drawTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 this.$store.commit("map/drawTool", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 drawEnd(event) {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 if (this.drawMode === "Polygon") {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 const areaSize = getArea(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 // 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
122 // so identify will show it
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 quantity: "Area",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 unitSymbol: areaSize > 100000 ? "km²" : "m²",
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
126 value:
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
127 areaSize > 100000
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
128 ? 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
129 : Math.round(areaSize)
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 if (this.drawMode === "LineString") {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 const length = getLength(event.feature.getGeometry());
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 this.$store.commit("map/setCurrentMeasurement", {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 quantity: "Length",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 unitSymbol: "m",
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 value: Math.round(length * 10) / 10
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 }
1175
2014711330dd Show identified window after measurement
Thomas Junk <thomas.junk@intevation.de>
parents: 1174
diff changeset
140 this.$store.commit("application/showIdentify", true);
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142 enableCutTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144 const cutTool = new Draw({
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 source: cutVectorSrc,
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 type: "LineString",
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
147 maxPoints: 2,
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
148 style: new Style({
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
149 stroke: new Stroke({
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
150 color: "#444",
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
151 width: 2,
1204
ddfdf440da24 made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents: 1197
diff changeset
152 lineDash: [7, 7]
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 image: new Circle({
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
155 fill: new Fill({ color: "#333" }),
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
156 stroke: new Stroke({ color: "#fff", width: 1.5 }),
1204
ddfdf440da24 made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents: 1197
diff changeset
157 radius: 6
1197
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
158 })
49740dcba52c changed cut tool style
Markus Kottlaender <markus@intevation.de>
parents: 1175
diff changeset
159 })
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
161 cutTool.on("drawstart", () => {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162 cutVectorSrc.clear();
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 // 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
164 // pick it up
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165 // 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
166 });
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 cutTool.on("drawend", this.cutEnd);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 this.$store.commit("map/cutTool", cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 this.openLayersMap.addInteraction(cutTool);
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 disableCutTool() {
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 this.$store.commit("map/setCurrentMeasurement", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 this.openLayersMap.removeInteraction(this.cutTool);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 this.$store.commit("map/cutTool", null);
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 },
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 cutEnd(event) {
1165
a44ac5193b38 fixed code duplication
Markus Kottlaender <markus@intevation.de>
parents: 1164
diff changeset
177 this.$store.dispatch("fairwayprofile/cut", event.feature);
1144
5f98d0c9d738 linted code
Markus Kottlaender <markus@intevation.de>
parents: 1140
diff changeset
178 }
1153
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
179 },
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
180 mounted() {
1156
9bef99a4a15f linting
Markus Kottlaender <markus@intevation.de>
parents: 1155
diff changeset
181 window.addEventListener("keydown", e => {
1153
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
182 // Escape
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
183 if (e.keyCode === 27) {
1155
a297793e5868 fixed bug with toggling draw tools
Markus Kottlaender <markus@intevation.de>
parents: 1154
diff changeset
184 this.$store.commit("map/drawMode", null);
a297793e5868 fixed bug with toggling draw tools
Markus Kottlaender <markus@intevation.de>
parents: 1154
diff changeset
185 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
186 this.disableDrawTool();
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
187 this.disableCutTool();
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
188 }
16d42e8183b3 cancel draw/cut tool by pressing escape key
Markus Kottlaender <markus@intevation.de>
parents: 1144
diff changeset
189 });
1140
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
190 }
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
191 };
2e06bc53b002 separating line/polygon/cut tools in UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
192 </script>