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

perf(ui): ignore all no-op node and edge changes

Browse Source
This commit is contained in:
psychedelicious 2024-05-19 15:43:14 +10:00
parent 9ed5698aa8
commit 059c5586a4
5 changed files with 73 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
View File

@ -143,16 +143,24 @@ const AddNodePopover = () => {
// Deselect all other nodes and edges
const nodeChanges: NodeChange[] = [{ type: 'add', item: node }];
const edgeChanges: EdgeChange[] = [];
nodes.forEach(({ id }) => {
nodeChanges.push({ type: 'select', id, selected: false });
nodes.forEach(({ id, selected }) => {
if (selected) {
nodeChanges.push({ type: 'select', id, selected: false });
}
});
edges.forEach(({ id }) => {
edgeChanges.push({ type: 'select', id, selected: false });
edges.forEach(({ id, selected }) => {
if (selected) {
edgeChanges.push({ type: 'select', id, selected: false });
}
});
// Onwards!
dispatch(nodesChanged(nodeChanges));
dispatch(edgesChanged(edgeChanges));
if (nodeChanges.length > 0) {
dispatch(nodesChanged(nodeChanges));
}
if (edgeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges));
}
return node;
},
[buildInvocation, store, dispatch, t, toaster]

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

@ -90,15 +90,17 @@ export const Flow = memo(() => {
);
const onNodesChange: OnNodesChange = useCallback(
(changes) => {
dispatch(nodesChanged(changes));
(nodeChanges) => {
dispatch(nodesChanged(nodeChanges));
},
[dispatch]
);
const onEdgesChange: OnEdgesChange = useCallback(
(changes) => {
dispatch(edgesChanged(changes));
if (changes.length > 0) {
dispatch(edgesChanged(changes));
}
},
[dispatch]
);
@ -207,14 +209,22 @@ export const Flow = memo(() => {
const { nodes, edges } = store.getState().nodes.present;
const nodeChanges: NodeChange[] = [];
const edgeChanges: EdgeChange[] = [];
nodes.forEach(({ id }) => {
nodeChanges.push({ type: 'select', id, selected: true });
nodes.forEach(({ id, selected }) => {
if (!selected) {
nodeChanges.push({ type: 'select', id, selected: true });
}
});
edges.forEach(({ id }) => {
edgeChanges.push({ type: 'select', id, selected: true });
edges.forEach(({ id, selected }) => {
if (!selected) {
edgeChanges.push({ type: 'select', id, selected: true });
}
});
dispatch(nodesChanged(nodeChanges));
dispatch(edgesChanged(edgeChanges));
if (nodeChanges.length > 0) {
dispatch(nodesChanged(nodeChanges));
}
if (edgeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges));
}
},
[dispatch, store]
);
@ -275,8 +285,12 @@ export const Flow = memo(() => {
.forEach(({ id }) => {
edgeChanges.push({ type: 'remove', id });
});
dispatch(nodesChanged(nodeChanges));
dispatch(edgesChanged(edgeChanges));
if (nodeChanges.length > 0) {
dispatch(nodesChanged(nodeChanges));
}
if (edgeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges));
}
}, [dispatch, store]);
useHotkeys(['delete', 'backspace'], onDeleteHotkey);

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

@ -40,8 +40,15 @@ const NodeWrapper = (props: NodeWrapperProps) => {
(e: MouseEvent<HTMLDivElement>) => {
if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) {
const { nodes } = store.getState().nodes.present;
const nodeChanges: NodeChange[] = nodes.map(({ id }) => ({ type: 'select', id, selected: id === nodeId }));
dispatch(nodesChanged(nodeChanges));
const nodeChanges: NodeChange[] = [];
nodes.forEach(({ id, selected }) => {
if (selected !== (id === nodeId)) {
nodeChanges.push({ type: 'select', id, selected: id === nodeId });
}
});
if (nodeChanges.length > 0) {
dispatch(nodesChanged(nodeChanges));
}
}
onCloseGlobal();
},

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

@ -92,15 +92,15 @@ export const useConnection = () => {
);
if (connection) {
const newEdge = connectionToEdge(connection);
const changes: EdgeChange[] = [{ type: 'add', item: newEdge }];
const edgeChanges: EdgeChange[] = [{ type: 'add', item: newEdge }];
const nodesToUpdate = [newEdge.source, newEdge.target];
if (edgePendingUpdate) {
$didUpdateEdge.set(true);
changes.push({ type: 'remove', id: edgePendingUpdate.id });
edgeChanges.push({ type: 'remove', id: edgePendingUpdate.id });
nodesToUpdate.push(edgePendingUpdate.source, edgePendingUpdate.target);
}
dispatch(edgesChanged(changes));
dispatch(edgesChanged(edgeChanges));
updateNodeInternals(nodesToUpdate);
}
$pendingConnection.set(null);

36
invokeai/frontend/web/src/features/nodes/hooks/useCopyPaste.ts
View File

@ -73,12 +73,14 @@ const pasteSelection = (withEdgesToCopiedNodes?: boolean) => {
const nodeChanges: NodeChange[] = [];
const edgeChanges: EdgeChange[] = [];
// Deselect existing nodes
nodes.forEach(({ id }) => {
nodeChanges.push({
type: 'select',
id,
selected: false,
});
nodes.forEach(({ id, selected }) => {
if (selected) {
nodeChanges.push({
type: 'select',
id,
selected: false,
});
}
});
// Add new nodes
copiedNodes.forEach((n) => {
@ -88,12 +90,14 @@ const pasteSelection = (withEdgesToCopiedNodes?: boolean) => {
});
});
// Deselect existing edges
edges.forEach(({ id }) => {
edgeChanges.push({
type: 'select',
id,
selected: false,
});
edges.forEach(({ id, selected }) => {
if (selected) {
edgeChanges.push({
type: 'select',
id,
selected: false,
});
}
});
// Add new edges
copiedEdges.forEach((e) => {
@ -102,8 +106,12 @@ const pasteSelection = (withEdgesToCopiedNodes?: boolean) => {
item: e,
});
});
dispatch(nodesChanged(nodeChanges));
dispatch(edgesChanged(edgeChanges));
if (nodeChanges.length > 0) {
dispatch(nodesChanged(nodeChanges));
}
if (edgeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges));
}
};
const api = { copySelection, pasteSelection };