Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): do not attempt drawing when invalid layer type selected

Browse Source
This commit is contained in:
psychedelicious 2024-05-03 08:41:03 +10:00 committed by Kent Keirsey
parent 94a73d5377
commit 5734a97c55
1 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
View File

@ -49,6 +49,13 @@ const BRUSH_SPACING = 20;
export const useMouseEvents = () => { export const useMouseEvents = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selectedLayerId = useAppSelector((s) => s.controlLayers.present.selectedLayerId); const selectedLayerId = useAppSelector((s) => s.controlLayers.present.selectedLayerId);
const selectedLayerType = useAppSelector((s) => {
const selectedLayer = s.controlLayers.present.layers.find((l) => l.id === s.controlLayers.present.selectedLayerId);
if (!selectedLayer) {
return null;
}
return selectedLayer.type;
});
const tool = useStore($tool); const tool = useStore($tool);
const lastCursorPosRef = useRef<[number, number] | null>(null); const lastCursorPosRef = useRef<[number, number] | null>(null);
const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection); const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection);
@ -61,13 +68,10 @@ export const useMouseEvents = () => {
return; return;
} }
const pos = syncCursorPos(stage); const pos = syncCursorPos(stage);
if (!pos) { if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') {
return; return;
} }
$lastMouseDownPos.set(pos); $lastMouseDownPos.set(pos);
if (!selectedLayerId) {
return;
}
if (tool === 'brush' || tool === 'eraser') { if (tool === 'brush' || tool === 'eraser') {
dispatch( dispatch(
rgLayerLineAdded({ rgLayerLineAdded({
@ -79,7 +83,7 @@ export const useMouseEvents = () => {
$isDrawing.set(true); $isDrawing.set(true);
} }
}, },
[dispatch, selectedLayerId, tool] [dispatch, selectedLayerId, selectedLayerType, tool]
); );
const onMouseUp = useCallback( const onMouseUp = useCallback(
@ -89,9 +93,12 @@ export const useMouseEvents = () => {
return; return;
} }
const pos = $cursorPosition.get(); const pos = $cursorPosition.get();
if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') {
return;
}
const lastPos = $lastMouseDownPos.get(); const lastPos = $lastMouseDownPos.get();
const tool = $tool.get(); const tool = $tool.get();
if (pos && lastPos && selectedLayerId && tool === 'rect') { if (lastPos && selectedLayerId && tool === 'rect') {
dispatch( dispatch(
rgLayerRectAdded({ rgLayerRectAdded({
layerId: selectedLayerId, layerId: selectedLayerId,
@ -107,7 +114,7 @@ export const useMouseEvents = () => {
$isDrawing.set(false); $isDrawing.set(false);
$lastMouseDownPos.set(null); $lastMouseDownPos.set(null);
}, },
[dispatch, selectedLayerId] [dispatch, selectedLayerId, selectedLayerType]
); );
const onMouseMove = useCallback( const onMouseMove = useCallback(
@ -117,7 +124,7 @@ export const useMouseEvents = () => {
return; return;
} }
const pos = syncCursorPos(stage); const pos = syncCursorPos(stage);
if (!pos || !selectedLayerId) { if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') {
return; return;
} }
if (getIsFocused(stage) && getIsMouseDown(e) && (tool === 'brush' || tool === 'eraser')) { if (getIsFocused(stage) && getIsMouseDown(e) && (tool === 'brush' || tool === 'eraser')) {
@ -138,7 +145,7 @@ export const useMouseEvents = () => {
$isDrawing.set(true); $isDrawing.set(true);
} }
}, },
[dispatch, selectedLayerId, tool] [dispatch, selectedLayerId, selectedLayerType, tool]
); );
const onMouseLeave = useCallback( const onMouseLeave = useCallback(
@ -148,25 +155,25 @@ export const useMouseEvents = () => {
return; return;
} }
const pos = syncCursorPos(stage); const pos = syncCursorPos(stage);
if ( if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') {
pos && return;
selectedLayerId && }
getIsFocused(stage) && if (getIsFocused(stage) && getIsMouseDown(e) && (tool === 'brush' || tool === 'eraser')) {
getIsMouseDown(e) &&
(tool === 'brush' || tool === 'eraser')
) {
dispatch(rgLayerPointsAdded({ layerId: selectedLayerId, point: [pos.x, pos.y] })); dispatch(rgLayerPointsAdded({ layerId: selectedLayerId, point: [pos.x, pos.y] }));
} }
$isDrawing.set(false); $isDrawing.set(false);
$cursorPosition.set(null); $cursorPosition.set(null);
}, },
[selectedLayerId, tool, dispatch] [selectedLayerId, selectedLayerType, tool, dispatch]
); );
const onMouseWheel = useCallback( const onMouseWheel = useCallback(
(e: KonvaEventObject<WheelEvent>) => { (e: KonvaEventObject<WheelEvent>) => {
e.evt.preventDefault(); e.evt.preventDefault();
if (selectedLayerType !== 'regional_guidance_layer' || (tool !== 'brush' && tool !== 'eraser')) {
return;
}
// checking for ctrl key is pressed or not, // checking for ctrl key is pressed or not,
// so that brush size can be controlled using ctrl + scroll up/down // so that brush size can be controlled using ctrl + scroll up/down
@ -180,7 +187,7 @@ export const useMouseEvents = () => {
dispatch(brushSizeChanged(calculateNewBrushSize(brushSize, delta))); dispatch(brushSizeChanged(calculateNewBrushSize(brushSize, delta)));
} }
}, },
[shouldInvertBrushSizeScrollDirection, brushSize, dispatch] [selectedLayerType, tool, shouldInvertBrushSizeScrollDirection, dispatch, brushSize]
); );
return { onMouseDown, onMouseUp, onMouseMove, onMouseLeave, onMouseWheel }; return { onMouseDown, onMouseUp, onMouseMove, onMouseLeave, onMouseWheel };