I'd like to draw Bezier link between nodes


#1

I’d like to draw Bezier link between nodes like this video:

But I could only draw straight links in gojs.
How to draw bezier links in gojs?
Regards


#2

https://gojs.net/latest/intro/links.html#CurveCurvinessCorner


#3

I already know that.
Plz see this video: https://www.useloom.com/share/0940e4cb89724f5c97d9114c67f71b87
In gojs, we can draw straight line when we drag mouse.
When mouse up, link become curved.
But I’d like to draw curved link when I mouse down and start dragging.
Like this video: https://www.useloom.com/share/78db22ee426946069683da489b44e4e1

How to do this?
Regards.


#4

Customize https://gojs.net/latest/api/symbols/LinkingBaseTool.html#temporaryLink


#5

Thank you for your answer.
I still have a issue.
And I’d like to make temporary link like this video: https://www.useloom.com/share/78db22ee426946069683da489b44e4e1

My current code:

var ltool = this.editDiagram.toolManager.linkingTool;

ltool.temporaryLink = $(go.Link,
  {
    curve: go.Link.Bezier,
    fromShortLength: -5,
    fromEndSegmentLength: 50,
    toEndSegmentLength: 50,
    layerName: "Tool"
  },
  new go.Binding("fromPortId", "fromPort"),
  new go.Binding("toPortId", "toPort"),
  $(go.Shape, 
    {strokeWidth: 2},
    new go.Binding("stroke", "arrowColor")
  ),
  $(go.Shape, 
    {toArrow: "standard", stroke: null},
    new go.Binding("fill", "arrowColor")
  )
);

It doesn’t work like the video.
How can I make temporary link like the video?
Regards


#6

hello? plz reply to my above question.


#7

Sorry, it’s the weekend and I was unable to watch the video.


#8
myDiagram.toolManager.linkingTool.temporaryLink.curve = go.Link.Bezier;

I suggest that you set fromEndSegmentLength and toEndSegmentLength on the ports, not just on the link template and the temporary link. That way the temporary ports will get those properties too.


#9

Already tried that.
But it’s not working.


#10

hello?Plz reply.
Can you give me example in which curved temporary link works with user’s configuration (toEndSegmentLength = xx, fromEndSegmentLength = yy)?


#11
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        new go.Binding("location", "loc", go.Point.parse),
        $(go.Shape,
          {
            fill: "white", portId: "",
            fromSpot: go.Spot.Right, toSpot: go.Spot.Left,
            fromEndSegmentLength: 100, toEndSegmentLength: 100,
            fromLinkable: true, toLinkable: true, cursor: "pointer"
          },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        {
          curve: go.Link.Bezier,
          relinkableFrom: true, relinkableTo: true
        },
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );

    myDiagram.toolManager.linkingTool.temporaryLink.curve = go.Link.Bezier;

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue", loc: "0 100" },
      { key: 2, text: "Beta", color: "orange", loc: "200 0" },
      { key: 3, text: "Gamma", color: "lightgreen", loc: "200 100" },
      { key: 4, text: "Delta", color: "pink", loc: "200 200" }
    ]);

You’ll note that as the user draws a new link, the LinkingBaseTool.temporaryLink is curved.

If you want both ends of the temporary link to be horizontal even when the end is not near a port, then you should define this function:

    function portTargeted(realnode, realport, tempnode, tempport, toend) {
      tempport.fromSpot = go.Spot.Right;
      tempport.toSpot = go.Spot.Left;
    }

and initialize the LinkingBaseTool.portTargeted functional property:

      $(go.Diagram, "myDiagramDiv",
          { . . .,
            "linkingTool.portTargeted": portTargeted,
            "relinkingTool.portTargeted": portTargeted,
            . . . })

Note that the portTargeted function assumes that the direction is from left to right. That’s what your video showed, but it might be different in your app.


#12

Thanks for your reply.
I followed your suggestion and now I have still a issue.


If I mouse up, then link became strange.
You can notify in the above video.
Why is it?


#13

It looks like your ports don’t have fromSpot or toSpot set to be go.Spot.Left or go.Spot.Right, respectively.

Or you have explicitly overridden those properties on the Link not to be Spot.Left or Spot.Right.


#14

Thanks so much, You rock!
And I have still a issue.
If I remove a link, then myDiagram.model.linkDataArray changes but no change in UI.
$this.editDiagram.removeParts($this.editDiagram.findLinksByExample({from: fn, fromPort: fp}), false);
How to sync it?


#15

hello? Plz reply


#16

We pride ourselves on our responsive support, but you can’t expect answers within minutes every time. It was only 30 minutes between your previous posts.

Are you conducting that change within a transaction?