Arc editing

src/renderer/components/EditLayer.vue

@@ -35,13 +35,16 @@
               return state.Editable.data.node;
           },
           () => { this.editedNode() }
-          /*
+          ,
-          (newValue, oldValue) => {
+          {
-              console.log(`Updating from ${oldValue} to ${newValue}`);              
+            deep: true //add this if u need to watch object properties change etc.
-              //console.log(this.featureLookup[newValue.index]);
+          }
-              console.log(this.component('editLayer'));
+        );
-              //do something on data change
+      this.$store.watch(
-          }*/
+        function (state) {
+              return state.Editable.data.arc;
+          },
+          () => { this.editedArc() }
           ,
           {
             deep: true //add this if u need to watch object properties change etc.
@@ -144,6 +147,10 @@
         }
       },
       removeNode (index) {
+        if(this.featureLookup[index]===undefined) {
+          console.error("Lookup " + index + " failed ");          
+          return;
+        }
         this.featureLookup[index].forEach((element, i) => {
           if (element instanceof L.Polyline) {
             // element.latlngs.forEach();
@@ -152,7 +159,14 @@
               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);
+                  if(element === otherEnd){
+                    this.featureLookup[element._latlngs[0].__vertex.glueindex].splice(j,1);
+                  }
+                });
                 element.removeFrom(this.groundnetLayerGroup);
               }
             });
@@ -186,6 +200,9 @@
           console.log(event)
           event.target.addTo(this.groundnetLayerGroup)
         })
+      },
+      editedArc() {
+
       },
       editedNode() {
         var isOnRunway = Number(this.$store.state.Editable.data.node.isOnRunway);
@@ -235,7 +252,14 @@
               if (Number(element.end) === nIndex) {
                 latlng = element._latlngs[1];
               }
+          } else if (element instanceof L.Polyline) {
+              element._latlngs.forEach(element => {
+                if(Number(element.__vertex.glueindex) === nIndex){
+                  latlng = element.__vertex.latlng;
+                }
+              });
           }    
+    
         })
         if (!hasRunwayNode && isOnRunway) {
           this.$store.state.Editable.data.node.holdPointType

src/renderer/loaders/TaxiwaySegmentExtender.js

@@ -96,7 +96,7 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
                     element.updateMiddleMarker();
                     element.updateVertexFromDirection();
                 }
-                else if (element instanceof L.TaxiwaySegment) {
+                else if (element instanceof L.Polyline) {
                     if (element.begin === dragIndex) {
                         element.getLatLngs()[0].update(event.latlng);
                         element.setLatLngs(element.getLatLngs());
@@ -133,6 +133,8 @@ exports.extendTaxiSegment = function (taxiwaySegment) {
         this.setStyle(style);
         if (!this.bidirectional) {
             this.setText('  ►  ', {repeat: true, attributes: {fill: 'red', size: 20}})
-        }
+        } else {
+            this.setText('')
+        }        
     };
 };

src/renderer/loaders/groundnet_loader.js

@@ -4,12 +4,10 @@ const path = require('path');
 var xamel = require('xamel');
 const convert = require('geo-coordinates-parser');
 
-const markers = require('./MagneticVertex');
-const TaxiwaySegment = require('./TaxiwaySegment');
-
 const parkingSpot = require('./ParkingSpot.js');
 const runwayNode = require('./RunwayNode.js');
 const holdNode = require('./HoldNode.js');
+const extendTaxiSegment = require('./TaxiwaySegmentExtender').extendTaxiSegment;
 
 const store = require('../store');
 
@@ -102,24 +100,28 @@ exports.readGroundnetXML = function (fDir, icao, force) {
                     var bidirectional = false;
                     if (typeof featureLookup[n.attr('begin')] !== 'undefined') {
                         featureLookup[n.attr('begin')].forEach(element => {
-                            if (element instanceof L.TaxiwaySegment && element.end === n.attr('begin') && element.begin === n.attr('end')) {
+                            if (element instanceof L.Polyline && element.end === n.attr('begin') && element.begin === n.attr('end')) {
                                 element.bidirectional = true;
                                 bidirectional = true;
+                                element.updateStyle();
                             }
                         });
                     }
                     if (typeof featureLookup[n.attr('end')] !== 'undefined') {
                         featureLookup[n.attr('end')].forEach(element => {
-                            if (element instanceof L.TaxiwaySegment && element.end === n.attr('begin') && element.begin === n.attr('end')) {
+                            if (element instanceof L.Polyline && element.end === n.attr('begin') && element.begin === n.attr('end')) {
                                 element.bidirectional = true;
                                 bidirectional = true;
+                                element.updateStyle();
                             }
                         });
                     }
                     if (!bidirectional) {
                         var beginlatlon = convert(beginNode.attr('lat') + " " + beginNode.attr('lon'));
                         var endlatlon = convert(endNode.attr('lat') + " " + endNode.attr('lon'));
-                        var polyline = new L.TaxiwaySegment([[beginlatlon.decimalLatitude, beginlatlon.decimalLongitude], [endlatlon.decimalLatitude, endlatlon.decimalLongitude]], { attributes: {} }).addTo(layerGroup);
+                        var polyline = new L.Polyline([[beginlatlon.decimalLatitude, beginlatlon.decimalLongitude], [endlatlon.decimalLatitude, endlatlon.decimalLongitude]], { attributes: {} }).addTo(layerGroup);
+                        extendTaxiSegment(polyline);
+                        polyline.addListeners();
                         polyline._latlngs[0].attributes = {};
                         $.each(beginNode.attrs, function (key, value) {
                             console.log(key + "\t" + value);