diff --git a/src/renderer/components/EditLayer.vue b/src/renderer/components/EditLayer.vue index bd7148a..c2a951b 100644 --- a/src/renderer/components/EditLayer.vue +++ b/src/renderer/components/EditLayer.vue @@ -148,8 +148,14 @@ case 'parking': this.removeParking(this.$store.state.Editable.index) break; + case 'arc': + this.removeArc(this.$store.state.Editable.data.arc) + break; } }, + removeArc (arc) { + console.log(arc); + }, removeParking (index) { if(this.featureLookup[index]===undefined) { console.error("Lookup " + index + " failed "); @@ -220,7 +226,8 @@ }, editedNode() { - if (this.$store.state.Editable.data.node===undefined) { + if (this.$store.state.Editable.data.node===undefined || + this.featureLookup===undefined) { return; } var isOnRunway = Number(this.$store.state.Editable.data.node.isOnRunway); diff --git a/src/renderer/loaders/ParkingSpot.js b/src/renderer/loaders/ParkingSpot.js index 281b6f2..471267a 100644 --- a/src/renderer/loaders/ParkingSpot.js +++ b/src/renderer/loaders/ParkingSpot.js @@ -112,12 +112,40 @@ L.ParkingSpot = L.Circle.extend({ this.on('click', function (event) { console.log("Click : " + event.target); store.default.dispatch('setParking', event.target.options.attributes); - }); + this.setStyle({color : 'red'}); + this.unwatch = store.default.watch( + function (state) { + return state.Editable.data.parking; + }, + () => { + event.target.setStyle({color : '#3388ff'}); + this.unwatch(); + } + , + { + deep: true //add this if u need to watch object properties change etc. + } + ); + }); this.on('editable:vertex:clicked', function (event) { console.log(this.featureLookup[event.vertex.glueindex]); if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){ event.vertex._icon.style['background-color'] = 'red'; store.default.dispatch('setParking', event.target.options.attributes); + this.unwatch = store.default.watch( + function (state) { + return state.Editable.data.parking; + }, + () => { + event.target.setStyle({color : '#3388ff'}); + this.unwatch(); + } + , + { + deep: true //add this if u need to watch object properties change etc. + } + ); + } }); diff --git a/src/renderer/loaders/TaxiwaySegmentExtender.js b/src/renderer/loaders/TaxiwaySegmentExtender.js index 735b577..53d2032 100644 --- a/src/renderer/loaders/TaxiwaySegmentExtender.js +++ b/src/renderer/loaders/TaxiwaySegmentExtender.js @@ -38,8 +38,22 @@ exports.extendTaxiSegment = function (taxiwaySegment) { }; taxiwaySegment.__proto__.addListeners = function () { this.on('click', function (event) { + event.target.setStyle({color : 'red'}); console.log("Click : " + event.target); store.default.dispatch('setArc', event.target.options.attributes); + this.unwatch = store.default.watch( + function (state) { + return state.Editable.data.arc; + }, + () => { + event.target.setStyle({color : '#3388ff'}); + this.unwatch(); + } + , + { + deep: true //add this if u need to watch object properties change etc. + } + ); }); this.on('editable:drawing:move', function (event) { console.log(event.target); @@ -52,6 +66,19 @@ exports.extendTaxiSegment = function (taxiwaySegment) { store.default.dispatch('setNode', event.vertex.latlng.attributes) event.vertex._icon.style['background-color'] = 'red'; + this.unwatch = store.default.watch( + function (state) { + return state.Editable.data.node; + }, + () => { + event.vertex._icon.style['background-color'] = 'white'; + this.unwatch(); + } + , + { + deep: true //add this if u need to watch object properties change etc. + } + ); }); var dragIndex = -1; this.on('editable:vertex:dragstart', function (event) { diff --git a/src/renderer/store/modules/Editable.js b/src/renderer/store/modules/Editable.js index 5adb918..7c8e1ba 100644 --- a/src/renderer/store/modules/Editable.js +++ b/src/renderer/store/modules/Editable.js @@ -36,7 +36,7 @@ const mutations = { state.type = 'arc' }, 'SET_EDIT_PARKING_NAME' (state, parkingName) { - state.data.arc.name = parkingName + state.data.parking.name = parkingName }, 'SET_EDIT_ARC_NAME' (state, arcName) { state.data.arc.name = arcName