Refactor touch support to use @neodrag/react library

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

Author: Copilot

package-lock.json

@@ -16,6 +16,7 @@
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.36.2",
     "@lezer/common": "^1.2.3",
+    "@neodrag/react": "^2.3.1",
     "@uiw/codemirror-extensions-langs": "^4.23.0",
     "@uiw/react-codemirror": "^4.23.0",
     "@xyflow/react": "^12.3.6",

package.json

@@ -108,7 +108,6 @@ export const MemoryView = () => {
   const [reactFlowInstance, setReactFlowInstance] =
     useState<ReactFlowInstance<CustomNodeType, CustomEdgeType> | null>(null);
   const connectingNode = useRef<OnConnectStartParams | null>(null);
-  const [placementMode, setPlacementMode] = useState<string | null>(null);
 
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -450,34 +449,23 @@ export const MemoryView = () => {
       }
   };
 
-  const onPaneClick = useCallback(
-    (event: any) => {
-      if (!placementMode || !reactFlowInstance) return;
+  const onNodeDrop = useCallback(
+    (nodeType: string, offsetX: number, offsetY: number) => {
+      if (!reactFlowInstance) return;
 
       const position = reactFlowInstance.screenToFlowPosition({
-        x: event.clientX,
-        y: event.clientY,
+        x: offsetX,
+        y: offsetY,
       });
-
-      createNodeAtPosition(placementMode, position);
-      setPlacementMode(null);
+      
+      createNodeAtPosition(nodeType, position);
     },
-    [placementMode, reactFlowInstance, lastMethodCall]
+    [reactFlowInstance, lastMethodCall]
   );
 
-  const onTouchItemSelect = useCallback((nodeType: string) => {
-    setPlacementMode(nodeType);
-  }, []);
-
   return (
     <div className="memory-view">
-      {!memory.options.hideSidebar && <Sidebar memory={memory} onTouchItemSelect={onTouchItemSelect} />}
-      {placementMode && (
-        <div className="placement-mode-indicator">
-          Tap on canvas to place: {placementMode === "method-call" ? "Method Call" : placementMode === "variable" ? "Global Variable" : `new ${placementMode}`}
-          <button onClick={() => setPlacementMode(null)} className="cancel-placement">Cancel</button>
-        </div>
-      )}
+      {!memory.options.hideSidebar && <Sidebar memory={memory} onNodeDrop={onNodeDrop} />}
       <ReactFlowProvider>
         <ReactFlow
           className="memory"
@@ -538,7 +526,6 @@ export const MemoryView = () => {
           onInit={setReactFlowInstance}
           onDrop={onDrop}
           onDragOver={onDragOver}
-          onPaneClick={placementMode ? onPaneClick : undefined}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           proOptions={{

src/MemoryView.tsx

@@ -1,74 +1,75 @@
 import { Memory } from "./memory";
-import { useEffect, useState } from "react";
+import { useDraggable } from "@neodrag/react";
+import { useRef } from "react";
+
+interface DraggableNodeProps {
+  className: string;
+  children: React.ReactNode;
+  nodeType: string;
+  onDrop: (nodeType: string, offsetX: number, offsetY: number) => void;
+}
+
+function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeProps) {
+  const draggableRef = useRef<HTMLDivElement>(null);
+
+  useDraggable(draggableRef, {
+    onDragEnd: (data) => {
+      onDrop(nodeType, data.offsetX, data.offsetY);
+    },
+  });
+
+  return (
+    <div ref={draggableRef} className={className} style={{ cursor: 'grab' }}>
+      {children}
+    </div>
+  );
+}
 
 export const Sidebar = ({
   memory,
-  onTouchItemSelect,
+  onNodeDrop,
 }: {
   memory: Memory;
-  onTouchItemSelect?: (nodeType: string) => void;
+  onNodeDrop: (nodeType: string, offsetX: number, offsetY: number) => void;
 }) => {
-  const [isTouchDevice, setIsTouchDevice] = useState(false);
-
-  useEffect(() => {
-    // Detect touch device
-    const checkTouch = () => {
-      setIsTouchDevice(
-        "ontouchstart" in window ||
-          navigator.maxTouchPoints > 0 ||
-          (navigator as any).msMaxTouchPoints > 0
-      );
-    };
-    checkTouch();
-  }, []);
-
-  const onDragStart = (event: any, nodeType: string) => {
-    event.dataTransfer.setData("application/java-memory-playground", nodeType);
-    event.dataTransfer.effectAllowed = "move";
-  };
-
-  const onTouchStart = (nodeType: string) => {
-    if (onTouchItemSelect) {
-      onTouchItemSelect(nodeType);
-    }
-  };
-
-  const getItemProps = (nodeType: string) => {
-    if (isTouchDevice) {
-      return {
-        onTouchStart: (e: any) => {
-          e.preventDefault();
-          onTouchStart(nodeType);
-        },
-      };
-    }
-    return {
-      onDragStart: (e: any) => onDragStart(e, nodeType),
-      draggable: true,
-    };
-  };
-
   return (
     <div className="sidebar">
       {Object.entries(memory.klasses).map(([name]) => (
-        <div key={name} className="sidebar-class" {...getItemProps(name)}>
+        <DraggableNode
+          key={name}
+          className="sidebar-class"
+          nodeType={name}
+          onDrop={onNodeDrop}
+        >
           new {name}
-        </div>
+        </DraggableNode>
       ))}
       {!memory.options.hideNewArray && (
-        <div className="sidebar-class" {...getItemProps("Array")}>
+        <DraggableNode
+          className="sidebar-class"
+          nodeType="Array"
+          onDrop={onNodeDrop}
+        >
           new Array
-        </div>
+        </DraggableNode>
       )}
       {!memory.options.hideDeclareGlobalVariable && (
-        <div className="sidebar-variable" {...getItemProps("variable")}>
+        <DraggableNode
+          className="sidebar-variable"
+          nodeType="variable"
+          onDrop={onNodeDrop}
+        >
           Declare Global Variable
-        </div>
+        </DraggableNode>
       )}
       {!memory.options.hideCallMethod && (
-        <div className="sidebar-method-call" {...getItemProps("method-call")}>
+        <DraggableNode
+          className="sidebar-method-call"
+          nodeType="method-call"
+          onDrop={onNodeDrop}
+        >
           Call Method
-        </div>
+        </DraggableNode>
       )}
     </div>
   );