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.
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);
}
`