In the Window constructor, create a custom node shape that will represent connectors:<\/p>\n
var connectorShape = new Shape(\n\tnull, \/\/ no borders\n\tnew[] \/\/ decorations\n\t{\n\t\tnew LineTemplate(10, 10, 10, 50),\n\t\tnew LineTemplate(10, 50, 90, 50),\n\t\tnew LineTemplate(90, 50, 90, 90)\n\t},\n\tnull,\n\tFillRule.Nonzero, \"Connector\");\n<\/pre>\nAdd a few nodes to the NodeListView, along with the dummy connector node:<\/p>\n
var item1 = new ShapeNode { Shape = Shapes.Rectangle };\nNodeListView.SetLabel(item1, \"Activity\");\nnodeList.Items.Add(item1);\n\nvar item2 = new ShapeNode { Shape = Shapes.Decision };\nNodeListView.SetLabel(item2, \"Decision\");\nnodeList.Items.Add(item2);\n\nvar item3 = new ShapeNode { Shape = connectorShape };\nNodeListView.SetLabel(item3, \"Connector\");\nnodeList.Items.Add(item3);\n<\/pre>\nIn the NodeCreated event handler, check if the newly created node represents a connector, and replace it with a DiagramLink:<\/p>\n
var node = e.Node as ShapeNode;\nif (node != null)\n{\n\tif (node.Shape.Id == \"Connector\")\n\t{\n\t\t\/\/ replace the dummy connector node with a DiagramLink\n\t\tvar bounds = node.Bounds;\n\t\tdiagram.Items.Remove(node);\n\n\t\tvar link = diagram.Factory.CreateDiagramLink(\n\t\t\tbounds.TopLeft, bounds.BottomRight);\n\t\tlink.SegmentCount = 3;\n\t\tlink.Shape = LinkShape.Cascading;\n\n\t\tConnectToNearbyNode(link);\n\t}\n\t...\n}\n<\/pre>\nOtherwise if it is a regular node, set its anchor points and connect it to nearby unconnected links, if there are any:<\/p>\n
else\n{\n\tnode.AnchorPattern = AnchorPattern.Decision2In2Out;\n\tnode.Effects.Add(new GlassEffect());\n\tConnectToNearbyLink(node);\n}\n<\/pre>\nThe ConnectToNearbyNode method uses a LINQ query to find nodes in the vicinity of the link’s start or end point. If one is found at a distance shorter than 120 points, it is set as the link’s Origin or Destination.<\/p>\n
private void ConnectToNearbyNode(DiagramLink link)\n{\n\t\/\/ connect to a nearby origin node\n\tvar origin = diagram.Nodes.OrderBy(n =>\n\t\tUtilities.Distance(n.GetCenter(), link.StartPoint)).FirstOrDefault();\n\n\tif (origin != null)\n\t{\n\t\tvar distance = Utilities.Distance(origin.GetCenter(), link.StartPoint);\n\t\tif (distance < 120)\n\t\t{\n\t\t\tlink.Origin = origin;\n\t\t\tlink.Route();\n\t\t}\n\t}\n\n\t\/\/ connect to a nearby destination node\n\tvar destination = diagram.Nodes.Where(n => n != origin).OrderBy(n =>\n\t\tUtilities.Distance(n.GetCenter(), link.EndPoint)).FirstOrDefault();\n\n\tif (destination != null)\n\t{\n\t\tvar distance = Utilities.Distance(destination.GetCenter(), link.EndPoint);\n\t\tif (distance < 120)\n\t\t{\n\t\t\tlink.Destination = destination;\n\t\t\tlink.Route();\n\t\t}\n\t}\n}\n<\/pre>\nSimilarly, the ConnectToNearbyLink method finds a nearby unconnected link and sets the specified node as the link’s Origin or Destination.<\/p>\n
private void ConnectToNearbyLink(DiagramNode node)\n{\n\tvar outLink = diagram.Links.Where(l => l.Origin is DummyNode).OrderBy(l =>\n\t\tUtilities.Distance(node.GetCenter(), l.StartPoint)).FirstOrDefault();\n\n\tif (outLink != null)\n\t{\n\t\tvar distance = Utilities.Distance(node.GetCenter(), outLink.StartPoint);\n\t\tif (distance < 90)\n\t\t{\n\t\t\toutLink.Origin = node;\n\t\t\toutLink.Route();\n\t\t\treturn;\n\t\t}\n\t}\n\n\tvar inLink = diagram.Links.Where(l => l.Destination is DummyNode).OrderBy(l =>\n\t\tUtilities.Distance(node.GetCenter(), l.EndPoint)).FirstOrDefault();\n\n\tif (inLink != null)\n\t{\n\t\tvar distance = Utilities.Distance(node.GetCenter(), inLink.EndPoint);\n\t\tif (distance < 90)\n\t\t{\n\t\t\tinLink.Destination = node;\n\t\t\tinLink.Route();\n\t\t\treturn;\n\t\t}\n\t}\n}\n<\/pre>\nThe result of several drag and drop operation is displayed below.
\n![\"\"](\"https:\/\/mindfusion.dev\/_samples\/LinkDragDrop.png\")
<\/p>\n
The complete sample project is available for download here:
\nhttps:\/\/mindfusion.dev\/_samples\/LinkDragDrop.zip<\/a><\/p>\nEnjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post we show how to create diagram links via drag-and-drop operation from a NodeListView used as a palette. Since the NodeListView control can contain only DiagramNode objects, we will create a custom node shape representing a connector. Once … Continue reading