fix(ui): ref image defaults to prev ref image's image selection

A redux selector is used to get the "default" IP Adapter. The selector uses the model list query result to select an IP Adapter model to be preset by default.

The selector is memoized, so if we mutate the returned default IP Adapter state, it mutates the result of the selector for all consumers.

For example, the `image` property of the default IP Adapter selector result is `null`. When we set the `image` property of the selector result while creating an IP Adapter, this does not trigger the selector to recompute its result. We end up setting the image for the selector result directly, and all other consumers now have that same image set.

Solution - we need to clone the selector result everywhere it is used. This was missed in a few spots, causing the issue.

invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts

@@ -29,7 +29,13 @@ import { modelConfigsAdapterSelectors, selectModelConfigsQuery } from 'services/
 import type { ControlNetModelConfig, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
 import { isControlNetOrT2IAdapterModelConfig, isIPAdapterModelConfig } from 'services/api/types';
 
-/** @knipignore */
+/**
+ * Selects the default control adapter configuration based on the model configurations and the base.
+ *
+ * Be sure to clone the output of this selector before modifying it!
+ *
+ * @knipignore
+ */
 export const selectDefaultControlAdapter = createSelector(
   selectModelConfigsQuery,
   selectBase,
@@ -52,6 +58,11 @@ export const selectDefaultControlAdapter = createSelector(
   }
 );
 
+/**
+ * Selects the default IP adapter configuration based on the model configurations and the base.
+ *
+ * Be sure to clone the output of this selector before modifying it!
+ */
 export const selectDefaultIPAdapter = createSelector(
   selectModelConfigsQuery,
   selectBase,
@@ -117,7 +128,9 @@ export const useAddRegionalReferenceImage = () => {
 
   const func = useCallback(() => {
     const overrides: Partial<CanvasRegionalGuidanceState> = {
-      referenceImages: [{ id: getPrefixedId('regional_guidance_reference_image'), ipAdapter: defaultIPAdapter }],
+      referenceImages: [
+        { id: getPrefixedId('regional_guidance_reference_image'), ipAdapter: deepClone(defaultIPAdapter) },
+      ],
     };
     dispatch(rgAdded({ isSelected: true, overrides }));
   }, [defaultIPAdapter, dispatch]);
@@ -129,7 +142,7 @@ export const useAddGlobalReferenceImage = () => {
   const dispatch = useAppDispatch();
   const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
   const func = useCallback(() => {
-    const overrides = { ipAdapter: defaultIPAdapter };
+    const overrides = { ipAdapter: deepClone(defaultIPAdapter) };
     dispatch(referenceImageAdded({ isSelected: true, overrides }));
   }, [defaultIPAdapter, dispatch]);
 
@@ -140,7 +153,7 @@ export const useAddRegionalGuidanceIPAdapter = (entityIdentifier: CanvasEntityId
   const dispatch = useAppDispatch();
   const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
   const func = useCallback(() => {
-    dispatch(rgIPAdapterAdded({ entityIdentifier, overrides: { ipAdapter: defaultIPAdapter } }));
+    dispatch(rgIPAdapterAdded({ entityIdentifier, overrides: { ipAdapter: deepClone(defaultIPAdapter) } }));
   }, [defaultIPAdapter, dispatch, entityIdentifier]);
 
   return func;

invokeai/frontend/web/src/features/imageActions/actions.ts

@@ -169,13 +169,13 @@ export const createNewCanvasEntityFromImage = (arg: {
       break;
     }
     case 'reference_image': {
-      const ipAdapter = selectDefaultIPAdapter(getState());
+      const ipAdapter = deepClone(selectDefaultIPAdapter(getState()));
       ipAdapter.image = imageDTOToImageWithDims(imageDTO);
       dispatch(referenceImageAdded({ overrides: { ipAdapter }, isSelected: true }));
       break;
     }
     case 'regional_guidance_with_reference_image': {
-      const ipAdapter = selectDefaultIPAdapter(getState());
+      const ipAdapter = deepClone(selectDefaultIPAdapter(getState()));
       ipAdapter.image = imageDTOToImageWithDims(imageDTO);
       const referenceImages = [{ id: getPrefixedId('regional_guidance_reference_image'), ipAdapter }];
       dispatch(rgAdded({ overrides: { referenceImages }, isSelected: true }));
@@ -291,14 +291,14 @@ export const newCanvasFromImage = (arg: {
       break;
     }
     case 'reference_image': {
-      const ipAdapter = selectDefaultIPAdapter(getState());
+      const ipAdapter = deepClone(selectDefaultIPAdapter(getState()));
       ipAdapter.image = imageDTOToImageWithDims(imageDTO);
       dispatch(canvasReset());
       dispatch(referenceImageAdded({ overrides: { ipAdapter }, isSelected: true }));
       break;
     }
     case 'regional_guidance_with_reference_image': {
-      const ipAdapter = selectDefaultIPAdapter(getState());
+      const ipAdapter = deepClone(selectDefaultIPAdapter(getState()));
       ipAdapter.image = imageDTOToImageWithDims(imageDTO);
       const referenceImages = [{ id: getPrefixedId('regional_guidance_reference_image'), ipAdapter }];
       dispatch(canvasReset());