How to stack groups vertically

@MarcoNicolodi wrote:

Hello.

Im evaluating GoJS version 1.6.7.

Im trying to stack these groups vertically. I managed to make it look like swimlanes, but with no lanes, just the pools. This is the layout we need in our diagram, although i know this isnt the right way to do it. Ive found the documentation a little overwhelming for the short time i had to implement the code.

But theyre stacking horizontally, as you can see in the Picture. For each 3 panels, they break the "line". I need to break for each single panel.

perspectivas.png1084x551 25.4 KB

This is the code:

`

   function init(){
        var $ = go.GraphObject.make;
              var diagram = $(go.Diagram, "myDiagramDiv");

        diagram.nodeTemplate =
            $(go.Node, "Auto",{movable: false, selectable: false},
            $(go.Shape, "Rectangle", { fill: "white" }, new go.Binding("fill", "color")),
            $(go.TextBlock, {margin: 10 }, new go.Binding("text", "key"))

            );

        diagram.groupTemplate =
        $(go.Group, "Vertical",
            {stretch: go.GraphObject.Horizontal,
            selectable: false, movable: false, maxSize: new go.Size(800,NaN)},
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            $(go.Panel, "Auto", {
                stretch: go.GraphObject.Fill,
            },
                $(go.Shape, "Rectangle",
                    { name: "SHAPE", fill: "white" },
                    new go.Binding("fill", "color")
                ),
                $(go.TextBlock,
                    { name: "GroupLabel",
                    font: "bold 13pt sans-serif", editable: false,
                    alignment: go.Spot.Center, margin: new go.Margin(10,0 , 10, 0) },
                    new go.Binding("text", "text").makeTwoWay()
                )
            ),
            $(go.Panel, "Table",
                {padding: 0},
                $(go.Shape, "Rectangle",
                {
                    fill: "lightgreen", width: 800, maxSize: new go.Size(1080, NaN) }), //bg color da lane
                $(go.Placeholder,    // represents the area of all member parts,
                { padding: 0   })  // with some extra padding around them
            )
            //panel do titulo da perspectiva
            //end panel group title
        );

        var nodeDataArray = [
             { key: "Perspectiva 1", text: "Perspectiva 1",isGroup: true},
             { key: "Perspectiva 2",text: "Perspectiva 2", isGroup: true},
             { key: "Perspectiva 3",text: "Perspectiva 3", isGroup: true},
             { key: "Perspectiva 4",text: "Perspectiva 4", isGroup: true},
             { key: "Perspectiva 5",text: "Perspectiva 5", isGroup: true},
             { key: "Perspectiva 6",text: "Perspectiva 6", isGroup: true},
              { key: "Perspectiva 7",text: "Perspectiva 7", isGroup: true},
            { key: "Beta", group: "Perspectiva 1", color: "lightblue" },
            { key: "Gamma", group: "Perspectiva 1" },
             { key: "Mario", group: "Perspectiva 3"},
            { key: "Zelda", group: "Perspectiva 3" },
            { key: "Master Chief", group: "Perspectiva 2" },
        ];
        var linkDataArray = [
            { from: "Beta", to: "Gamma" },  // this link is a member of the Group
        ];
        diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

    }

`

Posts: 3

Participants: 2

Read full topic