From 651af066e29be075a78ab82c70035ced9d5e362b Mon Sep 17 00:00:00 2001
From: Tao Schiro <spliitdev@gmail.com>
Date: Tue, 25 Aug 2026 13:55:23 +0200
Subject: [PATCH 01/12] fix(EscapeForPanels): closes
 https://github.com/Geode-solutions/Vease/issues/546

---
 app/components/CameraManager.vue             | 67 ++++++++++++--------
 app/components/CameraOrientation.vue         |  4 +-
 app/components/ClippingPlanes.vue            | 12 +++-
 app/components/Ruler.vue                     |  5 ++
 app/components/Screenshot.vue                |  4 +-
 app/components/ShrinkFilter.vue              | 12 +++-
 app/components/ToolPanel.vue                 | 13 +++-
 app/components/ViewToolbar.vue               | 28 ++++++--
 app/components/ZScaling.vue                  |  4 +-
 tests/unit/components/ToolPanel.nuxt.test.js | 66 +++++++++++++++++++
 10 files changed, 178 insertions(+), 37 deletions(-)
 create mode 100644 tests/unit/components/ToolPanel.nuxt.test.js

diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index 3c56ec4e..5c64e97d 100644
--- a/app/components/CameraManager.vue
+++ b/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"
+    :escape-function="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>
diff --git a/app/components/CameraOrientation.vue b/app/components/CameraOrientation.vue
index c2b15698..4210cabd 100644
--- a/app/components/CameraOrientation.vue
+++ b/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"
+    :escape-function="escapeFunction"
     style="top: 90px; right: 55px"
     z-index="1"
   >
diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 6df2a006..9c835e88 100644
--- a/app/components/ClippingPlanes.vue
+++ b/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"
+    :escape-function="escapeFunction"
+  >
     <v-card-text class="pa-3 max-panel-height overflow-y-auto">
       <v-sheet
         ref="widgetContainer"
diff --git a/app/components/Ruler.vue b/app/components/Ruler.vue
index 1501c4fb..0254a045 100644
--- a/app/components/Ruler.vue
+++ b/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"
+    :escape-function="escapeFunction"
   >
     <v-card-text class="pa-3">
       <v-switch
diff --git a/app/components/Screenshot.vue b/app/components/Screenshot.vue
index 99ab888f..f0390d21 100644
--- a/app/components/Screenshot.vue
+++ b/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 =
@@ -79,6 +80,7 @@ watch(screenshot_type, (value) => {
     :width="width"
     close-label="Cancel"
     action-label="Screenshot"
+    :escape-function="escapeFunction"
     @action="takeScreenshot"
   >
     <v-container class="pa-3 py-1">
diff --git a/app/components/ShrinkFilter.vue b/app/components/ShrinkFilter.vue
index 8382f741..788368af 100644
--- a/app/components/ShrinkFilter.vue
+++ b/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"
+    :escape-function="escapeFunction"
+  >
     <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
       <v-switch
         v-model="targetAllVisible"
diff --git a/app/components/ToolPanel.vue b/app/components/ToolPanel.vue
index 93fef2b9..e58215b7 100644
--- a/app/components/ToolPanel.vue
+++ b/app/components/ToolPanel.vue
@@ -1,20 +1,31 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
+import { onKeyStroke } from "@vueuse/core";
 
-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;
 }
+
+onKeyStroke("Escape", () => {
+  if (model.value) {
+    close();
+  }
+});
 </script>
 
 <template>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index c8178901..2f1b1532 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -246,19 +246,37 @@ const camera_options = computed(() => [
   <CameraOrientation
     v-model:show="showCameraOrientation"
     panel
+    :escape-function="() => (showCameraOrientation = false)"
     @select="hybridViewerStore.setCameraOrientation"
   />
-  <Screenshot v-model="take_screenshot" />
-  <CameraManager :showDialog="show_camera_manager" @close="show_camera_manager = false" />
+  <Screenshot
+    v-model="take_screenshot"
+    :escape-function="() => (take_screenshot = false)"
+  />
+  <CameraManager
+    :showDialog="show_camera_manager"
+    :escape-function="() => (show_camera_manager = false)"
+    @close="show_camera_manager = false"
+  />
   <ZScaling
     v-model:show="showZScaling"
     v-model="zScale"
     :width="260"
+    :escape-function="handleZScalingClose"
     @apply="handleZScalingClose"
   />
-  <ClippingPlanes v-model:show="showClippingPlanes" />
-  <ShrinkFilter v-model:show="showShrinkFilter" />
-  <Ruler v-model:show="showRuler" />
+  <ClippingPlanes
+    v-model:show="showClippingPlanes"
+    :escape-function="() => (showClippingPlanes = false)"
+  />
+  <ShrinkFilter
+    v-model:show="showShrinkFilter"
+    :escape-function="() => (showShrinkFilter = false)"
+  />
+  <Ruler
+    v-model:show="showRuler"
+    :escape-function="() => (showRuler = false)"
+  />
 </template>
 
 <style module>
diff --git a/app/components/ZScaling.vue b/app/components/ZScaling.vue
index bc1be3dc..5c1462e1 100644
--- a/app/components/ZScaling.vue
+++ b/app/components/ZScaling.vue
@@ -4,8 +4,9 @@ import ToolPanel from "@ogw_front/components/ToolPanel";
 const zScale = defineModel({ type: Number, default: 1 });
 const show = defineModel("show", { type: Boolean, default: false });
 
-const { width } = defineProps({
+const { width, escapeFunction } = defineProps({
   width: { type: Number, default: 260 },
+  escapeFunction: { type: Function, default: undefined },
 });
 
 const emit = defineEmits(["apply"]);
@@ -22,6 +23,7 @@ function apply() {
     title="Z Scaling Control"
     :width="width"
     action-label="Apply"
+    :escape-function="escapeFunction"
     @action="apply"
   >
     <v-container class="pa-3 py-1">
diff --git a/tests/unit/components/ToolPanel.nuxt.test.js b/tests/unit/components/ToolPanel.nuxt.test.js
new file mode 100644
index 00000000..6bcfac4f
--- /dev/null
+++ b/tests/unit/components/ToolPanel.nuxt.test.js
@@ -0,0 +1,66 @@
+// Third party imports
+import { describe, expect, test, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+
+// Local imports
+import ToolPanel from "@ogw_front/components/ToolPanel";
+import { vuetify } from "@ogw_tests/utils";
+
+const FIRST_INDEX = 0;
+
+describe("tool panel", () => {
+  test("renders title and slot content when open", async () => {
+    const wrapper = await mountSuspended(ToolPanel, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: {
+        modelValue: true,
+        title: "Test Panel",
+      },
+      slots: {
+        default: () => "Panel Content",
+      },
+    });
+
+    expect(wrapper.text()).toContain("Test Panel");
+    expect(wrapper.text()).toContain("Panel Content");
+  });
+
+  test("triggers escape key binding to close panel", async () => {
+    const wrapper = await mountSuspended(ToolPanel, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: {
+        modelValue: true,
+        title: "Test Panel",
+      },
+    });
+
+    globalThis.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+    expect(wrapper.emitted("update:modelValue")[FIRST_INDEX]).toStrictEqual([false]);
+  });
+
+  test("calls escapeFunction prop when Escape key is pressed", async () => {
+    const escapeFunction = vi.fn();
+    const wrapper = await mountSuspended(ToolPanel, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: {
+        escapeFunction,
+        modelValue: true,
+        title: "Test Panel",
+      },
+    });
+
+    globalThis.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await wrapper.vm.$nextTick();
+
+    expect(escapeFunction).toHaveBeenCalledWith();
+  });
+});

From e272e35fe90efe624b12b4646a0e9ff5b0bfe96f Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 25 Aug 2026 11:56:34 +0000
Subject: [PATCH 02/12] Apply prepare changes

---
 app/components/ViewToolbar.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 2f1b1532..e67f0470 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -249,10 +249,7 @@ const camera_options = computed(() => [
     :escape-function="() => (showCameraOrientation = false)"
     @select="hybridViewerStore.setCameraOrientation"
   />
-  <Screenshot
-    v-model="take_screenshot"
-    :escape-function="() => (take_screenshot = false)"
-  />
+  <Screenshot v-model="take_screenshot" :escape-function="() => (take_screenshot = false)" />
   <CameraManager
     :showDialog="show_camera_manager"
     :escape-function="() => (show_camera_manager = false)"
@@ -273,10 +270,7 @@ const camera_options = computed(() => [
     v-model:show="showShrinkFilter"
     :escape-function="() => (showShrinkFilter = false)"
   />
-  <Ruler
-    v-model:show="showRuler"
-    :escape-function="() => (showRuler = false)"
-  />
+  <Ruler v-model:show="showRuler" :escape-function="() => (showRuler = false)" />
 </template>
 
 <style module>

From a4e79996e23c8f170fe74112fd3234000249ff37 Mon Sep 17 00:00:00 2001
From: Tao Schiro <spliitdev@gmail.com>
Date: Tue, 25 Aug 2026 14:28:42 +0200
Subject: [PATCH 03/12] escape close

---
 app/components/DeleteDialog.vue               |  7 +++
 app/components/Screenshot.vue                 |  9 ++-
 app/components/ToolPanel.vue                  | 17 ++++--
 app/components/ViewToolbar.vue                | 59 +++++++++++++------
 .../Viewer/ContextMenu/ContextMenu.vue        |  9 ++-
 .../Viewer/ObjectTree/Base/Controls.vue       | 10 +++-
 .../Viewer/Options/ColorMapPicker.vue         |  7 +++
 .../Viewer/Options/ColormapQuickPicker.vue    |  7 +++
 .../Viewer/OverlappingObjectsPicker.vue       |  7 +++
 app/components/Viewer/Ui.vue                  |  6 +-
 app/components/csv-preview/CsvPreviewer.vue   |  9 ++-
 11 files changed, 118 insertions(+), 29 deletions(-)

diff --git a/app/components/DeleteDialog.vue b/app/components/DeleteDialog.vue
index c8fd5cd2..138ff815 100644
--- a/app/components/DeleteDialog.vue
+++ b/app/components/DeleteDialog.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GlassCard from "./GlassCard.vue";
+import { onKeyStroke } from "@vueuse/core";
 
 const { show, item, selectedCount } = defineProps({
   show: {
@@ -17,6 +18,12 @@ const { show, item, selectedCount } = defineProps({
 });
 
 const emit = defineEmits(["update:show", "confirm"]);
+
+onKeyStroke("Escape", () => {
+  if (show) {
+    emit("update:show", false);
+  }
+});
 </script>
 
 <template>
diff --git a/app/components/Screenshot.vue b/app/components/Screenshot.vue
index f0390d21..32b2bb92 100644
--- a/app/components/Screenshot.vue
+++ b/app/components/Screenshot.vue
@@ -71,6 +71,13 @@ watch(screenshot_type, (value) => {
     output_extension.value = "png";
   }
 });
+
+function handleClose() {
+  if (escapeFunction) {
+    escapeFunction();
+  }
+  show.value = false;
+}
 </script>
 
 <template>
@@ -167,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>
diff --git a/app/components/ToolPanel.vue b/app/components/ToolPanel.vue
index e58215b7..6974012c 100644
--- a/app/components/ToolPanel.vue
+++ b/app/components/ToolPanel.vue
@@ -1,6 +1,6 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
-import { onKeyStroke } from "@vueuse/core";
+import { useEventListener } from "@vueuse/core";
 
 const { title, width, closeLabel, actionLabel, clickOutside, escapeFunction } = defineProps({
   title: { type: String, default: "" },
@@ -21,11 +21,16 @@ function close() {
   model.value = false;
 }
 
-onKeyStroke("Escape", () => {
-  if (model.value) {
-    close();
-  }
-});
+useEventListener(
+  globalThis,
+  "keydown",
+  (event) => {
+    if (event.key === "Escape" && model.value) {
+      close();
+    }
+  },
+  { capture: true },
+);
 </script>
 
 <template>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 2f1b1532..4f3d9ee8 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -9,6 +9,7 @@ import Screenshot from "@ogw_front/components/Screenshot";
 import ShrinkFilter from "@ogw_front/components/ShrinkFilter";
 import ZScaling from "@ogw_front/components/ZScaling";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+import { useEventListener } from "@vueuse/core";
 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,40 @@ async function handleZScalingClose() {
   showZScaling.value = false;
 }
 
+useEventListener(
+  globalThis,
+  "keydown",
+  (event) => {
+    if (event.key !== "Escape") {
+      return;
+    }
+    const openMenuKeys = Object.keys(openSubMenus.value).filter((key) => openSubMenus.value[key]);
+    if (openMenuKeys.length > 0) {
+      for (const key of openMenuKeys) {
+        openSubMenus.value[key] = false;
+      }
+      return;
+    }
+
+    if (showCameraOrientation.value) {
+      showCameraOrientation.value = false;
+    } else if (show_camera_manager.value) {
+      show_camera_manager.value = false;
+    } else if (take_screenshot.value) {
+      take_screenshot.value = false;
+    } else if (showZScaling.value) {
+      handleZScalingClose();
+    } else if (showClippingPlanes.value) {
+      showClippingPlanes.value = false;
+    } else if (showShrinkFilter.value) {
+      showShrinkFilter.value = false;
+    } else if (showRuler.value) {
+      showRuler.value = false;
+    }
+  },
+  { capture: true },
+);
+
 const camera_options = computed(() => [
   {
     testId: "resetCameraButton",
@@ -193,6 +229,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"
         >
@@ -246,16 +283,11 @@ const camera_options = computed(() => [
   <CameraOrientation
     v-model:show="showCameraOrientation"
     panel
-    :escape-function="() => (showCameraOrientation = false)"
     @select="hybridViewerStore.setCameraOrientation"
   />
-  <Screenshot
-    v-model="take_screenshot"
-    :escape-function="() => (take_screenshot = false)"
-  />
+  <Screenshot v-model="take_screenshot" />
   <CameraManager
     :showDialog="show_camera_manager"
-    :escape-function="() => (show_camera_manager = false)"
     @close="show_camera_manager = false"
   />
   <ZScaling
@@ -265,18 +297,9 @@ const camera_options = computed(() => [
     :escape-function="handleZScalingClose"
     @apply="handleZScalingClose"
   />
-  <ClippingPlanes
-    v-model:show="showClippingPlanes"
-    :escape-function="() => (showClippingPlanes = false)"
-  />
-  <ShrinkFilter
-    v-model:show="showShrinkFilter"
-    :escape-function="() => (showShrinkFilter = false)"
-  />
-  <Ruler
-    v-model:show="showRuler"
-    :escape-function="() => (showRuler = false)"
-  />
+  <ClippingPlanes v-model:show="showClippingPlanes" />
+  <ShrinkFilter v-model:show="showShrinkFilter" />
+  <Ruler v-model:show="showRuler" />
 </template>
 
 <style module>
diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index 9dd80057..734c783e 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -1,8 +1,8 @@
 <script setup>
+import { onKeyStroke, useEventListener } from "@vueuse/core";
 import CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton";
 import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems";
 import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard";
-import { useEventListener } from "@vueuse/core";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
@@ -36,6 +36,13 @@ const dragStartY = ref(0);
 const menuX = ref(x);
 const menuY = ref(y);
 
+onKeyStroke("Escape", () => {
+  if (show_menu.value) {
+    show_menu.value = false;
+    menuStore.closeMenu();
+  }
+});
+
 watch(
   () => [x, y, containerWidth, containerHeight],
   ([newX, newY]) => {
diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
index faf66d57..6f697275 100644
--- a/app/components/Viewer/ObjectTree/Base/Controls.vue
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -1,6 +1,7 @@
 <script setup>
 import ActionButton from "@ogw_front/components/ActionButton.vue";
 import SearchBar from "@ogw_front/components/SearchBar.vue";
+import { onKeyStroke } from "@vueuse/core";
 
 const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } = defineProps({
   search: { type: String, required: true },
@@ -13,6 +14,13 @@ const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } =
 const emit = defineEmits(["update:search", "toggle-sort", "collapse-all", "expand-all"]);
 
 const showSearch = ref(false);
+const filterMenuOpen = ref(false);
+
+onKeyStroke("Escape", () => {
+  if (filterMenuOpen.value) {
+    filterMenuOpen.value = false;
+  }
+});
 
 watch(
   () => showSearch.value,
@@ -79,7 +87,7 @@ watch(
             tooltipLocation="bottom"
             @click="emit('toggle-sort')"
           />
-          <v-menu :close-on-content-click="false">
+          <v-menu v-model="filterMenuOpen" :close-on-content-click="false">
             <template #activator="{ props: menuProps }">
               <ActionButton
                 data-testid="filterObjectsButton"
diff --git a/app/components/Viewer/Options/ColorMapPicker.vue b/app/components/Viewer/Options/ColorMapPicker.vue
index a927b3d8..d38d802a 100644
--- a/app/components/Viewer/Options/ColorMapPicker.vue
+++ b/app/components/Viewer/Options/ColorMapPicker.vue
@@ -2,6 +2,7 @@
 import { drawCanvasForPreset, getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 import ColorMapList from "./ColorMapList.vue";
 import GlassCard from "@ogw_front/components/GlassCard.vue";
+import { onKeyStroke } from "@vueuse/core";
 
 const { max, min } = defineProps({
   min: { type: Number, required: true },
@@ -24,6 +25,12 @@ function onSelectPreset(preset) {
   menuOpen.value = false;
 }
 
+onKeyStroke("Escape", () => {
+  if (menuOpen.value) {
+    menuOpen.value = false;
+  }
+});
+
 onMounted(() => nextTick(drawLutCanvas));
 watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
 </script>
diff --git a/app/components/Viewer/Options/ColormapQuickPicker.vue b/app/components/Viewer/Options/ColormapQuickPicker.vue
index d7f397a0..e41358e1 100644
--- a/app/components/Viewer/Options/ColormapQuickPicker.vue
+++ b/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 { onKeyStroke } from "@vueuse/core";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -15,6 +16,12 @@ const show = defineModel("show", { type: Boolean, default: false });
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
+onKeyStroke("Escape", () => {
+  if (show.value) {
+    show.value = false;
+  }
+});
+
 const componentNames = [
   { getterKey: "meshPoints", setterKey: "MeshPoints", key: "points" },
   { getterKey: "meshEdges", setterKey: "MeshEdges", key: "edges" },
diff --git a/app/components/Viewer/OverlappingObjectsPicker.vue b/app/components/Viewer/OverlappingObjectsPicker.vue
index 25f07be8..099756d0 100644
--- a/app/components/Viewer/OverlappingObjectsPicker.vue
+++ b/app/components/Viewer/OverlappingObjectsPicker.vue
@@ -2,6 +2,7 @@
 import GlassCard from "@ogw_front/components/GlassCard";
 import { formatListId } from "@ogw_front/utils/name_cleaner";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
+import { onKeyStroke } from "@vueuse/core";
 
 const { displayIntermediate, intermediateItems, menuStyle } = defineProps({
   displayIntermediate: { type: Boolean, required: true },
@@ -18,6 +19,12 @@ function selectItem(item) {
 function handleUpdate(val) {
   emit("update:displayIntermediate", val);
 }
+
+onKeyStroke("Escape", () => {
+  if (displayIntermediate) {
+    handleUpdate(false);
+  }
+});
 </script>
 
 <template>
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index fe53d187..de13c152 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -25,7 +25,11 @@ function stopHoverHighlight() {
 }
 
 onKeyStroke("Escape", () => {
-  if (hybridViewerStore.is_ruler_active) {
+  if (viewerStore.picking_mode) {
+    viewerStore.toggle_picking_mode(false);
+  } else if (hybridViewerStore.is_picking) {
+    hybridViewerStore.is_picking = false;
+  } else if (hybridViewerStore.is_ruler_active) {
     hybridViewerStore.deactivateRuler();
   } else if (hybridViewerStore.is_hover_highlight) {
     stopHoverHighlight();
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index a3547804..c964c8bb 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -1,7 +1,8 @@
 <script setup>
+import { onKeyStroke, useToggle } from "@vueuse/core";
+
 import CsvSettings from "./CsvSettings.vue";
 import CsvTable from "./CsvTable.vue";
-import { useToggle } from "@vueuse/core";
 
 const { file, modelValue } = defineProps({
   file: { type: Object, required: true },
@@ -175,6 +176,12 @@ watch(
   },
 );
 
+onKeyStroke("Escape", () => {
+  if (modelValue) {
+    emit("update:modelValue", false);
+  }
+});
+
 function onConfirm() {
   emit("confirm", computedResult.value);
   emit("update:modelValue", false);

From 2ec940b08c77b672da56d27a3e5f2b456d122764 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 25 Aug 2026 12:30:00 +0000
Subject: [PATCH 04/12] Apply prepare changes

---
 app/components/ViewToolbar.vue | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 63cf2866..9528f939 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -285,14 +285,8 @@ const camera_options = computed(() => [
     panel
     @select="hybridViewerStore.setCameraOrientation"
   />
-  <Screenshot
-    v-model="take_screenshot"
-    :escape-function="() => (take_screenshot = false)"
-  />
-  <CameraManager
-    :showDialog="show_camera_manager"
-    @close="show_camera_manager = false"
-  />
+  <Screenshot v-model="take_screenshot" :escape-function="() => (take_screenshot = false)" />
+  <CameraManager :showDialog="show_camera_manager" @close="show_camera_manager = false" />
   <ZScaling
     v-model:show="showZScaling"
     v-model="zScale"
@@ -308,10 +302,7 @@ const camera_options = computed(() => [
     v-model:show="showShrinkFilter"
     :escape-function="() => (showShrinkFilter = false)"
   />
-  <Ruler
-    v-model:show="showRuler"
-    :escape-function="() => (showRuler = false)"
-  />
+  <Ruler v-model:show="showRuler" :escape-function="() => (showRuler = false)" />
 </template>
 
 <style module>

From 79636d569740a1497406361a4f2df0dd8aa00cb1 Mon Sep 17 00:00:00 2001
From: Tao Schiro <spliitdev@gmail.com>
Date: Tue, 25 Aug 2026 14:53:49 +0200
Subject: [PATCH 05/12] refacto

---
 app/components/CameraManager.vue     |  2 +-
 app/components/CameraOrientation.vue |  2 +-
 app/components/ClippingPlanes.vue    |  2 +-
 app/components/GlassCard.vue         | 15 ++++++++++++++-
 app/components/Ruler.vue             |  2 +-
 app/components/Screenshot.vue        |  2 +-
 app/components/ShrinkFilter.vue      |  2 +-
 app/components/ToolPanel.vue         | 13 +------------
 app/components/ViewToolbar.vue       | 19 +------------------
 app/components/ZScaling.vue          |  2 +-
 10 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index 5c64e97d..15c19128 100644
--- a/app/components/CameraManager.vue
+++ b/app/components/CameraManager.vue
@@ -34,7 +34,7 @@ function handleClose() {
     v-model="show"
     title="Camera Positions"
     :width="width"
-    :escape-function="handleClose"
+    :escapeFunction="handleClose"
     style="top: 90px; right: 55px"
     z-index="1"
   >
diff --git a/app/components/CameraOrientation.vue b/app/components/CameraOrientation.vue
index 4210cabd..e3abe185 100644
--- a/app/components/CameraOrientation.vue
+++ b/app/components/CameraOrientation.vue
@@ -173,7 +173,7 @@ watch(hoveredFace, (newFace, oldFace) => {
     v-model="show"
     title="Camera Orientations"
     :width="width"
-    :escape-function="escapeFunction"
+    :escapeFunction="escapeFunction"
     style="top: 90px; right: 55px"
     z-index="1"
   >
diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 9c835e88..6f60e9c2 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -154,7 +154,7 @@ onBeforeUnmount(cleanupLocalWidget);
     title="Clipping Planes"
     :width="360"
     :click-outside="false"
-    :escape-function="escapeFunction"
+    :escapeFunction="escapeFunction"
   >
     <v-card-text class="pa-3 max-panel-height overflow-y-auto">
       <v-sheet
diff --git a/app/components/GlassCard.vue b/app/components/GlassCard.vue
index a035da43..80dabc74 100644
--- a/app/components/GlassCard.vue
+++ b/app/components/GlassCard.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { computed, useAttrs } from "vue";
+import { useEventListener } from "@vueuse/core";
 
-const { variant, rounded, padding, theme } = defineProps({
+const { variant, rounded, padding, theme, escapeFunction } = defineProps({
   variant: {
     type: String,
     default: "panel",
@@ -10,10 +11,22 @@ 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));
+
+useEventListener(
+  globalThis,
+  "keydown",
+  (event) => {
+    if (event.key === "Escape" && escapeFunction) {
+      escapeFunction();
+    }
+  },
+  { capture: true },
+);
 </script>
 
 <template>
diff --git a/app/components/Ruler.vue b/app/components/Ruler.vue
index 0254a045..1d1100c6 100644
--- a/app/components/Ruler.vue
+++ b/app/components/Ruler.vue
@@ -61,7 +61,7 @@ async function applyManualCoords() {
     :width="300"
     close-label="Stop ruler"
     :click-outside="false"
-    :escape-function="escapeFunction"
+    :escapeFunction="escapeFunction"
   >
     <v-card-text class="pa-3">
       <v-switch
diff --git a/app/components/Screenshot.vue b/app/components/Screenshot.vue
index 32b2bb92..9e956327 100644
--- a/app/components/Screenshot.vue
+++ b/app/components/Screenshot.vue
@@ -87,7 +87,7 @@ function handleClose() {
     :width="width"
     close-label="Cancel"
     action-label="Screenshot"
-    :escape-function="escapeFunction"
+    :escapeFunction="escapeFunction"
     @action="takeScreenshot"
   >
     <v-container class="pa-3 py-1">
diff --git a/app/components/ShrinkFilter.vue b/app/components/ShrinkFilter.vue
index 788368af..42240b5e 100644
--- a/app/components/ShrinkFilter.vue
+++ b/app/components/ShrinkFilter.vue
@@ -97,7 +97,7 @@ watch(
     title="Shrink Filter"
     :width="340"
     :click-outside="false"
-    :escape-function="escapeFunction"
+    :escapeFunction="escapeFunction"
   >
     <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
       <v-switch
diff --git a/app/components/ToolPanel.vue b/app/components/ToolPanel.vue
index 6974012c..b3893fe6 100644
--- a/app/components/ToolPanel.vue
+++ b/app/components/ToolPanel.vue
@@ -1,6 +1,5 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
-import { useEventListener } from "@vueuse/core";
 
 const { title, width, closeLabel, actionLabel, clickOutside, escapeFunction } = defineProps({
   title: { type: String, default: "" },
@@ -20,17 +19,6 @@ function close() {
   }
   model.value = false;
 }
-
-useEventListener(
-  globalThis,
-  "keydown",
-  (event) => {
-    if (event.key === "Escape" && model.value) {
-      close();
-    }
-  },
-  { capture: true },
-);
 </script>
 
 <template>
@@ -43,6 +31,7 @@ useEventListener(
     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">
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 63cf2866..2e42c87f 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -50,23 +50,6 @@ useEventListener(
       for (const key of openMenuKeys) {
         openSubMenus.value[key] = false;
       }
-      return;
-    }
-
-    if (showCameraOrientation.value) {
-      showCameraOrientation.value = false;
-    } else if (show_camera_manager.value) {
-      show_camera_manager.value = false;
-    } else if (take_screenshot.value) {
-      take_screenshot.value = false;
-    } else if (showZScaling.value) {
-      handleZScalingClose();
-    } else if (showClippingPlanes.value) {
-      showClippingPlanes.value = false;
-    } else if (showShrinkFilter.value) {
-      showShrinkFilter.value = false;
-    } else if (showRuler.value) {
-      showRuler.value = false;
     }
   },
   { capture: true },
@@ -297,7 +280,7 @@ const camera_options = computed(() => [
     v-model:show="showZScaling"
     v-model="zScale"
     :width="260"
-    :escape-function="handleZScalingClose"
+    :escapeFunction="handleZScalingClose"
     @apply="handleZScalingClose"
   />
   <ClippingPlanes
diff --git a/app/components/ZScaling.vue b/app/components/ZScaling.vue
index 5c1462e1..d4aaa143 100644
--- a/app/components/ZScaling.vue
+++ b/app/components/ZScaling.vue
@@ -23,7 +23,7 @@ function apply() {
     title="Z Scaling Control"
     :width="width"
     action-label="Apply"
-    :escape-function="escapeFunction"
+    :escapeFunction="escapeFunction"
     @action="apply"
   >
     <v-container class="pa-3 py-1">

From 5266bc52caf3057e0fc13f855cec0d51cafb74f0 Mon Sep 17 00:00:00 2001
From: Tao Schiro <spliitdev@gmail.com>
Date: Tue, 25 Aug 2026 15:36:12 +0200
Subject: [PATCH 06/12] rm onkeystroke whre they were not needed and remove
 eventlistener for onkeystroke

---
 app/components/DeleteDialog.vue |  7 -------
 app/components/GlassCard.vue    | 17 ++++++-----------
 app/components/ViewToolbar.vue  | 24 ++++++++----------------
 3 files changed, 14 insertions(+), 34 deletions(-)

diff --git a/app/components/DeleteDialog.vue b/app/components/DeleteDialog.vue
index 138ff815..c8fd5cd2 100644
--- a/app/components/DeleteDialog.vue
+++ b/app/components/DeleteDialog.vue
@@ -1,6 +1,5 @@
 <script setup>
 import GlassCard from "./GlassCard.vue";
-import { onKeyStroke } from "@vueuse/core";
 
 const { show, item, selectedCount } = defineProps({
   show: {
@@ -18,12 +17,6 @@ const { show, item, selectedCount } = defineProps({
 });
 
 const emit = defineEmits(["update:show", "confirm"]);
-
-onKeyStroke("Escape", () => {
-  if (show) {
-    emit("update:show", false);
-  }
-});
 </script>
 
 <template>
diff --git a/app/components/GlassCard.vue b/app/components/GlassCard.vue
index 80dabc74..1ffe9c78 100644
--- a/app/components/GlassCard.vue
+++ b/app/components/GlassCard.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed, useAttrs } from "vue";
-import { useEventListener } from "@vueuse/core";
+import { onKeyStroke } from "@vueuse/core";
 
 const { variant, rounded, padding, theme, escapeFunction } = defineProps({
   variant: {
@@ -17,16 +17,11 @@ const { variant, rounded, padding, theme, escapeFunction } = defineProps({
 const attrs = useAttrs();
 const isInteractive = computed(() => Boolean(attrs.onClick));
 
-useEventListener(
-  globalThis,
-  "keydown",
-  (event) => {
-    if (event.key === "Escape" && escapeFunction) {
-      escapeFunction();
-    }
-  },
-  { capture: true },
-);
+onKeyStroke("Escape", () => {
+  if (escapeFunction) {
+    escapeFunction();
+  }
+});
 </script>
 
 <template>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 0163ccf6..2413a988 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -8,8 +8,8 @@ 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 { useEventListener } from "@vueuse/core";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -38,22 +38,14 @@ async function handleZScalingClose() {
   showZScaling.value = false;
 }
 
-useEventListener(
-  globalThis,
-  "keydown",
-  (event) => {
-    if (event.key !== "Escape") {
-      return;
+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 openMenuKeys = Object.keys(openSubMenus.value).filter((key) => openSubMenus.value[key]);
-    if (openMenuKeys.length > 0) {
-      for (const key of openMenuKeys) {
-        openSubMenus.value[key] = false;
-      }
-    }
-  },
-  { capture: true },
-);
+  }
+});
 
 const camera_options = computed(() => [
   {

From 42e41d4b50f52c0c0e9327be006a6b7ab3be024f Mon Sep 17 00:00:00 2001
From: Tao Schiro <spliitdev@gmail.com>
Date: Tue, 25 Aug 2026 15:50:28 +0200
Subject: [PATCH 07/12] clean code

---
 app/components/Viewer/ContextMenu/ContextMenu.vue     | 7 +++----
 app/components/Viewer/ObjectTree/Base/Controls.vue    | 8 ++------
 app/components/Viewer/Options/ColorMapPicker.vue      | 7 +------
 app/components/Viewer/Options/ColormapQuickPicker.vue | 8 ++------
 app/components/Viewer/OverlappingObjectsPicker.vue    | 7 +------
 app/components/csv-preview/CsvPreviewer.vue           | 8 ++------
 6 files changed, 11 insertions(+), 34 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index 734c783e..55c00f49 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { onKeyStroke, useEventListener } from "@vueuse/core";
 import CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton";
 import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems";
 import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard";
+import { useEventListener } from "@vueuse/core";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
@@ -36,9 +36,8 @@ const dragStartY = ref(0);
 const menuX = ref(x);
 const menuY = ref(y);
 
-onKeyStroke("Escape", () => {
-  if (show_menu.value) {
-    show_menu.value = false;
+watch(show_menu, (newVal) => {
+  if (!newVal) {
     menuStore.closeMenu();
   }
 });
diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
index 6f697275..ee357354 100644
--- a/app/components/Viewer/ObjectTree/Base/Controls.vue
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -1,7 +1,7 @@
 <script setup>
 import ActionButton from "@ogw_front/components/ActionButton.vue";
 import SearchBar from "@ogw_front/components/SearchBar.vue";
-import { onKeyStroke } from "@vueuse/core";
+
 
 const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } = defineProps({
   search: { type: String, required: true },
@@ -16,11 +16,7 @@ const emit = defineEmits(["update:search", "toggle-sort", "collapse-all", "expan
 const showSearch = ref(false);
 const filterMenuOpen = ref(false);
 
-onKeyStroke("Escape", () => {
-  if (filterMenuOpen.value) {
-    filterMenuOpen.value = false;
-  }
-});
+
 
 watch(
   () => showSearch.value,
diff --git a/app/components/Viewer/Options/ColorMapPicker.vue b/app/components/Viewer/Options/ColorMapPicker.vue
index d38d802a..c7ec41fb 100644
--- a/app/components/Viewer/Options/ColorMapPicker.vue
+++ b/app/components/Viewer/Options/ColorMapPicker.vue
@@ -2,7 +2,6 @@
 import { drawCanvasForPreset, getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 import ColorMapList from "./ColorMapList.vue";
 import GlassCard from "@ogw_front/components/GlassCard.vue";
-import { onKeyStroke } from "@vueuse/core";
 
 const { max, min } = defineProps({
   min: { type: Number, required: true },
@@ -25,11 +24,7 @@ function onSelectPreset(preset) {
   menuOpen.value = false;
 }
 
-onKeyStroke("Escape", () => {
-  if (menuOpen.value) {
-    menuOpen.value = false;
-  }
-});
+
 
 onMounted(() => nextTick(drawLutCanvas));
 watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
diff --git a/app/components/Viewer/Options/ColormapQuickPicker.vue b/app/components/Viewer/Options/ColormapQuickPicker.vue
index e41358e1..8f5fb2f7 100644
--- a/app/components/Viewer/Options/ColormapQuickPicker.vue
+++ b/app/components/Viewer/Options/ColormapQuickPicker.vue
@@ -1,7 +1,7 @@
 <script setup>
 import ColorMapList from "@ogw_front/components/Viewer/Options/ColorMapList.vue";
 import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
-import { onKeyStroke } from "@vueuse/core";
+
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -16,11 +16,7 @@ const show = defineModel("show", { type: Boolean, default: false });
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
-onKeyStroke("Escape", () => {
-  if (show.value) {
-    show.value = false;
-  }
-});
+
 
 const componentNames = [
   { getterKey: "meshPoints", setterKey: "MeshPoints", key: "points" },
diff --git a/app/components/Viewer/OverlappingObjectsPicker.vue b/app/components/Viewer/OverlappingObjectsPicker.vue
index 099756d0..8f2383ab 100644
--- a/app/components/Viewer/OverlappingObjectsPicker.vue
+++ b/app/components/Viewer/OverlappingObjectsPicker.vue
@@ -2,7 +2,6 @@
 import GlassCard from "@ogw_front/components/GlassCard";
 import { formatListId } from "@ogw_front/utils/name_cleaner";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
-import { onKeyStroke } from "@vueuse/core";
 
 const { displayIntermediate, intermediateItems, menuStyle } = defineProps({
   displayIntermediate: { type: Boolean, required: true },
@@ -20,11 +19,7 @@ function handleUpdate(val) {
   emit("update:displayIntermediate", val);
 }
 
-onKeyStroke("Escape", () => {
-  if (displayIntermediate) {
-    handleUpdate(false);
-  }
-});
+
 </script>
 
 <template>
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index c964c8bb..3c6f71c0 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onKeyStroke, useToggle } from "@vueuse/core";
+import { useToggle } from "@vueuse/core";
 
 import CsvSettings from "./CsvSettings.vue";
 import CsvTable from "./CsvTable.vue";
@@ -176,11 +176,7 @@ watch(
   },
 );
 
-onKeyStroke("Escape", () => {
-  if (modelValue) {
-    emit("update:modelValue", false);
-  }
-});
+
 
 function onConfirm() {
   emit("confirm", computedResult.value);

From 79303065a5da724d31c103746305a02d1fdfbd58 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 25 Aug 2026 13:51:26 +0000
Subject: [PATCH 08/12] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Base/Controls.vue    | 3 ---
 app/components/Viewer/Options/ColorMapPicker.vue      | 2 --
 app/components/Viewer/Options/ColormapQuickPicker.vue | 2 --
 app/components/Viewer/OverlappingObjectsPicker.vue    | 2 --
 app/components/csv-preview/CsvPreviewer.vue           | 2 --
 5 files changed, 11 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
index ee357354..c7e132a7 100644
--- a/app/components/Viewer/ObjectTree/Base/Controls.vue
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -2,7 +2,6 @@
 import ActionButton from "@ogw_front/components/ActionButton.vue";
 import SearchBar from "@ogw_front/components/SearchBar.vue";
 
-
 const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } = defineProps({
   search: { type: String, required: true },
   sortType: { type: String, required: true },
@@ -16,8 +15,6 @@ const emit = defineEmits(["update:search", "toggle-sort", "collapse-all", "expan
 const showSearch = ref(false);
 const filterMenuOpen = ref(false);
 
-
-
 watch(
   () => showSearch.value,
   (val) => {
diff --git a/app/components/Viewer/Options/ColorMapPicker.vue b/app/components/Viewer/Options/ColorMapPicker.vue
index c7ec41fb..a927b3d8 100644
--- a/app/components/Viewer/Options/ColorMapPicker.vue
+++ b/app/components/Viewer/Options/ColorMapPicker.vue
@@ -24,8 +24,6 @@ function onSelectPreset(preset) {
   menuOpen.value = false;
 }
 
-
-
 onMounted(() => nextTick(drawLutCanvas));
 watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
 </script>
diff --git a/app/components/Viewer/Options/ColormapQuickPicker.vue b/app/components/Viewer/Options/ColormapQuickPicker.vue
index 8f5fb2f7..a15bf137 100644
--- a/app/components/Viewer/Options/ColormapQuickPicker.vue
+++ b/app/components/Viewer/Options/ColormapQuickPicker.vue
@@ -16,8 +16,6 @@ const show = defineModel("show", { type: Boolean, default: false });
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
-
-
 const componentNames = [
   { getterKey: "meshPoints", setterKey: "MeshPoints", key: "points" },
   { getterKey: "meshEdges", setterKey: "MeshEdges", key: "edges" },
diff --git a/app/components/Viewer/OverlappingObjectsPicker.vue b/app/components/Viewer/OverlappingObjectsPicker.vue
index 8f2383ab..25f07be8 100644
--- a/app/components/Viewer/OverlappingObjectsPicker.vue
+++ b/app/components/Viewer/OverlappingObjectsPicker.vue
@@ -18,8 +18,6 @@ function selectItem(item) {
 function handleUpdate(val) {
   emit("update:displayIntermediate", val);
 }
-
-
 </script>
 
 <template>
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index 3c6f71c0..2c309bb5 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -176,8 +176,6 @@ watch(
   },
 );
 
-
-
 function onConfirm() {
   emit("confirm", computedResult.value);
   emit("update:modelValue", false);

From f907b35f873d8130627b24860b54f6e1ec91cca8 Mon Sep 17 00:00:00 2001
From: Tao Schiro <spliitdev@gmail.com>
Date: Tue, 25 Aug 2026 15:55:56 +0200
Subject: [PATCH 09/12] escapeFunction instead of escape-function

---
 app/components/ViewToolbar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 2413a988..8056fa3d 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -260,7 +260,7 @@ const camera_options = computed(() => [
     panel
     @select="hybridViewerStore.setCameraOrientation"
   />
-  <Screenshot v-model="take_screenshot" :escape-function="() => (take_screenshot = false)" />
+  <Screenshot v-model="take_screenshot" :escapeFunction="() => (take_screenshot = false)" />
   <CameraManager :showDialog="show_camera_manager" @close="show_camera_manager = false" />
   <ZScaling
     v-model:show="showZScaling"
@@ -271,13 +271,13 @@ const camera_options = computed(() => [
   />
   <ClippingPlanes
     v-model:show="showClippingPlanes"
-    :escape-function="() => (showClippingPlanes = false)"
+    :escapeFunction="() => (showClippingPlanes = false)"
   />
   <ShrinkFilter
     v-model:show="showShrinkFilter"
-    :escape-function="() => (showShrinkFilter = false)"
+    :escapeFunction="() => (showShrinkFilter = false)"
   />
-  <Ruler v-model:show="showRuler" :escape-function="() => (showRuler = false)" />
+  <Ruler v-model:show="showRuler" :escapeFunction="() => (showRuler = false)" />
 </template>
 
 <style module>

From 7d6da7f052c90ef731b4ea7fac74cbb3faeabeac Mon Sep 17 00:00:00 2001
From: Tao Schiro <spliitdev@gmail.com>
Date: Tue, 25 Aug 2026 16:07:12 +0200
Subject: [PATCH 10/12] rm useless

---
 app/components/Viewer/ObjectTree/Base/Controls.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
index c7e132a7..3f6c9e32 100644
--- a/app/components/Viewer/ObjectTree/Base/Controls.vue
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -13,7 +13,7 @@ const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } =
 const emit = defineEmits(["update:search", "toggle-sort", "collapse-all", "expand-all"]);
 
 const showSearch = ref(false);
-const filterMenuOpen = ref(false);
+
 
 watch(
   () => showSearch.value,
@@ -80,7 +80,7 @@ watch(
             tooltipLocation="bottom"
             @click="emit('toggle-sort')"
           />
-          <v-menu v-model="filterMenuOpen" :close-on-content-click="false">
+          <v-menu :close-on-content-click="false">
             <template #activator="{ props: menuProps }">
               <ActionButton
                 data-testid="filterObjectsButton"

From 21ebeba6714442c0f4488ac8835b976706f80f85 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 25 Aug 2026 14:08:19 +0000
Subject: [PATCH 11/12] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Base/Controls.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
index 3f6c9e32..faf66d57 100644
--- a/app/components/Viewer/ObjectTree/Base/Controls.vue
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -14,7 +14,6 @@ const emit = defineEmits(["update:search", "toggle-sort", "collapse-all", "expan
 
 const showSearch = ref(false);
 
-
 watch(
   () => showSearch.value,
   (val) => {

From 7c3324030c537c0cbf0f5f6e3ab3dfc075f5027b Mon Sep 17 00:00:00 2001
From: Tao Schiro <spliitdev@gmail.com>
Date: Tue, 25 Aug 2026 17:24:22 +0200
Subject: [PATCH 12/12] trigger version

---
 app/components/Viewer/Ui.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index de13c152..8ea49e78 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -24,15 +24,23 @@ function stopHoverHighlight() {
   hybridViewerStore.clearHoverHighlight();
 }
 
-onKeyStroke("Escape", () => {
+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();
   }
 });