Gojs additional cases
by saurabhkolhe
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go.js"></script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:650px"></div>
</div>
<! This is diagram chart template >
JavaScript
function init() {
const $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv", {
"undoManager.isEnabled": true,
});
myDiagram.nodeTemplate = $(
go.Node,
"Vertical",
{
//isTreeExpanded: false,
selectable: true,
selectionAdorned: false,
},
$(
go.Panel,
"Auto",
$(
go.Panel,
"Table",
$(
go.Panel,
"Auto",
$(go.Shape, "Rectangle", {
fill: "yellow",
name: "SHAPE",
height: 40,
click: (e, shape) => {
const node = shape.part;
if (node instanceof go.Node) {
node.expandTree();
}
},
contextClick: (e, shape) => {
const node = shape.part;
if (node instanceof go.Node) {
node.collapseTree();
}
}
})
),
$(
go.TextBlock,
{
textAlign: "center",
verticalAlignment: go.Spot.Bottom,
row: 2,
width: 150,
height: 30,
},
new go.Binding("text", "name")
)
)
)
);
// define the Link template
myDiagram.linkTemplate = $(
go.Link,
{
layerName: "Background",
corner: 5,
},
$(go.Shape, {
name: "LINK",
strokeWidth: 1.5,
stroke: "black",
}),
$(
go.Shape, // the "to" arrowhead
{ scale: 1, fill: "#D4B52C", toArrow: "Standard" }
)
);
myDiagram.layout = $(go.ForceDirectedLayout, {
defaultSpringLength: 30,
defaultElectricalCharge: 200,
});
load();
myDiagram.addDiagramListener("InitialLayoutCompleted", () => {
myDiagram.zoomToFit();
});
} // end init
function load() {
var nodeDataArray = [
{
key: 0,
name: "Demo Assembly Component ID-0",
visible: false
},
{
key: 1,
name: "Demo Assembly...