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

Note that after dragging a link label you can move a node connected by that link and the label maintains the same position relative to the link route. That relative position is specified by the GraphObject.segmentOffset property. This sample also saves any changes to that property by means of a TwoWay Binding.

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" } ] }