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): regional prompts brush preview wonkiness

Browse Source
This commit is contained in:
psychedelicious 2024-04-18 18:36:08 +10:00 committed by Kent Keirsey
parent f8bf985256
commit dcb4a40741
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx
View File

@ -19,7 +19,7 @@ import { useCallback, useLayoutEffect } from 'react';
const log = logger('regionalPrompts'); const log = logger('regionalPrompts');
const $stage = atom<Konva.Stage | null>(null); const $stage = atom<Konva.Stage | null>(null);
const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
return regionalPrompts.layers.find((l) => l.id === regionalPrompts.selectedLayer)?.color; return regionalPrompts.layers.find((l) => l.id === regionalPrompts.selectedLayer)?.color ?? null;
}); });
const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElement | null) => { const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElement | null) => {
@ -109,7 +109,7 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
}, [stage, width, height, wrapper]); }, [stage, width, height, wrapper]);
useLayoutEffect(() => { useLayoutEffect(() => {
if (!stage || !cursorPosition || !selectedLayerColor) { if (!stage) {
return; return;
} }
renderBrushPreview(stage, state.tool, selectedLayerColor, cursorPosition, state.brushSize); renderBrushPreview(stage, state.tool, selectedLayerColor, cursorPosition, state.brushSize);

22
invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts
View File

@ -37,12 +37,13 @@ const mapId = (object: { id: string }) => object.id;
export const renderBrushPreview = ( export const renderBrushPreview = (
stage: Konva.Stage, stage: Konva.Stage,
tool: Tool, tool: Tool,
color: RgbColor, color: RgbColor | null,
cursorPos: Vector2d, cursorPos: Vector2d | null,
brushSize: number brushSize: number
) => { ) => {
const layerCount = stage.find(`.${REGIONAL_PROMPT_LAYER_NAME}`).length;
// Update the stage's pointer style // Update the stage's pointer style
stage.container().style.cursor = tool === 'move' ? 'default' : 'none'; stage.container().style.cursor = tool === 'move' || layerCount === 0 ? 'default' : 'none';
// Create the layer if it doesn't exist // Create the layer if it doesn't exist
let layer = stage.findOne<Konva.Layer>(`#${BRUSH_PREVIEW_LAYER_ID}`); let layer = stage.findOne<Konva.Layer>(`#${BRUSH_PREVIEW_LAYER_ID}`);
@ -59,8 +60,19 @@ export const renderBrushPreview = (
}); });
} }
// The brush preview is hidden when using the move tool if (!layer.visible()) {
layer.visible(tool !== 'move'); // Rely on the mouseenter and mouseleave events as a "first pass" for brush preview visibility. If it is not visible
// inside this render function, we do not want to make it visible again...
return;
}
// ...but we may want to hide it if it is visible, when using the move tool or when there are no layers
layer.visible(tool !== 'move' && layerCount > 0);
// No need to render the brush preview if the cursor position or color is missing
if (!cursorPos || !color) {
return;
}
// Create and/or update the fill circle // Create and/or update the fill circle
let fill = layer.findOne<Konva.Circle>(`#${BRUSH_PREVIEW_FILL_ID}`); let fill = layer.findOne<Konva.Circle>(`#${BRUSH_PREVIEW_FILL_ID}`);