From 66687bb35fe4173595ef24a2b6dec28e0277d001 Mon Sep 17 00:00:00 2001 From: portree_kid Date: Mon, 1 Jun 2020 13:37:12 +0200 Subject: [PATCH] Edit node coordinates bidirectional --- src/renderer/components/EditLayer.vue | 20 ++++++---- src/renderer/components/NodeEdit.vue | 11 +----- .../loaders/TaxiwaySegmentExtender.js | 38 ++++++++++--------- src/renderer/store/modules/Editable.js | 6 ++- 4 files changed, 41 insertions(+), 34 deletions(-) diff --git a/src/renderer/components/EditLayer.vue b/src/renderer/components/EditLayer.vue index 6ec1b54..1b0ca66 100644 --- a/src/renderer/components/EditLayer.vue +++ b/src/renderer/components/EditLayer.vue @@ -13,6 +13,7 @@ import Vue from 'vue' import { MessageBox } from 'element-ui'; + const Coordinates = require('coordinate-parser'); const path = require('path') const fs = require('fs') @@ -343,7 +344,9 @@ }).filter(n => n); }, setPointCoords (index, coordinates) { - var latlng = {lat: coordinates.latitude, lng: coordinates.longitude }; + var position = new Coordinates(coordinates); + + var latlng = {lat: position.latitude, lng: position.longitude }; if(this.featureLookup[index]===undefined) { console.error("Lookup " + index + " failed "); return; @@ -364,14 +367,14 @@ element.updateVertexFromDirection(); } else if (element instanceof L.Polyline) { - if (Number(element.begin) === Number(dragIndex)) { - element.getLatLngs()[0].update(event.latlng); + if (Number(element.begin) === Number(index)) { + element.getLatLngs()[0].update(latlng); element.setLatLngs(element.getLatLngs()); element.updateBeginVertex(latlng); element.updateMiddle(); } - if (Number(element.end) === Number(dragIndex)) { - element.getLatLngs()[element.getLatLngs().length - 1].update(event.latlng); + if (Number(element.end) === Number(index)) { + element.getLatLngs()[element.getLatLngs().length - 1].update(latlng); element.setLatLngs(element.getLatLngs()); element.updateEndVertex(latlng); element.updateMiddle(); @@ -606,6 +609,7 @@ arc.updateStyle(); } }, + //Update Node editedNode() { if (this.$store.state.Editable.index === undefined || this.$store.state.Editable.data.node === undefined || @@ -665,8 +669,10 @@ } } else if (element instanceof L.Polyline) { element._latlngs.forEach(element => { - if(element.__vertex && Number(element.glueindex) === Number(nIndex)){ - latlng = element.latlng; + if(element.__vertex && Number(element.glueindex) === Number(nIndex)){ + if (this.$store.state.Editable.data.node.coords) { + this.setPointCoords(this.$store.state.Editable.index, this.$store.state.Editable.data.node.coords) + } } }); } diff --git a/src/renderer/components/NodeEdit.vue b/src/renderer/components/NodeEdit.vue index aa9484a..66dd093 100644 --- a/src/renderer/components/NodeEdit.vue +++ b/src/renderer/components/NodeEdit.vue @@ -64,12 +64,7 @@ // getter get: function () { if(this.$store.state.Editable.index!==undefined) { - var ret = this.$parent.$parent.$parent.$refs.editLayer.getPointCoords(this.$store.state.Editable.index) - if(ret) { - return ret[0].lat + " " + ret[0].lng - } else { - return 'unknown' - } + return this.$store.state.Editable.data.node.coords; } }, // setter @@ -77,9 +72,7 @@ if (newValue==='unknown') { } - var position = new Coordinates(newValue); - console.log(position); - this.$parent.$parent.$parent.$refs.editLayer.setPointCoords(this.$store.state.Editable.index, position) + this.$store.commit('SET_EDIT_COORDS', newValue) } }, isOnRunway: { diff --git a/src/renderer/loaders/TaxiwaySegmentExtender.js b/src/renderer/loaders/TaxiwaySegmentExtender.js index 28b1114..b7658e5 100644 --- a/src/renderer/loaders/TaxiwaySegmentExtender.js +++ b/src/renderer/loaders/TaxiwaySegmentExtender.js @@ -132,7 +132,7 @@ exports.extendTaxiSegment = function (taxiwaySegment) { console.log(event) }); this.on('editable:vertex:clicked', function (event) { - store.default.dispatch('setNode', event.vertex.latlng.attributes) + store.default.dispatch('setNode', event.vertex.latlng) if(event.vertex._icon!=null) { event.vertex._icon.style['background-color'] = 'red'; } else if(event.vertex.icon!=null ) { @@ -152,23 +152,26 @@ exports.extendTaxiSegment = function (taxiwaySegment) { function (state) { return state.Editable.data.node; }, - () => { - if(event.vertex._icon!=null) { - event.vertex._icon.style['background-color'] = 'white'; - } else if(event.vertex.icon!=null ) { - if(event.vertex.icon.style!=null) { - event.vertex.icon.style['background-color'] = 'white'; - } else { - event.vertex.setStyle({color : 'white'}) - } - } else if(event.vertex.options.icon!=null ) { - if(event.vertex.options.icon.style!=null) { - event.vertex.options.icon.style['background-color'] = 'white'; - } else { - event.vertex.options.icon._setIconStyles({color : 'white'}) - } + (state) => { + if( state === undefined || + state.index !== Number(event.vertex.latlng.glueindex)) { + if(event.vertex._icon!=null) { + event.vertex._icon.style['background-color'] = 'white'; + } else if(event.vertex.icon!=null ) { + if(event.vertex.icon.style!=null) { + event.vertex.icon.style['background-color'] = 'white'; + } else { + event.vertex.setStyle({color : 'white'}) + } + } else if(event.vertex.options.icon!=null ) { + if(event.vertex.options.icon.style!=null) { + event.vertex.options.icon.style['background-color'] = 'white'; + } else { + event.vertex.options.icon._setIconStyles({color : 'white'}) + } + } + this.unwatch(); } - this.unwatch(); } , { @@ -196,6 +199,7 @@ exports.extendTaxiSegment = function (taxiwaySegment) { }); } dragIndex = -1; + store.default.dispatch('setNode', event.vertex.latlng) }); }; /** diff --git a/src/renderer/store/modules/Editable.js b/src/renderer/store/modules/Editable.js index c86fccb..818ff5c 100644 --- a/src/renderer/store/modules/Editable.js +++ b/src/renderer/store/modules/Editable.js @@ -82,6 +82,9 @@ const mutations = { 'SET_EDIT_HOLDPOINTTYPE' (state, holdPointType) { Vue.set(state.data.node, 'holdPointType', holdPointType) }, + 'SET_EDIT_COORDS' (state, coords) { + Vue.set(state.data.node, 'coords', coords) + }, 'SET_EDIT_ISONRUNWAY' (state, isOnRunway) { Vue.set(state.data.node, 'isOnRunway', isOnRunway) } @@ -101,7 +104,8 @@ const actions = { context.commit(SET_EDIT_ARC, arc) }, async setNode (context, node) { - context.commit('SET_EDIT_NODE', node) + context.commit('SET_EDIT_NODE', node.attributes) + context.commit('SET_EDIT_COORDS', node.lat.toFixed(5) + ' ' + node.lng.toFixed(5)) } }