Mercurial > gemma

comparison client/src/components/fairway/Profiles.vue @ 3062:87e0422cffa7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: draw/cut tools work now with multiple maps
author Markus Kottlaender <markus@intevation.de>
date Tue, 16 Apr 2019 12:49:29 +0200
parents 1ef2f4179d30
children 57255fda7594
comparison
equal deleted inserted replaced
3061:563176194d74 3062:87e0422cffa7
183 </div> 183 </div>
184 <div 184 <div
185 :class="startPoint && endPoint && !selectedCut ? 'w-50' : 'w-100'" 185 :class="startPoint && endPoint && !selectedCut ? 'w-50' : 'w-100'"
186 > 186 >
187 <button class="btn btn-info btn-sm w-100" @click="toggleCutTool"> 187 <button class="btn btn-info btn-sm w-100" @click="toggleCutTool">
188 <font-awesome-icon 188 <font-awesome-icon :icon="cutToolEnabled ? 'times' : 'plus'" />
189 :icon="cutTool && cutTool.getActive() ? 'times' : 'plus'" 189 {{ cutToolEnabled ? "Cancel" : "New" }}
190 />
191 {{ cutTool && cutTool.getActive() ? "Cancel" : "New" }}
192 </button> 190 </button>
193 </div> 191 </div>
194 </div> 192 </div>
195 <div v-if="showLabelInput" class="mt-2"> 193 <div v-if="showLabelInput" class="mt-2">
196 <small class="text-muted"> 194 <small class="text-muted">
262 showLabelInput: false 260 showLabelInput: false
263 }; 261 };
264 }, 262 },
265 computed: { 263 computed: {
266 ...mapState("application", ["showProfiles"]), 264 ...mapState("application", ["showProfiles"]),
267 ...mapState("map", ["lineTool", "polygonTool", "cutTool"]), 265 ...mapState("map", ["openLayersMaps", "cutToolEnabled"]),
268 ...mapState("bottlenecks", [ 266 ...mapState("bottlenecks", [
269 "bottlenecksList", 267 "bottlenecksList",
270 "surveys", 268 "surveys",
271 "surveysLoading" 269 "surveysLoading"
272 ]), 270 ]),
347 set(cut) { 345 set(cut) {
348 this.$store.commit("fairwayprofile/selectedCut", cut); 346 this.$store.commit("fairwayprofile/selectedCut", cut);
349 if (!cut) { 347 if (!cut) {
350 this.$store.commit("fairwayprofile/clearCurrentProfile"); 348 this.$store.commit("fairwayprofile/clearCurrentProfile");
351 this.$store.commit("application/showSplitscreen", false); 349 this.$store.commit("application/showSplitscreen", false);
352 this.openLayersMap 350 this.openLayersMaps.forEach(m => {
353 .getLayer("CUTTOOL") 351 m.getLayer("CUTTOOL")
354 .getSource() 352 .getSource()
355 .clear(); 353 .clear();
354 });
356 } 355 }
357 } 356 }
358 }, 357 },
359 additionalSurveys() { 358 additionalSurveys() {
360 return this.surveys.filter(survey => survey !== this.selectedSurvey); 359 return this.surveys.filter(survey => survey !== this.selectedSurvey);
455 this.$store.commit("application/splitscreenLoading", false); 454 this.$store.commit("application/splitscreenLoading", false);
456 }); 455 });
457 } 456 }
458 }, 457 },
459 toggleCutTool() { 458 toggleCutTool() {
460 this.cutTool.setActive(!this.cutTool.getActive()); 459 this.$store.commit("map/cutToolEnabled", !this.cutToolEnabled);
461 this.lineTool.setActive(false); 460 this.$store.commit("map/lineToolEnabled", false);
462 this.polygonTool.setActive(false); 461 this.$store.commit("map/polygonToolEnabled", false);
463 this.$store.commit("map/setCurrentMeasurement", null); 462 this.$store.commit("map/setCurrentMeasurement", null);
464 }, 463 },
465 onCopyCoordinates() { 464 onCopyCoordinates() {
466 displayInfo({ 465 displayInfo({
467 message: this.$gettext("Coordinates copied to clipboard!") 466 message: this.$gettext("Coordinates copied to clipboard!")
483 applyCoordinates(coordinates) { 482 applyCoordinates(coordinates) {
484 // allow only numbers 483 // allow only numbers
485 coordinates = coordinates.filter(c => Number(c) === c); 484 coordinates = coordinates.filter(c => Number(c) === c);
486 if (coordinates.length === 4) { 485 if (coordinates.length === 4) {
487 // draw line on map 486 // draw line on map
488 this.openLayersMap 487 this.openLayersMaps.forEach(m => {
489 .getLayer("CUTTOOL") 488 m.getLayer("CUTTOOL")
490 .getSource() 489 .getSource()
491 .clear(); 490 .clear();
491 });
492 const cut = new Feature({ 492 const cut = new Feature({
493 geometry: new LineString([ 493 geometry: new LineString([
494 [coordinates[0], coordinates[1]], 494 [coordinates[0], coordinates[1]],
495 [coordinates[2], coordinates[3]] 495 [coordinates[2], coordinates[3]]
496 ]).transform("EPSG:4326", "EPSG:3857") 496 ]).transform("EPSG:4326", "EPSG:3857")
497 }); 497 });
498 this.openLayersMap 498 this.openLayersMaps.forEach(m => {
499 .getLayer("CUTTOOL") 499 m.getLayer("CUTTOOL")
500 .getSource() 500 .getSource()
501 .addFeature(cut); 501 .addFeature(cut);
502 });
502 503
503 // draw diagram 504 // draw diagram
504 this.$store.dispatch("fairwayprofile/cut", cut); 505 this.$store.dispatch("fairwayprofile/cut", cut);
505 } else { 506 } else {
506 displayError({ 507 displayError({