Mercurial > gemma
diff client/src/drawtool/Drawtool.vue @ 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 | ba8cd80d68b6 |
children | 442399fc1b71 |
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(); } }); }