Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rcole1919 opened this issue Jul 31, 2023 · 5 comments
Open

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

rcole1919 opened this issue Jul 31, 2023 · 5 comments

Comments

@rcole1919
Copy link

rcole1919 commented Jul 31, 2023

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
Copy link
Collaborator

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

@noonnightstorm
Copy link
Collaborator

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
Copy link
Author

rcole1919 commented Aug 3, 2023

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
Copy link
Collaborator

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

@rcole1919
Copy link
Author

rcole1919 commented Aug 4, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants