github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): output only masked regions was inverted

Browse Source
This commit is contained in:
psychedelicious
2024-09-14 17:29:58 +10:00
parent 00328f8bae
commit e4aecf5616
6 changed files with 47 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsCompositeMaskedRegionsCheckbox.tsx
View File

@@ -1,33 +0,0 @@
import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
selectCanvasSettingsSlice,
settingsCompositeMaskedRegionsChanged,
} from 'features/controlLayers/store/canvasSettingsSlice';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const selectCompositeMaskedRegions = createSelector(
selectCanvasSettingsSlice,
(canvasSettings) => canvasSettings.compositeMaskedRegions
);
export const CanvasSettingsCompositeMaskedRegionsCheckbox = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const compositeMaskedRegions = useAppSelector(selectCompositeMaskedRegions);
const onChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => dispatch(settingsCompositeMaskedRegionsChanged(e.target.checked)),
[dispatch]
);
return (
<FormControl w="full">
<FormLabel flexGrow={1}>{t('controlLayers.outputOnlyMaskedRegions')}</FormLabel>
<Checkbox isChecked={compositeMaskedRegions} onChange={onChange} />
</FormControl>
);
});
CanvasSettingsCompositeMaskedRegionsCheckbox.displayName = 'CanvasSettingsCompositeMaskedRegionsCheckbox';

25
invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsOutputOnlyMaskedRegionsCheckbox.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
selectOutputOnlyMaskedRegions,
settingsOutputOnlyMaskedRegionsToggled,
} from 'features/controlLayers/store/canvasSettingsSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
export const CanvasSettingsOutputOnlyMaskedRegionsCheckbox = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const outputOnlyMaskedRegions = useAppSelector(selectOutputOnlyMaskedRegions);
const onChange = useCallback(() => {
dispatch(settingsOutputOnlyMaskedRegionsToggled());
}, [dispatch]);
return (
<FormControl w="full">
<FormLabel flexGrow={1}>{t('controlLayers.outputOnlyMaskedRegions')}</FormLabel>
<Checkbox isChecked={outputOnlyMaskedRegions} onChange={onChange} />
</FormControl>
);
});
CanvasSettingsOutputOnlyMaskedRegionsCheckbox.displayName = 'CanvasSettingsOutputOnlyMaskedRegionsCheckbox';

4
invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
View File

@@ -14,11 +14,11 @@ import { CanvasSettingsBboxOverlaySwitch } from 'features/controlLayers/componen
import { CanvasSettingsClearCachesButton } from 'features/controlLayers/components/Settings/CanvasSettingsClearCachesButton';
import { CanvasSettingsClearHistoryButton } from 'features/controlLayers/components/Settings/CanvasSettingsClearHistoryButton';
import { CanvasSettingsClipToBboxCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsClipToBboxCheckbox';
import { CanvasSettingsCompositeMaskedRegionsCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsCompositeMaskedRegionsCheckbox';
import { CanvasSettingsDynamicGridSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsDynamicGridSwitch';
import { CanvasSettingsSnapToGridCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsGridSize';
import { CanvasSettingsInvertScrollCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsInvertScrollCheckbox';
import { CanvasSettingsLogDebugInfoButton } from 'features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo';
import { CanvasSettingsOutputOnlyMaskedRegionsCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsOutputOnlyMaskedRegionsCheckbox';
import { CanvasSettingsPreserveMaskCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsPreserveMaskCheckbox';
import { CanvasSettingsRecalculateRectsButton } from 'features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton';
import { CanvasSettingsShowHUDSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch';
@@ -42,7 +42,7 @@ export const CanvasSettingsPopover = memo(() => {
<CanvasSettingsInvertScrollCheckbox />
<CanvasSettingsPreserveMaskCheckbox />
<CanvasSettingsClipToBboxCheckbox />
<CanvasSettingsCompositeMaskedRegionsCheckbox />
<CanvasSettingsOutputOnlyMaskedRegionsCheckbox />
<CanvasSettingsSnapToGridCheckbox />
<CanvasSettingsShowProgressOnCanvas />
<CanvasSettingsDynamicGridSwitch />

13
invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts
View File

@@ -51,7 +51,7 @@ type CanvasSettingsState = {
*
* When `sendToCanvas` is disabled, this setting is ignored, masked regions will always be composited.
*/
compositeMaskedRegions: boolean;
outputOnlyMaskedRegions: boolean;
/**
* Whether to automatically process the filter when the filter configuration changes.
*/
@@ -88,7 +88,7 @@ const initialState: CanvasSettingsState = {
invertScrollForToolWidth: false,
color: { r: 31, g: 160, b: 224, a: 1 }, // invokeBlue.500
sendToCanvas: false,
compositeMaskedRegions: false,
outputOnlyMaskedRegions: false,
autoProcessFilter: true,
snapToGrid: true,
showProgressOnCanvas: true,
@@ -127,8 +127,8 @@ export const canvasSettingsSlice = createSlice({
settingsSendToCanvasChanged: (state, action: PayloadAction<boolean>) => {
state.sendToCanvas = action.payload;
},
settingsCompositeMaskedRegionsChanged: (state, action: PayloadAction<boolean>) => {
state.compositeMaskedRegions = action.payload;
settingsOutputOnlyMaskedRegionsToggled: (state) => {
state.outputOnlyMaskedRegions = !state.outputOnlyMaskedRegions;
},
settingsAutoProcessFilterToggled: (state) => {
state.autoProcessFilter = !state.autoProcessFilter;
@@ -158,7 +158,7 @@ export const {
settingsColorChanged,
settingsInvertScrollForToolWidthChanged,
settingsSendToCanvasChanged,
settingsCompositeMaskedRegionsChanged,
settingsOutputOnlyMaskedRegionsToggled,
settingsAutoProcessFilterToggled,
settingsSnapToGridToggled,
settingsShowProgressOnCanvasToggled,
@@ -184,6 +184,9 @@ const createCanvasSettingsSelector = <T>(selector: Selector<CanvasSettingsState,
export const selectAutoSave = createCanvasSettingsSelector((settings) => settings.autoSave);
export const selectPreserveMask = createCanvasSettingsSelector((settings) => settings.preserveMask);
export const selectOutputOnlyMaskedRegions = createCanvasSettingsSelector(
(settings) => settings.outputOnlyMaskedRegions
);
export const selectDynamicGrid = createCanvasSettingsSelector((settings) => settings.dynamicGrid);
export const selectBboxOverlay = createCanvasSettingsSelector((settings) => settings.bboxOverlay);
export const selectShowHUD = createCanvasSettingsSelector((settings) => settings.showHUD);

8
invokeai/frontend/web/src/features/nodes/util/graph/generation/addInpaint.ts
View File

@@ -98,7 +98,9 @@ export const addInpaint = async (
g.addEdge(resizeImageToOriginalSize, 'image', canvasPasteBack, 'generated_image');
g.addEdge(resizeMaskToOriginalSize, 'image', canvasPasteBack, 'mask');
if (!canvasSettings.sendToCanvas || canvasSettings.compositeMaskedRegions) {
// Do the paste back if we are sending to gallery (in which case we want to see the full image), or if we are sending
// to canvas but not outputting only masked regions
if (!canvasSettings.sendToCanvas || !canvasSettings.outputOnlyMaskedRegions) {
canvasPasteBack.source_image = { image_name: initialImage.image_name };
}
@@ -142,7 +144,9 @@ export const addInpaint = async (
g.addEdge(l2i, 'image', canvasPasteBack, 'generated_image');
if (!canvasSettings.sendToCanvas || canvasSettings.compositeMaskedRegions) {
// Do the paste back if we are sending to gallery (in which case we want to see the full image), or if we are sending
// to canvas but not outputting only masked regions
if (!canvasSettings.sendToCanvas || !canvasSettings.outputOnlyMaskedRegions) {
canvasPasteBack.source_image = { image_name: initialImage.image_name };
}

8
invokeai/frontend/web/src/features/nodes/util/graph/generation/addOutpaint.ts
View File

@@ -122,7 +122,9 @@ export const addOutpaint = async (
g.addEdge(resizeOutputImageToOriginalSize, 'image', canvasPasteBack, 'generated_image');
g.addEdge(resizeOutputMaskToOriginalSize, 'image', canvasPasteBack, 'mask');
if (!canvasSettings.sendToCanvas || canvasSettings.compositeMaskedRegions) {
// Do the paste back if we are sending to gallery (in which case we want to see the full image), or if we are sending
// to canvas but not outputting only masked regions
if (!canvasSettings.sendToCanvas || !canvasSettings.outputOnlyMaskedRegions) {
canvasPasteBack.source_image = { image_name: initialImage.image_name };
}
@@ -172,7 +174,9 @@ export const addOutpaint = async (
g.addEdge(createGradientMask, 'expanded_mask_area', canvasPasteBack, 'mask');
g.addEdge(l2i, 'image', canvasPasteBack, 'generated_image');
if (!canvasSettings.sendToCanvas || canvasSettings.compositeMaskedRegions) {
// Do the paste back if we are sending to gallery (in which case we want to see the full image), or if we are sending
// to canvas but not outputting only masked regions
if (!canvasSettings.sendToCanvas || !canvasSettings.outputOnlyMaskedRegions) {
canvasPasteBack.source_image = { image_name: initialImage.image_name };
}