68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
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 onDragEnd={handleDragEnd} sensors={sensors}>
|
|
<Panel />
|
|
<Flow />
|
|
</DndContext>
|
|
);
|
|
};
|
|
|
|
const FlowEditor = () => {
|
|
return (
|
|
<div className="flow-editor">
|
|
<ReactFlowProvider>
|
|
<FlowEditorComponent />
|
|
</ReactFlowProvider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FlowEditor;
|