Move declare local variable dialog to top-level overlay

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

src/MemoryView.tsx

@@ -20,7 +20,7 @@ import { shallow } from "zustand/shallow";
 import { getEdgesAndNodes, getMemory } from "./getEdgesAndNodes";
 import ObjectNode, { ObjectNodeType } from "./ObjectNode";
 import VariableNode from "./VariableNode";
-import { useCallback, useState, DragEvent, useRef } from "react";
+import { useCallback, useState, DragEvent, useRef, useMemo } from "react";
 import { Sidebar } from "./Sidebar";
 import {
   Attribute,
@@ -48,12 +48,6 @@ const selector = (state: RFState) => ({
   setRoute: state.setRoute,
 });
 
-const nodeTypes = {
-  object: ObjectNode,
-  variable: VariableNode,
-  "method-call": MethodCallNode,
-};
-
 const edgeTypes = {
   reference: ReferenceEdge,
 };
@@ -132,6 +126,10 @@ export const MemoryView = () => {
     onConfirm: (value: string) => void;
   } | null>(null);
 
+  // Local variable declaration dialog state
+  const [showLocalVarDialog, setShowLocalVarDialog] = useState(false);
+  const [localVarDialogNodeId, setLocalVarDialogNodeId] = useState<string | null>(null);
+
   const methodCalls = nodes.filter(isMethodCallNode);
   let previousMethodCall = methodCalls[0];
   let lastMethodCall = methodCalls[0];
@@ -202,6 +200,50 @@ export const MemoryView = () => {
     return [...primitveDataTypes, ...Object.keys(memory.klasses)];
   };
 
+  // Handler for declaring local variables
+  const handleDeclareLocalVariable = (nodeId: string) => {
+    setLocalVarDialogNodeId(nodeId);
+    setShowLocalVarDialog(true);
+  };
+
+  const handleLocalVarDialogConfirm = (name: string) => {
+    if (localVarDialogNodeId) {
+      setNodes((nds) =>
+        nds.map((n) => {
+          if (n.id === localVarDialogNodeId && n.type === "method-call") {
+            return {
+              ...n,
+              data: {
+                ...n.data,
+                localVariables: {
+                  ...n.data.localVariables,
+                  [name]: {
+                    dataType: "object",
+                  },
+                },
+              },
+            };
+          }
+          return n;
+        })
+      );
+    }
+    setShowLocalVarDialog(false);
+    setLocalVarDialogNodeId(null);
+  };
+
+  // Create nodeTypes with access to handleDeclareLocalVariable
+  const nodeTypes = useMemo(
+    () => ({
+      object: ObjectNode,
+      variable: VariableNode,
+      "method-call": (props: any) => (
+        <MethodCallNode {...props} onDeclareVariable={handleDeclareLocalVariable} />
+      ),
+    }),
+    [handleDeclareLocalVariable]
+  );
+
   const onConnectEnd = useCallback<OnConnectEnd>(
     (event, connectionState) => {
       if (!connectingNode.current || !memory.options.createNewOnEdgeDrop)
@@ -777,6 +819,18 @@ export const MemoryView = () => {
           }}
         />
       )}
+      {showLocalVarDialog && (
+        <SimpleInputDialog
+          title="Declare Local Variable"
+          label="Variable Name"
+          placeholder="Enter variable name"
+          onConfirm={handleLocalVarDialogConfirm}
+          onCancel={() => {
+            setShowLocalVarDialog(false);
+            setLocalVarDialogNodeId(null);
+          }}
+        />
+      )}
     </div>
   );
 };

src/MethodCallNode.tsx

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, useState } from "react";
+import { ChangeEventHandler } from "react";
 import {
   Node,
   Handle,
@@ -14,7 +14,6 @@ import {
   primitveDataTypes,
 } from "./memory";
 import { CustomEdgeType, CustomNodeType } from "./types";
-import { SimpleInputDialog } from "./SimpleInputDialog";
 
 function LocalVariableHandle({
   name,
@@ -138,10 +137,13 @@ export function isMethodCallNode(node: Node): node is MethodCallNodeType {
   return node.type === "method-call";
 }
 
-function MethodCallNode({ id, data }: NodeProps<MethodCallNodeType>) {
+function MethodCallNode({ 
+  id, 
+  data,
+  onDeclareVariable,
+}: NodeProps<MethodCallNodeType> & { onDeclareVariable?: (nodeId: string) => void }) {
   const { setNodes } = useReactFlow<CustomNodeType, CustomEdgeType>();
   const edges = useEdges<CustomEdgeType>();
-  const [showVariableDialog, setShowVariableDialog] = useState(false);
 
   const localVariablesEdges = edges.filter((e) => e.source == id);
 
@@ -150,30 +152,9 @@ function MethodCallNode({ id, data }: NodeProps<MethodCallNodeType>) {
   };
 
   const handleDeclareLocaleVariable = () => {
-    setShowVariableDialog(true);
-  };
-
-  const handleVariableDialogConfirm = (name: string) => {
-    setNodes((nds) =>
-      nds.map((n) => {
-        if (n.id == id && n.type === "method-call") {
-          return {
-            ...n,
-            data: {
-              ...n.data,
-              localVariables: {
-                ...n.data.localVariables,
-                [name]: {
-                  dataType: "object",
-                },
-              },
-            },
-          };
-        }
-        return n;
-      })
-    );
-    setShowVariableDialog(false);
+    if (onDeclareVariable) {
+      onDeclareVariable(id);
+    }
   };
 
   return (
@@ -212,15 +193,6 @@ function MethodCallNode({ id, data }: NodeProps<MethodCallNodeType>) {
           </button>
         </div>
       </div>
-      {showVariableDialog && (
-        <SimpleInputDialog
-          title="Declare Local Variable"
-          label="Variable Name"
-          placeholder="Enter variable name"
-          onConfirm={handleVariableDialogConfirm}
-          onCancel={() => setShowVariableDialog(false)}
-        />
-      )}
     </>
   );
 }