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): jank interaction between edge update and autoconnect

Browse Source
This commit is contained in:
psychedelicious 2024-05-16 22:44:19 +10:00
parent 9ff5596963
commit a18bbac262
3 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
View File

@ -8,6 +8,7 @@ import { useWorkflowWatcher } from 'features/nodes/hooks/useWorkflowWatcher';
import { import {
$cursorPos, $cursorPos,
$isAddNodePopoverOpen, $isAddNodePopoverOpen,
$isUpdatingEdge,
$pendingConnection, $pendingConnection,
$viewport, $viewport,
connectionMade, connectionMade,
@ -160,6 +161,7 @@ export const Flow = memo(() => {
const onEdgeUpdateStart: NonNullable<ReactFlowProps['onEdgeUpdateStart']> = useCallback( const onEdgeUpdateStart: NonNullable<ReactFlowProps['onEdgeUpdateStart']> = useCallback(
(e, edge, _handleType) => { (e, edge, _handleType) => {
$isUpdatingEdge.set(true);
// update mouse event // update mouse event
edgeUpdateMouseEvent.current = e; edgeUpdateMouseEvent.current = e;
// always delete the edge when starting an updated // always delete the edge when starting an updated
@ -170,8 +172,7 @@ export const Flow = memo(() => {
const onEdgeUpdate: OnEdgeUpdateFunc = useCallback( const onEdgeUpdate: OnEdgeUpdateFunc = useCallback(
(_oldEdge, newConnection) => { (_oldEdge, newConnection) => {
// instead of updating the edge (we deleted it earlier), we instead create // Because we deleted the edge when the update started, we must create a new edge from the connection
// a new one.
dispatch(connectionMade(newConnection)); dispatch(connectionMade(newConnection));
}, },
[dispatch] [dispatch]
@ -179,8 +180,10 @@ export const Flow = memo(() => {
const onEdgeUpdateEnd: NonNullable<ReactFlowProps['onEdgeUpdateEnd']> = useCallback( const onEdgeUpdateEnd: NonNullable<ReactFlowProps['onEdgeUpdateEnd']> = useCallback(
(e, edge, _handleType) => { (e, edge, _handleType) => {
// Handle the case where user begins a drag but didn't move the cursor - $isUpdatingEdge.set(false);
// bc we deleted the edge, we need to add it back $pendingConnection.set(null);
// Handle the case where user begins a drag but didn't move the cursor - we deleted the edge when starting
// the edge update - we need to add it back
if ( if (
// ignore touch events // ignore touch events
!('touches' in e) && !('touches' in e) &&

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

@ -1,7 +1,13 @@
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { useAppStore } from 'app/store/storeHooks'; import { useAppStore } from 'app/store/storeHooks';
import { $mouseOverNode } from 'features/nodes/hooks/useMouseOverNode'; import { $mouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
import { $isAddNodePopoverOpen, $pendingConnection, $templates, connectionMade } from 'features/nodes/store/nodesSlice'; import {
$isAddNodePopoverOpen,
$isUpdatingEdge,
$pendingConnection,
$templates,
connectionMade,
} from 'features/nodes/store/nodesSlice';
import { getFirstValidConnection } from 'features/nodes/store/util/findConnectionToValidHandle'; import { getFirstValidConnection } from 'features/nodes/store/util/findConnectionToValidHandle';
import { isInvocationNode } from 'features/nodes/types/invocation'; import { isInvocationNode } from 'features/nodes/types/invocation';
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo } from 'react';
@ -42,10 +48,19 @@ export const useConnection = () => {
const onConnectEnd = useCallback<OnConnectEnd>(() => { const onConnectEnd = useCallback<OnConnectEnd>(() => {
const { dispatch } = store; const { dispatch } = store;
const pendingConnection = $pendingConnection.get(); const pendingConnection = $pendingConnection.get();
const isUpdatingEdge = $isUpdatingEdge.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) {
$pendingConnection.set(null);
return;
}
if (!pendingConnection) { if (!pendingConnection) {
return; return;
} }
const mouseOverNodeId = $mouseOverNode.get();
const { nodes, edges } = store.getState().nodes.present; const { nodes, edges } = store.getState().nodes.present;
if (mouseOverNodeId) { if (mouseOverNodeId) {
const candidateNode = nodes.filter(isInvocationNode).find((n) => n.id === mouseOverNodeId); const candidateNode = nodes.filter(isInvocationNode).find((n) => n.id === mouseOverNodeId);

2
invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
View File

@ -592,7 +592,7 @@ export const $templates = atom<Templates>({});
export const $copiedNodes = atom<AnyNode[]>([]); export const $copiedNodes = atom<AnyNode[]>([]);
export const $copiedEdges = atom<InvocationNodeEdge[]>([]); export const $copiedEdges = atom<InvocationNodeEdge[]>([]);
export const $pendingConnection = atom<PendingConnection | null>(null); export const $pendingConnection = atom<PendingConnection | null>(null);
export const $isModifyingEdge = atom(false); export const $isUpdatingEdge = atom(false);
export const $viewport = atom<Viewport>({ x: 0, y: 0, zoom: 1 }); export const $viewport = atom<Viewport>({ x: 0, y: 0, zoom: 1 });
export const $isAddNodePopoverOpen = atom(false); export const $isAddNodePopoverOpen = atom(false);
export const closeAddNodePopover = () => { export const closeAddNodePopover = () => {