# HG changeset patch # User Markus Kottlaender # Date 1542715404 -3600 # Node ID 74562dc29e10e09e5b4b5cb78760942ef9dd0eb2 # Parent ec4b06d3a3a8c8223853061bced4b1ebff94a541 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. diff -r ec4b06d3a3a8 -r 74562dc29e10 client/src/drawtool/Drawtool.vue --- a/client/src/drawtool/Drawtool.vue Tue Nov 20 12:47:16 2018 +0100 +++ b/client/src/drawtool/Drawtool.vue Tue Nov 20 13:03:24 2018 +0100 @@ -1,13 +1,13 @@ @@ -47,94 +47,96 @@ computed: { ...mapGetters("map", ["getLayerByName"]), ...mapState("map", [ - "drawMode", - "drawTool", - "cutMode", + "lineTool", + "polygonTool", "cutTool", "openLayersMap" ]), ...mapState("bottlenecks", ["selectedSurvey"]) }, methods: { - toggleLineMode() { - this.disableDrawTool(); - this.disableCutTool(); - this.$store.commit( - "map/drawMode", - this.drawMode !== "LineString" ? "LineString" : null - ); - this.$store.commit("map/cutMode", null); - if (this.drawMode) this.enableDrawTool(); + toggleLineTool() { + this.lineTool.setActive(!this.lineTool.getActive()); + this.polygonTool.setActive(false); + this.cutTool.setActive(false); + this.$store.commit("map/setCurrentMeasurement", null); + this.getLayerByName("Draw Tool").data.getSource().clear(); + }, + togglePolygonTool() { + this.polygonTool.setActive(!this.polygonTool.getActive()); + this.lineTool.setActive(false); + this.cutTool.setActive(false); + this.$store.commit("map/setCurrentMeasurement", null); + this.getLayerByName("Draw Tool").data.getSource().clear(); + }, + toggleCutTool() { + this.cutTool.setActive(!this.cutTool.getActive()); + this.lineTool.setActive(false); + this.polygonTool.setActive(false); + this.$store.commit("map/setCurrentMeasurement", null); }, - togglePolygonMode() { - this.disableDrawTool(); - this.disableCutTool(); - this.$store.commit( - "map/drawMode", - this.drawMode !== "Polygon" ? "Polygon" : null - ); - this.$store.commit("map/cutMode", null); - if (this.drawMode) this.enableDrawTool(); + lineEnd(event) { + const length = getLength(event.feature.getGeometry()); + this.$store.commit("map/setCurrentMeasurement", { + quantity: "Length", + unitSymbol: "m", + value: Math.round(length * 10) / 10 + }); + this.$store.commit("application/showIdentify", true); }, - toggleCutMode() { - this.disableCutTool(); - this.disableDrawTool(); - this.$store.commit("map/cutMode", !this.cutMode); - this.$store.commit("map/drawMode", null); - if (this.cutMode) this.enableCutTool(); + polygonEnd(event) { + const areaSize = getArea(event.feature.getGeometry()); + this.$store.commit("map/setCurrentMeasurement", { + quantity: "Area", + unitSymbol: areaSize > 100000 ? "km²" : "m²", + value: + areaSize > 100000 + // convert into 1 km² == 1000*1000 m² and round to 1000 m² + ? Math.round(areaSize / 1000) / 1000 + : Math.round(areaSize) + }); + this.$store.commit("application/showIdentify", true); }, - enableDrawTool() { + cutEnd(event) { + this.$store.dispatch("fairwayprofile/cut", event.feature); + } + }, + created() { + if (!this.lineTool) { const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource(); - drawVectorSrc.clear(); - const drawTool = new Draw({ + const lineTool = new Draw({ source: drawVectorSrc, - type: this.drawMode, - maxPoints: this.drawMode === "LineString" ? 2 : 50 + type: "LineString", + maxPoints: 2 }); - drawTool.on("drawstart", () => { + lineTool.setActive(false); + lineTool.on("drawstart", () => { drawVectorSrc.clear(); this.$store.commit("map/setCurrentMeasurement", null); - // we are not setting an id here, to avoid the regular identify to - // pick it up - // event.feature.setId("drawn.1"); // unique id for new feature }); - drawTool.on("drawend", this.drawEnd); - this.$store.commit("map/drawTool", drawTool); - this.openLayersMap.addInteraction(drawTool); - }, - disableDrawTool() { - this.$store.commit("map/setCurrentMeasurement", null); - this.getLayerByName("Draw Tool") - .data.getSource() - .clear(); - this.openLayersMap.removeInteraction(this.drawTool); - this.$store.commit("map/drawTool", null); - }, - drawEnd(event) { - if (this.drawMode === "Polygon") { - const areaSize = getArea(event.feature.getGeometry()); - // also place the a rounded areaSize in a property, - // so identify will show it - this.$store.commit("map/setCurrentMeasurement", { - quantity: "Area", - unitSymbol: areaSize > 100000 ? "km²" : "m²", - value: - areaSize > 100000 - ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m² - : Math.round(areaSize) - }); - } - if (this.drawMode === "LineString") { - const length = getLength(event.feature.getGeometry()); - this.$store.commit("map/setCurrentMeasurement", { - quantity: "Length", - unitSymbol: "m", - value: Math.round(length * 10) / 10 - }); - } - this.$store.commit("application/showIdentify", true); - }, - enableCutTool() { + lineTool.on("drawend", this.lineEnd); + this.$store.commit("map/lineTool", lineTool); + this.openLayersMap.addInteraction(lineTool); + } + + if (!this.polygonTool) { + const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource(); + const polygonTool = new Draw({ + source: drawVectorSrc, + type: "Polygon", + maxPoints: 50 + }); + polygonTool.setActive(false); + polygonTool.on("drawstart", () => { + drawVectorSrc.clear(); + this.$store.commit("map/setCurrentMeasurement", null); + }); + polygonTool.on("drawend", this.polygonEnd); + this.$store.commit("map/polygonTool", polygonTool); + this.openLayersMap.addInteraction(polygonTool); + } + + if (!this.cutTool) { const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource(); const cutTool = new Draw({ source: cutVectorSrc, @@ -153,33 +155,23 @@ }) }) }); + cutTool.setActive(false); cutTool.on("drawstart", () => { cutVectorSrc.clear(); - // we are not setting an id here, to avoid the regular identify to - // pick it up - // event.feature.setId("drawn.1"); // unique id for new feature }); cutTool.on("drawend", this.cutEnd); this.$store.commit("map/cutTool", cutTool); this.openLayersMap.addInteraction(cutTool); - }, - disableCutTool() { - this.$store.commit("map/setCurrentMeasurement", null); - this.openLayersMap.removeInteraction(this.cutTool); - this.$store.commit("map/cutTool", null); - }, - cutEnd(event) { - this.$store.dispatch("fairwayprofile/cut", event.feature); } }, mounted() { window.addEventListener("keydown", e => { // Escape if (e.keyCode === 27) { - this.$store.commit("map/drawMode", null); - this.$store.commit("map/cutMode", false); - this.disableDrawTool(); - this.disableCutTool(); + this.lineTool.setActive(false); + this.polygonTool.setActive(false); + this.cutTool.setActive(false); + this.getLayerByName("Draw Tool").data.getSource().clear(); } }); } diff -r ec4b06d3a3a8 -r 74562dc29e10 client/src/map/Maplayer.vue --- a/client/src/map/Maplayer.vue Tue Nov 20 12:47:16 2018 +0100 +++ b/client/src/map/Maplayer.vue Tue Nov 20 13:03:24 2018 +0100 @@ -58,19 +58,26 @@ }, computed: { ...mapGetters("map", ["getLayerByName"]), - ...mapState("map", ["layers", "openLayersMap", "drawMode", "cutMode"]), + ...mapState("map", ["layers", "openLayersMap", "lineTool", "polygonTool", "cutTool"]), ...mapState("bottlenecks", ["selectedSurvey"]), mapStyle() { return { mapfull: !this.split, mapsplit: this.split, - nocursor: this.drawMode || this.cutMode + nocursor: this.hasActiveInteractions }; + }, + hasActiveInteractions() { + return ( + (this.lineTool && this.lineTool.getActive()) || + (this.polygonTool && this.polygonTool.getActive()) || + (this.cutTool && this.cutTool.getActive()) + ); } }, methods: { identify(coordinate, pixel) { - if (!this.drawMode && !this.cutMode) { + if (!this.hasActiveInteractions) { this.$store.commit("map/setIdentifiedFeatures", []); // checking our WFS layers var features = this.openLayersMap.getFeaturesAtPixel(pixel); diff -r ec4b06d3a3a8 -r 74562dc29e10 client/src/store/fairway.js --- a/client/src/store/fairway.js Tue Nov 20 12:47:16 2018 +0100 +++ b/client/src/store/fairway.js Tue Nov 20 13:03:24 2018 +0100 @@ -105,11 +105,10 @@ dispatch("bottlenecks/setSelectedBottleneck", null, { root: true }); commit("clearCurrentProfile"); commit("application/showSplitscreen", false, { root: true }); - commit("map/cutMode", false, { root: true }); + rootState.map.cutTool.setActive(false); rootGetters["map/getLayerByName"]("Cut Tool") .data.getSource() .clear(); - rootState.map.openLayersMap.removeInteraction(rootState.map.cutTool); }, loadProfile({ commit, state }, survey) { return new Promise((resolve, reject) => { @@ -188,7 +187,6 @@ commit("application/showSplitscreen", true, { root: true }); }) .catch(error => { - console.log(error); const { status, data } = error.response; displayError({ title: "Backend Error", diff -r ec4b06d3a3a8 -r 74562dc29e10 client/src/store/map.js --- a/client/src/store/map.js Tue Nov 20 12:47:16 2018 +0100 +++ b/client/src/store/map.js Tue Nov 20 13:03:24 2018 +0100 @@ -38,9 +38,8 @@ openLayersMap: null, identifiedFeatures: [], // map features identified by clicking on the map currentMeasurement: null, // distance or area from drawTool - drawMode: null, // null, "LineString", "Polygon" - drawTool: null, // open layers interaction object (Draw) - cutMode: false, // true or false + lineTool: null, // open layers interaction object (Draw) + polygonTool: null, // open layers interaction object (Draw) cutTool: null, // open layers interaction object (Draw) layers: [ { @@ -357,14 +356,11 @@ setCurrentMeasurement: (state, measurement) => { state.currentMeasurement = measurement; }, - drawMode: (state, mode) => { - state.drawMode = mode; + lineTool: (state, lineTool) => { + state.lineTool = lineTool; }, - drawTool: (state, drawTool) => { - state.drawTool = drawTool; - }, - cutMode: (state, mode) => { - state.cutMode = mode; + polygonTool: (state, polygonTool) => { + state.polygonTool = polygonTool; }, cutTool: (state, cutTool) => { state.cutTool = cutTool;