From 3aea13172799a52292652998372d54a12594b81d Mon Sep 17 00:00:00 2001 From: portree_kid Date: Tue, 2 Jun 2020 12:02:37 +0200 Subject: [PATCH] Bidirectional Binding Parking/Heading --- src/renderer/components/EditLayer.vue | 9 +++-- src/renderer/components/NodeEdit.vue | 2 +- src/renderer/components/ParkingEdit.vue | 30 ++++++++------ src/renderer/loaders/ParkingSpot.js | 53 ++++++++++++++++--------- src/renderer/store/modules/Editable.js | 23 ++++++++++- 5 files changed, 80 insertions(+), 37 deletions(-) diff --git a/src/renderer/components/EditLayer.vue b/src/renderer/components/EditLayer.vue index 1b0ca66..6225527 100644 --- a/src/renderer/components/EditLayer.vue +++ b/src/renderer/components/EditLayer.vue @@ -388,7 +388,7 @@ latlng1.update(latlng); } }); - element.editor.feature.setLatLngs(latlngs); + element.editor.feature.setLatLngs(element.latlngs); element.editor.feature.updateMiddle(); } }); @@ -549,13 +549,13 @@ }) }, editedParking() { - console.log('Edited Parking : ' + this.$store.state.Editable.data.parking) if (this.$store.state.Editable.index === undefined || this.$store.state.Editable.data.parking === undefined || this.featureLookup===undefined) { return } - this.$store.dispatch('updatedParking', this.$store.state.Editable.data.parking); + console.log('Edited Parking : ' + this.$store.state.Editable.data.parking) + //Notify list if (this.featureLookup[this.$store.state.Editable.index]===undefined) { return } @@ -565,6 +565,9 @@ element.updateVertexFromDirection(); } }) + if (this.$store.state.Editable.data.parking.coords) { + this.setPointCoords(this.$store.state.Editable.index, this.$store.state.Editable.data.parking.coords) + } }, editedParkings() { if (this.featureLookup===undefined) { diff --git a/src/renderer/components/NodeEdit.vue b/src/renderer/components/NodeEdit.vue index 66dd093..a57f44b 100644 --- a/src/renderer/components/NodeEdit.vue +++ b/src/renderer/components/NodeEdit.vue @@ -72,7 +72,7 @@ if (newValue==='unknown') { } - this.$store.commit('SET_EDIT_COORDS', newValue) + this.$store.commit('SET_EDIT_NODE_COORDS', newValue) } }, isOnRunway: { diff --git a/src/renderer/components/ParkingEdit.vue b/src/renderer/components/ParkingEdit.vue index f62e1ae..642d477 100644 --- a/src/renderer/components/ParkingEdit.vue +++ b/src/renderer/components/ParkingEdit.vue @@ -88,7 +88,7 @@ Heading : - + @@ -157,9 +157,11 @@ // {value: 'forward', label: 'forward'}, // {value: 'backward', label: 'backward'} // ] - storedairlineCodes.forEach(element => { - airlineCodes.push({value: element, label: element}); - }); + if(storedairlineCodes) { + storedairlineCodes.forEach(element => { + airlineCodes.push({value: element, label: element}); + }); + } return airlineCodes }, airlineCodes: { @@ -204,15 +206,15 @@ // getter get: function () { if(this.$store.state.Editable.index!==undefined) { - var ret = this.$parent.$parent.$parent.$refs.editLayer.getPointCoords(this.$store.state.Editable.index) - return ret[0].lat + " " + ret[0].lng + return this.$store.state.Editable.data.parking.coords; } }, // setter - set: function (newValue) { - var position = new Coordinates(newValue); - console.log(position); - this.$parent.$parent.$parent.$refs.editLayer.setPointCoords(this.$store.state.Editable.index, position) + set: function (newValue) { + if (newValue==='unknown') { + + } + this.$store.commit('SET_EDIT_PARKING_COORDS', newValue) } }, heading: { @@ -222,13 +224,15 @@ }, // setter set: function (newValue) { - if (newValue>=360) { + while (newValue>=360) { newValue -= 360 } - if (newValue<0) { + while (newValue<0) { newValue += 360 } - this.$store.commit('SET_EDIT_PARKING_HEADING', newValue) + if (Number(this.$store.state.Editable.data.parking.heading) !== newValue) { + this.$store.commit('SET_EDIT_PARKING_HEADING', newValue) + } } }, wingspan: { diff --git a/src/renderer/loaders/ParkingSpot.js b/src/renderer/loaders/ParkingSpot.js index f719bd0..f01a3af 100644 --- a/src/renderer/loaders/ParkingSpot.js +++ b/src/renderer/loaders/ParkingSpot.js @@ -72,11 +72,11 @@ L.ParkingSpot = L.Circle.extend({ } } }, - removeDirection: function () { + removeDirection() { this.direction = undefined; }, // Update the direction vertex from the direction - updateVertexFromDirection: function () { + updateVertexFromDirection() { if (this.editEnabled()) { var start = this._latlng; var options = { units: 'kilometers' }; @@ -91,13 +91,12 @@ L.ParkingSpot = L.Circle.extend({ } }, // Update the direction from the moved direction vertex - updateDirectionFromVertex: function () { + updateDirectionFromVertex() { if (this.editEnabled()) { var start = this._latlng; var end = this.editor._resizeLatLng.__vertex.getLatLng(); var heading = turf.bearing([start.lng, start.lat], [end.lng, end.lat]); this.options.attributes.heading = heading; - const output = validRadii.reduce((prev, curr) => Math.abs(curr - this._mRadius) < Math.abs(prev - this._mRadius) ? curr : prev); console.debug('Found radius ' + output); @@ -121,6 +120,7 @@ L.ParkingSpot = L.Circle.extend({ var style = {}; style['color'] = 'red'; this.setStyle(style); + element.updateWheelPos(); }, deselect() { var style = {}; @@ -144,24 +144,35 @@ L.ParkingSpot = L.Circle.extend({ event.target.updateWheelPos(); } }); - /* - this.on('editable:vertex:drag', function (event) { - console.debug("Drag : ", event); + this.on('editable:vertex:drag', function (event) { + console.debug("Drag Parking : ", event); }); - */ - this.on('click', function (event) { - console.debug("Click : " + event.target); + this.on('editable:vertex:dragend', function (event) { + console.debug("DragEnd Parking : ", event); store.default.dispatch('setParking', event.target.options.attributes); + store.default.dispatch('setParkingCoords', event.target.getLatLng().lat.toFixed(5) + ' ' + event.target.getLatLng().lng.toFixed(5)); + /* + store.default.dispatch('setParkingHeading', this.options.attributes.heading) + store.default.dispatch('setParkingRadius', this.options.attributes.radius) + */ + }); + this.on('click', function (event) { + console.debug("Click Parking : " + event.target); + store.default.dispatch('setParking', event.target.options.attributes); + store.default.dispatch('setParkingCoords', event.target.getLatLng().lat.toFixed(5) + ' ' + event.target.getLatLng().lng.toFixed(5)); this.select(); this.unwatch = store.default.watch( function (state) { return state.Editable.data.parking; }, - () => { - if (event.target instanceof L.ParkingSpot) { - event.target.setStyle({color : '#3388ff'}); - this.unwatch(); - } + (state) => { + if(state === undefined || + state.index !== Number(event.target.glueindex)) { + if (event.target instanceof L.ParkingSpot) { + this.deselect(); + this.unwatch(); + } + } } , { @@ -180,9 +191,14 @@ L.ParkingSpot = L.Circle.extend({ return state.Editable.data.parking; }, () => { - event.target.setStyle({color : '#3388ff'}); - this.unwatch(); - } + if(state === undefined || + state.index !== Number(event.target.glueindex)) { + if (event.target instanceof L.ParkingSpot) { + this.deselect(); + this.unwatch(); + } + } + } , { deep: true //add this if u need to watch object properties change etc. @@ -230,6 +246,7 @@ L.ParkingSpot = L.Circle.extend({ // element.extensions(); element.updateMiddleMarker(); element.updateVertexFromDirection(); + element.updateWheelPos(); } else if (element instanceof L.TaxiwaySegment) { if (element.begin === dragIndex) { diff --git a/src/renderer/store/modules/Editable.js b/src/renderer/store/modules/Editable.js index 818ff5c..1e500b8 100644 --- a/src/renderer/store/modules/Editable.js +++ b/src/renderer/store/modules/Editable.js @@ -59,6 +59,13 @@ const mutations = { Vue.set(state.data.parking, 'number', parkingName) }, 'SET_EDIT_PARKING_HEADING' (state, heading) { + while (heading >= 360) { + heading -= 360 + } + while (heading < 0) { + heading += 360 + } + Vue.set(state.data.parking, 'heading', heading) }, 'SET_EDIT_PARKING_AIRLINES' (state, airlineCodes) { @@ -70,6 +77,9 @@ const mutations = { 'SET_EDIT_PARKING_RADIUS' (state, radius) { Vue.set(state.data.parking, 'radius', radius) }, + 'SET_EDIT_PARKING_COORDS' (state, coords) { + Vue.set(state.data.parking, 'coords', coords) + }, 'SET_EDIT_ARC_NAME' (state, arcName) { Vue.set(state.data.arc, 'name', arcName) }, @@ -82,7 +92,7 @@ const mutations = { 'SET_EDIT_HOLDPOINTTYPE' (state, holdPointType) { Vue.set(state.data.node, 'holdPointType', holdPointType) }, - 'SET_EDIT_COORDS' (state, coords) { + 'SET_EDIT_NODE_COORDS' (state, coords) { Vue.set(state.data.node, 'coords', coords) }, 'SET_EDIT_ISONRUNWAY' (state, isOnRunway) { @@ -100,12 +110,21 @@ const actions = { async setParking (context, parking) { context.commit(SET_EDIT_PARKING, parking) }, + async setParkingRadius (context, radius) { + context.commit('SET_EDIT_PARKING_RADIUS', radius) + }, + async setParkingHeading (context, heading) { + context.commit('SET_EDIT_PARKING_HEADING', heading) + }, + async setParkingCoords (context, coords) { + context.commit('SET_EDIT_PARKING_COORDS', coords) + }, async setArc (context, arc) { context.commit(SET_EDIT_ARC, arc) }, async setNode (context, node) { context.commit('SET_EDIT_NODE', node.attributes) - context.commit('SET_EDIT_COORDS', node.lat.toFixed(5) + ' ' + node.lng.toFixed(5)) + context.commit('SET_EDIT_NODE_COORDS', node.lat.toFixed(5) + ' ' + node.lng.toFixed(5)) } }