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

feat(ui): revised icons/names for canvas context menu

Browse Source
This commit is contained in:
psychedelicious
2024-09-14 17:42:06 +10:00
parent e4aecf5616
commit 2241d115c3
4 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/public/locales/en.json
View File

@@ -1670,10 +1670,10 @@
"removeBookmark": "Remove Bookmark",
"saveCanvasToGallery": "Save Canvas to Gallery",
"saveBboxToGallery": "Save Bbox to Gallery",
"sendBboxToRegionalIPAdapter": "Send Bbox to Regional IP Adapter",
"sendBboxToGlobalIPAdapter": "Send Bbox to Global IP Adapter",
"sendBboxToControlLayer": "Send Bbox to Control Layer",
"sendBboxToRasterLayer": "Send Bbox to Raster Layer",
"newRegionalIPAdapterFromBbox": "New Regional IP Adapter from Bbox",
"newGlobalIPAdapterFromBbox": "New Global IP Adapter from Bbox",
"newControlLayerFromBbox": "New Control Layer from Bbox",
"newRasterLayerFromBbox": "New Raster Layer from Bbox",
"savedToGalleryOk": "Saved to Gallery",
"savedToGalleryError": "Error saving to gallery",
"regionIsEmpty": "Selected region is empty",

34
invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems.tsx
View File

@@ -1,26 +1,26 @@
import { MenuGroup, MenuItem } from '@invoke-ai/ui-library';
import {
useSaveBboxAsControlLayer,
useSaveBboxAsGlobalIPAdapter,
useSaveBboxAsRasterLayer,
useSaveBboxAsRegionalGuidanceIPAdapter,
useNewControlLayerFromBbox,
useNewGlobalIPAdapterFromBbox,
useNewRasterLayerFromBbox,
useNewRegionalIPAdapterFromBbox,
useSaveBboxToGallery,
useSaveCanvasToGallery,
} from 'features/controlLayers/hooks/saveCanvasHooks';
import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiFloppyDiskBold, PiShareFatBold } from 'react-icons/pi';
import { PiFloppyDiskBold, PiStackPlusFill } from 'react-icons/pi';
export const CanvasContextMenuGlobalMenuItems = memo(() => {
const { t } = useTranslation();
const isBusy = useCanvasIsBusy();
const saveCanvasToGallery = useSaveCanvasToGallery();
const saveBboxToGallery = useSaveBboxToGallery();
const saveBboxAsRegionalGuidanceIPAdapter = useSaveBboxAsRegionalGuidanceIPAdapter();
const saveBboxAsIPAdapter = useSaveBboxAsGlobalIPAdapter();
const saveBboxAsRasterLayer = useSaveBboxAsRasterLayer();
const saveBboxAsControlLayer = useSaveBboxAsControlLayer();
const saveBboxAsRegionalGuidanceIPAdapter = useNewRegionalIPAdapterFromBbox();
const saveBboxAsIPAdapter = useNewGlobalIPAdapterFromBbox();
const saveBboxAsRasterLayer = useNewRasterLayerFromBbox();
const saveBboxAsControlLayer = useNewControlLayerFromBbox();
return (
<MenuGroup title={t('controlLayers.canvas')}>
@@ -30,17 +30,17 @@ export const CanvasContextMenuGlobalMenuItems = memo(() => {
<MenuItem icon={<PiFloppyDiskBold />} isDisabled={isBusy} onClick={saveBboxToGallery}>
{t('controlLayers.saveBboxToGallery')}
</MenuItem>
<MenuItem icon={<PiShareFatBold />} isDisabled={isBusy} onClick={saveBboxAsIPAdapter}>
{t('controlLayers.sendBboxToGlobalIPAdapter')}
<MenuItem icon={<PiStackPlusFill />} isDisabled={isBusy} onClick={saveBboxAsIPAdapter}>
{t('controlLayers.newGlobalIPAdapterFromBbox')}
</MenuItem>
<MenuItem icon={<PiShareFatBold />} isDisabled={isBusy} onClick={saveBboxAsRegionalGuidanceIPAdapter}>
{t('controlLayers.sendBboxToRegionalIPAdapter')}
<MenuItem icon={<PiStackPlusFill />} isDisabled={isBusy} onClick={saveBboxAsRegionalGuidanceIPAdapter}>
{t('controlLayers.newRegionalIPAdapterFromBbox')}
</MenuItem>
<MenuItem icon={<PiShareFatBold />} isDisabled={isBusy} onClick={saveBboxAsControlLayer}>
{t('controlLayers.sendBboxToControlLayer')}
<MenuItem icon={<PiStackPlusFill />} isDisabled={isBusy} onClick={saveBboxAsControlLayer}>
{t('controlLayers.newControlLayerFromBbox')}
</MenuItem>
<MenuItem icon={<PiShareFatBold />} isDisabled={isBusy} onClick={saveBboxAsRasterLayer}>
{t('controlLayers.sendBboxToRasterLayer')}
<MenuItem icon={<PiStackPlusFill />} isDisabled={isBusy} onClick={saveBboxAsRasterLayer}>
{t('controlLayers.newRasterLayerFromBbox')}
</MenuItem>
</MenuGroup>
);

48
invokeai/frontend/web/src/features/controlLayers/hooks/saveCanvasHooks.ts
View File

@@ -73,23 +73,23 @@ const useSaveCanvas = ({ region, saveToGallery, onSave }: UseSaveCanvasArg) => {
return saveCanvas;
};
const saveCanvasToGalleryArg: UseSaveCanvasArg = { region: 'canvas', saveToGallery: true };
export const useSaveCanvasToGallery = () => {
const saveCanvasToGalleryArg = useMemo<UseSaveCanvasArg>(() => ({ region: 'canvas', saveToGallery: true }), []);
const saveCanvasToGallery = useSaveCanvas(saveCanvasToGalleryArg);
return saveCanvasToGallery;
};
const saveBboxToGalleryArg: UseSaveCanvasArg = { region: 'bbox', saveToGallery: true };
export const useSaveBboxToGallery = () => {
const saveBboxToGalleryArg = useMemo<UseSaveCanvasArg>(() => ({ region: 'bbox', saveToGallery: true }), []);
const saveBboxToGallery = useSaveCanvas(saveBboxToGalleryArg);
return saveBboxToGallery;
};
export const useSaveBboxAsRegionalGuidanceIPAdapter = () => {
export const useNewRegionalIPAdapterFromBbox = () => {
const dispatch = useAppDispatch();
const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
const saveBboxAsRegionalGuidanceIPAdapterArg = useMemo<UseSaveCanvasArg>(() => {
const arg = useMemo<UseSaveCanvasArg>(() => {
const onSave = (imageDTO: ImageDTO) => {
const ipAdapter: RegionalGuidanceIPAdapterConfig = {
...defaultIPAdapter,
@@ -105,15 +105,15 @@ export const useSaveBboxAsRegionalGuidanceIPAdapter = () => {
return { region: 'bbox', saveToGallery: false, onSave };
}, [defaultIPAdapter, dispatch]);
const saveBboxAsRegionalGuidanceIPAdapter = useSaveCanvas(saveBboxAsRegionalGuidanceIPAdapterArg);
return saveBboxAsRegionalGuidanceIPAdapter;
const newRegionalIPAdapterFromBbox = useSaveCanvas(arg);
return newRegionalIPAdapterFromBbox;
};
export const useSaveBboxAsGlobalIPAdapter = () => {
export const useNewGlobalIPAdapterFromBbox = () => {
const dispatch = useAppDispatch();
const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
const saveBboxAsIPAdapterArg = useMemo<UseSaveCanvasArg>(() => {
const arg = useMemo<UseSaveCanvasArg>(() => {
const onSave = (imageDTO: ImageDTO) => {
const overrides: Partial<CanvasIPAdapterState> = {
ipAdapter: {
@@ -126,13 +126,13 @@ export const useSaveBboxAsGlobalIPAdapter = () => {
return { region: 'bbox', saveToGallery: false, onSave };
}, [defaultIPAdapter, dispatch]);
const saveBboxAsIPAdapter = useSaveCanvas(saveBboxAsIPAdapterArg);
return saveBboxAsIPAdapter;
const newGlobalIPAdapterFromBbox = useSaveCanvas(arg);
return newGlobalIPAdapterFromBbox;
};
export const useSaveBboxAsRasterLayer = () => {
export const useNewRasterLayerFromBbox = () => {
const dispatch = useAppDispatch();
const saveBboxAsRasterLayerArg = useMemo<UseSaveCanvasArg>(() => {
const arg = useMemo<UseSaveCanvasArg>(() => {
const onSave = (imageDTO: ImageDTO, rect: Rect) => {
const overrides: Partial<CanvasRasterLayerState> = {
objects: [imageDTOToImageObject(imageDTO)],
@@ -143,15 +143,15 @@ export const useSaveBboxAsRasterLayer = () => {
return { region: 'bbox', saveToGallery: false, onSave };
}, [dispatch]);
const saveBboxAsRasterLayer = useSaveCanvas(saveBboxAsRasterLayerArg);
return saveBboxAsRasterLayer;
const newRasterLayerFromBbox = useSaveCanvas(arg);
return newRasterLayerFromBbox;
};
export const useSaveBboxAsControlLayer = () => {
export const useNewControlLayerFromBbox = () => {
const dispatch = useAppDispatch();
const defaultControlAdapter = useAppSelector(selectDefaultControlAdapter);
const saveBboxAsControlLayerArg = useMemo<UseSaveCanvasArg>(() => {
const arg = useMemo<UseSaveCanvasArg>(() => {
const onSave = (imageDTO: ImageDTO, rect: Rect) => {
const overrides: Partial<CanvasControlLayerState> = {
objects: [imageDTOToImageObject(imageDTO)],
@@ -163,14 +163,14 @@ export const useSaveBboxAsControlLayer = () => {
return { region: 'bbox', saveToGallery: false, onSave };
}, [defaultControlAdapter, dispatch]);
const saveBboxAsControlLayer = useSaveCanvas(saveBboxAsControlLayerArg);
return saveBboxAsControlLayer;
const newControlLayerFromBbox = useSaveCanvas(arg);
return newControlLayerFromBbox;
};
export const usePullBboxIntoLayer = (entityIdentifier: CanvasEntityIdentifier<'control_layer' | 'raster_layer'>) => {
const dispatch = useAppDispatch();
const pullBboxIntoLayerArg = useMemo<UseSaveCanvasArg>(() => {
const arg = useMemo<UseSaveCanvasArg>(() => {
const onSave = (imageDTO: ImageDTO, rect: Rect) => {
dispatch(
entityRasterized({
@@ -185,14 +185,14 @@ export const usePullBboxIntoLayer = (entityIdentifier: CanvasEntityIdentifier<'c
return { region: 'bbox', saveToGallery: false, onSave };
}, [dispatch, entityIdentifier]);
const pullBboxIntoLayer = useSaveCanvas(pullBboxIntoLayerArg);
const pullBboxIntoLayer = useSaveCanvas(arg);
return pullBboxIntoLayer;
};
export const usePullBboxIntoIPAdapter = (entityIdentifier: CanvasEntityIdentifier<'ip_adapter'>) => {
const dispatch = useAppDispatch();
const pullBboxIntoIPAdapterArg = useMemo<UseSaveCanvasArg>(() => {
const arg = useMemo<UseSaveCanvasArg>(() => {
const onSave = (imageDTO: ImageDTO, _: Rect) => {
dispatch(ipaImageChanged({ entityIdentifier, imageDTO }));
};
@@ -200,7 +200,7 @@ export const usePullBboxIntoIPAdapter = (entityIdentifier: CanvasEntityIdentifie
return { region: 'bbox', saveToGallery: false, onSave };
}, [dispatch, entityIdentifier]);
const pullBboxIntoIPAdapter = useSaveCanvas(pullBboxIntoIPAdapterArg);
const pullBboxIntoIPAdapter = useSaveCanvas(arg);
return pullBboxIntoIPAdapter;
};
@@ -210,7 +210,7 @@ export const usePullBboxIntoRegionalGuidanceIPAdapter = (
) => {
const dispatch = useAppDispatch();
const pullBboxIntoRegionalGuidanceIPAdapterArg = useMemo<UseSaveCanvasArg>(() => {
const arg = useMemo<UseSaveCanvasArg>(() => {
const onSave = (imageDTO: ImageDTO, _: Rect) => {
dispatch(rgIPAdapterImageChanged({ entityIdentifier, ipAdapterId, imageDTO }));
};
@@ -218,6 +218,6 @@ export const usePullBboxIntoRegionalGuidanceIPAdapter = (
return { region: 'bbox', saveToGallery: false, onSave };
}, [dispatch, entityIdentifier, ipAdapterId]);
const pullBboxIntoRegionalGuidanceIPAdapter = useSaveCanvas(pullBboxIntoRegionalGuidanceIPAdapterArg);
const pullBboxIntoRegionalGuidanceIPAdapter = useSaveCanvas(arg);
return pullBboxIntoRegionalGuidanceIPAdapter;
};

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

@@ -72,10 +72,6 @@ type CanvasSettingsState = {
* Whether to preserve the masked region instead of inpainting it.
*/
preserveMask: boolean;
// TODO(psyche): These are copied from old canvas state, need to be implemented
// imageSmoothing: boolean;
// preserveMaskedArea: boolean;
// cropToBboxOnSave: boolean;
};
const initialState: CanvasSettingsState = {