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 { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import {
@ -8,13 +8,7 @@ import {
import { useEntityAdapter } from 'features/controlLayers/hooks/useEntityAdapter';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import {
PiArrowsCounterClockwiseBold,
PiCheckBold,
PiFlipHorizontalFill,
PiFlipVerticalFill,
PiXBold,
} from 'react-icons/pi';
import { PiArrowsCounterClockwiseBold, PiCheckBold, PiXBold } from 'react-icons/pi';
const TransformBox = memo(() => {
const { t } = useTranslation();
@ -38,33 +32,17 @@ const TransformBox = memo(() => {
<Heading size="md" color="base.300" userSelect="none">
{t('controlLayers.tool.transform')}
</Heading>
<ButtonGroup isAttached={false} size="sm" justifyContent="center">
<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>
<ButtonGroup isAttached={false} size="sm" w="full">
<Button
leftIcon={<PiArrowsCounterClockwiseBold />}
onClick={adapter.transformer.resetTransform}
isLoading={isProcessing}
loadingText={t('controlLayers.reset')}
variant="ghost"
>
{t('accessibility.reset')}
</Button>
</ButtonGroup>
<ButtonGroup isAttached={false} size="sm" alignSelf="self-end">
<Spacer />
<Button
leftIcon={<PiCheckBold />}
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);
}
flipHorizontal = () => {
if (!this.isTransforming || this.$isProcessing.get()) {
return;
}
// TODO(psyche): These don't work when the entity is rotated, need to do some math to offset the flip after rotation
// flipHorizontal = () => {
// if (!this.isTransforming || this.$isProcessing.get()) {
// return;
// }
// Flipping horizontally = flipping across the vertical axis:
// - Flip by negating the x scale
// - Restore position by translating the rect rightwards by the width of the rect
const x = this.konva.proxyRect.x();
const width = this.konva.proxyRect.width();
const scaleX = this.konva.proxyRect.scaleX();
this.konva.proxyRect.setAttrs({
scaleX: -scaleX,
x: x + width * scaleX,
});
// // Flipping horizontally = flipping across the vertical axis:
// // - Flip by negating the x scale
// // - Restore position by translating the rect rightwards by the width of the rect
// const x = this.konva.proxyRect.x();
// const width = this.konva.proxyRect.width();
// const scaleX = this.konva.proxyRect.scaleX();
// this.konva.proxyRect.setAttrs({
// scaleX: -scaleX,
// x: x + width * scaleX,
// });
this.syncObjectGroupWithProxyRect();
};
// this.syncObjectGroupWithProxyRect();
// };
flipVertical = () => {
if (!this.isTransforming || this.$isProcessing.get()) {
return;
}
// flipVertical = () => {
// if (!this.isTransforming || this.$isProcessing.get()) {
// return;
// }
// Flipping vertically = flipping across the horizontal axis:
// - Flip by negating the y scale
// - Restore position by translating the rect downwards by the height of the rect
const y = this.konva.proxyRect.y();
const height = this.konva.proxyRect.height();
const scaleY = this.konva.proxyRect.scaleY();
this.konva.proxyRect.setAttrs({
scaleY: -scaleY,
y: y + height * scaleY,
});
this.syncObjectGroupWithProxyRect();
};
// // Flipping vertically = flipping across the horizontal axis:
// // - Flip by negating the y scale
// // - Restore position by translating the rect downwards by the height of the rect
// const y = this.konva.proxyRect.y();
// const height = this.konva.proxyRect.height();
// const scaleY = this.konva.proxyRect.scaleY();
// this.konva.proxyRect.setAttrs({
// scaleY: -scaleY,
// y: y + height * scaleY,
// });
// this.syncObjectGroupWithProxyRect();
// };
syncObjectGroupWithProxyRect = () => {
this.parent.renderer.konva.objectGroup.setAttrs({