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 // Deselect all other nodes and edges
const nodeChanges: NodeChange[] = [{ type: 'add', item: node }]; const nodeChanges: NodeChange[] = [{ type: 'add', item: node }];
const edgeChanges: EdgeChange[] = []; const edgeChanges: EdgeChange[] = [];
nodes.forEach(({ id }) => { nodes.forEach(({ id, selected }) => {
nodeChanges.push({ type: 'select', id, selected: false }); if (selected) {
nodeChanges.push({ type: 'select', id, selected: false });
}
}); });
edges.forEach(({ id }) => { edges.forEach(({ id, selected }) => {
edgeChanges.push({ type: 'select', id, selected: false }); if (selected) {
edgeChanges.push({ type: 'select', id, selected: false });
}
}); });
// Onwards! // Onwards!
dispatch(nodesChanged(nodeChanges)); if (nodeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges)); dispatch(nodesChanged(nodeChanges));
}
if (edgeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges));
}
return node; return node;
}, },
[buildInvocation, store, dispatch, t, toaster] [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( const onNodesChange: OnNodesChange = useCallback(
(changes) => { (nodeChanges) => {
dispatch(nodesChanged(changes)); dispatch(nodesChanged(nodeChanges));
}, },
[dispatch] [dispatch]
); );
const onEdgesChange: OnEdgesChange = useCallback( const onEdgesChange: OnEdgesChange = useCallback(
(changes) => { (changes) => {
dispatch(edgesChanged(changes)); if (changes.length > 0) {
dispatch(edgesChanged(changes));
}
}, },
[dispatch] [dispatch]
); );
@ -207,14 +209,22 @@ export const Flow = memo(() => {
const { nodes, edges } = store.getState().nodes.present; const { nodes, edges } = store.getState().nodes.present;
const nodeChanges: NodeChange[] = []; const nodeChanges: NodeChange[] = [];
const edgeChanges: EdgeChange[] = []; const edgeChanges: EdgeChange[] = [];
nodes.forEach(({ id }) => { nodes.forEach(({ id, selected }) => {
nodeChanges.push({ type: 'select', id, selected: true }); if (!selected) {
nodeChanges.push({ type: 'select', id, selected: true });
}
}); });
edges.forEach(({ id }) => { edges.forEach(({ id, selected }) => {
edgeChanges.push({ type: 'select', id, selected: true }); if (!selected) {
edgeChanges.push({ type: 'select', id, selected: true });
}
}); });
dispatch(nodesChanged(nodeChanges)); if (nodeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges)); dispatch(nodesChanged(nodeChanges));
}
if (edgeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges));
}
}, },
[dispatch, store] [dispatch, store]
); );
@ -275,8 +285,12 @@ export const Flow = memo(() => {
.forEach(({ id }) => { .forEach(({ id }) => {
edgeChanges.push({ type: 'remove', id }); edgeChanges.push({ type: 'remove', id });
}); });
dispatch(nodesChanged(nodeChanges)); if (nodeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges)); dispatch(nodesChanged(nodeChanges));
}
if (edgeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges));
}
}, [dispatch, store]); }, [dispatch, store]);
useHotkeys(['delete', 'backspace'], onDeleteHotkey); 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>) => { (e: MouseEvent<HTMLDivElement>) => {
if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) { if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) {
const { nodes } = store.getState().nodes.present; const { nodes } = store.getState().nodes.present;
const nodeChanges: NodeChange[] = nodes.map(({ id }) => ({ type: 'select', id, selected: id === nodeId })); const nodeChanges: NodeChange[] = [];
dispatch(nodesChanged(nodeChanges)); nodes.forEach(({ id, selected }) => {
if (selected !== (id === nodeId)) {
nodeChanges.push({ type: 'select', id, selected: id === nodeId });
}
});
if (nodeChanges.length > 0) {
dispatch(nodesChanged(nodeChanges));
}
} }
onCloseGlobal(); onCloseGlobal();
}, },

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

@ -92,15 +92,15 @@ export const useConnection = () => {
); );
if (connection) { if (connection) {
const newEdge = connectionToEdge(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]; const nodesToUpdate = [newEdge.source, newEdge.target];
if (edgePendingUpdate) { if (edgePendingUpdate) {
$didUpdateEdge.set(true); $didUpdateEdge.set(true);
changes.push({ type: 'remove', id: edgePendingUpdate.id }); edgeChanges.push({ type: 'remove', id: edgePendingUpdate.id });
nodesToUpdate.push(edgePendingUpdate.source, edgePendingUpdate.target); nodesToUpdate.push(edgePendingUpdate.source, edgePendingUpdate.target);
} }
dispatch(edgesChanged(changes)); dispatch(edgesChanged(edgeChanges));
updateNodeInternals(nodesToUpdate); updateNodeInternals(nodesToUpdate);
} }
$pendingConnection.set(null); $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 nodeChanges: NodeChange[] = [];
const edgeChanges: EdgeChange[] = []; const edgeChanges: EdgeChange[] = [];
// Deselect existing nodes // Deselect existing nodes
nodes.forEach(({ id }) => { nodes.forEach(({ id, selected }) => {
nodeChanges.push({ if (selected) {
type: 'select', nodeChanges.push({
id, type: 'select',
selected: false, id,
}); selected: false,
});
}
}); });
// Add new nodes // Add new nodes
copiedNodes.forEach((n) => { copiedNodes.forEach((n) => {
@ -88,12 +90,14 @@ const pasteSelection = (withEdgesToCopiedNodes?: boolean) => {
}); });
}); });
// Deselect existing edges // Deselect existing edges
edges.forEach(({ id }) => { edges.forEach(({ id, selected }) => {
edgeChanges.push({ if (selected) {
type: 'select', edgeChanges.push({
id, type: 'select',
selected: false, id,
}); selected: false,
});
}
}); });
// Add new edges // Add new edges
copiedEdges.forEach((e) => { copiedEdges.forEach((e) => {
@ -102,8 +106,12 @@ const pasteSelection = (withEdgesToCopiedNodes?: boolean) => {
item: e, item: e,
}); });
}); });
dispatch(nodesChanged(nodeChanges)); if (nodeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges)); dispatch(nodesChanged(nodeChanges));
}
if (edgeChanges.length > 0) {
dispatch(edgesChanged(edgeChanges));
}
}; };
const api = { copySelection, pasteSelection }; const api = { copySelection, pasteSelection };