shift output and source buttons to node context menu

Author: Tara-Lakshmipathy

js/ContextMenu.css

@@ -0,0 +1,33 @@
+@import url('./widget.css');
+ 
+html,
+body {
+  margin: 0;
+  font-family: sans-serif;
+  box-sizing: border-box;
+}
+ 
+#app {
+  width: 100vw;
+  height: 100vh;
+}
+ 
+.context-menu {
+  background: white;
+  border-style: solid;
+  box-shadow: 10px 19px 20px rgba(0, 0, 0, 10%);
+  position: absolute;
+  z-index: 10;
+}
+ 
+.context-menu button {
+  border: none;
+  display: block;
+  padding: 0.5em;
+  text-align: left;
+  width: 100%;
+}
+ 
+.context-menu button:hover {
+  background: white;
+}

js/ContextMenu.jsx

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import { useReactFlow } from '@xyflow/react';
+ 
+export default function ContextMenu({
+  id,
+  data,
+  top,
+  left,
+  right,
+  bottom,
+  onOutput,
+  onSource,
+  ...props
+}) {
+
+  return (
+    <div
+      style={{ position: 'absolute', top: top, left: left, zIndex: 1000 }}
+      className="context-menu"
+      {...props}
+    >
+      <p style={{ margin: '0.5em' }}>
+        <b>node: {id}</b>
+      </p>
+      <button onClick={() => onOutput(data)} title="View the output(s) of this node without running it"> View Output</button>
+      <button onClick={() => onSource(data)} title="View the source code of this node">View Source</button>
+    </div>
+  );
+}

js/CustomNode.jsx

@@ -46,19 +46,7 @@ export default memo(({ data, node_status }) => {
         model.save_changes();
     }
 
-    const outputFunction = () => {
-        // direct output of node to output widget
-        console.log('output: ', data.label)
-        model.set("commands", `output: ${data.label}`);
-        model.save_changes();
-    }
-
-    const sourceFunction = () => {
-        // show source code of node
-        console.log('source: ', data.label) 
-        model.set("commands", `source: ${data.label}`);
-        model.save_changes();        
-    }
+    // outputFunction and sourceFunction lifted to widget.jsx to be used by ContextMenu.jsx
 
     const resetFunction = () => {
         // reset state and cache of node
@@ -273,8 +261,6 @@ export default memo(({ data, node_status }) => {
           <button onClick={pullFunction} title="Run all connected upstream nodes and this node">Pull</button>
           <button onClick={pushFunction} title="Run this node and all connected downstream nodes">Push</button>
           <button onClick={resetFunction} title="Reset this node by clearing its cache">Reset</button>
-          <button onClick={outputFunction} title="View the current output(s) of this node">Output</button>
-          <button onClick={sourceFunction} title="Show the source code of this node">Source</button>
       </NodeToolbar>        
     </div>
   );

js/widget.jsx

@@ -12,6 +12,7 @@ import {
   useOnSelectionChange,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import { ReactFlowProvider } from '@xyflow/react';
 
 
 import TextUpdaterNode from './TextUpdaterNode.jsx';
@@ -20,6 +21,8 @@ import {getLayoutedNodes2}  from './useElkLayout';
 
 import './text-updater-node.css';
 import './widget.css';
+import './ContextMenu.css';
+import ContextMenu from './ContextMenu';
 
 /**
  * Author: Joerg Neugebauer
@@ -79,6 +82,9 @@ const render = createRender(() => {
   const selectedNodes = [];
   const selectedEdges = [];
 
+  const [menu, setMenu] = useState(null);
+  const ref = useRef(null);
+
   const nodeTypes = {
     textUpdater: TextUpdaterNode, 
     customNode: CustomNode,
@@ -89,6 +95,37 @@ const render = createRender(() => {
     setNodes(layoutedNodes);
     // setTimeout(() => fitView(), 0);
   };
+
+  const outputFunction = (data) => {
+    // direct output of node to output widget
+    console.log('output: ', data.label)
+    model.set("commands", `output: ${data.label}`);
+    model.save_changes();
+}
+
+const sourceFunction = (data) => {
+    // show source code of node
+    console.log('source: ', data.label) 
+    model.set("commands", `source: ${data.label}`);
+    model.save_changes();        
+}
+
+  const onNodeContextMenu = useCallback(
+    (event, node) => {
+      // Prevent native context menu from showing
+      event.preventDefault();
+ 
+      const wrapperRect = reactFlowWrapper.current.getBoundingClientRect();
+    setMenu({
+      id: node.id,
+      top: event.clientY - wrapperRect.top,  // relative to wrapper top
+      left: event.clientX - wrapperRect.left, // relative to wrapper left
+      data: node.data
+      });
+    },
+  );
+
+  const onPaneClick = useCallback(() => setMenu(null), [setMenu]);
 
   useEffect(() => {
     layoutNodes();
@@ -381,7 +418,8 @@ const render = createRender(() => {
   }, [model, reactFlowWrapper]);
 
   return (
-    <div style={{ position: "relative", height: "100%", width: "100%" }}>
+    <ReactFlowProvider>
+    <div ref={reactFlowWrapper} style={{ position: "relative", height: "100%", width: "100%" }}>
       <UpdateDataContext.Provider value={updateData}> 
         <ReactFlow 
             nodes={nodes} 
@@ -393,10 +431,10 @@ const render = createRender(() => {
             onNodesDelete={onNodesDelete}
             onMoveEnd={onMoveEnd}
             nodeTypes={nodeTypes}
+            onPaneClick={onPaneClick}
+            onNodeContextMenu={onNodeContextMenu}
             fitView
             style={rfStyle}
-            // makes sure that reactFlowWrapper wrapper contains a ref to this element
-            ref={reactFlowWrapper}
             /*debugMode={true}*/
         >
       {/*
@@ -461,8 +499,10 @@ const render = createRender(() => {
             Reset Layout
           </button>
         </ReactFlow>
+        {menu && <ContextMenu onOutput={outputFunction} onSource={sourceFunction} onClick={onPaneClick} {...menu} />}
       </UpdateDataContext.Provider>
     </div>
+    </ReactFlowProvider>
   );
 });