<script src="https://gojs.net/latest/release/go.js"></script>
<script src="https://gojs.net/latest/extensions/TableLayout.js"></script>
<body>
<div id="myDiagramDiv" style="width:500px; height:600px"></div>
<p><a href="https://gojs.net"/>gojs. net<a/></p>
</body> function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = new go.Diagram(
'myDiagramDiv', // create a Diagram for the HTML Div element
{
layout: $(go.LayeredDigraphLayout),
'animationManager.isEnabled': false,
'undoManager.isEnabled': true,
"layout.isOngoing": false,
//layout: new TableLayout()
}
); // enable undo & redo
// define a simple Node template
myDiagram.nodeTemplate = new go.Node('Vertical', { margin: 10 })
.bind('row').bind('column', 'col')
.add(
new go.Shape('RoundedRectangle', {
strokeWidth: 0,
fill: 'white',
width: 50,
height: 50,
}).bind('fill', 'color')
)
.add(
new go.TextBlock({ margin: 8, font: 'bold 14px sans-serif', stroke: '#333' }).bind(
'text',
'key'
)
);
const nestedGroup = $(go.Group,"Vertical", "stretch: Horizontal",{layout: new TableLayout()})
.bind('row').bind('column', 'col')
.bind('columnSpan', 'colSpan')
.add(new go.TextBlock().bind('text', 'key'))
.add(new go.Panel('Auto')
.add(new go.Shape("Rectangle", { fill: "orange", stroke: "darkorange" }))
.add($("SubGraphExpanderButton", { row: 0, column: 0, margin: 3 }),)
)
.add(new go.Panel('Auto')
.add(new go.Shape("RoundedRectangle", { fill: null }))
.add(new go.Placeholder())
)
const tableContainer =
$(go.Group, "Vertical", { layout: new TableLayout() },
$(go.Panel, "Horizontal", // the header
{ defaultAlignment: go.Spot.Top, padding: new go.Margin(8, 4)},
// $(go.Shape, "RoundedRectangle", { parameter1: 2, fill: "#009688", stroke: "#00897b" }),
$("SubGraphExpanderButton"), // this Panel acts as a Button
$(go.TextBlock, // group title near top, next to button
{ font: "Bold 12pt Sans-Serif", margin: new go.Margin(0, 4) },
new go.Binding("text", "key", (data) => {
return `Table: ${data}`
})
)
),
$(go.TextBlock, "File Box"),
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle", { fill: null }),
$(go.Placeholder)
)
);
const tableContainerSecond = $(go.Group, "Auto", { layout: new TableLayout(({ cellSize: new go.Size(100, 50) }))},
$(go.Shape, "RoundedRectangle", { parameter1: 0, fill: "#009688", stroke: "#00897b"},
),
$(go.Panel, 'Vertical', { padding: 2, },
$(go.Panel, "Horizontal", // the header
{ defaultAlignment: go.Spot.Top, padding: new go.Margin(8, 4)},
$("SubGraphExpanderButton"), // this Panel acts as a Button
$(go.TextBlock, // group title near top, next to button
{ font: "Bold 12pt Sans-Serif", margin: new go.Margin(0, 4) },
new go.Binding("text", "key", (data) => {
return `Table: ${data}`
})
)
),
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle", { fill: null, stroke:"" }),
$(go.Placeholder, { background: "#e0f2f1" })
)
)
);
var groupTemplateMap = new go.Map();
groupTemplateMap.add("veriticalLayout", nestedGroup);
groupTemplateMap.add("tableContainer", tableContainerSecond);
groupTemplateMap.add("", nestedGroup);
myDiagram.groupTemplateMap = groupTemplateMap;
const showLinks = (node, diagram) => {
diagram.startTransaction("reveal links")
const itemData = node.data;
linkDataArray.forEach((link) => {
if(itemData.key === link.to || itemData.key === link.from ){
diagram.model.addLinkData({...link});
}
});
diagram.commitTransaction("reveal links")
}
myDiagram.addDiagramListener("ChangedSelection", function(e) {
// Your event handling code here
var selectedNodes = myDiagram.selection;
var diag = e.diagram
diag.model.linkDataArray =[]
showLinks( e.subject.first(), diag)
});
const linkDataArray = [
{from:"Beta",to:"G2N1"},
{from:"Beta",to:"G2N2"},
{from:"Beta",to:"G2N1"},
{from:"Beta",to:"G2N1"},
{from:"Beta",to:"G2N3"},
{from:"Beta",to:"G2N3"},
{from:"Beta",to:"G2N3"},
{from:"Beta",to:"G2N4"},
{from:"Beta",to:"G2N4"},
{from:"Beta",to:"G2N4"},
{from:"Beta",to:"G2N"},
{from:"Beta",to:"G2N1"},
{from:"Beta",to:"Alpha"},
{from:"Beta",to:"Alpha"},
{from:"Beta",to:"Alpha"},
{from:"Beta",to:"Alpha"},
{from:"Delta",to:"Gamma"},
{from:"Delta",to:"Gamma"},
{from:"Delta",to:"Gamma"},
{from:"Gamma",to:"Delta"},
{from:"Gamma",to:"Gamma"},
{from:"Alpha",to:"Alpha"},
{from:"Alpha",to:"Alpha"},
]
myDiagram.model = new go.GraphLinksModel(
[
{ key: 'File', isGroup: true, category:"tableContainer"},
{ key: 'Alpha', row: 1, col: 1, color: 'lightblue', group: "File" },
{ key: 'Beta', row: 0, col: 1, group: 'G', color: 'orange' },
{ key: 'Gamma', row: 1, col: 2, group: 'G', color: 'lightgreen'},
{ key: 'Delta', row: 1, col: 0, color: 'pink', group: "File" },
{ key: 'G', isGroup: true, group: "File", isSubGraphExpanded:false, row: 2, column:1, colSpan: 3 },
{ key: 'G2', isGroup: true, category:"tableContainer"},
{ key: 'G2N1', row: 0, col: 1, group: 'G2', color: 'orange' },
{ key: 'G2N2', row: 0, col: 2, group: 'G2', color: 'orange' },
{ key: 'G2N3', row: 1, col: 1, group: 'G2', color: 'orange' },
{ key: 'G2N3', row: 1, col: 2, group: 'G2', color: 'orange' },
],
linkDataArray
);
} // end init
init();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.