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

Fix a bug with Chrome on Android not firing mousedown/up events

Browse Source
This commit is contained in:
Lucas Verney 2018-07-02 19:53:11 +02:00
parent df187ad8ca
commit e0d6b00a66
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Map.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="fill-height fill-width"> <div class="fill-height fill-width">
<v-lmap ref="map" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @click="handleClick" @mousedown="onMouseDown" @mouseup="onMouseUp" @movestart="onMoveStart" @zoomstart="onZoomStart"> <v-lmap ref="map" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @click="handleClick" @movestart="onMoveStart" @zoomstart="onZoomStart">
<v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer> <v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
<v-lts v-if="heading" :lat-lng="positionLatLng" :options="markerOptions"></v-lts> <v-lts v-if="heading" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
@ -79,6 +79,10 @@ export default {
this.isProgrammaticZoom = true; this.isProgrammaticZoom = true;
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; }); this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
} }
if (this.map.getCenter() !== this.positionLatLng) {
this.isProgrammaticMove = true;
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
}
this.map.setView(this.positionLatLng, this.zoom); this.map.setView(this.positionLatLng, this.zoom);
this.showCompass(); this.showCompass();
}, },
@ -88,6 +92,10 @@ export default {
this.isProgrammaticZoom = true; this.isProgrammaticZoom = true;
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; }); this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
} }
if (this.map.getCenter() !== this.positionLatLng) {
this.isProgrammaticMove = true;
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
}
this.map.setView(this.positionLatLng, this.zoom); this.map.setView(this.positionLatLng, this.zoom);
} }
}, },
@ -101,6 +109,7 @@ export default {
tileServer: constants.TILE_SERVER, tileServer: constants.TILE_SERVER,
isMouseDown: false, isMouseDown: false,
isProgrammaticZoom: false, isProgrammaticZoom: false,
isProgrammaticMove: false,
recenterButton: null, recenterButton: null,
map: null, map: null,
}; };
@ -111,14 +120,8 @@ export default {
this.onPress(event.latlng); this.onPress(event.latlng);
} }
}, },
onMouseDown() {
this.isMouseDown = true;
},
onMouseUp() {
this.isMouseDown = false;
},
onMoveStart() { onMoveStart() {
if (this.isMouseDown && !this.recenterButton) { if (!this.isProgrammaticMove) {
this.showRecenterButton(); this.showRecenterButton();
} }
}, },
@ -163,6 +166,10 @@ export default {
this.isProgrammaticZoom = true; this.isProgrammaticZoom = true;
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; }); this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
} }
if (this.map.getCenter() !== this.positionLatLng) {
this.isProgrammaticMove = true;
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
}
this.map.setView(this.positionLatLng, this.zoom); this.map.setView(this.positionLatLng, this.zoom);
}, },
}, },