Создание динамической блочной структуры с отношениями родитель-потомок GoJS ⇐ Jquery

[Anonymous]

Я работаю над пользовательским интерфейсом, используя группу с GridLayout, но изо всех сил пытаюсь добиться желаемого расположения элементов.
код

Код: Выделить всё

function init() {
var $ = go.GraphObject.make;

// Create a Diagram in the given DIV
var myDiagram = $(go.Diagram, "myDiagramDiv", {
"undoManager.isEnabled": true,
layout: $(go.LayeredDigraphLayout, {
direction: 0
}) // Horizontal layout
});

// Node Templates
myDiagram.nodeTemplateMap.add("BQ",
$(go.Node, "Auto",
$(go.Panel, "Spot",
$(go.Shape, "Rectangle", {
strokeWidth: 1,
stroke: "#0078D4",
width: 380,
height: 165,
fill: "#e7f3ff"
}),
$(go.TextBlock, {
alignment: go.Spot.TopLeft,
alignmentFocus: go.Spot.TopLeft,
font: "bold 14px sans-serif",
stroke: "#0078D4"
},
new go.Binding("text", "name"))
)
)
);

myDiagram.nodeTemplateMap.add("block1",
$(go.Node, "Auto",
$(go.Shape, "Rectangle", {
fill: "#ffffff",
strokeWidth: 2,
stroke: "#0078D4",
width: 180,
height: 350
}),
$(go.TextBlock, {
alignment: go.Spot.TopCenter,
margin: 8,
font: "bold 14px sans-serif",
textAlign: "center",
stroke: "#0078D4"
},
new go.Binding("text", "name"))
)
);

// Link Template
myDiagram.linkTemplate =
$(go.Link, {
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 6
},
$(go.Shape),
$(go.Shape, {
toArrow: "Standard"
}),
$(go.TextBlock, {
segmentOffset: new go.Point(0, -10),
font: "10pt sans-serif",
stroke: "#000"
},
new go.Binding("text", "label"))
);

// Define the model data with adjusted locations
myDiagram.model = new go.GraphLinksModel(
[{
key: 1,
name: "Title",
category: "BQ",
loc: "150 100",
fill: "black"
},
{
key: 2,
name: "Title 1",
category: "BQ",
loc: "150 300",
fill: "black"
},
{
key: 3,
name: "Title 2",
category: "block1",
loc: "400 200"
}
], [{
from: 1,
to: 3,
label: "My link text"
},
{
from: 2,
to: 3,
label: "My link text1"
}
]
);
}

init();

Код: Выделить всё

    

#myDiagramDiv1 {
width: 100%;
height: 600px;
padding-top: 15%;
border: 1px solid black;
}

• Ожидаемое поведение: хочу все блоки автоматически выравниваются в макете сетки, не перекрываясь и не оставляя нежелательных пробелов. [Примечание] Используйте макет группы. Модель будет динамической
• Фактическое поведение: выравнивание блоков не работает должным образом; некоторые блоки начинаются после конца блока справа от них, что приводит к неправильной компоновке.

Несмотря на эти усилия, я не удалось добиться желаемого макета. Мы будем очень признательны за любые идеи и предложения!



Подробнее здесь: https://stackoverflow.com/questions/790 ... ships-gojs