remove container.focus (#40)

* remove container.focus

* add bindKeys to onMouseEnter for dimension overlay

Author: seveibar

site/components/CanvasGraphics/CanvasGraphics.tsx

@@ -254,7 +254,6 @@ export const CanvasGraphics = ({
       >
         <DimensionOverlay
           transform={currentTransform || computedInitialTransform}
-          focusOnHover={true}
         >
           <canvas
             ref={canvasRef}

site/components/DimensionOverlay.tsx

@@ -5,14 +5,9 @@ import type { Matrix } from "transformation-matrix"
 interface Props {
   transform?: Matrix
   children: React.ReactNode
-  focusOnHover?: boolean
 }
 
-export const DimensionOverlay: React.FC<Props> = ({
-  children,
-  transform,
-  focusOnHover = false,
-}) => {
+export const DimensionOverlay: React.FC<Props> = ({ children, transform }) => {
   if (!transform) transform = identity()
   const [dimensionToolVisible, setDimensionToolVisible] = useState(false)
   const [dimensionToolStretching, setDimensionToolStretching] = useState(false)
@@ -25,7 +20,7 @@ export const DimensionOverlay: React.FC<Props> = ({
   const container = containerRef.current!
   const containerBounds = container?.getBoundingClientRect()
 
-  useEffect(() => {
+  const bindKeys = () => {
     const container = containerRef.current
 
     const down = (e: KeyboardEvent) => {
@@ -67,7 +62,9 @@ export const DimensionOverlay: React.FC<Props> = ({
         container.removeEventListener("mouseleave", removeKeyListener)
       }
     }
-  }, [containerRef])
+  }
+
+  useEffect(bindKeys, [containerBounds?.width, containerBounds?.height])
 
   const screenDStart = applyToPoint(transform, dStart)
   const screenDEnd = applyToPoint(transform, dEnd)
@@ -90,16 +87,6 @@ export const DimensionOverlay: React.FC<Props> = ({
       ref={containerRef}
       tabIndex={0}
       style={{ position: "relative" }}
-      onMouseEnter={() => {
-        if (focusOnHover && containerRef.current) {
-          containerRef.current.focus()
-        }
-      }}
-      onMouseLeave={() => {
-        if (containerRef.current) {
-          containerRef.current.blur()
-        }
-      }}
       onMouseMove={(e: React.MouseEvent<HTMLDivElement>) => {
         const rect = e.currentTarget.getBoundingClientRect()
         const x = e.clientX - rect.left
@@ -119,6 +106,11 @@ export const DimensionOverlay: React.FC<Props> = ({
           setDimensionToolVisible(false)
         }
       }}
+      onMouseEnter={() => {
+        if (containerRef.current) {
+          bindKeys()
+        }
+      }}
     >
       {children}
       {dimensionToolVisible && (

site/components/GraphicsDisplay.tsx

@@ -88,7 +88,7 @@ export function GraphicsDisplay({ graphics }: GraphicsDisplayProps) {
                 onMouseMove={handleMouseMove}
                 onMouseLeave={handleMouseLeave}
               >
-                <DimensionOverlay focusOnHover={true}>
+                <DimensionOverlay>
                   <div
                     className="w-full h-full"
                     dangerouslySetInnerHTML={{

site/components/InteractiveGraphics/InteractiveGraphics.tsx

@@ -206,7 +206,7 @@ export const InteractiveGraphics = ({
           overflow: "hidden",
         }}
       >
-        <DimensionOverlay transform={realToScreen} focusOnHover={true}>
+        <DimensionOverlay transform={realToScreen}>
           {graphics.lines?.map((l, originalIndex) =>
             filterLines(l) ? (
               <Line