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

feat(ui): remove unused asPreview for StageComponent

Browse Source
This commit is contained in:
psychedelicious 2024-08-29 21:27:14 +10:00
parent 1e134de771
commit e933d1ae2b
1 changed files with 9 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,20 +8,18 @@ import { useAppSelector } from 'app/store/storeHooks';
import { HeadsUpDisplay } from 'features/controlLayers/components/HeadsUpDisplay'; import { HeadsUpDisplay } from 'features/controlLayers/components/HeadsUpDisplay';
import { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { TRANSPARENCY_CHECKER_PATTERN } from 'features/controlLayers/konva/constants'; import { TRANSPARENCY_CHECKER_PATTERN } from 'features/controlLayers/konva/constants';
import { getPrefixedId } from 'features/controlLayers/konva/util';
import { selectCanvasSettingsSlice } from 'features/controlLayers/store/canvasSettingsSlice'; import { selectCanvasSettingsSlice } from 'features/controlLayers/store/canvasSettingsSlice';
import Konva from 'konva'; import Konva from 'konva';
import { memo, useCallback, useEffect, useLayoutEffect, useState } from 'react'; import { memo, useCallback, useEffect, useLayoutEffect, useState } from 'react';
import { useDevicePixelRatio } from 'use-device-pixel-ratio'; import { useDevicePixelRatio } from 'use-device-pixel-ratio';
import { v4 as uuidv4 } from 'uuid';
const log = logger('canvas'); const log = logger('canvas');
const showHud = false;
// This will log warnings when layers > 5 - maybe use `import.meta.env.MODE === 'development'` instead? // This will log warnings when layers > 5 - maybe use `import.meta.env.MODE === 'development'` instead?
Konva.showWarnings = false; Konva.showWarnings = false;
const useStageRenderer = (stage: Konva.Stage, container: HTMLDivElement | null, asPreview: boolean) => { const useStageRenderer = (stage: Konva.Stage, container: HTMLDivElement | null) => {
const store = useAppStore(); const store = useAppStore();
const socket = useStore($socket); const socket = useStore($socket);
const dpr = useDevicePixelRatio({ round: false }); const dpr = useDevicePixelRatio({ round: false });
@ -42,28 +40,23 @@ const useStageRenderer = (stage: Konva.Stage, container: HTMLDivElement | null,
const manager = new CanvasManager(stage, container, store, socket); const manager = new CanvasManager(stage, container, store, socket);
manager.initialize(); manager.initialize();
return manager.destroy; return manager.destroy;
}, [asPreview, container, socket, stage, store]); }, [container, socket, stage, store]);
useLayoutEffect(() => { useLayoutEffect(() => {
Konva.pixelRatio = dpr; Konva.pixelRatio = dpr;
}, [dpr]); }, [dpr]);
}; };
type Props = {
asPreview?: boolean;
};
const selectDynamicGrid = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.dynamicGrid); const selectDynamicGrid = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.dynamicGrid);
export const StageComponent = memo(({ asPreview = false }: Props) => { export const StageComponent = memo(() => {
const dynamicGrid = useAppSelector(selectDynamicGrid); const dynamicGrid = useAppSelector(selectDynamicGrid);
const [stage] = useState( const [stage] = useState(
() => () =>
new Konva.Stage({ new Konva.Stage({
id: uuidv4(), id: getPrefixedId('konva_stage'),
container: document.createElement('div'), container: document.createElement('div'),
listening: !asPreview,
}) })
); );
const [container, setContainer] = useState<HTMLDivElement | null>(null); const [container, setContainer] = useState<HTMLDivElement | null>(null);
@ -72,7 +65,7 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
setContainer(el); setContainer(el);
}, []); }, []);
useStageRenderer(stage, container, asPreview); useStageRenderer(stage, container);
useEffect( useEffect(
() => () => { () => () => {
@ -106,11 +99,9 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
overflow="hidden" overflow="hidden"
data-testid="control-layers-canvas" data-testid="control-layers-canvas"
/> />
{!asPreview && ( <Flex position="absolute" top={1} insetInlineStart={1} pointerEvents="none">
<Flex position="absolute" top={0} insetInlineStart={0} pointerEvents="none"> <HeadsUpDisplay />
{showHud && <HeadsUpDisplay />} </Flex>
</Flex>
)}
</Flex> </Flex>
); );
}); });