From 9a595096385af03cae3aaa4f1ad7df4f21f66735 Mon Sep 17 00:00:00 2001 From: portree_kid Date: Wed, 8 Jan 2020 19:41:58 +0100 Subject: [PATCH] Parkingspot Edit --- src/renderer/components/EditBar.vue | 10 +++++-- src/renderer/components/EditLayer.vue | 29 +++++++++++++++--- src/renderer/loaders/ParkingSpot.js | 38 +++++++++++++++++++----- src/renderer/loaders/groundnet_loader.js | 35 +++++++--------------- 4 files changed, 75 insertions(+), 37 deletions(-) diff --git a/src/renderer/components/EditBar.vue b/src/renderer/components/EditBar.vue index f375d34..8f4b363 100644 --- a/src/renderer/components/EditBar.vue +++ b/src/renderer/components/EditBar.vue @@ -4,8 +4,8 @@ - - + + @@ -30,6 +30,12 @@ save () { this.editing = false this.$parent.$parent.$refs.editLayer.disableEdit() + }, + drawPolyline () { + this.$parent.$parent.$refs.editLayer.drawPolyline() + }, + drawParking () { + this.$parent.$parent.$refs.editLayer.drawParking() } }, computed: { diff --git a/src/renderer/components/EditLayer.vue b/src/renderer/components/EditLayer.vue index 2743bde..57aeeee 100644 --- a/src/renderer/components/EditLayer.vue +++ b/src/renderer/components/EditLayer.vue @@ -8,7 +8,7 @@ import { LMap, LMarker } from 'vue2-leaflet' import L from 'leaflet' import LEdit from 'leaflet-editable/src/Leaflet.Editable.js' - import {readGroundnetXML} from '../loaders/groundnet_loader' + import {readGroundnetXML, addFeature} from '../loaders/groundnet_loader' export default { name: 'edit-layer', @@ -26,6 +26,7 @@ }, data () { return { + maxId: 1 } }, methods: { @@ -34,6 +35,8 @@ this.groundnet.removeFrom(this.$parent.mapObject) } this.groundnet = readGroundnetXML(this.$store.state.Settings.settings.airportsDirectory, icao) + console.log(this.groundnet.maxId) + this.groundnet.addTo(this.$parent.mapObject) }, visible (feature) { @@ -73,6 +76,27 @@ this.groundnet.eachLayer(l => { l.disableEdit() }) + }, + drawPolyline () { + this.$parent.mapObject.editTools.startPolyline() + }, + drawParking () { + this.$parent.mapObject.on('click', this.addParking) + }, + addParking (event) { + console.log(event.latlng) + if (event.latlng === undefined) { + return + } + const circle = new L.ParkingSpot(event.latlng, {attributes: {radius: 20, heading: 0}}) + circle.id = (++this.groundnet.maxId) + circle.addTo(this.groundnet) + circle.enableEdit() + circle.extensions() + circle.addListeners() + addFeature(circle) + // console.log(this.groundnet) + this.$parent.mapObject.off('click', this.addParking) } }, @@ -88,7 +112,4 @@ diff --git a/src/renderer/loaders/ParkingSpot.js b/src/renderer/loaders/ParkingSpot.js index 9c58ca6..3b03792 100644 --- a/src/renderer/loaders/ParkingSpot.js +++ b/src/renderer/loaders/ParkingSpot.js @@ -22,13 +22,11 @@ L.ParkingSpot = L.Circle.extend({ } this.direction = L.polyline([start, this.turfToLatLng(end)]); this.direction.addTo(this.editor.editLayer); - - - this.on('editable:drawing:move', function (event) { - this.updateDirectionFromVertex(); - }); } }, + removeDirection: function () { + this.direction = undefined; + }, // updateVertexFromDirection: function () { if (this.editEnabled()) { @@ -50,9 +48,34 @@ L.ParkingSpot = L.Circle.extend({ var end = this.editor._resizeLatLng.__vertex.getLatLng(); var heading = turf.bearing([start.lng, start.lat], [end.lng, end.lat]); this.options.attributes.heading = heading + 180; + this.options.attributes.radius = this._mRadius; this.direction.setLatLngs([start, end]); } }, + addListeners: function () { + this.on('editable:drawing:move', function (event) { + console.log("Move : ", event); + // Is it the edit vertex (Middle) moving? + if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){ + follow(event.target.id, event); + event.target.updateVertexFromDirection(); + } + else if(event.target.editor._resizeLatLng.__vertex._icon === event.sourceTarget._element) { + event.target.updateDirectionFromVertex(); + console.log(event); + } + }); + this.on('editable:vertex:drag', function (event) { + console.log("Drag : ", event); + }); + this.on('click', function (event) { + console.log("Click : " + event.target); + store.default.dispatch('setParking', event.target.options.attributes); + }); + this.on('editable:disable', function (event) { + event.target.removeDirection(); + }); + }, turfToLatLng: function (turfPoint) { return {lat: turfPoint.geometry.coordinates[1], lng: turfPoint.geometry.coordinates[0]}; }, @@ -71,7 +94,6 @@ L.ParkingSpot = L.Circle.extend({ }); var parkingSpot = function (n, layerGroup) { - //console.log(n.attr('lat') + " " + n.attr('lon')); var latlon = convert(n.attr('lat') + " " + n.attr('lon')); //console.log(latlon.decimalLatitude); @@ -102,7 +124,9 @@ airlineCodes="VIR,KAL,DAL,KLM" /> circle.options.attributes[ key ] = value; else circle.options.attributes[ key ] = Number( value); - }); + }); + circle.addListeners(); + circle.addTo(layerGroup); return circle; } diff --git a/src/renderer/loaders/groundnet_loader.js b/src/renderer/loaders/groundnet_loader.js index d74eed9..10878d3 100644 --- a/src/renderer/loaders/groundnet_loader.js +++ b/src/renderer/loaders/groundnet_loader.js @@ -17,9 +17,14 @@ var $ = require('jquery'); var featureLookup = {}; +exports.addFeature = function (feature) { + featureLookup[feature.id] = new Array(); +} + exports.readGroundnetXML = function (fDir, icao) { - try { + try { layerGroup = L.layerGroup(); + layerGroup.maxId = 0; var f = path.join(fDir, icao[0], icao[1], icao[2], icao + '.groundnet.xml'); if (f == null || !fs.existsSync(f)) @@ -46,31 +51,11 @@ exports.readGroundnetXML = function (fDir, icao) { var nodesLookup = {}; parkingNodes.map(n => { - var circle = parkingSpot(n, layerGroup); - circle.on('editable:drawing:move', function (event) { -// console.log("Follow 1: " + event.sourceTarget ); -// console.log("Follow 2: " + event.sourceTarget._dragStartTarget ); -// console.log("Follow 3: " + event.target.editor._resizeLatLng.__vertex ); -// console.log("Follow 4: " + event.target.editor._resizeLatLng.__vertex._icon ); -// console.log("Follow 5: " + (event.target.editor._resizeLatLng.__vertex === event.sourceTarget) ); -// console.log("Follow 6: " + (event.target.editor._resizeLatLng.__vertex._icon === event.sourceTarget._element) ); -// console.log("Follow 7: " + (event.target.editor._resizeLatLng.__vertex._icon === event.sourceTarget._dragStartTarget) ); -// console.log("Follow 8: " + (event.target.editor._resizeLatLng.__vertex._icon._leaflet_id === event.sourceTarget._dragStartTarget._leaflet_id) ); - - // Is it the edit vertex moving? - 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); - }); - + var circle = parkingSpot(n, layerGroup); nodesLookup[n.attr('index')] = n; featureLookup[n.attr('index')] = new Array(); featureLookup[n.attr('index')].push(circle); - + layerGroup.maxId = Math.max(layerGroup.maxId, Number(n.attr('index'))) features.push(circle); }).sort(); // Get all nodes into the lookup @@ -81,6 +66,7 @@ exports.readGroundnetXML = function (fDir, icao) { var latlon = convert(n.attr('lat') + " " + n.attr('lon')); //console.log(latlon.decimalLatitude); + layerGroup.maxId = Math.max(layerGroup.maxId, Number(n.attr('index'))) nodesLookup[n.attr('index')] = n; }).sort(); @@ -207,7 +193,8 @@ follow = function (dragIndex, event) { if (element instanceof L.ParkingSpot) { element.disableEdit(); element.setLatLng(event.latlng); - // element.enableEdit(); + element.enableEdit(); + element.extensions(); element.updateVertexFromDirection(); } else if (element instanceof L.TaxiwaySegment) {