How can I position a Node inside a group, on top of the group

I am new to goJS and was trying to create something like a Hierarchy Group . I select a node and create a group. So the Group is creating looking like
, but what I am trying to achieve is something like .
I am using a gridLayout for my groupTemplate . I tried creating a custom Layout but the nodes are not moving to above the group bounds. Can this be achieved?
Please Guide me through this.

Perhaps the easiest solution is to make sure that the Group’s Placeholder is surrounded using an “Auto” Panel whose main element is another Panel containing a black rectangular Shape with a significant margin on top.

Since the Regrouping sample already has such a Group template (named “OfGroups”), I have modified it for you.

First, I wanted to keep the “SubGraphExpanderButton” and header, but it’s in the way of your design, so I moved it to the bottom of the group by swapping the header’s order with the Placeholder in the “Vertical” Panel. I don’t know what else you might want in your groups – perhaps nothing, but I wanted to be able to keep all of the functionality of the Regrouping sample.

Then I surrounded the main Shape of the “Auto” Panel with another Panel, and added a top-only GraphObject.margin to the Shape.

Here’s the modified code, with some elisions for clarity:

    myDiagram.groupTemplateMap.add("OfGroups",
      $(go.Group, "Auto",
        . . .,
        $(go.Panel,
          $(go.Shape, "Rectangle",
            {
              fill: "black", strokeWidth: 0,
              stretch: go.GraphObject.Fill, // this is NEW for you
              margin: new go.Margin(20, 0, 0, 0)  // this is NEW for you
            })
        ),
        $(go.Panel, "Vertical",  // Placeholder above title, SWAPPED!
          $(go.Placeholder,
            { padding: 5, alignment: go.Spot.TopLeft }),
          $(go.Panel, "Horizontal",  // button next to TextBlock
            { stretch: go.GraphObject.Horizontal, background: "#FFDD33" },
            $("SubGraphExpanderButton",
              { alignment: go.Spot.Right, margin: 5 }),
            $(go.TextBlock,
              . . .)
          )  // end Horizontal Panel
        )  // end Vertical Panel
      ));  // end Group and call to add to template Map

The result is something like this, after ungrouping “Group B”:

1 Like

Yes,this worked perfectly. I was able to create the group and align the member parts as shown in figure.

Thanks for your detailed inputs.

Regards,
Ben

Hi ,

I would like to know if we can attach the drag event of the first node , in this case “lightblue”, to the entire group as a whole .Something like, it will be the handler for the group. The drag event of all other nodes will remain same as a node.

I tried changing the computeBoundAfterDrag to false for grouptemplate.This work is when there is no other element in the group,but when I add another member and try to drag the first node , the group just expands.

Kindly provide some inputs for this.

So, you want the whole group to be moved when the lightblue node is moved? Should the whole group be copied or deleted when the lightblue node is copied or deleted? When the user tries to select the lightblue node, should the group be selected? Is the lifetime of the lightblue node different from the lifetime of the group?

If not, why not make the lightblue node the group?

So, you want the whole group to be moved when the lightblue node is moved? Should the whole group be copied or deleted when the lightblue node is copied or deleted? When the user tries to select the lightblue node, should the group be selected?

Yes, that is what I am looking to make.
I tried creating a group template with a panel which copies almost all attributes of the parent element (e.g.lightblue node) and hide the parent when i make it into a group. This seems to work , but I’m not sure if this is proper. Is there any other alternative?

Can the light blue node always be a Group?

Yes. That is what I’m trying to achieve.the group will look as discussed in earlier replies.

I tried creating a group template with a panel which copies almost all attributes of the parent element (e.g.lightblue node) and hide the parent when i make it into a group.

Is there any alternative way other than the one I discussed above.

Thanks,
Ben

I’m sorry, but I have no idea of what you want to know. Could you please be more specific about what you have tried and how it does not meet your needs? It seems to me that the group template I gave you originally could be modified to include the information that you want, and there wouldn’t be any separate small “lightblue” node.

I’m sorry for the vague descriptions.
The basic idea is drag a node e.g.lightblue node into the canvas and convert the node into a group.
and will look like with other nodes as members.

The group template you explained was perfect,which looked as if lightblue node is the actual group and all other elements are its children/members. One of the functionality is group drag using the lightblue node as the handle. As the lightblue node is still a member , this is not possible with that implementation.

So to achieve this,I tried different cases and finally what I did was I created a small panel on top of the group and copied all the properties of lightblue node and then hide the node. That works as I wanted , but I am not sure if this is right way because every time I add a new behavior to the node ,e.g .lets say ports, I need to copy that to the cloned portion also.

I would like to know if there is any other way to implement the same ,also is there any way to convert a node into a group, instead of adding it as a member to a group.I went through the api’s ,but did not find any documentation.

Hope u understand what I’m trying to implement.

OK, that makes sense. That’s why I asked the question of why the “lightblue” node isn’t always a Group. In your example the Group would have the “lightblue” information and the Group would have member Nodes that were the two "yellow"s and the “lightgreen”.

Having the “lightblue” Node be a Group would avoid the problems that might arise from having two identities represented by two objects.