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

revert(ui): roll back flip, doesn't work with rotate yet

Browse Source
This commit is contained in:
psychedelicious 2024-08-28 12:03:38 +10:00
parent 20b563c4cb
commit b2b2b73aed
2 changed files with 38 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
invokeai/frontend/web/src/features/controlLayers/components/Transform.tsx
View File

@ -1,4 +1,4 @@
import { Button, ButtonGroup, Flex, Heading } from '@invoke-ai/ui-library'; import { Button, ButtonGroup, Flex, Heading, Spacer } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { import {
@ -8,13 +8,7 @@ import {
import { useEntityAdapter } from 'features/controlLayers/hooks/useEntityAdapter'; import { useEntityAdapter } from 'features/controlLayers/hooks/useEntityAdapter';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { import { PiArrowsCounterClockwiseBold, PiCheckBold, PiXBold } from 'react-icons/pi';
PiArrowsCounterClockwiseBold,
PiCheckBold,
PiFlipHorizontalFill,
PiFlipVerticalFill,
PiXBold,
} from 'react-icons/pi';
const TransformBox = memo(() => { const TransformBox = memo(() => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -38,33 +32,17 @@ const TransformBox = memo(() => {
<Heading size="md" color="base.300" userSelect="none"> <Heading size="md" color="base.300" userSelect="none">
{t('controlLayers.tool.transform')} {t('controlLayers.tool.transform')}
</Heading> </Heading>
<ButtonGroup isAttached={false} size="sm" justifyContent="center"> <ButtonGroup isAttached={false} size="sm" w="full">
<Button
leftIcon={<PiFlipHorizontalFill />}
onClick={adapter.transformer.flipHorizontal}
isLoading={isProcessing}
loadingText={t('controlLayers.flipHorizontal')}
>
{t('controlLayers.flipHorizontal')}
</Button>
<Button
leftIcon={<PiFlipVerticalFill />}
onClick={adapter.transformer.flipVertical}
isLoading={isProcessing}
loadingText={t('controlLayers.flipVertical')}
>
{t('controlLayers.flipVertical')}
</Button>
<Button <Button
leftIcon={<PiArrowsCounterClockwiseBold />} leftIcon={<PiArrowsCounterClockwiseBold />}
onClick={adapter.transformer.resetTransform} onClick={adapter.transformer.resetTransform}
isLoading={isProcessing} isLoading={isProcessing}
loadingText={t('controlLayers.reset')} loadingText={t('controlLayers.reset')}
variant="ghost"
> >
{t('accessibility.reset')} {t('accessibility.reset')}
</Button> </Button>
</ButtonGroup> <Spacer />
<ButtonGroup isAttached={false} size="sm" alignSelf="self-end">
<Button <Button
leftIcon={<PiCheckBold />} leftIcon={<PiCheckBold />}
onClick={adapter.transformer.applyTransform} onClick={adapter.transformer.applyTransform}

65
invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityTransformer.ts
View File

@ -389,42 +389,43 @@ export class CanvasEntityTransformer extends CanvasModuleABC {
this.parent.konva.layer.add(this.konva.transformer); this.parent.konva.layer.add(this.konva.transformer);
} }
flipHorizontal = () => { // TODO(psyche): These don't work when the entity is rotated, need to do some math to offset the flip after rotation
if (!this.isTransforming || this.$isProcessing.get()) { // flipHorizontal = () => {
return; // if (!this.isTransforming || this.$isProcessing.get()) {
} // return;
// }
// Flipping horizontally = flipping across the vertical axis: // // Flipping horizontally = flipping across the vertical axis:
// - Flip by negating the x scale // // - Flip by negating the x scale
// - Restore position by translating the rect rightwards by the width of the rect // // - Restore position by translating the rect rightwards by the width of the rect
const x = this.konva.proxyRect.x(); // const x = this.konva.proxyRect.x();
const width = this.konva.proxyRect.width(); // const width = this.konva.proxyRect.width();
const scaleX = this.konva.proxyRect.scaleX(); // const scaleX = this.konva.proxyRect.scaleX();
this.konva.proxyRect.setAttrs({ // this.konva.proxyRect.setAttrs({
scaleX: -scaleX, // scaleX: -scaleX,
x: x + width * scaleX, // x: x + width * scaleX,
}); // });
this.syncObjectGroupWithProxyRect(); // this.syncObjectGroupWithProxyRect();
}; // };
flipVertical = () => { // flipVertical = () => {
if (!this.isTransforming || this.$isProcessing.get()) { // if (!this.isTransforming || this.$isProcessing.get()) {
return; // return;
} // }
// Flipping vertically = flipping across the horizontal axis: // // Flipping vertically = flipping across the horizontal axis:
// - Flip by negating the y scale // // - Flip by negating the y scale
// - Restore position by translating the rect downwards by the height of the rect // // - Restore position by translating the rect downwards by the height of the rect
const y = this.konva.proxyRect.y(); // const y = this.konva.proxyRect.y();
const height = this.konva.proxyRect.height(); // const height = this.konva.proxyRect.height();
const scaleY = this.konva.proxyRect.scaleY(); // const scaleY = this.konva.proxyRect.scaleY();
this.konva.proxyRect.setAttrs({ // this.konva.proxyRect.setAttrs({
scaleY: -scaleY, // scaleY: -scaleY,
y: y + height * scaleY, // y: y + height * scaleY,
}); // });
this.syncObjectGroupWithProxyRect(); // this.syncObjectGroupWithProxyRect();
}; // };
syncObjectGroupWithProxyRect = () => { syncObjectGroupWithProxyRect = () => {
this.parent.renderer.konva.objectGroup.setAttrs({ this.parent.renderer.konva.objectGroup.setAttrs({