Setting of coordinates or "d" attr values for Manhattan edges

[rcole1919]

I use the Manhattan edge type with the draggable ability. I save each change in the graph, send it to the server, and remount the graph with updated data. I can save node coordinates, endpoints and connections between nodes. But I can't save changing the path of the edges.

Apparently, svg paths are calculated according to the coordinates and sizes of the nodes, and there is no way to set the value of the d attribute before the component mounting.

This is an important feature for changing the path of Manhattan lines. I'd like to have some kind of access from the react-butterfly event

[noonnightstorm]

ok, I got it . I will check it as soon as possible.

[noonnightstorm]

butterfly-dag@4.3.28 has fix it.

You can call 'edge.getBreakPoints' to get edge breakpoints data and save to backend. Next time draw you dag , you can put breakpoints data to you edge data, for example

canvas.draw({
  nodes: [],
  edges: [{id: 1, breakpoints:[...]}]
})

[rcole1919]

Can I get breakpoints and the edge info by dragging the edge with React? I don't use canvas.draw and I don't understand how to use 'edge.getBreakPoints' . I provide the state with options, edges, nodes as configuredData like this:

<ReactButterfly
	ref={ref}
	onCreateEdge={handleEdgeCreate}
	{...configuredData}
/>

Also I can see some info inside ref.current.canvas. But I can't get any info about Edge on the drag event, because it is simple without id or data attributes.

UPD:
ref.current.canvas.edges[index].getBreakPoints() works, but I still don't understand how to get the current dragged edge. Recording of whole edges array maybe a resolve.

[noonnightstorm]

em....We will abandone react-butterfly , I recommend you use butterfly-dag.

[rcole1919]

That's a pity(
Is it possible to use functional react components of nodes and edges inside batterfly-dag classes?
For example, I will use Node class:

const Node = require('butterfly-dag').Node;
class ANode extends Node {
  draw(obj) {
    // here my functional react logic
   
   return <CustomNode {...someProps} />
  }
}

or, I still use React-Butterfly, but I will use {Edge} from 'butterfly-dag' and provide edge data to React-Butterfly like this:

class СustomBaseEdge extends Edge {
	draw(obj) {
		let path = super.draw(obj);
		$(path).addClass('test-base-link');
		return path;
	}
}

edgeItem: {
	sourceNode: //
	targetNode: //
	source: //
	target: //
	id: //
	Class: СustomBaseEdge
}

it seems, it doesn't fully work