Also for the nodesMenu

chaiNNer-org · Feb 10, 2024 · 4263645 · 4263645
1 parent b1960a7
commit 4263645
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 23 deletions.
diff --git a/src/renderer/components/ReactFlowBox.tsx b/src/renderer/components/ReactFlowBox.tsx
@@ -426,10 +426,12 @@ export const ReactFlowBox = memo(({ wrapperRef, nodeTypes, edgeTypes }: ReactFlo
     const { onConnectStart, onConnectStop, onPaneContextMenu } = usePaneNodeSearchMenu();
 
     const [selectedNodes, setSelectedNodes] = useState<Node<NodeData>[]>([]);
-    const selectionMenu = useNodesMenu(selectedNodes);
+    const [memoBustNumber, setMemoBustNumber] = useState(0);
+    const selectionMenu = useNodesMenu(selectedNodes, memoBustNumber);
     const onSelectionContextMenu = useCallback(
         (event: React.MouseEvent, nodes: Node<NodeData>[]) => {
             setSelectedNodes(nodes);
+            setMemoBustNumber((n) => n + 1);
             selectionMenu.onContextMenu(event);
         },
         [selectionMenu, setSelectedNodes]

diff --git a/src/renderer/components/node/Node.tsx b/src/renderer/components/node/Node.tsx
@@ -280,12 +280,12 @@ const NodeInner = memo(({ data, selected }: NodeProps) => {
     useWatchFiles(filesToWatch, reload);
 
     const disabled = useDisabled(data);
-    const [forceReloadNumber, setForceReloadNumber] = useState(0);
+    const [memoBustNumber, setMemoBustNumber] = useState(0);
     const menu = useNodeMenu(
         data,
         disabled,
         { reload: startingNode ? reload : undefined },
-        forceReloadNumber
+        memoBustNumber
     );
 
     const toggleCollapse = useCallback(() => {
@@ -305,8 +305,8 @@ const NodeInner = memo(({ data, selected }: NodeProps) => {
             toggleCollapse={toggleCollapse}
             validity={validity}
             onContextMenu={(e) => {
+                setMemoBustNumber((n) => n + 1);
                 menu.onContextMenu(e);
-                setForceReloadNumber((n) => n + 1);
             }}
             onDragOver={onDragOver}
             onDrop={onDrop}

diff --git a/src/renderer/hooks/useNodesMenu.tsx b/src/renderer/hooks/useNodesMenu.tsx
@@ -1,20 +1,29 @@
 import { CloseIcon, CopyIcon, DeleteIcon } from '@chakra-ui/icons';
 import { MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
+import { useEffect, useRef, useState } from 'react';
 import { Node, useReactFlow } from 'reactflow';
 import { useContext } from 'use-context-selector';
 import { EdgeData, NodeData } from '../../common/common-types';
 import { GlobalContext } from '../contexts/GlobalNodeState';
 import { copyToClipboard } from '../helpers/copyAndPaste';
 import { UseContextMenu, useContextMenu } from './useContextMenu';
 
-export const useNodesMenu = (nodes: Node<NodeData>[]): UseContextMenu => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+export const useNodesMenu = (nodes: Node<NodeData>[], memoBust?: any): UseContextMenu => {
     const { removeNodesById, resetInputs, resetConnections, duplicateNodes } =
         useContext(GlobalContext);
 
     const nodeIds = nodes.map((n) => n.id);
 
     const { getNodes, getEdges } = useReactFlow<NodeData, EdgeData>();
 
+    const resetMenuParentRef = useRef<HTMLButtonElement>(null);
+    const [showResetSubMenu, setShowResetSubMenu] = useState(false);
+
+    useEffect(() => {
+        setShowResetSubMenu(false);
+    }, []);
+
     return useContextMenu(() => (
         <MenuList className="nodrag">
             <MenuItem
@@ -36,29 +45,85 @@ export const useNodesMenu = (nodes: Node<NodeData>[]): UseContextMenu => {
             <MenuDivider />
             <MenuItem
                 icon={<CloseIcon />}
-                onClick={() => {
-                    resetInputs(nodeIds);
+                ref={resetMenuParentRef}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setShowResetSubMenu(true);
                 }}
-            >
-                Reset Inputs
-            </MenuItem>
-            <MenuItem
-                icon={<CloseIcon />}
-                onClick={() => {
-                    resetConnections(nodeIds);
+                onContextMenu={() => {
+                    setShowResetSubMenu(false);
                 }}
-            >
-                Reset Connections
-            </MenuItem>
-            <MenuItem
-                icon={<CloseIcon />}
-                onClick={() => {
-                    resetInputs(nodeIds);
-                    resetConnections(nodeIds);
+                onMouseEnter={() => {
+                    setShowResetSubMenu(true);
+                }}
+                onMouseLeave={() => {
+                    setShowResetSubMenu(false);
+                }}
+                onMouseOver={() => {
+                    setShowResetSubMenu(true);
                 }}
             >
-                Reset All
+                Reset Node
             </MenuItem>
+            {showResetSubMenu && (
+                <MenuList
+                    className="nodrag"
+                    left={resetMenuParentRef.current?.offsetWidth || 0}
+                    position="absolute"
+                    top={(resetMenuParentRef.current?.offsetHeight || 0) - 12}
+                    onContextMenu={() => {
+                        setShowResetSubMenu(false);
+                    }}
+                    onMouseEnter={() => {
+                        setShowResetSubMenu(true);
+                    }}
+                    onMouseLeave={() => {
+                        setShowResetSubMenu(false);
+                    }}
+                    onMouseOver={() => {
+                        setShowResetSubMenu(true);
+                    }}
+                >
+                    <MenuItem
+                        icon={<CloseIcon />}
+                        onClick={() => {
+                            resetInputs(nodeIds);
+                            setShowResetSubMenu(false);
+                        }}
+                        onMouseLeave={() => {
+                            setShowResetSubMenu(false);
+                        }}
+                    >
+                        Reset Inputs
+                    </MenuItem>
+                    <MenuItem
+                        icon={<CloseIcon />}
+                        onClick={() => {
+                            resetConnections(nodeIds);
+                            setShowResetSubMenu(false);
+                        }}
+                        onMouseLeave={() => {
+                            setShowResetSubMenu(false);
+                        }}
+                    >
+                        Reset Connections
+                    </MenuItem>
+                    <MenuItem
+                        icon={<CloseIcon />}
+                        onClick={() => {
+                            resetInputs(nodeIds);
+                            resetConnections(nodeIds);
+                            setShowResetSubMenu(false);
+                        }}
+                        onMouseLeave={() => {
+                            setShowResetSubMenu(false);
+                        }}
+                    >
+                        Reset All
+                    </MenuItem>
+                </MenuList>
+            )}
             <MenuDivider />
             <MenuItem
                 icon={<DeleteIcon />}