Create new shapes for using in palette

Question

I have created a user-defines palette. There I imported graphics (router, modems, ...). That works.

A Router has many ports (some LAN, WAN, DMZ, ...). I am able to use "geometric nodes" (circle) and give them names (WAN, LAN1, ...). After, I am able to connect these circles (ports) to other ports (circles).

I want to "combine" the icon and the circles to a new shape which I can use in my palette.

The new (the combined shape) should have all "things" connectable (the icon, all circles).

 

How to do that?

Answer 1

Try visualizing your ports as labels of your router node. First create the router node. Then create a circle node. Move the circle over the router, right-click the circle to open its context menu, and choose "Convert to Label". Finally, drag the new label to the desired location relative to the router node.

It is, however, not possible to connect an edge to a node label. Thus you need to connect the edge to the center of the router node first. Then select the edge and drag the small black square onto the desired port label. Alternatively, specify suitable coordinates for the edge's "Source Port X", "Source Port Y", "Target Port X", "Target Port Y" properties in the properties view in yEd's lower right corner.

Comments

Hi Thomas,

thanks for your advise. I understood: What I want is not possible (at the monemt).

When ! connect the small square to the label (i.e. WAN-port) (on the image) and start
 * Layout | Hierarchisch | OK
the edge will point to the center of the icon instead into the label.

So, I searched in the questions of other users and found a feature request which sounds as it would solve my problem:
 * http://yed.yworks.com/support/qa/2154/sub-graphs-in-palette

Then it should possible to create (and save in a custom palette) a group of the image and all ports (as cirlce-nodes) and use that grout as often as I need it.

Is that right? Then I can give my vote to the feature request :-)

Thanks again,

MartinK


BTW: I am not able to paste a picture into this comment. "How to do this?" or "What is the right way?"

---

With the approach explained in my answer, you need to use fixed port positions for layout calculations. I.e. before starting the hierarchic layout algorithm, run "Tools" -> "Constraints" -> "Port Constraints" with "Configuration Method" set to "From Sketch", "Fix Source Port" and "Fix Target Port" enabled, and "Act on" set to "All Ports".

Sub-graph support in the palette would not help for your use case, because using actual nodes for your edge connection points would result in the layout algorithm moving your "port nodes" to undesired locations.

Basic comments are text only. To add a picture to a comment, you actually need to answer the original question and afterwards convert the answer into a comment with the answer's edit action.

---

Now I am able to use the hierachical layout (bur only the hierachical, the other will break the layout). thanks.

After adding the new combinations to my palette and use it from there, I have the next problems.

Here you see the 2 little squares when I select the edge

and here they are disappeared (i looked for them in the red circle):

 

Sometimes it seems that I take the arrow "right" and move it to the right position. But often I do not move the arrow -- i re-route it and introduce a new corner into the arrow. -- How to get the arrow (the little squares) right?

 

And: the arrows are stopping at the end of the images and do not go over it (as the blue line I have drawn on top).

 

How to get the arrows as long as the blue ones?

 

Thanks again,

 

MartinK

---

Regarding port constraints:
Indeed, only a few algorithms support port constraints. These algorithms are hierarchical, tree, and the orthogonal edge routing algorithms.

Regarding the "missing" black square:
I would guess the geometrical endpoints of your edge lie in the black area of your router node and thus the black squares are "invisible". In this case use the "Source Port X", "Source Port Y", "Target Port X", "Target Port Y" properties to adjust the coordinates of the endpoints (as mentioned in the original answer).

Regarding edges "stopping" at image (node) boundary:
That is the intended behavior. It is currently not possible to force edges to paint itself inside their source and target nodes.

---

Regarding port constraints:
Understood.

Regarding the "missing" black square:
You're right. After moving the Source/Target-Ports by editing the coordinates manually in the properties field I was able to see and use the little squares.

Regarding edges "stopping" at image (node) boundary:
Understood.


Thanks a lot!

MartinK