Delete runway

src/renderer/components/EditLayer.vue

@@ -155,6 +155,9 @@
           case 'node':
             this.removeNode(this.$store.state.Editable.index)
             break;
+          case 'runway':
+            this.removeNode(this.$store.state.Editable.index)
+            break;
           case 'parking':
             this.removeParking(this.$store.state.Editable.index)
             break;
@@ -190,7 +193,6 @@
               e1.__vertex.removeFrom(element.editor.editLayer);
               element._latlngs.splice(index1,1);
               if (element._latlngs.length==1) {
-
                 this.featureLookup[index].splice(i,1);
                 this.featureLookup[element._latlngs[0].__vertex.glueindex].forEach((otherEnd, j) => {
                   console.log(j + ' ' + otherEnd);
@@ -201,6 +203,9 @@
                 element.removeFrom(this.groundnetLayerGroup);
               }
             });
+          } else if (element instanceof L.RunwayNode) {
+            this.featureLookup[index] = this.featureLookup[index].filter(item => item !== element);
+            element.removeFrom(this.groundnetLayerGroup);
           }
         });
       },

src/renderer/loaders/RunwayNode.js

@@ -13,6 +13,34 @@ L.RunwayNode = L.Marker.extend({
             // Is it the edit vertex (Middle) moving?
             this.follow(event.target.glueindex, event);
         });
+        this.on('click', function (event) {
+            console.log("Click Runway : ", event);
+            event.target.options.attributes.selected = true;
+            if (store.default.state.Editable.index !== event.target.options.attributes.index) {
+                store.default.dispatch('setRunway', event.target.options.attributes);
+            }
+            this.unwatch = store.default.watch(
+                function (state) {
+                        return state.Editable.data.runway;
+                },
+                    () => { 
+                        // Reset colour
+                        if(event.target instanceof L.RunwayNode &&
+                            event.target.options.attributes && 
+                            event.target.options.attributes.selected) {
+                            event.target.options.attributes.selected = false;
+                            event.target.updateStyle();
+                            this.unwatch();    
+                        }
+                    }                    
+                ,
+                {
+                    deep: true //add this if u need to watch object properties change etc.
+
+                }
+            );
+
+        });
     },
     extensions: function (editLayer) {
         if (typeof this.featureLookup[this.glueindex] === 'undefined') {
@@ -76,8 +104,15 @@ var runwayNode = function (n, layerGroup) {
         iconSize: [30, 42],
         iconAnchor: [15, 42]
     });
-    const node = new L.RunwayNode([latlon.decimalLatitude, latlon.decimalLongitude], { icon: icon });
+    var node = new L.RunwayNode([latlon.decimalLatitude, latlon.decimalLongitude], { icon: icon, attributes: {} });
     node.glueindex = n.attr('index');
+    $.each( n.attrs, function( key, value ) {        
+        if(isNaN(value))
+          node.options.attributes[ key ] = value;
+        else
+        node.options.attributes[ key ] = Number( value);
+    });
+
     node.addTo(layerGroup);
     node.addListeners();
     return node;

src/renderer/store/modules/Editable.js

@@ -3,12 +3,13 @@ import Vue from 'vue'
 const state = {
   type: 'none',
   index: 'none',
-  data: {airports: {}, parking: {}, arc: {}, node: {}}
+  data: {airports: {}, parking: {}, arc: {}, node: {}, runway: {}}
 }
 
 const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT'
 const SET_EDIT_PARKING = 'SET_EDIT_PARKING'
 const SET_EDIT_ARC = 'SET_EDIT_ARC'
+const SET_EDIT_RUNWAY = 'SET_EDIT_RUNWAY'
 
 const mutations = {
   SET_EDIT_AIRPORT (state, airport) {
@@ -32,6 +33,12 @@ const mutations = {
     Vue.set(state, 'index', node.index)
     Vue.set(state, 'type', 'node')
   },
+  SET_EDIT_RUNWAY (state, runway) {
+    Vue.set(state, 'data', {})
+    Vue.set(state.data, 'runway', runway)
+    Vue.set(state, 'index', runway.index)
+    Vue.set(state, 'type', 'runway')
+  },
   SET_EDIT_ARC (state, arc) {
     Vue.set(state, 'data', {})
     Vue.set(state.data, 'arc', arc)
@@ -68,6 +75,9 @@ const actions = {
   async setAirport (context, airport) {
     context.commit(SET_EDIT_AIRPORT, airport)
   },
+  async setRunway (context, runway) {
+    context.commit(SET_EDIT_RUNWAY, runway)
+  },
   async setParking (context, parking) {
     context.commit(SET_EDIT_PARKING, parking)
   },