Added node context menu with copy, delete, cut and duplicate actions

Author: scar17off

TODO.md

@@ -1,8 +1,5 @@
 # TODO
 
-- [ ] Add Graph inspector panel on the left
-  - [ ] Show output descriptions
-
 - [ ] Add node context menu
   - [ ] Copy node
   - [ ] Delete node

src/VisualScripting.js

@@ -12,6 +12,7 @@ import examples from './examples';
 import { saveAs } from 'file-saver';
 import GraphInspector from './components/GraphInspector';
 import Node from './engine/Node';
+import NodeContextMenu from './components/NodeContextMenu';
 
 const VisualScripting = () => {
   // #region State Declarations
@@ -50,6 +51,7 @@ const VisualScripting = () => {
   const [isMultiSelectMode, setIsMultiSelectMode] = useState(false);
   const [tabs, setTabs] = useState([{ id: 'untitled-1', title: 'Untitled-1', type: 'Export' }]);
   const [activeTab, setActiveTab] = useState('untitled-1');
+  const [nodeContextMenu, setNodeContextMenu] = useState({ visible: false, x: 0, y: 0 });
   // #endregion
 
   // #region Drawing Functions
@@ -72,7 +74,16 @@ const VisualScripting = () => {
     e.preventDefault();
     const rect = canvasRef.current.getBoundingClientRect();
     const { x, y } = camera.screenToWorld(e.clientX - rect.left, e.clientY - rect.top);
-    setContextMenu({ visible: true, x, y });
+    
+    const clickedNode = findClickedNode(x, y);
+    if (clickedNode) {
+      setNodeContextMenu({ visible: true, x, y });
+      if (!selectedNodes.includes(clickedNode)) {
+        setSelectedNodes([clickedNode]);
+      }
+    } else {
+      setContextMenu({ visible: true, x, y });
+    }
     setNeedsRedraw(true);
   };
 
@@ -83,6 +94,9 @@ const VisualScripting = () => {
     if (contextMenu.visible) {
       setContextMenu({ ...contextMenu, visible: false });
     }
+    if (nodeContextMenu.visible) {
+      setNodeContextMenu({ ...nodeContextMenu, visible: false });
+    }
 
     if (connecting) {
       const clickedPort = findClickedPort(x, y);
@@ -117,6 +131,13 @@ const VisualScripting = () => {
     const rect = canvasRef.current.getBoundingClientRect();
     const { x, y } = camera.screenToWorld(e.clientX - rect.left, e.clientY - rect.top);
 
+    if (contextMenu.visible) {
+      setContextMenu({ ...contextMenu, visible: false });
+    }
+    if (nodeContextMenu.visible) {
+      setNodeContextMenu({ ...nodeContextMenu, visible: false });
+    }
+
     const clickedPort = findClickedPort(x, y);
     if (clickedPort) {
       const node = nodes.find(n => n.id === clickedPort.nodeId);
@@ -229,8 +250,20 @@ const VisualScripting = () => {
     for (const node of nodes) {
       const nodeType = nodeTypes[node.type];
       const dimensions = renderer.getNodeDimensions(node, canvasRef.current.getContext('2d'));
-      const clickedPort = node.findClickedPort(x, y, dimensions, nodeType);
-      if (clickedPort) return clickedPort;
+      
+      // Check input ports
+      for (let i = 0; i < nodeType.inputs.length; i++) {
+        if (node.isPortClicked(x, y, i, true, dimensions)) {
+          return node.getPortPosition(i, true, dimensions);
+        }
+      }
+
+      // Check output ports
+      for (let i = 0; i < nodeType.outputs.length; i++) {
+        if (node.isPortClicked(x, y, i, false, dimensions)) {
+          return node.getPortPosition(i, false, dimensions);
+        }
+      }
     }
     return null;
   };
@@ -721,6 +754,37 @@ const VisualScripting = () => {
   };
   // #endregion
 
+  // #region Handle Node Context Menu Actions
+  const handleNodeContextMenuAction = (action) => {
+    switch (action) {
+      case 'copy':
+        setCopiedNodes([...selectedNodes]);
+        break;
+      case 'delete':
+        deleteSelectedNodes();
+        break;
+      case 'cut':
+        setCopiedNodes([...selectedNodes]);
+        deleteSelectedNodes();
+        break;
+      case 'duplicate':
+        const newNodes = selectedNodes.map(node => {
+          // Create a proper Node instance using the static create method
+          const duplicatedNode = Node.create(node.type, node.x + 20, node.y + 20, nodeTypes);
+          // Copy over the properties
+          duplicatedNode.properties = { ...node.properties };
+          return duplicatedNode;
+        });
+        setNodes([...nodes, ...newNodes]);
+        setSelectedNodes(newNodes);
+        break;
+      default:
+        console.log(`Unhandled node context menu action: ${action}`);
+    }
+    setNodeContextMenu({ ...nodeContextMenu, visible: false });
+  };
+  // #endregion
+
   // #region Render
   return (
     <div
@@ -818,6 +882,13 @@ const VisualScripting = () => {
                 addNode={addNode}
                 camera={camera}
               />
+              <NodeContextMenu
+                visible={nodeContextMenu.visible}
+                x={nodeContextMenu.x}
+                y={nodeContextMenu.y}
+                camera={camera}
+                onAction={handleNodeContextMenuAction}
+              />
             </div>
           </>
         ) : activeTab === 'settings' ? (

src/components/NodeContextMenu.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import styles from './ContextMenu.module.css';
+
+const NodeContextMenu = ({ visible, x, y, camera, onAction }) => {
+  if (!visible) return null;
+
+  const menuItems = [
+    { icon: 'fa-copy', label: 'Copy', action: 'copy' },
+    { icon: 'fa-trash', label: 'Delete', action: 'delete' },
+    { icon: 'fa-cut', label: 'Cut', action: 'cut' },
+    { icon: 'fa-clone', label: 'Duplicate', action: 'duplicate' },
+  ];
+
+  return (
+    <div
+      className={styles.contextMenu}
+      style={{
+        top: `${y * camera.scale + camera.y}px`,
+        left: `${x * camera.scale + camera.x}px`,
+      }}
+    >
+      <div className={styles.mainMenu}>
+        {menuItems.map(({ icon, label, action }) => (
+          <button
+            key={action}
+            onClick={() => onAction(action)}
+            className={styles.nodeButton}
+          >
+            <i className={`fas ${icon} ${styles.icon}`}></i>
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default NodeContextMenu;