How to position a node within a group to the edge of the group

Hi,

So I have the following graph, the grey block is a group node. As you can see we have 2 types of shape of nodes inside the group, we used go.LayeredDigraphLayout. So my question is, can I make the blue circle align at the left edge of the group, and the green circle aligns at the right edge of the group (meaning on top of the edge) but still keeping all nodes connected?

Thanks,
Kakit

How is your Group template defined? I’m wondering if you could have something like:

      $(go.Group, "Auto",
        {
          layout: $(CustomLayout, ... /* whatever options you want */)
        },
        $(go.Shape, { strokeWidth: 0, fill: "lightgray" }),
        $(go.Placeholder, { padding: new go.Margin(10, -5, 10, -5) })
      )

where CustomLayout is defined as a subclass of LayeredDigraphLayout that overrides LayeredDigraphLayout.commitNodes to call the super method and then position those little circular nodes of yours where you want them to be, furthest to the left or to the right of all of the member nodes.

Hi,

Yes, that is what I was thinking to add a custom layout.

return GO(
    go.Group,
    'Vertical',
    {
      isShadowed: true,
      isSubGraphExpanded: true,
      layerName: DIAGRAM.LAYERS.BACKGROUND,
      layout: GO(BlockLayout),
      padding: 0,
      portSpreading: go.Node.SpreadingEvenly,
      selectionObjectName: DIAGRAM.PART.SHAPE,
      shadowVisible: false,
      fromSpot: go.Spot.RightSide,
      toSpot: go.Spot.LeftSide,
      subGraphExpandedChanged: function(grp) {
        grp.category = 'Collapsed';
      },
    },

This is a snippet of my group template, as you can see I am using a layout call BlockLayout which is an inherited layout of LayeredDigraphLayout.

function BlockLayout() {
  go.LayeredDigraphLayout.call(this);
}

go.Diagram.inherit(BlockLayout, go.LayeredDigraphLayout);

After having a look at your hint I am guessing I need to do something like this

BlockLayout.prototype.commitNodes = function() {
  go.LayeredDigraphLayout.prototype.commitNodes.call(this);
  const it = this.diagram.nodes;
  let entryX = 0;
  let entryY = 0;
  while (it.next()) {
    const node = it.value;
    if (node.data.type === 'entry') {
      node.move(new go.Point(entryX, entryY));
      entryY += node.height;
    }
    // entryX += offset.width;
  }
};

But the node still not position at the edge of the group, it just position at the (0,0) within the group.

So my questions are

  • How can I evenly align the circle nodes on the left/right edge of group if there is multiple circles?
  • There are group inside groups, how do I make sure the location of nodes only position at its direct parent group’s edge only.

I am guessing I need to get the group’s position at the group and calculate the position of circles based on its direct group position and width and height, but I am not sure how to get the position of the group.

Thanks for help.

Kakit

You need to do something like the ParallelLayout:
https://gojs.net/latest/extensions/ParallelLayout.js
and demonstrated at:
https://gojs.net/latest/extensions/Parallel.html

Now, that layout assumes there is a single “split” node and a single “merge” node because it wants to position the “merge” at the same vertical point as the “split” node (depending on the orientation of the layout).

In your case you’ll only need to identify those nodes in the this.network.vertexes that correspond to your small circles, and then change their horizontal point accordingly.

Sorry, I don’t have time to demonstrate this right now on a Saturday.

HI Walter,

Thanks for your reply.

The problem is no matter where I position the circles, the group resize with the circle position changes. So that the circle is always within the group, but what I want to do is having half of the circle within the group and half of it outside the group. It looks like the edge of the group chop the circle half & half.

Cheers,
Jiajie

Did you use a negative left and right Margin as I suggested above?

Cool it works fine now. I override layeredDiagram assignLayers function and with setting negative margin on placeholder.