Selection

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);

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.
+                    }
+                );
+    
             }
 
         });

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) {

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