Allows user to edit connections path or prevent connections passing though shape
1 Answer 10 Views
Rodrigo
Top achievements
Rank 1
Iron
Rodrigo asked on 06 May 2021, 09:04 PM | edited on 11 May 2021, 08:22 PM

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.

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 11 May 2021, 08:54 AM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

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.
- by
Rodrigo
Top achievements
Rank 1
Iron
on 11 May 2021, 08:21 PM | edited

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 

- by
Georgi Denchev
Telerik team
on 12 May 2021, 12:39 PM
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.
- by
Rodrigo
Top achievements
Rank 1
Iron
on 09 Jun 2021, 07:52 PM

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.

- by
Georgi Denchev
Telerik team
on 14 Jun 2021, 09:29 AM
Asked by
Rodrigo
Top achievements
Rank 1
Iron
Answers by
Georgi Denchev
Telerik team
Share this question
or