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): rect tool preview

Browse Source
This commit is contained in:
psychedelicious 2024-06-12 16:35:23 +10:00
parent c6774b829d
commit 98e5efa895
2 changed files with 15 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { calculateNewBrushSize } from 'features/canvas/hooks/useCanvasZoom'; import { calculateNewBrushSize } from 'features/canvas/hooks/useCanvasZoom';
import { CANVAS_SCALE_BY, MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from 'features/canvas/util/constants'; import { CANVAS_SCALE_BY, MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from 'features/canvas/util/constants';
import { getScaledFlooredCursorPosition, snapPosToStage } from 'features/controlLayers/konva/util'; import { getScaledFlooredCursorPosition } from 'features/controlLayers/konva/util';
import type { import type {
AddBrushLineArg, AddBrushLineArg,
AddEraserLineArg, AddEraserLineArg,
@ -152,14 +152,15 @@ export const setStageEventHandlers = ({
return; return;
} }
setIsDrawing(true);
setLastMouseDownPos(pos);
if (tool === 'brush') { if (tool === 'brush') {
onBrushLineAdded({ onBrushLineAdded({
layerId: selectedLayer.id, layerId: selectedLayer.id,
points: [pos.x, pos.y, pos.x, pos.y], points: [pos.x, pos.y, pos.x, pos.y],
color: selectedLayer.type === 'raster_layer' ? getBrushColor() : DEFAULT_RGBA_COLOR, color: selectedLayer.type === 'raster_layer' ? getBrushColor() : DEFAULT_RGBA_COLOR,
}); });
setIsDrawing(true);
setLastMouseDownPos(pos);
} }
if (tool === 'eraser') { if (tool === 'eraser') {
@ -167,13 +168,10 @@ export const setStageEventHandlers = ({
layerId: selectedLayer.id, layerId: selectedLayer.id,
points: [pos.x, pos.y, pos.x, pos.y], points: [pos.x, pos.y, pos.x, pos.y],
}); });
setIsDrawing(true);
setLastMouseDownPos(pos);
} }
if (tool === 'rect') { if (tool === 'rect') {
setIsDrawing(true); // Setting the last mouse down pos starts a rect
setLastMouseDownPos(snapPosToStage(pos, stage));
} }
}); });
@ -204,14 +202,13 @@ export const setStageEventHandlers = ({
if (tool === 'rect') { if (tool === 'rect') {
const lastMouseDownPos = getLastMouseDownPos(); const lastMouseDownPos = getLastMouseDownPos();
if (lastMouseDownPos) { if (lastMouseDownPos) {
const snappedPos = snapPosToStage(pos, stage);
onRectShapeAdded({ onRectShapeAdded({
layerId: selectedLayer.id, layerId: selectedLayer.id,
rect: { rect: {
x: Math.min(snappedPos.x, lastMouseDownPos.x), x: Math.min(pos.x, lastMouseDownPos.x),
y: Math.min(snappedPos.y, lastMouseDownPos.y), y: Math.min(pos.y, lastMouseDownPos.y),
width: Math.abs(snappedPos.x - lastMouseDownPos.x), width: Math.abs(pos.x - lastMouseDownPos.x),
height: Math.abs(snappedPos.y - lastMouseDownPos.y), height: Math.abs(pos.y - lastMouseDownPos.y),
}, },
color: selectedLayer.type === 'raster_layer' ? getBrushColor() : DEFAULT_RGBA_COLOR, color: selectedLayer.type === 'raster_layer' ? getBrushColor() : DEFAULT_RGBA_COLOR,
}); });

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

@ -17,7 +17,7 @@ import {
PREVIEW_RECT_ID, PREVIEW_RECT_ID,
PREVIEW_TOOL_GROUP_ID, PREVIEW_TOOL_GROUP_ID,
} from 'features/controlLayers/konva/naming'; } from 'features/controlLayers/konva/naming';
import { selectRenderableLayers, snapPosToStage } from 'features/controlLayers/konva/util'; import { selectRenderableLayers } from 'features/controlLayers/konva/util';
import type { Layer, RgbaColor, Tool } from 'features/controlLayers/store/types'; import type { Layer, RgbaColor, Tool } from 'features/controlLayers/store/types';
import Konva from 'konva'; import Konva from 'konva';
import type { IRect, Vector2d } from 'konva/lib/types'; import type { IRect, Vector2d } from 'konva/lib/types';
@ -68,7 +68,6 @@ export const getBboxPreviewGroup = (
listening: true, listening: true,
strokeEnabled: false, strokeEnabled: false,
draggable: true, draggable: true,
fill: 'rgba(255,0,0,0.3)',
...getBbox(), ...getBbox(),
}); });
bboxRect.on('dragmove', () => { bboxRect.on('dragmove', () => {
@ -421,13 +420,12 @@ export const renderToolPreview = (
} }
if (cursorPos && lastMouseDownPos && tool === 'rect') { if (cursorPos && lastMouseDownPos && tool === 'rect') {
const snappedPos = snapPosToStage(cursorPos, stage); const rectPreview = toolPreviewGroup.findOne<Konva.Rect>(`#${PREVIEW_RECT_ID}`);
const rectPreview = brushPreviewGroup.findOne<Konva.Rect>(`#${PREVIEW_RECT_ID}`);
rectPreview?.setAttrs({ rectPreview?.setAttrs({
x: Math.min(snappedPos.x, lastMouseDownPos.x), x: Math.min(cursorPos.x, lastMouseDownPos.x),
y: Math.min(snappedPos.y, lastMouseDownPos.y), y: Math.min(cursorPos.y, lastMouseDownPos.y),
width: Math.abs(snappedPos.x - lastMouseDownPos.x), width: Math.abs(cursorPos.x - lastMouseDownPos.x),
height: Math.abs(snappedPos.y - lastMouseDownPos.y), height: Math.abs(cursorPos.y - lastMouseDownPos.y),
fill: rgbaColorToString(brushColor), fill: rgbaColorToString(brushColor),
}); });
rectPreview?.visible(true); rectPreview?.visible(true);