File size: 1,487 Bytes
dcce454 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import React, { Dispatch, SetStateAction, useCallback } from 'react';
import { Node } from 'reactflow';
export const useHandleDrag = () => {
const handleDrag = useCallback(
(operatorId: string) => (ev: React.DragEvent<HTMLDivElement>) => {
console.info(ev.clientX, ev.pageY);
ev.dataTransfer.setData('operatorId', operatorId);
ev.dataTransfer.setData('startClientX', ev.clientX.toString());
ev.dataTransfer.setData('startClientY', ev.clientY.toString());
},
[],
);
return { handleDrag };
};
export const useHandleDrop = (setNodes: Dispatch<SetStateAction<Node[]>>) => {
const allowDrop = (ev: React.DragEvent<HTMLDivElement>) => {
ev.preventDefault();
};
const handleDrop = useCallback(
(ev: React.DragEvent<HTMLDivElement>) => {
ev.preventDefault();
const operatorId = ev.dataTransfer.getData('operatorId');
const startClientX = ev.dataTransfer.getData('startClientX');
const startClientY = ev.dataTransfer.getData('startClientY');
console.info(operatorId);
console.info(ev.pageX, ev.pageY);
console.info(ev.clientX, ev.clientY);
console.info(ev.movementX, ev.movementY);
const x = ev.clientX - 200;
const y = ev.clientY - 72;
setNodes((pre) => {
return pre.concat({
id: operatorId,
position: { x, y },
data: { label: operatorId },
});
});
},
[setNodes],
);
return { handleDrop, allowDrop };
};
|