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

fix(ui): multiple stages

Browse Source
This commit is contained in:
psychedelicious 2024-06-12 16:31:18 +10:00
parent 22925f92bd
commit c6774b829d
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,7 @@ import { isRegionalGuidanceLayer } from 'features/controlLayers/store/types';
import Konva from 'konva'; import Konva from 'konva';
import type { IRect } from 'konva/lib/types'; import type { IRect } from 'konva/lib/types';
import { clamp } from 'lodash-es'; import { clamp } from 'lodash-es';
import { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react'; import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { getImageDTO } from 'services/api/endpoints/images'; import { getImageDTO } from 'services/api/endpoints/images';
import { useDevicePixelRatio } from 'use-device-pixel-ratio'; import { useDevicePixelRatio } from 'use-device-pixel-ratio';
@ -327,6 +327,13 @@ const useStageRenderer = (stage: Konva.Stage, container: HTMLDivElement | null,
useLayoutEffect(() => { useLayoutEffect(() => {
Konva.pixelRatio = dpr; Konva.pixelRatio = dpr;
}, [dpr]); }, [dpr]);
useEffect(
() => () => {
stage.destroy();
},
[stage]
);
}; };
type Props = { type Props = {
@ -334,8 +341,6 @@ type Props = {
}; };
export const StageComponent = memo(({ asPreview = false }: Props) => { export const StageComponent = memo(({ asPreview = false }: Props) => {
const { t } = useTranslation();
const layerCount = useAppSelector(selectLayerCount);
const [stage] = useState( const [stage] = useState(
() => () =>
new Konva.Stage({ new Konva.Stage({
@ -363,12 +368,7 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
backgroundRepeat="repeat" backgroundRepeat="repeat"
opacity={0.2} opacity={0.2}
/> />
{layerCount === 0 && !asPreview && ( {!asPreview && <NoLayersFallback />}
<Flex position="absolute" w="full" h="full" alignItems="center" justifyContent="center">
<Heading color="base.200">{t('controlLayers.noLayersAdded')}</Heading>
</Flex>
)}
<Flex <Flex
position="absolute" position="absolute"
top={0} top={0}
@ -391,3 +391,17 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
}); });
StageComponent.displayName = 'StageComponent'; StageComponent.displayName = 'StageComponent';
const NoLayersFallback = () => {
const { t } = useTranslation();
const layerCount = useAppSelector(selectLayerCount);
if (layerCount) {
return null;
}
return (
<Flex position="absolute" w="full" h="full" alignItems="center" justifyContent="center">
<Heading color="base.200">{t('controlLayers.noLayersAdded')}</Heading>
</Flex>
);
};