Curviness property doesn't work

GoJS
1

I’m trying to make links more curved. However, as far as I see, curviness property is not respected.

I’m using the following code

   const $ = go.GraphObject.make
    const diagram = $(go.Diagram, diagramRef.current, {
      "undoManager.isEnabled": true,
      layout: $(go.TreeLayout, { angle: 90, nodeSpacing: 20, layerSpacing: 80 }),
      model: new go.GraphLinksModel({
        linkKeyProperty: "key",
      }),
    })

    // Define a simple Node template
    diagram.nodeTemplate = $(
      go.Node,
      "Auto",
      $(go.Shape, "RoundedRectangle", {
        fill: "#f0f4f8",
        stroke: "#c5d1dc",
        strokeWidth: 2,
        portId: "",
        fromLinkable: true,
        toLinkable: true,
        cursor: "pointer",
      }),
      $(go.TextBlock, { margin: 10, font: "16px sans-serif" }, new go.Binding("text")),
    )

    // Define a single Link template with bindings for curviness and text
    diagram.linkTemplate = $(
      go.Link,
      {
        curve: go.Link.Bezier,
        toEndSegmentLength: 50,
      },
      new go.Binding("curviness", "curviness"),
      $(go.Shape, { strokeWidth: 2 }, new go.Binding("stroke", "color")),
      $(
        go.Shape,
        {
          toArrow: "Standard",
          stroke: null,
          scale: 1.2,
        },
        new go.Binding("fill", "color"),
      ),
      $(
        go.TextBlock,
        {
          segmentOffset: new go.Point(0, -10),
          font: "12px sans-serif",
        },
        new go.Binding("text", "curviness", (value) => `curviness: ${value}`),
      ),
    )

    // Create the model data
    const nodeDataArray = [
      { key: 1, text: "Center Node" },
      { key: 2, text: "Node 2" },
      { key: 3, text: "Node 3" },
      { key: 4, text: "Node 4" },
      { key: 5, text: "Node 5" },
      { key: 6, text: "Node 6" },
    ]

    const linkDataArray = [
      { key: -1, from: 1, to: 2, curviness: 0, color: "#2563eb" },
      { key: -2, from: 1, to: 3, curviness: 20, color: "#7c3aed" },
      { key: -3, from: 1, to: 4, curviness: 50, color: "#db2777" },
      { key: -4, from: 1, to: 5, curviness: -30, color: "#059669" },
      { key: -5, from: 1, to: 6, curviness: 100, color: "#d97706" },
      { key: -6, from: 1, to: 6, curviness: 500, color: "#d97706" },
    ]

    diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)

image
image1648×638 49.7 KB

2

Link.curviness affects the routing of a Link. In the case of a Bezier-curve Link, it would affect the middle two points, which correspond to the control points of the Bezier curve.

However, you have applied a TreeLayout as the automatic layout for your Diagram. By default it assigns reasonable fromSpot and toSpot values given the TreeLayout.angle. With your angle of 90, those values are Spot.Bottom and Spot.Top. When the fromSpot or toSpot are specified spot points or sides (i.e. not None), the routing will automatically add an end segment at the corresponding ends of the link route.

So in this case the points of a Link will be:

  • 0: the bottom middle point of the “Center Node”
  • 1: just below the bottom middle point of the “Center Node”
  • 2: just above the top middle point of “Node n”
  • 3: the top middle point of “Node n”

For Bezier curves this ensures that the angle of the curve at the end point will be perpendicular to the side of the node that it is attached at. In your case the fromEndSegmentLength and toEndSegmentLength I believe default to 10, and that is not enough for the apparent route to be curved nicely at the node. I suggest that you increase those values, either on the Link template, or on the port in the Node template, as default values. Try 30.

Oh, another possibility is to tell the TreeLayout not to set the standard fromSpot and toSpot. You can do that by setting TreeLayout.setsPortSpot and setsChildPortSpot to false.

3

@walter I don’t use TreeLayout.

I use similar code as you’ve provided here How to changeLink Routing and Curve based on the flow positions - #4 by walter

And when I apply curviness it doesn’t change anything unfortunately(

4

See possible solutions in that other thread.