Work on flow editor

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

components/FlowEditor/Flow.tsx

@@ -6,7 +6,7 @@ import ReactFlow, {
   ReactFlowInstance,
 } from "react-flow-renderer";
 import useStore from "../../lib/FlowEditor/FlowEditorStore";
-import GenericNode from "./nodes/Node";
+import { GenericNode } from "./nodes/Node";
 
 const nodeTypes = { generic: GenericNode };
 

components/FlowEditor/FlowEditor.tsx

@@ -1,11 +1,53 @@
-import { DndContext } from "@dnd-kit/core";
-import { ReactFlowProvider } from "react-flow-renderer";
+import {
+  DndContext,
+  MouseSensor,
+  TouchSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { ReactFlowProvider, useReactFlow } from "react-flow-renderer";
+import useStore from "../../lib/FlowEditor/FlowEditorStore";
 import Flow from "./Flow";
 import Panel from "./Panel";
 
 const FlowEditorComponent = () => {
+  const { addNode } = useStore();
+  const reactFlowInstance = useReactFlow();
+
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor)
+  );
+
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event;
+
+    if (over && over.id == "flow") {
+      const activeType = active.data.current.type;
+      const eventType = event.activatorEvent.type;
+
+      var position = { x: 0, y: 0 };
+      if (eventType == "touchstart" || eventType == "touchend") {
+        const touch = event.activatorEvent.touches[0];
+        position = reactFlowInstance.project({
+          x: touch.clientX + event.delta.x - 220,
+          y: touch.clientY + event.delta.y - 60,
+        });
+      } else {
+        position = reactFlowInstance.project({
+          x: event.activatorEvent.clientX + event.delta.x - 220,
+          y: event.activatorEvent.clientY + event.delta.y - 60,
+        });
+      }
+
+      addNode(activeType, position);
+    }
+  };
+
   return (
-    <DndContext>
+    <DndContext onDragEnd={handleDragEnd} sensors={sensors}>
       <Panel />
       <Flow />
     </DndContext>

components/FlowEditor/Panel.tsx

@@ -1,5 +1,6 @@
 import { VscArrowLeft, VscArrowRight } from "react-icons/vsc";
 import useStore from "../../lib/FlowEditor/FlowEditorStore";
+import { GenericNodeComponent } from "./nodes/Node";
 
 const Panel = () => {
   const { panelClosed, togglePanelState } = useStore();
@@ -20,6 +21,11 @@ const Panel = () => {
       className={`flow-panel ${panelClosed ? "w-0" : "w-60"} duration-300`}
     >
       <PanelButton />
+      {!panelClosed && (
+        <>
+          <GenericNodeComponent />
+        </>
+      )}
     </aside>
   );
 };

components/FlowEditor/nodes/Node.tsx

@@ -1,5 +1,5 @@
-import styles from "./Node.module.css";
 import { Handle, Position } from "react-flow-renderer";
+import Draggable from "../../DragNDrop/Draggable";
 
 type GenericNodeProps = {};
 
@@ -30,4 +30,15 @@ const GenericNode = (props: GenericNodeProps) => {
   );
 };
 
-export default GenericNode;
+const GenericNodeComponent = () => {
+  return (
+    <Draggable data={{ type: "generic" }}>
+      <div className="node-component">
+        <div className="node-component-handle" />
+        Тест
+      </div>
+    </Draggable>
+  );
+};
+
+export { GenericNode, GenericNodeComponent };

package.json

@@ -20,6 +20,8 @@
     "@types/node": "17.0.4",
     "@types/react": "17.0.38",
     "autoprefixer": "^10.4.7",
+    "eslint": "^8.19.0",
+    "eslint-config-next": "12.2.2",
     "postcss": "^8.4.14",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.1.6",

styles/globals.css

@@ -65,8 +65,19 @@
   }
 
   .generic-node {
-    @apply flex items-center justify-center
+    @apply flex flex-row items-center justify-center
     w-[150px] h-auto bg-white
     rounded-sm;
   }
+
+  .node-component {
+    @apply relative flex flex-row h-fit rounded-md
+    bg-gray-600
+    pr-2 my-2 py-1 mx-2
+    text-white align-middle;
+  }
+
+  .node-component-handle {
+    @apply left-0 w-[12px] h-full mr-2 rounded-tl-md rounded-bl-md;
+  }
 }