Skip to content

Commit df4754a

Browse files
author
Attila Cseh
committed
CanvasInstanceContext removed
1 parent a51c74d commit df4754a

File tree

9 files changed

+65
-112
lines changed

9 files changed

+65
-112
lines changed

‎invokeai/frontend/web/src/features/controlLayers/components/InvokeCanvasComponent.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { Box } from '@invoke-ai/ui-library';
2+
import { useAppSelector } from 'app/store/storeHooks';
23
import { useInvokeCanvas } from 'features/controlLayers/hooks/useInvokeCanvas';
4+
import { selectActiveCanvasId } from 'features/controlLayers/store/selectors';
35
import { memo } from 'react';
46

5-
interface InvokeCanvasComponent {
6-
canvasId: string;
7-
}
8-
9-
export const InvokeCanvasComponent = memo(({ canvasId }: InvokeCanvasComponent) => {
7+
export const InvokeCanvasComponent = memo(() => {
8+
const canvasId = useAppSelector(selectActiveCanvasId);
109
const ref = useInvokeCanvas(canvasId);
1110

1211
return (

‎invokeai/frontend/web/src/features/controlLayers/components/StagingArea/context.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useStore } from '@nanostores/react';
2-
import { useAppStore } from 'app/store/storeHooks';
3-
import { useScopedCanvasSessionId } from 'features/controlLayers/hooks/useCanvasSessionId';
2+
import { useAppSelector, useAppStore } from 'app/store/storeHooks';
43
import {
54
selectStagingAreaAutoSwitch,
65
settingsStagingAreaAutoSwitchChanged,
@@ -10,6 +9,7 @@ import {
109
buildSelectCanvasQueueItemsBySessionId,
1110
canvasQueueItemDiscarded,
1211
canvasSessionReset,
12+
selectActiveCanvasStagingAreaSessionId,
1313
} from 'features/controlLayers/store/canvasStagingAreaSlice';
1414
import { selectBboxRect, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
1515
import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
@@ -27,10 +27,10 @@ import { getInitialProgressData, StagingAreaApi } from './state';
2727

2828
const StagingAreaContext = createContext<StagingAreaApi | null>(null);
2929

30-
export const StagingAreaContextProvider = memo(({ canvasId, children }: PropsWithChildren<{ canvasId: string }>) => {
30+
export const StagingAreaContextProvider = memo(({ children }: PropsWithChildren) => {
3131
const store = useAppStore();
3232
const socket = useStore($socket);
33-
const sessionId = useScopedCanvasSessionId(canvasId);
33+
const sessionId = useAppSelector(selectActiveCanvasStagingAreaSessionId);
3434
const selectQueueItems = useMemo(() => buildSelectCanvasQueueItemsBySessionId(sessionId), [sessionId]);
3535

3636
const stagingAreaAppApi = useMemo<StagingAreaAppApi>(() => {

‎invokeai/frontend/web/src/features/controlLayers/contexts/CanvasInstanceContextProvider.tsx‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useStore } from '@nanostores/react';
22
import { useAppSelector } from 'app/store/storeHooks';
3-
import { useCanvasId } from 'features/controlLayers/hooks/useCanvasId';
43
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
54
import { $canvasManagers } from 'features/controlLayers/store/ephemeral';
65
import { selectActiveCanvasId } from 'features/controlLayers/store/selectors';
@@ -38,7 +37,7 @@ export const useCanvasManager = (): CanvasManager => {
3837
*/
3938
export const useCanvasManagerSafe = (): CanvasManager | null => {
4039
const canvasManagers = useStore($canvasManagers);
41-
const canvasId = useCanvasId();
40+
const canvasId = useAppSelector(selectActiveCanvasId);
4241

4342
return canvasManagers[canvasId] ?? null;
4443
};

‎invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasId.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasIsStaging.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { useAppSelector } from 'app/store/storeHooks';
2-
import { buildSelectIsStagingBySessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
2+
import {
3+
buildSelectIsStagingBySessionId,
4+
selectActiveCanvasStagingAreaSessionId,
5+
} from 'features/controlLayers/store/canvasStagingAreaSlice';
36
import { useMemo } from 'react';
47

5-
import { useCanvasSessionId } from './useCanvasSessionId';
6-
78
export const useCanvasIsStaging = () => {
8-
const sessionId = useCanvasSessionId();
9+
const sessionId = useAppSelector(selectActiveCanvasStagingAreaSessionId);
910
const selectIsStagingBySessionIdSelector = useMemo(() => buildSelectIsStagingBySessionId(sessionId), [sessionId]);
1011

1112
return useAppSelector(selectIsStagingBySessionIdSelector);

‎invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasSessionId.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎invokeai/frontend/web/src/features/ui/layouts/CanvasWorkspacePanel.tsx‎

Lines changed: 48 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,8 @@ import { SelectObject } from 'features/controlLayers/components/SelectObject/Sel
1616
import { StagingAreaContextProvider } from 'features/controlLayers/components/StagingArea/context';
1717
import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar';
1818
import { Transform } from 'features/controlLayers/components/Transform/Transform';
19-
import { CanvasInstanceContextProvider } from 'features/controlLayers/contexts/CanvasInstanceContextProvider';
2019
import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
2120
import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
22-
import { selectActiveCanvasId } from 'features/controlLayers/store/selectors';
2321
import { memo, useCallback } from 'react';
2422
import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
2523

@@ -50,11 +48,7 @@ const canvasBgSx = {
5048
},
5149
};
5250

53-
interface CanvasProps {
54-
canvasId: string;
55-
}
56-
57-
const Canvas = memo(({ canvasId }: CanvasProps) => {
51+
const ActiveCanvas = memo(() => {
5852
const dynamicGrid = useAppSelector((state) => selectDynamicGrid(state));
5953
const showHUD = useAppSelector((state) => selectShowHUD(state));
6054

@@ -64,63 +58,59 @@ const Canvas = memo(({ canvasId }: CanvasProps) => {
6458

6559
return (
6660
<Flex w="full" h="full">
67-
<CanvasInstanceContextProvider canvasId={canvasId}>
68-
<StagingAreaContextProvider canvasId={canvasId}>
69-
<ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
70-
{(ref) => (
71-
<Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>
72-
<InvokeCanvasComponent canvasId={canvasId} />
73-
<CanvasManagerProviderGate>
74-
<Flex
75-
position="absolute"
76-
flexDir="column"
77-
top={1}
78-
insetInlineStart={1}
79-
pointerEvents="none"
80-
gap={2}
81-
alignItems="flex-start"
82-
>
83-
{showHUD && <CanvasHUD />}
84-
<CanvasAlertsSaveAllImagesToGallery />
85-
<CanvasAlertsSelectedEntityStatus />
86-
<CanvasAlertsPreserveMask />
87-
<CanvasAlertsInvocationProgress />
88-
<CanvasAlertsBboxVisibility />
89-
</Flex>
90-
<Flex position="absolute" top={1} insetInlineEnd={1}>
91-
<Menu>
92-
<MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
93-
<MenuContent />
94-
</Menu>
95-
</Flex>
96-
<CanvasBusySpinner position="absolute" insetInlineEnd={2} bottom={2} />
97-
</CanvasManagerProviderGate>
98-
</Flex>
99-
)}
100-
</ContextMenu>
101-
<CanvasManagerProviderGate>
102-
<StagingArea />
103-
</CanvasManagerProviderGate>
104-
<Flex position="absolute" bottom={4}>
105-
<CanvasManagerProviderGate>
106-
<Filter />
107-
<Transform />
108-
<SelectObject />
109-
</CanvasManagerProviderGate>
110-
</Flex>
61+
<StagingAreaContextProvider>
62+
<ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
63+
{(ref) => (
64+
<Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>
65+
<InvokeCanvasComponent />
66+
<CanvasManagerProviderGate>
67+
<Flex
68+
position="absolute"
69+
flexDir="column"
70+
top={1}
71+
insetInlineStart={1}
72+
pointerEvents="none"
73+
gap={2}
74+
alignItems="flex-start"
75+
>
76+
{showHUD && <CanvasHUD />}
77+
<CanvasAlertsSaveAllImagesToGallery />
78+
<CanvasAlertsSelectedEntityStatus />
79+
<CanvasAlertsPreserveMask />
80+
<CanvasAlertsInvocationProgress />
81+
<CanvasAlertsBboxVisibility />
82+
</Flex>
83+
<Flex position="absolute" top={1} insetInlineEnd={1}>
84+
<Menu>
85+
<MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
86+
<MenuContent />
87+
</Menu>
88+
</Flex>
89+
<CanvasBusySpinner position="absolute" insetInlineEnd={2} bottom={2} />
90+
</CanvasManagerProviderGate>
91+
</Flex>
92+
)}
93+
</ContextMenu>
94+
<CanvasManagerProviderGate>
95+
<StagingArea />
96+
</CanvasManagerProviderGate>
97+
<Flex position="absolute" bottom={4}>
11198
<CanvasManagerProviderGate>
112-
<CanvasDropArea />
99+
<Filter />
100+
<Transform />
101+
<SelectObject />
113102
</CanvasManagerProviderGate>
114-
</StagingAreaContextProvider>
115-
</CanvasInstanceContextProvider>
103+
</Flex>
104+
<CanvasManagerProviderGate>
105+
<CanvasDropArea />
106+
</CanvasManagerProviderGate>
107+
</StagingAreaContextProvider>
116108
</Flex>
117109
);
118110
});
119-
Canvas.displayName = 'Canvas';
111+
ActiveCanvas.displayName = 'ActiveCanvas';
120112

121113
export const CanvasWorkspacePanel = memo(() => {
122-
const canvasId = useAppSelector(selectActiveCanvasId);
123-
124114
return (
125115
<Flex
126116
borderRadius="base"
@@ -138,7 +128,7 @@ export const CanvasWorkspacePanel = memo(() => {
138128
</CanvasManagerProviderGate>
139129
<Divider />
140130
<CanvasTabs />
141-
<Canvas canvasId={canvasId} />
131+
<ActiveCanvas />
142132
</Flex>
143133
);
144134
});

‎invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { Flex, Text } from '@invoke-ai/ui-library';
2+
import { useAppSelector } from 'app/store/storeHooks';
23
import { setFocusedRegion } from 'common/hooks/focus';
34
import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
45
import type { IDockviewPanelHeaderProps } from 'dockview';
5-
import { useCanvasSessionId } from 'features/controlLayers/hooks/useCanvasSessionId';
6+
import { selectActiveCanvasStagingAreaSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
67
import { useCurrentQueueItemDestination } from 'features/queue/hooks/useCurrentQueueItemDestination';
78
import ProgressBar from 'features/system/components/ProgressBar';
89
import { memo, useCallback, useRef } from 'react';
@@ -14,7 +15,7 @@ import type { DockviewPanelParameters } from './auto-layout-context';
1415
export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
1516
const { t } = useTranslation();
1617
const isGenerationInProgress = useIsGenerationInProgress();
17-
const canvasSessionId = useCanvasSessionId();
18+
const canvasSessionId = useAppSelector(selectActiveCanvasStagingAreaSessionId);
1819
const currentQueueItemDestination = useCurrentQueueItemDestination();
1920

2021
const ref = useRef<HTMLDivElement>(null);

0 commit comments

Comments
 (0)