github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): switch to canvas tab when using launchpad

Browse Source
This commit is contained in:
psychedelicious
2025-06-25 14:37:44 +10:00
parent 2367b9f945
commit a92ba2542c
14 changed files with 63 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx
View File

@@ -1,5 +1,7 @@
import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
import { memo } from 'react';
import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
import { WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
import { memo, useCallback } from 'react';
import { InitialStateMainModelPicker } from './InitialStateMainModelPicker';
import { LaunchpadAddStyleReference } from './LaunchpadAddStyleReference';
@@ -8,6 +10,10 @@ import { LaunchpadGenerateFromTextButton } from './LaunchpadGenerateFromTextButt
import { LaunchpadUseALayoutImageButton } from './LaunchpadUseALayoutImageButton';
export const CanvasLaunchpadPanel = memo(() => {
const ctx = useAutoLayoutContext();
const focusCanvas = useCallback(() => {
ctx.focusPanel(WORKSPACE_PANEL_ID);
}, [ctx]);
return (
<Flex flexDir="column" h="full" w="full" alignItems="center" gap={2}>
<Flex flexDir="column" w="full" gap={4} px={14} maxW={768} pt="20vh">
@@ -24,10 +30,10 @@ export const CanvasLaunchpadPanel = memo(() => {
</Text>
</Flex>
</Grid>
<LaunchpadGenerateFromTextButton />
<LaunchpadAddStyleReference />
<LaunchpadEditImageButton />
<LaunchpadUseALayoutImageButton />
<LaunchpadGenerateFromTextButton extraAction={focusCanvas} />
<LaunchpadAddStyleReference extraAction={focusCanvas} />
<LaunchpadEditImageButton extraAction={focusCanvas} />
<LaunchpadUseALayoutImageButton extraAction={focusCanvas} />
</Flex>
</Flex>
</Flex>

5
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference.tsx
View File

@@ -13,7 +13,7 @@ import type { ImageDTO } from 'services/api/types';
const dndTargetData = addGlobalReferenceImageDndTarget.getData();
export const LaunchpadAddStyleReference = memo(() => {
export const LaunchpadAddStyleReference = memo((props: { extraAction?: () => void }) => {
const { dispatch, getState } = useAppStore();
const uploadOptions = useMemo(
@@ -23,10 +23,11 @@ export const LaunchpadAddStyleReference = memo(() => {
const config = getDefaultRefImageConfig(getState);
config.image = imageDTOToImageWithDims(imageDTO);
dispatch(refImageAdded({ overrides: { config } }));
props.extraAction?.();
},
allowMultiple: false,
}) as const,
[dispatch, getState]
[dispatch, getState, props]
);
const uploadApi = useImageUploadButton(uploadOptions);

5
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadEditImageButton.tsx
View File

@@ -13,14 +13,15 @@ const NEW_CANVAS_OPTIONS = { type: 'raster_layer', withInpaintMask: true } as co
const dndTargetData = newCanvasFromImageDndTarget.getData(NEW_CANVAS_OPTIONS);
export const LaunchpadEditImageButton = memo(() => {
export const LaunchpadEditImageButton = memo((props: { extraAction?: () => void }) => {
const { getState, dispatch } = useAppStore();
const onUpload = useCallback(
(imageDTO: ImageDTO) => {
newCanvasFromImage({ imageDTO, getState, dispatch, ...NEW_CANVAS_OPTIONS });
props.extraAction?.();
},
[dispatch, getState]
[dispatch, getState, props]
);
const uploadApi = useImageUploadButton({ allowMultiple: false, onUpload });

20
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadGenerateFromTextButton.tsx
View File

@@ -1,19 +1,29 @@
import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
import { LaunchpadButton } from 'features/controlLayers/components/SimpleSession/LaunchpadButton';
import { memo } from 'react';
import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
import { memo, useCallback } from 'react';
import { PiCursorTextBold, PiTextAaBold } from 'react-icons/pi';
const focusOnPrompt = () => {
const promptElement = document.getElementById('prompt');
const focusOnPrompt = (el: HTMLElement) => {
const promptElement = el.querySelector('.positive-prompt-textarea');
if (promptElement instanceof HTMLTextAreaElement) {
promptElement.focus();
promptElement.select();
}
};
export const LaunchpadGenerateFromTextButton = memo(() => {
export const LaunchpadGenerateFromTextButton = memo((props: { extraAction?: () => void }) => {
const { rootRef } = useAutoLayoutContext();
const onClick = useCallback(() => {
const el = rootRef.current;
if (!el) {
return;
}
focusOnPrompt(el);
props.extraAction?.();
}, [props, rootRef]);
return (
<LaunchpadButton onClick={focusOnPrompt} position="relative" gap={8}>
<LaunchpadButton onClick={onClick} position="relative" gap={8}>
<Icon as={PiTextAaBold} boxSize={8} color="base.500" />
<Flex flexDir="column" alignItems="flex-start" gap={2}>
<Heading size="sm">Generate from Text</Heading>

5
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadUseALayoutImageButton.tsx
View File

@@ -14,14 +14,15 @@ const NEW_CANVAS_OPTIONS = { type: 'control_layer', withResize: true } as const;
const dndTargetData = newCanvasFromImageDndTarget.getData(NEW_CANVAS_OPTIONS);
export const LaunchpadUseALayoutImageButton = memo(() => {
export const LaunchpadUseALayoutImageButton = memo((props: { extraAction?: () => void }) => {
const { getState, dispatch } = useAppStore();
const onUpload = useCallback(
(imageDTO: ImageDTO) => {
newCanvasFromImage({ imageDTO, getState, dispatch, ...NEW_CANVAS_OPTIONS });
props.extraAction?.();
},
[dispatch, getState]
[dispatch, getState, props]
);
const uploadApi = useImageUploadButton({ allowMultiple: false, onUpload });