Allows user to edit connections path or prevent connections passing though shape

[Rodrigo]

Is there a way to allow user to edit connections path by interacting with points? Or is possible to make the connections does not passing through shapes? 

 

The "editable" option just allows user to change the start and end of connection, not the path, I need to allow user to change the path because Kendo Diagram does not has an option to prevent connections of passing through shapes.

Example: https://dojo.telerik.com/@rodrigo_x10/AGExALED

 

You can see that connection between 1 and 3 is passing through Shape 2, which is a bad visualization of data.

 

Edit:

- Each shape has specific connectors (they dont change)

- Each connection is a link between a specific connector to another specific connector (so cant ignore this option and let kendo change the start and end connector)

- What I want is allow the user to change the path of the connection without changing the start or the end

- I can add points to connections, but they are fixed, the user cant interact with points.

[Georgi Denchev]

Hi, Rodrigo,

Thank you for the provided dojo sample.

Omitting the connectors' configuration will allow the diagram to draw the connections without them passing through the shapes.

  $("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20,
        connectors: [{ name: "center" }] // Remove this line
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 280,
        y: 20,
        connectors: [{ name: "center" }] // Remove this line
      },
      {
        id:"3",
        content: {
          text: "State 3"
        },
        x: 500,
        y: 20,
        connectors: [{ name: "center" }] // Remove this line
      }
    ],
    connections:[
      {
        
        from: "1",
        to: "2",
        fromConnector: "center", // Remove this line
        toConnector: "center" // Remove this line
      },{
        
        from: "1",
        to: "3",
        fromConnector: "center", // Remove this line
        toConnector: "center" // Remove this line
      }
    ]
  });

Additionally you can choose different connection points. For example Shape 1 is on the left, Shape 2 is on the right. Instead of connecting their center points, you can connect Shape 1's Right point to to Shape 2's Left point.

The user can move the connections by clicking on them and dragging them to a different anchor point.

Here is a runnable dojo sample:

https://dojo.telerik.com/@gdenchev/EKOsaCin 

Here is a video preview of how to change the path of the connection:

https://screencast-o-matic.com/watch/crhXjJVfDto 

You can also add connectors to the shapes with custom coordinates instead of "top, center, right" etc. This option can be configured through connectors.position.

Best Regards,
Georgi Denchev
Progress Telerik

[Rodrigo]

Sorry, I think you dont get it. I will update the question to be more specific and add more information of the scenario, I cant ignore the connectors, I need them, I cant let connectors to change or even the user change the connectors, I want to edit the connections without editting the end or the start connector.

[Georgi Denchev]

The screen recording that I shared is how the user can interact and change the path of the shapes, there is no way to "bend" it in some way.

Another alternative that I can suggest, is to call the toFront method of the diagram.

This approach will move the shapes on top of the connections. Let me know if this works for your scenario.

Dojo Sample: https://dojo.telerik.com/@gdenchev/IquRUFet 

[Rodrigo]

I think there is no solution with kendo-ui for my situation. I'm trying to draw a multifilar diagram (1 shape with many connection to many other shapes with many connections), so the connections must be visible from the start until the end, I cant confuse the user with the path of the connections, but I can't modify them or even allow user to modify it, kendo has only 2 options: 1 - using a straight line (with big diagrams cant be a hell) or 2 - using cascading line, which will overlap in some point making difficult to understand the connection.

[Georgi Denchev]

Hi, Rodrigo,

You could use the polyline type and draw the connection from shape A to point A to point B to Shape B, however this would still use straight lines and the user would not be able to modify the path. There is no other option at this point in time.

You can see an example in the connections.points api docs:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/connections.points 

You could also open a feature request in our Feedback Portal with concrete suggestions about your idea. The more votes the feature gets, the better chance it has of being implemented.

[The Cowboy]

It doesn't take much to get into a scenario where cascading connectors overlap shapes. 

Example: https://dojo.telerik.com/UcUmOvIQ

Is there anyway to avoid this? Being able to manipulate the connectors with the mouse would be the ideal solution. 

 

[Georgi Denchev]

Hello,

The previous reply still stands, you can manipulate the lines with the mouse to some extent, however you can't "bend" the connections. You'll have to draw a connection from the first shape, then draw a connection from the second shape and link the two.

    connectionDefaults: {
      type: "polyline"
    }

Best Regards,

Georgi

[Rodrigo]

Thanks for the answer, I tried to use points with polyline connections, but unfortunately the points are fixed and it doesnt move when the shape moves, which make it worse than default polyline path. The problem with a lot of shapes with connections and polyline is the same with line, we cant "bend" (as you said) the connection or even change the points manually. What I do is to create another shape in the middle of the connection and make this shape invisible, which will allow the user to manipulate the intermediate shape like it is a point. https://dojo.telerik.com/UmUfInil

[Georgi Denchev]

Hello, Rodrigo,

Thank you for sharing your approach.

Having a transparent(invisible) shape looks like an interesting idea and it does seem to be working nicely in the Dojo sample. I am sure this will be of use to other people who face a similar issue.

Best Regards,

Georgi