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

Changes color picker preview to circles

Browse Source
This commit is contained in:
psychedelicious 2022-11-24 08:05:08 +11:00 committed by blessedcoolant
parent 6f3e99efc3
commit 318426b67a
5 changed files with 87 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
View File

@ -3,6 +3,7 @@ import { useAppSelector } from 'app/store';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import React from 'react';
import _ from 'lodash';
import roundToHundreth from 'features/canvas/util/roundToHundreth';
const cursorPositionSelector = createSelector(
[canvasSelector],
@ -14,7 +15,9 @@ const cursorPositionSelector = createSelector(
: { cursorX: -1, cursorY: -1 };
return {
cursorCoordinatesString: `(${cursorX}, ${cursorY})`,
cursorCoordinatesString: `(${roundToHundreth(cursorX)}, ${roundToHundreth(
cursorY
)})`,
};
},
{

120
frontend/src/features/canvas/components/IAICanvasToolPreview.tsx
View File

@ -5,7 +5,10 @@ import { Circle, Group, Rect } from 'react-konva';
import { useAppSelector } from 'app/store';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { COLOR_PICKER_SIZE } from '../util/constants';
import {
COLOR_PICKER_SIZE,
COLOR_PICKER_STROKE_RADIUS,
} from '../util/constants';
const canvasBrushPreviewSelector = createSelector(
canvasSelector,
@ -43,7 +46,12 @@ const canvasBrushPreviewSelector = createSelector(
colorPickerSize: COLOR_PICKER_SIZE / stageScale,
colorPickerOffset: COLOR_PICKER_SIZE / 2 / stageScale,
colorPickerCornerRadius: COLOR_PICKER_SIZE / 5 / stageScale,
brushColorString: fill,
colorPickerOuterRadius: COLOR_PICKER_SIZE / stageScale,
colorPickerInnerRadius:
(COLOR_PICKER_SIZE - COLOR_PICKER_STROKE_RADIUS + 1) / stageScale,
maskColorString: rgbaColorToString({ ...maskColor, a: 0.5 }),
brushColorString: rgbaColorToString(brushColor),
colorPickerColorString: rgbaColorToString(colorPickerColor),
tool,
shouldShowBrush,
shouldDrawBrushPreview:
@ -73,7 +81,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
width,
height,
radius,
brushColorString,
maskColorString,
tool,
shouldDrawBrushPreview,
dotRadius,
@ -81,6 +89,10 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
colorPickerSize,
colorPickerOffset,
colorPickerCornerRadius,
brushColorString,
colorPickerColorString,
colorPickerInnerRadius,
colorPickerOuterRadius,
} = useAppSelector(canvasBrushPreviewSelector);
if (!shouldDrawBrushPreview) return null;
@ -89,48 +101,21 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
<Group listening={false} {...rest}>
{tool === 'colorPicker' ? (
<>
<Rect
x={
cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
}
y={
cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
}
width={colorPickerSize}
height={colorPickerSize}
fill={brushColorString}
cornerRadius={colorPickerCornerRadius}
listening={false}
<Circle
x={cursorPosition ? cursorPosition.x : width / 2}
y={cursorPosition ? cursorPosition.y : height / 2}
radius={colorPickerOuterRadius}
stroke={brushColorString}
strokeWidth={COLOR_PICKER_STROKE_RADIUS}
strokeScaleEnabled={false}
/>
<Rect
x={
cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
}
y={
cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
}
width={colorPickerSize}
height={colorPickerSize}
cornerRadius={colorPickerCornerRadius}
stroke={'rgba(255,255,255,0.4)'}
strokeWidth={strokeWidth * 2}
strokeEnabled={true}
listening={false}
/>
<Rect
x={
cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
}
y={
cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
}
width={colorPickerSize}
height={colorPickerSize}
cornerRadius={colorPickerCornerRadius}
stroke={'rgba(0,0,0,1)'}
strokeWidth={strokeWidth}
strokeEnabled={true}
listening={false}
<Circle
x={cursorPosition ? cursorPosition.x : width / 2}
y={cursorPosition ? cursorPosition.y : height / 2}
radius={colorPickerInnerRadius}
stroke={colorPickerColorString}
strokeWidth={COLOR_PICKER_STROKE_RADIUS}
strokeScaleEnabled={false}
/>
</>
) : (
@ -183,3 +168,50 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
};
export default IAICanvasToolPreview;
{
/* <>
<Rect
x={
cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
}
y={
cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
}
width={colorPickerSize}
height={colorPickerSize}
fill={brushColorString}
cornerRadius={colorPickerCornerRadius}
listening={false}
/>
<Rect
x={
cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
}
y={
cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
}
width={colorPickerSize}
height={colorPickerSize}
cornerRadius={colorPickerCornerRadius}
stroke={'rgba(255,255,255,0.4)'}
strokeWidth={strokeWidth * 2}
strokeEnabled={true}
listening={false}
/>
<Rect
x={
cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
}
y={
cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
}
width={colorPickerSize}
height={colorPickerSize}
cornerRadius={colorPickerCornerRadius}
stroke={'rgba(0,0,0,1)'}
strokeWidth={strokeWidth}
strokeEnabled={true}
listening={false}
/>
</> */
}

1
frontend/src/features/canvas/store/canvasSlice.ts
View File

@ -689,7 +689,6 @@ export const canvasSlice = createSlice({
},
commitColorPickerColor: (state) => {
state.brushColor = state.colorPickerColor;
state.tool = 'brush';
},
setMergedCanvas: (state, action: PayloadAction<CanvasImage>) => {
state.pastLayerStates.push({

3
frontend/src/features/canvas/util/constants.ts
View File

@ -13,4 +13,5 @@ export const MAX_CANVAS_SCALE = 20;
// padding given to initial image/bounding box when stage view is reset
export const STAGE_PADDING_PERCENTAGE = 0.95;
export const COLOR_PICKER_SIZE = 60;
export const COLOR_PICKER_SIZE = 30;
export const COLOR_PICKER_STROKE_RADIUS = 10;

5
frontend/src/features/canvas/util/roundToHundreth.ts Normal file
View File

@ -0,0 +1,5 @@
const roundToHundreth = (val: number): number => {
return Math.round(val * 100) / 100;
};
export default roundToHundreth;