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 { 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 {
AddBrushLineArg,
AddEraserLineArg,
@ -152,14 +152,15 @@ export const setStageEventHandlers = ({
return;
}
setIsDrawing(true);
setLastMouseDownPos(pos);
if (tool === 'brush') {
onBrushLineAdded({
layerId: selectedLayer.id,
points: [pos.x, pos.y, pos.x, pos.y],
color: selectedLayer.type === 'raster_layer' ? getBrushColor() : DEFAULT_RGBA_COLOR,
});
setIsDrawing(true);
setLastMouseDownPos(pos);
}
if (tool === 'eraser') {
@ -167,13 +168,10 @@ export const setStageEventHandlers = ({
layerId: selectedLayer.id,
points: [pos.x, pos.y, pos.x, pos.y],
});
setIsDrawing(true);
setLastMouseDownPos(pos);
}
if (tool === 'rect') {
setIsDrawing(true);
setLastMouseDownPos(snapPosToStage(pos, stage));
// Setting the last mouse down pos starts a rect
}
});
@ -204,14 +202,13 @@ export const setStageEventHandlers = ({
if (tool === 'rect') {
const lastMouseDownPos = getLastMouseDownPos();
if (lastMouseDownPos) {
const snappedPos = snapPosToStage(pos, stage);
onRectShapeAdded({
layerId: selectedLayer.id,
rect: {
x: Math.min(snappedPos.x, lastMouseDownPos.x),
y: Math.min(snappedPos.y, lastMouseDownPos.y),
width: Math.abs(snappedPos.x - lastMouseDownPos.x),
height: Math.abs(snappedPos.y - lastMouseDownPos.y),
x: Math.min(pos.x, lastMouseDownPos.x),
y: Math.min(pos.y, lastMouseDownPos.y),
width: Math.abs(pos.x - lastMouseDownPos.x),
height: Math.abs(pos.y - lastMouseDownPos.y),
},
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_TOOL_GROUP_ID,
} 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 Konva from 'konva';
import type { IRect, Vector2d } from 'konva/lib/types';
@ -68,7 +68,6 @@ export const getBboxPreviewGroup = (
listening: true,
strokeEnabled: false,
draggable: true,
fill: 'rgba(255,0,0,0.3)',
...getBbox(),
});
bboxRect.on('dragmove', () => {
@ -421,13 +420,12 @@ export const renderToolPreview = (
}
if (cursorPos && lastMouseDownPos && tool === 'rect') {
const snappedPos = snapPosToStage(cursorPos, stage);
const rectPreview = brushPreviewGroup.findOne<Konva.Rect>(`#${PREVIEW_RECT_ID}`);
const rectPreview = toolPreviewGroup.findOne<Konva.Rect>(`#${PREVIEW_RECT_ID}`);
rectPreview?.setAttrs({
x: Math.min(snappedPos.x, lastMouseDownPos.x),
y: Math.min(snappedPos.y, lastMouseDownPos.y),
width: Math.abs(snappedPos.x - lastMouseDownPos.x),
height: Math.abs(snappedPos.y - lastMouseDownPos.y),
x: Math.min(cursorPos.x, lastMouseDownPos.x),
y: Math.min(cursorPos.y, lastMouseDownPos.y),
width: Math.abs(cursorPos.x - lastMouseDownPos.x),
height: Math.abs(cursorPos.y - lastMouseDownPos.y),
fill: rgbaColorToString(brushColor),
});
rectPreview?.visible(true);