refactor context menu II

src/components/Graph.tsx

@@ -1,14 +1,13 @@
-import { createContext, useContext, useEffect, useRef, useState, type MouseEventHandler } from "react";
+import { useEffect, useRef, useState } from "react";
 import Viz from 'viz.js';
 import { Module, render } from 'viz.js/full.render.js';
 import * as d3 from 'd3';
 import { graphToDot } from "../Graphviz";
-import { Dropdown, type MenuProps } from "antd";
-import { Modal } from "antd";
-import { Input } from "antd";
+import { type MenuProps } from "antd";
 import type { BreadcrumbItemType } from "antd/es/breadcrumb/Breadcrumb";
 import { cloneDeep } from "lodash";
 import NodeContextMenu from "./NodeContextMenu";
+import NodeRenameModal from "./NodeRenameModal";
 
 export class GraphModel {
   nodes: NodeModel[] = [];
@@ -39,6 +38,19 @@ export interface GraphLevel extends BreadcrumbItemType {
 
 }
 
+export interface NodeContext {
+  nodeId: string;
+  nodeName?: string;
+  coords: { x: number, y: number };
+  graph: GraphModel;
+  setGraph: React.Dispatch<React.SetStateAction<GraphModel>>
+}
+
+export interface OpenNodeContext {
+  opened: boolean;
+  nodeContext: NodeContext | undefined;
+}
+
 const viz = new Viz({ Module, render });
 
 const items: MenuProps['items'] = [
@@ -71,6 +83,8 @@ export default function Graph({ setGraphPath }) {
   const [nodeName, setSelectedNodeName] = useState('');
   const [graphId, selectGraphId] = useState('main');
   const [graphsPath, setGraphsPath] = useState([createPathSegment('main', 'Main')])
+  const [nodeContext, openNodeContext] = useState<null | NodeContext>(null)
+  const [nodeContextMenuOpened, openNodeContextMenu] = useState<OpenNodeContext>({ nodeContext: undefined, opened: false })
 
   useEffect(() => {
     console.info(graphsPath);
@@ -82,6 +96,12 @@ export default function Graph({ setGraphPath }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graph]);
 
+  useEffect(() => {
+    if (nodeContext) {
+      openContextMenu(true);
+    }
+  }, [nodeContext]);
+
   async function renderGraph() {
     const dot = graphToDot(graph);
 
@@ -108,23 +128,22 @@ export default function Graph({ setGraphPath }) {
       })
       .on('contextmenu', function (event) {
         const id = d3.select(this).attr('id');
-        const name = d3.select(this).attr('label');
-        handleOpenContextMenuClick(event, id, name);
-      });
+        const node = graph.nodes.find(n => n.id === id);
+
+        if (!node) {
+          return;
         }
 
-  function contextMenuOpenChange(open: boolean) {
-    if (!open) {
-      openContextMenu(false)
-    }
-  }
-
-  function handleOpenContextMenuClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string, name: string) {
         event.preventDefault();
-    selectNodeId(id);
-    setSelectedNodeName(name)
-    setCoords({ x: event.clientX, y: event.clientY });
-    openContextMenu(true);
+        console.info(node.label);
+        openNodeContext({
+          nodeId: id,
+          nodeName: node.label,
+          coords: { x: event.clientX, y: event.clientY },
+          setGraph: setGraph,
+          graph: graph
+        })
+      });
   }
 
   function createChildNode(parentId: string) {
@@ -225,26 +244,17 @@ export default function Graph({ setGraphPath }) {
       <div ref={containerRef} className="w-full h-full bg-white rounded shadow" style={{ minHeight: '600px', overflow: 'auto' }}>
 
       </div>
-      <NodeContextMenu coords={coords} openContextMenu={openContextMenu} contextMenuOpened={contextMenuOpened}>
-
+      <NodeContextMenu
+        nodeContext={nodeContext!}
+        contextMenuOpened={contextMenuOpened}
+        openContextMenu={openContextMenu}
+        openRenameModal={openRenameModal}>
       </NodeContextMenu>
-      {/* <Dropdown menu={{ items, onClick: onMenuClick }} trigger={['contextMenu']} open={contextMenuOpened} onOpenChange={contextMenuOpenChange} getPopupContainer={() => document.body}
-        // 👇 Key part: manually position the dropdown
-        overlayStyle={{
-          position: "absolute",
-          left: coords.x,
-          top: coords.y,
-        }}>
-
-      </Dropdown> */}
-      <Modal
-        title="Rename"
-        open={renameModalOpened}
-        onOk={() => renameNode()}
-        onCancel={() => openRenameModal(false)}
-      >
-        <Input value={nodeName} onChange={(e) => setSelectedNodeName(e.target.value)} />
-      </Modal>
+      <NodeRenameModal
+        nodeContext={nodeContext!}
+        renameModalOpened={renameModalOpened}
+        openRenameModal={openRenameModal}>
+      </NodeRenameModal>
     </div>
   )
 }

src/components/NodeContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Dropdown, type MenuProps } from "antd";
-import { useState } from "react";
+import type { EdgeModel, NodeContext } from "./Graph";
 
 const items: MenuProps['items'] = [
   {
@@ -20,14 +20,20 @@ const items: MenuProps['items'] = [
 ]
 
 export default function NodeContextMenu({
-    coords, 
+  nodeContext,
+  contextMenuOpened,
   openContextMenu,
-    contextMenuOpened } : 
-    { 
-      coords: {x:number, y:number}, 
+  openRenameModal
+}: {
+  nodeContext: NodeContext,
+  contextMenuOpened: boolean,
   openContextMenu: React.Dispatch<React.SetStateAction<boolean>>,
-      contextMenuOpened: boolean
-    }) {    
+  openRenameModal: React.Dispatch<React.SetStateAction<boolean>>
+}) {
+  if (!contextMenuOpened) {
+    return;
+  }
+
   function contextMenuOpenChange(open: boolean) {
     if (!open) {
       openContextMenu(false)
@@ -37,11 +43,11 @@ export default function NodeContextMenu({
   const onMenuClick: MenuProps['onClick'] = ({ key }) => {
     switch (key) {
       case 'rename': {
-          //openRenameModal(true);
+        openRenameModal(true);
         break;
       }
       case 'remove': {
-          //removeNode(nodeId);
+        removeNode(nodeContext.nodeId);
         break;
       }
       case 'subgraph': {
@@ -52,15 +58,37 @@ export default function NodeContextMenu({
     }
   };
 
+  function removeNode(id: string) {
+    nodeContext.setGraph(prev => ({ ...prev, nodes: [...prev.nodes.filter(n => n.id !== nodeContext.nodeId)], edges: removeEdgesOfNode(id, prev.edges) }));
+  }
+
+  function removeEdgesOfNode(nodeId: string, edges: EdgeModel[]): EdgeModel[] {
+    const parentConnection = edges.find(e => e.to === nodeId);
+
+    if (parentConnection) {
+      edges.filter(e => e.from === nodeId).forEach(e => {
+        e.from = parentConnection.from;
+      });
+      edges = edges.filter(e => e.to !== nodeId);
+    }
+
+    if (!parentConnection) {
+      edges = edges.filter(e => e.from !== nodeId);
+    }
+
+    const result = [...edges];
+
+    return result;
+  }
+
   return (
     <Dropdown menu={{ items, onClick: onMenuClick }} trigger={['contextMenu']} open={contextMenuOpened} onOpenChange={contextMenuOpenChange} getPopupContainer={() => document.body}
       // 👇 Key part: manually position the dropdown
       overlayStyle={{
         position: "absolute",
-        left: coords.x,
-        top: coords.y,
+        left: nodeContext.coords.x,
+        top: nodeContext.coords.y,
       }}>
-
     </Dropdown>
   )
 }

src/components/NodeRenameModal.tsx

@@ -0,0 +1,39 @@
+import { Input, Modal } from "antd";
+import type { NodeContext } from "./Graph";
+import { useState } from "react";
+
+export default function NodeRenameModal({
+  nodeContext,
+  renameModalOpened, 
+  openRenameModal
+} : {
+  nodeContext: NodeContext,
+  renameModalOpened: boolean, 
+  openRenameModal: React.Dispatch<React.SetStateAction<boolean>>
+}) {
+  if(!renameModalOpened){
+    return;
+  }
+  const [nodeName, setSelectedNodeName] = useState(nodeContext.nodeName);
+
+  function renameNode() {
+    const node = nodeContext.graph.nodes.find(n => n.id === nodeContext.nodeId);
+    if (!node) {
+      return;
+    }
+    node.label = nodeName;
+    nodeContext.setGraph(prev => ({ ...prev, nodes: nodeContext.graph.nodes }));
+    openRenameModal(false);
+  }
+
+  return (
+    <Modal
+      title="Rename"
+      open={renameModalOpened}
+      onOk={() => renameNode()}
+      onCancel={() => openRenameModal(false)}
+    >
+      <Input value={nodeName} onChange={(e) => setSelectedNodeName(e.target.value)} />
+    </Modal>
+  )
+}