git/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2026-05-03 20:22:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): let tool modules set own visibility

Browse Source
This commit is contained in:
psychedelicious 2024-10-22 15:18:35 +10:00
parent 8ccb2e30ce
commit dae4591de6
4 changed files with 25 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolBrush.ts
View File

@ -104,17 +104,19 @@ export class CanvasToolBrush extends CanvasModuleBase {
this.konva.group.add(this.konva.fillCircle, this.konva.innerBorder, this.konva.outerBorder);
}
render = () => {
const tool = this.parent.$tool.get();
if (this.parent.$tool.get() !== 'brush') {
this.setVisibility(false);
return;
}
if (tool !== 'brush') {
if (!this.parent.getCanDraw()) {
this.setVisibility(false);
return;
}
const cursorPos = this.parent.$cursorPos.get();
const canDraw = this.parent.getCanDraw();
if (!cursorPos || !canDraw) {
if (!cursorPos) {
this.setVisibility(false);
return;
}

10
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolColorPicker.ts
View File

@ -212,17 +212,19 @@ export class CanvasToolColorPicker extends CanvasModuleBase {
* Renders the color picker tool preview on the canvas.
*/
render = () => {
const tool = this.parent.$tool.get();
if (this.parent.$tool.get() !== 'colorPicker') {
this.setVisibility(false);
return;
}
if (tool !== 'colorPicker') {
if (!this.parent.getCanDraw()) {
this.setVisibility(false);
return;
}
const cursorPos = this.parent.$cursorPos.get();
const canDraw = this.parent.getCanDraw();
if (!cursorPos || tool !== 'colorPicker' || !canDraw) {
if (!cursorPos) {
this.setVisibility(false);
return;
}

10
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolEraser.ts
View File

@ -90,17 +90,19 @@ export class CanvasToolEraser extends CanvasModuleBase {
}
render = () => {
const tool = this.parent.$tool.get();
if (this.parent.$tool.get() !== 'eraser') {
this.setVisibility(false);
return;
}
if (tool !== 'eraser') {
if (!this.parent.getCanDraw()) {
this.setVisibility(false);
return;
}
const cursorPos = this.parent.$cursorPos.get();
const canDraw = this.parent.getCanDraw();
if (!cursorPos || !canDraw) {
if (!cursorPos) {
this.setVisibility(false);
return;
}

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

@ -186,32 +186,11 @@ export class CanvasToolModule extends CanvasModuleBase {
};
render = () => {
const renderedEntityCount = this.manager.stateApi.getRenderedEntityCount();
const cursorPos = this.$cursorPos.get();
const isFiltering = this.manager.stateApi.$isFiltering.get();
const isStaging = this.manager.stagingArea.$isStaging.get();
const isStageDragging = this.manager.stage.konva.stage.isDragging();
this.syncCursorStyle();
/**
* The tool should not be rendered when:
* - There is no cursor position (i.e. the cursor is outside of the stage)
* - The user is filtering, in which case the user is not allowed to use the tools. Note that we do not disable
* the group while transforming, bc that requires use of the move tool.
* - The canvas is staging, in which case the user is not allowed to use the tools.
* - There are no entities rendered on the canvas. Maybe we should allow the user to draw on an empty canvas,
* creating a new layer when they start?
* - The stage is being dragged, in which case the user is not allowed to use the tools.
*/
if (!cursorPos || isFiltering || isStaging || renderedEntityCount === 0 || isStageDragging) {
this.konva.group.visible(false);
} else {
this.konva.group.visible(true);
this.tools.brush.render();
this.tools.eraser.render();
this.tools.colorPicker.render();
}
this.tools.brush.render();
this.tools.eraser.render();
this.tools.colorPicker.render();
};
syncCursorPositions = () => {
@ -301,6 +280,10 @@ export class CanvasToolModule extends CanvasModuleBase {
return false;
}
if (this.manager.stage.konva.stage.isDragging()) {
return false;
}
const selectedEntity = this.manager.stateApi.getSelectedEntityAdapter();
if (!selectedEntity) {