github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): right click on stage draws

Browse Source
This commit is contained in:
psychedelicious
2024-10-23 12:27:34 +10:00
parent 7f2c83b9e6
commit 71f0fff55b
5 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasBrushToolModule.ts
View File

@@ -126,10 +126,10 @@ export class CanvasBrushToolModule extends CanvasModuleBase {
return;
}
const isMouseDown = this.parent.$isMouseDown.get();
const isPrimaryPointerDown = this.parent.$isPrimaryPointerDown.get();
const lastPointerType = this.parent.$lastPointerType.get();
if (lastPointerType !== 'mouse' && isMouseDown) {
if (lastPointerType !== 'mouse' && isPrimaryPointerDown) {
this.setVisibility(false);
return;
}
@@ -152,7 +152,7 @@ export class CanvasBrushToolModule extends CanvasModuleBase {
y: alignedCursorPos.y,
radius,
fill: rgbaColorToString(brushPreviewFill),
visible: !isMouseDown && lastPointerType === 'mouse',
visible: !isPrimaryPointerDown && lastPointerType === 'mouse',
});
// But the borders are in screen-pixels
@@ -193,10 +193,10 @@ export class CanvasBrushToolModule extends CanvasModuleBase {
*/
onStagePointerEnter = async (e: KonvaEventObject<PointerEvent>) => {
const cursorPos = this.parent.$cursorPos.get();
const isMouseDown = this.parent.$isMouseDown.get();
const isPrimaryPointerDown = this.parent.$isPrimaryPointerDown.get();
const selectedEntity = this.manager.stateApi.getSelectedEntityAdapter();
if (!cursorPos || !isMouseDown || !selectedEntity) {
if (!cursorPos || !isPrimaryPointerDown || !selectedEntity) {
/**
* Can't do anything without:
* - A cursor position: the cursor is not on the stage
@@ -246,12 +246,14 @@ export class CanvasBrushToolModule extends CanvasModuleBase {
*/
onStagePointerDown = async (e: KonvaEventObject<PointerEvent>) => {
const cursorPos = this.parent.$cursorPos.get();
const isPrimaryPointerDown = this.parent.$isPrimaryPointerDown.get();
const selectedEntity = this.manager.stateApi.getSelectedEntityAdapter();
if (!cursorPos || !selectedEntity) {
if (!cursorPos || !selectedEntity || !isPrimaryPointerDown) {
/**
* Can't do anything without:
* - A cursor position: the cursor is not on the stage
* - The mouse is down: the user is not drawing
* - A selected entity: there is no entity to draw on
*/
return;
@@ -363,7 +365,7 @@ export class CanvasBrushToolModule extends CanvasModuleBase {
return;
}
if (!this.parent.$isMouseDown.get()) {
if (!this.parent.$isPrimaryPointerDown.get()) {
return;
}

13
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasEraserToolModule.ts
View File

@@ -112,10 +112,10 @@ export class CanvasEraserToolModule extends CanvasModuleBase {
return;
}
const isMouseDown = this.parent.$isMouseDown.get();
const isPrimaryPointerDown = this.parent.$isPrimaryPointerDown.get();
const lastPointerType = this.parent.$lastPointerType.get();
if (lastPointerType !== 'mouse' && isMouseDown) {
if (lastPointerType !== 'mouse' && isPrimaryPointerDown) {
this.setVisibility(false);
return;
}
@@ -166,12 +166,10 @@ export class CanvasEraserToolModule extends CanvasModuleBase {
*/
onStagePointerEnter = async (e: KonvaEventObject<PointerEvent>) => {
const cursorPos = this.parent.$cursorPos.get();
const isMouseDown = this.parent.$isMouseDown.get();
const settings = this.manager.stateApi.getSettings();
const isPrimaryPointerDown = this.parent.$isPrimaryPointerDown.get();
const selectedEntity = this.manager.stateApi.getSelectedEntityAdapter();
if (!cursorPos || !isMouseDown || !selectedEntity) {
if (!cursorPos || !isPrimaryPointerDown || !selectedEntity) {
/**
* Can't do anything without:
* - A cursor position: the cursor is not on the stage
@@ -181,6 +179,7 @@ export class CanvasEraserToolModule extends CanvasModuleBase {
return;
}
const settings = this.manager.stateApi.getSettings();
const normalizedPoint = offsetCoord(cursorPos.relative, selectedEntity.state.position);
const alignedPoint = alignCoordForTool(normalizedPoint, settings.brushWidth);
@@ -334,7 +333,7 @@ export class CanvasEraserToolModule extends CanvasModuleBase {
return;
}
if (!this.parent.$isMouseDown.get()) {
if (!this.parent.$isPrimaryPointerDown.get()) {
return;
}

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

@@ -30,12 +30,14 @@ export class CanvasRectToolModule extends CanvasModuleBase {
onStagePointerDown = async (_e: KonvaEventObject<PointerEvent>) => {
const cursorPos = this.parent.$cursorPos.get();
const isPrimaryPointerDown = this.parent.$isPrimaryPointerDown.get();
const selectedEntity = this.manager.stateApi.getSelectedEntityAdapter();
if (!cursorPos || !selectedEntity) {
if (!cursorPos || !isPrimaryPointerDown || !selectedEntity) {
/**
* Can't do anything without:
* - A cursor position: the cursor is not on the stage
* - The mouse is down: the user is not drawing
* - A selected entity: there is no entity to draw on
*/
return;
@@ -71,7 +73,7 @@ export class CanvasRectToolModule extends CanvasModuleBase {
return;
}
if (!this.parent.$isMouseDown.get()) {
if (!this.parent.$isPrimaryPointerDown.get()) {
return;
}

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

@@ -76,17 +76,18 @@ export class CanvasToolModule extends CanvasModuleBase {
*/
$toolBuffer = atom<Tool | null>(null);
/**
* Whether the pointer is currently down on the stage.
* Whether the primary pointer (left mouse, pen, first touch) is currently down on the stage.
*
* For example, the pointer down was fired on the stage and then moves the cursor outside of the stage, this will
* still be true. When the cursor moves back onto the stage, if there has not been an pointer up fired, this will
* still be true.
* This is set true when the pointer down is fired on the stage and false when the pointer up is fired anywhere,
* including outside of the stage. This flag is thus true when the user is actively drawing on the stage.
*
* However, if the pointer down was fired _outside_ the stage, and the cursor moves onto the stage, this will be false.
* For example, if the pointer down was fired on the stage and the cursor then leaves the stage without a pointer up
* event, this will still be true. If the cursor then moves back onto the stage, this will still be true.
*
* TODO(psyche): Give this a more accurate name.
* However, if the pointer down was initially fired _outside_ the stage, and the cursor moves onto the stage, this
* will be false.
*/
$isMouseDown = atom<boolean>(false);
$isPrimaryPointerDown = atom<boolean>(false);
/**
* The last cursor position.
*/
@@ -139,7 +140,7 @@ export class CanvasToolModule extends CanvasModuleBase {
this.subscriptions.add(
this.$tool.listen(() => {
// On tool switch, reset mouse state
this.manager.tool.$isMouseDown.set(false);
this.manager.tool.$isPrimaryPointerDown.set(false);
this.render();
})
);
@@ -342,7 +343,7 @@ export class CanvasToolModule extends CanvasModuleBase {
return;
}
this.$isMouseDown.set(getIsPrimaryMouseDown(e));
this.$isPrimaryPointerDown.set(getIsPrimaryMouseDown(e));
this.syncCursorPositions();
@@ -489,7 +490,7 @@ export class CanvasToolModule extends CanvasModuleBase {
*/
onWindowPointerUp = (_: PointerEvent) => {
try {
this.$isMouseDown.set(false);
this.$isPrimaryPointerDown.set(false);
const selectedEntity = this.manager.stateApi.getSelectedEntityAdapter();
if (selectedEntity && selectedEntity.bufferRenderer.hasBuffer() && !this.manager.$isBusy.get()) {
@@ -591,7 +592,7 @@ export class CanvasToolModule extends CanvasModuleBase {
config: this.config,
$tool: this.$tool.get(),
$toolBuffer: this.$toolBuffer.get(),
$isMouseDown: this.$isMouseDown.get(),
$isPrimaryPointerDown: this.$isPrimaryPointerDown.get(),
$cursorPos: this.$cursorPos.get(),
tools: {
brush: this.tools.brush.repr(),

2
invokeai/frontend/web/src/features/controlLayers/konva/util.ts
View File

@@ -152,7 +152,7 @@ export const snapToRect = (pos: Vector2d, rect: Rect, threshold = 10): Vector2d
* Checks if the left mouse button is currently pressed
* @param e The konva event
*/
export const getIsMouseDown = (e: KonvaEventObject<MouseEvent>): boolean => e.evt.buttons === 1;
export const getIsPrimaryPointerDown = (e: KonvaEventObject<PointerEvent>): boolean => e.evt.buttons === 1;
/**
* Checks if the stage is currently focused