Vertex not moved

[EmaSciacca]

Hi,

I am using Jointjs 2.2.1 within a Typescript Angular7 application. Sometimes I have to modify the paper and reload it. In order to load it again, the two arrays containing Elements and Links are emptied and the graph is cleared using graph.clear() function. Then, the two arrays are filled again and Elements and Links are drawn invoking graph.addCells() twice, one for elements and one for links. After reloading, when I try to move a vertex the link path is changed correctly but the vertex marker is still drawn in its old position (see image below)

The callback attached to change:vertices is not invoked, every other callback attached to other events, (change:position) etc, is invoked correctly when its event happens.

Previously I used Jointjs 1.1.0 and Angular2 and everything used to work fine. How can I manage this with the latest release?

[kumilingus]

How do you set the vertices on links?

// plain object
link.set('vertices', [{ x: 100, y: 100 }]);

or

// g.Point
link.set('vertices', [new g.Point(100, 100)]);

[EmaSciacca]

I'm using link.set('vertices', [{ x: 100, y: 100 }]);. Using g.Point doesn't resolve this issue

[kumilingus]

Yeah, that would be the other way round. You should not use a g.Point() for vertices. It was just a guess. Could you create a simple JSFiddle, which demonstrates the issue?

[EmaSciacca]

js-fiddle-link

Even thought the code in this JSFiddle follows the same pattern of the one I use in my application, the behavior obtained is slightly different with respect to the one described in the issue. The vertex inserted initially in the model is drawn. However, if you try to move it, it is drawn in its new position only after a change is made to the paper (an element is moved, a vertex is added etc). Behavior for vertices inserted by clicking the link on the paper is regular. These vertices are added to the link model in the callback subscribed to the event change:vertices in order to make them persistent with respect to paperReload() function. However, after the execution of this function, the first vertex is still not behaving normally while the other ones can be moved correctly.

So, in both the case described in the original post of this issue and the one in JSFiddle there seems to be a mismatch between the link cell and its view.

What could the cause of this mismatch be? Am I adding the first vertex to the model in a wrong way? Am I updating the link cell in a wrong way?

[kumilingus]

Could you try to define the vertex as a plain JSON? It worked in my case.

var linkTypes: LinkType[] = [new LinkType("myLink", eleTypes[0].id, eleTypes[1].id, 'red', [{ x: 400, y: 200 }])];

[EmaSciacca]

Ok, I tried your solution and using let converted_string = JSON.stringify(my_vertices_object_array) and then link.set('vertices', JSON.parse(converted_string)) solves my issue.

Thanks for your help.