diff --git a/frontend/src/components/Map.vue b/frontend/src/components/Map.vue
index 40af5ee..1bc8f13 100644
--- a/frontend/src/components/Map.vue
+++ b/frontend/src/components/Map.vue
@@ -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,
- }
+ })
}
},
diff --git a/frontend/src/components/MapSelectOverlay.vue b/frontend/src/components/MapSelectOverlay.vue
index 094ec29..630c310 100644
--- a/frontend/src/components/MapSelectOverlay.vue
+++ b/frontend/src/components/MapSelectOverlay.vue
@@ -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>
diff --git a/frontend/src/mixins/SelectionBox.vue b/frontend/src/mixins/SelectionBox.vue
deleted file mode 100644
index d717dde..0000000
--- a/frontend/src/mixins/SelectionBox.vue
+++ /dev/null
@@ -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>