Merge branch 'main' into copilot/enhance-multiuser-token-warning

Author: lstein

Makefile

@@ -12,12 +12,13 @@ help:
 	@echo "mypy-all                 Run mypy ignoring the config in pyproject.tom but still ignoring missing imports"
 	@echo "test                     Run the unit tests."
 	@echo "update-config-docstring  Update the app's config docstring so mkdocs can autogenerate it correctly."
-	@echo "frontend-install         Install the pnpm modules needed for the front end"
-	@echo "frontend-build           Build the frontend in order to run on localhost:9090"
+	@echo "frontend-install         Install the pnpm modules needed for the frontend"
+	@echo "frontend-build           Build the frontend for localhost:9090"
+	@echo "frontend-test            Run the frontend test suite once"
 	@echo "frontend-dev             Run the frontend in developer mode on localhost:5173"
 	@echo "frontend-typegen         Generate types for the frontend from the OpenAPI schema"
-	@echo "frontend-prettier        Format the frontend using lint:prettier"
-	@echo "wheel            	Build the wheel for the current version"
+	@echo "frontend-lint            Run frontend checks and fixable lint/format steps"
+	@echo "wheel                    Build the wheel for the current version"
 	@echo "tag-release              Tag the GitHub repository with the current version (use at release time only!)"
 	@echo "openapi                  Generate the OpenAPI schema for the app, outputting to stdout"
 	@echo "docs                     Serve the mkdocs site with live reload"
@@ -57,6 +58,10 @@ frontend-install:
 frontend-build:
 	cd invokeai/frontend/web && pnpm build
 
+# Run the frontend test suite once
+frontend-test:
+	cd invokeai/frontend/web && pnpm run test:run
+
 # Run the frontend in dev mode
 frontend-dev:
 	cd invokeai/frontend/web && pnpm dev

invokeai/frontend/web/package.json

@@ -21,7 +21,7 @@
   "scripts": {
     "dev": "vite dev",
     "dev:host": "vite dev --host",
-    "build": "pnpm run lint && vite build",
+    "build": "pnpm run lint && vitest run && vite build",
     "typegen": "node scripts/typegen.js",
     "preview": "vite preview",
     "lint:knip": "knip --tags=-knipignore",
@@ -35,6 +35,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest",
+    "test:run": "vitest run",
     "test:ui": "vitest --coverage --ui",
     "test:no-watch": "vitest --no-watch"
   },

invokeai/frontend/web/src/common/hooks/focus.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+
+import { getFocusedRegion, setFocusedRegion } from './focus';
+
+describe('focus regions', () => {
+  it('supports the workflows region', () => {
+    setFocusedRegion('workflows');
+    expect(getFocusedRegion()).toBe('workflows');
+
+    setFocusedRegion(null);
+    expect(getFocusedRegion()).toBe(null);
+  });
+});

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

@@ -12,6 +12,7 @@ const addControlLayerFromImageDndTargetData = newCanvasEntityFromImageDndTarget.
 const addRegionalGuidanceReferenceImageFromImageDndTargetData = newCanvasEntityFromImageDndTarget.getData({
   type: 'regional_guidance_with_reference_image',
 });
+const addInpaintMaskFromImageDndTargetData = newCanvasEntityFromImageDndTarget.getData({ type: 'inpaint_mask' });
 const addResizedControlLayerFromImageDndTargetData = newCanvasEntityFromImageDndTarget.getData({
   type: 'control_layer',
   withResize: true,
@@ -25,39 +26,47 @@ export const CanvasDropArea = memo(() => {
     <>
       <Grid
         gridTemplateRows="1fr 1fr"
-        gridTemplateColumns="1fr 1fr"
+        gridTemplateColumns="repeat(6, 1fr)"
         position="absolute"
         top={0}
         right={0}
         bottom={0}
         left={0}
         pointerEvents="none"
       >
-        <GridItem position="relative">
+        <GridItem position="relative" colSpan={3}>
           <DndDropTarget
             dndTarget={newCanvasEntityFromImageDndTarget}
             dndTargetData={addRasterLayerFromImageDndTargetData}
             label={t('controlLayers.canvasContextMenu.newRasterLayer')}
             isDisabled={isBusy}
           />
         </GridItem>
-        <GridItem position="relative">
+        <GridItem position="relative" colSpan={3}>
           <DndDropTarget
             dndTarget={newCanvasEntityFromImageDndTarget}
             dndTargetData={addControlLayerFromImageDndTargetData}
             label={t('controlLayers.canvasContextMenu.newControlLayer')}
             isDisabled={isBusy}
           />
         </GridItem>
-        <GridItem position="relative">
+        <GridItem position="relative" colSpan={2}>
           <DndDropTarget
             dndTarget={newCanvasEntityFromImageDndTarget}
             dndTargetData={addRegionalGuidanceReferenceImageFromImageDndTargetData}
             label={t('controlLayers.canvasContextMenu.newRegionalReferenceImage')}
             isDisabled={isBusy}
           />
         </GridItem>
-        <GridItem position="relative">
+        <GridItem position="relative" colSpan={2}>
+          <DndDropTarget
+            dndTarget={newCanvasEntityFromImageDndTarget}
+            dndTargetData={addInpaintMaskFromImageDndTargetData}
+            label={t('controlLayers.canvasContextMenu.newInpaintMask')}
+            isDisabled={isBusy}
+          />
+        </GridItem>
+        <GridItem position="relative" colSpan={2}>
           <DndDropTarget
             dndTarget={newCanvasEntityFromImageDndTarget}
             dndTargetData={addResizedControlLayerFromImageDndTargetData}

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts

@@ -542,6 +542,7 @@ export abstract class CanvasEntityAdapterBase<T extends CanvasEntityState, U ext
       this.renderer.updateCompositingRectSize();
       this.renderer.updateCompositingRectPosition();
       this.renderer.updateCompositingRectFill();
+      this.renderer.updateOpacity();
     }
     this.renderer.syncKonvaCache();
   };

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts

@@ -320,10 +320,6 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
   };
 
   updateOpacity = throttle(() => {
-    if (!this.parent.konva.layer.visible()) {
-      return;
-    }
-
     this.log.trace('Updating opacity');
 
     const opacity = this.parent.state.opacity;

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

@@ -51,7 +51,7 @@ import { selectSelectionMode, selectShouldSnapToGrid } from 'features/nodes/stor
 import { NO_DRAG_CLASS, NO_PAN_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
-import type { CSSProperties, MouseEvent } from 'react';
+import type { CSSProperties, MouseEvent, RefObject } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
@@ -61,6 +61,7 @@ import InvocationDefaultEdge from './edges/InvocationDefaultEdge';
 import CurrentImageNode from './nodes/CurrentImage/CurrentImageNode';
 import InvocationNodeWrapper from './nodes/Invocation/InvocationNodeWrapper';
 import NotesNode from './nodes/Notes/NotesNode';
+import { isWorkflowHotkeyEnabled, shouldIgnoreWorkflowCopyHotkey } from './workflowHotkeys';
 
 const edgeTypes = {
   collapsed: InvocationCollapsedEdge,
@@ -248,14 +249,14 @@ export const Flow = memo(() => {
       >
         <Background gap={snapGrid} offset={snapGrid} />
       </ReactFlow>
-      <HotkeyIsolator />
+      <HotkeyIsolator flowWrapper={flowWrapper} />
     </>
   );
 });
 
 Flow.displayName = 'Flow';
 
-const HotkeyIsolator = memo(() => {
+const HotkeyIsolator = memo(({ flowWrapper }: { flowWrapper: RefObject<HTMLDivElement> }) => {
   const mayUndo = useAppSelector(selectMayUndo);
   const mayRedo = useAppSelector(selectMayRedo);
 
@@ -270,8 +271,12 @@ const HotkeyIsolator = memo(() => {
     id: 'copySelection',
     category: 'workflows',
     callback: copySelection,
-    options: { enabled: isWorkflowsFocused, preventDefault: true },
-    dependencies: [copySelection],
+    options: {
+      enabled: isWorkflowHotkeyEnabled(isWorkflowsFocused),
+      preventDefault: true,
+      ignoreEventWhen: () => shouldIgnoreWorkflowCopyHotkey(window.getSelection(), flowWrapper.current),
+    },
+    dependencies: [copySelection, isWorkflowsFocused],
   });
 
   const selectAll = useCallback(() => {
@@ -299,23 +304,23 @@ const HotkeyIsolator = memo(() => {
     id: 'selectAll',
     category: 'workflows',
     callback: selectAll,
-    options: { enabled: isWorkflowsFocused, preventDefault: true },
+    options: { enabled: isWorkflowHotkeyEnabled(isWorkflowsFocused), preventDefault: true },
     dependencies: [selectAll, isWorkflowsFocused],
   });
 
   useRegisteredHotkeys({
     id: 'pasteSelection',
     category: 'workflows',
     callback: pasteSelection,
-    options: { enabled: isWorkflowsFocused, preventDefault: true },
+    options: { enabled: isWorkflowHotkeyEnabled(isWorkflowsFocused), preventDefault: true },
     dependencies: [pasteSelection, isWorkflowsFocused],
   });
 
   useRegisteredHotkeys({
     id: 'pasteSelectionWithEdges',
     category: 'workflows',
     callback: pasteSelectionWithEdges,
-    options: { enabled: isWorkflowsFocused, preventDefault: true },
+    options: { enabled: isWorkflowHotkeyEnabled(isWorkflowsFocused), preventDefault: true },
     dependencies: [pasteSelectionWithEdges, isWorkflowsFocused],
   });
 
@@ -325,7 +330,7 @@ const HotkeyIsolator = memo(() => {
     callback: () => {
       store.dispatch(undo());
     },
-    options: { enabled: isWorkflowsFocused && mayUndo, preventDefault: true },
+    options: { enabled: isWorkflowHotkeyEnabled(isWorkflowsFocused) && mayUndo, preventDefault: true },
     dependencies: [store, mayUndo, isWorkflowsFocused],
   });
 
@@ -335,7 +340,7 @@ const HotkeyIsolator = memo(() => {
     callback: () => {
       store.dispatch(redo());
     },
-    options: { enabled: isWorkflowsFocused && mayRedo, preventDefault: true },
+    options: { enabled: isWorkflowHotkeyEnabled(isWorkflowsFocused) && mayRedo, preventDefault: true },
     dependencies: [store, mayRedo, isWorkflowsFocused],
   });
 
@@ -373,7 +378,7 @@ const HotkeyIsolator = memo(() => {
     id: 'deleteSelection',
     category: 'workflows',
     callback: deleteSelection,
-    options: { preventDefault: true, enabled: isWorkflowsFocused },
+    options: { preventDefault: true, enabled: isWorkflowHotkeyEnabled(isWorkflowsFocused) },
     dependencies: [deleteSelection, isWorkflowsFocused],
   });
 

invokeai/frontend/web/src/features/nodes/components/flow/workflowHotkeys.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+
+import { isEventTargetWithinElement, isWorkflowHotkeyEnabled, shouldIgnoreWorkflowCopyHotkey } from './workflowHotkeys';
+
+describe('isEventTargetWithinElement', () => {
+  it('returns true when the element contains the event target', () => {
+    const target = new EventTarget();
+    const element = {
+      contains: (node: unknown) => node === target,
+    };
+
+    expect(isEventTargetWithinElement(target, element as never)).toBe(true);
+  });
+
+  it('returns false when the element does not contain the event target', () => {
+    const target = new EventTarget();
+    const element = {
+      contains: () => false,
+    };
+
+    expect(isEventTargetWithinElement(target, element as never)).toBe(false);
+  });
+
+  it('returns false when the element is missing', () => {
+    expect(isEventTargetWithinElement(new EventTarget(), null)).toBe(false);
+  });
+});
+
+describe('isWorkflowHotkeyEnabled', () => {
+  it('enables workflow hotkeys whenever the workflows pane is focused', () => {
+    expect(isWorkflowHotkeyEnabled(true)).toBe(true);
+  });
+
+  it('disables workflow hotkeys when the workflows pane is not focused', () => {
+    expect(isWorkflowHotkeyEnabled(false)).toBe(false);
+  });
+});
+
+describe('shouldIgnoreWorkflowCopyHotkey', () => {
+  const insideNode = new EventTarget() as Node;
+  const outsideNode = new EventTarget() as Node;
+  const element = {
+    contains: (node: Node) => node === insideNode,
+  };
+
+  it('returns false when there is no selection', () => {
+    expect(shouldIgnoreWorkflowCopyHotkey(null, element)).toBe(false);
+  });
+
+  it('returns false for collapsed selections', () => {
+    expect(
+      shouldIgnoreWorkflowCopyHotkey(
+        { isCollapsed: true, toString: () => 'text', anchorNode: outsideNode, focusNode: outsideNode },
+        element
+      )
+    ).toBe(false);
+  });
+
+  it('returns false when the selection is inside the editor element', () => {
+    expect(
+      shouldIgnoreWorkflowCopyHotkey(
+        { isCollapsed: false, toString: () => 'text', anchorNode: insideNode, focusNode: insideNode },
+        element
+      )
+    ).toBe(false);
+  });
+
+  it('returns true when the selection is outside the editor element', () => {
+    expect(
+      shouldIgnoreWorkflowCopyHotkey(
+        { isCollapsed: false, toString: () => 'text', anchorNode: outsideNode, focusNode: outsideNode },
+        element
+      )
+    ).toBe(true);
+  });
+});

invokeai/frontend/web/src/features/nodes/components/flow/workflowHotkeys.ts

@@ -0,0 +1,34 @@
+export const isEventTargetWithinElement = (
+  target: EventTarget | null,
+  element: { contains: (node: Node) => boolean } | null
+) => {
+  return Boolean(target && element?.contains(target as Node));
+};
+
+export const isWorkflowHotkeyEnabled = (isWorkflowsFocused: boolean) => {
+  return isWorkflowsFocused;
+};
+
+type SelectionLike = {
+  isCollapsed: boolean;
+  toString(): string;
+  anchorNode: Node | null;
+  focusNode: Node | null;
+};
+
+export const shouldIgnoreWorkflowCopyHotkey = (
+  selection: SelectionLike | null | undefined,
+  element: { contains: (node: Node) => boolean } | null
+) => {
+  if (!selection || !element || selection.isCollapsed || selection.toString().length === 0) {
+    return false;
+  }
+
+  const nodes = [selection.anchorNode, selection.focusNode].filter((node): node is Node => node !== null);
+
+  if (nodes.length === 0) {
+    return false;
+  }
+
+  return nodes.some((node) => !element.contains(node));
+};

invokeai/frontend/web/vite.config.mts

@@ -39,6 +39,7 @@ export default defineConfig(({ mode }) => {
       host: '0.0.0.0',
     },
     test: {
+      reporters: [['default', { summary: false }]],
       typecheck: {
         enabled: true,
         ignoreSourceErrors: true,