Mercurial > gemma
changeset 1237:74562dc29e10
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 | ec4b06d3a3a8 |
| children | 442399fc1b71 |
| files | client/src/drawtool/Drawtool.vue client/src/map/Maplayer.vue client/src/store/fairway.js client/src/store/map.js |
| diffstat | 4 files changed, 103 insertions(+), 110 deletions(-) [+] |
line wrap: on
line diff
--- 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 @@ <template> <div class="d-flex flex-column"> - <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> - <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i> + <div @click="toggleLineTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> + <i :class="['fa fa-pencil', {inverted: lineTool && lineTool.getActive()}]"></i> </div> - <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> - <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i> + <div @click="togglePolygonTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded"> + <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i> </div> - <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey"> - <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i> + <div @click="toggleCutTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey"> + <i :class="['fa fa-area-chart', {inverted: cutTool && cutTool.getActive()}]"></i> </div> </div> </template> @@ -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(); } }); }
--- 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);
--- 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",
--- 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;