RunwayNode adding

src/renderer/components/EditLayer.vue

@@ -28,6 +28,25 @@
       // console.log(LSymbol)
     },
     mounted () {
+      this.selectionLayerGroup = L.layerGroup();
+      this.selectionLayerGroup.addTo(this.$parent.mapObject)
+      this.$store.watch(
+        function (state) {
+              return state.Editable.data.node;
+          },
+          () => { this.editedNode() }
+          /*
+          (newValue, oldValue) => {
+              console.log(`Updating from ${oldValue} to ${newValue}`);              
+              //console.log(this.featureLookup[newValue.index]);
+              console.log(this.component('editLayer'));
+              //do something on data change
+          }*/
+          ,
+          {
+            deep: true //add this if u need to watch object properties change etc.
+          }
+        );
     },
     beforeDestroy () {
       this.remove()
@@ -38,10 +57,12 @@
       }
     },
     methods: {
-      load (icao, force) {
+      load (icao, force) {        
         if (this.groundnetLayerGroup !== undefined) {
           this.groundnetLayerGroup.removeFrom(this.$parent.mapObject)
         }
+        
+
         this.icao = icao
         this.groundnetLayerGroup = readGroundnetXML(this.$store.state.Settings.settings.airportsDirectory, icao, force)
         if (this.groundnetLayerGroup === undefined) {
@@ -108,8 +129,7 @@
           if (typeof l.bringToFront === 'function') {
             l.bringToFront()
           }
-        })
-        
+        })        
       },
       disableEdit () {
         this.editable = false
@@ -150,6 +170,45 @@
           event.target.addTo(this.groundnetLayerGroup)
         })
       },
+      editedNode() {
+        var isOnRunway = this.$store.state.Editable.data.node.isOnRunway;
+        var nIndex = this.$store.state.Editable.index; 
+        var hasRunwayNode = false;
+        var latlng;
+        this.featureLookup[nIndex].forEach((element,index) => {
+          if (element instanceof L.RunwayNode) {
+            if (isOnRunway === 0) {
+              // We shouldn't have a RunwayNode
+              element.removeFrom(layerGroup);
+              this.featureLookup[nIndex].splice(index,1);              
+            }
+            hasRunwayNode = true;
+          }
+          else if (element instanceof L.ParkingSpot) {
+          }
+          else if (element instanceof L.TaxiwaySegment) {
+              if (Number(element.begin) === nIndex) {
+                latlng = element._latlngs[0];
+              }
+              if (Number(element.end) === nIndex) {
+                latlng = element._latlngs[1];
+              }
+          }    
+        })
+        if (!hasRunwayNode && isOnRunway) {
+          const icon = new L.DivIcon({
+              className: 'custom-div-icon',
+              html: "<div style='background-color:#4838cc;' class='marker-pin'></div><i class='fas fa-plane-departure'></i>",
+              iconSize: [30, 42],
+              iconAnchor: [15, 42]
+          });
+          const node = new L.RunwayNode(latlng, { icon: icon });
+          node.glueindex = nIndex;
+          node.addTo(layerGroup);
+          this.featureLookup[nIndex].push(node);
+          node.addListeners();
+        }
+      },
       closestLayerSnap (eventLatlng, snap) {
         var layers = []
         this.groundnetLayerGroup.eachLayer((layer) => {

src/renderer/components/LeafletSidebar.vue

@@ -4,7 +4,7 @@
     <div class="leaflet-sidebar-tabs">
         <ul role="tablist"> <!-- top aligned tabs -->
             <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
-            <li><a href="#airports" role="tab"><i class="fas fa-edit"></i></a></li>
+            <li><a href="#edit" role="tab"><i class="fas fa-edit"></i></a></li>
             <li><a href="#scan" role="tab"><i class="fa fa-search"></i></a></li>
         </ul>
 
@@ -22,10 +22,11 @@
             </h1>
             <p>A responsive sidebar for mapping libraries</p>
         </div>
-        <div class="leaflet-sidebar-pane" id="airports">
+        <div class="leaflet-sidebar-pane" id="edit">
           <AirportEdit></AirportEdit>
           <GroundnetEdit></GroundnetEdit>
           <ArcEdit></ArcEdit>
+          <NodeEdit></NodeEdit>
         </div>
         <div class="leaflet-sidebar-pane" id="scan">
           <RunScan></RunScan>
@@ -45,13 +46,14 @@
   import AirportEdit from './AirportEdit'
   import GroundnetEdit from './GroundnetEdit'
   import ArcEdit from './ArcEdit'
+  import NodeEdit from './NodeEdit'
   import SettingsPanel from './SettingsPanel'
   import RunScan from './RunScan'
   import FileSelect from './FileSelect'
 
   export default {
     name: 'leaflet-sidebar',
-    components: { AirportEdit, ArcEdit, GroundnetEdit, SettingsPanel, RunScan, FileSelect },
+    components: { AirportEdit, ArcEdit, NodeEdit, GroundnetEdit, SettingsPanel, RunScan, FileSelect },
     props: [],
     mounted () {
       this.add()

src/renderer/components/NodeEdit.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <h1 class="leaflet-sidebar-header" v-if="node">
+      Node Properties
+      <div class="leaflet-sidebar-close">
+        <i class="fa fa-caret-left"></i>
+      </div>
+    </h1>
+    <div width="100%" v-if="node">
+      <div>
+        <el-row>
+          <el-col :span="7">
+            <span class="demo-input-label">Is on runway :</span>
+          </el-col>
+          <el-col :span="15">
+            <el-switch v-model="isOnRunway"></el-switch>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="7">
+            <span class="demo-input-label">Holdpoint Type :</span>
+          </el-col>
+          <el-col :span="15">
+            <el-select v-model="holdPointType" placeholder="Select">
+              <el-option
+                v-for="type in options"
+                :key="type.value"
+                :label="type.label"
+                :value="type.value"
+              ></el-option>
+            </el-select>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+  export default {
+    /*
+    methods: {
+      updateIsOnRunway (value) {
+        this.$store.commit('SET_EDIT_ISONRUNWAY', value)
+      }
+    },
+    */
+    computed: {
+      options: function () {
+        return [{value: 'node', label: 'node'}, {value: 'PushBack', label: 'PushBack'}, {value: 'normal', label: 'normal'}, {value: 'CAT II/III', label: 'CAT II/III'}]
+      },
+      node: function () {
+        return this.$store.state.Editable.type === 'node'
+      },
+      // {index: 39, lat: "N58 27.343", lon: "W03 5.153", isOnRunway: 0, holdPointType: "none"}
+      isOnRunway: {
+      // getter
+        get: function () {
+          return this.$store.state.Editable.data.node.isOnRunway === 1
+        },
+        // setter
+        set: function (newValue) {
+          this.$store.commit('SET_EDIT_ISONRUNWAY', newValue ? 1 : 0)
+        }
+      },
+      holdPointType: {
+      // getter
+        get: function () {
+          if (this.$store.state.Editable.data.node.holdPointType === undefined) {
+            return 'none'
+          }
+          return this.$store.state.Editable.data.node.holdPointType
+        },
+        // setter
+        set: function (newValue) {
+          this.$store.commit('SET_EDIT_HOLDPOINTTYPE', newValue)
+        }
+      }
+    }
+  }
+</script>