Uneven rendering using the Sugiyama Configuration

[sahilcool-nsut]

I was trying to make a graph using the sugiyama configuration, but in many cases, the result was not as I expected it to be. I was expecting a layer-wise graph with even layering as shown below.

But, instead, i get a layout as It isnt that prominent for larger graphs, but it is still there. Maybe its the way the graph is rendered, or its dependent on the algorithm, i'm not sure. Was hoping if you know any workaround or fix, would be great! Thanks

[nabil6391]

Its a good find, Basically I just started supporting left to right and right to left conifguration, so it might be that there can be other optimisations I can fix.

Can you share with me what this graph looks like if the orientation is 1. (Top to bottom)

[sahilcool-nsut]

Thanks for the quick reply! Here are the orientations.

Orientation : 1 Top to bottom

Orientation : 2 Bottom to Top

[nabil6391]

So the fix should be here as well, as logically it makes sense to make it always center aligned

[sahilcool-nsut]

Yeah, but i couldn't really find a way how to do that

[sahilcool-nsut]

Any progress ?

[nabil6391]

Hi @sahilcool-nsut , can you help me out by posting the code you did to make the connections. Would help me test things out

[sahilcool-nsut]

Hey, sorry i couldn't respond earlier. The code for the above mentioned graph is written below. Hope it helps you solve the symmetric problem we are facing.

class DNNTest extends StatefulWidget {
  @override
  _DNNTestState createState() => _DNNTestState();
}

class _DNNTestState extends State<DNNTest> {

  Widget getNodeText() {
    return Container(
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          boxShadow: [
            BoxShadow(color: kLightRed, spreadRadius: 1),
          ],
        ),
        child: Container(height: 20, width: 20));
  }
  Widget buildDNN() {
    Graph graphTemp = Graph();
    SugiyamaConfiguration builderTemp = SugiyamaConfiguration();

    builderTemp
      ..nodeSeparation = (40)
      ..levelSeparation = (20)
      ..orientation = SugiyamaConfiguration.ORIENTATION_LEFT_RIGHT;
    List numberOfNodeList = [2, 3, 2, 3];
    List<List<Node>> nodesList = [];

    for (int i = 0; i < numberOfNodeList.length; i++) {

      //Creating and Adding nodes in nodesList. ( NOT CREATING EDGES YET )

      nodesList.add([]);
      for (int j = 0; j < numberOfNodeList[i]; j++) {
        nodesList[i].add(Node(getNodeText()));
      }
    }

    //ADDING EDGES layerwise as required. Edges from all nodes of prev layer to all nodes of next layer.

    for (int i = 0; i < numberOfNodeList.length - 1; i++) {
      for (int j = 0; j < numberOfNodeList[i]; j++) {
        for (int k = 0; k < numberOfNodeList[i + 1]; k++) {
          graphTemp.addEdge(nodesList[i][j], nodesList[i + 1][k]);
        }
      }
    }

    return GraphView(
      graph: graphTemp,
      algorithm: SugiyamaAlgorithm(builderTemp),
      paint: Paint()
        ..color = Colors.grey
        ..strokeWidth = 0.1
        ..style = PaintingStyle.stroke
        ..strokeCap = StrokeCap.butt,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
            padding: EdgeInsets.all(12.0),
            margin: EdgeInsets.symmetric(
                horizontal: 24.0, vertical: 12.0),
            decoration: BoxDecoration(
              border: Border.all(color: kLightRed),
              borderRadius: BorderRadius.circular(8.0),
            ),
            height: 900,
            child: InteractiveViewer(
                constrained: true,
                boundaryMargin:
                EdgeInsets.only(left: 0, right: 0, bottom: 0),
                minScale: 0.00000001,
                maxScale: 200,
                scaleEnabled: true,
                child: Center(child: buildDNN()))),
      ),
    );
  }
}

[nabil6391]

Try out 1.2.0 , added a new CoordinateAssignment to allow users to adjust alignment