Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): workflows fit on load

Browse Source
This commit is contained in:
psychedelicious 2024-06-01 13:20:04 +10:00
parent ff2b2fad83
commit 08bcc71e99
4 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts
View File

@ -3,7 +3,7 @@ import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'
import { parseify } from 'common/util/serialize'; import { parseify } from 'common/util/serialize';
import { workflowLoaded, workflowLoadRequested } from 'features/nodes/store/actions'; import { workflowLoaded, workflowLoadRequested } from 'features/nodes/store/actions';
import { $templates } from 'features/nodes/store/nodesSlice'; import { $templates } from 'features/nodes/store/nodesSlice';
import { $flow } from 'features/nodes/store/reactFlowInstance'; import { $needsFit } from 'features/nodes/store/reactFlowInstance';
import type { Templates } from 'features/nodes/store/types'; import type { Templates } from 'features/nodes/store/types';
import { WorkflowMigrationError, WorkflowVersionError } from 'features/nodes/types/error'; import { WorkflowMigrationError, WorkflowVersionError } from 'features/nodes/types/error';
import { graphToWorkflow } from 'features/nodes/util/workflow/graphToWorkflow'; import { graphToWorkflow } from 'features/nodes/util/workflow/graphToWorkflow';
@ -65,9 +65,7 @@ export const addWorkflowLoadRequestedListener = (startAppListening: AppStartList
}); });
} }
requestAnimationFrame(() => { $needsFit.set(true)
$flow.get()?.fitView();
});
} catch (e) { } catch (e) {
if (e instanceof WorkflowVersionError) { if (e instanceof WorkflowVersionError) {
// The workflow version was not recognized in the valid list of versions // The workflow version was not recognized in the valid list of versions

13
invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
View File

@ -19,7 +19,7 @@ import {
redo, redo,
undo, undo,
} from 'features/nodes/store/nodesSlice'; } from 'features/nodes/store/nodesSlice';
import { $flow } from 'features/nodes/store/reactFlowInstance'; import { $flow, $needsFit } from 'features/nodes/store/reactFlowInstance';
import { connectionToEdge } from 'features/nodes/store/util/reactFlowUtil'; import { connectionToEdge } from 'features/nodes/store/util/reactFlowUtil';
import type { CSSProperties, MouseEvent } from 'react'; import type { CSSProperties, MouseEvent } from 'react';
import { memo, useCallback, useMemo, useRef } from 'react'; import { memo, useCallback, useMemo, useRef } from 'react';
@ -68,6 +68,7 @@ export const Flow = memo(() => {
const nodes = useAppSelector((s) => s.nodes.present.nodes); const nodes = useAppSelector((s) => s.nodes.present.nodes);
const edges = useAppSelector((s) => s.nodes.present.edges); const edges = useAppSelector((s) => s.nodes.present.edges);
const viewport = useStore($viewport); const viewport = useStore($viewport);
const needsFit = useStore($needsFit);
const mayUndo = useAppSelector((s) => s.nodes.past.length > 0); const mayUndo = useAppSelector((s) => s.nodes.past.length > 0);
const mayRedo = useAppSelector((s) => s.nodes.future.length > 0); const mayRedo = useAppSelector((s) => s.nodes.future.length > 0);
const shouldSnapToGrid = useAppSelector((s) => s.workflowSettings.shouldSnapToGrid); const shouldSnapToGrid = useAppSelector((s) => s.workflowSettings.shouldSnapToGrid);
@ -92,8 +93,16 @@ export const Flow = memo(() => {
const onNodesChange: OnNodesChange = useCallback( const onNodesChange: OnNodesChange = useCallback(
(nodeChanges) => { (nodeChanges) => {
dispatch(nodesChanged(nodeChanges)); dispatch(nodesChanged(nodeChanges));
const flow = $flow.get();
if (!flow) {
return;
}
if (needsFit) {
$needsFit.set(false);
flow.fitView();
}
}, },
[dispatch] [dispatch, needsFit]
); );
const onEdgesChange: OnEdgesChange = useCallback( const onEdgesChange: OnEdgesChange = useCallback(

13
invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
View File

@ -15,27 +15,20 @@ const ViewportControls = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { zoomIn, zoomOut, fitView } = useReactFlow(); const { zoomIn, zoomOut, fitView } = useReactFlow();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
// const shouldShowFieldTypeLegend = useAppSelector(
// (s) => s.nodes.present.shouldShowFieldTypeLegend
// );
const shouldShowMinimapPanel = useAppSelector((s) => s.workflowSettings.shouldShowMinimapPanel); const shouldShowMinimapPanel = useAppSelector((s) => s.workflowSettings.shouldShowMinimapPanel);
const handleClickedZoomIn = useCallback(() => { const handleClickedZoomIn = useCallback(() => {
zoomIn(); zoomIn({ duration: 300 });
}, [zoomIn]); }, [zoomIn]);
const handleClickedZoomOut = useCallback(() => { const handleClickedZoomOut = useCallback(() => {
zoomOut(); zoomOut({ duration: 300 });
}, [zoomOut]); }, [zoomOut]);
const handleClickedFitView = useCallback(() => { const handleClickedFitView = useCallback(() => {
fitView(); fitView({ duration: 300 });
}, [fitView]); }, [fitView]);
// const handleClickedToggleFieldTypeLegend = useCallback(() => {
// dispatch(shouldShowFieldTypeLegendChanged(!shouldShowFieldTypeLegend));
// }, [shouldShowFieldTypeLegend, dispatch]);
const handleClickedToggleMiniMapPanel = useCallback(() => { const handleClickedToggleMiniMapPanel = useCallback(() => {
dispatch(shouldShowMinimapPanelChanged(!shouldShowMinimapPanel)); dispatch(shouldShowMinimapPanelChanged(!shouldShowMinimapPanel));
}, [shouldShowMinimapPanel, dispatch]); }, [shouldShowMinimapPanel, dispatch]);

1
invokeai/frontend/web/src/features/nodes/store/reactFlowInstance.ts
View File

@ -2,3 +2,4 @@ import { atom } from 'nanostores';
import type { ReactFlowInstance } from 'reactflow'; import type { ReactFlowInstance } from 'reactflow';
export const $flow = atom<ReactFlowInstance | null>(null); export const $flow = atom<ReactFlowInstance | null>(null);
export const $needsFit = atom<boolean>(true);