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

Note that after dragging a node label you can move that node and the label maintains the same position relative to the node. That relative position is specified by the GraphObject.alignment property, used by the "Spot" Panel. 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" } ] }