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

refactor(ui): scaled tool preview border

Browse Source
This commit is contained in:
psychedelicious 2024-06-16 20:23:33 +10:00
parent 5184d05bc2
commit b49fdf6407
3 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/src/features/controlLayers/konva/constants.ts
View File

@ -20,6 +20,11 @@ export const BRUSH_BORDER_INNER_COLOR = 'rgba(0,0,0,1)';
*/ */
export const BRUSH_BORDER_OUTER_COLOR = 'rgba(255,255,255,0.8)'; export const BRUSH_BORDER_OUTER_COLOR = 'rgba(255,255,255,0.8)';
/**
* The border width for the brush preview.
*/
export const BRUSH_ERASER_BORDER_WIDTH = 1.5;
/** /**
* The target spacing of individual points of brush strokes, as a percentage of the brush size. * The target spacing of individual points of brush strokes, as a percentage of the brush size.
*/ */

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

@ -1,4 +1,5 @@
import { renderBackgroundLayer } from 'features/controlLayers/konva/renderers/background'; import { renderBackgroundLayer } from 'features/controlLayers/konva/renderers/background';
import { scaleToolPreview } from 'features/controlLayers/konva/renderers/previewLayer';
import { getScaledFlooredCursorPosition } from 'features/controlLayers/konva/util'; import { getScaledFlooredCursorPosition } from 'features/controlLayers/konva/util';
import type { import type {
BrushLineAddedArg, BrushLineAddedArg,
@ -420,14 +421,15 @@ export const setStageEventHandlers = ({
stage.position(newPos); stage.position(newPos);
setStageAttrs({ ...newPos, width: stage.width(), height: stage.height(), scale: newScale }); setStageAttrs({ ...newPos, width: stage.width(), height: stage.height(), scale: newScale });
renderBackgroundLayer(stage); renderBackgroundLayer(stage);
scaleToolPreview(stage, getToolState());
} }
}); });
//#region dragmove //#region dragmove
stage.on('dragmove', () => { stage.on('dragmove', () => {
setStageAttrs({ setStageAttrs({
x: stage.x(), x: Math.floor(stage.x()),
y: stage.y(), y: Math.floor(stage.y()),
width: stage.width(), width: stage.width(),
height: stage.height(), height: stage.height(),
scale: stage.scaleX(), scale: stage.scaleX(),

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

@ -1,6 +1,10 @@
import { rgbaColorToString } from 'common/util/colorCodeTransformers'; import { rgbaColorToString } from 'common/util/colorCodeTransformers';
import { roundToMultiple, roundToMultipleMin } from 'common/util/roundDownToMultiple'; import { roundToMultiple, roundToMultipleMin } from 'common/util/roundDownToMultiple';
import { BRUSH_BORDER_INNER_COLOR, BRUSH_BORDER_OUTER_COLOR } from 'features/controlLayers/konva/constants'; import {
BRUSH_BORDER_INNER_COLOR,
BRUSH_BORDER_OUTER_COLOR,
BRUSH_ERASER_BORDER_WIDTH,
} from 'features/controlLayers/konva/constants';
import { import {
PREVIEW_BRUSH_BORDER_INNER_ID, PREVIEW_BRUSH_BORDER_INNER_ID,
PREVIEW_BRUSH_BORDER_OUTER_ID, PREVIEW_BRUSH_BORDER_OUTER_ID,
@ -293,7 +297,7 @@ export const getToolPreviewGroup = (stage: Konva.Stage): Konva.Group => {
id: PREVIEW_BRUSH_BORDER_INNER_ID, id: PREVIEW_BRUSH_BORDER_INNER_ID,
listening: false, listening: false,
stroke: BRUSH_BORDER_INNER_COLOR, stroke: BRUSH_BORDER_INNER_COLOR,
strokeWidth: 1 / scale, strokeWidth: BRUSH_ERASER_BORDER_WIDTH / scale,
strokeEnabled: true, strokeEnabled: true,
}); });
brushPreviewGroup.add(brushPreviewBorderInner); brushPreviewGroup.add(brushPreviewBorderInner);
@ -301,7 +305,7 @@ export const getToolPreviewGroup = (stage: Konva.Stage): Konva.Group => {
id: PREVIEW_BRUSH_BORDER_OUTER_ID, id: PREVIEW_BRUSH_BORDER_OUTER_ID,
listening: false, listening: false,
stroke: BRUSH_BORDER_OUTER_COLOR, stroke: BRUSH_BORDER_OUTER_COLOR,
strokeWidth: 1 / scale, strokeWidth: BRUSH_ERASER_BORDER_WIDTH / scale,
strokeEnabled: true, strokeEnabled: true,
}); });
brushPreviewGroup.add(brushPreviewBorderOuter); brushPreviewGroup.add(brushPreviewBorderOuter);
@ -387,6 +391,7 @@ export const renderToolPreview = (
// No need to render the brush preview if the cursor position or color is missing // No need to render the brush preview if the cursor position or color is missing
if (cursorPos && (tool === 'brush' || tool === 'eraser')) { if (cursorPos && (tool === 'brush' || tool === 'eraser')) {
const scale = stage.scaleX();
// Update the fill circle // Update the fill circle
const brushPreviewFill = brushPreviewGroup.findOne<Konva.Circle>(`#${PREVIEW_BRUSH_FILL_ID}`); const brushPreviewFill = brushPreviewGroup.findOne<Konva.Circle>(`#${PREVIEW_BRUSH_FILL_ID}`);
const radius = (tool === 'brush' ? toolState.brush.width : toolState.eraser.width) / 2; const radius = (tool === 'brush' ? toolState.brush.width : toolState.eraser.width) / 2;
@ -407,9 +412,11 @@ export const renderToolPreview = (
brushPreviewOuter?.setAttrs({ brushPreviewOuter?.setAttrs({
x: cursorPos.x, x: cursorPos.x,
y: cursorPos.y, y: cursorPos.y,
radius: radius + 1, radius: radius + BRUSH_ERASER_BORDER_WIDTH / scale,
}); });
scaleToolPreview(stage, toolState);
brushPreviewGroup.visible(true); brushPreviewGroup.visible(true);
} else { } else {
brushPreviewGroup.visible(false); brushPreviewGroup.visible(false);
@ -430,3 +437,15 @@ export const renderToolPreview = (
} }
} }
}; };
export const scaleToolPreview = (stage: Konva.Stage, toolState: CanvasV2State['tool']): void => {
const scale = stage.scaleX();
const radius = (toolState.selected === 'brush' ? toolState.brush.width : toolState.eraser.width) / 2;
const brushPreviewGroup = stage.findOne<Konva.Group>(`#${PREVIEW_BRUSH_GROUP_ID}`);
brushPreviewGroup
?.findOne<Konva.Circle>(`#${PREVIEW_BRUSH_BORDER_INNER_ID}`)
?.strokeWidth(BRUSH_ERASER_BORDER_WIDTH / scale);
brushPreviewGroup
?.findOne<Konva.Circle>(`#${PREVIEW_BRUSH_BORDER_OUTER_ID}`)
?.setAttrs({ strokeWidth: BRUSH_ERASER_BORDER_WIDTH / scale, radius: radius + BRUSH_ERASER_BORDER_WIDTH / scale });
};