Creating a link between two nodes by dragging one over another


#1

Hi, first post. I am trying to take my existing graph and add the following feature:

I want to be able to click and drag a node over another node and create a link between the two WITHOUT relocating any nodes, if that makes sense. One problem I am facing is on a double click of the node, a new node will be created so this click and drag functionality would need to be on a single click.


#2

What sample are you referring to? Double click doesn’t have any default action… double click to create a new node is something some of our samples do. Check the sample code.

I’m not getting a clear idea of what you want this click-dragover-createlink action you want to work and how double click would be used there.

It sounds like the domain of a custom dragging tool.


#3

I have implemented the functionality to create a new node on a double click.
I should have explained better. I have a flow chart like structure. Double clicking nodes creates a new node instance as well as creates a link between the two nodes and populates it on the Document.

What I have right now is, one node can only connect to one other node. I want to be able to have the user make a node connect to many nodes. I thought clicking and dragging could work by clicking the node, dragging it over another, and then creating a link this way. However, I thought that might create a lot of overhead so I thought about single clicking a node, and then creating a link on the NEXT item selected but I was having trouble implementing the next selected object.

Do you have any tips? I would appreciate it.


#4

ah… ok. Let me propose a solution. When a node is selected, it shows active hotspots that you can click on and drag to create new connected nodes.

for example:

This is a UML example, but could be adapted to flow chart, where the hot spots create different types of flow chart nodes.

This sample isn’t part of the kit, but I’d be glad to send you the source.


#5

I just want to be clear. If I have a graph with a Root and three children and from these children, each have their own children (grandchild to the Root). I want to be able to connect any of the grandchildren to any of the other Root’s children.

So if I have A – > B, C, D (where A is the root and B, C, D are the children)
B --> B1
C --> C1
D – > D1

I want the user to be able to create a link between D1 and B, if they choose.

I hope that’s clear, but I would appreciate any source material you could send.

BTW, these are all GoBasicNodes, if that helps.


#6

It’s very easy to create a link between any two nodes. Mouse down over the port and drag. See StateCharter or BasicApp.


#7

Well, that doesn’t really work the way I want it to. I want to create a GoLink with arrows with my links. Plus, I want to be able able to save the link and clicking and dragging doesn’t give me that functionality. It gives immediate results, but not withstanding.


#8

You can change the default link created in two ways:

NodeLinkDemo\GraphView.cs(26): this.NewLinkClass = typeof(GraphLink);

DataSetDemo\FormDiagram.cs(124): goView1.NewLinkPrototype = protoLink;

I don’t understand your comment about “to be able able to save the link”.


#9

@Jake, could you offer more code, just as I am having trouble finding source for the projects.

Thank you.


#10

Here’s 2 samples:

      GoLink protoLink = new GoLink();
      protoLink.Pen = new Pen(Color.LightGray, 4);
      protoLink.Orthogonal = true;
      goView1.NewLinkPrototype = protoLink;
      GoLabeledLink link = new GoLabeledLink();
      link.RealLink.ToArrow = true;
      goView1.NewLinkPrototype = link;

#11

If I were dragging a link from one port to another, do you know what would be considered the destination object’s port?


#12

Typically, the “from” is the port you mouse down over, and the “to” is where the new link ends.

but… Ports can be set to only be a “to” (destination) port, so in that case, the mouse down is the “to” and the mouse up is the “from”.


#13

Could you show what that looks like? I am not sure how to assign a to and from port to mouse events.


#14

See the “Linking Ports” section of the User Guide.