From 60903eb3e5db369090a6577e23c30a62064270fb Mon Sep 17 00:00:00 2001 From: portree_kid Date: Wed, 18 Nov 2020 20:26:40 +0100 Subject: [PATCH] MultiLine Edit --- src/renderer/components/ArcEditMulti.vue | 106 +++++ src/renderer/components/EditLayer.vue | 36 +- src/renderer/components/FlightgearMap.vue | 4 +- src/renderer/components/LeafletSidebar.vue | 4 +- .../loaders/TaxiwaySegmentExtender.js | 395 +++++++++++------- src/renderer/store/modules/Editable.js | 50 ++- src/renderer/store/modules/Loading.js | 6 + 7 files changed, 441 insertions(+), 160 deletions(-) create mode 100644 src/renderer/components/ArcEditMulti.vue diff --git a/src/renderer/components/ArcEditMulti.vue b/src/renderer/components/ArcEditMulti.vue new file mode 100644 index 0000000..fdefe0b --- /dev/null +++ b/src/renderer/components/ArcEditMulti.vue @@ -0,0 +1,106 @@ + + + + diff --git a/src/renderer/components/EditLayer.vue b/src/renderer/components/EditLayer.vue index c845d84..5ac564f 100644 --- a/src/renderer/components/EditLayer.vue +++ b/src/renderer/components/EditLayer.vue @@ -68,6 +68,16 @@ You should have received a copy of the GNU General Public License along with FG deep: true //add this if u need to watch object properties change etc. } ); + this.$store.watch( + function (state) { + return state.Editable.data.multiarc; + }, + () => { this.editedMultiArc() } + , + { + deep: true //add this if u need to watch object properties change etc. + } + ); this.$store.watch( function (state) { return state.Editable.data.parking; @@ -658,6 +668,7 @@ You should have received a copy of the GNU General Public License along with FG !this.editing) { return; } + console.debug("Edit Type : " + this.$store.state.type); var arc = this.groundnetLayerGroup.getLayer(this.$store.state.Editable.index); if (arc && arc instanceof L.Polyline) { console.log('Edited Arc : ' + this.$store.state.Editable.index); @@ -665,6 +676,27 @@ You should have received a copy of the GNU General Public License along with FG arc.updateStyle(); } }, + editedMultiArc() { + if (!this.groundnetLayerGroup || + this.$store.state.Editable.data.multiarc === undefined || + this.$store.state.Editable.data.multiarc.ids === undefined || + this.featureLookup===undefined || + !this.editing) { + return; + } + console.debug("Edit Type : " + this.$store.state.Editable.data.multiarc.ids); + this.$store.state.Editable.data.multiarc.ids.forEach(id => { + console.debug(id); + var arc = this.groundnetLayerGroup.getLayer(id); + if (arc && arc instanceof L.Polyline) { + console.log('Edited Arc : ' + this.$store.state.Editable.index); + arc.options.attributes.direction = this.$store.state.Editable.data.multiarc.direction + arc.options.attributes.name = this.$store.state.Editable.data.multiarc.name + arc.options.attributes.isPushBackRoute = this.$store.state.Editable.data.multiarc.isPushBackRoute + arc.updateStyle(); + } + }); + }, //Update Node editedNode() { if (this.$store.state.Editable.index === undefined || @@ -824,11 +856,11 @@ You should have received a copy of the GNU General Public License along with FG this.$parent.mapObject.on('click', this.addParking) }, removeLayerClick (event) { - console.log(event) + console.debug(event) this.groundnetLayerGroup.removeLayer(event.target) }, addParking (event) { - console.log(event.latlng) + console.debug(event.latlng) if (event.latlng === undefined) { return } diff --git a/src/renderer/components/FlightgearMap.vue b/src/renderer/components/FlightgearMap.vue index 7002f4d..96e9fde 100644 --- a/src/renderer/components/FlightgearMap.vue +++ b/src/renderer/components/FlightgearMap.vue @@ -85,7 +85,7 @@ You should have received a copy of the GNU General Public License along with FG }, (newValue, oldValue) => { // debugger - console.log('setIcaoLoading ' + oldValue + ' => ' + newValue + ' ' + this.groundnetLoaded + ' ' + this.pavementLoaded + ' ' + this.loadingInstance) + console.log('setIcaoLoading ' + oldValue + ' => ' + newValue + ' groundnetLoaded ' + this.groundnetLoaded + ' pavementLoaded ' + this.pavementLoaded + ' ' + this.loadingInstance) if (newValue !== oldValue && newValue !== '') { this.groundnetLoaded = newValue if ((this.loadingInstance === null || this.loadingInstance === undefined)) { @@ -105,7 +105,7 @@ You should have received a copy of the GNU General Public License along with FG }, (newValue, oldValue) => { // debugger - console.log('groundnetLoaded ' + oldValue + ' => ' + newValue + ' ' + this.groundnetLoaded + ' ' + this.pavementLoaded + ' ' + this.loadingInstance) + console.log('groundnetLoaded ' + oldValue + ' => ' + newValue + ' groundnetLoaded ' + this.groundnetLoaded + ' pavementLoaded ' + this.pavementLoaded + ' ' + this.loadingInstance) if (newValue !== oldValue) { this.groundnetLoaded = newValue if (this.groundnetLoaded && diff --git a/src/renderer/components/LeafletSidebar.vue b/src/renderer/components/LeafletSidebar.vue index 746190d..967de5b 100644 --- a/src/renderer/components/LeafletSidebar.vue +++ b/src/renderer/components/LeafletSidebar.vue @@ -38,6 +38,7 @@ You should have received a copy of the GNU General Public License along with FG
+ @@ -74,6 +75,7 @@ You should have received a copy of the GNU General Public License along with FG import L from 'leaflet' import AirportEdit from './AirportEdit' import ArcEdit from './ArcEdit' + import ArcEditMulti from './ArcEditMulti' import CheckPanel from './CheckPanel' import FileSelect from './FileSelect' import Help from './Help' @@ -89,7 +91,7 @@ You should have received a copy of the GNU General Public License along with FG export default { name: 'leaflet-sidebar', - components: { Help, AirportEdit, ArcEdit, CheckPanel, NodeEdit, ParkingEdit, ParkingGroupEdit, RunScan, FileSelect, SettingsPanel, Search, Upload, WorkInProgress }, + components: { Help, AirportEdit, ArcEdit, ArcEditMulti, CheckPanel, NodeEdit, ParkingEdit, ParkingGroupEdit, RunScan, FileSelect, SettingsPanel, Search, Upload, WorkInProgress }, props: [], created () { window.addEventListener('keydown', this.doCommand) diff --git a/src/renderer/loaders/TaxiwaySegmentExtender.js b/src/renderer/loaders/TaxiwaySegmentExtender.js index 041b2e6..d048ef9 100644 --- a/src/renderer/loaders/TaxiwaySegmentExtender.js +++ b/src/renderer/loaders/TaxiwaySegmentExtender.js @@ -4,6 +4,7 @@ const Vue = require('vue'); var L = require('leaflet'); const store = require('../store'); const util = require('util'); +const assign = require('core-js/fn/object/assign'); const extendTaxiSegment = function (taxiwaySegment) { taxiwaySegment.__proto__.begin; @@ -36,7 +37,7 @@ const extendTaxiSegment = function (taxiwaySegment) { this.editLayer = editLayer; this._latlngs[0].glueindex = this.begin; this._latlngs.slice(-1)[0].glueindex = this.end; - if(this.featureLookup) { + if (this.featureLookup) { if (typeof this.featureLookup[this.begin] === 'undefined') { this.featureLookup[this.begin] = new Array(); } @@ -45,7 +46,7 @@ const extendTaxiSegment = function (taxiwaySegment) { } this.featureLookup[this.begin].push(this); this.featureLookup[this.end].push(this); - this.bidirectional = true; + this.bidirectional = true; } }; taxiwaySegment.__proto__.select = function () { @@ -53,50 +54,50 @@ const extendTaxiSegment = function (taxiwaySegment) { this.updateStyle(); }; taxiwaySegment.__proto__.selectVertex = function (index) { - this.getLatLngs().forEach( element => { - if (Number(element.glueindex) === index) { - if (element.__vertex._icon != null) { - element.__vertex.__proto__.deselect = function () { - if (this._icon != null) { - this._icon.style.setProperty('background-color','white'); - this._icon.style.setProperty('color','white'); - } else if (this.icon != null) { - if (this.icon.style != null) { - this.icon.style['background-color'] = 'white'; - } else { - this.setStyle({ color: 'white' }) + this.getLatLngs().forEach(element => { + if (Number(element.glueindex) === index) { + if (element.__vertex._icon != null) { + element.__vertex.__proto__.deselect = function () { + if (this._icon != null) { + this._icon.style.setProperty('background-color', 'white'); + this._icon.style.setProperty('color', 'white'); + } else if (this.icon != null) { + if (this.icon.style != null) { + this.icon.style['background-color'] = 'white'; + } else { + this.setStyle({ color: 'white' }) + } + } else if (this.options.icon != null) { + if (this.options.icon.style != null) { + this.options.icon.style['background-color'] = 'white'; + } else { + this.options.icon._setIconStyles({ color: 'white' }) + } + } } - } else if (this.options.icon != null) { - if (this.options.icon.style != null) { - this.options.icon.style['background-color'] = 'white'; + element.__vertex._icon.style.setProperty('background-color', 'red'); + element.__vertex._icon.style.setProperty('color', 'red'); + } else if (element.__vertex !== undefined && element.__vertex.icon != null) { + if (element.__vertex.icon.style != null) { + element.__vertex.icon.style['background-color'] = 'red'; } else { - this.options.icon._setIconStyles({ color: 'white' }) + element.__vertex.setStyle({ color: 'red' }) } - } + } else if (element.__vertex.options.icon != null) { + if (element.__vertex.options.icon.style != null) { + element.__vertex.options.icon.style['background-color'] = 'red'; + } else { + element.__vertex.options.icon._setIconStyles({ color: 'red' }) + } + } } - element.__vertex._icon.style.setProperty('background-color','red'); - element.__vertex._icon.style.setProperty('color','red'); - } else if (element.__vertex !== undefined && element.__vertex.icon != null) { - if (element.__vertex.icon.style != null) { - element.__vertex.icon.style['background-color'] = 'red'; - } else { - element.__vertex.setStyle({ color: 'red' }) - } - } else if (element.__vertex.options.icon != null) { - if (element.__vertex.options.icon.style != null) { - element.__vertex.options.icon.style['background-color'] = 'red'; - } else { - element.__vertex.options.icon._setIconStyles({ color: 'red' }) - } - } - } - }); + }); }; taxiwaySegment.__proto__.deselect = function () { this.options.attributes.selected = false; this.updateStyle(); - this.getLatLngs().forEach( element => { - if (element.__vertex!==undefined) { + this.getLatLngs().forEach(element => { + if (element.__vertex !== undefined) { if (element.__vertex._icon != null) { element.__vertex._icon.style['background-color'] = 'white'; } else if (element.__vertex.icon != null) { @@ -111,128 +112,170 @@ const extendTaxiSegment = function (taxiwaySegment) { } else { element.__vertex.options.icon._setIconStyles({ color: 'white' }) } - } + } } }); }; taxiwaySegment.__proto__.addListeners = function () { this.on('click', function (event) { - if (Number(store.default.state.Editable.index) >= 0 && - this.featureLookup[store.default.state.Editable.index] !== undefined) { + if (Number(store.default.state.Editable.index) >= 0 && + this.featureLookup[store.default.state.Editable.index] !== undefined) { this.featureLookup[store.default.state.Editable.index].forEach(element => { element.deselect(); }); } event.target.select(); - console.log("Click : " + event.target); - if (store.default.state.Editable.data.arc === undefined || - store.default.state.Editable.data.arc !== event.target.options.attributes) { - if (event.target.options.attributes === undefined) { - event.target.options.attributes = {}; - } - event.target.options.attributes.index = event.target._leaflet_id; + console.debug("Click : " + util.inspect(event.originalEvent)); + if (!event.originalEvent.ctrlKey) { + if (store.default.state.Editable.data.arc === undefined || + store.default.state.Editable.data.arc !== event.target.options.attributes) { + if (event.target.options.attributes === undefined) { + event.target.options.attributes = {}; + } + event.target.options.attributes.index = event.target._leaflet_id; - this.editLayer.featureLookup[event.target._leaflet_id] = []; - this.featureLookup[event.target._leaflet_id].push(this); - event.target.options.attributes.selected = true; - store.default.dispatch('setArc', event.target.options.attributes); - } + this.editLayer.featureLookup[event.target._leaflet_id] = []; + this.featureLookup[event.target._leaflet_id].push(this); + event.target.options.attributes.selected = true; + store.default.dispatch('setArc', event.target.options.attributes); + } + } else { + var arcs = event.target.expandArc(event.target.options.attributes); + var multiarc = {name: '', index: 900719925474099, ids: [] ,isPushBackRoute: null, direction: null}; + if (store.default.state.Editable.data.multiarc === undefined || + store.default.state.Editable.data.multiarc !== event.target.options.attributes) { + if (event.target.options.attributes === undefined) { + event.target.options.attributes = {}; + } + event.target.options.attributes.index = event.target._leaflet_id; + + this.editLayer.featureLookup[event.target._leaflet_id] = []; + this.featureLookup[event.target._leaflet_id].push(this); + event.target.options.attributes.selected = true; + + //multiarc.name = JSON.parse(JSON.stringify(event.target.options.attributes.name)); + //multiarc.isPushBackRoute = JSON.parse(JSON.stringify(event.target.options.attributes.isPushBackRoute)); + //multiarc.direction = JSON.parse(JSON.stringify(event.target.options.attributes.direction)); + if(event.target.options.attributes.name!==undefined) { + multiarc.name = assign(event.target.options.attributes.name); + } + multiarc.isPushBackRoute = assign(event.target.options.attributes.isPushBackRoute); + multiarc.direction = assign(event.target.options.attributes.direction); + + this.editLayer.featureLookup[900719925474099] = []; + + multiarc.ids = []; + + //TODO + store.default.dispatch('setMultiArc', multiarc); + } + var editLayer = this.editLayer; + arcs.forEach(id => { + console.debug(id); + var arc = editLayer.groundnetLayerGroup.getLayer(id); + if (arc && arc instanceof L.Polyline) { + editLayer.featureLookup[900719925474099].push(arc); + arc.select(); + } + }); + store.default.dispatch('setMultiArcIds', arcs); + } }); this.on('editable:drawing:move', function (event) { if (dragIndex >= 0) { this.selectVertex(dragIndex); - console.log('GlueDrag : '+ dragIndex + '\t' + event.target.dragIndex); + console.log('GlueDrag : ' + dragIndex + '\t' + event.target.dragIndex); this.follow(dragIndex, event); } }); this.on('editable:middlemarker:mousedown', event => { console.debug('editable:middlemarker:mousedown'); - } ), - this.on('editable:vertex:new', event => { - console.debug('editable:vertex:new ' + event.vertex.getIndex() + '\t' + event.vertex.getLastIndex() + '\t'); - // Find nearest node - let closest = this.editLayer.closestLayerSnap(event.latlng, 5) - let taxiwaySegment = event.latlng.__vertex.editor.feature; - if (taxiwaySegment.options.attributes === undefined) { - taxiwaySegment.options.attributes = { direction: 'bi-directional' }; - } - taxiwaySegment.updateStyle(); - if(event.vertex.getIndex() !== 0 && event.vertex.getIndex() !== event.vertex.getLastIndex()) { - var nextIndex = ++taxiwaySegment.editLayer.groundnetLayerGroup.maxId; - var splitOffNodes = taxiwaySegment.getLatLngs().splice(-1); - var remainingNodes = taxiwaySegment.getLatLngs(); - splitOffNodes.unshift(L.latLng(remainingNodes[1].lat, remainingNodes[1].lng, remainingNodes[1].alt)); - remainingNodes[1]['glueindex'] = nextIndex; - remainingNodes[1].attributes = { index: nextIndex, isOnRunway: 0 }; - taxiwaySegment.options.attributes.end = nextIndex; - splitOffNodes[0]['glueindex'] = nextIndex; - splitOffNodes[0].attributes = { index: nextIndex, isOnRunway: 0 }; - taxiwaySegment.setLatLngs(remainingNodes); - //taxiwaySegment.editor.refresh(); - //taxiwaySegment.editor.reset(); - if( splitOffNodes.length>1) { - var polyline = new L.Polyline(splitOffNodes, { attributes: {} }); - polyline.addTo(taxiwaySegment.editLayer.$parent.$parent.$refs.map.mapObject); - polyline.addTo(taxiwaySegment.editLayer.groundnetLayerGroup); - extendTaxiSegment(polyline); - polyline.addListeners(); - polyline.setEditlayer(taxiwaySegment.editLayer); - polyline.enableEdit(taxiwaySegment.editLayer.$parent.$parent.$refs.map.mapObject); - polyline.editor.refresh(); - //polyline.editor.reset(); - polyline.featureLookup = this.featureLookup; - polyline.options.attributes.name = taxiwaySegment.options.attributes.name; - polyline.options.attributes.direction = taxiwaySegment.options.attributes.direction; - polyline.options.attributes.isPushBackRoute = taxiwaySegment.options.attributes.isPushBackRoute; - polyline.options.attributes.begin = nextIndex; - polyline.options.attributes.end = taxiwaySegment.end; - polyline.updateStyle(); - polyline.begin = nextIndex; - polyline.end = taxiwaySegment.end; - taxiwaySegment.end = nextIndex; - this.editLayer.featureLookup[nextIndex] = []; - this.featureLookup[nextIndex].push(taxiwaySegment); - this.featureLookup[nextIndex].push(polyline); + }), + this.on('editable:vertex:new', event => { + console.debug('editable:vertex:new ' + event.vertex.getIndex() + '\t' + event.vertex.getLastIndex() + '\t'); + // Find nearest node + let closest = this.editLayer.closestLayerSnap(event.latlng, 5) + let taxiwaySegment = event.latlng.__vertex.editor.feature; + if (taxiwaySegment.options.attributes === undefined) { + taxiwaySegment.options.attributes = { direction: 'bi-directional' }; } - } else { - // Glue to another node - if (closest) { - event.latlng['glueindex'] = Number(closest.glueindex); - event.latlng.__vertex.setLatLng(closest.latlng); - event.latlng.attributes = { index: event.latlng.glueindex, isOnRunway: 0 }; - // Push Vertex to lookup - this.editLayer.featureLookup[event.latlng.glueindex].push(event.latlng.__vertex); - if (taxiwaySegment.options.attributes.begin === undefined) { - taxiwaySegment.options.attributes.begin = event.latlng['glueindex'] - } else { - taxiwaySegment.options.attributes.end = event.latlng['glueindex'] - } - if (taxiwaySegment.getLatLngs().length === 1) { - taxiwaySegment.begin = closest.glueindex; - } - taxiwaySegment.end = closest.glueindex; - console.log(`Closest : ${closest}`) - } else { - event.vertex.latlng['glueindex'] = ++this.editLayer.groundnetLayerGroup.maxId; - event.vertex.latlng.attributes = { index: event.vertex.latlng.glueindex, isOnRunway: 0 }; - this.editLayer.featureLookup[event.vertex.latlng.glueindex] = []; - this.editLayer.featureLookup[event.vertex.latlng.glueindex].push(event.vertex); - this.editLayer.featureLookup[event.vertex.latlng.glueindex].push(taxiwaySegment); - // taxiwaySegment.editor.refresh(); + taxiwaySegment.updateStyle(); + if (event.vertex.getIndex() !== 0 && event.vertex.getIndex() !== event.vertex.getLastIndex()) { + var nextIndex = ++taxiwaySegment.editLayer.groundnetLayerGroup.maxId; + var splitOffNodes = taxiwaySegment.getLatLngs().splice(-1); + var remainingNodes = taxiwaySegment.getLatLngs(); + splitOffNodes.unshift(L.latLng(remainingNodes[1].lat, remainingNodes[1].lng, remainingNodes[1].alt)); + remainingNodes[1]['glueindex'] = nextIndex; + remainingNodes[1].attributes = { index: nextIndex, isOnRunway: 0 }; + taxiwaySegment.options.attributes.end = nextIndex; + splitOffNodes[0]['glueindex'] = nextIndex; + splitOffNodes[0].attributes = { index: nextIndex, isOnRunway: 0 }; + taxiwaySegment.setLatLngs(remainingNodes); + //taxiwaySegment.editor.refresh(); //taxiwaySegment.editor.reset(); - if (taxiwaySegment.options.attributes.begin === undefined) { - taxiwaySegment.options.attributes.begin = event.vertex.latlng['glueindex'] - taxiwaySegment.begin = event.vertex.latlng.glueindex; - } else if (taxiwaySegment.options.attributes.end === undefined || - (taxiwaySegment.getLatLngs()[taxiwaySegment.getLatLngs().length - 1].glueindex && - Number(taxiwaySegment.getLatLngs()[taxiwaySegment.getLatLngs().length - 1].glueindex) !== taxiwaySegment.options.attributes.end)) { - taxiwaySegment.options.attributes.end = event.vertex.latlng['glueindex'] - taxiwaySegment.end = Number(event.vertex.latlng.glueindex); + if (splitOffNodes.length > 1) { + var polyline = new L.Polyline(splitOffNodes, { attributes: {} }); + polyline.addTo(taxiwaySegment.editLayer.$parent.$parent.$refs.map.mapObject); + polyline.addTo(taxiwaySegment.editLayer.groundnetLayerGroup); + extendTaxiSegment(polyline); + polyline.addListeners(); + polyline.setEditlayer(taxiwaySegment.editLayer); + polyline.enableEdit(taxiwaySegment.editLayer.$parent.$parent.$refs.map.mapObject); + polyline.editor.refresh(); + //polyline.editor.reset(); + polyline.featureLookup = this.featureLookup; + polyline.options.attributes.name = taxiwaySegment.options.attributes.name; + polyline.options.attributes.direction = taxiwaySegment.options.attributes.direction; + polyline.options.attributes.isPushBackRoute = taxiwaySegment.options.attributes.isPushBackRoute; + polyline.options.attributes.begin = nextIndex; + polyline.options.attributes.end = taxiwaySegment.end; + polyline.updateStyle(); + polyline.begin = nextIndex; + polyline.end = taxiwaySegment.end; + taxiwaySegment.end = nextIndex; + this.editLayer.featureLookup[nextIndex] = []; + this.featureLookup[nextIndex].push(taxiwaySegment); + this.featureLookup[nextIndex].push(polyline); + } + } else { + // Glue to another node + if (closest) { + event.latlng['glueindex'] = Number(closest.glueindex); + event.latlng.__vertex.setLatLng(closest.latlng); + event.latlng.attributes = { index: event.latlng.glueindex, isOnRunway: 0 }; + // Push Vertex to lookup + this.editLayer.featureLookup[event.latlng.glueindex].push(event.latlng.__vertex); + if (taxiwaySegment.options.attributes.begin === undefined) { + taxiwaySegment.options.attributes.begin = event.latlng['glueindex'] + } else { + taxiwaySegment.options.attributes.end = event.latlng['glueindex'] + } + if (taxiwaySegment.getLatLngs().length === 1) { + taxiwaySegment.begin = closest.glueindex; + } + taxiwaySegment.end = closest.glueindex; + console.log(`Closest : ${closest}`) + } else { + event.vertex.latlng['glueindex'] = ++this.editLayer.groundnetLayerGroup.maxId; + event.vertex.latlng.attributes = { index: event.vertex.latlng.glueindex, isOnRunway: 0 }; + this.editLayer.featureLookup[event.vertex.latlng.glueindex] = []; + this.editLayer.featureLookup[event.vertex.latlng.glueindex].push(event.vertex); + this.editLayer.featureLookup[event.vertex.latlng.glueindex].push(taxiwaySegment); + // taxiwaySegment.editor.refresh(); + //taxiwaySegment.editor.reset(); + if (taxiwaySegment.options.attributes.begin === undefined) { + taxiwaySegment.options.attributes.begin = event.vertex.latlng['glueindex'] + taxiwaySegment.begin = event.vertex.latlng.glueindex; + } else if (taxiwaySegment.options.attributes.end === undefined || + (taxiwaySegment.getLatLngs()[taxiwaySegment.getLatLngs().length - 1].glueindex && + Number(taxiwaySegment.getLatLngs()[taxiwaySegment.getLatLngs().length - 1].glueindex) !== taxiwaySegment.options.attributes.end)) { + taxiwaySegment.options.attributes.end = event.vertex.latlng['glueindex'] + taxiwaySegment.end = Number(event.vertex.latlng.glueindex); + } } } - } - //this.splitShape(taxiwaySegment.getLatLngs(), ) - }); + //this.splitShape(taxiwaySegment.getLatLngs(), ) + }); this.on('editable:vertex:deleted', event => { console.debug('editable:vertex:deleted') }); @@ -251,7 +294,7 @@ const extendTaxiSegment = function (taxiwaySegment) { if (Number(store.default.state.Editable.index) >= 0 && this.featureLookup[store.default.state.Editable.index] !== undefined) { this.featureLookup[store.default.state.Editable.index].forEach(element => { - if(element.deselect !== undefined) { + if (element.deselect !== undefined) { element.deselect(); } }); @@ -268,7 +311,7 @@ const extendTaxiSegment = function (taxiwaySegment) { this.editLayer.featureLookup[event.vertex.latlng.glueindex].forEach store.default.dispatch('setNode', event.vertex.latlng) this.selectVertex(store.default.state.Editable.index) - } + } } }); var dragIndex = -1; @@ -282,7 +325,7 @@ const extendTaxiSegment = function (taxiwaySegment) { if (Number(store.default.state.Editable.index) >= 0 && this.featureLookup[store.default.state.Editable.index] !== undefined) { this.featureLookup[store.default.state.Editable.index].forEach(element => { - if(element.deselect !== undefined) { + if (element.deselect !== undefined) { element.deselect(); } }); @@ -297,7 +340,7 @@ const extendTaxiSegment = function (taxiwaySegment) { parking[0].selectParking(); } else { this.selectVertex(Number(dragIndex)) - } + } } }); this.on('editable:vertex:dragend', function (event) { @@ -316,29 +359,79 @@ const extendTaxiSegment = function (taxiwaySegment) { if (parking.length > 0) { parking[0].selectParking(); } else { - if( Number(event.vertex.latlng.glueindex) !== store.default.state.Editable.index) { + if (Number(event.vertex.latlng.glueindex) !== store.default.state.Editable.index) { if (Number(store.default.state.Editable.index) >= 0 && - this.featureLookup[store.default.state.Editable.index] !== undefined) { - this.featureLookup[store.default.state.Editable.index].forEach(element => { - if(element.deselect !== undefined) { + this.featureLookup[store.default.state.Editable.index] !== undefined) { + this.featureLookup[store.default.state.Editable.index].forEach(element => { + if (element.deselect !== undefined) { element.deselect(); } }); - } - store.default.dispatch('setNode', event.vertex.latlng) + } + store.default.dispatch('setNode', event.vertex.latlng) } var lines = this.featureLookup[event.vertex.latlng.glueindex].filter(n => n instanceof L.Polyline); Vue.default.nextTick(function () { - lines.forEach( line => { + lines.forEach(line => { line.selectVertex(store.default.state.Editable.index) }); }) - } + } } catch (error) { console.error(error); } }); }; + + taxiwaySegment.__proto__.expandArc = function (attributes) { + var isPushBackRoute = attributes.isPushBackRoute; + var ids = []; + var walkedNodes = []; + var segmentIds = []; + console.debug('start Walk'); + ids = ids.concat(this.walkPushbackRoute(attributes.begin, walkedNodes, isPushBackRoute)); + ids = ids.concat(this.walkPushbackRoute(attributes.end, walkedNodes, isPushBackRoute)); + return ids; + } + + taxiwaySegment.__proto__.walkPushbackRoute = function (index, walkedNodes, isPushBackRoute) { + console.debug('Walk Level'); + walkedNodes.push(index) + var segmentIds = []; + var polyLines = this.featureLookup[index].filter(n => n instanceof L.Polyline); + if (polyLines===undefined || polyLines.length>2) { + console.debug('Walk ' + index + '\t' + polyLines.length); + return; + } + + polyLines.forEach(l => { + segmentIds.push(l._leaflet_id); + console.debug('Walk Next ' + index + '\t' + + (walkedNodes.indexOf(index)<0) + '\t'+ + l.begin + '\t'+ + (walkedNodes.indexOf(Number(l.begin))<0) + '\t'+ + l.end + '\t'+ + (walkedNodes.indexOf(Number(l.end))<0) + '\t'+ + l.options.attributes.direction + '\t' + + l.options.attributes.begin + '\t' + + l.options.attributes.end); + console.debug('Walk isPushBackRoute ' + l.options.attributes.isPushBackRoute + '\t' + isPushBackRoute + '\t' + (l.options.attributes.isPushBackRoute === isPushBackRoute)); + if(l.options.attributes.isPushBackRoute === isPushBackRoute ) { + console.debug(Number(l.begin) === index && walkedNodes.indexOf(Number(l.end)) < 0); + if (Number(l.begin) === index && walkedNodes.indexOf(Number(l.end)) < 0) { + console.debug( 'Walk forward ' + l.options.attributes.direction ); + segmentIds = segmentIds.concat(this.walkPushbackRoute(Number(l.end), walkedNodes, isPushBackRoute)) + } + console.debug(Number(l.end) === index && walkedNodes.indexOf(Number(l.begin)) < 0); + if (Number(l.end) === index && walkedNodes.indexOf(Number(l.begin)) < 0 ) { + console.debug( 'Walk backward ' + l.options.attributes.direction ); + segmentIds = segmentIds.concat(this.walkPushbackRoute(Number(l.begin), walkedNodes, isPushBackRoute)) + } + } + }); + return segmentIds; + } + /** * */ @@ -403,7 +496,7 @@ const extendTaxiSegment = function (taxiwaySegment) { style.color = '#3388ff'; } this.setStyle(style); - if(this._map !== null) { + if (this._map !== null) { if (this.options.attributes.direction === 'forward') { this.setText(null); this.setText(' > ', { repeat: true, offset: 10, attributes: { fill: 'red', style: 'vertical-align: bottom; vertical-align: bottom; font-weight: bold; font: bold 30px serif;' } }) @@ -413,8 +506,8 @@ const extendTaxiSegment = function (taxiwaySegment) { } else { this.setText(null); } - - } + + } }; }; diff --git a/src/renderer/store/modules/Editable.js b/src/renderer/store/modules/Editable.js index 1c10641..b1633fe 100644 --- a/src/renderer/store/modules/Editable.js +++ b/src/renderer/store/modules/Editable.js @@ -4,12 +4,13 @@ const state = { type: 'none', index: 'none', editing: false, - data: {airports: {}, parking: {}, arc: {}, node: {}, runway: {}} + data: {airports: {}, parking: {}, arc: {}, multiarc: {}, node: {}, runway: {}} } const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT' const SET_EDIT_PARKING = 'SET_EDIT_PARKING' const SET_EDIT_ARC = 'SET_EDIT_ARC' +const SET_EDIT_MULTI_ARC = 'SET_EDIT_MULTI_ARC' const SET_EDIT_RUNWAY = 'SET_EDIT_RUNWAY' const mutations = { @@ -62,6 +63,29 @@ const mutations = { Vue.set(state, 'index', arc.index) Vue.set(state, 'type', 'arc') }, + SET_EDIT_MULTI_ARC (state, arc) { + if (arc === undefined) { + return + } + if (!state.data || state.type !== 'multiarc') { + Vue.set(state, 'data', {}) + } + Vue.set(state.data, 'multiarc', arc) + if (state.data.multiarc.name === undefined) { + Vue.set(state.data.multiarc, 'name', '') + } + Vue.set(state, 'index', arc.index) + Vue.set(state, 'type', 'multiarc') + }, + 'SET_EDIT_MULTI_ARC_IDS' (state, arcs) { + if (arcs === undefined) { + return + } + if (!state.data || state.type !== 'multiarc') { + return + } + state.data.multiarc.ids = state.data.multiarc.ids.concat(arcs.filter(n => n).filter((v, i, a) => a.indexOf(v) === i)) + }, 'SET_EDIT_PARKING_NAME' (state, parkingName) { Vue.set(state.data.parking, 'name', parkingName) }, @@ -91,13 +115,25 @@ const mutations = { Vue.set(state.data.parking, 'coords', coords) }, 'SET_EDIT_ARC_NAME' (state, arcName) { - Vue.set(state.data.arc, 'name', arcName) + if (state.type === 'arc') { + Vue.set(state.data.arc, 'name', arcName) + } else { + Vue.set(state.data.multiarc, 'name', arcName) + } }, 'SET_EDIT_PUSHBACK' (state, isPushBackRoute) { - Vue.set(state.data.arc, 'isPushBackRoute', Number(isPushBackRoute)) + if (state.type === 'arc') { + Vue.set(state.data.arc, 'isPushBackRoute', Number(isPushBackRoute)) + } else { + Vue.set(state.data.multiarc, 'isPushBackRoute', Number(isPushBackRoute)) + } }, 'SET_EDIT_DIRECTION' (state, direction) { - Vue.set(state.data.arc, 'direction', direction) + if (state.type === 'arc') { + Vue.set(state.data.arc, 'direction', direction) + } else { + Vue.set(state.data.multiarc, 'direction', direction) + } }, 'SET_EDIT_HOLDPOINTTYPE' (state, holdPointType) { Vue.set(state.data.node, 'holdPointType', holdPointType) @@ -132,6 +168,12 @@ const actions = { async setArc (context, arc) { context.commit(SET_EDIT_ARC, arc) }, + async setMultiArc (context, arc) { + context.commit(SET_EDIT_MULTI_ARC, arc) + }, + async setMultiArcIds (context, arc) { + context.commit('SET_EDIT_MULTI_ARC_IDS', arc) + }, async setNode (context, node) { context.commit('SET_EDIT_NODE', node.attributes) context.commit('SET_EDIT_NODE_COORDS', node.lat.toFixed(6) + ' ' + node.lng.toFixed(6)) diff --git a/src/renderer/store/modules/Loading.js b/src/renderer/store/modules/Loading.js index 75a16ee..d6cc7bf 100644 --- a/src/renderer/store/modules/Loading.js +++ b/src/renderer/store/modules/Loading.js @@ -31,9 +31,15 @@ const actions = { context.commit('SET_ICAO_LOADING', p) }, async setGroundnetLoaded (context, p) { + if (typeof p !== 'boolean') { + console.error('Not Boolean') + } context.commit('SET_GROUNDNET_LOADED', p) }, async setPavementLoaded (context, p) { + if (typeof p !== 'boolean') { + console.error('Not Boolean') + } context.commit('SET_PAVEMENT_LOADED', p) } }