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, EntityRectAddedPayload,
Rect, Rect,
RgbaColor, RgbaColor,
RgbColor,
Tool, Tool,
} from 'features/controlLayers/store/types'; } from 'features/controlLayers/store/types';
import { RGBA_BLACK } from 'features/controlLayers/store/types'; import { RGBA_BLACK } from 'features/controlLayers/store/types';
@ -249,7 +250,7 @@ export class CanvasStateApiModule {
$currentFill: WritableAtom<RgbaColor> = atom(); $currentFill: WritableAtom<RgbaColor> = atom();
$selectedEntity: WritableAtom<EntityStateAndAdapter | null> = atom(); $selectedEntity: WritableAtom<EntityStateAndAdapter | null> = atom();
$selectedEntityIdentifier: WritableAtom<CanvasEntityIdentifier | null> = atom(); $selectedEntityIdentifier: WritableAtom<CanvasEntityIdentifier | null> = atom();
$colorUnderCursor: WritableAtom<RgbaColor | null> = atom(); $colorUnderCursor: WritableAtom<RgbColor> = atom(RGBA_BLACK);
// Read-write state, ephemeral interaction state // Read-write state, ephemeral interaction state
$isDrawing = $isDrawing; $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 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 { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule'; import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule';
import { BRUSH_BORDER_INNER_COLOR, BRUSH_BORDER_OUTER_COLOR } from 'features/controlLayers/konva/constants'; 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 cursorPos = this.manager.stateApi.$lastCursorPos.get();
const isDrawing = this.manager.stateApi.$isDrawing.get(); const isDrawing = this.manager.stateApi.$isDrawing.get();
const isMouseDown = this.manager.stateApi.$isMouseDown.get(); const isMouseDown = this.manager.stateApi.$isMouseDown.get();
const colorUnderCursor = this.manager.stateApi.$colorUnderCursor.get();
const tool = toolState.selected; 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.innerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });
this.konva.eraser.outerBorder.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({ this.konva.colorPicker.newColor.setAttrs({
x: cursorPos.x, x: cursorPos.x,
y: cursorPos.y, y: cursorPos.y,
fill: rgbaColorToString(colorUnderCursor), fill: rgbColorToString(colorUnderCursor),
}); });
this.konva.colorPicker.oldColor.setAttrs({ this.konva.colorPicker.oldColor.setAttrs({
x: cursorPos.x, x: cursorPos.x,
y: cursorPos.y, 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.innerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });
this.konva.colorPicker.outerBorder.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, CanvasRegionalGuidanceState,
CanvasV2State, CanvasV2State,
Coordinate, Coordinate,
RgbaColor, RgbColor,
Tool, Tool,
} from 'features/controlLayers/store/types'; } from 'features/controlLayers/store/types';
import type Konva from 'konva'; import type Konva from 'konva';
@ -115,7 +115,7 @@ const getLastPointOfLastLineOfEntity = (
return { x, y }; return { x, y };
}; };
const getColorUnderCursor = (stage: Konva.Stage): RgbaColor | null => { const getColorUnderCursor = (stage: Konva.Stage): RgbColor | null => {
const pos = stage.getPointerPosition(); const pos = stage.getPointerPosition();
if (!pos) { if (!pos) {
return null; return null;
@ -126,12 +126,12 @@ const getColorUnderCursor = (stage: Konva.Stage): RgbaColor | null => {
if (!ctx) { if (!ctx) {
return null; return null;
} }
const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data; const [r, g, b, _a] = ctx.getImageData(0, 0, 1, 1).data;
if (r === undefined || g === undefined || b === undefined || a === undefined) { if (r === undefined || g === undefined || b === undefined) {
return null; return null;
} }
return { r, g, b, a }; return { r, g, b };
}; };
export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
@ -195,9 +195,11 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
if (toolState.selected === 'colorPicker') { if (toolState.selected === 'colorPicker') {
const color = getColorUnderCursor(stage); const color = getColorUnderCursor(stage);
manager.stateApi.$colorUnderCursor.set(color);
if (color) { if (color) {
manager.stateApi.setFill(color); manager.stateApi.$colorUnderCursor.set(color);
}
if (color) {
manager.stateApi.setFill({ ...color, a: 1 });
} }
manager.preview.tool.render(); manager.preview.tool.render();
} else { } else {
@ -345,7 +347,9 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
if (toolState.selected === 'colorPicker') { if (toolState.selected === 'colorPicker') {
const color = getColorUnderCursor(stage); const color = getColorUnderCursor(stage);
manager.stateApi.$colorUnderCursor.set(color); if (color) {
manager.stateApi.$colorUnderCursor.set(color);
}
} else { } else {
const isDrawable = selectedEntity?.state.isEnabled; const isDrawable = selectedEntity?.state.isEnabled;
if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) { if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) {