Hi,

I've created two nodes (Node-1, Node-2) and created a link between those two nodes. There are four control points in that link.

First I moved the Node-2 to a different location. Point 1, 2, and 3 got modified except the Point 0.

Then I moved the Node-2 along with the attached label (by selecting both node and label using ctrl key). Now, only the Point 3 got set.

May I know why the other points are not updated in this case?

Please check the attached screen shots where the control points are console logged (in Event.nodeModified).

Regards,
Kannan

Hi,

I've attached the sample code to simulate the issue.

Regards,
Kannan

Hi Slavcho,

First, I moved the node by dragging the node. Second, I moved the node by dragging the node along with the attached label. In both the scenarios, the moved location is same. But the values of the control points are different. I've console logged those points in the sample app whose screen shot is attached with this.

Regards,
Kannan

Hi Slavcho,

Yes, the UI control points and printed ones are different. I've taken those control points of the link in the Event.linkModified like this,

this.diagram.addEventListener(Event.linkModified, this.handleLinkModified);

this.handleLinkModified = function (sender: any, args: LinkEventArgs) {

var link = args.getLink() as any;

if (link) {
ths.consoleLinkPoints(link, "On Modify: ");
}
}

private consoleLinkPoints(link: any, message: string) {

console.log(message)

var points = link.getControlPoints();

for (var i = 0; i < points.length; i++) {
var point = points[i];
console.log("Point " + i + ": " + point.x + ", " + point.y);
}
}

Please check the attached sample code (in the previous post) to reproduce the issue.

We are storing these points in the database. When loading the diagram, the link and the control points are created based on this stored data. So, the loaded link is totally different from the one created in the ui before. May I know how to fix this issue?

Regards,
Kannan

Hi Slavcho,

Oh sad, what is the workaround?

As I said, we need to save these control points of the link to the database so that it can be used to render the same diagram when reopened.

But, I wonder, how it works when only the node is moved? It is not working when node is moved along with the attached label (by selecting both the node and label by ctrl key pressed).

Regards,
Kannan

Hi Slavcho,

Below is the existing code,

this.handleNodeModified = function (sender: any, args: any) {

  var node = args.getNode();

  var link = node.incomingLinks[0];
  if (link) {
    ths.consoleLinkPoints(link, "On Node Modify: ");
  }
}

Below is the modified code based on the suggestion from you,

    this.handleNodeModified = function (sender: any, args: any) {

      window.requestAnimationFrame(function () {
        var node = args.getNode();

        var link = node.incomingLinks[0];
        if (link) {
          ths.consoleLinkPoints(link, "On Node Modify: ");
        }
      });

I've used requestAnimationFrame to fix this issue. Is this correct? Also, is there any drawback in this approach? Thank you!

Regards,
Kannan

Hi Slavcho,

We have subscribed to the Event.linkModified and doing the same in that event handler like this,

this.diagram.addEventListener(Event.linkModified, this.handleLinkModified);

    this.handleLinkModified = function (sender: any, args: LinkEventArgs) {

      window.requestAnimationFrame(function () {
        var link = args.getLink() as any;

        if (link) {
          ths.consoleLinkPoints(link, "On Link Modify: ");
        }
      });
    }

So, the other links in the vicinity should be handled here. I hope, this should be fine?

We are updating the diagram-library package through npm and we are using the latest version which is 3.5.7. Do you have any idea to update this package with linkRouted changes ? 

Regards,
Kannan

Hi Slavcho,

I tried to fix this issue using updateFromPoints . I added the below code,

        this.updateFromPoints2 = DiagramLink.prototype.updateFromPoints;
        var ths = this;
        DiagramLink.prototype.updateFromPoints = function () {
          ths.consoleLinkPoints(this, "On updateFromPoints");
          ths.updateFromPoints2();
        };

But I got the below error when the diagram loads,

app.component.ts:239 ERROR TypeError: this[b(...)] is not a function
    at AppComponent.updateFromPoints [as updateFromPoints2] (MindFusion.Diagramming.js:6:547285)
    at DiagramLink.updateFromPoints (app.component.ts:249:15)
    at arv.<computed>.validateParams (MindFusion.Diagramming.js:6:549870)
    at new arv.<computed> (MindFusion.Diagramming.js:6:524338)
    at aEN.<computed>.<computed> [as createDiagramLink] (MindFusion.Diagramming.js:6:616897)
    at AppComponent.createDiagramLink2 (app.component.ts:382:26)
    at AppComponent.drawDiagram2 (app.component.ts:362:10)
    at xhr.onload [as __zone_symbol__ON_PROPERTYload] (app.component.ts:256:14)
    at XMLHttpRequest.wrapFn (zone.js:755:39)
    at _ZoneDelegate.invokeTask (zone.js:402:31)

Am I doing anything wrong? If so, please correct me.

Regards,
Kannan