Invert logic to set isProgrammaticMove on user actions instead, making it more reliable
This commit is contained in:
parent
ec9380ca2f
commit
4c527ac280
@ -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,9 +348,8 @@ export default {
|
|||||||
zoom: this.zoom,
|
zoom: this.zoom,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
this.map.once('moveend', () => {
|
|
||||||
this.isProgrammaticMove = false;
|
|
||||||
|
|
||||||
|
// Add click handler
|
||||||
this.map.on('click', this.handleClick);
|
this.map.on('click', this.handleClick);
|
||||||
// Take care that OpenLayer map actually catches "pointerdown"
|
// Take care that OpenLayer map actually catches "pointerdown"
|
||||||
// events and not "click" events. Then, we need an explicit event
|
// events and not "click" events. Then, we need an explicit event
|
||||||
@ -374,9 +358,13 @@ export default {
|
|||||||
'click',
|
'click',
|
||||||
event => event.stopPropagation(),
|
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);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user