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.ts.

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.

Save Load Diagram Model saved in JSON format:
{ "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" } ] }