diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx index efea9a0ee44..cb4c51dd866 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx @@ -1,14 +1,16 @@ import { Box, Flex, Textarea } from '@invoke-ai/ui-library'; +import { createSelector } from '@reduxjs/toolkit'; import type { Node, NodeProps } from '@xyflow/react'; -import { useAppDispatch } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton'; import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle'; import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper'; import { notesNodeValueChanged } from 'features/nodes/store/nodesSlice'; +import { selectNodes } from 'features/nodes/store/selectors'; import { NO_DRAG_CLASS, NO_PAN_CLASS } from 'features/nodes/types/constants'; import type { NotesNodeData } from 'features/nodes/types/invocation'; import type { ChangeEvent } from 'react'; -import { memo, useCallback } from 'react'; +import { memo, useCallback, useMemo } from 'react'; const NotesNode = (props: NodeProps>) => { const { id: nodeId, data, selected } = props; @@ -21,6 +23,16 @@ const NotesNode = (props: NodeProps>) => { [dispatch, nodeId] ); + const selectNodeExists = useMemo( + () => createSelector(selectNodes, (nodes) => Boolean(nodes.find((n) => n.id === nodeId))), + [nodeId] + ); + const nodeExists = useAppSelector(selectNodeExists); + + if (!nodeExists) { + return null; + } + return (