Special diagram node layout

GoJS
1

How can I create the layout as in the picture?

Capture

Icons in the top section are fixed- top left corner and top right corner.

Laundry line- draft icon and clock icon- are fixed in this position.

The text in the middle is the name of the shape. It is wrapped and should appear in the center- of the red box (the top of the box is in the bottom of the draft and clock icons).

The shape should be resized using the 9 small blue boxes.

When hovering the shape, the 4 spots to create the links should appear (see the numbers in the picture above) inside the shape.

2

My guess:

Node, "Auto"
  Shape, "RoundedRectangle"
  Panel, "Table"
    Picture, row: 0, alignment: Left
    Picture, row: 0, alignment: Right
    Shape, "LineH", row: 1, stretch: Horizontal
    Panel, "Horizontal", row: 1
      Button, ... "DRAFT" ...
      Button, ... clock ...
    TextBlock, row: 2

For hover buttons, see Buttons that show on Hover. Also see Selection Adornment Buttons, although that Adornment is shown with selection, not hover.

3

I did try this

    $(go.Node, "Auto", {resizable: true}, 
        $(go.Shape, "RoundedRectangle",
            {strokeWidth: 0, fill: "gray"},
        ),
        $(go.Panel, "Table",
            $(go.TextBlock,
                {row: 0, text: "row 0"},
            ),
            $(go.TextBlock,
                {row: 1, text: "row 1"},
            )
        )
);

and when I resize the shape the rows are kept in the center.
i do not want that.
I need row 0 to be at the top
than row 1 to be at the other left space of the shape, (see the image in my previous comment)

and see this result

Capture

4

Sorry, I forgot about resizing. If an Auto Panel is sized larger than the natural size of its element, that element defaults to Center alignment. If you want it to stretch to fit in the main Shape acting as the border, set the Table Panel’s stretch:

    { stretch: go.GraphObject.Fill },

By default the sizing of rows or columns in a Table Panel provide extra space proportionally, just as in HTML. You can control that by using RowColumnDefinitions.

      $(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
      $(go.RowColumnDefinition, { row: 1, sizing: go.RowColumnDefinition.None }),

So rows 0 and 1 will not get any extra height.

5

I tried this

$(go.Node, "Auto", {resizable: true},
        $(go.Shape, "RoundedRectangle",
            {strokeWidth: 0, fill: "lightgray"},
        ),
        $(go.Panel, "Table", {stretch: go.GraphObject.Fill},
            $(go.RowColumnDefinition, {row: 0, sizing: go.RowColumnDefinition.None, background: "yellow"}),
            $(go.RowColumnDefinition, {row: 1, sizing: go.RowColumnDefinition.None, background: "green", height:10}),
            $(go.RowColumnDefinition, {row: 2, sizing: go.RowColumnDefinition.None, background: "pink"}),
            $(go.TextBlock, {row: 0, alignment: Spot.TopLeft, text: "row 0 left"}),
            $(go.TextBlock, {row: 0, alignment: Spot.TopRight, text: "row 0 right"}),
            $(go.Shape, "lineH", {stretch: GraphObject.Fill, row: 1}),
            $(go.Panel,"Vertical",{background:"red", row:2},
                $(go.TextBlock, {row: 2, text: "row 2", alignment: Spot.Center},)
                ),
        )
    );

and got this

Capture

I need row 2 text to be all over the gray area with word wrap

another question I did put height for the line to prevent it to bee too high is there a reason for that?

6

Why did you set RowColumnDefinition for row 2 to be sizing: None?

7

My mistake,
Now when I remove RowColumnDefinition then Still the text “row 2” is not wrapping.

8

fixed it by setting the text block’s panel to stretch: GraphObject.Fill
is this the right way?

9

Now I have another problem
when I add ports they are not aliened to the frame.
I think this also applies to the icons and the line, they do not get up to the end of the shape
Capture

if I change the shape to be rectangle then it works as expected , but I do need round rectangle
Capture

10

fixed that also: instead of the node to be “auto” I make it Spot

11

Yes you need to stretch the TextBlock in row 2, as I stated previously.

Part of the problem is that you put a superfluous Vertical Panel around the TextBlock. Why have a Vertical Panel with only one element?