phyks/cygnal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Invert logic to set isProgrammaticMove on user actions instead, making it more reliable

Browse Source
This commit is contained in:
Lucas Verney 2018-08-24 23:06:54 +02:00
parent ec9380ca2f
commit 4c527ac280
1 changed files with 19 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Map.vue
View File

@ -23,7 +23,6 @@
<script> <script>
// TODO: Rotate the map according to user heading. // TODO: Rotate the map according to user heading.
// TODO: Invert logic to set isProgrammatic on user actions instead
import 'ol/ol.css'; import 'ol/ol.css';
import Feature from 'ol/Feature'; import Feature from 'ol/Feature';
import Map from 'ol/Map'; import Map from 'ol/Map';
@ -107,7 +106,7 @@ export default {
const $t = this.$t.bind(this); const $t = this.$t.bind(this);
return { return {
attribution: $t('map.attribution'), attribution: $t('map.attribution'),
isProgrammaticMove: false, isProgrammaticMove: true,
map: null, map: null,
maxZoom: constants.MAX_ZOOM, maxZoom: constants.MAX_ZOOM,
minZoom: constants.MIN_ZOOM, minZoom: constants.MIN_ZOOM,
@ -240,11 +239,6 @@ export default {
this.isRecenterButtonShown = false; this.isRecenterButtonShown = false;
} }
}, },
onMoveStart() {
if (!this.isProgrammaticMove) {
this.showRecenterButton();
}
},
onMoveEnd() { onMoveEnd() {
const view = this.map.getView(); const view = this.map.getView();
if (this.onMapCenterUpdate) { if (this.onMapCenterUpdate) {
@ -256,20 +250,11 @@ export default {
} }
}, },
recenterMap() { recenterMap() {
const view = this.map.getView(); this.isProgrammaticMove = true;
const mapCenter = view.getCenter();
this.hideRecenterButton(); this.hideRecenterButton();
if ( const view = this.map.getView();
view.getZoom() !== this.zoom
|| mapCenter[0] !== this.olCenter[0]
|| mapCenter[1] !== this.olCenter[1]
|| view.getRotation() !== 0
) {
this.isProgrammaticMove = true;
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
}
view.setCenter(this.olCenter); view.setCenter(this.olCenter);
view.setRotation(0); view.setRotation(0);
view.setZoom(this.zoom); view.setZoom(this.zoom);
@ -363,20 +348,23 @@ export default {
zoom: this.zoom, zoom: this.zoom,
}), }),
}); });
this.map.once('moveend', () => {
this.isProgrammaticMove = false;
this.map.on('click', this.handleClick); // Add click handler
// Take care that OpenLayer map actually catches "pointerdown" this.map.on('click', this.handleClick);
// events and not "click" events. Then, we need an explicit event // Take care that OpenLayer map actually catches "pointerdown"
// handler for "click" to stop propagation to ReportCard component. // events and not "click" events. Then, we need an explicit event
document.querySelector('#map').addEventListener( // handler for "click" to stop propagation to ReportCard component.
'click', document.querySelector('#map').addEventListener(
event => event.stopPropagation(), 'click',
); event => event.stopPropagation(),
this.map.on('movestart', this.onMoveStart); );
this.map.on('moveend', this.onMoveEnd);
// Show recenter button on dragging the map
this.map.on('pointerdrag', () => {
this.isProgrammaticMove = false;
this.showRecenterButton();
}); });
this.map.on('moveend', this.onMoveEnd);
// Set pointer to hover when hovering a report marker // Set pointer to hover when hovering a report marker
this.map.on('pointermove', (event) => { this.map.on('pointermove', (event) => {
@ -449,17 +437,6 @@ export default {
const view = this.map.getView(); const view = this.map.getView();
if (!this.isRecenterButtonShown) { if (!this.isRecenterButtonShown) {
const currentCenter = view.getCenter();
// Handle programmatic navigation
if (
view.getZoom() !== this.zoom
|| currentCenter[0] !== newOlCenter[0]
|| currentCenter[1] !== newOlCenter[1]
) {
this.isProgrammaticMove = true;
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
}
// Eventually display closest report // Eventually display closest report
const isReportDetailsAlreadyShown = this.$store.state.reportDetails.id; const isReportDetailsAlreadyShown = this.$store.state.reportDetails.id;
const isReportDetailsOpenedByUser = this.$store.state.reportDetails.userAsked; const isReportDetailsOpenedByUser = this.$store.state.reportDetails.userAsked;
@ -540,14 +517,9 @@ export default {
// Map should have been created // Map should have been created
return; return;
} }
const view = this.map.getView();
if (!this.isRecenterButtonShown) { if (!this.isRecenterButtonShown) {
// Handle programmatic navigation // Handle programmatic navigation
if (view.getZoom() !== newZoom) { this.map.getView().setZoom(newZoom);
this.isProgrammaticMove = true;
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
}
view.setZoom(newZoom);
} }
}, },
}, },