github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): make nodesSlice undoable

Browse Source
This commit is contained in:
psychedelicious
2024-05-15 16:37:13 +10:00
parent 31d8b50276
commit 27826369f0
18 changed files with 64 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,8 +55,8 @@ const AddNodePopover = () => {
const selectRef = useRef<SelectInstance<ComboboxOption> | null>(null);
const inputRef = useRef<HTMLInputElement>(null);
const fieldFilter = useAppSelector((s) => s.nodes.connectionStartFieldType);
const handleFilter = useAppSelector((s) => s.nodes.connectionStartParams?.handleType);
const fieldFilter = useAppSelector((s) => s.nodes.present.connectionStartFieldType);
const handleFilter = useAppSelector((s) => s.nodes.present.connectionStartParams?.handleType);
const selector = createMemoizedSelector(selectNodesSlice, (nodes) => {
// If we have a connection in progress, we need to filter the node choices
@@ -105,7 +105,7 @@ const AddNodePopover = () => {
});
const { options } = useAppSelector(selector);
const isOpen = useAppSelector((s) => s.nodes.isAddNodePopoverOpen);
const isOpen = useAppSelector((s) => s.nodes.present.isAddNodePopoverOpen);
const addNode = useCallback(
(nodeType: string) => {

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

@@ -14,11 +14,13 @@ import {
edgesDeleted,
nodesChanged,
nodesDeleted,
redo,
selectedAll,
selectedEdgesChanged,
selectedNodesChanged,
selectionCopied,
selectionPasted,
undo,
viewportChanged,
} from 'features/nodes/store/nodesSlice';
import { $flow } from 'features/nodes/store/reactFlowInstance';
@@ -70,11 +72,11 @@ const snapGrid: [number, number] = [25, 25];
export const Flow = memo(() => {
const dispatch = useAppDispatch();
const nodes = useAppSelector((s) => s.nodes.nodes);
const edges = useAppSelector((s) => s.nodes.edges);
const viewport = useAppSelector((s) => s.nodes.viewport);
const shouldSnapToGrid = useAppSelector((s) => s.nodes.shouldSnapToGrid);
const selectionMode = useAppSelector((s) => s.nodes.selectionMode);
const nodes = useAppSelector((s) => s.nodes.present.nodes);
const edges = useAppSelector((s) => s.nodes.present.edges);
const viewport = useAppSelector((s) => s.nodes.present.viewport);
const shouldSnapToGrid = useAppSelector((s) => s.nodes.present.shouldSnapToGrid);
const selectionMode = useAppSelector((s) => s.nodes.present.selectionMode);
const flowWrapper = useRef<HTMLDivElement>(null);
const cursorPosition = useRef<XYPosition | null>(null);
const isValidConnection = useIsValidConnection();
@@ -251,6 +253,22 @@ export const Flow = memo(() => {
dispatch(selectionPasted({ cursorPosition: cursorPosition.current }));
});
useHotkeys(
['meta+z', 'ctrl+z'],
() => {
dispatch(undo());
},
[dispatch]
);
useHotkeys(
['meta+shift+z', 'ctrl+shift+z'],
() => {
dispatch(redo());
},
[dispatch]
);
return (
<ReactFlow
id="workflow-editor"

2
invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
View File

@@ -27,7 +27,7 @@ const InvocationDefaultEdge = ({
);
const { isSelected, shouldAnimate, stroke, label } = useAppSelector(selector);
const shouldShowEdgeLabels = useAppSelector((s) => s.nodes.shouldShowEdgeLabels);
const shouldShowEdgeLabels = useAppSelector((s) => s.nodes.present.shouldShowEdgeLabels);
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,

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

@@ -39,7 +39,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
const dispatch = useAppDispatch();
const opacity = useAppSelector((s) => s.nodes.nodeOpacity);
const opacity = useAppSelector((s) => s.nodes.present.nodeOpacity);
const { onCloseGlobal } = useGlobalMenuClose();
const handleClick = useCallback(

2
invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx
View File

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
const NodeOpacitySlider = () => {
const dispatch = useAppDispatch();
const nodeOpacity = useAppSelector((s) => s.nodes.nodeOpacity);
const nodeOpacity = useAppSelector((s) => s.nodes.present.nodeOpacity);
const { t } = useTranslation();
const handleChange = useCallback(

4
invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
View File

@@ -19,9 +19,9 @@ const ViewportControls = () => {
const { zoomIn, zoomOut, fitView } = useReactFlow();
const dispatch = useAppDispatch();
// const shouldShowFieldTypeLegend = useAppSelector(
// (s) => s.nodes.shouldShowFieldTypeLegend
// (s) => s.nodes.present.shouldShowFieldTypeLegend
// );
const shouldShowMinimapPanel = useAppSelector((s) => s.nodes.shouldShowMinimapPanel);
const shouldShowMinimapPanel = useAppSelector((s) => s.nodes.present.shouldShowMinimapPanel);
const handleClickedZoomIn = useCallback(() => {
zoomIn();

2
invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
View File

@@ -16,7 +16,7 @@ const minimapStyles: SystemStyleObject = {
};
const MinimapPanel = () => {
const shouldShowMinimapPanel = useAppSelector((s) => s.nodes.shouldShowMinimapPanel);
const shouldShowMinimapPanel = useAppSelector((s) => s.nodes.present.shouldShowMinimapPanel);
return (
<Flex gap={2} position="absolute" bottom={0} insetInlineEnd={0}>