Mercurial > gemma

comparison 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
comparison
equal deleted inserted replaced
1236:ec4b06d3a3a8 1237:74562dc29e10
1 <template> 1 <template>
2 <div class="d-flex flex-column"> 2 <div class="d-flex flex-column">
3 <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> 3 <div @click="toggleLineTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
4 <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i> 4 <i :class="['fa fa-pencil', {inverted: lineTool && lineTool.getActive()}]"></i>
5 </div> 5 </div>
6 <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> 6 <div @click="togglePolygonTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
7 <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i> 7 <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i>
8 </div> 8 </div>
9 <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey"> 9 <div @click="toggleCutTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey">
10 <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i> 10 <i :class="['fa fa-area-chart', {inverted: cutTool && cutTool.getActive()}]"></i>
11 </div> 11 </div>
12 </div> 12 </div>
13 </template> 13 </template>
14 14
15 <style lang="sass" scoped> 15 <style lang="sass" scoped>
45 export default { 45 export default {
46 name: "drawtool", 46 name: "drawtool",
47 computed: { 47 computed: {
48 ...mapGetters("map", ["getLayerByName"]), 48 ...mapGetters("map", ["getLayerByName"]),
49 ...mapState("map", [ 49 ...mapState("map", [
50 "drawMode", 50 "lineTool",
51 "drawTool", 51 "polygonTool",
52 "cutMode",
53 "cutTool", 52 "cutTool",
54 "openLayersMap" 53 "openLayersMap"
55 ]), 54 ]),
56 ...mapState("bottlenecks", ["selectedSurvey"]) 55 ...mapState("bottlenecks", ["selectedSurvey"])
57 }, 56 },
58 methods: { 57 methods: {
59 toggleLineMode() { 58 toggleLineTool() {
60 this.disableDrawTool(); 59 this.lineTool.setActive(!this.lineTool.getActive());
61 this.disableCutTool(); 60 this.polygonTool.setActive(false);
62 this.$store.commit( 61 this.cutTool.setActive(false);
63 "map/drawMode", 62 this.$store.commit("map/setCurrentMeasurement", null);
64 this.drawMode !== "LineString" ? "LineString" : null 63 this.getLayerByName("Draw Tool").data.getSource().clear();
65 );
66 this.$store.commit("map/cutMode", null);
67 if (this.drawMode) this.enableDrawTool();
68 }, 64 },
69 togglePolygonMode() { 65 togglePolygonTool() {
70 this.disableDrawTool(); 66 this.polygonTool.setActive(!this.polygonTool.getActive());
71 this.disableCutTool(); 67 this.lineTool.setActive(false);
72 this.$store.commit( 68 this.cutTool.setActive(false);
73 "map/drawMode", 69 this.$store.commit("map/setCurrentMeasurement", null);
74 this.drawMode !== "Polygon" ? "Polygon" : null 70 this.getLayerByName("Draw Tool").data.getSource().clear();
75 );
76 this.$store.commit("map/cutMode", null);
77 if (this.drawMode) this.enableDrawTool();
78 }, 71 },
79 toggleCutMode() { 72 toggleCutTool() {
80 this.disableCutTool(); 73 this.cutTool.setActive(!this.cutTool.getActive());
81 this.disableDrawTool(); 74 this.lineTool.setActive(false);
82 this.$store.commit("map/cutMode", !this.cutMode); 75 this.polygonTool.setActive(false);
83 this.$store.commit("map/drawMode", null); 76 this.$store.commit("map/setCurrentMeasurement", null);
84 if (this.cutMode) this.enableCutTool();
85 }, 77 },
86 enableDrawTool() { 78 lineEnd(event) {
79 const length = getLength(event.feature.getGeometry());
80 this.$store.commit("map/setCurrentMeasurement", {
81 quantity: "Length",
82 unitSymbol: "m",
83 value: Math.round(length * 10) / 10
84 });
85 this.$store.commit("application/showIdentify", true);
86 },
87 polygonEnd(event) {
88 const areaSize = getArea(event.feature.getGeometry());
89 this.$store.commit("map/setCurrentMeasurement", {
90 quantity: "Area",
91 unitSymbol: areaSize > 100000 ? "km²" : "m²",
92 value:
93 areaSize > 100000
94 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
95 ? Math.round(areaSize / 1000) / 1000
96 : Math.round(areaSize)
97 });
98 this.$store.commit("application/showIdentify", true);
99 },
100 cutEnd(event) {
101 this.$store.dispatch("fairwayprofile/cut", event.feature);
102 }
103 },
104 created() {
105 if (!this.lineTool) {
87 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource(); 106 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
88 drawVectorSrc.clear(); 107 const lineTool = new Draw({
89 const drawTool = new Draw({
90 source: drawVectorSrc, 108 source: drawVectorSrc,
91 type: this.drawMode, 109 type: "LineString",
92 maxPoints: this.drawMode === "LineString" ? 2 : 50 110 maxPoints: 2
93 }); 111 });
94 drawTool.on("drawstart", () => { 112 lineTool.setActive(false);
113 lineTool.on("drawstart", () => {
95 drawVectorSrc.clear(); 114 drawVectorSrc.clear();
96 this.$store.commit("map/setCurrentMeasurement", null); 115 this.$store.commit("map/setCurrentMeasurement", null);
97 // we are not setting an id here, to avoid the regular identify to
98 // pick it up
99 // event.feature.setId("drawn.1"); // unique id for new feature
100 }); 116 });
101 drawTool.on("drawend", this.drawEnd); 117 lineTool.on("drawend", this.lineEnd);
102 this.$store.commit("map/drawTool", drawTool); 118 this.$store.commit("map/lineTool", lineTool);
103 this.openLayersMap.addInteraction(drawTool); 119 this.openLayersMap.addInteraction(lineTool);
104 }, 120 }
105 disableDrawTool() { 121
106 this.$store.commit("map/setCurrentMeasurement", null); 122 if (!this.polygonTool) {
107 this.getLayerByName("Draw Tool") 123 const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
108 .data.getSource() 124 const polygonTool = new Draw({
109 .clear(); 125 source: drawVectorSrc,
110 this.openLayersMap.removeInteraction(this.drawTool); 126 type: "Polygon",
111 this.$store.commit("map/drawTool", null); 127 maxPoints: 50
112 }, 128 });
113 drawEnd(event) { 129 polygonTool.setActive(false);
114 if (this.drawMode === "Polygon") { 130 polygonTool.on("drawstart", () => {
115 const areaSize = getArea(event.feature.getGeometry()); 131 drawVectorSrc.clear();
116 // also place the a rounded areaSize in a property, 132 this.$store.commit("map/setCurrentMeasurement", null);
117 // so identify will show it 133 });
118 this.$store.commit("map/setCurrentMeasurement", { 134 polygonTool.on("drawend", this.polygonEnd);
119 quantity: "Area", 135 this.$store.commit("map/polygonTool", polygonTool);
120 unitSymbol: areaSize > 100000 ? "km²" : "m²", 136 this.openLayersMap.addInteraction(polygonTool);
121 value: 137 }
122 areaSize > 100000 138
123 ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m² 139 if (!this.cutTool) {
124 : Math.round(areaSize)
125 });
126 }
127 if (this.drawMode === "LineString") {
128 const length = getLength(event.feature.getGeometry());
129 this.$store.commit("map/setCurrentMeasurement", {
130 quantity: "Length",
131 unitSymbol: "m",
132 value: Math.round(length * 10) / 10
133 });
134 }
135 this.$store.commit("application/showIdentify", true);
136 },
137 enableCutTool() {
138 const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource(); 140 const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
139 const cutTool = new Draw({ 141 const cutTool = new Draw({
140 source: cutVectorSrc, 142 source: cutVectorSrc,
141 type: "LineString", 143 type: "LineString",
142 maxPoints: 2, 144 maxPoints: 2,
151 stroke: new Stroke({ color: "#fff", width: 1.5 }), 153 stroke: new Stroke({ color: "#fff", width: 1.5 }),
152 radius: 6 154 radius: 6
153 }) 155 })
154 }) 156 })
155 }); 157 });
158 cutTool.setActive(false);
156 cutTool.on("drawstart", () => { 159 cutTool.on("drawstart", () => {
157 cutVectorSrc.clear(); 160 cutVectorSrc.clear();
158 // we are not setting an id here, to avoid the regular identify to
159 // pick it up
160 // event.feature.setId("drawn.1"); // unique id for new feature
161 }); 161 });
162 cutTool.on("drawend", this.cutEnd); 162 cutTool.on("drawend", this.cutEnd);
163 this.$store.commit("map/cutTool", cutTool); 163 this.$store.commit("map/cutTool", cutTool);
164 this.openLayersMap.addInteraction(cutTool); 164 this.openLayersMap.addInteraction(cutTool);
165 },
166 disableCutTool() {
167 this.$store.commit("map/setCurrentMeasurement", null);
168 this.openLayersMap.removeInteraction(this.cutTool);
169 this.$store.commit("map/cutTool", null);
170 },
171 cutEnd(event) {
172 this.$store.dispatch("fairwayprofile/cut", event.feature);
173 } 165 }
174 }, 166 },
175 mounted() { 167 mounted() {
176 window.addEventListener("keydown", e => { 168 window.addEventListener("keydown", e => {
177 // Escape 169 // Escape
178 if (e.keyCode === 27) { 170 if (e.keyCode === 27) {
179 this.$store.commit("map/drawMode", null); 171 this.lineTool.setActive(false);
180 this.$store.commit("map/cutMode", false); 172 this.polygonTool.setActive(false);
181 this.disableDrawTool(); 173 this.cutTool.setActive(false);
182 this.disableCutTool(); 174 this.getLayerByName("Draw Tool").data.getSource().clear();
183 } 175 }
184 }); 176 });
185 } 177 }
186 }; 178 };
187 </script> 179 </script>