Auto sizing shapes and overlapping connectors

2 posts, 0 answers
  1. B
    B avatar
    8 posts
    Member since:
    Aug 2010

    Posted 09 May 2016 Link to this post

    Hi -

    I'm trying to figure out how to autosize shapes to fix text and also nicely connect shapes.  For the most part this works, but when there are two shapes that connect back to one another the connectors overlap.  Is there a clean way of dealing with this?

    Here is an example:


    <div id="diagram"></div>
      var conns = [{"from":"338338","to":"338339","Label":"Send to Compliance"},{"from":"338338","to":"338341","Label":"Close Compliant"},{"from":"338339","to":"338338","Label":"Reject to Bank"},{"from":"338339","to":"338340","Label":"Review Complete"},{"from":"338340","to":"338341","Label":"Close Complaint"}];
      var nodes = [{"id":"338338","Name":"New Complaint","IsFirst":true},{"id":"338339","Name":"Compliance Review","IsFirst":false},{"id":"338340","Name":"Contact Customer","IsFirst":false},{"id":"338341","Name":"Closed","IsFirst":false}]
            dataSource: nodes,
            layout: {
                type: "tree",
                subtype: "right"
            shapeDefaults: {
                type: "rectangle",
                fill: {
                  gradient: {
                    type: "linear",
                    stops: [{
                      color: "#1696d3",
                      offset: 0,
                      opacity: 0.5
                    }, {
                      color: "#1696d3",
                      offset: 1,
                      opacity: 1
                content: {
                    color: "White",
                    template: "#= Name #"
                height: 70,
                hover: {
                    fill: "Gray"
            connectionDefaults: {
                stroke: {
                    color: "#979797",
                    width: 1
                type: "polyline",
                startCap: "FilledCircle",
                endCap: "ArrowEnd",
                    template:"#= Label#"
            autoBind: true

  2. Dimiter Topalov
    Dimiter Topalov avatar
    633 posts

    Posted 11 May 2016 Link to this post

    Hi Brandon,

    The connection model has fromConnector and toConnector fields that can be used to configure the end points of the two-way connections such that they do not overlap. You can also define custom connectors via the shapeDefaults.connectors option.

    I have modified the provided code sample to illustrate the suggested approach:

    Dynamically adjusting the shape width according to its text content is not supported, the width can be set via the shapeDefaults.width option.

    I hope this helps.

    Dimiter Topalov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top