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

Rearrange some canvas toolbar icons

Browse Source 
Put brush stuff together and canvas movement stuff together
This commit is contained in:
blessedcoolant 2022-11-20 23:03:31 +13:00
parent e1e978b423
commit 088fd97418
2 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,12 +8,7 @@ import {
import { useAppDispatch, useAppSelector } from 'app/store';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import {
FaArrowsAlt,
FaEraser,
FaPaintBrush,
FaSlidersH,
} from 'react-icons/fa';
import { FaEraser, FaPaintBrush, FaSlidersH } from 'react-icons/fa';
import {
canvasSelector,
isStagingSelector,
@ -52,18 +47,6 @@ const IAICanvasToolChooserOptions = () => {
const { tool, brushColor, brushSize, brushColorString, isStaging } =
useAppSelector(selector);
useHotkeys(
['v'],
() => {
handleSelectMoveTool();
},
{
enabled: () => true,
preventDefault: true,
},
[]
);
useHotkeys(
['b'],
() => {
@ -114,7 +97,6 @@ const IAICanvasToolChooserOptions = () => {
const handleSelectBrushTool = () => dispatch(setTool('brush'));
const handleSelectEraserTool = () => dispatch(setTool('eraser'));
const handleSelectMoveTool = () => dispatch(setTool('move'));
return (
<ButtonGroup isAttached>
@ -134,20 +116,12 @@ const IAICanvasToolChooserOptions = () => {
isDisabled={isStaging}
onClick={() => dispatch(setTool('eraser'))}
/>
<IAIIconButton
aria-label="Move Tool (V)"
tooltip="Move Tool (V)"
icon={<FaArrowsAlt />}
data-selected={tool === 'move' || isStaging}
onClick={handleSelectMoveTool}
/>
<IAIPopover
trigger="hover"
triggerComponent={
<IAIIconButton
aria-label="Tool Options"
tooltip="Tool Options"
aria-label="Brush Options"
tooltip="Brush Options"
icon={<FaSlidersH />}
/>
}

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

@ -4,11 +4,13 @@ import {
resetCanvas,
resetCanvasView,
resizeAndScaleCanvas,
setTool,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/store';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import {
FaArrowsAlt,
FaCopy,
FaCrosshairs,
FaDownload,
@ -27,14 +29,21 @@ import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
import { systemSelector } from 'features/system/store/systemSelectors';
import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
import useImageUploader from 'common/hooks/useImageUploader';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
export const selector = createSelector(
[systemSelector],
(system) => {
[systemSelector, canvasSelector, isStagingSelector],
(system, canvas, isStaging) => {
const { isProcessing } = system;
const { tool } = canvas;
return {
isProcessing,
isStaging,
tool,
};
},
{
@ -46,11 +55,23 @@ export const selector = createSelector(
const IAICanvasOutpaintingControls = () => {
const dispatch = useAppDispatch();
const { isProcessing } = useAppSelector(selector);
const { isProcessing, isStaging, tool } = useAppSelector(selector);
const canvasBaseLayer = getCanvasBaseLayer();
const { openUploader } = useImageUploader();
useHotkeys(
['v'],
() => {
handleSelectMoveTool();
},
{
enabled: () => true,
preventDefault: true,
},
[]
);
useHotkeys(
['r'],
() => {
@ -111,6 +132,8 @@ const IAICanvasOutpaintingControls = () => {
[canvasBaseLayer, isProcessing]
);
const handleSelectMoveTool = () => dispatch(setTool('move'));
const handleResetCanvasView = () => {
const canvasBaseLayer = getCanvasBaseLayer();
if (!canvasBaseLayer) return;
@ -170,6 +193,22 @@ const IAICanvasOutpaintingControls = () => {
<IAICanvasMaskOptions />
<IAICanvasToolChooserOptions />
<ButtonGroup isAttached>
<IAIIconButton
aria-label="Move Tool (V)"
tooltip="Move Tool (V)"
icon={<FaArrowsAlt />}
data-selected={tool === 'move' || isStaging}
onClick={handleSelectMoveTool}
/>
<IAIIconButton
aria-label="Reset View (R)"
tooltip="Reset View (R)"
icon={<FaCrosshairs />}
onClick={handleResetCanvasView}
/>
</ButtonGroup>
<ButtonGroup isAttached>
<IAIIconButton
aria-label="Merge Visible (Shift+M)"
@ -212,12 +251,6 @@ const IAICanvasOutpaintingControls = () => {
icon={<FaUpload />}
onClick={openUploader}
/>
<IAIIconButton
aria-label="Reset View (R)"
tooltip="Reset View (R)"
icon={<FaCrosshairs />}
onClick={handleResetCanvasView}
/>
<IAIIconButton
aria-label="Clear Canvas"
tooltip="Clear Canvas"