Snap Link Reshaping

This sample is a simplified version of the Draggable Link sample. Links are not draggable, there are no custom Adornments, nodes are not rotatable, and links do not have text labels.

Its purpose is to demonstrate the SnapLinkReshapingTool, an extension of LinkReshapingTool that snaps each dragged reshape handle of selected Links to the nearest grid point.

Note how the "LinkReshaped" DiagramEvent listener changes the Link.routing of the reshaped Link, so that it is no longer AvoidsNodes routing but simple Orthogonal routing. This combined with Link.adjusting being End permits the middle points of the link route to be retained even after the user moves or resizes nodes. Furthermore there is a TwoWay Binding on Link.routing, so that the model remembers whether the link route had ever been reshaped manually.

{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "modelData": {"position":"0 0"},
  "nodeDataArray": [
{"text":"DB", "figure":"Database", "fill":"lightgray", "key":-3, "loc":"184 176"},
{"text":"DB", "figure":"Database", "fill":"lightgray", "key":-2, "loc":"248 248"},
{"text":"DB", "figure":"Database", "fill":"lightgray", "key":-4, "loc":"424 192"},
{"text":"DB", "figure":"Database", "fill":"lightgray", "key":-5, "loc":"320 152"},
{"text":"DB", "figure":"Database", "fill":"lightgray", "key":-6, "loc":"424 320"},
{"text":"DB", "figure":"Database", "fill":"lightgray", "key":-7, "loc":"352 256"},
{"text":"DB", "figure":"Database", "fill":"lightgray", "key":-8, "loc":"176 296"},
{"text":"DB", "figure":"Database", "fill":"lightgray", "key":-9, "loc":"288 344"},
{"text":"Step", "key":-10, "loc":"96 240"},
{"text":"Step", "key":-11, "loc":"536 280"}
 ],
  "linkDataArray": [
{"from":-10, "to":-11, "fromPort":"R", "toPort":"L", "points":[121,240,131,240,132,240,132,240,216,240,216,176,264,176,264,104,392,104,392,240,480,240,480,280,501,280,511,280], "routing":"Orthogonal"}
  ]}

加入 GoJS 交流群