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

tidy(ui): organise tool module

Browse Source
This commit is contained in:
psychedelicious 2024-08-29 21:46:00 +10:00
parent a58c8adc38
commit c402aa397d
1 changed files with 156 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts
View File

@ -250,12 +250,10 @@ export class CanvasToolModule extends CanvasModuleABC {
this.konva.colorPicker.group.visible(tool === 'colorPicker'); this.konva.colorPicker.group.visible(tool === 'colorPicker');
}; };
render = () => { syncCursorStyle = () => {
const stage = this.manager.stage; const stage = this.manager.stage;
const renderedEntityCount = this.manager.stateApi.getRenderedEntityCount(); const renderedEntityCount = this.manager.stateApi.getRenderedEntityCount();
const toolState = this.manager.stateApi.getToolState();
const selectedEntity = this.manager.stateApi.getSelectedEntity(); const selectedEntity = this.manager.stateApi.getSelectedEntity();
const cursorPos = this.manager.stateApi.$lastCursorPos.get();
const isMouseDown = this.manager.stateApi.$isMouseDown.get(); const isMouseDown = this.manager.stateApi.$isMouseDown.get();
const tool = this.manager.stateApi.$tool.get(); const tool = this.manager.stateApi.$tool.get();
@ -294,17 +292,10 @@ export class CanvasToolModule extends CanvasModuleABC {
// Non-drawable layers don't have tools // Non-drawable layers don't have tools
stage.container.style.cursor = 'not-allowed'; stage.container.style.cursor = 'not-allowed';
} }
};
stage.setIsDraggable(tool === 'view'); renderBrushTool = (cursorPos: Coordinate) => {
const toolState = this.manager.stateApi.getToolState();
if (!cursorPos || renderedEntityCount === 0) {
// We can bail early if the mouse isn't over the stage or there are no layers
this.konva.group.visible(false);
} else {
this.konva.group.visible(true);
// No need to render the brush preview if the cursor position or color is missing
if (cursorPos && tool === 'brush') {
const brushPreviewFill = this.manager.stateApi.getBrushPreviewFill(); const brushPreviewFill = this.manager.stateApi.getBrushPreviewFill();
const alignedCursorPos = alignCoordForTool(cursorPos, toolState.brush.width); const alignedCursorPos = alignCoordForTool(cursorPos, toolState.brush.width);
const onePixel = this.manager.stage.getScaledPixels(1); const onePixel = this.manager.stage.getScaledPixels(1);
@ -332,7 +323,10 @@ export class CanvasToolModule extends CanvasModuleABC {
innerRadius: radius + onePixel, innerRadius: radius + onePixel,
outerRadius: radius + twoPixels, outerRadius: radius + twoPixels,
}); });
} else if (cursorPos && tool === 'eraser') { };
renderEraserTool = (cursorPos: Coordinate) => {
const toolState = this.manager.stateApi.getToolState();
const alignedCursorPos = alignCoordForTool(cursorPos, toolState.eraser.width); const alignedCursorPos = alignCoordForTool(cursorPos, toolState.eraser.width);
const onePixel = this.manager.stage.getScaledPixels(1); const onePixel = this.manager.stage.getScaledPixels(1);
const twoPixels = this.manager.stage.getScaledPixels(2); const twoPixels = this.manager.stage.getScaledPixels(2);
@ -359,7 +353,10 @@ export class CanvasToolModule extends CanvasModuleABC {
innerRadius: radius + onePixel, innerRadius: radius + onePixel,
outerRadius: radius + twoPixels, outerRadius: radius + twoPixels,
}); });
} else if (cursorPos && tool === 'colorPicker') { };
renderColorPicker = (cursorPos: Coordinate) => {
const toolState = this.manager.stateApi.getToolState();
const colorUnderCursor = this.manager.stateApi.$colorUnderCursor.get(); const colorUnderCursor = this.manager.stateApi.$colorUnderCursor.get();
const colorPickerInnerRadius = this.manager.stage.getScaledPixels(CanvasToolModule.COLOR_PICKER_RADIUS); const colorPickerInnerRadius = this.manager.stage.getScaledPixels(CanvasToolModule.COLOR_PICKER_RADIUS);
const colorPickerOuterRadius = this.manager.stage.getScaledPixels( const colorPickerOuterRadius = this.manager.stage.getScaledPixels(
@ -397,12 +394,8 @@ export class CanvasToolModule extends CanvasModuleABC {
const size = this.manager.stage.getScaledPixels(CanvasToolModule.COLOR_PICKER_CROSSHAIR_SIZE); const size = this.manager.stage.getScaledPixels(CanvasToolModule.COLOR_PICKER_CROSSHAIR_SIZE);
const space = this.manager.stage.getScaledPixels(CanvasToolModule.COLOR_PICKER_CROSSHAIR_SPACE); const space = this.manager.stage.getScaledPixels(CanvasToolModule.COLOR_PICKER_CROSSHAIR_SPACE);
const innerThickness = this.manager.stage.getScaledPixels( const innerThickness = this.manager.stage.getScaledPixels(CanvasToolModule.COLOR_PICKER_CROSSHAIR_INNER_THICKNESS);
CanvasToolModule.COLOR_PICKER_CROSSHAIR_INNER_THICKNESS const outerThickness = this.manager.stage.getScaledPixels(CanvasToolModule.COLOR_PICKER_CROSSHAIR_OUTER_THICKNESS);
);
const outerThickness = this.manager.stage.getScaledPixels(
CanvasToolModule.COLOR_PICKER_CROSSHAIR_OUTER_THICKNESS
);
this.konva.colorPicker.crosshairNorthOuter.setAttrs({ this.konva.colorPicker.crosshairNorthOuter.setAttrs({
strokeWidth: outerThickness, strokeWidth: outerThickness,
points: [cursorPos.x, cursorPos.y - size, cursorPos.x, cursorPos.y - space], points: [cursorPos.x, cursorPos.y - size, cursorPos.x, cursorPos.y - space],
@ -435,6 +428,38 @@ export class CanvasToolModule extends CanvasModuleABC {
strokeWidth: innerThickness, strokeWidth: innerThickness,
points: [cursorPos.x - space, cursorPos.y, cursorPos.x - size, cursorPos.y], points: [cursorPos.x - space, cursorPos.y, cursorPos.x - size, cursorPos.y],
}); });
};
render = () => {
const stage = this.manager.stage;
const renderedEntityCount = this.manager.stateApi.getRenderedEntityCount();
const selectedEntity = this.manager.stateApi.getSelectedEntity();
const cursorPos = this.manager.stateApi.$lastCursorPos.get();
const tool = this.manager.stateApi.$tool.get();
const isDrawable =
!!selectedEntity &&
selectedEntity.state.isEnabled &&
!selectedEntity.state.isLocked &&
isDrawableEntity(selectedEntity.state);
this.syncCursorStyle();
stage.setIsDraggable(tool === 'view');
if (!cursorPos || renderedEntityCount === 0) {
// We can bail early if the mouse isn't over the stage or there are no layers
this.konva.group.visible(false);
} else {
this.konva.group.visible(true);
// No need to render the brush preview if the cursor position or color is missing
if (cursorPos && tool === 'brush') {
this.renderBrushTool(cursorPos);
} else if (cursorPos && tool === 'eraser') {
this.renderEraserTool(cursorPos);
} else if (cursorPos && tool === 'colorPicker') {
this.renderColorPicker(cursorPos);
} }
this.setToolVisibility(tool, isDrawable); this.setToolVisibility(tool, isDrawable);