Some layout questions

[anoon]

Hi I have quite a simple request I think. I’m trying to create something like this:

But what I’m getting is space between the shapes (I’ve tried setting padding and margin) and as soon as I group them one of the shapes (the last triangle) automatically moves below the other shapes. It looks like this:

My code is really quite simple at this stage and I’m hoping someone can point out where I could improve:

$scope.homeNodeDataArray = [
                    { key: 1, text: "Initial 1", color: "pink", fig: "TriangleRight", group: 4 },
                    { key: 2, text: "TopEvent 1", color: "orange", fig: "Ellipse", group: 4 },
                    { key: 3, text: "Residual 1", color: "lightgreen", fig: "TriangleLeft", group: 4 },
                    { key: 4, text: "Bowtie 1", color: "silver", isGroup: true },
                    { key: 5, text: "Initial 2", color: "red", fig: "TriangleRight", group: 8 },
                    { key: 6, text: "TopEvent 2", color: "pink", fig: "Ellipse", group: 8 },
                    { key: 7, text: "Residual 2", color: "orange", fig: "TriangleLeft", group: 8 },
                    { key: 8, text: "Bowtie 2", color: "silver", isGroup: true }
                ];
                $scope.homeLinkDataArray = [];

var $ = go.GraphObject.make;  // for conciseness in defining templates in this function
            var bigfont = "bold 13pt Helvetica, Arial, sans-serif";
            var smallfont = "bold 11pt Helvetica, Arial, sans-serif";

            bowtieHomeDiagram =
                $(go.Diagram, "bowTieHome",
                    {
                    });

            bowtieHomeDiagram.nodeTemplate =
                $(go.Node, "Auto",
                        $(go.Shape,
                            new go.Binding("figure", "fig"),
                            new go.Binding("fill", "color"),
                            { width: 100, height: 70, margin: 0 }
                        )
                );

            // Groups consist of a title in the color given by the group node data
            // above a translucent gray rectangle surrounding the member parts
            bowtieHomeDiagram.groupTemplate =
                $(go.Group, "Vertical",
                    $(go.TextBlock,
                        {
                            font: "bold 19px sans-serif",
                            isMultiline: false,  // don't allow newlines in text
                            editable: true  // allow in-place editing by user
                        },
                        new go.Binding("text", "text").makeTwoWay(),
                        new go.Binding("stroke", "color")),
                    $(go.Panel, "Auto",
                        $(go.Shape, "Rectangle",  // the rectangular shape around the members
                            {
                                fill: "rgba(128,128,128,0.2)", 
                                width: 420,
                            }),
                        $(go.Placeholder, { margin: 3, background: "transparent", padding: 0 })  // represents where the members are
                    )
                );

bowtieHomeDiagram.model = new go.GraphLinksModel($scope.homeNodeDataArray, $scope.homeLinkDataArray);

[simon]

So it seems like each of these bow tie parts are Node, and all this is contained within a Group.

It may be significantly easier on you if the whole unit together is 1 node, in other words, if your top picture depicted six nodes, instead of six groups and a large number of nodes.

If you are willing to consider that organization instead, it will be a little easier to make a template for you, and easier for you to make changes to it.

[simon]

Here is a basic example for instance of what you are trying to do (so far), using only Nodes: https://codepen.io/simonsarris/pen/bGoeBQX?editors=1010

Each node has 3 shapes, and each shape has its own data binding, so in the Node data, you specify the colors for each of the shapes. Shapes also have a default color of “orange”, in case nothing is specified for any given color.

[anoon]

Oh wow. On two counts, firstly thanks for the super speedy response!!! Second, perfect and it does highlight how much I have to learn on how to get the most out of goJS!

[walter]

And if you don’t want to change the data structures, the problem that you encountered is due to the default layout (Group.layout) is an instance of Layout that arranges nodes that do not already have a real location to a grid-like arrangement that is more-or-less square.

You could avoid that by setting Group.layout to something like:

$(go.Group,
  {
    layout: $(go.GridLayout, { wrappingWidth: Infinity, spacing: new go.Size(0, 0) })
  },
  . . .

[anoon]

Thanks guys! Just to close the loop I’ve got a great outcome here and it’s coming together nicely…