NEW DIAGRAM LAYOUT

by saurabhkolhe

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:650px"></div>

</div>

<! This is layered layout >

JavaScript

init();

function init() {
  const $ = go.GraphObject.make;
  myDiagram =
    $(
      go.Diagram, "myDiagramDiv", // must be the ID or reference to div
      {

        "undoManager.isEnabled": true // enable undo & redo
      });

 /* myDiagram.nodeTemplate =*/
 var defaultTempl = 
    $(go.Node, "Auto", {
        layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
      },
      $(go.Shape, "Rectangle", {
          name: "SHAPE",
          height: 40
        },
        new go.Binding("fill", "color")),
      $(go.TextBlock, {minSize: new go.Size(50, 16),
      textAlign: "center"},
        new go.Binding("text", "name"))
    );
    
    var assyTempl = $(go.Node, "Auto", {
        layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
        mouseEnter: (e, node) => node.findObject("BUTTON").opacity = node.findObject("BUTTONX").opacity = 1,
        mouseLeave: (e, node) => node.findObject("BUTTON").opacity = node.findObject("BUTTONX").opacity = 0
      },
      $(go.Shape, "Rectangle", {
          name: "SHAPE",
          height: 40,
          fill: "lightgreen"
        }),
       // new go.Binding("fill", "color")),
      $(go.TextBlock, {minSize: new go.Size(50, 16),
      textAlign: "center"},
        new go.Binding("text", "name")),
        $("TreeExpanderButton",
        {
          name: "BUTTONX", alignment: go.Spot.Bottom, opacity: 0,  // initially not visible
          "_treeExpandedFigure": "TriangleUp",
          "_treeCollapsedFigure": "TriangleDown"
        },
        // button is visible either when node is selected or on mouse-over
        new go.Binding("opacity", "isSelected", s => s ? 1 : 0).ofObject()
      )
    );
    
    var partTempl= $(go.Node, "Auto", {
        layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
      },
      $(go.Shape, "Rectangle", {
          name: "SHAPE",
          height: 40,
          fill: "lightyellow"
        }),
       // new go.Binding("fill", "color")),
    ...