From d4c0e59779eb97c24fadeb5571441a5deb048f2e Mon Sep 17 00:00:00 2001 From: portree_kid Date: Thu, 11 Jun 2020 22:18:02 +0200 Subject: [PATCH] Selection --- src/renderer/components/EditLayer.vue | 19 ++- src/renderer/loaders/HoldNode.js | 6 + src/renderer/loaders/ParkingSpot.js | 26 ++-- src/renderer/loaders/RunwayNode.js | 6 + .../loaders/TaxiwaySegmentExtender.js | 134 +++++++++--------- 5 files changed, 96 insertions(+), 95 deletions(-) diff --git a/src/renderer/components/EditLayer.vue b/src/renderer/components/EditLayer.vue index 055d4e1..152b9a8 100644 --- a/src/renderer/components/EditLayer.vue +++ b/src/renderer/components/EditLayer.vue @@ -371,22 +371,20 @@ element.updateWheelPos(); } else if (element instanceof L.Polyline) { - if (Number(element.begin) === Number(index)) { - element.getLatLngs()[0].update(latlng); + element._latlngs.forEach((e1, index1) => { + if (e1.attributes.index===index && ( + latlng.lat !== element.getLatLngs()[index1].lat || + latlng.lng !== element.getLatLngs()[index1].lng + ) + ) { + element.getLatLngs()[index1].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); @@ -693,7 +691,6 @@ 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) var position = new Coordinates(this.$store.state.Editable.data.node.coords); latlng = {lat: position.latitude, lng: position.longitude }; diff --git a/src/renderer/loaders/HoldNode.js b/src/renderer/loaders/HoldNode.js index d292bc2..b04525b 100644 --- a/src/renderer/loaders/HoldNode.js +++ b/src/renderer/loaders/HoldNode.js @@ -7,6 +7,12 @@ const store = require('../store'); var $ = require('jquery'); L.HoldNode = L.Marker.extend({ + select() { + this._icon.childNodes[0].style['background-color'] = 'red'; + }, + deselect() { + this._icon.childNodes[0].style['background-color'] = '#4838cc'; + }, addListeners: function () { this.on('editable:drawing:move', function (event) { console.log("Move : ", event); diff --git a/src/renderer/loaders/ParkingSpot.js b/src/renderer/loaders/ParkingSpot.js index b901cc8..0ebfd29 100644 --- a/src/renderer/loaders/ParkingSpot.js +++ b/src/renderer/loaders/ParkingSpot.js @@ -159,27 +159,17 @@ L.ParkingSpot = L.Circle.extend({ }); this.on('click', function (event) { console.debug("Click Parking : " + event.target); + 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) { + element.deselect(); + } + }); + } 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; - }, - (state) => { - 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. - } - ); }); this.on('editable:vertex:clicked', function (event) { console.debug(this.featureLookup[event.vertex.glueindex]); diff --git a/src/renderer/loaders/RunwayNode.js b/src/renderer/loaders/RunwayNode.js index b3145e3..4a4d5bf 100644 --- a/src/renderer/loaders/RunwayNode.js +++ b/src/renderer/loaders/RunwayNode.js @@ -15,6 +15,12 @@ L.RunwayNode = L.Marker.extend({ }); this.on('click', function (event) { console.log("Click Runway : ", event); + 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.options.attributes.selected = true; if (store.default.state.Editable.index !== event.target.options.attributes.index) { store.default.dispatch('setRunway', event.target.options.attributes); diff --git a/src/renderer/loaders/TaxiwaySegmentExtender.js b/src/renderer/loaders/TaxiwaySegmentExtender.js index 236b058..015454f 100644 --- a/src/renderer/loaders/TaxiwaySegmentExtender.js +++ b/src/renderer/loaders/TaxiwaySegmentExtender.js @@ -43,9 +43,61 @@ exports.extendTaxiSegment = function (taxiwaySegment) { this.featureLookup[this.end].push(this); this.bidirectional = true; }; + taxiwaySegment.__proto__.select = function () { + this.options.attributes.selected = true; + this.updateStyle(); + }; + taxiwaySegment.__proto__.selectVertex = function () { + this.getLatLngs().forEach( element => { + if (Number(element.glueindex) === store.default.state.Editable.index) { + if (element.__vertex._icon != null) { + 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._icon != null) { + element.__vertex._icon.style['background-color'] = 'white'; + } else if (element.vertex.icon != null) { + if (element.__vertex.icon.style != null) { + element.__vertex.icon.style['background-color'] = 'white'; + } else { + element.__vertex.setStyle({ color: 'white' }) + } + } else if (element.__vertex.options.icon != null) { + if (element.__vertex.options.icon.style != null) { + element.__vertex.options.icon.style['background-color'] = 'white'; + } else { + element.__vertex.options.icon._setIconStyles({ color: 'white' }) + } + } + }); + }; taxiwaySegment.__proto__.addListeners = function () { this.on('click', function (event) { - event.target.setStyle({ color: 'red' }); + if (Number(store.default.state.Editable.index) >= 0) { + 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) { @@ -53,28 +105,11 @@ exports.extendTaxiSegment = function (taxiwaySegment) { 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.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 && - event.target.options.attributes.selected) { - event.target.options.attributes.selected = false; - event.target.updateStyle(); - this.unwatch(); - } - } - , - { - deep: true //add this if u need to watch object properties change etc. - } - ); } }); this.on('editable:drawing:move', function (event) { @@ -136,57 +171,24 @@ exports.extendTaxiSegment = function (taxiwaySegment) { console.log(event) }); this.on('editable:vertex:clicked', function (event) { + if (Number(store.default.state.Editable.index) >= 0) { + this.featureLookup[store.default.state.Editable.index].forEach(element => { + if(element.deselect !== undefined) { + element.deselect(); + } + }); + } + var hold = this.featureLookup[event.vertex.latlng.glueindex].filter(n => n instanceof L.HoldNode); + if (hold.length > 0) { + hold[0].select(); + } var parking = this.featureLookup[event.vertex.latlng.glueindex].filter(n => n instanceof L.ParkingSpot); 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) { - event.vertex._icon.style['background-color'] = 'red'; - } 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' }) - } - } 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' }) - } - } - this.unwatch = store.default.watch( - function (state) { - 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(); - } - } - , - { - deep: true //add this if u need to watch object properties change etc. - } - ); + this.selectVertex() } }); var dragIndex = -1;