feat(console): add escape key press event to clear selected node in t…

…he map view (#5804)
winglang · Mar 3, 2024 · bc2bc51 · bc2bc51
1 parent b189bf4
commit bc2bc51
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/apps/wing-console/console/ui/src/ui/elk-map.tsx b/apps/wing-console/console/ui/src/ui/elk-map.tsx
@@ -17,6 +17,7 @@ import {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
+import { useKeyPressEvent } from "react-use";
 
 import { Edge } from "../shared/Edge.js";
 import { Node } from "../shared/Node.js";
@@ -576,6 +577,13 @@ export const ElkMap = <T extends unknown = undefined>({
 
   const mapBackgroundRef = useRef<HTMLDivElement>(null);
 
+  useKeyPressEvent(
+    "Escape",
+    useCallback(() => {
+      onSelectedNodeIdChange?.(undefined);
+    }, [onSelectedNodeIdChange]),
+  );
+
   return (
     <>
       <InvisibleNodeSizeCalculator