From acea304348574d75242c67ae16d8671f76aadbed Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Tue, 11 Jul 2023 18:22:50 +1200 Subject: [PATCH 1/3] feat(node-editor): fit view on init --- .../frontend/web/src/features/nodes/components/Flow.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/invokeai/frontend/web/src/features/nodes/components/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/Flow.tsx index e29ec38c96..c549d13cc6 100644 --- a/invokeai/frontend/web/src/features/nodes/components/Flow.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/Flow.tsx @@ -7,8 +7,10 @@ import { OnConnectEnd, OnConnectStart, OnEdgesChange, + OnInit, OnNodesChange, ReactFlow, + ReactFlowInstance, } from 'reactflow'; import { connectionEnded, @@ -67,6 +69,10 @@ export const Flow = () => { dispatch(connectionEnded()); }, [dispatch]); + const onInit: OnInit = useCallback((v: ReactFlowInstance) => { + if (v) v.fitView(); + }, []); + return ( { onConnectStart={onConnectStart} onConnect={onConnect} onConnectEnd={onConnectEnd} + onInit={onInit} defaultEdgeOptions={{ style: { strokeWidth: 2 }, }} From cd11d08d74dffd1a72b437e0401cd464be2901e5 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 12 Jul 2023 07:50:11 +1200 Subject: [PATCH 2/3] feat: Update Reload Schema button --- invokeai/frontend/web/public/locales/en.json | 3 +++ .../components/panels/TopCenterPanel.tsx | 17 ++++--------- .../components/ui/ReloadSchemaButton.tsx | 25 +++++++++++++++++++ 3 files changed, 33 insertions(+), 12 deletions(-) create mode 100644 invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index b904219e9c..1a902a88b7 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -674,5 +674,8 @@ "showProgressImages": "Show Progress Images", "hideProgressImages": "Hide Progress Images", "swapSizes": "Swap Sizes" + }, + "nodes": { + "reloadSchema": "Reload Schema" } } diff --git a/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx index 223791e4ad..77062f16e7 100644 --- a/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx @@ -1,25 +1,18 @@ import { HStack } from '@chakra-ui/react'; -import { useAppDispatch } from 'app/store/storeHooks'; -import IAIButton from 'common/components/IAIButton'; -import { memo, useCallback } from 'react'; +import { memo } from 'react'; import { Panel } from 'reactflow'; -import { receivedOpenAPISchema } from 'services/api/thunks/schema'; -import NodeInvokeButton from '../ui/NodeInvokeButton'; + import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton'; +import NodeInvokeButton from '../ui/NodeInvokeButton'; +import ReloadSchemaButton from '../ui/ReloadSchemaButton'; const TopCenterPanel = () => { - const dispatch = useAppDispatch(); - - const handleReloadSchema = useCallback(() => { - dispatch(receivedOpenAPISchema()); - }, [dispatch]); - return ( - Reload Schema + ); diff --git a/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx b/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx new file mode 100644 index 0000000000..613297d217 --- /dev/null +++ b/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx @@ -0,0 +1,25 @@ +import { useAppDispatch } from 'app/store/storeHooks'; +import IAIIconButton from 'common/components/IAIIconButton'; +import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { BiRefresh } from 'react-icons/bi'; +import { receivedOpenAPISchema } from 'services/api/thunks/schema'; + +export default function ReloadSchemaButton() { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + + const handleReloadSchema = useCallback(() => { + dispatch(receivedOpenAPISchema()); + }, [dispatch]); + + return ( + } + fontSize={24} + tooltip={t('nodes.reloadSchema')} + aria-label={t('nodes.reloadSchema')} + onClick={handleReloadSchema} + /> + ); +} From 222d8b05a6ea2be2a70634e0d2c8815f78a0302e Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 12 Jul 2023 13:31:24 +1200 Subject: [PATCH 3/3] fix: Update Sync icon to FontAwesom --- invokeai/frontend/web/src/features/nodes/components/Flow.tsx | 4 +++- .../src/features/nodes/components/ui/ReloadSchemaButton.tsx | 5 ++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/invokeai/frontend/web/src/features/nodes/components/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/Flow.tsx index c549d13cc6..c6aa04bd24 100644 --- a/invokeai/frontend/web/src/features/nodes/components/Flow.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/Flow.tsx @@ -70,7 +70,9 @@ export const Flow = () => { }, [dispatch]); const onInit: OnInit = useCallback((v: ReactFlowInstance) => { - if (v) v.fitView(); + if (v) { + v.fitView(); + } }, []); return ( diff --git a/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx b/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx index 613297d217..f6c837e044 100644 --- a/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx @@ -2,7 +2,7 @@ import { useAppDispatch } from 'app/store/storeHooks'; import IAIIconButton from 'common/components/IAIIconButton'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { BiRefresh } from 'react-icons/bi'; +import { FaSyncAlt } from 'react-icons/fa'; import { receivedOpenAPISchema } from 'services/api/thunks/schema'; export default function ReloadSchemaButton() { @@ -15,8 +15,7 @@ export default function ReloadSchemaButton() { return ( } - fontSize={24} + icon={} tooltip={t('nodes.reloadSchema')} aria-label={t('nodes.reloadSchema')} onClick={handleReloadSchema}