From 381c6317759b2aad872a8f2c59fbc83b9480c33b Mon Sep 17 00:00:00 2001 From: portree_kid Date: Sat, 4 Jan 2020 19:33:53 +0100 Subject: [PATCH] Edit Circles --- src/renderer/components/ArcEdit.vue | 52 +++++++++++++++++++++ src/renderer/components/EditLayer.vue | 30 ++++++------ src/renderer/components/FlightgearMap.vue | 34 ++++++++++++-- src/renderer/components/GroundnetEdit.vue | 53 ++++++++++++++++++++++ src/renderer/components/LeafletSidebar.vue | 6 ++- src/renderer/components/PavementLayer.vue | 21 +++------ src/renderer/loaders/ParkingSpot.js | 41 +++++++++-------- src/renderer/loaders/groundnet_loader.js | 28 +++++++++--- src/renderer/loaders/markers.js | 13 ++++++ src/renderer/loaders/pavement_loader.js | 3 +- src/renderer/store/modules/Editable.js | 19 ++++++++ src/renderer/store/modules/Settings.js | 9 ++++ 12 files changed, 247 insertions(+), 62 deletions(-) create mode 100644 src/renderer/components/ArcEdit.vue create mode 100644 src/renderer/components/GroundnetEdit.vue diff --git a/src/renderer/components/ArcEdit.vue b/src/renderer/components/ArcEdit.vue new file mode 100644 index 0000000..4d62b1e --- /dev/null +++ b/src/renderer/components/ArcEdit.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/renderer/components/EditLayer.vue b/src/renderer/components/EditLayer.vue index 05aac05..93e5784 100644 --- a/src/renderer/components/EditLayer.vue +++ b/src/renderer/components/EditLayer.vue @@ -14,28 +14,13 @@ name: 'edit-layer', props: [], created () { - this.$store.subscribe((mutation, state) => { - if (mutation.type === 'BOUNDS') { - // console.log(this.$parent) - // console.log(this.$store.state.Settings.bounds) - let airportsToLoad = this.$store.state.Airports.airports - .filter(feature => this.visible(feature)) - .map(feature => feature.properties.icao) - if (airportsToLoad[0] !== this.editingAirport) { - this.groundnet = readGroundnetXML(this.$store.state.Settings.settings.airportsDirectory, airportsToLoad[0]) - this.groundnet.addTo(this.$parent.mapObject) - this.editingAirport = airportsToLoad[0] - } - // console.log(this.groundnet) - } - }) - }, - mounted () { console.log(LMap) console.log(LMarker) console.log(L) console.log(LEdit) }, + mounted () { + }, beforeDestroy () { this.remove() }, @@ -44,6 +29,17 @@ } }, methods: { + load (icao) { + 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 let coordinates = feature.geometry.coordinates diff --git a/src/renderer/components/FlightgearMap.vue b/src/renderer/components/FlightgearMap.vue index 8566317..1fd2343 100644 --- a/src/renderer/components/FlightgearMap.vue +++ b/src/renderer/components/FlightgearMap.vue @@ -10,8 +10,7 @@ - - + + @@ -47,6 +47,21 @@ props: [], mounted () { this.$store.dispatch('getAirports') + this.$store.subscribe((mutation, state) => { + if (mutation.type === 'BOUNDS') { + // console.log(this.$parent) + // console.log(this.$store.state.Settings.bounds) + let airportsToLoad = this.$store.state.Airports.airports + .filter(feature => this.visible(feature)) + .map(feature => feature.properties.icao) + if (airportsToLoad[0] !== this.editingAirport) { + this.$refs.editLayer.load(airportsToLoad[0]) + this.$refs.pavementLayer.load(airportsToLoad[0]) + this.editingAirport = airportsToLoad[0] + } + // console.log(this.groundnet) + } + }) }, data () { return { @@ -58,19 +73,28 @@ } }, methods: { + visible (feature) { + let bounds = this.$store.state.Settings.bounds + let coordinates = feature.geometry.coordinates + let ret = bounds.getNorthEast().lat > Number(coordinates[1]) && + bounds.getNorthEast().lng > Number(coordinates[0]) + let ret2 = bounds.getSouthWest().lat < Number(coordinates[1]) && + bounds.getSouthWest().lng < Number(coordinates[0]) + return ret && ret2 + }, onClick (item) { console.log(item) this.$store.commit('SET_EDIT_AIRPORT', item) }, zoomUpdated (zoom) { - this.$store.commit('ZOOM', zoom) + this.$store.dispatch('setZoom', zoom) console.log(this.$refs.airportLayer.setVisible(zoom < 12)) }, centerUpdated (center) { - this.$store.commit('CENTER', center) + this.$store.dispatch('setCenter', center) }, boundsUpdated (bounds) { - this.$store.commit('BOUNDS', bounds) + this.$store.dispatch('setBounds', bounds) } }, computed: { diff --git a/src/renderer/components/GroundnetEdit.vue b/src/renderer/components/GroundnetEdit.vue new file mode 100644 index 0000000..3315af1 --- /dev/null +++ b/src/renderer/components/GroundnetEdit.vue @@ -0,0 +1,53 @@ + + + diff --git a/src/renderer/components/LeafletSidebar.vue b/src/renderer/components/LeafletSidebar.vue index 3aaf56a..55b5c64 100644 --- a/src/renderer/components/LeafletSidebar.vue +++ b/src/renderer/components/LeafletSidebar.vue @@ -24,6 +24,8 @@
+ +
@@ -41,13 +43,15 @@ import {} from 'leaflet-sidebar-v2' import L from 'leaflet' import AirportEdit from './AirportEdit' + import GroundnetEdit from './GroundnetEdit' + import ArcEdit from './ArcEdit' import SettingsPanel from './SettingsPanel' import RunScan from './RunScan' import FileSelect from './FileSelect' export default { name: 'leaflet-sidebar', - components: { AirportEdit, SettingsPanel, RunScan, FileSelect }, + components: { AirportEdit, ArcEdit, GroundnetEdit, SettingsPanel, RunScan, FileSelect }, props: [], mounted () { this.add() diff --git a/src/renderer/components/PavementLayer.vue b/src/renderer/components/PavementLayer.vue index 51a89b1..cc3f681 100644 --- a/src/renderer/components/PavementLayer.vue +++ b/src/renderer/components/PavementLayer.vue @@ -14,20 +14,6 @@ name: 'edit-layer', props: [], created () { - this.$store.subscribe((mutation, state) => { - if (mutation.type === 'BOUNDS') { - // console.log(this.$parent) - // console.log(this.$store.state.Settings.bounds) - let airportsToLoad = this.$store.state.Airports.airports - .filter(feature => this.visible(feature)) - .map(feature => feature.properties.icao) - if (airportsToLoad[0] !== this.editingAirport) { - readPavement(this.$store.state.Settings.settings.flightgearDirectory_apt, airportsToLoad[0], this.read) - this.editingAirport = airportsToLoad[0] - } - // console.log(this.groundnet) - } - }) }, mounted () { console.log(LMap) @@ -43,11 +29,18 @@ } }, methods: { + load (icao) { + // Callback for add + readPavement(this.$store.state.Settings.settings.flightgearDirectory_apt, icao, this.read) + }, read (layer) { this.groundnet = layer if (this.groundnet) { this.groundnet.addTo(this.$parent.mapObject) } + this.groundnet.eachLayer(l => { + l.bringToBack() + }) }, visible (feature) { let bounds = this.$store.state.Settings.bounds diff --git a/src/renderer/loaders/ParkingSpot.js b/src/renderer/loaders/ParkingSpot.js index 0ca8d0a..f349ad9 100644 --- a/src/renderer/loaders/ParkingSpot.js +++ b/src/renderer/loaders/ParkingSpot.js @@ -5,22 +5,26 @@ const turf = require('@turf/turf'); const util = require('util'); var $ = require('jquery'); - L.ParkingSpot = L.Circle.extend({ - id: String, - attributes: Object, + options: { + id: 'Custom data!', + attributes: {} + }, createDirection: function () { if (this.direction === undefined ) { var start = this._latlng; var options = { units: 'kilometers' }; - var end = turf.destination([start.lat, start.lng], this.attributes.radius / 1000, this.attributes.heading - 180, options); + var end = turf.destination([start.lat, start.lng], this.options.attributes.radius / 1000, this.options.attributes.heading - 180, options); // Resize, since leaflet is wrong var rad2 = start.distanceTo(end.geometry.coordinates); this.setRadius(rad2); - this.editor._resizeLatLng.__vertex.setLatLng(end.geometry.coordinates); + // console.log(util.inspect(this.editor)); + if(this.editor._resizeLatLng.__vertex !== undefined){ + this.editor._resizeLatLng.__vertex.setLatLng(end.geometry.coordinates); + } this.direction = L.polyline([start, end.geometry.coordinates]); - this.direction.addTo(map); + this.direction.addTo(this.editor.editLayer); this.on('editable:drawing:move', function (event) { @@ -33,7 +37,7 @@ L.ParkingSpot = L.Circle.extend({ if (this.editEnabled()) { var start = this._latlng; var options = { units: 'kilometers' }; - var end = turf.destination([start.lat, start.lng], this.attributes.radius / 1000, this.attributes.heading - 180, options); + var end = turf.destination([start.lat, start.lng], this.options.attributes.radius / 1000, this.options.attributes.heading - 180, options); // Resize, since leaflet is wrong var rad2 = start.distanceTo(end.geometry.coordinates); this.setRadius(rad2); @@ -48,10 +52,15 @@ L.ParkingSpot = L.Circle.extend({ var start = this._latlng; var end = this.editor._resizeLatLng.__vertex.getLatLng(); var heading = turf.bearing([start.lat, start.lng], [end.lat, end.lng]); - this.attributes.heading = heading + 180; + this.options.attributes.heading = heading + 180; this.direction.setLatLngs([start, end]); } }, + + extensions: function () { + this.createDirection(); + }, + _getLatRadius: function () { return this._mRadius; }, @@ -59,6 +68,7 @@ L.ParkingSpot = L.Circle.extend({ _getLngRadius: function () { return this._mRadius; }, + }); var parkingSpot = function (n, layerGroup) { @@ -71,6 +81,9 @@ var parkingSpot = function (n, layerGroup) { circle.on('add', function (event) { console.log(event); }); + circle.on('editable:enable', function (event) { + // event.target.createDirection(); + }); circle.id = n.attr('index'); /* console.log( key + "\t" + value); if(isNaN(value)) - circle.attributes[ key ] = value; + circle.options.attributes[ key ] = value; else - circle.attributes[ key ] = Number( value); + circle.options.attributes[ key ] = Number( value); }); - - circle.addTo(layerGroup); - // circle.enableEdit(); - circle.on('dblclick', function (event) { L.DomEvent.stop(); circle.toggleEdit(); }); - circle.on('click', function (event) { - console.log("Click : " + event.target); - }); - // circle.createDirection(); return circle; } diff --git a/src/renderer/loaders/groundnet_loader.js b/src/renderer/loaders/groundnet_loader.js index e432987..7cb30bb 100644 --- a/src/renderer/loaders/groundnet_loader.js +++ b/src/renderer/loaders/groundnet_loader.js @@ -8,9 +8,11 @@ const markers = require('./markers'); const parkingSpot = require('./ParkingSpot.js'); +const store = require('../store'); + const util = require('util'); -console.log(convert.formats); +var $ = require('jquery'); var featureLookup = {}; @@ -58,8 +60,12 @@ exports.readGroundnetXML = function (fDir, icao) { if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){ follow(event.target.id, event); } - }); + circle.on('click', function (event) { + console.log("Click : " + event.target); + store.default.dispatch('setParking', event.target.options.attributes); + }); + nodesLookup[n.attr('index')] = n; featureLookup[n.attr('index')] = new Array(); featureLookup[n.attr('index')].push(circle); @@ -103,14 +109,25 @@ exports.readGroundnetXML = function (fDir, icao) { if (!bidirectional) { var beginlatlon = convert(begin.attr('lat') + " " + begin.attr('lon')); var endlatlon = convert(end.attr('lat') + " " + end.attr('lon')); - const polyline = new L.TaxiwaySegment([[beginlatlon.decimalLatitude, beginlatlon.decimalLongitude], [endlatlon.decimalLatitude, endlatlon.decimalLongitude]], { radius: n.attr('radius') }).addTo(layerGroup); + const polyline = new L.TaxiwaySegment([[beginlatlon.decimalLatitude, beginlatlon.decimalLongitude], [endlatlon.decimalLatitude, endlatlon.decimalLongitude]], {}).addTo(layerGroup); + $.each( n.attrs, function( key, value ) { + console.log( key + "\t" + value); + + if(isNaN(value)) + polyline.options.attributes[ key ] = value; + else + polyline.options.attributes[ key ] = Number( value); + }); + polyline.updateStyle(); + polyline.begin = begin.attr('index'); polyline.end = end.attr('index'); // polyline.enableEdit(); - polyline.on('dblclick', function (event) { L.DomEvent.stop; polyline.toggleEdit; }); + // polyline.on('dblclick', function (event) { L.DomEvent.stop; polyline.toggleEdit; }); polyline.on('click', function (event) { - console.log(event); + console.log("Click : " + event.target); + store.default.dispatch('setArc', event.target.options.attributes); }); polyline.on('editable:drawing:move', function (event) { console.log(event.target); @@ -170,7 +187,6 @@ exports.readGroundnetXML = function (fDir, icao) { featureLookup[polyline.end].push(polyline); } } - }).sort(); diff --git a/src/renderer/loaders/markers.js b/src/renderer/loaders/markers.js index 9e6e1e9..7b4f88c 100644 --- a/src/renderer/loaders/markers.js +++ b/src/renderer/loaders/markers.js @@ -2,6 +2,11 @@ var L = require('leaflet'); L.TaxiwaySegment = L.Polyline.extend({ + options: { + id: 'Custom data!', + attributes: {} + }, + begin: String, end: String, bidirectional: Boolean, @@ -19,6 +24,14 @@ L.TaxiwaySegment = L.Polyline.extend({ element.__vertex.middleMarker.updateLatLng(); } }); + }, + + updateStyle() { + var style = {}; + if (this.options.attributes.isPushBackRoute) { + style.color = 'magenta'; + } + this.setStyle(style); } }); diff --git a/src/renderer/loaders/pavement_loader.js b/src/renderer/loaders/pavement_loader.js index 8cea592..68bc3fb 100644 --- a/src/renderer/loaders/pavement_loader.js +++ b/src/renderer/loaders/pavement_loader.js @@ -40,8 +40,9 @@ module.exports.isScanning = false; var scanMethods = { 1: (line, icao) => { - console.log('Airport:', line); + // console.log('Airport:', line); if (line[4]===icao){ + console.log('Airport:', line); module.exports.isScanning = true; } else { module.exports.isScanning = false; diff --git a/src/renderer/store/modules/Editable.js b/src/renderer/store/modules/Editable.js index 98f0add..f6b66b7 100644 --- a/src/renderer/store/modules/Editable.js +++ b/src/renderer/store/modules/Editable.js @@ -4,17 +4,36 @@ const state = { } const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT' +const SET_EDIT_PARKING = 'SET_EDIT_PARKING' +const SET_EDIT_ARC = 'SET_EDIT_ARC' const mutations = { SET_EDIT_AIRPORT (state, airport) { state.data = airport state.type = 'airport' + }, + SET_EDIT_PARKING (state, parking) { + state.data = parking + state.type = 'parking' + }, + SET_EDIT_ARC (state, arc) { + state.data = arc + state.type = 'arc' + }, + 'SET_EDIT_PARKING_NAME' (state, parkingName) { + state.data.name = parkingName } } const actions = { async setAirport (context, airport) { context.commit(SET_EDIT_AIRPORT, airport) + }, + async setParking (context, parking) { + context.commit(SET_EDIT_PARKING, parking) + }, + async setArc (context, arc) { + context.commit(SET_EDIT_ARC, arc) } } diff --git a/src/renderer/store/modules/Settings.js b/src/renderer/store/modules/Settings.js index f09852e..5b36bb6 100644 --- a/src/renderer/store/modules/Settings.js +++ b/src/renderer/store/modules/Settings.js @@ -29,6 +29,15 @@ const mutations = { const plugins = [] const actions = { + async setZoom (context, zoom) { + context.commit('ZOOM', zoom) + }, + async setCenter (context, center) { + context.commit('CENTER', center) + }, + async setBounds (context, bounds) { + context.commit('BOUNDS', bounds) + } } export default {