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): color picker ignores alpha

Browse Source
This commit is contained in:
psychedelicious 2024-08-24 10:16:27 +10:00
parent fc6d244071
commit 011827fa29
3 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts
View File

@ -44,6 +44,7 @@ import type {
EntityRectAddedPayload,
Rect,
RgbaColor,
RgbColor,
Tool,
} from 'features/controlLayers/store/types';
import { RGBA_BLACK } from 'features/controlLayers/store/types';
@ -249,7 +250,7 @@ export class CanvasStateApiModule {
$currentFill: WritableAtom<RgbaColor> = atom();
$selectedEntity: WritableAtom<EntityStateAndAdapter | null> = atom();
$selectedEntityIdentifier: WritableAtom<CanvasEntityIdentifier | null> = atom();
$colorUnderCursor: WritableAtom<RgbaColor | null> = atom();
$colorUnderCursor: WritableAtom<RgbColor> = atom(RGBA_BLACK);
// Read-write state, ephemeral interaction state
$isDrawing = $isDrawing;

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

@ -1,5 +1,5 @@
import type { SerializableObject } from 'common/types';
import { rgbaColorToString } from 'common/util/colorCodeTransformers';
import { rgbaColorToString, rgbColorToString } from 'common/util/colorCodeTransformers';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule';
import { BRUSH_BORDER_INNER_COLOR, BRUSH_BORDER_OUTER_COLOR } from 'features/controlLayers/konva/constants';
@ -225,7 +225,6 @@ export class CanvasToolModule {
const cursorPos = this.manager.stateApi.$lastCursorPos.get();
const isDrawing = this.manager.stateApi.$isDrawing.get();
const isMouseDown = this.manager.stateApi.$isMouseDown.get();
const colorUnderCursor = this.manager.stateApi.$colorUnderCursor.get();
const tool = toolState.selected;
@ -297,16 +296,18 @@ export class CanvasToolModule {
});
this.konva.eraser.innerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });
this.konva.eraser.outerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });
} else if (cursorPos && colorUnderCursor) {
} else if (cursorPos && tool === 'colorPicker') {
const colorUnderCursor = this.manager.stateApi.$colorUnderCursor.get();
this.konva.colorPicker.newColor.setAttrs({
x: cursorPos.x,
y: cursorPos.y,
fill: rgbaColorToString(colorUnderCursor),
fill: rgbColorToString(colorUnderCursor),
});
this.konva.colorPicker.oldColor.setAttrs({
x: cursorPos.x,
y: cursorPos.y,
fill: rgbaColorToString(toolState.fill),
fill: rgbColorToString(toolState.fill),
});
this.konva.colorPicker.innerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });
this.konva.colorPicker.outerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });

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

@ -12,7 +12,7 @@ import type {
CanvasRegionalGuidanceState,
CanvasV2State,
Coordinate,
RgbaColor,
RgbColor,
Tool,
} from 'features/controlLayers/store/types';
import type Konva from 'konva';
@ -115,7 +115,7 @@ const getLastPointOfLastLineOfEntity = (
return { x, y };
};
const getColorUnderCursor = (stage: Konva.Stage): RgbaColor | null => {
const getColorUnderCursor = (stage: Konva.Stage): RgbColor | null => {
const pos = stage.getPointerPosition();
if (!pos) {
return null;
@ -126,12 +126,12 @@ const getColorUnderCursor = (stage: Konva.Stage): RgbaColor | null => {
if (!ctx) {
return null;
}
const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
if (r === undefined || g === undefined || b === undefined || a === undefined) {
const [r, g, b, _a] = ctx.getImageData(0, 0, 1, 1).data;
if (r === undefined || g === undefined || b === undefined) {
return null;
}
return { r, g, b, a };
return { r, g, b };
};
export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
@ -195,9 +195,11 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
if (toolState.selected === 'colorPicker') {
const color = getColorUnderCursor(stage);
manager.stateApi.$colorUnderCursor.set(color);
if (color) {
manager.stateApi.setFill(color);
manager.stateApi.$colorUnderCursor.set(color);
}
if (color) {
manager.stateApi.setFill({ ...color, a: 1 });
}
manager.preview.tool.render();
} else {
@ -345,7 +347,9 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
if (toolState.selected === 'colorPicker') {
const color = getColorUnderCursor(stage);
manager.stateApi.$colorUnderCursor.set(color);
if (color) {
manager.stateApi.$colorUnderCursor.set(color);
}
} else {
const isDrawable = selectedEntity?.state.isEnabled;
if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) {