This is a minimalist HTML and JavaScript skeleton of the GoJS Sample CurvedLinkReshaping.html. It was automatically generated from a button on the sample page, and does not contain the full HTML. It is intended as a starting point to adapt for your own usage. For many samples, you may need to inspect the full source on Github and copy other files or scripts.

https://unpkg.com/gojs@2.2.15/extensions,CurvedLinkReshaping.htmlCurvedLinkReshapingTool.js">

This sample is a modification of the State Chart sample that makes use of the CurvedLinkReshapingTool that is defined in its own file, as CurvedLinkReshapingTool.js.

Note that unlike the standard case of a Bezier-curved Link that is Part.reshapable, there is only one reshape handle When the user drags that handle, the value of Link.curviness is modified, causing the link to be curved differently. This sample also defines a TwoWay Binding on that property, thereby saving the curviness to the model data. Unlike the regular State Chart sample, there is no Binding on Link.points, which is no longer needed when the curviness is the only modified property.

Diagram Model saved in JSON format:

{ "class": "go.GraphLinksModel",
  "nodeKeyProperty": "id",
  "nodeDataArray": [
    { "id": 0, "loc": "120 120", "text": "Initial" },
    { "id": 1, "loc": "330 120", "text": "First down" },
    { "id": 2, "loc": "226 376", "text": "First up" },
    { "id": 3, "loc": "60 276", "text": "Second down" },
    { "id": 4, "loc": "226 226", "text": "Wait" }
  ],
  "linkDataArray": [
    { "from": 0, "to": 0, "text": "up or timer", "curviness": -20 },
    { "from": 0, "to": 1, "text": "down", "curviness": 20 },
    { "from": 1, "to": 0, "text": "up (moved)\nPOST", "curviness": 20 },
    { "from": 1, "to": 1, "text": "down", "curviness": -20 },
    { "from": 1, "to": 2, "text": "up (no move)" },
    { "from": 1, "to": 4, "text": "timer" },
    { "from": 2, "to": 0, "text": "timer\nPOST" },
    { "from": 2, "to": 3, "text": "down" },
    { "from": 3, "to": 0, "text": "up\nPOST\n(dblclick\nif no move)" },
    { "from": 3, "to": 3, "text": "down or timer", "curviness": 20 },
    { "from": 4, "to": 0, "text": "up\nPOST" },
    { "from": 4, "to": 4, "text": "down" }
  ]
}

View this sample page's source on GitHub