GraphView
GraphView copied to clipboard
Nodes overlap on each other
Hi, thanks for this useful library. Actually i'm experiencing an issue about overlapping nodes on each other. The images shown below. How can i solve this issue? i referred to the issue #2 but didn't find any solution. This is my configuration for BaseGraphAdapter's algorithm:
val configuration = BuchheimWalkerConfiguration.Builder() .setSiblingSeparation(100) .setLevelSeparation(300) .setSubtreeSeparation(300) .setOrientation(BuchheimWalkerConfiguration.ORIENTATION_LEFT_RIGHT) .build()
algorithm = BuchheimWalkerAlgorithm(configuration)
I've tried landscape mode or change values inside the configuration but none of them solved the issue. Thanks
I've seen the problem in the sample app of this repository too. it can be used to reproduce the problem.
Thank you for bringing this to our attention. I tried to replicate your tree, but so far I couldn't find the problem. Can you or @SaeedZhiany post some code or the changes I should do in our sample app where the issue can be seen.
@DennisBlock I tested the sample app a few weeks ago, so the scenario might be a little different. I remember in the sample App I opened all nodes in the tree, then tried to close and reopen one of the nodes in level 3 (or 4) then I saw that its sibling node overlapped a piece of the mentioned node.
From @asr1994's images, it seems the problem is occurring in level 3 of the tree too, so it might the same problem I mentioned. please try it in the sample app, if you couldn't reproduce it, let me know, then I'll try to make a gif as soon as I can to show how the issue happens.
I added, removed and re-added nodes, but still no issue. If you could make a gif, it would be a great help!
Unfortunately, I couldn't reproduce it after many tests too. this is so weird to me. I'm pretty sure that I saw the problem in the sample app but I can't remember what is the scenario. sorry about that. as soon as I can reproduce it I'll inform you. meanwhile, @asr1994 can you create a simple repo that recreates your tree? no need to have the details, just the overall structure of your nodes, like width and height of the node container view.
It seems to be some weird corner issue. But nonetheless thanks for your help.
@asr1994 Just like @SaeedZhiany said, it would be great if you could create a sample with the issue.
It seems to be some weird corner issue. But nonetheless thanks for your help.
@asr1994 Just like @SaeedZhiany said, it would be great if you could create a sample with the issue.
@DennisBlock
Here is my creation method for the graph:
`private fun Graph.drawNode(parent: NodeModel?, node: NodeModel) {
if (parent == null) {
mGraph.addNode(Node(node))
} else {
mGraph.addEdge(Node(parent), Node(node))
}
if (node.hasChildren) {
for (child in node.children!!) {
if (child.hasChildren) {
drawNode(node, child)
} else {
mGraph.addEdge(Node(node), Node(child))
}
}
}
}
private fun Graph.drawNode(parent: NodeModel?, node: NodeModel) {
if (parent == null) {
mGraph.addNode(Node(node))
} else {
mGraph.addEdge(Node(parent), Node(node))
}
if (node.hasChildren) {
for (child in node.children!!) {
if (child.hasChildren) {
drawNode(node, child)
} else {
mGraph.addEdge(Node(node), Node(child))
}
}
}
}` and this is my xml layout for each node of graph (using in custom adapter) :
`
<androidx.cardview.widget.CardView android:layout_width="@dimen/_120sdp" android:layout_height="wrap_content" app:cardCornerRadius="5dp" app:contentPadding="@dimen/spacing_small" app:cardBackgroundColor="@android:color/white">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<co.tinab.farazindsp.components.tools.UserImageView
android:layout_width="@dimen/_35sdp"
android:layout_height="@dimen/_35sdp"
userProfileImage="@{node.user}"/>
<co.tinab.farazindsp.components.tools.TextViewNormal
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{node.user.name}"
android:textColor="@android:color/black"
android:textSize="@dimen/_12ssp"
android:gravity="center_horizontal"
android:layout_gravity="center_vertical"
android:layout_marginStart="@dimen/spacing_small" />
</LinearLayout>
<co.tinab.farazindsp.components.tools.TextViewNormal
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@{node.label}"
android:textColor="@android:color/black"
android:textSize="@dimen/_10ssp"
android:gravity="center"
android:layout_marginTop="@dimen/spacing_small" />
</LinearLayout>
</androidx.cardview.widget.CardView> `
i hope it could help understand my issue better. Thanks
Unfortunately your code does not help that much, as I cant't run it myself and I don't see anything fundamentaly wrong with it. I would need a runnable sample to debug.
One question though: Do you build you graph before or after adding it to the adapter? I ask because adding new nodes/edges starts the algorithm and there could be some values left from previous iterations which maybe produce these issues.
I'm facing the same issue, in my case I'm building the graph before sending it to the adapter. Let me know if you need some more info.
@RamiKhawaly If you could create a small sample project which demonstrates the issue, it would be a great help.
I can confirm this may happen sometimes, and will always appear with the same graph (but I lost the graphs). Although in my case it is not that severe -- the two nodes just slightly overlap with each other. But this is still not expected, as the nodes (in the same level) are not evenly spread. In my case the nodes are top-down, and I'm using SugiyamaAlgorithm.
(I may update with the graph layout if I happen to see the problem again.)
Any updates on this issue? I have a similar issue with the SugiyamaAlgorithm
.
Hi @JulianBissekkou, unfortunately we currently don't have the time to work on this. But contributions are always welcome.