github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): move tool fixes, add transform tool

Browse Source
This commit is contained in:
psychedelicious
2024-07-19 13:16:02 +10:00
parent d19479941d
commit bb52dccc7a
3 changed files with 127 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx
View File

@@ -5,6 +5,7 @@ import { BrushToolButton } from 'features/controlLayers/components/BrushToolButt
import { EraserToolButton } from 'features/controlLayers/components/EraserToolButton';
import { MoveToolButton } from 'features/controlLayers/components/MoveToolButton';
import { RectToolButton } from 'features/controlLayers/components/RectToolButton';
import { TransformToolButton } from 'features/controlLayers/components/TransformToolButton';
import { ViewToolButton } from 'features/controlLayers/components/ViewToolButton';
import { useCanvasDeleteLayerHotkey } from 'features/controlLayers/hooks/useCanvasDeleteLayerHotkey';
import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey';
@@ -21,6 +22,7 @@ export const ToolChooser: React.FC = () => {
<EraserToolButton />
<RectToolButton />
<MoveToolButton />
<TransformToolButton />
<ViewToolButton />
<BboxToolButton />
</ButtonGroup>

35
invokeai/frontend/web/src/features/controlLayers/components/TransformToolButton.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { toolChanged } from 'features/controlLayers/store/canvasV2Slice';
import { memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { PiResizeBold } from 'react-icons/pi';
export const TransformToolButton = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const isSelected = useAppSelector((s) => s.canvasV2.tool.selected === 'transform');
const isDisabled = useAppSelector(
(s) => s.canvasV2.selectedEntityIdentifier === null || s.canvasV2.session.isStaging
);
const onClick = useCallback(() => {
dispatch(toolChanged('transform'));
}, [dispatch]);
useHotkeys(['ctrl+t', 'meta+t'], onClick, { enabled: !isDisabled }, [isDisabled, onClick]);
return (
<IconButton
aria-label={`${t('unifiedCanvas.transform')} (Ctrl+T)`}
tooltip={`${t('unifiedCanvas.transform')} (Ctrl+T)`}
icon={<PiResizeBold />}
variant={isSelected ? 'solid' : 'outline'}
onClick={onClick}
isDisabled={isDisabled}
/>
);
});
TransformToolButton.displayName = 'TransformToolButton';