fix(DimensionOverlay): Fix d key hotkey (#91)

* Fix d key hotkey in graphics-debug/DimensionOverlay.tsx

* Add focus

Author: Ayushjhawar8

site/components/DimensionOverlay.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import { applyToPoint, identity, inverse } from "transformation-matrix"
 import type { Matrix } from "transformation-matrix"
 
@@ -17,13 +17,27 @@ export const DimensionOverlay: React.FC<Props> = ({ children, transform }) => {
   const [dEnd, setDEnd] = useState({ x: 0, y: 0 })
   const mousePosRef = useRef({ x: 0, y: 0 })
   const containerRef = useRef<HTMLDivElement | null>(null)
+  const isMouseOverRef = useRef(false)
   const container = containerRef.current!
   const containerBounds = container?.getBoundingClientRect()
 
-  const bindKeys = () => {
-    const container = containerRef.current
+  const handleMouseEnter = useCallback(() => {
+    isMouseOverRef.current = true
+    containerRef.current?.focus()
+  }, [])
 
+  const handleMouseLeave = useCallback(() => {
+    isMouseOverRef.current = false
+  }, [])
+
+  useEffect(() => {
     const down = (e: KeyboardEvent) => {
+      const containerHasFocus =
+        containerRef.current?.contains(document.activeElement) ||
+        document.activeElement === containerRef.current
+
+      if (!isMouseOverRef.current && !containerHasFocus) return
+
       if (e.key === "d") {
         setDStart({ x: mousePosRef.current.x, y: mousePosRef.current.y })
         setDEnd({ x: mousePosRef.current.x, y: mousePosRef.current.y })
@@ -36,41 +50,11 @@ export const DimensionOverlay: React.FC<Props> = ({ children, transform }) => {
       }
     }
 
-    const addKeyListener = () => {
-      if (container) {
-        window.addEventListener("keydown", down)
-      }
-    }
-
-    const removeKeyListener = () => {
-      if (container) {
-        window.removeEventListener("keydown", down)
-      }
-    }
-
-    if (container) {
-      container.addEventListener("focus", addKeyListener)
-      container.addEventListener("blur", removeKeyListener)
-      container.addEventListener("mouseenter", addKeyListener)
-      container.addEventListener("mouseleave", removeKeyListener)
-
-      // Ensure the key listener is active immediately so the "d" hotkey
-      // works without requiring a mouse enter/leave cycle
-      addKeyListener()
-    }
+    window.addEventListener("keydown", down)
     return () => {
-      // Always remove the key listener on cleanup to avoid leaks
-      removeKeyListener()
-      if (container) {
-        container.removeEventListener("focus", addKeyListener)
-        container.removeEventListener("blur", removeKeyListener)
-        container.removeEventListener("mouseenter", addKeyListener)
-        container.removeEventListener("mouseleave", removeKeyListener)
-      }
+      window.removeEventListener("keydown", down)
     }
-  }
-
-  useEffect(bindKeys, [containerBounds?.width, containerBounds?.height])
+  }, [])
 
   const screenDStart = applyToPoint(transform, dStart)
   const screenDEnd = applyToPoint(transform, dEnd)
@@ -112,11 +96,8 @@ export const DimensionOverlay: React.FC<Props> = ({ children, transform }) => {
           setDimensionToolVisible(false)
         }
       }}
-      onMouseEnter={() => {
-        if (containerRef.current) {
-          bindKeys()
-        }
-      }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
       {children}
       {dimensionToolVisible && (