Translating multiple elements with links having vertices...the vertices don't translate

[steveb]

Hi,

If you do a multi-element translate, the links between the elements move in synch as expected...EXCEPT...vertices stay in the same location.

The vertices are a very cool feature of JointJS, but this behaviour can result in some very spiky links that have to be cleaned up to restore the appearance and readability of the diagram.

In my mind, all the vertices of a link should automatically translate with the elements...but probably there is some crucial detail that I am overlooking.

Does anybody have a suggestion for how best to make the vertices translate in synch with the elements?

Cheers,

Steve

[David Durman]

Hi Steve,

You're right, this is intentional because not always you want to move all the vertices of all the connected links. This would create a strange user experience in our opinion. However, this makes indeed sense when moving multiple-elements in one go. For these cases, you can just loop over all the links associated with the moved elements and update their vertices. The following example shows how to do this on all the links in a graph but you might want to translate vertices only of the selected elements - which would follow a similar logic:

var dx = 30, dy = 30;

_.each(graph.getLinks(), function(link) {

       var vertices = link.get('vertices');

       if (vertices && vertices.length) {

             var newVertices = [];

             _.each(vertices, function(vertex) {

                 newVertices.push({ x: vertex.x + dx, y: vertex.y + dy });

             });

             link.set('vertices', newVertices);

       }

});

---

David Durman

client IO

http://client.io

+31630368524

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[steveb]

Thanks Dave..I will give that a try

Cheers,
Steve

[steveb]

Yup...that works quite nicely!

[steveb]

I call the link translating code once for each element involved in the translate, then iterate through all the links.
If a link has the passed element as the source, and its target is also one of the translating elements, then translate all the vertices of the link.