Fixed touch events management on the map

This commit is contained in:
Fabio Manganiello 2025-03-31 20:22:04 +02:00
parent 91a05fdd9d
commit 3183799185
Signed by: blacklight
GPG key ID: D90FBA7F76362774
3 changed files with 49 additions and 124 deletions

View file

@ -51,7 +51,7 @@
:devices="devices"
:disabled="loading"
:resolution="resolutionMeters"
@refresh="locationQuery = $event"
@refresh="onFormUpdate"
@set-resolution="setResolution" />
</div>
<FilterButton @input="showControls = !showControls"
@ -284,7 +284,7 @@ export default {
return
}
this.locationQuery = nextPageQuery
this.locationQuery = new LocationQuery(nextPageQuery)
},
fetchPrevPage() {
@ -293,7 +293,7 @@ export default {
return
}
this.locationQuery = prevPageQuery
this.locationQuery = new LocationQuery(prevPageQuery)
},
async resetPage() {
@ -410,6 +410,10 @@ export default {
this.locationQuery.maxId = null
},
onFormUpdate(event: any) {
this.locationQuery = new LocationQuery(event)
},
onTimelinePointHover(point: GPSPoint) {
if (!this.pointsLayer) {
return
@ -450,7 +454,7 @@ export default {
Math.max(startPoint[1], endPoint[1]),
]
this.locationQuery = {
this.locationQuery = new LocationQuery({
...this.locationQuery,
startDate: null,
endDate: null,
@ -460,14 +464,14 @@ export default {
minLatitude: startLat,
maxLongitude: endLon,
maxLatitude: endLat,
}
})
},
onSelectOverlayButtonClick() {
if (!this.hasSelectionBox) {
this.showSelectOverlay = true
} else {
this.locationQuery = {
this.locationQuery = new LocationQuery({
...this.locationQuery,
minId: null,
maxId: null,
@ -475,7 +479,7 @@ export default {
minLatitude: null,
maxLongitude: null,
maxLatitude: null,
}
})
}
},

View file

@ -6,13 +6,13 @@
</div>
<div class="overlay"
ref="overlay"
@mousedown="onOverlayDragStart"
@mouseup="onOverlayDragEnd"
@mousemove="onOverlayMove"
@touchstart="onOverlayDragStart"
@touchend="onOverlayDragEnd"
@touchmove="onOverlayMove"
@click="onOverlayDragEnd">
@mousedown="onSelectionStart"
@mouseup="onSelectionEnd"
@mousemove="onSelectionEdit"
@touchstart.stop.prevent="onSelectionStart"
@touchend.stop.prevent="onSelectionEnd"
@touchmove.stop.prevent="onSelectionEdit"
@click="onSelectionEnd">
<div class="box"
:style="selectionBoxStyle"
v-if="selectionBox.length > 1" />
@ -86,21 +86,30 @@ export default {
},
getXY(event: MouseEvent | TouchEvent): number[] {
if (event instanceof MouseEvent) {
return [event.clientX, event.clientY]
}
let [x, y] = [null, null]
if (event instanceof TouchEvent) {
const touches = event.touches?.length ? event.touches : this.latestTouchEvent?.touches
if (!touches?.length) {
return []
if (event.touches?.length) {
x = event.touches[0].clientX
y = event.touches[0].clientY
} else if (event.changedTouches?.length) {
x = event.changedTouches[0].clientX
y = event.changedTouches[0].clientY
} else if (this.latestTouchEvent) {
x = this.latestTouchEvent.changedTouches[0].clientX
y = this.latestTouchEvent.changedTouches[0].clientY
} else {
return
}
this.latestTouchEvent = null
return [touches[0].clientX, touches[0].clientY]
} else {
x = event.clientX
y = event.clientY
}
return []
if (x == null || y == null) {
return []
}
return [x, y]
},
setSelectionBoxCoordinates(event: MouseEvent | TouchEvent) {
@ -117,13 +126,21 @@ export default {
this.selectionBox = newBox
},
onOverlayDragStart(event: MouseEvent | TouchEvent) {
onSelectionStart(event: MouseEvent | TouchEvent) {
this.selectionBox = []
this.setSelectionBoxCoordinates(event)
this.overlayDragging = true
},
onOverlayDragEnd(event: MouseEvent | TouchEvent) {
onSelectionEdit(event: MouseEvent | TouchEvent) {
if (!this.overlayDragging || this.selectionBox.length < 1) {
return
}
this.setSelectionBoxCoordinates(event)
},
onSelectionEnd(event: MouseEvent | TouchEvent) {
if (this.selectionBox.length < 1) {
this.selectionBox = []
return
@ -135,6 +152,7 @@ export default {
this.setSelectionBoxCoordinates(event)
this.overlayDragging = false
this.latestTouchEvent = null
if (this.hasDistinctPoints) {
this.$emit(
@ -148,18 +166,6 @@ export default {
)
}
},
onOverlayMove(event: MouseEvent | TouchEvent) {
if (!this.overlayDragging || this.selectionBox.length < 1) {
return
}
this.setSelectionBoxCoordinates(event)
if (event instanceof TouchEvent) {
this.latestTouchEvent = event
}
},
}
}
</script>

View file

@ -1,85 +0,0 @@
<script lang="ts">
export default {
data() {
return {
selectionBox: [] as number[][],
}
},
computed: {
selectionBoxStyle(): Record<string, string> {
if (this.selectionBox.length < 2) {
return {}
}
const [minX, minY, maxX, maxY] = [
Math.min(this.selectionBox[0][0], this.selectionBox[1][0]),
Math.min(this.selectionBox[0][1], this.selectionBox[1][1]),
Math.max(this.selectionBox[0][0], this.selectionBox[1][0]),
Math.max(this.selectionBox[0][1], this.selectionBox[1][1]),
]
return {
top: minY + 'px',
left: minX + 'px',
width: `${maxX - minX}px`,
height: `${maxY - minY}px`,
}
},
},
methods: {
scaledPointerCoordinates(event: MouseEvent): number[] {
// @ts-ignore
const offsetLeft = this.$refs.overlay?.getBoundingClientRect().left || 0
// @ts-ignore
const offsetTop = this.$refs.overlay?.getBoundingClientRect().top || 0
return [
event.clientX - offsetLeft,
event.clientY - offsetTop,
]
},
setSelectionBoxCoordinates(event: MouseEvent) {
const coords = this.scaledPointerCoordinates(event)
let newBox = JSON.parse(JSON.stringify(this.selectionBox)) as number[][]
if (newBox.length === 1 || !newBox[1]) {
newBox.push(coords)
} else {
newBox[1] = coords
}
newBox = newBox.sort((a: number[], b: number[]) => a[0] - b[0])
this.selectionBox = newBox
},
onOverlayDragStart(event: MouseEvent) {
this.setSelectionBoxCoordinates(event)
},
onOverlayDragEnd(event: MouseEvent) {
if (this.selectionBox.length < 1) {
this.selectionBox = []
return
}
this.setSelectionBoxCoordinates(event)
if (this.selectionBox.length > 1 && (
this.selectionBox[0][0] === this.selectionBox[1][0] && this.selectionBox[0][1] === this.selectionBox[1][1])
) {
this.selectionBox = []
}
},
onOverlayMove(event: MouseEvent) {
if (this.selectionBox.length < 1) {
return
}
this.setSelectionBoxCoordinates(event)
},
},
}
</script>