@geode/opengeodeweb-front 10.17.0-rc.1 → 10.18.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -42,6 +42,17 @@ function debounce(func, wait) {
|
|
|
42
42
|
timeout = setTimeout(later, wait);
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
|
+
|
|
46
|
+
async function handleClick(event) {
|
|
47
|
+
if (viewerStore.picking_mode) {
|
|
48
|
+
const rect = container.value.$el.getBoundingClientRect();
|
|
49
|
+
const x = event.clientX - rect.left;
|
|
50
|
+
const y = elementHeight.value - (event.clientY - rect.top);
|
|
51
|
+
await viewerStore.set_picked_point(x, y);
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
emit("click", event);
|
|
55
|
+
}
|
|
45
56
|
</script>
|
|
46
57
|
|
|
47
58
|
<template>
|
|
@@ -52,16 +63,19 @@ function debounce(func, wait) {
|
|
|
52
63
|
<v-col
|
|
53
64
|
class="pa-0"
|
|
54
65
|
ref="viewer"
|
|
66
|
+
:class="{ 'picking-cursor': viewerStore.picking_mode }"
|
|
55
67
|
style="height: 100%; overflow: hidden; position: relative; z-index: 0"
|
|
56
|
-
@click="
|
|
57
|
-
@keydown.esc="viewerStore.toggle_picking_mode(false)"
|
|
68
|
+
@click="handleClick"
|
|
58
69
|
/>
|
|
59
70
|
</div>
|
|
60
71
|
</ClientOnly>
|
|
61
72
|
</template>
|
|
62
73
|
|
|
63
|
-
<style>
|
|
74
|
+
<style scoped>
|
|
64
75
|
img {
|
|
65
76
|
pointer-events: none;
|
|
66
77
|
}
|
|
78
|
+
.picking-cursor {
|
|
79
|
+
cursor: crosshair !important;
|
|
80
|
+
}
|
|
67
81
|
</style>
|
|
@@ -14,7 +14,6 @@ const { displayMenu, containerWidth, containerHeight } = defineProps({
|
|
|
14
14
|
});
|
|
15
15
|
|
|
16
16
|
const emit = defineEmits(["show-menu"]);
|
|
17
|
-
|
|
18
17
|
const dataStore = useDataStore();
|
|
19
18
|
const dataStyleStore = useDataStyleStore();
|
|
20
19
|
const viewerStore = useViewerStore();
|
|
@@ -56,4 +55,52 @@ defineExpose({ get_viewer_id });
|
|
|
56
55
|
:container-width="containerWidth"
|
|
57
56
|
:container-height="containerHeight"
|
|
58
57
|
/>
|
|
58
|
+
|
|
59
|
+
<v-fade-transition>
|
|
60
|
+
<div
|
|
61
|
+
v-if="viewerStore.picking_mode"
|
|
62
|
+
class="picking-message-container d-flex justify-center w-100 pa-4"
|
|
63
|
+
>
|
|
64
|
+
<v-chip
|
|
65
|
+
color="secondary"
|
|
66
|
+
elevation="8"
|
|
67
|
+
size="large"
|
|
68
|
+
variant="flat"
|
|
69
|
+
prepend-icon="mdi-crosshairs-gps"
|
|
70
|
+
class="pick-pulse"
|
|
71
|
+
style="pointer-events: auto"
|
|
72
|
+
@click="viewerStore.toggle_picking_mode(false)"
|
|
73
|
+
>
|
|
74
|
+
Picking active — click in the viewer · Esc to stop
|
|
75
|
+
<v-divider vertical class="mx-2 my-1" opacity="0.3" />
|
|
76
|
+
<v-icon icon="mdi-close" size="small" />
|
|
77
|
+
</v-chip>
|
|
78
|
+
</div>
|
|
79
|
+
</v-fade-transition>
|
|
59
80
|
</template>
|
|
81
|
+
|
|
82
|
+
<style scoped>
|
|
83
|
+
.picking-message-container {
|
|
84
|
+
position: absolute;
|
|
85
|
+
top: 20px;
|
|
86
|
+
left: 0;
|
|
87
|
+
pointer-events: none;
|
|
88
|
+
z-index: 100;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@keyframes pulse-ring {
|
|
92
|
+
0% {
|
|
93
|
+
box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0.7);
|
|
94
|
+
}
|
|
95
|
+
70% {
|
|
96
|
+
box-shadow: 0 0 0 10px rgba(var(--v-theme-secondary), 0);
|
|
97
|
+
}
|
|
98
|
+
100% {
|
|
99
|
+
box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.pick-pulse {
|
|
104
|
+
animation: pulse-ring 1.5s ease-out infinite;
|
|
105
|
+
}
|
|
106
|
+
</style>
|
package/app/stores/viewer.js
CHANGED
|
@@ -27,7 +27,7 @@ export const useViewerStore = defineStore(
|
|
|
27
27
|
const client = ref({});
|
|
28
28
|
const config = ref(undefined);
|
|
29
29
|
const picking_mode = ref(false);
|
|
30
|
-
const picked_point = ref({ x: undefined, y: undefined });
|
|
30
|
+
const picked_point = ref({ x: undefined, y: undefined, z: undefined });
|
|
31
31
|
const request_counter = ref(0);
|
|
32
32
|
const status = ref(Status.NOT_CONNECTED);
|
|
33
33
|
const buzy = ref(0);
|
|
@@ -62,14 +62,12 @@ export const useViewerStore = defineStore(
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
async function set_picked_point(x, y) {
|
|
65
|
-
const response = await request(schemas.opengeodeweb_viewer.
|
|
66
|
-
x,
|
|
67
|
-
y,
|
|
65
|
+
const response = await request(schemas.opengeodeweb_viewer.viewer.get_point_position, {
|
|
66
|
+
x: Math.round(x),
|
|
67
|
+
y: Math.round(y),
|
|
68
68
|
});
|
|
69
|
-
const { x: world_x, y: world_y } = response;
|
|
70
|
-
picked_point.value
|
|
71
|
-
picked_point.value.y = world_y;
|
|
72
|
-
picking_mode.value = false;
|
|
69
|
+
const { x: world_x, y: world_y, z: world_z } = response;
|
|
70
|
+
picked_point.value = { x: world_x, y: world_y, z: world_z };
|
|
73
71
|
}
|
|
74
72
|
|
|
75
73
|
function ws_connect() {
|
package/package.json
CHANGED