@geode/opengeodeweb-front 10.20.0-rc.1 → 10.20.0-rc.3

package/app/components/ViewToolbar.vue

@@ -50,6 +50,12 @@ const camera_options = computed(() => [
     tooltip: "Highlight on hover",
     icon: "mdi-cursor-default-click",
     color: hybridViewerStore.is_hover_highlight ? "primary" : undefined,
+    action: hybridViewerStore.is_hover_highlight
+      ? () => {
+          hybridViewerStore.is_hover_highlight = false;
+          hybridViewerStore.clearHoverHighlight();
+        }
+      : undefined,
     menu: [
       {
         title: "Cells",
@@ -138,7 +144,11 @@ const camera_options = computed(() => [
   <v-container :class="[$style.floatToolbar, 'pa-0', 'view-toolbar']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
-        <v-menu v-if="camera_option.menu" location="start" :close-on-content-click="false">
+        <v-menu
+          v-if="camera_option.menu && !camera_option.action"
+          location="start"
+          :close-on-content-click="false"
+        >
           <template #activator="{ props }">
             <ActionButton
               v-bind="props"

package/app/components/Viewer/Ui.vue

@@ -3,6 +3,7 @@ import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingOb
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu/ContextMenu";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
 import { getCurrentInstance } from "vue";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useOverlappingPicker } from "@ogw_front/composables/use_overlapping_picker";
 import { useViewerStore } from "@ogw_front/stores/viewer";
@@ -16,6 +17,18 @@ const { displayMenu, containerWidth, containerHeight } = defineProps({
 const emit = defineEmits(["show-menu"]);
 const menuStore = useMenuStore();
 const viewerStore = useViewerStore();
+const hybridViewerStore = useHybridViewerStore();
+
+function stopHoverHighlight() {
+  hybridViewerStore.is_hover_highlight = false;
+  hybridViewerStore.clearHoverHighlight();
+}
+
+onKeyStroke("Escape", () => {
+  if (hybridViewerStore.is_hover_highlight) {
+    stopHoverHighlight();
+  }
+});
 
 const {
   displayIntermediate,
@@ -91,6 +104,29 @@ defineExpose({ get_viewer_id });
       </v-chip>
     </div>
   </v-fade-transition>
+
+  <v-fade-transition>
+    <div
+      v-if="hybridViewerStore.is_hover_highlight"
+      class="picking-message-container d-flex justify-center w-100 pa-4"
+    >
+      <v-chip
+        color="primary"
+        elevation="8"
+        size="large"
+        variant="flat"
+        class="pick-pulse"
+        style="pointer-events: auto"
+        @click="stopHoverHighlight"
+      >
+        Highlight active ({{
+          hybridViewerStore.hover_highlight_field_type === "CELL" ? "Cells" : "Points"
+        }}) &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>

package/app/stores/viewer.js

@@ -30,7 +30,7 @@ export const useViewerStore = defineStore(
     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);
+    const busy = ref(0);
 
     const protocol = computed(() => {
       if (infraStore.app_mode === appMode.CLOUD) {
@@ -88,7 +88,7 @@ export const useViewerStore = defineStore(
           }
 
           client.value.onBusyChange((count) => {
-            buzy.value = count;
+            busy.value = count;
           });
           client.value.onConnectionError((httpReq) => {
             const message = httpReq?.response?.error || `Connection error`;

package/internal/stores/hybrid_viewer.js

@@ -4,23 +4,16 @@ const RGB_MAX = 255;
 const BACKGROUND_GREY_VALUE = 180;
 const ACTOR_DARK_VALUE = 20;
 
-const BACKGROUND_COLOR = [
-  BACKGROUND_GREY_VALUE / RGB_MAX,
-  BACKGROUND_GREY_VALUE / RGB_MAX,
-  BACKGROUND_GREY_VALUE / RGB_MAX,
-];
-const ACTOR_COLOR = [
-  ACTOR_DARK_VALUE / RGB_MAX,
-  ACTOR_DARK_VALUE / RGB_MAX,
-  ACTOR_DARK_VALUE / RGB_MAX,
-];
-const WHEEL_TIME_OUT_MS = 600;
-const HOVER_THROTTLE_MS = 50;
-const HOVER_TIMEOUT_MS = 500;
-
-const SAMPLE_SIZE = 10;
-const TOTAL_CHANNELS = 400;
-const RGBA_CHANNELS = 4;
+const bgVal = BACKGROUND_GREY_VALUE / RGB_MAX;
+const BACKGROUND_COLOR = [bgVal, bgVal, bgVal];
+const actVal = ACTOR_DARK_VALUE / RGB_MAX;
+const ACTOR_COLOR = [actVal, actVal, actVal];
+const HOVER_THROTTLE_MS = 50,
+  HOVER_TIMEOUT_MS = 500,
+  WHEEL_TIME_OUT_MS = 600;
+const RGBA_CHANNELS = 4,
+  SAMPLE_SIZE = 10,
+  TOTAL_CHANNELS = 400;
 
 function mapRect(rect, latestImage, canvasRect) {
   const scaleX = latestImage.width / canvasRect.width;
@@ -226,6 +219,7 @@ function performSetContainer(options) {
 
   resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
 
+  let has_dragged = false;
   useMousePressed({
     target: container,
     onPressed: (event) => {
@@ -244,21 +238,28 @@ function performSetContainer(options) {
         return;
       }
       is_moving.value = true;
+      has_dragged = false;
       event.stopPropagation();
-      imageStyle.opacity = 0;
     },
     onReleased: () => {
-      if (is_moving.value) {
-        is_moving.value = false;
+      is_moving.value = false;
+      if (has_dragged) {
+        genericRenderWindow.getRenderer().resetCameraClippingRange();
         syncRemoteCamera();
       }
-      is_moving.value = false;
-      genericRenderWindow.getRenderer().resetCameraClippingRange();
-      syncRemoteCamera();
+      has_dragged = false;
     },
   });
 
-  useEventListener(container, "mousemove", hoverHighlight);
+  useEventListener(container, "mousemove", (event) => {
+    if (is_moving.value) {
+      has_dragged = true;
+      if (imageStyle) {
+        imageStyle.opacity = 0;
+      }
+    }
+    hoverHighlight(event);
+  });
   useEventListener(container, "wheel", () => {
     is_moving.value = true;
     if (imageStyle) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.20.0-rc.1",
+  "version": "10.20.0-rc.3",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {