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): update most other selectors

Browse Source 
Just a few stragglers left. Good enough for now.
This commit is contained in:
psychedelicious
2024-01-05 23:35:24 +11:00
parent b71b14d582
commit 3c4150d153
68 changed files with 492 additions and 856 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor';
@ -8,25 +8,17 @@ import { memo } from 'react';
import type { ConnectionLineComponentProps } from 'reactflow';
import { getBezierPath } from 'reactflow';
const selector = createMemoizedSelector(selectNodesSlice, (nodes) => {
const { shouldAnimateEdges, connectionStartFieldType, shouldColorEdges } =
nodes;
const selectStroke = createSelector(selectNodesSlice, (nodes) =>
nodes.shouldColorEdges
? getFieldColor(nodes.connectionStartFieldType)
: colorTokenToCssVar('base.500')
);
const stroke = shouldColorEdges
? getFieldColor(connectionStartFieldType)
: colorTokenToCssVar('base.500');
let className = 'react-flow__custom_connection-path';
if (shouldAnimateEdges) {
className = className.concat(' animated');
}
return {
stroke,
className,
};
});
const selectClassName = createSelector(selectNodesSlice, (nodes) =>
nodes.shouldAnimateEdges
? 'react-flow__custom_connection-path animated'
: 'react-flow__custom_connection-path'
);
const pathStyles: CSSProperties = { opacity: 0.8 };
@ -38,7 +30,8 @@ const CustomConnectionLine = ({
toY,
toPosition,
}: ConnectionLineComponentProps) => {
const { stroke, className } = useAppSelector(selector);
const stroke = useAppSelector(selectStroke);
const className = useAppSelector(selectClassName);
const pathParams = {
sourceX: fromX,

8
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import InvocationNode from 'features/nodes/components/flow/nodes/Invocation/InvocationNode';
import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice';
@ -14,15 +14,15 @@ const InvocationNodeWrapper = (props: NodeProps<InvocationNodeData>) => {
const hasTemplateSelector = useMemo(
() =>
createMemoizedSelector(selectNodeTemplatesSlice, (nodeTemplates) =>
createSelector(selectNodeTemplatesSlice, (nodeTemplates) =>
Boolean(nodeTemplates.templates[type])
),
[type]
);
const nodeTemplate = useAppSelector(hasTemplateSelector);
const hasTemplate = useAppSelector(hasTemplateSelector);
if (!nodeTemplate) {
if (!hasTemplate) {
return (
<InvocationNodeUnknownFallback
nodeId={nodeId}

12
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import type { InvContextMenuProps } from 'common/components/InvContextMenu/InvContextMenu';
import { InvContextMenu } from 'common/components/InvContextMenu/InvContextMenu';
@ -36,16 +36,14 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
e.preventDefault();
}, []);
const selector = useMemo(
const selectIsExposed = useMemo(
() =>
createMemoizedSelector(selectWorkflowSlice, (workflow) => {
const isExposed = Boolean(
createSelector(selectWorkflowSlice, (workflow) => {
return Boolean(
workflow.exposedFields.find(
(f) => f.nodeId === nodeId && f.fieldName === fieldName
)
);
return { isExposed };
}),
[fieldName, nodeId]
);
@ -55,7 +53,7 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
[input]
);
const { isExposed } = useAppSelector(selector);
const isExposed = useAppSelector(selectIsExposed);
const handleExposeField = useCallback(() => {
dispatch(workflowExposedFieldAdded({ nodeId, fieldName }));

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

@ -1,6 +1,6 @@
import type { ChakraProps } from '@chakra-ui/react';
import { Box, useToken } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger';
@ -30,7 +30,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
const selectIsInProgress = useMemo(
() =>
createMemoizedSelector(
createSelector(
selectNodesSlice,
(nodes) =>
nodes.nodeExecutionStates[nodeId]?.status ===

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

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { makeConnectionErrorSelector } from 'features/nodes/store/util/makeIsConnectionValidSelector';
@ -6,7 +6,7 @@ import { useMemo } from 'react';
import { useFieldType } from './useFieldType.ts';
const selectIsConnectionInProgress = createMemoizedSelector(
const selectIsConnectionInProgress = createSelector(
selectNodesSlice,
(nodes) =>
nodes.connectionStartFieldType !== null &&
@ -28,7 +28,7 @@ export const useConnectionState = ({
const selectIsConnected = useMemo(
() =>
createMemoizedSelector(selectNodesSlice, (nodes) =>
createSelector(selectNodesSlice, (nodes) =>
Boolean(
nodes.edges.filter((edge) => {
return (
@ -55,7 +55,7 @@ export const useConnectionState = ({
const selectIsConnectionStartField = useMemo(
() =>
createMemoizedSelector(selectNodesSlice, (nodes) =>
createSelector(selectNodesSlice, (nodes) =>
Boolean(
nodes.connectionStartParams?.nodeId === nodeId &&
nodes.connectionStartParams?.handleId === fieldName &&

4
invokeai/frontend/web/src/features/nodes/hooks/useDoNodeVersionsMatch.ts
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { compareVersions } from 'compare-versions';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
@ -9,7 +9,7 @@ import { useMemo } from 'react';
export const useDoNodeVersionsMatch = (nodeId: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(
createSelector(
selectNodesSlice,
selectNodeTemplatesSlice,
(nodes, nodeTemplates) => {

4
invokeai/frontend/web/src/features/nodes/hooks/useFieldInputKind.ts
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice';
@ -8,7 +8,7 @@ import { useMemo } from 'react';
export const useFieldInputKind = (nodeId: string, fieldName: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(
createSelector(
selectNodesSlice,
selectNodeTemplatesSlice,
(nodes, nodeTemplates) => {

4
invokeai/frontend/web/src/features/nodes/hooks/useFieldLabel.ts
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { isInvocationNode } from 'features/nodes/types/invocation';
@ -7,7 +7,7 @@ import { useMemo } from 'react';
export const useFieldLabel = (nodeId: string, fieldName: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(selectNodesSlice, (nodes) => {
createSelector(selectNodesSlice, (nodes) => {
const node = nodes.nodes.find((node) => node.id === nodeId);
if (!isInvocationNode(node)) {
return;

8
invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice';
@ -13,7 +13,7 @@ export const useFieldTemplateTitle = (
) => {
const selector = useMemo(
() =>
createMemoizedSelector(
createSelector(
selectNodesSlice,
selectNodeTemplatesSlice,
(nodes, nodeTemplates) => {
@ -28,7 +28,7 @@ export const useFieldTemplateTitle = (
[fieldName, kind, nodeId]
);
const fieldTemplate = useAppSelector(selector);
const fieldTemplateTitle = useAppSelector(selector);
return fieldTemplate;
return fieldTemplateTitle;
};

4
invokeai/frontend/web/src/features/nodes/hooks/useGetNodesNeedUpdate.ts
View File

@ -1,11 +1,11 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice';
import { isInvocationNode } from 'features/nodes/types/invocation';
import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
const selector = createMemoizedSelector(
const selector = createSelector(
selectNodesSlice,
selectNodeTemplatesSlice,
(nodes, nodeTemplates) =>

8
invokeai/frontend/web/src/features/nodes/hooks/useIsIntermediate.ts
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { isInvocationNode } from 'features/nodes/types/invocation';
@ -7,7 +7,7 @@ import { useMemo } from 'react';
export const useIsIntermediate = (nodeId: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(selectNodesSlice, (nodes) => {
createSelector(selectNodesSlice, (nodes) => {
const node = nodes.nodes.find((node) => node.id === nodeId);
if (!isInvocationNode(node)) {
return false;
@ -17,6 +17,6 @@ export const useIsIntermediate = (nodeId: string) => {
[nodeId]
);
const is_intermediate = useAppSelector(selector);
return is_intermediate;
const isIntermediate = useAppSelector(selector);
return isIntermediate;
};

4
invokeai/frontend/web/src/features/nodes/hooks/useNodeLabel.ts
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { isInvocationNode } from 'features/nodes/types/invocation';
@ -7,7 +7,7 @@ import { useMemo } from 'react';
export const useNodeLabel = (nodeId: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(selectNodesSlice, (nodes) => {
createSelector(selectNodesSlice, (nodes) => {
const node = nodes.nodes.find((node) => node.id === nodeId);
if (!isInvocationNode(node)) {
return false;

8
invokeai/frontend/web/src/features/nodes/hooks/useNodePack.ts
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { isInvocationNode } from 'features/nodes/types/invocation';
@ -7,7 +7,7 @@ import { useMemo } from 'react';
export const useNodePack = (nodeId: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(selectNodesSlice, (nodes) => {
createSelector(selectNodesSlice, (nodes) => {
const node = nodes.nodes.find((node) => node.id === nodeId);
if (!isInvocationNode(node)) {
return false;
@ -17,6 +17,6 @@ export const useNodePack = (nodeId: string) => {
[nodeId]
);
const title = useAppSelector(selector);
return title;
const nodePack = useAppSelector(selector);
return nodePack;
};

4
invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateTitle.ts
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice';
@ -8,7 +8,7 @@ import { useMemo } from 'react';
export const useNodeTemplateTitle = (nodeId: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(
createSelector(
selectNodesSlice,
selectNodeTemplatesSlice,
(nodes, nodeTemplates) => {

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

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { isInvocationNode } from 'features/nodes/types/invocation';
@ -7,13 +7,11 @@ import { useMemo } from 'react';
export const useUseCache = (nodeId: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(selectNodesSlice, (nodes) => {
createSelector(selectNodesSlice, (nodes) => {
const node = nodes.nodes.find((node) => node.id === nodeId);
if (!isInvocationNode(node)) {
return false;
}
// cast to boolean to support older workflows that didn't have useCache
// TODO: handle this better somehow
return node.data.useCache;
}),
[nodeId]

4
invokeai/frontend/web/src/features/nodes/store/util/makeIsConnectionValidSelector.ts
View File

@ -1,4 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { createSelector } from '@reduxjs/toolkit';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import type { FieldType } from 'features/nodes/types/field';
import i18n from 'i18next';
@ -18,7 +18,7 @@ export const makeConnectionErrorSelector = (
handleType: HandleType,
fieldType?: FieldType
) => {
return createMemoizedSelector(selectNodesSlice, (nodesSlice) => {
return createSelector(selectNodesSlice, (nodesSlice) => {
if (!fieldType) {
return i18n.t('nodes.noFieldType');
}