From 32c0cbd33b9026dc2f16fc4479de54ecedff9736 Mon Sep 17 00:00:00 2001 From: portree_kid Date: Sun, 7 Jun 2020 20:46:22 +0200 Subject: [PATCH] Better point selection --- .travis.yml | 4 +- package.json | 2 +- src/renderer/components/EditLayer.vue | 20 +- src/renderer/loaders/RunwayNode.js | 2 +- .../loaders/TaxiwaySegmentExtender.js | 239 +++++++++--------- src/renderer/store/modules/Editable.js | 11 +- 6 files changed, 154 insertions(+), 124 deletions(-) diff --git a/.travis.yml b/.travis.yml index fb8d6ad..cffec54 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,12 +25,12 @@ script: deploy: skip_cleanup: true overwrite: true - name: '0.0.12' + name: '0.0.13' provider: releases api_key: secure: Xm3z86gQmpSajvlXSVgG7mxcaS5K7GfE4HrARIDR4pQ4UguQ3/fFOenRyKAQImmH0kLCSIbVE21NMAQ3YI2F9El9I6GU7Wirccsg14TZZiBQAzKOTXZ+JsBloeBxuTOsR84SkO6pV8OT/pRnQd9frqyc1W7wzoX+0sQykMztXCNfI+1MXXGOAgMzlKuDMO1PVENz0V63mWipL/Mae/SyrHa1Bws+4LJKvv42m0HMKdN7ekt41vxcSUvLmN+YLlqUEVr/eUhQXUNCaWlmM0KxmfuzTedca5/1yzLvN8smEt2I2b0DFRM3Mi/QdI22fVRHs6XGpm8yqZRKmhySDXFspXKWBiuCF6AezX6NiIe/ZUh10gIukjkyLtrNk/o29qhj2WE9HJz4xhsGMAx3632cLSMPku5ALN7jv5scWjwCGNHs4ZeZyyePMeGM6Y6pje1uJPbxWGjwoV6iI4Y4esP+z3KcXvZdnzkpYMy2mzdT4gf7A7zieax1YwB6U/MEanXYKFBH4yzYK9+hx3ck2eLT3LcV/ChHN2bKmERJdf18h+zI8e5YKTzd3/kHLiUUv19N2a4TUYloGOyzrLwn2VD1Xm4jJVVLTIQvWbH5YK7cNkHYa4+PnsB+JppSoby7HiBcothw4OLpJO8eCMqXcPRU1n+cRAZTB7VOS7pWh8e8LFE= file_glob: true file: build/* on: - branches: '0.0.12' + branches: '0.0.13' repo: Portree-Kid/flightgear-airports diff --git a/package.json b/package.json index 312a900..798a21b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flightgear-airports", - "version": "0.0.12", + "version": "0.0.13", "author": "portree_kid ", "description": "An software to design Flightgear groundnets", "license": "GPL v3", diff --git a/src/renderer/components/EditLayer.vue b/src/renderer/components/EditLayer.vue index 73f4899..258f3e6 100644 --- a/src/renderer/components/EditLayer.vue +++ b/src/renderer/components/EditLayer.vue @@ -343,6 +343,9 @@ } }).filter(n => n); }, + /** + * + */ setPointCoords (index, coordinates) { var position = new Coordinates(coordinates); @@ -372,15 +375,20 @@ element.getLatLngs()[0].update(latlng); element.setLatLngs(element.getLatLngs()); element.updateBeginVertex(latlng); + element.editor.refresh(); + element.editor.reset(); element.updateMiddle(); } if (Number(element.end) === Number(index)) { element.getLatLngs()[element.getLatLngs().length - 1].update(latlng); element.setLatLngs(element.getLatLngs()); element.updateEndVertex(latlng); + element.editor.refresh(); + element.editor.reset(); element.updateMiddle(); } } else if (element instanceof L.Editable.VertexMarker) { + /* console.log(element); element.setLatLng(latlng); element.latlngs.forEach((latlng1, index) => { @@ -391,6 +399,7 @@ }); element.editor.feature.setLatLngs(element.latlngs); element.editor.feature.updateMiddle(); + */ } }); }, @@ -608,8 +617,13 @@ */ }, editedArc() { - if (!this.groundnetLayerGroup) + if (!this.groundnetLayerGroup || + this.$store.state.Editable.index === undefined || + this.$store.state.Editable.data.arc === undefined || + this.featureLookup===undefined || + !this.editing) { return; + } 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); @@ -624,7 +638,7 @@ this.featureLookup===undefined || !this.editing) { return; - } + } var isOnRunway = Number(this.$store.state.Editable.data.node.isOnRunway); var isHoldPoint = this.$store.state.Editable.data.node.holdPointType !== 'none' && this.$store.state.Editable.data.node.holdPointType !== undefined; @@ -679,6 +693,8 @@ element._latlngs.forEach(element => { if(element.__vertex && Number(element.glueindex) === Number(nIndex)){ if (this.$store.state.Editable.data.node.coords) { + console.log('Cords : ' + this.$store.state.Editable.data.node.coords); + this.setPointCoords(this.$store.state.Editable.index, this.$store.state.Editable.data.node.coords) } } diff --git a/src/renderer/loaders/RunwayNode.js b/src/renderer/loaders/RunwayNode.js index 51eb0d6..b3145e3 100644 --- a/src/renderer/loaders/RunwayNode.js +++ b/src/renderer/loaders/RunwayNode.js @@ -23,7 +23,7 @@ L.RunwayNode = L.Marker.extend({ function (state) { return state.Editable.data.runway; }, - () => { + (state) => { // Reset colour if(event.target instanceof L.RunwayNode && event.target.options.attributes && diff --git a/src/renderer/loaders/TaxiwaySegmentExtender.js b/src/renderer/loaders/TaxiwaySegmentExtender.js index 2519f77..cb4603a 100644 --- a/src/renderer/loaders/TaxiwaySegmentExtender.js +++ b/src/renderer/loaders/TaxiwaySegmentExtender.js @@ -1,4 +1,6 @@ /* eslint-disable */ +const Vue = require('vue'); + var L = require('leaflet'); const store = require('../store'); @@ -8,18 +10,18 @@ exports.extendTaxiSegment = function (taxiwaySegment) { taxiwaySegment.__proto__.bidirectional; taxiwaySegment.__proto__.updateBeginVertex = function (latlng) { if (this._latlngs[0].__vertex) { - this._latlngs[0].__vertex.setLatLng(latlng); + this._latlngs[0].__vertex.setLatLng(latlng); } }; taxiwaySegment.__proto__.updateEndVertex = function (latlng) { - if(this._latlngs[1].__vertex){ - this._latlngs[1].__vertex.setLatLng(latlng); + if (this._latlngs[1].__vertex) { + this._latlngs[1].__vertex.setLatLng(latlng); } }; taxiwaySegment.__proto__.updateMiddle = function () { this._latlngs.forEach(element => { - if(element.__vertex.middleMarker){ + if (element.__vertex.middleMarker) { element.__vertex.middleMarker.updateLatLng(); } }); @@ -43,36 +45,37 @@ exports.extendTaxiSegment = function (taxiwaySegment) { }; taxiwaySegment.__proto__.addListeners = function () { this.on('click', function (event) { - event.target.setStyle({color : 'red'}); + event.target.setStyle({ color: 'red' }); 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 = {}; + if (event.target.options.attributes === undefined) { + event.target.options.attributes = {}; } event.target.options.attributes.index = event.target._leaflet_id; event.target.options.attributes.selected = true; store.default.dispatch('setArc', event.target.options.attributes); - } - this.unwatch = store.default.watch( - function (state) { + this.unwatch = store.default.watch( + function (state) { return state.Editable.data.arc; - }, - () => { + }, + (arc) => { + console.debug(arc); // Reset colour - if(event.target instanceof L.Polyline && - event.target.options.attributes && + if (event.target instanceof L.Polyline && + event.target.options.attributes && event.target.options.attributes.selected) { event.target.options.attributes.selected = false; event.target.updateStyle(); - this.unwatch(); + this.unwatch(); } - } - , - { - deep: true //add this if u need to watch object properties change etc. - } - ); + } + , + { + deep: true //add this if u need to watch object properties change etc. + } + ); + } }); this.on('editable:drawing:move', function (event) { if (dragIndex >= 0) { @@ -85,45 +88,46 @@ exports.extendTaxiSegment = function (taxiwaySegment) { // 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'}; + if (taxiwaySegment.options.attributes === undefined) { + taxiwaySegment.options.attributes = { direction: 'bi-directional' }; } + taxiwaySegment.updateStyle(); // 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}`) + 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 || - Number(taxiwaySegment.getLatLngs()[taxiwaySegment.getLatLngs().length-1].glueindex) !== taxiwaySegment.options.attributes.end ) { - taxiwaySegment.options.attributes.end = event.vertex.latlng['glueindex'] - taxiwaySegment.end = event.vertex.latlng.glueindex; - }*/ + 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.on('editable:vertex:deleted', event => { console.log('editable:vertex:deleted' + event) }); @@ -133,65 +137,65 @@ exports.extendTaxiSegment = function (taxiwaySegment) { }); this.on('editable:vertex:clicked', function (event) { var parking = this.featureLookup[event.vertex.latlng.glueindex].filter(n => n instanceof L.ParkingSpot); - if(parking.length>0) { - parking[0].selectParking(); + if (parking.length > 0) { + parking[0].selectParking(); } else { this.editLayer.featureLookup[event.vertex.latlng.glueindex].forEach store.default.dispatch('setNode', event.vertex.latlng) - if(event.vertex._icon!=null) { + if (event.vertex._icon != null) { event.vertex._icon.style['background-color'] = 'red'; - } else if(event.vertex.icon!=null ) { - if(event.vertex.icon.style!=null) { + } else if (event.vertex.icon != null) { + if (event.vertex.icon.style != null) { event.vertex.icon.style['background-color'] = 'red'; } else { - event.vertex.setStyle({color : 'red'}) + event.vertex.setStyle({ color: 'red' }) } - } else if(event.vertex.options.icon!=null ) { - if(event.vertex.options.icon.style!=null) { + } else if (event.vertex.options.icon != null) { + if (event.vertex.options.icon.style != null) { event.vertex.options.icon.style['background-color'] = 'red'; } else { - event.vertex.options.icon._setIconStyles({color : 'red'}) + event.vertex.options.icon._setIconStyles({ color: 'red' }) } - } + } this.unwatch = store.default.watch( function (state) { - return state.Editable.data.node; + return state.Editable.data.node; }, - (state) => { - if( state === undefined || - state.index !== Number(event.vertex.latlng.glueindex)) { - if(event.vertex._icon!=null) { - event.vertex._icon.style['background-color'] = 'white'; - } else if(event.vertex.icon!=null ) { - if(event.vertex.icon.style!=null) { - event.vertex.icon.style['background-color'] = 'white'; - } else { - event.vertex.setStyle({color : 'white'}) - } - } else if(event.vertex.options.icon!=null ) { - if(event.vertex.options.icon.style!=null) { - event.vertex.options.icon.style['background-color'] = 'white'; - } else { - event.vertex.options.icon._setIconStyles({color : 'white'}) - } - } - this.unwatch(); - } - } + (state) => { + if (state === undefined || + state.index !== Number(event.vertex.latlng.glueindex)) { + if (event.vertex._icon != null) { + event.vertex._icon.style['background-color'] = 'white'; + } else if (event.vertex.icon != null) { + if (event.vertex.icon.style != null) { + event.vertex.icon.style['background-color'] = 'white'; + } else { + event.vertex.setStyle({ color: 'white' }) + } + } else if (event.vertex.options.icon != null) { + if (event.vertex.options.icon.style != null) { + event.vertex.options.icon.style['background-color'] = 'white'; + } else { + event.vertex.options.icon._setIconStyles({ color: 'white' }) + } + } + this.unwatch(); + } + } , { deep: true //add this if u need to watch object properties change etc. } - ); - } + ); + } }); 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.latlng.glueindex == undefined); - if(event.vertex.latlng.glueindex == undefined) - return; + console.log("Event Target : ", event.target); + console.log("Middle Marker : ", event.vertex == event.vertex.middleMarker); + console.log("Middle Marker : ", event.vertex.latlng.glueindex == undefined); + if (event.vertex.latlng.glueindex == undefined) + return; dragIndex = event.vertex.latlng.glueindex; }); this.on('editable:vertex:dragend', function (event) { @@ -206,21 +210,24 @@ exports.extendTaxiSegment = function (taxiwaySegment) { } dragIndex = -1; var parking = this.featureLookup[event.vertex.latlng.glueindex].filter(n => n instanceof L.ParkingSpot); - if(parking.length>0) { - parking[0].selectParking(); - } else { - store.default.dispatch('setNode', event.vertex.latlng) + if (parking.length > 0) { + parking[0].selectParking(); + } else { + Vue.default.nextTick(function () { + store.default.dispatch('setNode', event.vertex.latlng) + }) + // } }); }; - /** - * - */ + /** + * + */ - taxiwaySegment.__proto__.follow = function (dragIndex, event) { + taxiwaySegment.__proto__.follow = function (dragIndex, event) { this.featureLookup[dragIndex].forEach(element => { - if(element !== event.target){ + if (element !== event.target) { if (element instanceof L.RunwayNode) { element.setLatLng(event.latlng); } @@ -236,7 +243,7 @@ exports.extendTaxiSegment = function (taxiwaySegment) { element.updateVertexFromDirection(); element.updateWheelPos(); } - else if (element instanceof L.Polyline) { + else if (element instanceof L.Polyline) { if (Number(element.begin) === Number(dragIndex)) { element.getLatLngs()[0].update(event.latlng); element.setLatLngs(element.getLatLngs()); @@ -249,7 +256,7 @@ exports.extendTaxiSegment = function (taxiwaySegment) { element.updateEndVertex(event.latlng); element.updateMiddle(); } - } else if (element instanceof L.Editable.VertexMarker && + } else if (element instanceof L.Editable.VertexMarker && element !== event.vertex) { console.log(element); element.setLatLng(event.latlng); @@ -261,30 +268,30 @@ exports.extendTaxiSegment = function (taxiwaySegment) { }); element.editor.feature.setLatLngs(element.latlngs); element.editor.feature.updateMiddle(); - } + } } }) }; - taxiwaySegment.__proto__.updateStyle = function() { + taxiwaySegment.__proto__.updateStyle = function () { var style = {}; - if(this.options.attributes.selected){ - style.color = 'red'; - } else if (this.options.attributes.isPushBackRoute) { - style.color = 'magenta'; + if (this.options.attributes.selected) { + style.color = 'red'; + } else if (this.options.attributes.isPushBackRoute) { + style.color = 'magenta'; } else { - style.color = '#3388ff'; + style.color = '#3388ff'; } this.setStyle(style); if (this.options.attributes.direction === 'forward') { this.setText(null); - this.setText(' ⮞ ', {repeat: true, attributes: {fill: 'red', size: 30}}) + this.setText(' ⮞ ', { repeat: true, attributes: { fill: 'red', size: 30 } }) } else if (this.options.attributes.direction === 'backward') { this.setText(null); - this.setText(' ⮜ ', {repeat: true, attributes: {fill: 'red', size: 30}}) - }else { + this.setText(' ⮜ ', { repeat: true, attributes: { fill: 'red', size: 30 } }) + } else { this.setText(null); - } + } }; }; diff --git a/src/renderer/store/modules/Editable.js b/src/renderer/store/modules/Editable.js index 1e500b8..6e58699 100644 --- a/src/renderer/store/modules/Editable.js +++ b/src/renderer/store/modules/Editable.js @@ -32,7 +32,9 @@ const mutations = { if (node === undefined) { return } - Vue.set(state, 'data', {}) + if (!state.data || state.type !== 'node') { + Vue.set(state, 'data', {}) + } Vue.set(state.data, 'node', node) Vue.set(state, 'index', node.index) Vue.set(state, 'type', 'node') @@ -44,7 +46,12 @@ const mutations = { Vue.set(state, 'type', 'runway') }, SET_EDIT_ARC (state, arc) { - Vue.set(state, 'data', {}) + if (arc === undefined) { + return + } + if (!state.data || state.type !== 'arc') { + Vue.set(state, 'data', {}) + } Vue.set(state.data, 'arc', arc) if (state.data.arc.name === undefined) { Vue.set(state.data.arc, 'name', '')