fix,feat: canvas followups 13 (#6893)

## Summary

### Fixes
- Delete hotkey on gallery doesn't delete
- Delete on workflows also triggers gallery delete
- Brush/eraser width hotkeys not working

## Related Issues / Discussions

discord & offline discussion

## QA Instructions

Try the fixed things

## Merge Plan

n/a

## Checklist

- [x] _The PR has a short but descriptive title, suitable for a
changelog_
- [ ] _Tests added / updated (if applicable)_
- [ ] _Documentation added / updated (if applicable)_

Author: blessedcoolant

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx

@@ -130,7 +130,7 @@ export const ToolBrushWidth = memo(() => {
   }, [width]);
 
   useRegisteredHotkeys({
-    id: 'incrementToolWidth',
+    id: 'decrementToolWidth',
     category: 'canvas',
     callback: decrement,
     options: { enabled: isSelected && !imageViewer.isOpen },

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserWidth.tsx

@@ -133,7 +133,7 @@ export const ToolEraserWidth = memo(() => {
   }, [width]);
 
   useRegisteredHotkeys({
-    id: 'incrementToolWidth',
+    id: 'decrementToolWidth',
     category: 'canvas',
     callback: decrement,
     options: { enabled: isSelected && !imageViewer.isOpen },

invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts

@@ -1,6 +1,6 @@
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { $activeScopes } from 'common/hooks/interactionScopes';
+import { $activeScopes, INTERACTION_SCOPES } from 'common/hooks/interactionScopes';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { $canvasRightPanelTab } from 'features/controlLayers/store/ephemeral';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
@@ -38,6 +38,7 @@ export const useGalleryHotkeys = () => {
   const upDownHotkeysEnabled = useStore($upDownHotkeysEnabled);
   const canvasRightPanelTab = useStore($canvasRightPanelTab);
   const appTab = useAppSelector(selectActiveTab);
+  const isWorkflowsScopeActive = useStore(INTERACTION_SCOPES.workflows.$isActive);
 
   // When we are on the canvas tab, we need to disable the delete hotkey when the user is focused on the layers tab in
   // the right hand panel, because the same hotkey is used to delete layers.
@@ -212,7 +213,7 @@ export const useGalleryHotkeys = () => {
       }
       dispatch(imagesToDeleteSelected(selection));
     },
-    options: { enabled: leftRightHotkeysEnabled && isDeleteEnabledByTab },
-    dependencies: [leftRightHotkeysEnabled, isDeleteEnabledByTab],
+    options: { enabled: leftRightHotkeysEnabled && isDeleteEnabledByTab && !isWorkflowsScopeActive },
+    dependencies: [leftRightHotkeysEnabled, isDeleteEnabledByTab, selection, isWorkflowsScopeActive],
   });
 };

invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx

@@ -1,7 +1,7 @@
 import { useGlobalMenuClose, useToken } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
-import { INTERACTION_SCOPES, useScopeImperativeApi } from 'common/hooks/interactionScopes';
+import { INTERACTION_SCOPES, useScopeImperativeApi, useScopeOnFocus } from 'common/hooks/interactionScopes';
 import { useConnection } from 'features/nodes/hooks/useConnection';
 import { useCopyPaste } from 'features/nodes/hooks/useCopyPaste';
 import { useSyncExecutionState } from 'features/nodes/hooks/useExecutionState';
@@ -91,6 +91,7 @@ export const Flow = memo(() => {
   const store = useAppStore();
   const isWorkflowsActive = useStore(INTERACTION_SCOPES.workflows.$isActive);
   const workflowsScopeApi = useScopeImperativeApi('workflows');
+  useScopeOnFocus('workflows', flowWrapper);
 
   useWorkflowWatcher();
   useSyncExecutionState();
@@ -318,7 +319,8 @@ export const Flow = memo(() => {
     id: 'deleteSelection',
     category: 'workflows',
     callback: deleteSelection,
-    dependencies: [deleteSelection],
+    options: { preventDefault: true, enabled: isWorkflowsActive },
+    dependencies: [deleteSelection, isWorkflowsActive],
   });
 
   return (