Edit Buttons

package.json

@@ -61,7 +61,6 @@
     "electron-debug": "^3.0.1",
     "element-ui": "^2.12.0",
     "file-url": "^3.0.0",
-    "font-awesome": "^4.7.0",
     "fs": "0.0.1-security",
     "geo-coordinates-parser": "^1.2.3",
     "idb": "^4.0.5",
@@ -87,6 +86,7 @@
     "xamel": "^0.3.1"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.12.0",
     "ajv": "^6.5.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",

src/renderer/components/EditBar.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="BLABLA">
+    <EditButton icon="fas fa-edit" v-on:click="edit" :show="!editing" tooltip="Edit"></EditButton>
+    <EditButton icon="fas fa-undo" v-on:click="undo" :show="editing" tooltip="Undo"></EditButton>
+    <EditButton icon="fas fa-save" v-on:click="save" :show="editing" tooltip="Save"></EditButton>
+
+    <EditButton icon="fas fa-draw-polygon" :show="editing" tooltip="Draw Taxiline"></EditButton>
+    <EditButton icon="fas fas fa-parking" :show="editing" tooltip="Draw Parking"></EditButton>
+  </div>
+</template>
+
+<script lang="js">
+  import EditButton from './EditButton'
+  export default {
+    components: { EditButton },
+    data () {
+      return {isEditing: false}
+    },
+    created () {
+    },
+    methods: {
+      edit () {
+        this.editing = true
+        this.$parent.$parent.$refs.editLayer.enableEdit()
+      },
+      undo () {
+        this.editing = false
+        this.$parent.$parent.$refs.editLayer.disableEdit()
+      },
+      save () {
+        this.editing = false
+        this.$parent.$parent.$refs.editLayer.disableEdit()
+      }
+    },
+    computed: {
+      editing: {
+      // getter
+        get: function () {
+          console.log(`Getting Visible : ${this.isEditing}`)
+          return this.isEditing
+        },
+        // setter
+        set: function (newValue) {
+          this.isEditing = newValue
+          console.log(`Setting Visible : ${this.isEditing}`)
+        }
+      }
+    }
+  }
+</script>

src/renderer/components/EditButton.vue

@@ -0,0 +1,64 @@
+<template></template>
+
+<script lang="js">
+  import L from 'leaflet'
+  import '@fortawesome/fontawesome-free/css/all.css'
+  import EditBar from '../leaflet/EditControl.js'
+  export default {
+    name: 'edit-bar',
+    props: {
+      icon: String,
+      show: Boolean,
+      tooltip: String
+    },
+    watch: {
+      show: function (newVal, oldVal) { // watch it
+        console.log('Prop changed: ', newVal, ' | was: ', oldVal)
+        if (newVal) {
+          this.add()
+        } else {
+          this.remove()
+        }
+      }
+    },
+    mounted () {
+      console.debug(L)
+      console.debug(EditBar)
+      this.add()
+    },
+    beforeDestroy () {
+      this.remove()
+    },
+    data () {
+      return {
+      }
+    },
+    methods: {
+      deferredMountedTo (parent) {
+        this.editbutton = new L.EditControl({html: `<i class="${this.icon}"></i>`, callback: this.click, tooltip: this.tooltip})
+        if (this.show) {
+          parent.addControl(this.editbutton)
+        }
+      },
+      click () {
+        // console.log(parent)
+        this.$emit('click')
+      },
+      remove () {
+        if (this.editbutton) {
+          this.$parent.$parent.mapObject.removeControl(this.editbutton)
+        }
+      },
+      add () {
+        if (this.$parent.$parent._isMounted) {
+          this.deferredMountedTo(this.$parent.$parent.mapObject)
+        }
+      }
+    },
+    computed: {
+    }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/renderer/components/EditLayer.vue

@@ -35,13 +35,6 @@
         }
         this.groundnet = readGroundnetXML(this.$store.state.Settings.settings.airportsDirectory, icao)
         this.groundnet.addTo(this.$parent.mapObject)
-        this.groundnet.eachLayer(l => {
-          l.enableEdit()
-          if (typeof l.extensions === 'function') {
-            l.extensions()
-          }
-          l.bringToFront()
-        })
       },
       visible (feature) {
         let bounds = this.$store.state.Settings.bounds
@@ -64,7 +57,24 @@
         if (this.$parent._isMounted) {
           this.deferredMountedTo(this.$parent.mapObject)
         }
+      },
+      enableEdit () {
+        this.editable = true
+        this.groundnet.eachLayer(l => {
+          l.enableEdit()
+          if (typeof l.extensions === 'function') {
+            l.extensions()
+          }
+          l.bringToFront()
+        })
+      },
+      disableEdit () {
+        this.editable = false
+        this.groundnet.eachLayer(l => {
+          l.disableEdit()
+        })
       }
+
     },
     computed: {
       edit: function () {

src/renderer/components/FlightgearMap.vue

@@ -6,10 +6,14 @@
     @update:zoom="zoomUpdated"
     @update:center="centerUpdated"
     @update:bounds="boundsUpdated"
+    ref="map"
   >
-    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
+    <!--The backgroundmap-->
+    <l-tile-layer :url="url" :attribution="attribution">
+    </l-tile-layer>
     <!--<l-marker :lat-lng="marker"></l-marker>-->
     <LeafletSidebar></LeafletSidebar>
+    <EditBar></EditBar>
     <PavementLayer ref="pavementLayer"></PavementLayer>
     <l-layer-group layerType="overlay" name="airports" ref="airportLayer">
       <l-circle
@@ -30,6 +34,7 @@
   import 'leaflet/dist/leaflet.css'
   import { LMap, LTileLayer, LMarker, LCircle, LLayerGroup } from 'vue2-leaflet'
   import LeafletSidebar from './LeafletSidebar'
+  import EditBar from './EditBar'
   import EditLayer from './EditLayer'
   import PavementLayer from './PavementLayer'
   import L from 'leaflet'
@@ -44,7 +49,7 @@
   })
   export default {
     name: 'flightgear-map',
-    components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, EditLayer, PavementLayer, LLayerGroup },
+    components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, EditBar, EditLayer, PavementLayer, LLayerGroup },
     props: [],
     mounted () {
       this.$store.dispatch('getAirports')

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="fa fa-pencil"></i></a></li>
+            <li><a href="#airports" 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>
 
@@ -39,7 +39,7 @@
 
 <script lang="js">
   import 'leaflet-sidebar-v2/css/leaflet-sidebar.css'
-  import 'font-awesome/css/font-awesome.css'
+  import '@fortawesome/fontawesome-free/css/all.css'
   import {} from 'leaflet-sidebar-v2'
   import L from 'leaflet'
   import AirportEdit from './AirportEdit'

src/renderer/leaflet/EditControl.js

@@ -0,0 +1,37 @@
+/* eslint-disable */
+L.EditControl = L.Control.extend({
+
+    options: {
+        position: 'topleft',
+        callback: null,
+        kind: '',
+        html: '<i class="fas fa-draw-polygon"></i>',
+        tooltip: 'tooltip'
+    },
+
+    onAdd: function (map) {
+        var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
+            link = L.DomUtil.create('a', '', container);
+
+        link.href = '#';
+        link.title = this.options.tooltip;
+        link.innerHTML = this.options.html;
+        L.DomEvent.on(link, 'click', L.DomEvent.stop)
+            .on(link, 'click', function () {
+                window.LAYER = this.options.callback.call(map.editTools);
+            }, this);
+
+        return container;
+    }
+});
+
+
+L.NewMarkerControl = L.EditControl.extend({
+    options: {
+        position: 'topright',
+        callback: null,
+        kind: 'marker',
+        html: '🖈'
+    }
+
+});