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

Web UI 2.2 bugfixes (#1572)

Browse Source 
* Fixes bug preventing multiple images from being generated

* Fixes valid seam strength value range

* Update Delete Alert Text

Indicates to the user that images are not permanently deleted.

* Fixes left/right arrows not working on gallery

* Fixes initial image on load erroneously set to a user uploaded image

Should be a result gallery image.

* Lightbox Fixes

- Lightbox is now a button in the current image buttons
- Lightbox is also now available in the gallery context menu
- Lightbox zoom issues fixed
- Lightbox has a fade in animation.

* Fix image display wrapper in current preview not overflow bounds

* Revert "Fix image display wrapper in current preview not overflow bounds"

This reverts commit 5511c82714dbf1d1999d64e8bc357bafa34ddf37.

* Change Staging Area discard icon from Bin to X

* Expose Snap Threshold and Move Snap Settings to BBox Panel

* Changes img2img strength default to 0.75

* Fixes drawing triggering when mouse enters canvas w/ button down

When we only supported inpainting and no zoom, this was useful. It allowed the cursor to leave the canvas (which was easy to do given the limited canvas dimensions) and without losing the "I am drawing" state. 

With a zoomable canvas this is no longer as useful.

Additionally, we have more popovers and tools (like the color pickers) which result in unexpected brush strokes. This fixes that issue.

* Revert "Expose Snap Threshold and Move Snap Settings to BBox Panel"

We will handle this a bit differently - by allowing the grid origin to be moved. I will dig in at some point.

This reverts commit 33c92ecf4da724c2f17d9d91c7ea31a43a2f6deb.

* Adds Limit Strokes to Box

* Adds fill bounding box button

* Adds erase bounding box button

* Changes Staging area discard icon to match others

* Fixes right click breaking move tool

* Fixes brush preview visibility issue with "darken outside box"

* Fixes history bugs with addFillRect, addEraseRect, and other actions

* Adds missing `key`

* Fixes postprocessing being applied to canvas generations

* Fixes bbox not getting scaled in various situations

* Fixes staging area show image toggle not resetting on accept/discard

* Locks down canvas while generating/staging

* Fixes move tool breaking when canvas loses focus during move/transform

* Hides cursor when restrict strokes is on and mouse outside bbox

* Lints

* Builds fresh bundle

* Fix overlapping hotkey for Fill Bounding Box

* Build Fresh Bundle

* Fixes bug with mask and bbox overlay

* Builds fresh bundle

Co-authored-by: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>
This commit is contained in:
psychedelicious 2022-12-01 04:08:06 +11:00 committed by GitHub
parent 9fae65ed69
commit 5e81f51f6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
41 changed files with 1339 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/dist/assets/index.c609c0c8.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
frontend/dist/assets/index.f999e69e.css vendored
View File

File diff suppressed because one or more lines are too long

623
frontend/dist/assets/index.faf4c870.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
frontend/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>InvokeAI - A Stable Diffusion Toolkit</title> <title>InvokeAI - A Stable Diffusion Toolkit</title>
<link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" /> <link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
<script type="module" crossorigin src="./assets/index.f1b8da92.js"></script> <script type="module" crossorigin src="./assets/index.faf4c870.js"></script>
<link rel="stylesheet" href="./assets/index.f999e69e.css"> <link rel="stylesheet" href="./assets/index.c609c0c8.css">
</head> </head>
<body> <body>

12
frontend/src/app/socketio/listeners.ts
View File

@ -61,17 +61,17 @@ const makeSocketIOListeners = (
dispatch(requestSystemConfig()); dispatch(requestSystemConfig());
const gallery: GalleryState = getState().gallery; const gallery: GalleryState = getState().gallery;
if (gallery.categories.user.latest_mtime) {
dispatch(requestNewImages('user'));
} else {
dispatch(requestImages('user'));
}
if (gallery.categories.result.latest_mtime) { if (gallery.categories.result.latest_mtime) {
dispatch(requestNewImages('result')); dispatch(requestNewImages('result'));
} else { } else {
dispatch(requestImages('result')); dispatch(requestImages('result'));
} }
if (gallery.categories.user.latest_mtime) {
dispatch(requestNewImages('user'));
} else {
dispatch(requestImages('user'));
}
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }

43
frontend/src/common/util/parameterTranslation.ts
View File

@ -81,8 +81,7 @@ export const frontendToBackendParameters = (
const generationParameters: { [k: string]: any } = { const generationParameters: { [k: string]: any } = {
prompt, prompt,
iterations: iterations,
shouldRandomizeSeed || shouldGenerateVariations ? iterations : 1,
steps, steps,
cfg_scale: cfgScale, cfg_scale: cfgScale,
threshold, threshold,
@ -98,6 +97,9 @@ export const frontendToBackendParameters = (
init_mask: '', init_mask: '',
}; };
let esrganParameters: false | { [k: string]: any } = false;
let facetoolParameters: false | { [k: string]: any } = false;
generationParameters.seed = shouldRandomizeSeed generationParameters.seed = shouldRandomizeSeed
? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX) ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)
: seed; : seed;
@ -106,6 +108,23 @@ export const frontendToBackendParameters = (
if (['txt2img', 'img2img'].includes(generationMode)) { if (['txt2img', 'img2img'].includes(generationMode)) {
generationParameters.seamless = seamless; generationParameters.seamless = seamless;
generationParameters.hires_fix = hiresFix; generationParameters.hires_fix = hiresFix;
if (shouldRunESRGAN) {
esrganParameters = {
level: upscalingLevel,
strength: upscalingStrength,
};
}
if (shouldRunFacetool) {
facetoolParameters = {
type: facetoolType,
strength: facetoolStrength,
};
if (facetoolType === 'codeformer') {
facetoolParameters.codeformer_fidelity = codeformerFidelity;
}
}
} }
// img2img exclusive parameters // img2img exclusive parameters
@ -209,26 +228,6 @@ export const frontendToBackendParameters = (
generationParameters.variation_amount = 0; generationParameters.variation_amount = 0;
} }
let esrganParameters: false | { [k: string]: any } = false;
let facetoolParameters: false | { [k: string]: any } = false;
if (shouldRunESRGAN) {
esrganParameters = {
level: upscalingLevel,
strength: upscalingStrength,
};
}
if (shouldRunFacetool) {
facetoolParameters = {
type: facetoolType,
strength: facetoolStrength,
};
if (facetoolType === 'codeformer') {
facetoolParameters.codeformer_fidelity = codeformerFidelity;
}
}
if (enableImageDebugging) { if (enableImageDebugging) {
generationParameters.enable_image_debugging = enableImageDebugging; generationParameters.enable_image_debugging = enableImageDebugging;
} }

6
frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
View File

@ -1,10 +1,12 @@
import { useAppDispatch } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/store';
import IAIAlertDialog from 'common/components/IAIAlertDialog'; import IAIAlertDialog from 'common/components/IAIAlertDialog';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import { clearCanvasHistory } from 'features/canvas/store/canvasSlice'; import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
import { FaTrash } from 'react-icons/fa'; import { FaTrash } from 'react-icons/fa';
import { isStagingSelector } from '../store/canvasSelectors';
const ClearCanvasHistoryButtonModal = () => { const ClearCanvasHistoryButtonModal = () => {
const isStaging = useAppSelector(isStagingSelector);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
return ( return (
@ -13,7 +15,7 @@ const ClearCanvasHistoryButtonModal = () => {
acceptCallback={() => dispatch(clearCanvasHistory())} acceptCallback={() => dispatch(clearCanvasHistory())}
acceptButtonText={'Clear History'} acceptButtonText={'Clear History'}
triggerComponent={ triggerComponent={
<IAIButton size={'sm'} leftIcon={<FaTrash />}> <IAIButton size={'sm'} leftIcon={<FaTrash />} isDisabled={isStaging}>
Clear Canvas History Clear Canvas History
</IAIButton> </IAIButton>
} }

22
frontend/src/features/canvas/components/IAICanvas.tsx
View File

@ -18,7 +18,6 @@ import useCanvasWheel from '../hooks/useCanvasZoom';
import useCanvasMouseDown from '../hooks/useCanvasMouseDown'; import useCanvasMouseDown from '../hooks/useCanvasMouseDown';
import useCanvasMouseUp from '../hooks/useCanvasMouseUp'; import useCanvasMouseUp from '../hooks/useCanvasMouseUp';
import useCanvasMouseMove from '../hooks/useCanvasMouseMove'; import useCanvasMouseMove from '../hooks/useCanvasMouseMove';
import useCanvasMouseEnter from '../hooks/useCanvasMouseEnter';
import useCanvasMouseOut from '../hooks/useCanvasMouseOut'; import useCanvasMouseOut from '../hooks/useCanvasMouseOut';
import useCanvasDragMove from '../hooks/useCanvasDragMove'; import useCanvasDragMove from '../hooks/useCanvasDragMove';
import IAICanvasObjectRenderer from './IAICanvasObjectRenderer'; import IAICanvasObjectRenderer from './IAICanvasObjectRenderer';
@ -31,6 +30,8 @@ import {
setCanvasBaseLayer, setCanvasBaseLayer,
setCanvasStage, setCanvasStage,
} from '../util/konvaInstanceProvider'; } from '../util/konvaInstanceProvider';
import { KonvaEventObject } from 'konva/lib/Node';
import IAICanvasBoundingBoxOverlay from './IAICanvasBoundingBoxOverlay';
const selector = createSelector( const selector = createSelector(
[canvasSelector, isStagingSelector], [canvasSelector, isStagingSelector],
@ -48,9 +49,10 @@ const selector = createSelector(
isMovingStage, isMovingStage,
shouldShowIntermediates, shouldShowIntermediates,
shouldShowGrid, shouldShowGrid,
shouldRestrictStrokesToBox,
} = canvas; } = canvas;
let stageCursor: string | undefined = ''; let stageCursor: string | undefined = 'none';
if (tool === 'move' || isStaging) { if (tool === 'move' || isStaging) {
if (isMovingStage) { if (isMovingStage) {
@ -60,10 +62,8 @@ const selector = createSelector(
} }
} else if (isTransformingBoundingBox) { } else if (isTransformingBoundingBox) {
stageCursor = undefined; stageCursor = undefined;
} else if (isMouseOverBoundingBox) { } else if (shouldRestrictStrokesToBox && !isMouseOverBoundingBox) {
stageCursor = 'move'; stageCursor = 'default';
} else {
stageCursor = 'none';
} }
return { return {
@ -129,7 +129,6 @@ const IAICanvas = () => {
didMouseMoveRef, didMouseMoveRef,
lastCursorPositionRef lastCursorPositionRef
); );
const handleMouseEnter = useCanvasMouseEnter(stageRef);
const handleMouseOut = useCanvasMouseOut(); const handleMouseOut = useCanvasMouseOut();
const { handleDragStart, handleDragMove, handleDragEnd } = const { handleDragStart, handleDragMove, handleDragEnd } =
useCanvasDragMove(); useCanvasDragMove();
@ -153,16 +152,16 @@ const IAICanvas = () => {
onTouchMove={handleMouseMove} onTouchMove={handleMouseMove}
onTouchEnd={handleMouseUp} onTouchEnd={handleMouseUp}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseOut} onMouseLeave={handleMouseOut}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
onMouseOut={handleMouseOut}
onMouseUp={handleMouseUp} onMouseUp={handleMouseUp}
onDragStart={handleDragStart} onDragStart={handleDragStart}
onDragMove={handleDragMove} onDragMove={handleDragMove}
onDragEnd={handleDragEnd} onDragEnd={handleDragEnd}
onContextMenu={(e: KonvaEventObject<MouseEvent>) =>
e.evt.preventDefault()
}
onWheel={handleWheel} onWheel={handleWheel}
listening={(tool === 'move' || isStaging) && !isModifyingBoundingBox}
draggable={(tool === 'move' || isStaging) && !isModifyingBoundingBox} draggable={(tool === 'move' || isStaging) && !isModifyingBoundingBox}
> >
<Layer id={'grid'} visible={shouldShowGrid}> <Layer id={'grid'} visible={shouldShowGrid}>
@ -181,6 +180,9 @@ const IAICanvas = () => {
<IAICanvasMaskLines visible={true} listening={false} /> <IAICanvasMaskLines visible={true} listening={false} />
<IAICanvasMaskCompositer listening={false} /> <IAICanvasMaskCompositer listening={false} />
</Layer> </Layer>
<Layer>
<IAICanvasBoundingBoxOverlay />
</Layer>
<Layer id="preview" imageSmoothingEnabled={false}> <Layer id="preview" imageSmoothingEnabled={false}>
{!isStaging && ( {!isStaging && (
<IAICanvasToolPreview <IAICanvasToolPreview

69
frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx Normal file
View File

@ -0,0 +1,69 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import _ from 'lodash';
import { Group, Rect } from 'react-konva';
import { canvasSelector } from '../store/canvasSelectors';
const selector = createSelector(
canvasSelector,
(canvas) => {
const {
boundingBoxCoordinates,
boundingBoxDimensions,
stageDimensions,
stageScale,
shouldDarkenOutsideBoundingBox,
stageCoordinates,
} = canvas;
return {
boundingBoxCoordinates,
boundingBoxDimensions,
shouldDarkenOutsideBoundingBox,
stageCoordinates,
stageDimensions,
stageScale,
};
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
},
}
);
const IAICanvasBoundingBoxOverlay = () => {
const {
boundingBoxCoordinates,
boundingBoxDimensions,
shouldDarkenOutsideBoundingBox,
stageCoordinates,
stageDimensions,
stageScale,
} = useAppSelector(selector);
return (
<Group>
<Rect
offsetX={stageCoordinates.x / stageScale}
offsetY={stageCoordinates.y / stageScale}
height={stageDimensions.height / stageScale}
width={stageDimensions.width / stageScale}
fill={'rgba(0,0,0,0.4)'}
listening={false}
visible={shouldDarkenOutsideBoundingBox}
/>
<Rect
x={boundingBoxCoordinates.x}
y={boundingBoxCoordinates.y}
width={boundingBoxDimensions.width}
height={boundingBoxDimensions.height}
fill={'rgb(255,255,255)'}
listening={false}
visible={shouldDarkenOutsideBoundingBox}
globalCompositeOperation={'destination-out'}
/>
</Group>
);
};
export default IAICanvasBoundingBoxOverlay;

49
frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx
View File

@ -1,8 +1,13 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store'; import { useAppSelector } from 'app/store';
import _ from 'lodash'; import _ from 'lodash';
import { Group, Line } from 'react-konva'; import { Group, Line, Rect } from 'react-konva';
import { isCanvasBaseImage, isCanvasBaseLine } from '../store/canvasTypes'; import {
isCanvasBaseImage,
isCanvasBaseLine,
isCanvasEraseRect,
isCanvasFillRect,
} from '../store/canvasTypes';
import IAICanvasImage from './IAICanvasImage'; import IAICanvasImage from './IAICanvasImage';
import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
@ -37,7 +42,7 @@ const IAICanvasObjectRenderer = () => {
<IAICanvasImage key={i} x={obj.x} y={obj.y} url={obj.image.url} /> <IAICanvasImage key={i} x={obj.x} y={obj.y} url={obj.image.url} />
); );
} else if (isCanvasBaseLine(obj)) { } else if (isCanvasBaseLine(obj)) {
return ( const line = (
<Line <Line
key={i} key={i}
points={obj.points} points={obj.points}
@ -53,6 +58,44 @@ const IAICanvasObjectRenderer = () => {
} }
/> />
); );
if (obj.clip) {
return (
<Group
key={i}
clipX={obj.clip.x}
clipY={obj.clip.y}
clipWidth={obj.clip.width}
clipHeight={obj.clip.height}
>
{line}
</Group>
);
} else {
return line;
}
} else if (isCanvasFillRect(obj)) {
return (
<Rect
key={i}
x={obj.x}
y={obj.y}
width={obj.width}
height={obj.height}
fill={rgbaColorToString(obj.color)}
/>
);
} else if (isCanvasEraseRect(obj)) {
return (
<Rect
key={i}
x={obj.x}
y={obj.y}
width={obj.width}
height={obj.height}
fill={'rgb(255, 255, 255)'}
globalCompositeOperation={'destination-out'}
/>
);
} }
})} })}
</Group> </Group>

24
frontend/src/features/canvas/components/IAICanvasStagingArea.tsx
View File

@ -15,6 +15,8 @@ const selector = createSelector(
}, },
shouldShowStagingImage, shouldShowStagingImage,
shouldShowStagingOutline, shouldShowStagingOutline,
boundingBoxCoordinates: { x, y },
boundingBoxDimensions: { width, height },
} = canvas; } = canvas;
return { return {
@ -24,6 +26,10 @@ const selector = createSelector(
isOnLastImage: selectedImageIndex === images.length - 1, isOnLastImage: selectedImageIndex === images.length - 1,
shouldShowStagingImage, shouldShowStagingImage,
shouldShowStagingOutline, shouldShowStagingOutline,
x,
y,
width,
height,
}; };
}, },
{ {
@ -41,19 +47,17 @@ const IAICanvasStagingArea = (props: Props) => {
currentStagingAreaImage, currentStagingAreaImage,
shouldShowStagingImage, shouldShowStagingImage,
shouldShowStagingOutline, shouldShowStagingOutline,
} = useAppSelector(selector);
if (!currentStagingAreaImage) return null;
const {
x, x,
y, y,
image: { width, height, url }, width,
} = currentStagingAreaImage; height,
} = useAppSelector(selector);
return ( return (
<Group {...rest}> <Group {...rest}>
{shouldShowStagingImage && <IAICanvasImage url={url} x={x} y={y} />} {shouldShowStagingImage && currentStagingAreaImage && (
<IAICanvasImage url={currentStagingAreaImage.image.url} x={x} y={y} />
)}
{shouldShowStagingOutline && ( {shouldShowStagingOutline && (
<Group> <Group>
<Rect <Rect
@ -62,7 +66,7 @@ const IAICanvasStagingArea = (props: Props) => {
width={width} width={width}
height={height} height={height}
strokeWidth={1} strokeWidth={1}
stroke={'black'} stroke={'white'}
strokeScaleEnabled={false} strokeScaleEnabled={false}
/> />
<Rect <Rect
@ -72,7 +76,7 @@ const IAICanvasStagingArea = (props: Props) => {
height={height} height={height}
dash={[4, 4]} dash={[4, 4]}
strokeWidth={1} strokeWidth={1}
stroke={'white'} stroke={'black'}
strokeScaleEnabled={false} strokeScaleEnabled={false}
/> />
</Group> </Group>

9
frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
View File

@ -10,8 +10,8 @@ import {
FaCheck, FaCheck,
FaEye, FaEye,
FaEyeSlash, FaEyeSlash,
FaPlus,
FaSave, FaSave,
FaTrash,
} from 'react-icons/fa'; } from 'react-icons/fa';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { import {
@ -62,11 +62,11 @@ const IAICanvasStagingAreaToolbar = () => {
} = useAppSelector(selector); } = useAppSelector(selector);
const handleMouseOver = useCallback(() => { const handleMouseOver = useCallback(() => {
dispatch(setShouldShowStagingOutline(false)); dispatch(setShouldShowStagingOutline(true));
}, [dispatch]); }, [dispatch]);
const handleMouseOut = useCallback(() => { const handleMouseOut = useCallback(() => {
dispatch(setShouldShowStagingOutline(true)); dispatch(setShouldShowStagingOutline(false));
}, [dispatch]); }, [dispatch]);
useHotkeys( useHotkeys(
@ -167,10 +167,11 @@ const IAICanvasStagingAreaToolbar = () => {
<IAIIconButton <IAIIconButton
tooltip="Discard All" tooltip="Discard All"
aria-label="Discard All" aria-label="Discard All"
icon={<FaTrash />} icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
onClick={() => dispatch(discardStagedImages())} onClick={() => dispatch(discardStagedImages())}
data-selected={true} data-selected={true}
style={{ backgroundColor: 'var(--btn-delete-image)' }} style={{ backgroundColor: 'var(--btn-delete-image)' }}
fontSize={20}
/> />
</ButtonGroup> </ButtonGroup>
</Flex> </Flex>

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

@ -15,7 +15,6 @@ const canvasBrushPreviewSelector = createSelector(
(canvas) => { (canvas) => {
const { const {
cursorPosition, cursorPosition,
stageDimensions: { width, height },
brushSize, brushSize,
colorPickerColor, colorPickerColor,
maskColor, maskColor,
@ -26,12 +25,64 @@ const canvasBrushPreviewSelector = createSelector(
isMovingBoundingBox, isMovingBoundingBox,
isTransformingBoundingBox, isTransformingBoundingBox,
stageScale, stageScale,
stageDimensions,
boundingBoxCoordinates,
boundingBoxDimensions,
shouldRestrictStrokesToBox,
} = canvas; } = canvas;
const clip = shouldRestrictStrokesToBox
? {
clipX: boundingBoxCoordinates.x,
clipY: boundingBoxCoordinates.y,
clipWidth: boundingBoxDimensions.width,
clipHeight: boundingBoxDimensions.height,
}
: {};
// // big brain time; this is the *inverse* of the clip that is needed for shouldRestrictStrokesToBox
// // it took some fiddling to work out, so I am leaving it here in case it is needed for something else...
// const clipFunc = shouldRestrictStrokesToBox
// ? (ctx: SceneContext) => {
// console.log(
// stageCoordinates.x / stageScale,
// stageCoordinates.y / stageScale,
// stageDimensions.height / stageScale,
// stageDimensions.width / stageScale
// );
// ctx.fillStyle = 'red';
// ctx.rect(
// -stageCoordinates.x / stageScale,
// -stageCoordinates.y / stageScale,
// stageDimensions.width / stageScale,
// stageCoordinates.y / stageScale + boundingBoxCoordinates.y
// );
// ctx.rect(
// -stageCoordinates.x / stageScale,
// boundingBoxCoordinates.y + boundingBoxDimensions.height,
// stageDimensions.width / stageScale,
// stageDimensions.height / stageScale
// );
// ctx.rect(
// -stageCoordinates.x / stageScale,
// -stageCoordinates.y / stageScale,
// stageCoordinates.x / stageScale + boundingBoxCoordinates.x,
// stageDimensions.height / stageScale
// );
// ctx.rect(
// boundingBoxCoordinates.x + boundingBoxDimensions.width,
// -stageCoordinates.y / stageScale,
// stageDimensions.width / stageScale -
// (boundingBoxCoordinates.x + boundingBoxDimensions.width),
// stageDimensions.height / stageScale
// );
// }
// : undefined;
return { return {
cursorPosition, cursorPosition,
width, brushX: cursorPosition ? cursorPosition.x : stageDimensions.width / 2,
height, brushY: cursorPosition ? cursorPosition.y : stageDimensions.height / 2,
radius: brushSize / 2, radius: brushSize / 2,
colorPickerOuterRadius: COLOR_PICKER_SIZE / stageScale, colorPickerOuterRadius: COLOR_PICKER_SIZE / stageScale,
colorPickerInnerRadius: colorPickerInnerRadius:
@ -50,6 +101,7 @@ const canvasBrushPreviewSelector = createSelector(
) && shouldShowBrush, ) && shouldShowBrush,
strokeWidth: 1.5 / stageScale, strokeWidth: 1.5 / stageScale,
dotRadius: 1.5 / stageScale, dotRadius: 1.5 / stageScale,
clip,
}; };
}, },
{ {
@ -65,9 +117,8 @@ const canvasBrushPreviewSelector = createSelector(
const IAICanvasToolPreview = (props: GroupConfig) => { const IAICanvasToolPreview = (props: GroupConfig) => {
const { ...rest } = props; const { ...rest } = props;
const { const {
cursorPosition, brushX,
width, brushY,
height,
radius, radius,
maskColorString, maskColorString,
tool, tool,
@ -79,25 +130,26 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
colorPickerColorString, colorPickerColorString,
colorPickerInnerRadius, colorPickerInnerRadius,
colorPickerOuterRadius, colorPickerOuterRadius,
clip,
} = useAppSelector(canvasBrushPreviewSelector); } = useAppSelector(canvasBrushPreviewSelector);
if (!shouldDrawBrushPreview) return null; if (!shouldDrawBrushPreview) return null;
return ( return (
<Group listening={false} {...rest}> <Group listening={false} {...clip} {...rest}>
{tool === 'colorPicker' ? ( {tool === 'colorPicker' ? (
<> <>
<Circle <Circle
x={cursorPosition ? cursorPosition.x : width / 2} x={brushX}
y={cursorPosition ? cursorPosition.y : height / 2} y={brushY}
radius={colorPickerOuterRadius} radius={colorPickerOuterRadius}
stroke={brushColorString} stroke={brushColorString}
strokeWidth={COLOR_PICKER_STROKE_RADIUS} strokeWidth={COLOR_PICKER_STROKE_RADIUS}
strokeScaleEnabled={false} strokeScaleEnabled={false}
/> />
<Circle <Circle
x={cursorPosition ? cursorPosition.x : width / 2} x={brushX}
y={cursorPosition ? cursorPosition.y : height / 2} y={brushY}
radius={colorPickerInnerRadius} radius={colorPickerInnerRadius}
stroke={colorPickerColorString} stroke={colorPickerColorString}
strokeWidth={COLOR_PICKER_STROKE_RADIUS} strokeWidth={COLOR_PICKER_STROKE_RADIUS}
@ -107,17 +159,17 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
) : ( ) : (
<> <>
<Circle <Circle
x={cursorPosition ? cursorPosition.x : width / 2} x={brushX}
y={cursorPosition ? cursorPosition.y : height / 2} y={brushY}
radius={radius} radius={radius}
fill={layer === 'mask' ? maskColorString : brushColorString} fill={layer === 'mask' ? maskColorString : brushColorString}
globalCompositeOperation={ globalCompositeOperation={
tool === 'eraser' ? 'destination-out' : 'source-over' tool === 'eraser' ? 'destination-out' : 'source-out'
} }
/> />
<Circle <Circle
x={cursorPosition ? cursorPosition.x : width / 2} x={brushX}
y={cursorPosition ? cursorPosition.y : height / 2} y={brushY}
radius={radius} radius={radius}
stroke={'rgba(255,255,255,0.4)'} stroke={'rgba(255,255,255,0.4)'}
strokeWidth={strokeWidth * 2} strokeWidth={strokeWidth * 2}
@ -125,8 +177,8 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
listening={false} listening={false}
/> />
<Circle <Circle
x={cursorPosition ? cursorPosition.x : width / 2} x={brushX}
y={cursorPosition ? cursorPosition.y : height / 2} y={brushY}
radius={radius} radius={radius}
stroke={'rgba(0,0,0,1)'} stroke={'rgba(0,0,0,1)'}
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
@ -136,15 +188,15 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
</> </>
)} )}
<Circle <Circle
x={cursorPosition ? cursorPosition.x : width / 2} x={brushX}
y={cursorPosition ? cursorPosition.y : height / 2} y={brushY}
radius={dotRadius * 2} radius={dotRadius * 2}
fill={'rgba(255,255,255,0.4)'} fill={'rgba(255,255,255,0.4)'}
listening={false} listening={false}
/> />
<Circle <Circle
x={cursorPosition ? cursorPosition.x : width / 2} x={brushX}
y={cursorPosition ? cursorPosition.y : height / 2} y={brushY}
radius={dotRadius} radius={dotRadius}
fill={'rgba(0,0,0,1)'} fill={'rgba(0,0,0,1)'}
listening={false} listening={false}

62
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
View File

@ -3,7 +3,7 @@ import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node'; import { KonvaEventObject } from 'konva/lib/Node';
import { Vector2d } from 'konva/lib/types'; import { Vector2d } from 'konva/lib/types';
import _ from 'lodash'; import _ from 'lodash';
import { useCallback, useEffect, useRef } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { Group, Rect, Transformer } from 'react-konva'; import { Group, Rect, Transformer } from 'react-konva';
import { useAppDispatch, useAppSelector } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/store';
import { import {
@ -26,15 +26,11 @@ const boundingBoxPreviewSelector = createSelector(
const { const {
boundingBoxCoordinates, boundingBoxCoordinates,
boundingBoxDimensions, boundingBoxDimensions,
stageDimensions,
stageScale, stageScale,
isDrawing, isDrawing,
isTransformingBoundingBox, isTransformingBoundingBox,
isMovingBoundingBox, isMovingBoundingBox,
isMouseOverBoundingBox,
shouldDarkenOutsideBoundingBox,
tool, tool,
stageCoordinates,
shouldSnapToGrid, shouldSnapToGrid,
} = canvas; } = canvas;
@ -42,16 +38,11 @@ const boundingBoxPreviewSelector = createSelector(
boundingBoxCoordinates, boundingBoxCoordinates,
boundingBoxDimensions, boundingBoxDimensions,
isDrawing, isDrawing,
isMouseOverBoundingBox,
shouldDarkenOutsideBoundingBox,
isMovingBoundingBox, isMovingBoundingBox,
isTransformingBoundingBox, isTransformingBoundingBox,
stageDimensions,
stageScale, stageScale,
shouldSnapToGrid, shouldSnapToGrid,
tool, tool,
stageCoordinates,
boundingBoxStrokeWidth: (isMouseOverBoundingBox ? 8 : 1) / stageScale,
hitStrokeWidth: 20 / stageScale, hitStrokeWidth: 20 / stageScale,
}; };
}, },
@ -72,22 +63,20 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
boundingBoxCoordinates, boundingBoxCoordinates,
boundingBoxDimensions, boundingBoxDimensions,
isDrawing, isDrawing,
isMouseOverBoundingBox,
shouldDarkenOutsideBoundingBox,
isMovingBoundingBox, isMovingBoundingBox,
isTransformingBoundingBox, isTransformingBoundingBox,
stageCoordinates,
stageDimensions,
stageScale, stageScale,
shouldSnapToGrid, shouldSnapToGrid,
tool, tool,
boundingBoxStrokeWidth,
hitStrokeWidth, hitStrokeWidth,
} = useAppSelector(boundingBoxPreviewSelector); } = useAppSelector(boundingBoxPreviewSelector);
const transformerRef = useRef<Konva.Transformer>(null); const transformerRef = useRef<Konva.Transformer>(null);
const shapeRef = useRef<Konva.Rect>(null); const shapeRef = useRef<Konva.Rect>(null);
const [isMouseOverBoundingBoxOutline, setIsMouseOverBoundingBoxOutline] =
useState(false);
useEffect(() => { useEffect(() => {
if (!transformerRef.current || !shapeRef.current) return; if (!transformerRef.current || !shapeRef.current) return;
transformerRef.current.nodes([shapeRef.current]); transformerRef.current.nodes([shapeRef.current]);
@ -205,7 +194,9 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
const handleEndedTransforming = () => { const handleEndedTransforming = () => {
dispatch(setIsTransformingBoundingBox(false)); dispatch(setIsTransformingBoundingBox(false));
dispatch(setIsMovingBoundingBox(false));
dispatch(setIsMouseOverBoundingBox(false)); dispatch(setIsMouseOverBoundingBox(false));
setIsMouseOverBoundingBoxOutline(false);
}; };
const handleStartedMoving = () => { const handleStartedMoving = () => {
@ -216,38 +207,38 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
dispatch(setIsTransformingBoundingBox(false)); dispatch(setIsTransformingBoundingBox(false));
dispatch(setIsMovingBoundingBox(false)); dispatch(setIsMovingBoundingBox(false));
dispatch(setIsMouseOverBoundingBox(false)); dispatch(setIsMouseOverBoundingBox(false));
setIsMouseOverBoundingBoxOutline(false);
}; };
const handleMouseOver = () => { const handleMouseOver = () => {
dispatch(setIsMouseOverBoundingBox(true)); setIsMouseOverBoundingBoxOutline(true);
}; };
const handleMouseOut = () => { const handleMouseOut = () => {
!isTransformingBoundingBox && !isTransformingBoundingBox &&
!isMovingBoundingBox && !isMovingBoundingBox &&
setIsMouseOverBoundingBoxOutline(false);
};
const handleMouseEnterBoundingBox = () => {
dispatch(setIsMouseOverBoundingBox(true));
};
const handleMouseLeaveBoundingBox = () => {
dispatch(setIsMouseOverBoundingBox(false)); dispatch(setIsMouseOverBoundingBox(false));
}; };
return ( return (
<Group {...rest}> <Group {...rest}>
<Rect <Rect
offsetX={stageCoordinates.x / stageScale} height={boundingBoxDimensions.height}
offsetY={stageCoordinates.y / stageScale} width={boundingBoxDimensions.width}
height={stageDimensions.height / stageScale}
width={stageDimensions.width / stageScale}
fill={'rgba(0,0,0,0.4)'}
listening={false}
visible={shouldDarkenOutsideBoundingBox}
/>
<Rect
x={boundingBoxCoordinates.x} x={boundingBoxCoordinates.x}
y={boundingBoxCoordinates.y} y={boundingBoxCoordinates.y}
width={boundingBoxDimensions.width} onMouseEnter={handleMouseEnterBoundingBox}
height={boundingBoxDimensions.height} onMouseOver={handleMouseEnterBoundingBox}
fill={'rgb(255,255,255)'} onMouseLeave={handleMouseLeaveBoundingBox}
listening={false} onMouseOut={handleMouseLeaveBoundingBox}
visible={shouldDarkenOutsideBoundingBox}
globalCompositeOperation={'destination-out'}
/> />
<Rect <Rect
draggable={true} draggable={true}
@ -255,17 +246,21 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
height={boundingBoxDimensions.height} height={boundingBoxDimensions.height}
hitStrokeWidth={hitStrokeWidth} hitStrokeWidth={hitStrokeWidth}
listening={!isDrawing && tool === 'move'} listening={!isDrawing && tool === 'move'}
onDragStart={handleStartedMoving}
onDragEnd={handleEndedModifying} onDragEnd={handleEndedModifying}
onDragMove={handleOnDragMove} onDragMove={handleOnDragMove}
onMouseDown={handleStartedMoving} onMouseDown={handleStartedMoving}
onMouseOut={handleMouseOut} onMouseOut={handleMouseOut}
onMouseOver={handleMouseOver} onMouseOver={handleMouseOver}
onMouseEnter={handleMouseOver}
onMouseUp={handleEndedModifying} onMouseUp={handleEndedModifying}
onTransform={handleOnTransform} onTransform={handleOnTransform}
onTransformEnd={handleEndedTransforming} onTransformEnd={handleEndedTransforming}
ref={shapeRef} ref={shapeRef}
stroke={isMouseOverBoundingBox ? 'rgba(255,255,255,0.7)' : 'white'} stroke={
strokeWidth={boundingBoxStrokeWidth} isMouseOverBoundingBoxOutline ? 'rgba(255,255,255,0.7)' : 'white'
}
strokeWidth={(isMouseOverBoundingBoxOutline ? 8 : 1) / stageScale}
width={boundingBoxDimensions.width} width={boundingBoxDimensions.width}
x={boundingBoxCoordinates.x} x={boundingBoxCoordinates.x}
y={boundingBoxCoordinates.y} y={boundingBoxCoordinates.y}
@ -285,6 +280,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
ignoreStroke={true} ignoreStroke={true}
keepRatio={false} keepRatio={false}
listening={!isDrawing && tool === 'move'} listening={!isDrawing && tool === 'move'}
onDragStart={handleStartedMoving}
onDragEnd={handleEndedModifying} onDragEnd={handleEndedModifying}
onMouseDown={handleStartedTransforming} onMouseDown={handleStartedTransforming}
onMouseUp={handleEndedTransforming} onMouseUp={handleEndedTransforming}

26
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
View File

@ -15,13 +15,16 @@ import IAIPopover from 'common/components/IAIPopover';
import IAICheckbox from 'common/components/IAICheckbox'; import IAICheckbox from 'common/components/IAICheckbox';
import IAIColorPicker from 'common/components/IAIColorPicker'; import IAIColorPicker from 'common/components/IAIColorPicker';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { rgbaColorToString } from 'features/canvas/util/colorToString';
export const selector = createSelector( export const selector = createSelector(
[canvasSelector], [canvasSelector, isStagingSelector],
(canvas) => { (canvas, isStaging) => {
const { maskColor, layer, isMaskEnabled, shouldPreserveMaskedArea } = const { maskColor, layer, isMaskEnabled, shouldPreserveMaskedArea } =
canvas; canvas;
@ -31,6 +34,7 @@ export const selector = createSelector(
maskColorString: rgbaColorToString(maskColor), maskColorString: rgbaColorToString(maskColor),
isMaskEnabled, isMaskEnabled,
shouldPreserveMaskedArea, shouldPreserveMaskedArea,
isStaging,
}; };
}, },
{ {
@ -41,8 +45,13 @@ export const selector = createSelector(
); );
const IAICanvasMaskOptions = () => { const IAICanvasMaskOptions = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { layer, maskColor, isMaskEnabled, shouldPreserveMaskedArea } = const {
useAppSelector(selector); layer,
maskColor,
isMaskEnabled,
shouldPreserveMaskedArea,
isStaging,
} = useAppSelector(selector);
useHotkeys( useHotkeys(
['q'], ['q'],
@ -50,7 +59,7 @@ const IAICanvasMaskOptions = () => {
handleToggleMaskLayer(); handleToggleMaskLayer();
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[layer] [layer]
@ -62,7 +71,7 @@ const IAICanvasMaskOptions = () => {
handleClearMask(); handleClearMask();
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[] []
@ -74,7 +83,7 @@ const IAICanvasMaskOptions = () => {
handleToggleEnableMask(); handleToggleEnableMask();
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[isMaskEnabled] [isMaskEnabled]
@ -103,6 +112,7 @@ const IAICanvasMaskOptions = () => {
? { backgroundColor: 'var(--accent-color)' } ? { backgroundColor: 'var(--accent-color)' }
: { backgroundColor: 'var(--btn-base-color)' } : { backgroundColor: 'var(--btn-base-color)' }
} }
isDisabled={isStaging}
/> />
</ButtonGroup> </ButtonGroup>
} }

7
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
View File

@ -8,14 +8,15 @@ import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import _ from 'lodash'; import _ from 'lodash';
import { redo } from 'features/canvas/store/canvasSlice'; import { redo } from 'features/canvas/store/canvasSlice';
import { systemSelector } from 'features/system/store/systemSelectors';
const canvasRedoSelector = createSelector( const canvasRedoSelector = createSelector(
[canvasSelector, activeTabNameSelector], [canvasSelector, activeTabNameSelector, systemSelector],
(canvas, activeTabName) => { (canvas, activeTabName, system) => {
const { futureLayerStates } = canvas; const { futureLayerStates } = canvas;
return { return {
canRedo: futureLayerStates.length > 0, canRedo: futureLayerStates.length > 0 && !system.isProcessing,
activeTabName, activeTabName,
}; };
}, },

11
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
View File

@ -4,6 +4,7 @@ import {
setShouldAutoSave, setShouldAutoSave,
setShouldCropToBoundingBoxOnSave, setShouldCropToBoundingBoxOnSave,
setShouldDarkenOutsideBoundingBox, setShouldDarkenOutsideBoundingBox,
setShouldRestrictStrokesToBox,
setShouldShowCanvasDebugInfo, setShouldShowCanvasDebugInfo,
setShouldShowGrid, setShouldShowGrid,
setShouldShowIntermediates, setShouldShowIntermediates,
@ -32,6 +33,7 @@ export const canvasControlsSelector = createSelector(
shouldShowGrid, shouldShowGrid,
shouldShowIntermediates, shouldShowIntermediates,
shouldSnapToGrid, shouldSnapToGrid,
shouldRestrictStrokesToBox,
} = canvas; } = canvas;
return { return {
@ -42,6 +44,7 @@ export const canvasControlsSelector = createSelector(
shouldShowGrid, shouldShowGrid,
shouldShowIntermediates, shouldShowIntermediates,
shouldSnapToGrid, shouldSnapToGrid,
shouldRestrictStrokesToBox,
}; };
}, },
{ {
@ -61,6 +64,7 @@ const IAICanvasSettingsButtonPopover = () => {
shouldShowGrid, shouldShowGrid,
shouldShowIntermediates, shouldShowIntermediates,
shouldSnapToGrid, shouldSnapToGrid,
shouldRestrictStrokesToBox,
} = useAppSelector(canvasControlsSelector); } = useAppSelector(canvasControlsSelector);
useHotkeys( useHotkeys(
@ -126,6 +130,13 @@ const IAICanvasSettingsButtonPopover = () => {
dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked)) dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked))
} }
/> />
<IAICheckbox
label="Limit Strokes to Box"
isChecked={shouldRestrictStrokesToBox}
onChange={(e) =>
dispatch(setShouldRestrictStrokesToBox(e.target.checked))
}
/>
<IAICheckbox <IAICheckbox
label="Show Canvas Debug Info" label="Show Canvas Debug Info"
isChecked={shouldShowCanvasDebugInfo} isChecked={shouldShowCanvasDebugInfo}

56
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
View File

@ -1,6 +1,8 @@
import { ButtonGroup, Flex } from '@chakra-ui/react'; import { ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { import {
addEraseRect,
addFillRect,
setBrushColor, setBrushColor,
setBrushSize, setBrushSize,
setTool, setTool,
@ -11,7 +13,9 @@ import IAIIconButton from 'common/components/IAIIconButton';
import { import {
FaEraser, FaEraser,
FaEyeDropper, FaEyeDropper,
FaFillDrip,
FaPaintBrush, FaPaintBrush,
FaPlus,
FaSlidersH, FaSlidersH,
} from 'react-icons/fa'; } from 'react-icons/fa';
import { import {
@ -55,7 +59,7 @@ const IAICanvasToolChooserOptions = () => {
handleSelectBrushTool(); handleSelectBrushTool();
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[] []
@ -67,7 +71,7 @@ const IAICanvasToolChooserOptions = () => {
handleSelectEraserTool(); handleSelectEraserTool();
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[tool] [tool]
@ -79,19 +83,41 @@ const IAICanvasToolChooserOptions = () => {
handleSelectColorPickerTool(); handleSelectColorPickerTool();
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[tool] [tool]
); );
useHotkeys(
['shift+f'],
() => {
handleFillRect();
},
{
enabled: () => !isStaging,
preventDefault: true,
}
);
useHotkeys(
['delete', 'backspace'],
() => {
handleEraseBoundingBox();
},
{
enabled: () => !isStaging,
preventDefault: true,
}
);
useHotkeys( useHotkeys(
['BracketLeft'], ['BracketLeft'],
() => { () => {
dispatch(setBrushSize(Math.max(brushSize - 5, 5))); dispatch(setBrushSize(Math.max(brushSize - 5, 5)));
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[brushSize] [brushSize]
@ -103,7 +129,7 @@ const IAICanvasToolChooserOptions = () => {
dispatch(setBrushSize(Math.min(brushSize + 5, 500))); dispatch(setBrushSize(Math.min(brushSize + 5, 500)));
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[brushSize] [brushSize]
@ -120,7 +146,7 @@ const IAICanvasToolChooserOptions = () => {
); );
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[brushColor] [brushColor]
@ -137,7 +163,7 @@ const IAICanvasToolChooserOptions = () => {
); );
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[brushColor] [brushColor]
@ -146,6 +172,8 @@ const IAICanvasToolChooserOptions = () => {
const handleSelectBrushTool = () => dispatch(setTool('brush')); const handleSelectBrushTool = () => dispatch(setTool('brush'));
const handleSelectEraserTool = () => dispatch(setTool('eraser')); const handleSelectEraserTool = () => dispatch(setTool('eraser'));
const handleSelectColorPickerTool = () => dispatch(setTool('colorPicker')); const handleSelectColorPickerTool = () => dispatch(setTool('colorPicker'));
const handleFillRect = () => dispatch(addFillRect());
const handleEraseBoundingBox = () => dispatch(addEraseRect());
return ( return (
<ButtonGroup isAttached> <ButtonGroup isAttached>
@ -165,6 +193,20 @@ const IAICanvasToolChooserOptions = () => {
isDisabled={isStaging} isDisabled={isStaging}
onClick={handleSelectEraserTool} onClick={handleSelectEraserTool}
/> />
<IAIIconButton
aria-label="Fill Bounding Box (Shift+F)"
tooltip="Fill Bounding Box (Shift+F)"
icon={<FaFillDrip />}
isDisabled={isStaging}
onClick={handleFillRect}
/>
<IAIIconButton
aria-label="Erase Bounding Box Area (Delete/Backspace)"
tooltip="Erase Bounding Box Area (Delete/Backspace)"
icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
isDisabled={isStaging}
onClick={handleEraseBoundingBox}
/>
<IAIIconButton <IAIIconButton
aria-label="Color Picker (C)" aria-label="Color Picker (C)"
tooltip="Color Picker (C)" tooltip="Color Picker (C)"

21
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
View File

@ -85,7 +85,7 @@ const IAICanvasOutpaintingControls = () => {
handleSelectMoveTool(); handleSelectMoveTool();
}, },
{ {
enabled: () => true, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[] []
@ -109,7 +109,7 @@ const IAICanvasOutpaintingControls = () => {
handleMergeVisible(); handleMergeVisible();
}, },
{ {
enabled: () => !isProcessing, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[canvasBaseLayer, isProcessing] [canvasBaseLayer, isProcessing]
@ -121,7 +121,7 @@ const IAICanvasOutpaintingControls = () => {
handleSaveToGallery(); handleSaveToGallery();
}, },
{ {
enabled: () => !isProcessing, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[canvasBaseLayer, isProcessing] [canvasBaseLayer, isProcessing]
@ -133,7 +133,7 @@ const IAICanvasOutpaintingControls = () => {
handleCopyImageToClipboard(); handleCopyImageToClipboard();
}, },
{ {
enabled: () => !isProcessing, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[canvasBaseLayer, isProcessing] [canvasBaseLayer, isProcessing]
@ -145,7 +145,7 @@ const IAICanvasOutpaintingControls = () => {
handleDownloadAsImage(); handleDownloadAsImage();
}, },
{ {
enabled: () => !isProcessing, enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[canvasBaseLayer, isProcessing] [canvasBaseLayer, isProcessing]
@ -226,6 +226,7 @@ const IAICanvasOutpaintingControls = () => {
value={layer} value={layer}
validValues={LAYER_NAMES_DICT} validValues={LAYER_NAMES_DICT}
onChange={handleChangeLayer} onChange={handleChangeLayer}
isDisabled={isStaging}
/> />
<IAICanvasMaskOptions /> <IAICanvasMaskOptions />
@ -253,28 +254,28 @@ const IAICanvasOutpaintingControls = () => {
tooltip="Merge Visible (Shift+M)" tooltip="Merge Visible (Shift+M)"
icon={<FaLayerGroup />} icon={<FaLayerGroup />}
onClick={handleMergeVisible} onClick={handleMergeVisible}
isDisabled={isProcessing} isDisabled={isStaging}
/> />
<IAIIconButton <IAIIconButton
aria-label="Save to Gallery (Shift+S)" aria-label="Save to Gallery (Shift+S)"
tooltip="Save to Gallery (Shift+S)" tooltip="Save to Gallery (Shift+S)"
icon={<FaSave />} icon={<FaSave />}
onClick={handleSaveToGallery} onClick={handleSaveToGallery}
isDisabled={isProcessing} isDisabled={isStaging}
/> />
<IAIIconButton <IAIIconButton
aria-label="Copy to Clipboard (Cmd/Ctrl+C)" aria-label="Copy to Clipboard (Cmd/Ctrl+C)"
tooltip="Copy to Clipboard (Cmd/Ctrl+C)" tooltip="Copy to Clipboard (Cmd/Ctrl+C)"
icon={<FaCopy />} icon={<FaCopy />}
onClick={handleCopyImageToClipboard} onClick={handleCopyImageToClipboard}
isDisabled={isProcessing} isDisabled={isStaging}
/> />
<IAIIconButton <IAIIconButton
aria-label="Download as Image (Shift+D)" aria-label="Download as Image (Shift+D)"
tooltip="Download as Image (Shift+D)" tooltip="Download as Image (Shift+D)"
icon={<FaDownload />} icon={<FaDownload />}
onClick={handleDownloadAsImage} onClick={handleDownloadAsImage}
isDisabled={isProcessing} isDisabled={isStaging}
/> />
</ButtonGroup> </ButtonGroup>
<ButtonGroup isAttached> <ButtonGroup isAttached>
@ -288,6 +289,7 @@ const IAICanvasOutpaintingControls = () => {
tooltip="Upload" tooltip="Upload"
icon={<FaUpload />} icon={<FaUpload />}
onClick={openUploader} onClick={openUploader}
isDisabled={isStaging}
/> />
<IAIIconButton <IAIIconButton
aria-label="Clear Canvas" aria-label="Clear Canvas"
@ -295,6 +297,7 @@ const IAICanvasOutpaintingControls = () => {
icon={<FaTrash />} icon={<FaTrash />}
onClick={handleResetCanvas} onClick={handleResetCanvas}
style={{ backgroundColor: 'var(--btn-delete-image)' }} style={{ backgroundColor: 'var(--btn-delete-image)' }}
isDisabled={isStaging}
/> />
</ButtonGroup> </ButtonGroup>
<ButtonGroup isAttached> <ButtonGroup isAttached>

7
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
View File

@ -8,14 +8,15 @@ import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import _ from 'lodash'; import _ from 'lodash';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors'; import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import { undo } from 'features/canvas/store/canvasSlice'; import { undo } from 'features/canvas/store/canvasSlice';
import { systemSelector } from 'features/system/store/systemSelectors';
const canvasUndoSelector = createSelector( const canvasUndoSelector = createSelector(
[canvasSelector, activeTabNameSelector], [canvasSelector, activeTabNameSelector, systemSelector],
(canvas, activeTabName) => { (canvas, activeTabName, system) => {
const { pastLayerStates } = canvas; const { pastLayerStates } = canvas;
return { return {
canUndo: pastLayerStates.length > 0, canUndo: pastLayerStates.length > 0 && !system.isProcessing,
activeTabName, activeTabName,
}; };
}, },

22
frontend/src/features/canvas/hooks/useCanvasDragMove.ts
View File

@ -3,7 +3,10 @@ import { useAppDispatch, useAppSelector } from 'app/store';
import { KonvaEventObject } from 'konva/lib/Node'; import { KonvaEventObject } from 'konva/lib/Node';
import _ from 'lodash'; import _ from 'lodash';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { canvasSelector, isStagingSelector } from 'features/canvas/store/canvasSelectors'; import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import { import {
setIsMovingStage, setIsMovingStage,
setStageCoordinates, setStageCoordinates,
@ -12,10 +15,11 @@ import {
const selector = createSelector( const selector = createSelector(
[canvasSelector, isStagingSelector], [canvasSelector, isStagingSelector],
(canvas, isStaging) => { (canvas, isStaging) => {
const { tool } = canvas; const { tool, isMovingBoundingBox } = canvas;
return { return {
tool, tool,
isStaging, isStaging,
isMovingBoundingBox,
}; };
}, },
{ memoizeOptions: { resultEqualityCheck: _.isEqual } } { memoizeOptions: { resultEqualityCheck: _.isEqual } }
@ -23,29 +27,29 @@ const selector = createSelector(
const useCanvasDrag = () => { const useCanvasDrag = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { tool, isStaging } = useAppSelector(selector); const { tool, isStaging, isMovingBoundingBox } = useAppSelector(selector);
return { return {
handleDragStart: useCallback(() => { handleDragStart: useCallback(() => {
if (!(tool === 'move' || isStaging)) return; if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) return;
dispatch(setIsMovingStage(true)); dispatch(setIsMovingStage(true));
}, [dispatch, isStaging, tool]), }, [dispatch, isMovingBoundingBox, isStaging, tool]),
handleDragMove: useCallback( handleDragMove: useCallback(
(e: KonvaEventObject<MouseEvent>) => { (e: KonvaEventObject<MouseEvent>) => {
if (!(tool === 'move' || isStaging)) return; if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) return;
const newCoordinates = { x: e.target.x(), y: e.target.y() }; const newCoordinates = { x: e.target.x(), y: e.target.y() };
dispatch(setStageCoordinates(newCoordinates)); dispatch(setStageCoordinates(newCoordinates));
}, },
[dispatch, isStaging, tool] [dispatch, isMovingBoundingBox, isStaging, tool]
), ),
handleDragEnd: useCallback(() => { handleDragEnd: useCallback(() => {
if (!(tool === 'move' || isStaging)) return; if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) return;
dispatch(setIsMovingStage(false)); dispatch(setIsMovingStage(false));
}, [dispatch, isStaging, tool]), }, [dispatch, isMovingBoundingBox, isStaging, tool]),
}; };
}; };

13
frontend/src/features/canvas/hooks/useCanvasHotkeys.ts
View File

@ -9,13 +9,16 @@ import {
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/store';
import { useRef } from 'react'; import { useRef } from 'react';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import { CanvasTool } from '../store/canvasTypes'; import { CanvasTool } from '../store/canvasTypes';
import { getCanvasStage } from '../util/konvaInstanceProvider'; import { getCanvasStage } from '../util/konvaInstanceProvider';
const selector = createSelector( const selector = createSelector(
[canvasSelector, activeTabNameSelector], [canvasSelector, activeTabNameSelector, isStagingSelector],
(canvas, activeTabName) => { (canvas, activeTabName, isStaging) => {
const { const {
cursorPosition, cursorPosition,
shouldLockBoundingBox, shouldLockBoundingBox,
@ -29,6 +32,7 @@ const selector = createSelector(
shouldLockBoundingBox, shouldLockBoundingBox,
shouldShowBoundingBox, shouldShowBoundingBox,
tool, tool,
isStaging,
}; };
}, },
{ {
@ -40,7 +44,7 @@ const selector = createSelector(
const useInpaintingCanvasHotkeys = () => { const useInpaintingCanvasHotkeys = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { activeTabName, shouldShowBoundingBox, tool } = const { activeTabName, shouldShowBoundingBox, tool, isStaging } =
useAppSelector(selector); useAppSelector(selector);
const previousToolRef = useRef<CanvasTool | null>(null); const previousToolRef = useRef<CanvasTool | null>(null);
@ -64,6 +68,7 @@ const useInpaintingCanvasHotkeys = () => {
dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox)); dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
}, },
{ {
enabled: () => !isStaging,
preventDefault: true, preventDefault: true,
}, },
[activeTabName, shouldShowBoundingBox] [activeTabName, shouldShowBoundingBox]

53
frontend/src/features/canvas/hooks/useCanvasMouseEnter.ts
View File

@ -1,53 +0,0 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';
import _ from 'lodash';
import { MutableRefObject, useCallback } from 'react';
import { canvasSelector, isStagingSelector } from 'features/canvas/store/canvasSelectors';
import {
addLine,
setIsDrawing,
} from 'features/canvas/store/canvasSlice';
import getScaledCursorPosition from '../util/getScaledCursorPosition';
const selector = createSelector(
[activeTabNameSelector, canvasSelector, isStagingSelector],
(activeTabName, canvas, isStaging) => {
const { tool } = canvas;
return {
tool,
activeTabName,
isStaging,
};
},
{ memoizeOptions: { resultEqualityCheck: _.isEqual } }
);
const useCanvasMouseEnter = (
stageRef: MutableRefObject<Konva.Stage | null>
) => {
const dispatch = useAppDispatch();
const { tool, isStaging } = useAppSelector(selector);
return useCallback(
(e: KonvaEventObject<MouseEvent>) => {
if (e.evt.buttons !== 1) return;
if (!stageRef.current) return;
const scaledCursorPosition = getScaledCursorPosition(stageRef.current);
if (!scaledCursorPosition || tool === 'move' || isStaging) return;
dispatch(setIsDrawing(true));
// Add a new line starting from the current cursor position.
dispatch(addLine([scaledCursorPosition.x, scaledCursorPosition.y]));
},
[stageRef, tool, isStaging, dispatch]
);
};
export default useCanvasMouseEnter;

5
frontend/src/features/canvas/hooks/useCanvasMouseOut.ts
View File

@ -1,13 +1,12 @@
import { useAppDispatch } from 'app/store'; import { useAppDispatch } from 'app/store';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { setCursorPosition, setIsDrawing } from 'features/canvas/store/canvasSlice'; import { mouseLeftCanvas } from 'features/canvas/store/canvasSlice';
const useCanvasMouseOut = () => { const useCanvasMouseOut = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
return useCallback(() => { return useCallback(() => {
dispatch(setCursorPosition(null)); dispatch(mouseLeftCanvas());
dispatch(setIsDrawing(false));
}, [dispatch]); }, [dispatch]);
}; };

11
frontend/src/features/canvas/store/canvasSelectors.ts
View File

@ -1,10 +1,17 @@
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { CanvasImage, CanvasState, isCanvasBaseImage } from './canvasTypes'; import { CanvasImage, CanvasState, isCanvasBaseImage } from './canvasTypes';
export const canvasSelector = (state: RootState): CanvasState => state.canvas; export const canvasSelector = (state: RootState): CanvasState => state.canvas;
export const isStagingSelector = (state: RootState): boolean => export const isStagingSelector = createSelector(
state.canvas.layerState.stagingArea.images.length > 0; [canvasSelector, activeTabNameSelector, systemSelector],
(canvas, activeTabName, system) =>
canvas.layerState.stagingArea.images.length > 0 ||
(activeTabName === 'unifiedCanvas' && system.isProcessing)
);
export const initialCanvasImageSelector = ( export const initialCanvasImageSelector = (
state: RootState state: RootState

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

@ -12,12 +12,15 @@ import calculateCoordinates from '../util/calculateCoordinates';
import calculateScale from '../util/calculateScale'; import calculateScale from '../util/calculateScale';
import { STAGE_PADDING_PERCENTAGE } from '../util/constants'; import { STAGE_PADDING_PERCENTAGE } from '../util/constants';
import floorCoordinates from '../util/floorCoordinates'; import floorCoordinates from '../util/floorCoordinates';
import getScaledBoundingBoxDimensions from '../util/getScaledBoundingBoxDimensions';
import roundDimensionsTo64 from '../util/roundDimensionsTo64'; import roundDimensionsTo64 from '../util/roundDimensionsTo64';
import { import {
BoundingBoxScale, BoundingBoxScale,
CanvasImage, CanvasImage,
CanvasLayer, CanvasLayer,
CanvasLayerState, CanvasLayerState,
CanvasBaseLine,
CanvasMaskLine,
CanvasState, CanvasState,
CanvasTool, CanvasTool,
Dimensions, Dimensions,
@ -29,10 +32,6 @@ import {
export const initialLayerState: CanvasLayerState = { export const initialLayerState: CanvasLayerState = {
objects: [], objects: [],
stagingArea: { stagingArea: {
x: -1,
y: -1,
width: -1,
height: -1,
images: [], images: [],
selectedImageIndex: -1, selectedImageIndex: -1,
}, },
@ -72,6 +71,7 @@ const initialCanvasState: CanvasState = {
shouldDarkenOutsideBoundingBox: false, shouldDarkenOutsideBoundingBox: false,
shouldLockBoundingBox: false, shouldLockBoundingBox: false,
shouldPreserveMaskedArea: false, shouldPreserveMaskedArea: false,
shouldRestrictStrokesToBox: true,
shouldShowBoundingBox: true, shouldShowBoundingBox: true,
shouldShowBrush: true, shouldShowBrush: true,
shouldShowBrushPreview: false, shouldShowBrushPreview: false,
@ -122,7 +122,7 @@ export const canvasSlice = createSlice({
state.brushSize = action.payload; state.brushSize = action.payload;
}, },
clearMask: (state) => { clearMask: (state) => {
state.pastLayerStates.push({ ...state.layerState }); state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.layerState.objects = state.layerState.objects.filter( state.layerState.objects = state.layerState.objects.filter(
(obj) => !isCanvasMaskLine(obj) (obj) => !isCanvasMaskLine(obj)
); );
@ -177,10 +177,17 @@ export const canvasSlice = createSlice({
), ),
}; };
if (state.boundingBoxScaleMethod === 'auto') {
const scaledDimensions = getScaledBoundingBoxDimensions(
newBoundingBoxDimensions
);
state.scaledBoundingBoxDimensions = scaledDimensions;
}
state.boundingBoxDimensions = newBoundingBoxDimensions; state.boundingBoxDimensions = newBoundingBoxDimensions;
state.boundingBoxCoordinates = newBoundingBoxCoordinates; state.boundingBoxCoordinates = newBoundingBoxCoordinates;
state.pastLayerStates.push(state.layerState); state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.layerState = { state.layerState = {
...initialLayerState, ...initialLayerState,
@ -220,65 +227,13 @@ export const canvasSlice = createSlice({
state.stageCoordinates = newCoordinates; state.stageCoordinates = newCoordinates;
state.doesCanvasNeedScaling = true; state.doesCanvasNeedScaling = true;
}, },
setStageDimensions: (state, action: PayloadAction<Dimensions>) => {
state.stageDimensions = action.payload;
const { width: canvasWidth, height: canvasHeight } = action.payload;
const { width: boundingBoxWidth, height: boundingBoxHeight } =
state.boundingBoxDimensions;
const newBoundingBoxWidth = roundDownToMultiple(
_.clamp(boundingBoxWidth, 64, canvasWidth / state.stageScale),
64
);
const newBoundingBoxHeight = roundDownToMultiple(
_.clamp(boundingBoxHeight, 64, canvasHeight / state.stageScale),
64
);
state.boundingBoxDimensions = {
width: newBoundingBoxWidth,
height: newBoundingBoxHeight,
};
},
setBoundingBoxDimensions: (state, action: PayloadAction<Dimensions>) => { setBoundingBoxDimensions: (state, action: PayloadAction<Dimensions>) => {
const newDimensions = roundDimensionsTo64(action.payload); const newDimensions = roundDimensionsTo64(action.payload);
state.boundingBoxDimensions = newDimensions; state.boundingBoxDimensions = newDimensions;
if (state.boundingBoxScaleMethod === 'auto') { if (state.boundingBoxScaleMethod === 'auto') {
const { width, height } = newDimensions; const scaledDimensions = getScaledBoundingBoxDimensions(newDimensions);
const newScaledDimensions = { width, height }; state.scaledBoundingBoxDimensions = scaledDimensions;
const targetArea = 512 * 512;
const aspectRatio = width / height;
let currentArea = width * height;
let maxDimension = 448;
while (currentArea < targetArea) {
maxDimension += 64;
if (width === height) {
newScaledDimensions.width = 512;
newScaledDimensions.height = 512;
break;
} else {
if (aspectRatio > 1) {
newScaledDimensions.width = maxDimension;
newScaledDimensions.height = roundToMultiple(
maxDimension / aspectRatio,
64
);
} else if (aspectRatio < 1) {
newScaledDimensions.height = maxDimension;
newScaledDimensions.width = roundToMultiple(
maxDimension * aspectRatio,
64
);
}
currentArea =
newScaledDimensions.width * newScaledDimensions.height;
}
}
state.scaledBoundingBoxDimensions = newScaledDimensions;
} }
}, },
setBoundingBoxCoordinates: (state, action: PayloadAction<Vector2d>) => { setBoundingBoxCoordinates: (state, action: PayloadAction<Vector2d>) => {
@ -381,9 +336,49 @@ export const canvasSlice = createSlice({
state.futureLayerStates = []; state.futureLayerStates = [];
state.shouldShowStagingOutline = true; state.shouldShowStagingOutline = true;
state.shouldShowStagingOutline = true;
},
addFillRect: (state) => {
const { boundingBoxCoordinates, boundingBoxDimensions, brushColor } =
state;
state.pastLayerStates.push(_.cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift();
}
state.layerState.objects.push({
kind: 'fillRect',
layer: 'base',
...boundingBoxCoordinates,
...boundingBoxDimensions,
color: brushColor,
});
state.futureLayerStates = [];
},
addEraseRect: (state) => {
const { boundingBoxCoordinates, boundingBoxDimensions } = state;
state.pastLayerStates.push(_.cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift();
}
state.layerState.objects.push({
kind: 'eraseRect',
layer: 'base',
...boundingBoxCoordinates,
...boundingBoxDimensions,
});
state.futureLayerStates = [];
}, },
addLine: (state, action: PayloadAction<number[]>) => { addLine: (state, action: PayloadAction<number[]>) => {
const { tool, layer, brushColor, brushSize } = state; const { tool, layer, brushColor, brushSize, shouldRestrictStrokesToBox } =
state;
if (tool === 'move' || tool === 'colorPicker') return; if (tool === 'move' || tool === 'colorPicker') return;
@ -393,20 +388,29 @@ export const canvasSlice = createSlice({
const newColor = const newColor =
layer === 'base' && tool === 'brush' ? { color: brushColor } : {}; layer === 'base' && tool === 'brush' ? { color: brushColor } : {};
state.pastLayerStates.push(state.layerState); state.pastLayerStates.push(_.cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) { if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift(); state.pastLayerStates.shift();
} }
state.layerState.objects.push({ const newLine: CanvasMaskLine | CanvasBaseLine = {
kind: 'line', kind: 'line',
layer, layer,
tool, tool,
strokeWidth: newStrokeWidth, strokeWidth: newStrokeWidth,
points: action.payload, points: action.payload,
...newColor, ...newColor,
}); };
if (shouldRestrictStrokesToBox) {
newLine.clip = {
...state.boundingBoxCoordinates,
...state.boundingBoxDimensions,
};
}
state.layerState.objects.push(newLine);
state.futureLayerStates = []; state.futureLayerStates = [];
}, },
@ -422,7 +426,7 @@ export const canvasSlice = createSlice({
if (!targetState) return; if (!targetState) return;
state.futureLayerStates.unshift(state.layerState); state.futureLayerStates.unshift(_.cloneDeep(state.layerState));
if (state.futureLayerStates.length > state.maxHistory) { if (state.futureLayerStates.length > state.maxHistory) {
state.futureLayerStates.pop(); state.futureLayerStates.pop();
@ -435,7 +439,7 @@ export const canvasSlice = createSlice({
if (!targetState) return; if (!targetState) return;
state.pastLayerStates.push(state.layerState); state.pastLayerStates.push(_.cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) { if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift(); state.pastLayerStates.shift();
@ -459,7 +463,7 @@ export const canvasSlice = createSlice({
state.shouldShowIntermediates = action.payload; state.shouldShowIntermediates = action.payload;
}, },
resetCanvas: (state) => { resetCanvas: (state) => {
state.pastLayerStates.push(state.layerState); state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.layerState = initialLayerState; state.layerState = initialLayerState;
state.futureLayerStates = []; state.futureLayerStates = [];
@ -501,11 +505,21 @@ export const canvasSlice = createSlice({
newScale newScale
); );
const newBoundingBoxDimensions = { width: 512, height: 512 };
state.stageScale = newScale; state.stageScale = newScale;
state.stageCoordinates = newCoordinates; state.stageCoordinates = newCoordinates;
state.stageDimensions = newStageDimensions; state.stageDimensions = newStageDimensions;
state.boundingBoxCoordinates = { x: 0, y: 0 }; state.boundingBoxCoordinates = { x: 0, y: 0 };
state.boundingBoxDimensions = { width: 512, height: 512 }; state.boundingBoxDimensions = newBoundingBoxDimensions;
if (state.boundingBoxScaleMethod === 'auto') {
const scaledDimensions = getScaledBoundingBoxDimensions(
newBoundingBoxDimensions
);
state.scaledBoundingBoxDimensions = scaledDimensions;
}
return; return;
} }
@ -568,11 +582,20 @@ export const canvasSlice = createSlice({
newScale newScale
); );
const newBoundingBoxDimensions = { width: 512, height: 512 };
state.stageScale = newScale; state.stageScale = newScale;
state.stageCoordinates = newCoordinates; state.stageCoordinates = newCoordinates;
state.boundingBoxCoordinates = { x: 0, y: 0 }; state.boundingBoxCoordinates = { x: 0, y: 0 };
state.boundingBoxDimensions = { width: 512, height: 512 }; state.boundingBoxDimensions = newBoundingBoxDimensions;
if (state.boundingBoxScaleMethod === 'auto') {
const scaledDimensions = getScaledBoundingBoxDimensions(
newBoundingBoxDimensions
);
state.scaledBoundingBoxDimensions = scaledDimensions;
}
} }
}, },
resetCanvasView: ( resetCanvasView: (
@ -628,10 +651,19 @@ export const canvasSlice = createSlice({
newScale newScale
); );
const newBoundingBoxDimensions = { width: 512, height: 512 };
state.stageScale = newScale; state.stageScale = newScale;
state.stageCoordinates = newCoordinates; state.stageCoordinates = newCoordinates;
state.boundingBoxCoordinates = { x: 0, y: 0 }; state.boundingBoxCoordinates = { x: 0, y: 0 };
state.boundingBoxDimensions = { width: 512, height: 512 }; state.boundingBoxDimensions = newBoundingBoxDimensions;
if (state.boundingBoxScaleMethod === 'auto') {
const scaledDimensions = getScaledBoundingBoxDimensions(
newBoundingBoxDimensions
);
state.scaledBoundingBoxDimensions = scaledDimensions;
}
} }
}, },
nextStagingAreaImage: (state) => { nextStagingAreaImage: (state) => {
@ -708,6 +740,13 @@ export const canvasSlice = createSlice({
state.boundingBoxDimensions = newBoundingBoxDimensions; state.boundingBoxDimensions = newBoundingBoxDimensions;
state.boundingBoxCoordinates = newBoundingBoxCoordinates; state.boundingBoxCoordinates = newBoundingBoxCoordinates;
if (state.boundingBoxScaleMethod === 'auto') {
const scaledDimensions = getScaledBoundingBoxDimensions(
newBoundingBoxDimensions
);
state.scaledBoundingBoxDimensions = scaledDimensions;
}
} }
}, },
setBoundingBoxScaleMethod: ( setBoundingBoxScaleMethod: (
@ -715,6 +754,13 @@ export const canvasSlice = createSlice({
action: PayloadAction<BoundingBoxScale> action: PayloadAction<BoundingBoxScale>
) => { ) => {
state.boundingBoxScaleMethod = action.payload; state.boundingBoxScaleMethod = action.payload;
if (action.payload === 'auto') {
const scaledDimensions = getScaledBoundingBoxDimensions(
state.boundingBoxDimensions
);
state.scaledBoundingBoxDimensions = scaledDimensions;
}
}, },
setScaledBoundingBoxDimensions: ( setScaledBoundingBoxDimensions: (
state, state,
@ -731,6 +777,9 @@ export const canvasSlice = createSlice({
setShouldShowCanvasDebugInfo: (state, action: PayloadAction<boolean>) => { setShouldShowCanvasDebugInfo: (state, action: PayloadAction<boolean>) => {
state.shouldShowCanvasDebugInfo = action.payload; state.shouldShowCanvasDebugInfo = action.payload;
}, },
setShouldRestrictStrokesToBox: (state, action: PayloadAction<boolean>) => {
state.shouldRestrictStrokesToBox = action.payload;
},
setShouldCropToBoundingBoxOnSave: ( setShouldCropToBoundingBoxOnSave: (
state, state,
action: PayloadAction<boolean> action: PayloadAction<boolean>
@ -748,9 +797,7 @@ export const canvasSlice = createSlice({
state.tool = 'brush'; state.tool = 'brush';
}, },
setMergedCanvas: (state, action: PayloadAction<CanvasImage>) => { setMergedCanvas: (state, action: PayloadAction<CanvasImage>) => {
state.pastLayerStates.push({ state.pastLayerStates.push(_.cloneDeep(state.layerState));
...state.layerState,
});
state.futureLayerStates = []; state.futureLayerStates = [];
@ -766,10 +813,19 @@ export const canvasSlice = createSlice({
state.isMovingStage = false; state.isMovingStage = false;
state.isTransformingBoundingBox = false; state.isTransformingBoundingBox = false;
}, },
mouseLeftCanvas: (state) => {
state.cursorPosition = null;
state.isDrawing = false;
state.isMouseOverBoundingBox = false;
state.isMovingBoundingBox = false;
state.isTransformingBoundingBox = false;
},
}, },
}); });
export const { export const {
addEraseRect,
addFillRect,
addImageToStagingArea, addImageToStagingArea,
addLine, addLine,
addPointToCurrentLine, addPointToCurrentLine,
@ -779,6 +835,7 @@ export const {
commitStagingAreaImage, commitStagingAreaImage,
discardStagedImages, discardStagedImages,
fitBoundingBoxToStage, fitBoundingBoxToStage,
mouseLeftCanvas,
nextStagingAreaImage, nextStagingAreaImage,
prevStagingAreaImage, prevStagingAreaImage,
redo, redo,
@ -827,13 +884,13 @@ export const {
setShouldSnapToGrid, setShouldSnapToGrid,
setShouldUseInpaintReplace, setShouldUseInpaintReplace,
setStageCoordinates, setStageCoordinates,
setStageDimensions,
setStageScale, setStageScale,
setTool, setTool,
toggleShouldLockBoundingBox, toggleShouldLockBoundingBox,
toggleTool, toggleTool,
undo, undo,
setScaledBoundingBoxDimensions, setScaledBoundingBoxDimensions,
setShouldRestrictStrokesToBox,
} = canvasSlice.actions; } = canvasSlice.actions;
export default canvasSlice.reducer; export default canvasSlice.reducer;

64
frontend/src/features/canvas/store/canvasTypes.ts
View File

@ -1,5 +1,5 @@
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/invokeai';
import { Vector2d } from 'konva/lib/types'; import { IRect, Vector2d } from 'konva/lib/types';
import { RgbaColor } from 'react-colorful'; import { RgbaColor } from 'react-colorful';
export const LAYER_NAMES_DICT = [ export const LAYER_NAMES_DICT = [
@ -30,13 +30,6 @@ export type Dimensions = {
height: number; height: number;
}; };
export type CanvasAnyLine = {
kind: 'line';
tool: CanvasDrawingTool;
strokeWidth: number;
points: number[];
};
export type CanvasImage = { export type CanvasImage = {
kind: 'image'; kind: 'image';
layer: 'base'; layer: 'base';
@ -47,24 +40,54 @@ export type CanvasImage = {
image: InvokeAI.Image; image: InvokeAI.Image;
}; };
export type CanvasMaskLine = CanvasAnyLine & { export type CanvasMaskLine = {
layer: 'mask'; layer: 'mask';
kind: 'line';
tool: CanvasDrawingTool;
strokeWidth: number;
points: number[];
clip?: IRect;
}; };
export type CanvasLine = CanvasAnyLine & { export type CanvasBaseLine = {
layer: 'base'; layer: 'base';
color?: RgbaColor; color?: RgbaColor;
kind: 'line';
tool: CanvasDrawingTool;
strokeWidth: number;
points: number[];
clip?: IRect;
}; };
export type CanvasObject = CanvasImage | CanvasLine | CanvasMaskLine; export type CanvasFillRect = {
kind: 'fillRect';
export type CanvasLayerState = { layer: 'base';
objects: CanvasObject[];
stagingArea: {
x: number; x: number;
y: number; y: number;
width: number; width: number;
height: number; height: number;
color: RgbaColor;
};
export type CanvasEraseRect = {
kind: 'eraseRect';
layer: 'base';
x: number;
y: number;
width: number;
height: number;
};
export type CanvasObject =
| CanvasImage
| CanvasBaseLine
| CanvasMaskLine
| CanvasFillRect
| CanvasEraseRect;
export type CanvasLayerState = {
objects: CanvasObject[];
stagingArea: {
images: CanvasImage[]; images: CanvasImage[];
selectedImageIndex: number; selectedImageIndex: number;
}; };
@ -74,15 +97,21 @@ export type CanvasLayerState = {
export const isCanvasMaskLine = (obj: CanvasObject): obj is CanvasMaskLine => export const isCanvasMaskLine = (obj: CanvasObject): obj is CanvasMaskLine =>
obj.kind === 'line' && obj.layer === 'mask'; obj.kind === 'line' && obj.layer === 'mask';
export const isCanvasBaseLine = (obj: CanvasObject): obj is CanvasLine => export const isCanvasBaseLine = (obj: CanvasObject): obj is CanvasBaseLine =>
obj.kind === 'line' && obj.layer === 'base'; obj.kind === 'line' && obj.layer === 'base';
export const isCanvasBaseImage = (obj: CanvasObject): obj is CanvasImage => export const isCanvasBaseImage = (obj: CanvasObject): obj is CanvasImage =>
obj.kind === 'image' && obj.layer === 'base'; obj.kind === 'image' && obj.layer === 'base';
export const isCanvasFillRect = (obj: CanvasObject): obj is CanvasFillRect =>
obj.kind === 'fillRect' && obj.layer === 'base';
export const isCanvasEraseRect = (obj: CanvasObject): obj is CanvasEraseRect =>
obj.kind === 'eraseRect' && obj.layer === 'base';
export const isCanvasAnyLine = ( export const isCanvasAnyLine = (
obj: CanvasObject obj: CanvasObject
): obj is CanvasMaskLine | CanvasLine => obj.kind === 'line'; ): obj is CanvasMaskLine | CanvasBaseLine => obj.kind === 'line';
export interface CanvasState { export interface CanvasState {
boundingBoxCoordinates: Vector2d; boundingBoxCoordinates: Vector2d;
@ -119,6 +148,7 @@ export interface CanvasState {
shouldDarkenOutsideBoundingBox: boolean; shouldDarkenOutsideBoundingBox: boolean;
shouldLockBoundingBox: boolean; shouldLockBoundingBox: boolean;
shouldPreserveMaskedArea: boolean; shouldPreserveMaskedArea: boolean;
shouldRestrictStrokesToBox: boolean;
shouldShowBoundingBox: boolean; shouldShowBoundingBox: boolean;
shouldShowBrush: boolean; shouldShowBrush: boolean;
shouldShowBrushPreview: boolean; shouldShowBrushPreview: boolean;

39
frontend/src/features/canvas/util/getScaledBoundingBoxDimensions.ts Normal file
View File

@ -0,0 +1,39 @@
import { roundToMultiple } from 'common/util/roundDownToMultiple';
import { Dimensions } from '../store/canvasTypes';
const getScaledBoundingBoxDimensions = (dimensions: Dimensions) => {
const { width, height } = dimensions;
const scaledDimensions = { width, height };
const targetArea = 512 * 512;
const aspectRatio = width / height;
let currentArea = width * height;
let maxDimension = 448;
while (currentArea < targetArea) {
maxDimension += 64;
if (width === height) {
scaledDimensions.width = 512;
scaledDimensions.height = 512;
break;
} else {
if (aspectRatio > 1) {
scaledDimensions.width = maxDimension;
scaledDimensions.height = roundToMultiple(
maxDimension / aspectRatio,
64
);
} else if (aspectRatio < 1) {
scaledDimensions.height = maxDimension;
scaledDimensions.width = roundToMultiple(
maxDimension * aspectRatio,
64
);
}
currentArea = scaledDimensions.width * scaledDimensions.height;
}
}
return scaledDimensions;
};
export default getScaledBoundingBoxDimensions;

32
frontend/src/features/gallery/components/CurrentImageButtons.tsx
View File

@ -27,6 +27,7 @@ import {
FaCode, FaCode,
FaCopy, FaCopy,
FaDownload, FaDownload,
FaExpand,
FaExpandArrowsAlt, FaExpandArrowsAlt,
FaGrinStars, FaGrinStars,
FaQuoteRight, FaQuoteRight,
@ -357,6 +358,10 @@ const CurrentImageButtons = () => {
[currentImage, shouldShowImageDetails] [currentImage, shouldShowImageDetails]
); );
const handleLightBox = () => {
dispatch(setIsLightBoxOpen(!isLightBoxOpen));
};
return ( return (
<div className="current-image-options"> <div className="current-image-options">
<ButtonGroup isAttached={true}> <ButtonGroup isAttached={true}>
@ -396,29 +401,38 @@ const CurrentImageButtons = () => {
</IAIButton> </IAIButton>
</div> </div>
</IAIPopover> </IAIPopover>
<IAIIconButton
icon={<FaExpand />}
tooltip={!isLightBoxOpen ? 'Open In Viewer (Z)' : 'Close Viewer (Z)'}
aria-label={
!isLightBoxOpen ? 'Open In Viewer (Z)' : 'Close Viewer (Z)'
}
data-selected={isLightBoxOpen}
onClick={handleLightBox}
/>
</ButtonGroup> </ButtonGroup>
<ButtonGroup isAttached={true}> <ButtonGroup isAttached={true}>
<IAIIconButton <IAIIconButton
icon={<FaQuoteRight />} icon={<FaQuoteRight />}
tooltip="Use Prompt" tooltip="Use Prompt (P)"
aria-label="Use Prompt" aria-label="Use Prompt (P)"
isDisabled={!currentImage?.metadata?.image?.prompt} isDisabled={!currentImage?.metadata?.image?.prompt}
onClick={handleClickUsePrompt} onClick={handleClickUsePrompt}
/> />
<IAIIconButton <IAIIconButton
icon={<FaSeedling />} icon={<FaSeedling />}
tooltip="Use Seed" tooltip="Use Seed (S)"
aria-label="Use Seed" aria-label="Use Seed (S)"
isDisabled={!currentImage?.metadata?.image?.seed} isDisabled={!currentImage?.metadata?.image?.seed}
onClick={handleClickUseSeed} onClick={handleClickUseSeed}
/> />
<IAIIconButton <IAIIconButton
icon={<FaAsterisk />} icon={<FaAsterisk />}
tooltip="Use All" tooltip="Use All (A)"
aria-label="Use All" aria-label="Use All (A)"
isDisabled={ isDisabled={
!['txt2img', 'img2img'].includes( !['txt2img', 'img2img'].includes(
currentImage?.metadata?.image?.type currentImage?.metadata?.image?.type
@ -474,13 +488,15 @@ const CurrentImageButtons = () => {
</IAIPopover> </IAIPopover>
</ButtonGroup> </ButtonGroup>
<ButtonGroup isAttached={true}>
<IAIIconButton <IAIIconButton
icon={<FaCode />} icon={<FaCode />}
tooltip="Details" tooltip="Info (I)"
aria-label="Details" aria-label="Info (I)"
data-selected={shouldShowImageDetails} data-selected={shouldShowImageDetails}
onClick={handleClickShowImageDetails} onClick={handleClickShowImageDetails}
/> />
</ButtonGroup>
<DeleteImageModal image={currentImage}> <DeleteImageModal image={currentImage}>
<IAIIconButton <IAIIconButton

1
frontend/src/features/gallery/components/CurrentImageDisplay.scss
View File

@ -24,7 +24,6 @@
max-height: 100%; max-height: 100%;
height: auto; height: auto;
position: absolute; position: absolute;
cursor: pointer;
} }
} }

10
frontend/src/features/gallery/components/CurrentImagePreview.tsx
View File

@ -10,10 +10,7 @@ import {
} from 'features/gallery/store/gallerySlice'; } from 'features/gallery/store/gallerySlice';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash'; import _ from 'lodash';
import { import { OptionsState } from 'features/options/store/optionsSlice';
OptionsState,
setIsLightBoxOpen,
} from 'features/options/store/optionsSlice';
import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer'; import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
export const imagesSelector = createSelector( export const imagesSelector = createSelector(
@ -82,10 +79,6 @@ export default function CurrentImagePreview() {
dispatch(selectNextImage()); dispatch(selectNextImage());
}; };
const handleLightBox = () => {
dispatch(setIsLightBoxOpen(true));
};
return ( return (
<div className={'current-image-preview'}> <div className={'current-image-preview'}>
{imageToDisplay && ( {imageToDisplay && (
@ -93,7 +86,6 @@ export default function CurrentImagePreview() {
src={imageToDisplay.url} src={imageToDisplay.url}
width={imageToDisplay.width} width={imageToDisplay.width}
height={imageToDisplay.height} height={imageToDisplay.height}
onClick={handleLightBox}
style={{ style={{
imageRendering: isIntermediate ? 'pixelated' : 'initial', imageRendering: isIntermediate ? 'pixelated' : 'initial',
}} }}

3
frontend/src/features/gallery/components/DeleteImageModal.tsx
View File

@ -116,7 +116,8 @@ const DeleteImageModal = forwardRef(
<AlertDialogBody> <AlertDialogBody>
<Flex direction={'column'} gap={5}> <Flex direction={'column'} gap={5}>
<Text> <Text>
Are you sure? You can't undo this action afterwards. Are you sure? Deleted images will be sent to the Bin. You
can restore from there if you wish to.
</Text> </Text>
<FormControl> <FormControl>
<Flex alignItems={'center'}> <Flex alignItems={'center'}>

8
frontend/src/features/gallery/components/HoverableImage.tsx
View File

@ -159,6 +159,11 @@ const HoverableImage = memo((props: HoverableImageProps) => {
e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.effectAllowed = 'move';
}; };
const handleLightBox = () => {
dispatch(setIsLightBoxOpen(true));
dispatch(setCurrentImage(image));
};
return ( return (
<ContextMenu.Root <ContextMenu.Root
onOpenChange={(open: boolean) => { onOpenChange={(open: boolean) => {
@ -220,6 +225,9 @@ const HoverableImage = memo((props: HoverableImageProps) => {
e.detail.originalEvent.preventDefault(); e.detail.originalEvent.preventDefault();
}} }}
> >
<ContextMenu.Item onClickCapture={handleLightBox}>
Open In Viewer
</ContextMenu.Item>
<ContextMenu.Item <ContextMenu.Item
onClickCapture={handleUsePrompt} onClickCapture={handleUsePrompt}
disabled={image?.metadata?.image?.prompt === undefined} disabled={image?.metadata?.image?.prompt === undefined}

4
frontend/src/features/gallery/components/ImageGallery.tsx
View File

@ -166,7 +166,7 @@ export default function ImageGallery() {
dispatch(selectPrevImage()); dispatch(selectPrevImage());
}, },
{ {
enabled: !isStaging, enabled: !isStaging || activeTabName !== 'unifiedCanvas',
}, },
[isStaging] [isStaging]
); );
@ -177,7 +177,7 @@ export default function ImageGallery() {
dispatch(selectNextImage()); dispatch(selectNextImage());
}, },
{ {
enabled: !isStaging, enabled: !isStaging || activeTabName !== 'unifiedCanvas',
}, },
[isStaging] [isStaging]
); );

12
frontend/src/features/lightbox/components/Lightbox.scss
View File

@ -10,6 +10,7 @@
top: 0; top: 0;
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
z-index: 30; z-index: 30;
animation: popIn 0.3s ease-in;
.image-gallery-wrapper { .image-gallery-wrapper {
max-height: 100% !important; max-height: 100% !important;
@ -75,3 +76,14 @@
row-gap: 0.5rem; row-gap: 0.5rem;
} }
} }
@keyframes popIn {
from {
opacity: 0;
filter: blur(100);
}
to {
opacity: 1;
filter: blur(0);
}
}

17
frontend/src/features/lightbox/components/ReactPanZoom.tsx
View File

@ -47,7 +47,12 @@ export default function ReactPanZoom({
}; };
return ( return (
<TransformWrapper centerOnInit minScale={0.1}> <TransformWrapper
centerOnInit
minScale={0.1}
initialPositionX={50}
initialPositionY={50}
>
{({ zoomIn, zoomOut, resetTransform, centerView }) => ( {({ zoomIn, zoomOut, resetTransform, centerView }) => (
<> <>
<div className="lightbox-image-options"> <div className="lightbox-image-options">
@ -103,8 +108,12 @@ export default function ReactPanZoom({
fontSize={20} fontSize={20}
/> />
</div> </div>
<TransformComponent
<TransformComponent wrapperStyle={{ width: '100%', height: '100%' }}> wrapperStyle={{
width: '100%',
height: '100%',
}}
>
<img <img
style={{ style={{
transform: `rotate(${rotation * 90}deg) scaleX(${ transform: `rotate(${rotation * 90}deg) scaleX(${
@ -116,7 +125,7 @@ export default function ReactPanZoom({
alt={alt} alt={alt}
ref={ref} ref={ref}
className={styleClass ? styleClass : ''} className={styleClass ? styleClass : ''}
onLoad={() => centerView()} onLoad={() => centerView(1, 0, 'easeOut')}
/> />
</TransformComponent> </TransformComponent>
</> </>

5
frontend/src/features/options/components/AdvancedOptions/Canvas/InfillAndScalingOptions.tsx
View File

@ -5,7 +5,6 @@ import IAISelect from 'common/components/IAISelect';
import IAISlider from 'common/components/IAISlider'; import IAISlider from 'common/components/IAISlider';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { import {
setBoundingBoxDimensions,
setBoundingBoxScaleMethod, setBoundingBoxScaleMethod,
setScaledBoundingBoxDimensions, setScaledBoundingBoxDimensions,
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
@ -31,13 +30,11 @@ const selector = createSelector(
const { infill_methods: availableInfillMethods } = system; const { infill_methods: availableInfillMethods } = system;
const { const {
boundingBoxDimensions,
boundingBoxScaleMethod: boundingBoxScale, boundingBoxScaleMethod: boundingBoxScale,
scaledBoundingBoxDimensions, scaledBoundingBoxDimensions,
} = canvas; } = canvas;
return { return {
boundingBoxDimensions,
boundingBoxScale, boundingBoxScale,
scaledBoundingBoxDimensions, scaledBoundingBoxDimensions,
tileSize, tileSize,
@ -58,7 +55,6 @@ const InfillAndScalingOptions = () => {
const { const {
tileSize, tileSize,
infillMethod, infillMethod,
boundingBoxDimensions,
availableInfillMethods, availableInfillMethods,
boundingBoxScale, boundingBoxScale,
isManual, isManual,
@ -105,7 +101,6 @@ const InfillAndScalingOptions = () => {
e: ChangeEvent<HTMLSelectElement> e: ChangeEvent<HTMLSelectElement>
) => { ) => {
dispatch(setBoundingBoxScaleMethod(e.target.value as BoundingBoxScale)); dispatch(setBoundingBoxScaleMethod(e.target.value as BoundingBoxScale));
dispatch(setBoundingBoxDimensions(boundingBoxDimensions));
}; };
return ( return (

4
frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions.tsx
View File

@ -72,8 +72,8 @@ const SeamCorrectionOptions = () => {
<IAISlider <IAISlider
sliderMarkRightOffset={-2} sliderMarkRightOffset={-2}
label={'Seam Strength'} label={'Seam Strength'}
min={0} min={0.01}
max={1} max={0.99}
step={0.01} step={0.01}
value={seamStrength} value={seamStrength}
onChange={(v) => { onChange={(v) => {

13
frontend/src/features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength.tsx
View File

@ -19,7 +19,7 @@ export default function ImageToImageStrength(props: ImageToImageStrengthProps) {
const handleChangeStrength = (v: number) => dispatch(setImg2imgStrength(v)); const handleChangeStrength = (v: number) => dispatch(setImg2imgStrength(v));
const handleImg2ImgStrengthReset = () => { const handleImg2ImgStrengthReset = () => {
dispatch(setImg2imgStrength(0.5)); dispatch(setImg2imgStrength(0.75));
}; };
return ( return (
@ -38,16 +38,5 @@ export default function ImageToImageStrength(props: ImageToImageStrengthProps) {
inputWidth={'5.5rem'} inputWidth={'5.5rem'}
handleReset={handleImg2ImgStrengthReset} handleReset={handleImg2ImgStrengthReset}
/> />
// <IAINumberInput
// label={label}
// step={0.01}
// min={0.01}
// max={0.99}
// onChange={handleChangeStrength}
// value={img2imgStrength}
// width="100%"
// isInteger={false}
// styleClass={styleClass}
// />
); );
} }

6
frontend/src/features/system/components/ClearTempFolderButtonModal.tsx
View File

@ -1,7 +1,8 @@
import { emptyTempFolder } from 'app/socketio/actions'; import { emptyTempFolder } from 'app/socketio/actions';
import { useAppDispatch } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/store';
import IAIAlertDialog from 'common/components/IAIAlertDialog'; import IAIAlertDialog from 'common/components/IAIAlertDialog';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { import {
clearCanvasHistory, clearCanvasHistory,
resetCanvas, resetCanvas,
@ -9,6 +10,7 @@ import {
import { FaTrash } from 'react-icons/fa'; import { FaTrash } from 'react-icons/fa';
const EmptyTempFolderButtonModal = () => { const EmptyTempFolderButtonModal = () => {
const isStaging = useAppSelector(isStagingSelector);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const acceptCallback = () => { const acceptCallback = () => {
@ -23,7 +25,7 @@ const EmptyTempFolderButtonModal = () => {
acceptCallback={acceptCallback} acceptCallback={acceptCallback}
acceptButtonText={'Empty Folder'} acceptButtonText={'Empty Folder'}
triggerComponent={ triggerComponent={
<IAIButton leftIcon={<FaTrash />} size={'sm'}> <IAIButton leftIcon={<FaTrash />} size={'sm'} isDisabled={isStaging}>
Empty Temp Image Folder Empty Temp Image Folder
</IAIButton> </IAIButton>
} }

10
frontend/src/features/system/components/HotkeysModal/HotkeysModal.tsx
View File

@ -173,6 +173,16 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
desc: 'Allows canvas navigation', desc: 'Allows canvas navigation',
hotkey: 'V', hotkey: 'V',
}, },
{
title: 'Fill Bounding Box',
desc: 'Fills the bounding box with brush color',
hotkey: 'Shift + F',
},
{
title: 'Erase Bounding Box',
desc: 'Erases the bounding box area',
hotkey: 'Delete / Backspace',
},
{ {
title: 'Select Color Picker', title: 'Select Color Picker',
desc: 'Selects the canvas color picker', desc: 'Selects the canvas color picker',