ngraph icon indicating copy to clipboard operation
ngraph copied to clipboard

onConnect is burried in NodeGraphEditor

Open P13612 opened this issue 1 year ago • 0 comments

Hi,

I like your software and tried to use it. I introduced a drag and drop feature. Just a frame with a folder -tree. The files in the folder-tree may be dragged into the NodeEditor and appear as nodes immediately. This works fine, but I tried to add the edges as soon as they are connected between the nodes, I expected it will be possible to accumulate the nodes and edges step by step and eventually save the json structure of nodes and edges in the backend. I ran into trouble because onConnect is never triggered. Eventually I found out it is hardcoded onConnect=useSocketConnect() in NodeGraphEditor. So I never get anything in my components. Is there anything you provided to store the edges as well in a structure or to get some event from the hook onConnect?

I can add nodes, but I can not add edges.

const TheNodeEditor = () => {

const [nodes, setNodes] = useState([
    { id: "1", type: "workflow", position: { x:  50, y:  50 }, data: {} },
{ id: "2", type: "workflow", position: { x: 400, y: 100 }, data: {} }
]);
const [edges, setEdges] = useState([
{ id: "e1", source: "1", target: "2", sourceHandle: "source", targetHandle: "drain" }
]);

const onNodeDragStop = (event, node) => {
    setNodes((prevNodes) => prevNodes.map((n) => {
        if (n.id === node.id) {
	return { ...n, position: { x: node.position.x, y: node.position.y } };
        }
        return n;
    }));
};

. . . onNodeDragStop={onNodeDragStop} works, but onConnect={onConnect} does not.

Any clue.

Thank you for your help in advance.

Greetings from Munich

Peter

P13612 avatar Jun 28 '24 22:06 P13612