From 8a27bb0ca06c48ca404c2eb5050ec9dff21dbb2b Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 18 Feb 2025 13:37:47 +0200
Subject: [PATCH] fix: switch back to selection mode on window blur

---
 .../src/components/canvas/Canvas.vue          | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index b76f724845a57..583f682489c13 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -154,22 +154,22 @@ const panningKeyCode = ref<string[] | true>(isMobileDevice ? true : [' ', contro
 const panningMouseButton = ref<number[] | true>(isMobileDevice ? true : [1]);
 const selectionKeyCode = ref<string | true | null>(isMobileDevice ? 'Shift' : true);
 
-onKeyDown(
-	panningKeyCode.value,
-	() => {
-		selectionKeyCode.value = null;
-		panningMouseButton.value = [0, 1];
-	},
-	{
-		dedupe: true,
-	},
-);
+function switchToPanningMode() {
+	selectionKeyCode.value = null;
+	panningMouseButton.value = [0, 1];
+}
 
-onKeyUp(panningKeyCode.value, () => {
+function switchToSelectionMode() {
 	selectionKeyCode.value = true;
 	panningMouseButton.value = [1];
+}
+
+onKeyDown(panningKeyCode.value, switchToPanningMode, {
+	dedupe: true,
 });
 
+onKeyUp(panningKeyCode.value, switchToSelectionMode);
+
 /**
  * Rename node key bindings
  * We differentiate between short and long press because the space key is also used for activating panning
@@ -670,6 +670,14 @@ function onMinimapMouseLeave() {
 	hideMinimap();
 }
 
+/**
+ * Window Events
+ */
+
+function onWindowBlur() {
+	switchToSelectionMode();
+}
+
 /**
  * Lifecycle
  */
@@ -679,11 +687,15 @@ const initialized = ref(false);
 onMounted(() => {
 	props.eventBus.on('fitView', onFitView);
 	props.eventBus.on('nodes:select', onSelectNodes);
+
+	window.addEventListener('blur', onWindowBlur);
 });
 
 onUnmounted(() => {
 	props.eventBus.off('fitView', onFitView);
 	props.eventBus.off('nodes:select', onSelectNodes);
+
+	window.removeEventListener('blur', onWindowBlur);
 });
 
 onPaneReady(async () => {