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): do not rerender edges

Browse Source
This commit is contained in:
psychedelicious 2023-08-16 22:39:29 +10:00
parent 1f194e3688
commit c2e7f62701
1 changed files with 147 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
invokeai/frontend/web/src/features/nodes/components/CustomEdges.tsx
View File

@ -2,8 +2,9 @@ import { Badge, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store'; import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens'; import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
import { useMemo } from 'react'; import { memo, useMemo } from 'react';
import { import {
BaseEdge, BaseEdge,
EdgeLabelRenderer, EdgeLabelRenderer,
@ -20,14 +21,17 @@ const makeEdgeSelector = (
targetHandleId: string | null | undefined, targetHandleId: string | null | undefined,
selected?: boolean selected?: boolean
) => ) =>
createSelector(stateSelector, ({ nodes }) => { createSelector(
stateSelector,
({ nodes }) => {
const sourceNode = nodes.nodes.find((node) => node.id === source); const sourceNode = nodes.nodes.find((node) => node.id === source);
const targetNode = nodes.nodes.find((node) => node.id === target); const targetNode = nodes.nodes.find((node) => node.id === target);
const isInvocationToInvocationEdge = const isInvocationToInvocationEdge =
isInvocationNode(sourceNode) && isInvocationNode(targetNode); isInvocationNode(sourceNode) && isInvocationNode(targetNode);
const isSelected = sourceNode?.selected || targetNode?.selected || selected; const isSelected =
sourceNode?.selected || targetNode?.selected || selected;
const sourceType = isInvocationToInvocationEdge const sourceType = isInvocationToInvocationEdge
? sourceNode?.data?.outputs[sourceHandleId || '']?.type ? sourceNode?.data?.outputs[sourceHandleId || '']?.type
: undefined; : undefined;
@ -42,9 +46,12 @@ const makeEdgeSelector = (
shouldAnimate: nodes.shouldAnimateEdges && isSelected, shouldAnimate: nodes.shouldAnimateEdges && isSelected,
stroke, stroke,
}; };
}); },
defaultSelectorOptions
);
const CollapsedEdge = ({ const CollapsedEdge = memo(
({
sourceX, sourceX,
sourceY, sourceY,
targetX, targetX,
@ -123,9 +130,13 @@ const CollapsedEdge = ({
)} )}
</> </>
); );
}; }
);
const DefaultEdge = ({ CollapsedEdge.displayName = 'CollapsedEdge';
const DefaultEdge = memo(
({
sourceX, sourceX,
sourceY, sourceY,
targetX, targetX,
@ -170,12 +181,17 @@ const DefaultEdge = ({
strokeWidth: isSelected ? 3 : 2, strokeWidth: isSelected ? 3 : 2,
stroke, stroke,
opacity: isSelected ? 0.8 : 0.5, opacity: isSelected ? 0.8 : 0.5,
animation: shouldAnimate ? 'dashdraw 0.5s linear infinite' : undefined, animation: shouldAnimate
? 'dashdraw 0.5s linear infinite'
: undefined,
strokeDasharray: shouldAnimate ? 5 : 'none', strokeDasharray: shouldAnimate ? 5 : 'none',
}} }}
/> />
); );
}; }
);
DefaultEdge.displayName = 'DefaultEdge';
export const edgeTypes = { export const edgeTypes = {
collapsed: CollapsedEdge, collapsed: CollapsedEdge,