Layered layout small

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")),
    $(go.TextBlock, {
        minSize: new...