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): handling for in-progress edge updates during conection validation

Browse Source
This commit is contained in:
psychedelicious
2024-05-19 01:37:54 +10:00
parent fc31dddbf7
commit 3605b6b1a3
7 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/features/nodes/hooks/useConnection.ts
View File

@ -2,8 +2,8 @@ import { useStore } from '@nanostores/react';
import { useAppStore } from 'app/store/storeHooks';
import { $mouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
import {
$edgePendingUpdate,
$isAddNodePopoverOpen,
$isUpdatingEdge,
$pendingConnection,
$templates,
connectionMade,
@ -52,12 +52,12 @@ export const useConnection = () => {
const onConnectEnd = useCallback<OnConnectEnd>(() => {
const { dispatch } = store;
const pendingConnection = $pendingConnection.get();
const isUpdatingEdge = $isUpdatingEdge.get();
const edgePendingUpdate = $edgePendingUpdate.get();
const mouseOverNodeId = $mouseOverNode.get();
// If we are in the middle of an edge update, and the mouse isn't over a node, we should just bail so the edge
// update logic can finish up
if (isUpdatingEdge && !mouseOverNodeId) {
if (edgePendingUpdate && !mouseOverNodeId) {
$pendingConnection.set(null);
return;
}
@ -80,7 +80,8 @@ export const useConnection = () => {
edges,
pendingConnection,
candidateNode,
candidateTemplate
candidateTemplate,
edgePendingUpdate
);
if (connection) {
dispatch(connectionMade(connection));

5
invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
View File

@ -1,7 +1,7 @@
import { useStore } from '@nanostores/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { $pendingConnection, $templates, selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { $edgePendingUpdate, $pendingConnection, $templates, selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { makeConnectionErrorSelector } from 'features/nodes/store/util/makeConnectionErrorSelector';
import { useMemo } from 'react';
@ -14,6 +14,7 @@ type UseConnectionStateProps = {
export const useConnectionState = ({ nodeId, fieldName, kind }: UseConnectionStateProps) => {
const pendingConnection = useStore($pendingConnection);
const templates = useStore($templates);
const edgePendingUpdate = useStore($edgePendingUpdate);
const selectIsConnected = useMemo(
() =>
@ -47,7 +48,7 @@ export const useConnectionState = ({ nodeId, fieldName, kind }: UseConnectionSta
pendingConnection.fieldTemplate.fieldKind === { inputs: 'input', outputs: 'output' }[kind]
);
}, [fieldName, kind, nodeId, pendingConnection]);
const connectionError = useAppSelector((s) => selectConnectionError(s, pendingConnection));
const connectionError = useAppSelector((s) => selectConnectionError(s, pendingConnection, edgePendingUpdate));
const shouldDim = useMemo(
() => Boolean(isConnectionInProgress && connectionError && !isConnectionStartField),

6
invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
View File

@ -1,7 +1,7 @@
// TODO: enable this at some point
import { useStore } from '@nanostores/react';
import { useAppSelector, useAppStore } from 'app/store/storeHooks';
import { $templates } from 'features/nodes/store/nodesSlice';
import { $edgePendingUpdate, $templates } from 'features/nodes/store/nodesSlice';
import { validateConnection } from 'features/nodes/store/util/validateConnection';
import { useCallback } from 'react';
import type { Connection } from 'reactflow';
@ -21,7 +21,7 @@ export const useIsValidConnection = () => {
if (!(source && sourceHandle && target && targetHandle)) {
return false;
}
const edgePendingUpdate = $edgePendingUpdate.get();
const { nodes, edges } = store.getState().nodes.present;
const validationResult = validateConnection(
@ -29,7 +29,7 @@ export const useIsValidConnection = () => {
nodes,
edges,
templates,
null,
edgePendingUpdate,
shouldValidateGraph
);