Directed graph example arrows under the nodes' boxes (Fruchterman Reingold)

[JoaoCostaIFG]

I am having trouble getting the edges' arrow heads to point to the boxes, instead of going under them. The problem persists when running the example code on the repo (see attached screenshot). The result on the example is different from the screenshots on the project's README page. This problem doesn't happen on other graphs (different algorithms).

I am using flutter 2.8.1 (channel stable). The example files were run using flutter web.

[shricko]

Same issue here, any help?

[shricko]

Update: To solve issue temporarily, I've removed the condition, and leave only the _GraphView object to return (not _GraphViewAnimated) in GraphView.dart:

    if (widget.algorithm is FruchtermanReingoldAlgorithm) {
      return _GraphViewAnimated(
        key: widget.key,
        graph: widget.graph,
        algorithm: widget.algorithm,
        paint: widget.paint,
        builder: widget.builder,
      );
    } else {
      return _GraphView(
        key: widget.key,
        graph: widget.graph,
        algorithm: widget.algorithm,
        paint: widget.paint,
        builder: widget.builder,
      );
    }

[gowda-nirmal]

@nabil6391 Any updates on this?

[sheldoncoup]

I came across this issue and have managed to figure out a solution that works for me. I believe the issue arises from the fact that the implementation of the ArrowEdgeRenderer calculates its length reduction using the width and height of the source node and destination node. So it should work fine if you set the size attribute of the node before rendering the graph.

final exampleNode = Node.id(nodeID); exampleNode.size = Size(nodeWidgetWidth, nodeWidgetHeight);

[dongnqda]

@nabil6391 Hi there, thank for your package. This is the only package that is suitable for my requirement. Currently I'm facing the same issue.

with @shricko solution: The graph can't be zoomed out. The UI is like steady rock, can't interact with it. with @sheldoncoup solution: I have tried to set the size but doesn't work either.

So I think the problem is because the end coordinate is placed at the center of the node. Is there any to work around this?

And also, is there any way to make nodes and edges do not overlap on each other ? And can I drag and move 1 specific node without moving the whole graph ?

Thanks

[sheldoncoup]

Yeah sorry I realized afterwards that my solution seems to only work at particular edge angles. As a work around have you tried to set the size on the destination node to be greater than the actual node widget. For my code I implemented a custom version of the ArrowEdgeRenderer that you could directly feed in the node widget sizes. But I believe the end result is functionally equivalent to exampleNode.size = Size(nodeWidgetWidth*1.5, nodeWidgetHeight * 1.5);

• not specifically x1.5 but you can just play around with the values to get something that works.

[dongnqda]

@sheldoncoup Thank Sheldon for quick reply. Will try it out soon. Btw do you know how to avoid nodes and edges overlap on each other ? And drag only 1 node ? Thanks. :D

[sheldoncoup]

Did editing the size work for you? Sorry not totally sure how to solve those other problems, though you could try messing around with the attraction and repulsion rates when initializing the 'FruchtermanReingoldAlgorithm'. I would assume that if you reduced both rates to zero then the node positions would be decoupled from each other and you could just place wherever you wanted.