github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-16 07:35:24 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): switch to view tool when staging

Browse Source
This commit is contained in:
psychedelicious
2024-06-28 19:39:04 +10:00
parent f5474f18d6
commit 8a0f723b28
6 changed files with 108 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx
View File

@@ -43,6 +43,7 @@ export const ToolChooser: React.FC = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
const isStaging = useAppSelector((s) => s.canvasV2.stagingArea !== null);
const isDrawingToolDisabled = useMemo(
() => !getIsDrawingToolEnabled(selectedEntityIdentifier),
[selectedEntityIdentifier]
@@ -53,19 +54,35 @@ export const ToolChooser: React.FC = () => {
const setToolToBrush = useCallback(() => {
dispatch(toolChanged('brush'));
}, [dispatch]);
useHotkeys('b', setToolToBrush, { enabled: !isDrawingToolDisabled }, [isDrawingToolDisabled, setToolToBrush]);
useHotkeys('b', setToolToBrush, { enabled: !isDrawingToolDisabled && !isStaging }, [
isDrawingToolDisabled,
isStaging,
setToolToBrush,
]);
const setToolToEraser = useCallback(() => {
dispatch(toolChanged('eraser'));
}, [dispatch]);
useHotkeys('e', setToolToEraser, { enabled: !isDrawingToolDisabled }, [isDrawingToolDisabled, setToolToEraser]);
useHotkeys('e', setToolToEraser, { enabled: !isDrawingToolDisabled && !isStaging }, [
isDrawingToolDisabled,
isStaging,
setToolToEraser,
]);
const setToolToRect = useCallback(() => {
dispatch(toolChanged('rect'));
}, [dispatch]);
useHotkeys('u', setToolToRect, { enabled: !isDrawingToolDisabled }, [isDrawingToolDisabled, setToolToRect]);
useHotkeys('u', setToolToRect, { enabled: !isDrawingToolDisabled && !isStaging }, [
isDrawingToolDisabled,
isStaging,
setToolToRect,
]);
const setToolToMove = useCallback(() => {
dispatch(toolChanged('move'));
}, [dispatch]);
useHotkeys('v', setToolToMove, { enabled: !isMoveToolDisabled }, [isMoveToolDisabled, setToolToMove]);
useHotkeys('v', setToolToMove, { enabled: !isMoveToolDisabled && !isStaging }, [
isMoveToolDisabled,
isStaging,
setToolToMove,
]);
const setToolToView = useCallback(() => {
dispatch(toolChanged('view'));
}, [dispatch]);
@@ -92,12 +109,16 @@ export const ToolChooser: React.FC = () => {
}, [dispatch, selectedEntityIdentifier]);
const isResetEnabled = useMemo(
() =>
selectedEntityIdentifier?.type === 'layer' ||
(!isStaging && selectedEntityIdentifier?.type === 'layer') ||
selectedEntityIdentifier?.type === 'regional_guidance' ||
selectedEntityIdentifier?.type === 'inpaint_mask',
[selectedEntityIdentifier]
[isStaging, selectedEntityIdentifier?.type]
);
useHotkeys('shift+c', resetSelectedLayer, { enabled: isResetEnabled }, [isResetEnabled, resetSelectedLayer]);
useHotkeys('shift+c', resetSelectedLayer, { enabled: isResetEnabled }, [
isResetEnabled,
isStaging,
resetSelectedLayer,
]);
const deleteSelectedLayer = useCallback(() => {
if (selectedEntityIdentifier === null) {
@@ -117,7 +138,10 @@ export const ToolChooser: React.FC = () => {
dispatch(ipaDeleted({ id }));
}
}, [dispatch, selectedEntityIdentifier]);
const isDeleteEnabled = useMemo(() => selectedEntityIdentifier !== null, [selectedEntityIdentifier]);
const isDeleteEnabled = useMemo(
() => selectedEntityIdentifier !== null && !isStaging,
[selectedEntityIdentifier, isStaging]
);
useHotkeys('shift+d', deleteSelectedLayer, { enabled: isDeleteEnabled }, [isDeleteEnabled, deleteSelectedLayer]);
return (
@@ -128,7 +152,7 @@ export const ToolChooser: React.FC = () => {
icon={<PiPaintBrushBold />}
variant={tool === 'brush' ? 'solid' : 'outline'}
onClick={setToolToBrush}
isDisabled={isDrawingToolDisabled}
isDisabled={isDrawingToolDisabled || isStaging}
/>
<IconButton
aria-label={`${t('unifiedCanvas.eraser')} (E)`}
@@ -136,7 +160,7 @@ export const ToolChooser: React.FC = () => {
icon={<PiEraserBold />}
variant={tool === 'eraser' ? 'solid' : 'outline'}
onClick={setToolToEraser}
isDisabled={isDrawingToolDisabled}
isDisabled={isDrawingToolDisabled || isStaging}
/>
<IconButton
aria-label={`${t('controlLayers.rectangle')} (U)`}
@@ -144,7 +168,7 @@ export const ToolChooser: React.FC = () => {
icon={<PiRectangleBold />}
variant={tool === 'rect' ? 'solid' : 'outline'}
onClick={setToolToRect}
isDisabled={isDrawingToolDisabled}
isDisabled={isDrawingToolDisabled || isStaging}
/>
<IconButton
aria-label={`${t('unifiedCanvas.move')} (V)`}
@@ -152,7 +176,7 @@ export const ToolChooser: React.FC = () => {
icon={<PiArrowsOutCardinalBold />}
variant={tool === 'move' ? 'solid' : 'outline'}
onClick={setToolToMove}
isDisabled={isMoveToolDisabled}
isDisabled={isMoveToolDisabled || isStaging}
/>
<IconButton
aria-label={`${t('unifiedCanvas.view')} (H)`}
@@ -160,6 +184,7 @@ export const ToolChooser: React.FC = () => {
icon={<PiHandBold />}
variant={tool === 'view' ? 'solid' : 'outline'}
onClick={setToolToView}
isDisabled={isStaging}
/>
<IconButton
aria-label={`${t('controlLayers.bbox')} (Q)`}
@@ -167,6 +192,7 @@ export const ToolChooser: React.FC = () => {
icon={<PiBoundingBoxBold />}
variant={tool === 'bbox' ? 'solid' : 'outline'}
onClick={setToolToBbox}
isDisabled={isStaging}
/>
</ButtonGroup>
);

2
invokeai/frontend/web/src/features/controlLayers/konva/events.ts
View File

@@ -128,8 +128,6 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
//#region mouseenter
stage.on('mouseenter', () => {
const tool = getToolState().selected;
stage.findOne<Konva.Layer>(`#${PREVIEW_TOOL_GROUP_ID}`)?.visible(tool === 'brush' || tool === 'eraser');
manager.renderToolPreview();
});

7
invokeai/frontend/web/src/features/controlLayers/konva/renderers/renderer.ts
View File

@@ -446,7 +446,12 @@ export const initializeRenderer = (
const unsubscribeRenderer = subscribe(renderCanvas);
// When we this flag, we need to render the staging area
$shouldShowStagedImage.subscribe(manager.renderStagingArea.bind(manager));
$shouldShowStagedImage.subscribe((shouldShowStagedImage, prevShouldShowStagedImage) => {
logIfDebugging('Rendering staging area');
if (shouldShowStagedImage !== prevShouldShowStagedImage) {
manager.renderStagingArea();
}
});
logIfDebugging('First render of konva stage');
// On first render, the document should be fit to the stage.

6
invokeai/frontend/web/src/features/controlLayers/konva/renderers/tool.ts
View File

@@ -2,13 +2,12 @@ import { rgbaColorToString } from 'common/util/colorCodeTransformers';
import {
BRUSH_BORDER_INNER_COLOR,
BRUSH_BORDER_OUTER_COLOR,
BRUSH_ERASER_BORDER_WIDTH
BRUSH_ERASER_BORDER_WIDTH,
} from 'features/controlLayers/konva/constants';
import { PREVIEW_RECT_ID } from 'features/controlLayers/konva/naming';
import type { CanvasEntity, CanvasV2State, Position, RgbaColor } from 'features/controlLayers/store/types';
import Konva from 'konva';
export class CanvasTool {
group: Konva.Group;
brush: {
@@ -125,7 +124,8 @@ export class CanvasTool {
isMouseDown: boolean
) {
const tool = toolState.selected;
const isDrawableEntity = selectedEntity?.type === 'regional_guidance' ||
const isDrawableEntity =
selectedEntity?.type === 'regional_guidance' ||
selectedEntity?.type === 'layer' ||
selectedEntity?.type === 'inpaint_mask';

17
invokeai/frontend/web/src/features/controlLayers/store/stagingAreaReducers.ts
View File

@@ -11,6 +11,10 @@ export const stagingAreaReducers = {
selectedImageIndex: null,
images: [],
};
// When we start staging, the user should not be interacting with the stage except to move it around. Set the tool
// to view.
state.tool.selectedBuffer = state.tool.selected;
state.tool.selected = 'view';
},
stagingAreaImageAdded: (state, action: PayloadAction<{ imageDTO: ImageDTO }>) => {
const { imageDTO } = action.payload;
@@ -66,8 +70,19 @@ export const stagingAreaReducers = {
}
state.stagingArea.images = state.stagingArea.images.filter((image) => image.image_name !== imageDTO.image_name);
},
stagingAreaImageAccepted: (state, _: PayloadAction<{ imageDTO: ImageDTO }>) => state,
stagingAreaImageAccepted: (state, _: PayloadAction<{ imageDTO: ImageDTO }>) => {
// When we finish staging, reset the tool back to the previous selection.
if (state.tool.selectedBuffer) {
state.tool.selected = state.tool.selectedBuffer;
state.tool.selectedBuffer = null;
}
},
stagingAreaReset: (state) => {
state.stagingArea = null;
// When we finish staging, reset the tool back to the previous selection.
if (state.tool.selectedBuffer) {
state.tool.selected = state.tool.selectedBuffer;
state.tool.selectedBuffer = null;
}
},
} satisfies SliceCaseReducers<CanvasV2State>;