Also have right click working

Author: dantheman8300

studio-frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@dorbus/flexboard": "^1.1.2",
     "@monaco-editor/react": "^4.5.0",
     "@mysten/sui.js": "^0.33.0",
     "@suiet/wallet-kit": "^0.2.9",
@@ -18,7 +19,7 @@
     "@vercel/analytics": "^1.0.1",
     "autoprefixer": "10.4.14",
     "axios": "^1.4.0",
-    "daisyui": "^2.51.6",
+    "daisyui": "^3.1.6",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.4",
     "idb": "^7.1.1",
@@ -28,6 +29,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-loading-overlay-ts": "^2.0.1",
+    "react-resizable": "^3.0.5",
     "react-scripts": "^5.0.1",
     "react-spinners": "^0.13.8",
     "reactflow": "^11.7.3",

studio-frontend/src/components/DeployCanvas.tsx

@@ -1,14 +1,15 @@
 import axios from 'axios';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { DeployedPackageInfo } from '../types/project-types';
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import { DeployedPackageInfo, Project } from '../types/project-types';
 // import './DeployCanvas.css'
 import {DeployedPackage, DeployedObject, ObjectNode, PackageNode} from './DeployedObjects'
 import { ScaleLoader } from 'react-spinners';
 import LoadingOverlay from 'react-loading-overlay-ts';
 import { useWallet } from '@suiet/wallet-kit';
 
-import ReactFlow, { Background, Controls, MiniMap, applyEdgeChanges, applyNodeChanges } from 'reactflow';
+import ReactFlow, { Background, Controls, MiniMap, applyEdgeChanges, applyNodeChanges, useNodesState, useStore } from 'reactflow';
 import 'reactflow/dist/style.css';
+import DeployCanvasContextMenu from './DeployCanvasContextMenu';
 
 const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:80/';
 
@@ -43,10 +44,18 @@ const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:80/';
 // ];
 
 // const initialEdges = [{ id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' }];
-
+let id = 0;
+const getId = () => `dndnode_${id++}`;
 
 function DeployCanvas (
   props: {
+    projectList: string[],
+    currentProject: Project | null,
+    changeProject: (project: string) => void,
+    publishPackage: () => void,
+    addExistingObject: (objectId: string) => void,
+    addFromTransactions: (transactionId: string) => void,
+    compileError: string,
     // theme: string,
     deployedObjects: DeployedPackageInfo[],
     toasts: JSX.Element | undefined,
@@ -57,7 +66,8 @@ function DeployCanvas (
     setFailTxn: (digest: string) => void,
     removeDeployedObject: (id: string) => void,
     rearrangeDeployedObjects: (draggedId: string, draggedOverId: string) => void,
-    useSuiVision: boolean
+    useSuiVision: boolean,
+    dropped: () => void
   }
 ) {
 
@@ -66,16 +76,19 @@ function DeployCanvas (
   const [draggedId, setDraggedId] = useState<string | undefined>(undefined)
   const [draggedOverId, setDraggedOverId] = useState<string | undefined>(undefined)
 
+  const reactFlowWrapper = useRef(null);
+  const [reactFlowInstance, setReactFlowInstance] = useState(null);
+
   const [loading, setLoading] = useState<boolean>(false);
 
-  const nodeTypes = useMemo(() => ({ package: PackageNode, Object: ObjectNode }), []);
-  const [nodes, setNodes] = useState<[]>([]);
+  const nodeTypes = useMemo(() => ({ package: PackageNode, object: ObjectNode }), []);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
   // const [edges, setEdges] = useState(initialEdges);
 
-  const onNodesChange = useCallback(
-    (changes: any) => setNodes((nds) => applyNodeChanges(changes, nds) as any),
-    []
-  );
+  // const onNodesChange = useCallback(
+  //   (changes: any) => setNodes((nds) => applyNodeChanges(changes, nds) as any),
+  //   []
+  // );
   // const onEdgesChange = useCallback(
   //   (changes: any) => setEdges((eds) => applyEdgeChanges(changes, eds) as any),
   //   []
@@ -98,6 +111,55 @@ function DeployCanvas (
    setLoading(false);
   }, [nodes])
 
+  const onDragOver = useCallback((event: any) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  // useEffect(() => {
+  //   document.addEventListener('contextmenu',(event) => {
+  //     event.preventDefault();
+  //     console.log(event.type);
+  //   });
+  // }, []);
+
+  const onDrop = () => {
+    props.dropped()
+  }
+
+
+  // const onDrop = useCallback(
+  //   (event: any) => {
+  //     event.preventDefault();
+
+  //     if (reactFlowInstance === null || reactFlowWrapper.current === null) {
+  //       return;
+  //     }
+
+  //     const reactFlowBounds = (reactFlowWrapper.current as any).getBoundingClientRect();
+  //     const type = event.dataTransfer.getData('application/reactflow');
+
+  //     // check if the dropped element is valid
+  //     if (typeof type === 'undefined' || !type) {
+  //       return;
+  //     }
+
+  //     const position = (reactFlowInstance as any).project({
+  //       x: event.clientX - reactFlowBounds.left,
+  //       y: event.clientY - reactFlowBounds.top,
+  //     });
+  //     const newNode = {
+  //       id: getId(),
+  //       type,
+  //       position,
+  //       data: { label: `${type} node` },
+  //     };
+
+  //     setNodes((nds) => nds.concat(newNode));
+  //   },
+  //   [reactFlowInstance]
+  // );
+
   const updateDeployedObjects = async () => {
     props.setIsOverlayActive(true);
     setLoading(true);
@@ -391,14 +453,26 @@ function DeployCanvas (
       //     // }
       //   }}
       // >
-        <div style={{ height: '100%' }}>
-          
+        <div id='deplyAndInteractMenu' style={{ height: '100%' }}>
+            <DeployCanvasContextMenu
+              targetId='deplyAndInteractMenu'
+              projectList={props.projectList}
+              changeProject={props.changeProject}
+              addExistingObject={props.addExistingObject}
+              addFromTransactions={props.addFromTransactions}
+              publishPackage={props.publishPackage}
+              currentProject={props.currentProject}
+              compileError={props.compileError}
+            />
             <ReactFlow 
               nodes={nodes}
               onNodesChange={onNodesChange}
               nodeTypes={nodeTypes}
               // edges={edges}
               // onEdgesChange={onEdgesChange}
+              onInit={setReactFlowInstance as any}
+              onDrop={onDrop}
+              onDragOver={onDragOver}
             >
               {/* <LoadingOverlay
                 active={props.isOverlayActive}
@@ -419,6 +493,7 @@ function DeployCanvas (
                 }}
               > */}
                 <Background />
+                
                 <Controls />
                 {/* <MiniMap /> */}
               {/* </LoadingOverlay> */}