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

feat(ui): rect shape preview now has fill

Browse Source
This commit is contained in:
psychedelicious 2024-06-06 09:23:56 +10:00
parent 3c7140cbf3
commit cd4f63f2fd
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
invokeai/frontend/web/src/features/controlLayers/konva/renderers/toolPreview.ts
View File

@ -1,5 +1,9 @@
import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { BRUSH_BORDER_INNER_COLOR, BRUSH_BORDER_OUTER_COLOR } from 'features/controlLayers/konva/constants'; import {
BBOX_SELECTED_STROKE,
BRUSH_BORDER_INNER_COLOR,
BRUSH_BORDER_OUTER_COLOR,
} from 'features/controlLayers/konva/constants';
import { import {
TOOL_PREVIEW_BRUSH_BORDER_INNER_ID, TOOL_PREVIEW_BRUSH_BORDER_INNER_ID,
TOOL_PREVIEW_BRUSH_BORDER_OUTER_ID, TOOL_PREVIEW_BRUSH_BORDER_OUTER_ID,
@ -54,7 +58,12 @@ const createToolPreviewLayer = (stage: Konva.Stage): Konva.Layer => {
toolPreviewLayer.add(brushPreviewGroup); toolPreviewLayer.add(brushPreviewGroup);
// Create the rect preview - this is a rectangle drawn from the last mouse down position to the current cursor position // Create the rect preview - this is a rectangle drawn from the last mouse down position to the current cursor position
const rectPreview = new Konva.Rect({ id: TOOL_PREVIEW_RECT_ID, listening: false, stroke: 'white', strokeWidth: 1 }); const rectPreview = new Konva.Rect({
id: TOOL_PREVIEW_RECT_ID,
listening: false,
stroke: BBOX_SELECTED_STROKE,
strokeWidth: 1,
});
toolPreviewLayer.add(rectPreview); toolPreviewLayer.add(rectPreview);
return toolPreviewLayer; return toolPreviewLayer;
@ -153,6 +162,7 @@ export const renderToolPreview = (
y: Math.min(snappedPos.y, lastMouseDownPos.y), y: Math.min(snappedPos.y, lastMouseDownPos.y),
width: Math.abs(snappedPos.x - lastMouseDownPos.x), width: Math.abs(snappedPos.x - lastMouseDownPos.x),
height: Math.abs(snappedPos.y - lastMouseDownPos.y), height: Math.abs(snappedPos.y - lastMouseDownPos.y),
fill: rgbaColorToString(brushColor),
}); });
rectPreview?.visible(true); rectPreview?.visible(true);
} else { } else {