diff --git a/invokeai/frontend/web/src/features/nodes/components/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/Flow.tsx index 173458d285..38c1b43943 100644 --- a/invokeai/frontend/web/src/features/nodes/components/Flow.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/Flow.tsx @@ -1,6 +1,5 @@ import { Background, - MiniMap, OnConnect, OnEdgesChange, OnNodesChange, @@ -23,6 +22,7 @@ import TopLeftPanel from './panels/TopLeftPanel'; import TopRightPanel from './panels/TopRightPanel'; import TopCenterPanel from './panels/TopCenterPanel'; import BottomLeftPanel from './panels/BottomLeftPanel.tsx'; +import MinimapPanel from './panels/MinimapPanel'; const nodeTypes = { invocation: InvocationComponent }; @@ -59,12 +59,9 @@ export const Flow = () => { [dispatch] ); - const onConnectEnd: OnConnectEnd = useCallback( - (event) => { - dispatch(connectionEnded()); - }, - [dispatch] - ); + const onConnectEnd: OnConnectEnd = useCallback(() => { + dispatch(connectionEnded()); + }, [dispatch]); return ( { - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx new file mode 100644 index 0000000000..33c5605310 --- /dev/null +++ b/invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx @@ -0,0 +1,34 @@ +import { RootState } from 'app/store'; +import { useAppSelector } from 'app/storeHooks'; +import { CSSProperties, memo } from 'react'; +import { MiniMap } from 'reactflow'; + +const MinimapStyle: CSSProperties = { + background: 'var(--invokeai-colors-base-500)', +}; + +const MinimapPanel = () => { + const currentTheme = useAppSelector( + (state: RootState) => state.ui.currentTheme + ); + + return ( + + ); +}; + +export default memo(MinimapPanel);