46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { useDroppable } from "@dnd-kit/core";
|
|
import { useState } from "react";
|
|
import ReactFlow, {
|
|
Background,
|
|
Controls,
|
|
ReactFlowInstance,
|
|
} from "react-flow-renderer";
|
|
import useStore from "../../lib/FlowEditor/FlowEditorStore";
|
|
import GenericNode from "./nodes/Node";
|
|
|
|
const nodeTypes = { generic: GenericNode };
|
|
|
|
const Flow = () => {
|
|
const [reactFlowInstance, setReactFlowInstance] =
|
|
useState<ReactFlowInstance>();
|
|
|
|
const onInit = (rfi: ReactFlowInstance) => {
|
|
setReactFlowInstance(rfi);
|
|
};
|
|
|
|
const { isOver, setNodeRef } = useDroppable({ id: "flow" });
|
|
|
|
const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useStore();
|
|
|
|
return (
|
|
<div ref={setNodeRef} className="flow h-screen w-full">
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
nodeTypes={nodeTypes}
|
|
onNodesChange={onNodesChange}
|
|
onEdgesChange={onEdgesChange}
|
|
onConnect={onConnect}
|
|
onInit={onInit}
|
|
fitView
|
|
snapToGrid={true}
|
|
>
|
|
<Controls />
|
|
<Background />
|
|
</ReactFlow>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Flow;
|