mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-02-01 12:34:56 -05:00
b58494c420
This is intended for debug usage, so it's hidden away in the workflow library `...` menu. Hold shift to see the button for it. - Paste a graph (from a network request, for example) and then click the convert button to convert it to a workflow. - Disable auto layout to stack the nodes with an offset (try it out). If you change this, you must re-convert to get the changes. - Edit the workflow JSON if you need to tweak something before loading it.
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import 'reactflow/dist/style.css';
|
|
|
|
import { Flex } from '@invoke-ai/ui-library';
|
|
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
|
|
import TopPanel from 'features/nodes/components/flow/panels/TopPanel/TopPanel';
|
|
import { LoadWorkflowFromGraphModal } from 'features/workflowLibrary/components/LoadWorkflowFromGraphModal/LoadWorkflowFromGraphModal';
|
|
import { SaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog';
|
|
import type { AnimationProps } from 'framer-motion';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import type { CSSProperties } from 'react';
|
|
import { memo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { MdDeviceHub } from 'react-icons/md';
|
|
import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
|
|
|
|
import AddNodePopover from './flow/AddNodePopover/AddNodePopover';
|
|
import { Flow } from './flow/Flow';
|
|
import BottomLeftPanel from './flow/panels/BottomLeftPanel/BottomLeftPanel';
|
|
import MinimapPanel from './flow/panels/MinimapPanel/MinimapPanel';
|
|
|
|
const isReadyMotionStyles: CSSProperties = {
|
|
position: 'relative',
|
|
width: '100%',
|
|
height: '100%',
|
|
};
|
|
const notIsReadyMotionStyles: CSSProperties = {
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
};
|
|
const initial: AnimationProps['initial'] = {
|
|
opacity: 0,
|
|
};
|
|
const animate: AnimationProps['animate'] = {
|
|
opacity: 1,
|
|
transition: { duration: 0.2 },
|
|
};
|
|
const exit: AnimationProps['exit'] = {
|
|
opacity: 0,
|
|
transition: { duration: 0.2 },
|
|
};
|
|
|
|
const NodeEditor = () => {
|
|
const { data, isLoading } = useGetOpenAPISchemaQuery();
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Flex
|
|
layerStyle="first"
|
|
position="relative"
|
|
width="full"
|
|
height="full"
|
|
borderRadius="base"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<AnimatePresence>
|
|
{data && (
|
|
<motion.div initial={initial} animate={animate} exit={exit} style={isReadyMotionStyles}>
|
|
<Flow />
|
|
<AddNodePopover />
|
|
<TopPanel />
|
|
<BottomLeftPanel />
|
|
<MinimapPanel />
|
|
<SaveWorkflowAsDialog />
|
|
<LoadWorkflowFromGraphModal />
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
<AnimatePresence>
|
|
{isLoading && (
|
|
<motion.div initial={initial} animate={animate} exit={exit} style={notIsReadyMotionStyles}>
|
|
<Flex
|
|
layerStyle="first"
|
|
position="relative"
|
|
width="full"
|
|
height="full"
|
|
borderRadius="base"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
pointerEvents="none"
|
|
>
|
|
<IAINoContentFallback label={t('nodes.loadingNodes')} icon={MdDeviceHub} />
|
|
</Flex>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default memo(NodeEditor);
|