Skip to content

Commit 8d15686

Browse files
psychedeliciouspsychedelicious
committed
refactor(ui): simplify canvas session logic
1 parent 7561b73 commit 8d15686

31 files changed

+534
-738
lines changed

‎invokeai/frontend/web/public/locales/en.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2087,9 +2087,9 @@
20872087
"resetCanvasLayers": "Reset Canvas Layers",
20882088
"resetGenerationSettings": "Reset Generation Settings",
20892089
"replaceCurrent": "Replace Current",
2090-
"controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, <PullBboxButton>pull the bounding box into this layer</PullBboxButton>, or draw on the canvas to get started.",
2091-
"referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this Reference Image or <PullBboxButton>pull the bounding box into this Reference Image</PullBboxButton> to get started.",
2092-
"referenceImageEmptyState": "<UploadButton>Upload an image</UploadButton> or drag an image from the <GalleryButton>gallery</GalleryButton> onto this Reference Image to get started.",
2090+
"controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the gallery onto this layer, <PullBboxButton>pull the bounding box into this layer</PullBboxButton>, or draw on the canvas to get started.",
2091+
"referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Upload an image</UploadButton>, drag an image from the gallery onto this Reference Image or <PullBboxButton>pull the bounding box into this Reference Image</PullBboxButton> to get started.",
2092+
"referenceImageEmptyState": "<UploadButton>Upload an image</UploadButton> or drag an image from the gallery onto this Reference Image to get started.",
20932093
"uploadOrDragAnImage": "Drag an image from the gallery or <UploadButton>upload an image</UploadButton>.",
20942094
"imageNoise": "Image Noise",
20952095
"denoiseLimit": "Denoise Limit",

‎invokeai/frontend/web/src/app/components/GlobalModalIsolator.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import { GlobalImageHotkeys } from 'app/components/GlobalImageHotkeys';
22
import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
33
import { CanvasPasteModal } from 'features/controlLayers/components/CanvasPasteModal';
4-
import {
5-
NewCanvasSessionDialog,
6-
NewGallerySessionDialog,
7-
} from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
84
import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
95
import { DeleteImageModal } from 'features/deleteImageModal/components/DeleteImageModal';
106
import { FullscreenDropzone } from 'features/dnd/FullscreenDropzone';
@@ -50,8 +46,6 @@ export const GlobalModalIsolator = memo(() => {
5046
<RefreshAfterResetModal />
5147
<DeleteBoardModal />
5248
<GlobalImageHotkeys />
53-
<NewGallerySessionDialog />
54-
<NewCanvasSessionDialog />
5549
<ImageContextMenu />
5650
<FullscreenDropzone />
5751
<VideosModal />

‎invokeai/frontend/web/src/app/hooks/useStudioInitAction.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import { $isStylePresetsMenuOpen, activeStylePresetIdChanged } from 'features/st
2121
import { toast } from 'features/toast/toast';
2222
import { navigationApi } from 'features/ui/layouts/navigation-api';
2323
import { LAUNCHPAD_PANEL_ID, WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
24-
import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
2524
import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
2625
import { atom } from 'nanostores';
2726
import { useCallback, useEffect } from 'react';
@@ -165,7 +164,6 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
165164
// Go to the generate tab, open the launchpad
166165
await navigationApi.focusPanel('generate', LAUNCHPAD_PANEL_ID);
167166
store.dispatch(paramsReset());
168-
store.dispatch(activeTabCanvasRightPanelChanged('gallery'));
169167
break;
170168
case 'canvas':
171169
// Go to the canvas tab, open the launchpad

‎invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { logger } from 'app/logging/logger';
22
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
33
import { bboxSyncedToOptimalDimension, rgRefImageModelChanged } from 'features/controlLayers/store/canvasSlice';
4-
import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
4+
import { buildSelectIsStaging, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
55
import { loraDeleted } from 'features/controlLayers/store/lorasSlice';
66
import { modelChanged, syncedToOptimalDimension, vaeSelected } from 'features/controlLayers/store/paramsSlice';
77
import { refImageModelChanged, selectReferenceImageEntities } from 'features/controlLayers/store/refImagesSlice';
@@ -152,7 +152,8 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
152152
if (modelBase !== state.params.model?.base) {
153153
// Sync generate tab settings whenever the model base changes
154154
dispatch(syncedToOptimalDimension());
155-
if (!selectIsStaging(state)) {
155+
const isStaging = buildSelectIsStaging(selectCanvasSessionId(state))(state);
156+
if (!isStaging) {
156157
// Canvas tab only syncs if not staging
157158
dispatch(bboxSyncedToOptimalDimension());
158159
}

‎invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/setDefaultSettings.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
22
import { isNil } from 'es-toolkit';
33
import { bboxHeightChanged, bboxWidthChanged } from 'features/controlLayers/store/canvasSlice';
4-
import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
4+
import { buildSelectIsStaging, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
55
import {
66
heightChanged,
77
setCfgRescaleMultiplier,
@@ -115,7 +115,8 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
115115
}
116116
const setSizeOptions = { updateAspectRatio: true, clamp: true };
117117

118-
const isStaging = selectIsStaging(getState());
118+
const isStaging = buildSelectIsStaging(selectCanvasSessionId(state))(state);
119+
119120
const activeTab = selectActiveTab(getState());
120121
if (activeTab === 'generate') {
121122
if (isParameterWidth(width)) {

‎invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useEntityIdentifierContext } from 'features/controlLayers/contexts/Enti
55
import { usePullBboxIntoLayer } from 'features/controlLayers/hooks/saveCanvasHooks';
66
import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
77
import { replaceCanvasEntityObjectsWithImage } from 'features/imageActions/actions';
8-
import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
98
import { memo, useCallback, useMemo } from 'react';
109
import { Trans } from 'react-i18next';
1110
import type { ImageDTO } from 'services/api/types';
@@ -21,24 +20,18 @@ export const ControlLayerSettingsEmptyState = memo(() => {
2120
[dispatch, entityIdentifier, getState]
2221
);
2322
const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
24-
const onClickGalleryButton = useCallback(() => {
25-
dispatch(activeTabCanvasRightPanelChanged('gallery'));
26-
}, [dispatch]);
2723
const pullBboxIntoLayer = usePullBboxIntoLayer(entityIdentifier);
2824

2925
const components = useMemo(
3026
() => ({
3127
UploadButton: (
3228
<Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
3329
),
34-
GalleryButton: (
35-
<Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
36-
),
3730
PullBboxButton: (
3831
<Button onClick={pullBboxIntoLayer} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
3932
),
4033
}),
41-
[isBusy, onClickGalleryButton, pullBboxIntoLayer, uploadApi]
34+
[isBusy, pullBboxIntoLayer, uploadApi]
4235
);
4336

4437
return (

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

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

‎invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageNoImageState.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import type { SetGlobalReferenceImageDndTargetData } from 'features/dnd/dnd';
66
import { setGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
77
import { DndDropTarget } from 'features/dnd/DndDropTarget';
88
import { setGlobalReferenceImage } from 'features/imageActions/actions';
9-
import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
109
import { memo, useCallback, useMemo } from 'react';
1110
import { Trans, useTranslation } from 'react-i18next';
1211
import type { ImageDTO } from 'services/api/types';
@@ -22,9 +21,6 @@ export const RefImageNoImageState = memo(() => {
2221
[dispatch, id]
2322
);
2423
const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
25-
const onClickGalleryButton = useCallback(() => {
26-
dispatch(activeTabCanvasRightPanelChanged('gallery'));
27-
}, [dispatch]);
2824

2925
const dndTargetData = useMemo<SetGlobalReferenceImageDndTargetData>(
3026
() => setGlobalReferenceImageDndTarget.getData({ id }),
@@ -34,9 +30,8 @@ export const RefImageNoImageState = memo(() => {
3430
const components = useMemo(
3531
() => ({
3632
UploadButton: <Button size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />,
37-
GalleryButton: <Button onClick={onClickGalleryButton} size="sm" variant="link" color="base.300" />,
3833
}),
39-
[onClickGalleryButton, uploadApi]
34+
[uploadApi]
4035
);
4136

4237
return (

‎invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageNoImageStateWithCanvasOptions.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import type { SetGlobalReferenceImageDndTargetData } from 'features/dnd/dnd';
88
import { setGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
99
import { DndDropTarget } from 'features/dnd/DndDropTarget';
1010
import { setGlobalReferenceImage } from 'features/imageActions/actions';
11-
import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
1211
import { memo, useCallback, useMemo } from 'react';
1312
import { Trans, useTranslation } from 'react-i18next';
1413
import type { ImageDTO } from 'services/api/types';
@@ -25,9 +24,6 @@ export const RefImageNoImageStateWithCanvasOptions = memo(() => {
2524
[dispatch, id]
2625
);
2726
const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
28-
const onClickGalleryButton = useCallback(() => {
29-
dispatch(activeTabCanvasRightPanelChanged('gallery'));
30-
}, [dispatch]);
3127
const pullBboxIntoIPAdapter = usePullBboxIntoGlobalReferenceImage(id);
3228

3329
const dndTargetData = useMemo<SetGlobalReferenceImageDndTargetData>(
@@ -40,14 +36,11 @@ export const RefImageNoImageStateWithCanvasOptions = memo(() => {
4036
UploadButton: (
4137
<Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
4238
),
43-
GalleryButton: (
44-
<Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
45-
),
4639
PullBboxButton: (
4740
<Button onClick={pullBboxIntoIPAdapter} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
4841
),
4942
}),
50-
[isBusy, onClickGalleryButton, pullBboxIntoIPAdapter, uploadApi]
43+
[isBusy, pullBboxIntoIPAdapter, uploadApi]
5144
);
5245

5346
return (

‎invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettingsEmptyState.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import type { SetRegionalGuidanceReferenceImageDndTargetData } from 'features/dn
99
import { setRegionalGuidanceReferenceImageDndTarget } from 'features/dnd/dnd';
1010
import { DndDropTarget } from 'features/dnd/DndDropTarget';
1111
import { setRegionalGuidanceReferenceImage } from 'features/imageActions/actions';
12-
import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
1312
import { memo, useCallback, useMemo } from 'react';
1413
import { Trans, useTranslation } from 'react-i18next';
1514
import { PiXBold } from 'react-icons/pi';
@@ -31,9 +30,6 @@ export const RegionalGuidanceIPAdapterSettingsEmptyState = memo(({ referenceImag
3130
[dispatch, entityIdentifier, referenceImageId]
3231
);
3332
const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
34-
const onClickGalleryButton = useCallback(() => {
35-
dispatch(activeTabCanvasRightPanelChanged('gallery'));
36-
}, [dispatch]);
3733
const onDeleteIPAdapter = useCallback(() => {
3834
dispatch(rgRefImageDeleted({ entityIdentifier, referenceImageId }));
3935
}, [dispatch, entityIdentifier, referenceImageId]);
@@ -53,14 +49,11 @@ export const RegionalGuidanceIPAdapterSettingsEmptyState = memo(({ referenceImag
5349
UploadButton: (
5450
<Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
5551
),
56-
GalleryButton: (
57-
<Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
58-
),
5952
PullBboxButton: (
6053
<Button onClick={pullBboxIntoIPAdapter} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
6154
),
6255
}),
63-
[isBusy, onClickGalleryButton, pullBboxIntoIPAdapter, uploadApi]
56+
[isBusy, pullBboxIntoIPAdapter, uploadApi]
6457
);
6558

6659
return (

0 commit comments

Comments
 (0)