Hello,
I tried to make my links to be able of relinking.
After few moments searching forum, I decided to set portId of my ports to empty string.
After that, I’m able to relink my links just as perfect as it could be.
But another issue came out. Bacuse I need to use 4 ports for Node, and therefore they have the same Id now. My diagram looks a bit ugly now:
I need the diagram to be able of relinking, but to look like this:
Any idea how to workaround this one?
Thanks for any advice!
Why do your nodes need to have four separate ports? That is, four separate GraphObjects that have unique portIds and can be specifically linked with regardless of their size and position on their node.
Also, are the green rectangles supposed to be in the diagram, or are they annotations on the screenshot just for this forum topic?
I need four ports, because my project is defined that way. The four ports are necessary because of our design …
Nevermind, I need to do it with 4 ports (or at least the Node to look like there are 4 ports, which can connect links to another Node).
No! The green rectangles is just annotaion.
The most common example of nodes having four ports each is the Flow Chart sample, Flowchart.
In it the links are also relinkable at both ends. Does this not meet your requirements, even if that sample does not have the appearances that you want?
Great! I know Flow Chart sample pretty well. But there are Links connected exactly into ports, which is caused by setting fromPortIdProperty and toPortIdProperty. But I need the links to connect to Node around it’s perimeter, not just into port (i know this seems pretty stupid, but thats just how I need it to work).
That’s a reasonable expectation. But if your model doesn’t have port identifiers with the link data, that means you don’t need four separate logical and physical “ports” on each node. One, which defaults to the whole node, will suffice. Orthogonal link routing will automatically connect any link to the middle of the closest side. If you happen to put little decorations there on each side, that’s fine, but it doesn’t change that those decorations are not separate ports.
So, you want to make my Node a “port”, by setting toLinkable and fromLinkable to true, right?
But when I want to drag the Node around diagram, It will not drag itself. I have to click on the Node and then drag it around.
Yes, if you have set fromLinkable or toLinkable to true on the whole Node, the user can start drawing a new link from anywhere in the whole Node.
But you can set either or both of those properties to false on particular GraphObjects within the node, so that those objects can be used for dragging and whatever. If that technique is insufficient, you can always add a transparent Shape of the desired size and position to get the effect that you want.
Or maybe you just want to make a particular object in the node be the port. That’s pretty common too. For this template:
$(go.Node, "Auto",
$(go.Shape, { . . ., portId: "", fromLinkable: true, toLinkable: true }),
$(go.TextBlock, . . .)
)
Note how the Shape, not the Node is the port, but since it occupies most of the node, it’s as if it were the whole node.