fix(ui): call updateNodeInternals when making connections

This commit is contained in:
psychedelicious 2024-05-18 18:59:14 +10:00
parent 6b4e464d17
commit 6f7160b9fd

View File

@ -10,13 +10,15 @@ import {
} from 'features/nodes/store/nodesSlice'; } from 'features/nodes/store/nodesSlice';
import { getFirstValidConnection } from 'features/nodes/store/util/connectionValidation'; import { getFirstValidConnection } from 'features/nodes/store/util/connectionValidation';
import { isInvocationNode } from 'features/nodes/types/invocation'; import { isInvocationNode } from 'features/nodes/types/invocation';
import { isString } from 'lodash-es';
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo } from 'react';
import type { OnConnect, OnConnectEnd, OnConnectStart } from 'reactflow'; import { type OnConnect, type OnConnectEnd, type OnConnectStart, useUpdateNodeInternals } from 'reactflow';
import { assert } from 'tsafe'; import { assert } from 'tsafe';
export const useConnection = () => { export const useConnection = () => {
const store = useAppStore(); const store = useAppStore();
const templates = useStore($templates); const templates = useStore($templates);
const updateNodeInternals = useUpdateNodeInternals();
const onConnectStart = useCallback<OnConnectStart>( const onConnectStart = useCallback<OnConnectStart>(
(event, params) => { (event, params) => {
@ -41,9 +43,11 @@ export const useConnection = () => {
(connection) => { (connection) => {
const { dispatch } = store; const { dispatch } = store;
dispatch(connectionMade(connection)); dispatch(connectionMade(connection));
const nodesToUpdate = [connection.source, connection.target].filter(isString);
updateNodeInternals(nodesToUpdate);
$pendingConnection.set(null); $pendingConnection.set(null);
}, },
[store] [store, updateNodeInternals]
); );
const onConnectEnd = useCallback<OnConnectEnd>(() => { const onConnectEnd = useCallback<OnConnectEnd>(() => {
const { dispatch } = store; const { dispatch } = store;
@ -80,13 +84,15 @@ export const useConnection = () => {
); );
if (connection) { if (connection) {
dispatch(connectionMade(connection)); dispatch(connectionMade(connection));
const nodesToUpdate = [connection.source, connection.target].filter(isString);
updateNodeInternals(nodesToUpdate);
} }
$pendingConnection.set(null); $pendingConnection.set(null);
} else { } else {
// The mouse is not over a node - we should open the add node popover // The mouse is not over a node - we should open the add node popover
$isAddNodePopoverOpen.set(true); $isAddNodePopoverOpen.set(true);
} }
}, [store, templates]); }, [store, templates, updateNodeInternals]);
const api = useMemo(() => ({ onConnectStart, onConnect, onConnectEnd }), [onConnectStart, onConnect, onConnectEnd]); const api = useMemo(() => ({ onConnectStart, onConnect, onConnectEnd }), [onConnectStart, onConnect, onConnectEnd]);
return api; return api;