Guide drawing

src/renderer/components/AirportLayer.vue

@@ -4,7 +4,7 @@
 <script lang="js">
   import L from 'leaflet'
   export default {
-    name: 'edit-layer',
+    name: 'airport-layer',
     props: [],
     mounted () {
       this.add()

src/renderer/components/EditBar.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="EditBar">
     <Upload :visible.sync="uploadVisible" ref="upload"></Upload>
-    <EditButton icon="fas fa-th" v-on:click="zoomin" :show="true" tooltip="Zoomin"></EditButton>
-    <EditButton icon="fas fa-th-large" v-on:click="zoomout" :show="!editing" tooltip="Zoomout"></EditButton>
+    <ZoomButton icon="fas fa-th" v-on:click="zoomin" :show="true" tooltip="Zoomin"></ZoomButton>
+    <ZoomButton icon="fas fa-th-large" v-on:click="zoomout" :show="!editing" tooltip="Zoomout"></ZoomButton>
 
     <EditButton icon="fas fa-upload" v-on:click="upload" :show="!editing" tooltip="Upload"></EditButton>
     <EditButton icon="fas fa-plane" v-on:click="test" :show="!editing" tooltip="Export"></EditButton>
@@ -63,6 +63,7 @@
 <script lang="js">
 /* eslint-disable */
   import EditButton from './EditButton'
+  import ZoomButton from './ZoomButton';
   import Upload from './Upload'
   import Vue from 'vue'
 
@@ -71,7 +72,7 @@
   const fs = require('fs');
 
   export default {
-    components: { EditButton, Upload },
+    components: { EditButton, Upload, ZoomButton },
     data () {
       return {isEditing: false, uploadVisible: false, centerDialogVisible: false, saveDialogVisible: false, checkDialogVisible: false, checking: false, progress: 0, max: 0}
     },
@@ -92,19 +93,20 @@
         this.$parent.$parent.zoomUpdated(14)
       },
       edit () {
-        this.editing = true
-        this.$parent.$parent.$refs.map.mapObject.options.minZoom = 13;
-        this.$parent.$parent.$refs.editLayer.enableEdit()
+        this.isEditing = true
+        this.$emit('edit')
       },
       undoFirst () {
-        this.editing = false
+        this.isEditing = false
+        this.$emit('edit')
         this.centerDialogVisible = false
         this.$parent.$parent.$refs.map.mapObject.options.minZoom = 1;
         this.$parent.$parent.$refs.editLayer.disableEdit()
         this.$parent.$parent.$refs.editLayer.reload(true)
       },
       undoLast () {
-        this.editing = false
+        this.isEditing = false
+        this.$emit('edit')
         this.centerDialogVisible = false
         this.$parent.$parent.$refs.map.mapObject.options.minZoom = 1;
         this.$parent.$parent.$refs.editLayer.disableEdit()
@@ -112,10 +114,11 @@
       },
       save () {
         this.$parent.$parent.$refs.editLayer.stopDrawing()
-        this.editing = false
+        this.isEditing = false
+        this.$emit('edit')
         this.$parent.$parent.$refs.map.mapObject.options.minZoom = 1;
         Vue.set(this, 'saveDialogVisible', true)
-        this.editing = false
+        this.$emit('edit')
         Vue.nextTick( function () {
             setTimeout( this.saveDefered.bind(this), 100);
           }, this)

src/renderer/components/FlightgearMap.vue

@@ -17,7 +17,6 @@
     -->
     <!--<l-marker :lat-lng="marker"></l-marker>-->
     <LeafletSidebar></LeafletSidebar>
-    <EditBar></EditBar>
     <AiLayer ref="aiLayer"></AiLayer> 
     <PavementLayer ref="pavementLayer"></PavementLayer>    
     <!--<ThresholdLayer ref="thresholdLayer"></ThresholdLayer>-->
@@ -33,6 +32,9 @@
       ></l-circle>
     </l-layer-group>
     <EditLayer ref="editLayer"></EditLayer>
+    <ToolLayer ref="toolLayer"></ToolLayer>
+    <EditBar ref="editBar" @edit="onEdit"></EditBar>
+    <ToolBar ref="toolBar"></ToolBar>
   </l-map>
 </template>
 
@@ -42,7 +44,9 @@
   import LeafletSidebar from './LeafletSidebar'
   import AiLayer from './AiLayer'
   import EditBar from './EditBar'
+  import ToolBar from './ToolBar'
   import EditLayer from './EditLayer'
+  import ToolLayer from './ToolLayer'
   import PavementLayer from './PavementLayer'
   import ThresholdLayer from './ThresholdLayer'
   import L from 'leaflet'
@@ -57,7 +61,7 @@
   })
   export default {
     name: 'flightgear-map',
-    components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, AiLayer, EditBar, EditLayer, PavementLayer, LLayerGroup, LControl, ThresholdLayer },
+    components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, AiLayer, EditBar, ToolBar, EditLayer, PavementLayer, LLayerGroup, LControl, ThresholdLayer, ToolLayer },
     props: [],
     mounted () {
       this.$store.dispatch('getAirports')
@@ -76,8 +80,12 @@
             */
             this.editingAirport = airportsToLoad[0]
           }
-          this.$refs.editLayer.setVisible(this.zoom >= 12)
-          this.$refs.airportLayer.setVisible(this.zoom < 12)
+          if (this.$refs.editLayer) {
+            this.$refs.editLayer.setVisible(this.zoom >= 12)
+          }
+          if (this.$refs.airportLayer) {
+            this.$refs.airportLayer.setVisible(this.zoom < 12)
+          }
 
           // console.log(this.groundnet)
         }
@@ -97,6 +105,11 @@
       }
     },
     methods: {
+      onEdit (event) {
+        this.$refs.map.mapObject.options.minZoom = 13
+        this.$refs.editLayer.enableEdit()
+        this.$refs.toolBar.setEdit(this.$refs.editBar.isEditing)
+      },
       editAirport () {
         if (this.editingAirport) {
           let airportsToLoad = this.$store.state.Airports.airports
@@ -197,6 +210,9 @@
       zoom: function () {
         return this.$store.state.Settings.zoom
       },
+      isEditing: function () {
+        return this.$refs.editLayer !== undefined && this.$refs.editLayer.editing
+      },
       center: function () {
         return this.$store.state.Settings.center
       }

src/renderer/components/ToolBar.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="ToolBar">
+    <ToolButton
+      icon="fas fa-draw-polygon"
+      v-on:click="drawPolyline"
+      :show="editing"
+      tooltip="Draw Guidline"
+    ></ToolButton>
+  </div>
+</template>
+
+<script lang="js">
+/* eslint-disable */
+  import ToolButton from './ToolButton'
+  import Vue from 'vue'
+
+  import fileUrl from 'file-url'
+  const path = require('path')
+  const fs = require('fs');
+
+  export default {
+    components: { ToolButton },
+    data () {
+      return {isEditing: false}
+    },
+    created () {
+    },
+    methods: {
+      drawPolyline () {
+        this.$parent.$parent.$refs.toolLayer.stopDrawing()
+        this.$parent.$parent.$refs.toolLayer.drawPolyline()
+      },
+      setEdit (edit) {
+        this.isEditing = edit;
+        if(!this.isEditing) {
+          this.$parent.$parent.$refs.toolLayer.stopDrawing()
+        }
+      }
+    },
+    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/ToolButton.vue

@@ -0,0 +1,64 @@
+<template></template>
+
+<script lang="js">
+  import L from 'leaflet'
+  import '@fortawesome/fontawesome-free/css/all.css'
+  import ToolControl from '../leaflet/ToolControl.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(ToolControl)
+      this.add()
+    },
+    beforeDestroy () {
+      this.remove()
+    },
+    data () {
+      return {
+      }
+    },
+    methods: {
+      deferredMountedTo (parent) {
+        this.editbutton = new L.ToolControl({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/ToolLayer.vue

@@ -0,0 +1,69 @@
+<!--
+Copyright 2020 Keith Paterson
+
+This file is part of FG Airports.
+
+FG Airports is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+FG Airports is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License along with FG Airports. If not, see http://www.gnu.org/licenses/.
+-->
+<template></template>
+
+<script lang="js">
+/* eslint-disable */
+  import {LMap, LMarker} from 'vue2-leaflet'
+  import L from 'leaflet'
+  import LEdit from 'leaflet-editable/src/Leaflet.Editable.js'
+
+  export default {
+    name: 'tool-layer',
+    props: [],
+    mounted () {
+      this.add()
+    },
+    beforeDestroy () {
+      this.remove()
+    },
+    data () {
+      return {
+
+      }
+    },
+    methods: {
+      deferredMountedTo (parent) {
+        this.toolLayerGroup = L.layerGroup();
+        this.toolLayerGroup.addTo(this.$parent.mapObject)
+      },
+      remove () {
+        if (this.sidebar) {
+          this.$parent.removeLayer(this.sidebar)
+        }
+      },
+      add () {
+        if (this.$parent._isMounted) {
+          this.deferredMountedTo(this.$parent.mapObject)
+        }
+      },
+      stopDrawing () {
+        this.$parent.mapObject.editTools.stopDrawing()
+        this.toolLayerGroup.eachLayer((layer) => {
+          layer.removeFrom(this.toolLayerGroup);
+        });
+      },
+      drawPolyline () {
+        var polyLine = this.$parent.mapObject.editTools.startPolyline(undefined, {color: 'green'})
+        polyLine.addTo(this.toolLayerGroup)
+        polyLine.toolLayerGroup = this.toolLayerGroup;
+      },
+
+    },
+    computed: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/renderer/components/ZoomButton.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/ZoomControl.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.ZoomControl({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/leaflet/EditControl.js

@@ -2,7 +2,7 @@
 L.EditControl = L.Control.extend({
 
     options: {
-        position: 'topleft',
+        position: 'topright',
         callback: null,
         kind: '',
         html: '<i class="fas fa-draw-polygon"></i>',
@@ -44,6 +44,33 @@ L.NewMarkerControl = L.EditControl.extend({
         callback: null,
         kind: 'marker',
         html: '🖈'
-    }
+    },
 
+    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;
+        link.callback = this.options.callback;
+        link.addEventListener('click',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+        }, false);
+        link.addEventListener('mousedown',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+            window.LAYER = this.callback.call(map.editTools);
+        }, false);
+        link.addEventListener('mouseup',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+        }, false);
+        return container;
+    }
 });
+

src/renderer/leaflet/ToolControl.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+L.ToolControl = L.Control.extend({
+    options: {
+        position: 'bottomright',
+        callback: null,
+        kind: 'marker',
+        html: '🖈'
+    },
+
+    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;
+        link.callback = this.options.callback;
+        link.addEventListener('click',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+        }, false);
+        link.addEventListener('mousedown',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+            window.LAYER = this.callback.call(map.editTools);
+        }, false);
+        link.addEventListener('mouseup',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+        }, false);
+        return container;
+    }
+});

src/renderer/leaflet/ZoomControl.js

@@ -0,0 +1,76 @@
+/* eslint-disable */
+L.ZoomControl = 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;
+        link.callback = this.options.callback;
+        link.addEventListener('click',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+        }, false);
+        link.addEventListener('mousedown',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+            window.LAYER = this.callback.call(map.editTools);
+        }, false);
+        link.addEventListener('mouseup',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+        }, false);
+        return container;
+    }
+});
+
+
+L.NewMarkerControl = L.EditControl.extend({
+    options: {
+        position: 'topright',
+        callback: null,
+        kind: 'marker',
+        html: '🖈'
+    },
+
+    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;
+        link.callback = this.options.callback;
+        link.addEventListener('click',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+        }, false);
+        link.addEventListener('mousedown',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+            window.LAYER = this.callback.call(map.editTools);
+        }, false);
+        link.addEventListener('mouseup',function (event) {
+            event.stopPropagation();
+            event.preventDefault(); 
+            event.stopImmediatePropagation();               
+        }, false);
+        return container;
+    }
+});
+