From 1fdada65b6eaa873f2f1d197873d54d3b8f8323f Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 24 Aug 2024 12:32:38 +1000 Subject: [PATCH] fix(ui): lint & fix issues with adding regional ip adapters --- .../components/CanvasAddEntityButtons.tsx | 15 +++++------ ...onalGuidanceAddPromptsIPAdapterButtons.tsx | 7 ++--- ...uidanceMenuItemsAddPromptsAndIPAdapter.tsx | 7 ++--- .../hooks/useLayerControlAdapter.ts | 2 ++ .../features/controlLayers/konva/constants.ts | 5 ---- .../controlLayers/store/canvasV2Slice.ts | 2 +- .../controlLayers/store/regionsReducers.ts | 27 +++++++++++++------ 7 files changed, 32 insertions(+), 33 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx index b98c0e78d6..abb689983a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx @@ -1,6 +1,5 @@ import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; -import { useDefaultControlAdapter, useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter'; import { controlLayerAdded, inpaintMaskAdded, @@ -15,23 +14,21 @@ import { PiPlusBold } from 'react-icons/pi'; export const CanvasAddEntityButtons = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const defaultControlAdapter = useDefaultControlAdapter(); - const defaultIPAdapter = useDefaultIPAdapter(); const addInpaintMask = useCallback(() => { - dispatch(inpaintMaskAdded()); + dispatch(inpaintMaskAdded({ isSelected: true })); }, [dispatch]); const addRegionalGuidance = useCallback(() => { - dispatch(rgAdded()); + dispatch(rgAdded({ isSelected: true })); }, [dispatch]); const addRasterLayer = useCallback(() => { dispatch(rasterLayerAdded({ isSelected: true })); }, [dispatch]); const addControlLayer = useCallback(() => { - dispatch(controlLayerAdded({ isSelected: true, overrides: { controlAdapter: defaultControlAdapter } })); - }, [defaultControlAdapter, dispatch]); + dispatch(controlLayerAdded({ isSelected: true })); + }, [dispatch]); const addIPAdapter = useCallback(() => { - dispatch(ipaAdded({ ipAdapter: defaultIPAdapter })); - }, [defaultIPAdapter, dispatch]); + dispatch(ipaAdded({ isSelected: true })); + }, [dispatch]); return ( diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceAddPromptsIPAdapterButtons.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceAddPromptsIPAdapterButtons.tsx index 07104989c0..4533320714 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceAddPromptsIPAdapterButtons.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceAddPromptsIPAdapterButtons.tsx @@ -1,8 +1,6 @@ import { Button, Flex } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter'; -import { nanoid } from 'features/controlLayers/konva/util'; import { rgIPAdapterAdded, rgNegativePromptChanged, @@ -20,7 +18,6 @@ type AddPromptButtonProps = { export const RegionalGuidanceAddPromptsIPAdapterButtons = ({ id }: AddPromptButtonProps) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const defaultIPAdapter = useDefaultIPAdapter(); const selectValidActions = useMemo( () => createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => { @@ -40,8 +37,8 @@ export const RegionalGuidanceAddPromptsIPAdapterButtons = ({ id }: AddPromptButt dispatch(rgNegativePromptChanged({ id, prompt: '' })); }, [dispatch, id]); const addIPAdapter = useCallback(() => { - dispatch(rgIPAdapterAdded({ id, ipAdapter: { ...defaultIPAdapter, id: nanoid() } })); - }, [defaultIPAdapter, dispatch, id]); + dispatch(rgIPAdapterAdded({ id })); + }, [dispatch, id]); return ( diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAddPromptsAndIPAdapter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAddPromptsAndIPAdapter.tsx index bda94d91de..5556c25929 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAddPromptsAndIPAdapter.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAddPromptsAndIPAdapter.tsx @@ -2,8 +2,6 @@ import { MenuItem } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; -import { useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter'; -import { nanoid } from 'features/controlLayers/konva/util'; import { rgIPAdapterAdded, rgNegativePromptChanged, @@ -17,7 +15,6 @@ export const RegionalGuidanceMenuItemsAddPromptsAndIPAdapter = memo(() => { const { id } = useEntityIdentifierContext(); const { t } = useTranslation(); const dispatch = useAppDispatch(); - const defaultIPAdapter = useDefaultIPAdapter(); const selectValidActions = useMemo( () => createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => { @@ -37,8 +34,8 @@ export const RegionalGuidanceMenuItemsAddPromptsAndIPAdapter = memo(() => { dispatch(rgNegativePromptChanged({ id: id, prompt: '' })); }, [dispatch, id]); const addIPAdapter = useCallback(() => { - dispatch(rgIPAdapterAdded({ id, ipAdapter: { ...defaultIPAdapter, id: nanoid() } })); - }, [defaultIPAdapter, dispatch, id]); + dispatch(rgIPAdapterAdded({ id })); + }, [dispatch, id]); return ( <> diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useLayerControlAdapter.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useLayerControlAdapter.ts index 9f876d5e56..827174c2df 100644 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/useLayerControlAdapter.ts +++ b/invokeai/frontend/web/src/features/controlLayers/hooks/useLayerControlAdapter.ts @@ -27,6 +27,7 @@ export const useControlLayerControlAdapter = (entityIdentifier: CanvasEntityIden return controlAdapter; }; +/** @knipignore */ export const useDefaultControlAdapter = (): ControlNetConfig | T2IAdapterConfig => { const [modelConfigs] = useControlNetAndT2IAdapterModels(); @@ -47,6 +48,7 @@ export const useDefaultControlAdapter = (): ControlNetConfig | T2IAdapterConfig return defaultControlAdapter; }; +/** @knipignore */ export const useDefaultIPAdapter = (): IPAdapterConfig => { const [modelConfigs] = useIPAdapterModels(); diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/constants.ts b/invokeai/frontend/web/src/features/controlLayers/konva/constants.ts index 1af95a77fa..398ff4b12e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/constants.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/constants.ts @@ -15,11 +15,6 @@ export const BRUSH_BORDER_INNER_COLOR = 'rgba(0,0,0,1)'; */ export const BRUSH_BORDER_OUTER_COLOR = 'rgba(255,255,255,0.8)'; -/** - * The border width for the brush preview. - */ -export const BRUSH_ERASER_BORDER_WIDTH = 1; - /** * The target spacing of individual points of brush strokes, as a percentage of the brush size. */ diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts index 702e42786b..425e7529ae 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts @@ -175,7 +175,7 @@ function selectAllEntitiesOfType(state: CanvasV2State, type: CanvasEntityState[' } } -export function selectAllEntities(state: CanvasV2State): CanvasEntityState[] { +function selectAllEntities(state: CanvasV2State): CanvasEntityState[] { // These are in the same order as they are displayed in the list! return [ ...state.inpaintMasks.entities.toReversed(), diff --git a/invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts b/invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts index faf12dd3f7..96d47395d6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts @@ -1,4 +1,5 @@ import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit'; +import { deepClone } from 'common/util/deepClone'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import type { CanvasV2State, @@ -8,7 +9,7 @@ import type { RegionalGuidanceIPAdapterConfig, RgbColor, } from 'features/controlLayers/store/types'; -import { getEntityIdentifier, imageDTOToImageWithDims } from 'features/controlLayers/store/types'; +import { getEntityIdentifier, imageDTOToImageWithDims, initialIPAdapter } from 'features/controlLayers/store/types'; import { zModelIdentifierField } from 'features/nodes/types/common'; import { isEqual, merge } from 'lodash-es'; import type { ImageDTO, IPAdapterModelConfig } from 'services/api/types'; @@ -134,13 +135,23 @@ export const regionsReducers = { } rg.autoNegative = !rg.autoNegative; }, - rgIPAdapterAdded: (state, action: PayloadAction<{ id: string; ipAdapter: RegionalGuidanceIPAdapterConfig }>) => { - const { id, ipAdapter } = action.payload; - const entity = selectRegionalGuidanceEntity(state, id); - if (!entity) { - return; - } - entity.ipAdapters.push(ipAdapter); + rgIPAdapterAdded: { + reducer: ( + state, + action: PayloadAction<{ id: string; ipAdapterId: string; overrides?: Partial }> + ) => { + const { id, overrides, ipAdapterId } = action.payload; + const entity = selectRegionalGuidanceEntity(state, id); + if (!entity) { + return; + } + const ipAdapter = { ...deepClone(initialIPAdapter), id: ipAdapterId }; + merge(ipAdapter, overrides); + entity.ipAdapters.push(ipAdapter); + }, + prepare: (payload: { id: string; overrides?: Partial }) => ({ + payload: { ...payload, ipAdapterId: getPrefixedId('regional_guidance_ip_adapter') }, + }), }, rgIPAdapterDeleted: (state, action: PayloadAction<{ id: string; ipAdapterId: string }>) => { const { id, ipAdapterId } = action.payload;