From 79088be6f630675dda82a5d4b9dd93871641a3f1 Mon Sep 17 00:00:00 2001 From: portree_kid Date: Sun, 2 Feb 2020 23:05:49 +0100 Subject: [PATCH] RunwayNode adding --- src/renderer/components/EditLayer.vue | 65 ++++++++++++++++- src/renderer/components/LeafletSidebar.vue | 8 ++- src/renderer/components/NodeEdit.vue | 81 ++++++++++++++++++++++ src/renderer/loaders/TaxiwaySegment.js | 55 ++++++++------- src/renderer/loaders/groundnet_loader.js | 20 +++--- src/renderer/store/modules/Editable.js | 10 ++- 6 files changed, 198 insertions(+), 41 deletions(-) create mode 100644 src/renderer/components/NodeEdit.vue diff --git a/src/renderer/components/EditLayer.vue b/src/renderer/components/EditLayer.vue index 9f89a0d..3d599a1 100644 --- a/src/renderer/components/EditLayer.vue +++ b/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: "
", + 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) => { diff --git a/src/renderer/components/LeafletSidebar.vue b/src/renderer/components/LeafletSidebar.vue index b865b2c..e70e080 100644 --- a/src/renderer/components/LeafletSidebar.vue +++ b/src/renderer/components/LeafletSidebar.vue @@ -4,7 +4,7 @@
@@ -22,10 +22,11 @@

A responsive sidebar for mapping libraries

-
+
+
@@ -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() diff --git a/src/renderer/components/NodeEdit.vue b/src/renderer/components/NodeEdit.vue new file mode 100644 index 0000000..4bc7a82 --- /dev/null +++ b/src/renderer/components/NodeEdit.vue @@ -0,0 +1,81 @@ + + + diff --git a/src/renderer/loaders/TaxiwaySegment.js b/src/renderer/loaders/TaxiwaySegment.js index fb7011a..ccd5cce 100644 --- a/src/renderer/loaders/TaxiwaySegment.js +++ b/src/renderer/loaders/TaxiwaySegment.js @@ -8,20 +8,20 @@ L.TaxiwaySegment = L.Polyline.extend({ end: String, bidirectional: Boolean, - updateBeginVertex : function (latlng) { + updateBeginVertex: function (latlng) { if (this._latlngs[0].__vertex) { - this._latlngs[0].__vertex.setLatLng(latlng); + this._latlngs[0].__vertex.setLatLng(latlng); } }, - updateEndVertex : function (latlng) { - if(this._latlngs[1].__vertex){ - this._latlngs[1].__vertex.setLatLng(latlng); + updateEndVertex: function (latlng) { + if (this._latlngs[1].__vertex) { + this._latlngs[1].__vertex.setLatLng(latlng); } }, updateMiddle: function () { this._latlngs.forEach(element => { - if(element.__vertex.middleMarker){ + if (element.__vertex.middleMarker) { element.__vertex.middleMarker.updateLatLng(); } }); @@ -42,6 +42,7 @@ L.TaxiwaySegment = L.Polyline.extend({ this.on('click', function (event) { console.log("Click : " + event.target); store.default.dispatch('setArc', event.target.options.attributes); + }); this.on('editable:drawing:move', function (event) { console.log(event.target); @@ -49,13 +50,19 @@ L.TaxiwaySegment = L.Polyline.extend({ this.follow(dragIndex, event); } }); + this.on('editable:vertex:clicked', function (event) { + console.log(this.featureLookup[event.vertex.glueindex]); + + store.default.dispatch('setNode', event.vertex.latlng.attributes) + event.vertex._icon.style['background-color'] = 'red'; + }); var dragIndex = -1; this.on('editable:vertex:dragstart', function (event) { - console.log("Event Target : ", event.target); - console.log("Middle Marker : ", event.vertex == event.vertex.middleMarker); - console.log("Middle Marker : ", event.vertex.glueindex == undefined); - if(event.vertex.glueindex == undefined) - return; + console.log("Event Target : ", event.target); + console.log("Middle Marker : ", event.vertex == event.vertex.middleMarker); + console.log("Middle Marker : ", event.vertex.glueindex == undefined); + if (event.vertex.glueindex == undefined) + return; dragIndex = event.vertex.glueindex; }); this.on('editable:vertex:dragend', function (event) { @@ -70,14 +77,14 @@ L.TaxiwaySegment = L.Polyline.extend({ } dragIndex = -1; }); - }, - /** - * - */ + }, + /** + * + */ - follow (dragIndex, event) { + follow(dragIndex, event) { this.featureLookup[dragIndex].forEach(element => { - if(element !== event.target){ + if (element !== event.target) { if (element instanceof L.RunwayNode) { element.setLatLng(event.latlng); } @@ -102,18 +109,18 @@ L.TaxiwaySegment = L.Polyline.extend({ element.updateEndVertex(event.latlng); element.updateMiddle(); } - } else if (element instanceof L.Editable.VertexMarker) { + } else if (element instanceof L.Editable.VertexMarker) { console.log(element); element.setLatLng(event.latlng); element.latlngs.forEach((latlng, index) => { - console.log(latlng); - if(latlng.__vertex === element) { - latlng.update(event.latlng); + console.log(latlng); + if (latlng.__vertex === element) { + latlng.update(event.latlng); } }); element.editor.feature.setLatLngs(element.latlngs); element.editor.feature.updateMiddle(); - } + } } }) @@ -122,12 +129,12 @@ L.TaxiwaySegment = L.Polyline.extend({ updateStyle() { var style = {}; if (this.options.attributes.isPushBackRoute) { - style.color = 'magenta'; + style.color = 'magenta'; } console.log("isPushBackRoute ", this.options.attributes.isPushBackRoute); this.setStyle(style); if (!this.bidirectional) { - this.setText(' ► ', {repeat: true, attributes: {fill: 'red', size: 20}}) + this.setText(' ► ', { repeat: true, attributes: { fill: 'red', size: 20 } }) } } }); \ No newline at end of file diff --git a/src/renderer/loaders/groundnet_loader.js b/src/renderer/loaders/groundnet_loader.js index fd63fe6..5e37b5d 100644 --- a/src/renderer/loaders/groundnet_loader.js +++ b/src/renderer/loaders/groundnet_loader.js @@ -72,6 +72,7 @@ exports.readGroundnetXML = function (fDir, icao, force) { //console.log(latlon.decimalLatitude); layerGroup.maxId = Math.max(layerGroup.maxId, Number(n.attr('index'))) + nodesLookup[n.attr('index')] = n; if (n.attr('isOnRunway') === '1') { var rNode = runwayNode(n, layerGroup); @@ -80,15 +81,16 @@ exports.readGroundnetXML = function (fDir, icao, force) { } featureLookup[rNode.glueindex].push(rNode); } + //store.default.dispatch('setNode', n) }).sort(); var taxiArcs = xml.find('groundnet/TaxiWaySegments/arc'); taxiArcs.map(n => { - var begin = nodesLookup[n.attr('begin')]; - var end = nodesLookup[n.attr('end')]; - if (typeof begin !== 'undefined' && typeof end !== 'undefined') { + var beginNode = nodesLookup[n.attr('begin')]; + var endNode = nodesLookup[n.attr('end')]; + if (typeof beginNode !== 'undefined' && typeof endNode !== 'undefined') { var bidirectional = false; if (typeof featureLookup[n.attr('begin')] !== 'undefined') { featureLookup[n.attr('begin')].forEach(element => { @@ -107,11 +109,11 @@ exports.readGroundnetXML = function (fDir, icao, force) { }); } if (!bidirectional) { - var beginlatlon = convert(begin.attr('lat') + " " + begin.attr('lon')); - var endlatlon = convert(end.attr('lat') + " " + end.attr('lon')); + 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); polyline._latlngs[0].attributes = {}; - $.each(begin.attrs, function (key, value) { + $.each(beginNode.attrs, function (key, value) { console.log(key + "\t" + value); if (isNaN(value)) @@ -120,7 +122,7 @@ exports.readGroundnetXML = function (fDir, icao, force) { polyline._latlngs[0].attributes[key] = Number(value); }); polyline._latlngs[1].attributes = {}; - $.each(end.attrs, function (key, value) { + $.each(endNode.attrs, function (key, value) { console.log(key + "\t" + value); if (isNaN(value)) @@ -138,8 +140,8 @@ exports.readGroundnetXML = function (fDir, icao, force) { }); polyline.updateStyle(); - polyline.begin = begin.attr('index'); - polyline.end = end.attr('index'); + polyline.begin = beginNode.attr('index'); + polyline.end = endNode.attr('index'); // polyline.enableEdit(); // polyline.on('dblclick', function (event) { L.DomEvent.stop; polyline.toggleEdit; }); diff --git a/src/renderer/store/modules/Editable.js b/src/renderer/store/modules/Editable.js index 8ca5f7b..082fb1d 100644 --- a/src/renderer/store/modules/Editable.js +++ b/src/renderer/store/modules/Editable.js @@ -1,7 +1,7 @@ const state = { type: 'none', index: 'none', - data: {airports: {}, parking: {}, arc: {}, nodes: {}} + data: {airports: {}, parking: {}, arc: {}, node: {}} } const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT' @@ -20,7 +20,7 @@ const mutations = { state.type = 'parking' }, 'SET_EDIT_NODE' (state, node) { - state.data.nodes[node.index] = node + state.data.node = node state.index = node.index state.type = 'node' }, @@ -30,6 +30,12 @@ const mutations = { }, 'SET_EDIT_PARKING_NAME' (state, parkingName) { state.data.name = parkingName + }, + 'SET_EDIT_HOLDPOINTTYPE' (state, holdPointType) { + state.data.node.holdPointType = holdPointType + }, + 'SET_EDIT_ISONRUNWAY' (state, isOnRunway) { + state.data.node.isOnRunway = isOnRunway } }