feat: ✨ highlight focused regions

adds a region wrapper with a highlight effect when that region is focused, this behavior can be toggled as a setting

invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx

@@ -1,28 +1,28 @@
 import { Divider, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useFocusRegion } from 'common/hooks/focus';
+import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
 import { CanvasAddEntityButtons } from 'features/controlLayers/components/CanvasAddEntityButtons';
 import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityList';
 import { EntityListSelectedEntityActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar';
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
-import { memo, useRef } from 'react';
+import { memo } from 'react';
 
 import { ParamDenoisingStrength } from './ParamDenoisingStrength';
 
 export const CanvasLayersPanelContent = memo(() => {
   const hasEntities = useAppSelector(selectHasEntities);
-  const layersPanelFocusRef = useRef<HTMLDivElement>(null);
-  useFocusRegion('layers', layersPanelFocusRef);
 
   return (
-    <Flex ref={layersPanelFocusRef} flexDir="column" gap={2} w="full" h="full">
-      <EntityListSelectedEntityActionBar />
-      <Divider py={0} />
-      <ParamDenoisingStrength />
-      <Divider py={0} />
-      {!hasEntities && <CanvasAddEntityButtons />}
-      {hasEntities && <CanvasEntityList />}
-    </Flex>
+    <FocusRegionWrapper region="layers" w="full" h="full">
+      <Flex flexDir="column" gap={2} w="full" h="full">
+        <EntityListSelectedEntityActionBar />
+        <Divider py={0} />
+        <ParamDenoisingStrength />
+        <Divider py={0} />
+        {!hasEntities && <CanvasAddEntityButtons />}
+        {hasEntities && <CanvasEntityList />}
+      </Flex>
+    </FocusRegionWrapper>
   );
 });
 

invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx

@@ -1,6 +1,6 @@
 import { ContextMenu, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useFocusRegion } from 'common/hooks/focus';
+import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
 import { CanvasAlertsPreserveMask } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask';
 import { CanvasAlertsSelectedEntityStatus } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus';
 import { CanvasAlertsSendingToGallery } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo';
@@ -18,7 +18,7 @@ import { Transform } from 'features/controlLayers/components/Transform/Transform
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
 import { GatedImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
-import { memo, useCallback, useRef } from 'react';
+import { memo, useCallback } from 'react';
 import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
 
 import { CanvasAlertsInvocationProgress } from './CanvasAlerts/CanvasAlertsInvocationProgress';
@@ -35,7 +35,6 @@ const MenuContent = () => {
 };
 
 export const CanvasMainPanelContent = memo(() => {
-  const ref = useRef<HTMLDivElement>(null);
   const dynamicGrid = useAppSelector(selectDynamicGrid);
   const showHUD = useAppSelector(selectShowHUD);
 
@@ -43,82 +42,81 @@ export const CanvasMainPanelContent = memo(() => {
     return <MenuContent />;
   }, []);
 
-  useFocusRegion('canvas', ref);
-
   return (
-    <Flex
-      tabIndex={-1}
-      ref={ref}
-      borderRadius="base"
-      position="relative"
-      flexDirection="column"
-      height="full"
-      width="full"
-      gap={2}
-      alignItems="center"
-      justifyContent="center"
-      overflow="hidden"
-    >
-      <CanvasManagerProviderGate>
-        <CanvasToolbar />
-      </CanvasManagerProviderGate>
-      <ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
-        {(ref) => (
-          <Flex
-            ref={ref}
-            position="relative"
-            w="full"
-            h="full"
-            bg={dynamicGrid ? 'base.850' : 'base.900'}
-            borderRadius="base"
-            overflow="hidden"
-          >
-            <InvokeCanvasComponent />
-            <CanvasManagerProviderGate>
-              <Flex
-                position="absolute"
-                flexDir="column"
-                top={1}
-                insetInlineStart={1}
-                pointerEvents="none"
-                gap={2}
-                alignItems="flex-start"
-              >
-                {showHUD && <CanvasHUD />}
-                <CanvasAlertsSelectedEntityStatus />
-                <CanvasAlertsPreserveMask />
-                <CanvasAlertsSendingToGallery />
-                <CanvasAlertsInvocationProgress />
-              </Flex>
-              <Flex position="absolute" top={1} insetInlineEnd={1}>
-                <Menu>
-                  <MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
-                  <MenuContent />
-                </Menu>
-              </Flex>
-            </CanvasManagerProviderGate>
-          </Flex>
-        )}
-      </ContextMenu>
-      <Flex position="absolute" bottom={4} gap={2} align="center" justify="center">
+    <FocusRegionWrapper region="canvas" w="full" h="full">
+      <Flex
+        tabIndex={-1}
+        borderRadius="base"
+        position="relative"
+        flexDirection="column"
+        height="full"
+        width="full"
+        gap={2}
+        alignItems="center"
+        justifyContent="center"
+        overflow="hidden"
+      >
         <CanvasManagerProviderGate>
-          <StagingAreaIsStagingGate>
-            <StagingAreaToolbar />
-          </StagingAreaIsStagingGate>
+          <CanvasToolbar />
         </CanvasManagerProviderGate>
-      </Flex>
-      <Flex position="absolute" bottom={4}>
+        <ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
+          {(ref) => (
+            <Flex
+              ref={ref}
+              position="relative"
+              w="full"
+              h="full"
+              bg={dynamicGrid ? 'base.850' : 'base.900'}
+              borderRadius="base"
+              overflow="hidden"
+            >
+              <InvokeCanvasComponent />
+              <CanvasManagerProviderGate>
+                <Flex
+                  position="absolute"
+                  flexDir="column"
+                  top={1}
+                  insetInlineStart={1}
+                  pointerEvents="none"
+                  gap={2}
+                  alignItems="flex-start"
+                >
+                  {showHUD && <CanvasHUD />}
+                  <CanvasAlertsSelectedEntityStatus />
+                  <CanvasAlertsPreserveMask />
+                  <CanvasAlertsSendingToGallery />
+                  <CanvasAlertsInvocationProgress />
+                </Flex>
+                <Flex position="absolute" top={1} insetInlineEnd={1}>
+                  <Menu>
+                    <MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
+                    <MenuContent />
+                  </Menu>
+                </Flex>
+              </CanvasManagerProviderGate>
+            </Flex>
+          )}
+        </ContextMenu>
+        <Flex position="absolute" bottom={4} gap={2} align="center" justify="center">
+          <CanvasManagerProviderGate>
+            <StagingAreaIsStagingGate>
+              <StagingAreaToolbar />
+            </StagingAreaIsStagingGate>
+          </CanvasManagerProviderGate>
+        </Flex>
+        <Flex position="absolute" bottom={4}>
+          <CanvasManagerProviderGate>
+            <Filter />
+            <Transform />
+            <SelectObject />
+          </CanvasManagerProviderGate>
+        </Flex>
         <CanvasManagerProviderGate>
-          <Filter />
-          <Transform />
-          <SelectObject />
+          <CanvasDropArea />
         </CanvasManagerProviderGate>
+        <GatedImageViewer />
       </Flex>
-      <CanvasManagerProviderGate>
-        <CanvasDropArea />
-      </CanvasManagerProviderGate>
-      <GatedImageViewer />
-    </Flex>
+    </FocusRegionWrapper>
   );
 });