Merge pull request #383 from Geode-solutions/feat/points-creation

feat(points): points creation with picking and multiple points creation

Author: BotellaA

app/components/HybridRenderingView.vue

@@ -42,6 +42,17 @@ function debounce(func, wait) {
     timeout = setTimeout(later, wait);
   };
 }
+
+async function handleClick(event) {
+  if (viewerStore.picking_mode) {
+    const rect = container.value.$el.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = elementHeight.value - (event.clientY - rect.top);
+    await viewerStore.set_picked_point(x, y);
+    return;
+  }
+  emit("click", event);
+}
 </script>
 
 <template>
@@ -52,16 +63,19 @@ function debounce(func, wait) {
       <v-col
         class="pa-0"
         ref="viewer"
+        :class="{ 'picking-cursor': viewerStore.picking_mode }"
         style="height: 100%; overflow: hidden; position: relative; z-index: 0"
-        @click="emit('click', $event)"
-        @keydown.esc="viewerStore.toggle_picking_mode(false)"
+        @click="handleClick"
       />
     </div>
   </ClientOnly>
 </template>
 
-<style>
+<style scoped>
 img {
   pointer-events: none;
 }
+.picking-cursor {
+  cursor: crosshair !important;
+}
 </style>

app/components/Viewer/Ui.vue

@@ -14,7 +14,6 @@ const { displayMenu, containerWidth, containerHeight } = defineProps({
 });
 
 const emit = defineEmits(["show-menu"]);
-
 const dataStore = useDataStore();
 const dataStyleStore = useDataStyleStore();
 const viewerStore = useViewerStore();
@@ -56,4 +55,52 @@ defineExpose({ get_viewer_id });
     :container-width="containerWidth"
     :container-height="containerHeight"
   />
+
+  <v-fade-transition>
+    <div
+      v-if="viewerStore.picking_mode"
+      class="picking-message-container d-flex justify-center w-100 pa-4"
+    >
+      <v-chip
+        color="secondary"
+        elevation="8"
+        size="large"
+        variant="flat"
+        prepend-icon="mdi-crosshairs-gps"
+        class="pick-pulse"
+        style="pointer-events: auto"
+        @click="viewerStore.toggle_picking_mode(false)"
+      >
+        Picking active — click in the viewer &middot; Esc to stop
+        <v-divider vertical class="mx-2 my-1" opacity="0.3" />
+        <v-icon icon="mdi-close" size="small" />
+      </v-chip>
+    </div>
+  </v-fade-transition>
 </template>
+
+<style scoped>
+.picking-message-container {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  pointer-events: none;
+  z-index: 100;
+}
+
+@keyframes pulse-ring {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(var(--v-theme-secondary), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0);
+  }
+}
+
+.pick-pulse {
+  animation: pulse-ring 1.5s ease-out infinite;
+}
+</style>

app/stores/viewer.js

@@ -27,7 +27,7 @@ export const useViewerStore = defineStore(
     const client = ref({});
     const config = ref(undefined);
     const picking_mode = ref(false);
-    const picked_point = ref({ x: undefined, y: undefined });
+    const picked_point = ref({ x: undefined, y: undefined, z: undefined });
     const request_counter = ref(0);
     const status = ref(Status.NOT_CONNECTED);
     const buzy = ref(0);
@@ -62,14 +62,12 @@ export const useViewerStore = defineStore(
     }
 
     async function set_picked_point(x, y) {
-      const response = await request(schemas.opengeodeweb_viewer.generic.get_point_position, {
-        x,
-        y,
+      const response = await request(schemas.opengeodeweb_viewer.viewer.get_point_position, {
+        x: Math.round(x),
+        y: Math.round(y),
       });
-      const { x: world_x, y: world_y } = response;
-      picked_point.value.x = world_x;
-      picked_point.value.y = world_y;
-      picking_mode.value = false;
+      const { x: world_x, y: world_y, z: world_z } = response;
+      picked_point.value = { x: world_x, y: world_y, z: world_z };
     }
 
     function ws_connect() {