mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-02-14 22:15:12 -05:00
e4678201cb
This is a squash of a lot of scattered commits that became very difficult to clean up and make individually. Sorry. Besides the new UI, there are a number of notable changes: - Publishing logic is disabled in OSS by default. To enable it, provided a `disabledFeatures` prop _without_ "publishWorkflow". - Enqueuing a workflow is no longer handled in a redux listener. It was hard to track the state of the enqueue logic in the listener. It is now in a hook. I did not migrate the canvas and upscaling tabs - their enqueue logic is still in the listener. - When queueing a validation run, the new `useEnqueueWorkflows()` hook will update the payload with the required data for the run. - Some logic is added to the socket event listeners to handle workflow publish runs completing. - The workflow library side nav has a new "published" view. It is hidden when the "publishWorkflow" feature is disabled. - I've added `Safe` and `OrThrow` versions of some workflows hooks. These hooks typically retrieve some data from redux. For example, a node. The `Safe` hooks return the node or null if it cannot be found, while the `OrThrow` hooks return the node or raise if it cannot be found. The `OrThrow` hooks should be used within one of the gate components. These components use the `Safe` hooks and render a fallback if e.g. the node isn't found. This change is required for some of the publish flow UI. - Add support for locking the workflow editor. When locked, you can pan and zoom but that's it. Currently, it is only locked during publish flow and if a published workflow is opened.
51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import type { SystemStyleObject } from '@invoke-ai/ui-library';
|
|
import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
|
|
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
|
|
import { AddNodeCmdk } from 'features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk';
|
|
import { TopCenterPanel } from 'features/nodes/components/flow/panels/TopPanel/TopCenterPanel';
|
|
import { TopLeftPanel } from 'features/nodes/components/flow/panels/TopPanel/TopLeftPanel';
|
|
import { TopRightPanel } from 'features/nodes/components/flow/panels/TopPanel/TopRightPanel';
|
|
import WorkflowEditorSettings from 'features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings';
|
|
import { memo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { PiFlowArrowBold } from 'react-icons/pi';
|
|
import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
|
|
|
|
import { Flow } from './flow/Flow';
|
|
import BottomLeftPanel from './flow/panels/BottomLeftPanel/BottomLeftPanel';
|
|
import MinimapPanel from './flow/panels/MinimapPanel/MinimapPanel';
|
|
|
|
const FOCUS_REGION_STYLES: SystemStyleObject = {
|
|
display: 'flex',
|
|
position: 'relative',
|
|
width: 'full',
|
|
height: 'full',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
};
|
|
|
|
const NodeEditor = () => {
|
|
const { data, isLoading } = useGetOpenAPISchemaQuery();
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<FocusRegionWrapper region="workflows" layerStyle="first" sx={FOCUS_REGION_STYLES}>
|
|
{data && (
|
|
<>
|
|
<Flow />
|
|
<AddNodeCmdk />
|
|
<TopLeftPanel />
|
|
<TopCenterPanel />
|
|
<TopRightPanel />
|
|
<BottomLeftPanel />
|
|
<MinimapPanel />
|
|
</>
|
|
)}
|
|
<WorkflowEditorSettings />
|
|
{isLoading && <IAINoContentFallback label={t('nodes.loadingNodes')} icon={PiFlowArrowBold} />}
|
|
</FocusRegionWrapper>
|
|
);
|
|
};
|
|
|
|
export default memo(NodeEditor);
|