Merge pull request #120 from softflow24/feat/dnd

Feat/Drag-and-drop functionality

packages/editor/package.json

@@ -12,8 +12,8 @@
     "lint": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "dependencies": {
-    "@data-river/execution-engine": "workspace:*",
     "@data-river/blocks": "workspace:*",
+    "@data-river/execution-engine": "workspace:*",
     "@data-river/shared": "workspace:*",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
@@ -26,6 +26,7 @@
     "lucide-react": "^0.441.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hotkeys-hook": "^4.5.1",
     "react-redux": "^9.1.2",
     "reactflow": "^11.11.4",
     "tailwind-merge": "^2.5.2",

packages/editor/src/blocks/endNode.ts

@@ -0,0 +1,15 @@
+import { Node } from "reactflow";
+import { NodeData } from "@/types/NodeTypes";
+
+export const endNode: Partial<Node<NodeData>> = {
+  type: "custom",
+  data: {
+    addable: false,
+    block: "[email protected]",
+    label: "End",
+    color: "rgb(239 68 68)",
+    sourceHandle: false,
+    targetHandle: true,
+    icon: "Flag",
+  },
+};

packages/editor/src/blocks/index.ts

@@ -0,0 +1,15 @@
+import { startNode } from "./startNode";
+import { inputNode } from "./inputNode";
+import { logicNode } from "./logicNode";
+import { outputNode } from "./outputNode";
+import { endNode } from "./endNode";
+
+export const blockConfigs = {
+  start: startNode,
+  input: inputNode,
+  logic: logicNode,
+  output: outputNode,
+  end: endNode,
+};
+
+export type BlockType = keyof typeof blockConfigs;

packages/editor/src/blocks/inputNode.ts

@@ -0,0 +1,29 @@
+import { Node } from "reactflow";
+import { NodeData } from "@/types/NodeTypes";
+
+export const inputNode: Partial<Node<NodeData>> = {
+  type: "custom",
+  data: {
+    block: "[email protected]",
+    label: "Input",
+    color: "rgb(234 179 8)",
+    sourceHandle: true,
+    targetHandle: true,
+    icon: "TextCursorInput",
+    inputs: {},
+    config: {
+      input: "",
+    },
+    outputs: {
+      output: "",
+    },
+    controls: [
+      {
+        type: "text",
+        label: "Value",
+        name: "input",
+        placeholder: "Pass to output",
+      },
+    ],
+  },
+};

packages/editor/src/blocks/logicNode.ts

@@ -0,0 +1,29 @@
+import { Node } from "reactflow";
+import { NodeData } from "@/types/NodeTypes";
+
+export const logicNode: Partial<Node<NodeData>> = {
+  type: "custom",
+  data: {
+    block: "[email protected]",
+    label: "Logic",
+    color: "rgb(59 130 246)",
+    sourceHandle: false,
+    targetHandle: true,
+    icon: "GitBranch",
+    inputs: { value: "" },
+    outputs: {
+      result: "",
+    },
+    config: {
+      logicOperator: "AND",
+      conditions: [],
+    },
+    controls: [
+      {
+        type: "conditions-summary",
+        label: "Conditions summary",
+        name: "conditions",
+      },
+    ],
+  },
+};

packages/editor/src/blocks/outputNode.ts

@@ -0,0 +1,22 @@
+import { Node } from "reactflow";
+import { NodeData } from "@/types/NodeTypes";
+
+export const outputNode: Partial<Node<NodeData>> = {
+  type: "custom",
+  data: {
+    block: "[email protected]",
+    label: "Output",
+    color: "rgb(234 179 8)",
+    sourceHandle: true,
+    targetHandle: true,
+    icon: "Square",
+    controls: [
+      {
+        label: "",
+        type: "text-area",
+        name: "output",
+        placeholder: "Value from input will be displayed here after execution",
+      },
+    ],
+  },
+};

packages/editor/src/blocks/startNode.ts

@@ -0,0 +1,15 @@
+import { NodeData } from "@/types/NodeTypes";
+import { Node } from "reactflow";
+
+export const startNode: Partial<Node<NodeData>> = {
+  type: "custom",
+  data: {
+    addable: false,
+    block: "[email protected]",
+    label: "Start",
+    color: "rgb(34 197 94)",
+    sourceHandle: true,
+    targetHandle: false,
+    icon: "Play",
+  },
+};

packages/editor/src/components/CustomNode.tsx

@@ -17,11 +17,11 @@ import { useExecutionState } from "@/hooks/useExecutionState";
 import clsx from "clsx";
 import { createBlockValidationErrorFromObject } from "@data-river/blocks/errors/blockValidationError";
 
-const CustomNode: React.FC<NodeProps<NodeData>> = ({ id, data }) => {
+const CustomNode: React.FC<NodeProps<NodeData>> = ({ id, data, selected }) => {
   const { selectedNodeId, hoveredNodeId } = useReactFlowState();
   const executionResult = useExecutionState((x) => x.executionResult);
 
-  const isSelected = id === selectedNodeId;
+  const isSelected = id === selectedNodeId || selected;
   const isHovered = hoveredNodeId === id;
   const showHandles =
     isSelected || selectedNodeId === id || hoveredNodeId === id;

packages/editor/src/components/Flow.tsx

@@ -1,21 +1,22 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ReactFlow, {
   ConnectionMode,
   Background,
   Panel,
   NodeTypes,
   EdgeTypes,
+  SelectionMode,
 } from "reactflow";
 import "reactflow/dist/style.css";
 import { useReactFlowState } from "@hooks/useReactFlowState";
 import { useReactFlowHooks } from "@hooks/useReactFlowHooks";
 import { useReactFlowEventHandlers } from "@hooks/useReactFlowEventHandlers";
+import useEditorState from "@/hooks/useEditorState";
 
 import CustomNode from "./CustomNode";
 import CustomNodeInfo from "./CustomNodeInfo";
 import CustomEdge from "./CustomEdge";
 import Controls from "./controls";
-import EditNodeSheet from "./EditNodeSheet";
 
 const nodeTypes: NodeTypes = {
   custom: CustomNode,
@@ -29,10 +30,11 @@ const FlowChart: React.FC = () => {
   const { lightTheme, nodes, edges } = useReactFlowState();
   const eventHandlers = useReactFlowEventHandlers();
   useReactFlowHooks();
+  const isPanning = useEditorState((state) => state.isPanning);
 
   return (
     <div
-      className="w-full h-full min-h-full"
+      className="w-full h-full min-h-full cursor-default"
       style={{
         backgroundColor: lightTheme
           ? "#f0f0f0"
@@ -52,7 +54,6 @@ const FlowChart: React.FC = () => {
         onNodeMouseEnter={eventHandlers.onNodeMouseEnter}
         onNodeMouseLeave={eventHandlers.onNodeMouseLeave}
         onNodeClick={eventHandlers.onNodeClick}
-        onNodeDragStart={eventHandlers.onNodeDragStart}
         connectionMode={ConnectionMode.Loose}
         nodeTypes={nodeTypes}
         defaultEdgeOptions={{
@@ -62,15 +63,26 @@ const FlowChart: React.FC = () => {
         edgeTypes={edgeTypes}
         minZoom={0.5}
         maxZoom={3}
+        fitView
+        selectNodesOnDrag={true}
+        selectionOnDrag={true}
+        selectionMode={SelectionMode.Partial}
+        panOnDrag={[1, 2]}
+        panOnScroll
       >
-        <Background color={"hsl(var(--foreground))"} style={{ opacity: 0.6 }} />
+        <Background
+          className="cursor-default"
+          color={"hsl(var(--foreground))"}
+          style={{ opacity: 0.6 }}
+        />
         <Controls />
         <Panel position="bottom-right">
           <CustomNodeInfo />
         </Panel>
       </ReactFlow>
-
-      <EditNodeSheet />
+      <span className="absolute top-20 left-20">
+        {isPanning ? "true" : "false"}
+      </span>
     </div>
   );
 };

packages/editor/src/components/LeftPanel.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const LeftPanel = () => {
   return <div className="bg-background h-full w-full"></div>;
 };