fix(EscapeForPanels): closes https://github.com/Geode-solutions/Vease…

app/components/CameraManager.vue

@@ -1,49 +1,64 @@
 <script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
 import List from "@ogw_front/components/CameraManager/List";
 import Saver from "@ogw_front/components/CameraManager/Saver";
+import ToolPanel from "@ogw_front/components/ToolPanel";
 
 const emit = defineEmits(["close"]);
 
-const { showDialog, width } = defineProps({
+const { showDialog, width, escapeFunction } = defineProps({
   showDialog: { type: Boolean, required: true },
   width: { type: Number, required: false, default: 260 },
+  escapeFunction: { type: Function, default: undefined },
 });
+
+const show = computed({
+  get: () => showDialog,
+  set: (val) => {
+    if (!val) {
+      handleClose();
+    }
+  },
+});
+
+function handleClose() {
+  if (escapeFunction) {
+    escapeFunction();
+  } else {
+    emit("close");
+  }
+}
 </script>
 
 <template>
-  <GlassCard
-    v-if="showDialog"
-    @click.stop
+  <ToolPanel
+    v-model="show"
     title="Camera Positions"
     :width="width"
-    :ripple="false"
-    variant="panel"
-    padding="pa-0"
-    class="position-absolute elevation-24"
-    style="top: 90px; right: 55px; z-index: 1"
+    :escapeFunction="handleClose"
+    style="top: 90px; right: 55px"
+    z-index="1"
   >
     <v-card-text class="pa-0">
       <Saver />
-      <v-divider></v-divider>
+      <v-divider />
       <List />
     </v-card-text>
 
-    <v-divider></v-divider>
-
-    <v-card-actions class="pa-2">
-      <v-spacer></v-spacer>
-      <v-btn
-        variant="text"
-        size="small"
-        color="white"
-        class="text-caption text-none"
-        data-testid="closeCameraManagerButton"
-        @click="emit('close')"
-        >Close</v-btn
-      >
-    </v-card-actions>
-  </GlassCard>
+    <template #actions>
+      <v-card-actions class="justify-center pb-3 pt-0" style="gap: 8px">
+        <v-btn
+          variant="text"
+          size="small"
+          color="white"
+          class="text-caption text-none"
+          data-testid="closeCameraManagerButton"
+          @click="handleClose"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
 </template>
 
 <style scoped>

app/components/CameraOrientation.vue

@@ -5,9 +5,10 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { newInstance as vtkAnnotatedCubeActor } from "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 
-const { panel, width } = defineProps({
+const { panel, width, escapeFunction } = defineProps({
   panel: { type: Boolean, default: false },
   width: { type: Number, default: 260 },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const show = defineModel("show", { type: Boolean, default: false });
@@ -172,6 +173,7 @@ watch(hoveredFace, (newFace, oldFace) => {
     v-model="show"
     title="Camera Orientations"
     :width="width"
+    :escapeFunction="escapeFunction"
     style="top: 90px; right: 55px"
     z-index="1"
   >

app/components/ClippingPlanes.vue

@@ -7,6 +7,10 @@ import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
+const { escapeFunction } = defineProps({
+  escapeFunction: { type: Function, default: undefined },
+});
+
 const show = defineModel("show", { type: Boolean, default: false });
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -145,7 +149,13 @@ onBeforeUnmount(cleanupLocalWidget);
 </script>
 
 <template>
-  <ToolPanel v-model="show" title="Clipping Planes" :width="360" :click-outside="false">
+  <ToolPanel
+    v-model="show"
+    title="Clipping Planes"
+    :width="360"
+    :click-outside="false"
+    :escapeFunction="escapeFunction"
+  >
     <v-card-text class="pa-3 max-panel-height overflow-y-auto">
       <v-sheet
         ref="widgetContainer"

app/components/GlassCard.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { computed, useAttrs } from "vue";
+import { onKeyStroke } from "@vueuse/core";
 
-const { variant, rounded, padding, theme } = defineProps({
+const { variant, rounded, padding, theme, escapeFunction } = defineProps({
   variant: {
     type: String,
     default: "panel",
@@ -10,10 +11,17 @@ const { variant, rounded, padding, theme } = defineProps({
   rounded: { type: String, default: "xl" },
   padding: { type: String, default: "pa-6" },
   theme: { type: String, default: undefined },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const attrs = useAttrs();
 const isInteractive = computed(() => Boolean(attrs.onClick));
+
+onKeyStroke("Escape", () => {
+  if (escapeFunction) {
+    escapeFunction();
+  }
+});
 </script>
 
 <template>

app/components/Ruler.vue

@@ -2,6 +2,10 @@
 import ToolPanel from "@ogw_front/components/ToolPanel";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
+const { escapeFunction } = defineProps({
+  escapeFunction: { type: Function, default: undefined },
+});
+
 const show = defineModel("show", { type: Boolean, default: false });
 const hybridViewerStore = useHybridViewerStore();
 
@@ -57,6 +61,7 @@ async function applyManualCoords() {
     :width="300"
     close-label="Stop ruler"
     :click-outside="false"
+    :escapeFunction="escapeFunction"
   >
     <v-card-text class="pa-3">
       <v-switch

app/components/Screenshot.vue

@@ -8,8 +8,9 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const show = defineModel({ type: Boolean, default: false });
 
-const { width } = defineProps({
+const { width, escapeFunction } = defineProps({
   width: { type: Number, default: 260 },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const output_extensions =
@@ -70,6 +71,13 @@ watch(screenshot_type, (value) => {
     output_extension.value = "png";
   }
 });
+
+function handleClose() {
+  if (escapeFunction) {
+    escapeFunction();
+  }
+  show.value = false;
+}
 </script>
 
 <template>
@@ -79,6 +87,7 @@ watch(screenshot_type, (value) => {
     :width="width"
     close-label="Cancel"
     action-label="Screenshot"
+    :escapeFunction="escapeFunction"
     @action="takeScreenshot"
   >
     <v-container class="pa-3 py-1">
@@ -165,7 +174,7 @@ watch(screenshot_type, (value) => {
           color="white"
           data-testid="screenshotCancelButton"
           class="text-caption text-none"
-          @click="show = false"
+          @click="handleClose"
         >
           Cancel
         </v-btn>

app/components/ShrinkFilter.vue

@@ -8,6 +8,10 @@ const DEFAULT_SHRINK_VALUE = 0.8;
 const MAX_SHRINK_VALUE = 1;
 const DEBOUNCE_DELAY = 100;
 
+const { escapeFunction } = defineProps({
+  escapeFunction: { type: Function, default: undefined },
+});
+
 const show = defineModel("show", { type: Boolean, default: false });
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -88,7 +92,13 @@ watch(
 </script>
 
 <template>
-  <ToolPanel v-model="show" title="Shrink Filter" :width="340" :click-outside="false">
+  <ToolPanel
+    v-model="show"
+    title="Shrink Filter"
+    :width="340"
+    :click-outside="false"
+    :escapeFunction="escapeFunction"
+  >
     <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
       <v-switch
         v-model="targetAllVisible"

app/components/ToolPanel.vue

@@ -1,18 +1,22 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
 
-const { title, width, closeLabel, actionLabel, clickOutside } = defineProps({
+const { title, width, closeLabel, actionLabel, clickOutside, escapeFunction } = defineProps({
   title: { type: String, default: "" },
   width: { type: Number, default: 260 },
   closeLabel: { type: String, default: "Close" },
   actionLabel: { type: String, default: undefined },
   clickOutside: { type: Boolean, default: true },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const model = defineModel({ type: Boolean, default: false });
 const emit = defineEmits(["action"]);
 
 function close() {
+  if (escapeFunction) {
+    escapeFunction();
+  }
   model.value = false;
 }
 </script>
@@ -27,6 +31,7 @@ function close() {
     variant="panel"
     padding="pa-0"
     class="position-absolute rounded-xl elevation-24 tool-panel"
+    :escapeFunction="close"
     v-bind="$attrs"
   >
     <v-card-text class="pa-0 overflow-hidden position-relative">

app/components/ViewToolbar.vue

@@ -8,6 +8,7 @@ import Ruler from "@ogw_front/components/Ruler";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ShrinkFilter from "@ogw_front/components/ShrinkFilter";
 import ZScaling from "@ogw_front/components/ZScaling";
+import { onKeyStroke } from "@vueuse/core";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
@@ -23,6 +24,7 @@ const showShrinkFilter = ref(false);
 const showRuler = ref(false);
 const grid_scale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
+const openSubMenus = ref({});
 
 watch(
   () => hybridViewerStore.zScale,
@@ -36,6 +38,15 @@ async function handleZScalingClose() {
   showZScaling.value = false;
 }
 
+onKeyStroke("Escape", () => {
+  const openMenuKeys = Object.keys(openSubMenus.value).filter((key) => openSubMenus.value[key]);
+  if (openMenuKeys.length > 0) {
+    for (const key of openMenuKeys) {
+      openSubMenus.value[key] = false;
+    }
+  }
+});
+
 const camera_options = computed(() => [
   {
     testId: "resetCameraButton",
@@ -193,6 +204,7 @@ const camera_options = computed(() => [
       <v-col>
         <v-menu
           v-if="camera_option.menu && !camera_option.action"
+          v-model="openSubMenus[camera_option.testId]"
           location="start"
           :close-on-content-click="false"
         >
@@ -248,17 +260,24 @@ const camera_options = computed(() => [
     panel
     @select="hybridViewerStore.setCameraOrientation"
   />
-  <Screenshot v-model="take_screenshot" />
+  <Screenshot v-model="take_screenshot" :escapeFunction="() => (take_screenshot = false)" />
   <CameraManager :showDialog="show_camera_manager" @close="show_camera_manager = false" />
   <ZScaling
     v-model:show="showZScaling"
     v-model="zScale"
     :width="260"
+    :escapeFunction="handleZScalingClose"
     @apply="handleZScalingClose"
   />
-  <ClippingPlanes v-model:show="showClippingPlanes" />
-  <ShrinkFilter v-model:show="showShrinkFilter" />
-  <Ruler v-model:show="showRuler" />
+  <ClippingPlanes
+    v-model:show="showClippingPlanes"
+    :escapeFunction="() => (showClippingPlanes = false)"
+  />
+  <ShrinkFilter
+    v-model:show="showShrinkFilter"
+    :escapeFunction="() => (showShrinkFilter = false)"
+  />
+  <Ruler v-model:show="showRuler" :escapeFunction="() => (showRuler = false)" />
 </template>
 
 <style module>

app/components/Viewer/ContextMenu/ContextMenu.vue

@@ -36,6 +36,12 @@ const dragStartY = ref(0);
 const menuX = ref(x);
 const menuY = ref(y);
 
+watch(show_menu, (newVal) => {
+  if (!newVal) {
+    menuStore.closeMenu();
+  }
+});
+
 watch(
   () => [x, y, containerWidth, containerHeight],
   ([newX, newY]) => {

app/components/Viewer/Options/ColormapQuickPicker.vue

@@ -1,6 +1,7 @@
 <script setup>
 import ColorMapList from "@ogw_front/components/Viewer/Options/ColorMapList.vue";
 import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
+
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 

app/components/Viewer/Ui.vue

@@ -24,11 +24,23 @@ function stopHoverHighlight() {
   hybridViewerStore.clearHoverHighlight();
 }
 
-onKeyStroke("Escape", () => {
-  if (hybridViewerStore.is_ruler_active) {
+onKeyStroke("Escape", (event) => {
+  let consumed = false;
+  if (viewerStore.picking_mode) {
+    viewerStore.toggle_picking_mode(false);
+    consumed = true;
+  } else if (hybridViewerStore.is_picking) {
+    hybridViewerStore.is_picking = false;
+    consumed = true;
+  } else if (hybridViewerStore.is_ruler_active) {
     hybridViewerStore.deactivateRuler();
+    consumed = true;
   } else if (hybridViewerStore.is_hover_highlight) {
     stopHoverHighlight();
+    consumed = true;
+  }
+  if (consumed && event) {
+    event.stopImmediatePropagation();
   }
 });